/* ═══════════════════════════════════════════════════════════════════════════
   LEGAL PAGES — privacy policy and terms
   ═══════════════════════════════════════════════════════════════════════════
   One stylesheet for both, rather than the inline block index.html carries,
   because these two pages are the same page twice and a palette that drifts
   between them looks like one of them was bolted on later.

   Palette and type are index.html's on purpose. Somebody arriving here has
   just left the promo page or the app, and a legal page that looks like it
   came from a different company reads as boilerplate — which is exactly the
   impression this particular policy should not give.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --amber: #F59E0B; --amber-deep: #D97706;
  --cream: #FFFBF0; --warm-white: #FEF9EE;
  --text: #1C0A00; --muted: #92400E; --soft: #B45309;
  --surface: #FFFFFF; --line: #F0E4C8; --pill: #FEF3C7;
  --good: #15803D; --good-bg: #F0FDF4;
  --warn: #B45309; --warn-bg: #FFFBEB;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--warm-white);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--text);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* ── Masthead ───────────────────────────────────────────────────────────── */
header { padding: 44px 0 26px; border-bottom: 2px solid var(--text); margin-bottom: 8px; }
.brand {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800; font-size: 19px; letter-spacing: -.02em;
  color: var(--amber-deep); text-decoration: none; display: inline-block;
}
h1 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(28px, 6vw, 38px); font-weight: 800;
  letter-spacing: -.028em; line-height: 1.08; margin: 12px 0 10px;
}
.updated { color: var(--soft); font-size: 13.5px; }

/* ── The summary box ────────────────────────────────────────────────────── */
.gist {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--amber); border-radius: 10px;
  padding: 18px 20px; margin: 26px 0 8px;
}
.gist h2 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--amber-deep); margin-bottom: 8px;
}
.gist p { margin-bottom: 10px; }
.gist p:last-child { margin-bottom: 0; }

/* ── Contents ───────────────────────────────────────────────────────────── */
nav.toc { margin: 26px 0 8px; }
nav.toc h2 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--soft); margin-bottom: 8px;
}
nav.toc ol { list-style: none; counter-reset: toc; columns: 2; column-gap: 28px; }
nav.toc li { counter-increment: toc; font-size: 14.5px; margin-bottom: 3px; break-inside: avoid; }
nav.toc li::before { content: counter(toc) ". "; color: var(--soft); font-variant-numeric: tabular-nums; }
nav.toc a { color: var(--muted); text-decoration: none; }
nav.toc a:hover { text-decoration: underline; }
@media (max-width: 560px) { nav.toc ol { columns: 1; } }

/* ── Body ───────────────────────────────────────────────────────────────── */
section { padding: 26px 0 0; }
h2 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 21px; font-weight: 700; letter-spacing: -.018em;
  margin-bottom: 10px; scroll-margin-top: 20px;
}
h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15.5px; font-weight: 700; margin: 18px 0 6px;
}
p { margin-bottom: 13px; }
p:last-child { margin-bottom: 0; }
ul, ol.body { margin: 0 0 13px 0; padding-left: 20px; }
li { margin-bottom: 6px; }
strong { font-weight: 700; }
a { color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0 0; }

/* A definition row — the plain-language name of a thing, then what it is. */
dl { margin: 0 0 13px; }
dt { font-weight: 700; margin-top: 12px; }
dd { margin: 2px 0 0 0; color: var(--muted); }

/* ── Callouts ───────────────────────────────────────────────────────────── */
.note {
  border-radius: 9px; padding: 14px 16px; margin: 16px 0;
  font-size: 15px; border: 1px solid var(--line); background: var(--surface);
}
.note.good { border-color: #BBF7D0; background: var(--good-bg); }
.note.good strong { color: var(--good); }
.note.warn { border-color: #FDE68A; background: var(--warn-bg); }
.note.warn strong { color: var(--warn); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer {
  margin-top: 38px; padding: 26px 0 56px; border-top: 1px solid var(--line);
  color: var(--soft); font-size: 13.5px;
}
footer a { color: var(--muted); }

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