/* The static pages (/about/, /privacy/, /terms/, built by scripts/build-pages.mjs). Same tokens as the app
   (src/index.css :root; keep them the same, tests/unit/css.frontend.test.mjs checks): dark ink on light
   paper, one strong blue for actions, safety amber as a stripe. */
:root {
  --ink: #111a22;
  --muted: #4a5763;
  --paper: #f3f4f1;
  --surface: #ffffff;
  --rule: #c5ccd2;
  --line: #8e99a3;
  --brand: #0b4f9c;
  --brand-dark: #083a74;
  --brand-soft: #e3edf8;
  --amber: #f2a900;
  --amber-soft: #fff3cf;
  --amber-ink: #5c4100;
  --ok: #146c43;
  --ok-soft: #dff1e7;
  --danger: #b42318;
  --danger-dark: #8a1a12;
  --danger-soft: #fbe3df;
  --track: #e4e8eb;
  --on-brand: #ffffff;
  --radius: 10px;
  --tap: 48px;
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 106.25%;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
a { color: var(--brand); font-weight: 600; text-underline-offset: 0.15em; }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); font-weight: 800; }
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px max(16px, calc((100vw - 1120px) / 2));
  border-bottom: 4px solid var(--amber);
  background: var(--ink); color: #fff;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); color: #fff; font-size: 1.1875rem; font-weight: 800; text-decoration: none; }
.brand:hover { color: #fff; }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.top nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: #fff; text-decoration: none; }
.top nav a:hover { text-decoration: underline; }
.top nav a[hidden] { display: none; }
.top nav a.button { min-height: 40px; padding: 6px 14px; border: 2px solid var(--amber); border-radius: var(--radius); background: var(--amber); color: var(--ink); font-weight: 700; }
.top nav a.button:hover { border-color: #fff; background: #fff; text-decoration: none; }
@media (max-width: 560px) { .top nav .opt { display: none; } }
main { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 28px 16px 56px; }
.prose { padding: 24px 20px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
.prose h1 { margin-top: 0; }
.prose h2 { margin: 28px 0 8px; font-size: 1.3125rem; }
.lede { font-size: 1.1875rem; }
.note { color: var(--muted); font-size: 0.9375rem; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 10px 20px; border: 2px solid var(--brand); border-radius: var(--radius); background: var(--brand); color: var(--on-brand); font-weight: 700; text-decoration: none; }
.button:hover { border-color: var(--brand-dark); background: var(--brand-dark); color: var(--on-brand); }
.bottom { padding: 24px max(16px, calc((100vw - 1120px) / 2)) 32px; border-top: 1px solid var(--rule); background: var(--surface); font-size: 0.9375rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 10px; padding: 0; list-style: none; }
.footer-links a { display: inline-flex; align-items: center; min-height: 40px; overflow-wrap: anywhere; }
.footer-legal { margin: 0; color: var(--muted); }