/* ─────────────────────────────────────────────────────────────────────
   Font-metric fallback for CLS — when Inter loads from Google Fonts, the
   browser swaps from a system fallback. If the fallback's metrics differ
   from Inter's, every text node reflows and CLS spikes (measured 0.189
   before this fix vs 0.1 Core Web Vitals target). The override values
   below come from comparing Arial's metrics to Inter's; they tell the
   browser to render Arial at the same effective size + line-box as Inter,
   so the swap is metric-identical.
   ───────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'InterFallback';
  src: local('Arial'), local('Helvetica'), local('sans-serif');
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}
@font-face {
  font-family: 'JetBrainsFallback';
  src: local('Menlo'), local('Consolas'), local('monospace');
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

/* ─────────────────────────────────────────────────────────────────────
   Design tokens
   8-pt spacing · modular type scale · semantic colour · refined shadows
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* ─ Surfaces (dark mode is the default identity) ─ */
  --bg:            #06081a;
  --bg-2:          #0a0d24;          /* slightly elevated bg (under modals) */
  --bg-elev:       #10143a;          /* elevated panels, dropdowns */
  --surface:       rgba(255, 255, 255, 0.035);
  --surface-2:     rgba(255, 255, 255, 0.06);
  --surface-3:     rgba(255, 255, 255, 0.09);
  --surface-hover: rgba(255, 255, 255, 0.07);
  --surface-strong: var(--surface-2);    /* alias retained for older selectors */
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-focus:  rgba(124, 58, 237, 0.55);

  /* ─ Text hierarchy ─ */
  --text:        #eef0ff;
  --text-dim:    #a9aecf;
  --text-mute:   #8e93b5;          /* lightened from #71769a to pass WCAG AA 4.5:1 on every measured surface */
  --text-faint:  #4a4f73;
  --text-on-accent: #ffffff;

  /* ─ Brand & accent ─ */
  --accent-1:      #8b5cf6;          /* violet-500 — softer than 7c3aed */
  --accent-1-soft: rgba(139, 92, 246, 0.16);
  --accent-2:      #22d3ee;          /* cyan-400 */
  --accent-2-soft: rgba(34, 211, 238, 0.16);
  --accent-grad:        linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);
  --accent-grad-soft:   linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(34, 211, 238, 0.16));
  --accent-grad-strong: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);

  /* ─ Semantic colour (used everywhere with consistent intensity) ─ */
  --ok:        #10b981;
  --ok-soft:   rgba(16, 185, 129, 0.14);
  --ok-border: rgba(16, 185, 129, 0.42);
  --warn:        #f59e0b;
  --warn-soft:   rgba(245, 158, 11, 0.12);
  --warn-border: rgba(245, 158, 11, 0.42);
  --bad:        #ef4444;
  --bad-soft:   rgba(239, 68, 68, 0.12);
  --bad-border: rgba(239, 68, 68, 0.45);
  --info:        #38bdf8;
  --info-soft:   rgba(56, 189, 248, 0.14);
  --info-border: rgba(56, 189, 248, 0.42);

  /* ─ Maturity level colours (semantic — used in pills, bars, summary) ─ */
  --ml0: #64748b;
  --ml1: #22d3ee;
  --ml2: #a78bfa;
  --ml3: #f472b6;

  /* ─ Spacing (8-pt grid + half steps) ─ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;

  /* ─ Type scale (modular ~1.2) ─ */
  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.875rem;    /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-md:   1.0625rem;   /* 17 */
  --text-lg:   1.125rem;    /* 18 */
  --text-xl:   1.25rem;     /* 20 */
  --text-2xl:  1.5rem;      /* 24 */
  --text-3xl:  1.875rem;    /* 30 */
  --text-4xl:  2.25rem;     /* 36 */
  --text-5xl:  3rem;        /* 48 */
  --text-6xl:  3.75rem;     /* 60 */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;
  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.03em;

  /* ─ Radii ─ */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   22px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ─ Shadows — multi-layer (ambient + cast) ─ */
  --shadow-xs: 0 1px 2px rgba(2, 4, 20, 0.3);
  --shadow-sm: 0 2px 6px rgba(2, 4, 20, 0.32), 0 1px 2px rgba(2, 4, 20, 0.18);
  --shadow:    0 8px 24px rgba(2, 4, 20, 0.42), 0 2px 6px rgba(2, 4, 20, 0.22);
  --shadow-lg: 0 16px 48px rgba(2, 4, 20, 0.5),  0 4px 12px rgba(2, 4, 20, 0.28);
  --shadow-xl: 0 32px 80px rgba(2, 4, 20, 0.55), 0 8px 24px rgba(2, 4, 20, 0.32);
  --shadow-ring: 0 0 0 3px rgba(139, 92, 246, 0.32);

  /* ─ Motion — easing + duration ─ */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration:      200ms;
  --duration-slow: 320ms;

  /* ─ Layout ─ */
  --max-w: 1200px;
  --header-h: 64px;

  /* InterFallback / JetBrainsFallback are size-adjusted @font-faces (top of
     file) so the system fallback renders at Inter/JetBrains metrics — kills
     the CLS spike when the web font swaps in. */
  --font-sans: 'Inter', 'InterFallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrainsFallback', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ─ Light theme — equally polished, not just an inverted dump ─ */
:root[data-theme="light"] {
  --bg:            #f8f9fc;
  --bg-2:          #ffffff;
  --bg-elev:       #ffffff;
  --surface:       rgba(15, 18, 50, 0.035);
  --surface-2:     rgba(15, 18, 50, 0.055);
  --surface-3:     rgba(15, 18, 50, 0.08);
  --surface-hover: rgba(15, 18, 50, 0.06);
  --surface-strong: var(--surface-2);
  --border:        rgba(15, 18, 50, 0.08);
  --border-strong: rgba(15, 18, 50, 0.14);
  --border-focus:  rgba(124, 58, 237, 0.55);
  --text:        #0c1030;
  --text-dim:    #43476b;
  --text-mute:   #5d6280;          /* WCAG AA 4.5:1 on light bg */
  --text-faint:  #a1a6c5;
  --accent-1-soft: rgba(139, 92, 246, 0.12);
  --accent-2-soft: rgba(34, 211, 238, 0.12);
  --ok-soft:   rgba(16, 185, 129, 0.10);
  --warn-soft: rgba(245, 158, 11, 0.10);
  --bad-soft:  rgba(239, 68, 68, 0.10);
  --info-soft: rgba(56, 189, 248, 0.10);
  --shadow-xs: 0 1px 2px rgba(15, 18, 50, 0.05);
  --shadow-sm: 0 2px 8px rgba(15, 18, 50, 0.05), 0 1px 2px rgba(15, 18, 50, 0.04);
  --shadow:    0 8px 28px rgba(15, 18, 50, 0.08), 0 2px 6px rgba(15, 18, 50, 0.04);
  --shadow-lg: 0 16px 48px rgba(15, 18, 50, 0.1),  0 4px 12px rgba(15, 18, 50, 0.05);
  --shadow-xl: 0 32px 80px rgba(15, 18, 50, 0.12), 0 8px 24px rgba(15, 18, 50, 0.06);
  --shadow-ring: 0 0 0 3px rgba(124, 58, 237, 0.22);
}

/* ─────────────────────────────────────────────────────────────────────
   Reset & base
   ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: var(--leading-normal);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* Typography — confident hierarchy with refined tracking */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text);
}
h1 { font-size: clamp(2.1rem, 4.4vw + 1rem, 3.6rem); letter-spacing: var(--tracking-tighter); }
h2 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.1rem); }
h3 { font-size: var(--text-lg); font-weight: 600; }
h4 { font-size: var(--text-base); font-weight: 600; }
p  { margin: 0; }
em { font-style: normal; font-weight: 600; color: var(--text); }
small { font-size: var(--text-sm); }
code, kbd, .mono { font-family: var(--font-mono); }

/* Selection */
::selection { background: var(--accent-1-soft); color: var(--text); }

/* Universal focus rings — visible only when keyboard-navigating */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
  border-radius: var(--radius-xs);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
}

/* Scrollbar (subtle in dark, almost invisible in light) */
@supports (scrollbar-color: red red) {
  * { scrollbar-color: var(--surface-3) transparent; scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--surface-hover); background-clip: padding-box; }

/* ---------- aurora background ---------- */
#bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
#bg-aurora::before, #bg-aurora::after {
  content: "";
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
  animation: float 22s ease-in-out infinite;
}
#bg-aurora::before {
  background: radial-gradient(circle at 30% 30%, #7c3aed 0%, transparent 60%);
  top: -30vmax; left: -20vmax;
}
#bg-aurora::after {
  background: radial-gradient(circle at 70% 70%, #06b6d4 0%, transparent 60%);
  bottom: -30vmax; right: -20vmax;
  animation-delay: -11s;
}
:root[data-theme="light"] #bg-aurora::before,
:root[data-theme="light"] #bg-aurora::after { opacity: 0.18; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4vmax, 4vmax) scale(1.08); }
}

/* ─────────────────────────────────────────────────────────────────────
   Layout primitives — header, main, footer
   ───────────────────────────────────────────────────────────────────── */
.site-header {
  /* z-index 60 must stay above .nav-backdrop (z=55) — the header creates a
     stacking context for the mobile drawer, so the drawer's own z-index can
     never escape it. With header at 50 the backdrop overlay rendered on top
     of the drawer, making the menu look empty. */
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--header-h);
  padding: 0 max(var(--space-5), env(safe-area-inset-right)) 0 max(var(--space-5), env(safe-area-inset-left));
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 700; letter-spacing: var(--tracking-tight);
  font-size: var(--text-md);
  color: var(--text);
  transition: opacity var(--duration-fast) var(--ease-out);
}
.brand:hover { opacity: 0.85; }
.brand-mark { width: 28px; height: 28px; filter: drop-shadow(0 4px 12px rgba(139, 92, 246, 0.35)); }
.brand-text-accent {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}
.site-nav {
  display: flex; gap: var(--space-1);
  margin-left: var(--space-5); flex: 1; flex-wrap: wrap;
}
.site-nav a {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-dim);
  transition: color var(--duration) var(--ease-out),
              background var(--duration) var(--ease-out);
}
.site-nav a:hover { color: var(--text); background: var(--surface); }
.site-nav a[aria-current="page"] {
  color: var(--text);
  background: var(--surface-2);
}
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute; left: var(--space-3); right: var(--space-3); bottom: 4px;
  height: 2px;
  background: var(--accent-grad);
  border-radius: var(--radius-full);
}
.header-actions {
  display: flex; gap: var(--space-2); align-items: center;
  justify-content: flex-end;
  /* Reserve typical width for the account chip + theme toggle so adding
     Sign-in/Sign-up buttons (or the skeleton chip) after deferred scripts
     run doesn't shift the rest of the header. Was the dominant CLS source
     in measurements (header-actions: 36px → 200px). */
  min-width: 200px;
}

/* ─ Hamburger toggle — animated 3-line → X. Hidden on desktop.
   Specificity bump (.icon-btn.nav-toggle) wins over the .icon-btn
   display:inline-flex below; without it the button leaks onto desktop
   and clicking only shows the drawer backdrop (drawer styles are mobile-only),
   so it reads as an "empty menu". ─ */
.icon-btn.nav-toggle { display: none; }
.nav-toggle-lines {
  position: relative;
  width: 18px; height: 14px;
  display: inline-block;
}
.nav-toggle-lines span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
  transform-origin: center;
}
.nav-toggle-lines span:nth-child(1) { top: 0; }
.nav-toggle-lines span:nth-child(2) { top: 6px; }
.nav-toggle-lines span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ─ Slide-out drawer backdrop — also sits beneath the header so taps on
   the X stay live, and the user can clearly see the navigation context. ─ */
.nav-backdrop {
  position: fixed;
  top: var(--header-h);
  right: 0; bottom: 0; left: 0;
  z-index: 55;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration) var(--ease-out);
}
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.icon-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.icon-btn:active { transform: scale(0.96); }

main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(var(--space-7), 4vw, var(--space-10)) max(var(--space-5), 5vw) var(--space-11);
  display: flex; flex-direction: column;
  gap: clamp(var(--space-8), 5vw, var(--space-10));
  animation: fade-up var(--duration-slow) var(--ease-out) both;
  /* Reserve vertical space so the footer doesn't fly down when SPA content
     renders. The empty-main → home-content shift was the dominant remaining
     CLS source after the header reservation. Setting main to ~full viewport
     keeps the footer just below the fold on initial paint — when the SPA
     fills main with real content, the footer is already off-screen, so
     pushing it further down isn't a visible shift. */
  min-height: 100dvh;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: var(--space-9);
  padding: var(--space-7) max(var(--space-5), 5vw);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  color: var(--text-mute);
  font-size: var(--text-sm);
}
.site-footer a { color: var(--text-dim); transition: color var(--duration-fast) var(--ease-out); }
.site-footer a:hover { color: var(--text); }
.footer-meta { color: var(--text-mute); }

/* ─────────────────────────────────────────────────────────────────────
   Hero + eyebrow + lede
   ───────────────────────────────────────────────────────────────────── */
.hero {
  display: grid; gap: clamp(var(--space-5), 3vw, var(--space-8));
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
}
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 5px var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  font-size: var(--text-xs);
  letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 600;
  color: var(--text-dim);
  backdrop-filter: blur(6px);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.55);
}
.hero h1 { margin: var(--space-5) 0 var(--space-4); }
.lede {
  color: var(--text-dim);
  font-size: clamp(var(--text-base), 0.5vw + 0.9rem, var(--text-lg));
  line-height: var(--leading-relaxed);
  max-width: 60ch;
}
.lede em { color: var(--text); font-weight: 600; }

.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-7) 0 var(--space-6); }
.hero-meta {
  display: flex; flex-wrap: wrap;
  gap: var(--space-3) var(--space-5); align-items: center;
  font-size: var(--text-sm); color: var(--text-dim);
}
.hero-meta strong { color: var(--text); font-weight: 600; }
.hero-meta .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-mute);
}

/* ─────────────────────────────────────────────────────────────────────
   Buttons — sizes, states, focus
   ───────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  min-height: 42px;
  border-radius: var(--radius);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}

.btn-primary {
  /* Top-only gloss layered over the accent gradient — gives the glossy
     highlight without an all-around inset ring, which used to render as
     faint vertical lines on the saturated left/right edges. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 45%),
    var(--accent-grad);
  /* Size the gradient to the border box, NOT the padding box (the default).
     Otherwise the gradient repeats into the 1px transparent border, tiling
     the gradient's opposite end-colour onto each edge — the stray vertical
     "lines of another colour". MUST come after the `background` shorthand,
     which resets background-origin back to padding-box. */
  background-origin: border-box;
  color: var(--text-on-accent);
  border-color: transparent;
  /* Neutral shadow — a coloured glow blurs wider than its spread and bleeds
     its colour out the sides; grey just reads as a normal shadow. */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.18),
    0 10px 22px -12px rgba(15, 23, 42, 0.40);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.20),
    0 16px 28px -12px rgba(15, 23, 42, 0.44);
}

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  background: var(--surface-hover);
  border-color: var(--text-mute);
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-3); }

/* Button sizes */
.btn-sm { min-height: 34px; padding: 0 var(--space-4); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-lg { min-height: 50px; padding: 0 var(--space-6); font-size: var(--text-base); border-radius: var(--radius-md); }

.hero-visual {
  position: relative; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
#maturity-radar {
  width: 100%; max-width: 380px;
  filter: drop-shadow(0 18px 40px rgba(139, 92, 246, 0.18));
}

/* ─────────────────────────────────────────────────────────────────────
   Stat cards (Overall, Strongest, Gap, Target)
   ───────────────────────────────────────────────────────────────────── */
.overview-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color var(--duration) var(--ease-out),
              background var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}
.stat-card::before {
  content: ""; position: absolute; inset: 0;
  background: var(--accent-grad-soft);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
  pointer-events: none;
}
.stat-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.stat-card:hover::before { opacity: 0.6; }
.stat-card > * { position: relative; z-index: 1; }

.stat-label {
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
}
.stat-value {
  margin-top: var(--space-2);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.stat-sub {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: var(--leading-snug);
}

/* Primary metric (Overall maturity) — the number the eye should land on
   first (Corel/Oracle/SaaS "lead with the headline metric"). Larger value,
   always-on brand wash + accent ring so it reads as the hero stat while the
   three supporting cards stay quietly muted. No layout/box-model change —
   it stays in the auto-fit grid, just visually elevated. */
.stat-card-primary {
  border-color: color-mix(in srgb, var(--accent-1) 38%, var(--border-strong));
  background:
    radial-gradient(ellipse at 0% 0%, var(--accent-1-soft), transparent 72%),
    radial-gradient(ellipse at 120% 120%, var(--accent-2-soft), transparent 72%),
    var(--surface-2);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
:root[data-theme="light"] .stat-card-primary,
:root:not([data-theme]) .stat-card-primary { box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.stat-card-primary .stat-label { color: var(--accent-2); }
.stat-card-primary .stat-value { font-size: clamp(var(--text-4xl), 2vw + 1.4rem, var(--text-5xl)); }
/* The primary card already carries its own wash — don't double it on hover. */
.stat-card-primary:hover::before { opacity: 0; }

/* Maturity-target cards on the home page — bare chips were jargon, so each
   choice now carries a tier label + a plain-English audience hint, with a
   "Recommended" tag on ML1 to anchor the default for non-technical users. */
.target-control {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-1);
}
.target-card {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.target-card:hover { color: var(--text); border-color: var(--text-mute); }
.target-card:active { transform: scale(0.99); }
.target-card[aria-pressed="true"] {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-1) 50%, transparent);
  background: color-mix(in srgb, var(--accent-1) 12%, var(--surface));
  box-shadow: 0 4px 14px -8px rgba(139, 92, 246, 0.55);
}
.target-card-head {
  display: inline-flex; align-items: center; gap: 8px;
}
.target-card-name {
  font-weight: 700; font-size: 0.95rem; letter-spacing: -0.005em;
  color: var(--text);
}
.target-card-tag {
  font-size: 0.68rem; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.target-card-rec {
  margin-left: auto;
  font-size: 0.66rem; font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--accent-1-soft); color: var(--accent-1);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.target-card-hint {
  font-size: 0.78rem; line-height: 1.45;
  color: var(--text-mute);
}
.target-card[aria-pressed="true"] .target-card-tag,
.target-card[aria-pressed="true"] .target-card-hint { color: var(--text-dim); }

/* Legacy chip class — still used by a few non-target chips. Keep it. */
.chip {
  display: inline-flex; align-items: center;
  padding: 6px var(--space-3); min-height: 30px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.chip:hover { color: var(--text); border-color: var(--text-mute); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] {
  color: var(--text-on-accent);
  background: var(--accent-grad);
  background-origin: border-box; /* keep gradient out of the border — see .btn-primary */
  border-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(139, 92, 246, 0.5);
}

/* Compact target chips inside the sticky assess-toolbar — same info as the
   home target cards but at a third of the height. Two-line: ML name on top,
   tier label below in small caps. */
.target-chip {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 4px 11px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  cursor: pointer; line-height: 1.1;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.target-chip:hover { color: var(--text); border-color: var(--text-mute); }
.target-chip:active { transform: scale(0.97); }
.target-chip[aria-pressed="true"] {
  color: var(--text-on-accent);
  background: var(--accent-grad);
  background-origin: border-box; /* keep gradient out of the border — see .btn-primary */
  border-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(139, 92, 246, 0.5);
}
.target-chip-name { font-weight: 700; font-size: 0.82rem; }
.target-chip-tag {
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.85;
}

/* ─ Section headers ─ */
.section-header { margin-bottom: var(--space-5); max-width: 60ch; }
.section-header p { color: var(--text-dim); margin-top: var(--space-2); line-height: var(--leading-relaxed); }

/* ─────────────────────────────────────────────────────────────────────
   Control cards (the 8-tile grid on home + results)
   ───────────────────────────────────────────────────────────────────── */
.controls-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.control-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: left;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  /* glass top-edge highlight */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out),
              background var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
}
.control-card::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--accent-grad-soft);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
  pointer-events: none;
}
.control-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.control-card:hover::after { opacity: 0.5; }
/* Title brightens toward the brand accent on hover (Canva/Oracle hover life). */
.control-card:hover .control-title { color: var(--accent-2); }
.control-title { transition: color var(--duration-fast) var(--ease-out); }
.control-card > * { position: relative; z-index: 1; }

.control-card-top {
  display: flex; align-items: flex-start;
  gap: var(--space-3);
  justify-content: space-between;
}
.control-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-mute);
  letter-spacing: 0.04em;
}
.control-title {
  font-size: var(--text-md); font-weight: 600;
  line-height: var(--leading-snug);
}
.control-summary {
  color: var(--text-dim);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.control-meta {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-mute);
}

/* ─ Maturity pills — consistent shape, tuned colour per level ─ */
.ml-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
/* Level pills read as "achieved" badges — a touch more vibrant (Spectrum 2
   colour-through-transparency + Canva), with a faint level-tinted gradient
   and inner glow. Text/border colours are unchanged so contrast still
   passes; only the fill gets richer. */
.ml-pill[data-level="0"] { color: var(--text-mute); }
.ml-pill[data-level="1"] {
  color: var(--ml1);
  border-color: color-mix(in srgb, var(--ml1) 48%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ml1) 20%, transparent), color-mix(in srgb, var(--ml1) 11%, transparent));
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--ml1) 14%, transparent);
}
.ml-pill[data-level="2"] {
  color: var(--ml2);
  border-color: color-mix(in srgb, var(--ml2) 48%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ml2) 20%, transparent), color-mix(in srgb, var(--ml2) 11%, transparent));
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--ml2) 14%, transparent);
}
.ml-pill[data-level="3"] {
  color: var(--ml3);
  border-color: color-mix(in srgb, var(--ml3) 48%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ml3) 20%, transparent), color-mix(in srgb, var(--ml3) 11%, transparent));
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--ml3) 14%, transparent);
}

.control-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  background: var(--accent-grad-soft);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
  flex-shrink: 0;
  border: 1px solid var(--border);
  transition: transform var(--duration) var(--ease-spring),
              border-color var(--duration-fast) var(--ease-out);
}
.control-icon svg { width: 22px; height: 22px; }
/* Gentle lift on the control tile's icon when the card is hovered (Canva). */
.control-card:hover .control-icon { transform: scale(1.08); border-color: var(--border-strong); }

/* ─ Flow / how-it-works steps ─ */
.flow {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.flow li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: relative;
  transition: border-color var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}
.flow li:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.flow-num {
  width: 34px; height: 34px;
  border-radius: var(--radius);
  background: var(--accent-grad);
  color: var(--text-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  box-shadow: 0 6px 18px -6px rgba(139, 92, 246, 0.6);
}
.flow h3 { margin-bottom: var(--space-1); font-size: var(--text-md); }
.flow p {
  color: var(--text-dim);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.link {
  color: var(--text);
  border-bottom: 1px solid var(--border-strong);
  /* Vertical padding expands the clickable hit area to meet WCAG 2.2
     2.5.8 (24×24 CSS px minimum) without changing the visual baseline —
     padding extends into the line-box but the inline flow is unchanged. */
  padding: 3px 0;
  font-weight: 500;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.link:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
}
.flow .link { display: inline-block; margin-top: var(--space-3); }

/* ─ Page head (Initial Check, Audit, Roadmap, etc.) ─ */
.page-head { max-width: 70ch; }
.page-head h1 { margin: var(--space-4) 0 var(--space-3); }

/* ─────────────────────────────────────────────────────────────────────
   Assessment / audit / guide shells
   ───────────────────────────────────────────────────────────────────── */
.assessment-shell,
.guide-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 880px) {
  .assessment-shell, .guide-shell { grid-template-columns: 1fr; gap: var(--space-3); }
}

.assessment-nav, .guide-nav {
  position: sticky;
  /* Sits below the sticky header (~64px) and the sticky assess-toolbar
     (~52px) when it's present on assessment/audit pages. The guide page
     has no toolbar, but a slightly lower offset is harmless there. */
  top: 132px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  overflow: auto;
}
/* Guide has no toolbar — restore the tighter offset there */
.guide-shell .guide-nav { top: 88px; max-height: calc(100dvh - 110px); }
@media (max-width: 880px) {
  /* Hide the pill-strip nav on mobile entirely. The Prev/Next buttons in
     the pane footer are the only navigation needed — a horizontal scroller
     of 8 control pills was always more clutter than utility on a phone. */
  .assessment-nav { display: none; }
  /* Guide nav stays visible but as a clean horizontal pill strip — useful
     because the user reads the guide non-linearly. */
  .guide-nav {
    position: static;
    max-height: none;
    padding: 6px;
    display: flex; gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .assessment-nav::-webkit-scrollbar,
  .guide-nav::-webkit-scrollbar { display: none; }
  .assessment-nav .nav-item, .guide-nav .nav-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 8px 10px;
    min-height: 40px;
    gap: 8px;
  }
  .assessment-nav .nav-label, .guide-nav .nav-label {
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* In the guide nav each item has a trailing maturity pill — keep it visible
     but shrink it so the title still fits */
  .guide-nav .nav-item .ml-pill { padding: 3px 8px; font-size: 0.7rem; }
}
/* ─ Side nav (vertical list of controls) ─ */
.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.nav-item:hover { color: var(--text); background: var(--surface-hover); }
.nav-item[aria-current="true"] {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.nav-item .nav-num {
  font-family: var(--font-mono);
  color: var(--text-mute);
  font-size: var(--text-xs);
  min-width: 18px;
  letter-spacing: 0.04em;
}
.nav-item .nav-status {
  margin-left: auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-mute);
  opacity: 0.4;
  transition: background var(--duration-fast) var(--ease-out);
}
.nav-item .nav-status[data-state="done"]    { background: var(--ok);   opacity: 1; box-shadow: 0 0 8px var(--ok-soft); }
.nav-item .nav-status[data-state="partial"] { background: var(--warn); opacity: 1; }

/* ─ Pane body (Initial Check / Audit / Guide content area) ─ */
.assessment-body, .guide-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  box-shadow: var(--shadow-sm);
  min-height: 50vh;
}

/* ─ Question block (one per question, multiple per pane) ─ */
.q-block {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  /* When a Next/auto-advance scrolls a question into view, this offset
     keeps the first line below BOTH sticky bars at the top: .site-header
     (~64px) plus .assess-toolbar (~52px, sticky below the header on the
     Initial Check + Audit pages). Honoured by all scrollIntoView
     alignments. Generous buffer to absorb minor padding changes. */
  scroll-margin-top: 140px;
}
.q-block:first-of-type { padding-top: 0; }
.q-block:last-of-type  { border-bottom: 0; padding-bottom: 0; }
.q-prompt {
  font-weight: 500;
  line-height: var(--leading-relaxed);
  color: var(--text);
}
.q-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-mute);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  margin-right: var(--space-2);
  letter-spacing: 0.02em;
}
.q-options {
  display: flex; flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.q-option {
  flex: 1 1 130px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  min-height: 42px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.q-option:hover { color: var(--text); border-color: var(--text-mute); }
.q-option:active { transform: scale(0.98); }
.q-option[aria-checked="true"] {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.q-option[aria-checked="true"][data-value="yes"] {
  border-color: var(--ok); color: var(--ok);
  background: var(--ok-soft);
  box-shadow: 0 0 0 1px var(--ok) inset;
}
.q-option[aria-checked="true"][data-value="partial"] {
  border-color: var(--warn); color: var(--warn);
  background: var(--warn-soft);
  box-shadow: 0 0 0 1px var(--warn) inset;
}
.q-option[aria-checked="true"][data-value="no"] {
  border-color: var(--bad); color: var(--bad);
  background: var(--bad-soft);
  box-shadow: 0 0 0 1px var(--bad) inset;
}
.q-option[aria-checked="true"][data-value="na"] {
  border-color: var(--text-mute); color: var(--text-dim);
}

/* OSCAL ISM chips (Slice 4) — surfaced under each question for signed-in
   users, mapping the hand-coded prompt back to the official ISM control(s). */
.q-oscal-chips {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.q-oscal-label {
  font-size: 0.72rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.q-oscal-chip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-dim);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.q-oscal-chip:hover, .q-oscal-chip:focus-visible {
  color: var(--text);
  border-color: var(--text-mute);
  border-style: solid;
  background: var(--surface-2);
}
.oscal-modal { max-width: 560px; }
.oscal-modal-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}
.oscal-modal-statement {
  line-height: var(--leading-relaxed);
  color: var(--text);
  margin-top: var(--space-3);
}
.oscal-modal-cite {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* Evidence panel (Phase 3.1) — appears under each question in the Validation
   Audit for paid org members. Visually a quiet block to keep focus on the
   question + answer; the colour cue is only on the count badge. */
.q-evidence {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.q-evidence-loading { font-style: italic; }
.q-evidence-head {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.q-evidence-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.q-evidence-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
}
.q-evidence-list {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.q-evidence-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.q-evidence-meta {
  display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; min-width: 0;
}
.q-evidence-link {
  background: none; border: 0; padding: 0;
  color: var(--accent); cursor: pointer; font: inherit;
  text-align: left; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.q-evidence-link:hover { text-decoration: underline; }
.q-evidence-size { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-mute); }
.q-evidence-desc {
  width: 100%;
  margin-top: 2px;
}
.q-evidence-del {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-mute);
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 1rem; line-height: 1;
}
.q-evidence-del:hover { color: var(--danger, #c33); border-color: var(--danger, #c33); }
.q-evidence-upload-row {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
}
.q-evidence-file { font-size: 0.85rem; }
.q-evidence-desc-input {
  flex: 1 1 200px; min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
}
.q-evidence-upload { padding: 6px 14px; }
.q-evidence-status { width: 100%; }

.control-pane { display: none; }
.control-pane[data-active="true"] {
  display: block;
  animation: fade-up var(--duration) var(--ease-out) both;
}
.control-pane-head { margin-bottom: var(--space-5); }
.control-pane-head h2 { margin-bottom: var(--space-2); }
.control-pane-head p { color: var(--text-dim); line-height: var(--leading-relaxed); }

/* ─ Level section — one per maturity level in the pane ─ */
.level-section {
  margin-top: var(--space-7);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: border-color var(--duration) var(--ease-out);
}
.level-section header {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.level-section h3 { font-size: var(--text-base); }
.level-section p.level-desc {
  color: var(--text-dim);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-1);
}

.assessment-foot {
  display: flex; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.page-cta {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* ─ Per-pane footer (Prev / status / Next within a control pane) ─ */
.pane-footer {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  /* Flex with space-between distributes leftover space equally between
     adjacent items, so Prev<->Status and Status<->Next gaps are always
     identical — independent of how wide each button's content is, and
     independent of which control's title is currently in each slot.
     (Earlier grid approaches made the gap depend on either content
     widths or cell widths, both of which vary.) */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
/* When there's no Prev (first section), an empty spacer still occupies
   the left position so Status stays centred between two items. */
.pane-footer .pane-nav-spacer { display: block; flex: 0 0 0; }
.pane-nav-btn {
  display: inline-flex; align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  max-width: 260px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.pane-nav-btn:hover { background: var(--surface-hover); border-color: var(--text-mute); }
.pane-nav-btn:active { transform: translateY(1px); }
.pane-nav-btn[disabled] { opacity: 0.45; pointer-events: none; }
/* min-width:0 lets the buttons shrink when the centre pill widens, so the
   grid (1fr auto 1fr) stays inside its container instead of overflowing
   horizontally. Without this, "content size" of the buttons is treated as
   their min-width and any growth in the auto column pushes the grid out. */
.pane-nav-btn { min-width: 0; }
/* Inset focus ring so it doesn't extend outward past the button — on
   narrow viewports the right-aligned Next button sits flush against the
   pane edge, and an outset ring + pulse can reach the screen edge.
   Overrides the universal :focus-visible style (which sets an outset
   box-shadow ring). */
.pane-nav-btn:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--accent, currentColor);
  outline-offset: -2px;
}
.pane-nav-prev { justify-self: start; }
.pane-nav-next { justify-self: end; }
.pane-nav-next .pane-nav-label { text-align: right; align-items: flex-end; }
.pane-nav-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--text-md); line-height: 1;
  flex-shrink: 0;
}
.pane-nav-label { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pane-nav-hint {
  font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase;
  font-weight: 600;
  color: var(--text-mute);
}
.pane-nav-title {
  font-size: var(--text-sm); font-weight: 600; color: var(--text);
  /* max-width:100% (was 180px) so the title always fits inside its
     button cell — when grid cells are narrow, the title ellipsis-
     truncates instead of pushing the button to overflow into a
     neighbouring cell. */
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pane-status {
  justify-self: center;
  font-size: var(--text-sm);
  color: var(--text-dim);
  padding: 6px var(--space-4);
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  white-space: nowrap;
  text-align: center;
  font-weight: 500;
  /* Same belt-and-braces: never push past the centre cell. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--duration) var(--ease-out),
              background var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out);
}
.pane-status[data-state="partial"] {
  color: var(--warn);
  border-color: var(--warn-border);
  background: var(--warn-soft);
}
.pane-status[data-state="done"] {
  color: var(--ok);
  border-color: var(--ok-border);
  background: var(--ok-soft);
}

/* Highlight Next when this control just became fully answered */
.pane-nav-btn.is-ready {
  background: var(--accent-grad);
  background-origin: border-box; /* keep gradient out of the border — see .btn-primary */
  border-color: transparent;
  color: white;
  animation: pulse-ready 1.6s ease-out 2;
}
.pane-nav-btn.is-ready .pane-nav-arrow { background: rgba(255, 255, 255, 0.2); color: white; }
.pane-nav-btn.is-ready .pane-nav-hint { color: rgba(255, 255, 255, 0.85); }
.pane-nav-btn.is-ready .pane-nav-title { color: white; }
@keyframes pulse-ready {
  /* Tightened spread (was 14px) so the pulse stays inside the pane padding
     even on narrow viewports — at 14px it could reach the screen edge. */
  0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

@media (max-width: 720px) {
  /* Stack the row vertically on phones — status on top, then Prev, then
     Next. flex-direction:column works equally for the new flexbox parent. */
  .pane-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .pane-footer .pane-status { order: -1; align-self: center; }
  .pane-nav-btn { max-width: none; width: 100%; }
  .pane-nav-next .pane-nav-label { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .pane-nav-btn.is-ready { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Results summary — big maturity headline + side stats
   ───────────────────────────────────────────────────────────────────── */
.results-summary {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1.35fr 1fr;
  align-items: stretch;
}
@media (max-width: 880px) { .results-summary { grid-template-columns: 1fr; } }
.summary-card {
  position: relative;
  /* Apple "Liquid Glass" surface — layered translucency + depth. The dual
     brand glows sit over the base surface; a 1px top inset highlight reads
     as the lit glass edge, and a soft cast shadow lifts the card. */
  background:
    radial-gradient(ellipse at 0% 0%, rgba(139, 92, 246, 0.10), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(34, 211, 238, 0.10), transparent 60%),
    var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  display: flex; flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
:root[data-theme="light"] .summary-card,
:root:not([data-theme]) .summary-card { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.summary-headline {
  font-size: clamp(var(--text-4xl), 4vw + 1rem, var(--text-6xl));
  font-weight: 800;
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* Subtle lift off the glow so the number stays crisp + reads as the focal
     point (Corel/Oracle primary-metric hierarchy). */
  filter: drop-shadow(0 2px 10px rgba(124, 58, 237, 0.28));
  transform-origin: left center;
}
/* Spring scale-in when the score is revealed (JS toggles .is-revealed). */
.summary-headline.is-revealing { transform: scale(0.94); opacity: 0.6; }
.summary-headline.is-revealed {
  transform: scale(1); opacity: 1;
  transition: transform var(--duration-slow) var(--ease-spring), opacity var(--duration) var(--ease-out);
}
.summary-explain {
  color: var(--text-dim);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.summary-explain {
  color: var(--text-dim);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.level-bar {
  display: flex; gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
}
.level-bar .seg {
  flex: 1;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
  /* Animate glow + a brief pop so the sequential reveal cascades. */
  transition: background var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-spring);
}
.level-bar .seg.just-lit { transform: scaleY(1.35); }
.level-bar .seg.lit-1 {
  background: linear-gradient(90deg, var(--ml1), color-mix(in srgb, var(--ml1) 60%, transparent));
  border-color: transparent;
  box-shadow: 0 0 12px color-mix(in srgb, var(--ml1) 40%, transparent);
}
.level-bar .seg.lit-2 {
  background: linear-gradient(90deg, var(--ml2), color-mix(in srgb, var(--ml2) 60%, transparent));
  border-color: transparent;
  box-shadow: 0 0 12px color-mix(in srgb, var(--ml2) 40%, transparent);
}
.level-bar .seg.lit-3 {
  background: linear-gradient(90deg, var(--ml3), color-mix(in srgb, var(--ml3) 60%, transparent));
  border-color: transparent;
  box-shadow: 0 0 12px color-mix(in srgb, var(--ml3) 40%, transparent);
}

.summary-side {
  display: grid; gap: var(--space-3);
  grid-template-rows: auto auto auto;
}
.summary-side .stat-card { padding: var(--space-4) var(--space-4); }

/* ---------- guide body ---------- */
.guide-body h2 { margin-bottom: 6px; }
.guide-body .control-pane-head p { font-size: 1rem; }

.kb-list {
  margin: var(--space-3) 0 0;
  padding: 0; list-style: none;
  display: grid; gap: var(--space-2);
}
.kb-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  color: var(--text-dim);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.kb-list li:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.kb-list li::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-grad);
  margin-top: 9px;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
}

.callout {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-dim);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.callout strong { color: var(--text); font-weight: 600; }
.callout.callout-warn {
  border-color: var(--warn-border);
  background: var(--warn-soft);
  color: var(--text);
}
.callout.callout-warn strong { color: var(--warn); }
.callout.callout-ok {
  border-color: var(--ok-border);
  background: var(--ok-soft);
  color: var(--text);
}
.callout.callout-ok strong { color: var(--ok); }

.evidence-list {
  margin-top: var(--space-3);
  padding: 0; list-style: none;
  display: grid; gap: var(--space-2);
}
.evidence-list li {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  display: flex; align-items: flex-start; gap: var(--space-2);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.evidence-list li:hover { border-color: var(--border-strong); }
.evidence-list li::before {
  content: "📎";
  font-family: var(--font-sans);
  font-size: 0.85em;
  flex: 0 0 auto;
  opacity: 0.65;
}

/* ---------- per-control header tint ---------- */
.control-icon[data-c="1"] { background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(167, 139, 250, 0.18)); }
.control-icon[data-c="2"] { background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(34, 211, 238, 0.18)); }
.control-icon[data-c="3"] { background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(6, 182, 212, 0.18)); }
.control-icon[data-c="4"] { background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(6, 182, 212, 0.18)); }
.control-icon[data-c="5"] { background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(244, 114, 182, 0.18)); }
.control-icon[data-c="6"] { background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(16, 185, 129, 0.18)); }
.control-icon[data-c="7"] { background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(244, 114, 182, 0.18)); }
.control-icon[data-c="8"] { background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(34, 211, 238, 0.18)); }

/* ---------- legal / disclaimer ---------- */
.legal-doc {
  max-width: 72ch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 40px);
  box-shadow: var(--shadow-sm);
  color: var(--text-dim);
  font-size: 0.97rem;
  line-height: 1.7;
}
.legal-doc h2 {
  color: var(--text);
  font-size: 1.15rem;
  margin: 26px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  letter-spacing: -0.01em;
}
.legal-doc h2:first-of-type { border-top: 0; padding-top: 6px; margin-top: 6px; }
.legal-doc p { margin: 0 0 12px; }
.legal-doc strong { color: var(--text); font-weight: 600; }
.legal-doc ul, .legal-doc ol { margin: 6px 0 16px; padding-left: 22px; }
.legal-doc li { margin: 6px 0; }
.legal-doc li strong { color: var(--text); }
.legal-doc abbr { text-decoration: none; border-bottom: 1px dotted var(--text-mute); cursor: help; }
.legal-doc .mono { font-family: var(--font-mono); font-size: 0.92em; color: var(--text); }
.legal-doc a { color: var(--text); border-bottom: 1px solid var(--border-strong); }

/* ---------- helpers ---------- */
.muted { color: var(--text-mute); }
.small { font-size: 0.85rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- radar polish ---------- */
#maturity-radar .grid { fill: none; stroke: var(--border-strong); stroke-width: 1; }
#maturity-radar .axis { stroke: var(--border-strong); stroke-width: 1; }
#maturity-radar .label { fill: var(--text-dim); font-size: 11px; font-family: var(--font-sans); }
#maturity-radar .target { fill: rgba(124, 58, 237, 0.08); stroke: rgba(124, 58, 237, 0.5); stroke-dasharray: 4 4; }
#maturity-radar .current { fill: url(#radar-fill); stroke: url(#radar-stroke); stroke-width: 2; stroke-linejoin: round; }
#maturity-radar .pt { fill: var(--bg); stroke: url(#radar-stroke); stroke-width: 2; }

/* Draw-on entrance (Apple/Oracle data-viz + Canva). renderRadar() rebuilds
   the SVG innerHTML each render, so these auto-play on the fresh nodes — the
   score polygon springs out from centre and the vertex dots pop in, lightly
   staggered. transform-box:fill-box scopes transform-origin to each element's
   own box. Globally neutralised under prefers-reduced-motion. */
@keyframes radar-draw { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
@keyframes radar-pop  { from { opacity: 0; transform: scale(0);    } to { opacity: 1; transform: scale(1); } }
#maturity-radar .current {
  transform-box: fill-box; transform-origin: center;
  animation: radar-draw var(--duration-slow) var(--ease-spring) both;
}
#maturity-radar .pt {
  transform-box: fill-box; transform-origin: center;
  animation: radar-pop var(--duration) var(--ease-spring) both;
}
#maturity-radar .pt:nth-of-type(1) { animation-delay: 0.18s; }
#maturity-radar .pt:nth-of-type(2) { animation-delay: 0.23s; }
#maturity-radar .pt:nth-of-type(3) { animation-delay: 0.28s; }
#maturity-radar .pt:nth-of-type(4) { animation-delay: 0.33s; }
#maturity-radar .pt:nth-of-type(5) { animation-delay: 0.38s; }
#maturity-radar .pt:nth-of-type(6) { animation-delay: 0.43s; }
#maturity-radar .pt:nth-of-type(7) { animation-delay: 0.48s; }
#maturity-radar .pt:nth-of-type(8) { animation-delay: 0.53s; }

/* ---------- hero secondary action ---------- */
.hero-secondary {
  display: inline-flex; align-items: center;
  color: var(--text-dim);
  border-bottom-color: transparent;
  padding-bottom: 2px;
  font-size: 0.95rem;
  font-weight: 500;
}
.hero-secondary:hover { color: var(--text); border-bottom-color: var(--border-strong); }

/* ─────────────────────────────────────────────────────────────────────
   In-assessment toolbar — sticky target picker + progress strip
   ───────────────────────────────────────────────────────────────────── */
.assess-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 10;
  margin: -6px 0 var(--space-5);
  padding: var(--space-3) var(--space-5);
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: var(--shadow-sm);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4);
}
.assess-target {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
}
.assess-target-label {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 600;
}
.assess-target .chip,
.assess-target .target-chip { padding: 4px 11px; font-size: 0.82rem; }
.assess-progress {
  flex: 1 1 240px; min-width: 200px;
  display: flex; flex-direction: column; gap: 6px;
}
.assess-progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.82rem; color: var(--text-dim);
}
.assess-progress-pct { font-weight: 600; color: var(--text); }
.assess-progress[data-done="true"] .assess-progress-pct { color: var(--ok); }
.assess-progress-bar {
  position: relative;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.assess-progress-fill {
  height: 100%; width: 0%;
  background: var(--accent-grad);
  border-radius: var(--radius-full);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.45);
  transition: width var(--duration-slow) var(--ease-out);
}
.assess-progress[data-done="true"] .assess-progress-fill {
  background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 60%, transparent));
}

/* ---------- nudge card on results page (free→paid upsell) ---------- */
.upgrade-nudge {
  margin-top: 16px;
  border-color: color-mix(in srgb, var(--accent-2) 35%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-1) 8%, transparent), color-mix(in srgb, var(--accent-2) 8%, transparent)),
    var(--surface);
}
.upgrade-nudge > div:first-child { flex: 1 1 320px; min-width: 0; }
.upgrade-nudge .btn { flex: 0 0 auto; }

/* ─────────────────────────────────────────────────────────────────────
   Post-assessment "Your next step" hero card on Home
   ───────────────────────────────────────────────────────────────────── */
.next-step {
  position: relative;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(ellipse at 85% -10%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(ellipse at 0% 110%, rgba(34, 211, 238, 0.4), transparent 55%),
    linear-gradient(135deg, #6d28d9 0%, #0891b2 100%);
  color: #fff;
  display: flex; align-items: center; gap: var(--space-6);
  flex-wrap: wrap;
  box-shadow: 0 24px 60px -16px rgba(124, 58, 237, 0.45);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.next-step::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 50%);
  pointer-events: none;
}
.next-step > * { position: relative; z-index: 1; }
.next-step-body { flex: 1 1 360px; min-width: 0; }
.next-step h2 {
  color: #fff;
  font-size: clamp(var(--text-2xl), 1.6vw + 1rem, var(--text-4xl));
  letter-spacing: var(--tracking-tighter);
  margin: var(--space-2) 0 var(--space-3);
}
.next-step h2 strong { color: #fff; font-weight: 800; }
.next-step .eyebrow {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}
.next-step .eyebrow::before { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.7); }
.next-step .lede {
  color: rgba(255, 255, 255, 0.92);
  max-width: 60ch;
  font-size: var(--text-base);
}
.next-step-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.next-step-cta .btn-primary {
  background: #fff;
  color: var(--accent-1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 12px 28px -10px rgba(0, 0, 0, 0.5);
}
.next-step-cta .btn-primary:hover { background: #fff; filter: brightness(0.97); }
.next-step-cta .btn-ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
.next-step-cta .btn-ghost:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); }

/* ─────────────────────────────────────────────────────────────────────
   ROADMAP page — Gap analysis presentation
   ───────────────────────────────────────────────────────────────────── */
.roadmap-summary {
  position: relative;
  padding: var(--space-6) clamp(var(--space-5), 3vw, var(--space-7));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(139, 92, 246, 0.08), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(34, 211, 238, 0.08), transparent 50%),
    var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: clamp(var(--space-4), 3vw, var(--space-7));
  flex-wrap: wrap;
  overflow: hidden;
}
.roadmap-current, .roadmap-target {
  display: flex; flex-direction: column; gap: 4px;
  flex: 0 0 auto;
}
.roadmap-summary-label {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 600;
}
.roadmap-summary-value {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 2.2rem; line-height: 1;
}
.roadmap-summary-value[data-ml="0"] { color: var(--text-dim); }
.roadmap-summary-value[data-ml="1"] { color: var(--ml1); }
.roadmap-summary-value[data-ml="2"] { color: var(--ml2); }
.roadmap-summary-value[data-ml="3"] { color: var(--ml3); }
.roadmap-arrow {
  font-size: 1.6rem; color: var(--text-mute);
  margin: 0 6px;
}
.roadmap-summary-stats {
  margin-left: auto;
  display: flex; gap: 18px; flex-wrap: wrap;
}
.roadmap-summary-stat {
  display: flex; flex-direction: column; gap: 2px;
  text-align: right;
}
.roadmap-summary-stat strong {
  font-size: 1.6rem; line-height: 1; color: var(--text);
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.roadmap-summary-stat span {
  font-size: 0.78rem; color: var(--text-dim);
}

.roadmap-list {
  display: grid; gap: 18px;
}
.roadmap-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex; flex-direction: column;
  gap: var(--space-5);
  transition: border-color var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
  overflow: hidden;
}
.roadmap-card:hover { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.07); border-color: var(--border-strong); }
.roadmap-card-head h2 { transition: color var(--duration-fast) var(--ease-out); }
.roadmap-card:hover .roadmap-card-head h2 { color: var(--accent-2); }
.roadmap-card[data-gap="1"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--warn), transparent);
}
.roadmap-card[data-gap="2"]::before,
.roadmap-card[data-gap="3"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--bad), transparent);
}
.roadmap-card[data-gap="2"], .roadmap-card[data-gap="3"] {
  border-color: color-mix(in srgb, var(--bad) 25%, var(--border));
}
.roadmap-card-head {
  display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
}
.roadmap-card-head > div:first-child { flex: 1 1 280px; min-width: 0; }
.roadmap-card-head h2 { font-size: 1.25rem; margin: 4px 0 6px; }
.roadmap-card-rank {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-2); font-weight: 700;
}
.roadmap-card-meta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
}
.roadmap-arrow-mini { color: var(--text-mute); font-size: 0.9rem; }

.roadmap-level {
  padding-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.roadmap-level header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.roadmap-level h3 { font-size: 1.05rem; }
.roadmap-level-count {
  font-size: 0.8rem; color: var(--text-dim);
}
.roadmap-level-desc { color: var(--text-dim); font-size: 0.92rem; margin: 6px 0 12px; }

.roadmap-actions {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px;
}
.roadmap-action {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
}
.roadmap-action-check {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  margin-top: 2px;
  position: relative;
  padding: 0;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.roadmap-action-check:hover { border-color: var(--accent-2, var(--accent)); }
.roadmap-action-check:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.roadmap-action-check.is-checked {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
}
.roadmap-action-check.is-checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.roadmap-action.is-done .roadmap-action-text {
  color: var(--text-mute);
  text-decoration: line-through;
}
.roadmap-action-text {
  color: var(--text); font-size: 0.93rem; line-height: 1.5;
}
.roadmap-level-evidence {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  margin-left: var(--space-2);
}

/* Maturity trend block (Phase 3.2) — appears on the Initial Check results
   page once an org has at least two saved snapshots. Quiet table styling
   to read as a "what's happened over time" view, not a primary action. */
.trend-section {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.trend-section h2 { font-size: 1.2rem; margin-bottom: var(--space-3); }
.trend-summary {
  margin-bottom: var(--space-3);
}
.trend-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.trend-table th, .trend-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.trend-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 600;
}
.trend-table tbody tr:last-child td { border-bottom: 0; }
.trend-table td[data-ml="0"] { color: var(--text-dim); }
.trend-table td[data-ml="1"] { color: var(--ml1, var(--accent)); font-weight: 600; }
.trend-table td[data-ml="2"] { color: var(--ml2, var(--accent)); font-weight: 600; }
.trend-table td[data-ml="3"] { color: var(--ml3, var(--accent)); font-weight: 600; }

.roadmap-card-cta {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.btn-lock { display: inline-block; margin-right: 4px; }

.pro-pill {
  display: inline-block;
  padding: 1px 7px; border-radius: 5px;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em;
  background: var(--accent-grad); color: #fff;
  vertical-align: middle;
}

/* ---------- PRICING ---------- */
.pricing-section { margin-top: 18px; }

/* Auditing-organisation plan — third column in the pricing comparison. */
.pricing-col.pricing-firm { border-left: 3px solid var(--accent-1); }
.pricing-col.pricing-firm .pricing-tier { color: var(--accent-1); }
.pricing-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pricing-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex; flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  transition: border-color var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}
.pricing-col:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.07); border-color: var(--border-strong); }
.pricing-col.pricing-paid {
  border-color: color-mix(in srgb, var(--accent-2) 36%, var(--border));
  background:
    radial-gradient(ellipse at 100% 0%, rgba(139, 92, 246, 0.08), transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(34, 211, 238, 0.08), transparent 50%),
    var(--surface);
}
.pricing-col-head {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
  margin-bottom: 6px; position: relative;
}
.pricing-tier {
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; color: var(--text-dim);
}
.pricing-paid .pricing-tier { color: var(--accent-2); }
.pricing-price {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.02em;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pricing-free .pricing-price { background: none; -webkit-text-fill-color: var(--text); color: var(--text); }
.pricing-badge {
  position: absolute; top: -10px; right: 0;
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  background: var(--accent-grad); color: #fff;
}
.pricing-row {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  color: var(--text-mute);
  font-size: 0.9rem;
}
.pricing-row:last-child { border-bottom: 0; }
.pricing-row.is-on { color: var(--text); }
.pricing-check {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 0.86rem; font-weight: 700;
  color: var(--text-mute);
  background: var(--surface-strong);
}
.pricing-row.is-on .pricing-check {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.pricing-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  line-height: 1.05;
}
.pricing-price-amount { display: inline-block; }
.pricing-price-suffix {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0;
  color: var(--text-mute);
  -webkit-text-fill-color: var(--text-mute);
  background: none;
}
.pricing-tagline {
  margin-top: 4px;
  font-size: 0.95rem; font-weight: 600;
  color: var(--text);
}
.pricing-paid .pricing-tagline {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- HOME — pricing teaser cards ---------- */
.home-pricing {
  margin-top: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--accent-1) 12%, transparent), transparent 55%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 55%),
    var(--surface);
  border: 1px solid var(--border-strong);
}
.home-pricing-head { text-align: center; margin-bottom: var(--space-5); }
.home-pricing-head h2 {
  font-size: clamp(1.5rem, 2.4vw + 0.6rem, 2rem);
  margin: 6px 0 10px;
}
.home-pricing-head .lede { max-width: 640px; margin: 0 auto; }
.home-pricing-cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}
.home-plan-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface-strong);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
}
.home-plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.home-plan-card-paid {
  border-color: color-mix(in srgb, var(--accent-2) 50%, var(--border));
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent-1) 14%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 55%),
    var(--surface-strong);
}
.home-plan-badge {
  position: absolute; top: -10px; right: 16px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  background: var(--accent-grad); color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}
.home-plan-tier {
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--text-dim);
}
.home-plan-card-paid .home-plan-tier { color: var(--accent-2); }
.home-plan-price {
  font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.home-plan-card-paid .home-plan-price {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-plan-suffix {
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-mute);
  -webkit-text-fill-color: var(--text-mute);
  background: none;
}
.home-plan-tagline {
  margin: 0; font-weight: 600; color: var(--text);
  font-size: 0.98rem;
}
.home-plan-list {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.home-plan-list li {
  position: relative; padding-left: 22px;
  font-size: 0.92rem; color: var(--text-mute); line-height: 1.5;
}
.home-plan-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  font-size: 0.7rem; font-weight: 700;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.home-plan-list li strong { color: var(--text); font-weight: 700; }
.home-plan-cta { margin-top: 8px; align-self: stretch; text-align: center; }

/* ---------- Flow-step Free/Paid tags ---------- */
.flow-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  vertical-align: middle; text-transform: uppercase;
}
.flow-tag-free {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}
.flow-tag-paid {
  color: #fff;
  background: var(--accent-grad);
  background-origin: border-box; /* keep gradient out of the border — see .btn-primary */
  border: 1px solid transparent;
}

/* ---------- per-control GUIDE signpost ---------- */
.pane-signpost {
  margin-top: 14px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: center;
  gap: 14px;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
}
.pane-signpost.is-met {
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}
/* Pre-assessment variant: a prompt + CTA rather than a now→target readout. */
.pane-signpost-unknown {
  grid-template-columns: 1fr auto;
  gap: 16px;
}
.pane-signpost-unknown .pane-signpost-label {
  font-size: 0.92rem; text-transform: none; letter-spacing: 0;
  color: var(--text); font-weight: 600;
}
.pane-signpost-now, .pane-signpost-target {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.pane-signpost-label {
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 600;
}
.pane-signpost-arrow {
  font-size: 1.3rem; color: var(--text-mute);
}
.pane-signpost-status {
  font-size: 0.92rem;
  color: var(--text-dim);
  font-weight: 500;
  text-align: right;
}
.pane-signpost.is-met .pane-signpost-status { color: var(--ok); font-weight: 600; }

.level-tag {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-mute);
}
.level-tag-done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.level-tag-next { color: #fff; background: var(--accent-grad); background-origin: border-box; border-color: transparent; }
.level-tag-stretch { color: var(--ml3); border-color: color-mix(in srgb, var(--ml3) 38%, transparent); background: color-mix(in srgb, var(--ml3) 8%, transparent); }
.level-tag-future { color: var(--text-mute); }
.level-section-next { border-color: color-mix(in srgb, var(--accent-1) 35%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-1) 22%, transparent) inset; }

/* ---------- stretch-target hint at the bottom of each control pane ---------- */
.pane-stretch-hint {
  margin-top: 18px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  color: var(--text-dim);
  font-size: 0.86rem;
  line-height: 1.5;
}
.pane-stretch-hint strong { color: var(--text); font-weight: 600; }
.pane-stretch-hint-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 8px;
  background: var(--accent-grad-soft);
  color: var(--accent-2);
  font-weight: 700;
}

/* ---------- assessment intro panel ---------- */
.assess-intro {
  margin: 6px 0 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 6px;
}
.assess-intro h2 { font-size: 1.15rem; margin: 6px 0 8px; }
.assess-intro-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
}
.assess-intro-list li {
  position: relative;
  padding-left: 22px;
  color: var(--text-dim);
  font-size: 0.93rem;
  line-height: 1.55;
}
.assess-intro-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-grad);
}
.assess-intro-list em { color: var(--text); font-style: normal; font-weight: 600; }
.assess-intro-list strong { color: var(--text); }

/* ---------- invitation modal meta block ---------- */
.invite-meta {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  display: grid; gap: 6px;
}
.invite-meta-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 8px;
  font-size: 0.88rem; align-items: baseline;
}
.invite-meta-key {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 600;
}
.invite-meta-val {
  color: var(--text); font-weight: 500;
  overflow-wrap: anywhere;
}

/* ====================================================================
   Mobile / touch refinements
   ==================================================================== */

/* Tablet and below — give the site-nav and header more breathing room. */
@media (max-width: 880px) {
  main { padding: clamp(20px, 4vw, 40px) max(16px, 5vw) 64px; gap: clamp(28px, 4vw, 56px); }
  h1 { font-size: clamp(1.7rem, 5vw + 0.6rem, 2.6rem); }
  .hero h1 { margin-top: 14px; }
  .hero-cta { margin: 22px 0 18px; }
  /* Cap the radar so it doesn't push the CTA below the fold */
  .hero-visual { max-width: 320px; margin: 0 auto; }
  #maturity-radar { max-width: 280px; }
  /* Side-by-side summary on tablets is already 1-col here — tighten gap */
  .results-summary { gap: 12px; }
}

/* Phone — single-row header. Nav moves into a slide-out drawer on the
   right; brand left, theme + account + hamburger right. */
@media (max-width: 880px) {
  .site-header {
    gap: var(--space-2);
    padding: 0 max(var(--space-3), env(safe-area-inset-right)) 0 max(var(--space-3), env(safe-area-inset-left));
    /* Drop the glass blur on mobile. backdrop-filter creates a containing
       block for position:fixed descendants, which trapped the drawer inside
       the 52px-tall header instead of letting it span the viewport — links
       overflowed and the drawer rendered "empty". */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Compensate the lost blur with a slightly more opaque background so
       content still reads cleanly when it scrolls beneath the header. */
    background: color-mix(in srgb, var(--bg) 94%, transparent);
  }
  .brand { font-size: 0.98rem; gap: 8px; }
  .brand-mark { width: 24px; height: 24px; }
  .icon-btn.nav-toggle { display: inline-flex; }
  /* Drawer sits beneath the header so the X close-button stays visible. */
  .site-nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    margin: 0;
    width: min(82vw, 340px);
    max-width: 100vw;
    z-index: 56;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    padding: var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
    background: var(--bg-elev);
    border-left: 1px solid var(--border-strong);
    box-shadow: var(--shadow-xl);
    overflow-y: auto;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform var(--duration-slow) var(--ease-out),
                visibility 0s linear var(--duration-slow);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .site-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--duration-slow) var(--ease-out);
  }
  .site-nav a {
    width: 100%;
    padding: var(--space-4) var(--space-4);
    font-size: var(--text-md);
    font-weight: 600;
    border-radius: var(--radius);
    color: var(--text-dim);
    min-height: 52px;
  }
  .site-nav a:hover { background: var(--surface-2); color: var(--text); }
  .site-nav a[aria-current="page"] {
    color: var(--text);
    background: var(--accent-grad-soft);
  }
  .site-nav a[aria-current="page"]::after {
    /* In the drawer, use a leading vertical accent bar instead of underline */
    content: "";
    position: absolute;
    left: var(--space-2); top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 22px;
    border-radius: 3px;
    background: var(--accent-grad);
  }
  .header-actions { gap: var(--space-1); min-width: 0; }
  main { padding: clamp(16px, 3vw, 28px) max(14px, 4vw) 56px; gap: 28px; }
  /* Stack hero CTAs full-width on phones so they're easy to tap */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn { width: 100%; }
  /* The page CTA row sticks to the bottom on phones too — primary action
     remains at the bottom (thumb-reachable, matches the DOM order which
     puts the primary last). */
  .page-cta { justify-content: stretch; flex-direction: column; align-items: stretch; }
  .page-cta .btn { width: 100%; }
  /* Assessment foot — Reset above, See-results/Score-audit below */
  .assessment-foot { flex-direction: column; align-items: stretch; }
  .assessment-foot .btn { width: 100%; }
  /* Stat cards: one per row on phones for full readability */
  .overview-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat-card { padding: 16px; }
  /* Controls grid stays minmax(260px), which already collapses to 1col under 320px */
  .controls-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  /* Footer — center, smaller, more padding for thumb comfort */
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px max(14px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    font-size: 0.82rem;
  }
  /* Q-options: two-per-row on phones (Yes/Partial in one row, No/N/A in second) */
  .q-options { gap: 6px; }
  .q-option {
    flex: 1 1 calc(50% - 6px);
    padding: 12px 10px;
    min-height: 44px;
    font-size: 0.92rem;
    justify-content: center;
  }
  /* Bigger tap target for the maturity-target chips on home */
  .chip { padding: 8px 14px; font-size: 0.9rem; min-height: 36px; }
  /* Tighter assessment body — every pixel counts on a phone */
  .assessment-body, .guide-body { padding: 18px 16px; border-radius: 16px; }
  .level-section { padding: 14px 14px; border-radius: 12px; }
  .level-section header { flex-wrap: wrap; gap: 6px; }
  /* Make h2 sit clearly above pill on small screens */
  .control-pane-head h2 { font-size: 1.4rem; }
  /* Eyebrow chip and lede balanced */
  .eyebrow { font-size: 0.72rem; padding: 5px 10px; }
  .lede { font-size: 0.98rem; }
  /* Make the per-control pane footer match its parent body padding */
  .pane-footer { margin-top: 22px; padding-top: 18px; }
  /* Smaller radar so the hero text still leads on a phone */
  .hero-visual { max-width: 260px; }
  #maturity-radar { max-width: 240px; }
  /* Make stat headlines a touch smaller so they don't wrap funny */
  .stat-value { font-size: 1.5rem; }
  .summary-headline { font-size: 2.2rem; }
  .summary-card { padding: 20px; border-radius: 16px; }
}

/* Tiny phones (≤ 360px) — tighten further */
@media (max-width: 380px) {
  main { padding: 14px 12px 48px; gap: 22px; }
  .site-header { padding: 8px 10px; }
  .brand-text { font-size: 0.92rem; }
  .icon-btn { width: 32px; height: 32px; }
  .q-option { font-size: 0.88rem; padding: 10px 8px; }
  .stat-card { padding: 14px; }
}

/* Reduce the aurora blur on mobile — 120px is GPU-heavy on phones, and the
   effect is largely invisible at small sizes anyway. */
@media (max-width: 720px) {
  #bg-aurora::before, #bg-aurora::after {
    filter: blur(60px);
    width: 100vmax;
    height: 100vmax;
    opacity: 0.4;
  }
}

/* Touch-first input affordances — finer pointer (mouse) keeps the denser
   desktop layout; coarse pointer (touch) bumps every tap target. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-mini { min-height: 36px; padding: 8px 12px; font-size: 0.82rem; }
  .icon-btn { width: 40px; height: 40px; }
  .chip { min-height: 36px; }
  .nav-item { min-height: 40px; }
  .q-option { min-height: 44px; }
  /* No hover-translate on touch — it leaves cards looking "stuck" */
  .control-card:hover { transform: none; }
  .btn-primary:hover { transform: none; }
}

/* Landscape phones — keep the header from eating too much vertical space */
@media (max-width: 900px) and (orientation: landscape) {
  .site-header { padding-top: var(--space-2); padding-bottom: var(--space-2); }
}

/* ─────────────────────────────────────────────────────────────────────
   Reduced motion — respect user preference everywhere
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .control-card:hover, .pricing-col:hover, .flow li:hover,
  .stat-card:hover, .roadmap-card:hover { transform: none; }
  .control-card:hover .control-icon { transform: none; }
  .summary-headline.is-revealing { transform: none; opacity: 1; }
  .level-bar .seg.just-lit { transform: none; }
  #maturity-radar .current, #maturity-radar .pt { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile polish (second pass) — make every page feel native on a phone
   ───────────────────────────────────────────────────────────────────── */

/* The header is shorter on small screens; pull --header-h down so every
   sticky element below the header (toolbar, side nav) lines up with the
   actual header bottom — no awkward gap, no overlap. */
@media (max-width: 720px) {
  :root { --header-h: 52px; }
  .site-header { height: var(--header-h); }
}

/* Touch (no hover) — kill every transform-on-hover so cards don't end up
   visually "stuck" after the user taps them. Background hover effects are
   harmless on touch so we keep those. */
@media (hover: none) {
  .control-card:hover,
  .stat-card:hover,
  .flow li:hover,
  .pricing-col:hover,
  .roadmap-card:hover,
  .btn-primary:hover { transform: none; }
}

/* Pill-strip nav on mobile gets a soft right-edge fade so users see
   there's more to scroll to. The top-level site-nav uses the drawer
   pattern instead, so no mask needed there. */
@media (max-width: 880px) {
  .assessment-nav, .guide-nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
  }
}

/* OTP boxes — guarantee they fit, even on a 320-wide phone where the
   modal interior is ~256px. */
@media (max-width: 380px) {
  .otp-input { gap: 6px; }
  .otp-box { font-size: 1.35rem; height: 52px; }
}
@media (max-width: 340px) {
  .otp-input { gap: 4px; }
  .otp-box { font-size: 1.1rem; height: 48px; border-radius: 10px; }
}

/* Bigger modal close button on touch — 32px is below Apple's 44px guidance.
   Move it down a touch too so it doesn't crowd the heading. */
@media (max-width: 720px) {
  .modal-close { width: 40px; height: 40px; top: 10px; right: 10px; }
}

/* Bottom-sheet entrance — a small upward slide reads as "sheet appeared"
   on mobile rather than the desktop centred-fade. */
@media (max-width: 720px) {
  .modal-card {
    animation: sheet-up var(--duration-slow) var(--ease-out) both;
  }
  @keyframes sheet-up {
    from { transform: translateY(20px); opacity: 0.4; }
    to   { transform: translateY(0); opacity: 1; }
  }
}

/* Body scroll lock — added by JS when any modal opens, removed on close.
   Without this, tapping outside a docked sheet scrolls the page beneath
   in surprising ways. */
body.modal-open {
  overflow: hidden;
  /* Keep the visual position stable while overflow is locked */
  position: relative;
}

/* Landscape phones — keep modals usable when the keyboard is up. The
   default centred dock would leave the form half-off-screen, so let the
   sheet anchor to the top and the user scroll its content. */
@media (max-height: 480px) and (orientation: landscape) {
  .modal-backdrop {
    align-items: flex-start;
    padding: var(--space-3);
  }
  .modal-card {
    max-height: calc(100dvh - 24px);
    padding: var(--space-5);
  }
  .modal-card h2 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
  .modal-card p  { font-size: var(--text-xs); margin-bottom: var(--space-3); }
}

/* Next-step card — tighten typography on phones so it dominates the fold
   without crowding the page. */
@media (max-width: 720px) {
  .next-step { padding: 22px 18px; border-radius: var(--radius-xl); gap: 14px; }
  .next-step .eyebrow { font-size: 0.68rem; padding: 4px 10px; }
  .next-step h2 { font-size: clamp(1.3rem, 4vw + 0.5rem, 1.7rem); margin: 6px 0 8px; }
  .next-step .lede { font-size: var(--text-sm); }
}

/* Roadmap mobile — tighter summary, smaller stats so they don't crowd */
@media (max-width: 720px) {
  .roadmap-summary { padding: 16px; gap: 14px; }
  .roadmap-summary-value { font-size: 1.8rem; }
  .roadmap-summary-stat strong { font-size: 1.3rem; }
  .roadmap-card { padding: 20px 16px; border-radius: var(--radius-lg); }
  .roadmap-card h2 { font-size: var(--text-lg); }
  .roadmap-action { padding: 10px 12px; gap: 10px; }
  .roadmap-action-text { font-size: var(--text-sm); line-height: 1.5; }
}

/* Pricing mobile — refine column spacing, keep recommended badge visible */
@media (max-width: 720px) {
  .pricing-col { padding: 18px; border-radius: var(--radius-lg); }
  .pricing-price { font-size: 1.65rem; }
  .pricing-badge { right: 14px; top: -8px; padding: 2px 10px; font-size: 0.65rem; }
  .pricing-row { padding: 7px 0; font-size: var(--text-sm); }
}

/* Results summary — keep the big number readable but proportional */
@media (max-width: 720px) {
  .summary-card { padding: 22px 18px; border-radius: var(--radius-lg); }
  .summary-headline { font-size: clamp(2.1rem, 9vw, 3rem); }
  .summary-explain { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
}

/* Per-control guide signpost on phones — values closer together */
@media (max-width: 720px) {
  .pane-signpost { padding: 12px 14px; }
  .pane-signpost-status { font-size: var(--text-sm); }
}

/* Assessment intro on phones — slightly tighter */
@media (max-width: 720px) {
  .assess-intro { padding: 14px 16px; border-radius: var(--radius-md); }
  .assess-intro h2 { font-size: 1rem; }
  .assess-intro-list li { font-size: var(--text-sm); padding-left: 18px; }
}

/* ─ Drop the aurora completely on phones — cleaner canvas, less GPU work ─ */
@media (max-width: 720px) {
  #bg-aurora { display: none; }
}

/* ─ Refined mobile typography — confident, breathing ─ */
@media (max-width: 720px) {
  body { font-size: var(--text-base); }
  h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); letter-spacing: var(--tracking-tighter); }
  h2 { font-size: clamp(1.3rem, 5vw, 1.6rem); }
  h3 { font-size: var(--text-base); }
  .lede { font-size: var(--text-base); line-height: var(--leading-relaxed); }
  .eyebrow { font-size: 0.7rem; padding: 4px 10px; }
}

/* ─ Cleaner hero on mobile — text wins, radar smaller ─ */
@media (max-width: 720px) {
  .hero { gap: var(--space-5); }
  .hero h1 { margin: var(--space-4) 0 var(--space-3); }
  .hero-cta { margin: var(--space-5) 0 var(--space-4); }
  .hero-meta { font-size: var(--text-xs); gap: var(--space-2) var(--space-4); }
  .hero-visual { max-width: 220px; margin: 0 auto; }
  #maturity-radar { max-width: 200px; }
}

/* ─ Cleaner cards on mobile ─ */
@media (max-width: 720px) {
  /* Make cards a touch flatter so the page feels less busy */
  .stat-card, .control-card, .flow li, .roadmap-card, .pricing-col {
    border-radius: var(--radius-md);
    box-shadow: none;
  }
  .stat-card { padding: var(--space-4); }
  .control-card { padding: var(--space-4); gap: var(--space-2); }
  .flow li { padding: var(--space-5); }
  .controls-grid { gap: var(--space-3); }
  .flow { gap: var(--space-3); }
  /* Tighten section headers — they currently feel airy on a phone */
  .section-header { margin-bottom: var(--space-3); }
  .section-header h2 { margin-bottom: 0; }
}

/* ─ Cleaner pane body ─ */
@media (max-width: 720px) {
  .assessment-body, .guide-body {
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-lg);
  }
  .level-section {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius);
  }
  .q-block { padding: var(--space-3) 0; }
  .control-pane-head { margin-bottom: var(--space-4); }
}

/* ─ Sticky toolbar — more compact ─ */
@media (max-width: 720px) {
  .assess-toolbar {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    border-radius: var(--radius);
  }
  .assess-target-label { font-size: 0.62rem; }
  .assess-progress-meta { font-size: var(--text-xs); }
  .assess-progress-bar { height: 6px; }
}

/* Skip-to-content link — visually hidden until focused (keyboard / SR users).
   Hidden with the clip technique rather than a negative transform: the old
   translateY(-100%) parked it just above the viewport, so overscroll /
   rubber-band scrolling at the top of the page revealed the coloured bar.
   Clipping to a 1px box keeps it out of that area while staying focusable. */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  background: var(--accent-grad);
  color: var(--text-on-accent);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: 0 0 var(--radius) 0;
  z-index: 100;
}
.skip-link:focus,
.skip-link:focus-visible {
  width: auto; height: auto;
  padding: var(--space-3) var(--space-4);
  overflow: visible;
  clip: auto;
  clip-path: none;
  box-shadow: var(--shadow);
  outline: none;
}

/* ---------- mobile refinements for the new components ---------- */
@media (max-width: 720px) {
  .assess-toolbar {
    padding: 10px 12px;
    gap: 10px;
  }
  .assess-target { width: 100%; justify-content: space-between; }
  .assess-target .chip,
  .assess-target .target-chip { flex: 1; text-align: center; min-height: 32px; }
  .assess-progress { width: 100%; }

  .upgrade-nudge {
    padding: 16px;
    gap: 14px;
  }
  .upgrade-nudge .btn { width: 100%; }

  .invite-meta-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .invite-meta-val { font-size: 0.95rem; }

  /* In the hero, the secondary link sits on its own line on phones */
  .hero-secondary { width: 100%; text-align: center; padding: 8px 0; }

  /* Next-step hero card on home — stack body and CTAs on phones */
  .next-step { padding: 22px 18px; gap: 16px; }
  .next-step h2 { font-size: 1.3rem; }
  .next-step-cta { width: 100%; flex-direction: column; }
  .next-step-cta .btn { width: 100%; }

  /* Roadmap — summary stacks, gap cards tighten up */
  .roadmap-summary { padding: 16px; gap: 12px; }
  .roadmap-summary-value { font-size: 1.8rem; }
  .roadmap-summary-stats { width: 100%; justify-content: space-between; margin-left: 0; }
  .roadmap-summary-stat { text-align: left; }
  .roadmap-card-head { gap: 12px; }
  .roadmap-card-meta { width: 100%; justify-content: center; }
  .roadmap-card-cta { flex-direction: column-reverse; }
  .roadmap-card-cta .btn { width: 100%; }
  .roadmap-level header { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Per-control Guide signpost stacks to a single column */
  .pane-signpost {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
  }
  .pane-signpost-arrow { display: none; }
  .pane-signpost-now, .pane-signpost-target {
    align-items: flex-start;
    border-right: 1px solid var(--border);
    padding-right: 12px;
  }
  .pane-signpost-target { border-right: 0; }
  .pane-signpost-status {
    grid-column: 1 / -1;
    text-align: left;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }

  /* Pricing grid stacks; paid column comes first on phones */
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-col { padding: 18px; }
  .pricing-col.pricing-paid { order: -1; }
  .pricing-badge { right: 12px; }

  /* Assessment intro tighter on phones */
  .assess-intro { padding: 14px 16px; }
  .assess-intro h2 { font-size: 1.05rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   Inline scoring feedback under each question — the four-option model
   (Yes/Partial/No/N/A) is binary for *scoring*, but Partial/No look like
   "partial credit" without a hint. This line makes the mapping explicit
   in-place, so the user gets immediate, self-correcting feedback.
   ───────────────────────────────────────────────────────────────────── */
.q-feedback {
  margin-top: 8px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-mute);
  transition: color var(--duration-fast) var(--ease-out);
}
.q-feedback:empty,
.q-feedback[data-state="idle"] { display: none; }
.q-feedback[data-state="yes"] { color: var(--ok); }
.q-feedback[data-state="partial"] { color: var(--warn); }
.q-feedback[data-state="no"] { color: var(--bad); }
.q-feedback[data-state="na"] { color: var(--text-mute); }

/* ─────────────────────────────────────────────────────────────────────
   Privacy / sync badge in the assess-toolbar — always visible so the user
   never has to wonder where their answers live. Flips state when they sign
   in.
   ───────────────────────────────────────────────────────────────────── */
.assess-privacy {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-mute);
  cursor: help;
  white-space: nowrap;
  max-width: 240px;
}
.assess-privacy[data-state="private"] {
  color: var(--text-dim);
  border-color: color-mix(in srgb, var(--info) 35%, var(--border));
  background: color-mix(in srgb, var(--info) 5%, var(--surface));
}
.assess-privacy[data-state="synced"] {
  color: var(--ok);
  border-color: var(--ok-border);
  background: var(--ok-soft);
}
.assess-privacy[data-state="loading"] {
  opacity: 0.55;
}
.assess-privacy-icon { font-size: 0.85em; line-height: 1; }
.assess-privacy-label {
  overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .assess-privacy { max-width: none; width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────
   Field hint below a form input — explains why we're asking, without
   sending the user to a separate help screen.
   ───────────────────────────────────────────────────────────────────── */
.field-hint {
  margin: -10px 0 var(--space-4) 0;
  font-size: 0.76rem;
  color: var(--text-mute);
  line-height: 1.45;
}

/* ─────────────────────────────────────────────────────────────────────
   Auth-loading skeleton — placeholders for the account chip during the
   ~500–1000ms boot window. Avoids the "is the header broken?" perception
   without painting anon copy (which would flash for signed-in returns).
   ───────────────────────────────────────────────────────────────────── */
.account-skeleton {
  display: inline-flex; gap: 8px; align-items: center;
}
.skeleton {
  display: inline-block;
  height: 28px; min-width: 56px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface-2) 40%,
    var(--surface) 80%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-chip { width: 56px; }
.skeleton-chip-wide { width: 92px; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; opacity: 0.65; }
}

/* ─────────────────────────────────────────────────────────────────────
   F-09 — Audit-only "yes-without-evidence" feedback variant
   ───────────────────────────────────────────────────────────────────── */
.q-feedback[data-state="warn"] { color: var(--warn); }

/* ─────────────────────────────────────────────────────────────────────
   F-11 — Toast with an inline action (Undo). Reuses the existing toast
   container + animation so it sits in the same stack as the auth/admin
   toasts; the inner layout adds room for the action button + a draining
   progress bar so the user can see the toast is transient. Hover pauses
   the countdown — width transition is set by JS so the pause is just
   "stop the timer"; CSS doesn't need its own pause state.
   ───────────────────────────────────────────────────────────────────── */
.toast.toast-with-action {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 3px;
  align-items: center;
  gap: 6px 12px;
  position: relative;
  padding-bottom: 9px;     /* room for the progress bar */
}
.toast-with-action .toast-label { grid-column: 1; grid-row: 1; min-width: 0; }
.toast-with-action .toast-undo  { grid-column: 2; grid-row: 1; }
.toast-with-action .toast-progress {
  grid-column: 1 / -1; grid-row: 2;
  display: block;
  height: 3px; width: 100%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  overflow: hidden;
}
.toast-progress-fill {
  display: block;
  height: 100%; width: 100%;
  background: var(--ok);
  border-radius: 2px;
  /* JS sets the transition (`width <ms>ms linear`) and target width (0%)
     on the next frame so the browser commits 100% first. No CSS keyframe
     needed — the linear width transition IS the countdown. */
}
.toast-undo {
  background: none; border: 0; padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--accent-2); font-weight: 700;
  font-size: 0.85rem; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.toast-undo:hover { background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.toast-undo:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   F-15 — Disclaimer plain-English summary. Sits at the top of the legal
   page so SMB owners get the load-bearing facts in 4 bullets without
   having to read the 10-section wall below.
   ───────────────────────────────────────────────────────────────────── */
.legal-tldr {
  margin: 0 0 var(--space-7);
  padding: var(--space-5) var(--space-6);
  background: color-mix(in srgb, var(--accent-1) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent-1) 35%, var(--border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.legal-tldr-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* --accent-1 (#8b5cf6) reads 3.81:1 on the eyebrow's tinted bg — fails AA
     for small text (4.5:1). Blending 50% accent + 50% text yields a brighter
     violet that still feels on-brand but clears 4.5:1 on both themes. */
  color: color-mix(in srgb, var(--accent-1) 50%, var(--text));
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.legal-tldr-list {
  margin: 0; padding-left: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.legal-tldr-list li {
  color: var(--text-dim); line-height: 1.55;
  font-size: 0.92rem;
}
.legal-tldr-list strong { color: var(--text); }
.legal-tldr-toggle {
  margin-top: var(--space-4);
}
.legal-tldr-toggle summary {
  cursor: pointer; color: var(--text-mute);
  font-size: 0.85rem; font-weight: 600;
  padding: 4px 0;
  list-style: revert;
}
.legal-tldr-toggle summary:hover { color: var(--text-dim); }

/* ─────────────────────────────────────────────────────────────────────
   F-16 — Home flow split into Free / Paid groups. Numbered steps still
   read 1-2-3-4 linearly but visually the paid loop is its own panel, so
   a user mid-funnel doesn't feel ambushed by a paywall at step 3.
   ───────────────────────────────────────────────────────────────────── */
.flow-group {
  position: relative;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: var(--space-5);
}
.flow-group-free {
  border-color: color-mix(in srgb, var(--ok) 28%, var(--border));
  background: color-mix(in srgb, var(--ok) 4%, var(--surface));
}
.flow-group-paid {
  border-color: color-mix(in srgb, var(--accent-1) 32%, var(--border));
  background: color-mix(in srgb, var(--accent-1) 5%, var(--surface));
}
.flow-group-head {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.flow-group-tier {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text);
}
.flow-group-meta {
  font-size: 0.78rem; color: var(--text-mute);
  margin-left: auto;
}
/* Tight flow inside a group — slightly less padding so the visual
   container reads as the dominant grouping unit. */
.flow.flow-tight { gap: var(--space-3); }
.flow.flow-tight li { padding: var(--space-5); background: var(--bg-elev); }
.flow-group-paid .flow.flow-tight li {
  background: color-mix(in srgb, var(--bg-elev) 88%, var(--accent-1));
}
@media (max-width: 560px) {
  .flow-group { padding: var(--space-4); }
  .flow-group-meta { margin-left: 0; width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────
   F-21 — System theme follow. When the user picks "system" we remove the
   data-theme attribute and let prefers-color-scheme decide. Mirroring the
   :root[data-theme="light"] vars under @media + :not([data-theme]) is the
   minimum-duplication way to handle this without a CSS preprocessor.
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:            #f8f9fc;
    --bg-2:          #ffffff;
    --bg-elev:       #ffffff;
    --surface:       rgba(15, 18, 50, 0.035);
    --surface-2:     rgba(15, 18, 50, 0.055);
    --surface-3:     rgba(15, 18, 50, 0.08);
    --surface-hover: rgba(15, 18, 50, 0.06);
    --surface-strong: var(--surface-2);
    --border:        rgba(15, 18, 50, 0.08);
    --border-strong: rgba(15, 18, 50, 0.14);
    --border-focus:  rgba(124, 58, 237, 0.55);
    --text:        #0c1030;
    --text-dim:    #43476b;
    --text-mute:   #5d6280;          /* darkened from #7a7fa0 to pass WCAG AA 4.5:1 on #f8f9fc light bg */
    --text-faint:  #a1a6c5;
    --accent-1-soft: rgba(139, 92, 246, 0.12);
    --accent-2-soft: rgba(34, 211, 238, 0.12);
    --ok-soft:   rgba(16, 185, 129, 0.10);
    --warn-soft: rgba(245, 158, 11, 0.10);
    --bad-soft:  rgba(239, 68, 68, 0.10);
    --info-soft: rgba(56, 189, 248, 0.10);
    --shadow-xs: 0 1px 2px rgba(15, 18, 50, 0.05);
    --shadow-sm: 0 2px 8px rgba(15, 18, 50, 0.05), 0 1px 2px rgba(15, 18, 50, 0.04);
    --shadow:    0 8px 28px rgba(15, 18, 50, 0.08), 0 2px 6px rgba(15, 18, 50, 0.04);
    --shadow-lg: 0 16px 48px rgba(15, 18, 50, 0.1),  0 4px 12px rgba(15, 18, 50, 0.05);
    --shadow-xl: 0 32px 80px rgba(15, 18, 50, 0.12), 0 8px 24px rgba(15, 18, 50, 0.06);
    --shadow-ring: 0 0 0 3px rgba(124, 58, 237, 0.22);
  }
  :root:not([data-theme]) #bg-aurora::before,
  :root:not([data-theme]) #bg-aurora::after { opacity: 0.18; }
}

/* ─────────────────────────────────────────────────────────────────────
   F-17 — Per-card roadmap progress aggregator. Sits between the card
   header and the level sections, so the user sees aggregate progress
   without scrolling through each level. The bar drains/fills via inline
   width set in JS; the visible state is what matters here.
   ───────────────────────────────────────────────────────────────────── */
.roadmap-card-progress {
  margin: var(--space-4) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.roadmap-card-progress[data-state="done"] {
  background: var(--ok-soft);
  border-color: var(--ok-border);
}
.roadmap-card-progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-2);
  font-size: 0.84rem;
}
.roadmap-card-progress-label { color: var(--text-dim); font-weight: 500; }
.roadmap-card-progress-pct { color: var(--text); font-weight: 700; font-feature-settings: 'tnum'; }
.roadmap-card-progress[data-state="done"] .roadmap-card-progress-pct { color: var(--ok); }
.roadmap-card-progress-bar {
  margin-top: 8px;
  height: 6px; width: 100%;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.roadmap-card-progress-fill {
  height: 100%;
  background: var(--accent-grad);
  border-radius: 999px;
  transition: width var(--duration) var(--ease-out);
}
.roadmap-card-progress[data-state="done"] .roadmap-card-progress-fill { background: var(--ok); }

/* ─────────────────────────────────────────────────────────────────────
   F-23 — Evidence upload progress bar. Replaces the unattributed
   "Uploading…" string with a real percentage and visible drain. Hidden
   unless an upload is in flight (the JS toggles [hidden]).
   ───────────────────────────────────────────────────────────────────── */
.q-evidence-progress {
  margin-top: 6px;
  height: 4px; width: 100%;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.q-evidence-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-grad);
  border-radius: 999px;
  transition: width 200ms linear;
}

/* ─────────────────────────────────────────────────────────────────────
   F-24 — Mobile scroll affordance on the horizontal nav strips. A subtle
   fade on the right edge tells the user there's more content past the
   viewport. Wraps the existing .guide-nav scroll container with a
   pseudo-element gradient that only renders on touch breakpoints.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .guide-nav {
    position: relative;
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  }
  .guide-shell { position: relative; }
}

/* ─────────────────────────────────────────────────────────────────────
   F-29 — Floating help button + popover. Bottom-right pin; on click it
   opens a small panel with keyboard shortcuts and links to the
   disclaimer + ACSC source. Visible on every route — the SMB-owner
   segment lands without context and needs an always-available "what is
   this?" affordance.
   ───────────────────────────────────────────────────────────────────── */
.help-fab {
  position: fixed;
  bottom: 16px; right: 16px;
  z-index: 199;
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--text-on-accent);
  border: 0;
  font-weight: 700; font-size: 1.1rem;
  font-family: var(--font-sans);
  box-shadow: 0 8px 22px -6px rgba(139, 92, 246, 0.55);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.help-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(139, 92, 246, 0.65);
}
.help-fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 50%, transparent),
              0 8px 22px -6px rgba(139, 92, 246, 0.55);
}
.help-panel {
  position: fixed;
  bottom: 68px; right: 16px;
  z-index: 199;
  width: min(320px, calc(100vw - 32px));
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: fade-up .18s ease both;
}
.help-panel-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-1);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.help-panel h3 {
  font-size: 0.92rem; font-weight: 700;
  margin-bottom: var(--space-2);
  margin-top: var(--space-3);
}
.help-panel h3:first-of-type { margin-top: 0; }
.help-shortcuts {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.help-shortcuts li {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.84rem; color: var(--text-dim);
}
.help-shortcut-desc { margin-left: 6px; color: var(--text-mute); }
.help-shortcuts kbd {
  display: inline-block;
  padding: 2px 7px;
  font-size: 0.74rem; font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--text);
  line-height: 1;
  min-width: 18px; text-align: center;
}
.help-links { list-style: none; padding: 0; margin: 0; }
.help-links li { margin: 6px 0; }
.help-links .link { font-size: 0.86rem; }

/* Hide the floating help button inside the admin portal — the admin tools
   have their own affordances and the FAB would just clutter. */
body:has(.admin-card) .help-fab,
body:has(.admin-card) .help-panel { display: none; }
@media (max-width: 560px) {
  .help-fab { bottom: 12px; right: 12px; }
  .help-panel { bottom: 60px; right: 12px; }
}

/* ---------------- Auditor workspace (read-only role) ---------------- */
/* Reuses .admin-table for the evidence register; these add the activity
   timeline + a couple of layout niceties. */
.auditor-table { width: 100%; }
.auditor-timeline { list-style: none; margin: 0; padding: 0; }
.auditor-timeline-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.auditor-timeline-item:last-child { border-bottom: 0; }
.auditor-timeline-icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  font-size: 0.95rem;
}
.auditor-timeline-body { min-width: 0; flex: 1; }
.auditor-timeline-head {
  display: flex; gap: 10px; align-items: baseline;
  justify-content: space-between; flex-wrap: wrap;
}
.auditor-timeline-title { font-weight: 600; color: var(--text); }
.auditor-timeline-detail { color: var(--text-dim); margin-top: 2px; word-break: break-word; }
.auditor-timeline-actor { margin-top: 2px; }

/* At-a-glance maturity scorecard on the auditor workspace. */
.auditor-scorecard {
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 18px 20px;
}
.auditor-score-headline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.auditor-score-label {
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 600;
}
.auditor-score-arrow { color: var(--text-mute); margin: 0 2px; }
.auditor-score-note { margin-left: auto; }
.auditor-score-note.is-ok { color: var(--ok); font-weight: 600; }
.auditor-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.auditor-control-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.auditor-control-name { font-weight: 600; font-size: 0.9rem; }

/* The answer-shortcut help FAB (Y/P/N/A · jump-to-control) is meaningless for
   a read-only auditor — hide it in auditor sessions. */
body.is-auditor .help-fab,
body.is-auditor .help-panel { display: none; }