/* ==========================================================================
   V3 — Midnight Signal 2.0
   V1 as baseline. Logo blue. Centered hero. Radix-inspired dark scale.
   ========================================================================== */

:root {
  /* Neutrals — Radix-inspired 12-step dark scale */
  --n-1:  #08090B;   /* void */
  --n-2:  #0C0D11;   /* bg */
  --n-3:  #13151C;   /* surface */
  --n-4:  #181A23;   /* surface-2 */
  --n-5:  #1F2230;   /* surface-3 / border subtle */
  --n-6:  #2A2D3D;   /* border */
  --n-7:  #343749;   /* border-hi / element hover */
  --n-8:  #454967;   /* element active */
  --n-9:  #5C6070;   /* text-ghost — decorative separators, disabled (2.7:1, ok for non-text UI) */
  --n-10: #8A8D99;   /* text-dim — meta labels, hints (~5:1 on bg, AA ✓) */
  --n-11: #B4B7C2;   /* text-muted — body copy, descriptions (~8:1 on bg, AAA ✓) */
  --n-12: #F0F1F5;   /* text — headings, primary (~14:1 on bg, AAA ✓) */

  /* Accessibility — token contrast ratios on --bg (#0C0D11):
     text (F0F1F5)      ~14:1  AAA
     text-muted (B4B7C2) ~8:1   AAA
     text-dim (8A8D99)   ~5:1   AA ✓
     text-ghost (5C6070) ~2.7:1 decorative only (separators, icon backdrops)
     blue-text (58A9F0)  ~7:1   AAA
     ok (22C55E)         ~7.5:1 AAA
     warn (F59E0B)       ~9.5:1 AAA
     err (EF4444)        ~4.8:1 AA ✓
  */

  /* Convenience aliases */
  --bg-void:      var(--n-1);
  --bg:           var(--n-2);
  --surface:      var(--n-3);
  --surface-2:    var(--n-4);
  --surface-hi:   var(--n-5);
  --border:       var(--n-5);
  --border-hi:    var(--n-7);
  --text:         var(--n-12);
  --text-muted:   var(--n-11);
  --text-dim:     var(--n-10);
  --text-ghost:   var(--n-9);

  /* Accent — logo mark anchors to #0078D4, text/hover accents push brighter
     for more luminance on dark surfaces (blue channel maxed closer to 255) */
  --blue-primary:  #0078D4;       /* logo blue · solid buttons, active states */
  --blue-hi:       #1F93FF;       /* hover · more electric, higher B channel */
  --blue-text:     #4FA8FF;       /* readable accent text — punchier on dark */
  --blue-soft:     #7AC0FF;       /* inline highlights */
  --blue-deep:     #0060B8;       /* pressed / deep backgrounds */
  --blue-glow:     rgba(31,147,255,0.32);
  --blue-glow-soft:rgba(31,147,255,0.15);
  --blue-wash:     rgba(31,147,255,0.07);

  --accent:        var(--blue-primary);
  --accent-hi:     var(--blue-hi);
  --accent-text:   var(--blue-text);
  --accent-deep:   var(--blue-deep);
  --accent-glow:   var(--blue-glow);
  --accent-wash:   var(--blue-wash);

  /* Group accents — locked palette (8 groups, indigo 400 through gold).
     All Tailwind-400-weight level for uniform luminance + saturation on dark.
     Semantic logic: Foundation = indigo (strategic/intellectual);
     Business = bright blue; Growth = green (grows); Brand = violet (creative);
     Retention = orange (warmth); Scale = pink (expansion);
     Numbers = cyan (data); Exit = gold (finish). */
  --g-foundation: #818CF8;
  --g-business:   #3B9AFC;
  --g-growth:     #4ADE80;
  --g-brand:      #A78BFA;
  --g-retention:  #FB923C;
  --g-scale:      #F472B6;
  --g-numbers:    #22D3EE;
  --g-exit:       #FCD34D;

  /* Status — saturated, readable on dark, consistent across the system */
  --ok:           #22C55E;   /* emerald-500 */
  --warn:         #F59E0B;   /* amber-500 */
  --err:          #EF4444;   /* red-500 */
  --ok-glow:      rgba(34,197,94,0.22);
  --warn-glow:    rgba(245,158,11,0.22);
  --err-glow:     rgba(239,68,68,0.22);

  /* Type */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;

  /* Shadow */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.02) inset, 0 4px 12px rgba(0,0,0,0.25);
  --shadow-glow: 0 0 0 1px var(--border-hi), 0 0 48px -8px var(--accent-glow);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--bg-void);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11", "tnum";
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Hero glow — deep atmospheric blue bloom, pulled down further for presence */
body::before {
  content: "";
  position: fixed;
  top: -500px; left: 50%;
  transform: translateX(-50%);
  width: 1600px; height: 1200px;
  background:
    radial-gradient(ellipse 60% 50% at center 30%, rgba(0,120,212,0.22) 0%, rgba(0,120,212,0.08) 35%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}

/* Subtle grain texture — stops backgrounds from reading 'digital flat' */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: none; }

/* Inline content links — distinguishable from regular text.
   Scoped to .section-body-content so navigation/wrapper anchors
   (sidebar, header, tool-card wrappers) stay unstyled.
   :not([class]) excludes class-bearing wrappers like a.tool-card —
   inline links generated from markdown have no class. */
.section-body-content a:not([class]) {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: rgba(79, 168, 255, 0.4);
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.section-body-content a:not([class]):hover {
  color: var(--blue-text);
  text-decoration-color: var(--accent-text);
}

img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--blue-glow); color: white; }

/* ==========================================================================
   Typography system
   ========================================================================== */
.eyebrow,
.meta-label,
.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--text-dim);
}
.eyebrow--accent { color: var(--accent-text); }
.mono-data {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
h1 { font-size: 44px; line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: 28px; line-height: 1.15; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--s-4); color: var(--text-muted); }
p.lead { font-size: 17px; line-height: 1.6; color: var(--text); }

hr { border: none; border-top: 1px solid var(--border); margin: var(--s-6) 0; }

/* ==========================================================================
   Top bar — with cmdbar search
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid var(--border);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 8px 24px -12px rgba(0,0,0,0.4);
}
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex; align-items: center; gap: var(--s-5);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -0.015em;
  font-size: 14px;
  color: var(--text);
}
.brand .accent { color: var(--accent-text); }
.brand-logo {
  width: 26px; height: 26px;
  flex-shrink: 0;
}
.nav {
  display: flex; align-items: center; gap: var(--s-5);
  margin-left: auto;
}
.nav a {
  font-size: 13px; color: var(--text-muted);
  transition: color 0.15s;
}
.nav a:hover { color: var(--text); }

/* Simple search link in nav — no keyboard-palette pretence */
.nav-search {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.15s;
}
.nav-search:hover { color: var(--text); }
.nav-search svg { color: var(--text-dim); }
.nav-search:hover svg { color: var(--accent-text); }

.kbd {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px;
  border: 1px solid var(--border-hi);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-2);
  font: 500 10px/1 var(--font-mono);
  color: var(--text-muted);
  min-height: 20px;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--s-6);
  position: relative;
  z-index: 1;
}
.container--narrow { max-width: 880px; }
.container--wide { max-width: 1440px; }

/* ==========================================================================
   Hero — centered, real logo, no kbd pills
   ========================================================================== */
.hero {
  padding: var(--s-9) 0 var(--s-8);
  text-align: center;
  position: relative;
}
.hero-logo {
  width: 76px; height: 76px;
  margin: 0 auto var(--s-5);
  display: block;
  filter: drop-shadow(0 8px 24px var(--blue-glow));
}
.hero-eyebrow {
  margin-bottom: var(--s-5);
  display: inline-flex; gap: 10px; align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.hero-title {
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 0 auto var(--s-5);
  max-width: 1040px;
  color: var(--text);
  text-wrap: balance;
}
.hero-title .accent {
  color: var(--blue-hi);
  text-shadow:
    0 0 24px rgba(0,120,212,0.35),
    0 0 64px rgba(0,120,212,0.15);
}
.hero-title .muted { color: var(--text-dim); font-weight: 700; }
.hero-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto var(--s-6);
}
.hero-signoff {
  color: var(--text-dim);
  white-space: nowrap;
  font-style: italic;
}
.hero-meta {
  display: flex; justify-content: center; gap: var(--s-4);
  margin-top: var(--s-6);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  flex-wrap: wrap;
}
.hero-meta span { display: flex; align-items: center; gap: 8px; }
.hero-meta .sep { color: var(--text-ghost); }
.hero-meta .dot-ok {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}

.cta-row {
  display: flex; gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-radius: 8px;
  font: 600 14px/1 var(--font-sans);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.25s;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--accent);
  color: white;
  border-color: rgba(255,255,255,0.1);
  box-shadow:
    0 8px 24px -6px var(--blue-glow),
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 1px 0 rgba(255,255,255,0.12) inset;
}
.btn--primary:hover {
  background: var(--accent-hi);
  box-shadow:
    0 12px 32px -6px var(--blue-glow),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 1px 0 rgba(255,255,255,0.16) inset;
}
.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-hi);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--border-hi); }
.btn .icon { width: 16px; height: 16px; }

/* ==========================================================================
   Three steps (how it works) — icons + big mono numbers + hover lift
   ========================================================================== */
/* Three steps (how it works) — horizontal trio with numbered circles
   that pop up out of the top edge of each card. No connector line
   between them: the numbered circles alone signal sequence, and a
   gradient stripe across the top read as noise rather than a
   connection (the circles cover its middle, the gradient fade kills
   its ends). Keeps .step and .step-cta class names so the JS
   hydration (data-step-cta="N") continues to work. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin: var(--s-8) 0 var(--s-9);
  padding-top: 40px;
}
.step {
  padding: var(--s-5);
  /* Subtle blue glow — same radial-gradient language as .callout but
     lighter (10% top-right + 4% bottom-left vs. 18/7) because the
     steps already carry strong visual weight from the -28px top
     numbered ring. No per-card tones: steps are a unified "do this
     next" sequence, not three separate callouts. */
  background:
    radial-gradient(ellipse 80% 70% at top right,
      color-mix(in srgb, var(--accent) 10%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 100% at bottom left,
      color-mix(in srgb, var(--accent) 4%, transparent) 0%,
      transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.25s;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 6px rgba(0,0,0,0.15);
  display: flex; flex-direction: column;
  text-align: center;
  min-height: 220px;
}
.step:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 14px 32px -8px rgba(0,0,0,0.35);
}
.step:hover .step-cta { color: var(--blue-hi); }
.step-circle {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-hi);
  display: grid; place-items: center;
  font: 600 20px/1 var(--font-mono);
  color: var(--accent-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  box-shadow:
    0 0 0 4px var(--bg),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.2s, color 0.2s;
  z-index: 2;
}
.step:hover .step-circle { border-color: var(--accent); }
.step-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
}
.step-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
  color: var(--text);
}
.step-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
  flex: 1;
}
/* CTA row at the bottom of each step card — always visible so the card
   reads as "an action you can take", not a static description. Hydrated
   by JS to show live state (score pill, "next: Email & SMS", etc). */
.step-cta {
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color 0.15s, gap 0.15s;
}
/* Done state — small green corner tick, dim the desc + CTA. No tint
   on the card itself (Rob: too much green upsets the page). */
.step.is-done .step-desc { color: var(--text-dim); font-size: 12px; }
.step.is-done .step-cta { color: var(--text-muted); }
.step.is-done::after {
  content: "";
  position: absolute;
  top: -14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322C55E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/13px no-repeat,
    var(--bg);
  border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent);
  box-shadow: 0 0 0 3px var(--bg);
  pointer-events: none;
  z-index: 3;
}
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; gap: var(--s-6); padding-top: 40px; }
  .steps::before { display: none; }
}
/* HC score pill embedded inside step 2's CTA row — shows the latest
   overall_score + rating for returning users. Pill colours match the
   .bsr-hc tone bands (green ≥70, amber 45-69, red <45). */
.step-cta-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--hc-tone, var(--accent-text)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hc-tone, var(--accent-text)) 32%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hc-tone, var(--accent-text));
}

/* ==========================================================================
   Group headers + section grid — each group carries a subtle coloured wash
   More generous spacing between groups for breathing room.
   ========================================================================== */
.group {
  position: relative;
  padding: var(--s-4) var(--s-5) var(--s-5);
  margin: 0 calc(var(--s-5) * -1) var(--s-5);
  border-radius: var(--r-lg);
  scroll-margin-top: 132px; /* clear the topbar + sticky index-jumpnav when scrolled to */
}
.group::before {
  content: "";
  position: absolute;
  inset: -40px; /* extend beyond group so mask can feather well outside */
  background:
    radial-gradient(ellipse 50% 60% at 20% 30%, var(--group-glow, transparent) 0%, transparent 100%),
    radial-gradient(ellipse 45% 55% at 80% 70%, var(--group-glow-2, transparent) 0%, transparent 100%);
  /* Radial mask fades the entire pseudo out at the edges — no rectangle visible */
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at center, black 10%, transparent 95%);
          mask-image: radial-gradient(ellipse 75% 75% at center, black 10%, transparent 95%);
  filter: blur(16px);
  pointer-events: none;
  z-index: -1;
}
.group[data-group="foundation"]{ --group-glow: rgba(129,140,248,0.07); --group-glow-2: rgba(129,140,248,0.04); }
.group[data-group="business"]  { --group-glow: rgba(59,154,252,0.07);  --group-glow-2: rgba(59,154,252,0.04); }
.group[data-group="growth"]    { --group-glow: rgba(74,222,128,0.06);  --group-glow-2: rgba(74,222,128,0.03); }
.group[data-group="brand"]     { --group-glow: rgba(167,139,250,0.07); --group-glow-2: rgba(167,139,250,0.04); }
.group[data-group="retention"] { --group-glow: rgba(251,146,60,0.06);  --group-glow-2: rgba(251,146,60,0.03); }
.group[data-group="scale"]     { --group-glow: rgba(244,114,182,0.06); --group-glow-2: rgba(244,114,182,0.03); }
.group[data-group="numbers"]   { --group-glow: rgba(34,211,238,0.06);  --group-glow-2: rgba(34,211,238,0.03); }
.group[data-group="exit"]      { --group-glow: rgba(252,211,77,0.07);  --group-glow-2: rgba(252,211,77,0.04); }
.group-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.group-head-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--group-accent, var(--accent-text));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  min-width: 36px;
}
/* Map group accent to head num */
.group[data-group="foundation"] .group-head-num { color: var(--g-foundation); }
.group[data-group="business"]   .group-head-num { color: var(--g-business); }
.group[data-group="growth"]     .group-head-num { color: var(--g-growth); }
.group[data-group="brand"]      .group-head-num { color: var(--g-brand); }
.group[data-group="retention"]  .group-head-num { color: var(--g-retention); }
.group[data-group="scale"]      .group-head-num { color: var(--g-scale); }
.group[data-group="numbers"]    .group-head-num { color: var(--g-numbers); }
.group[data-group="exit"]       .group-head-num { color: var(--g-exit); }

.group-head-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.group-head-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-left: auto;
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.section-grid--single {
  grid-template-columns: 1fr;
  max-width: 560px;
}
/* MS 2.0 Index card (redesigned): three-row stacked layout instead of the
   old single-row flex. Top: icon + section-num + HC pill. Middle: title
   + subtitle. Bottom: meta footer (read state · checklist · arrow).
   Brings the .bsr discipline from the dashboard to the index. */
/* Section cards — glow-surface pattern (matches callouts / founders-note /
   waterfall / formula family). Per-group accent colour via --accent-color
   (set on the `data-group` attribute below) drives a dual radial-gradient
   glow. Dropped the 3px left stripe holdover; the rest-state glow carries
   the category identity. Hover intensifies + lifts slightly.
   Used by: landing-public.html SEO catalog + main SPA Index view.
   Gate.html keeps the old flat+stripe styling via the
   `#gate-seo-content` override block below (remove when gate goes away). */
.section-card {
  --cw-tone: var(--accent-color, var(--accent));
  display: flex;
  flex-direction: column;
  padding: var(--s-4) var(--s-5);
  background:
    radial-gradient(ellipse 80% 70% at top right,
      color-mix(in srgb, var(--cw-tone) 13%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 100% at bottom left,
      color-mix(in srgb, var(--cw-tone) 5%, transparent) 0%,
      transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.25s;
  position: relative;
  cursor: pointer;
  min-height: 132px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 2px rgba(0,0,0,0.2);
}
.section-card:hover {
  border-color: color-mix(in srgb, var(--cw-tone) 40%, var(--border));
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 10px 24px -8px rgba(0,0,0,0.35),
    0 0 32px -6px color-mix(in srgb, var(--cw-tone) 30%, transparent);
}
.section-card:hover .section-card-arrow { color: var(--cw-tone); transform: translateX(2px); }

/* Legacy override: restore flat surface + 3px left accent stripe for the
   pre-launch gate page only. Remove this block when templates/gate.html
   is deleted at launch. */
#gate-seo-content .section-card {
  --cw-tone: var(--accent-color, var(--accent));
  background: var(--surface);
}
#gate-seo-content .section-card:hover {
  background: var(--surface-2);
  border-color: var(--border-hi);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 6px 16px rgba(0,0,0,0.3),
    0 0 24px -8px var(--blue-glow-soft);
}
#gate-seo-content .section-card::before {
  content: "";
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 3px;
  background: var(--accent-color, var(--accent));
  border-radius: 0 3px 3px 0;
  opacity: 0.55;
  transition: opacity 0.15s, top 0.15s, bottom 0.15s;
}
#gate-seo-content .section-card:hover::before { opacity: 1; top: 8%; bottom: 8%; }

/* --- Card head row: icon + section number + HC score pill --- */
.section-card-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
/* Naked icon — no container box. The card is the only box. */
.section-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: grid; place-items: center;
}
.section-icon img {
  width: 22px; height: 22px;
  filter: brightness(0) saturate(100%) invert(50%) sepia(90%) saturate(2400%) hue-rotate(190deg);
  transition: filter 0.2s;
}
/* HC score pill — pinned right. Hydrated by updateTocCardColours()
   which writes the inner span. Empty = no submission yet (collapses). */
.section-hc-slot {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
.section-hc-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--hc-tone, var(--text-dim)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hc-tone, var(--text-dim)) 36%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hc-tone, var(--text-dim));
  text-align: center;
}
.section-hc-pill.is-na {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  font-weight: 500;
}
.section-card[data-group="foundation"] { --accent-color: var(--g-foundation); }
.section-card[data-group="foundation"] .section-icon img {
  /* #818CF8 indigo — strategic/intellectual */
  filter: brightness(0) saturate(100%) invert(63%) sepia(32%) saturate(1800%) hue-rotate(215deg);
}
.section-card[data-group="business"] { --accent-color: var(--g-business); }
.section-card[data-group="business"] .section-icon img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(88%) saturate(2400%) hue-rotate(190deg);
}
.section-card[data-group="growth"] { --accent-color: var(--g-growth); }
.section-card[data-group="growth"] .section-icon img {
  filter: brightness(0) saturate(100%) invert(78%) sepia(46%) saturate(550%) hue-rotate(120deg);
}
.section-card[data-group="brand"] { --accent-color: var(--g-brand); }
.section-card[data-group="brand"] .section-icon img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(32%) saturate(1500%) hue-rotate(240deg);
}
.section-card[data-group="retention"] { --accent-color: var(--g-retention); }
.section-card[data-group="retention"] .section-icon img {
  filter: brightness(0) saturate(100%) invert(72%) sepia(48%) saturate(1600%) hue-rotate(340deg);
}
.section-card[data-group="scale"] { --accent-color: var(--g-scale); }
.section-card[data-group="scale"] .section-icon img {
  filter: brightness(0) saturate(100%) invert(64%) sepia(26%) saturate(2400%) hue-rotate(300deg);
}
.section-card[data-group="numbers"] { --accent-color: var(--g-numbers); }
.section-card[data-group="numbers"] .section-icon img {
  filter: brightness(0) saturate(100%) invert(76%) sepia(32%) saturate(600%) hue-rotate(100deg);
}
.section-card[data-group="exit"] { --accent-color: var(--g-exit); }
.section-card[data-group="exit"] .section-icon img {
  filter: brightness(0) saturate(100%) invert(78%) sepia(48%) saturate(900%) hue-rotate(360deg);
}

.section-card-body {
  min-width: 0;
  flex: 1;
  margin-bottom: var(--s-3);
}
.section-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.section-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 4px;
  /* Allow wrapping — was nowrap+ellipsis, which clipped longer titles
     like "Brand DNA - Values, Pillars & Positioning". */
}
.section-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* --- Card meta footer: read state + checklist + arrow --- */
.section-card-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  min-height: 28px;
}
.section-state-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.section-state-read::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}
.section-state-read.is-read {
  color: #4ADE80;
}
.section-state-read.is-read::before {
  background: #4ADE80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
}
.section-checklist-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.section-checklist-mini-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  min-width: 30px;
}
.section-checklist-mini-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s;
}
.section-checklist-mini-count {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  flex-shrink: 0;
}
.section-card-arrow {
  margin-left: auto;
  color: var(--text-ghost);
  font-size: 16px;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
  line-height: 1;
}

/* ==========================================================================
   Section page
   ========================================================================== */
.section-head {
  padding: var(--s-9) 0 var(--s-6);
}
/* Mobile: 96px top padding feels like dead space below the topbar.
   Tighten to 24px so content starts visible above the fold. */
@media (max-width: 768px) {
  .section-head {
    padding: var(--s-5) 0 var(--s-4);
  }
}
.breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: var(--s-5);
}
.breadcrumb a { color: var(--text-dim); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb .sep { color: var(--text-ghost); }

.section-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--s-4);
}
.section-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 12px;
  border: 1px solid var(--border-hi);
  border-radius: 6px;
  background: var(--surface);
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: inline-flex; align-items: center; gap: 8px;
}
.section-badge .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--badge-color, var(--accent));
  box-shadow: 0 0 8px var(--badge-color, var(--accent));
}
/* Tint the section-badge dot + text to the group accent so the section
   chrome reads as part of its category. Matches the index card chips. */
.section-badge[data-group="foundation"] { --badge-color: var(--g-foundation); color: var(--g-foundation); }
.section-badge[data-group="business"]   { --badge-color: var(--g-business);   color: var(--g-business); }
.section-badge[data-group="growth"]     { --badge-color: var(--g-growth);     color: var(--g-growth); }
.section-badge[data-group="brand"]      { --badge-color: var(--g-brand);      color: var(--g-brand); }
.section-badge[data-group="retention"]  { --badge-color: var(--g-retention);  color: var(--g-retention); }
.section-badge[data-group="scale"]      { --badge-color: var(--g-scale);      color: var(--g-scale); }
.section-badge[data-group="numbers"]    { --badge-color: var(--g-numbers);    color: var(--g-numbers); }
.section-badge[data-group="exit"]       { --badge-color: var(--g-exit);       color: var(--g-exit); }

/* Section icon — inline with the H1 (was a stacked 44px emblem).
   Uses inline-block (NOT flex) so the icon flows with the title text —
   when long titles wrap to multiple lines, the icon stays on the first
   line next to the first word rather than being pushed to its own row
   by flex-wrap. Sizing keys off 1em so the icon scales with the H1 at
   any viewport (desktop 52px → icon ~50px; mobile 34px → icon ~34px). */
.section-head-icon-inline {
  display: inline-block;
  vertical-align: baseline;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.3em;
  /* Nudge the icon down a hair so it optically aligns with the text
     baseline (the icon's visual weight sits above the text cap height). */
  transform: translateY(0.1em);
  /* Default to accent blue; per-group filters below override. */
  filter: brightness(0) saturate(100%) invert(50%) sepia(90%) saturate(2400%) hue-rotate(190deg);
}
.section-head[data-group="foundation"] .section-head-icon-inline {
  filter: brightness(0) saturate(100%) invert(63%) sepia(32%) saturate(1800%) hue-rotate(215deg);
}
.section-head[data-group="business"] .section-head-icon-inline {
  filter: brightness(0) saturate(100%) invert(55%) sepia(88%) saturate(2400%) hue-rotate(190deg);
}
.section-head[data-group="growth"] .section-head-icon-inline {
  filter: brightness(0) saturate(100%) invert(78%) sepia(46%) saturate(550%) hue-rotate(120deg);
}
.section-head[data-group="brand"] .section-head-icon-inline {
  filter: brightness(0) saturate(100%) invert(68%) sepia(32%) saturate(1500%) hue-rotate(240deg);
}
.section-head[data-group="retention"] .section-head-icon-inline {
  filter: brightness(0) saturate(100%) invert(72%) sepia(48%) saturate(1600%) hue-rotate(340deg);
}
.section-head[data-group="scale"] .section-head-icon-inline {
  filter: brightness(0) saturate(100%) invert(64%) sepia(26%) saturate(2400%) hue-rotate(300deg);
}
.section-head[data-group="numbers"] .section-head-icon-inline {
  filter: brightness(0) saturate(100%) invert(76%) sepia(32%) saturate(600%) hue-rotate(100deg);
}
.section-head[data-group="exit"] .section-head-icon-inline {
  filter: brightness(0) saturate(100%) invert(78%) sepia(48%) saturate(900%) hue-rotate(360deg);
}

.section-head h1 {
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-4);
  max-width: 820px;
}
.section-head .subtitle {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 680px;
  margin-bottom: var(--s-6);
  line-height: 1.55;
}
.section-info {
  display: flex; gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.section-info span { display: flex; align-items: center; gap: 6px; }
.section-info .sep { color: var(--text-ghost); }

/* Layout: body + slim aside */
.section-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--s-8);
  padding-bottom: var(--s-10);
}
@media (max-width: 960px) {
  /* `1fr` = `minmax(auto, 1fr)` = expands to fit min-content of children.
     The body column is full of blocks (.principle, .metric-grid, .pullquote,
     .founders-note, <pre>) whose intrinsic min-content widths can be 700px+.
     `minmax(0, 1fr)` lets the column shrink below content min-content, so
     blocks wrap/scroll inside the column instead of overflowing the page. */
  .section-layout { grid-template-columns: minmax(0, 1fr); }
  .section-aside { display: none; }
}

/* Body content */
.section-body-content { max-width: 720px; min-width: 0; }
/* Code blocks must clip + scroll inside the column, not push it wider. */
.section-body-content pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
}
/* Tables: same — wrap in horizontal scroll if too wide for the column. */
.section-body-content .table-wrapper {
  max-width: 100%;
  overflow-x: auto;
}
.section-body-content > p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}
.section-body-content h2 {
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
  font-size: 26px;
  position: relative;
}
.section-body-content h2::before {
  content: attr(data-num);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.section-body-content h3 {
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  font-size: 19px;
}
.section-body-content strong { color: var(--text); font-weight: 600; }
.section-body-content ul, .section-body-content ol {
  margin: 0 0 var(--s-4);
  padding-left: 20px;
}
.section-body-content ul li, .section-body-content ol li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* =========================================================================
   BLOCK TYPES — the full library
   ========================================================================= */

/* Principle — ONE per section. Signature moment with Rob's attribution.
   Padding matches .callout (var(--s-5)) so it doesn't over-dominate as a
   page-opener. Margin relaxed to var(--s-5)/var(--s-6) for the same reason. */
.principle {
  margin: var(--s-5) 0 var(--s-6);
  padding: var(--s-5);
  background:
    radial-gradient(ellipse 80% 60% at top right,
      color-mix(in srgb, var(--principle-glow, var(--accent)) 22%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 100% at bottom left,
      color-mix(in srgb, var(--principle-glow, var(--accent)) 10%, transparent) 0%,
      transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 20px 48px -16px rgba(0,0,0,0.4),
    0 0 0 1px color-mix(in srgb, var(--principle-glow, var(--accent)) 12%, transparent);
}
/* Principle glow colour per group — inherited from the .chapter data-group
   attribute. Replaces the old blue left stripe; the coloured glow carries
   the section's group identity across the whole card. */
.chapter[data-group="foundation"] .principle { --principle-glow: var(--g-foundation); }
.chapter[data-group="business"]   .principle { --principle-glow: var(--g-business); }
.chapter[data-group="growth"]     .principle { --principle-glow: var(--g-growth); }
.chapter[data-group="brand"]      .principle { --principle-glow: var(--g-brand); }
.chapter[data-group="retention"]  .principle { --principle-glow: var(--g-retention); }
.chapter[data-group="scale"]      .principle { --principle-glow: var(--g-scale); }
.chapter[data-group="numbers"]    .principle { --principle-glow: var(--g-numbers); }
.chapter[data-group="exit"]       .principle { --principle-glow: var(--g-exit); }
/* Kicker picks up the same group tone so the PRINCIPLE label reads as
   group-coloured too (was hardcoded to --accent-text blue). */
.chapter[data-group] .principle-kicker { color: var(--principle-glow, var(--accent-text)); }
/* Simplified kicker — replaces the old attribution row (avatar + "Rob Ward"
   + "FOUNDER'S PRINCIPLE" kicker). The block's blue gradient + left stripe
   already marks it as a principle; we just need a tiny text kicker. */
.principle-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.principle-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: var(--s-4);
  color: var(--text);
  max-width: 640px;
}
.principle-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 680px;
}

/* Callouts — tip / warning / insight / info / ai / read.
   Glow-tinted surface by variant, sharing the same surface language as
   the founder's principle + founders-note. Drops the solid left-rule
   accent bar; variant signal comes from icon + label + glow tone.
   --cw-tone is the per-variant colour; the .callout base consumes it
   in the dual radial-gradient background. */
.callout {
  --cw-tone: var(--accent);
  margin: var(--s-5) 0;
  padding: var(--s-5);
  background:
    radial-gradient(ellipse 80% 70% at top right,
      color-mix(in srgb, var(--cw-tone) 18%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 100% at bottom left,
      color-mix(in srgb, var(--cw-tone) 7%, transparent) 0%,
      transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}
/* Variant tones — one distinct colour per variant. Same mapping as
   pre-glow ("tip/ai split", warning amber, insight violet, etc.) so
   nothing changes semantically for authors. */
.callout-tip     { --cw-tone: var(--ok); }
.callout-warning { --cw-tone: var(--warn); }
.callout-insight { --cw-tone: var(--g-brand); }
.callout-info    { --cw-tone: var(--accent); }
.callout-ai      { --cw-tone: var(--g-numbers); }
.callout-read    { --cw-tone: var(--g-exit); }
.callout-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
/* Callout icons — naked, no chip. Status colour only. */
.callout-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.callout-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }
.callout-tip .callout-label,
.callout-tip .callout-icon { color: var(--ok); }
.callout-warning .callout-label,
.callout-warning .callout-icon { color: var(--warn); }
.callout-insight .callout-label,
.callout-insight .callout-icon { color: var(--g-brand); }
.callout-info .callout-label,
.callout-info .callout-icon { color: var(--accent-text); }
.callout-ai .callout-label,
.callout-ai .callout-icon { color: var(--g-numbers); }
.callout-read .callout-label,
.callout-read .callout-icon { color: var(--g-exit); }
.callout-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.callout p { font-size: 14px; line-height: 1.65; margin-bottom: 10px; }
.callout p:last-child { margin-bottom: 0; }

/* Pullquote — flat on the page, Georgia italic, centred. Typography
   spec borrowed from robyward.com .about__pullquote so the playbook's
   pullquotes read in Rob's own voice. Curly talking marks wrap the
   text, key phrase in accent blue via *em* or **strong**, 80% width
   centred in the column. No surface, no border. */
.pullquote {
  margin: var(--s-7) auto;
  padding: 0;
  max-width: 80%;
  text-align: center;
}
.pullquote-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  line-height: 1.6;
  color: var(--text);
  font-weight: 400;
}
.pullquote-text::before { content: "\201C"; } /* opening curly double-quote */
.pullquote-text::after  { content: "\201D"; } /* closing curly double-quote */
/* Emphasis — accent blue, weight 600. Both <em> and <strong> map so
   authors can use either *phrase* or **phrase** in markdown. */
.pullquote-text em,
.pullquote-text strong {
  font-style: italic;
  font-weight: 600;
  color: var(--accent-text);
}
.pullquote-attribution {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-style: normal;
}

/* Founder's Note — same glow pattern as the callouts, accent-blue
   tone so it reads as Rob's voice while sitting in the same surface
   family. Drops the left accent bar. */
.founders-note {
  --cw-tone: var(--accent);
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background:
    radial-gradient(ellipse 80% 70% at top right,
      color-mix(in srgb, var(--cw-tone) 16%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 100% at bottom left,
      color-mix(in srgb, var(--cw-tone) 6%, transparent) 0%,
      transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}
.founders-note-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: var(--s-3);
  display: inline-flex; align-items: center; gap: 8px;
}
/* Cap silhouette sitting in the label row — sized relative to the label's
   text so it scales with the mono type. */
.founders-note-cap {
  width: 22px;
  height: auto;
  flex-shrink: 0;
  color: var(--accent-text);
}
.founders-note p { font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.founders-note p:last-child { margin-bottom: 0; }

/* Compare (good vs bad) */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
/* Three-up variant — activated by `::::compare three-col` in the markdown
   (build.py parser emits .compare--3col on the wrapper). Was missing the
   CSS rule, so 3-card compares (e.g. S21) rendered 2+1 with an orphaned
   third card on row 2. */
.compare.compare--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .compare,
  .compare.compare--3col { grid-template-columns: 1fr; }
}
.compare-card {
  --cw-tone: var(--accent);
  padding: var(--s-5);
  background:
    radial-gradient(ellipse 80% 70% at top right,
      color-mix(in srgb, var(--cw-tone) 18%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 100% at bottom left,
      color-mix(in srgb, var(--cw-tone) 7%, transparent) 0%,
      transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.compare-card--bad     { --cw-tone: var(--err); }
.compare-card--good    { --cw-tone: var(--ok); }
.compare-card--warning { --cw-tone: var(--warn); }
.compare-card--neutral { --cw-tone: var(--text-dim); }
.compare-card-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Compare icons — naked, no chip. Matches callout icon treatment. */
.compare-icon {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
}
.compare-icon svg { width: 16px; height: 16px; stroke-width: 2.2; }
.compare-card--bad     .compare-icon { color: var(--err); }
.compare-card--good    .compare-icon { color: var(--ok); }
.compare-card--warning .compare-icon { color: var(--warn); }
.compare-card--neutral .compare-icon { color: var(--text-dim); }
.compare-card--bad     .compare-card-label { color: var(--err); }
.compare-card--good    .compare-card-label { color: var(--ok); }
.compare-card--warning .compare-card-label { color: var(--warn); }
.compare-card--neutral .compare-card-label { color: var(--text-dim); }
.compare-card ul { margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.compare-card li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}
.compare-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 1px;
  background: var(--text-ghost);
}
.compare-card li strong { color: var(--text); font-weight: 600; }
.compare-card-footer {
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }

/* Metric (single key stat) — flat */
.metric {
  margin: var(--s-5) 0;
  padding: var(--s-5) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: grid;
  /* Cap the value column at ~38% so multi-word values like "25-40% of
     total revenue" can't eat the description column and leave it as a
     single-word-per-line ladder. Short values like "$200M" still look
     fine — they just don't fill the whole column. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--s-5);
  align-items: center;
}
.metric-value {
  font-family: var(--font-mono);
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--accent-text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* Title-style metric (multi-word concept instead of a number) — uses bold
   sans at a smaller size so the value column doesn't word-break mid-word.
   Auto-detected at build time when the value starts with a letter and
   contains spaces (e.g. "The Efficiency Equation" in S01). Numeric values
   ("$200M", "25-40% of total revenue") keep the big mono treatment. */
.metric--title .metric-value {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: normal;
  word-break: normal;
}
@media (max-width: 720px) {
  .metric { grid-template-columns: 1fr; gap: var(--s-3); }
}
.metric-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.5;
}
.metric-label-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.metric-label-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Metric Grid (2-4 related stats) */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
.metric-grid .metric-cell {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
}
.metric-cell-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--s-3);
}
.metric-cell-value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.metric-cell-hint { font-size: 12px; color: var(--text-dim); }
.metric-cell--ok .metric-cell-value { color: var(--ok); }
.metric-cell--warn .metric-cell-value { color: var(--warn); }
.metric-cell--err .metric-cell-value { color: var(--err); }
.metric-cell--accent .metric-cell-value { color: var(--accent-text); }

/* Metric stacked — used when a metric-grid line has the shape
   `value | long-prose-description` (auto-detected at build time).
   Group of related benchmarks in ONE unified surface (not three
   duplicate cards). Fixed value column so mixed-length values
   (`60-80%`, `3:1+`, `< 6 months`) share a gutter. Glow-tinted
   background puts it in the same family as callouts / waterfall. */
.metric-stack {
  margin: var(--s-5) 0;
  padding: var(--s-3) var(--s-6);
  background:
    radial-gradient(ellipse 80% 70% at top right,
      color-mix(in srgb, var(--accent) 12%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 100% at bottom left,
      color-mix(in srgb, var(--accent) 5%, transparent) 0%,
      transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.metric-stacked {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-4) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.metric-stacked + .metric-stacked {
  border-top: 1px solid var(--border);
}
.metric-stacked-value {
  font-family: var(--font-mono);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--accent-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.metric-stacked-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}
.metric-stacked--ok    .metric-stacked-value { color: var(--ok); }
.metric-stacked--warn  .metric-stacked-value { color: var(--warn); }
.metric-stacked--err   .metric-stacked-value { color: var(--err); }
.metric-stacked--accent .metric-stacked-value { color: var(--accent-text); }
@media (max-width: 540px) {
  .metric-stacked {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: var(--s-3) 0;
  }
  .metric-stacked-value { font-size: 26px; }
}

/* Statement mode — single-field entries (no pipes, just a claim).
   Renders as a compact card with readable sans text + a blue accent
   stripe on the left, like a mini-callout. Replaces the old behaviour
   where single-field lines went into the .metric-cell-value slot and
   rendered as a 32px mono display — comically oversized for things
   like "CCC under 60 days". */
.metric-statement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
.metric-statement {
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.5;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.metric-statement strong { color: var(--text); font-weight: 700; }

/* Horizontal Steps (3-4 parallel items, circles + connecting track) */
.hsteps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: var(--s-6) 0;
  padding: var(--s-5) 0;
  position: relative;
}
/* Connecting gradient track behind the circles */
.hsteps::before {
  content: "";
  position: absolute;
  top: calc(var(--s-5) + 28px);
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent-deep) 8%,
    var(--accent) 50%,
    var(--accent-deep) 92%,
    transparent 100%);
  border-radius: 2px;
  opacity: 0.5;
}
.hstep {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 var(--s-3);
  text-align: center;
  position: relative;
  z-index: 1;
}
.hstep-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  display: grid; place-items: center;
  font: 600 18px/1 var(--font-mono);
  color: var(--accent-text);
  margin-bottom: var(--s-4);
  position: relative;
  box-shadow:
    0 0 0 4px var(--bg),
    0 1px 0 rgba(255,255,255,0.06) inset;
  transition: transform 0.2s, border-color 0.2s;
}
.hstep:hover .hstep-circle {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.hstep-circle::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  padding: 1px;
  background: linear-gradient(180deg, var(--accent-hi), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.3;
  pointer-events: none;
}
.hstep-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; letter-spacing: -0.01em; }
.hstep-desc { font-size: 12px; line-height: 1.55; color: var(--text-muted); max-width: 180px; }
.hstep-arrow { display: none; }
@media (max-width: 720px) {
  .hsteps { flex-direction: column; gap: var(--s-4); }
  .hsteps::before { display: none; }
}

/* Stages (horizontal cards, equal height, progressive) */
/* minmax(168px, 1fr) — lets 4-item stages (the dominant pattern, 9 of 12
   blocks) fit across the body column (720px max) without orphaning the 4th
   to a second row. Was minmax(220px, 1fr) which forced 3+1 wrap. */
.stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--s-3);
  margin: var(--s-6) 0;
}
.stage {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  position: relative;
  min-height: 220px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 6px rgba(0,0,0,0.15);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.25s;
}
.stage:hover {
  border-color: var(--border-hi);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 10px 24px -8px rgba(0,0,0,0.35);
}
.stage-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-4);
  gap: var(--s-3);
}
.stage-icon {
  display: inline-flex; align-items: center;
  color: var(--accent-text);
  flex-shrink: 0;
}
.stage-icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.stage-num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-ghost);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stage-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--s-2);
}
.stage-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--s-2);
  letter-spacing: -0.02em;
}
.stage-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}
.stage-range {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-text);
  margin-top: auto;
  align-self: flex-start;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Vertical Steps (sequential funnel) — continuous connector track between circles */
.vsteps {
  margin: var(--s-6) 0;
  max-width: 720px;
  padding-left: 12px;
  position: relative;
}
/* Continuous vertical highlight track behind the number circles.
   Matches the horizontal-steps ::before gradient pattern so both step
   variants carry the same "these numbers are a connected sequence"
   visual cue. Replaces the old per-pair .vstep::after connector. */
.vsteps::before {
  content: "";
  position: absolute;
  /* Circle centre sits 12px + 48px margin - 48px absolute-left + 20px
     half-width = 32px from .vsteps' outer box. 2px track centred → 31. */
  left: 31px;
  top: 16px;      /* top of first circle */
  bottom: 16px;   /* top of last circle (doesn't need to reach the bottom) */
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--accent-deep) 6%,
    var(--accent) 50%,
    var(--accent-deep) 94%,
    transparent 100%);
  border-radius: 2px;
  opacity: 0.5;
  pointer-events: none;
}
.vstep {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  position: relative;
  margin-left: 48px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 6px rgba(0,0,0,0.15);
}
.vstep + .vstep { margin-top: var(--s-4); }
.vstep-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 8px;
}
.vstep-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  display: grid; place-items: center;
  font: 600 14px/1 var(--font-mono);
  color: var(--accent-text);
  flex-shrink: 0;
  position: absolute;
  left: -48px; top: 16px;
  box-shadow:
    0 0 0 3px var(--bg),
    0 1px 0 rgba(255,255,255,0.06) inset;
}
.vstep-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.vstep-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Waterfall — P&L statements, cost breakdowns, cash-flow templates.
   Replaces the old "raw markdown code block" treatment with a proper
   surface. Deductions indent + get a minus sign; subtotals pop in
   accent blue with a top rule; values right-align in mono tabular.
   Sits in the same surface family as callouts / founders-note. */
.waterfall {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  max-width: 640px;
}
.waterfall-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.5;
}
.waterfall-sign {
  flex-shrink: 0;
  width: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}
.waterfall-label {
  flex: 1;
  color: var(--text-muted);
}
.waterfall-value {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.waterfall-row--topline {
  font-weight: 600;
  color: var(--text);
  padding-top: var(--s-2);
}
.waterfall-row--topline .waterfall-label { color: var(--text); }
.waterfall-row--item {
  padding-left: 0;
}
.waterfall-row--subtotal {
  font-weight: 600;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.waterfall-row--subtotal .waterfall-label { color: var(--accent-text); }
.waterfall-row--subtotal .waterfall-sign { color: var(--accent-text); }
.waterfall-row--subtotal .waterfall-value { color: var(--accent-text); }
.waterfall-gap { height: var(--s-3); }

/* Formula — flat, no outer card. The equation itself is the anchor. */
/* Formula — glow-surface family (Option A from kitchen-sink). Full-block
   accent-blue glow matching callouts / waterfall / principle. Equation
   sits on a blue-tinted bottom border inside the card, variables follow
   as a legend with thin neutral dividers between rows. */
.formula {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  background:
    radial-gradient(ellipse 80% 70% at top right,
      color-mix(in srgb, var(--accent) 14%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 100% at bottom left,
      color-mix(in srgb, var(--accent) 6%, transparent) 0%,
      transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}
.formula-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: var(--s-3);
}
.formula-eq {
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--text);
  font-weight: 500;
  padding: var(--s-4) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 0;
  margin-bottom: var(--s-4);
  overflow-x: auto;
  letter-spacing: -0.01em;
  text-align: left;
}
.formula-eq .var { color: var(--accent-text); font-weight: 600; }
.formula-eq .op  { color: var(--text-dim); }
.formula-vars {
  display: grid;
  gap: 0;
  padding: 0;
}
.formula-var {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s-4);
  font-size: 14px;
  line-height: 1.55;
  padding: 8px 0;
  border: 0;
}
.formula-var + .formula-var {
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.formula-var-name {
  font-family: var(--font-mono);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 12px;
}
.formula-var-desc { color: var(--text-muted); }

/* Threshold (colour-coded metric ranges) — flat, rows stand on their own */
.threshold { margin: var(--s-5) 0; }
.threshold-head {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.threshold-rows { display: grid; gap: var(--s-2); }
.threshold-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  border-radius: var(--r-sm);
  align-items: center;
  font-size: 14px;
  border-left: 2px solid transparent;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.threshold-row--ok {
  border-left-color: var(--ok);
  background:
    linear-gradient(90deg, rgba(34,197,94,0.10), rgba(34,197,94,0.02) 40%),
    var(--surface);
}
.threshold-row--warn {
  border-left-color: var(--warn);
  background:
    linear-gradient(90deg, rgba(245,158,11,0.10), rgba(245,158,11,0.02) 40%),
    var(--surface);
}
.threshold-row--err {
  border-left-color: var(--err);
  background:
    linear-gradient(90deg, rgba(239,68,68,0.10), rgba(239,68,68,0.02) 40%),
    var(--surface);
}
.threshold-range {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.threshold-row--ok .threshold-range { color: var(--ok); }
.threshold-row--warn .threshold-range { color: var(--warn); }
.threshold-row--err .threshold-range { color: var(--err); }
.threshold-desc { color: var(--text-muted); line-height: 1.5; }
.threshold-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  font-weight: 500;
}

/* Tool Grid (tool/platform recommendations) */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
.tool-card {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  display: flex; flex-direction: column;
  cursor: pointer;
}
.tool-card:hover {
  background: var(--surface-2);
  transform: translateY(-2px);
  border-color: var(--border-hi);
}
.tool-card-category {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--s-3);
}
.tool-card-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.tool-card-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}
.tool-card-link {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  transition: color 0.15s;
}
.tool-card:hover .tool-card-link { color: var(--accent-text); }

/* Tables (standard markdown) */
.md-table {
  width: 100%;
  margin: var(--s-5) 0;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 14px;
}
/* Header row — Inter (not mono) so mid-length column labels scan well,
   accent-blue for brand coherence, 5% accent wash + blue-tinted bottom
   border for structural weight without a heavy grey fill. Mono stays
   reserved for numbers / kickers / metric values elsewhere; tables are
   scanning surfaces and benefit from sans-serif. */
.md-table thead {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.md-table th {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.md-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  line-height: 1.55;
  vertical-align: top;
}
.md-table tr:last-child td { border-bottom: none; }
.md-table td:first-child { color: var(--text); font-weight: 600; }
.md-table tr:hover td { background: var(--surface-2); }

/* Checklist */
.checklist {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.checklist-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.checklist-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.checklist-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.checklist-items { list-style: none; margin: 0; padding: 0; }
/* Hide the real <input type="checkbox"> — it would otherwise render the
   browser's native blue control next to our custom .checklist-check span.
   Keeps it focusable + accessible (clip pattern) while invisible. */
.checklist-items input.section-checkbox {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.checklist-items label { display: contents; cursor: pointer; }
.checklist-items input.section-checkbox:focus-visible + .checklist-check {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.checklist-items input.section-checkbox:checked ~ .checklist-text {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: var(--text-ghost);
}
.checklist-items li:has(input.section-checkbox:checked) .checklist-check {
  background: var(--accent);
  border-color: var(--accent);
}
.checklist-items li:has(input.section-checkbox:checked) .checklist-check::after {
  content: "";
  position: absolute;
  left: 5px; top: 2px;
  width: 4px; height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checklist-items li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.checklist-items li:hover { color: var(--text); }
.checklist-items li:last-child { border-bottom: none; }
.checklist-check {
  width: 18px; height: 18px;
  border: 1.5px solid var(--text-ghost);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.checklist-items li:hover .checklist-check { border-color: var(--accent-text); }
.checklist-items li.done .checklist-check {
  background: var(--accent);
  border-color: var(--accent);
}
.checklist-items li.done .checklist-check::after {
  content: "";
  position: absolute;
  left: 5px; top: 2px;
  width: 4px; height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checklist-items li.done {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: var(--text-ghost);
}

/* Reset button, centred inside the section-complete card. One click
   unticks every item in this section's checklist and returns the UI to
   the in-progress state. Subtle secondary styling so it doesn't compete
   with the "Section complete" celebration above it. */
.section-complete-actions {
  margin-top: var(--s-5);
  display: flex;
  justify-content: center;
}
.checklist-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.checklist-reset-btn:hover {
  color: var(--text);
  border-color: var(--border-hi);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.checklist-reset-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}
.checklist-reset-btn svg {
  color: var(--accent-text);
  flex-shrink: 0;
}

/* ==========================================================================
   Scroll-triggered animations for the long-form sections.
   Elements with [data-animate] start invisible and fade+slide in
   when scrolled into view (via IntersectionObserver in the page <script>).
   ========================================================================== */
html.js-animate [data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
html.js-animate [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Growth curve — animated line draw on the first viz */
html.js-animate .lf-viz-growth .viz-line {
  stroke-dasharray: 820;
  stroke-dashoffset: 820;
  transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-animate .lf-viz-growth.is-visible .viz-line {
  stroke-dashoffset: 0;
}
html.js-animate .lf-viz-growth .viz-area {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
html.js-animate .lf-viz-growth.is-visible .viz-area {
  opacity: 1;
}
html.js-animate .lf-viz-growth .viz-dot {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-animate .lf-viz-growth.is-visible .viz-dot { opacity: 1; }

/* Diagnostic sliders — animated fill */
html.js-animate .lf-viz-sliders .viz-slider-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-animate .lf-viz-sliders.is-visible .viz-slider-line {
  stroke-dashoffset: 0;
}
html.js-animate .lf-viz-sliders .viz-slider-label {
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}
html.js-animate .lf-viz-sliders.is-visible .viz-slider-label { opacity: 1; }

/* Spreadsheet bars — scale up from 0 width */
html.js-animate .lf-viz-bars .viz-bar {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-animate .lf-viz-bars.is-visible .viz-bar { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html.js-animate [data-animate],
  html.js-animate [data-animate].is-visible,
  html.js-animate .lf-viz-growth .viz-line,
  html.js-animate .lf-viz-growth .viz-area,
  html.js-animate .lf-viz-growth .viz-dot,
  html.js-animate .lf-viz-sliders .viz-slider-line,
  html.js-animate .lf-viz-sliders .viz-slider-label,
  html.js-animate .lf-viz-bars .viz-bar {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ==========================================================================
   Long-form SEO sections (below the fold on public landing)
   Generous breathing room, flowing prose, animated section separators.
   ========================================================================== */

/* Section separator — thin gradient line between long-form sections */
.lf-sep {
  max-width: 200px;
  margin: var(--s-10) auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-hi), transparent);
}

/* Section viz (wraps SVG illustration) */
.lf-viz {
  margin: 0 auto var(--s-6);
  max-width: 760px;
  padding: 0 var(--s-5);
}
.lf-viz svg { width: 100%; height: auto; display: block; }

/* Long-form heading + prose block */
.lf-block {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.lf-block h2 {
  font-size: clamp(28px, 3.8vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--s-5);
  color: var(--text);
}
.lf-block p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}
.lf-block .stat {
  color: var(--accent-text);
  font-weight: 600;
}

/* Big quote */
.lf-quote {
  max-width: 720px;
  margin: var(--s-7) auto;
  padding: 0 var(--s-5);
}
.lf-quote-text {
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -0.02em;
  border-left: 2px solid var(--accent);
  padding-left: var(--s-5);
}
.lf-quote-attr {
  text-align: right;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-style: normal;
}

/* Big stats bar (99K words etc) */
.lf-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  max-width: 720px;
  margin: var(--s-6) auto var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.lf-stat-item {
  text-align: center;
}
.lf-stat-num {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 6px;
}
.lf-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
@media (max-width: 640px) {
  .lf-stats-bar { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
}

/* Feature rows (structured paragraphs with strong leads) */
.lf-features {
  max-width: 760px;
  margin: var(--s-5) auto;
  padding: 0 var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.lf-features--grid {
  max-width: 960px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 720px) { .lf-features--grid { grid-template-columns: 1fr; } }
.lf-feature {
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.lf-feature strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.lf-feature span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Social links (About Rob) */
.lf-social {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin: var(--s-5) 0 0;
}
.lf-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  transition: color 0.15s;
}
.lf-social a:hover { color: var(--accent-text); }

/* Full section teaser grid (group-categorised) — each group carries its accent colour */
.lf-sections {
  max-width: 960px;
  margin: var(--s-6) auto;
  padding: 0 var(--s-5);
}
.lf-section-group {
  margin-bottom: var(--s-6);
  position: relative;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
}
.lf-section-group::before {
  content: "";
  position: absolute;
  inset: -20px -40px;
  background:
    radial-gradient(ellipse 50% 60% at 20% 30%, var(--group-glow, transparent) 0%, transparent 100%),
    radial-gradient(ellipse 45% 55% at 80% 70%, var(--group-glow-2, transparent) 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at center, black 10%, transparent 95%);
          mask-image: radial-gradient(ellipse 75% 75% at center, black 10%, transparent 95%);
  filter: blur(16px);
  pointer-events: none;
  z-index: -1;
}
.lf-section-group[data-group="foundation"]  { --group-glow: rgba(129,140,248,0.10); --group-glow-2: rgba(129,140,248,0.06); --group-accent: var(--g-foundation); }
.lf-section-group[data-group="business"]    { --group-glow: rgba(59,154,252,0.10);  --group-glow-2: rgba(59,154,252,0.06); --group-accent: var(--g-business); }
.lf-section-group[data-group="growth"]      { --group-glow: rgba(74,222,128,0.09);  --group-glow-2: rgba(74,222,128,0.05); --group-accent: var(--g-growth); }
.lf-section-group[data-group="brand"]       { --group-glow: rgba(167,139,250,0.10); --group-glow-2: rgba(167,139,250,0.06); --group-accent: var(--g-brand); }
.lf-section-group[data-group="retention"]   { --group-glow: rgba(251,146,60,0.09);  --group-glow-2: rgba(251,146,60,0.05); --group-accent: var(--g-retention); }
.lf-section-group[data-group="scale"]       { --group-glow: rgba(244,114,182,0.09); --group-glow-2: rgba(244,114,182,0.05); --group-accent: var(--g-scale); }
.lf-section-group[data-group="numbers"]     { --group-glow: rgba(34,211,238,0.09);  --group-glow-2: rgba(34,211,238,0.05); --group-accent: var(--g-numbers); }
.lf-section-group[data-group="exit"]        { --group-glow: rgba(252,211,77,0.10);  --group-glow-2: rgba(252,211,77,0.06); --group-accent: var(--g-exit); }

.lf-section-group-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.lf-section-group-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--group-accent, var(--text-dim));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  min-width: 32px;
}
.lf-section-group-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.lf-section-group-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-left: auto;
}

.lf-section-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}
.lf-section-cards.two-col {
  grid-template-columns: 1fr 1fr;
}
.lf-section-card {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--group-accent, var(--border));
  border-radius: var(--r-md);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.lf-section-card:hover {
  border-color: var(--border-hi);
  border-left-color: var(--group-accent, var(--accent));
  background: var(--surface-2);
  transform: translateY(-1px);
}
.lf-section-card img {
  width: 22px; height: 22px;
  margin-top: 2px;
}

/* Per-group icon tints — aligned with locked palette */
.lf-section-group[data-group="foundation"] .lf-section-card img {
  /* #818CF8 — indigo */
  filter: brightness(0) saturate(100%) invert(63%) sepia(32%) saturate(1800%) hue-rotate(215deg);
}
.lf-section-group[data-group="business"] .lf-section-card img {
  /* #3B9AFC — bright blue */
  filter: brightness(0) saturate(100%) invert(55%) sepia(58%) saturate(2100%) hue-rotate(195deg);
}
.lf-section-group[data-group="growth"] .lf-section-card img {
  /* #4ADE80 — green */
  filter: brightness(0) saturate(100%) invert(78%) sepia(44%) saturate(420%) hue-rotate(85deg);
}
.lf-section-group[data-group="brand"] .lf-section-card img {
  /* #A78BFA — violet */
  filter: brightness(0) saturate(100%) invert(66%) sepia(38%) saturate(1400%) hue-rotate(220deg);
}
.lf-section-group[data-group="retention"] .lf-section-card img {
  /* #FB923C — orange */
  filter: brightness(0) saturate(100%) invert(68%) sepia(50%) saturate(1400%) hue-rotate(340deg);
}
.lf-section-group[data-group="scale"] .lf-section-card img {
  /* #F472B6 — pink */
  filter: brightness(0) saturate(100%) invert(64%) sepia(32%) saturate(1500%) hue-rotate(295deg);
}
.lf-section-group[data-group="numbers"] .lf-section-card img {
  /* #22D3EE — cyan */
  filter: brightness(0) saturate(100%) invert(82%) sepia(38%) saturate(600%) hue-rotate(140deg);
}
.lf-section-group[data-group="exit"] .lf-section-card img {
  /* #FCD34D — gold */
  filter: brightness(0) saturate(100%) invert(84%) sepia(44%) saturate(800%) hue-rotate(355deg);
}

.lf-section-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.lf-section-card-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
@media (max-width: 720px) { .lf-section-cards.two-col { grid-template-columns: 1fr; } }

/* Second CTA block (below-fold, matches final-CTA but full-width feeling) */
.lf-secondary-cta {
  max-width: 680px;
  margin: var(--s-8) auto 0;
  padding: var(--s-8) var(--s-6);
  background:
    radial-gradient(ellipse 70% 80% at center 40%, var(--blue-glow-soft), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 20px 48px -16px rgba(0,0,0,0.3);
}
.lf-secondary-cta h3 {
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: -0.03em;
  margin-bottom: var(--s-3);
}
.lf-secondary-cta h3 .accent { color: var(--accent-text); }
.lf-secondary-cta p {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: var(--s-5);
  max-width: 460px;
  margin-left: auto; margin-right: auto;
  line-height: 1.55;
}

/* ==========================================================================
   Profile Complete — persona gate shown post-signup.
   Captures persona + persona-specific fields + universal (country, how_heard, problem).
   ========================================================================== */
.profile-view {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5) var(--s-10);
}
.profile-hero {
  text-align: center;
  margin-bottom: var(--s-8);
}
.profile-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.profile-hero h1 {
  font-size: clamp(32px, 4.5vw, 44px);
  letter-spacing: -0.03em;
  margin-bottom: var(--s-3);
}
.profile-hero p {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Invitee mode — when the user accepted a team invite, brand-level fields
   are inherited from the brand they joined, so we hide any block tagged
   data-hide-for-invitee and swap the hero copy via JS. !important beats
   the persona-switcher's inline display:'' when a persona is picked.
   The is-invitee class is added to #view-profile-complete (outer wrapper)
   in script.js showProfileComplete — the .profile-view selector below
   never matched because the class lives one level up. Kept for safety
   in case that ever changes, but #view-profile-complete is the one that
   actually fires. */
#view-profile-complete.is-invitee [data-hide-for-invitee],
.profile-view.is-invitee [data-hide-for-invitee] { display: none !important; }
#view-profile-complete.is-invitee .profile-hero p strong,
.profile-view.is-invitee .profile-hero p strong { color: var(--accent-text); font-weight: 600; }

.profile-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.profile-section {
  border: none;
  padding: 0;
  margin: 0;
}
.profile-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.profile-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  min-width: 36px;
}
.profile-section-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.profile-section-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: auto;
}

/* Persona picker — 4 cards */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
.persona-card {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.2s;
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: inherit;
  color: inherit;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.persona-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.persona-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.persona-card.is-selected {
  border-color: var(--accent);
  background:
    radial-gradient(ellipse 60% 100% at top right, var(--blue-wash), transparent 70%),
    var(--surface);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px var(--accent) inset,
    0 8px 24px -6px var(--blue-glow-soft);
}
.persona-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.persona-card.is-selected .persona-card-label { color: var(--accent-text); }
.persona-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.015em;
}
.persona-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Form grid for per-persona fields */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4) var(--s-3);
}
.profile-grid--full { grid-template-columns: 1fr; }
.profile-field { display: flex; flex-direction: column; gap: 6px; }
.profile-field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.profile-field-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
  font-style: italic;
}
.profile-input,
.profile-select,
.profile-textarea {
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-sans);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.profile-input:focus,
.profile-select:focus,
.profile-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--blue-glow-soft);
}
.profile-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8D99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.profile-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.55;
}
.profile-textarea::placeholder { color: var(--text-ghost); }
.profile-char-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-align: right;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Services multi-select (advisor) */
.service-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
.service-check {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.service-check:hover { border-color: var(--border-hi); color: var(--text); background: var(--surface-2); }
.service-check input[type="checkbox"] { accent-color: var(--accent); }
.service-check.is-checked {
  border-color: var(--accent);
  color: var(--text);
  background: var(--blue-wash);
}

/* Footer: consent + submit */
.profile-footer {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.profile-submit {
  align-self: center;
  min-width: 240px;
  justify-content: center;
}

@media (max-width: 640px) {
  .persona-grid, .profile-grid, .service-checkboxes { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Health Check — intro (tier picker), questions (slider), email gate, results
   ========================================================================== */

/* Shared HC layout */
.hc-view,
.hc-shell,
.hc-intro-shell,
.hc-question-shell,
.hc-stage-shell,
.hc-results-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5);
  text-align: center;
}
.hc-question-shell { text-align: left; }
/* Mobile: 96px top padding stacks under the topbar as dead space.
   Tighten so HC intro / question / stage / results content starts above the fold. */
@media (max-width: 768px) {
  .hc-view,
  .hc-shell,
  .hc-intro-shell,
  .hc-question-shell,
  .hc-stage-shell,
  .hc-results-shell {
    padding: var(--s-5) var(--s-5);
  }
}
.hc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--s-5);
}
.hc-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.hc-title {
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: var(--s-4);
}
.hc-subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto var(--s-7);
}

/* Tier picker (intro) — two cards: Quick vs Full */
.hc-tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
/* Single-tier layout — Phase 8 onwards (Quick HC removed). Centres a
   solo Full Diagnostic card on the intro page rather than letting it
   stretch across the 2-col grid. */
.hc-tiers--single {
  grid-template-columns: 1fr;
  max-width: 480px;
}
.hc-tier {
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.25s;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 6px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
}
.hc-tier:hover {
  border-color: var(--border-hi);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 12px 28px -8px rgba(0,0,0,0.35);
}
.hc-tier--recommended {
  border-color: rgba(31,147,255,0.3);
  background:
    radial-gradient(ellipse 60% 70% at top right, var(--blue-glow-soft), transparent 60%),
    var(--surface);
}
.hc-tier-badge {
  position: absolute;
  top: -10px;
  right: var(--s-5);
  padding: 4px 10px;
  background: var(--accent);
  color: white;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: 4px;
  box-shadow: 0 4px 12px -2px var(--blue-glow);
}
.hc-tier-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--s-3);
  font-weight: 600;
}
.hc-tier-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--s-3);
}
.hc-tier-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}
.hc-tier-meta {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-4);
}
.hc-tier-meta-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.hc-tier-meta-row svg { color: var(--accent-text); flex-shrink: 0; }
.hc-tier-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* Disabled-tier state — used on the Quick Check card once the brand has
   completed the Full Diagnostic. We keep the card visible (the page is
   explicitly a "pick one of two" choice, so an empty column would feel
   broken) but visually retire it and surface a one-line explanation on
   hover. Pointer stays default; the CTA is disabled so no accidental
   downgrade of the dashboard data. */
.hc-tier.is-disabled {
  opacity: 0.55;
  filter: saturate(0.7);
  cursor: default;
  transition: opacity 0.2s ease;
}
.hc-tier.is-disabled:hover {
  opacity: 1;
  transform: none;
  border-color: var(--border);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 6px rgba(0,0,0,0.15);
}
.hc-tier.is-disabled .hc-tier-cta {
  pointer-events: none;
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
  cursor: not-allowed;
}
/* Tooltip-style hover reveal for the "why is this greyed out" copy.
   Collapsed to 0 height in rest state so it doesn't push the CTA
   down when not in use. */
.hc-tier-reason {
  margin-top: var(--s-3);
  padding: 0 var(--s-3);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 4px;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}
.hc-tier-reason strong {
  color: var(--text);
  font-weight: 600;
}
.hc-tier.is-disabled:hover .hc-tier-reason,
.hc-tier.is-disabled:focus-within .hc-tier-reason {
  max-height: 240px;
  opacity: 1;
  padding: var(--s-3);
}

@media (max-width: 640px) {
  .hc-tiers { grid-template-columns: 1fr; }
  /* Touch devices don't have hover — just show the reason inline so mobile
     users still see the explanation of why the Quick tier is disabled. */
  .hc-tier.is-disabled .hc-tier-reason {
    max-height: 240px;
    opacity: 1;
    padding: var(--s-3);
  }
}

/* Question flow */
.hc-progress {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-6);
  max-width: 560px;
  margin-left: auto; margin-right: auto;
}
.hc-progress-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.hc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  border-radius: 2px;
  box-shadow: 0 0 8px var(--blue-glow-soft);
  transition: width 0.3s cubic-bezier(0.16,1,0.3,1);
}
.hc-progress-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hc-question-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  margin-bottom: var(--s-3);
}
/* Section-title eyebrow — kept for any legacy reference but DEPRECATED
   in favour of .hc-section-header below. */
.hc-section-title-eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hc-accent, var(--accent-text));
  margin-bottom: var(--s-2);
}

/* Section header — BIG. Greg (beta tester) didn't realise he'd moved
   from "AI Lever" to "PMF" mid-flow because the eyebrow was too small.
   Now the section name is a dominant heading; users can't miss it.
   Kicker above it shows "Section NN · Category". */
.hc-section-header {
  margin: var(--s-5) auto var(--s-6);
  max-width: 640px;
  text-align: center;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.hc-section-header-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hc-accent, var(--accent-text));
  margin-bottom: 6px;
}
.hc-section-header-title {
  font-family: var(--font-sans);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text);
  margin: 0;
}
/* Per-question meta row: stage · subsection · section number.
   Was unstyled (browser default). Now small muted mono — reads as
   metadata, doesn't compete with the headline question. */
.hc-question-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: var(--s-4);
}
.hc-question-text {
  /* Smaller max font than before so even the longest question (117 chars)
     wraps to at most 3 lines at a 760px shell width. */
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: var(--s-2);
  /* Reserve 3 lines of height regardless of actual text length so the
     answer cards below don't jump up/down when navigating between
     short (1-line) and long (3-line) questions. 1.25 line-height × 3. */
  min-height: calc(1.25em * 3);
}
.hc-question-hint {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: var(--s-7);
  max-width: 520px;
  margin-left: auto; margin-right: auto;
}

/* Options-wrap: Least→Most vertical scale axis on the left, options
   stack on the right. The scale makes 1=least, 5=most unambiguous —
   Greg (beta tester) initially didn't realise the ordering, which
   compromised the whole assessment. */
.hc-options-wrap {
  max-width: 700px;
  margin: 0 auto var(--s-5);
  display: flex;
  gap: var(--s-4);
  align-items: stretch;
}
.hc-scale-axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 64px;
  padding: 8px 0;
}
.hc-scale-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hc-scale-line {
  flex: 1;
  width: 2px;
  min-height: 40px;
  margin: 8px 0 6px;
  background: linear-gradient(to bottom, var(--border-hi) 0%, var(--accent-text) 100%);
  position: relative;
}
.hc-scale-line::after {
  content: "";
  position: absolute;
  bottom: -2px; left: -3px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--accent-text);
}
@media (max-width: 640px) {
  .hc-options-wrap { gap: var(--s-2); }
  .hc-scale-axis { width: 44px; }
  .hc-scale-label { font-size: 9px; letter-spacing: 0.12em; }
}

/* Previous button — ghost style, sits in the footer alongside Next.
   Putting prev here lets users navigate without reaching for the
   browser back button (which would bounce them off the SPA). */
.hc-prev-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
  justify-content: center;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hc-prev-btn:hover { border-color: var(--border-hi); color: var(--text); background: var(--surface); }
.hc-prev-btn .icon { width: 14px; height: 14px; }

/* Footer layout: prev on the left, centre status + save, next on the right. */
.hc-footer-actions {
  display: grid !important;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.hc-footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
@media (max-width: 640px) {
  .hc-footer-actions {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "status  status"
      "prev    next";
  }
  .hc-footer-actions .hc-footer-center { grid-area: status; }
  .hc-footer-actions .hc-prev-btn { grid-area: prev; }
  .hc-footer-actions .hc-next-btn { grid-area: next; }
}

/* Options — 5 stacked choice cards per question. User picks one. */
.hc-options {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-align: left;
}
.hc-option {
  display: grid;
  grid-template-columns: 44px 1fr 24px;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.2s;
  font-family: inherit;
  text-align: left;
  width: 100%;
  color: inherit;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  position: relative;
}
.hc-option:hover {
  border-color: var(--border-hi);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.hc-option:hover .hc-option-num { color: var(--accent-text); border-color: var(--border-hi); }
.hc-option.is-selected {
  border-color: var(--accent);
  background:
    radial-gradient(ellipse 60% 100% at left center, var(--blue-wash), transparent 70%),
    var(--surface);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px var(--accent) inset,
    0 8px 24px -6px var(--blue-glow-soft);
}
.hc-option.is-selected .hc-option-num {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.hc-option.is-selected .hc-option-check { opacity: 1; }

.hc-option-num {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  font: 500 13px/1 var(--font-mono);
  color: var(--text-dim);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-variant-numeric: tabular-nums;
}
.hc-option-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hc-option-lead {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.hc-option-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.hc-option-check {
  opacity: 0;
  color: var(--accent-text);
  transition: opacity 0.15s;
  display: grid; place-items: center;
}

/* Not applicable option — smaller, quieter */
.hc-option--na {
  margin-top: var(--s-3);
  background: transparent;
  border-style: dashed;
}
.hc-option--na .hc-option-num { opacity: 0.5; }
.hc-option--na .hc-option-lead { color: var(--text-dim); font-weight: 500; }

/* Dimmed state: applied to score options when the user has marked the
   question N/A. Visual cue that they're inactive but still clickable
   (clicking any option undoes the N/A and selects that score). */
.hc-option.is-dimmed {
  opacity: 0.4;
  background: transparent;
}
.hc-option.is-dimmed:hover { opacity: 0.7; }

/* N/A button row: only rendered when question.na === true. Sits below
   the score options with breathing room. The button itself is a soft
   ghost-style action — visually subordinate to the score ladder so
   users default to scoring rather than skipping. */
.hc-na-row {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.hc-na-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  color: var(--text-muted);
  font: 500 13px/1.2 var(--font-sans);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hc-na-btn:hover {
  border-color: var(--border-hi);
  color: var(--text);
  background: rgba(255,255,255,0.02);
}
.hc-na-btn .hc-na-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border-hi);
  color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hc-na-btn.is-selected {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(32, 128, 212, 0.08);
}
.hc-na-btn.is-selected .hc-na-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--void);
}
.hc-na-help {
  font: 400 12px/1.4 var(--font-sans);
  color: var(--text-dim);
  padding-left: 2px;
}

@media (max-width: 640px) {
  .hc-option { grid-template-columns: 32px 1fr 20px; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
  .hc-option-num { width: 28px; height: 28px; font-size: 11px; }
  .hc-option-lead { font-size: 14px; }
  .hc-na-btn { font-size: 12px; }
}

.hc-nav {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
}

/* Email gate (Quick HC submit) */
.hc-email-gate {
  max-width: 460px;
  margin: 0 auto;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: left;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 16px 40px -12px rgba(0,0,0,0.3);
}
.hc-email-gate h2 {
  font-size: 24px;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  text-align: center;
}
.hc-email-gate p {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: var(--s-5);
  font-size: 14px;
  line-height: 1.55;
}

/* Results */
.hc-results-head {
  text-align: center;
  margin-bottom: var(--s-7);
}
.hc-score-big {
  font-family: var(--font-mono);
  font-size: clamp(80px, 12vw, 144px);
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-3);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.hc-score-big .max {
  font-size: 0.3em;
  color: var(--text-dim);
  font-weight: 400;
}
.hc-score-rating {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--s-3);
  font-weight: 600;
}
.hc-score-archetype {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.55;
}

.hc-cat-grid {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-7) 0;
}
.hc-cat-row {
  display: grid;
  grid-template-columns: 200px 1fr 56px;
  gap: var(--s-4);
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.hc-cat-row:last-child { border-bottom: none; }
.hc-cat-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.hc-cat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cat-color, var(--accent));
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--cat-color, var(--accent));
}
.hc-cat-track {
  height: 10px;
  background: var(--surface-2);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.hc-cat-fill {
  height: 100%;
  border-radius: 5px;
  background: var(--cat-color, var(--accent));
  box-shadow: 0 0 12px -2px var(--cat-glow, var(--blue-glow-soft));
}
.hc-cat-val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 500;
}
.hc-cat-row[data-status="high"] { --cat-color: var(--ok); --cat-glow: var(--ok-glow); }
.hc-cat-row[data-status="mid"]  { --cat-color: var(--warn); --cat-glow: var(--warn-glow); }
.hc-cat-row[data-status="low"]  { --cat-color: var(--err); --cat-glow: var(--err-glow); }

@media (max-width: 640px) {
  .hc-cat-row { grid-template-columns: 140px 1fr 44px; gap: var(--s-3); }
}

.hc-recs-head {
  margin: var(--s-8) 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-align: left;
}

/* ==========================================================================
   Auth Overlay — signin / register modal
   Triggered by CTAs on landing + anywhere "Sign in" is clicked.
   Preserve IDs used by script.js: #auth-landing-overlay, #auth-ol-signin, #auth-ol-register
   ========================================================================== */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}
.auth-overlay.is-open { display: flex; }
.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 11, 0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.auth-panel {
  position: relative;
  max-width: 440px;
  width: 100%;
  background:
    radial-gradient(ellipse 80% 60% at top right, var(--blue-glow-soft) 0%, transparent 60%),
    var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 64px -16px rgba(0,0,0,0.5),
    0 0 0 1px rgba(31,147,255,0.12);
}
.auth-close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.auth-close:hover {
  border-color: var(--border-hi);
  color: var(--text);
  background: var(--surface-2);
}
.auth-head { margin-bottom: var(--s-5); }
.auth-head h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  color: var(--text);
}
.auth-head p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.auth-field-input {
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-sans);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.auth-field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--blue-glow-soft);
}
.auth-field-input::placeholder { color: var(--text-ghost); }

.auth-forgot {
  font-size: 12px;
  color: var(--accent-text);
  text-align: right;
  margin-top: -4px;
  transition: color 0.15s;
}
.auth-forgot:hover { color: var(--blue-hi); }

/* Cloudflare Turnstile widget — sits between the last field and the submit
   button. `data-size="flexible"` makes it fit the container; default ~65px
   tall when a challenge shows, ~0 when invisible-pass. */
.auth-turnstile {
  margin: var(--s-3) 0 var(--s-2);
  min-height: 65px;
  display: flex;
  justify-content: center;
}

.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--s-3) 0 var(--s-2);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
}
.auth-consent input {
  width: 16px; height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.auth-consent a { color: var(--accent-text); }
/* Highlight when user tries to submit without ticking the consent box.
   Wraps the row in a soft red border + subtle wash so the field is obvious
   without screaming. Cleared on next submit attempt by the JS handler. */
.auth-consent.is-error {
  border: 1px solid rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  animation: authConsentShake 0.32s cubic-bezier(0.36,0.07,0.19,0.97);
}
.auth-consent.is-error input { accent-color: rgb(239, 68, 68); }
@keyframes authConsentShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: var(--s-3);
  padding: 13px 22px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  font: 600 14px/1 var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.25s;
  box-shadow: 0 8px 24px -6px var(--blue-glow), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.auth-submit:hover { background: var(--accent-hi); }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-submit svg { flex-shrink: 0; }

/* Divider between email + Google */
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: var(--s-4) 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Google button (reusing btn-google if defined; otherwise local) */
.auth-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-hi);
  font: 600 14px/1 var(--font-sans);
  letter-spacing: -0.01em;
  transition: background 0.15s, border-color 0.15s;
  width: 100%;
}
.auth-google:hover { background: var(--surface); border-color: var(--accent); }

/* Switch link at bottom */
.auth-switch {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.auth-switch a {
  color: var(--accent-text);
  font-weight: 600;
  transition: color 0.15s;
}
.auth-switch a:hover { color: var(--blue-hi); }

/* State visibility — only one state shown at a time */
.auth-panel .auth-state { display: none; }
.auth-panel.state-signin #auth-ol-signin,
.auth-panel.state-register #auth-ol-register { display: block; }

/* ==========================================================================
   Public Landing Page (pre-auth, front door — no topbar chrome)
   Two-zone structure: brand masthead → zone divider → value prop pitch.
   ========================================================================== */

/* ==========================================================================
   Persistent header (sticky nav after intro — small brand + sign-in)
   ========================================================================== */
.persistent-header {
  position: sticky; top: 0; z-index: 40;
  padding: 14px 32px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.persistent-header-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}
.persistent-header-brand img {
  width: 24px; height: 24px;
  filter: drop-shadow(0 2px 6px var(--blue-glow-soft));
}
.persistent-header-brand .accent { color: var(--accent-text); }
.persistent-header nav { display: flex; gap: var(--s-5); }
.persistent-header nav a {
  font-size: 13px;
  color: var(--accent-text);
  font-weight: 600;
  transition: color 0.15s;
}
.persistent-header nav a:hover { color: var(--blue-hi); }
@media (max-width: 640px) { .persistent-header { padding: 12px var(--s-4); } }

/* ==========================================================================
   Intro animation — masthead plays once per session, then exits to reveal pitch
   Default (post-intro, reduced-motion, JS off) = masthead hidden, pitch visible.
   Masthead + divider are display:none by default (set in their base rules below).
   ========================================================================== */
html.intro-playing .public-masthead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  padding: var(--s-6);
  min-height: 0;
  text-align: center;
  /* Slower, more purposeful — holds longer, fades slower. */
  animation: mastheadExit 2.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
html.intro-playing .public-pitch {
  opacity: 0;
  transform: translateY(24px);
  /* Starts after masthead is mostly gone, enters slowly. */
  animation: pitchEnter 1.4s 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html.intro-playing .persistent-header {
  opacity: 0;
  transform: translateY(-8px);
  animation: headerEnter 1s 3.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes mastheadExit {
  0%, 50% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40px); pointer-events: none; }
}
@keyframes pitchEnter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes headerEnter {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html.intro-playing .public-masthead,
  html.intro-playing .public-pitch,
  html.intro-playing .persistent-header {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Zone 1 — Brand masthead. Hidden by default — only shown during intro animation. */
.public-masthead {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--s-10) 0 var(--s-8);
  min-height: 44vh;
  text-align: center;
}
.public-masthead-greeting {
  font-size: 15px;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
  letter-spacing: -0.005em;
}
.public-masthead-byline {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: var(--s-4);
  font-style: italic;
  letter-spacing: -0.005em;
}

/* Zone divider — minimal line. Hidden by default (only shown during intro). */
.public-zone-divider {
  display: none;
  max-width: 400px;
  margin: 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-hi), transparent);
}

/* Zone 2 — Value prop pitch. Conversion moment gets its own breathing room. */
.public-pitch {
  padding: var(--s-8) 0 var(--s-9);
  text-align: center;
}

/* Legacy hero wrapper kept for back-compat if used elsewhere */
.public-hero {
  padding: var(--s-10) 0 var(--s-8);
  text-align: center;
  position: relative;
}
/* Brand lockup — logo + wordmark tight together, shared blue bloom behind */
.public-hero-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  width: fit-content;
  margin: 0 auto var(--s-6);
  padding: var(--s-4) var(--s-5);
}
.public-hero-brand::before {
  content: "";
  position: absolute;
  inset: -60px -80px;
  background:
    radial-gradient(ellipse 60% 70% at center, rgba(0,120,212,0.35), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}
.public-hero-logo {
  width: 128px; height: 128px;
  display: block;
}
.public-hero-wordmark {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.public-hero-wordmark .accent { color: var(--accent-text); }

/* Public-landing legal footer (Terms / Privacy / Disclaimer + copyright).
   Stacked block layout — children are centered via parent's text-align,
   not flex. The previous flex-based rule + companion -brand / -links
   classes were leftovers from an earlier design that no longer ships
   (only referenced by static/design-studies/ which is excluded from
   prod builds). Removed the orphans. */
.public-footer {
  display: block;
  margin-top: var(--s-9);
  padding: var(--s-6) 0 var(--s-7);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.public-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--s-5);
}
.public-hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 10px var(--ok);
}
.public-hero-title {
  font-size: clamp(44px, 6.5vw, 76px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 0 auto var(--s-5);
  max-width: 900px;
}
.public-hero-title .accent {
  color: var(--blue-hi);
  text-shadow:
    0 0 24px rgba(0,120,212,0.35),
    0 0 64px rgba(0,120,212,0.15);
}
.public-hero-story {
  max-width: 620px;
  margin: 0 auto var(--s-7);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
}
.public-hero-story .highlight { color: var(--accent-text); font-weight: 600; }
.public-hero-story .signoff {
  display: block;
  margin-top: var(--s-3);
  color: var(--text-dim);
  font-style: italic;
}

/* Auth CTAs */
.public-cta {
  max-width: 360px;
  width: 100%;
  margin: 0 auto var(--s-6);
  display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3);
}
/* Force the register/sign-in row inside .public-cta to centre its content
   (the .btn base is inline-flex without justify-content, so on a stretched
   flex child the text sits at the left). Match the Google button. */
.public-cta .btn,
.public-cta .btn-google {
  width: 100%;
  justify-content: center;
}
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-hi);
  font: 600 14px/1 var(--font-sans);
  letter-spacing: -0.01em;
  transition: background 0.15s, border-color 0.15s;
}
.btn-google:hover { background: var(--surface-2); border-color: var(--accent); }
.public-divider {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.public-divider::before, .public-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.public-signin {
  margin-top: var(--s-4);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.public-signin a {
  color: var(--accent-text);
  font-weight: 600;
  transition: color 0.15s;
}
.public-signin a:hover { color: var(--blue-hi); }

/* What you get - stat tile row */
.public-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
  margin: var(--s-9) 0;
}
.public-stat {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
}
.public-stat-num {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-3);
}
.public-stat-num .accent { color: var(--accent-text); }
.public-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
}
.public-stat-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Section titles on the marketing page */
.public-block-head {
  text-align: center;
  margin: var(--s-10) auto var(--s-6);
  max-width: 680px;
}
.public-block-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--s-3);
}
.public-block-title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--s-3);
  color: var(--text);
}
.public-block-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Final CTA panel */
.public-final-cta {
  margin: var(--s-10) 0 var(--s-9);
  padding: var(--s-9) var(--s-6);
  background:
    radial-gradient(ellipse 70% 80% at center 40%, var(--blue-glow-soft), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 20px 48px -16px rgba(0,0,0,0.3);
}
.public-final-cta h2 {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.03em;
  margin-bottom: var(--s-3);
  max-width: 640px;
  margin-left: auto; margin-right: auto;
}
.public-final-cta p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto var(--s-5);
}

@media (max-width: 640px) {
  .public-hero { padding: var(--s-8) 0 var(--s-6); }
  .public-cta { padding: 0 var(--s-4); }
  .public-final-cta { padding: var(--s-7) var(--s-4); }
}

/* Section Complete — earned moment. Cursor mark at scale with ambient blue glow.
   One of the few places in the system that keeps a gradient (signature moment).
   Hidden by default; script.js adds .is-visible when every checklist item in
   the section is ticked, fading the card in with a gentle rise. */
.section-complete {
  margin: var(--s-7) 0;
  padding: var(--s-8) var(--s-6);
  background:
    radial-gradient(ellipse 60% 70% at center 40%, var(--blue-glow-soft), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 8px rgba(0,0,0,0.2);
  display: none;
}
.section-complete.is-visible {
  display: block;
  animation: sectionCompleteRise 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sectionCompleteRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Grid-stack: checklist and section-complete card share the same grid
   cell. When the card is visible the checklist is simply hidden — no
   hover-peek, no toggling, no layout shift. The card now carries its
   own reset button, which is the only way back to the in-progress
   state. Keeps the UX linear and obvious. */
.checklist-complete-stack {
  display: grid;
  grid-template-areas: "stack";
  margin: var(--s-5) 0;
}
.checklist-complete-stack > .checklist,
.checklist-complete-stack > .section-complete {
  grid-area: stack;
  margin: 0; /* wrapper owns vertical rhythm */
}
.checklist-complete-stack:has(.section-complete.is-visible) > .checklist {
  display: none;
}

/* Mini section-read completion card — same treatment as section-complete
   but smaller (no section title — just the mark + "SECTION READ" label
   + meta). Used inside the read-complete-stack wrapper around the
   Finished-reading? toggle card. */
.section-read-complete {
  padding: var(--s-5) var(--s-5);
  background:
    radial-gradient(ellipse 60% 80% at center 40%, var(--blue-glow-soft), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 8px rgba(0,0,0,0.2);
  display: none;
}
.section-read-complete .section-complete-mark {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--s-2);
  color: var(--accent);
  filter: drop-shadow(0 0 16px var(--blue-glow));
  display: grid;
  place-items: center;
}
.section-read-complete .section-complete-mark svg {
  width: 48px;
  height: 48px;
}
.section-read-complete .section-complete-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 4px;
}
.section-read-complete .section-complete-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.section-read-complete.is-visible {
  display: block;
  animation: sectionCompleteRise 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Same stack-and-hide pattern as the main completion card. When the
   mini read-complete is visible, hide the toggle card underneath it.
   The "Mark unread" button in the card is the only way back. */
.read-complete-stack {
  display: grid;
  grid-template-areas: "stack";
  margin: var(--s-5) 0;
}
.read-complete-stack > .section-read-card,
.read-complete-stack > .section-read-complete {
  grid-area: stack;
  margin: 0;
}
.read-complete-stack:has(.section-read-complete.is-visible) > .section-read-card {
  display: none;
}
.section-complete-mark {
  width: 96px; height: 96px;
  margin: 0 auto var(--s-4);
  color: var(--accent);
  filter: drop-shadow(0 0 32px var(--blue-glow));
  display: grid; place-items: center;
}
.section-complete-mark img,
.section-complete-mark svg {
  width: 96px; height: 96px;
}
.section-complete-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: var(--s-2);
}
.section-complete-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--s-3);
}
.section-complete-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ==========================================================================
   Hero banner — full-bleed image at the top of a section (currently used
   on Before You Start). Was rendering as a raw <img> with no framing.
   Treat it as a proper designed banner: rounded corners, subtle border
   + shadow to match other surface cards, fixed aspect ratio so it scales
   predictably, and a soft bottom fade so it grounds into the dark theme
   instead of cutting off at a hard edge.
   ========================================================================== */
/* Closing section author portrait — small circular headshot above the
   "Rob" signature. Was rendering at natural image size (uncropped,
   rectangular). */
.author-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin: var(--s-7) 0 var(--s-3);
  border: 2px solid var(--border-hi);
  box-shadow: 0 0 0 1px var(--border), 0 8px 24px -8px rgba(0,0,0,0.4);
}
.author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-banner {
  position: relative;
  margin: var(--s-6) 0 var(--s-7);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 8px 28px -10px rgba(0,0,0,0.45);
  background: var(--surface);
  aspect-ratio: 3 / 1;
  /* Soft fade at the bottom so the image reads as part of the dark page,
     not a cropped edge. Pseudo-element overlay; pointer-events:none keeps
     the image below clickable if we ever wrap it in an <a>. */
}
.hero-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(to bottom, transparent, rgba(13, 13, 18, 0.55));
  pointer-events: none;
}
.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  /* Slightly taller aspect on phones so faces don't get cropped. */
  .hero-banner { aspect-ratio: 16 / 9; margin: var(--s-5) 0 var(--s-6); }
}

/* ==========================================================================
   Health Check CTA card — closes a section with a push to the diagnostic.
   Used at the end of foundational sections (Before You Start, Retention,
   Exit Readiness, etc.) where the reader's just absorbed the framework
   and is at peak intent for self-scoring against it.
   Visual sibling of .section-complete: similar surface + glow, but with a
   left-aligned reading column and an explicit primary CTA inside.
   ========================================================================== */
.hc-cta-card {
  margin: var(--s-7) 0;
  padding: var(--s-7) var(--s-6);
  background:
    radial-gradient(ellipse 70% 80% at left top, var(--blue-glow-soft), transparent 65%),
    var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 8px rgba(0,0,0,0.2);
}
.hc-cta-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--s-3);
}
.hc-cta-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--s-3);
  line-height: 1.25;
}
.hc-cta-body {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: var(--s-5);
  max-width: 640px;
}
.hc-cta-body p { margin: 0 0 var(--s-3); }
.hc-cta-body p:last-child { margin: 0; }
.hc-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--accent);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font: 600 14px/1 var(--font-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.2s;
}
.hc-cta-btn:hover {
  background: var(--blue-hi);
  box-shadow: 0 8px 24px -8px var(--blue-glow-soft);
}
.hc-cta-btn:active { transform: translateY(1px); }
@media (max-width: 640px) {
  .hc-cta-card { padding: var(--s-6) var(--s-5); }
  .hc-cta-title { font-size: 19px; }
  .hc-cta-btn { width: 100%; justify-content: center; }
}

/* Section aside */
.section-aside {
  position: sticky;
  top: 80px;
  align-self: start;
  font-size: 13px;
}
.aside-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--s-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.aside-toc { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.aside-toc li {
  padding: 8px 0;
  border-left: 1px solid var(--border);
  padding-left: 14px;
  margin-left: 0;
  transition: border-color 0.15s, color 0.15s;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
}
.aside-toc li:hover { color: var(--text); border-left-color: var(--border-hi); }
.aside-toc li.active {
  color: var(--accent-text);
  border-left: 2px solid var(--accent);
  padding-left: 13px;
  font-weight: 500;
}
.aside-nav { display: grid; gap: 8px; }
.aside-nav a {
  padding: 12px var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.15s, background 0.15s;
  text-decoration: none;
}
.aside-nav a:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}
/* Same label + title treatment as the inline mobile nav — so the two
   surfaces read as the same component in different slots. Blue mono
   kicker + bold sans title. */
.aside-nav .section-nav-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.aside-nav .section-nav-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Legacy .arr — kept for any non-migrated callers */
.aside-nav .arr {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Inline prev/next nav — mobile fallback for when .section-aside is
   hidden (≤960px). Shown inside the body content, right above the
   read-toggle + checklist, so mobile users get section-to-section
   navigation at the natural "I'm done here" moment. */
.section-nav-inline {
  display: none; /* hidden on desktop — sidebar covers nav there */
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin: var(--s-7) 0 var(--s-5);
}
.section-nav-inline .section-nav-prev,
.section-nav-inline .section-nav-next {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  min-width: 0;
}
.section-nav-inline .section-nav-prev:hover,
.section-nav-inline .section-nav-next:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}
.section-nav-inline .section-nav-next { text-align: right; }
.section-nav-inline .section-nav-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.section-nav-inline .section-nav-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section-nav-inline > span {
  /* Empty <span> placeholder for missing prev/next (first/last section) */
  display: none;
}
@media (max-width: 960px) {
  .section-nav-inline { display: grid; }
}

/* Progress bar */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--border);
  z-index: 40;
}
.progress-bar {
  height: 100%;
  width: 28%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  box-shadow: 0 0 10px var(--accent-glow);
}

/* Return-to-studies banner */
.study-banner {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 32px;
  display: flex; align-items: center; gap: var(--s-4);
  font-size: 12px;
  color: var(--text-muted);
  position: relative; z-index: 50;
}
.study-banner .mono-label { color: var(--accent-text); }
.study-banner a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-hi);
  transition: color 0.15s, text-decoration-color 0.15s;
}
.study-banner a:hover { color: var(--text); text-decoration-color: var(--accent); }
.study-banner .spacer { flex: 1; }

/* =========================================================================
   My Brand Dashboard
   ========================================================================= */
.brand-head {
  padding: var(--s-8) 0 var(--s-6);
}
.brand-greeting {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.brand-title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.brand-tagline {
  font-size: 15px;
  color: var(--text-muted);
}

/* Score panel — slightly richer treatment (this IS the primary dashboard moment) */
.score-panel {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-6);
  background:
    radial-gradient(ellipse 50% 80% at left center, var(--blue-glow-soft), transparent 60%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-6);
  margin: var(--s-6) 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 12px 32px -12px rgba(0,0,0,0.3);
}
@media (max-width: 820px) {
  .score-panel { grid-template-columns: 1fr; }
}
.score-ring {
  width: 180px; height: 180px;
  margin: 0 auto var(--s-3);
  position: relative;
  display: grid; place-items: center;
}
.score-ring-svg { transform: rotate(-90deg); width: 180px; height: 180px; }
.score-ring-bg { fill: none; stroke: var(--border); stroke-width: 8; }
.score-ring-fg { fill: none; stroke: url(#ringGrad); stroke-width: 8; stroke-linecap: round; }
.score-ring-value {
  position: absolute;
  font: 800 44px/1 var(--font-sans);
  color: var(--text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.score-ring-pct {
  position: absolute;
  bottom: 46px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.score-panel-left { text-align: center; padding: var(--s-3) 0; }
.score-rating {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}
.score-note { font-size: 13px; color: var(--text-muted); }

.cat-bars { display: flex; flex-direction: column; gap: 10px; }
.cat-bar {
  display: grid;
  grid-template-columns: 180px 1fr 60px;
  gap: var(--s-3);
  align-items: center;
}
.cat-bar-label { font-size: 13px; color: var(--text); font-weight: 500; }
.cat-bar-track {
  height: 10px;
  background: var(--surface-2);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.cat-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: var(--bar-color, var(--accent));
  box-shadow: 0 0 12px -2px var(--bar-glow, var(--blue-glow-soft));
}
.cat-bar-val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 500;
}
.cat-bar[data-score="high"] { --bar-color: var(--ok); --bar-glow: var(--ok-glow); }
.cat-bar[data-score="mid"] { --bar-color: var(--warn); --bar-glow: var(--warn-glow); }
.cat-bar[data-score="low"] { --bar-color: var(--err); --bar-glow: var(--err-glow); }

/* Stat tiles — slightly more spaced */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
  margin: var(--s-6) 0;
}
.stat-tile {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.stat-tile-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.stat-tile-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.stat-tile-hint {
  font-size: 12px;
  color: var(--text-muted);
}

/* Recs section */
.recs { display: grid; gap: var(--s-3); margin: var(--s-5) 0; }
.rec-card {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--rec-color, var(--accent));
  border-radius: var(--r-md);
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--s-4);
  align-items: center;
}
@media (max-width: 720px) {
  .rec-card { grid-template-columns: 1fr; }
}
.rec-card[data-priority="high"] { --rec-color: var(--err); }
.rec-card[data-priority="mid"] { --rec-color: var(--warn); }
.rec-card[data-priority="low"] { --rec-color: var(--ok); }
.rec-category {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.rec-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; letter-spacing: -0.005em; }
.rec-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.rec-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* Checklist overview (per-section progress) */
.chk-overview { margin: var(--s-5) 0; }
.chk-overview-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-4);
}
.chk-overview-title { font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.chk-overview-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.14em; }

.chk-sections { display: grid; gap: 2px; }
.chk-section {
  display: grid;
  grid-template-columns: 260px 1fr 80px;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.chk-section:hover { border-color: var(--border-hi); background: var(--surface-2); }
.chk-section-name { color: var(--text); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.chk-section-name .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  min-width: 40px;
}
.chk-section-track {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.chk-section-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  border-radius: 3px;
}
.chk-section-val {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Team table */
.team-table {
  margin: var(--s-5) 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.team-row {
  display: grid;
  grid-template-columns: 40px 1fr 120px auto;
  gap: var(--s-3);
  align-items: center;
  padding: 12px var(--s-4);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.team-row:last-child { border-bottom: none; }
.team-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-hi), var(--accent-deep));
  display: grid; place-items: center;
  color: white; font: 700 13px/1 var(--font-sans);
}
.team-meta-name { color: var(--text); font-weight: 600; }
.team-meta-email { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
.team-role {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: center;
}
.team-remove {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: none;
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  transition: color 0.15s, border-color 0.15s;
}
.team-remove:hover { color: var(--err); border-color: var(--err); }

/* Section header for dashboard panels — more breathing room between each */
.panel {
  margin: var(--s-9) 0 var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
.panel-title { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.panel-sub { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; }

/* Brand Dashboard tool downloads — restored after the V3 rewrite dropped
   them. Each card is a static .xlsx download from /tools/. Vertical-stack
   layout (icon + .xlsx pill on top, then title, desc, download CTA below)
   so title + description get full card width. Auto-fits 2-3 columns based
   on viewport. Distinct from the Section content `.tool-card` pattern
   which is for tool *recommendations*. */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.tool-dl-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s;
}
.tool-dl-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -10px rgba(0,0,0,0.45);
}
.tool-dl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}
.tool-dl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.10);
  color: #22c55e;
  flex-shrink: 0;
}
.tool-dl-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.tool-dl-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: var(--s-2);
}
.tool-dl-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: var(--s-4);
  flex: 1; /* push the CTA to the bottom of the card */
}
.tool-dl-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text);
  letter-spacing: -0.005em;
  align-self: flex-start;
  transition: gap 0.15s, color 0.15s;
}
.tool-dl-cta svg { transition: transform 0.15s; }
.tool-dl-card:hover .tool-dl-cta {
  color: var(--blue-hi);
  gap: 12px;
}
.tool-dl-card:hover .tool-dl-cta svg { transform: translateY(1px); }

/* ============================================================
   Share tiles — shared component used by the dashboard's
   "Share the Health Check" panel and (future) in-section share
   blocks. Inline-icon + label pill with hover lift, mirrors the
   footer social-link pattern but at CTA scale.
   ============================================================ */
.share-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 0 var(--s-5);
}
.share-tile {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.15s, background 0.15s;
}
.share-tile:hover {
  border-color: var(--border-hi);
  color: var(--text);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.share-tile-icon {
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.share-tile:hover .share-tile-icon {
  opacity: 1;
}
.share-tile-label {
  flex: 1;
}
/* Copy-link feedback states (set by copyHcShareLink helper) */
.share-tile.is-copied {
  border-color: rgba(74,222,128,0.45);
  color: #4ADE80;
}
.share-tile.is-copied .share-tile-icon { opacity: 1; color: #4ADE80; }
.share-tile.is-error {
  border-color: rgba(239,68,68,0.45);
  color: #fca5a5;
}

/* End-of-section share block — appears after the checklist on every
   content section. Wraps the .share-tiles grid in a header + prose
   intro. Top border separates it from the content above. */
.section-share-block {
  margin: var(--s-7) 0 var(--s-5);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}
.section-share-head {
  max-width: 560px;
  margin: 0 auto var(--s-4);
  text-align: center;
}
.section-share-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.section-share-title {
  font: 700 22px/1.3 var(--font-head);
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.section-share-desc {
  font: 14px/1.55 var(--font-sans);
  color: var(--text-muted);
  margin: 0;
}
.section-share-block .share-tiles {
  max-width: 720px;
  margin: 0 auto;
}

/* Sidebar (.section-aside) compact share — icon-only buttons in a
   horizontal row. Sits below the Navigate / prev / next stack. */
.aside-share-tiles {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.aside-share-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.15s, background 0.15s;
  text-decoration: none;
}
.aside-share-tile:hover {
  border-color: var(--border-hi);
  color: var(--text);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.aside-share-tile svg { opacity: 0.85; transition: opacity 0.15s; }
.aside-share-tile:hover svg { opacity: 1; }
/* Copy feedback states for aside variant (label-less; the SVG colour
   shifts to signal success/failure since there's no text to swap) */
.aside-share-tile.is-copied {
  border-color: rgba(74,222,128,0.45);
  color: #4ADE80;
}
.aside-share-tile.is-error {
  border-color: rgba(239,68,68,0.45);
  color: #fca5a5;
}

/* Utility */
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row--between { justify-content: space-between; }

/* Responsive */
@media (max-width: 960px) {
  .section-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .nav { display: none; }
  .cmdbar { min-width: auto; }
  .cmdbar-text { display: none; }
}
@media (max-width: 640px) {
  .section-grid { grid-template-columns: 1fr; }
  .container { padding: 0 var(--s-4); }
  .hero { padding: var(--s-7) 0 var(--s-6); }
  .topbar-inner { padding: 12px var(--s-4); flex-wrap: wrap; }
  .study-banner { padding: 8px var(--s-4); font-size: 11px; }
  .study-banner .spacer { display: none; }
  .score-panel { grid-template-columns: 1fr; padding: var(--s-4); }
  .cat-bar { grid-template-columns: 120px 1fr 44px; }
  .rec-card { grid-template-columns: 1fr; }
  .chk-section { grid-template-columns: 140px 1fr 50px; }
}

/* ==========================================================================
   PRODUCTION ADDITIONS — Midnight Signal 2.0
   Rules not present in v3/styles.css because mock is standalone.
   Kept minimal; lives after the canonical block so nothing overrides V3.
   ========================================================================== */

/* Legacy var aliases — kept for JS-rendered HTML that still uses old token
   names. Post-rebuild cleanup removes these. */
:root {
  --primary:    var(--text);
  --muted:      var(--text-dim);
  --card:       var(--surface);
  --accent2:    var(--accent-text);
  --accent-secondary: var(--accent-text);
  --sidebar-w:  0;
  --header-h:   56px;
  --font-head:  var(--font-sans);
  --font-body:  var(--font-sans);
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --radius-sm:  var(--r-sm);
  --radius-md:  var(--r-md);
  --radius-lg:  var(--r-lg);
}

/* Page-level wrappers used by production SPA views */
.main { position: relative; z-index: 1; min-height: calc(100vh - var(--header-h)); padding-top: 0; padding-bottom: var(--s-9); }
.content-area { max-width: 1280px; margin: 0 auto; padding: 0 var(--s-4); }
#view-toc, #view-chapters, #view-healthcheck, #view-brand-admin, #view-landing, #view-profile-complete { position: relative; z-index: 1; }

/* Progress bar */
#progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; background: transparent; pointer-events: none; }
#progress-bar .progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.15s linear; border-radius: 0 2px 2px 0; }

/* Password gate overlay full-screen */
#pw-gate { position: fixed; inset: 0; z-index: 9999; background: var(--bg); overflow-y: auto; display: block; padding: 0; }
#pw-gate.hidden { display: none; }
body:has(#pw-gate:not(.hidden)) { overflow: hidden !important; }
body:has(#pw-gate:not(.hidden)) .topbar { display: none !important; }

/* Hide topbar when auth overlay is open. The overlay lives inside <main>
   which creates a z-index:1 stacking context, trapping the overlay below
   the sticky topbar (z:50). Hiding the topbar avoids the modal title
   getting clipped behind it on mobile. */
body:has(.auth-overlay.is-open) .topbar { display: none !important; }

/* Auth overlay — positioning + panel only; V3 covers input/button styles */
/* Defensive base state: pointer-events:none so the full-viewport backdrop
   (z-index 8000, position absolute, inset 0) can never intercept clicks
   when the overlay isn't actively .is-open — even if a stale handler left
   inline display:flex hanging. The .is-open rule below restores
   interaction. Eliminates the "click-stuck" class of bugs. */
.auth-overlay { position: fixed; inset: 0; z-index: 8000; align-items: center; justify-content: center; padding: var(--s-5); display: none; pointer-events: none; }
.auth-overlay.is-open, .auth-overlay[style*="flex"] { display: flex; pointer-events: auto; }
.auth-overlay .auth-backdrop { position: absolute; inset: 0; background: rgba(12,13,17,0.88); backdrop-filter: blur(12px) saturate(1.2); z-index: 0; }
.auth-overlay .auth-panel { position: relative; z-index: 1; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; padding: var(--s-7) var(--s-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 40px 80px -16px rgba(0,0,0,0.6); }
.auth-overlay .auth-close { position: absolute; top: var(--s-3); right: var(--s-3); background: transparent; border: none; color: var(--text-dim); font-size: 24px; cursor: pointer; line-height: 1; padding: 4px 10px; border-radius: 6px; transition: color 0.15s, background 0.15s; }
.auth-overlay .auth-close:hover { color: var(--text); background: var(--surface-2); }
.auth-overlay .auth-state { display: none; }
.auth-overlay .auth-state.is-active { display: block; }
.auth-overlay .auth-head { text-align: center; margin-bottom: var(--s-5); }
.auth-overlay .auth-head h2 { font-family: var(--font-sans); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 0 0 6px; line-height: 1.2; }
.auth-overlay .auth-head p { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.55; }
.auth-overlay .auth-form { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; }
.auth-overlay .auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-overlay .auth-field-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.16em; }
.auth-overlay .auth-field-input { padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; font-family: var(--font-sans); transition: border-color 0.15s, box-shadow 0.15s; width: 100%; box-sizing: border-box; }
.auth-overlay .auth-field-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--blue-glow-soft); }
.auth-overlay .auth-field-input::placeholder { color: var(--text-ghost); }
.auth-overlay .auth-forgot { align-self: flex-end; font-size: 12px; color: var(--text-dim); text-decoration: none; margin-top: -4px; transition: color 0.15s; }
.auth-overlay .auth-forgot:hover { color: var(--accent-text); }
.auth-overlay .auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 10px; background: var(--accent); color: #fff; border: 1px solid rgba(255,255,255,0.1); font: 600 14px/1 var(--font-sans); letter-spacing: -0.005em; cursor: pointer; transition: background 0.15s, box-shadow 0.25s; box-shadow: 0 8px 24px -6px var(--blue-glow), 0 0 0 1px rgba(255,255,255,0.06) inset; margin-top: var(--s-2); }
.auth-overlay .auth-submit:hover { background: var(--accent-hi); }
.auth-overlay .auth-inline-success { margin-top: var(--s-3); padding: var(--s-3); background: color-mix(in srgb,var(--ok) 10%,transparent); border: 1px solid color-mix(in srgb,var(--ok) 40%,transparent); border-radius: 8px; color: var(--ok); font-size: 13px; text-align: center; }
.auth-overlay .auth-inline-error { margin-top: var(--s-3); padding: var(--s-3); background: color-mix(in srgb,var(--err) 10%,transparent); border: 1px solid color-mix(in srgb,var(--err) 40%,transparent); border-radius: 8px; color: var(--err); font-size: 13px; text-align: center; }
.auth-overlay .auth-divider { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.16em; }
.auth-overlay .auth-divider::before, .auth-overlay .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-overlay .auth-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: 10px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-hi); font: 600 14px/1 var(--font-sans); letter-spacing: -0.005em; cursor: pointer; transition: background 0.15s, border-color 0.15s; width: 100%; }
.auth-overlay .auth-google:hover { background: var(--surface); border-color: var(--accent); }
.auth-overlay .auth-consent { display: flex; align-items: flex-start; gap: 12px; margin-top: var(--s-3); font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.auth-overlay .auth-consent input { margin-top: 2px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.auth-overlay .auth-consent a { color: var(--text-muted); text-decoration: underline; }
.auth-overlay .auth-switch { margin-top: var(--s-5); text-align: center; font-size: 13px; color: var(--text-muted); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.auth-overlay .auth-switch a { color: var(--accent-text); font-weight: 600; text-decoration: none; transition: color 0.15s; cursor: pointer; }
.auth-overlay .auth-switch a:hover { color: var(--blue-hi); }
@media (max-width: 540px) {
  .auth-overlay .auth-panel { padding: var(--s-5) var(--s-4); }
  .auth-overlay .auth-head h2 { font-size: 20px; }
}

/* Mobile nav overlay (burger opens a full-page nav) */
#mobile-nav-overlay { position: fixed; inset: 0; z-index: 900; background: var(--bg); display: none; overflow-y: auto; padding: var(--s-6) var(--s-4); }
#mobile-nav-overlay.open { display: block; }
#mobile-nav-overlay .mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-6); padding: 0 var(--s-2); }
#mobile-nav-overlay .mobile-nav-close { background: transparent; border: none; color: var(--text); font-size: 28px; cursor: pointer; line-height: 1; padding: 4px 12px; }
#mobile-nav-overlay .mobile-nav-section { margin-bottom: var(--s-4); }
#mobile-nav-overlay .mobile-nav-section a { display: block; padding: var(--s-3) var(--s-4); color: var(--text); border-radius: var(--r-md); margin-bottom: 4px; text-decoration: none; font-size: 15px; }
#mobile-nav-overlay .mobile-nav-section a:hover { background: var(--surface-2); }

/* SPA view switching — script.js manages display via inline style.
   Every chapter emits inline style="display:none"; showSection clears the
   inline to reveal. Don't add a .chapter {display:none} rule here — it
   would defeat the inline-clear pattern. */

/* Topbar burger — appears at the SAME breakpoint that hides the topbar
   nav (960px), so there's never a dead zone where users have neither the
   nav links nor the burger. Previously: nav hid at 960px, burger appeared
   at 720px → 240px window of invisible navigation. */
.topbar-burger { display: none; background: transparent; border: none; color: var(--text); padding: 8px; cursor: pointer; margin-left: auto; }
@media (max-width: 960px) {
  .topbar-burger { display: inline-flex; align-items: center; }
  .topbar .nav { display: none; }
  .topbar .nav-search { display: none; }
  #auth-signin-btn, #auth-user-menu { display: none !important; }
}

/* Auth user menu + dropdown (lives in topbar) */
.auth-user-menu { position: relative; }
.auth-user-name { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--border-hi); border-radius: 8px; color: var(--text); font: 600 13px/1 var(--font-sans); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.auth-user-name:hover { background: var(--surface-2); border-color: var(--accent); }
.auth-user-name::after { content: "▾"; font-size: 10px; color: var(--text-dim); margin-left: 2px; }
.auth-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border-hi); border-radius: var(--r-md); min-width: 140px; padding: 4px; box-shadow: 0 12px 32px -8px rgba(0,0,0,0.4); z-index: 60; }
.auth-dropdown a { display: block; padding: 10px 14px; color: var(--text-muted); font-size: 13px; text-decoration: none; border-radius: var(--r-sm); transition: background 0.15s, color 0.15s; }
.auth-dropdown a:hover { background: var(--surface-2); color: var(--text); }

/* Intro animation helper (lives on <html>) — controls masthead/pitch transitions */
html.intro-playing .public-masthead { position: fixed; inset: 0; z-index: 100; background: var(--bg); padding: var(--s-6); min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; animation: mastheadExit 2.6s cubic-bezier(0.4,0,0.2,1) forwards; }
html.intro-playing .public-pitch { opacity: 0; transform: translateY(24px); animation: pitchEnter 1.4s 2.4s cubic-bezier(0.16,1,0.3,1) forwards; }
html.intro-playing .topbar { opacity: 0; transform: translateY(-8px); animation: headerEnter 1s 3.0s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes mastheadExit { 0%,50% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-40px); pointer-events: none; } }
@keyframes pitchEnter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes headerEnter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  html.intro-playing .public-masthead, html.intro-playing .public-pitch, html.intro-playing .topbar { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Public masthead (default state — hidden outside intro) */
.public-masthead { display: none; }
.public-zone-divider { display: none; }

/* ============================================================
   Gate SEO below-fold content (restored from pre-MS-2.0 head.html)
   Classes: .gate-seo, .stats-bar, .seo-features, .big-quote,
   .section-viz, .section-typewriter, .section-card (gate variant)
   ============================================================ */
/* Section dividers */
.gate-seo .seo-divider-auto{width:100%;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(32,128,212,0.25) 50%,transparent 100%);margin:56px auto;border-radius:1px}
/* Animated section headers */
.section-viz{width:100%;height:100px;margin:0 0 -4px;display:flex;align-items:center;justify-content:center}
#pw-gate.js-animate .section-viz{opacity:0;transform:translateY(24px);transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.section-viz.is-visible{opacity:1;transform:translateY(0)}
.section-viz svg{width:100%;height:100px;overflow:visible}
/* Typewriter header */
.section-typewriter{width:100%;height:48px;margin:0 0 -4px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:clamp(12px,2.5vw,15px);font-weight:500;letter-spacing:0.15em;text-transform:uppercase}
#pw-gate.js-animate .section-typewriter{opacity:0;transform:translateY(16px);transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1)}
.section-typewriter.is-visible{opacity:1;transform:translateY(0)}
.section-typewriter .tw-text{display:inline;border-right:2px solid #2080D4;padding-right:4px;animation:twBlink 0.7s step-end infinite}
@keyframes twBlink{0%,100%{border-color:#2080D4}50%{border-color:transparent}}
.section-viz .viz-line{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--dash-len,600);stroke-dashoffset:var(--dash-len,600);transition:stroke-dashoffset 1.4s cubic-bezier(0.16,1,0.3,1)}
.section-viz.is-visible .viz-line{stroke-dashoffset:0}
.section-viz .viz-dot{r:0;transition:r 0.4s cubic-bezier(0.16,1,0.3,1)}
.section-viz.is-visible .viz-dot{r:3}
.section-viz .viz-check{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset 0.35s cubic-bezier(0.16,1,0.3,1)}
.section-viz.is-visible .viz-check{stroke-dashoffset:0}
.section-viz .viz-bar{transform:scaleY(0);transform-origin:bottom;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1)}
.section-viz.is-visible .viz-bar{transform:scaleY(1)}
.section-viz .viz-slider{stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1s cubic-bezier(0.16,1,0.3,1)}
.section-viz.is-visible .viz-slider{stroke-dashoffset:0}
@media(max-width:768px){
  #pw-gate{padding:32px 16px 80px;justify-content:flex-start;box-sizing:border-box}
  #pw-gate .gate-inner{max-width:100%}
  #pw-gate .gate-two-col{flex-direction:column;gap:28px}
  #pw-gate .gate-col-left{width:100%}
  #pw-gate .gate-col-right{flex:none!important;width:100%!important;max-width:100%!important;border-left:none!important;padding-left:0!important;box-sizing:border-box;border-top:1px solid rgba(255,255,255,0.06);padding-top:28px}
  #pw-gate .gate-inner{max-width:100%;box-sizing:border-box}
  #pw-gate .gate-about{max-width:100%;margin-left:auto;margin-right:auto}
  #pw-gate .gate-logo-icon{width:90px!important}
  #pw-gate .gate-title{font-size:clamp(26px,8vw,36px)}
  #pw-gate .gate-subtitle{font-size:11px;letter-spacing:0.12em;margin-bottom:10px}
  #pw-gate .gate-author{font-size:10px;margin-bottom:20px}
  #pw-gate .gate-about-text{font-size:15px}
  #pw-gate .gate-about-label{font-size:10px}
  #pw-gate form{max-width:100%}
  #pw-gate .gate-fields{max-width:100%}
  /* Landing page mobile */
  #landing-hero-cols{flex-direction:column!important;gap:20px!important;padding:40px 16px 40px!important}
  #landing-right-col{flex:none!important;width:100%!important;border-left:none!important;padding-left:0!important}
  .gate-seo .seo-features{grid-template-columns:1fr}
}

.gate-seo{max-width:740px;margin:80px auto 0;padding:0 24px;color:#9CA3AF;font-family:'Inter',system-ui,sans-serif;text-align:left}
.gate-seo .seo-section-alt{padding:40px 0;margin:0 -24px;padding-left:24px;padding-right:24px;background:rgba(255,255,255,0.015);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06)}
.gate-seo h2{font-family:'Inter',system-ui,sans-serif;font-size:clamp(22px,4vw,28px);font-weight:700;color:#E5E7EB;margin:56px 0 16px;letter-spacing:-0.03em}
.gate-seo h2.seo-h2-blue{color:#2080D4}
.gate-seo .seo-stat{color:#2080D4;font-weight:700}
.gate-seo h2:first-child{margin-top:0}
.gate-seo h3{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;color:#2080D4;margin:36px 0 16px;text-transform:uppercase;letter-spacing:0.15em;display:inline-block;padding:6px 16px;border:1px solid rgba(32,128,212,0.25);border-radius:8px;background:rgba(32,128,212,0.06)}
.gate-seo .seo-section-group h3{margin:24px 0 14px}
.gate-seo p{font-size:17px;line-height:1.8;margin:0 0 16px;color:#9CA3AF}
.gate-seo strong{color:#E5E7EB}
/* Link colour inside .gate-seo — accent blue for inline text links only.
   Buttons are excluded via :not() so .btn--primary retains its white text
   on blue background. Without this the bottom "Create Your Free Account"
   CTA rendered as blue text on blue button (invisible). */
.gate-seo a:not(.btn):not(.btn--primary):not(.btn--ghost):not(.btn-google){color:#2080D4;text-decoration:none;transition:color 0.3s cubic-bezier(0.16,1,0.3,1)}
.gate-seo a:not(.btn):not(.btn--primary):not(.btn--ghost):not(.btn-google):hover{color:#3D96E8;text-decoration:none}
.gate-seo .seo-sections{margin:24px 0}
.gate-seo .seo-section-group{margin:20px 0}
.gate-seo .seo-section-item{padding:8px 0 8px 16px;border-left:3px solid rgba(32,128,212,0.3);margin:8px 0}
.gate-seo .seo-section-item strong{color:#E5E7EB;font-size:14px}
.gate-seo .seo-section-item span{color:#7C8493;font-size:13px;display:block;margin-top:2px}
.gate-seo .stats-bar{position:relative;display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin:48px 0;padding:40px 20px;background:transparent;border:none;border-radius:0}

.gate-seo .stat-item{position:relative;z-index:1}
.gate-seo .stat-item{text-align:center;min-width:100px}
.gate-seo .stat-item .stat-num{font-family:'Inter',system-ui,sans-serif;font-size:clamp(28px,5vw,36px);font-weight:800;color:#2080D4;display:block;line-height:1.2;letter-spacing:-0.03em}
.gate-seo .stat-item .stat-label{font-family:'JetBrains Mono',monospace;font-size:10px;color:#7C8493;text-transform:uppercase;letter-spacing:0.15em;margin-top:6px;display:block}
.gate-seo .section-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 24px;align-items:start}
/* Landing: stretch cards to equal height within each row (cards in the
   same row share the tallest sibling's height). Fixes the uneven-height
   issue where cards aligned to their own content. Gate kept as start. */
#landing-seo-content .section-cards { align-items: stretch; }
/* Legacy gate section-card surface (flat gradient + category border-left).
   Scoped to #gate-seo-content so landing-public can use the new glow
   treatment. Remove this entire legacy block when gate.html is deleted. */
#gate-seo-content .section-card{padding:20px 20px 20px 24px;background:linear-gradient(135deg,rgba(32,128,212,0.06) 0%,transparent 60%);border:none;border-radius:0 12px 12px 0;display:flex;flex-direction:column;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),border-color 0.4s cubic-bezier(0.16,1,0.3,1),box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),background 0.4s cubic-bezier(0.16,1,0.3,1)}
#gate-seo-content .section-card:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 3px 0 12px -4px rgba(32,128,212,0.3);background:linear-gradient(135deg,rgba(32,128,212,0.1) 0%,transparent 60%)}
/* Category-specific gradients (gate only) */
#gate-seo-content .section-card.cat-business{background:linear-gradient(135deg,rgba(32,128,212,0.06) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-business:hover{background:linear-gradient(135deg,rgba(32,128,212,0.12) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-growth{background:linear-gradient(135deg,rgba(22,163,74,0.06) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-growth:hover{background:linear-gradient(135deg,rgba(22,163,74,0.12) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-brand{background:linear-gradient(135deg,rgba(139,92,246,0.06) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-brand:hover{background:linear-gradient(135deg,rgba(139,92,246,0.12) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-retention{background:linear-gradient(135deg,rgba(245,158,11,0.06) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-retention:hover{background:linear-gradient(135deg,rgba(245,158,11,0.12) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-scale{background:linear-gradient(135deg,rgba(6,182,212,0.06) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-scale:hover{background:linear-gradient(135deg,rgba(6,182,212,0.12) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-numbers{background:linear-gradient(135deg,rgba(239,68,68,0.06) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-numbers:hover{background:linear-gradient(135deg,rgba(239,68,68,0.12) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-exit{background:linear-gradient(135deg,rgba(236,72,153,0.06) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-exit:hover{background:linear-gradient(135deg,rgba(236,72,153,0.12) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-foundation{background:linear-gradient(135deg,rgba(107,114,128,0.06) 0%,transparent 60%)}
#gate-seo-content .section-card.cat-foundation:hover{background:linear-gradient(135deg,rgba(107,114,128,0.12) 0%,transparent 60%)}
.gate-seo .section-card .gate-section-title{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;min-height:30px}
.gate-seo .section-card .gate-section-icon{margin-top:2px}
.gate-seo .section-card strong{font-family:'Inter',system-ui,sans-serif;color:#E5E7EB;font-size:16px;font-weight:600;line-height:1.3;margin:0;padding:0}
.gate-seo .section-card .gate-section-icon{width:30px;height:30px;display:block;flex-shrink:0}
.gate-seo .cat-foundation .gate-section-icon{filter:brightness(0) invert(.7) sepia(.15) saturate(1) hue-rotate(0deg)}
.gate-seo .cat-business .gate-section-icon{filter:brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(1200%) hue-rotate(186deg) brightness(95%) contrast(92%)}
.gate-seo .cat-growth .gate-section-icon{filter:brightness(0) saturate(100%) invert(75%) sepia(24%) saturate(818%) hue-rotate(88deg) brightness(98%) contrast(90%)}
.gate-seo .cat-brand .gate-section-icon{filter:brightness(0) saturate(100%) invert(62%) sepia(19%) saturate(1565%) hue-rotate(220deg) brightness(95%) contrast(96%)}
.gate-seo .cat-retention .gate-section-icon{filter:brightness(0) saturate(100%) invert(73%) sepia(43%) saturate(911%) hue-rotate(349deg) brightness(100%) contrast(92%)}
.gate-seo .cat-scale .gate-section-icon{filter:brightness(0) saturate(100%) invert(68%) sepia(70%) saturate(585%) hue-rotate(146deg) brightness(97%) contrast(93%)}
.gate-seo .cat-numbers .gate-section-icon{filter:brightness(0) invert(42%) sepia(98%) saturate(2000%) hue-rotate(342deg) brightness(100%) contrast(96%)}
.gate-seo .cat-exit .gate-section-icon{filter:brightness(0) saturate(100%) invert(63%) sepia(30%) saturate(2281%) hue-rotate(292deg) brightness(96%) contrast(95%)}
.gate-seo .section-card span{color:#9CA3AF;font-size:14px;line-height:1.7;flex:1}
.gate-seo .section-cards.single-col{grid-template-columns:1fr}
/* Category border-left stripes (gate only). Remove when gate.html goes. */
#gate-seo-content .section-card.cat-business{border-left:3px solid #2080D4}
#gate-seo-content .section-card.cat-growth{border-left:3px solid #16A34A}
#gate-seo-content .section-card.cat-brand{border-left:3px solid #8B5CF6}
#gate-seo-content .section-card.cat-retention{border-left:3px solid #F59E0B}
#gate-seo-content .section-card.cat-scale{border-left:3px solid #06B6D4}
#gate-seo-content .section-card.cat-numbers{border-left:3px solid #EF4444}
#gate-seo-content .section-card.cat-exit{border-left:3px solid #EC4899}
#gate-seo-content .section-card.cat-foundation{border-left:3px solid #6B7280}
.gate-seo .two-col-block{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin:32px 0}
.gate-seo .two-col-block .col-text{}
.gate-seo .two-col-block .col-visual{background:#161620;border:1px solid rgba(255,255,255,0.06);border-radius:20px;padding:24px;text-align:center}
.gate-seo .big-quote{font-size:clamp(1.3rem,3vw,1.6rem);font-style:italic;color:#E5E7EB;font-family:Georgia,'Times New Roman',serif;line-height:1.6;text-align:left;padding:28px 0;margin:56px 0;border-left:none;background:none}
.gate-seo .big-quote .quote-attr{font-family:'JetBrains Mono',monospace;font-size:11px;color:#7C8493;font-style:normal;margin-top:14px;letter-spacing:0.1em;text-transform:uppercase}
@media(max-width:768px){.gate-seo .stats-bar{gap:20px;padding:24px 16px}.gate-seo .stat-item .stat-num{font-size:24px}.gate-seo .section-cards{grid-template-columns:1fr}.gate-seo .two-col-block{grid-template-columns:1fr}}
.gate-seo .seo-features{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}

/* Landing-public feature cards — glow-surface family. Used on the "Who it's
   for", HC features, and tools lists. No per-category tone (unlike
   section-card), so just a single accent-blue glow. */
.seo-feature {
  padding: var(--s-5);
  background:
    radial-gradient(ellipse 80% 70% at top right,
      color-mix(in srgb, var(--accent) 13%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 100% at bottom left,
      color-mix(in srgb, var(--accent) 5%, transparent) 0%,
      transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 2px rgba(0,0,0,0.2);
}
.seo-feature:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 10px 24px -8px rgba(0,0,0,0.35),
    0 0 32px -6px color-mix(in srgb, var(--accent) 30%, transparent);
}
.seo-feature strong {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.seo-feature span {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Legacy gate .seo-feature surface (flat gradient + border-left stripe).
   Scoped to #gate-seo-content. Remove when gate.html is deleted. */
#gate-seo-content .seo-feature{padding:20px 20px 20px 24px;background:linear-gradient(135deg,rgba(32,128,212,0.06) 0%,transparent 60%);border:none;border-left:3px solid #2080D4;border-radius:0 12px 12px 0;box-shadow:none;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),border-color 0.4s cubic-bezier(0.16,1,0.3,1),box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),background 0.4s cubic-bezier(0.16,1,0.3,1)}
#gate-seo-content .seo-feature:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 3px 0 12px -4px rgba(32,128,212,0.3);background:linear-gradient(135deg,rgba(32,128,212,0.1) 0%,transparent 60%);border-color:transparent}
#gate-seo-content .seo-feature strong{color:#E5E7EB}
#gate-seo-content .seo-feature span{color:#9CA3AF}
.gate-seo .seo-cta{text-align:center;margin:48px 0 32px;padding:36px;background:#161620;border:1px solid rgba(32,128,212,0.2);border-radius:20px}
.gate-seo .seo-cta h3{color:#E5E7EB;margin-top:0}
.gate-seo .seo-cta p{color:#9CA3AF}
.gate-seo .seo-divider{width:100%;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(32,128,212,0.3) 50%,transparent 100%);margin:56px auto;border-radius:1px}
.gate-seo .seo-register{text-align:center;margin:56px 0 24px;padding:36px;background:#161620;border:1px solid rgba(32,128,212,0.2);border-radius:20px;animation:none}
.gate-seo .seo-register h3{font-family:'Inter',system-ui,sans-serif;color:#E5E7EB;margin-top:0;text-transform:none;letter-spacing:-0.02em;display:block;padding:0;border:none;border-radius:0;background:none;font-size:20px;font-weight:700;animation:none}
.gate-seo .seo-register input{font-family:'Inter',system-ui,sans-serif;background:#0D0D12;border:1px solid rgba(255,255,255,0.06);color:#E5E7EB;padding:14px 18px;border-radius:12px;font-size:15px;width:100%;max-width:320px;margin:4px 0;box-sizing:border-box;transition:border-color 0.3s cubic-bezier(0.16,1,0.3,1),box-shadow 0.3s cubic-bezier(0.16,1,0.3,1)}
.gate-seo .seo-register input::placeholder{color:#7C8493}
.gate-seo .seo-register input:focus{border-color:#2080D4;box-shadow:0 0 0 3px rgba(32,128,212,0.15)}
.gate-seo .seo-register button{position:relative;overflow:hidden;background:#2080D4;color:#fff;border:none;padding:14px 28px;border-radius:12px;font-family:'Inter',system-ui,sans-serif;font-size:14px;cursor:pointer;font-weight:600;width:100%;max-width:320px;margin-top:8px;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
.gate-seo .seo-register button:hover{background:#3D96E8;transform:scale(1.03);box-shadow:0 4px 20px rgba(32,128,212,0.35)}
@media(max-width:768px){.gate-seo .seo-features{grid-template-columns:1fr}}

/* ============================================================
   Site footer (restored from pre-MS-2.0 head.html, adapted for no sidebar)
   ============================================================ */
.site-footer{background:var(--bg);color:var(--text-muted);padding:48px 24px 24px;margin-top:64px;position:relative;border-top:1px solid var(--border)}
.site-footer .footer-inner{display:flex;justify-content:space-between;align-items:flex-start;max-width:820px;margin:0 auto;gap:32px}
.site-footer .footer-left{text-align:left}
.site-footer .footer-right{text-align:right;align-self:flex-end}
.site-footer .footer-lockup{font-size:16px;font-weight:700;letter-spacing:.5px;margin-bottom:4px;color:var(--text)}
.site-footer .footer-lockup span{color:var(--accent)}
.site-footer .footer-tagline{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-dim);letter-spacing:.35em;text-transform:uppercase;margin-top:2px;margin-bottom:12px}
.site-footer .footer-author{font-size:13px;color:var(--text-muted);margin-bottom:16px}
.site-footer .footer-links{margin-bottom:12px}
.site-footer .footer-links a{color:var(--accent);font-size:13px;text-decoration:none;margin-right:16px}
.site-footer .footer-links a:hover{text-decoration:underline}
.site-footer .footer-url{font-size:12px;color:var(--text-dim);margin-bottom:8px}
.site-footer .footer-legal{margin-bottom:8px}
.site-footer .footer-legal a{color:var(--text-dim);font-size:12px;text-decoration:none;margin:0 8px}
.site-footer .footer-legal a:hover{color:var(--accent);text-decoration:underline}
.site-footer .footer-copy{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);font-size:11px;color:var(--text-dim);max-width:820px;margin-left:auto;margin-right:auto}
@media(max-width:768px){
  .site-footer .footer-inner{flex-direction:column;text-align:center;align-items:center;gap:20px}
  .site-footer .footer-left,.site-footer .footer-right{text-align:center}
}

/* ============================================================
   HC Stage Selection (Full diagnostic step 1)
   ============================================================ */
.hc-stage-shell { text-align: center; }
.hc-stage-shell h2 { font-size: clamp(26px, 3.5vw, 36px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin: 16px 0 8px; }
.hc-stage-copy { color: var(--text-muted); font-size: 15px; line-height: 1.6; max-width: 520px; margin: 0 auto 32px; }
/* Mirror V3 .stages pattern: 5 cards equal-fit (auto-fit minmax handles
   any number of stages cleanly, wraps on narrow viewports). */
.hc-stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
.hc-stage-card {
  display: flex; flex-direction: column;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: inherit; cursor: pointer; font: inherit;
  position: relative;
  min-height: 220px;
  text-align: left; /* explicit — .hc-stage-shell parent is centred */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 6px rgba(0,0,0,0.15);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.25s;
}
.hc-stage-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 10px 24px -8px rgba(0,0,0,0.35);
}
.hc-stage-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Head row: icon on the left, oversized stage number on the right.
   Same visual rhythm as the home-page step cards + V3 .stage pattern. */
.hc-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.hc-stage-icon {
  display: inline-flex;
  align-items: center;
  color: var(--accent-text);
  flex-shrink: 0;
}
.hc-stage-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}
.hc-stage-num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-ghost, var(--text-dim));
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hc-stage-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--s-2);
}
.hc-stage-name {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
}
.hc-stage-desc {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}
/* Per-stage meta: question count + time estimate. Renders below the
   description in mono / dim treatment, matching the kicker vocabulary
   used elsewhere on the card so it reads as metadata, not body copy. */
.hc-stage-meta {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.hc-progress-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; text-align: left; }
.hc-back-link {
  background: none; border: none; color: var(--text-muted); font: 600 13px/1 var(--font-sans);
  padding: 6px 10px; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.hc-back-link:hover { background: var(--surface); color: var(--text); }
.hc-progress-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent-text); letter-spacing: 0.15em; text-transform: uppercase; }
@media (max-width: 640px) { .hc-stage-grid { grid-template-columns: 1fr; } }

/* Resume-or-start-fresh prompt (replaces brittle native confirm() dialog
   for cross-device draft resume). Inherits .hc-stage-shell layout (centred,
   stacked) — adds button row + fineprint. */
.hc-resume-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin: 8px auto 16px; max-width: 520px;
}
.hc-resume-btn { min-width: 180px; }
.hc-resume-fineprint {
  color: var(--text-dim); font-size: 13px; line-height: 1.5;
  max-width: 460px; margin: 0 auto; font-style: italic;
}
@media (max-width: 480px) {
  .hc-resume-actions { flex-direction: column; align-items: stretch; max-width: 320px; }
  .hc-resume-btn { width: 100%; }
}

/* Save-progress button states — pre-2026-05 it lied about success.
   Now waits for the server response and surfaces failures explicitly. */
.hc-save-btn.is-saving { opacity: 0.7; cursor: wait; }
.hc-save-btn.is-save-failed {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

/* Intro-page resume reassurance — appears under the CTA when a user has
   an in-progress draft. Tells returning users their save survived before
   they have to click through to find out. */
.hc-tier-resume-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
  justify-content: center;
}
.hc-tier-resume-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  flex-shrink: 0;
}

/* ============================================================
   Index view header
   ============================================================ */
.index-head {
  max-width: 780px;
  margin: var(--s-8) auto var(--s-7);
  text-align: center;
}
.index-head-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding: 6px 14px;
  border: 1px solid rgba(0,120,212,0.25);
  border-radius: 999px;
  background: rgba(0,120,212,0.06);
  margin-bottom: var(--s-4);
}
.index-title {
  font-size: clamp(36px, 4.8vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text);
  text-wrap: balance;
  margin: 0 0 var(--s-4);
}
.index-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto var(--s-5);
}
.index-head .cta-row { justify-content: center; }

/* ============================================================
   Section "Mark as read" card (single-row checklist, sits above the action
   checklist so the reading -> executing flow reads top-down).
   Reuses .checklist / .checklist-items so visual weight matches.
   ============================================================ */
.section-read-card { margin-top: var(--s-6); margin-bottom: var(--s-3); }
.section-read-item { outline: none; }
.section-read-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.section-read-status .section-read-state-default { color: var(--text-dim); }
.section-read-status .section-read-state-done { display: none; color: #4ADE80; }

/* Read state: tick the checkbox + swap the status pill to green "Read" */
.section-read-item.is-read .checklist-check {
  background: #4ADE80;
  border-color: #4ADE80;
}
.section-read-item.is-read .checklist-check::after {
  content: "";
  position: absolute;
  left: 5px; top: 2px;
  width: 4px; height: 9px;
  border: solid #0A0A0F;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.section-read-item.is-read .checklist-text {
  color: var(--text-dim);
}
.section-read-card:has(.section-read-item.is-read) .section-read-state-default { display: none; }
.section-read-card:has(.section-read-item.is-read) .section-read-state-done { display: inline; }

/* ============================================================
   Brand page: Category accordion (Progress by category)
   ============================================================ */
.brand-groups { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }

.brand-group {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.brand-group:hover { border-color: var(--border-hi); }
.brand-group.is-open {
  border-color: rgba(0,120,212,0.3);
  box-shadow: 0 10px 32px -12px rgba(0,0,0,0.5);
}

/* Head */
.brand-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: center;
  width: 100%;
  padding: var(--s-4) var(--s-5);
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.brand-group-head:hover { background: rgba(255,255,255,0.02); }
.brand-group-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.bg-head-lead { display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; flex-wrap: wrap; }
.bg-head-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--accent-text);
}
.bg-head-title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.bg-head-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.bg-head-metrics { display: flex; align-items: center; gap: var(--s-5); }

.bg-metric { display: flex; flex-direction: column; gap: 4px; min-width: 52px; }
.bg-metric-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.bg-metric-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.bg-metric-empty .bg-metric-value { color: var(--text-dim); font-weight: 400; }

.bg-metric-progress { min-width: 160px; }
.bg-progress-wrap { display: flex; align-items: center; gap: 10px; }
.bg-progress-track {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.bg-progress-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.bg-progress-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.bg-chevron {
  font-size: 14px;
  color: var(--text-dim);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.brand-group.is-open .bg-chevron { transform: rotate(180deg); color: var(--accent-text); }

/* Body */
.brand-group-body {
  padding: 0 var(--s-5) var(--s-5);
  border-top: 1px solid var(--border);
  margin-top: -1px;
}
.brand-group-priority {
  margin: var(--s-4) 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.brand-group-rows { display: flex; flex-direction: column; gap: 8px; }

/* Brand Section Row (.bsr) */
/* Columns: tag · title · HC score · read chip · checklist bar · arrow */
.bsr {
  display: grid;
  grid-template-columns: 58px 1fr 64px 82px 180px 24px;
  gap: var(--s-4);
  align-items: center;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.bsr:hover {
  transform: translateX(2px);
  border-color: rgba(0,120,212,0.3);
  background: var(--surface);
}
.bsr-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent-text);
  background: rgba(0,120,212,0.08);
  padding: 4px 8px;
  border-radius: 6px;
  text-align: center;
}
.bsr-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bsr-read {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  text-align: center;
}
.bsr-read.is-read {
  background: rgba(74,222,128,0.15);
  border-color: rgba(74,222,128,0.35);
  color: #4ADE80;
}
.bsr-checklist { display: flex; align-items: center; gap: 10px; }
/* Bumped contrast: surface-2 was nearly identical to the dark .bsr bg
   so the empty track was invisible at 0% fill — Nira reported it as
   "text fractions, not visual bars". Now a darker bg + 1px border
   ensures the empty track is always readable. */
.bsr-track {
  flex: 1;
  height: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  min-width: 80px;
}
.bsr-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
}
.bsr-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.bsr-arrow {
  font-size: 14px;
  color: var(--text-dim);
  transition: color 0.15s, transform 0.15s;
}
.bsr:hover .bsr-arrow { color: var(--accent-text); transform: translateX(2px); }

.brand-group-more {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
.brand-group-more a {
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 600;
}
.brand-group-more a:hover { text-decoration: underline; }

/* Per-section HC score badge — small mono pill, tone-coloured by band.
   Set via inline --hc-tone CSS var (green/amber/red). The "—" empty state
   means the section wasn't assessed at the user's selected stage. */
.bsr-hc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--hc-tone, var(--text-dim)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--hc-tone, var(--text-dim)) 32%, transparent);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hc-tone, var(--text-dim));
  text-align: center;
}
.bsr-hc-na, .bsr-hc-empty {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  font-weight: 500;
}
.bsr-hc-empty { border: none; }

@media (max-width: 820px) {
  .brand-group-head { grid-template-columns: 1fr; }
  .bg-head-metrics { justify-content: flex-start; flex-wrap: wrap; gap: var(--s-4); }
  .bg-metric-progress { min-width: 120px; }
  /* Mobile: drop the HC badge to a second row inside the title block to
     keep the row scannable on small screens. */
  .bsr { grid-template-columns: 58px 1fr 64px 82px 24px; gap: var(--s-3); }
  .bsr-checklist { grid-column: 1 / -1; }
}

/* ============================================================
   Index: sticky jump-nav + per-section state indicator
   ============================================================ */
.index-jumpnav {
  position: sticky;
  top: 62px;
  z-index: 40;
  display: flex;
  gap: 6px;
  padding: 10px 0;
  margin: 0 0 var(--s-4);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
}
.index-jumpnav::-webkit-scrollbar { height: 4px; }
.index-jumpnav::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }
.index-jump {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.index-jump:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-hi); }
.index-jump:active { transform: translateY(1px); }
.index-jump[data-jump="foundation"]:hover { color: var(--g-foundation); border-color: var(--g-foundation); }
.index-jump[data-jump="business"]:hover  { color: var(--g-business);   border-color: var(--g-business); }
.index-jump[data-jump="growth"]:hover    { color: var(--g-growth);     border-color: var(--g-growth); }
.index-jump[data-jump="brand"]:hover     { color: var(--g-brand);      border-color: var(--g-brand); }
.index-jump[data-jump="retention"]:hover { color: var(--g-retention);  border-color: var(--g-retention); }
.index-jump[data-jump="scale"]:hover     { color: var(--g-scale);      border-color: var(--g-scale); }
.index-jump[data-jump="numbers"]:hover   { color: var(--g-numbers);    border-color: var(--g-numbers); }
.index-jump[data-jump="exit"]:hover      { color: var(--g-exit);       border-color: var(--g-exit); }

/* Section-state pill on each section-card (hydrated by JS from read +
   checklist state; falls back to "Not started" when signed out). */
.section-state {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  line-height: 1.2;
}
.section-state-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.section-state-read.is-done {
  color: #4ADE80;
  border-color: rgba(74,222,128,0.35);
  background: rgba(74,222,128,0.1);
}
.section-state-checklist {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}
.section-state-bar {
  width: 42px;
  height: 3px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.section-state-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s;
}
.section-state-bar-fill.is-mid { background: #FB923C; }
.section-state-bar-fill.is-weak { background: #F87171; }
.section-state-bar-fill.is-done { background: #4ADE80; }

/* Card gets a subtle corner indicator when the section is fully read + all
   checklist items ticked. Keeps the card visually calm but rewards completion. */
.section-card.is-complete {
  border-color: rgba(74,222,128,0.3);
  background: linear-gradient(135deg, rgba(74,222,128,0.05) 0%, var(--surface) 60%);
}

@media (max-width: 820px) {
  .index-jumpnav { top: 58px; }
  .section-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .section-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HC question footer (next button + inline status)
   With auto-advance on answer click, the next button is mostly a
   keyboard fallback / "See results" affordance — it stays disabled
   until the current question has an answer, then turns blue.
   ============================================================ */
.hc-footer-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.hc-inline-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hc-next-btn {
  min-width: 180px;
  justify-content: center;
}
.hc-next-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Save progress button — Full HC only. Secondary/ghost style so it
   doesn't compete with the primary Next/See results button. Confirms
   the localStorage autosave with a ✓ briefly after click. */
.hc-save-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 160px; justify-content: center;
  padding: 8px 16px;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hc-save-btn:hover { border-color: var(--border-hi); color: var(--text); background: var(--surface); }
.hc-save-btn.is-saved { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.hc-save-btn .icon { width: 14px; height: 14px; }
.hc-save-timestamp {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.14em;
  margin-top: -4px;
}

/* ============================================================
   HC results page (post-submit)
   ============================================================ */
.hc-results-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-5);
}

.hc-results-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-7);
  align-items: center;
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
  /* Kicker + title + tagline on the left — the shell is otherwise
     centre-aligned (see .hc-shell in the shared layout block). */
  text-align: left;
}
.hc-results-copy { margin-left: 0; }
.hc-results-hero h2 {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 6px 0 var(--s-3);
  line-height: 1.05;
}
.hc-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.hc-results-copy {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 420px;
  margin: 0;
}

/* Score gauge */
.hc-gauge {
  position: relative;
  width: 180px;
  height: 180px;
  flex-shrink: 0;
  background:
    conic-gradient(var(--accent) calc(var(--hc-score, 0) * 1%), var(--surface-2) 0%);
  border-radius: 50%;
  padding: 8px;
  box-shadow:
    0 0 0 1px var(--border) inset,
    0 18px 40px -18px rgba(0,120,212,0.4);
}
.hc-gauge-ring {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--surface);
}
.hc-gauge-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  background: var(--surface);
}
.hc-gauge-score {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hc-gauge-rating {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  max-width: 130px;
  line-height: 1.3;
}

/* Two-column grid for breakdown + recs */
.hc-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}
.hc-results-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.hc-results-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.01em;
}

/* Category bars */
.hc-bars { display: flex; flex-direction: column; gap: 12px; }
.hc-bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 44px;
  gap: var(--s-3);
  align-items: center;
}
.hc-bar-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.hc-bar-track {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.hc-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}
.hc-bar-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Weakest areas */
.hc-weak-list { display: flex; flex-direction: column; gap: var(--s-3); }
.hc-weak-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.hc-weak-item:last-child { border-bottom: none; }
.hc-weak-item strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.hc-weak-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.hc-link-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.hc-link-btn:hover {
  color: var(--accent-text);
  border-color: var(--accent);
  background: rgba(0,120,212,0.08);
}

/* Recommended sections */
.hc-rec-list { display: flex; flex-direction: column; gap: 8px; }
.hc-rec-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: 600 13px/1.4 var(--font-sans);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.hc-rec-chip::after {
  content: "→";
  margin-left: 12px;
  color: var(--text-dim);
  transition: color 0.15s, transform 0.15s;
}
.hc-rec-chip:hover {
  transform: translateX(2px);
  border-color: rgba(0,120,212,0.3);
  background: var(--surface);
}
.hc-rec-chip:hover::after { color: var(--accent-text); transform: translateX(2px); }

/* Quick HC signup form (in results) */
.hc-signup-form { display: flex; flex-direction: column; gap: 10px; margin-top: var(--s-4); }
.hc-signup-form input {
  font-family: var(--font-sans);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hc-signup-form input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,120,212,0.15);
}
.hc-signup-form button { margin-top: 4px; }
.hc-form-error {
  color: var(--err);
  font-size: 13px;
  margin-bottom: 6px;
}

/* Action buttons */
.hc-results-actions {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.hc-results-actions .btn-primary,
.hc-results-actions .btn-outline { /* legacy class names emitted by JS */ }
.hc-results-actions .btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 12px 22px;
  border-radius: 10px;
  font: 600 14px/1 var(--font-sans);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.hc-results-actions .btn-primary:hover { background: var(--accent-hi); transform: translateY(-1px); }
.hc-results-actions .btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-hi);
  padding: 12px 22px;
  border-radius: 10px;
  font: 600 14px/1 var(--font-sans);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.hc-results-actions .btn-outline:hover { background: var(--surface); border-color: var(--accent); }

@media (max-width: 720px) {
  .hc-results-hero { grid-template-columns: 1fr; text-align: center; }
  .hc-results-hero .hc-gauge { margin: 0 auto; }
  .hc-results-grid { grid-template-columns: 1fr; }
  .hc-bar-row { grid-template-columns: 90px 1fr 40px; }
  .hc-weak-item { flex-direction: column; align-items: flex-start; }
  .hc-results-actions { flex-direction: column; align-items: stretch; }
  .hc-results-actions button { width: 100%; }
}

/* Brand: progress-over-time chart card */
.brand-chart-card {
  background:
    linear-gradient(135deg, rgba(32,128,212,0.06) 0%, transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-top: var(--s-3);
  margin-bottom: var(--s-5);
}

/* ============================================================
   Inline icons in body content (e.g. compare-card labels). The SVG
   files are exported with hardcoded black strokes — without a filter
   they're invisible on the dark theme. Tint to text colour by default;
   compare-card variants override to inherit the variant tone.
   ============================================================ */
img.inline-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 6px;
  filter: brightness(0) invert(1) opacity(0.85);
}
.compare-card--good img.inline-icon { filter: brightness(0) saturate(100%) invert(72%) sepia(67%) saturate(412%) hue-rotate(80deg) brightness(94%) contrast(85%); }
.compare-card--bad img.inline-icon { filter: brightness(0) saturate(100%) invert(58%) sepia(67%) saturate(2700%) hue-rotate(330deg) brightness(96%) contrast(95%); }
.compare-card--warning img.inline-icon { filter: brightness(0) saturate(100%) invert(70%) sepia(57%) saturate(990%) hue-rotate(355deg) brightness(98%) contrast(96%); }
.compare-card--neutral img.inline-icon { filter: brightness(0) invert(1) opacity(0.7); }

/* Legacy button class aliases. Older JS strings + HTML (healthcheck.js,
   results.html, healthcheck.html, some templates) use .btn-primary /
   .btn-outline (single dash). Keep those working so buttons don't render
   as default browser grey. Style matches .btn--primary / .btn--ghost. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  font: 600 14px/1 var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.25s, transform 0.15s;
  box-shadow: 0 8px 24px -6px var(--blue-glow), 0 0 0 1px rgba(255,255,255,0.06) inset;
  text-decoration: none;
}
.btn-primary:hover { background: var(--accent-hi); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary svg { flex-shrink: 0; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-hi);
  font: 600 14px/1 var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
}
.btn-outline:hover { background: var(--surface); border-color: var(--accent); }

/* ============================================================
   Profile-complete form fields (post-signup persona pick).
   .pc-section / .pc-label / .pc-input / .pc-select had no CSS so the
   country dropdown + role/category/etc selects fell back to native
   browser styling — bright grey on the dark theme.
   ============================================================ */
/* Form-field blocks left-align to the .profile-view container so they
   line up with the persona cards above. The 520px cap keeps line-length
   readable for input fields. */
.pc-section { max-width: 520px; margin: 0 0 var(--s-5); }
/* Form labels are reading copy, not metadata — Inter sans, sentence case.
   MS 2.0 reserves JetBrains Mono for kickers/numbers/category badges; using
   it on every dropdown label made the form hard to scan. */
.pc-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  margin-bottom: 8px;
}
.pc-input,
.pc-select {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: 14px/1.4 var(--font-sans);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.pc-input:focus,
.pc-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,120,212,0.15);
}
.pc-input::placeholder { color: var(--text-dim); }
.pc-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C8493' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.pc-select option { background: var(--surface); color: var(--text); }
.pc-persona-fields { animation: pcFadeIn 0.25s cubic-bezier(0.16,1,0.3,1); }
@keyframes pcFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Profile-complete page — additional missing styles.

   The template uses .profile-view as the wrapper (already has
   max-width + padding at top of file), an eyebrow pill at the
   top, persona-specific field groups, multi-checkbox grids,
   a textarea, and a footer with consent + submit + signout link.

   Half of these classes had no CSS, so the page was rendering
   with browser defaults — cramped, mis-aligned, and out of sync
   with MS 2.0. This block fills the gaps.
   ============================================================ */

/* Eyebrow pill at top of form — replaces the bare mono label that
   was jammed against the navbar. Soft surface chip + amber dot
   (the "you're nearly done" signal Rob asked for). */
.profile-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  margin: 0 auto var(--s-5);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F59E0B;
}
.profile-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F59E0B;
  box-shadow:
    0 0 0 3px rgba(245, 158, 11, 0.18),
    0 0 12px rgba(245, 158, 11, 0.45);
  animation: pcDotPulse 2.4s ease-in-out infinite;
}
@keyframes pcDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 0 12px rgba(245, 158, 11, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.10), 0 0 18px rgba(245, 158, 11, 0.65); }
}

/* Per-persona section heading ("About your brand", etc.) —
   was a bare <h3> with no styling. Now a left-aligned subheading
   that doesn't compete with the page title. */
.pc-fields-heading {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: var(--s-7) 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
  max-width: 520px;
  text-align: left;
}

/* "Last two questions" divider — replaces an inline-styled <h3>
   with the canonical horizontal-line-with-text pattern. */
/* Left-aligned section break: thin rule above, mono kicker below.
   Replaces the centered chip-on-line pattern (which only reads cleanly
   when centred). */
.pc-divider {
  max-width: 520px;
  margin: var(--s-8) 0 var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.pc-divider span {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Textarea matches .pc-input visual treatment + room to type. */
.pc-textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: 14px/1.55 var(--font-sans);
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pc-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,120,212,0.15);
}
.pc-textarea::placeholder { color: var(--text-dim); }
.pc-char-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-align: right;
  margin-top: 6px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Multi-select checkbox grid (investor firm-stage, advisor services, etc).
   Was rendering as raw inline checkboxes with no spacing. Now a 2-up grid
   of card-style toggles that match the persona-card visual language. */
.pc-multi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.pc-checkbox-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  user-select: none;
}
.pc-checkbox-opt:hover {
  border-color: var(--border-hi);
  color: var(--text);
}
.pc-checkbox-opt input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.pc-checkbox-opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--blue-wash);
  color: var(--text);
}

/* Inline hint text under a label (e.g. "Optional", "Select all that apply").
   Sentence-case sans, no italic — reads as helper text not a stylistic note. */
.pc-hint {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.45;
}

/* Consent row — checkbox + agreement copy. Stacks safely on narrow widths. */
.pc-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--s-3) 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
}
.pc-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.pc-consent a { color: var(--accent-text); text-decoration: underline; }

/* Submit CTA — full-width primary button below the consent row. */
.pc-submit {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: var(--s-6) 0 0;
  padding: 14px 22px;
  background: var(--accent);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font: 600 15px/1 var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.2s;
}
.pc-submit:hover {
  background: var(--blue-hi);
  box-shadow: 0 8px 24px -8px var(--blue-glow-soft);
}
.pc-submit:active { transform: translateY(1px); }
.pc-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--accent);
}

/* Inline error message under the submit button. */
.pc-error {
  max-width: 520px;
  margin: var(--s-3) 0 0;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  color: rgb(248, 113, 113);
  font-size: 13px;
  line-height: 1.4;
  display: none;
}
.pc-error:not(:empty) { display: block; }

/* "Not you? Sign out" footer link — small, centred, low-emphasis. */
.pc-signout {
  text-align: center;
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
}
.pc-signout a {
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 600;
  margin-left: 4px;
}
.pc-signout a:hover { color: var(--blue-hi); text-decoration: underline; }

/* Persona-card grid: enforce 2-up on tablet+, single column on mobile.
   The base .persona-grid already does this, but tighten gap + ensure
   the wrapping fieldset doesn't add a default border (some browsers do). */
#view-profile-complete fieldset.profile-section {
  border: 0;
  padding: 0;
  margin: 0;
}

/* Mobile: collapse multi-checkbox grid to a single column so labels
   don't truncate awkwardly. */
@media (max-width: 540px) {
  .pc-multi { grid-template-columns: 1fr; }
  .profile-eyebrow-pill { font-size: 10px; letter-spacing: 0.12em; }
}

/* Footer link icons (LinkedIn / web / contact). Aligns the inline SVG
   with the label text and gives a subtle hover pop. */
.site-footer .footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-footer .footer-links a svg {
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.15s, transform 0.15s;
}
.site-footer .footer-links a:hover svg {
  opacity: 1;
  transform: translateY(-1px);
}

/* ==========================================================================
   Feedback widget (floating button + modal)
   Authed-only; visibility toggled by script.js based on session state.
   ========================================================================== */

#feedback-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9500;
}

#feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
#feedback-btn:hover {
  border-color: var(--accent);
  background: var(--surface-hi);
  transform: translateY(-1px);
}
#feedback-btn:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
}
#feedback-btn svg { color: var(--accent-text); }

@media (max-width: 640px) {
  #feedback-widget { right: 12px; bottom: 12px; }
  #feedback-btn { padding: 8px 10px; font-size: 12px; }
  #feedback-btn span { display: none; }
}

/* Modal shell */
.fb-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 11, 0.72);
  backdrop-filter: blur(4px);
}
.fb-modal-card {
  position: relative;
  z-index: 1;
  width: min(540px, 100%);
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1), 0 30px 80px -20px rgba(0,0,0,0.5);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.fb-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--border);
}
.fb-modal-head h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.fb-close {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.fb-close:hover { color: var(--text); background: var(--surface-2); }

#feedback-form { padding: 16px 24px 20px; }

.fb-field { margin-bottom: 16px; }
.fb-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.fb-field select,
.fb-field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 10px 12px;
  transition: border-color 0.15s, background 0.15s;
}
.fb-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.fb-field select:focus,
.fb-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}

.fb-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
  margin-top: 4px;
}

.fb-context {
  margin: 8px 0 16px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
  word-break: break-all;
}
.fb-context:empty { display: none; }
.fb-context-row { display: flex; gap: 8px; }
.fb-context-row strong {
  color: var(--text-muted);
  font-weight: 500;
  min-width: 72px;
  flex-shrink: 0;
}

.fb-error {
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--err-glow);
  border: 1px solid var(--err);
  border-radius: var(--r-sm);
  color: var(--err);
  font-size: 13px;
}

.fb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.fb-btn-ghost,
.fb-btn-primary {
  padding: 9px 16px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.fb-btn-ghost {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--text-muted);
}
.fb-btn-ghost:hover {
  border-color: var(--text-dim);
  color: var(--text);
}
.fb-btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}
.fb-btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.fb-btn-primary:disabled { opacity: 0.5; cursor: progress; }

/* Toast */
.fb-toast {
  position: fixed;
  right: 20px;
  bottom: 76px;
  z-index: 10001;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--ok);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13px;
  box-shadow: var(--shadow-1);
  animation: fb-toast-in 0.2s ease-out;
}
@keyframes fb-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .fb-toast { right: 12px; bottom: 58px; }
}

/* ─── Search modal (Cmd+K) ────────────────────────────────────── */
#search-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(8, 9, 11, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 16px;
  opacity: 0;
  transition: opacity 0.16s ease;
}
#search-modal-overlay.is-open {
  display: flex;
  opacity: 1;
}
.search-modal {
  width: 100%;
  max-width: 680px;
  max-height: calc(100vh - 96px);
  background: var(--surface);
  border: 1px solid var(--surface-hi);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body, 'Inter', sans-serif);
  animation: search-modal-in 0.18s ease-out;
}
@keyframes search-modal-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--surface-hi);
}
.search-icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.search-bar input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  font-family: inherit;
  padding: 4px 0;
}
.search-bar input::placeholder {
  color: var(--text-muted);
}
.search-close {
  background: var(--surface-2);
  border: 1px solid var(--surface-hi);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  text-transform: uppercase;
}
.search-close:hover {
  color: var(--text);
  background: var(--surface-hi);
}
.search-status {
  padding: 10px 18px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--surface-hi);
  text-transform: uppercase;
}
.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
}
.search-result {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 12px 18px;
  text-align: left;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.08s ease;
  font-family: inherit;
}
.search-result.is-active,
.search-result:focus-visible {
  background: var(--surface-2);
  border-left-color: var(--accent);
  outline: none;
}
.search-result-section {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding-top: 2px;
  flex-shrink: 0;
  width: 28px;
}
.search-result-body {
  flex: 1;
  min-width: 0;
}
.search-result-primary {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.search-result-sub {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.search-result-snippet {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-result mark {
  background: rgba(32, 128, 212, 0.22);
  color: var(--accent-text, #4FA8FF);
  border-radius: 2px;
  padding: 0 2px;
}
.search-signin-cta {
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  text-transform: uppercase;
  margin-left: 8px;
}
.search-signin-cta:hover {
  background: var(--accent-hi, #3990E0);
}
.search-footer {
  padding: 10px 18px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--surface-hi);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: 0.04em;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.search-footer kbd {
  background: var(--surface-2);
  border: 1px solid var(--surface-hi);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 10px;
  margin-right: 2px;
}

/* Topbar search button — hidden by default; shown by initAuthUI when
   the user is signed in + has completed the persona form. Mirrors the
   topbar-brand-link pattern. */
.topbar-search-btn {
  background: transparent;
  border: 1px solid var(--surface-hi);
  border-radius: 8px;
  padding: 6px 10px;
  display: none;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: color 0.1s ease, border-color 0.1s ease, background 0.1s ease;
}
.topbar-search-btn.is-visible {
  display: inline-flex;
}
.topbar-search-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--surface-2);
}
.topbar-search-btn svg {
  width: 14px;
  height: 14px;
}
.topbar-search-btn .topbar-search-shortcut {
  background: var(--surface-2);
  border: 1px solid var(--surface-hi);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  margin-left: 4px;
}
@media (max-width: 768px) {
  .topbar-search-btn-text,
  .topbar-search-btn .topbar-search-shortcut {
    display: none;
  }
  .topbar-search-btn {
    padding: 8px;
  }
  /* Modal goes full-screen on mobile */
  #search-modal-overlay {
    padding: 0;
  }
  .search-modal {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border: 0;
  }
}