:root{
  --bg: oklch(100% 0 0);
  --surface: oklch(94.6% 0.003 240);
  --fg: oklch(15.5% 0 0);
  --muted: oklch(52% 0.012 250); /* 4.7:1 on --surface, 5.4:1 on --bg (WCAG AA for body text) */
  --border: oklch(90.5% 0.003 240);
  --accent: oklch(92% 0.21 125);
  --accent-2: oklch(50% 0.2 272);
  /* Two accents (HAL-2923, the founder 2026-10-13: "lime for main buttons"). --accent, lime, is the brand: the one main
     action on a card or page, achievements, correct answers, the logo, and lime text on ink. --calm, sky, is the
     student app's quieter accent: progress fills, selected and lit states, focus rings and large tinted areas. Dark
     text on both. The public site keeps lime only. */
  --calm: oklch(80% 0.12 228);
  --font-display: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-body);
  --pad: clamp(18px,2.2vw,32px);
  --radius-slab: clamp(22px,2.4vw,38px);
  --ease: cubic-bezier(.2,.7,.1,1);
}
/* Dark theme (HAL-2055): the same eight tokens, re-pointed. Only the student app opts in, by setting data-theme on
   <html> from the student's choice (Settings, Appearance); with no attribute every page is the light theme above,
   unchanged. "system" follows the device. Panels that are always ink or lime keep the light palette: app/theme.css. */
:root[data-theme="dark"]{
  --bg: oklch(20.5% 0.008 268);
  --surface: oklch(13% 0.007 268);
  --fg: oklch(95.5% 0.004 268);
  --muted: oklch(71% 0.014 255); /* 6.9:1 on --bg, 8.6:1 on --surface */
  --border: oklch(29% 0.01 268);
  --accent: oklch(92% 0.21 125);
  --accent-2: oklch(70% 0.15 272); /* indigo lifted for text on dark: 5.6:1 on --bg */
  --calm: oklch(80% 0.12 228);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="system"]{
    --bg: oklch(20.5% 0.008 268);
    --surface: oklch(13% 0.007 268);
    --fg: oklch(95.5% 0.004 268);
    --muted: oklch(71% 0.014 255);
    --border: oklch(29% 0.01 268);
    --accent: oklch(92% 0.21 125);
    --accent-2: oklch(70% 0.15 272);
    --calm: oklch(80% 0.12 228);
    color-scheme: dark;
  }
}
/* Lime accent (HAL-2923): a student who prefers the app as it was (Settings, Appearance) gets lime where sky would be.
   After the theme blocks, at their weight, so it holds in every theme. */
:root[data-accent="lime"]{--calm: var(--accent)}
*:where(:not(.rdb *)){box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img:where(:not(.rdb *)){display:block;max-width:100%}
a:where(:not(.rdb *)){color:inherit;text-decoration:none}
button:where(:not(.rdb *)){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1:where(:not(.rdb *)),h2:where(:not(.rdb *)),h3:where(:not(.rdb *)),h4:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;letter-spacing:-0.045em;line-height:.98;text-wrap:balance}
p:where(:not(.rdb *)){text-wrap:pretty}
:focus-visible:where(:not(.rdb *)){outline:2px solid var(--fg);outline-offset:3px;border-radius:6px}
.wrap:where(:not(.rdb *)){max-width:1600px;margin:0 auto;padding:0 var(--pad)}
.muted:where(:not(.rdb *)){color:var(--muted)}
.mono:where(:not(.rdb *)){font-family:var(--font-body);font-size:11.5px;letter-spacing:0}
.mark:where(:not(.rdb *)){display:block}
.mark .bar:where(:not(.rdb *)){fill:currentColor}
.mark .dot:where(:not(.rdb *)){fill:currentColor}
/* scrollbars: a slim ink capsule that turns indigo under the pointer; light on the dark surfaces */
:where(:not(.rdb *))::-webkit-scrollbar{width:12px;height:12px}
:where(:not(.rdb *))::-webkit-scrollbar-track{background:transparent}
:where(:not(.rdb *))::-webkit-scrollbar-thumb{background-color:color-mix(in srgb, var(--fg) 20%, transparent);border:4px solid transparent;border-radius:999px;background-clip:padding-box;min-height:48px;min-width:48px}
::-webkit-scrollbar-thumb:hover:where(:not(.rdb *)){background-color:var(--accent-2);border-width:3px}
::-webkit-scrollbar-thumb:active:where(:not(.rdb *)){background-color:var(--fg)}
:where(:not(.rdb *))::-webkit-scrollbar-corner,:where(:not(.rdb *))::-webkit-scrollbar-button{display:none;background:transparent}
html::-webkit-scrollbar-thumb{background-color:color-mix(in srgb, var(--fg) 26%, transparent)}
@supports (-moz-appearance:none){*:where(:not(.rdb *)){scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--fg) 24%, transparent) transparent}}
.sb :where(:not(.rdb *))::-webkit-scrollbar-thumb,.sqlbox:where(:not(.rdb *))::-webkit-scrollbar-thumb,.sc.is-live :where(:not(.rdb *))::-webkit-scrollbar-thumb{background-color:color-mix(in srgb, var(--bg) 22%, transparent)}
.sb ::-webkit-scrollbar-thumb:hover:where(:not(.rdb *)),.sqlbox::-webkit-scrollbar-thumb:hover:where(:not(.rdb *)){background-color:var(--accent)}
:where(:not(.rdb *))::selection{background:var(--accent);color:var(--fg)}


/* pills */
.pill:where(:not(.rdb *)){display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;padding:0 20px 0 22px;border-radius:999px;font-size:15px;font-weight:450;letter-spacing:-0.01em;transition:background-color .25s var(--ease)}
.pill svg:where(:not(.rdb *)){width:18px;height:18px;flex:none;transition:transform .3s var(--ease)}
.pill:hover svg:where(:not(.rdb *)){transform:translateX(4px)}
.pill-dark:where(:not(.rdb *)){background:var(--fg);color:var(--bg)}
.pill-dark:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--fg) 84%, var(--bg))}
.pill-light:where(:not(.rdb *)){background:var(--bg);color:var(--fg);min-height:44px;font-size:13.5px;padding:0 14px 0 16px;gap:10px}
.pill-light svg:where(:not(.rdb *)){width:14px;height:14px}
.pill-light:hover:where(:not(.rdb *)){background:var(--surface)}
.pill-sm:where(:not(.rdb *)){min-height:44px;font-size:13.5px;gap:12px;padding:0 16px 0 18px}

/* sticky bar */
.bar:where(:not(.rdb *)){position:fixed;inset:0 0 auto;z-index:40;background:color-mix(in oklch, var(--bg) 88%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);transform:translateY(-100%);transition:transform .45s var(--ease)}
.bar.show:where(:not(.rdb *)){transform:none}
.bar .wrap:where(:not(.rdb *)){display:flex;align-items:center;height:68px;gap:24px}
.bar nav:where(:not(.rdb *)){display:flex;gap:clamp(18px,2.6vw,40px);margin-left:auto;margin-right:clamp(40px,8vw,140px)}
.navlink:where(:not(.rdb *)){position:relative;font-size:14.5px;padding:10px 0}
.navlink:where(:not(.rdb *))::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.navlink:hover:where(:not(.rdb *))::after,.navlink[aria-current="true"]:where(:not(.rdb *))::after{transform:scaleX(1)}
.bar .pill:where(:not(.rdb *)){min-height:40px;font-size:13.5px}
.burger:where(:not(.rdb *)){width:52px;height:44px;display:grid;place-content:center;gap:5px;border-radius:10px}
.burger span:where(:not(.rdb *)){display:block;width:52px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.burger:hover span:first-child:where(:not(.rdb *)){transform:translateY(-2px)}
.burger:hover span:last-child:where(:not(.rdb *)){transform:translateY(2px)}

/* hero */
.hero:where(:not(.rdb *)){padding-top:var(--pad)}
.hero-top:where(:not(.rdb *)){display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);position:relative;min-height:clamp(360px,33vw,520px)}
.brand:where(:not(.rdb *)){display:flex;gap:clamp(24px,3.4vw,52px);align-items:flex-start}
.brand .mark:where(:not(.rdb *)){width:clamp(72px,6.4vw,108px);height:auto;color:var(--fg)}
.brand-copy:where(:not(.rdb *)){font-size:clamp(15px,1.2vw,19px);line-height:1.2;letter-spacing:-0.02em;padding-top:2px}
.hero-right:where(:not(.rdb *)){padding-right:clamp(64px,6vw,90px)}
.hero h1:where(:not(.rdb *)){font-size:clamp(40px,5.1vw,82px);margin-bottom:clamp(20px,2.4vw,36px);max-width:13ch}
.hero .pill-dark:where(:not(.rdb *)){width:100%;max-width:700px;min-height:clamp(50px,3.6vw,58px);font-size:clamp(15px,1.15vw,18px)}
.hero-note:where(:not(.rdb *)){margin-top:12px;font-size:13px}
.hero .burger:where(:not(.rdb *)){position:absolute;top:0;right:0}
/* The brand line keeps clear of the menu button beside it (at 320 the tagline ran under it). */
.hero-top .brand:where(:not(.rdb *)){padding-right:64px}
@media (max-width:420px){.hero-top .brand:where(:not(.rdb *)){gap:16px}.brand .mark:where(:not(.rdb *)){width:64px}.brand-copy .muted br:where(:not(.rdb *)){display:none}}
.slab:where(:not(.rdb *)){position:relative;border-radius:var(--radius-slab);overflow:hidden;background:var(--surface);isolation:isolate}
.slab-cap:where(:not(.rdb *)){position:absolute;top:clamp(16px,1.6vw,26px);left:clamp(18px,1.6vw,26px);z-index:2;font-size:clamp(14px,1.1vw,18px);line-height:1.2;letter-spacing:-0.02em;color:var(--bg);text-shadow:0 1px 14px color-mix(in oklch, var(--fg) 45%, transparent)}
.slab-cap span:where(:not(.rdb *)){display:block;opacity:.78}
.hero-slab:where(:not(.rdb *)){margin-top:clamp(28px,4vw,64px);aspect-ratio:1920/1280;max-height:86vh;width:100%}
.hero-slab img:where(:not(.rdb *)){width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--ease)}
.hero-slab:hover img:where(:not(.rdb *)){transform:scale(1)}
.slab-chip:where(:not(.rdb *)){position:absolute;right:clamp(18px,1.6vw,26px);bottom:clamp(16px,1.6vw,24px);z-index:2;font-family:var(--font-body);font-size:11.5px;letter-spacing:0;color:var(--bg);opacity:.9;text-shadow:0 1px 10px color-mix(in oklch, var(--fg) 50%, transparent)}

/* sections */
section:where(:not(.rdb *)){scroll-margin-top:84px}
.sec:where(:not(.rdb *)){padding-top:clamp(96px,11vw,180px)}
.label:where(:not(.rdb *)){font-size:13px;line-height:1.3}
.split:where(:not(.rdb *)){display:grid;grid-template-columns:1fr 1fr;gap:var(--pad)}
.lead:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(19px,1.9vw,30px);line-height:1.18;letter-spacing:-0.03em;max-width:24em}
.h2:where(:not(.rdb *)){font-size:clamp(42px,4.6vw,76px)}
.h3:where(:not(.rdb *)){font-size:clamp(32px,2.8vw,48px);line-height:1.02}

/* big type */
.big:where(:not(.rdb *)){display:flex;align-items:flex-end;justify-content:space-between;gap:2vw;margin-top:clamp(40px,5vw,80px)}
.big-type:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:clamp(120px,27vw,470px);line-height:.74;letter-spacing:-0.075em;margin-left:-.04em}
.big .mark:where(:not(.rdb *)){width:clamp(96px,19vw,330px);height:auto;flex:none;color:var(--fg)}
.big-foot:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;margin-top:clamp(28px,3vw,48px);gap:20px;flex-wrap:wrap}

/* problem list */
.pains:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pad);margin-top:clamp(48px,5vw,80px);border-top:1px solid var(--border)}
.pain:where(:not(.rdb *)){padding-top:22px}
.pain .mono:where(:not(.rdb *)){color:var(--muted)}
.pain h3:where(:not(.rdb *)){font-size:clamp(22px,1.9vw,30px);letter-spacing:-0.02em;line-height:1.1;margin-top:12px}
.pain p:where(:not(.rdb *)){color:var(--muted);margin-top:10px;max-width:34ch}

/* rail */
.rail-head:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,2.6vw,40px)}
.rail-ctrl:where(:not(.rdb *)){display:flex;gap:10px}
.circ:where(:not(.rdb *)){width:52px;height:52px;border-radius:50%;background:var(--surface);display:grid;place-items:center;transition:background-color .25s}
.circ:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--surface) 85%, var(--fg))}
.circ:disabled:where(:not(.rdb *)){opacity:.35;cursor:default}
.circ svg:where(:not(.rdb *)){width:18px;height:18px;transition:transform .35s var(--ease)}
.rail:where(:not(.rdb *)){display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*var(--pad)) / 3.2);gap:var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.rail:where(:not(.rdb *))::-webkit-scrollbar{display:none}
.card:where(:not(.rdb *)){scroll-snap-align:start;display:flex;flex-direction:column}
.card-media:where(:not(.rdb *)){border-radius:var(--radius-slab);background:var(--surface);aspect-ratio:5/4;padding:clamp(18px,2vw,30px);display:grid;place-items:center;overflow:hidden}
.card h3:where(:not(.rdb *)){font-size:clamp(20px,1.6vw,27px);letter-spacing:-0.02em;line-height:1.12;margin-top:14px}
.card-more:where(:not(.rdb *)){display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.card-more>p:where(:not(.rdb *)){overflow:hidden;color:var(--muted);font-size:14px;max-width:34em}
.card.open .card-more:where(:not(.rdb *)){grid-template-rows:1fr}
.card.open .card-more>p:where(:not(.rdb *)){padding-top:10px}
.card .circ:where(:not(.rdb *)){margin-top:20px}
.card.open .circ svg:where(:not(.rdb *)){transform:rotate(45deg)}
.progress:where(:not(.rdb *)){position:relative;height:2px;background:var(--border);margin-top:clamp(28px,2.6vw,40px)}
.progress i:where(:not(.rdb *)){position:absolute;left:0;top:0;height:100%;background:var(--fg)}

/* telegram-ish UI atoms */
.tg:where(:not(.rdb *)){width:100%;max-width:340px;background:var(--bg);border-radius:18px;box-shadow:0 20px 40px -24px color-mix(in oklch, var(--fg) 45%, transparent);padding:14px;font-size:12.5px}
.tg-head:where(:not(.rdb *)){display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:10px}
.tg-head .av:where(:not(.rdb *)){width:26px;height:26px;border-radius:50%;background:var(--fg);display:grid;place-items:center}
.tg-head .av svg:where(:not(.rdb *)){width:15px;height:12px;color:var(--surface)}
.tg-head b:where(:not(.rdb *)){font-weight:600;font-size:12.5px}
.tg-head span:where(:not(.rdb *)){font-size:11px;color:var(--muted);margin-left:auto}
.bubble:where(:not(.rdb *)){background:var(--surface);border-radius:12px 12px 12px 4px;padding:9px 11px;margin-top:6px;line-height:1.4}
.limb:where(:not(.rdb *)){display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-top:1px solid var(--border)}
.limb:first-of-type:where(:not(.rdb *)){border-top:0}
.tf:where(:not(.rdb *)){flex:none;font-family:var(--font-body);font-size:10px;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;background:var(--fg);color:var(--bg)}
.tf.f:where(:not(.rdb *)){background:var(--bg);color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.kbd:where(:not(.rdb *)){display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.kbd span:where(:not(.rdb *)){display:grid;place-items:center;height:30px;border-radius:8px;background:var(--surface);font-size:11.5px}
.timer:where(:not(.rdb *)){font-family:var(--font-display);font-size:44px;letter-spacing:-0.04em;line-height:1}
.ring:where(:not(.rdb *)){width:96px;height:96px}
.rowline:where(:not(.rdb *)){display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid var(--border);font-size:12px}
.rowline:first-child:where(:not(.rdb *)){border-top:0}
.hb:where(:not(.rdb *)){display:grid;grid-template-columns:96px 1fr 30px;gap:8px;align-items:center;font-size:11.5px;padding:4px 0}
.hb i:where(:not(.rdb *)){height:8px;border-radius:4px;background:var(--surface);position:relative;overflow:hidden}
.hb i b:where(:not(.rdb *)){position:absolute;inset:0 auto 0 0;background:var(--fg);border-radius:4px}
.hb em:where(:not(.rdb *)){font-style:normal;font-family:var(--font-body);font-size:10.5px;color:var(--muted);text-align:right}

/* numbers */
.specs:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--pad);row-gap:clamp(40px,4vw,72px);margin-top:clamp(40px,4vw,64px)}
.spec:where(:not(.rdb *)){max-width:360px}
.spec-n:where(:not(.rdb *)){display:flex;align-items:flex-start;gap:10px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.spec-n b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:clamp(56px,6vw,104px);line-height:.85;letter-spacing:-0.06em;font-variant-numeric:tabular-nums}
.spec-n small:where(:not(.rdb *)){font-family:var(--font-body);font-size:11px;color:var(--muted);padding-top:.5em}
.spec h4:where(:not(.rdb *)){font-family:var(--font-body);font-size:13px;letter-spacing:0;font-weight:600;margin-top:14px}
.spec p:where(:not(.rdb *)){font-size:13.5px;color:var(--muted);margin-top:4px;max-width:30ch}
.s1:where(:not(.rdb *)){grid-column:1}.s2:where(:not(.rdb *)){grid-column:3}.s3:where(:not(.rdb *)){grid-column:4}.s4:where(:not(.rdb *)){grid-column:2}.s5:where(:not(.rdb *)){grid-column:3}.s6:where(:not(.rdb *)){grid-column:4}

/* charts */
.charts:where(:not(.rdb *)){display:grid;grid-template-columns:1.2fr 1fr;gap:var(--pad);margin-top:clamp(40px,4vw,64px)}
.chart:where(:not(.rdb *)){background:var(--surface);border-radius:var(--radius-slab);padding:clamp(20px,2vw,30px);display:flex;flex-direction:column;min-height:420px}
.chart.wide:where(:not(.rdb *)){grid-column:1/-1;min-height:340px}
.chart h3:where(:not(.rdb *)){font-size:clamp(22px,1.8vw,28px);letter-spacing:-0.02em;line-height:1.1}
.chart p.muted:where(:not(.rdb *)){font-size:13.5px;margin-top:6px;max-width:46ch}
.chart svg:where(:not(.rdb *)){width:100%;height:auto;margin-top:auto;overflow:visible}
.chart .axis:where(:not(.rdb *)){font-family:var(--font-body);font-size:calc(10px * var(--k,1));fill:var(--muted)}
.chart .grid:where(:not(.rdb *)){stroke:var(--border);stroke-width:1}
.chart .hl:where(:not(.rdb *)){fill:var(--accent-2)}
.chart .ink:where(:not(.rdb *)){fill:color-mix(in oklch, var(--fg) 26%, var(--surface))}
.chart .tip:where(:not(.rdb *)){font-family:var(--font-body);font-size:calc(11px * var(--k,1));fill:var(--fg)}
.chart .bar-h:hover:where(:not(.rdb *)){opacity:.75}
.legend:where(:not(.rdb *)){display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:14px;flex-wrap:wrap}
.legend i:where(:not(.rdb *)){display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* night */
.night-slab:where(:not(.rdb *)){margin-top:clamp(40px,5vw,80px);aspect-ratio:1920/1280;max-height:90vh;width:100%;background:var(--fg)}
/* Both photo panels carry white text: the ink behind the photo keeps it readable while the photo loads, or if it never does (slow networks). */
.night-slab img:where(:not(.rdb *)){width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.night-slab:hover img:where(:not(.rdb *)){transform:scale(1.02)}

/* leaderboard */
.boards:where(:not(.rdb *)){display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.2vw,20px);margin-top:clamp(40px,4vw,64px)}
.board:where(:not(.rdb *)){border:1px solid var(--border);border-radius:var(--radius-slab);padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;gap:22px;transition:border-color .3s}
.board:hover:where(:not(.rdb *)){border-color:var(--fg)}
.board-top:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.rank:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(88px,9vw,150px);line-height:.8;letter-spacing:-0.075em}
.dist:where(:not(.rdb *)){font-family:var(--font-body);font-size:11.5px;letter-spacing:0;color:var(--muted);padding-top:10px;white-space:nowrap}
.board dl:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid var(--border);padding-top:18px}
.board dt:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(28px,2.6vw,42px);letter-spacing:-0.03em;line-height:1}
.board dd:where(:not(.rdb *)){font-size:12.5px;color:var(--muted);margin-top:6px}
.board .quote:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(18px,1.4vw,22px);line-height:1.3;color:var(--muted);border-top:1px dashed var(--border);padding-top:18px}

/* accordion */
.acc:where(:not(.rdb *)){margin-top:clamp(48px,5vw,84px);border-top:1px solid var(--border)}
.acc-item:where(:not(.rdb *)){border-bottom:1px solid var(--border)}
.acc-btn:where(:not(.rdb *)){width:100%;display:flex;align-items:center;gap:18px;padding:clamp(18px,1.8vw,28px) 0;text-align:left;min-height:44px}
.acc-btn .dot:where(:not(.rdb *)){width:14px;height:14px;border-radius:50%;border:1.5px solid var(--fg);flex:none;transition:background-color .3s}
.acc-item.open .dot:where(:not(.rdb *)){background:var(--fg)}
.acc-btn .t:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(22px,2.1vw,34px);letter-spacing:-0.03em;line-height:1.1}
.acc-btn .pm:where(:not(.rdb *)){margin-left:auto;width:40px;height:40px;position:relative;flex:none}
.acc-btn .pm:where(:not(.rdb *))::before,.acc-btn .pm:where(:not(.rdb *))::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.acc-btn .pm:where(:not(.rdb *))::after{transform:rotate(90deg)}
.acc-item.open .pm:where(:not(.rdb *))::after{transform:rotate(0)}
.acc-btn:hover .t:where(:not(.rdb *)){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.acc-panel:where(:not(.rdb *)){display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.acc-item.open .acc-panel:where(:not(.rdb *)){grid-template-rows:1fr}
.acc-inner:where(:not(.rdb *)){overflow:hidden}
.acc-grid:where(:not(.rdb *)){display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);padding:0 0 clamp(24px,2.4vw,36px) 32px}
.acc-grid p:where(:not(.rdb *)){color:var(--muted);font-size:clamp(14px,1.05vw,16px);max-width:34ch}
.acc-grid figure:where(:not(.rdb *)){border-radius:var(--radius-slab);overflow:hidden;background:var(--surface)}
.acc-grid img:where(:not(.rdb *)){width:100%;height:auto}

/* duo */
.duo:where(:not(.rdb *)){display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.2vw,20px)}
.duo .slab:where(:not(.rdb *)){min-height:clamp(420px,42vw,700px);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,1.6vw,26px)}
.duo h3:where(:not(.rdb *)){font-size:clamp(22px,1.9vw,30px);letter-spacing:-0.025em;line-height:1.08;position:relative;z-index:2}
.duo .slab>a:where(:not(.rdb *)){align-self:flex-start;position:relative;z-index:2}
.duo-photo:where(:not(.rdb *)){color:var(--bg);background:var(--fg)}
.duo-photo img:where(:not(.rdb *)){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform 1.4s var(--ease)}
.duo-photo:hover img:where(:not(.rdb *)){transform:scale(1.04)}
.duo-photo:where(:not(.rdb *))::before{content:"";position:absolute;inset:0 0 auto;height:38%;z-index:0;background:linear-gradient(color-mix(in oklch, var(--fg) 55%, transparent), transparent)}
.duo-plain .big-mark:where(:not(.rdb *)){position:absolute;left:50%;top:50%;translate:-50% -50%;width:clamp(90px,9vw,150px);color:var(--fg);transition:transform .6s var(--ease)}
.duo-plain:hover .big-mark:where(:not(.rdb *)){transform:translateY(-8px)}

/* footer */
.foot:where(:not(.rdb *)){margin-top:clamp(12px,1.2vw,20px);background:var(--fg);color:var(--bg);border-radius:var(--radius-slab) var(--radius-slab) 0 0;padding:clamp(28px,3vw,48px) clamp(20px,2.4vw,40px) 24px;overflow:hidden}
.foot-top:where(:not(.rdb *)){display:grid;grid-template-columns:1.1fr 1fr;gap:var(--pad)}
.foot-top h2:where(:not(.rdb *)){font-size:clamp(28px,2.6vw,44px);letter-spacing:-0.03em;line-height:1.05}
.foot-top h2 a:where(:not(.rdb *)){text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.foot-top h2 a:hover:where(:not(.rdb *)){text-decoration-thickness:3px}
.news label:where(:not(.rdb *)),.news .lbl:where(:not(.rdb *)){display:block;font-size:13px;opacity:.75;margin-bottom:10px}
.news-row:where(:not(.rdb *)){display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;border-bottom:1px solid color-mix(in oklch, var(--bg) 35%, transparent);padding-bottom:6px}
.news-row:focus-within:where(:not(.rdb *)){border-color:var(--bg)}
/* Side by side, the two fields are told apart by a hairline (they read as one long blank field). */
@media (min-width:521px){.news-row #fSchool:where(:not(.rdb *)){border-left:1px solid color-mix(in oklch, var(--bg) 25%, transparent);padding-left:16px}}
.news input:where(:not(.rdb *)),.news select:where(:not(.rdb *)){min-width:0;background:none;border:0;color:var(--bg);font:inherit;font-size:16px;padding:12px 0;outline:none}
.news select:where(:not(.rdb *)){font-size:14px;cursor:pointer}
.news select option:where(:not(.rdb *)){color:var(--fg)}
.news input:where(:not(.rdb *))::placeholder{color:color-mix(in oklch, var(--bg) 60%, transparent)}
.news button:where(:not(.rdb *)){height:40px;padding:0 16px;border-radius:999px;background:var(--accent);color:var(--fg);font-size:13px;font-weight:500;transition:background-color .25s}
.news button:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--accent) 88%, var(--bg))}
.news button[aria-busy="true"]:where(:not(.rdb *)){display:inline-flex;align-items:center;gap:8px}
.news-msg:where(:not(.rdb *)){font-size:13px;margin-top:10px;min-height:20px}
.foot-links:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--pad);margin-top:clamp(40px,4.4vw,72px)}
.foot-links h4:where(:not(.rdb *)){font-family:var(--font-body);font-size:11px;letter-spacing:0;opacity:.65;margin-bottom:14px;font-weight:400}
.foot-links a:where(:not(.rdb *)){display:block;font-size:14.5px;padding:4px 0;width:max-content;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease)}
.foot-links a:hover:where(:not(.rdb *)){background-size:100% 1px}
/* On a touch screen each link is a full 40px row (they were 30px, stacked tight). */
@media (max-width:760px){.foot-links a:where(:not(.rdb *)){padding:9px 0;font-size:15px}.foot-links h4:where(:not(.rdb *)){margin-bottom:6px}}
.wordmark:where(:not(.rdb *)){display:flex;align-items:flex-end;justify-content:space-between;gap:2vw;margin-top:clamp(48px,6vw,110px)}
.wordmark span:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(84px,18.5vw,330px);line-height:.76;letter-spacing:-0.065em;margin-left:-.04em}
.wordmark .mark:where(:not(.rdb *)){width:clamp(56px,11vw,190px);height:auto;flex:none;color:var(--bg)}
.foot-base:where(:not(.rdb *)){display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;opacity:.7;margin-top:28px;padding-top:18px;border-top:1px solid color-mix(in oklch, var(--bg) 18%, transparent)}
.foot-base a:where(:not(.rdb *)){display:inline-block;padding-block:5px;text-decoration:underline;text-underline-offset:2px}

/* menu */
.menu:where(:not(.rdb *)){position:fixed;inset:0;z-index:60;background:var(--fg);color:var(--bg);display:flex;flex-direction:column;padding:var(--pad);clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);visibility:hidden}
.menu.open:where(:not(.rdb *)){clip-path:inset(0);visibility:visible}
.menu-top:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center}
.menu-close:where(:not(.rdb *)){width:52px;height:52px;position:relative;border-radius:10px}
.menu-close:where(:not(.rdb *))::before,.menu-close:where(:not(.rdb *))::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.menu-close:where(:not(.rdb *))::after{transform:rotate(-45deg)}
.menu ul:where(:not(.rdb *)){list-style:none;margin-top:auto}
.menu li a:where(:not(.rdb *)){display:flex;align-items:baseline;gap:18px;font-family:var(--font-display);font-size:clamp(44px,7vw,112px);letter-spacing:-0.05em;line-height:1.04;transition:transform .35s var(--ease)}
.menu li a small:where(:not(.rdb *)){font-family:var(--font-body);font-size:12px;opacity:.55}
.menu li a:hover:where(:not(.rdb *)){transform:translateX(14px)}
.menu-foot:where(:not(.rdb *)){display:flex;justify-content:space-between;margin-top:36px;font-size:13px;opacity:.75;gap:16px;flex-wrap:wrap}


/* hero composition */
.hero-comp:where(:not(.rdb *)){aspect-ratio:16/8.6;max-height:88vh;display:grid;place-items:center}
.slab-cap.ink:where(:not(.rdb *)){color:var(--fg);text-shadow:none}
.slab-chip.ink:where(:not(.rdb *)){color:var(--fg);text-shadow:none;opacity:.7}
.comp:where(:not(.rdb *)){position:relative;width:min(1180px,90%);height:80%}
.c-card:where(:not(.rdb *)){position:absolute;background:var(--bg);border-radius:clamp(16px,1.6vw,24px);padding:clamp(14px,1.4vw,22px);box-shadow:0 30px 60px -40px color-mix(in oklch, var(--fg) 45%, transparent);transition:transform .6s var(--ease)}
.c-mono:where(:not(.rdb *)){font-family:var(--font-body);font-size:10.5px;letter-spacing:0;color:var(--muted)}
.c-q:where(:not(.rdb *)){left:31%;top:4%;width:38%;z-index:2}
.c-stem:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(17px,1.5vw,24px);letter-spacing:-0.03em;line-height:1.15;margin:10px 0 6px}
.c-limb:where(:not(.rdb *)){display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--border);font-size:13.5px}
.c-why:where(:not(.rdb *)){font-size:12.5px;color:var(--muted);margin:-4px 0 6px 28px}
.c-mock:where(:not(.rdb *)){left:3%;top:10%;width:22%}
.c-time:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(40px,4vw,64px);letter-spacing:-0.05em;line-height:1;margin-top:12px}
.c-track:where(:not(.rdb *)){height:6px;border-radius:3px;background:var(--surface);margin-top:14px;overflow:hidden}
.c-track i:where(:not(.rdb *)){display:block;height:100%;background:var(--fg);border-radius:3px}
.c-sub:where(:not(.rdb *)){font-size:12.5px;color:var(--muted);margin-top:8px}
.c-prog:where(:not(.rdb *)){right:3%;top:18%;width:25%}
.c-prog .hb:where(:not(.rdb *)){grid-template-columns:1fr 1.2fr 30px}
.c-rank:where(:not(.rdb *)){left:8%;bottom:4%;width:22%}
.c-rank .rowline:where(:not(.rdb *)){font-size:12.5px}
.rowline.you:where(:not(.rdb *)){font-weight:600}
@media (max-width:920px){
  .hero-comp:where(:not(.rdb *)){aspect-ratio:auto;max-height:none;padding:72px 16px 56px}
  .comp:where(:not(.rdb *)){position:static;width:100%;height:auto;display:grid;gap:12px}
  .c-card:where(:not(.rdb *)){position:static;width:auto!important}
}
/* MB4 components */
.pc:where(:not(.rdb *)){background:var(--surface);border-radius:var(--radius-slab);padding:clamp(18px,2vw,30px);display:grid;gap:12px;align-content:start}
.pc-card:where(:not(.rdb *)){background:var(--bg);border-radius:16px;padding:16px}
.pc-card .c-stem:where(:not(.rdb *)){font-size:18px;margin:8px 0 0}
.chips:where(:not(.rdb *)){display:flex;flex-wrap:wrap;gap:6px}
.chip:where(:not(.rdb *)){height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--bg);font-size:12.5px;display:inline-flex;align-items:center;gap:6px;transition:background-color .2s,color .2s,border-color .2s}
.chip:hover:where(:not(.rdb *)){border-color:var(--fg)}
.chip[aria-pressed="true"]:where(:not(.rdb *)){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pipe:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pipe div:where(:not(.rdb *)){background:var(--bg);border-radius:14px;padding:14px;position:relative}
.pipe b:where(:not(.rdb *)){display:block;font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:-0.03em;margin-top:8px}
.pipe small:where(:not(.rdb *)){font-size:12px;color:var(--muted)}
.pipe .ok:where(:not(.rdb *)){width:22px;height:22px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center}
.pipe .ok svg:where(:not(.rdb *)){width:12px;height:12px}
.ref:where(:not(.rdb *)){display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:8px;background:var(--surface);font-family:var(--font-body);font-size:11px;margin-top:10px}
/* across Nigeria */
.ladder:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,4vw,64px);position:relative}
.ladder:where(:not(.rdb *))::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--border)}
.ladder:where(:not(.rdb *))::after{content:"";position:absolute;left:0;top:0;height:2px;width:62.5%;background:var(--accent-2)}
.rung:where(:not(.rdb *)){padding:22px var(--pad) 0 0}
.rung .metric:where(:not(.rdb *)),.rung .tagp:where(:not(.rdb *)){margin-top:14px}
.rung .lvl:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(56px,6vw,104px);letter-spacing:-0.06em;line-height:.85}
.rung .st:where(:not(.rdb *)){font-family:var(--font-body);font-size:11px;letter-spacing:0;margin-top:14px;display:inline-flex;align-items:center;gap:8px}
.rung .st i:where(:not(.rdb *)){width:8px;height:8px;border-radius:2px;background:var(--fg)}
.rung .st.plan i:where(:not(.rdb *)){background:none;box-shadow:inset 0 0 0 1.5px var(--muted)}
.rung .st.plan:where(:not(.rdb *)){color:var(--muted)}
.rung p:where(:not(.rdb *)){font-size:13.5px;color:var(--muted);margin-top:8px;max-width:28ch}
.finder:where(:not(.rdb *)){margin-top:clamp(28px,3vw,48px);border:1px solid var(--border);border-radius:var(--radius-slab);padding:clamp(20px,2.2vw,32px)}
.finder-top:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.finder-top h3:where(:not(.rdb *)){font-size:clamp(26px,2.2vw,36px);letter-spacing:-0.04em;line-height:1}
.finder-count:where(:not(.rdb *)){font-family:var(--font-body);font-size:11.5px;color:var(--muted);margin-top:8px}
.finder-more:where(:not(.rdb *)){margin-top:16px}
.search:where(:not(.rdb *)){display:flex;align-items:center;gap:10px;min-width:min(380px,100%);height:48px;border-radius:999px;background:var(--surface);padding:0 18px;transition:box-shadow .2s}
.search:focus-within:where(:not(.rdb *)){box-shadow:0 0 0 2px var(--accent-2)}
.search svg:where(:not(.rdb *)){width:16px;height:16px;flex:none;color:var(--muted)}
.search input:where(:not(.rdb *)){flex:1;min-width:0;border:0;background:none;font:inherit;font-size:15px;color:var(--fg);outline:none}
.schools:where(:not(.rdb *)){list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.school:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 14px 14px 18px;border-radius:16px;background:var(--surface);transition:background-color .2s}
.school:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--surface) 90%, var(--fg))}
.school b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:clamp(17px,1.3vw,20px);letter-spacing:-0.02em;display:block;line-height:1.2}
.school small:where(:not(.rdb *)){font-size:12.5px;color:var(--muted)}
.school .live:where(:not(.rdb *)){flex:none;font-family:var(--font-body);font-size:11px;letter-spacing:0;display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:var(--fg);color:var(--bg)}
.school .reg:where(:not(.rdb *)){flex:none;height:40px;padding:0 16px;border-radius:999px;font-size:13px;display:inline-flex;align-items:center;gap:8px;background:var(--bg);transition:background-color .2s,color .2s}
.school .reg:hover:where(:not(.rdb *)){background:var(--fg);color:var(--bg)}
.school .reg svg:where(:not(.rdb *)){width:11px;height:11px}
.school[hidden]:where(:not(.rdb *)){display:none}
/* A narrow phone: the list and its rows give the school's name the room (it was squeezed to three or four lines
   beside the Register button). */
@media (max-width:420px){
  .finder:where(:not(.rdb *)){padding:16px 12px}
  .school:where(:not(.rdb *)){padding:12px 10px 12px 14px;gap:8px}
  .school b:where(:not(.rdb *)){font-size:16px}
  .school .reg:where(:not(.rdb *)){height:36px;padding:0 12px;font-size:12.5px;gap:6px}
}
.empty:where(:not(.rdb *)){padding:18px 0 0;color:var(--muted)}
@media (max-width:920px){.ladder:where(:not(.rdb *)){grid-template-columns:1fr 1fr;row-gap:28px}.ladder:where(:not(.rdb *))::after{width:62.5%}.schools:where(:not(.rdb *)){grid-template-columns:1fr}.pipe:where(:not(.rdb *)){grid-template-columns:1fr}}

/* platforms */
.apps-slab:where(:not(.rdb *)){margin-top:clamp(40px,5vw,72px);aspect-ratio:1920/1280;max-height:88vh;width:100%}
.apps-slab img:where(:not(.rdb *)){width:100%;height:100%;object-fit:cover}
.plats:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pad);margin-top:clamp(28px,3vw,48px)}
.plat:where(:not(.rdb *)){display:flex;flex-direction:column;gap:14px}
.plat-n:where(:not(.rdb *)){display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.plat-n b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:clamp(40px,3.6vw,64px);letter-spacing:-0.05em;line-height:.9}
.plat-n small:where(:not(.rdb *)){font-family:var(--font-body);font-size:11px;color:var(--muted);padding-top:.5em}
.plat p:where(:not(.rdb *)){font-size:14.5px;color:var(--muted);max-width:34ch}
.plat .pill:where(:not(.rdb *)){align-self:flex-start;margin-top:auto}
.stores:where(:not(.rdb *)){display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.store:where(:not(.rdb *)){display:inline-flex;align-items:center;min-height:52px;padding:0 18px;border-radius:12px;background:var(--fg);color:var(--bg);cursor:not-allowed;text-align:left;opacity:.85}
.store span:where(:not(.rdb *)){display:flex;flex-direction:column;font-family:var(--font-display);font-size:15px;letter-spacing:-0.02em;line-height:1.05}
.store small:where(:not(.rdb *)){font-family:var(--font-body);font-size:10.5px;letter-spacing:0;opacity:.8;margin-bottom:2px}
.wl:where(:not(.rdb *)){display:grid;grid-template-columns:1fr auto;align-items:center;border-bottom:1px solid var(--fg);margin-top:auto}
.wl input:where(:not(.rdb *)){min-width:0;border:0;background:none;font:inherit;font-size:16px;padding:12px 0;color:var(--fg);outline:none}
.wl button:where(:not(.rdb *)){width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--fg);display:grid;place-items:center;transition:background-color .2s}
.wl button:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--accent) 88%, var(--fg))}
.wl button svg:where(:not(.rdb *)){width:16px;height:16px}
.wl-msg:where(:not(.rdb *)){grid-column:1/-1;font-size:12.5px;color:var(--muted);min-height:18px;padding-top:6px}
@media (max-width:920px){.plats:where(:not(.rdb *)){grid-template-columns:1fr}}

/* ===== fusion: HITA pills + buttons on the Figure template ===== */
.metric:where(:not(.rdb *)){display:inline-flex;align-items:center;gap:.22em;height:1.08em;padding:0 .3em 0 .1em;border-radius:999px;vertical-align:-.12em;margin:0 .04em;font-weight:500;letter-spacing:-0.03em;line-height:1;white-space:nowrap}
.metric .ic:where(:not(.rdb *)){width:.82em;height:.82em;border-radius:50%;display:grid;place-items:center;flex:none}
.metric .ic svg:where(:not(.rdb *)){width:58%;height:58%}
.metric.lime:where(:not(.rdb *)){background:var(--accent);color:var(--fg)}
.metric.lime .ic:where(:not(.rdb *)){background:var(--fg);color:var(--accent)}
.metric.indigo:where(:not(.rdb *)){background:var(--accent-2);color:var(--bg)}
.metric.indigo .ic:where(:not(.rdb *)){background:var(--bg);color:var(--accent-2)}
.metric.sm:where(:not(.rdb *)){font-family:var(--font-display);font-size:14px;height:32px;padding:0 13px 0 4px;letter-spacing:-0.01em;gap:8px;vertical-align:middle}
.metric.sm .ic:where(:not(.rdb *)){width:24px;height:24px}
.tagp:where(:not(.rdb *)){display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;background:var(--surface);font-family:var(--font-body);font-size:11px;letter-spacing:0;color:var(--muted)}
.btns:where(:not(.rdb *)){display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn-ghost:where(:not(.rdb *)){display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:clamp(50px,3.6vw,58px);padding:0 24px;border-radius:999px;background:var(--surface);font-size:clamp(15px,1.15vw,18px);font-weight:450;color:var(--fg);transition:background-color .2s}
.btn-ghost:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--surface) 88%, var(--fg))}
.btn-ghost svg:where(:not(.rdb *)),.pill svg.ne:where(:not(.rdb *)){width:12px;height:12px}
.pill:hover svg.ne:where(:not(.rdb *)){transform:translate(2px,-2px)}
.hero-actions:where(:not(.rdb *)){display:grid;grid-template-columns:1fr auto;gap:10px;max-width:700px}
.hero-actions .pill-dark:where(:not(.rdb *)){max-width:none}
:focus-visible:where(:not(.rdb *)){outline:2px solid var(--accent-2)}
.dist:where(:not(.rdb *)){font-family:var(--font-display);text-transform:none;letter-spacing:-0.01em;color:var(--fg);padding-top:0}
.slab-chip.pillchip:where(:not(.rdb *)){opacity:1;text-shadow:none}
@media (max-width:560px){.hero-actions:where(:not(.rdb *)){grid-template-columns:1fr}}
.rv:where(:not(.rdb *)){opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in:where(:not(.rdb *)){opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*:where(:not(.rdb *)){transition:none!important;animation:none!important}.rv:where(:not(.rdb *)){opacity:1;transform:none}}

@media (max-width:920px){
  .hero-top:where(:not(.rdb *)),.split:where(:not(.rdb *)),.foot-top:where(:not(.rdb *)),.acc-grid:where(:not(.rdb *)),.duo:where(:not(.rdb *)),.charts:where(:not(.rdb *)),.boards:where(:not(.rdb *)){grid-template-columns:1fr}
  .hero-top:where(:not(.rdb *)){min-height:0;gap:36px}
  .hero-right:where(:not(.rdb *)){padding-right:0}
  .bar nav:where(:not(.rdb *)){display:none}
  .bar nav + *:where(:not(.rdb *)){margin-left:auto}
  .rail:where(:not(.rdb *)){grid-auto-columns:80%}
  .specs:where(:not(.rdb *)){grid-template-columns:1fr 1fr}
  .s1:where(:not(.rdb *)),.s2:where(:not(.rdb *)),.s3:where(:not(.rdb *)),.s4:where(:not(.rdb *)),.s5:where(:not(.rdb *)),.s6:where(:not(.rdb *)){grid-column:auto}
  .pains:where(:not(.rdb *)){grid-template-columns:1fr}
  .acc-grid:where(:not(.rdb *)){padding-left:0}
  .foot-links:where(:not(.rdb *)){grid-template-columns:1fr 1fr}
  .chart.wide:where(:not(.rdb *)){grid-column:auto}
}
@media (max-width:520px){
  .specs:where(:not(.rdb *)){grid-template-columns:1fr}
  .rail-ctrl:where(:not(.rdb *)){display:none}
  .board dl:where(:not(.rdb *)){grid-template-columns:1fr 1fr}
  .news-row:where(:not(.rdb *)){grid-template-columns:1fr}
}

/* inline pills inside headlines: sit on the text baseline, hug the words */
h1 .metric:where(:not(.rdb *)),h2 .metric:where(:not(.rdb *)),h3 .metric:where(:not(.rdb *)),.lead .metric:where(:not(.rdb *)){--mp:.11em;--mi:.12em;position:relative;display:inline-block;height:auto;min-width:0;line-height:1;padding:var(--mp) .36em var(--mp) calc(var(--mi) + 1em + 2*var(--mp) - 2*var(--mi) + .2em);margin:0 0 0 .02em;border-radius:999px;vertical-align:baseline;white-space:nowrap;font-family:inherit;font-weight:inherit;letter-spacing:inherit}
h1 .metric .ic:where(:not(.rdb *)),h2 .metric .ic:where(:not(.rdb *)),h3 .metric .ic:where(:not(.rdb *)),.lead .metric .ic:where(:not(.rdb *)){position:absolute;left:var(--mi);top:var(--mi);width:calc(1em + 2*var(--mp) - 2*var(--mi));height:calc(1em + 2*var(--mp) - 2*var(--mi));margin:0;display:grid;place-items:center;border-radius:50%}
h1 .metric .ic svg:where(:not(.rdb *)),h2 .metric .ic svg:where(:not(.rdb *)),h3 .metric .ic svg:where(:not(.rdb *)),.lead .metric .ic svg:where(:not(.rdb *)){width:52%;height:52%}
/* The small pill keeps its own layout inside a heading (the headline pill's absolute icon would sit on its first letters: "mmary"). */
h1 .metric.sm:where(:not(.rdb *)),h2 .metric.sm:where(:not(.rdb *)),h3 .metric.sm:where(:not(.rdb *)){display:inline-flex;height:32px;padding:0 13px 0 4px;vertical-align:middle;font-family:var(--font-display);font-size:14px;letter-spacing:-0.01em}
h1 .metric.sm .ic:where(:not(.rdb *)),h2 .metric.sm .ic:where(:not(.rdb *)),h3 .metric.sm .ic:where(:not(.rdb *)){position:static;width:24px;height:24px}

/* ================= MBPrep public site (fusion system) ================= */
.bar.always:where(:not(.rdb *)){transform:none;border-bottom:1px solid var(--border)}
.bar .navlink[aria-current="page"]:where(:not(.rdb *))::after{transform:scaleX(1)}
.bar .pill:where(:not(.rdb *)){min-height:40px;font-size:13.5px;padding:0 16px 0 18px}
.bar.always nav:where(:not(.rdb *)){margin-right:20px;gap:clamp(14px,1.8vw,30px)}
@media (max-width:1180px){.bar .pill:where(:not(.rdb *)){display:none}}
/* The header's "Dashboard" link beside the pill: hidden while the pill says it, shown where the pill is not. */
@media (min-width:1181px){.bar .acct-dup:where(:not(.rdb *)){display:none}}
body.sub main:where(:not(.rdb *)){padding-top:68px}
.phero:where(:not(.rdb *)){padding-top:clamp(56px,7vw,110px)}
.crumb:where(:not(.rdb *)){font-family:var(--font-body);font-size:11.5px;letter-spacing:0;color:var(--muted);display:flex;gap:10px;align-items:center}
.crumb a:where(:not(.rdb *)){color:var(--fg)}
.crumb a:hover:where(:not(.rdb *)){text-decoration:underline;text-underline-offset:3px}
.ptitle:where(:not(.rdb *)){font-size:clamp(52px,8.4vw,148px);letter-spacing:-0.06em;line-height:.92;margin-top:clamp(18px,2vw,28px);max-width:11ch}
.ptitle.wide:where(:not(.rdb *)){max-width:14ch}
.phero-foot:where(:not(.rdb *)){display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);margin-top:clamp(28px,3.4vw,56px);align-items:end}
.phero-foot .lead:where(:not(.rdb *)){color:var(--muted)}
.actions:where(:not(.rdb *)){display:flex;gap:10px;flex-wrap:wrap}
.actions .pill-dark:where(:not(.rdb *)),.actions .btn-ghost:where(:not(.rdb *)){min-height:52px;font-size:15px}
.btn-ghost svg:where(:not(.rdb *)){width:12px;height:12px}
.rule:where(:not(.rdb *)){height:1px;background:var(--border);margin-top:clamp(40px,4vw,64px)}
.kicker:where(:not(.rdb *)){font-family:var(--font-body);font-size:11.5px;letter-spacing:0;color:var(--muted)}
.sec-sm:where(:not(.rdb *)){padding-top:clamp(72px,8vw,128px)}
.shot:where(:not(.rdb *)){border-radius:var(--radius-slab);overflow:hidden;background:var(--surface);margin-top:clamp(36px,4vw,64px)}
.shot img:where(:not(.rdb *)){width:100%;height:auto}
/* numbered steps */
.nsteps:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad);margin-top:clamp(36px,4vw,64px)}
.nsteps.five:where(:not(.rdb *)){grid-template-columns:repeat(5,1fr)}
.nstep:where(:not(.rdb *)){border-top:1px solid var(--fg);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.nstep .n:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(44px,4.4vw,72px);letter-spacing:-0.06em;line-height:.85}
.nstep h3:where(:not(.rdb *)){font-size:clamp(19px,1.5vw,24px);letter-spacing:-0.025em;line-height:1.15}
.nstep p:where(:not(.rdb *)){font-size:14px;color:var(--muted)}
/* cards */
.cards:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);margin-top:clamp(36px,4vw,64px)}
.cards.two:where(:not(.rdb *)){grid-template-columns:1fr 1fr}
.cards.four:where(:not(.rdb *)){grid-template-columns:repeat(4,1fr)}
.card2:where(:not(.rdb *)){background:var(--surface);border-radius:var(--radius-slab);padding:clamp(20px,2vw,30px);display:flex;flex-direction:column;gap:12px;min-height:260px;transition:transform .4s var(--ease)}
.card2:hover:where(:not(.rdb *)){transform:translateY(-4px)}
.card2.dark:where(:not(.rdb *)){background:var(--fg);color:var(--bg)}
.card2.dark p:where(:not(.rdb *)),.card2.dark li:where(:not(.rdb *)){color:color-mix(in oklch, var(--bg) 74%, transparent)}
.card2.line:where(:not(.rdb *)){background:var(--bg);border:1px solid var(--border)}
.card2 h3:where(:not(.rdb *)){font-size:clamp(22px,1.9vw,30px);letter-spacing:-0.035em;line-height:1.1}
.card2 p:where(:not(.rdb *)){font-size:14.5px;color:var(--muted)}
.card2 .top:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;gap:10px}
.card2 .foot2:where(:not(.rdb *)){margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ticks2:where(:not(.rdb *)){list-style:none;display:grid;gap:10px;margin-top:4px}
.ticks2 li:where(:not(.rdb *)){display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:14.5px}
.ticks2 svg:where(:not(.rdb *)){width:16px;height:16px;margin-top:3px}
.card2.dark .ticks2 svg:where(:not(.rdb *)){color:var(--accent)}
/* big number row */
.bignums:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad);margin-top:clamp(36px,4vw,64px)}
.bignum:where(:not(.rdb *)){border-top:1px solid var(--border);padding-top:16px}
.bignum b:where(:not(.rdb *)){display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(46px,5vw,86px);letter-spacing:-0.06em;line-height:.9}
.bignum span:where(:not(.rdb *)){display:block;font-size:13.5px;color:var(--muted);margin-top:10px;max-width:24ch}
/* tabs */
.tabsx:where(:not(.rdb *)){display:flex;gap:6px;flex-wrap:wrap;margin-top:clamp(36px,4vw,56px)}
.tabsx button:where(:not(.rdb *)){height:48px;padding:0 20px;border-radius:999px;background:var(--surface);font-family:var(--font-display);font-size:17px;letter-spacing:-0.02em;display:inline-flex;align-items:center;gap:10px;transition:background-color .2s,color .2s}
.tabsx button:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--surface) 88%, var(--fg))}
.tabsx button[aria-selected="true"]:where(:not(.rdb *)){background:var(--fg);color:var(--bg)}
.tabsx button i:where(:not(.rdb *)){width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.35}
.tabsx button.live i:where(:not(.rdb *)){background:var(--accent);opacity:1}
.panel:where(:not(.rdb *)){display:grid;grid-template-columns:1.1fr 1fr;gap:var(--pad);margin-top:18px;background:var(--surface);border-radius:var(--radius-slab);padding:clamp(22px,2.6vw,40px);min-height:420px}
.panel[hidden]:where(:not(.rdb *)){display:none}
.panel .lvl:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(80px,10vw,180px);letter-spacing:-0.07em;line-height:.8}
.panel h3:where(:not(.rdb *)){font-size:clamp(24px,2.2vw,34px);letter-spacing:-0.035em;line-height:1.1;margin-top:20px}
.panel p:where(:not(.rdb *)){color:var(--muted);margin-top:10px;max-width:40ch}
.panel .rows:where(:not(.rdb *)){display:grid;align-content:start}
.panel .row:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.panel .row span:where(:not(.rdb *)){color:var(--muted);font-size:14px}
.panel .row b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:clamp(20px,1.8vw,28px);letter-spacing:-0.03em;text-align:right}
/* A lettered sequence (the method page's ABCDE) reads left to right, each step beside its letter. */
.panel .rows.seq .row:where(:not(.rdb *)){justify-content:flex-start;gap:clamp(14px,1.6vw,24px)}
.panel .rows.seq .row span:where(:not(.rdb *)){flex:none;width:1.2em;font-family:var(--font-body)}
.panel .rows.seq .row b:where(:not(.rdb *)){text-align:left}
/* formats */
.fmt:where(:not(.rdb *)){background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px;min-height:230px}
.fmt h4:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:21px;letter-spacing:-0.03em}
.fmt p:where(:not(.rdb *)){font-size:13.5px;color:var(--muted)}
.fmt .demo:where(:not(.rdb *)){margin-top:auto;background:var(--surface);border-radius:12px;padding:12px;font-size:12.5px;display:grid;gap:6px}
.fmt .demo .l:where(:not(.rdb *)){display:flex;gap:8px;align-items:center}
.fmt .demo .tf:where(:not(.rdb *)){width:18px;height:18px}
/* plans */
.plans:where(:not(.rdb *)){display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(10px,1.2vw,16px);margin-top:clamp(36px,4vw,64px);align-items:stretch}
.plan:where(:not(.rdb *)){border-radius:var(--radius-slab);padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;gap:16px;background:var(--surface)}
.plan.feat:where(:not(.rdb *)){background:var(--fg);color:var(--bg)}
.plan.feat .muted2:where(:not(.rdb *)){color:color-mix(in oklch, var(--bg) 70%, transparent)}
.plan .pname:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;gap:10px}
.plan h3:where(:not(.rdb *)){font-size:30px;letter-spacing:-0.04em}
.price:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(44px,4.4vw,68px);letter-spacing:-0.06em;line-height:.9}
.price small:where(:not(.rdb *)){font-family:var(--font-body);font-size:11px;letter-spacing:0;display:block;margin-top:10px;opacity:.7}
.muted2:where(:not(.rdb *)){color:var(--muted);font-size:14.5px}
.plan .ticks2:where(:not(.rdb *)){flex:1}
.plan .pill:where(:not(.rdb *)),.plan .btn-ghost:where(:not(.rdb *)){align-self:stretch;justify-content:center;min-height:52px;font-size:15px}
/* A card on the grey surface: its ghost button takes the page colour and an outline, or it disappears into the card. */
.plan:not(.feat) .btn-ghost:where(:not(.rdb *)){background:var(--bg);box-shadow:inset 0 0 0 1px var(--border)}
.plan:not(.feat) .btn-ghost:hover:where(:not(.rdb *)){background:var(--bg);box-shadow:inset 0 0 0 1px var(--fg)}
.plan.feat .ticks2 svg:where(:not(.rdb *)){color:var(--accent)}
.plan.feat .btn-lime:where(:not(.rdb *)){background:var(--accent);color:var(--fg)}
.btn-lime:where(:not(.rdb *)){display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;background:var(--accent);color:var(--fg);font-size:15px;font-weight:500;transition:background-color .2s}
.btn-lime:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--accent) 88%, var(--fg))}
.btn-lime svg:where(:not(.rdb *)){width:12px;height:12px}
.compare:where(:not(.rdb *)){width:100%;border-collapse:collapse;margin-top:clamp(28px,3vw,48px);font-size:14.5px}
.compare th:where(:not(.rdb *)),.compare td:where(:not(.rdb *)){padding:14px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.compare th:where(:not(.rdb *)){font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:0;color:var(--muted)}
.compare td:not(:first-child):where(:not(.rdb *)),.compare th:not(:first-child):where(:not(.rdb *)){text-align:center;width:18%}
.compare .y:where(:not(.rdb *)){display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent)}
.compare .y svg:where(:not(.rdb *)){width:14px;height:14px}
.compare .n:where(:not(.rdb *)){color:var(--muted)}
.compare-wrap:where(:not(.rdb *)){overflow-x:auto}
/* forms */
.formcard:where(:not(.rdb *)){background:var(--surface);border-radius:var(--radius-slab);padding:clamp(22px,2.4vw,36px)}
.frow:where(:not(.rdb *)){display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.formcard .fields>*+*:where(:not(.rdb *)){margin-top:14px}
.ff label:where(:not(.rdb *)){display:block;font-size:12.5px;font-weight:500;margin-bottom:6px}
.ff input:where(:not(.rdb *)),.ff select:where(:not(.rdb *)),.ff textarea:where(:not(.rdb *)){width:100%;min-height:48px;border:1px solid var(--border);border-radius:14px;padding:0 16px;font:inherit;font-size:15px;color:var(--fg);background:var(--bg);transition:border-color .2s, box-shadow .2s}
.ff textarea:where(:not(.rdb *)){padding:14px 16px;min-height:120px;resize:vertical}
.ff input:focus:where(:not(.rdb *)),.ff select:focus:where(:not(.rdb *)),.ff textarea:focus:where(:not(.rdb *)){outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px color-mix(in oklch, var(--accent-2) 18%, transparent)}
.ff [aria-invalid="true"]:where(:not(.rdb *)){border-color:oklch(55% 0.2 25)}
.ff .err:where(:not(.rdb *)){font-size:12px;color:oklch(48% 0.19 25);margin-top:5px;min-height:16px}
.formcard .pill-dark:where(:not(.rdb *)){margin-top:6px}
.fdone:where(:not(.rdb *)){display:none;padding:28px 0;text-align:left}
.formcard.sent .fields:where(:not(.rdb *)){display:none}.formcard.sent .fdone:where(:not(.rdb *)){display:block}
.fdone h3:where(:not(.rdb *)){font-size:30px;letter-spacing:-0.04em;margin-top:14px}
.fdone p:where(:not(.rdb *)){color:var(--muted);margin-top:8px}
/* help */
.helpsearch:where(:not(.rdb *)){display:flex;align-items:center;gap:12px;height:64px;border-radius:999px;background:var(--surface);padding:0 24px;margin-top:clamp(28px,3vw,44px);max-width:760px;transition:box-shadow .2s}
.helpsearch:focus-within:where(:not(.rdb *)){box-shadow:0 0 0 2px var(--accent-2)}
.helpsearch svg:where(:not(.rdb *)){width:18px;height:18px;color:var(--muted);flex:none}
.helpsearch input:where(:not(.rdb *)){flex:1;min-width:0;border:0;background:none;font:inherit;font-size:18px;color:var(--fg);outline:none}
.topics:where(:not(.rdb *)){display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.topics button:where(:not(.rdb *)){height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border);font-size:13.5px;transition:background-color .2s,color .2s,border-color .2s}
.topics button:hover:where(:not(.rdb *)){border-color:var(--fg)}
.topics button[aria-pressed="true"]:where(:not(.rdb *)){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.acc-item[hidden]:where(:not(.rdb *)){display:none}
.acc-cat:where(:not(.rdb *)){font-family:var(--font-body);font-size:11px;letter-spacing:0;color:var(--muted);margin-left:auto;margin-right:18px;white-space:nowrap}
.noresult:where(:not(.rdb *)){padding:24px 0;color:var(--muted)}
/* cta band */
.band:where(:not(.rdb *)){margin-top:clamp(96px,11vw,170px);background:var(--fg);color:var(--bg);border-radius:var(--radius-slab);padding:clamp(28px,4vw,64px);display:grid;grid-template-columns:1.3fr 1fr;gap:var(--pad);align-items:end;position:relative;overflow:hidden}
.band h2:where(:not(.rdb *)){font-size:clamp(40px,5vw,84px);letter-spacing:-0.055em;line-height:.95}
.band p:where(:not(.rdb *)){color:color-mix(in oklch, var(--bg) 72%, transparent);max-width:36ch}
.band .actions:where(:not(.rdb *)){margin-top:22px;position:relative;z-index:1}
/* A narrow phone: each action takes the row and keeps its label on one line. */
@media (max-width:420px){.actions > .btn-ghost:where(:not(.rdb *)),.actions > .btn-lime:where(:not(.rdb *)),.actions > .pill-dark:where(:not(.rdb *)),.actions > .pill:where(:not(.rdb *)){flex:1 1 100%;white-space:nowrap;padding-left:18px;padding-right:18px}}
.band .btn-ghost:where(:not(.rdb *)){background:color-mix(in oklch, var(--bg) 12%, var(--fg));color:var(--bg)}
.band .btn-ghost:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--bg) 22%, var(--fg))}
.band .ghost:where(:not(.rdb *)){position:absolute;right:-40px;bottom:-60px;width:clamp(200px,24vw,380px);color:var(--bg);opacity:.06}
/* 404 */
.nf:where(:not(.rdb *)){min-height:calc(100vh - 68px);display:grid;align-content:center;padding:clamp(40px,6vw,90px) var(--pad)}
.nf-big:where(:not(.rdb *)){display:flex;align-items:center;gap:clamp(10px,2vw,32px);font-family:var(--font-display);font-size:clamp(130px,26vw,420px);letter-spacing:-0.08em;line-height:.8}
.nf-big svg:where(:not(.rdb *)){width:.95em;height:auto;color:var(--fg);transform:rotate(-8deg) translateY(.04em)}
/* The tilted mark rises above the digits: room under the breadcrumb so the two never touch. */
.nf .nf-big:where(:not(.rdb *)){margin-top:clamp(28px,4vw,48px)}
/* responsive */
@media (max-width:920px){
  .phero-foot:where(:not(.rdb *)),.panel:where(:not(.rdb *)),.band:where(:not(.rdb *)),.cards:where(:not(.rdb *)),.cards.two:where(:not(.rdb *)),.cards.four:where(:not(.rdb *)),.plans:where(:not(.rdb *)),.frow:where(:not(.rdb *)){grid-template-columns:1fr}
  .nsteps:where(:not(.rdb *)),.nsteps.five:where(:not(.rdb *)),.bignums:where(:not(.rdb *)){grid-template-columns:1fr 1fr}
  .bar .pill:where(:not(.rdb *)){display:none}
}
@media (max-width:520px){.nsteps:where(:not(.rdb *)),.nsteps.five:where(:not(.rdb *)),.bignums:where(:not(.rdb *)){grid-template-columns:1fr}}
/* monthly pricing */
.price .was:where(:not(.rdb *)){font-size:.42em;letter-spacing:-0.02em;text-decoration:line-through;text-decoration-thickness:2px;opacity:.55;vertical-align:.55em;margin-right:.1em}
.price-strip:where(:not(.rdb *)){display:grid;grid-template-columns:1fr 1fr auto;gap:var(--pad);align-items:end;border-top:1px solid var(--fg);padding-top:18px}
.price-strip b:where(:not(.rdb *)){display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(40px,4vw,64px);letter-spacing:-0.05em;line-height:.9;margin-top:10px}
.price-strip div:first-child b:where(:not(.rdb *)){color:var(--accent-2)}
/* Labels and the button never wrap: the prices stay level, and the button drops under them once the row is too
   narrow for all three on one line (it used to break into "Start for / ₦5,000" at tablet and small-laptop widths). */
.price-strip .kicker:where(:not(.rdb *)),.price-strip .pill:where(:not(.rdb *)){white-space:nowrap}
@media (max-width:1240px){.price-strip:where(:not(.rdb *)){grid-template-columns:1fr 1fr}.price-strip .pill:where(:not(.rdb *)){grid-column:1/-1;justify-self:start}}
/* A narrow phone: the labels may wrap again (both the same number of lines), and the prices size to the column. */
@media (max-width:440px){.price-strip:where(:not(.rdb *)){align-items:start}.price-strip .kicker:where(:not(.rdb *)){display:block;white-space:normal;min-height:3.4em}.price-strip b:where(:not(.rdb *)){font-size:clamp(32px,10.5vw,44px)}}
.plans.two:where(:not(.rdb *)){grid-template-columns:1.25fr 1fr}
@media (max-width:920px){.plans.two:where(:not(.rdb *)){grid-template-columns:1fr}}

/* ================= AUTH + ONBOARDING ================= */
.authbody:where(:not(.rdb *)){background:var(--bg)}
.auth:where(:not(.rdb *)){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:100vh}
.auth-art:where(:not(.rdb *)){position:sticky;top:0;height:100vh;background:var(--fg);color:var(--bg);display:flex;flex-direction:column;padding:clamp(24px,3vw,48px);gap:clamp(20px,3vh,36px);overflow:hidden;border-radius:0 var(--radius-slab) var(--radius-slab) 0}
.auth-art .mark:where(:not(.rdb *)){width:56px;height:45px;color:var(--bg)}
.auth-art h2:where(:not(.rdb *)){font-size:clamp(36px,3.8vw,64px);letter-spacing:-0.055em;line-height:.98;max-width:12ch}
.auth-art figure:where(:not(.rdb *)){margin-top:auto;border-radius:22px;overflow:hidden;background:color-mix(in oklch, var(--bg) 8%, var(--fg))}
.auth-art figure img:where(:not(.rdb *)){width:100%;height:auto}
.auth-stats:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid color-mix(in oklch, var(--bg) 18%, transparent);padding-top:18px}
.auth-stats b:where(:not(.rdb *)){display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(26px,2.4vw,38px);letter-spacing:-0.05em;line-height:1}
.auth-stats span:where(:not(.rdb *)){font-size:12.5px;color:color-mix(in oklch, var(--bg) 66%, transparent)}
.auth-main:where(:not(.rdb *)){display:flex;flex-direction:column;padding:clamp(20px,2.4vw,36px) clamp(20px,4vw,72px)}
.auth-top:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;gap:16px}
.auth-top .mark:where(:not(.rdb *)){width:44px;height:35px;color:var(--fg)}
.auth-top a.help:where(:not(.rdb *)){font-size:14px;color:var(--muted);padding:10px 0}
.auth-top a.help:hover:where(:not(.rdb *)){color:var(--fg)}
.auth-card:where(:not(.rdb *)){width:100%;max-width:480px;margin:auto;padding:clamp(28px,5vh,56px) 0}
.auth-card h1:where(:not(.rdb *)){font-size:clamp(40px,4.4vw,64px);letter-spacing:-0.055em;line-height:.98;margin-top:14px}
.auth-card .sub:where(:not(.rdb *)){color:var(--muted);font-size:16px;margin-top:14px;max-width:38ch}
.auth-card .sub b:where(:not(.rdb *)){color:var(--fg);font-weight:500}
.auth-legal:where(:not(.rdb *)){font-size:12.5px;color:var(--muted);text-align:center;max-width:480px;margin:0 auto}
.auth-legal a:where(:not(.rdb *)){white-space:nowrap}
.step[hidden]:where(:not(.rdb *)){display:none}
.step:where(:not(.rdb *)){animation:stepIn .45s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}}
.btn-google:where(:not(.rdb *)){width:100%;display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;border-radius:999px;border:1px solid var(--border);background:var(--bg);font-size:15.5px;font-weight:500;margin-top:30px;transition:border-color .2s, background-color .2s}
.btn-google:hover:where(:not(.rdb *)){border-color:var(--fg);background:var(--surface)}
.btn-google svg:where(:not(.rdb *)){width:20px;height:20px}
.divider:where(:not(.rdb *)){display:flex;align-items:center;gap:14px;margin:22px 0;font-family:var(--font-body);font-size:11px;letter-spacing:0;color:var(--muted)}
.divider:where(:not(.rdb *))::before,.divider:where(:not(.rdb *))::after{content:"";flex:1;height:1px;background:var(--border)}
.auth-card .ff+.pill-dark:where(:not(.rdb *)),.auth-card .pill-dark.full:where(:not(.rdb *)){width:100%;justify-content:space-between;min-height:56px;margin-top:14px}
.pill-dark[disabled]:where(:not(.rdb *)){opacity:.45;cursor:not-allowed}
.note:where(:not(.rdb *)){display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin-top:18px}
.note svg:where(:not(.rdb *)){width:16px;height:16px;flex:none;margin-top:2px;color:var(--fg)}
.backlink:where(:not(.rdb *)){display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);min-height:44px}
.backlink:hover:where(:not(.rdb *)){color:var(--fg)}
.backlink svg:where(:not(.rdb *)){width:16px;height:16px}
.otp:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:30px}
.otp input:where(:not(.rdb *)){width:100%;aspect-ratio:1/1.12;min-height:56px;border:1px solid var(--border);border-radius:16px;background:var(--bg);text-align:center;font-family:var(--font-display);font-size:clamp(26px,3vw,34px);letter-spacing:-0.02em;color:var(--fg);transition:border-color .2s, box-shadow .2s, background-color .2s}
.otp input:focus:where(:not(.rdb *)){outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px color-mix(in oklch, var(--accent-2) 18%, transparent)}
.otp input.filled:where(:not(.rdb *)){background:var(--surface)}
.otp.bad input:where(:not(.rdb *)){border-color:oklch(55% 0.2 25);animation:shake .35s}
.otp.good input:where(:not(.rdb *)){border-color:var(--fg);background:color-mix(in oklch, var(--accent) 45%, var(--bg))}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.otp-err:where(:not(.rdb *)){font-size:13px;color:oklch(48% 0.19 25);min-height:20px;margin-top:10px}
.resend:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:18px}
.resend button:where(:not(.rdb *)){color:var(--fg);font-weight:500;border-bottom:1px solid;min-height:32px}
.resend button[disabled]:where(:not(.rdb *)){color:var(--muted);border-color:transparent;cursor:default}
.spinner:where(:not(.rdb *)){width:44px;height:44px;border-radius:50%;border:3px solid var(--surface);border-top-color:var(--fg);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Pending states: whatever waits on the server says so. A busy region ([aria-busy="true"]) dims its
   contents and runs a thin sweep along its top edge; a busy button carries .btn-spin beside a label
   that names the work. :where() keeps it at zero specificity, so a component's own position wins.
   Skeleton screens (.sk-screen) and live status lines carry their own loading look and are left alone. */
:where([aria-busy="true"]:not(button,input,select,textarea,.sk-screen,[role="status"])):where(:not(.rdb *)){position:relative;cursor:progress}
:where([aria-busy="true"]:not(button,input,select,textarea,.sk-screen,[role="status"]))>*:where(:not(.rdb *)){opacity:.55;transition:opacity .2s}
:where([aria-busy="true"]:not(button,input,select,textarea,.sk-screen,[role="status"])):where(:not(.rdb *))::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,transparent 15%,var(--accent-2) 50%,transparent 85%) 0 0/250% 100% no-repeat;animation:busySweep 1s linear infinite}
@keyframes busySweep{from{background-position:120% 0}to{background-position:-20% 0}}
.btn-spin:where(:not(.rdb *)){display:inline-block;flex:none;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
button[aria-busy="true"]:where(:not(.rdb *)){cursor:progress}
button[aria-busy="true"]:disabled:where(:not(.rdb *)){opacity:.7;cursor:progress}
@media (prefers-reduced-motion:reduce){:where([aria-busy="true"]:not(button,input,select,textarea,.sk-screen,[role="status"])):where(:not(.rdb *))::after{animation:none;background-position:50% 0}.btn-spin:where(:not(.rdb *)){animation:none}}
.okmark:where(:not(.rdb *)){width:64px;height:64px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.okmark svg:where(:not(.rdb *)){width:28px;height:28px}
/* onboarding */
.ob:where(:not(.rdb *)){min-height:100vh;display:flex;flex-direction:column}
.ob-top:where(:not(.rdb *)){position:sticky;top:0;z-index:5;background:color-mix(in oklch, var(--bg) 90%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.ob-top .wrap:where(:not(.rdb *)){display:flex;align-items:center;gap:20px;height:68px}
.ob-top .mark:where(:not(.rdb *)){width:44px;height:35px;color:var(--fg)}
.ob-prog:where(:not(.rdb *)){flex:1;display:flex;align-items:center;gap:14px;max-width:520px;margin:0 auto}
.ob-prog span:where(:not(.rdb *)){font-family:var(--font-body);font-size:11px;letter-spacing:0;color:var(--muted);white-space:nowrap}
.ob-bar:where(:not(.rdb *)){flex:1;height:4px;border-radius:2px;background:var(--surface);overflow:hidden}
.ob-bar i:where(:not(.rdb *)){display:block;height:100%;width:0;background:var(--accent-2);border-radius:2px;transition:width .5s var(--ease)}
.ob-exit:where(:not(.rdb *)){font-size:14px;color:var(--muted);padding:10px 0}
.ob-exit:hover:where(:not(.rdb *)){color:var(--fg)}
.ob-body:where(:not(.rdb *)){flex:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:clamp(24px,4vw,72px);padding-top:clamp(40px,6vh,80px);padding-bottom:40px;align-items:start}
.ob-body h1:where(:not(.rdb *)){font-size:clamp(40px,5vw,76px);letter-spacing:-0.055em;line-height:.96;max-width:14ch;margin-top:14px}
.ob-body .sub:where(:not(.rdb *)){color:var(--muted);font-size:17px;margin-top:14px;max-width:46ch}
.ob-field:where(:not(.rdb *)){margin-top:32px;max-width:640px}
.opts:where(:not(.rdb *)){display:grid;gap:8px;margin-top:28px;max-width:720px}
.opts.two:where(:not(.rdb *)){grid-template-columns:1fr 1fr}
/* As many cards a row as fit at 150px or more, four at most in the column (HAL-2606): fixed four ran the fourth card
   under the live preview on a portrait tablet. */
.opts.four:where(:not(.rdb *)){grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr))}
.opt2:where(:not(.rdb *)){position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-radius:18px;background:var(--surface);border:1.5px solid transparent;cursor:pointer;text-align:left;transition:border-color .2s, background-color .2s;min-height:64px}
.opt2:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--surface) 90%, var(--fg))}
.opt2 input:where(:not(.rdb *)){position:absolute;opacity:0;pointer-events:none}
.opt2:has(input:checked):where(:not(.rdb *)){border-color:var(--fg);background:var(--bg)}
.opt2:has(input:focus-visible):where(:not(.rdb *)){outline:2px solid var(--accent-2);outline-offset:2px}
.opt2 b:where(:not(.rdb *)){display:block;font-family:var(--font-display);font-weight:400;font-size:19px;letter-spacing:-0.025em;line-height:1.2}
.opt2 small:where(:not(.rdb *)){font-size:12.5px;color:var(--muted)}
.opt2 .radio:where(:not(.rdb *)){width:22px;height:22px;border-radius:50%;border:1.5px solid var(--muted);flex:none;display:grid;place-items:center}
.opt2:has(input:checked) .radio:where(:not(.rdb *)){border-color:var(--fg);background:var(--fg)}
.opt2:has(input:checked) .radio:where(:not(.rdb *))::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.opt2.big:where(:not(.rdb *)){flex-direction:column;align-items:flex-start;min-height:150px;justify-content:space-between}
.opt2.big .lvl:where(:not(.rdb *)){font-family:var(--font-display);font-size:48px;letter-spacing:-0.06em;line-height:.9}
.chips2:where(:not(.rdb *)){display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip2:where(:not(.rdb *)){position:relative;height:48px;padding:0 20px;border-radius:999px;background:var(--surface);display:inline-flex;align-items:center;font-size:15px;cursor:pointer;border:1.5px solid transparent;transition:background-color .2s,border-color .2s}
.chip2 input:where(:not(.rdb *)){position:absolute;opacity:0;pointer-events:none}
.chip2:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--surface) 90%, var(--fg))}
.chip2:has(input:checked):where(:not(.rdb *)){background:var(--fg);color:var(--bg)}
.chip2:has(input:focus-visible):where(:not(.rdb *)){outline:2px solid var(--accent-2);outline-offset:2px}
.qlabel:where(:not(.rdb *)){font-family:var(--font-body);font-size:11.5px;letter-spacing:0;color:var(--muted);margin-top:30px}
.qlabel .qopt:where(:not(.rdb *)){margin-left:8px;opacity:.7;text-transform:none;letter-spacing:0}
.inline-note:where(:not(.rdb *)){margin-top:16px;padding:14px 16px;border-radius:14px;background:color-mix(in oklch, var(--accent-2) 10%, var(--bg));font-size:14px;max-width:640px}
.inline-note b:where(:not(.rdb *)){font-weight:600}
.school-scroll:where(:not(.rdb *)){max-height:420px;overflow:auto;padding-right:4px;margin-top:14px;display:grid;gap:8px;max-width:720px}
.ob-foot:where(:not(.rdb *)){position:sticky;bottom:0;background:color-mix(in oklch, var(--bg) 92%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border)}
.ob-foot .wrap:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;gap:12px;height:84px}
.ob-foot .pill-dark:where(:not(.rdb *)){min-height:52px;min-width:190px}
.ob-err:where(:not(.rdb *)){font-size:13.5px;color:oklch(48% 0.19 25);min-height:20px}
.summary:where(:not(.rdb *)){position:sticky;top:110px;background:var(--surface);border-radius:var(--radius-slab);padding:24px}
.summary h3:where(:not(.rdb *)){font-size:22px;letter-spacing:-0.035em}
.summary .rowline:where(:not(.rdb *)){display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--border);font-size:14px}
.summary .rowline:first-of-type:where(:not(.rdb *)){margin-top:14px}
.summary .rowline span:where(:not(.rdb *)){color:var(--muted)}
.summary .rowline b:where(:not(.rdb *)){font-weight:500;text-align:right}
.tglink:where(:not(.rdb *)){margin-top:28px;max-width:640px;display:grid;gap:14px}
.tgcode:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;border-radius:18px;background:var(--fg);color:var(--bg)}
.tgcode b:where(:not(.rdb *)){font-family:var(--font-body);font-weight:400;font-size:clamp(24px,2.6vw,34px);letter-spacing:0}
.tgcode button:where(:not(.rdb *)){height:40px;padding:0 16px;border-radius:999px;background:var(--accent);color:var(--fg);font-size:13px;font-weight:500}
.status-line:where(:not(.rdb *)){display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.status-line i:where(:not(.rdb *)){width:10px;height:10px;border-radius:50%;background:var(--muted)}
.status-line.ok i:where(:not(.rdb *)){background:var(--accent);box-shadow:0 0 0 3px color-mix(in oklch, var(--accent) 35%, transparent)}
.status-line.ok:where(:not(.rdb *)){color:var(--fg)}
.paycard:where(:not(.rdb *)){margin-top:28px;max-width:640px;border-radius:var(--radius-slab);background:var(--fg);color:var(--bg);padding:clamp(22px,2.4vw,32px);display:grid;gap:16px}
.paycard .price:where(:not(.rdb *)){color:var(--bg)}
.paycard .ticks2 li:where(:not(.rdb *)){color:color-mix(in oklch, var(--bg) 80%, transparent)}
.paycard .ticks2 svg:where(:not(.rdb *)){color:var(--accent)}
.paycard .line:where(:not(.rdb *)){display:flex;justify-content:space-between;border-top:1px solid color-mix(in oklch, var(--bg) 18%, transparent);padding-top:14px;font-size:14px}
.done-wrap:where(:not(.rdb *)){max-width:760px}
/* Sign-in on a portrait tablet too (HAL-2606): beside the showcase panel, the form got half an iPad's width. */
@media (max-width:1100px) and (orientation:portrait){.auth:where(:not(.rdb *)){grid-template-columns:1fr}.auth-art:where(:not(.rdb *)){display:none}}
@media (max-width:920px){
  .auth:where(:not(.rdb *)){grid-template-columns:1fr}.auth-art:where(:not(.rdb *)){display:none}
  .ob-body:where(:not(.rdb *)){grid-template-columns:1fr}.summary:where(:not(.rdb *)){display:none}
  .opts.two:where(:not(.rdb *)){grid-template-columns:1fr}
  .ob-prog span:where(:not(.rdb *)){display:none}
}
@media (max-width:420px){.otp:where(:not(.rdb *)){gap:6px}}
.opt2[hidden]:where(:not(.rdb *)){display:none}

/* ================= LEGAL ================= */
.legal:where(:not(.rdb *)){display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,5vw,96px);margin-top:clamp(40px,5vw,80px);align-items:start}
.toc:where(:not(.rdb *)){position:sticky;top:96px;display:grid;gap:2px}
.toc p:where(:not(.rdb *)){font-family:var(--font-body);font-size:11px;letter-spacing:0;color:var(--muted);margin-bottom:10px}
.toc a:where(:not(.rdb *)){display:flex;gap:10px;font-size:14px;color:var(--muted);padding:7px 0 7px 12px;border-left:2px solid var(--border);transition:color .2s,border-color .2s}
.toc a small:where(:not(.rdb *)){font-family:var(--font-body);font-size:10.5px;padding-top:2px}
.toc a:hover:where(:not(.rdb *)){color:var(--fg)}
.toc a[aria-current="true"]:where(:not(.rdb *)){color:var(--fg);border-left-color:var(--accent-2)}
.plain:where(:not(.rdb *)){background:var(--surface);border-radius:var(--radius-slab);padding:clamp(22px,2.4vw,34px);display:grid;gap:14px}
.plain h2:where(:not(.rdb *)),.prose .plain h2:where(:not(.rdb *)){font-size:clamp(24px,2vw,30px);letter-spacing:-0.035em;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.plain ul:where(:not(.rdb *)){list-style:none;display:grid;gap:10px}
.plain li:where(:not(.rdb *)){display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:15px}
.plain li svg:where(:not(.rdb *)){width:16px;height:16px;margin-top:4px}
.prose:where(:not(.rdb *)){max-width:72ch}
.prose section:where(:not(.rdb *)){padding-top:clamp(36px,4vw,56px);scroll-margin-top:90px}
.prose h2:where(:not(.rdb *)){font-size:clamp(26px,2.3vw,36px);letter-spacing:-0.04em;line-height:1.1;display:flex;gap:14px;align-items:baseline}
.prose h2 small:where(:not(.rdb *)){font-family:var(--font-body);font-size:12px;letter-spacing:0;color:var(--muted);font-weight:400}
.prose h3:where(:not(.rdb *)){font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:0;margin-top:22px}
.prose p:where(:not(.rdb *)),.prose li:where(:not(.rdb *)){font-size:16px;line-height:1.65;color:color-mix(in oklch, var(--fg) 82%, var(--bg))}
.prose p:where(:not(.rdb *)){margin-top:12px}
.prose ul:where(:not(.rdb *)){margin-top:10px;padding-left:20px;display:grid;gap:6px}
.prose a:where(:not(.rdb *)){color:var(--fg);border-bottom:1px solid}
.prose table:where(:not(.rdb *)){width:100%;border-collapse:collapse;margin-top:16px;font-size:14.5px}
.prose th:where(:not(.rdb *)),.prose td:where(:not(.rdb *)){text-align:left;padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.prose th:where(:not(.rdb *)){font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:0;color:var(--muted)}
.meta-line:where(:not(.rdb *)){font-family:var(--font-body);font-size:12px;letter-spacing:0;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
@media (max-width:920px){.legal:where(:not(.rdb *)){grid-template-columns:1fr}.toc:where(:not(.rdb *)){position:static;display:none}}

/* ================= ONBOARDING v2 ================= */
.preview:where(:not(.rdb *)){position:sticky;top:104px;display:grid;gap:12px}
.pv-phone:where(:not(.rdb *)){background:var(--fg);color:var(--bg);border-radius:32px;padding:20px;display:grid;gap:14px;box-shadow:0 40px 80px -50px color-mix(in oklch, var(--fg) 70%, transparent)}
.pv-top:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;font-family:var(--font-body);font-size:11px;letter-spacing:0;opacity:.7}
.pv-hello:where(:not(.rdb *)){font-family:var(--font-display);font-size:26px;letter-spacing:-0.035em;line-height:1.1}
.pv-tags:where(:not(.rdb *)){display:flex;gap:6px;flex-wrap:wrap}
.pv-tag:where(:not(.rdb *)){height:28px;padding:0 11px;border-radius:999px;background:color-mix(in oklch, var(--bg) 14%, var(--fg));font-size:12px;display:inline-flex;align-items:center}
.pv-tag.lime:where(:not(.rdb *)){background:var(--accent);color:var(--fg)}
.pv-card:where(:not(.rdb *)){background:color-mix(in oklch, var(--bg) 9%, var(--fg));border-radius:18px;padding:16px;display:grid;gap:8px}
.pv-card .k:where(:not(.rdb *)){font-family:var(--font-body);font-size:10.5px;letter-spacing:0;opacity:.6}
.pv-card b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:-0.03em}
.pv-card .bar2:where(:not(.rdb *)){height:6px;border-radius:3px;background:color-mix(in oklch, var(--bg) 16%, var(--fg));overflow:hidden}
.pv-card .bar2 i:where(:not(.rdb *)){display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .6s var(--ease)}
.pv-row:where(:not(.rdb *)){display:flex;justify-content:space-between;font-size:13px;opacity:.8}
.pv-cap:where(:not(.rdb *)){font-size:12.5px;color:var(--muted);text-align:center}
.subj:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:14px;max-width:720px}
.subj .opt2:where(:not(.rdb *)){min-height:92px;align-items:flex-start;flex-direction:column;justify-content:space-between}
.subj .opt2 b:where(:not(.rdb *)){font-size:21px}
.modes:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;max-width:720px}
.modes .opt2:where(:not(.rdb *)){flex-direction:column;align-items:flex-start;gap:14px;min-height:170px}
.modes .ico:where(:not(.rdb *)){width:40px;height:40px;border-radius:12px;background:var(--bg);display:grid;place-items:center}
.modes .opt2:has(input:checked) .ico:where(:not(.rdb *)){background:var(--accent)}
.modes .ico svg:where(:not(.rdb *)){width:18px;height:18px}
.freeform:where(:not(.rdb *)){margin-top:14px;max-width:640px}
.stepdots:where(:not(.rdb *)){display:none}
@media (max-width:920px){.preview:where(:not(.rdb *)){display:none}.modes:where(:not(.rdb *)){grid-template-columns:1fr}}
[hidden]:where(:not(.rdb *)){display:none!important}
/* mock inbox notification (prototype) */
.mailtoast:where(:not(.rdb *)){position:fixed;top:20px;right:20px;z-index:80;width:min(380px,calc(100vw - 40px));display:grid;grid-template-columns:40px 1fr 28px;gap:12px;align-items:start;padding:16px;border-radius:20px;background:var(--bg);border:1px solid var(--border);box-shadow:0 30px 60px -30px color-mix(in oklch, var(--fg) 45%, transparent);animation:toastIn .45s var(--ease) both}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.98)}}
.mt-ico:where(:not(.rdb *)){width:40px;height:40px;border-radius:12px;background:var(--fg);display:grid;place-items:center}
.mt-ico svg:where(:not(.rdb *)){width:22px;height:18px;color:var(--bg)}
.mt-top:where(:not(.rdb *)){display:flex;justify-content:space-between;gap:10px;font-size:13px}
.mt-top span:where(:not(.rdb *)){color:var(--muted);font-size:12px}
.mt-sub:where(:not(.rdb *)){font-size:13.5px;color:var(--muted);margin-top:2px}
.mt-code:where(:not(.rdb *)){font-family:var(--font-body);font-size:26px;letter-spacing:0;margin-top:6px}
.mt-act:where(:not(.rdb *)){display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.mt-use:where(:not(.rdb *)){height:36px;padding:0 14px;border-radius:999px;background:var(--accent);color:var(--fg);font-size:13px;font-weight:500;transition:background-color .2s}
.mt-use:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--accent) 88%, var(--fg))}
.mt-sim:where(:not(.rdb *)){font-family:var(--font-body);font-size:10px;letter-spacing:0;color:var(--muted)}
.mt-x:where(:not(.rdb *)){width:28px;height:28px;border-radius:50%;font-size:18px;line-height:1;color:var(--muted)}
.mt-x:hover:where(:not(.rdb *)){background:var(--surface);color:var(--fg)}

/* ================= ONBOARDING v3 — full-screen split ================= */
.ob2:where(:not(.rdb *)){background:var(--bg)}
.ob2-wrap:where(:not(.rdb *)){display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.ob2-left:where(:not(.rdb *)){display:flex;flex-direction:column;padding:clamp(20px,2.6vw,40px) clamp(20px,4.4vw,80px);min-width:0}
.ob2-head:where(:not(.rdb *)){display:flex;align-items:center;gap:18px}
.ob2-head .mark:where(:not(.rdb *)){width:40px;height:32px;color:var(--fg)}
.ob2-count:where(:not(.rdb *)){font-family:var(--font-body);font-size:12px;letter-spacing:0;color:var(--muted)}
.ob2-count b:where(:not(.rdb *)){color:var(--fg);font-weight:400}
.segs:where(:not(.rdb *)){flex:1;display:flex;gap:4px;max-width:360px}
.segs i:where(:not(.rdb *)){flex:1;height:4px;border-radius:2px;background:var(--surface);transition:background-color .4s var(--ease)}
.segs i.on:where(:not(.rdb *)){background:var(--fg)}
.segs i.cur:where(:not(.rdb *)){background:var(--accent-2)}
.ob2-exit:where(:not(.rdb *)){margin-left:auto;font-size:13.5px;color:var(--muted);padding:10px 0}
.ob2-exit:hover:where(:not(.rdb *)){color:var(--fg)}
/* Who is signed in, with a way to switch, above every onboarding step (HAL-4812). */
.ob2-who:where(:not(.rdb *)){display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:22px;font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}
.ob2-who b:where(:not(.rdb *)){color:var(--fg);font-weight:500}
.ob2-who-switch:where(:not(.rdb *)){font:inherit;color:var(--fg);background:none;border:0;padding:6px 0;min-height:32px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ob2-who-switch:disabled:where(:not(.rdb *)){opacity:.6;cursor:progress}
.ob2-stage:where(:not(.rdb *)){flex:1;display:grid;align-content:center;padding:clamp(28px,5vh,64px) 0}
.ob2-inner:where(:not(.rdb *)){width:100%;max-width:640px;margin:0 auto}
.ob2 .step h1:where(:not(.rdb *)){font-size:clamp(38px,4.2vw,68px);letter-spacing:-0.055em;line-height:.98;max-width:13ch;margin-top:14px}
.ob2 .step .sub:where(:not(.rdb *)){color:var(--muted);font-size:16.5px;margin-top:18px;max-width:44ch}
/* The lime and indigo word pills in a step's title ("Start for ₦5,000."): a little smaller than the words, with room
   between the title's lines so a pill never sits on the line below it (HAL-2606, beta tester feedback). */
.ob2 .step h1:has(.metric):where(:not(.rdb *)){line-height:1.08}
.ob2 .step h1 .metric:where(:not(.rdb *)){font-size:.86em}
.mono-k:where(:not(.rdb *)){font-family:var(--font-body);font-size:12px;letter-spacing:0;color:var(--muted);display:flex;gap:10px;align-items:center}
.mono-k b:where(:not(.rdb *)){color:var(--accent-2);font-weight:400}
.hello:where(:not(.rdb *)){font-family:var(--font-body);font-size:clamp(26px,3vw,44px);letter-spacing:-0.02em;line-height:1.1;color:var(--fg);display:flex;align-items:center;min-height:1.2em}
.hello .p:where(:not(.rdb *)){color:var(--accent-2);margin-right:.5ch}
.caret:where(:not(.rdb *)){display:inline-block;width:.55ch;height:1em;background:var(--fg);margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ob2-actions:where(:not(.rdb *)){display:flex;align-items:center;gap:12px;max-width:640px;width:100%;margin:0 auto}
.ob2-actions .ob-err:where(:not(.rdb *)){flex:1;min-width:0}
/* Every button keeps its words on one line, and Continue gives up width before anything wraps (HAL-2606, a beta
   tester's tablet: "Skip for now" ran to three lines between Back and Continue). */
.ob2-actions .pill-dark:where(:not(.rdb *)){min-height:56px;min-width:min(200px,40%);justify-content:space-between;white-space:nowrap}
.ob2-actions .btn-ghost:where(:not(.rdb *)){min-height:56px;white-space:nowrap;flex:none}
.kbd-hint:where(:not(.rdb *)){font-family:var(--font-body);font-size:11px;color:var(--muted);letter-spacing:0}
/* "Press Enter" is for a keyboard: a finger on a phone or tablet has none, and the hint only crowded the buttons. */
@media (hover:none) and (pointer:coarse){.kbd-hint:where(:not(.rdb *)){display:none}}
.kbd-hint kbd:where(:not(.rdb *)){font-family:inherit;border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:1px 6px;color:var(--fg)}
/* month picker */
.mpick:where(:not(.rdb *)){margin-top:30px;max-width:560px;background:var(--surface);border-radius:26px;padding:18px}
.mp-head:where(:not(.rdb *)){display:flex;align-items:center;justify-content:space-between;padding:4px 6px 14px}
.mp-head b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:28px;letter-spacing:-0.04em}
.mp-nav:where(:not(.rdb *)){width:44px;height:44px;border-radius:50%;background:var(--bg);display:grid;place-items:center;transition:background-color .2s}
.mp-nav:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--bg) 88%, var(--fg))}
.mp-nav:disabled:where(:not(.rdb *)){opacity:.35;cursor:not-allowed}
.mp-nav svg:where(:not(.rdb *)){width:16px;height:16px}
.mp-grid:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mp-m:where(:not(.rdb *)){min-height:66px;border-radius:16px;background:var(--bg);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:10px 12px;text-align:left;border:1.5px solid transparent;transition:background-color .2s,border-color .2s,color .2s}
.mp-m b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:18px;letter-spacing:-0.02em}
.mp-m small:where(:not(.rdb *)){font-family:var(--font-body);font-size:10.5px;color:var(--muted);letter-spacing:0}
.mp-m:hover:not(:disabled):where(:not(.rdb *)){border-color:var(--fg)}
.mp-m:disabled:where(:not(.rdb *)){opacity:.35;cursor:not-allowed;background:transparent}
.mp-m.now:where(:not(.rdb *)){box-shadow:inset 0 0 0 1px var(--border)}
.mp-m[aria-pressed="true"]:where(:not(.rdb *)){background:var(--fg);color:var(--bg)}
.mp-m[aria-pressed="true"] small:where(:not(.rdb *)){color:var(--accent)}
.unsure:where(:not(.rdb *)){display:flex;align-items:center;gap:14px;margin-top:10px;max-width:560px;padding:14px 18px;border-radius:20px;border:1.5px dashed var(--border);cursor:pointer;transition:border-color .2s,background-color .2s}
.unsure:hover:where(:not(.rdb *)){border-color:var(--fg)}
.unsure input:where(:not(.rdb *)){position:absolute;opacity:0;pointer-events:none}
.unsure .tick:where(:not(.rdb *)){width:24px;height:24px;border-radius:8px;border:1.5px solid var(--muted);display:grid;place-items:center;flex:none;transition:background-color .2s,border-color .2s}
.unsure .tick svg:where(:not(.rdb *)){width:14px;height:14px;color:var(--fg);opacity:0}
.unsure b:where(:not(.rdb *)){display:block;font-weight:500;font-size:15px}
.unsure small:where(:not(.rdb *)){font-size:13px;color:var(--muted)}
.unsure:has(input:checked):where(:not(.rdb *)){border-style:solid;border-color:var(--fg);background:color-mix(in oklch, var(--accent) 22%, var(--bg))}
.unsure:has(input:checked) .tick:where(:not(.rdb *)){background:var(--accent);border-color:var(--fg)}
.unsure:has(input:checked) .tick svg:where(:not(.rdb *)){opacity:1}
.unsure:has(input:focus-visible):where(:not(.rdb *)){outline:2px solid var(--accent-2);outline-offset:2px}
/* right: phone stage */
.ob2-right:where(:not(.rdb *)){position:relative;display:grid;place-items:center;background:var(--surface);border-radius:var(--radius-slab) 0 0 var(--radius-slab);overflow:hidden;perspective:1600px;padding:40px 20px}
.ob2-right:where(:not(.rdb *))::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in oklch, var(--fg) 14%, transparent) 1px, transparent 1.4px);background-size:22px 22px;mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%)}
.stage3d:where(:not(.rdb *)){position:relative;transform-style:preserve-3d;display:grid;justify-items:center;gap:22px}
.phone:where(:not(.rdb *)){position:relative;width:min(330px,72vw);aspect-ratio:9/19;border-radius:52px;background:var(--fg);padding:12px;transform-style:preserve-3d;transition:transform 1.4s cubic-bezier(.2,.8,.2,1);box-shadow:0 1px 0 1px color-mix(in oklch, var(--fg) 70%, var(--bg)) inset,0 50px 90px -40px color-mix(in oklch, var(--fg) 60%, transparent)}
.phone:where(:not(.rdb *))::before{content:"";position:absolute;inset:0;border-radius:inherit;transform:translateZ(-14px);background:color-mix(in oklch, var(--fg) 80%, var(--bg));box-shadow:0 0 0 1px color-mix(in oklch, var(--fg) 60%, var(--bg))}
.phone:where(:not(.rdb *))::after{content:"";position:absolute;right:-3px;top:22%;width:4px;height:70px;border-radius:2px;background:color-mix(in oklch, var(--fg) 70%, var(--bg))}
.ph-screen:where(:not(.rdb *)){position:relative;height:100%;border-radius:42px;background:var(--fg);overflow:hidden;color:var(--bg);padding:52px 18px 18px;display:flex;flex-direction:column;gap:12px;transform:translateZ(1px)}
.ph-notch:where(:not(.rdb *)){position:absolute;top:14px;left:50%;translate:-50% 0;width:96px;height:28px;border-radius:14px;background:oklch(8% 0 0);z-index:3}
.ph-glare:where(:not(.rdb *)){position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg, color-mix(in oklch, var(--bg) 16%, transparent) 0%, transparent 32%);pointer-events:none;z-index:4;opacity:0;transition:opacity 1s}
.ph-view:where(:not(.rdb *)){display:flex;flex-direction:column;gap:12px;transition:opacity .5s,transform .6s var(--ease)}
.phone.done .ph-home:where(:not(.rdb *)){opacity:0;transform:translateY(-20px);position:absolute;inset:52px 18px auto;pointer-events:none}
.ph-card:where(:not(.rdb *)){opacity:0;transform:translateY(24px) scale(.96);position:absolute;inset:52px 18px 18px;pointer-events:none}
.phone.done .ph-card:where(:not(.rdb *)){opacity:1;transform:none;position:absolute;pointer-events:auto;transition-delay:.5s}
.phone.done:where(:not(.rdb *)){animation:float3d 7s ease-in-out 1.4s infinite;transform:rotateY(-24deg) rotateX(10deg) rotateZ(-3deg)}
.phone.done .ph-glare:where(:not(.rdb *)){opacity:1}
@keyframes float3d{0%,100%{transform:rotateY(-24deg) rotateX(10deg) rotateZ(-3deg) translateY(0)}50%{transform:rotateY(-14deg) rotateX(6deg) rotateZ(-1deg) translateY(-14px)}}
.stage-shadow:where(:not(.rdb *)){width:60%;height:24px;border-radius:50%;background:radial-gradient(color-mix(in oklch, var(--fg) 28%, transparent), transparent 70%);filter:blur(6px);transition:transform 1.4s}
.done-stage .stage-shadow:where(:not(.rdb *)){transform:scaleX(.8) translateX(-10%)}
.stage-cap:where(:not(.rdb *)){font-family:var(--font-body);font-size:11px;letter-spacing:0;color:var(--muted)}
/* id card on phone */
.idc:where(:not(.rdb *)){height:100%;border-radius:28px;background:var(--bg);color:var(--fg);display:flex;flex-direction:column;overflow:hidden}
.idc-top:where(:not(.rdb *)){background:var(--accent);padding:18px 18px 44px;position:relative}
.idc-top .row:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;font-family:var(--font-body);font-size:10.5px;letter-spacing:0;}
.idc-top .mark:where(:not(.rdb *)){width:30px;height:24px;color:var(--fg)}
.idc-av:where(:not(.rdb *)){position:absolute;left:18px;bottom:-34px;width:68px;height:68px;border-radius:50%;background:var(--fg);color:var(--accent);display:grid;place-items:center;font-family:var(--font-display);font-size:26px;letter-spacing:-0.04em;border:4px solid var(--bg)}
.idc-body:where(:not(.rdb *)){padding:44px 18px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.idc-name:where(:not(.rdb *)){font-family:var(--font-display);font-size:26px;letter-spacing:-0.045em;line-height:1}
.idc-school:where(:not(.rdb *)){font-size:12.5px;color:var(--muted)}
.idc-tags:where(:not(.rdb *)){display:flex;gap:6px;flex-wrap:wrap}
.idc-tags span:where(:not(.rdb *)){height:26px;padding:0 10px;border-radius:999px;background:var(--surface);font-size:11.5px;display:inline-flex;align-items:center}
.idc-tags span.ind:where(:not(.rdb *)){background:var(--accent-2);color:var(--bg)}
.idc-grid:where(:not(.rdb *)){display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.idc-grid div:where(:not(.rdb *)){background:var(--surface);border-radius:14px;padding:10px}
.idc-grid small:where(:not(.rdb *)){display:block;font-family:var(--font-body);font-size:9.5px;letter-spacing:0;color:var(--muted)}
.idc-grid b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:17px;letter-spacing:-0.03em}
.idc-id:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;font-family:var(--font-body);font-size:11px;letter-spacing:0;border-top:1px dashed var(--border);padding-top:10px}
.idc-bars:where(:not(.rdb *)){display:flex;gap:2px;height:18px}
.idc-bars i:where(:not(.rdb *)){width:2px;background:var(--fg)}
/* One column under 980px, and on a portrait tablet up to 1100px (HAL-2606): beside the preview, the steps had about
   half of an iPad's width, which shrank their type and cards to a phone's in a tablet's frame. */
@media (max-width:980px),(max-width:1100px) and (orientation:portrait){
  .ob2-wrap:where(:not(.rdb *)){grid-template-columns:1fr}
  .ob2-right:where(:not(.rdb *)){border-radius:var(--radius-slab) var(--radius-slab) 0 0;min-height:auto;order:-1;padding:28px 16px}
  .ob2-right:not(.done-stage) .stage3d:where(:not(.rdb *)){display:none}
  .ob2-right:not(.done-stage):where(:not(.rdb *)){display:none}
  /* The finished screen in one column (HAL-2606): the card above "You're in", as designed, at a phone's size
     (OnboardingFlow scales it whole), so the message follows close beneath it. */
  .ob2-right.done-stage:where(:not(.rdb *)){padding:24px 16px 28px}
  .mp-grid:where(:not(.rdb *)){grid-template-columns:repeat(3,1fr)}
  .ob2-actions:where(:not(.rdb *)){position:sticky;bottom:0;background:var(--bg);padding:12px 0}
}
@media (prefers-reduced-motion:reduce){.phone.done:where(:not(.rdb *)){animation:none}.caret:where(:not(.rdb *)){animation:none}}

.sr-only:where(:not(.rdb *)){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ob2 .done-wrap .okmark:where(:not(.rdb *)){animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ---- phone preview: the setup, step by step ---- */
.ob2-right:where(:not(.rdb *)){position:sticky;top:0;height:100vh;height:100dvh;align-self:start}
/* The preview phone is always laid out at its design size and scaled whole to the room it has (OnboardingFlow sets
   --fit, HAL-2606). Shrinking only its frame, as the width formula did, left its contents at full size: the setup
   list ran under the dock and the finished card's figures were cut off on short or narrow screens. */
.phone:where(:not(.rdb *)){width:340px}
.stage3d:where(:not(.rdb *)){zoom:var(--fit,1)}
.ph-screen:where(:not(.rdb *)){padding:48px 14px 14px}
.ph-home:where(:not(.rdb *)){flex:1;min-height:0;gap:14px}
.ph-home .pv-top:where(:not(.rdb *)){padding:0 8px}
.pv-me:where(:not(.rdb *)){display:flex;align-items:center;gap:12px;padding:0 4px}
.pv-av:where(:not(.rdb *)){width:44px;height:44px;flex:none;border-radius:50%;background:var(--accent);color:var(--fg);display:grid;place-items:center;font-family:var(--font-display);font-size:19px;letter-spacing:-0.03em}
.pv-me .pv-hello:where(:not(.rdb *)){font-size:19px;line-height:1.15}
.pv-sub:where(:not(.rdb *)){font-family:var(--font-body);font-size:10.5px;letter-spacing:0;opacity:.55;margin-top:3px}
.pv-meter:where(:not(.rdb *)){height:3px;border-radius:2px;margin:0 4px;background:color-mix(in oklch, var(--bg) 14%, var(--fg));overflow:hidden}
.pv-meter i:where(:not(.rdb *)){display:block;height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .6s var(--ease)}
.pv-list:where(:not(.rdb *)){list-style:none;flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.pv-list li:where(:not(.rdb *)){display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;transition:background-color .35s var(--ease),opacity .35s}
.pv-list .n:where(:not(.rdb *)){font-family:var(--font-body);font-size:10px;opacity:.45}
.pv-list .t:where(:not(.rdb *)){display:grid;min-width:0}
.pv-list small:where(:not(.rdb *)){font-size:10.5px;opacity:.55}
.pv-list b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:14.5px;letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-list .st:where(:not(.rdb *)){display:grid;place-items:center;min-width:22px;height:22px;border-radius:999px;font-size:10px;font-weight:500}
.pv-list .st svg:where(:not(.rdb *)){width:12px;height:12px}
.pv-list li.done .st:where(:not(.rdb *)){background:var(--accent);color:var(--fg)}
.pv-list li.cur:where(:not(.rdb *)){background:color-mix(in oklch, var(--bg) 10%, var(--fg));box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--bg) 16%, var(--fg))}
.pv-list li.cur .n:where(:not(.rdb *)){opacity:1;color:var(--accent)}
.pv-list li.cur .st:where(:not(.rdb *)){padding:0 9px;background:var(--accent-2);color:var(--bg)}
.pv-list li.next:where(:not(.rdb *)){opacity:.38}
.pv-list li.next .st:where(:not(.rdb *)){box-shadow:inset 0 0 0 1.5px color-mix(in oklch, var(--bg) 35%, var(--fg))}
.pv-list li.next b:where(:not(.rdb *)){font-family:var(--font-body);font-size:12px}
/* floating glass dock */
.pv-dock:where(:not(.rdb *)){align-self:center;display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:color-mix(in oklch, var(--bg) 12%, var(--fg));box-shadow:inset 0 1px 0 color-mix(in oklch, var(--bg) 22%, transparent),0 14px 30px -12px oklch(0% 0 0 / .8);backdrop-filter:blur(14px)}
.pv-dock span:where(:not(.rdb *)){height:40px;min-width:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:color-mix(in oklch, var(--bg) 60%, var(--fg))}
.pv-dock span.on:where(:not(.rdb *)){padding:0 16px 0 12px;background:var(--accent);color:var(--fg)}
.pv-dock em:where(:not(.rdb *)){font-style:normal;font-size:12px;font-weight:500}
.pv-dock svg:where(:not(.rdb *)){width:15px;height:15px}
.ph-home:where(:not(.rdb *))::after{content:"";align-self:center;width:34%;height:4px;border-radius:2px;background:color-mix(in oklch, var(--bg) 40%, var(--fg));margin-top:-4px}
@media (max-height:780px){.pv-list li:where(:not(.rdb *)){padding:7px 12px}.pv-list small:where(:not(.rdb *)){display:none}.ph-home:where(:not(.rdb *)){gap:10px}}
@media (max-width:980px),(max-width:1100px) and (orientation:portrait){.ob2-right:where(:not(.rdb *)){position:relative;height:auto}}


/* paying for several months at once */
.months:where(:not(.rdb *)){border:0;margin-top:28px;max-width:640px;display:grid;gap:14px}
.months legend:where(:not(.rdb *)){margin:0 0 12px;padding:0}
.months-row:where(:not(.rdb *)){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.months-chips:where(:not(.rdb *)){margin-top:0}
.chip2 .save-tag:where(:not(.rdb *)){margin-left:8px;height:22px;padding:0 8px;border-radius:999px;background:var(--accent);color:var(--fg);font-family:var(--font-body);font-size:11px;display:inline-flex;align-items:center}
.stepper:where(:not(.rdb *)){display:inline-flex;align-items:center;height:48px;border-radius:999px;background:var(--surface);padding:4px}
.stepper button:where(:not(.rdb *)){width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;line-height:1;transition:background-color .2s}
.stepper button:hover:not(:disabled):where(:not(.rdb *)){background:var(--bg)}
.stepper button:disabled:where(:not(.rdb *)){opacity:.35;cursor:not-allowed}
.stepper svg:where(:not(.rdb *)){width:16px;height:16px}
.stepper output:where(:not(.rdb *)){min-width:92px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.months-save:where(:not(.rdb *)){padding:14px 16px;border-radius:14px;background:var(--surface);font-size:14px;color:var(--muted)}
.months-save.on:where(:not(.rdb *)){background:color-mix(in srgb, var(--accent) 45%, var(--bg));color:var(--fg)}
.months-save b:where(:not(.rdb *)){font-weight:600}
.months-take:where(:not(.rdb *)){color:var(--fg);font-weight:600;border-bottom:1px solid;cursor:pointer}
.months-take:hover:where(:not(.rdb *)){color:var(--accent-2)}
.months-hint:where(:not(.rdb *)){font-size:13px;color:var(--muted)}
.plan-months:where(:not(.rdb *)){display:grid;gap:16px}
.plan .months:where(:not(.rdb *)){margin-top:4px;max-width:none}
.plan-total:where(:not(.rdb *)){display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;border-top:1px solid color-mix(in oklch, currentColor 22%, transparent);padding-top:14px}
.plan-total span:where(:not(.rdb *)){font-family:var(--font-body);font-size:12px;letter-spacing:0;opacity:.7}
.plan-total b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3vw,40px);letter-spacing:-0.05em;line-height:1}
.plan-total small:where(:not(.rdb *)){font-size:14px;opacity:.7}
.plan-months .btn-lime:where(:not(.rdb *)){width:100%}
.plan.feat .months legend:where(:not(.rdb *)){color:inherit}
.plan.feat .chip2:where(:not(.rdb *)){background:color-mix(in oklch, var(--bg) 14%, var(--fg));color:var(--bg)}
.plan.feat .chip2:hover:where(:not(.rdb *)){background:color-mix(in oklch, var(--bg) 22%, var(--fg))}
.plan.feat .chip2:has(input:checked):where(:not(.rdb *)){background:var(--accent);color:var(--fg)}
.plan.feat .stepper:where(:not(.rdb *)){background:color-mix(in oklch, var(--bg) 14%, var(--fg))}
.plan.feat .stepper button:where(:not(.rdb *)){color:var(--bg)}
.plan.feat .stepper button:hover:not(:disabled):where(:not(.rdb *)){background:var(--fg)}
.plan.feat .months-save:where(:not(.rdb *)){background:color-mix(in oklch, var(--bg) 10%, var(--fg));color:color-mix(in oklch, var(--bg) 75%, transparent)}
.plan.feat .months-save.on:where(:not(.rdb *)){background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--bg)}
.plan.feat .months-save.on b:where(:not(.rdb *)){color:var(--accent)}
.plan.feat .chip2:has(input:checked) .save-tag:where(:not(.rdb *)){background:var(--fg);color:var(--accent)}
.plan.feat .months-take:where(:not(.rdb *)){color:var(--accent)}
.plan.feat .months-hint:where(:not(.rdb *)){color:color-mix(in oklch, var(--bg) 65%, transparent)}
.paycard .line s:where(:not(.rdb *)){opacity:.6}
.paycard .line.save b:where(:not(.rdb *)){background:var(--accent);color:var(--fg);padding:2px 10px;border-radius:999px;font-weight:500}
.receipt-to:where(:not(.rdb *)){margin-top:14px;font-size:14px;color:var(--muted)}
.receipt-to b:where(:not(.rdb *)){color:var(--fg);font-weight:500}
.compare.bundles td:first-child:where(:not(.rdb *)){font-family:var(--font-display);font-size:18px;letter-spacing:-0.02em}
.compare.bundles td b:where(:not(.rdb *)){font-weight:500}
.compare.bundles s:where(:not(.rdb *)){margin-right:6px}
.save-pill:where(:not(.rdb *)){display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--accent);color:var(--fg);font-size:13px;white-space:nowrap}
.save-pill small:where(:not(.rdb *)){font-size:inherit}
.save-pill small:where(:not(.rdb *))::before{content:" · "}
/* On a phone the four columns fit the screen: tighter cells, the full price above what you pay, the saving
   stacked in its pill. Nothing scrolls sideways (it used to cut the "You save" column off with no sign). */
@media (max-width:600px){
  .compare.bundles:where(:not(.rdb *)){font-size:13.5px}
  .compare.bundles th:where(:not(.rdb *)),.compare.bundles td:where(:not(.rdb *)){padding:12px 4px}
  .compare.bundles th:first-child:where(:not(.rdb *)),.compare.bundles td:first-child:where(:not(.rdb *)){padding-left:0}
  .compare.bundles th:last-child:where(:not(.rdb *)),.compare.bundles td:last-child:where(:not(.rdb *)){padding-right:0}
  .compare.bundles th:where(:not(.rdb *)){font-size:10.5px;letter-spacing:.02em}
  .compare.bundles td:first-child:where(:not(.rdb *)){font-size:15px;white-space:nowrap}
  .compare.bundles s:where(:not(.rdb *)){display:block;margin:0 0 2px;font-size:12px}
  .compare.bundles .save-pill:where(:not(.rdb *)){height:auto;flex-direction:column;gap:0;padding:5px 9px;border-radius:12px;font-size:12px;line-height:1.25}
  .compare.bundles .save-pill small:where(:not(.rdb *))::before{content:none}
}
.bundle-foot:where(:not(.rdb *)){margin-top:16px;font-size:14px}

/* discount and referral codes */
.code-toggle:where(:not(.rdb *)){margin-top:8px;font-size:14px;color:var(--fg);padding:0;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.codebox:where(:not(.rdb *)){margin-top:18px;max-width:640px}
.codebox .code-row:where(:not(.rdb *)){display:flex;gap:8px;margin-top:10px}
.codebox input:where(:not(.rdb *)){flex:1;min-width:0;min-height:48px;border:1px solid var(--border);border-radius:999px;padding:0 18px;font-family:var(--font-body);font-size:15px;letter-spacing:0;color:var(--fg);background:var(--bg);transition:border-color .2s, box-shadow .2s}
.codebox input:focus:where(:not(.rdb *)){outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-2) 18%, transparent)}
.codebox input[aria-invalid="true"]:where(:not(.rdb *)){border-color:oklch(55% 0.2 25)}
.codebox .pill:where(:not(.rdb *)){min-height:48px;justify-content:center}
.codebox .pill:disabled:where(:not(.rdb *)){opacity:.5;cursor:not-allowed}
.codebox.applied:where(:not(.rdb *)){display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb, var(--accent) 45%, var(--bg));font-size:14px}
.codebox.applied>svg:where(:not(.rdb *)){width:18px;height:18px;flex:none}
.codebox.applied>div:where(:not(.rdb *)){flex:1}
.codebox.applied b:where(:not(.rdb *)){font-family:var(--font-body);font-weight:500;letter-spacing:0}
.codebox.applied button:where(:not(.rdb *)){font-size:13px;border-bottom:1px solid;padding:0;flex:none}
.paycard .line.code b:where(:not(.rdb *)){color:var(--accent)}
.code-note:where(:not(.rdb *)){margin-top:22px}
.code-note b:where(:not(.rdb *)){font-family:var(--font-body);letter-spacing:0}
.code-offer:where(:not(.rdb *)){display:grid;gap:10px}
.code-offer p:where(:not(.rdb *)){margin:0}
.code-offer ul:where(:not(.rdb *)){list-style:none;padding:0;margin:0;display:grid;gap:4px}
.code-offer li b:where(:not(.rdb *)){font-family:inherit;letter-spacing:normal}
.code-offer s:where(:not(.rdb *)){color:var(--muted)}
.code-offer .pill:where(:not(.rdb *)){justify-self:start}
/* referrals */
.refshare:where(:not(.rdb *)){margin-top:28px;max-width:640px;display:grid;gap:12px}
.reflink:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 12px 12px 18px;border-radius:999px;background:var(--surface);font-size:14px}
.reflink span:where(:not(.rdb *)){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.reflink button:where(:not(.rdb *)){flex:none;height:36px;padding:0 14px;border-radius:999px;background:var(--bg);font-size:13px}
.refbtns:where(:not(.rdb *)){display:flex;flex-wrap:wrap;gap:8px}
.refbtns .pill:where(:not(.rdb *)),.refbtns .btn-ghost:where(:not(.rdb *)){min-height:52px;font-size:15px}
.refstats:where(:not(.rdb *)){position:static;margin-top:22px;max-width:640px}
.refcard:where(:not(.rdb *)){margin-top:22px;padding:18px 20px;border-radius:18px;background:var(--surface);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.refcard b:where(:not(.rdb *)){font-weight:600}
.refcard a:where(:not(.rdb *)){border-bottom:1px solid;font-weight:500}
@media (max-width:920px){.frow:where(:not(.rdb *)){grid-template-columns:1fr}}

/* Route progress (src/components/RouteProgress.tsx): the bar across the top while the next page loads. */
.route-bar:where(:not(.rdb *)){position:fixed;inset:0 0 auto;height:3px;z-index:2147483000;pointer-events:none;opacity:0;transition:opacity .2s}
.route-bar.run:where(:not(.rdb *)){opacity:1}
.route-bar.done:where(:not(.rdb *)){opacity:0;transition:opacity .3s .18s}
.route-bar i:where(:not(.rdb *)){display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;transition:transform .2s ease-out;border-radius:0 3px 3px 0;background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}

/* The waiting page before an exam opens ((auth)/opens). */
.opens-count:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:26px}
.opens-count div:where(:not(.rdb *)){display:grid;justify-items:center;gap:4px;padding:14px 6px;border-radius:16px;background:var(--fg);color:var(--bg)}
.opens-count b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:clamp(26px,5vw,34px);letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums}
.opens-count span:where(:not(.rdb *)){font-family:var(--font-body);font-size:10.5px;letter-spacing:0;opacity:.6}
.opens-links:where(:not(.rdb *)){display:grid;gap:10px;margin-top:28px}

/* Dropdown (src/components/Dropdown.tsx): the app's select, in the onboarding month picker's look. */
.dd:where(:not(.rdb *)){position:relative;display:inline-flex;vertical-align:middle;max-width:100%}
.dd-trigger:where(:not(.rdb *)){display:inline-flex;align-items:center;gap:8px;height:40px;max-width:100%;padding:0 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:inherit;font:inherit;font-size:14px;cursor:pointer;transition:border-color .15s}
.dd-trigger:hover:where(:not(.rdb *)),.dd.open .dd-trigger:where(:not(.rdb *)){border-color:var(--fg)}
.dd-trigger:focus-visible:where(:not(.rdb *)){outline:2px solid var(--fg);outline-offset:2px}
.dd-trigger svg:where(:not(.rdb *)){width:14px;height:14px;flex:none}
.dd-val:where(:not(.rdb *)){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-val.dd-ph:where(:not(.rdb *)){color:var(--muted)}
.dd-chev:where(:not(.rdb *)){transition:transform .2s}
.dd.open .dd-chev:where(:not(.rdb *)){transform:rotate(180deg)}
.dd-list:where(:not(.rdb *)){position:absolute;z-index:90;top:calc(100% + 6px);left:0;min-width:max(100%,180px);max-width:min(360px,calc(100vw - 32px));max-height:320px;overflow:auto;margin:0;padding:6px;list-style:none;border-radius:18px;background:var(--bg);border:1px solid var(--border);box-shadow:0 24px 48px -24px color-mix(in srgb,var(--fg) 45%,transparent),0 2px 6px -2px color-mix(in srgb,var(--fg) 12%,transparent);animation:ddIn .16s ease-out}
.dd-list[hidden]:where(:not(.rdb *)){display:none}
.dd-list.up:where(:not(.rdb *)){top:auto;bottom:calc(100% + 6px)}
.dd-list li:where(:not(.rdb *)){display:grid;grid-template-columns:minmax(0,1fr) 16px;column-gap:10px;align-items:center;padding:9px 12px;border-radius:12px;cursor:pointer;color:var(--fg)}
.dd-list li b:where(:not(.rdb *)){font-weight:500;font-size:14px;line-height:1.35}
.dd-list li small:where(:not(.rdb *)){grid-column:1;font-size:12px;color:var(--muted);line-height:1.35}
.dd-list li .dd-tick:where(:not(.rdb *)){grid-column:2;grid-row:1;width:14px;height:14px;opacity:0}
.dd-list li.hi:where(:not(.rdb *)){background:var(--surface)}
.dd-list li[aria-selected="true"] b:where(:not(.rdb *)){font-weight:600}
.dd-list li[aria-selected="true"] .dd-tick:where(:not(.rdb *)){opacity:1}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dd-list.up:where(:not(.rdb *)){animation-name:ddInUp}
@keyframes ddInUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dd-list:where(:not(.rdb *)),.dd-chev:where(:not(.rdb *)){animation:none;transition:none}}
/* Inside a pill control (Today's range and interval), the dropdown is the pill's text, not a second box. */
.ctrl .dd-trigger:where(:not(.rdb *)),.seg .dd-trigger:where(:not(.rdb *)){height:auto;padding:0;border:0;background:none;font-size:inherit}
/* A pill that holds only a dropdown: the trigger fills the pill, so the whole pill takes the tap, not just its words. */
.ctrl:has(> .dd:only-child):where(:not(.rdb *)),.seg:has(> .dd:only-child):where(:not(.rdb *)){padding:0}
.ctrl > .dd:only-child:where(:not(.rdb *)),.seg > .dd:only-child:where(:not(.rdb *)){align-self:stretch}
.ctrl > .dd:only-child > .dd-trigger:where(:not(.rdb *)),.seg > .dd:only-child > .dd-trigger:where(:not(.rdb *)){padding:0 14px}
/* In a form row it fills the field like the inputs beside it. */
.ff .dd:where(:not(.rdb *)),.ff .dd-trigger:where(:not(.rdb *)){width:100%}
.ff .dd-trigger:where(:not(.rdb *)){justify-content:space-between;height:48px;border-radius:14px}
.dd-list.right:where(:not(.rdb *)){left:auto;right:0}
/* Floating: opened inside a container that clips, the panel is placed on the page itself (components/Dropdown.tsx). */
.dd-list.float:where(:not(.rdb *)){position:fixed;z-index:120;bottom:auto;right:auto;font-family:var(--font-body);color:var(--fg)}
.dd-list li.clear b:where(:not(.rdb *)){font-weight:400;color:var(--muted)}

/* ---------- Skeletons (components/Skeleton.tsx) ----------
   While a page's data loads it shows its own outline: the real containers, with soft blocks where the
   words and numbers will be. One slow sweep of --fg over --surface; still under reduced motion. The
   shapes are aria-hidden and each skeleton carries one role="status" line for screen readers. */
.sk-screen:where(:not(.rdb *)){animation:skIn .3s .1s both}
.sk:where(:not(.rdb *)){--sk-a:color-mix(in oklch, var(--fg) 7%, var(--surface));--sk-b:color-mix(in oklch, var(--bg) 75%, var(--surface));display:block;width:100%;max-width:100%;height:12px;border-radius:7px;background:linear-gradient(100deg,var(--sk-a) 35%,var(--sk-b) 50%,var(--sk-a) 65%) 100% 0/300% 100% no-repeat var(--sk-a);animation:skSweep 1.6s cubic-bezier(.4,0,.6,1) infinite}
.sk-ink:where(:not(.rdb *)){--sk-a:color-mix(in oklch, var(--bg) 13%, transparent);--sk-b:color-mix(in oklch, var(--bg) 24%, transparent)}
.sk-line:where(:not(.rdb *)){height:12px}
.sk-text:where(:not(.rdb *)){display:inline-block;vertical-align:-.06em;height:.78em;border-radius:.2em}
.sk-chip:where(:not(.rdb *)){display:inline-block;flex:none;width:88px;height:26px;border-radius:999px}
.sk-pill:where(:not(.rdb *)){display:inline-block;flex:none;width:150px;height:44px;border-radius:999px}
.sk-circle:where(:not(.rdb *)){flex:none;width:40px;height:40px;border-radius:50%}
.sk-box:where(:not(.rdb *)){flex:none;width:40px;height:40px;border-radius:12px}
.sk-card:where(:not(.rdb *)){height:120px;border-radius:20px}
.sk-lines:where(:not(.rdb *)){display:grid;gap:10px;width:100%}
.sk-row:where(:not(.rdb *)){display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sk-split:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;gap:12px}
.sk-split > .sk:where(:not(.rdb *)){flex:none}.sk-split > :is(.sk-card,.sk-lines):where(:not(.rdb *)){flex:1 1 auto;min-width:0}
.sk-body:where(:not(.rdb *)){margin-top:16px}
/* the auth shell's card (module/auth/views/AuthSkeleton.tsx) and onboarding (OnboardingSkeleton.tsx) */
.sk-auth:where(:not(.rdb *)){display:grid;gap:14px;margin-top:28px}
.sk-auth .sk-mid:where(:not(.rdb *)){justify-self:center}
.sk-field:where(:not(.rdb *)){border-radius:14px}
.sk-slab:where(:not(.rdb *)){border-radius:22px}
.sk-quad:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@keyframes skSweep{from{background-position:100% 0}to{background-position:0 0}}
@keyframes skIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sk:where(:not(.rdb *)){animation:none;background:var(--sk-a)}.sk-screen:where(:not(.rdb *)){animation:none}}

/* ---------- When a page fails (components/RouteError.tsx, each route group's error.tsx) ---------- */
.oops:where(:not(.rdb *)){width:100%;max-width:560px;margin:auto;padding:clamp(40px,8vh,96px) 0;display:grid;justify-items:start;gap:14px}
.oops-mark:where(:not(.rdb *)){width:64px;height:64px;border-radius:20px;background:var(--surface);display:grid;place-items:center}
.oops-mark svg:where(:not(.rdb *)){width:38px;height:30px;color:var(--fg)}
.oops h1:where(:not(.rdb *)){font-size:clamp(36px,4vw,56px);letter-spacing:-0.055em;line-height:.98;max-width:14ch}
.oops .sub:where(:not(.rdb *)){color:var(--muted);font-size:16px;max-width:44ch}
.oops .sub a:where(:not(.rdb *)){color:var(--fg);border-bottom:1px solid}
.oops-acts:where(:not(.rdb *)){display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.oops-acts .pill:where(:not(.rdb *)){min-height:52px;min-width:180px}
.oops-acts .btn-ghost:where(:not(.rdb *)){min-height:52px}
.oops-ref:where(:not(.rdb *)){font-family:var(--font-body);font-size:11px;letter-spacing:0;color:var(--muted)}
.dashbody .oops:where(:not(.rdb *)){min-height:min(62vh,560px);align-content:center;padding:40px 0}
.ob2 .oops:where(:not(.rdb *)){padding:clamp(28px,5vh,64px) 0}
.oops h1:focus:where(:not(.rdb *)){outline:none}
.ob2-wrap.oops-wrap:where(:not(.rdb *)){grid-template-columns:minmax(0,1fr)}

/* Text fields at 16px on a phone, on every page: iOS zooms in on a smaller one when it is tapped, and the zoomed page
   then pans sideways. (The app's phone.css carries the same rule for the signed-in screens.) */
@media (max-width:760px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):where(:not(.rdb *)),textarea:where(:not(.rdb *)),select:where(:not(.rdb *)){font-size:16px!important}
}

/* ---------- student reviews (HAL-2292): the wall on the home page and /reviews ---------- */
.rvwall:where(:not(.rdb *)){grid-template-columns:repeat(3,1fr)}
.rvwall-card.featured:where(:not(.rdb *)){border-color:var(--fg)}
.rvwall-stars:where(:not(.rdb *)){font-size:24px;line-height:1;letter-spacing:3px;color:var(--fg)}
.rvwall-more:where(:not(.rdb *)){color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.rvwall-q:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(19px,1.5vw,24px);line-height:1.3;letter-spacing:-0.02em;flex:1}
.rvwall-by:where(:not(.rdb *)){font-family:var(--font-body);font-size:12px;letter-spacing:0;color:var(--muted)}
.rvwall-reply:where(:not(.rdb *)){font-size:14px;line-height:1.5;color:var(--muted);border-top:1px dashed var(--border);padding-top:14px}
.rvwall-reply b:where(:not(.rdb *)){color:var(--fg);font-weight:500}
.rvwall-filter:where(:not(.rdb *)){display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.rvwall-filter .chip[aria-current="page"]:where(:not(.rdb *)){background:var(--fg);color:var(--bg);border-color:var(--fg)}
@media (max-width:1000px){.rvwall:where(:not(.rdb *)){grid-template-columns:1fr 1fr}}
@media (max-width:640px){.rvwall:where(:not(.rdb *)){grid-template-columns:1fr}}

/* ---------- the study loop (HAL-2332): know it, study it, practise it, track it ---------- */
.loop-head:where(:not(.rdb *)){max-width:880px}
.loop-head .h2:where(:not(.rdb *)){margin-top:14px}
.loop-head .lead:where(:not(.rdb *)){margin-top:clamp(18px,2vw,28px)}
.loop-nav:where(:not(.rdb *)){margin-top:clamp(28px,4vw,56px)}
.loop-ring:where(:not(.rdb *)){display:block;width:min(70%,300px);color:var(--fg);overflow:visible}
.ring-track:where(:not(.rdb *)){fill:none;stroke:var(--border);stroke-width:1.5}
.ring-arc:where(:not(.rdb *)){fill:none;stroke:var(--border);stroke-width:2.5;stroke-linecap:round;color:var(--muted);transition:stroke .5s var(--ease),color .5s var(--ease)}
.ring-node circle:where(:not(.rdb *)){fill:var(--bg);stroke:var(--border);stroke-width:1.5;transition:fill .4s var(--ease),stroke .4s var(--ease)}
.ring-node text:where(:not(.rdb *)){font-family:var(--font-body);font-size:11px;fill:var(--muted);transition:fill .4s var(--ease)}
.ring-mid:where(:not(.rdb *)){font-family:var(--font-display);font-size:15px;letter-spacing:-.02em;fill:var(--fg)}
.loop-stage[data-active="0"] .ring-node[data-i="0"] circle:where(:not(.rdb *)),.loop-stage[data-active="1"] .ring-node[data-i="1"] circle:where(:not(.rdb *)),.loop-stage[data-active="2"] .ring-node[data-i="2"] circle:where(:not(.rdb *)),.loop-stage[data-active="3"] .ring-node[data-i="3"] circle:where(:not(.rdb *)){fill:var(--accent);stroke:var(--fg)}
.loop-stage[data-active="0"] .ring-node[data-i="0"] text:where(:not(.rdb *)),.loop-stage[data-active="1"] .ring-node[data-i="1"] text:where(:not(.rdb *)),.loop-stage[data-active="2"] .ring-node[data-i="2"] text:where(:not(.rdb *)),.loop-stage[data-active="3"] .ring-node[data-i="3"] text:where(:not(.rdb *)){fill:var(--fg)}
.loop-stage[data-active="0"] .ring-arc[data-i="0"]:where(:not(.rdb *)),.loop-stage[data-active="1"] .ring-arc[data-i="1"]:where(:not(.rdb *)),.loop-stage[data-active="2"] .ring-arc[data-i="2"]:where(:not(.rdb *)),.loop-stage[data-active="3"] .ring-arc[data-i="3"]:where(:not(.rdb *)){stroke:var(--fg);color:var(--fg)}
.loop-tabs:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--border)}
.loop-tab:where(:not(.rdb *)){position:relative;display:flex;align-items:baseline;gap:12px;padding:18px 4px 16px;text-align:left;color:var(--muted);font:inherit;background:none;border:0;cursor:pointer;transition:color .3s var(--ease)}
.loop-tab:hover:where(:not(.rdb *)),.loop-tab[aria-selected="true"]:where(:not(.rdb *)){color:var(--fg)}
.loop-tab:focus-visible:where(:not(.rdb *)){outline:2px solid var(--accent-2);outline-offset:2px;border-radius:8px}
.loop-n:where(:not(.rdb *)){font-family:var(--font-body);font-size:11.5px}
.loop-name:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(18px,1.6vw,26px);letter-spacing:-.03em}
.loop-time:where(:not(.rdb *)){position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--fg);transform:scaleX(0);transform-origin:left}
.loop-tab[aria-selected="true"] .loop-time:where(:not(.rdb *)){transform:scaleX(1)}
.loop-stage[data-running] .loop-tab[aria-selected="true"] .loop-time:where(:not(.rdb *)){animation:loopTime 7s linear forwards}
@keyframes loopTime{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.loop-panels:where(:not(.rdb *)){margin-top:clamp(18px,2vw,28px)}
.loop-panel:where(:not(.rdb *)){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--pad);align-items:stretch}
.loop-panel+.loop-panel:where(:not(.rdb *)){margin-top:clamp(48px,6vw,96px)}
.loop-stage[data-js] .loop-panel+.loop-panel:where(:not(.rdb *)){margin-top:0}
.loop-stage[data-js] .loop-panel:where(:not(.rdb *)){display:none}
.loop-stage[data-js][data-active="0"] .loop-panel[data-i="0"]:where(:not(.rdb *)),.loop-stage[data-js][data-active="1"] .loop-panel[data-i="1"]:where(:not(.rdb *)),.loop-stage[data-js][data-active="2"] .loop-panel[data-i="2"]:where(:not(.rdb *)),.loop-stage[data-js][data-active="3"] .loop-panel[data-i="3"]:where(:not(.rdb *)){display:grid;animation:loopIn .6s var(--ease)}
@keyframes loopIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.loop-copy:where(:not(.rdb *)){padding:clamp(8px,1vw,16px) 0;display:flex;flex-direction:column}
.loop-copy h3:where(:not(.rdb *)){font-size:clamp(30px,2.6vw,46px);line-height:1.02;margin-top:14px;max-width:16ch}
.loop-copy>p.muted:where(:not(.rdb *)){margin-top:16px;max-width:44ch;font-size:16px;line-height:1.5}
.loop-points:where(:not(.rdb *)){list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.loop-points li:where(:not(.rdb *)){display:flex;gap:10px;align-items:center;font-size:15px}
.loop-points svg:where(:not(.rdb *)){width:20px;height:20px;flex:none;padding:4px;border-radius:50%;background:var(--accent);color:var(--fg)}
.loop-where:where(:not(.rdb *)){margin-top:auto;padding-top:24px;font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.loop-shot:where(:not(.rdb *)){border-radius:var(--radius-slab);background:var(--surface);padding:clamp(18px,3vw,48px);display:grid;place-items:center;min-height:clamp(380px,34vw,520px)}
.loop-cta:where(:not(.rdb *)){display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(36px,4vw,56px)}
.loop-cta .muted:where(:not(.rdb *)){font-size:14px}
/* Scroll mode (LoopStage, HAL-2612): the stage pins under the site bar (68px) and the track's extra height is the
   scroll that walks the loop, about half a screen a step. --t is stations passed (0–4), set as the page scrolls. */
.ring-fill:where(:not(.rdb *)){fill:none;stroke:var(--fg);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;display:none}
.ring-orbit:where(:not(.rdb *)){display:none;transform-box:view-box;transform-origin:120px 120px;transform:rotate(calc(var(--t,0) * 90deg))}
.ring-orbit circle:where(:not(.rdb *)){fill:var(--fg)}
.loop-stage[data-scroll] .ring-fill:where(:not(.rdb *)){display:inline;stroke-dashoffset:calc(1 - clamp(0, var(--t,0) - var(--i), 1))}
.loop-stage[data-scroll] .ring-orbit:where(:not(.rdb *)){display:inline}
.loop-stage[data-scroll] .ring-arc:where(:not(.rdb *)){stroke:var(--border)}
.loop-stage[data-scroll] .loop-track:where(:not(.rdb *)){height:calc(100svh - 68px + 4 * 55svh)}
.loop-stage[data-scroll] .loop-pin:where(:not(.rdb *)){position:sticky;top:68px;height:calc(100svh - 68px);display:grid;grid-template-columns:minmax(240px,.75fr) minmax(0,2.25fr);gap:var(--pad);align-items:center}
.loop-stage[data-scroll] .loop-nav:where(:not(.rdb *)){margin-top:0;display:grid;gap:clamp(20px,3vh,36px)}
.loop-stage[data-scroll] .loop-ring:where(:not(.rdb *)){width:min(100%,280px)}
.loop-stage[data-scroll] .loop-tabs:where(:not(.rdb *)){grid-template-columns:1fr;gap:0;margin-top:0;border-top:0}
.loop-stage[data-scroll] .loop-tab:where(:not(.rdb *)){padding:10px 0 10px 16px;border-left:2px solid var(--border)}
.loop-stage[data-scroll] .loop-tab[aria-selected="true"]:where(:not(.rdb *)){border-left-color:var(--fg)}
.loop-stage[data-scroll] .loop-time:where(:not(.rdb *)){display:none}
.loop-stage[data-scroll] .loop-panels:where(:not(.rdb *)){margin-top:0}
.loop-stage[data-scroll] .loop-shot:where(:not(.rdb *)){min-height:0;padding:clamp(14px,2.4vw,36px)}
@media (prefers-reduced-motion:reduce){.loop-stage[data-scroll][data-active] .loop-panel[data-i]:where(:not(.rdb *)){animation:none}.loop-stage[data-scroll] .ring-arc:where(:not(.rdb *)),.loop-stage[data-scroll] .ring-node *:where(:not(.rdb *)){transition:none}}
/* the product pictures in each panel */
.lw:where(:not(.rdb *)){width:100%;max-width:470px;background:var(--bg);border-radius:20px;padding:16px 18px 18px;box-shadow:0 30px 60px -36px color-mix(in oklch, var(--fg) 45%, transparent);font-size:13px}
.lw-head:where(:not(.rdb *)){display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:14px}
.lw-head .av:where(:not(.rdb *)){width:26px;height:26px;border-radius:50%;background:var(--fg);display:grid;place-items:center}
.lw-head .av svg:where(:not(.rdb *)){width:15px;height:12px;color:var(--surface)}
.lw-head b:where(:not(.rdb *)){font-weight:600}
.lw-head>span:last-child:where(:not(.rdb *)){margin-left:auto;font-family:var(--font-body);font-size:10.5px;letter-spacing:0;color:var(--muted)}
.lw-k:where(:not(.rdb *)){font-family:var(--font-body);font-size:10.5px;letter-spacing:0;color:var(--muted)}
.lw-stem:where(:not(.rdb *)){font-family:var(--font-display);font-size:18px;letter-spacing:-.02em;line-height:1.2;margin-top:8px}
.lw-foot:where(:not(.rdb *)){display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.lw-foot b:where(:not(.rdb *)){color:var(--fg);font-weight:600}
.heat:where(:not(.rdb *)){display:grid;grid-template-columns:minmax(0,1fr) repeat(10,14px) 52px;gap:4px;align-items:center;margin-top:12px}
.heat>em:where(:not(.rdb *)){font-style:normal;font-family:var(--font-body);font-size:9px;color:var(--muted);text-align:center}
.heat-row:where(:not(.rdb *)){display:contents}
.heat-t:where(:not(.rdb *)){font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heat i:where(:not(.rdb *)){display:block;height:14px;border-radius:4px;background:var(--surface)}
.heat i[data-on]:where(:not(.rdb *)){background:var(--fg)}
.heat-tag:where(:not(.rdb *)){text-align:right}
.heat-tag b:where(:not(.rdb *)){display:inline-block;font-family:var(--font-body);font-weight:400;font-size:9.5px;letter-spacing:0;padding:3px 7px;border-radius:999px;background:var(--accent);color:var(--fg)}
.heat-tag b[data-k="Due"]:where(:not(.rdb *)){background:var(--accent-2);color:var(--bg)}
.lw-ans:where(:not(.rdb *)){margin:12px 0 0;padding-left:18px;display:grid;gap:6px;line-height:1.45}
.lw-ans b:where(:not(.rdb *)){font-weight:600}
.lw-src:where(:not(.rdb *)){margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--surface);display:grid;gap:6px}
.lw-src p:not(.lw-k):where(:not(.rdb *)){font-size:12.5px}
.lw-src p span:where(:not(.rdb *)){color:var(--muted)}
.lw-checks:where(:not(.rdb *)){display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px}
.lw-checks span:where(:not(.rdb *)){display:inline-flex;gap:6px;align-items:center}
.lw-checks svg:where(:not(.rdb *)){width:16px;height:16px;padding:3px;border-radius:50%;background:var(--accent)}
.lw .modes:where(:not(.rdb *)){display:grid;grid-template-columns:1fr;max-width:none;gap:8px;margin-top:12px}
.mode:where(:not(.rdb *)){display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 12px;border-radius:12px;border:1px solid var(--border)}
.mode[data-on]:where(:not(.rdb *)){border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.mode-m:where(:not(.rdb *)){font-family:var(--font-body);font-size:10.5px;letter-spacing:0;color:var(--muted)}
.mode[data-on] .mode-m:where(:not(.rdb *)){color:var(--fg)}
.mode-w:where(:not(.rdb *)){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mode-h:where(:not(.rdb *)){font-size:11.5px;color:var(--muted)}
.lw-timer:where(:not(.rdb *)){display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.lw-timer .mono:where(:not(.rdb *)){font-size:10.5px;color:var(--muted)}
.lw-track:where(:not(.rdb *)){height:6px;border-radius:3px;background:var(--surface);overflow:hidden}
.lw-track i:where(:not(.rdb *)){display:block;height:100%;background:var(--fg);border-radius:3px}
.lw-timer .pill:where(:not(.rdb *)){min-height:34px;font-size:12.5px;padding:0 14px}
.vs:where(:not(.rdb *)){display:grid;gap:10px;margin-top:12px}
.vs-row:where(:not(.rdb *)){display:grid;grid-template-columns:110px 1fr 36px;gap:10px;align-items:center;font-size:12.5px}
.vs-row i:where(:not(.rdb *)){position:relative;height:10px;border-radius:5px;background:var(--surface)}
.vs-row b:where(:not(.rdb *)){position:absolute;inset:0 auto 0 0;border-radius:5px;background:var(--fg)}
.vs-row u:where(:not(.rdb *)){position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--accent-2)}
.vs-row em:where(:not(.rdb *)){font-style:normal;font-family:var(--font-body);font-size:11px;text-align:right}
.vs-key:where(:not(.rdb *)){display:flex;gap:8px;align-items:center;margin-top:10px;font-size:11.5px;color:var(--muted)}
.vs-key span:where(:not(.rdb *)){display:inline-block;width:12px;height:6px;border-radius:3px}
.vs-key .you:where(:not(.rdb *)){background:var(--fg)}
.vs-key .cls:where(:not(.rdb *)){width:3px;height:12px;background:var(--accent-2);margin-left:8px}
.due:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding:14px;border-radius:14px;background:var(--accent)}
.due div:where(:not(.rdb *)){display:flex;align-items:baseline;gap:8px}
.due b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:30px;letter-spacing:-.04em;line-height:1}
.due-go:where(:not(.rdb *)){display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500}
.due-go svg:where(:not(.rdb *)){width:14px;height:14px}
/* the pricing page's strip: one plan, every step */
.loop-strip:where(:not(.rdb *)){list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad);border-top:1px solid var(--border)}
.loop-strip li:where(:not(.rdb *)){padding-top:20px;display:grid;gap:8px;align-content:start;position:relative}
.loop-strip li:where(:not(.rdb *))::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--fg)}
.loop-strip .mono:where(:not(.rdb *)){color:var(--muted)}
.loop-strip b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:clamp(22px,1.9vw,30px);letter-spacing:-.03em;line-height:1.05}
.loop-strip .muted:where(:not(.rdb *)){font-size:14.5px;line-height:1.45;max-width:30ch}
@media (max-width:1000px){
  .loop-ring:where(:not(.rdb *)){width:min(70%,280px)}
  /* Pinned on a phone or an upright tablet: the ring beside the steps, then the panel, all on one screen. */
  .loop-stage[data-scroll] .loop-pin:where(:not(.rdb *)){grid-template-columns:1fr;align-content:start;padding-top:clamp(8px,4vh,56px);gap:clamp(14px,2.4vh,28px)}
  .loop-stage[data-scroll] .loop-nav:where(:not(.rdb *)){grid-template-columns:clamp(112px,30vw,220px) minmax(0,1fr);align-items:center;gap:clamp(14px,4vw,40px)}
  .loop-stage[data-scroll] .loop-tab:where(:not(.rdb *)){padding:6px 0 6px 12px}
  .loop-stage[data-scroll] .loop-copy:where(:not(.rdb *)){padding:0}
  .loop-stage[data-scroll] .loop-copy h3:where(:not(.rdb *)){font-size:clamp(24px,4.6vw,38px);margin-top:8px}
  .loop-stage[data-scroll] .loop-points:where(:not(.rdb *)){display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px}
  .loop-stage[data-scroll] .loop-where:where(:not(.rdb *)){display:none}
  .loop-panel:where(:not(.rdb *)),.loop-stage[data-js][data-active] .loop-panel[data-i]:where(:not(.rdb *)){grid-template-columns:1fr}
  .loop-strip:where(:not(.rdb *)){grid-template-columns:1fr 1fr;row-gap:28px}
}
/* Shorter phones: the panel's title and its sample screen carry the step; the ticks and the fourth practice mode go. */
@media (max-width:640px) and (max-height:820px){
  .loop-stage[data-scroll] .lw:where(:not(.rdb *)){zoom:.8}
  .loop-stage[data-scroll] .loop-points:where(:not(.rdb *)),.loop-stage[data-scroll] .mode:nth-child(n+4):where(:not(.rdb *)){display:none}
  .loop-stage[data-scroll] .loop-tab:where(:not(.rdb *)){padding-block:4px}
}
@media (max-width:640px) and (max-height:720px){.loop-stage[data-scroll] .lw-src:where(:not(.rdb *)){display:none}}
@media (max-width:640px){
  /* The pinned ring is small here: its stations read as dots, the steps beside it carry the numbers. */
  .loop-stage[data-scroll] .ring-node text:where(:not(.rdb *)),.loop-stage[data-scroll] .ring-mid:where(:not(.rdb *)){display:none}
  .loop-stage[data-scroll] .loop-pin:where(:not(.rdb *)){padding-top:clamp(8px,2vh,20px)}
  .loop-stage[data-scroll] .loop-copy>.mono:where(:not(.rdb *)){display:none}
  .loop-stage[data-scroll] .loop-copy h3:where(:not(.rdb *)){max-width:none;margin-top:0}
  .loop-stage[data-scroll] .loop-shot:where(:not(.rdb *)){padding:10px}
  .loop-stage[data-scroll] .lw:where(:not(.rdb *)){zoom:.9}
  .loop-tabs:where(:not(.rdb *)){grid-template-columns:1fr 1fr;gap:0 12px}
  .loop-tab:where(:not(.rdb *)){padding:14px 2px 12px}
  .loop-shot:where(:not(.rdb *)){padding:14px;min-height:0}
  .lw:where(:not(.rdb *)){padding:14px}
  .heat:where(:not(.rdb *)){grid-template-columns:minmax(0,1fr) repeat(10,10px) 44px;gap:3px}
  .heat i:where(:not(.rdb *)){height:11px}
  .mode:where(:not(.rdb *)){grid-template-columns:1fr auto}
  .mode-m:where(:not(.rdb *)){grid-column:1/-1}
  .vs-row:where(:not(.rdb *)){grid-template-columns:88px 1fr 34px}
  .loop-strip:where(:not(.rdb *)){grid-template-columns:1fr}
}

/* Scroll-lit statements (components/ScrollWords.tsx, HAL-2472): words start muted and turn full ink as the text
   scrolls through the screen. Only once the script runs (.sw-live), so without it every word reads in full. */
.sw-live .sw:where(:not(.rdb *)){color:var(--muted);transition:color .3s}
.sw-live .sw.on:where(:not(.rdb *)){color:var(--fg)}
.sw-tall:where(:not(.rdb *)){height:150vh;position:relative}
.sw-pin:where(:not(.rdb *)){position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:28px}
.sw-big:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:clamp(44px,9vw,132px);line-height:1.02;letter-spacing:-0.045em;max-width:15ch}
@media (prefers-reduced-motion:reduce){.sw-live .sw:where(:not(.rdb *)){color:var(--fg)}.sw-tall:where(:not(.rdb *)){height:auto}.sw-pin:where(:not(.rdb *)){position:static;min-height:0}}
.oops-page main:where(:not(.rdb *)){min-height:100dvh;display:grid;padding:0 clamp(16px,4vw,40px)}

/* A newer deploy is live (HAL-2951, components/AppWorker.tsx): one quiet pill above the phone dock. */
.appupd:where(:not(.rdb *)){position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:6px;max-width:calc(100% - 32px);padding:6px 6px 6px 16px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:14px;line-height:1.3;box-shadow:0 10px 30px -12px rgb(0 0 0 / .35);animation:appupd .45s var(--ease) both}
.appupd span:where(:not(.rdb *)){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appupd button:where(:not(.rdb *)){height:34px;padding:0 14px;border-radius:999px;background:var(--accent);color:oklch(15.5% 0 0);font-weight:500;flex:none}
.appupd button.x:where(:not(.rdb *)){width:34px;padding:0;display:grid;place-items:center;background:transparent;color:inherit;opacity:.7}
.appupd button.x svg:where(:not(.rdb *)){width:14px;height:14px}
@media (max-width:760px){.appupd:where(:not(.rdb *)){bottom:calc(96px + env(safe-area-inset-bottom))}}
@keyframes appupd{from{opacity:0;transform:translate(-50%,10px)}}
@media (prefers-reduced-motion:reduce){.appupd:where(:not(.rdb *)){animation:none}}

/* ===== tiered plans (HAL-3021): /pricing, checkout and the onboarding plan step ===== */
/* /pricing: three equal plans, every row level across them */
.plans.three:where(:not(.rdb *)){grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto auto 1fr auto;align-items:stretch}
.plans.three .plan:where(:not(.rdb *)){display:grid;grid-template-rows:subgrid;grid-row:span 6;gap:16px}
.plan .ppitch:where(:not(.rdb *)){min-height:2.6em}
.plan .savechip:where(:not(.rdb *)){justify-self:start;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--accent);color:var(--fg);font-family:var(--font-body);font-size:11px;letter-spacing:0;}
.plan .ticks2 li.off:where(:not(.rdb *)){opacity:.5}
.plan .ticks2 b:where(:not(.rdb *)){font-weight:600}
.plan.feat .tagp:where(:not(.rdb *)){background:color-mix(in oklch, var(--bg) 14%, var(--fg));color:var(--bg)}
@media (max-width:920px){.plans.three:where(:not(.rdb *)){grid-template-columns:1fr;grid-template-rows:none}.plans.three .plan:where(:not(.rdb *)){display:flex;grid-row:auto}.plan .ppitch:where(:not(.rdb *)){min-height:0}}
.planctl:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,3vw,48px)}
.planctl-r:where(:not(.rdb *)){display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lenbar:where(:not(.rdb *)){display:inline-flex;background:var(--surface);border-radius:999px;padding:4px;gap:2px}
.lenbar button:where(:not(.rdb *)){min-height:44px;padding:0 20px;border-radius:999px;font-size:14.5px;color:var(--muted);transition:background-color .2s,color .2s}
.lenbar button[aria-checked="true"]:where(:not(.rdb *)){background:var(--fg);color:var(--bg)}
.groupsw:where(:not(.rdb *)){display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px 0 6px;border-radius:999px;background:var(--surface);font-size:14px;cursor:pointer}
.groupsw input:where(:not(.rdb *)){position:absolute;opacity:0;pointer-events:none}
.groupsw .sw:where(:not(.rdb *)){position:relative;width:42px;height:26px;border-radius:999px;background:var(--border);transition:background-color .2s;flex:none}
.groupsw .sw:where(:not(.rdb *))::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--bg);transition:transform .2s}
.groupsw input:checked + .sw:where(:not(.rdb *)){background:var(--fg)}
.groupsw input:checked + .sw:where(:not(.rdb *))::after{transform:translateX(16px)}
.groupsw input:focus-visible + .sw:where(:not(.rdb *)){outline:2px solid var(--accent-2);outline-offset:2px}
.receipts3:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pad);margin-top:clamp(40px,4.4vw,72px);border-top:1px solid var(--border)}
.receipt:where(:not(.rdb *)){padding-top:22px;display:grid;gap:10px;align-content:start}
.receipt h3:where(:not(.rdb *)){font-size:clamp(22px,1.9vw,30px);letter-spacing:-0.02em;line-height:1.1}
.rlines:where(:not(.rdb *)){display:grid;gap:7px;font-size:14px;font-variant-numeric:tabular-nums}
.rlines div:where(:not(.rdb *)){display:flex;justify-content:space-between;gap:12px}
.rlines .cut span:last-child:where(:not(.rdb *)){color:var(--accent-2)}
.rlines .gone span:last-child:where(:not(.rdb *)){text-decoration:line-through;text-decoration-thickness:2px;color:var(--muted)}
.rtotal:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--fg);padding-top:12px}
.rtotal b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:clamp(30px,2.6vw,42px);letter-spacing:-0.05em;font-variant-numeric:tabular-nums}
.rsmall:where(:not(.rdb *)){font-size:13px;font-variant-numeric:tabular-nums}
.receipts3.one:where(:not(.rdb *)){grid-template-columns:minmax(0,1fr);max-width:560px}
@media (max-width:920px){.receipts3:where(:not(.rdb *)){grid-template-columns:1fr}}
.compare.tiers .fname:where(:not(.rdb *)){font-size:14.5px}
.compare.tiers th.feat:where(:not(.rdb *)),.compare.tiers td.feat:where(:not(.rdb *)){background:color-mix(in oklch, var(--accent) 14%, var(--bg))}
.compare.tiers tr.grp td:where(:not(.rdb *)){font-family:var(--font-body);font-size:11px;letter-spacing:0;color:var(--muted);padding-top:30px;text-align:left;background:none}
.compare.tiers .yes:where(:not(.rdb *)){display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--fg)}
.compare.tiers .no:where(:not(.rdb *)){display:inline-block;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border)}
.compare.tiers .lim:where(:not(.rdb *)){font-family:var(--font-display);font-size:16px;letter-spacing:-0.02em;white-space:nowrap}
.soon:where(:not(.rdb *)){font-family:var(--font-body);font-size:9.5px;letter-spacing:0;border:1px solid currentColor;border-radius:999px;padding:0 6px;margin-left:8px;opacity:.65;white-space:nowrap;vertical-align:1px}
.duo2:where(:not(.rdb *)){display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);margin-top:clamp(40px,4.4vw,72px)}
.slab2:where(:not(.rdb *)){background:var(--surface);border-radius:var(--radius-slab);padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;gap:16px}
.slab2.ink:where(:not(.rdb *)){background:var(--fg);color:var(--bg)}
.slab2.ink p:where(:not(.rdb *)){color:color-mix(in oklch, var(--bg) 72%, transparent)}
.slab2 h3:where(:not(.rdb *)){font-size:clamp(26px,2.2vw,36px);letter-spacing:-0.035em}
.gbig:where(:not(.rdb *)){font-family:var(--font-display);font-size:clamp(84px,10vw,170px);letter-spacing:-0.075em;line-height:.8;color:var(--accent)}
.steps2:where(:not(.rdb *)){list-style:none;display:grid;counter-reset:s}
.steps2 li:where(:not(.rdb *)){display:grid;grid-template-columns:44px 1fr;gap:10px;padding-block:14px;border-top:1px solid color-mix(in oklch, var(--bg) 16%, var(--fg));counter-increment:s;font-size:15px}
.steps2 li:where(:not(.rdb *))::before{content:"0" counter(s);font-family:var(--font-body);font-size:11.5px;color:var(--accent);padding-top:3px}
.perks2:where(:not(.rdb *)){display:grid;grid-template-columns:1fr 1fr;gap:10px}
.perks2 div:where(:not(.rdb *)){background:var(--bg);border-radius:16px;padding:16px;font-size:13.5px}
.perks2 b:where(:not(.rdb *)){display:block;font-family:var(--font-display);font-weight:400;font-size:19px;letter-spacing:-0.03em;margin-bottom:4px}
@media (max-width:920px){.duo2:where(:not(.rdb *)),.perks2:where(:not(.rdb *)){grid-template-columns:1fr}}
.pains.four:where(:not(.rdb *)){grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.pains.four:where(:not(.rdb *)){grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pains.four:where(:not(.rdb *)){grid-template-columns:1fr}}
.previewbar:where(:not(.rdb *)){margin-top:16px;padding:12px 16px;border-radius:14px;background:var(--surface);font-family:var(--font-body);font-size:12px;letter-spacing:0}

/* checkout and onboarding: choosing a plan */
.tierpick:where(:not(.rdb *)){border:0;padding:0;margin:22px 0 0}
.tierpick-row:where(:not(.rdb *)){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.tiercard:where(:not(.rdb *)){position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:20px;background:var(--surface);border:1.5px solid transparent;cursor:pointer;transition:border-color .2s,background-color .2s}
.tiercard input:where(:not(.rdb *)){position:absolute;opacity:0;pointer-events:none}
@media (hover:hover){.tiercard:hover:where(:not(.rdb *)){border-color:color-mix(in oklch, var(--fg) 30%, transparent)}}
.tiercard:has(input:checked):where(:not(.rdb *)){border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.tiercard:has(input:focus-visible):where(:not(.rdb *)){outline:2px solid var(--accent-2);outline-offset:2px}
.tiercard.feat:where(:not(.rdb *)){background:var(--fg);color:var(--bg)}
.tiercard.feat:has(input:checked):where(:not(.rdb *)){box-shadow:0 0 0 3px var(--accent);border-color:var(--fg)}
.tiercard[aria-disabled="true"]:where(:not(.rdb *)){opacity:.5;cursor:not-allowed}
.tiercard.coming:where(:not(.rdb *)){opacity:1;cursor:default;background:color-mix(in oklch, var(--surface) 60%, transparent);border-style:dashed;border-color:var(--border)}
.tiercard.coming .tc-price:where(:not(.rdb *)){color:var(--muted)}
.tiercard.coming .pill:where(:not(.rdb *)){align-self:flex-start}
.plan.coming:where(:not(.rdb *)){background:color-mix(in oklch, var(--surface) 60%, transparent);box-shadow:inset 0 0 0 1.5px var(--border)}
.plan.coming .price:where(:not(.rdb *)){color:var(--muted)}
.tc-head:where(:not(.rdb *)){display:flex;justify-content:space-between;align-items:center;gap:8px}
.tc-head b:where(:not(.rdb *)){font-family:var(--font-display);font-weight:400;font-size:24px;letter-spacing:-0.04em}
.tc-tag:where(:not(.rdb *)){font-family:var(--font-body);font-size:10px;letter-spacing:0;padding:3px 8px;border-radius:999px;background:var(--bg);color:var(--fg)}
.tc-tag.lime:where(:not(.rdb *)){background:var(--accent);color:var(--fg)}
.tc-pitch:where(:not(.rdb *)){font-size:13px;color:var(--muted);min-height:3.9em}
.tiercard.feat .tc-pitch:where(:not(.rdb *)),.tiercard.feat .tc-price s:where(:not(.rdb *)),.tiercard.feat .tc-price small:where(:not(.rdb *)){color:color-mix(in oklch, var(--bg) 66%, transparent)}
.tc-price:where(:not(.rdb *)){font-family:var(--font-display);font-size:30px;letter-spacing:-0.05em;line-height:1;font-variant-numeric:tabular-nums}
.tc-price s:where(:not(.rdb *)){font-size:.5em;letter-spacing:-0.02em;color:var(--muted);text-decoration-thickness:2px;margin-right:4px;vertical-align:.35em}
.tc-price small:where(:not(.rdb *)){display:block;font-family:var(--font-body);font-size:10.5px;letter-spacing:0;margin-top:6px;color:var(--muted)}
.tc-ai:where(:not(.rdb *)){display:grid;gap:4px;font-size:13px;padding-top:10px;border-top:1px solid color-mix(in oklch, currentColor 16%, transparent)}
.tc-ai b:where(:not(.rdb *)){font-weight:600}
.tc-extra:where(:not(.rdb *)){display:flex;gap:6px;align-items:flex-start;font-size:12.5px}
.tc-extra svg:where(:not(.rdb *)){width:14px;height:14px;flex:none;margin-top:2px}
.tc-extra.muted:where(:not(.rdb *)){color:var(--muted)}
.tc-note:where(:not(.rdb *)){font-size:12px;color:var(--muted)}
@media (max-width:720px){.tierpick-row:where(:not(.rdb *)){grid-template-columns:1fr}.tc-pitch:where(:not(.rdb *)){min-height:0}}
.lenpick:where(:not(.rdb *)){margin-top:22px}
.lenchip:where(:not(.rdb *)){height:auto;min-height:56px;padding:8px 18px}
.lenchip span:where(:not(.rdb *)){display:grid;gap:2px;line-height:1.2}
.lenchip small:where(:not(.rdb *)){font-size:11.5px;opacity:.7}
.lenpick .stepper:where(:not(.rdb *)){margin-top:12px}
.lennote:where(:not(.rdb *)){margin-top:10px;font-size:13.5px;color:var(--muted)}
.upchoice:where(:not(.rdb *)){margin-top:18px}
.tierreceipt .lines:where(:not(.rdb *)){display:grid;gap:10px}
.tierreceipt .line.list s:where(:not(.rdb *)){opacity:.6}
/* Every press answers (founder, 28 Oct): a control dips as it is pressed; a button whose action is running is aria-busy (full strength, a line runs inside it), and a link whose page is on its way carries data-pending from the tap until the page is in (components/RouteProgress.tsx). */
:where(button,a[href],summary,[role=button],[role=tab],[role=radio],[role=menuitem],[role=option],[role=switch]):where(:not(.rdb *)){-webkit-tap-highlight-color:transparent}
:where(button:not(:disabled),a[href],summary,[role=button],[role=tab],[role=radio],[role=menuitem],[role=option],[role=switch]):active:where(:not(.rdb *)){scale:.97;transition:scale 60ms ease-out}
:where(button[aria-busy=true][data-pressed],a[data-pending]):where(:not(.rdb *)){position:relative;cursor:progress}
button[aria-busy=true][data-pressed]:disabled:where(:not(.rdb *)){opacity:1}
:where(button[aria-busy=true][data-pressed],a[data-pending]):where(:not(.rdb *))::after{content:"";position:absolute;inset:auto 18% 3px;height:2px;border-radius:999px;background:currentColor;opacity:.55;animation:mbp-busy .9s ease-in-out infinite alternate;pointer-events:none}
@keyframes mbp-busy{from{transform:translateX(-55%) scaleX(.35)}to{transform:translateX(55%) scaleX(.35)}}
@media (prefers-reduced-motion:reduce){:where(button:not(:disabled),a[href],summary,[role=button],[role=tab],[role=radio],[role=menuitem],[role=option],[role=switch]):active:where(:not(.rdb *)){scale:none;opacity:.8}:where(button[aria-busy=true][data-pressed],a[data-pending]):where(:not(.rdb *))::after{animation:none;transform:none}}