/* =====================================================================
   Cover The Gaps — /for-students/  ·  page-specific styles
   Extends the shared landing system (index_v2.css). Same tokens/fonts/
   atoms. Lighter, more playful (gamification), copy stays ≤ B1.
   Adds: invite strip · gamified hero · pain cards · character-sheet
   wow block · "your mistakes" block · tools showcase · social feed.
   ===================================================================== */

/* ---- accent: a friendly second colour for XP / streak flourishes ---- */
:root { --xp: #f59e0b; --xp-deep: #d97706; }

/* =====================================================================
   2 · INVITE STRIP  (above nav, reacts to ?invite= / ?ref= token)
   ===================================================================== */
.invite {
  position: fixed; inset: 0 0 auto; z-index: 90; min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 18px; background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 600; text-align: center;
}
.invite__ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,107,53,.18); color: var(--orange); flex: none; }
.invite__ico svg { width: 15px; height: 15px; }
.invite b { color: #fff; font-weight: 800; }
.invite__btn {
  display: inline-flex; align-items: center; gap: 7px; background: var(--orange); color: #fff;
  border: 0; border-radius: 999px; padding: 7px 16px; font-family: var(--font-text);
  font-size: 13.5px; font-weight: 800; text-decoration: none; cursor: pointer; white-space: nowrap; transition: .15s var(--ease);
}
.invite__btn:hover { background: var(--orange-deep); }
.invite__btn svg { width: 15px; height: 15px; }
.invite__close { background: none; border: 0; color: var(--night-dim); cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 6px; }
.invite__close:hover { color: #fff; background: rgba(255,255,255,.08); }
.invite--open { background: linear-gradient(100deg, var(--ink) 0%, var(--night-2) 100%); }
.lp.has-invite .nav { top: 44px; }
.lp.no-invite .invite { display: none; }
@media (max-width: 760px) {
  .invite { font-size: 12.5px; gap: 8px; padding: 7px 12px; }
  .invite__txt-long { display: none; }
}

/* =====================================================================
   3 · HERO  (gamified — character sheet visual)
   ===================================================================== */
.lp.has-invite .hero { padding-top: 188px; }
.hero__lead .pill-free { color: var(--orange-deep); font-weight: 800; }

/* character-sheet card (shared look, reused in blocks 3 & 5) */
.sheet { font-size: 13px; }
.sheet__hero { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; }
.sheet__avatar { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--app-primary), #7c6cf5); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px; flex: none; }
.sheet__id b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.sheet__id span { font-size: 11.5px; color: var(--app-ink-3); font-weight: 600; }
.sheet__lvl { margin-left: auto; text-align: right; }
.sheet__lvl b { font-size: 19px; font-family: var(--font-display); color: var(--app-primary); }
.sheet__lvl span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--app-ink-3); }
.mu-skill .lab { display: inline-flex; align-items: center; gap: 6px; }
.mu-skill .lab svg { width: 13px; height: 13px; color: var(--app-ink-3); }
.sheet__bars { display: grid; gap: 2px; }
.sheet__badges { display: flex; gap: 7px; flex-wrap: wrap; }
.sheet__badge { display: inline-flex; align-items: center; gap: 6px; background: var(--app-bg); border: 1px solid var(--app-border); border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 700; color: var(--app-ink-2); }
.sheet__badge svg { width: 13px; height: 13px; }
.sheet__badge.gold { background: #fff7e6; border-color: #f3dca6; color: var(--xp-deep); }
.sheet__badge.gold svg { color: var(--xp); }

/* =====================================================================
   4 · PAIN — the week between lessons
   ===================================================================== */
.gap-sec { background: var(--paper-2); border-block: 1px solid var(--line); }
.gap-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.gap-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); text-align: left; }
.gap-card__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-3); display: grid; place-items: center; }
.gap-card__ico svg { width: 21px; height: 21px; }
.gap-card b { display: block; font-size: 16px; font-weight: 800; margin-top: 15px; letter-spacing: -.01em; }
.gap-card p { color: var(--ink-2); font-size: 14px; margin-top: 6px; }
.gap-name { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 800; color: var(--ink); font-family: var(--font-display); font-size: 17px; }
.gap-name svg { width: 18px; height: 18px; color: var(--orange-deep); }
@media (max-width: 760px) { .gap-cards { grid-template-columns: 1fr; } }

/* =====================================================================
   5 · CHARACTER SHEET WOW BLOCK (animated)
   ===================================================================== */
.level { background: var(--night); color: var(--night-text); padding: 100px 0; position: relative; overflow: clip; }
.level::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(820px 460px at 50% -10%, rgba(245,158,11,.12), transparent 65%); }
.level .eyebrow { color: var(--xp); }
.level .s-title, .level .s-sub { color: var(--night-text); }
.level .s-sub { color: var(--night-dim); }
.level__stage { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; align-items: center; }

/* left: interactive exercise → XP tick */
.lvl-demo { background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--r-xl); padding: 22px; position: relative; }
.lvl-demo__q { font-size: 15.5px; font-weight: 700; line-height: 1.7; }
.lvl-demo__q .blank { display: inline-block; min-width: 78px; border-bottom: 2px solid var(--xp); color: var(--xp); text-align: center; font-weight: 800; padding: 0 6px; }
.lvl-demo__q .blank.done { color: #45d18a; border-color: #45d18a; }
.lvl-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lvl-choice { border: 1px solid var(--night-line); background: rgba(255,255,255,.05); color: var(--night-text); font-family: var(--font-text); font-size: 13.5px; font-weight: 700; border-radius: 10px; padding: 9px 16px; cursor: pointer; transition: .15s var(--ease); }
.lvl-choice:hover { border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.1); }
.lvl-choice.right { border-color: #45d18a; background: rgba(10,143,83,.18); color: #8ff0bd; }
.lvl-choice.wrong { border-color: #ff7a98; background: rgba(214,31,73,.16); color: #ffb3c4; opacity: .8; }
.lvl-choice:disabled { cursor: default; }
.lvl-xp-float {
  position: absolute; right: 26px; top: 60px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--xp);
  opacity: 0; pointer-events: none;
}
.lvl-xp-float.go { animation: xpfloat 1.1s var(--ease) forwards; }
@keyframes xpfloat { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) scale(1.05); } }
.lvl-demo__replay { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--night-line); color: var(--night-dim); border-radius: 999px; padding: 8px 16px; font-family: var(--font-text); font-size: 13px; font-weight: 700; cursor: pointer; transition: .15s; }
.lvl-demo__replay:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.lvl-demo__replay svg { width: 14px; height: 14px; }

/* right: the sheet that updates */
.lvl-sheet { background: var(--app-surface); color: var(--app-ink); border-radius: var(--r-xl); padding: 20px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); }
.lvl-xpbar { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 800; color: var(--app-ink-2); margin: 4px 0 14px; }
.lvl-xpbar .mu-bar { flex: 1; height: 8px; }
.lvl-xpbar .mu-bar i { background: linear-gradient(90deg, var(--xp), var(--orange)); transition: width .9s var(--ease); }
.lvl-sheet .mu-bar i { transition: width .9s var(--ease); }
.lvl-streakrow { display: flex; gap: 8px; margin-bottom: 14px; }
.lvl-streakrow div { flex: 1; text-align: center; background: var(--app-bg); border: 1px solid var(--app-border); border-radius: 11px; padding: 9px 4px; }
.lvl-streakrow b { display: block; font-size: 15px; font-family: var(--font-display); }
.lvl-streakrow span { font-size: 9.5px; color: var(--app-ink-3); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.skill-up { color: var(--app-green); font-weight: 800; font-size: 10px; opacity: 0; transition: opacity .3s; }
.skill-up.go { opacity: 1; }
@media (max-width: 820px) { .level__stage { grid-template-columns: 1fr; } }

/* =====================================================================
   6 · YOUR MISTAKES  (remediation, student-eyes)
   ===================================================================== */
.mistakes__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px; align-items: center; }
.mistakes__copy .s-title { margin-top: 12px; }
.mistakes__copy p { color: var(--ink-2); margin-top: 16px; }
.mistakes__kicker { margin-top: 22px; font-weight: 800; color: var(--ink); font-family: var(--font-display); font-size: 17px; }
.mistakes__kicker em { font-style: normal; color: var(--orange-deep); }
.mu-explain { background: var(--app-primary-50); border: 1px solid #d7d9fb; border-radius: 11px; padding: 12px 13px; }
.mu-explain b { font-size: 12px; font-weight: 800; color: var(--app-primary); }
.mu-explain p { font-size: 12px; color: var(--app-ink-2); margin-top: 4px; line-height: 1.5; }
.mu-retry { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--app-green); }
.mu-retry svg { width: 14px; height: 14px; }
@media (max-width: 920px) { .mistakes__grid { grid-template-columns: 1fr; gap: 40px; } }

/* =====================================================================
   7 · TOOLS SHOWCASE
   ===================================================================== */
.tools-sec { background: var(--paper-2); border-block: 1px solid var(--line); }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.tool-card {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.tool-card__top { display: flex; align-items: center; gap: 11px; }
.tool-card__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--orange-ghost); border: 1px solid var(--orange-soft); color: var(--orange-deep); display: grid; place-items: center; flex: none; }
.tool-card__ico svg { width: 21px; height: 21px; }
.tool-card__free { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--app-green); background: var(--app-green-bg); border-radius: 999px; padding: 4px 10px; }
.tool-card__free.acct { color: var(--ink-3); background: var(--paper-2); }
.tool-card b { display: block; font-size: 16px; font-weight: 800; margin-top: 15px; letter-spacing: -.01em; }
.tool-card p { color: var(--ink-2); font-size: 13.5px; margin-top: 6px; flex: 1; }
.tool-card__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 800; color: var(--orange-deep); }
.tool-card__go svg { width: 15px; height: 15px; transition: transform .18s var(--ease); }
.tool-card:hover .tool-card__go svg { transform: translateX(3px); }
.tools-cta { margin-top: 32px; display: flex; justify-content: center; }
@media (max-width: 900px) { .tools-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tools-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   8 · SOCIAL FEED + CORRECTIONS
   ===================================================================== */
.social__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px; align-items: center; }
.social__copy .s-title { margin-top: 12px; }
.social__copy p { color: var(--ink-2); margin-top: 16px; }
.social__caption { margin-top: 24px; font-weight: 800; color: var(--ink); font-family: var(--font-display); font-size: 17px; }
.post { background: var(--app-surface); }
.post__head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; }
.post__av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#34d399,#0a8f53); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.post__who b { font-size: 13px; font-weight: 800; }
.post__who span { font-size: 11px; color: var(--app-ink-3); }
.post__body { font-size: 14px; line-height: 1.9; color: var(--app-ink); }
.corr { position: relative; }
.corr .old { text-decoration: line-through; text-decoration-color: var(--app-rose); color: var(--app-ink-3); }
.corr .new { color: var(--app-green); font-weight: 800; background: var(--app-green-bg); border-radius: 5px; padding: 0 5px; }
.corr-note { margin-top: 12px; display: flex; gap: 9px; align-items: flex-start; background: var(--app-green-bg); border: 1px solid #bfe6d1; border-radius: 11px; padding: 11px 13px; }
.corr-note svg { width: 16px; height: 16px; color: var(--app-green); flex: none; margin-top: 1px; }
.corr-note b { font-size: 12px; font-weight: 800; color: var(--app-green); }
.corr-note p { font-size: 12px; color: var(--app-ink-2); margin-top: 2px; }
.post__foot { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--app-bg); font-size: 12px; font-weight: 700; color: var(--app-ink-3); }
.post__foot span { display: inline-flex; align-items: center; gap: 6px; }
.post__foot svg { width: 14px; height: 14px; }
@media (max-width: 920px) { .social__grid { grid-template-columns: 1fr; gap: 40px; } }