/* DeFlock Newport News — design system
 * Tokens mirror the Claude Design project "DeFlock Newport News Design System"
 * (cfe0371a). Fonts are self-hosted rather than pulled from Google so the
 * footer's "no trackers" claim stays literally true — a Google Fonts <link>
 * would hand every visitor's IP to a third party. */

/* ── Fonts (OFL, self-hosted) ───────────────────────── */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────── */
:root {
  /* Ink — warm near-black through greys. Document ink, not pure #000. */
  --ink-900: #14130e; --ink-800: #26241c; --ink-700: #3a382f; --ink-600: #54513f;
  --ink-500: #6b6759; --ink-400: #8d8878; --ink-300: #a8a395; --ink-200: #c6c1b0;
  /* Paper — newsprint off-whites */
  --paper-000: #fffdf7; --paper-100: #f5f2ea; --paper-200: #eae5d8; --paper-300: #ded8c7;
  /* Rules / hairlines */
  --rule-strong: #14130e; --rule: #d8d3c4; --rule-soft: #e6e1d3;
  /* Signal red — alerts, camera counts, "no warrant" facts. Use sparingly. */
  --signal-700: #8f180f; --signal-600: #a91f14; --signal-500: #c4271c; --signal-100: #f7e2df;
  /* Civic teal — Chesapeake water. Links, primary actions, chrome. */
  --civic-800: #123039; --civic-700: #173f4a; --civic-600: #1d4e5a;
  --civic-500: #26697a; --civic-200: #a9c6ce; --civic-100: #e2edf0;
  /* Amber — caution, "under review", pending records */
  --amber-600: #a8690a; --amber-500: #d98a0b; --amber-100: #faeed4;
  /* Win green — contracts cancelled, votes won */
  --win-700: #22563a; --win-600: #2c6e49; --win-100: #e0efe6;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display-2: 48px; --fs-h2: 29px; --fs-h3: 22px; --fs-h4: 18px;
  --fs-body-lg: 19px; --fs-body: 17px; --fs-body-sm: 15px;
  --fs-caption: 13px; --fs-micro: 11px;
  --fs-stat: 56px; --fs-stat-sm: 34px;

  --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px;
  --sp-8: 24px; --sp-9: 32px; --sp-10: 40px; --sp-11: 56px; --sp-12: 72px; --sp-13: 96px;
  --gutter: 24px; --section-y: 72px;
  --container: 1160px; --container-narrow: 760px;
}

/* ── Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper-100);
  color: var(--ink-800);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Source citations carry long URLs and statute numbers; without this a single
     unbreakable token can force the whole page to scroll sideways on a phone. */
  overflow-wrap: break-word;
}

a { color: var(--civic-600); }
a:hover { color: var(--civic-800); }

img { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--civic-500);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-900);
  color: var(--paper-000);
  padding: var(--sp-5) var(--sp-8);
  z-index: 10;
}
.skip:focus { left: 0; }

/* ── Type roles ─────────────────────────────────────── */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--sp-6);
}
.kicker--light { color: var(--paper-300); }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink-900);
  margin: 0;
}
h1 {
  font-weight: 800;
  font-size: clamp(34px, 6vw, var(--fs-display-2));
  line-height: 1.02;
  letter-spacing: -0.025em;
}
h2 {
  font-weight: 700;
  font-size: clamp(24px, 4vw, var(--fs-h2));
  letter-spacing: -0.012em;
  line-height: 1.15;
}
h3 { font-weight: 700; font-size: var(--fs-h4); line-height: 1.3; }

.lede {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 62ch;
}

.measure { max-width: 66ch; }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn--lg { font-size: var(--fs-body); padding: var(--sp-5) var(--sp-9); }
.btn--sm { font-size: var(--fs-body-sm); padding: var(--sp-4) var(--sp-6); }

.btn--primary { background: var(--signal-500); color: var(--paper-000); }
.btn--primary:hover { background: var(--signal-600); color: var(--paper-000); }

.btn--secondary { background: var(--paper-000); color: var(--ink-900); border-color: var(--ink-900); }
.btn--secondary:hover { background: var(--paper-200); color: var(--ink-900); }

/* On the dark hero the secondary button needs an inverted resting state. */
.hero .btn--secondary { background: transparent; color: var(--paper-000); border-color: var(--paper-300); }
.hero .btn--secondary:hover { background: var(--paper-000); color: var(--ink-900); }

/* ── Alert bar ──────────────────────────────────────── */
.alertbar {
  background: var(--signal-500);
  color: var(--paper-000);
  font-size: var(--fs-body-sm);
}
.alertbar .wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding-block: var(--sp-5);
}
.alertbar p { margin: 0; }
.alertbar a {
  color: var(--paper-000);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Header ─────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-100);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
  padding-block: 14px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-900);
  text-decoration: none;
}
.wordmark em { color: var(--signal-500); font-style: normal; }
.wordmark-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: var(--sp-2);
}
.site-nav {
  display: flex;
  gap: var(--sp-8);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--fs-body-sm);
  font-weight: 500;
}
.site-nav a:not(.btn) { color: var(--ink-600); text-decoration: none; }
.site-nav a:not(.btn):hover { color: var(--ink-900); text-decoration: underline; }
.site-nav a[aria-current="page"] {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ── Sections ───────────────────────────────────────── */
section { padding-block: var(--section-y); }
.section--sunk { background: var(--paper-200); }
.section--ink { background: var(--ink-900); color: var(--paper-300); }

.hero { background: var(--ink-900); padding-block: var(--sp-13); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: center;
}
.hero h1 { color: var(--paper-000); }
.hero h1 em { color: var(--signal-500); font-style: italic; }
.hero p {
  font-size: var(--fs-body-lg);
  color: var(--paper-300);
  margin: var(--sp-7) 0 0;
  max-width: 56ch;
}
.hero-actions {
  display: flex;
  gap: var(--sp-6);
  margin-top: var(--sp-9);
  flex-wrap: wrap;
}

/* ── Cards & stats ──────────────────────────────────── */
.card {
  background: var(--paper-000);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: var(--sp-8);
}
.card--strong { border: 2px solid var(--ink-900); padding: var(--sp-9); }

.grid {
  display: grid;
  gap: var(--sp-8);
}
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--steps { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* min(400px, 100%) so a 375px phone gets one full-width column instead of a
   400px column that forces the whole page to scroll sideways. */
.grid--halves { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }

.stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-stat-sm);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.stat-value--lg { font-size: clamp(44px, 8vw, var(--fs-stat)); }
.stat-value--alert { color: var(--signal-500); }
.stat-unit {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--ink-800);
  margin-top: var(--sp-3);
  max-width: 34ch;
}
.stat-note {
  font-size: var(--fs-caption);
  color: var(--ink-500);
  margin-top: var(--sp-2);
  max-width: 40ch;
}
.stat-source {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ink-400);
  margin-top: var(--sp-6);
  letter-spacing: 0.01em;
}
.stat-source a { color: var(--ink-500); }

/* ── Claim / answer (steelman) ──────────────────────── */
.claim {
  background: var(--paper-000);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ink-900);
  border-radius: 2px;
  padding: var(--sp-9);
}
.claim-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.claim-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.35;
  color: var(--ink-900);
  margin: var(--sp-4) 0 var(--sp-7);
}
.claim-answer { margin: 0; color: var(--ink-700); }
.claim-answer + .claim-answer { margin-top: var(--sp-5); }
/* Year-by-year case list inside a claim card: the years are what a reader
   scans for, so they get the mono column and the rest stays small. */
.docket { list-style: none; margin: var(--sp-7) 0 0; padding: 0; font-size: var(--fs-body-sm); color: var(--ink-700); }
.docket li { display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-5); border-top: 1px solid var(--rule); padding: var(--sp-4) 0; align-items: baseline; }
.docket li:last-child { border-bottom: 1px solid var(--rule); }
.docket .y { font-family: var(--font-mono); font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* ── Pull quote ─────────────────────────────────────── */
.pullquote {
  border-top: 2px solid var(--ink-900);
  border-bottom: 2px solid var(--ink-900);
  padding: var(--sp-9) 0;
  margin: var(--sp-10) 0 0;
}
.pullquote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 3.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink-900);
}
.pullquote cite {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-style: normal;
  color: var(--ink-500);
  margin-top: var(--sp-6);
  letter-spacing: 0.01em;
}

/* ── Steps ──────────────────────────────────────────── */
.step { background: var(--paper-000); border: 1px solid var(--rule); border-radius: 2px; padding: var(--sp-8); }
.step-n {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-caption);
  color: var(--signal-500);
  letter-spacing: 0.14em;
}
.step h3 { margin: var(--sp-4) 0 var(--sp-5); }
.step p { margin: 0 0 var(--sp-7); color: var(--ink-700); font-size: var(--fs-body-sm); }
.step a { font-weight: 600; }

/* ── Ledger table (purchase orders) ─────────────────── */
.ledger-wrap { overflow-x: auto; margin-top: var(--sp-9); }
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
  min-width: 560px;
}
.ledger th, .ledger td {
  text-align: left;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.ledger th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 2px solid var(--ink-900);
}
.ledger td.num, .ledger th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger td.mono { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-600); white-space: nowrap; }
.ledger tfoot td { font-weight: 700; color: var(--ink-900); border-top: 2px solid var(--ink-900); border-bottom: 0; }
.ledger .muted { color: var(--ink-500); font-size: var(--fs-caption); }

/* ── Levers (how change happens) ────────────────────── */
.lever {
  background: var(--paper-000);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--signal-500);
  border-radius: 2px;
  padding: var(--sp-8);
}
.lever h3 { margin: 0 0 var(--sp-4); }
.lever p { margin: 0 0 var(--sp-5); color: var(--ink-700); font-size: var(--fs-body-sm); }
.lever p:last-child { margin-bottom: 0; }
.lever .precedent {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ink-500);
  letter-spacing: 0.01em;
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-5);
  margin-top: var(--sp-6);
}

/* ── Event list ─────────────────────────────────────── */
.events { list-style: none; margin: var(--sp-9) 0 0; padding: 0; }
.events li {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: var(--sp-7);
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.events li:last-child { border-bottom: 1px solid var(--rule); }
.events .when {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.events .when small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: var(--sp-3);
}
.events .what strong { display: block; color: var(--ink-900); font-size: var(--fs-body); }
.events .what span { display: block; color: var(--ink-600); font-size: var(--fs-body-sm); margin-top: var(--sp-2); }
.events .what .tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  margin-top: var(--sp-4);
}
.tag--confirmed { background: var(--win-100); color: var(--win-700); }
.tag--scheduled { background: var(--amber-100); color: var(--amber-600); }
.tag--state { background: var(--civic-100); color: var(--civic-700); }

.howto { background: var(--paper-000); border: 2px solid var(--ink-900); border-radius: 2px; padding: var(--sp-9); margin-top: var(--sp-10); }
.howto h3 { margin: 0 0 var(--sp-6); }
.howto ol { margin: 0; padding-left: 1.3em; }
.howto li { margin-bottom: var(--sp-5); color: var(--ink-700); font-size: var(--fs-body-sm); }
.howto li strong { color: var(--ink-900); }

@media (max-width: 480px) {
  .events li { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ── Tags, standalone ───────────────────────────────── */
/* The events list defines its own .tag; interior pages need the same chip
   outside that list, e.g. "on the ballot" on a person card. */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
}
.tag--alert { background: var(--signal-100); color: var(--signal-700); }
.tag--muted { background: var(--paper-200); color: var(--ink-600); }

/* ── Interior page header ───────────────────────────── */
.page-head { background: var(--ink-900); padding-block: var(--sp-11); }
.page-head h1 { color: var(--paper-000); max-width: 20ch; }
.page-head h1 em { color: var(--signal-500); font-style: italic; }
.page-head p { color: var(--paper-300); font-size: var(--fs-body-lg); max-width: 62ch; margin: var(--sp-6) 0 0; }
.page-head .kicker { color: var(--paper-300); }

/* ── People (accountability cards) ──────────────────── */
.person { background: var(--paper-000); border: 1px solid var(--rule); border-radius: 2px; padding: var(--sp-8); }
.person h3 { margin: 0 0 var(--sp-2); }
.person .role { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-500); margin: 0 0 var(--sp-5); }
.person .tag { margin-bottom: var(--sp-5); }
.person p { margin: 0 0 var(--sp-5); color: var(--ink-700); font-size: var(--fs-body-sm); }
.person p:last-child { margin-bottom: 0; }
.person .stat-source { margin-top: var(--sp-4); }

/* ── Cited flight list (drones page) ────────────────── */
.flights { list-style: none; margin: var(--sp-8) 0 0; padding: 0; }
.flights li { border-top: 1px solid var(--rule); padding: var(--sp-6) 0; font-size: var(--fs-body-sm); color: var(--ink-700); }
.flights li:last-child { border-bottom: 1px solid var(--rule); }
.flights .fn { font-family: var(--font-mono); font-size: var(--fs-caption); white-space: nowrap; }
.flights .fn a { color: var(--civic-600); }
.flights .pri { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-500); margin-left: var(--sp-4); }
.flights q { color: var(--ink-800); }

/* ── The demand strip ───────────────────────────────── */
.demand { background: var(--ink-900); color: var(--paper-200); padding-block: var(--sp-10); border-top: 4px solid var(--signal-500); }
.demand .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--sp-9); align-items: start; }
.demand .kicker { color: var(--paper-300); }
.demand h2 { color: var(--paper-000); margin: var(--sp-3) 0 0; }
.demand h2 em { color: var(--signal-500); font-style: italic; }
.demand ol { margin: 0; padding-left: 1.3em; color: var(--paper-300); font-size: var(--fs-body); }
.demand li { margin-bottom: var(--sp-5); }
.demand li strong { color: var(--paper-000); }
.demand p { margin: var(--sp-6) 0 0; color: var(--ink-300); font-size: var(--fs-body-sm); max-width: 60ch; }
.demand a { color: var(--paper-200); }

/* ── Hero breakdown list ────────────────────────────── */
.breakdown { list-style: none; margin: var(--sp-6) 0 0; padding: 0; font-size: var(--fs-body-sm); color: var(--ink-700); }
.breakdown li { display: flex; justify-content: space-between; gap: var(--sp-5); border-top: 1px solid var(--rule); padding: var(--sp-3) 0; align-items: baseline; }
.breakdown .n { font-family: var(--font-mono); font-weight: 700; color: var(--ink-900); white-space: nowrap; }

/* ── Open-questions list ────────────────────────────── */
.unknowns { list-style: none; margin: 0; padding: 0; }
.unknowns li {
  border-top: 1px solid var(--rule);
  padding: var(--sp-7) 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.unknowns li:last-child { border-bottom: 1px solid var(--rule); }
.unknowns .q {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--amber-600);
  letter-spacing: 0.14em;
  padding-top: 4px;
}
.unknowns strong { display: block; color: var(--ink-900); font-size: var(--fs-body); }
.unknowns span { color: var(--ink-600); font-size: var(--fs-body-sm); }

/* ── Signup ─────────────────────────────────────────── */
.signup {
  background: var(--paper-000);
  border: 2px solid var(--ink-900);
  border-radius: 2px;
  padding: var(--sp-10);
  max-width: var(--container-narrow);
}
.signup h2 { margin-bottom: var(--sp-5); }
.signup p { color: var(--ink-700); margin: 0 0 var(--sp-8); }
.signup-actions { display: flex; gap: var(--sp-6); flex-wrap: wrap; align-items: center; }
.signup-note {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ink-400);
  margin-top: var(--sp-8);
  line-height: 1.7;
}

/* ── Footer ─────────────────────────────────────────── */
.site-footer { background: var(--ink-900); color: var(--paper-200); padding-block: var(--sp-11); }
.site-footer .wordmark { color: var(--paper-000); }
.site-footer p { margin: var(--sp-6) 0 0; max-width: 60ch; font-size: var(--fs-body-sm); color: var(--paper-300); }
.site-footer a { color: var(--paper-300); }
.footer-fine {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.7;
  color: var(--ink-300);
  max-width: 100ch;
}
.footer-legal { font-size: var(--fs-micro); line-height: 1.7; color: var(--ink-400); max-width: 110ch; }

/* ── Sources ────────────────────────────────────────── */
.sources { font-size: var(--fs-caption); color: var(--ink-600); }
.sources ol { margin: 0; padding-left: 1.4em; }
.sources li { margin-bottom: var(--sp-4); }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .hero { padding-block: var(--sp-11); }
  section { padding-block: var(--sp-11); }
  .signup { padding: var(--sp-8); }
  .site-nav { gap: var(--sp-6); font-size: var(--fs-caption); }
}

@media (max-width: 480px) {
  .unknowns li { grid-template-columns: 1fr; gap: var(--sp-3); }
  .btn { width: 100%; }
  .hero-actions .btn, .signup-actions .btn { flex: 1 1 auto; }
}

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