/* Shared styles for the legal pages (/terms, /privacy).
   Tokens copied from index.html so the pages track the site's theme exactly —
   light by default, dark via prefers-color-scheme, and either forced by the
   data-theme attribute the header toggle sets. */

:root {
  --bg:#F2F3F7; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F6FA;
  --chrome:#0B1322;
  --border:#E2E5EC; --border-strong:#D2D7E0;
  --ink:#131722; --ink-muted:#55607A; --ink-faint:#7B8598;
  --accent:#0C8C88; --accent-ink:#FFFFFF; --accent-soft:#E4F4F3;
  --gold:#9A6B00; --gold-fill:#F0A500; --gold-soft:#FBEFD4;
  --shadow:0 1px 2px rgba(16,22,40,.04), 0 8px 30px rgba(16,22,40,.06);
  --maxw:1140px; --measure:760px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  /* Chrome (dark bookend) — identical in both themes */
  --c-ink:#F4F7FC; --c-muted:#AEB8CC; --c-faint:#6E7A92;
  --c-line:rgba(255,255,255,.09); --c-line-2:rgba(255,255,255,.16);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0A1120; --bg-2:#0D1526; --surface:#131D30; --surface-2:#182541;
    --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16);
    --ink:#F4F7FC; --ink-muted:#9EABC2; --ink-faint:#66738C;
    --accent:#2FD8D2; --accent-ink:#052228; --accent-soft:#122E36;
    --gold:#F0A500; --gold-fill:#F0A500; --gold-soft:#2A2210;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.35);
  }
}
:root[data-theme="light"] {
  --bg:#F2F3F7; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F6FA;
  --border:#E2E5EC; --border-strong:#D2D7E0;
  --ink:#131722; --ink-muted:#55607A; --ink-faint:#7B8598;
  --accent:#0C8C88; --accent-ink:#FFFFFF; --accent-soft:#E4F4F3;
  --gold:#9A6B00; --gold-fill:#F0A500; --gold-soft:#FBEFD4;
  --shadow:0 1px 2px rgba(16,22,40,.04), 0 8px 30px rgba(16,22,40,.06);
}
:root[data-theme="dark"] {
  --bg:#0A1120; --bg-2:#0D1526; --surface:#131D30; --surface-2:#182541;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16);
  --ink:#F4F7FC; --ink-muted:#9EABC2; --ink-faint:#66738C;
  --accent:#2FD8D2; --accent-ink:#052228; --accent-soft:#122E36;
  --gold:#F0A500; --gold-fill:#F0A500; --gold-soft:#2A2210;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { text-wrap:balance; margin:0; }

/* ---- Header ------------------------------------------------------------ */
.nav {
  background:var(--chrome); color:var(--c-ink);
  border-bottom:1px solid var(--c-line); position:sticky; top:0; z-index:20;
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; height:66px; }
.brand { display:inline-flex; align-items:center; }
.brand img { height:26px; width:auto; display:block; }
.nav-actions { display:flex; align-items:center; gap:10px; }
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; cursor:pointer;
  background:transparent; color:var(--c-muted);
  border:1px solid var(--c-line-2); transition:color .15s, border-color .15s;
}
.theme-toggle:hover { color:var(--c-ink); border-color:var(--c-ink); }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 18px; border-radius:10px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; transition:opacity .15s;
}
.btn-primary { background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover { opacity:.9; }

/* ---- Document ---------------------------------------------------------- */
.doc { max-width:var(--measure); margin:0 auto; padding:56px 24px 88px; }
.eyebrow {
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.2em; color:var(--accent); font-weight:600; margin:0 0 14px;
}
.doc h1 { font-size:clamp(30px,5vw,40px); line-height:1.15; letter-spacing:-.02em; margin:0 0 10px; }
.updated { color:var(--ink-faint); font-size:.9rem; margin:0 0 36px; font-family:var(--font-mono); }
.doc h2 {
  font-size:1.22rem; letter-spacing:-.01em; margin:44px 0 12px;
  padding-top:22px; border-top:1px solid var(--border);
}
.doc h2:first-of-type { border-top:0; padding-top:0; }
.doc p { margin:0 0 17px; color:var(--ink-muted); }
.doc strong { color:var(--ink); font-weight:600; }
.doc ul { margin:0 0 17px; padding-left:22px; color:var(--ink-muted); }
.doc li { margin:0 0 11px; }
.doc a:not(.btn) { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

.callout {
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:12px;
  padding:18px 20px; margin:0 0 32px; box-shadow:var(--shadow);
}
.callout p { margin:0; }
.notice {
  background:var(--gold-soft); border:1px solid var(--gold-fill);
  border-left:3px solid var(--gold-fill); border-radius:12px;
  padding:18px 20px; margin:0 0 32px;
}
.notice p { margin:0; color:var(--gold); }
.notice strong { color:var(--gold); }

.tbl-scroll { overflow-x:auto; margin:0 0 22px; }
table { width:100%; border-collapse:collapse; font-size:.95rem; min-width:420px; }
th, td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
th {
  color:var(--ink); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-mono);
}
td { color:var(--ink-muted); }
tr:last-child td { border-bottom:0; }

/* ---- Footer ------------------------------------------------------------ */
.ft { background:var(--chrome); color:var(--c-muted); border-top:1px solid var(--c-line); }
.ft .wrap { padding-top:44px; padding-bottom:32px; }
.ft-links { display:flex; flex-wrap:wrap; gap:10px 26px; margin:0 0 26px; }
.ft-links a { color:var(--c-muted); font-size:.95rem; }
.ft-links a:hover { color:var(--c-ink); }
.ft-bottom {
  display:flex; flex-wrap:wrap; gap:12px 20px; justify-content:space-between;
  align-items:center; border-top:1px solid var(--c-line);
  padding-top:22px; font-size:.85rem; color:var(--c-faint);
}
.age {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:22px; padding:0 7px; border-radius:6px;
  border:1px solid var(--c-line-2); color:var(--c-muted);
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
}

@media (max-width:560px) {
  body { font-size:16px; }
  .doc { padding:40px 20px 64px; }
  .nav-links { display:none; }
}
