/* ══════════════════════════════════════════════════════════════════════════
   CAPSTONE DATA — the pages behind the menu.
   New 2026-08-27, when the site collapsed onto the builder and /results,
   /how-it-works and /who-we-serve became their own pages.

   ⚠ THESE ARE HAND-AUTHORED, NOT GENERATED. Their content came off
   nationwide.html, but nothing here is produced by deploy/build_nationwide.py
   and nothing depends on it — that script and the page it built are retiring,
   and a sub-page that still needed them would have blocked the deletion.

   ⚠ THE PALETTE IS order.html's, VALUE FOR VALUE. One site, one look. Read the
   notes there before changing a colour: --ink is WHITE (text on an amber fill),
   and using it for text on the page is what made the guarantee invisible.
   ══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --page:#faf8f4; --card:#ffffff; --sunk:#f5f2ec;
  --line:#e4dfd5; --line2:#ece8e0;
  --amber:#8a6410; --amber-dim:#c9a961;
  --text:#1b1a17; --dim:#6e6a61; --meta:#726d64;
  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  background:var(--page); color:var(--text); font-family:var(--ui);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}

/* ── the bar, matching the builder's ─────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,253,249,.98); border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.topbar-in{
  max-width:1080px; margin:0 auto; height:62px; padding:0 24px;
  display:flex; align-items:center; gap:18px;
}
.logo{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--text) }
.logo img{ height:30px; width:auto; display:block }
.logo b{ font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase }
.topbar .back{
  margin-left:auto; font-size:13px; font-weight:600; color:var(--amber);
  text-decoration:none; white-space:nowrap;
}
.topbar .back:hover{ text-decoration:underline }

/* ── shell ───────────────────────────────────────────────────────────────── */
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px 88px }
header.doc{ padding:54px 0 8px }
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--amber); margin-bottom:14px;
}
h1{
  font-size:clamp(30px,5vw,44px); line-height:1.06; letter-spacing:-.022em;
  font-weight:700; max-width:18ch; text-wrap:balance;
}
.lede{ margin-top:18px; font-size:17px; line-height:1.6; color:var(--dim); max-width:60ch }

section{ margin-top:44px }
h2{
  font-size:19px; font-weight:650; letter-spacing:-.01em; margin-bottom:16px;
  text-wrap:balance;
}
p{ margin-bottom:12px; max-width:66ch }
p:last-child{ margin-bottom:0 }

/* ── cards ───────────────────────────────────────────────────────────────── */
.grid{ display:grid; gap:14px }
.g2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.g3{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) }
.g4{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) }
.card{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:22px 24px }
.card .where{ font-size:15px; font-weight:650 }
.card .when{ font-size:13px; color:var(--meta); margin-top:2px }
.card .big{
  font-size:34px; font-weight:700; color:var(--amber); margin-top:14px;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1;
}
.card .cap{
  font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--meta); margin-top:7px;
}
.card .said{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line2); font-size:14.5px; line-height:1.55 }

/* ── the pipeline ────────────────────────────────────────────────────────── */
.steps{ display:flex; flex-direction:column; gap:10px; max-width:560px }
.step{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 20px;
}
.step .n{
  font-size:12px; font-weight:700; color:var(--amber); font-variant-numeric:tabular-nums;
  padding-top:3px; flex:none;
}
.step .nm{ font-size:15.5px; font-weight:650 }
.step .sub{ font-size:13.5px; color:var(--dim); margin-top:4px; line-height:1.5 }

/* ── verticals ───────────────────────────────────────────────────────────── */
.vert{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; display:flex; gap:13px; align-items:baseline;
}
.vert .n{ font-size:11.5px; font-weight:700; color:var(--amber-dim); font-variant-numeric:tabular-nums }
.vert .t{ font-size:15px; font-weight:600 }

/* ── detection shots ─────────────────────────────────────────────────────── */
.shots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px }
.shots img{ width:100%; height:auto; display:block; border-radius:9px; border:1px solid var(--line) }
.cred{ margin-top:14px; font-size:13.5px; color:var(--dim); max-width:64ch }

/* ── the close ───────────────────────────────────────────────────────────── */
.close{
  margin-top:52px; padding:28px; border-radius:12px;
  background:var(--sunk); border:1px solid var(--line);
}
.close h2{ margin-bottom:8px }
.close p{ color:var(--dim); font-size:15px }
.btnrow{ margin-top:18px; display:flex; flex-wrap:wrap; gap:11px }
.btn{
  display:inline-flex; align-items:center; padding:13px 24px; border-radius:6px;
  font-size:14px; font-weight:600; text-decoration:none;
}
.btn.pri{ background:var(--amber); color:#fff }
.btn.sec{ border:1px solid var(--line); color:var(--text); background:var(--card) }

footer{
  margin-top:56px; padding-top:22px; border-top:1px solid var(--line);
  font-size:13px; color:var(--meta); display:flex; flex-wrap:wrap; gap:8px 20px;
}
footer a{ color:var(--meta); text-decoration:none }
footer a:hover{ color:var(--amber); text-decoration:underline }

a:focus-visible, .btn:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px }
@media (max-width:600px){
  .topbar-in{ height:54px; padding:0 16px }
  .wrap{ padding:0 16px 64px }
  header.doc{ padding:38px 0 6px }
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }