/* CiteLead design system (docs/brand/BRAND.md, from the brand book): one stylesheet,
   self-hosted fonts, no third-party requests. Tokens on :root (light), redefined for
   dark. No inline styles anywhere (CSP). Values the book leaves open are marked "derived". */

/* Three open faces (SIL OFL 1.1), served from /fonts/ with their licences beside them. */
@font-face { font-family: "Instrument Sans"; src: url("/fonts/InstrumentSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
/* Arabic script only (Farsi, Arabic): never downloaded for a page without it. */
@font-face { font-family: "Vazirmatn"; src: url("/fonts/Vazirmatn-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

:root {
  /* colour: surfaces and text (ink neutrals, hue 262) */
  --bg: #ffffff;
  --bg-subtle: #f9fafc; /* surface: ink 50 */
  --bg-muted: #f2f3f7; /* sunken: ink 100 */
  --surface: #ffffff; /* raised: cards */
  --border: #e3e6ec; /* ink 200 */
  --border-strong: #d0d4dc; /* ink 300: inputs, secondary buttons */
  --text: #0b0f17; /* ink 900 */
  --text-2: #3d434d; /* text-secondary: ink 700 */
  --text-3: #575e69; /* text-muted: ink 600 */
  --logo-word: #0f141d;
  /* colour: brand, Cite Cobalt */
  --accent: #1e59cd;
  --accent-hover: #1148b3;
  --accent-text: #1e59cd;
  --accent-soft: #e7f1ff; /* primary-subtle */
  --accent-border: #b9cff7; /* derived: OKLCH 85% 0.06 262 */
  --on-accent: #ffffff;
  --focus: #1e59cd;
  /* colour: severity, always with a shape and a word (✕ ▲ ● ✓) */
  --critical: #be2323;
  --critical-soft: #ffeeec;
  --warning: #9a5a00;
  --warning-soft: #fef1e4;
  --info: #7c44c3;
  --info-soft: #f5f0ff;
  --pass: #1d7d3e;
  --pass-soft: #eaf8ec;
  /* score bands use the severity colours: >= 90 pass, 70-89 warning, < 70 critical */
  --good: var(--pass);
  --ok: var(--warning);
  --poor: var(--critical);
  --track: var(--bg-muted);
  /* data-viz: 8 hues at equal lightness; label series directly */
  --viz-1: #507ed3;
  --viz-2: #0096a8;
  /* type: Instrument Sans (UI), Vazirmatn (Arabic script), JetBrains Mono (code, data) */
  --font: "Instrument Sans", "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.75rem; /* caption 12 / 16 */
  --fs-sm: 0.875rem; /* body-sm 14 / 20 */
  --fs-base: 1rem; /* body 16 / 24 */
  --fs-md: 1.125rem; /* body-lg 18 / 28 */
  --fs-lg: 1.25rem; /* h4 20 / 28 */
  --fs-xl: 1.5rem; /* h3 24 / 32 */
  --fs-2xl: clamp(1.625rem, 1.25rem + 1.5vw, 2rem); /* h2 32 / 40 */
  --fs-3xl: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); /* h1 40 / 48 -> display 56 / 60 */
  /* space (4 px grid) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  /* shape + depth: radius 6 for controls and code, 10 for cards; flat, bordered surfaces */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-full: 999px;
  --shadow-sm: none;
  --shadow-md: 0 1px 2px rgba(11, 15, 23, 0.05);
  --shadow-lg: 0 1px 2px rgba(11, 15, 23, 0.04), 0 12px 32px -16px rgba(11, 15, 23, 0.16);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f17; /* ink 900 */
    --bg-subtle: #11151d; /* derived: between ink 900 and 800 */
    --bg-muted: #07090d; /* sunken, derived: the book's 1-colour black */
    --surface: #1f242d; /* raised: ink 800 */
    --border: #3d434d; /* derived: ink 700 */
    --border-strong: #575e69; /* derived: ink 600 */
    --text: #f9fafc;
    --text-2: #d0d4dc;
    --text-3: #9ea5b0;
    --logo-word: #ffffff;
    --accent: #6d9df5;
    --accent-hover: #87b1fd; /* derived: OKLCH 76% 0.12 262 */
    --accent-text: #6d9df5;
    --accent-soft: #1f242d; /* the book pairs primary with raised */
    --accent-border: #3b5d9c; /* derived */
    --on-accent: #0b0f17;
    --focus: #6d9df5;
    --critical: #ff958a;
    --critical-soft: #3a1d1a;
    --warning: #f0a556;
    --warning-soft: #35210d;
    --info: #c4a4fe;
    --info-soft: #2a2139;
    --pass: #76cf8a;
    --pass-soft: #152d1a;
    --viz-1: #77a4f6;
    --viz-2: #00bbcb;
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-base) / 1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { color: var(--text); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 var(--s-3); text-wrap: balance; }
h1 { font-size: var(--fs-3xl); line-height: 1.1; }
h2 { font-size: var(--fs-2xl); line-height: 1.25; }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); }
p { margin: 0 0 var(--s-4); }
/* Host names and crawled strings can be one long word: never let them widen the page. */
h1, h2, h3, h4, p, li, summary, dd, code { overflow-wrap: anywhere; }
a { color: var(--accent-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
ul, ol { margin: 0; padding: 0; }
/* Mono: JetBrains Mono 450, ligatures off so commands copy exactly. */
code, pre, kbd, samp { font-family: var(--mono); font-weight: 450; font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }
code { font-size: 0.9em; }
pre { margin: 0 0 var(--s-4); background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-4); overflow-x: auto; white-space: pre-wrap; font-size: var(--fs-sm); line-height: 1.43; }
pre code { font-size: inherit; }
svg { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
/* Arabic script: same sizes, looser lines, no tracking; scores, code and URLs stay in LTR runs. */
:lang(fa), :lang(ar), [dir="rtl"] { line-height: 1.75; }
:is(:lang(fa), :lang(ar), [dir="rtl"]) :is(h1, h2, h3, h4) { letter-spacing: 0; }
[dir="rtl"] :is(code, .score-num, .example-host) { direction: ltr; unicode-bidi: isolate; }

.skip { position: absolute; left: -999px; top: var(--s-2); z-index: 100; background: var(--surface); color: var(--text); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); box-shadow: var(--shadow-md); }
.skip:focus { left: var(--s-4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.container { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--s-4); }
.container-narrow > * { max-width: 48rem; } /* a narrower measure on the same left edge as every other section */
@media (min-width: 40rem) { .container { padding: 0 var(--s-5); } }

/* ---------- small components ---------- */
.icon { width: 1.125em; height: 1.125em; vertical-align: -0.2em; }

.btn, .audit-form button, .rerun button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font: inherit; font-weight: 600; font-size: var(--fs-base); line-height: 1.25;
  min-height: 2.5rem; padding: 0.5rem 1rem;
  border: 1px solid transparent; border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn-primary, .audit-form button, .rerun button { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover, .audit-form button:hover, .rerun button:hover { background: var(--accent-hover); text-decoration: none; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-subtle); text-decoration: none; }
.btn-sm { min-height: 2rem; padding: 0.3rem 0.75rem; font-size: var(--fs-sm); }
.btn-lg, .audit-form button { min-height: 3rem; padding: 0.75rem 1.25rem; }
.btn:disabled, .btn[aria-disabled="true"], button:disabled { background: var(--bg-muted); color: var(--text-3); border-color: transparent; cursor: not-allowed; }
/* Touch: every target at least 44 x 44 px. */
@media (pointer: coarse) { .btn, .btn-sm, .audit-form button, .rerun button { min-height: 2.75rem; } }
.btn .icon { width: 1.05em; height: 1.05em; }

/* No badges, pills, chips or eyebrow labels anywhere (owner, 2026-09-23): hierarchy comes from
   type, spacing and plain rules, and status is said in the sentence. The one marker kept is the
   severity shape next to its word. */

/* Severity shapes: ✕ critical, ▲ warning, ● info, ✓ pass. Decorative; the word is always written too. */
.sev { display: inline-block; min-width: 1em; text-align: center; font-family: var(--mono); font-weight: 600; font-size: 0.9em; line-height: 1; flex-shrink: 0; }
.sev-critical { color: var(--critical); }
.sev-warning { color: var(--warning); }
.sev-info { color: var(--info); }
.sev-pass { color: var(--pass); }

.lede { font-size: var(--fs-md); color: var(--text-2); line-height: 1.55; max-width: 38rem; }
.hint, .meta, .note { color: var(--text-3); font-size: var(--fs-sm); }
.error { color: var(--critical); font-weight: 600; font-size: var(--fs-sm); margin: var(--s-2) 0 0; }
.notice { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 500; }
.notice-error { background: var(--critical-soft); color: var(--critical); border: 1px solid color-mix(in srgb, var(--critical) 25%, transparent); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

.card, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card { padding: var(--s-5); }
.panel { padding: var(--s-5); }
.panel-title { font-size: var(--fs-md); margin-bottom: var(--s-4); }
.panel-kicker, .example-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin: 0 0 var(--s-2); }

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); list-style: none; }
@media (min-width: 40rem) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Plain lists: ordinary bullets and numbers, no icon bullets or number chips. */
.bullets, .numbered, .prose ul:not([class]) { display: grid; gap: var(--s-2); padding-left: 1.25rem; margin: 0 0 var(--s-5); color: var(--text-2); }
.bullets, .prose ul:not([class]) { list-style: disc; }
.numbered { list-style: decimal; padding-left: 1.5rem; gap: var(--s-3); }
.bullets li::marker, .numbered li::marker, .prose ul:not([class]) li::marker { color: var(--text-3); font-variant-numeric: tabular-nums; }
.bullets:last-child, .numbered:last-child { margin-bottom: 0; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); min-height: 3.75rem; padding-top: var(--s-2); padding-bottom: var(--s-2); }
.brand { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; padding: 0.375rem 0; }
.brand:hover { text-decoration: none; }
/* The horizontal lockup at 28 px high (161 px wide; the book's minimum is 88 px). Never recoloured beyond these two tokens. */
.logo { display: block; height: 1.75rem; width: auto; }
.logo-mark { fill: var(--accent); }
.logo-word { fill: var(--logo-word); }
.site-nav { order: 3; flex-basis: 100%; overflow-x: auto; }
.site-nav ul { list-style: none; display: flex; gap: var(--s-1); }
.site-nav a { display: block; padding: 0.4rem 0.7rem; border-radius: var(--r-sm); color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.site-nav a:hover { color: var(--text); background: var(--bg-muted); }
.site-nav a[aria-current="page"] { color: var(--text); background: var(--bg-muted); }
.header-cta { margin-left: auto; }
@media (min-width: 44rem) {
  .site-nav { order: 0; flex-basis: auto; overflow: visible; }
  .header-row { flex-wrap: nowrap; }
}

/* ---------- sections ---------- */
.section { padding: var(--s-8) 0; }
/* Sections are separated by a plain rule and white space, not alternating washes. */
.section + .section { border-top: 1px solid var(--border); }
.section-head { max-width: 44rem; margin-bottom: var(--s-6); }
.section-intro { color: var(--text-2); font-size: var(--fs-md); margin-bottom: 0; }
.subsection { margin-top: var(--s-7); }
.subsection-title { font-size: var(--fs-xl); }
.subsection .section-intro { margin-bottom: var(--s-5); }
@media (min-width: 60rem) { .section { padding: var(--s-9) 0; } }
.section.section-tight { padding: var(--s-6) 0; }

.page-head { padding: var(--s-8) 0 var(--s-5); }
.page-head h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.page-head + .section.section-tight { padding-top: var(--s-4); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--s-2); }
.prose p, .prose li { color: var(--text-2); }

/* ---------- hero + audit form ---------- */
.hero { padding: var(--s-7) 0 var(--s-8); border-bottom: 1px solid var(--border); }
.hero-compact { padding-bottom: var(--s-7); }
.hero-grid { display: grid; gap: var(--s-7); align-items: start; }
.hero h1 { font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem); line-height: 1.1; margin-bottom: var(--s-5); max-width: 18ch; }
.hero .lede { margin-bottom: var(--s-6); }
@media (min-width: 60rem) {
  .hero { padding: var(--s-8) 0 var(--s-9); }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-8); }
}

/* The form sits on the page, not in a floating card. */
.audit-form { max-width: 36rem; }
.audit-form label, .field label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--s-2); }
.audit-form .row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.audit-form input, .field input[type="email"], .field input[type="text"] {
  flex: 1 1 14rem; min-width: 0; width: 100%;
  font: inherit; font-size: var(--fs-base); line-height: 1.4;
  min-height: 3rem; padding: 0.6rem 0.8rem;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.audit-form input::placeholder, .field input::placeholder { color: var(--text-3); opacity: 1; }
.audit-form input { font-family: var(--mono); font-weight: 450; font-variant-ligatures: none; }
.audit-form input:focus, .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.audit-form input[aria-invalid="true"], .field input[aria-invalid="true"] { border-color: var(--critical); }
.audit-form button { flex: 0 0 auto; }
@media (max-width: 30rem) { .audit-form button { flex: 1 1 100%; } }
.audit-form .hint { margin: var(--s-3) 0 0; }
.cf-turnstile:not(:empty) { margin-top: var(--s-3); }
.cf-turnstile:empty { display: none; }
.waitlist-form .cf-turnstile { margin-top: 0; }

/* ---------- example report (hero visual) ---------- */
.example { margin: 0; }
/* A plain sheet with a thin border: no fake browser window, no floating shadow. */
.example-sheet { display: grid; gap: var(--s-5); padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.example-host { margin: 0; font-family: var(--mono); font-size: var(--fs-sm); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.example-score { display: flex; align-items: center; gap: var(--s-5); }
.example-counts { list-style: none; display: grid; gap: var(--s-1); font-size: var(--fs-sm); color: var(--text-2); }
.example-counts li { display: flex; align-items: center; gap: var(--s-2); }
.example-section { border-top: 1px solid var(--border); padding-top: var(--s-4); }
.mini-cats { list-style: none; display: grid; gap: var(--s-2); }
.mini-cats li { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 1.75rem; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); }
.mini-cat-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-cat-score { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.mini-findings { list-style: none; display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.mini-findings li { display: flex; align-items: baseline; gap: var(--s-2); }
.mini-findings .sev { transform: translateY(0.05em); }
.mini-files { list-style: none; display: grid; gap: var(--s-1); font-size: var(--fs-sm); color: var(--text-2); }
.mini-files code { font-size: var(--fs-sm); color: var(--text); }
.mini-file-ok { color: var(--text-3); }
.example-caption { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-3); }
@media (max-width: 30rem) {
  .example-sheet { padding: var(--s-4); }
  .mini-cats li { grid-template-columns: minmax(0, 1fr) 3.5rem 1.75rem; }
}

/* ---------- score ring + bars ---------- */
.ring { display: grid; place-items: center; flex-shrink: 0; }
.ring > * { grid-area: 1 / 1; }
.ring-svg { width: 100%; height: 100%; }
.ring-size-lg { width: 9.5rem; height: 9.5rem; }
.ring-size-sm { width: 6.5rem; height: 6.5rem; }
.ring-track { stroke: var(--track); }
.ring-good { stroke: var(--good); }
.ring-ok { stroke: var(--ok); }
.ring-poor { stroke: var(--poor); }
.ring-text { text-align: center; }
.ring-text p { margin: 0; }
.score-num { display: flex; flex-direction: column; align-items: center; font-size: var(--fs-sm); line-height: 1.2; color: var(--text-3); font-variant-numeric: tabular-nums; }
.score-num span { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
.band-word { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; }
.band-good { color: var(--pass); }
.band-ok { color: var(--warning); }
.band-poor { color: var(--critical); }
.ring-size-sm .score-num { font-size: var(--fs-xs); line-height: 1.1; }
.ring-size-sm .score-num span { font-size: 1.875rem; }
.ring-label { justify-content: center; font-size: var(--fs-xs); margin-top: 4px; }
.bar { width: 100%; height: 0.5rem; display: block; }
.bar-track { fill: var(--track); }
.bar-good { fill: var(--good); }
.bar-ok { fill: var(--ok); }
.bar-poor { fill: var(--poor); }

/* ---------- steps + ladder ---------- */
/* Steps: columns under a plain rule, the number as ordinary text. */
.steps { list-style: none; display: grid; gap: var(--s-6) var(--s-5); }
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { border-top: 1px solid var(--border-strong); padding-top: var(--s-4); }
.step-num { margin: 0 0 var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.step p:last-child { color: var(--text-2); margin: 0; }

/* The access ladder: rows split by rules. */
.ladder { list-style: none; border-top: 1px solid var(--border); }
.rung { display: grid; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--border); }
.rung h3, .rung h4 { font-size: var(--fs-base); margin: 0; }
.rung-level { display: block; color: var(--text-3); font-size: var(--fs-sm); font-weight: 400; }
.rung-body { display: grid; gap: var(--s-3); margin: 0; }
.rung-body div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-3); align-content: start; }
.rung-body dt { color: var(--text-3); }
.rung-body dd { margin: 0; color: var(--text-2); }
@media (min-width: 48rem) {
  .rung { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: var(--s-6); }
  .rung-body { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .rung-body div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}

/* ---------- checks + tools ---------- */
/* What the audit checks: one row per area. Name and weight on the left, what it means on the right. */
.checks { list-style: none; border-top: 1px solid var(--border); max-width: 60rem; }
.check { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--border); }
.check h3 { font-size: var(--fs-base); margin: 0; }
.check-weight { margin: 0; font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }
.check-body { margin: var(--s-1) 0 0; color: var(--text-2); }
@media (min-width: 48rem) {
  .check { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "name body" "weight body"; column-gap: var(--s-6); }
  .check h3 { grid-area: name; }
  .check-weight { grid-area: weight; }
  .check-body { grid-area: body; margin: 0; }
}
.tools { list-style: none; display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool { border-top: 1px solid var(--border-strong); padding-top: var(--s-4); }
.tool h3 { font-size: var(--fs-base); margin-bottom: var(--s-2); }
.tool p { color: var(--text-2); margin: 0; }

/* ---------- proof ---------- */
.proof { margin: 0; display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 56rem) { .proof { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-8); } }
.proof-claim { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); margin-bottom: var(--s-4); text-wrap: balance; }
.proof .proof-body { color: var(--text-2); }
.proof-chart { display: grid; gap: var(--s-2); }
.proof-chart-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin: 0 0 var(--s-1); }
.proof-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-3); font-size: var(--fs-sm); color: var(--text-2); }
.proof-row + .proof-row { margin-top: var(--s-2); }
.proof-track { grid-column: 1 / -1; grid-row: 2; height: 0.75rem; border-radius: var(--r-full); background: var(--track); overflow: hidden; }
.proof-bar { display: block; height: 100%; border-radius: var(--r-full); background: var(--accent); }
.proof-bar-before { width: 4.55%; min-width: 0.5rem; background: var(--text-3); }
.proof-bar-after { width: 100%; }
.proof-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--border); max-width: 48rem; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--text-3); transition: transform 0.2s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary h3 { margin: 0; font-size: var(--fs-base); font-weight: 600; letter-spacing: -0.01em; }
.faq-a { padding: 0 var(--s-6) var(--s-4) 0; color: var(--text-2); }
.faq-a p:last-child { margin-bottom: 0; }

/* ---------- closing call to action ---------- */
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* ---------- pricing + waitlist ---------- */
.plans { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 56rem) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }
/* Two columns under a plain rule: no card, no highlighted "featured" plan. */
.plan { border-top: 1px solid var(--border-strong); padding-top: var(--s-5); }
.plan h2 { font-size: var(--fs-lg); margin: 0; }
.plan-price { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; margin: var(--s-3) 0 0; }
.plan-note { color: var(--text-3); font-size: var(--fs-sm); margin-bottom: var(--s-5); }
.plan-form { border-top: 1px solid var(--border); padding-top: var(--s-5); margin-top: var(--s-2); }
.plan-form h3 { font-size: var(--fs-md); }
.plan-form > p { color: var(--text-2); font-size: var(--fs-sm); }
.waitlist-form { display: grid; gap: var(--s-4); }
.field { display: grid; }
.optional { font-weight: 400; color: var(--text-3); }
.field-check { grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.field-check input { width: 1.125rem; height: 1.125rem; margin: 0.2rem 0 0; accent-color: var(--accent); }
.field-check label { font-weight: 500; margin: 0; }
.waitlist-form .hint { margin: 0; }
.waitlist-form .error { margin: 0; }
.waitlist-form button { justify-self: start; }

/* ---------- report ---------- */
.report-head { padding: var(--s-6) 0 var(--s-5); border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--s-4); }
.report-head .notice { margin-bottom: var(--s-4); }
.report-title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
.report-title-row h1 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); margin-bottom: var(--s-2); }
.report-title-row .meta { margin: 0; }
.report-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.report-head .note { margin: var(--s-4) 0 0; color: var(--text-2); font-size: var(--fs-base); max-width: 48rem; }
.report-body { padding-top: var(--s-6); padding-bottom: var(--s-8); }
.report-summary { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 56rem) { .report-summary { grid-template-columns: 20rem minmax(0, 1fr); } }
.score { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.score-side { flex: 1 1 8rem; }
.sev-counts { list-style: none; display: grid; gap: var(--s-1); }
.sev-counts a { display: flex; align-items: center; gap: var(--s-2); padding: 0.3rem 0.5rem; margin: 0 -0.5rem; border-radius: var(--r-sm); color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); }
.sev-counts a:hover { background: var(--bg-muted); }
.sev-count-n { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; min-width: 1.25rem; }
.cats { list-style: none; }
.cat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, 11rem) 2.25rem; gap: var(--s-4); align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.cat:last-child { border-bottom: 0; }
.cat-label { color: var(--text-2); }
.cat-score { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cat-na { grid-column: 2 / 4; color: var(--text-3); text-align: right; }
@media (max-width: 30rem) {
  .cat { grid-template-columns: minmax(0, 1fr) 2.25rem; row-gap: var(--s-2); }
  .cat .bar { grid-column: 1 / 3; grid-row: 2; }
  .cat-na { grid-column: 2; }
}

.report-section { margin-top: var(--s-8); }
.report-section > h2 { font-size: var(--fs-xl); }
.group { margin-top: var(--s-5); }
/* Severity groups: the shape in its colour next to the word; findings are rows split by rules. */
.group h3 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-base); margin-bottom: var(--s-2); }
.group-pass summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.group-pass summary::-webkit-details-marker { display: none; }
.group-pass summary::after { content: "+"; margin-left: auto; color: var(--text-3); font-size: 1.2rem; line-height: 1; }
.group-pass[open] summary::after { content: "−"; }
.group-pass summary h3 { margin: 0; }
.count { color: var(--text-3); font-weight: 400; }
.finding { padding: var(--s-4) 0; border-top: 1px solid var(--border); }
.finding > * { max-width: 52rem; }
.group-pass .finding:first-of-type { border-top: 0; }
.finding h4 { margin-bottom: var(--s-1); }
.finding p { margin: var(--s-1) 0; color: var(--text-2); font-size: var(--fs-sm); }
.evidence { margin: var(--s-2) 0; padding-left: var(--s-5); font-size: var(--fs-xs); color: var(--text-3); }
.evidence code { background: var(--bg-subtle); border-radius: 4px; padding: 0.05rem 0.3rem; }
.fix { padding-top: var(--s-2); }
.fix-link { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 600; white-space: nowrap; }

.fixfiles { margin-top: var(--s-5); }
.fixfile { display: flex; flex-direction: column; padding: var(--s-5); }
.fixfile-head { display: grid; gap: var(--s-1); margin-bottom: var(--s-3); }
.fixfile-status { margin: 0; font-size: var(--fs-sm); color: var(--text-3); }
.fixfile-head h3 { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; font-family: var(--mono); font-size: var(--fs-sm); letter-spacing: 0; }
.fixfile-notes { padding-left: var(--s-5); font-size: var(--fs-sm); color: var(--text-2); display: grid; gap: var(--s-1); margin-bottom: var(--s-3); }
.fixfile-optional { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--s-2); }
.fixfile-todos { font-size: var(--fs-sm); color: var(--warning); }
.fixfile-actions { margin-top: auto; padding-top: var(--s-2); }
.fixfile-actions .btn { white-space: normal; overflow-wrap: anywhere; text-align: left; }
.preview summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-3); padding: var(--s-2) 0; }
.preview pre { max-height: 20rem; overflow: auto; font-size: var(--fs-xs); }

.rerun { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--border); display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 48rem) { .rerun { grid-template-columns: minmax(0, 1fr) auto; } }
.rerun h2 { font-size: var(--fs-lg); }
.rerun p { color: var(--text-2); font-size: var(--fs-sm); margin: 0; }
.rerun form { display: grid; gap: var(--s-2); justify-items: start; }
.report-cta { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.report-cta h2 { font-size: var(--fs-lg); margin-bottom: var(--s-1); }
.report-cta p { color: var(--text-2); margin: 0; font-size: var(--fs-sm); }
.report-foot { margin-top: var(--s-5); }

/* ---------- /bot ---------- */
.bot { display: grid; gap: var(--s-6); padding-top: var(--s-4); padding-bottom: var(--s-8); }
.bot section > p:last-child, .bot .bullets { margin-bottom: 0; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-subtle); padding: var(--s-7) 0 var(--s-5); font-size: var(--fs-sm); color: var(--text-2); }
.footer-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; }
.footer-brand p { margin: var(--s-3) 0 0; max-width: 20rem; color: var(--text-3); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; } .footer-brand { grid-column: auto; } }
.footer-heading { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: var(--text); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.footer-base { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--border); color: var(--text-3); }
.footer-base p { margin: 0; }
.footer-base a { text-decoration: underline; }

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