/* ════════════════════════════════════════════════════════════════
   legal.css — the document pages (privacy.html, support.html).
   Deliberately plain: these are the site's authoritative pages, read
   by reviewers and lawyers, not a panel experience. Same tokens as
   style.css §01; no GSAP, no JS.
   ════════════════════════════════════════════════════════════════ */
:root {
  --bg: #0D0D0D; --bg2: #131313;
  --text: #F2F0EB;
  --text-60: rgba(242,240,235,0.6); --text-40: rgba(242,240,235,0.4); --text-25: rgba(242,240,235,0.25);
  --line: rgba(242,240,235,0.09); --line-strong: rgba(242,240,235,0.16);
  --orange: #FF4A09; --blue: #00B1FC;
  --body: 'Space Grotesk', sans-serif; --mono: 'JetBrains Mono', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }

nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; height: 58px; border-bottom: 1px solid var(--line);
}
.logo { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; display: flex; align-items: center; text-decoration: none; color: var(--text); }
.logo .logo-mark { width: 22px; height: 22px; display: block; margin-right: 8px; }
.logo span { color: var(--orange); }
nav .doc-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--text-40); }

main { max-width: 720px; margin: 0 auto; padding: 72px 24px 96px; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--orange); text-transform: uppercase; }
h1 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 14px 0 10px; }
.meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--text-40); margin-bottom: 44px; }
h2 { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase;
     color: var(--text); margin: 44px 0 14px; padding-top: 24px; border-top: 1px solid var(--line); }
p, li { font-size: 15px; line-height: 1.7; color: var(--text-60); margin-bottom: 12px; }
ul { padding-left: 20px; margin-bottom: 12px; }
li { margin-bottom: 6px; }
strong { color: var(--text); font-weight: 600; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 13px; color: var(--text); }
.placeholder { font-family: var(--mono); color: var(--orange); background: rgba(255,74,9,0.08); padding: 1px 6px; border-radius: 4px; }

footer {
  max-width: 720px; margin: 0 auto; padding: 26px 24px 48px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--text-25);
}
footer a { color: var(--text-40); }