/* v2 design system. Tokens: growth/brand-v2.md (palette A, navy ink and highlighter). Fonts self-hosted, OFL-1.1.
   The body font lives behind one variable, --font-body. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/atkinson-hyperlegible-next-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Metric-matched fallbacks (measured against Liberation Sans, Arial's metric twin) so the swap does not shift layout */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); font-weight: 700; size-adjust: 101%; ascent-override: 92%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "Body Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 100.5%; ascent-override: 97.9%; descent-override: 31.4%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-sunk: #F3F4F1;
  --text: #15171C; --text-muted: #545A64;
  --border: #E3E5E8; --border-strong: #7D838C;
  --primary: #163E7A; --primary-hover: #0E2C5A; --on-primary: #FFFFFF; --primary-tint: #E8EEF7;
  --signal: #FFD233; --signal-stroke: #15171C;
  --error: #B42318;

  --font-head: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Body Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Three sizes per view: display or h2, body (18px), small (14px). */
  --fs-display: clamp(2.5rem, 1.86rem + 2.84vw, 3.75rem);
  --fs-h2: clamp(1.5rem, 1.24rem + 1.14vw, 2rem);
  --fs-body: 1.125rem;
  --fs-small: 0.875rem;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --radius-control: 6px; --radius-card: 8px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --measure: 65ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121417; --surface: #1A1D21; --surface-sunk: #0C0E10;
    --text: #ECEEF0; --text-muted: #A2A8B1;
    --border: #2C3036; --border-strong: #6C737D;
    --primary: #A3C1EE; --primary-hover: #C4D7F4; --on-primary: #121417; --primary-tint: #1B2433;
    --signal-stroke: transparent; --error: #FF8A7A;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121417; --surface: #1A1D21; --surface-sunk: #0C0E10;
  --text: #ECEEF0; --text-muted: #A2A8B1;
  --border: #2C3036; --border-strong: #6C737D;
  --primary: #A3C1EE; --primary-hover: #C4D7F4; --on-primary: #121417; --primary-tint: #1B2433;
  --signal-stroke: transparent; --error: #FF8A7A;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-8); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 400; font-size: 1.125rem; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure, pre { margin: 0; }
h1, h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: 2rem; font-size: var(--fs-h2); line-height: 1.2; max-width: 30ch; }
h3 { font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
p, li, dd { max-width: var(--measure); }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:not(.btn):not(.skip):hover { color: var(--primary-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
code, pre, .mono { font-family: var(--font-mono); font-size: var(--fs-small); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); line-height: 1.4; }

.skip { position: absolute; left: var(--space-4); top: -100px; background: var(--primary); color: var(--on-primary); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); z-index: 10; }
.skip:focus { top: var(--space-3); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); }

/* Header: solid background, one bottom rule. */
.site-header { background: var(--bg); border-bottom: 1px solid var(--border); }
.nav { display: flex; align-items: center; gap: var(--space-5); min-height: 64px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.wordmark { display: block; height: auto; }
.wm-text { fill: currentColor; }
.wm-dot { fill: var(--signal); stroke: var(--signal-stroke); }
.nav-main { margin-left: auto; }
.nav-links { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); color: var(--text); text-decoration: none; }
.nav-links a:hover { color: var(--primary); text-decoration: underline; }
.theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: transparent; color: var(--text); cursor: pointer; }
.theme-toggle:hover { border-color: var(--text); }
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}
@media (max-width: 767px) { .nav-main { display: none; } .theme-toggle { margin-left: auto; } }
@media (max-width: 479px) { .scan-row .btn { flex: 1 1 100%; } }

/* Hero: copy and form on the left, the real report crop on the right. */
.hero { padding: var(--space-8) 0 var(--space-9); }
.hero-grid { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1fr) 520px; gap: var(--space-8); } }
.display { font-size: 3.75rem; font-size: var(--fs-display); line-height: 1.05; max-width: 15ch; }
.lede { margin-top: var(--space-5); color: var(--text-muted); max-width: 44ch; }
.scan { margin-top: var(--space-6); max-width: 560px; }
.field-label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.scan-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.scan-row input { flex: 1 1 260px; min-width: 0; height: 56px; padding: 0 var(--space-4); font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-control); }
.scan-row input::placeholder { color: var(--text-muted); opacity: 1; }
.scan-row input[aria-invalid="true"] { border-color: var(--error); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-5); font: 600 var(--fs-body)/1 var(--font-body); color: var(--on-primary); background: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-control); text-decoration: none; cursor: pointer; transition: background-color 150ms var(--ease), border-color 150ms var(--ease); }
.btn:hover { color: var(--on-primary); background: var(--primary-hover); border-color: var(--primary-hover); text-decoration: none; }
.btn-lg { height: 56px; }
.btn[aria-disabled="true"], .scan-row input:disabled { cursor: not-allowed; }
.btn[aria-disabled="true"] { background: var(--surface-sunk); border-color: var(--border-strong); color: var(--text-muted); }
.scan-note { margin-top: var(--space-3); }
.scan-error { margin-top: var(--space-2); color: var(--error); }
.scan-error:empty { display: none; }

.figure { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); background: var(--surface-sunk); }
.crop-dark { display: none; }
:root[data-theme="dark"] .crop-light { display: none; }
:root[data-theme="dark"] .crop-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .crop-light { display: none; }
  :root:not([data-theme="light"]) .crop-dark { display: block; }
}

/* Scan result (live Worker only). Reserved space while scanning; no left stripes. */
.scan-result:empty { display: none; }
.scan-result { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.scan-result h3 { margin-bottom: var(--space-3); }
.scan-result ul, .scan-result ol { padding-left: var(--space-5); margin: var(--space-2) 0 var(--space-4); }
.scan-result li + li { margin-top: var(--space-1); }
.scan-result .btn { margin-top: var(--space-2); }

/* Sections */
.section { padding: var(--space-9) 0; border-top: 1px solid var(--border); }
@media (max-width: 767px) { .section { padding: var(--space-8) 0; } .hero { padding: var(--space-7) 0 var(--space-8); } }
.section-intro { margin-top: var(--space-4); color: var(--text-muted); }
.how-grid { display: grid; gap: var(--space-7); margin-top: var(--space-6); align-items: start; }
@media (min-width: 1024px) { .how-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-8); } }
.flow { list-style: none; padding: 0; }
.flow li { padding: var(--space-5) 0; border-top: 1px solid var(--border); }
.flow li:last-child { border-bottom: 1px solid var(--border); }
.flow h3 { margin-bottom: var(--space-2); }

/* Data table (real numbers from our own report). */
.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data caption { text-align: left; font-weight: 600; padding-bottom: var(--space-3); }
.data th, .data td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); text-align: left; }
.data thead th { background: var(--surface-sunk); font-weight: 600; color: var(--text-muted); border-bottom: 0; }
.data .num { text-align: right; }
.data-note { margin-top: var(--space-3); }

/* Pricing: two human options side by side, no third card, no pill. */
.plans { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 768px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); display: flex; flex-direction: column; gap: var(--space-4); }
.price { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-unit { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); color: var(--text-muted); letter-spacing: 0; }
.plan ul { padding-left: var(--space-5); }
.plan li + li { margin-top: var(--space-2); }
.plan .btn { align-self: flex-start; margin-top: auto; }
.checkout-note { margin-top: calc(-1 * var(--space-2)); }
.facts { margin-top: var(--space-7); display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); } }
.facts h3 { margin-bottom: var(--space-2); }
.sources { margin-top: var(--space-2); }

/* Agents */
.agents-grid { display: grid; gap: var(--space-6); margin-top: var(--space-5); }
@media (min-width: 1024px) { .agents-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; } }
.agents-grid p + p { margin-top: var(--space-4); }
.endpoints { list-style: none; padding: 0; margin-top: var(--space-4); }
.endpoints li { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.endpoints li:last-child { border-bottom: 1px solid var(--border); }
pre { background: var(--surface-sunk); color: var(--text); padding: var(--space-5); border-radius: var(--radius-card); overflow-x: auto; line-height: 1.5; tab-size: 2; }
pre:focus-visible { outline-offset: 2px; }

/* Questions: plain question and answer text, no accordion. */
.qa { margin-top: var(--space-6); max-width: 760px; }
.qa div { padding: var(--space-5) 0; border-top: 1px solid var(--border); }
.qa div:last-child { border-bottom: 1px solid var(--border); }
.qa dt { font-weight: 600; }
.qa dd { margin-top: var(--space-2); }

/* Footer */
.site-footer { background: var(--surface-sunk); padding: var(--space-8) 0 var(--space-7); margin-top: 0; }
.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand p { margin-top: var(--space-3); }
.footer-h { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; margin-bottom: var(--space-2); }
.footer-col ul { list-style: none; padding: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
.disclaimer { max-width: none; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }

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

/* v3: the homepage pricing facts have two columns after the refund copy was held back. */
@media (min-width: 1024px) { .facts.facts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }