/* =============================================================================
   Carpusor public landing page.
   Design tokens are the same variables as packages/creatives/tokens.css.
   Single source of truth for values: ../BRAND.md sections 2 and 3.
   Change a value here, never inline in the HTML.

   Fonts are loaded with a <link> in the document head (preconnect + display=swap)
   rather than with @import, because @import inside a stylesheet serialises the
   request behind the CSS and costs us LCP. Same two families, same weights.
   IBM Plex Sans + IBM Plex Mono only. The forbidden list (the two default faces
   of AI-generated landing pages, plus the serif display faces and the two
   Carpathian Jerky faces) is in BRAND.md section 2 and appears nowhere below.
   ========================================================================== */

:root {
  /* Colour. BRAND.md section 3. Nothing outside this list. */
  --ink:    #14181D;
  --paper:  #F6F6F3;
  --signal: #0E7C66;
  --alarm:  #B4322A;
  --warn:   #A8730B;
  --rule:   #DBDBD4;
  --muted:  #6A7178;

  /* Derived surfaces: same tokens, alpha or lightness only. No new hues.
     --surface is the white a card sits on against the warm paper page. Same
     device as .card in packages/creatives/tokens.css. */
  --ink-soft:    #232A31;
  --paper-warm:  #EFEFEA;
  --surface:     #FFFFFF;
  --signal-deep: #0B6553;          /* signal, darkened, for the button hover only */
  --signal-dim:  #0E7C6614;
  --signal-line: #0E7C6640;
  --alarm-dim:   #B4322A14;
  --alarm-line:  #B4322A40;
  --warn-dim:    #A8730B14;
  --warn-line:   #A8730B40;

  /* Paper at reduced alpha, for text and hairlines sitting on the ink band.
     Nothing new, just less of the paper token. */
  --on-ink:       rgba(246, 246, 243, 0.80);
  --on-ink-muted: rgba(246, 246, 243, 0.55);
  --on-ink-rule:  rgba(246, 246, 243, 0.18);
  --on-ink-line:  rgba(246, 246, 243, 0.30);

  /* Type. BRAND.md section 2. */
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Web scale. Fluid, mobile first. */
  --t-h1:      clamp(2.05rem, 6.1vw, 3.5rem);
  --t-h2:      clamp(1.5rem, 3.5vw, 2.15rem);
  --t-h3:      clamp(1.05rem, 1.6vw, 1.15rem);
  --t-lead:    clamp(1.05rem, 1.9vw, 1.25rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-mono-lg: 0.8125rem;
  --t-mono:    0.75rem;
  --t-mono-sm: 0.6875rem;

  --gutter: 20px;
  --maxw: 1100px;
  --maxw-wide: 1240px;
  --sec-pad: clamp(44px, 7vw, 92px);
}

/* ---------- reset + base ------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
h1 { font-size: var(--t-h1); letter-spacing: -0.028em; line-height: 1.03; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }
p  { margin: 0 0 0.9em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; }
img { max-width: 100%; display: block; }

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--signal); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; z-index: 50; font-family: var(--mono); font-size: var(--t-mono);
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- layout ------------------------------------------------------- */

.wrap { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; }
.wrap--wide { width: min(100% - (var(--gutter) * 2), var(--maxw-wide)); margin-inline: auto; }

section { padding: var(--sec-pad) 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }

.sec-head { margin-bottom: clamp(24px, 3.5vw, 40px); }
.sec-head h2 { max-width: 22ch; }
.sec-head .lead { margin-top: 14px; max-width: 66ch; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.eyebrow .n { color: var(--signal); font-weight: 600; }
.eyebrow::after {
  content: "";
  height: 1px;
  background: var(--rule);
  flex: 1;
}

.lead { font-size: var(--t-lead); line-height: 1.45; color: var(--ink-soft); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tok { font-family: var(--mono); background: var(--paper-warm); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
.note {
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 72ch;
}

/* Spacing utilities. Values live here, never in a style attribute. */
.mt-1 { margin-top: 14px; }
.mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 22px; }
.mt-4 { margin-top: 26px; }

/* Column widths for the wide tables. Ignored below 720px, where rows stack. */
.c-area  { width: 26%; }
.c-check { width: 52%; }
.c-count { width: 10%; }
.c-out   { width: 12%; }
.c-day   { width: 22%; }
.c-sys   { width: 26%; }
.c-acc   { width: 40%; }
.c-for   { width: 34%; }

/* ---------- header ------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
/* The header is sticky and 59px tall with its rule, so an anchor target has to
   start below it. Without this, every nav link lands with its own heading hidden
   underneath the bar. */
main section[id], main [id] { scroll-margin-top: 72px; }
.site-head .bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 58px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: var(--t-mono-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.wordmark .dot { width: 10px; height: 10px; background: var(--signal); border-radius: 2px; flex: none; }
.wordmark span.sub { color: var(--muted); font-weight: 400; display: none; }

.site-nav { display: none; gap: 22px; margin-left: auto; }
.site-nav a {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.site-nav a:hover { color: var(--ink); }
.site-head .btn { margin-left: auto; }

/* ---------- buttons ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--signal);
  color: var(--surface);
  border: 1px solid var(--signal);
  border-radius: 4px;
  padding: 12px 18px;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--signal-deep); border-color: var(--signal-deep); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--sm { padding: 8px 13px; font-size: var(--t-mono-lg); }
.btn--lg { padding: 15px 24px; font-size: 1rem; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn--ghost:hover { background: transparent; border-color: var(--ink); }

/* ---------- hero --------------------------------------------------------- */

.hero { padding-top: clamp(38px, 6vw, 72px); padding-bottom: clamp(38px, 6vw, 76px); }
.hero h1 { max-width: 16ch; }
.hero .lead { margin-top: 20px; max-width: 58ch; }
.hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.hero .cta-note { font-size: var(--t-small); color: var(--muted); max-width: 46ch; }

.factstrip {
  margin-top: 32px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  display: grid;
  grid-template-columns: 1fr;
}
.factstrip div { padding: 14px 16px; border-top: 1px solid var(--rule); }
.factstrip div:first-child { border-top: 0; }
.factstrip dt {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.factstrip dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.factstrip dd small { display: block; font-size: var(--t-small); font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 2px; }

.hero-steps { margin-top: 26px; }
.hero-steps .eyebrow { margin-bottom: 4px; }
.hero-steps .ruled li { padding: 9px 0; }

.icp {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-mono-lg);
  line-height: 1.6;
  color: var(--muted);
}
.icp b { color: var(--ink); font-weight: 600; }

/* ---------- problem ------------------------------------------------------ */

.stack-list { border-top: 1px solid var(--rule); margin-top: 8px; }
.stack-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.stack-list .n {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 600;
  color: var(--signal);
  padding-top: 4px;
}

.recon {
  margin-top: clamp(26px, 4vw, 40px);
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}
.recon-grid { display: grid; grid-template-columns: 1fr; }
.recon-pane { padding: 16px 18px; border-top: 1px solid var(--rule); }
.recon-pane:first-child { border-top: 0; }
.recon-pane h3 {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.recon-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--rule);
  font-size: var(--t-small);
}
.recon-row:last-child { border-bottom: 0; }
.slot {
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--muted);
  border-bottom: 1.5px dashed var(--rule);
  padding: 2px 22px 2px 10px;
  border-radius: 2px;
  background: var(--paper-warm);
}
.recon-foot {
  border-top: 1px solid var(--rule);
  background: var(--paper-warm);
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: var(--t-small);
}
.recon-foot .label {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- responsive tables ------------------------------------------- */

.rtable-wrap { margin-top: 8px; }
.rtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.rtable caption {
  text-align: left;
  font-size: var(--t-small);
  color: var(--muted);
  padding-bottom: 12px;
}
.rtable th {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--ink);
  vertical-align: bottom;
}
.rtable td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.rtable td:last-child, .rtable th:last-child { padding-right: 0; }
.rtable .area-name {
  font-family: var(--mono);
  font-size: var(--t-mono-lg);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
}
.rtable .area-q { color: var(--muted); display: block; }
.rtable .checks { font-family: var(--mono); white-space: nowrap; }
.rtable .cid {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  color: var(--signal);
  font-weight: 600;
  margin-right: 6px;
}
.rtable li + li { margin-top: 7px; }
.rtable .day {
  font-family: var(--mono);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 719px) {
  .rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
  /* A caption inside a display:block table loses its table context and collapses
     to the width of its longest word. Put it back to full width. */
  .rtable caption { display: block; width: 100%; }
  .rtable tr {
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--surface);
    padding: 4px 14px 8px;
    margin-bottom: 10px;
  }
  .rtable td { border-bottom: 1px solid var(--rule); padding: 9px 0; }
  .rtable tr td:last-child { border-bottom: 0; }
  .rtable td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: var(--t-mono-sm);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .rtable td.no-label::before { content: none; }
}

/* ---------- scorecard ---------------------------------------------------- */

.card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}

.sc-head {
  background: var(--ink);
  color: var(--paper);
  padding: 13px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.sc-head .who {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 9px;
}
.sc-head .who .dot { width: 9px; height: 9px; background: var(--signal); border-radius: 2px; flex: none; }
.sc-tag {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid var(--on-ink-line);
  border-radius: 3px;
  padding: 4px 9px;
}
.sc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-warm);
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sc-meta b { color: var(--ink-soft); font-weight: 600; }

.sc-colhead { display: none; }

.sc-row {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 14px;
  align-items: start;
}
.sc-row:last-child { border-bottom: 0; }
.sc-area { grid-column: 1; }
/* Row labels exist for the single-column phone layout, where there is no column
   header above the field. Hidden once the five column header appears. */
.sc-row .lbl {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 46px;
}
.sc-area .name {
  font-family: var(--mono);
  font-size: var(--t-mono-lg);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sc-area .q { display: block; font-size: var(--t-small); color: var(--muted); line-height: 1.4; margin-top: 2px; }
/* The score is a blank field, not a number. BRAND.md section 1: we have no client
   results, so the card shows the layout and the client fills the values. Same
   .slot device as the reconciliation worksheet in section 2. */
.sc-score {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 6px;
}
.sc-score small { font-family: var(--mono); font-size: var(--t-mono); color: var(--muted); }
.slot--score { min-width: 86px; text-align: center; padding-right: 10px; }
.sc-state {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 2px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}
.badge i { width: 7px; height: 7px; border-radius: 1px; flex: none; }
.sc-formula {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  color: var(--muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
  margin-top: 2px;
}
.sc-formula b { color: var(--ink-soft); font-weight: 600; }

.is-alarm  { color: var(--alarm); }
.is-warn   { color: var(--warn); }
.is-signal { color: var(--signal); }
.badge.is-alarm  { background: var(--alarm-dim);  border-color: var(--alarm-line); }
.badge.is-warn   { background: var(--warn-dim);   border-color: var(--warn-line); }
.badge.is-signal { background: var(--signal-dim); border-color: var(--signal-line); }
.badge.is-alarm i  { background: var(--alarm); }
.badge.is-warn i   { background: var(--warn); }
.badge.is-signal i { background: var(--signal); }
/* Neutral badge: no state colour, because "not verified" is the absence of a
   state rather than a bad one. Also used by thanks-nurture.html. */
.badge--neutral   { background: var(--paper-warm); border-color: var(--rule); color: var(--muted); }
.badge--neutral i { background: var(--muted); }

/* Legend for the three states plus the unverified case. These four bands are the
   rule the engine actually applies (engine/scorecard.mjs, verdictFor), which is
   why alarm and warn are allowed to appear here: they describe a defined state. */
.sc-legend {
  background: var(--paper-warm);
  padding: 14px 16px;
}
.sc-legend .label {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.sc-legend ul { display: grid; gap: 9px; }
.sc-legend li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  font-size: var(--t-small);
  line-height: 1.45;
}
.sc-legend li .badge { justify-self: start; }
.sc-legend .note { margin-top: 10px; }

.sc-foot {
  border-top: 1px solid var(--ink);
  padding: 14px 16px;
  background: var(--paper-warm);
}
.sc-foot .rec {
  font-size: var(--t-small);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
}
.sc-foot .rec .label {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.sc-foot .rec b { font-weight: 600; }
.sc-disclaimer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.5;
}
.sc-disclaimer b { color: var(--ink); font-weight: 600; }

/* ---------- two column blocks ------------------------------------------- */

.cols { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); }
.col h3 { margin-bottom: 14px; }

.ruled { border-top: 1px solid var(--rule); }
.ruled li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
  align-items: start;
}
.ruled .n {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 600;
  color: var(--signal);
  padding-top: 3px;
}
.ruled b { font-weight: 600; }

/* ---------- wrong for ---------------------------------------------------- */

.wrong { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); }
.wrong li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
}
.wrong svg { width: 16px; height: 16px; color: var(--alarm); margin-top: 3px; flex: none; }
.wrong h3 { font-size: 1rem; margin-bottom: 4px; }
.wrong p { font-size: var(--t-small); color: var(--muted); }

/* ---------- operator ----------------------------------------------------- */

.operator { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3.5vw, 40px); align-items: start; }
.portrait-fig { margin: 0; max-width: 340px; }
.portrait-box { position: relative; }
.portrait-box img { width: 100%; height: auto; border-radius: 4px; }
.portrait-flag {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 3px;
  line-height: 1.5;
}
.portrait-fig figcaption {
  margin-top: 10px;
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.45;
}
.operator .body p { max-width: 64ch; }
.operator .sig {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-mono-lg);
  color: var(--muted);
  line-height: 1.7;
}
.operator .sig b { color: var(--ink); font-weight: 600; }

/* ---------- faq ---------------------------------------------------------- */

.faq { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); }
.faq > div {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.faq h3 {
  font-size: 1rem;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
}
.faq h3 .n { font-family: var(--mono); font-size: var(--t-mono-sm); color: var(--signal); font-weight: 600; padding-top: 3px; }
.faq p { font-size: var(--t-small); color: var(--ink-soft); max-width: 70ch; padding-left: 40px; }
.faq p + p { margin-top: 8px; }

/* ---------- closing cta -------------------------------------------------- */

.close-cta { background: var(--ink); color: var(--paper); border-top: 0; }
.close-cta h2 { color: var(--paper); max-width: 18ch; }
.close-cta .lead { color: var(--on-ink); max-width: 56ch; margin-top: 14px; }
.close-cta .eyebrow { color: var(--on-ink-muted); }
.close-cta .eyebrow::after { background: var(--on-ink-rule); }
.close-cta .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
.close-cta .cta-note { font-size: var(--t-small); color: var(--on-ink-muted); max-width: 44ch; }
.close-cta .terms {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--on-ink-rule);
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--on-ink-muted);
  line-height: 1.8;
}
.close-cta .terms b { color: var(--paper); font-weight: 600; }

/* ---------- footer ------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--rule);
  padding: 36px 0 44px;
  font-size: var(--t-small);
}
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.foot-grid h4 {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.foot-grid li { padding: 3px 0; }
.foot-grid a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
.foot-grid a:hover { border-bottom-color: var(--signal); }
/* The wordmark is a flex anchor, so it would stretch the underline across the
   whole column. It is a mark, not a link in a list. */
.foot-grid a.wordmark { border-bottom: 0; }
.foot-bottom {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ---------- breakpoints -------------------------------------------------- */

@media (min-width: 560px) {
  .factstrip { grid-template-columns: repeat(3, 1fr); }
  .factstrip div { border-top: 0; border-left: 1px solid var(--rule); }
  .factstrip div:first-child { border-left: 0; }
  .recon-grid { grid-template-columns: 1fr 1fr; }
  .recon-pane { border-top: 0; border-left: 1px solid var(--rule); }
  .recon-pane:first-child { border-left: 0; }
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --t-body: 1.0625rem; }
  body { font-size: var(--t-body); }
  .wordmark span.sub { display: inline; }
  .wrong { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .foot-grid { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 32px; }
  .faq { grid-template-columns: 1fr 1fr; column-gap: 44px; }
  .operator { grid-template-columns: 300px 1fr; }
  .portrait-fig { max-width: none; }

  .sc-colhead {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 136px 118px minmax(0, 1.5fr);
    gap: 14px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: var(--t-mono-sm);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .sc-row {
    grid-template-columns: minmax(0, 1.4fr) 136px 118px minmax(0, 1.5fr);
    gap: 14px;
    align-items: center;
    padding: 15px 16px;
  }
  .sc-area { grid-column: auto; }
  .sc-score { grid-column: auto; margin-top: 0; }
  .sc-state { grid-column: auto; margin-top: 0; }
  .sc-formula { grid-column: auto; margin-top: 0; }
  .sc-row .lbl { display: none; }
  .slot--score { min-width: 0; flex: 1; }

  .sc-legend li { grid-template-columns: 124px 1fr; gap: 14px; align-items: baseline; }
  .sc-legend li .badge { justify-self: start; }
}

@media (min-width: 900px) {
  /* The access table needs real width before it can sit beside anything else.
     At 768 it collapses into three narrow columns, so the split waits until 900. */
  .cols { grid-template-columns: 1fr 1fr; }
  .site-nav { display: flex; }
  .site-head .btn { margin-left: 0; }
  .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; }
  .hero .factstrip { grid-template-columns: 1fr; margin-top: 0; }
  .hero .factstrip div { border-left: 0; border-top: 1px solid var(--rule); }
  .hero .factstrip div:first-child { border-top: 0; }
  .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .problem-grid .recon { margin-top: 0; }
}

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

@media print {
  .site-head, .close-cta { display: none; }
  body { background: var(--surface); }
}