/* ==========================================================================
   Wavepoint design system
   One stylesheet, every page. No build step.
   Read docs/design-language.md before changing tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Two registers only, day and night. Never a third.
   Colour always comes from a token. A literal hex below this block is a bug.
   -------------------------------------------------------------------------- */

:root,
:root[data-theme="day"] {
  color-scheme: light;

  --page:#FCFDFE;
  --surface:#F3F6FA;
  --card:#FFFFFF;
  --line:#E6ECF3;
  --line-2:#D2DCE8;

  --ink:#0B1526;
  --ink-2:#48586E;
  --ink-3:#5D6B7E;   /* 5.0:1 on --surface, 5.4:1 on --page. Do not lighten, it carries body copy and every tag. */

  /* the deep band: closing panel, footer, sidebar */
  --deep:#081321;
  --deep-2:#0E1D30;
  --deep-line:rgba(255,255,255,.10);
  --on-deep:#E9F2F9;
  --on-deep-2:#92A8C0;

  /* the hero follows the register, so the toggle visibly does something
     on the first screen. See docs/design-language.md section 3. */
  --hero-bg:#ECF3F9;
  --hero-ink:#0B1526;
  --hero-ink-2:#48586E;
  --hero-line:#D5E2EE;
  --hero-accent:#0B93AC;
  --hero-grid:rgba(11,21,38,.05);
  --hero-glow-1:rgba(11,147,172,.18);
  --hero-glow-2:rgba(59,130,246,.12);
  --hero-chip-bg:#FFFFFF;
  --hero-pill-bg:#DFF3F8;
  --hero-pill-border:#B7E2EC;

  --brand:#0B93AC;
  --brand-hover:#0A8299;
  --brand-on-deep:#22D3EE;
  --brand-soft:#E1F5FA;
  --brand-ring:rgba(11,147,172,.32);

  --amber:#B4740A;
  --amber-soft:#FDF3E3;
  --green:#07845E;
  --green-soft:#E4F5EF;
  --rose:#C6304B;
  --rose-soft:#FDECEF;

  --sh-1:0 1px 2px rgba(11,21,38,.05), 0 1px 3px rgba(11,21,38,.04);
  --sh-2:0 2px 4px rgba(11,21,38,.03), 0 12px 28px -12px rgba(11,21,38,.16);
  --sh-3:0 40px 80px -32px rgba(8,19,33,.42);
  --sh-brand:0 8px 24px -8px rgba(11,147,172,.5);
}

:root[data-theme="night"] {
  color-scheme: dark;

  --page:#070D16;
  --surface:#0D1724;
  --card:#101C2B;
  --line:#1C2938;
  --line-2:#2A3A4E;

  --ink:#E9F1F8;
  --ink-2:#A6B8CC;
  --ink-3:#71869F;

  --deep:#0B1725;
  --deep-2:#122134;
  --deep-line:rgba(255,255,255,.09);
  --on-deep:#E9F1F8;
  --on-deep-2:#93A8C0;

  --hero-bg:#0B1725;
  --hero-ink:#E9F1F8;
  --hero-ink-2:#93A8C0;
  --hero-line:rgba(255,255,255,.09);
  --hero-accent:#22D3EE;
  --hero-grid:rgba(255,255,255,.035);
  --hero-glow-1:rgba(34,211,238,.16);
  --hero-glow-2:rgba(59,130,246,.12);
  --hero-chip-bg:rgba(255,255,255,.05);
  --hero-pill-bg:rgba(34,211,238,.09);
  --hero-pill-border:rgba(34,211,238,.24);

  --brand:#22D3EE;
  --brand-hover:#67E3F5;
  --brand-on-deep:#22D3EE;
  --brand-soft:#0B2E38;
  --brand-ring:rgba(34,211,238,.3);

  --amber:#F2B33D;
  --amber-soft:#2A2011;
  --green:#34D399;
  --green-soft:#0C2A22;
  --rose:#FB7185;
  --rose-soft:#2C1219;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 4px rgba(0,0,0,.3), 0 12px 28px -12px rgba(0,0,0,.6);
  --sh-3:0 40px 80px -32px rgba(0,0,0,.8);
  --sh-brand:0 8px 24px -10px rgba(34,211,238,.45);
}

:root {
  --font:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-full:999px;

  --wrap:1200px;
  --gutter:clamp(20px, 4vw, 48px);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
html, body { margin:0; padding:0; }

body {
  background:var(--page);
  color:var(--ink-2);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img, svg { display:block; max-width:100%; }
a { color:inherit; }

h1, h2, h3, h4 {
  color:var(--ink);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}
h1 { font-size:clamp(2.65rem, 1.7rem + 3.7vw, 4.6rem); }
h2 { font-size:clamp(1.95rem, 1.4rem + 2.2vw, 3.05rem); letter-spacing:-0.028em; line-height:1.1; }
h3 { font-size:clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); font-weight:700; letter-spacing:-0.02em; line-height:1.25; }
p { margin:0; }

.lede {
  font-size:clamp(1.05rem, 1rem + 0.38vw, 1.28rem);
  line-height:1.58;
  color:var(--ink-2);
  max-width:60ch;
}

/* mono uppercase carries every label, eyebrow, tag and data readout */
.label {
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:inline-block;
}
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }

.wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
section { padding-block:clamp(76px, 9vw, 132px); }

.visually-hidden {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:#fff; padding:12px 18px;
  border-radius:0 0 var(--r-sm) 0; font-size:13px; font-weight:700; text-decoration:none;
}
.skip-link:focus { left:0; }

:where(a, button, input, [tabindex]):focus-visible {
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}

/* --------------------------------------------------------------------------
   3. Motion: one reveal primitive
   -------------------------------------------------------------------------- */

.rv { opacity:0; transform:translateY(14px); transition:opacity .68s var(--ease), transform .68s var(--ease); }
.rv.in { opacity:1; transform:none; }
.rv-d1 { transition-delay:.07s; }
.rv-d2 { transition-delay:.14s; }
.rv-d3 { transition-delay:.21s; }
.rv-d4 { transition-delay:.28s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
  }
  .rv { opacity:1; transform:none; }
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-size:.94rem; font-weight:700; letter-spacing:-0.01em;
  padding:13px 24px; border-radius:var(--r-full); border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), background-color .18s, border-color .18s, box-shadow .18s;
}
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn svg { width:16px; height:16px; }

.btn-primary { background:var(--brand); color:#fff; box-shadow:var(--sh-brand); }
.btn-primary:hover { background:var(--brand-hover); }
:root[data-theme="night"] .btn-primary { color:#05202A; }

.btn-secondary { background:var(--card); color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-1); }
.btn-secondary:hover { border-color:var(--ink-3); }

/* on the deep band */
.on-deep .btn-primary { background:var(--brand-on-deep); color:#04222C; box-shadow:0 10px 30px -10px rgba(34,211,238,.55); }
.on-deep .btn-primary:hover { background:#67E3F5; }
.on-deep .btn-secondary { background:rgba(255,255,255,.06); color:var(--on-deep); border-color:var(--deep-line); box-shadow:none; }
.on-deep .btn-secondary:hover { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.24); }

.btn-sm { padding:9px 17px; font-size:.85rem; }
.btn-lg { padding:16px 32px; font-size:1rem; }

.link-arrow {
  display:inline-flex; align-items:center; gap:7px;
  color:var(--brand); font-weight:700; font-size:.94rem; text-decoration:none;
  transition:gap .18s var(--ease);
}
.link-arrow:hover { gap:11px; }
.link-arrow svg { width:15px; height:15px; }

/* --------------------------------------------------------------------------
   5. Brand mark, nav, theme toggle
   -------------------------------------------------------------------------- */

.brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; flex:0 0 auto; }
.brand-mark { width:27px; height:27px; }
.brand-name {
  font-size:1.06rem; font-weight:800; letter-spacing:-0.02em; color:var(--ink);
}
.on-deep .brand-name { color:var(--on-deep); }

.nav-outer {
  position:sticky; top:0; z-index:100;
  transition:background-color .25s, border-color .25s, backdrop-filter .25s;
  border-bottom:1px solid transparent;
}
.nav-outer.scrolled {
  background:color-mix(in srgb, var(--hero-bg) 84%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--hero-line);
}
.nav {
  max-width:var(--wrap); margin-inline:auto; padding:18px var(--gutter);
  display:flex; align-items:center; gap:20px;
}
.nav .brand-name { color:var(--hero-ink); }
.nav-links { display:flex; gap:30px; align-items:center; margin-inline:auto; }
.nav-links a {
  color:var(--hero-ink-2); text-decoration:none; font-size:.9rem; font-weight:600;
  letter-spacing:-0.01em; transition:color .18s;
}
.nav-links a:hover { color:var(--hero-ink); }
.nav-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }

/* theme toggle: sits with the other controls, top right */
.theme-toggle {
  width:38px; height:38px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-full); cursor:pointer;
  background:transparent; border:1px solid var(--line-2); color:var(--ink-2);
  transition:background-color .18s, border-color .18s, color .18s;
}
.theme-toggle:hover { color:var(--ink); border-color:var(--ink-3); }
.theme-toggle svg { width:17px; height:17px; }
.nav .theme-toggle { border-color:var(--hero-line); color:var(--hero-ink-2); }
.nav .theme-toggle:hover { color:var(--hero-ink); border-color:var(--hero-accent); }
.on-deep .theme-toggle, .side .theme-toggle, .topbar .theme-toggle {
  border-color:var(--deep-line); color:var(--on-deep-2);
}
.on-deep .theme-toggle:hover, .side .theme-toggle:hover, .topbar .theme-toggle:hover {
  color:var(--on-deep); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22);
}
/* each register shows only its own icon */
.theme-toggle .i-sun { display:none; }
.theme-toggle .i-moon { display:block; }
:root[data-theme="night"] .theme-toggle .i-sun { display:block; }
:root[data-theme="night"] .theme-toggle .i-moon { display:none; }

/* --------------------------------------------------------------------------
   6. The deep band and the hero
   -------------------------------------------------------------------------- */

.on-deep { background:var(--deep); color:var(--on-deep-2); }
.on-deep h1, .on-deep h2, .on-deep h3 { color:var(--on-deep); }
.on-deep .label { color:var(--on-deep-2); }
.on-deep .lede { color:var(--on-deep-2); }

.hero {
  position:relative; overflow:hidden;
  background:var(--hero-bg);
  padding-bottom:clamp(120px, 16vw, 200px);
}
/* horizon glow. one gradient family, reused only by the closing panel */
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 62% at 50% 0%, var(--hero-glow-1) 0%, transparent 62%),
    radial-gradient(80% 44% at 82% 8%, var(--hero-glow-2) 0%, transparent 60%);
}
.hero::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, var(--hero-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hero-grid) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(100% 70% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(100% 70% at 50% 0%, #000 0%, transparent 75%);
}
.hero > * { position:relative; z-index:1; }

.hero-inner {
  max-width:860px; margin-inline:auto; padding:clamp(64px, 9vw, 108px) var(--gutter) 0;
  text-align:center;
}
.hero h1 { color:var(--hero-ink); margin-bottom:22px; }
.hero h1 .accent { color:var(--hero-accent); }
.hero .lede { margin-inline:auto; margin-bottom:34px; color:var(--hero-ink-2); max-width:54ch; }

/* the hero's own button register */
.hero .btn-primary { background:var(--hero-accent); color:#fff; }
:root[data-theme="night"] .hero .btn-primary { color:#04222C; }
.hero .btn-secondary {
  background:var(--card); color:var(--hero-ink); border-color:var(--hero-line); box-shadow:var(--sh-1);
}
.hero .btn-secondary:hover { border-color:var(--hero-accent); }
:root[data-theme="night"] .hero .btn-secondary { background:rgba(255,255,255,.06); box-shadow:none; }

.pill-eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 12px; margin-bottom:26px;
  border-radius:var(--r-full);
  background:var(--hero-pill-bg); border:1px solid var(--hero-pill-border);
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--hero-accent);
}
.pill-eyebrow .dot {
  width:6px; height:6px; border-radius:50%; background:var(--hero-accent); flex:0 0 auto;
}

.hero-ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.hero-note { font-size:.85rem; color:var(--hero-ink-2); }

/* the product window bridges the hero band and the page below it */
.hero-stage {
  max-width:940px; margin:clamp(56px, 7vw, 84px) auto calc(clamp(120px, 16vw, 200px) * -1);
  padding-inline:var(--gutter);
  position:relative; z-index:2;
}
.window {
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3);
}
.window-bar {
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface);
}
.window-dots { display:flex; gap:6px; }
.window-dots i { width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block; }
.window-url {
  margin-inline:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3);
  background:var(--card); border:1px solid var(--line);
  padding:4px 14px; border-radius:var(--r-full);
}
.window-body { padding:clamp(20px, 3.4vw, 34px); }

/* subject chips under the hero calls to action */
.chips { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.chip {
  padding:7px 15px; border-radius:var(--r-full);
  background:var(--hero-chip-bg); border:1px solid var(--hero-line);
  font-size:.83rem; font-weight:600; color:var(--hero-ink-2); letter-spacing:-0.01em;
}

/* --------------------------------------------------------------------------
   7. Topic marquee
   The motion is honest: these are the topics the question bank covers.
   Never put a number or a claim in here.
   -------------------------------------------------------------------------- */

.marquee {
  overflow:hidden; border-block:1px solid var(--line); background:var(--surface);
  padding-block:15px;
  mask-image:linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
  display:flex; width:max-content; gap:0;
  animation:marquee 46s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track span {
  display:inline-flex; align-items:center; gap:26px; padding-right:26px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap;
}
.marquee-track span::after {
  content:""; width:4px; height:4px; border-radius:50%; background:var(--brand); opacity:.55;
}
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation:none; }
}

/* --------------------------------------------------------------------------
   8. Trust strip
   -------------------------------------------------------------------------- */

.strip { border-bottom:1px solid var(--line); padding-block:clamp(56px, 6vw, 72px); }
.strip-inner {
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(20px, 3vw, 40px);
}
.strip-item { display:flex; flex-direction:column; gap:9px; }
.strip-item svg { width:20px; height:20px; color:var(--brand); }
.strip-item b { display:block; color:var(--ink); font-size:.98rem; font-weight:700; letter-spacing:-0.015em; }
.strip-item span { font-size:.87rem; color:var(--ink-3); line-height:1.5; }

/* --------------------------------------------------------------------------
   9. Section grammar
   -------------------------------------------------------------------------- */

.sec-head { max-width:620px; margin-bottom:clamp(40px, 5vw, 62px); }
.sec-head.center { margin-inline:auto; text-align:center; }
.sec-head .label { margin-bottom:16px; }
.sec-head h2 { margin-bottom:16px; }

/* --------------------------------------------------------------------------
   10. Steps
   -------------------------------------------------------------------------- */

.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.step {
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(26px, 3vw, 34px); box-shadow:var(--sh-1);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.step:hover { transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.step-n {
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.1em;
  color:var(--brand); margin-bottom:20px; display:block;
}
.step h3 { margin-bottom:10px; }
.step p { font-size:.95rem; line-height:1.6; color:var(--ink-2); }
.step-ghost {
  position:absolute; right:-6px; bottom:-26px;
  font-family:var(--mono); font-size:110px; font-weight:700; line-height:1;
  color:var(--ink); opacity:.035; pointer-events:none; user-select:none;
}

/* --------------------------------------------------------------------------
   11. Feature rows
   -------------------------------------------------------------------------- */

.feature {
  display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(36px, 6vw, 84px);
  align-items:center; padding-block:clamp(44px, 5vw, 64px);
}
.feature + .feature { border-top:1px solid var(--line); }
.feature.flip .feature-visual { order:-1; }
.feature .label { color:var(--brand); margin-bottom:14px; }
.feature h3 {
  font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); font-weight:800;
  letter-spacing:-0.028em; margin-bottom:14px;
}
.feature p { color:var(--ink-2); margin-bottom:20px; max-width:46ch; }
.feature-visual {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px, 2.6vw, 30px);
}

/* --------------------------------------------------------------------------
   12. Question card (used in hero, features and the practice screen)
   -------------------------------------------------------------------------- */

.q-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.tag {
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:var(--r-full);
  background:var(--surface); color:var(--ink-3); border:1px solid var(--line);
}
.tag-brand { background:var(--brand-soft); color:var(--brand); border-color:transparent; }
.tag-amber { background:var(--amber-soft); color:var(--amber); border-color:transparent; }
.tag-green { background:var(--green-soft); color:var(--green); border-color:transparent; }
.tag-rose  { background:var(--rose-soft);  color:var(--rose);  border-color:transparent; }
.tag-timer { margin-left:auto; background:var(--card); color:var(--ink-2); }

.q-text {
  color:var(--ink); font-size:clamp(1rem, .96rem + .3vw, 1.14rem); font-weight:600;
  line-height:1.5; letter-spacing:-0.015em; margin-bottom:20px;
}
.opts { display:flex; flex-direction:column; gap:9px; }
.opt {
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:13px 16px; border-radius:var(--r-sm);
  background:var(--card); border:1.5px solid var(--line);
  font-family:var(--font); font-size:.94rem; font-weight:500; color:var(--ink-2);
  transition:border-color .18s, background-color .18s, color .18s;
}
/* only the real practice screen uses <button class="opt">. The marketing pages
   use <div class="opt">, which must not look or behave clickable. */
button.opt { cursor:pointer; }
button.opt:hover { border-color:var(--line-2); }
.opt-key {
  width:25px; height:25px; flex:0 0 auto; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:700;
  background:var(--surface); color:var(--ink-3); border:1px solid var(--line);
  transition:background-color .18s, color .18s, border-color .18s;
}
.opt.selected { border-color:var(--brand); background:var(--brand-soft); color:var(--ink); }
.opt.selected .opt-key { background:var(--brand); color:#fff; border-color:var(--brand); }
:root[data-theme="night"] .opt.selected .opt-key { color:#05202A; }
.opt.correct { border-color:var(--green); background:var(--green-soft); color:var(--ink); }
.opt.correct .opt-key { background:var(--green); color:#fff; border-color:var(--green); }
:root[data-theme="night"] .opt.correct .opt-key { color:#05221B; }

/* --------------------------------------------------------------------------
   13. Thread card (discussion, and the preview on the homepage)
   -------------------------------------------------------------------------- */

.thread {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 20px;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.thread + .thread { margin-top:12px; }
a.thread:hover, .thread.hoverable:hover { transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.thread-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.avatar {
  width:32px; height:32px; border-radius:var(--r-full); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft); color:var(--brand);
  font-size:.78rem; font-weight:800; letter-spacing:-0.02em;
}
.avatar-sm { width:26px; height:26px; font-size:.7rem; }
.thread-who { display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.thread-name { color:var(--ink); font-size:.9rem; font-weight:700; letter-spacing:-0.015em; }
.thread-role { font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.thread-title {
  color:var(--ink); font-size:1.02rem; font-weight:700; letter-spacing:-0.02em;
  line-height:1.35; margin-bottom:7px;
}
.thread-body { font-size:.92rem; line-height:1.6; color:var(--ink-2); margin-bottom:14px; }
.thread-meta { display:flex; gap:16px; flex-wrap:wrap; }
.thread-meta span {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
}
.thread-meta svg { width:13px; height:13px; }

/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */

.quotes { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.quote {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(24px, 2.6vw, 30px); display:flex; flex-direction:column; gap:18px;
  box-shadow:var(--sh-1);
}
.quote p { color:var(--ink); font-size:1rem; line-height:1.6; font-weight:500; letter-spacing:-0.01em; flex:1; }
/* on the deep band a white card reads as a mistake, so raise it instead */
.on-deep .quote { background:rgba(255,255,255,.045); border-color:var(--deep-line); box-shadow:none; }
.on-deep .quote p { color:var(--on-deep); }
.on-deep .quote-name { color:var(--on-deep); }
.on-deep .quote-role { color:var(--on-deep-2); }
.on-deep .avatar { background:rgba(34,211,238,.14); color:var(--brand-on-deep); }
.quote-by { display:flex; align-items:center; gap:12px; }
.quote-by .avatar { width:38px; height:38px; font-size:.84rem; }
.quote-name { color:var(--ink); font-size:.92rem; font-weight:700; letter-spacing:-0.015em; line-height:1.3; }
.quote-role { font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.05em; }

/* --------------------------------------------------------------------------
   15. Carousel
   One implementation, configured entirely by data attributes, the same way
   Nestly's is. data-pv="1,720:2" is per view by breakpoint. data-auto is the
   autoplay interval in ms, omit it for none. It advances one slide at a time,
   so pages = slides - perView + 1. The nav hides itself when everything fits,
   so check data-pv against how many slides you actually have.
   -------------------------------------------------------------------------- */

.carousel-viewport { overflow:hidden; }
.carousel-track {
  display:flex; gap:20px; list-style:none; margin:0; padding:0;
  transition:transform .55s var(--ease); will-change:transform;
}
.carousel-slide { flex:0 0 auto; display:flex; }
.carousel-slide > * { width:100%; }
.carousel-nav {
  display:flex; align-items:center; justify-content:center; gap:18px; margin-top:30px;
}
.carousel-arrow {
  width:40px; height:40px; flex:0 0 auto; border-radius:var(--r-full); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-2); color:var(--ink-2);
  transition:color .18s, border-color .18s, background-color .18s, opacity .18s;
}
.carousel-arrow svg { width:17px; height:17px; }
.carousel-arrow:hover:not(:disabled) { color:var(--ink); border-color:var(--ink-3); }
.carousel-arrow:disabled { opacity:.3; cursor:default; }
.carousel-dots { display:flex; align-items:center; gap:7px; }
.carousel-dot {
  width:7px; height:7px; padding:0; border:none; border-radius:var(--r-full);
  background:var(--line-2); cursor:pointer;
  transition:width .3s var(--ease), background-color .3s;
}
.carousel-dot.active { width:22px; background:var(--brand); }

.on-deep .carousel-arrow { border-color:var(--deep-line); color:var(--on-deep-2); }
.on-deep .carousel-arrow:hover:not(:disabled) {
  color:var(--on-deep); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.24);
}
.on-deep .carousel-dot { background:rgba(255,255,255,.22); }
.on-deep .carousel-dot.active { background:var(--brand-on-deep); }

/* --------------------------------------------------------------------------
   16. Closing panel and footer
   -------------------------------------------------------------------------- */

.closer { position:relative; overflow:hidden; text-align:center; }
.closer::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 100%, rgba(34,211,238,.15) 0%, rgba(34,211,238,0) 65%);
}
.closer > * { position:relative; }
.closer h2 { margin-bottom:16px; }
.closer .lede { margin:0 auto 32px; }

.foot { background:var(--deep); border-top:1px solid var(--deep-line); padding-block:44px; }
.foot-inner {
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.foot-tag { font-size:.85rem; color:var(--on-deep-2); margin-top:10px; max-width:36ch; line-height:1.55; }
.foot-links { display:flex; gap:24px; flex-wrap:wrap; }
.foot-links a {
  color:var(--on-deep-2); text-decoration:none; font-size:.87rem; font-weight:600;
  transition:color .18s;
}
.foot-links a:hover { color:var(--on-deep); }

/* --------------------------------------------------------------------------
   17. Legal pages
   -------------------------------------------------------------------------- */

.legal-nav { border-bottom:1px solid var(--line); }
.legal-nav .nav { padding-block:16px; }
.legal { max-width:680px; margin-inline:auto; padding:clamp(48px,6vw,80px) var(--gutter) clamp(72px,9vw,110px); }
.legal h1 { font-size:clamp(2rem, 1.6rem + 1.6vw, 2.8rem); margin-bottom:12px; }
.legal h2 { font-size:1.2rem; font-weight:700; letter-spacing:-0.02em; margin:38px 0 10px; }
.legal p { margin-bottom:14px; line-height:1.7; }
.legal a { color:var(--brand); font-weight:600; }
.notice {
  background:var(--amber-soft); border:1px solid color-mix(in srgb, var(--amber) 28%, transparent);
  border-radius:var(--r-sm); padding:14px 16px; margin-bottom:32px;
  font-size:.9rem; line-height:1.6; color:var(--ink-2);
}
.notice strong { color:var(--ink); }

/* --------------------------------------------------------------------------
   18. Login
   -------------------------------------------------------------------------- */

.auth {
  min-height:calc(100vh - 44px); display:flex; align-items:center; justify-content:center;
  padding:48px var(--gutter); background:var(--deep); position:relative; overflow:hidden;
}
.auth::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(90% 60% at 50% 0%, rgba(34,211,238,.14), transparent 65%);
}
.auth-card {
  position:relative; width:100%; max-width:400px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(28px, 4vw, 40px); box-shadow:var(--sh-3);
}
.auth-card .brand { justify-content:center; width:100%; margin-bottom:24px; }
.auth-card h1 { font-size:1.6rem; text-align:center; margin-bottom:7px; }
.auth-sub { text-align:center; font-size:.93rem; color:var(--ink-3); margin-bottom:28px; }
.auth-btn {
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:13px; border-radius:var(--r-sm); cursor:pointer;
  font-family:var(--font); font-size:.94rem; font-weight:700; letter-spacing:-0.01em;
  background:var(--card); color:var(--ink); border:1.5px solid var(--line-2);
  transition:border-color .18s, background-color .18s;
}
.auth-btn:hover { border-color:var(--ink-3); }
.auth-btn + .auth-btn { margin-top:10px; }
.auth-btn svg { width:17px; height:17px; }
.auth-div {
  display:flex; align-items:center; gap:12px; margin:20px 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--ink-3);
}
.auth-div::before, .auth-div::after { content:""; flex:1; height:1px; background:var(--line); }
.auth-foot { text-align:center; margin-top:22px; font-size:.8rem; line-height:1.6; color:var(--ink-3); }
.auth-foot a { color:var(--brand); font-weight:600; }

/* --------------------------------------------------------------------------
   19. Demo banner
   -------------------------------------------------------------------------- */

.demo-banner {
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  background:var(--amber-soft); color:var(--amber);
  border-bottom:1px solid color-mix(in srgb, var(--amber) 26%, transparent);
  padding:11px 16px; font-size:.83rem; font-weight:600; text-align:center;
}
.demo-banner svg { width:15px; height:15px; flex:0 0 auto; }
.demo-banner a { color:inherit; text-underline-offset:3px; }

/* --------------------------------------------------------------------------
   20. App shell
   -------------------------------------------------------------------------- */

.shell { display:flex; min-height:100vh; background:var(--page); }

.side {
  width:236px; flex:0 0 auto; background:var(--deep);
  border-right:1px solid var(--deep-line);
  padding:22px 14px; display:flex; flex-direction:column; gap:4px;
  position:sticky; top:0; height:100vh;
}
.side .brand { padding:6px 10px 20px; }
.side .brand-name { color:var(--on-deep); }
.side-item {
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  border-radius:var(--r-sm); text-decoration:none;
  color:var(--on-deep-2); font-size:.9rem; font-weight:600; letter-spacing:-0.01em;
  transition:background-color .18s, color .18s;
}
.side-item svg { width:17px; height:17px; flex:0 0 auto; }
.side-item:hover { color:var(--on-deep); background:rgba(255,255,255,.05); }
.side-item.active { color:var(--brand-on-deep); background:rgba(34,211,238,.11); }
.side-item.disabled { opacity:.55; cursor:default; }
.side-soon {
  margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  padding:2px 7px; border-radius:var(--r-full);
  background:rgba(255,255,255,.07); color:var(--on-deep-2);
}
.side-spacer { flex:1; }
.side-foot {
  border-top:1px solid var(--deep-line); padding-top:14px; margin-top:10px;
  display:flex; align-items:center; gap:10px;
}
.side-foot .avatar { background:rgba(34,211,238,.16); color:var(--brand-on-deep); }
.side-user { min-width:0; line-height:1.3; }
.side-user b { display:block; color:var(--on-deep); font-size:.86rem; font-weight:700; letter-spacing:-0.015em; }
.side-user span { font-family:var(--mono); font-size:10px; color:var(--on-deep-2); }
.side-foot .theme-toggle { margin-left:auto; width:34px; height:34px; }

.topbar { display:none; }

.main { flex:1; min-width:0; padding:clamp(24px, 3.4vw, 40px) clamp(20px, 3.4vw, 44px); }
.main-wide { max-width:1000px; }

.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:26px; }
.page-head h1 { font-size:clamp(1.5rem, 1.3rem + 1vw, 1.95rem); margin-bottom:5px; }
.page-head p { font-size:.95rem; color:var(--ink-3); }

/* --------------------------------------------------------------------------
   21. Panels, stats, progress
   -------------------------------------------------------------------------- */

.panel {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--sh-1);
}
.panel-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.panel-head h3 { font-size:.98rem; font-weight:700; }
.panel-body { padding:20px; }

.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:26px; }
.stat {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 20px; box-shadow:var(--sh-1);
}
.stat-v { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.7rem; font-weight:700; color:var(--ink); letter-spacing:-0.03em; line-height:1.1; }
.stat-l { font-size:.82rem; color:var(--ink-3); margin-top:5px; font-weight:600; }
.stat-note { font-family:var(--mono); font-size:9.5px; color:var(--ink-3); opacity:.8; margin-top:6px; line-height:1.4; }
.stat-brand .stat-v { color:var(--brand); }
.dot-live {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--green); margin-right:5px; vertical-align:middle;
}

.countdown {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--deep); border-radius:var(--r-md); padding:20px 24px; margin-bottom:22px;
  position:relative; overflow:hidden;
}
.countdown::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 140% at 0% 50%, rgba(34,211,238,.16), transparent 70%);
}
.countdown > * { position:relative; }
.countdown-v { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:2rem; font-weight:700; color:var(--brand-on-deep); line-height:1; letter-spacing:-0.03em; }
.countdown-l { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-deep-2); margin-top:6px; }
.countdown-note { margin-left:auto; text-align:right; font-size:.87rem; color:var(--on-deep-2); line-height:1.5; }
.countdown-note b { color:var(--on-deep); font-weight:700; }

.row {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; border-bottom:1px solid var(--line); text-decoration:none;
  transition:background-color .18s;
}
.row:last-child { border-bottom:none; }
a.row:hover { background:var(--surface); }
.row-name { color:var(--ink); font-size:.92rem; font-weight:700; letter-spacing:-0.015em; }
.row-meta { font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:4px; }
.row-val { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.82rem; color:var(--ink-3); flex:0 0 auto; }

.bar { width:130px; max-width:34vw; height:6px; border-radius:var(--r-full); background:var(--surface); margin-top:8px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:var(--r-full); background:var(--brand); }
.bar-green i { background:var(--green); }

.cta-band {
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:var(--deep); border-radius:var(--r-md); padding:22px 24px; margin-top:20px;
  position:relative; overflow:hidden;
}
.cta-band::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 130% at 100% 50%, rgba(34,211,238,.15), transparent 70%);
}
.cta-band > * { position:relative; }
.cta-band h4 { color:var(--on-deep); font-size:1rem; font-weight:700; letter-spacing:-0.02em; margin-bottom:5px; }
.cta-band p { color:var(--on-deep-2); font-size:.86rem; font-family:var(--mono); }

.dash { display:grid; grid-template-columns:1.45fr 1fr; gap:22px; align-items:start; }

/* --------------------------------------------------------------------------
   22. Practice screen
   -------------------------------------------------------------------------- */

.progress-strip { display:flex; gap:4px; margin-bottom:26px; }
.progress-strip i { flex:1; height:5px; border-radius:var(--r-full); background:var(--line); }
.progress-strip i.done { background:var(--green); }
.progress-strip i.now { background:var(--brand); }

.q-panel {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px, 3.2vw, 38px); max-width:680px; box-shadow:var(--sh-1);
}
.q-actions { display:flex; justify-content:space-between; gap:12px; margin-top:26px; }

.timer {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.95rem; font-weight:500;
  background:var(--deep); color:var(--brand-on-deep);
  padding:9px 16px; border-radius:var(--r-full);
}
.timer svg { width:14px; height:14px; }

.note {
  display:flex; align-items:flex-start; gap:11px; margin-top:20px; max-width:680px;
  padding:14px 16px; border-radius:var(--r-sm);
  background:var(--amber-soft); border:1px solid color-mix(in srgb, var(--amber) 26%, transparent);
  font-size:.88rem; line-height:1.55; color:var(--ink-2);
}
.note svg { width:16px; height:16px; flex:0 0 auto; color:var(--amber); margin-top:2px; }
.note b { color:var(--ink); }

/* --------------------------------------------------------------------------
   23. Filters
   -------------------------------------------------------------------------- */

.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.pill {
  padding:8px 15px; border-radius:var(--r-full); cursor:pointer;
  background:var(--card); border:1px solid var(--line);
  font-family:var(--font); font-size:.85rem; font-weight:600; color:var(--ink-2);
  letter-spacing:-0.01em; transition:background-color .18s, color .18s, border-color .18s;
}
.pill:hover { border-color:var(--line-2); color:var(--ink); }
.pill.active { background:var(--ink); color:var(--page); border-color:var(--ink); }

/* --------------------------------------------------------------------------
   24. Profile
   -------------------------------------------------------------------------- */

.profile-head {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding-bottom:26px; margin-bottom:28px; border-bottom:1px solid var(--line);
}
.profile-head .avatar { width:66px; height:66px; font-size:1.3rem; }
.profile-head h1 { font-size:1.55rem; margin-bottom:5px; }
.profile-rank { font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--brand); text-transform:uppercase; }

.locked { position:relative; }
.locked-veil {
  position:absolute; inset:0; border-radius:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  text-align:center; padding:22px;
  background:color-mix(in srgb, var(--card) 78%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.locked-veil svg { width:22px; height:22px; color:var(--amber); }
.locked-veil p { font-size:.88rem; color:var(--ink-2); max-width:38ch; line-height:1.55; }

.badges { display:flex; gap:14px; flex-wrap:wrap; }
.badge { display:flex; flex-direction:column; align-items:center; gap:9px; width:88px; }
.badge-ico {
  width:52px; height:52px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft); color:var(--brand);
}
.badge-ico svg { width:22px; height:22px; }
.badge span { font-size:.76rem; font-weight:600; color:var(--ink-3); text-align:center; line-height:1.35; }

/* --------------------------------------------------------------------------
   25. Responsive. Breakpoints are per component.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .strip-inner { grid-template-columns:repeat(2, 1fr); row-gap:30px; }
}

@media (max-width: 940px) {
  .steps { grid-template-columns:1fr; }
  .quotes { grid-template-columns:1fr; }
  .feature, .feature.flip { grid-template-columns:1fr; gap:30px; }
  .feature.flip .feature-visual { order:0; }
  .dash { grid-template-columns:1fr; }

  /* The links do not disappear on a phone, they wrap to a scrolling row under
     the brand. Most of this audience is on a phone, and a nav that vanishes
     there is a hole, not a simplification. No drawer, so no JS. */
  .nav { flex-wrap:wrap; row-gap:12px; }
  .nav-links {
    order:3; width:100%; margin-inline:0; gap:22px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .nav-links::-webkit-scrollbar { display:none; }
  .nav-links a { white-space:nowrap; font-size:.86rem; }
  .nav-actions { margin-left:auto; }
}

@media (max-width: 860px) {
  .side { display:none; }
  .shell { flex-direction:column; }
  /* the nav scrolls, the brand and the toggle stay put */
  .topbar {
    display:flex; align-items:center; gap:14px;
    background:var(--deep); border-bottom:1px solid var(--deep-line);
    padding:12px var(--gutter);
  }
  .topbar .brand { flex:0 0 auto; }
  .topbar .brand-name { display:none; }
  .topbar nav {
    display:flex; gap:18px; flex:1; min-width:0;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .topbar nav::-webkit-scrollbar { display:none; }
  .topbar nav a {
    color:var(--on-deep-2); text-decoration:none; white-space:nowrap;
    font-size:.87rem; font-weight:600; padding-block:4px;
  }
  .topbar nav a.active { color:var(--brand-on-deep); }
  .topbar .theme-toggle { flex:0 0 auto; }
  .stats { grid-template-columns:repeat(2, 1fr); }
  .countdown-note { margin-left:0; text-align:left; width:100%; }
}

@media (max-width: 620px) {
  .strip-inner { grid-template-columns:1fr; row-gap:24px; }
  .hero-ctas { flex-direction:column; align-items:stretch; }
  .hero-ctas .btn { width:100%; }
  .foot-inner { flex-direction:column; align-items:flex-start; }
  .q-actions { flex-direction:column-reverse; }
  .q-actions .btn { width:100%; }
  .window-url { display:none; }
  .stats { grid-template-columns:1fr 1fr; }
}