/* ═══════════════════════════════════════════════════════════════════════
   WealthPsychology.com — v6.1 "CLEAN NOIR" design system
   Pure white, ink black, the full grayscale ramp, completely clear glass.
   Color is a scarce attention resource with a hard whitelist: ONE signal
   token (--signal, vermillion ink-red) permitted ONLY for (a) form/
   validation errors + destructive confirmations, (b) the MOST POPULAR
   marker on the Practice tier (6px dot + 1px top hairline), (c) the
   CTA-success sparkle. Everything else is grayscale. Type is near-black
   (#0b0b0c) — Geist sans + Instrument Serif Italic display accent (plain
   black italic outside the hero) + Geist Mono numerals (tabular-nums).

   ONE aesthetic. data-theme is neutralized: :root, [data-theme=dark] and
   [data-theme=light] all resolve to the same light tokens so every page
   renders light regardless of leftover attribute plumbing.

   Glass budget (GPU): true backdrop-filter glass is reserved for CHROME —
   .nav, .test-header, .cmdk__panel, #mobile-menu, and the .glass-real
   opt-in — never more than 2–3 blurred surfaces in a viewport, blur 14px
   (≤15px hard rule), -webkit- mirrored, never nested. Cards use the
   "glass-lite" recipe: translucent white fill + hairline top/bottom
   borders + specular + cool layered shadows. Because the auras behind
   them are already soft gradients, translucency alone reproduces the
   glass look at zero GPU cost; blur only pays for itself over moving
   text (chrome), which is exactly where it is spent.

   Fallback chain: refraction (none shipped by default) → frosted blur →
   solid white card (@supports not backdrop-filter) → opaque under
   prefers-reduced-transparency. Nothing becomes invisible anywhere.
   No importance overrides; no substring-attribute selectors.
   ═══════════════════════════════════════════════════════════════════════ */

@layer tokens, base, components, utilities;

/* ── Self-hosted fonts (SIL OFL — see assets/fonts/LICENSES.md) ───────── */
@font-face { font-family: 'Geist'; src: url('/assets/fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/assets/fonts/Geist-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/assets/fonts/Geist-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/GeistMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* v6 display "script" accent — condensed high-contrast editorial italic */
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/InstrumentSerif-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/InstrumentSerif-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* Kept for long-form article bodies that opt in explicitly */
@font-face { font-family: 'Newsreader'; src: url('/assets/fonts/Newsreader-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/assets/fonts/Newsreader-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/assets/fonts/Newsreader-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* Cross-document view transitions — MPA page-to-page crossfade.
   Chrome/Edge 126+, Safari 18.2+; Firefox snaps (clean degrade). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ═══ TOKENS ══════════════════════════════════════════════════════════ */
@layer tokens {
  :root {
    --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
    --font-script: 'Instrument Serif', Georgia, serif;

    --max-w: 1120px;
    --max-w-text: 44rem;

    /* 4px spacing scale; section rhythm 96–160px */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
    --sp-6: 32px; --sp-7: 40px; --sp-8: 64px; --sp-9: 96px;
    --section-pad: clamp(96px, 11vw, 160px);

    /* Radii — continuous/squircle feel: 12 controls · 16 cards · 20 large
       cards · 28 hero surfaces · pill */
    --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
    --r-1: var(--r-sm); --r-2: var(--r-md);      /* v4 compat aliases */
    --radius: var(--r-sm);
    --radius-sm: var(--r-sm);

    /* Motion — Material 3 emphasized family + real spring via linear() */
    --e-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --e-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
    --e-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
    --e-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring: linear(0, 0.037 1.7%, 0.141 3.6%, 0.312 5.8%, 0.518 8.3%,
      0.72 11%, 0.886 13.9%, 1.008 17%, 1.086 20.4%, 1.121 24%, 1.12 27.9%,
      1.083 33%, 1.037 39.3%, 1.008 46.4%, 0.996 54.4%, 0.998 65.7%, 1);
    --d-fast: 150ms; --d-med: 300ms; --d-long: 450ms;
    --ease: var(--e-emphasized);                 /* v4 compat alias */
    --dur-fast: var(--d-fast);
    --dur-med: 200ms;
    --dur-slow: var(--d-med);

    /* Display letter-spacing ramp (gentler than v4 — Gemini/Apple air) */
    --ls-72: -0.025em; --ls-64: -0.024em; --ls-56: -0.022em; --ls-48: -0.02em;
    --ls-40: -0.018em; --ls-32: -0.014em; --ls-24: -0.011em; --ls-20: -0.008em;

    /* ── THE signal token — the only color on the site (whitelist in the
       header). Owner may swap the hex here; one-line change. ─────────── */
    --signal: #D12C1F;
    --signal-tint: rgba(209, 44, 31, 0.08);

    /* ── Clear-glass recipe — v6.1: ZERO backdrop-filter blur anywhere.
       --glass-blur stays as a token because legacy page-scoped @supports
       blocks reference it; at 0px those declarations are visual no-ops. */
    --glass-fill: rgba(255, 255, 255, 0.66);
    --glass-fill-strong: rgba(255, 255, 255, 0.92);
    --glass-clear: rgba(255, 255, 255, 0.06);
    --glass-blur: 0px;
    --glass-sat: 100%;
    --glass-border-top: rgba(255, 255, 255, 0.7);
    --glass-border-bottom: rgba(0, 0, 0, 0.06);
    --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(10, 10, 14, 0.06);
    --glass-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.05), 0 16px 40px rgba(10, 10, 14, 0.10);
    --glass-specular: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    /* Card (glass-lite) fill — slightly more opaque for text legibility */
    --card-fill: rgba(255, 255, 255, 0.72);
    --hairline: rgba(0, 0, 0, 0.06);
    --hairline-strong: rgba(0, 0, 0, 0.12);

    /* ── Legacy shim: v1–v5 templates reference these inline ─────────── */
    --font-data: var(--font-mono);
    --font-serif: var(--font-sans);   /* v4 mapping kept: the script face is
                                         opt-in via .script/--font-script only */
    --font-rojal: var(--font-sans);
    --font-display: var(--font-sans);
    --font-heading: var(--font-sans);
    --font-body: var(--font-sans);
    --font-ui: var(--font-sans);
    --ink-primary: var(--fg);
    --ink-secondary: var(--fg-2);
    --ink-muted: var(--fg-3);
    --text: var(--fg);
    --text-2: var(--fg-2);
    --text-3: var(--fg-3);
    --muted: var(--fg-3);
    --smoke: var(--fg-2);
    --mist: var(--fg-2);
    --slate: var(--fg-3);
    --line: var(--border);
    --border-light: var(--border);
    --base-bg: var(--bg);
    --bg-canvas: var(--bg);
    --bg-surface: var(--bg-2);
    --bg-subtle: var(--bg-2);
    --surface: var(--bg-2);
    --surface-cool: var(--bg-2);
    --vault: var(--bg-2);
    --parchment: var(--bg);
    --cream: var(--bg-2);
    --ghost: var(--bg-2);
    --deep-glass: var(--card-fill);
    --glass-bg: var(--card-fill);
    --glass-weak: var(--glass-fill);
    --glass-fallback: #ffffff;
    --glass-opaque: #ffffff;
    --glass-border: var(--glass-border-top);
    --glass-border-hi: var(--glass-border-top);
    --glass-border-lo: var(--glass-border-bottom);
    /* Accent shims — NOIR: legacy pages use these both as white-text
       button fills and as link text; matte ink serves both roles. */
    --accent: #0b0b0c;
    --accent-blue: #0b0b0c;
    --accent-cta: #101013;
    --accent-cta-hover: #17171b;
    --brand-navy: #101013;
    --brand-navy-hover: #17171b;
    --ice: #0b0b0c;
    --current: #0b0b0c;
    --current-dim: #2a2a2e;
    --green: var(--success);
    --green-2: var(--success);
    --sienna: #57575c;            /* data accent, NOT the error semantic */
    --brass: var(--fg-2);
    --brass-dim: var(--fg-3);
    --brass-glow: var(--fg-3);
    --accent-gold: var(--fg-2);
    --accent-gold-soft: var(--fg-3);
    --r-3: var(--r-md); --r-4: var(--r-md);
  }

  /* ── ONE LIGHT THEME — dark plumbing neutralized ─────────────────────
     :root, [data-theme=dark] and [data-theme=light] resolve identically:
     any page still carrying data-theme="dark" renders Gemini White. */
  :root, [data-theme="dark"], [data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;                 /* true white everywhere */
    --bg-2: #ffffff;               /* v4 "surface" → white (cards are glass) */
    --bg-0: #fafafa;               /* rare 2% separation tint */
    --ink: #0b0b0c;
    --ink-soft: #3a3a3e;
    --ink-mute: #6b6b70;
    --fg: var(--ink);
    --fg-2: var(--ink-soft);
    --fg-3: var(--ink-mute);
    --border: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.14);

    /* Functional roles — NOIR: everything grayscale except error/danger,
       which is the whitelisted --signal */
    --blue: #0b0b0c;
    --blue-hover: #2a2a2e;
    --blue-text: #0b0b0c;
    --red: var(--signal);
    --amber: #6b6b70;
    --success: #3a3a3e;
    --warning: #6b6b70;
    --danger: var(--signal);

    --btn-bg: #101013;             /* matte primary */
    --btn-fg: #ffffff;
    --btn-bg-hover: #17171b;
    --on-accent: #ffffff;
    --nav-bg: var(--glass-fill-strong);
    --sel-bg: #0b0b0c;             /* noir selection: black bg, white text */
    --tint-blue-bg: rgba(0, 0, 0, 0.05);
    --tint-green-bg: rgba(0, 0, 0, 0.05);
    --tint-amber-bg: rgba(0, 0, 0, 0.05);
    --tint-red-bg: var(--signal-tint);
    --tint-green-fg: #3a3a3e;
    --tint-amber-fg: #3a3a3e;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(10, 10, 14, 0.09);
  }
}

/* ═══ BASE (reset folded in) ══════════════════════════════════════════ */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  img, video, svg, canvas { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
  ul, ol { list-style: none; }
  input, textarea, select { font: inherit; }

  html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: #ffffff;           /* the canvas; body is transparent so
                                      the fixed aura field shows through */
  }
  body {
    font-family: var(--font-sans);
    font-feature-settings: "liga" 1;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--fg);
    background: transparent;
    min-height: 100vh;
    overflow-x: clip;
  }
  body.test-body, body.report-body, body.intro-page {
    background: transparent;
    color: var(--fg);
  }

  /* v6.1 NOIR: no aura field. The page is pure white; the only drama is
     the ink hero and the type. */

  h1, h2, h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1.08;
    color: var(--fg);
    text-wrap: balance;
  }
  h1 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: var(--ls-48); }
  h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: var(--ls-32); }
  h3 { font-size: 20px; letter-spacing: var(--ls-20); line-height: 1.3; }
  h4, h5, h6 { font-weight: 600; color: var(--fg); }
  p { text-wrap: pretty; }
  strong { font-weight: 600; color: var(--fg); }
  em { font-style: italic; }
  ::selection { background: var(--sel-bg); color: #ffffff; }
  :focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0b0b0c;
    border-radius: var(--r-sm);
  }
  section { position: relative; }
  table { border-collapse: collapse; width: 100%; }
  th, td { padding: 12px 16px; font-variant-numeric: tabular-nums; }
  code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.875em; }
}

/* ═══ COMPONENTS ══════════════════════════════════════════════════════ */
@layer components {

  /* ── Containers ────────────────────────────────────────────────────── */
  .container {
    width: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
  }
  .container--text, .results-wrap {
    width: 100%;
    max-width: var(--max-w-text);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
  }
  .band { padding-block: var(--section-pad); }
  .band--subtle { background: transparent; border-block: 1px solid var(--hairline); }
  .divider { border: 0; border-top: 1px solid var(--hairline); }
  .divider--center { max-width: 96px; margin-inline: auto; }

  /* ── SURFACES — the glass-lite card recipe ──────────────────────────
     Translucent white over the aura field; top-lit hairline; darker
     bottom hairline; specular line; cool layered shadows. No
     backdrop-filter here by design (see header — GPU budget). */
  .glass,
  .card, .vcard, .guide-card, .faq-item, .tip, .intro__feature, .adv-feature,
  .test-card-full, .price-card, .adv-plan, .panel-cool, .home-lens,
  .report-section, .result-preview, .notice, .upsell-card, .demo-widget,
  .plan-card, .code-panel {
    position: relative;
    background: var(--card-fill);
    border: 1px solid var(--glass-border-top);
    border-bottom-color: var(--glass-border-bottom);
    border-radius: var(--r-md);
    box-shadow: var(--glass-shadow), var(--glass-specular);
  }
  .card, .vcard, .guide-card, .faq-item, .tip, .intro__feature, .adv-feature { padding: var(--sp-5); }
  .card, .vcard, .test-card-full, .price-card, .adv-plan, .adv-feature, .home-lens {
    transition: transform 200ms var(--e-overshoot), box-shadow 200ms var(--e-emphasized), border-color var(--d-fast) linear;
  }
  .card:hover, .vcard:hover, .test-card-full:hover, .adv-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-shadow-hover), var(--glass-specular);
  }

  /* Chrome surfaces — v6.1: NO backdrop-filter blur anywhere. Near-opaque
     white keeps fixed chrome legible over scrolling content. */
  .nav, .test-header, .cmdk__panel, #mobile-menu {
    background: var(--glass-fill-strong);
  }
  /* Clear liquid glass — the three-tier recipe (transparent fill +
     hairline + top specular; Chromium refraction tier via the inline
     #btnGlass SVG filter; reduced-transparency tier goes solid). */
  .glass-real {
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: var(--r-xl);
    background: var(--glass-clear);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -10px 16px rgba(255, 255, 255, 0.28), 0 10px 26px rgba(10, 10, 14, 0.14);
  }
  @supports (backdrop-filter: url(#btnGlass)) {
    .glass-real { backdrop-filter: url(#btnGlass); -webkit-backdrop-filter: url(#btnGlass); }
  }

  /* ── Navigation — sticky glass bar ─────────────────────────────────── */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    padding-inline: clamp(16px, 3vw, 24px);
    border-bottom: 1px solid var(--hairline);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .nav.scrolled {
    border-bottom-color: var(--hairline-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px rgba(10, 10, 14, 0.05);
  }
  .logo, .nav__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .logo__mark .mark-frame { stroke: var(--fg); }
  .logo__mark .mark-spec { stroke: var(--fg-3); }
  .logo__mark .mark-ticks { stroke: var(--fg-3); }
  .logo__mark .mark-dot { fill: var(--fg); }
  .logo__word {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--fg);
  }
  .logo__word span {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 400;
    font-size: 1.16em;
    color: var(--fg);
  }
  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
  }
  .nav__links a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding-inline: 12px;
    border-radius: var(--r-pill);
    font-size: 14px;
    color: var(--fg-2);
    transition: color var(--d-fast) linear, background var(--d-fast) linear;
  }
  .nav__links a:hover { color: var(--fg); background: rgba(0, 0, 0, 0.04); }
  .nav__links a[aria-current="page"] { color: var(--fg); }
  .nav__item { position: relative; }
  .nav__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    padding: var(--sp-2);
    display: flex;
    gap: var(--sp-4);
    background: #ffffff;
    border: 1px solid var(--glass-border-top);
    border-bottom-color: var(--glass-border-bottom);
    border-radius: var(--r-md);
    box-shadow: var(--glass-shadow-hover), var(--glass-specular);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(0.99);
    transition: opacity var(--dur-med) var(--e-enter), transform var(--dur-med) var(--e-enter), visibility var(--dur-med);
  }
  .nav__dropdown--end { left: auto; right: 0; }
  .nav__item:hover > .nav__dropdown,
  .nav__item:focus-within > .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
  .nav__drop-group { min-width: 220px; display: flex; flex-direction: column; }
  .nav__drop-group + .nav__drop-group { border-left: 1px solid var(--hairline); padding-left: var(--sp-4); }
  .nav__drop-label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    padding: 8px 10px 4px;
  }
  .nav__dropdown a {
    display: block;
    height: auto;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    font-size: 13.5px;
    color: var(--fg-2);
    white-space: nowrap;
  }
  .nav__dropdown a:hover { color: var(--fg); background: rgba(0, 0, 0, 0.04); }
  .nav__drop-new {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--blue-text);
    margin-left: 6px;
  }

  /* Primary pill CTA in nav — matte pigment (E-spec) */
  .nav-cta, .btn.nav-cta {
    height: 32px;
    padding-inline: 14px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: #101013;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: 0 10px 26px rgba(10, 10, 14, 0.28);
    transition: background var(--d-fast) linear, box-shadow var(--d-fast) linear, transform var(--d-fast) var(--e-overshoot);
  }
  .nav-cta:hover, .btn.nav-cta:hover {
    background: #17171b;
    color: #ffffff;
  }
  .nav__cmdk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding-inline: 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    font-size: 13px;
    color: var(--fg-3);
    background: rgba(255, 255, 255, 0.6);
    transition: border-color var(--d-fast) linear, color var(--d-fast) linear;
  }
  .nav__cmdk:hover { border-color: var(--hairline-strong); color: var(--fg-2); }
  .nav__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: var(--r-sm);
  }
  .nav__hamburger span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: var(--fg);
    transition: transform var(--dur-med) var(--e-emphasized), opacity var(--d-fast) linear;
  }
  .nav__hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__hamburger.open span:nth-child(2) { opacity: 0; }
  .nav__hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  @media (max-width: 960px) {
    .nav__links { display: none; }
    .nav__hamburger { display: flex; }
  }

  #mobile-menu {
    position: fixed;
    inset: 64px 0 0 0;
    z-index: 99;
    overflow-y: auto;
    display: none;
  }
  #mobile-menu.open { display: block; }
  #mobile-menu nav { padding: var(--sp-5) clamp(16px, 4vw, 32px) var(--sp-8); display: flex; flex-direction: column; }
  #mobile-menu a {
    display: block;
    padding: 14px 4px;
    font-size: 16px;
    color: var(--fg);
    border-bottom: 1px solid var(--hairline);
  }
  #mobile-menu a:hover { color: var(--fg-2); }
  .mob__group { border-bottom: 1px solid var(--hairline); }
  .mob__trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 4px;
    font-size: 16px;
    color: var(--fg);
  }
  .mob__trigger-icon { font-family: var(--font-mono); color: var(--fg-3); }
  .mob__sub { display: none; padding: 0 0 8px 12px; }
  .mob__sub.open { display: block; }
  #mobile-menu .mob__sub a { border-bottom: none; padding: 9px 4px; font-size: 14.5px; color: var(--fg-2); }
  #mobile-menu .mob__sub a:hover { color: var(--fg); }
  .mob__sub-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    padding: 12px 4px 4px;
  }
  #mobile-menu a.mob__cta {
    margin-top: var(--sp-5);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--r-pill);
    background: #101013;
    color: #ffffff;
    text-align: center;
    padding: 12px;
    font-weight: 500;
    box-shadow: 0 10px 26px rgba(10, 10, 14, 0.28);
  }

  /* ── Eyebrows / mono labels ────────────────────────────────────────── */
  .eyebrow, .adv-section-label, .adv-hero__label, .tests-section-label, .auth-bullets__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-3);
    margin-bottom: var(--sp-4);
  }
  .eyebrow__n { color: var(--fg-2); font-variant-numeric: tabular-nums; }

  /* ── Buttons ───────────────────────────────────────────────────────── */
  .btn, a.btn, button[type=submit], input[type=submit] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding-inline: var(--sp-4);
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    transition: background var(--d-fast) linear, border-color var(--d-fast) linear,
      color var(--d-fast) linear, box-shadow var(--d-fast) linear,
      transform var(--d-fast) var(--e-overshoot);
  }
  .btn:active, button[type=submit]:active, input[type=submit]:active { transform: scale(0.97); }

  /* Primary — MATTE pigment (owner E-spec): flat #101013, white hairline,
     diffuse shadow. No gloss, no gradient. */
  .btn--primary, .btn--current, button[type=submit], input[type=submit] {
    background: #101013;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(10, 10, 14, 0.28);
  }
  .btn--primary:hover, .btn--current:hover, button[type=submit]:hover, input[type=submit]:hover {
    background: #17171b;
    color: #ffffff;
  }
  /* Secondary — CLEAR liquid glass (owner E-spec): transparent fill,
     hairline, top specular + under-glow; Chromium refracts the page
     behind it via the inline #btnGlass displacement filter. */
  .btn--secondary, .btn--outline, .btn--ghost, .btn--ghost-brass {
    background: var(--glass-clear);
    border-color: rgba(0, 0, 0, 0.14);
    color: var(--fg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -10px 16px rgba(255, 255, 255, 0.28), 0 10px 26px rgba(10, 10, 14, 0.14);
  }
  .btn--secondary:hover, .btn--outline:hover, .btn--ghost:hover, .btn--ghost-brass:hover {
    border-color: rgba(0, 0, 0, 0.24);
    background: rgba(255, 255, 255, 0.32);
  }
  @supports (backdrop-filter: url(#btnGlass)) {
    .btn--secondary, .btn--outline, .btn--ghost, .btn--ghost-brass {
      backdrop-filter: url(#btnGlass);
      -webkit-backdrop-filter: url(#btnGlass);
    }
  }
  /* Tertiary — text + ink underline sweep */
  .btn--text {
    background: transparent;
    color: var(--fg-2);
    padding-inline: var(--sp-2);
    border-radius: 0;
    background-image: linear-gradient(#0b0b0c, #0b0b0c);
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    background-position: left calc(100% - 6px);
    transition: color var(--d-fast) linear, background-size var(--dur-med) var(--e-emphasized);
  }
  .btn--text:hover { color: var(--fg); background-size: 100% 1.5px; }
  .btn--pill { border-radius: var(--r-pill); }
  .btn--lg { height: 48px; padding-inline: var(--sp-5); font-size: 16px; }
  .btn--sm { height: 32px; padding-inline: 12px; font-size: 13px; }
  .btn[disabled], .btn:disabled, button[type=submit]:disabled { opacity: 0.45; cursor: not-allowed; }

  /* ── Badges ────────────────────────────────────────────────────────── */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding-inline: 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.66);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
  }
  .badge--free { border-color: transparent; background: var(--tint-green-bg); color: var(--tint-green-fg); }
  .badge--paid, .badge--advisor { border-color: transparent; background: var(--tint-blue-bg); color: var(--blue-text); }
  .badge--gold, .badge--category { border-color: transparent; background: var(--tint-amber-bg); color: var(--tint-amber-fg); }
  .badge--blue { border-color: transparent; background: var(--tint-blue-bg); color: var(--blue-text); }

  /* ── Forms — white fields, hairlines, gradient focus ring ──────────── */
  .field { margin-bottom: var(--sp-4); }
  .field label {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-2);
    margin-bottom: var(--sp-2);
  }
  input[type=email], input[type=text], input[type=password], input[type=number], textarea, select {
    width: 100%;
    height: 40px;
    padding-inline: 12px;
    background: #ffffff;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    color: var(--fg);
    font-size: 14px;
    transition: border-color var(--d-fast) linear, box-shadow var(--d-fast) linear;
  }
  textarea { height: auto; min-height: 120px; padding-block: 10px; resize: vertical; }
  input[type=email]:focus, input[type=text]:focus, input[type=password]:focus,
  input[type=number]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #0b0b0c;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0b0b0c;
  }
  input::placeholder, textarea::placeholder { color: var(--fg-3); }
  input[type=range] { accent-color: #0b0b0c; width: 100%; padding: 8px 0; background: transparent; border: none; height: auto; }
  input[type=checkbox], input[type=radio] { accent-color: #0b0b0c; }
  .form-submit { margin-top: var(--sp-5); }

  /* ── Notices ───────────────────────────────────────────────────────── */
  .notice {
    padding: var(--sp-4);
    border-radius: var(--r-sm);
    font-size: 14px;
    line-height: 1.55;
    border-left: 2px solid var(--fg-3);
  }
  .notice--error { border-left-color: var(--red); background: var(--tint-red-bg); }
  .notice--success { border-left-color: var(--success); background: var(--tint-green-bg); }

  /* ── Tabs — animated gradient underline ────────────────────────────── */
  .tabs, .filter-tabs {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--hairline);
  }
  .tab, .filter-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding-inline: 14px;
    margin-bottom: -1px;
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-3);
  }
  .tab::after, .filter-tab::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: -1px;
    height: 2px;
    background: var(--ink);
    border-radius: var(--r-pill);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-med) var(--e-emphasized);
  }
  .tab:hover, .filter-tab:hover { color: var(--fg-2); }
  .tab.active, .tab[aria-selected="true"], .filter-tab.active { color: var(--fg); }
  .tab.active::after, .tab[aria-selected="true"]::after, .filter-tab.active::after { transform: scaleX(1); }

  /* ── Tables ────────────────────────────────────────────────────────── */
  .free-table th, .data-table th {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
    text-align: left;
    border-bottom: 1px solid var(--hairline);
  }
  .free-table td, .data-table td {
    font-size: 14px;
    color: var(--fg-2);
    border-bottom: 1px solid var(--hairline);
    font-variant-numeric: tabular-nums;
  }
  .data-table tr:last-child td { border-bottom: none; }

  /* ── Status pills ──────────────────────────────────────────────────── */
  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding-inline: 10px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .status-pill--complete { background: var(--tint-green-bg); color: var(--tint-green-fg); }
  .status-pill--progress { background: var(--tint-amber-bg); color: var(--tint-amber-fg); }
  .status-pill--pending { background: var(--bg-0); color: var(--fg-3); border: 1px solid var(--hairline); }

  /* ── Code panels ───────────────────────────────────────────────────── */
  .code-panel { background: var(--bg-0); border-radius: var(--r-md); overflow: hidden; }
  .code-panel__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline);
  }
  .code-panel__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline-strong); }
  .code-panel__title {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-3);
    margin-left: 4px;
  }
  .code-panel__body {
    padding: var(--sp-4);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    color: var(--fg-2);
    overflow-x: auto;
    font-variant-numeric: tabular-nums;
  }
  .copy-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding-inline: 10px;
    margin-left: auto;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-2);
    transition: border-color var(--d-fast) linear, color var(--d-fast) linear;
  }
  .copy-chip:hover { border-color: var(--hairline-strong); color: var(--fg); }
  .copy-chip.copied { color: var(--tint-green-fg); border-color: var(--tint-green-fg); }
  .kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--hairline);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-2);
  }

  /* ── Quiz chrome ───────────────────────────────────────────────────── */
  .progress-bar, .quiz-progress-track {
    height: 4px;
    background: var(--hairline);
    border-radius: var(--r-pill);
    overflow: hidden;
  }
  .progress-bar__fill, .quiz-progress-fill {
    height: 100%;
    background: var(--ink);
    border-radius: var(--r-pill);
    transition: width var(--dur-med) var(--e-emphasized);
  }
  .question-row, .question-block { padding-block: var(--sp-5); border-bottom: 1px solid var(--hairline); }
  .question-row__num, .question-block__num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    margin-bottom: var(--sp-2);
  }
  .question-row__text, .question-block__text {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--fg);
    margin-bottom: var(--sp-4);
  }
  /* Quiz options — white glass pills; selected = Gemini hairline + tint */
  .choice-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--fg-2);
    transition: border-color var(--d-fast) linear, color var(--d-fast) linear,
      background var(--d-fast) linear, transform var(--d-fast) var(--e-overshoot);
  }
  .choice-opt:hover { border-color: var(--hairline-strong); color: var(--fg); transform: translateY(-1px); }
  .choice-opt__letter {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--hairline);
    border-radius: 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
  }
  .choice-opt--selected, .choice-opt.selected {
    border-color: var(--ink);
    background: #ffffff;
    color: var(--fg);
    box-shadow: 0 0 0 1px var(--ink), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .choice-opt--selected .choice-opt__letter, .choice-opt.selected .choice-opt__letter {
    background: var(--ink);
    border-color: var(--ink);
    color: #ffffff;
  }
  .teaser-quiz__options { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }

  .likert { display: flex; gap: var(--sp-2); justify-content: space-between; }
  .likert__opt { position: relative; flex: 1; text-align: center; }
  .likert__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .likert__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
    transition: border-color var(--d-fast) linear, background var(--d-fast) linear,
      color var(--d-fast) linear, transform var(--d-fast) var(--e-overshoot);
  }
  .likert__opt:hover .likert__btn { border-color: var(--hairline-strong); color: var(--fg); transform: scale(1.06); }
  .likert__opt--selected .likert__btn {
    border-color: var(--ink);
    background: var(--ink);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(10, 10, 14, 0.22);
  }
  .likert__opt input:focus-visible + .likert__btn {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0b0b0c;
  }
  .bubble-wrap { padding-block: var(--sp-4); }
  .bubble-wrap__label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
  }
  .scale-legend { display: flex; align-items: center; gap: 8px; }
  .scale-legend__dots { display: flex; gap: 4px; }
  .scale-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3); }

  .test-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    border-bottom: 1px solid var(--hairline);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .test-header__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: clamp(16px, 3vw, 24px);
  }
  .test-header__meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
  }
  .test-main { padding-top: 96px; }

  /* ── Intro pages ───────────────────────────────────────────────────── */
  .part-intro { padding-block: var(--sp-8); }
  .part-intro h1 { font-size: clamp(32px, 4.4vw, 48px); letter-spacing: var(--ls-48); }
  .intro__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block: var(--sp-4); }
  .intro__features { display: grid; gap: var(--sp-3); margin-block: var(--sp-5); }
  .intro__feature { padding: var(--sp-4); display: flex; gap: 12px; align-items: flex-start; }
  .intro__feature-icon { color: var(--fg-3); flex-shrink: 0; }
  .intro__steps { display: grid; gap: var(--sp-2); margin-block: var(--sp-5); }
  .intro__step { display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--fg-2); }
  .intro__note { font-size: 13px; color: var(--fg-3); line-height: 1.7; }
  .feature-check { color: var(--success); flex-shrink: 0; }

  /* ── Tests index ───────────────────────────────────────────────────── */
  .tests-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  @media (max-width: 960px) { .tests-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .tests-grid { grid-template-columns: 1fr; } }
  .test-card-full { display: flex; flex-direction: column; gap: 10px; padding: var(--sp-5); }
  .test-card-full__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .test-card-full__name { font-size: 17px; font-weight: 600; letter-spacing: var(--ls-20); }
  .test-card-full__tagline { font-size: 13.5px; color: var(--fg-3); }
  .test-card-full__desc { font-size: 14px; color: var(--fg-2); line-height: 1.6; flex: 1; }
  .test-card-full__stats {
    display: flex;
    gap: var(--sp-4);
    font-family: var(--font-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
  }

  /* ── Pricing ───────────────────────────────────────────────────────── */
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    align-items: stretch;
  }
  @media (max-width: 880px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
  .price-card, .adv-plan { padding: var(--sp-5); display: flex; flex-direction: column; }
  /* MOST POPULAR (Practice) — WHITELISTED signal use (b): a 6px signal
     dot beside the label + a 1px signal top hairline. Nothing else on
     pricing carries color. */
  .price-card--featured, .adv-plan--featured {
    border-top: 1px solid var(--signal);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 36px rgba(10, 10, 14, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .price-seal, .adv-plan__popular {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-inline: 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline-strong);
    background: #ffffff;
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
  }
  .price-seal::before, .adv-plan__popular::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--signal);
  }
  .price-card__name, .adv-plan__name {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-2);
    margin-bottom: var(--sp-3);
  }
  .price-card__price, .adv-plan__price {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: var(--ls-40);
    line-height: 1;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
  }
  .price-card__price sup { font-size: 18px; font-weight: 500; }
  .price-card__per, .adv-plan__per, .adv-plan__cadence {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
  }
  .price-card__features { margin-block: var(--sp-4); display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .price-card__feature { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--fg-2); line-height: 1.5; }
  .price-card__note { font-size: 12.5px; color: var(--fg-3); margin-top: var(--sp-3); }

  /* ── Billing toggle ────────────────────────────────────────────────── */
  .seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  }
  .seg__opt {
    height: 30px;
    padding-inline: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-2);
    transition: background var(--d-fast) linear, color var(--d-fast) linear, box-shadow var(--d-fast) linear;
  }
  .seg__opt[aria-pressed="true"] {
    background: #ffffff;
    color: var(--fg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--hairline);
  }
  .seg__save {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tint-green-fg);
  }
  .seg__opt[aria-pressed="true"] .seg__save { color: var(--tint-green-fg); }

  /* ── Dashboard widgets ─────────────────────────────────────────────── */
  .plan-card { padding: var(--sp-5); }
  .plan-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
  .plan-card__tier { font-size: 24px; font-weight: 600; letter-spacing: var(--ls-24); }
  .usage-meter { margin-top: var(--sp-4); }
  .usage-meter__labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--sp-2);
  }
  .stat-lead {
    font-family: var(--font-sans);
    font-size: 48px;
    font-weight: 600;
    letter-spacing: var(--ls-48);
    line-height: 1;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
  }

  /* ── Report chrome ─────────────────────────────────────────────────── */
  .report-section { padding: var(--sp-6); margin-bottom: var(--sp-5); }
  .report-section__title { font-size: 22px; font-weight: 600; letter-spacing: var(--ls-24); margin-bottom: var(--sp-2); }
  .report-section__sub { font-size: 14px; color: var(--fg-3); margin-bottom: var(--sp-4); }
  .result-preview { padding: var(--sp-5); }
  .result-preview__row { display: flex; justify-content: space-between; padding-block: 10px; border-bottom: 1px solid var(--hairline); font-size: 14px; }
  .result-preview__row:last-child { border-bottom: none; }
  .result-preview__lock { color: var(--fg-3); }
  .score-bar { height: 6px; background: var(--hairline); border-radius: var(--r-pill); overflow: hidden; }
  .score-bar__fill { height: 100%; background: var(--ink); border-radius: var(--r-pill); }
  .gauge { position: relative; }
  .gauge__track { stroke: var(--hairline); }
  .gauge__fill { stroke: var(--ink); }
  .label-very-low, .label-low { color: var(--fg-3); }
  .label-below-avg { color: var(--fg-2); }
  .label-above-avg { color: var(--fg); }
  .label-high, .label-very-high { color: var(--blue-text); }

  /* ── Engagement widgets ────────────────────────────────────────────── */
  .demo-widget { padding: var(--sp-5); display: flex; flex-direction: column; }
  .demo-widget__label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--fg-3);
    margin-bottom: var(--sp-3);
  }
  .demo-widget__stage { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sp-2); }
  .demo-widget__cta { display: inline-block; margin-top: var(--sp-3); font-size: 13.5px; color: var(--blue-text); }
  .demo-widget__cta:hover { color: var(--fg); }
  .bias-day__name { font-size: 22px; font-weight: 600; letter-spacing: var(--ls-24); }

  /* ── Focal mark (retained for non-home uses) ───────────────────────── */
  .focal-mark { color: var(--fg); }
  .focal-mark .fm-frame { stroke: currentColor; stroke-width: 1; fill: none; }
  .focal-mark .fm-dim { stroke: var(--fg-3); stroke-width: 0.75; fill: none; }
  .focal-mark .fm-tick { stroke: var(--fg-2); stroke-width: 1; }
  .focal-mark .fm-edge {
    stroke: #171717;
    stroke-width: 1.25;
    fill: none;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35));
  }

  /* ── Report viewer (paged carousel) ────────────────────────────────── */
  .rv-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 10px 14px;
    border-top: 1px solid var(--hairline);
  }
  .rv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    color: var(--fg-2);
    transition: border-color var(--d-fast) linear, color var(--d-fast) linear;
  }
  .rv-btn:hover { border-color: var(--hairline-strong); color: var(--fg); }
  .rv-meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
  }

  /* ── Marquee (credential row) ──────────────────────────────────────── */
  .marquee { overflow: hidden; position: relative; }
  .marquee__track {
    display: flex;
    gap: var(--sp-8);
    width: max-content;
    align-items: center;
  }
  @media (prefers-reduced-motion: no-preference) {
    .marquee__track { animation: v4Marquee 36s linear infinite; }
    .marquee:hover .marquee__track { animation-play-state: paused; }
  }
  .marquee__item {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    white-space: nowrap;
  }

  /* ── Command palette (⌘K) — frosted sheet, spring entrance ─────────── */
  .cmdk { position: fixed; inset: 0; z-index: 200; display: none; }
  .cmdk.open { display: block; }
  .cmdk__scrim { position: absolute; inset: 0; background: rgba(10, 10, 14, 0.32); }
  .cmdk__panel {
    position: relative;
    max-width: 560px;
    margin: 12vh auto 0;
    border: 1px solid var(--glass-border-top);
    border-bottom-color: var(--glass-border-bottom);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-shadow-hover), var(--glass-specular);
    overflow: hidden;
  }
  @media (prefers-reduced-motion: no-preference) {
    .cmdk.open .cmdk__panel { animation: gwSpringIn var(--d-med) var(--spring) both; }
  }
  .cmdk__input {
    width: 100%;
    height: 52px;
    padding-inline: var(--sp-4);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    color: var(--fg);
    font-size: 15px;
  }
  .cmdk__input:focus { outline: none; box-shadow: none; border-color: var(--hairline); border-bottom-color: var(--ink); caret-color: var(--ink); }
  .cmdk__list { max-height: 320px; overflow-y: auto; padding: var(--sp-2); }
  .cmdk__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: 14px;
    color: var(--fg-2);
  }
  .cmdk__item[aria-selected="true"] { background: var(--tint-blue-bg); color: var(--fg); }
  .cmdk__item-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
  }
  .cmdk__empty { padding: var(--sp-5); text-align: center; font-size: 14px; color: var(--fg-3); }
  .cmdk__hint {
    display: flex;
    gap: var(--sp-4);
    padding: 10px var(--sp-4);
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
  }

  /* ── Footer — pure white, hairline top, black type ─────────────────── */
  .footer {
    border-top: 1px solid var(--hairline);
    background: #ffffff;
    padding: var(--sp-8) clamp(16px, 4vw, 32px) var(--sp-6);
  }
  .footer__grid {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--sp-6);
  }
  @media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
  .footer__wordmark { font-family: var(--font-sans); font-weight: 500; font-size: 15px; color: var(--fg); margin-bottom: var(--sp-3); }
  .footer__wordmark span {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 400;
    font-size: 1.16em;
    color: var(--fg);
  }
  .footer__tagline { font-size: 13px; color: var(--fg-3); line-height: 1.7; max-width: 34ch; }
  .footer__label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    margin-bottom: var(--sp-3);
  }
  .footer__col { display: flex; flex-direction: column; gap: 9px; }
  .footer__link { font-size: 13.5px; color: var(--fg-2); }
  .footer__link:hover { color: var(--fg); }
  .footer__copy {
    max-width: var(--max-w);
    margin: var(--sp-7) auto 0;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
  }

  #cookie-banner {
    background: rgba(255, 255, 255, 0.92);
    border-top: 1px solid var(--hairline);
    color: var(--fg-2);
    box-shadow: 0 -4px 16px rgba(10, 10, 14, 0.05);
  }
  #cookie-banner button {
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    background: #ffffff;
    color: var(--fg);
    font-size: 13px;
  }
  #cookie-banner button:hover { border-color: var(--hairline-strong); }

  /* ── Links ─────────────────────────────────────────────────────────── */
  .link-quiet {
    color: var(--fg-2);
    text-decoration: underline;
    text-decoration-color: var(--hairline-strong);
    text-underline-offset: 3px;
    transition: color var(--d-fast) linear;
  }
  .link-quiet:hover { color: var(--fg); text-decoration-color: var(--fg-3); }
}

/* ═══ UTILITIES ═══════════════════════════════════════════════════════ */
@layer utilities {
  .tabular, .num { font-variant-numeric: tabular-nums; }
  .mono, .t-mono {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
  }
  .t-display, .t-heading { font-family: var(--font-sans); font-weight: 600; color: var(--fg); }
  .t-body, .t-ui { font-family: var(--font-sans); }
  .t-ink { color: var(--fg); }
  .t-smoke { color: var(--fg-2); }
  .t-slate, .t-muted { color: var(--fg-3); }
  .t-brass { color: var(--fg-2); }
  .t-current { color: var(--blue-text); }
  .t-green { color: var(--success); }
  .t-sienna { color: #57575c; }
  /* Focus ring for controls whose resting box-shadow would otherwise
     swallow the base-layer ring (utilities layer wins over components) */
  .btn:focus-visible, button:focus-visible, input[type=submit]:focus-visible,
  .nav-cta:focus-visible, .mob__cta:focus-visible, .choice-opt:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Display scale — hero headlines (Gemini/Apple scale) */
  .t-hero {
    font-size: clamp(2.75rem, 6vw, 5.5rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--fg);
  }

  /* Script accent — Instrument Serif Italic, display only. Sits inline
     in a sans headline, optically matched (~1.15×), baseline-aligned. */
  .t-script, .script {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 400;
    font-size: 1.15em;
    letter-spacing: 0;
    line-height: 0;                /* never stretch the sans line box */
  }

  /* NOIR: the old gradient-text class renders plain ink — the script
     accent outside the hero is plain black italic. Kept for compat. */
  .grad-text { color: inherit; }

  /* Four-point sparkle — WHITELISTED signal use (c): CTA-success only */
  .sparkle {
    display: inline-block;
    color: var(--signal);
  }
  .sparkle--pop { animation: gwSparklePop 700ms var(--spring) both; }

  /* Scroll reveals — native CSS scroll-driven; always-visible fallback */
  .reveal, .reveal-left, .reveal-right, .wp-reveal, .anim-fade-up,
  .anim-scale-in, .anim-slide-down, .anim-stagger { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .reveal, .wp-reveal, .anim-fade-up {
        animation: v4FadeUp 0.7s var(--e-enter) both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
      }
    }
  }
}

/* ── Keyframes (transform/opacity/background-position only) ──────────── */
@keyframes v4FadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes v4Marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes v4Blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes gwSpringIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gwSparklePop {
  0% { opacity: 0; transform: scale(0.2) rotate(-20deg); }
  55% { opacity: 1; transform: scale(1.25) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── Fallback chain ──────────────────────────────────────────────────── */
/* No backdrop-filter support → the refraction tier never applies; the
   clear tier already renders everywhere. Reduced transparency → opaque
   everything, filters off. */
@media (prefers-reduced-transparency: reduce) {
  .glass-real, .nav, .test-header, .cmdk__panel, #mobile-menu,
  .glass, .card, .vcard, .guide-card, .faq-item, .tip, .intro__feature,
  .adv-feature, .test-card-full, .price-card, .adv-plan, .panel-cool,
  .home-lens, .report-section, .result-preview, .notice, .upsell-card,
  .demo-widget, .plan-card, .choice-opt,
  .btn--secondary, .btn--outline, .btn--ghost, .btn--ghost-brass {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ── Reduced motion — global pass ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* :root body * carries (0,1,1) specificity so this unlayered pass also
     beats single-class rules in unlayered page styles and report.css */
  *, *::before, *::after,
  :root body *, :root body *::before, :root body *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

/* ── Print ───────────────────────────────────────────────────────────── */
@media print {
  .nav, .btn, .no-print, .footer, #cookie-banner, #mobile-menu { display: none; }
  body { background: #fff; color: #171717; }
  body::before { display: none; }
}