/* ==========================================================================
   GroundAlly site stylesheet
   Values come from the GroundAlly design system. Do not introduce a colour,
   size or radius that is not a token below.
   Cascade note: media queries live AFTER the base rules they override.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:#F1F3F6;
  --bg-raised:#FBFCFD;
  --text:#141B24;
  --text-secondary:#4E5A68;
  --border:#D7DCE2;
  --border-strong:#B9C1CA;
  --border-interactive:#6E7986;
  --accent:#C79A45;
  --accent-strong:#845E22;
  --accent-ink:#14202E;
  --on-accent-strong:#FBFCFD;
  --accent-wash:#EDEAE4;
  --focus:#845E22;
  --good:#1B6B44;
  --good-wash:#DCE5E4;
  --bad:#B0392B;
  --bad-wash:#EAE0E2;

  --shadow-card: 0 1px 2px rgba(20,27,36,0.05), 0 14px 32px -18px rgba(20,27,36,0.28);
  --shadow-btn: 0 1px 2px rgba(20,27,36,0.08), 0 6px 14px -8px rgba(132,94,34,0.35);

  --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:92px;

  --radius-xs:2px; --radius-sm:3px; --radius-md:4px;
  --radius-lg:9px; --radius-xl:10px; --radius-pill:999px;

  --font-display:"Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1E33;
    --bg-raised:#16283F;
    --text:#EEF1F4;
    --text-secondary:#9AACC0;
    --border:#233A56;
    --border-strong:#335072;
    --border-interactive:#5A7FA8;
    --accent:#D4AA5C;
    --accent-strong:#F0C877;
    --accent-ink:#0F1E33;
    --on-accent-strong:#0F1E33;
    --accent-wash:#2F343A;
    --focus:#F0C877;
    --good:#4FCB8D;
    --good-wash:#193A41;
    --bad:#FF6B54;
    --bad-wash:#352A38;
    --shadow-card: inset 0 1px 0 rgba(255,255,255,0.03), 0 20px 44px -22px rgba(0,0,0,0.65);
    --shadow-btn: 0 10px 22px -10px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1E33;
  --bg-raised:#16283F;
  --text:#EEF1F4;
  --text-secondary:#9AACC0;
  --border:#233A56;
  --border-strong:#335072;
  --border-interactive:#5A7FA8;
  --accent:#D4AA5C;
  --accent-strong:#F0C877;
  --accent-ink:#0F1E33;
  --on-accent-strong:#0F1E33;
  --accent-wash:#2F343A;
  --focus:#F0C877;
  --good:#4FCB8D;
  --good-wash:#193A41;
  --bad:#FF6B54;
  --bad-wash:#352A38;
  --shadow-card: inset 0 1px 0 rgba(255,255,255,0.03), 0 20px 44px -22px rgba(0,0,0,0.65);
  --shadow-btn: 0 10px 22px -10px rgba(0,0,0,0.5);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; text-wrap:balance; font-weight:600; }
h1,h2,h3{ font-family:var(--font-display); }
p,figure,ul,ol{ margin:0; }
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--bg-raised); color:var(--text);
  font-family:var(--font-mono); font-size:13px;
  padding:var(--space-3) var(--space-4); border:1px solid var(--border-interactive);
  border-radius:var(--radius-md);
}
.skip-link:focus{ left:var(--space-4); top:var(--space-4); }

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

/* ---------- Layout ---------- */
.wrap{ max-width:1180px; margin:0 auto; padding-inline:28px; }
.wrap--narrow{ max-width:860px; }
section{ padding-block:var(--space-9); }
.rule{ border:none; border-top:1px dashed var(--border-strong); margin:0; }
.rule--solid{ border-top:1px solid var(--border); }
.raised{ background:var(--bg-raised); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* ---------- Type utilities ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:13px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-strong);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:18px; height:1px; background:var(--accent-strong);
  display:inline-block; flex-shrink:0;
}
.tnum{ font-variant-numeric:tabular-nums; font-family:var(--font-mono); }
.section-head{ max-width:64ch; }
.section-head h1,.section-head h2{
  font-size:clamp(29px, 3.4vw, 42px); margin-top:var(--space-3); line-height:1.06;
}
.section-head p{ margin-top:var(--space-4); color:var(--text-secondary); font-size:16px; max-width:58ch; }
.lede{ font-size:18px; line-height:1.5; color:var(--text-secondary); max-width:52ch; }
.prose p{ color:var(--text-secondary); font-size:16px; max-width:58ch; }
.prose p + p{ margin-top:var(--space-4); }
.prose strong{ color:var(--text); font-weight:600; }
.note{ font-size:13px; line-height:1.5; color:var(--text-secondary); max-width:60ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:14px; font-weight:500; letter-spacing:0.04em;
  line-height:1; text-decoration:none; cursor:pointer;
  padding:14px var(--space-5);
  border-radius:var(--radius-md); border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.btn--primary{ background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-btn); }
.btn--primary:hover{ background:var(--accent-strong); color:var(--on-accent-strong); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--border-interactive); }
.btn--ghost:hover{ border-color:var(--accent-strong); color:var(--accent-strong); }
.inline-link{
  font-family:var(--font-mono); font-size:15px; color:var(--text);
  text-decoration:none; border-bottom:1px solid var(--border-interactive); padding-bottom:2px;
}
.inline-link:hover{ border-color:var(--accent-strong); color:var(--accent-strong); }

/* ---------- Logomark + wordmark ---------- */
.logomark{ width:26px; height:26px; flex-shrink:0; }
.logomark .lm-a{ fill:var(--text); }
.logomark .lm-v{ fill:var(--accent); }
.wordmark{
  font-family:var(--font-display); font-weight:600; font-size:21px;
  letter-spacing:-0.008em; line-height:1; text-decoration:none;
  display:flex; align-items:center; gap:var(--space-3);
}
.wordmark .wm-g{ font-weight:500; }
.wordmark .tag{
  font-family:var(--font-mono); font-size:11px; font-weight:500; line-height:1.2;
  color:var(--text-secondary); letter-spacing:0.08em;
  border:1px solid var(--border-strong); border-radius:var(--radius-xs); padding:2px 5px;
}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-bar{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--space-4); gap:var(--space-4); }
nav.primary{ display:flex; align-items:center; gap:30px; }
.nav-links{ display:flex; gap:26px; }
.nav-links a{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em;
  text-transform:uppercase; text-decoration:none; color:var(--text-secondary);
  padding-block:2px; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover{ color:var(--accent-strong); }
.nav-links a[aria-current="page"]{ color:var(--text); border-bottom-color:var(--accent-strong); }
.site-bar .btn .short{ display:none; }

/* ---------- Hero ---------- */
/* No background grid and no tinted glow behind the hero. Both are stock
   AI-design tells and neither is in the brand. The product window carries
   the visual weight; the ground stays flat. */
.hero{
  padding-top:var(--space-8); padding-bottom:0; position:relative;
  background:var(--bg);
}
.hero-grid{ display:grid; grid-template-columns:1.06fr 0.94fr; gap:var(--space-7); align-items:start; padding-bottom:80px; }
.hero h1{ font-size:clamp(34px, 4.1vw, 50px); line-height:1.04; margin-top:var(--space-4); letter-spacing:-0.005em; }
.hero h1 em{ font-style:italic; font-weight:600; color:var(--accent-strong); }
.hero .lede{ margin-top:var(--space-5); }
.hero-ctas{ display:flex; gap:14px; margin-top:var(--space-6); flex-wrap:wrap; }

/* Compact hero for interior pages */
.page-hero{ padding-block:var(--space-8) var(--space-7); border-bottom:1px solid var(--border); }
.page-hero h1{ font-size:clamp(32px, 3.8vw, 46px); line-height:1.05; margin-top:var(--space-3); }
.page-hero .lede{ margin-top:var(--space-5); max-width:56ch; }

/* ---------- Product window ---------- */
.app-window{
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card);
}
.app-titlebar{ display:flex; align-items:center; gap:var(--space-2); padding:11px 14px; border-bottom:1px solid var(--border); }
.app-titlebar .dot{ width:8px; height:8px; border-radius:var(--radius-pill); }
.app-titlebar .dot--r{ background:#E0665A; }
.app-titlebar .dot--y{ background:#E3B341; }
.app-titlebar .dot--g{ background:#57AB6B; }
.app-url{
  margin-left:var(--space-2); flex:1;
  font-family:var(--font-mono); font-size:11px; color:var(--text-secondary);
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); padding:3px 10px;
}
.app-body{ display:grid; grid-template-columns:118px 1fr; min-height:300px; }
.app-nav{ border-right:1px solid var(--border); padding:var(--space-4) 10px; display:flex; flex-direction:column; gap:2px; }
/* 12px clipped "Reconciliation" inside the 118px rail. */
.app-nav-item{ font-family:var(--font-mono); font-size:11px; color:var(--text-secondary); padding:var(--space-2) 9px; border-radius:var(--radius-md); white-space:nowrap; }
.app-nav-item--active{ background:var(--accent-wash); color:var(--accent-strong); font-weight:600; }
.app-main{ padding:18px var(--space-4); }
.app-stats{ display:flex; gap:22px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--border); margin-bottom:var(--space-4); }
.app-stat-num{ display:block; font-family:var(--font-mono); font-size:20px; font-weight:600; color:var(--text); line-height:1.2; }
.app-stat-label{ display:block; font-size:11px; color:var(--text-secondary); margin-top:2px; }
.app-table-scroll{ overflow-x:auto; }
table.app-table{ width:100%; min-width:352px; border-collapse:collapse; table-layout:fixed; font-family:var(--font-mono); font-size:13px; }
.app-table col.c-station{ width:15%; }
.app-table col.c-item{ width:41%; }
.app-table col.c-amt{ width:23%; }
.app-table col.c-status{ width:21%; }
.app-table th{
  text-align:left; font-size:11px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--text-secondary); padding:0 10px var(--space-2); border-bottom:1px solid var(--border);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.app-table td{ padding:var(--space-3) 10px; border-bottom:1px solid var(--border); color:var(--text-secondary); vertical-align:middle; line-height:1.35; }
.app-table tr:last-child td{ border-bottom:none; }
.app-table td:first-child{ color:var(--text); white-space:nowrap; }
.app-table td.tnum{ text-align:right; color:var(--text); white-space:nowrap; }

/* ---------- Status flags ---------- */
.flag{
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.05em;
  text-transform:uppercase; line-height:1.2;
  padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm);
  white-space:nowrap; display:inline-block;
}
.flag--good{ background:var(--good-wash); color:var(--good); }
.flag--bad{ background:var(--bad-wash); color:var(--bad); }
.flag--open{ background:var(--accent-wash); color:var(--accent-strong); }

/* ---------- Trust strip ---------- */
.trust-strip{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-raised); }
.trust-row{ display:flex; flex-wrap:wrap; row-gap:10px; column-gap:28px; padding-block:var(--space-5); }
.trust-item{ display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.03em; color:var(--text-secondary); }
.trust-item .pip{ width:5px; height:5px; border-radius:var(--radius-pill); background:var(--accent-strong); flex-shrink:0; }

/* ---------- Stat lines ---------- */
.statline{ border-top:1px solid var(--border); padding-block:19px; display:flex; align-items:baseline; gap:var(--space-4); }
.statline:last-child{ border-bottom:1px solid var(--border); }
.statline .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:32px; font-weight:600; color:var(--accent-strong); line-height:1; flex-shrink:0; min-width:118px; }
.statline .cap{ font-size:13px; line-height:1.5; color:var(--text-secondary); max-width:34ch; }
.two-up{ display:grid; grid-template-columns:1.3fr 1fr; gap:56px; margin-top:var(--space-7); align-items:start; }

/* ---------- Services ---------- */
.service-list{ margin-top:var(--space-7); }
.service{ display:grid; grid-template-columns:84px 1fr; gap:var(--space-5); padding-block:var(--space-6); border-top:1px dashed var(--border-strong); }
.service:last-child{ border-bottom:1px dashed var(--border-strong); }
.service .num{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:44px; line-height:1; color:var(--accent-strong); }
.service h2,.service h3{ font-size:25px; font-weight:600; line-height:1.2; font-family:var(--font-display); }
.service .idx{ font-family:var(--font-mono); font-size:11px; color:var(--text-secondary); letter-spacing:0.1em; margin-top:2px; display:block; }
.service p{ margin-top:10px; color:var(--text-secondary); max-width:60ch; font-size:15px; line-height:1.5; }

/* ---------- Detail lists ---------- */
.deflist{ margin-top:var(--space-5); display:grid; gap:var(--space-4); }
.deflist > div{ display:grid; grid-template-columns:168px 1fr; gap:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--border); }
.deflist dt,.deflist .dt{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-secondary); line-height:1.5; }
.deflist dd,.deflist .dd{ margin:0; font-size:15px; line-height:1.55; color:var(--text-secondary); max-width:58ch; }
.deflist .dd strong{ color:var(--text); font-weight:600; }

.checklist{ list-style:none; padding:0; margin-top:var(--space-4); display:grid; gap:var(--space-3); }
/* Marker is absolutely positioned, not a grid/flex item: a bare text node beside an
   inline <strong> would otherwise be wrapped in an anonymous box and pushed to its
   own row, splitting every bullet in two. */
.checklist li{
  position:relative; padding-left:18px;
  font-size:15px; line-height:1.55; color:var(--text-secondary); max-width:60ch;
}
.checklist li::before{
  content:""; position:absolute; left:0; top:10px;
  width:5px; height:5px; border-radius:var(--radius-pill); background:var(--accent-strong);
}
.checklist li strong{ color:var(--text); font-weight:600; }

/* ---------- Cards ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); margin-top:var(--space-7); }
.card{ background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-5); }
.card h3{ font-size:19px; line-height:1.25; margin-top:var(--space-2); }
.card p{ margin-top:var(--space-2); font-size:14px; line-height:1.5; color:var(--text-secondary); }
.card .kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-strong); }

/* ---------- Diagram ---------- */
.diagram-figure{ margin-top:var(--space-7); }
.diagram-scroll{ overflow-x:auto; padding-bottom:var(--space-1); }
.diagram-figure svg{ width:100%; min-width:640px; max-width:920px; height:auto; }
.diagram-figure figcaption{ margin-top:var(--space-4); font-size:13px; line-height:1.5; color:var(--text-secondary); max-width:64ch; }
.dg text{ font-family:var(--font-mono); fill:var(--text-secondary); }
.dg .dg-node{ fill:var(--bg); stroke:var(--border-strong); stroke-width:1.5; }
.dg .dg-node--good{ stroke:var(--good); stroke-width:1.8; }
.dg .dg-node--bad{ stroke:var(--bad); stroke-width:1.8; }
.dg .t-good{ fill:var(--good); }
.dg .t-bad{ fill:var(--bad); }
.dg .dg-line{ fill:none; stroke:var(--text-secondary); stroke-width:1.5; }
.dg .dg-line--good{ fill:none; stroke:var(--good); stroke-width:1.5; }
.dg .dg-line--bad{ fill:none; stroke:var(--bad); stroke-width:1.5; }
.dg #arrN path,.dg #arrNv path{ fill:var(--text-secondary); }
.dg #arrG path,.dg #arrGv path{ fill:var(--good); }
.dg #arrB path,.dg #arrBv path{ fill:var(--bad); }
.dg-v{ display:none; }

/* ---------- Steps ---------- */
.step-list{ display:grid; grid-template-columns:repeat(5,1fr); margin-top:var(--space-7); }
.step{ border-left:1px solid var(--border); padding-left:18px; }
.step-list .step:first-child{ border-left:none; padding-left:0; }
.step .step-num{ font-family:var(--font-mono); font-size:11px; color:var(--accent-strong); letter-spacing:0.06em; }
.step h3,.step h4{ font-family:var(--font-body); font-size:14px; font-weight:600; margin-top:6px; line-height:1.4; }
.step p{ margin-top:6px; font-size:13px; color:var(--text-secondary); line-height:1.5; }

/* ---------- Chips ---------- */
.chips{ display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-5); }
.chip{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em;
  background:var(--bg-raised); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); padding:9px var(--space-3); color:var(--text-secondary);
}

/* ---------- Contact panel ---------- */
.contact-panel{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:var(--space-7); position:relative; overflow:hidden; box-shadow:var(--shadow-card);
}
.stamp{
  position:absolute; top:var(--space-6); right:var(--space-6);
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent-strong); border:1.5px solid var(--accent-strong);
  border-radius:var(--radius-sm); padding:6px 10px; transform:rotate(4deg);
}
.contact-panel h2{ font-size:clamp(28px,4vw,42px); max-width:16ch; margin-top:var(--space-3); line-height:1.06; }
.contact-panel p{ margin-top:var(--space-4); color:var(--text-secondary); max-width:56ch; font-size:16px; }
.contact-row{ display:flex; gap:18px; margin-top:var(--space-6); flex-wrap:wrap; align-items:center; }

/* ---------- FAQ ---------- */
.faq{ margin-top:var(--space-7); border-top:1px solid var(--border); }
.faq details{ border-bottom:1px solid var(--border); }
.faq summary{
  cursor:pointer; list-style:none; padding-block:var(--space-5);
  font-family:var(--font-display); font-size:19px; font-weight:600; line-height:1.3;
  display:flex; justify-content:space-between; gap:var(--space-4); align-items:baseline;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--font-mono); font-size:18px; color:var(--accent-strong); flex-shrink:0;
}
.faq details[open] summary::after{ content:"\2212"; }
.faq summary:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.faq details p{ padding-bottom:var(--space-5); margin-top:calc(var(--space-2) * -1); font-size:15px; line-height:1.6; color:var(--text-secondary); max-width:62ch; }

/* ---------- Footer ---------- */
footer.site{ border-top:1px solid var(--border); padding-block:var(--space-7) var(--space-6); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-7); }
.footer-col h2{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-secondary); }
.footer-col ul{ list-style:none; padding:0; margin-top:var(--space-3); display:grid; gap:var(--space-2); }
.footer-col a{ font-family:var(--font-mono); font-size:13px; color:var(--text-secondary); text-decoration:none; }
.footer-col a:hover{ color:var(--accent-strong); }
.footer-blurb{ margin-top:var(--space-4); font-size:13px; line-height:1.55; color:var(--text-secondary); max-width:38ch; }
.footer-fine{
  margin-top:var(--space-7); padding-top:var(--space-5); border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.03em; color:var(--text-secondary);
  display:flex; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap;
}

/* ==========================================================================
   Responsive. Every override lives below the rule it overrides.
   ========================================================================== */
@media (max-width:980px){
  .step-list{ grid-template-columns:repeat(2,1fr); gap:var(--space-5); }
  .step-list .step{ border-left:none; padding-left:0; border-top:1px solid var(--border); padding-top:var(--space-4); }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:var(--space-7); }
}
@media (max-width:880px){
  .two-up{ grid-template-columns:1fr; gap:var(--space-6); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .nav-links{ display:none; }
}
@media (max-width:720px){
  section{ padding-block:var(--space-8); }
  .wrap{ padding-inline:20px; }
  .contact-panel{ padding:var(--space-6) var(--space-5); }
  .dg-h{ display:none; }
  .diagram-scroll{ overflow-x:visible; }
  .diagram-figure svg.dg-v{ display:block; width:100%; min-width:0; max-width:360px; margin-inline:auto; }
  .deflist > div{ grid-template-columns:1fr; gap:var(--space-2); }
}
@media (max-width:680px){
  .service{ grid-template-columns:1fr; gap:var(--space-2); }
  .card-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:var(--space-6); }
}
@media (max-width:560px){
  .app-body{ grid-template-columns:1fr; min-height:auto; }
  .app-nav{ display:none; }
  table.app-table{ min-width:300px; table-layout:auto; }
  .app-table col{ width:auto; }
  .app-table .col-amt{ display:none; }
  .app-table th:nth-child(2),.app-table td:nth-child(2){ width:100%; }
  .stamp{ display:none; }
}
@media (max-width:520px){
  .step-list{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .wordmark .tag{ display:none; }
  .site-bar .btn{ padding:10px var(--space-4); font-size:12px; }
  .site-bar .btn .full{ display:none; }
  .site-bar .btn .short{ display:inline; }
}
@media (max-width:420px){
  .statline{ flex-direction:column; gap:var(--space-2); }
  .statline .num{ min-width:0; }
}

/* Aligns a checklist under a numbered service block with that block's copy column. */
.checklist--indent{ padding-left:108px; }
@media (max-width:680px){ .checklist--indent{ padding-left:0; } }

/* ==========================================================================
   STAGE, ARTIFACTS AND THE RECONCILIATION DEMO
   Added in the second design pass. The site previously had no full-bleed
   device and never used navy in light mode; .stage is that device.
   ========================================================================== */

:root{
  --stage:#0F1E33;
  --stage-text:#EEF1F4;
  --stage-text-2:#9AACC0;
  --stage-accent:#F0C877;
  --stage-border:#233A56;
  --stage-line:#5A7FA8;
  /* Paper stays a light object in both themes. A scanned contract is paper. */
  --paper:#FBFCFD;
  --paper-ink:#141B24;
  --paper-ink-2:#4E5A68;
  --paper-rule:#D7DCE2;
  --paper-brass:#845E22;
  --paper-mark:#F3E6CD;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --stage:#16283F;
    --stage-border:#335072;
    --paper:#E8EBEF;
    --paper-rule:#C6CDD6;
  }
}
:root[data-theme="dark"]{
  --stage:#16283F;
  --stage-border:#335072;
  --paper:#E8EBEF;
  --paper-rule:#C6CDD6;
}

.stage{
  background:var(--stage); color:var(--stage-text);
  border-top:1px solid var(--stage-border); border-bottom:1px solid var(--stage-border);
}
.stage .eyebrow{ color:var(--stage-accent); }
.stage .eyebrow::before{ background:var(--stage-accent); }
.stage h1,.stage h2,.stage h3{ color:var(--stage-text); }
.stage p,.stage .section-head p,.stage .note{ color:var(--stage-text-2); }
.stage .btn--ghost{ color:var(--stage-text); border-color:var(--stage-line); }
.stage .btn--ghost:hover{ color:var(--stage-accent); border-color:var(--stage-accent); }
.stage .inline-link{ color:var(--stage-text); border-bottom-color:var(--stage-line); }
.stage .inline-link:hover{ color:var(--stage-accent); border-bottom-color:var(--stage-accent); }
.stage :focus-visible{ outline-color:var(--stage-accent); }

/* Wide composition: the page finally uses its own width. */
.spread{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:start; }
.spread--wide{ grid-template-columns:1.25fr 1fr; }
.spread--narrow{ grid-template-columns:1fr 1.25fr; }
.stack{ display:grid; gap:var(--space-5); }

/* ---------- Paper: a source document ---------- */
.paper{
  background:var(--paper); color:var(--paper-ink);
  border:1px solid var(--paper-rule); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.paper-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--paper-rule);
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--paper-ink-2);
}
.paper-head .pg{ color:var(--paper-brass); }
.paper-body{ padding:var(--space-5); font-family:var(--font-mono); font-size:12.5px; line-height:1.75; }
.paper-body .cl{ color:var(--paper-ink-2); }
.paper-body mark{
  background:var(--paper-mark); color:var(--paper-ink);
  padding:1px 0; box-shadow:0 0 0 3px var(--paper-mark);
}
.paper-cite{
  padding:var(--space-3) var(--space-4); border-top:1px solid var(--paper-rule);
  font-family:var(--font-mono); font-size:11px; color:var(--paper-ink-2);
}

/* ---------- Extracted terms ---------- */
.terms{ border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--bg-raised); }
.terms-head{
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-secondary);
}
.terms-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:var(--space-4); align-items:baseline;
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:13px;
}
.terms-row:last-child{ border-bottom:none; }
.terms-row .t{ color:var(--text-secondary); }
.terms-row .v{ color:var(--text); font-variant-numeric:tabular-nums; text-align:right; min-width:0; }
.terms-row--on{ background:var(--accent-wash); }
.terms-row--on .t{ color:var(--accent-strong); font-weight:600; }
.terms-row--on .v{ color:var(--accent-strong); font-weight:600; }

/* ---------- The check ---------- */
.check{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:var(--space-6); }
.check-cell{ padding:var(--space-5) var(--space-5) var(--space-5) 0; }
.check-cell + .check-cell{ border-left:1px solid var(--stage-border); padding-left:var(--space-5); }
.check-lbl{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--stage-text-2);
}
.check-val{
  margin-top:var(--space-2); font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(28px,3.4vw,42px); font-weight:600; line-height:1; color:var(--stage-text);
}
.check-val--delta{ color:var(--bad); }
.check-val--ok{ color:var(--good); }
.check-sub{ margin-top:var(--space-2); font-size:13px; line-height:1.45; color:var(--stage-text-2); }

/* ---------- Picker ---------- */
.picker{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5); }
.picker-btn{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.03em;
  background:transparent; color:var(--stage-text-2);
  border:1px solid var(--stage-line); border-radius:var(--radius-md);
  padding:10px var(--space-3); cursor:pointer; text-align:left;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.picker-btn:hover{ color:var(--stage-text); border-color:var(--stage-accent); }
.picker-btn:focus-visible{ outline:2px solid var(--stage-accent); outline-offset:2px; }
.picker-btn[aria-pressed="true"]{
  background:var(--stage-accent); color:var(--accent-ink); border-color:var(--stage-accent); font-weight:600;
}
.picker-btn .side{ display:block; font-size:10px; letter-spacing:0.09em; text-transform:uppercase; opacity:.75; margin-bottom:3px; }

/* ---------- Verdict banner ---------- */
.verdict{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  padding:var(--space-4) var(--space-5); border-radius:var(--radius-md);
  border:1px solid var(--border); background:var(--bg-raised);
}
.verdict--bad{ border-color:var(--bad); }
.verdict--good{ border-color:var(--good); }
.verdict .what{ font-size:15px; line-height:1.5; color:var(--text-secondary); max-width:70ch; }
.verdict .what strong{ color:var(--text); font-weight:600; }

/* ---------- Comparison split ---------- */
.versus{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.versus > div{ padding:var(--space-5); }
.versus > div:first-child{ background:var(--bg-raised); border-right:1px solid var(--border); }
.versus > div:last-child{ background:var(--stage); color:var(--stage-text); }
.versus .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; }
.versus > div:first-child .k{ color:var(--text-secondary); }
.versus > div:last-child .k{ color:var(--stage-accent); }
.versus h3{ margin-top:var(--space-3); font-size:21px; line-height:1.25; }
.versus > div:first-child h3{ color:var(--text); }
.versus > div:last-child h3{ color:var(--stage-text); }
.versus p{ margin-top:var(--space-3); font-size:14px; line-height:1.55; }
.versus > div:first-child p{ color:var(--text-secondary); }
.versus > div:last-child p{ color:var(--stage-text-2); }

/* ---------- Figure band (stage) ---------- */
.figband{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.figband--4{ grid-template-columns:repeat(4,1fr); }
.figband > div{ padding-right:var(--space-6); }
.figband > div + div{ border-left:1px solid var(--stage-border); padding-left:var(--space-6); }
.figband .n{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(32px,3.8vw,46px); font-weight:600; line-height:1; color:var(--stage-accent);
}
.figband .c{ margin-top:var(--space-3); font-size:14px; line-height:1.5; color:var(--stage-text-2); max-width:34ch; }

/* ---------- Responsive for the above (kept last) ---------- */
@media (max-width:900px){
  .spread,.spread--wide,.spread--narrow{ grid-template-columns:1fr; gap:var(--space-6); }
  .versus{ grid-template-columns:1fr; }
  .versus > div:first-child{ border-right:none; border-bottom:1px solid var(--border); }
  .figband,.figband--4{ grid-template-columns:1fr; gap:var(--space-5); }
  .figband > div{ padding-right:0; }
  .figband > div + div{ border-left:none; padding-left:0; border-top:1px solid var(--stage-border); padding-top:var(--space-5); }
}
@media (max-width:720px){
  .check{ grid-template-columns:1fr; }
  .check-cell{ padding:var(--space-4) 0; border-top:1px solid var(--stage-border); }
  .check-cell + .check-cell{ border-left:none; padding-left:0; }
  .paper-body{ padding:var(--space-4); font-size:12px; line-height:1.7; }
  .picker-btn{ flex:1 1 100%; }
}