/* ============================================================
   Reasoning & Quants Academy — core design system
   Tokens → reset → primitives → components
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Warm neutral scale — the academy's paper */
  --canvas:      #faf7f2;
  --surface:     #ffffff;
  --surface-2:   #f6f1e9;
  --line:        #e9e1d5;
  --line-strong: #d8ccb9;

  --ink:         #1d1815;
  --ink-2:       #5f564c;
  --ink-3:       #938878;

  /* Heritage brand — the academy itself */
  --brand:       #8c3b2e;
  --brand-deep:  #67271d;
  --brand-tint:  #f8eae6;

  /* Each academy gets its own identity */
  --reason:      #6b4c9a;
  --reason-deep: #4e3573;
  --reason-tint: #f1ecf9;
  --quant:       #2f7d8c;
  --quant-deep:  #1f5b67;
  --quant-tint:  #e8f4f6;

  /* Achievement + semantics */
  --gold:        #c8901a;
  --gold-tint:   #fdf3dc;
  --good:        #3e7d4f;
  --good-tint:   #e6f2ea;
  --bad:         #b3261e;
  --bad-tint:    #fcebe9;

  /* Type */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Space — 4px base */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Shape + depth */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(45,30,20,.05), 0 2px 8px rgba(45,30,20,.05);
  --shadow-2: 0 2px 4px rgba(45,30,20,.06), 0 8px 24px rgba(45,30,20,.09);
  --shadow-3: 0 12px 40px rgba(45,30,20,.16);

  /* Motion — quick for micro, calm for panels */
  --t-fast: 140ms cubic-bezier(.4,0,.2,1);
  --t-mid:  260ms cubic-bezier(.4,0,.2,1);
  --t-pop:  420ms cubic-bezier(.34,1.56,.64,1);

  --maxw: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #16130f; --surface: #201b16; --surface-2: #2a231c;
    --line: #372e25; --line-strong: #4a3e32;
    --ink: #f3ede4; --ink-2: #bdb2a3; --ink-3: #8b8073;
    --brand: #d4705d; --brand-deep: #e08d7c; --brand-tint: #2e1f1a;
    --reason: #a98ad4; --reason-deep: #c0a8e3; --reason-tint: #241d33;
    --quant: #5cb4c4; --quant-deep: #7fcbd8; --quant-tint: #16292e;
    --gold: #e2ac3f; --gold-tint: #2d2313;
    --good: #6bbd84; --good-tint: #16261b;
    --bad: #e8756a; --bad-tint: #2d1614;
    --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
    --shadow-2: 0 2px 4px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-3: 0 12px 40px rgba(0,0,0,.5);
  }
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  /* Full-bleed decoration is sized in vw, which counts the scrollbar on some
     browsers. Clip on x so that can never become a sideways scroll. `clip`
     rather than `hidden`: hidden would make this a scroll container and break
     `position: sticky` further down the page. */
  overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 3. TYPE ---------- */
h1, h2, h3, h4 { line-height: 1.22; letter-spacing: -.02em; font-weight: 750; }
h1 { font-size: clamp(28px, 4.4vw, 44px); }
h2 { font-size: clamp(21px, 2.6vw, 28px); }
h3 { font-size: 18px; }
.lede { font-size: clamp(16px, 1.6vw, 18.5px); color: var(--ink-2); line-height: 1.62; }
.eyebrow {
  font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.muted { color: var(--ink-2); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- 4. LAYOUT ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s4); }
.wrap-narrow { max-width: 720px; margin-inline: auto; padding-inline: var(--s4); }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.grid { display: grid; gap: var(--s4); }
.spacer { flex: 1; }
.hidden { display: none !important; }

/* ---------- 5. TOP BAR ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__in { display: flex; align-items: center; gap: var(--s4); height: 62px; }
.brandmark { display: flex; align-items: center; gap: var(--s2); font-weight: 800; letter-spacing: -.02em; }
.brandmark svg { width: 30px; height: 30px; flex: none; }
.brandmark span { font-size: 15.5px; }
.brandmark small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1; margin-top: 2px; }

/* streak / xp pills in the bar */
.stat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 750;
}
.stat-pill b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.stat-pill--fire { background: var(--gold-tint); border-color: color-mix(in srgb, var(--gold) 35%, transparent); color: var(--gold); }
.stat-pill--xp   { background: var(--reason-tint); border-color: color-mix(in srgb, var(--reason) 30%, transparent); color: var(--reason); }

/* ---------- 6. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 12px 22px; border-radius: var(--r-md);
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  background: var(--accent, var(--brand)); color: #fff;
  border: 1px solid transparent;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  box-shadow: var(--shadow-1);
}
.btn:hover  { background: var(--accent-deep, var(--brand-deep)); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--quiet { background: transparent; color: var(--ink-2); box-shadow: none; padding-inline: 12px; }
.btn--quiet:hover { background: var(--surface-2); color: var(--ink); transform: none; }
.btn--lg { padding: 15px 30px; font-size: 16.5px; border-radius: var(--r-lg); }
.btn--sm { padding: 8px 15px; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn--reason { background: var(--reason); } .btn--reason:hover { background: var(--reason-deep); }
.btn--quant  { background: var(--quant); }  .btn--quant:hover  { background: var(--quant-deep); }

/* ---------- 7. CARD ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5);
  box-shadow: var(--shadow-1);
}
.card--flat { box-shadow: none; }
.card--pad-sm { padding: var(--s4); }

/* ---------- 8. ACADEMY GATEWAY CARDS (home) ---------- */
.gateway { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 780px) { .gateway { grid-template-columns: 1fr; } }
.gate {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: var(--s6) var(--s5) var(--s5);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
  display: block;
}
.gate:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.gate::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--accent);
}
.gate::after {
  content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px;
  border-radius: 50%; background: var(--accent); opacity: .07; transition: transform var(--t-mid);
}
.gate:hover::after { transform: scale(1.25); }
.gate--reason { --accent: var(--reason); } .gate--reason:hover { border-color: var(--reason); }
.gate--quant  { --accent: var(--quant); }  .gate--quant:hover  { border-color: var(--quant); }
.gate__icon { width: 58px; height: 58px; margin-bottom: var(--s4); position: relative; }
.gate h2 { margin-bottom: var(--s2); }
.gate__meta { display: flex; gap: var(--s4); margin-top: var(--s4); font-size: 13px; color: var(--ink-3); font-weight: 700; }
.gate__go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s5);
  font-weight: 750; font-size: 14.5px; color: var(--accent); }
.gate:hover .gate__go .arw { transform: translateX(4px); }
.arw { transition: transform var(--t-fast); display: inline-block; }

/* ---------- 9. PROGRESS ---------- */
.bar { height: 9px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent, var(--brand));
  transition: width var(--t-mid); }

.ring { --pct: 0; --accent: var(--brand); width: 52px; height: 52px; flex: none; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring .trk { stroke: var(--surface-2); }
.ring .val { stroke: var(--accent); stroke-linecap: round;
  stroke-dasharray: var(--circ); stroke-dashoffset: calc(var(--circ) - var(--circ) * var(--pct) / 100);
  transition: stroke-dashoffset var(--t-mid); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; font-family: var(--mono); }

/* ---------- 10. PATH GAMEBOARD ---------- */
.unit { margin-bottom: var(--s7); }
.unit__head { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s5); }
.unit__num {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: var(--accent-tint); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--s4); }

.tile {
  position: relative; display: block; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4) var(--s4) var(--s3);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.tile__top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.tile__badge {
  width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent); font-weight: 800; font-size: 15px;
}
.tile h3 { font-size: 15.5px; line-height: 1.32; letter-spacing: -.01em; }
.tile p { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.tile__foot { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); font-weight: 700; }

.tile--done { border-color: color-mix(in srgb, var(--good) 42%, transparent); }
.tile--done .tile__badge { background: var(--good-tint); color: var(--good); }
.tile--locked { opacity: .55; pointer-events: none; box-shadow: none; }
.tile--locked .tile__badge { background: var(--surface-2); color: var(--ink-3); }
.tile--soon { border-style: dashed; box-shadow: none; }
.tile--soon:hover { transform: none; border-color: var(--line-strong); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 750; letter-spacing: .01em;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
}
.chip--new  { background: var(--gold-tint); color: var(--gold); border-color: color-mix(in srgb, var(--gold) 32%, transparent); }
.chip--done { background: var(--good-tint); color: var(--good); border-color: color-mix(in srgb, var(--good) 32%, transparent); }

/* ---------- 10b. CHAPTER TIMELINE ---------- */
/* Sequenced, not gated: the order is drawn plainly and every built lesson
   stays clickable. Chapters fold so a 33-lesson academy stays readable. */
.path { display: grid; gap: var(--s3); margin-bottom: var(--s7); }

.chap { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.chap.is-current { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.chap.is-complete .chap__num { background: var(--good-tint); color: var(--good);
  border-color: color-mix(in srgb, var(--good) 30%, transparent); }

.chap__head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s4); width: 100%; text-align: left; cursor: pointer;
  padding: var(--s4) var(--s5) calc(var(--s4) - 4px);
  background: none; border: 0; font: inherit; color: var(--ink);
  transition: background var(--t-fast);
}
.chap__head:hover { background: var(--surface-2); }
.chap__head:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

.chap__num {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: var(--accent-tint); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.chap__txt b { display: block; font-size: 18px; letter-spacing: -.01em; line-height: 1.25; }
.chap__txt em { display: block; font-style: normal; font-size: 13.5px; color: var(--ink-2);
  line-height: 1.45; margin-top: 2px; }

.chap__right { display: flex; align-items: center; gap: var(--s3); }
.chap__now { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent); }
.chap__count { font-family: var(--mono); font-size: 12.5px; font-weight: 800; color: var(--ink-3); white-space: nowrap; }
.chap__chev { width: 20px; height: 20px; flex: none; color: var(--ink-3);
  transform: rotate(-90deg); transition: transform var(--t-fast); }
.chap.is-open .chap__chev { transform: rotate(0deg); }

/* one segment per lesson — the whole chapter's state at a glance, folded or not */
.chap__bars { grid-column: 1 / -1; display: flex; gap: 3px; margin-top: var(--s3); }
.chap__bars i { height: 4px; flex: 1; border-radius: 2px; background: var(--line-strong); }
.chap__bars i.is-done { background: var(--good); }
.chap__bars i.is-todo { background: var(--line-strong); }
.chap__bars i.is-soon { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* grid-rows 0fr→1fr animates a fold without hardcoding a height */
.chap__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-mid) ease; }
.chap.is-open .chap__body { grid-template-rows: 1fr; }
.chap__body > div { overflow: hidden; }

/* chapter practice — sits under the spine, inside the fold */
.chap__foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin: 0 var(--s5) var(--s5); padding-top: var(--s4); border-top: 1px dashed var(--line-strong); }
.chap__foot-note { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 620px) { .chap__foot-note { display: none; } }

/* the spine */
.tl { position: relative; list-style: none; padding: var(--s2) var(--s5) var(--s5); }
.tl::before { content: ""; position: absolute; left: calc(var(--s5) + 9px); top: 26px; bottom: 34px;
  width: 2px; background: var(--line-strong); border-radius: 1px; }

.tl__i { position: relative; padding-left: 34px; }
.tl__i + .tl__i { margin-top: 6px; }
.tl__dot {
  position: absolute; left: 3px; top: 21px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--line-strong); z-index: 1;
}
.tl__i.is-done .tl__dot { background: var(--good); border-color: var(--good); }
.tl__i.is-here .tl__dot { background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint); }
.tl__i.is-soon .tl__dot { border-style: dashed; border-color: var(--line); }

.tl__row {
  display: flex; align-items: center; gap: var(--s3);
  padding: 11px var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
a.tl__row:hover { border-color: var(--accent); transform: translateX(2px); }
.tl__i.is-here .tl__row { border-width: 2px; border-color: var(--accent); background: var(--accent-tint); }
.tl__i.is-done .tl__row { border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.tl__row--soon { border-style: dashed; opacity: .72; }

.tl__badge { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; background: var(--surface-2); color: var(--ink-3); }
.tl__i.is-done .tl__badge { background: var(--good-tint); color: var(--good); }
.tl__i.is-here .tl__badge { background: var(--accent); color: #fff; }
.tl__txt { flex: 1; min-width: 0; }
.tl__txt b { display: block; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; }
.tl__txt em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-2);
  line-height: 1.45; margin-top: 1px; }
.tl__meta { flex: none; }
.tl__mins { font-size: 12px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }

@media (max-width: 600px) {
  .chap__head { padding: var(--s4); gap: var(--s3); }
  .chap__txt b { font-size: 16px; }
  .chap__txt em { display: none; }
  .chap__now { display: none; }
  .tl { padding: var(--s2) var(--s4) var(--s4); }
  .tl::before { left: calc(var(--s4) + 9px); }
  .tl__txt em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chap__body { transition: none; }
  a.tl__row:hover { transform: none; }
}

/* ---------- 11. ACADEMY THEMING HOOKS ---------- */
.theme-reason { --accent: var(--reason); --accent-deep: var(--reason-deep); --accent-tint: var(--reason-tint); }
.theme-quant  { --accent: var(--quant);  --accent-deep: var(--quant-deep);  --accent-tint: var(--quant-tint); }
.theme-brand  { --accent: var(--brand);  --accent-deep: var(--brand-deep);  --accent-tint: var(--brand-tint); }

/* ---------- 11b. LEARNER SWITCHER ---------- */
/* Local profiles, not accounts. Styled as a quiet chip rather than a sign-in
   button, because promising an account it cannot keep would be the wrong promise. */
.who { position: relative; flex: none; }
.who__btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 9px 0 5px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease; }
.who__btn:hover { background: var(--surface-2); border-color: var(--brand); }
.who__av { display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  border-radius: 50%; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 800;
  letter-spacing: .02em; }
.who__av--sm { width: 21px; height: 21px; font-size: 9.5px; background: var(--ink-3); }
.who__item.is-on .who__av--sm { background: var(--brand); }
.who__name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who__chev { width: 14px; height: 14px; color: var(--ink-3); transition: transform var(--t-fast) ease; }
.who.is-open .who__chev { transform: rotate(180deg); }

.who__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 258px;
  padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease, visibility var(--t-fast); }
.who.is-open .who__menu { opacity: 1; visibility: visible; transform: none; }
.who__lab { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); padding: 2px 8px var(--s2); }
.who__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 650; text-align: left; cursor: pointer; }
.who__item:hover { background: var(--surface-2); }
.who__item em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.who__item--bad { color: var(--bad); }
.who__plus { display: grid; place-items: center; width: 21px; height: 21px; flex: none;
  border-radius: 50%; background: var(--surface-2); color: var(--ink-3); font-size: 12px; font-weight: 800; }
.who__sep { height: 1px; margin: var(--s2) 8px; background: var(--line); }
.who__note { padding: var(--s2) 8px 2px; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 620px) {
  .who__name { display: none; }
  .who__btn { padding: 0 6px 0 5px; }
  .stat-pill--goal { display: none; }
}
/* On a phone the bar holds a wordmark, three pills and the learner chip, which
   is more than 375px of room. Hiding the name and the goal pill was not enough —
   the chip still pushed 7px past the edge, taking the whole page with it. The
   wordmark goes too; the logo alone still gets you home. */
@media (max-width: 430px) {
  .brandmark span { display: none; }
  .topbar__in { gap: var(--s3); }
  .stat-pill { padding: 0 8px; }
}

/* ---------- 11a. TRACK + ACHIEVEMENTS ----------
   The motivation layer. Deliberately restrained: progress a learner can read,
   not a scoreboard to defend. See achievements.js for why there are no
   leagues here. */
.track, .badges { padding: var(--s5); border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); }
.track__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
  justify-content: space-between; margin-bottom: var(--s4); }
.track__list { list-style: none; display: grid; gap: var(--s2); margin: 0; padding: 0; }
.track__i { display: flex; align-items: center; gap: var(--s3); text-decoration: none;
  color: inherit; padding: var(--s3) var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2);
  transition: border-color var(--t-fast) ease, transform var(--t-fast) ease; }
.track__i:hover { border-color: var(--brand); transform: translateX(3px); }
.track__i--review  { border-left: 3px solid var(--gold); }
.track__i--mock    { border-left: 3px solid var(--ink); }
.track__i--shore   { border-left: 3px solid var(--bad); }
.track__i--reteach { border-left: 3px solid var(--bad); }
.track__i--learn, .track__i--start { border-left: 3px solid var(--brand); }
.track__i--done   { border-left: 3px solid var(--good); }
.track__n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid;
  place-items: center; font-size: 12px; font-weight: 800;
  background: var(--brand-tint); color: var(--brand); }
.track__txt { flex: 1; min-width: 0; }
.track__txt b { display: block; font-size: 14.5px; line-height: 1.35; }
.track__txt em { font-style: normal; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.track__go { flex: none; color: var(--ink-3); font-weight: 700; }
.track__i:hover .track__go { color: var(--brand); }

.badges__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s3); }
.badge { display: flex; flex-direction: column; gap: 3px; padding: var(--s4) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
  text-align: center; align-items: center; opacity: .62; }
.badge.is-on { opacity: 1; background: var(--gold-tint);
  border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.badge__ico { font-size: 22px; font-style: normal; line-height: 1.2;
  filter: grayscale(1); }
.badge.is-on .badge__ico { filter: none; }
.badge__name { font-size: 12.5px; line-height: 1.3; }
.badge__blurb { font-style: normal; font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.badge__on { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); margin-top: 2px; }
.badge__bar { display: block; width: 100%; height: 4px; border-radius: 999px;
  background: var(--line); overflow: hidden; margin-top: 5px; }
.badge__bar i { display: block; height: 100%; background: var(--ink-3); border-radius: 999px; }
.badge__prog { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

/* Badges announced on a finish screen. */
.done__badges { margin-top: var(--s5); display: grid; gap: var(--s2); justify-items: center; }
.wonbadge { display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
  border-radius: 999px; background: var(--gold-tint);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.wonbadge i { font-style: normal; font-size: 20px; }
.wonbadge b { font-size: 14px; }
.wonbadge em { font-style: normal; font-size: 12px; color: var(--ink-3); }

/* ---------- 11b. PRACTICE BAR (academy pages) ----------
   Every chapter of ONE academy, in one row. The chip is the written set and
   the ∞ is the endless drill, so both live at the same address rather than
   being buried inside a folded chapter. */
.drillbar { margin: var(--s6) 0 var(--s7); padding: var(--s5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.drillbar__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
  margin-bottom: var(--s4); }
.drillbar__head b { font-size: 16px; letter-spacing: -.01em; }
.drillbar__head span { font-size: 13px; color: var(--ink-3); }
.drillbar__row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.dchip { display: inline-flex; align-items: stretch; border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; background: var(--surface-2);
  transition: border-color var(--t-fast) ease; }
.dchip:hover { border-color: var(--accent); }
.dchip__go { padding: 6px 12px; font-size: 13px; font-weight: 650; color: var(--ink);
  text-decoration: none; white-space: nowrap; }
.dchip__go:hover { color: var(--accent); }
.dchip__inf { display: grid; place-items: center; min-width: 30px; padding: 0 8px;
  font-size: 14px; font-weight: 800; text-decoration: none; color: var(--ink-3);
  border-left: 1px solid var(--line); }
.dchip__inf:hover { color: #fff; background: var(--accent); border-left-color: var(--accent); }
.dchip--soon { padding: 6px 12px; font-size: 13px; color: var(--ink-3);
  border-style: dashed; opacity: .7; }

/* ---------- 12. PAGE HERO ---------- */
.hero { padding: var(--s7) 0 var(--s6); }
.hero__kicker { display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.hero h1 { margin-bottom: var(--s3); max-width: 18ch; }
.hero .lede { max-width: 56ch; }

/* The landing hero earns more room than a section header: a soft field behind it,
   the headline larger, and a rule of numbers under it. Purely additive — every
   other .hero on the site is untouched. */
/* `overflow: clip` — not hidden, and no clip-margin. The glow is deliberately
   wider than the hero so its centres sit off to the sides; hidden would turn
   that bleed into a horizontal scrollbar, and a clip-margin would let the bleed
   back into the document width. Clipping to the box exactly costs nothing —
   the gradients have faded to transparent well before they reach the edges. */
.hero--home { position: relative; padding: var(--s8) 0 var(--s7); isolation: isolate; }

/* The wash behind the headline.
   Three things were wrong with the first attempt and each is worth stating,
   because they are easy to reintroduce:

   · it had a fixed `height: 560px`, unrelated to how tall the hero actually is,
     so it ended in a hard horizontal line part-way down the section;
   · `overflow: clip` on the hero clipped that bleed to the hero's own box —
     which is just the text column — so the -28vw never reached the viewport
     edge and left a pale strip down the right-hand side;
   · the radial centres sat 4–18% down, which put the colour change directly
     across "Learn it by doing it".

   Now it is tied to the hero's real height, spans the viewport exactly, fades
   out at the bottom instead of stopping, and all three centres sit ABOVE the
   headline so the transition happens in empty space. */
.hero--home::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: calc(var(--s7) * -1); bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  background:
    radial-gradient(62% 74% at 14% -14%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 72%),
    radial-gradient(54% 66% at 86% -18%, color-mix(in srgb, var(--reason) 14%, transparent), transparent 74%),
    radial-gradient(46% 40% at 60% -6%, color-mix(in srgb, var(--gold) 11%, transparent), transparent 76%);
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 42%, transparent 96%);
}
.hero--home h1 { max-width: 15ch; font-size: clamp(38px, 6.4vw, 62px); line-height: 1.03;
  letter-spacing: -.03em; }
.hero--home .lede { max-width: 60ch; font-size: clamp(16px, 1.7vw, 19px); }
.hero__mark { display: inline-block; position: relative; white-space: nowrap; }
.hero__mark::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -.02em; height: .2em;
  z-index: -1; border-radius: 3px; background: color-mix(in srgb, var(--gold) 55%, transparent); }

.hero__facts { display: flex; flex-wrap: wrap; gap: var(--s6); margin-top: var(--s6);
  padding-top: var(--s5); border-top: 1px solid var(--line); }
.hero__facts div { min-width: 78px; }
.hero__facts b { display: block; font-family: var(--mono); font-size: 26px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1; }
.hero__facts span { font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 620px) { .hero__facts { gap: var(--s5); } .hero__facts b { font-size: 22px; } }

/* ---------- 13. FOOTER ---------- */
.foot { border-top: 1px solid var(--line); margin-top: var(--s8); padding: var(--s5) 0 var(--s7);
  color: var(--ink-3); font-size: 13px; }
.foot a { color: var(--ink-2); font-weight: 650; }
.foot a:hover { color: var(--brand); }

/* ---------- 14. BETAAL ---------- */
.betaal { overflow: visible; }
.betaal .bt-body   { fill: var(--accent, var(--reason)); }
.betaal .bt-crown  { stroke: var(--gold); }
.betaal .bt-jewel  { fill: var(--gold); }
.betaal .bt-spark  { fill: #fff; opacity: .75; }
.betaal .bt-eyes   { fill: var(--surface); stroke: var(--surface); }
.betaal .bt-mouth  { fill: var(--surface); stroke: var(--surface); }
.betaal .bt-shadow { fill: var(--ink); opacity: .07; }
.betaal .bt-float  { animation: bt-bob var(--float, 3.6s) ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes bt-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
.betaal--impressed .bt-jewel { animation: bt-glow 1.1s ease-in-out infinite; }
@keyframes bt-glow { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

.says { display: flex; align-items: flex-start; gap: var(--s3); }
.says__who { flex: none; }
.says__bubble {
  position: relative; flex: 1; min-width: 0;
  background: var(--accent-tint, var(--reason-tint));
  border: 1px solid color-mix(in srgb, var(--accent, var(--reason)) 22%, transparent);
  border-radius: var(--r-lg); border-top-left-radius: 6px;
  padding: var(--s4) var(--s4) var(--s4) var(--s5);
  transition: opacity var(--t-fast);
  animation: says-in var(--t-pop) both;
}
.says__bubble::before {
  content: ""; position: absolute; left: -7px; top: 16px; width: 14px; height: 14px;
  background: inherit; border-left: inherit; border-bottom: inherit; transform: rotate(45deg);
  border-radius: 0 0 0 4px;
}
.says__bubble.is-swapping { opacity: 0; }
.says__bubble p { font-size: 15.5px; line-height: 1.58; }
.says__bubble p + p { margin-top: var(--s2); }
.says__bubble b { color: var(--accent, var(--reason)); }
.says--compact .says__bubble { padding: var(--s3) var(--s4); }
.says--compact .says__bubble p { font-size: 14.5px; }
@keyframes says-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* ---------- 15. UTIL ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- 10c. REVIEW ---------- */
/* The queue used to name ideas and stop. This is the thing to press. */
.rev-go { display: block; width: 100%; text-align: center; margin-top: var(--s5); }


/* ---------- DASHBOARD ----------
   Moved out of the home page when the dashboard got a page of its own
   (progress/), so both pages draw it from one place. */
  .welcome { display: grid; grid-template-columns: 1fr 320px; gap: var(--s6); align-items: start; }
  @media (max-width: 900px) { .welcome { grid-template-columns: 1fr; } }
  .dash { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
  @media (min-width: 1080px) { .dash { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
  @media (max-width: 940px) { .dash { grid-template-columns: 1fr 1fr; } .dash__main { grid-column: 1 / -1; } }
  @media (max-width: 620px) { .dash { grid-template-columns: 1fr; } }
  .dash__nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s5); }
  .dash__nums b { display: block; font-size: 21px; font-weight: 800; }
  .dash__nums span { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
  .trend { display: flex; align-items: flex-end; gap: 7px; height: 74px; margin: var(--s3) 0; }
  .tbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; }
  .tbar i { display: block; width: 100%; border-radius: 4px 4px 2px 2px; background: var(--brand); }
  .tbar span { font-size: 10px; font-weight: 700; color: var(--ink-3); }
  .qlist { list-style: none; display: grid; gap: 6px; }
  .qlist li { display: flex; align-items: center; gap: var(--s3); font-size: 14px; line-height: 1.4; }
  .box { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
         font-size: 11.5px; font-weight: 800; background: var(--surface-2); color: var(--ink-3); }
  .box--0, .box--1 { background: var(--bad-tint); color: var(--bad); }
  .box--2, .box--3 { background: var(--gold-tint); color: var(--gold); }
  .box--4, .box--5, .box--6 { background: var(--good-tint); color: var(--good); }
  .box--weak { background: var(--bad-tint); color: var(--bad); width: auto; padding: 0 8px; }
  /* A weak idea links back to where it was taught — see shell.js. */
  .mockmini { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s2); }
  .mockmini b { display: block; font-size: 21px; font-weight: 800; }
  .mockmini span { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
  .qlink { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ink-3); }
  .qlink:hover { color: var(--brand); border-bottom-color: var(--brand); }
  .how { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
  @media (max-width: 780px) { .how { grid-template-columns: 1fr; } }
  .how__step { padding: var(--s5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
  .how__step b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
    background: var(--brand-tint); color: var(--brand); font-size: 14px; margin-bottom: var(--s3); }
  .how__step h3 { font-size: 16.5px; margin-bottom: 4px; }
  .how__step p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
  .trackrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s4); }
  @media (max-width: 900px) { .trackrow { grid-template-columns: 1fr; } }
  .atrisk { font-style: normal; font-size: 10px; margin-left: 4px; opacity: .8; }

/* ---------- SECTION TABS ----------
   The second row of the top bar. Plain links: each tab is its own page. */
.navtabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 0; margin-top: -4px; }
.navtabs::-webkit-scrollbar { display: none; }
.navtab { flex: none; padding: 9px 14px 11px; font-size: 14px; font-weight: 700; color: var(--ink-2);
  border-bottom: 2.5px solid transparent; text-decoration: none; white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast); }
.navtab:hover { color: var(--ink); }
.navtab.is-on { color: var(--brand); border-bottom-color: var(--brand); }
.theme-reason .navtab.is-on { color: var(--reason); border-bottom-color: var(--reason); }
.theme-quant .navtab.is-on { color: var(--quant); border-bottom-color: var(--quant); }

/* ---------- BREADCRUMB ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--s5);
  font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent, var(--brand)); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.crumbs + .hero { padding-top: var(--s5); }

/* ---------- CHAPTER CARDS (academy page) ---------- */
.section-h { margin: var(--s7) 0 var(--s4); }
.chapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); }
.chapcard { display: flex; flex-direction: column; gap: 6px; padding: var(--s5); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  color: inherit; text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.chapcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.chapcard:focus-visible { outline: 2px solid var(--accent, var(--brand)); outline-offset: 2px; }
.chapcard.is-current { border-color: color-mix(in srgb, var(--accent, var(--brand)) 50%, transparent); }
.chapcard.is-complete .chap__num { background: var(--good-tint); color: var(--good); }
.chapcard__top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.chapcard__top .chap__count { margin-left: auto; }
.chapcard__title { font-size: 18px; letter-spacing: -.01em; line-height: 1.25; }
.chapcard__sub { font-style: normal; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.chapcard__lessons { list-style: none; margin: var(--s3) 0 var(--s2); display: grid; gap: 3px;
  font-size: 13px; color: var(--ink-2); }
.chapcard__lessons li::before { content: '○'; margin-right: 7px; color: var(--ink-3); font-size: 11px; }
.chapcard__lessons li.is-done::before { content: '✓'; color: var(--good); font-weight: 800; }
.chapcard .chap__bars { margin-top: auto; padding-top: var(--s3); }
.chapcard__go { margin-top: var(--s3); font-size: 14px; font-weight: 800; color: var(--accent, var(--brand)); }
.chapcard__go .arw { display: inline-block; transition: transform var(--t-fast); }
.chapcard:hover .chapcard__go .arw { transform: translateX(3px); }
.drillbar { margin-top: var(--s7); }

/* ---------- CHAPTER PAGE ---------- */
.chap--page .chap__body { grid-template-rows: 1fr; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s6); }
.pager__i { display: flex; flex-direction: column; gap: 3px; padding: var(--s4) var(--s5); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; }
.pager__i:hover { border-color: var(--line-strong); background: var(--surface-2); }
.pager__i span { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.pager__i b { font-size: 15px; }
.pager__i--next { text-align: right; }
.pager__i--empty { border: 0; background: none; }
@media (max-width: 620px) { .pager { grid-template-columns: 1fr; } .pager__i--empty { display: none; } }

/* ---------- MOBILE SIGN-IN ---------- */
.who__av { position: relative; }
.who__dot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--good); box-shadow: 0 0 0 2px var(--surface); }
.who__phone { display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.who__item--go { color: var(--brand); font-weight: 700; text-decoration: none; }
.who__note b { font-weight: 700; color: var(--ink-2); }

.signin { max-width: 440px; margin: var(--s7) auto; }
.signin .card { padding: var(--s6); }
.signin h1 { font-size: 28px; margin-bottom: var(--s2); }
.signin label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin: var(--s4) 0 6px; }
.signin__row { display: flex; gap: var(--s2); }
.signin input[type=tel], .signin input[type=text], .signin input.otp {
  width: 100%; font: inherit; font-size: 18px; padding: 12px 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.signin input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.signin .cc { flex: 0 0 84px; text-align: center; }
.signin input.otp { letter-spacing: .5em; text-align: center; font-family: var(--mono); font-size: 24px; }
.signin .btn { margin-top: var(--s5); width: 100%; }
.signin__err { margin-top: var(--s3); color: var(--bad); font-size: 14px; min-height: 1.4em; }
.signin__check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 600 !important;
  font-size: 14px !important; color: var(--ink) !important; line-height: 1.45; }
.signin__check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.signin__fine { margin-top: var(--s4); font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

/* ---------- RAS PRACTISE DRILLS ---------- */
.rascard { border-left: 3px solid var(--line-strong); }
.rascard--reasoning { --accent: var(--reason); border-left-color: var(--reason); }
.rascard--quants { --accent: var(--quant); border-left-color: var(--quant); }
.rascard .chap__num { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.rascard__papers { margin-top: var(--s3); font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }