/* Legal pages (terms / privacy / refund) — one style source for three pages.
 *
 * WHY IT IS A SEPARATE FILE: pricing.html and guide.html each carry their own
 * copy of the token block because a marketing page set in a different typeface
 * is a second product. Three legal pages would have made that three more
 * copies of the same forty lines; the token-parity gate reads this file too
 * (see guide-spec.test.ts), so it cannot drift from theme.css either.
 *
 * The header and footer moved to public/chrome.css (2026-10-15, one shell for
 * every text page) — this file is the tokens plus the body copy styles.
 *
 * ⚠️ `[[ … ]]` anywhere in these pages means "not filled in yet" — the
 * launch check fails on it, because a Terms page naming the wrong entity is
 * worse than no Terms page at all.
 */
:root {
  --bg: #0a0a1a;                        /* theme.css --bg-primary */
  --panel: rgba(10, 15, 30, 0.75);      /* --glass-bg */
  --border: rgba(255, 255, 255, 0.08);  /* --frost-border */
  --text: #e0e0ff;                      /* --text-primary */
  --muted: #a0a0d0;                     /* --text-secondary */
  --cyan: #00ffcc;                      /* --neon-cyan */
  --magenta: #ff00ff;                   /* --neon-magenta */
  --purple: #7850ff;                    /* --neon-purple */
  --amber: #ffaa00;                     /* --neon-amber */
  --font-display: 'Orbitron', monospace;
  --font-body: 'Inter', system-ui, sans-serif;
  --ink: #041512;                       /* dark text on a neon fill */
}

.wrap { max-width: 760px; margin: 0 auto; padding: 40px 20px 60px; }

h1 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
  letter-spacing: 0.04em; margin: 0 0 6px;
}

h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan);
  margin: 34px 0 8px;
}

h3 { font-size: 1rem; margin: 20px 0 4px; }

p, li { color: var(--text); }

p { margin: 0 0 12px; }

ul { margin: 0 0 14px; padding-left: 20px; }

li { margin-bottom: 6px; }

a { color: var(--cyan); }

strong { color: #fff; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
  background: rgba(255, 255, 255, 0.06); padding: 1px 5px; border-radius: 4px;
}

.updated { color: var(--muted); font-size: 0.8rem; margin-bottom: 22px; }

.lede { font-size: 1.02rem; color: var(--text); }

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; margin: 18px 0;
}

.card p:last-child { margin-bottom: 0; }

.todo {
  background: rgba(255, 170, 0, 0.12); border: 1px dashed var(--amber);
  border-radius: 8px; padding: 10px 14px; margin: 16px 0; font-size: 0.9rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

@media (max-width: 640px) {
  .wrap { padding: 20px 16px 44px; }
}