/* ============================================================
   Sales Team 6 — Market Share Scorecard
   Field-guide aesthetic: charcoal, gold, roman caps, mono labels
   ============================================================ */

:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.5rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --radius-sm: 2px;
  --radius-md: 3px;

  --font-display: 'Zodiak', 'Playfair Display', Georgia, serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Dark (default) */
:root, [data-theme='dark'] {
  --color-bg: #100f0d;
  --color-surface: #171612;
  --color-surface-2: #1e1c18;
  --color-surface-offset: #242118;
  --color-border: #302c24;
  --color-divider: #262319;
  --color-text: #f0ece2;
  --color-text-muted: #9d9587;
  --color-text-faint: #6b6559;
  --color-primary: #c9962b;
  --color-primary-hover: #dcaa3d;
  --color-primary-ink: #100f0d;
  --color-good: #7d9a4e;
  --color-warn: #c9962b;
  --color-bad: #b4573c;
  --hero-scrim: linear-gradient(90deg, rgba(16,15,13,0.97) 0%, rgba(16,15,13,0.88) 42%, rgba(16,15,13,0.35) 100%);
}

[data-theme='light'] {
  --color-bg: #f6f4ef;
  --color-surface: #fffefb;
  --color-surface-2: #f1ede4;
  --color-surface-offset: #eae4d6;
  --color-border: #d9d2c2;
  --color-divider: #e3ddcf;
  --color-text: #1a1815;
  --color-text-muted: #625b4e;
  --color-text-faint: #948c7c;
  --color-primary: #8a6110;
  --color-primary-hover: #6d4c0a;
  --color-primary-ink: #fffefb;
  --color-good: #4c6b25;
  --color-warn: #8a6110;
  --color-bad: #8f3a22;
  --hero-scrim: linear-gradient(90deg, rgba(246,244,239,0.98) 0%, rgba(246,244,239,0.9) 42%, rgba(246,244,239,0.3) 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.08; }
h1, h2 { font-family: var(--font-display); letter-spacing: -0.01em; }
h1 em, h2 em, .tagline em { font-style: italic; color: var(--color-primary); }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

::selection { background: var(--color-primary); color: var(--color-primary-ink); }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
}

.microcopy {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin: var(--space-3) 0 0;
}

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-12));
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.mark { width: 34px; height: 30px; color: var(--color-primary); flex: none; }
.brand-name {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.2;
}
.brand-sub {
  display: block; font-family: var(--font-mono); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-faint);
}
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.site-nav a {
  font-size: var(--text-sm); text-decoration: none; color: var(--color-text-muted);
  transition: color 0.2s var(--ease);
}
.site-nav a:hover { color: var(--color-primary); }
.theme-toggle {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: transparent; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }
@media (max-width: 720px) {
  .brand-sub { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-4) var(--space-6);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none;
  border: 1px solid var(--color-primary); border-radius: var(--radius-sm);
  cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn-primary { background: var(--color-primary); color: var(--color-primary-ink); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-sm { padding: var(--space-2) var(--space-4); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---------- Hero ---------- */
.hero { position: relative; display: grid; align-items: center; min-height: 78vh; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.hero-media::after { content: ''; position: absolute; inset: 0; background: var(--hero-scrim); }
.hero-body {
  position: relative; width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: clamp(var(--space-16), 9vw, var(--space-32)) clamp(var(--space-4), 4vw, var(--space-12));
}
.hero h1 { font-size: var(--text-3xl); max-width: 15ch; margin-bottom: var(--space-6); }
.lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 46ch; line-height: 1.45; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* ---------- Sections ---------- */
.section {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(var(--space-16), 8vw, var(--space-32)) clamp(var(--space-4), 4vw, var(--space-12));
  border-top: 1px solid var(--color-divider);
}
.section-head { max-width: 62ch; margin-bottom: var(--space-12); }
.scorecard-section .section-head { margin-inline: auto; text-align: center; }
.section-head h2, .split-copy h2, .problem-lead h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.section-lede { color: var(--color-text-muted); }

/* ---------- Problem ---------- */
.problem-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-20)); align-items: start; }
.problem-lead h2 { font-size: var(--text-2xl); max-width: 22ch; }
.problem-lead p { color: var(--color-text-muted); max-width: 44ch; }
.pullquote {
  font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3;
  color: var(--color-text); border-left: 2px solid var(--color-primary);
  padding-left: var(--space-5); margin-top: var(--space-8);
}
.symptom-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.symptom-list li {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--space-4);
  padding: var(--space-5) 0; border-top: 1px solid var(--color-divider);
}
.symptom-list li:last-child { border-bottom: 1px solid var(--color-divider); }
.symptom-list .num, .module .num, .rung {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--color-primary);
}
.symptom-list div { font-size: var(--text-sm); color: var(--color-text-muted); }
.symptom-list strong { color: var(--color-text); font-weight: 700; }
@media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: clamp(var(--space-6), 3vw, var(--space-10));
}

/* ---------- Quiz ---------- */
.quiz { max-width: 820px; margin-inline: auto; }
.progress { height: 3px; background: var(--color-surface-2); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--color-primary); transition: width 0.35s var(--ease); }
.quiz-meta {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--color-text-faint); margin: var(--space-3) 0 0;
}
.pillar-tag { color: var(--color-primary); }
.quiz-body { padding: var(--space-8) 0 var(--space-6); }
.quiz-body h3 { font-family: var(--font-display); font-size: var(--text-lg); max-width: 40ch; }
.q-help { font-size: var(--text-sm); color: var(--color-text-faint); margin-top: var(--space-3); max-width: 52ch; }
.options { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.option {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-4);
  width: 100%; text-align: left; padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.45; cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}
.option:hover { border-color: var(--color-primary); background: var(--color-surface-offset); transform: translateX(2px); }
.option .tag {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em;
  color: var(--color-primary); padding-top: 0.1rem;
}
.option[aria-checked='true'] { border-color: var(--color-primary); background: var(--color-surface-offset); }
.quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--color-divider); padding-top: var(--space-5); }
.quiz-foot .microcopy { margin: 0; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin-top: var(--space-6); }
.form-wide { grid-column: 1 / -1; }
label {
  display: grid; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--color-text-muted);
}
label .opt { text-transform: none; letter-spacing: 0; color: var(--color-text-faint); }
input, select {
  width: 100%; padding: var(--space-3) var(--space-4);
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--text-sm); text-transform: none; letter-spacing: 0;
}
input:focus, select:focus { border-color: var(--color-primary); outline: none; }
input::placeholder { color: var(--color-text-faint); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.check { grid-template-columns: auto 1fr; align-items: start; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); }
.check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--color-primary); }
.gate h3, .form-card h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-3); }
.gate { max-width: 820px; margin-inline: auto; }
#gateError { color: var(--color-bad); }
.form-card { display: grid; gap: var(--space-4); align-content: start; }
.form-card.wide { margin-top: var(--space-12); }
.form-status:empty { display: none; }
.form-status { color: var(--color-primary); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Result ---------- */
.result { max-width: 920px; margin-inline: auto; }
.result-head { display: grid; grid-template-columns: 200px 1fr; gap: clamp(var(--space-6), 4vw, var(--space-12)); align-items: start; padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-divider); }
.score { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; margin: 0; color: var(--color-primary); }
.score-max { font-size: var(--text-lg); color: var(--color-text-faint); }
.band { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.16em; margin: var(--space-3) 0 0; color: var(--color-text); }
.result-verdict h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-3); }
.result-verdict p { color: var(--color-text-muted); }
.pillars { display: grid; gap: var(--space-5); padding: var(--space-8) 0; border-bottom: 1px solid var(--color-divider); }
.pillar-row { display: grid; grid-template-columns: 15rem 1fr 3.5rem; align-items: center; gap: var(--space-4); }
.pillar-row .name { font-size: var(--text-sm); }
.pillar-row .track { display: block; height: 8px; background: var(--color-surface-2); border-radius: 2px; overflow: hidden; }
.pillar-row .bar { display: block; height: 100%; width: 0; border-radius: 2px; transition: width 0.6s var(--ease); }
.pillar-row .val { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); text-align: right; }
.bar.good { background: var(--color-good); } .bar.warn { background: var(--color-warn); } .bar.bad { background: var(--color-bad); }
@media (max-width: 720px) { .pillar-row { grid-template-columns: 1fr 3.5rem; } .pillar-row .track { grid-column: 1 / -1; } .result-head { grid-template-columns: 1fr; } }
.prescription { padding: var(--space-8) 0; }
.prescription h4 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-3); }
.prescription p { color: var(--color-text-muted); max-width: 60ch; }
.rx-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.rx-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.rx-list li::before { content: '→'; color: var(--color-primary); font-family: var(--font-mono); }
.result-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(var(--space-8), 5vw, var(--space-20)); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split-copy p { color: var(--color-text-muted); max-width: 48ch; }
.tick-list { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; gap: var(--space-3); }
.tick-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.tick-list li::before { content: '✓'; color: var(--color-primary); font-family: var(--font-mono); font-size: var(--text-xs); padding-top: 0.2rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-8) 0 0; }
.facts dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-faint); }
.facts dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); }

/* ---------- Modules ---------- */
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.module { background: var(--color-bg); padding: var(--space-6); }
.module-accent { background: var(--color-surface); }
.module h4 { font-family: var(--font-display); font-size: var(--text-base); margin: var(--space-3) 0 var(--space-2); }
.module p { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 900px) { .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .module-grid { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr; } }

/* ---------- Ladder ---------- */
.ladder-list { list-style: none; margin: 0; padding: 0; counter-reset: rung; }
.ladder-list li { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--color-divider); align-items: baseline; }
.ladder-list li:last-child { border-bottom: 1px solid var(--color-divider); }
.ladder-list div { font-size: var(--text-sm); color: var(--color-text-muted); }
.ladder-list strong { color: var(--color-text); }
@media (max-width: 700px) { .ladder-list li { grid-template-columns: 1fr; gap: var(--space-2); } }

/* ---------- Footer ---------- */
.site-foot {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-16) clamp(var(--space-4), 4vw, var(--space-12)) var(--space-20);
  border-top: 1px solid var(--color-divider);
  display: grid; gap: var(--space-8);
}
.foot-brand { display: flex; align-items: flex-start; gap: var(--space-4); }
.tagline { font-family: var(--font-display); font-size: var(--text-base); line-height: 1.4; margin: 0; }
.foot-meta { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-faint); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Sticky-header offset for anchored scroll targets */
.section, .card { scroll-margin-top: calc(var(--space-20) + var(--space-4)); }

/* On narrow screens the hero copy sits over the brightest part of the photo,
   so the scrim goes vertical and heavier. */
@media (max-width: 720px) {
  [data-theme="dark"] .hero-media::after {
    background: linear-gradient(180deg, rgba(16,15,13,0.92) 0%, rgba(16,15,13,0.88) 55%, rgba(16,15,13,0.72) 100%);
  }
  [data-theme="light"] .hero-media::after {
    background: linear-gradient(180deg, rgba(246,244,239,0.95) 0%, rgba(246,244,239,0.9) 55%, rgba(246,244,239,0.78) 100%);
  }
}

/* Mobile pillar rows: label and score on one line, bar underneath. */
@media (max-width: 720px) {
  .pillar-row .name { order: 1; }
  .pillar-row .val { order: 2; }
  .pillar-row .track { order: 3; }
}

/* Formspark honeypot: present in the DOM, never visible or focusable. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ============================================================
   Multi-page components — Home + Method
   Gold is reserved for CTAs, scores, and control-point numbers.
   ============================================================ */

/* ---------- Nav state ---------- */
.site-nav a[aria-current='page'] { color: var(--color-text); }
.site-nav a[aria-current='page']::after {
  content: ''; display: block; height: 1px; margin-top: 3px; background: var(--color-primary);
}
.nav-cta { color: var(--color-primary-ink) !important; }
@media (max-width: 720px) { .site-nav .nav-cta { display: inline-flex; } }

/* ---------- Text links ---------- */
.text-link {
  display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-primary);
  text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--color-primary) 45%, transparent);
  padding-bottom: 1px;
}
.text-link:hover { border-bottom-color: var(--color-primary); }
.prose a, .strip-foot a, .section-lede a { color: var(--color-primary); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  border-bottom: 1px solid var(--color-divider);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
}
.page-hero-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(var(--space-16), 8vw, var(--space-24)) clamp(var(--space-4), 4vw, var(--space-12));
}
.page-hero h1 { font-size: var(--text-2xl); max-width: 20ch; margin-bottom: var(--space-6); }
.page-hero .lede { max-width: 62ch; font-size: var(--text-base); }

/* ---------- Jump nav ---------- */
.jump {
  position: sticky; top: 62px; z-index: 40;
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-12));
  background: color-mix(in oklab, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.jump a {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--color-text-faint); text-decoration: none;
}
.jump a:hover { color: var(--color-primary); }
.jump a[aria-current='true'] { color: var(--color-text); }

/* ---------- Prose ---------- */
.prose { max-width: 68ch; display: grid; gap: var(--space-5); }
.prose p { color: var(--color-text-muted); }
.prose strong { color: var(--color-text); }
.prose .pullquote { color: var(--color-text); margin: var(--space-4) 0; }

/* ---------- Control point strip (home) ---------- */
.cp-strip {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--color-divider);
  border: 1px solid var(--color-divider);
}
.cp-strip li {
  background: var(--color-bg); padding: var(--space-6) var(--space-4);
  display: grid; gap: var(--space-3); align-content: start;
}
.cp-num {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.08em; color: var(--color-primary);
}
.cp-name { font-size: var(--text-sm); line-height: 1.3; color: var(--color-text); }
.strip-foot { margin: var(--space-6) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); max-width: 72ch; }
@media (max-width: 1000px) { .cp-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Thesis (home) ---------- */
.thesis-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.thesis-grid article { padding-top: var(--space-5); border-top: 1px solid var(--color-divider); }
.thesis-grid .th-accent { border-top-color: var(--color-primary); }
.th-label {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--color-text-faint); margin: 0 0 var(--space-3);
}
.th-accent .th-label { color: var(--color-primary); }
.thesis-grid p:last-child { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.th-accent p:last-child { color: var(--color-text); }
@media (max-width: 880px) { .thesis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .thesis-grid { grid-template-columns: 1fr; } }

/* ---------- Two systems (home) ---------- */
.sys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.sys-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: clamp(var(--space-6), 3vw, var(--space-10));
  display: grid; gap: var(--space-4); align-content: start;
}
.sys-tag, .std-tag {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--color-text-faint); margin: 0;
}
.sys-card h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0; }
.sys-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.sys-detail { border-left: 2px solid var(--color-border); padding-left: var(--space-4); }
@media (max-width: 800px) { .sys-grid { grid-template-columns: 1fr; } }

/* ---------- Inspection split (home) ---------- */
.inspection {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center;
}
.insp-copy p { color: var(--color-text-muted); max-width: 48ch; }
.insp-copy h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.insp-media img {
  width: 100%; height: 100%; max-height: 420px; object-fit: cover;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
@media (max-width: 900px) { .inspection { grid-template-columns: 1fr; } .insp-media { order: -1; } }

/* ---------- Control point list (method) ---------- */
.cp-list { list-style: none; margin: 0; padding: 0; }
.cp-list > li { padding: var(--space-8) 0; border-top: 1px solid var(--color-divider); }
.cp-list > li:last-child { border-bottom: 1px solid var(--color-divider); }
.cp-head { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-4); align-items: baseline; }
.cp-head h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0; }
.cp-list > li > p {
  margin: var(--space-4) 0 0; margin-left: calc(4.5rem + var(--space-4));
  max-width: 68ch; font-size: var(--text-sm); color: var(--color-text-muted);
}
.cp-list strong { color: var(--color-text); }
@media (max-width: 640px) {
  .cp-head { grid-template-columns: 1fr; gap: var(--space-2); }
  .cp-list > li > p { margin-left: 0; }
}

/* ---------- Gate callout (method) ---------- */
.gate-callout {
  margin-top: var(--space-12); padding: clamp(var(--space-6), 3vw, var(--space-10));
  background: var(--color-surface-offset); border: 1px solid var(--color-primary);
  border-radius: var(--radius-md); max-width: 68ch;
}
.gate-callout h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-4); }
.gate-callout > p { font-size: var(--text-sm); color: var(--color-text-muted); }
.gate-list { margin: var(--space-4) 0; padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.gate-list li { font-size: var(--text-sm); color: var(--color-text); }
.gate-list::marker, .gate-list li::marker { color: var(--color-primary); font-family: var(--font-mono); }

/* ---------- Standards grid (method / Command) ---------- */
.std-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.std-card { background: var(--color-bg); padding: clamp(var(--space-6), 2.5vw, var(--space-8)); display: grid; gap: var(--space-3); align-content: start; }
.std-card h3 { font-family: var(--font-display); font-size: var(--text-base); margin: 0; }
.std-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.std-card strong { color: var(--color-text); }
.std-card .microcopy { margin: 0; }
.std-wide { grid-column: span 2; background: var(--color-surface); }
@media (max-width: 960px) {
  .std-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .std-wide { grid-column: span 2; }
}
@media (max-width: 620px) {
  .std-grid { grid-template-columns: 1fr; }
  .std-wide { grid-column: span 1; }
}

/* ---------- Inspection grid (method) ---------- */
.insp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) clamp(var(--space-8), 5vw, var(--space-16)); }
.insp-grid article { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 1px solid var(--color-divider); }
.insp-num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; color: var(--color-primary); margin: 0; }
.insp-grid h3 { font-family: var(--font-display); font-size: var(--text-base); margin: 0; }
.insp-grid p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.insp-grid + .prose { margin-top: var(--space-12); }
@media (max-width: 760px) { .insp-grid { grid-template-columns: 1fr; } }

/* ---------- Stage list (method) ---------- */
.stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.stage-list li {
  display: grid; grid-template-columns: 8rem 16rem 1fr; gap: var(--space-6);
  padding: var(--space-8) 0; border-top: 1px solid var(--color-divider); align-items: baseline;
}
.stage-list li:last-child { border-bottom: 1px solid var(--color-divider); }
.stage-num { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-primary); margin: 0; }
.stage-list h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0; }
.stage-list p:last-child { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; max-width: 60ch; }
@media (max-width: 900px) { .stage-list li { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ---------- CTA band ---------- */
.cta-band { border-top: 1px solid var(--color-divider); background: var(--color-surface); }
.cta-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(var(--space-16), 8vw, var(--space-24)) clamp(var(--space-4), 4vw, var(--space-12));
}
.cta-inner h2 { font-size: var(--text-xl); max-width: 26ch; margin-bottom: var(--space-4); }
.cta-inner p { color: var(--color-text-muted); max-width: 58ch; }

/* ---------- Footer columns ---------- */
.foot-top { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.foot-cols div { display: grid; gap: var(--space-2); align-content: start; }
.foot-head { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-faint); margin: 0 0 var(--space-2); }
.foot-cols a { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; }
.foot-cols a:hover { color: var(--color-primary); }
@media (max-width: 820px) { .foot-top { grid-template-columns: 1fr; } }

/* Anchored scroll targets clear both sticky bars */
.section, .card, .cta-band { scroll-margin-top: 7.5rem; }

/* Underline hugs the label instead of stretching in grid/flex parents */
.sys-card .text-link, .prose .text-link, .insp-copy .text-link { justify-self: start; }
/* Slightly tighter vertical rhythm on the long marketing pages */
body[data-page='home'] .section, body[data-page='method'] .section {
  padding-block: clamp(var(--space-12), 5.5vw, var(--space-24));
}
body[data-page='home'] .section-head, body[data-page='method'] .section-head { margin-bottom: var(--space-10); }
.problem-lead h2 { max-width: 24ch; }

/* Jump bar must sit flush under the sticky header, not overlap it */
.jump { top: 76px; }
body[data-page='method'] .section, body[data-page='method'] .cta-band { scroll-margin-top: 9.5rem; }
@media (max-width: 720px) {
  .jump { top: 74px; gap: var(--space-4); overflow-x: auto; flex-wrap: nowrap; }
  .jump a { white-space: nowrap; }
  body[data-page='method'] .section, body[data-page='method'] .cta-band { scroll-margin-top: 8rem; }
}

/* Compact mobile header: brand + CTA on row one, scrollable nav on row two */
@media (max-width: 720px) {
  .site-head {
    padding-block: var(--space-3);
    display: grid; grid-template-columns: 1fr auto auto; row-gap: var(--space-3);
    column-gap: var(--space-3); align-items: center;
  }
  .site-nav { display: contents; }
  .brand-name { white-space: nowrap; font-size: 0.8125rem; }
  .site-nav { gap: var(--space-3); }
  .nav-cta { white-space: nowrap; font-size: 0.6875rem; padding: var(--space-3) var(--space-4); }
  .nav-links {
    grid-column: 1 / -1; grid-row: 2;
    gap: var(--space-5); overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    white-space: nowrap; font-family: var(--font-mono); font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.08em; padding-block: var(--space-1);
  }
  /* Jump bar clears the taller two-row header */
  .jump { top: 7.2rem; }
  body[data-page='method'] .section, body[data-page='method'] .cta-band { scroll-margin-top: 11.5rem; }
  .section, .card, .cta-band { scroll-margin-top: 11.5rem; }
}
/* No orphan cell when the seven control points wrap */
@media (max-width: 1000px) { .cp-strip li:last-child { grid-column: span 2; } }

/* Header CTA label shortens on small screens so the toggle stays on screen */
.cta-short { display: none; }
@media (max-width: 720px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
}

/* reCAPTCHA v2 checkbox — Formspark verifies the token server-side.
   The widget is a fixed 302x76 iframe, so it gets its own row and is
   scaled down only when the viewport is narrower than the widget. */
.captcha-wrap { margin-block: var(--space-3); min-height: 78px; }
.captcha-wrap .g-recaptcha { display: inline-block; }
@media (max-width: 380px) {
  .captcha-wrap { transform: scale(0.88); transform-origin: 0 0; min-height: 70px; }
}

/* ============================================================
   Result card: field-card offer + printable report
   ============================================================ */
.card-offer {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface-2);
}
.card-offer h4 { font-family: var(--font-display); font-size: var(--text-lg); margin: var(--space-2) 0 var(--space-3); }
.card-offer p { color: var(--color-text-muted); max-width: 62ch; font-size: var(--text-sm); }
.card-offer-links {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4); margin-top: var(--space-5);
}
.quiet-link {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--text-xs); color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border); padding-bottom: 2px;
}
.quiet-link:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.print-head, .print-url { display: none; }

@media print {
  /* Paper gets the report only — no nav, no funnel, no dark ink. */
  :root, [data-theme='dark'], [data-theme='light'] {
    --color-bg: #fff; --color-surface: #fff; --color-surface-2: #fff;
    --color-surface-offset: #f4f1ea; --color-border: #cfc9b8; --color-divider: #d8d2c2;
    --color-text: #16150f; --color-text-muted: #43402f; --color-text-faint: #6c6553;
    --color-primary: #a97c12; --color-good: #4f6b2a; --color-warn: #a97c12; --color-bad: #933f27;
  }
  @page { size: Letter; margin: 0.5in; }
  html, body { background: #fff !important; color: #16150f !important; }
  .site-head, .site-foot, #quizCard, #gateCard, .hero,
  #session, #command, .result-cta, .card-offer-links .quiet-link,
  #scorecard > .section-head, .theme-toggle { display: none !important; }
  #scorecard, .card.result {
    padding: 0 !important; margin: 0 !important; border: 0 !important;
    box-shadow: none !important; max-width: none !important;
  }
  .print-head {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
    border-bottom: 2.5px solid #16150f; padding-bottom: 8px; margin-bottom: 14px;
  }
  .ph-brand {
    display: block; font-family: var(--font-display); font-weight: 700;
    font-size: 15pt; letter-spacing: 0.04em;
  }
  .ph-sub, .ph-meta span {
    display: block; font-family: var(--font-mono); text-transform: uppercase;
    letter-spacing: 0.12em; font-size: 7.4pt; color: #6c6553;
  }
  .ph-meta { text-align: right; }
  .ph-meta #printStore { color: #16150f; }
  .result-head, .pillars, .prescription, .card-offer { break-inside: avoid; }
  /* One store, one sheet of paper. */
  .result-head { gap: 1.2rem !important; margin-bottom: 0.55rem !important; padding-bottom: 0.55rem !important; }
  .result-head h3 { font-size: 15pt !important; }
  .result-head p:not(.score), .prescription p, .rx-list li, .card-offer p { font-size: 9.2pt !important; }
  .result-head .score { font-size: 30pt !important; }
  .result-head .score-max { font-size: 15pt !important; }
  .prescription p, .card-offer p { max-width: none !important; }
  .pillars { gap: 0.4rem !important; padding: 0.55rem 0 !important; margin: 0 !important; }
  .pillar-row { font-size: 9.2pt !important; }
  .prescription { padding: 0.55rem 0 0 !important; }
  .prescription h4 { font-size: 13pt !important; }
  .rx-list { gap: 0.3rem !important; margin-top: 0.5rem !important; }
  .card-offer {
    background: #f4f1ea !important; margin-top: 0.7rem !important;
    padding: 0.5rem 0.7rem !important;
  }
  .card-offer h4 { font-size: 11.5pt !important; margin: 0.15rem 0 0.25rem !important; }
  .card-offer-links { display: none !important; }
  .print-url {
    display: block !important; margin: 0.35rem 0 0 !important;
    font-family: var(--font-mono); font-size: 8.4pt; letter-spacing: 0.04em; color: #a97c12;
  }
  .microcopy { margin-top: 0.5rem !important; }
  .pillars .bar { transition: none !important; print-color-adjust: exact; }
  a[href]::after { content: ''; }
  .microcopy { font-size: 8pt; }
}

/* ---------- Resources: field-card kit ---------- */
.res-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.res-card { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-6); }
.res-num {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.16em;
  color: var(--color-primary); margin: 0;
}
.res-card h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0; }
.res-sub {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--text-xs); color: var(--color-text-faint); margin: 0;
}
.res-card > p:not(.res-num):not(.res-sub):not(.res-links) {
  color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-2) 0 0;
}
.res-links { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-5) 0 0; }
.res-card-cta { border-color: var(--color-primary); background: var(--color-surface-offset); }

/* ---------- Install: tiers & fit ---------- */
.tier-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.tier-card {
  display: grid; align-content: start; padding: var(--space-8) var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.tier-card.tier-featured { border-color: var(--color-primary); background: var(--color-surface-offset); }
.tier-name { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-primary); margin: 0; }
.tier-line { font-family: var(--font-display); font-size: var(--text-lg); margin: var(--space-2) 0 0; }
.tier-card .tick-list { margin: var(--space-5) 0 var(--space-5); }
.tier-fit { font-size: var(--text-sm); color: var(--color-text-faint); margin: auto 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }

.fit-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.fit-card { padding: var(--space-6); border-top: 2px solid var(--color-divider); }
.fit-card.fit-yes { border-top-color: var(--color-primary); }
.fit-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-faint); margin: 0; }
.fit-card.fit-yes .fit-label { color: var(--color-primary); }
.fit-card .tick-list { margin-bottom: 0; }
.fit-card.fit-no .tick-list li::before { content: '×'; color: var(--color-text-faint); }

/* ---------- Proof: claims & stats ---------- */
.claim-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.claim-card { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.claim-num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; color: var(--color-primary); margin: 0; }
.claim-card h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: var(--space-2) 0 var(--space-4); }
.claim-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.claim-test { padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.claim-card p:last-child { margin-bottom: 0; }

.stat-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: var(--space-10) 0 var(--space-10); }
.stat-card { padding-top: var(--space-5); border-top: 1px solid var(--color-divider); }
.stat-card.stat-accent { border-top-color: var(--color-primary); }
.stat-val { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--color-primary); margin: 0; }
.stat-unit { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.08em; margin-left: 0.2em; }
.stat-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text); margin: var(--space-4) 0 var(--space-2); }
.stat-note { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* ---------- Archive: newsletter issues ---------- */
.arch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.arch-item {
  display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-6);
  padding: var(--space-8) 0; border-top: 1px solid var(--color-divider);
}
.arch-item:last-child { border-bottom: 1px solid var(--color-divider); }
.arch-meta { display: grid; gap: var(--space-2); align-content: start; }
.arch-num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; color: var(--color-primary); }
.arch-date { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-text-faint); }
.arch-body h3 { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.25; margin: 0 0 var(--space-3); max-width: 46ch; }
.arch-body h3 a { color: inherit; text-decoration: none; }
.arch-body h3 a:hover { color: var(--color-primary); }
.arch-body > p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 68ch; margin: 0 0 var(--space-4); }
@media (max-width: 720px) { .arch-item { grid-template-columns: 1fr; gap: var(--space-3); } .arch-meta { grid-auto-flow: column; justify-content: start; gap: var(--space-4); } }

/* ---------- Archive: podcast episodes ---------- */
.ep-grid { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.ep-card { display: grid; align-content: start; gap: var(--space-4); }
.ep-thumb { position: relative; display: block; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.ep-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity 0.25s var(--ease); }
.ep-thumb:hover img { opacity: 0.82; }
.ep-dur {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em;
  background: rgba(16, 15, 13, 0.86); color: #f0ece2; padding: 0.15rem 0.4rem; border-radius: var(--radius-sm);
}
.ep-body { display: grid; gap: var(--space-2); }
.ep-tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-primary); margin: 0; }
.ep-body h3 { font-family: var(--font-display); font-size: var(--text-base); line-height: 1.3; margin: 0; }
.ep-body h3 a { color: inherit; text-decoration: none; }
.ep-body h3 a:hover { color: var(--color-primary); }
.ep-meta { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-text-faint); margin: 0; }

@media (max-width: 820px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Mobile tap targets (≤720px) ---------- */
@media (max-width: 720px) {
  .foot-cols a { display: flex; align-items: center; min-height: 44px; }
  .foot-cols ul { gap: 0; }
  .jump a { padding-block: 9px; }
  .theme-toggle { width: 40px; height: 40px; }
}

/* Narrow phones: reclaim reading width from the numbered gutter */
@media (max-width: 720px) {
  .symptom-list li { grid-template-columns: 2rem 1fr; gap: var(--space-3); }
}