/* Slate — brand legal pages (Terms, Privacy).
 *
 * BRAND surface, not product UI. Uses ONLY the --slate-* palette
 * (see docs/brand-guidelines.md + public/shared/tokens.css). The 7-grey
 * brand scale is inlined here so these pages are fully self-contained and
 * never flip with light/dark mode — brand is a constant. Do NOT introduce
 * --aqos-* tokens or any accent colour on this surface. */

:root {
  --slate-canvas:  #0a0b0e;   /* warm near-black — primary brand surface */
  --slate-surface: #1a1c22;   /* card / panel surface */
  --slate-raised:  #21232a;   /* raised tile / active row */
  --slate-faint:   #54565d;   /* fine UI lines, low-contrast captions */
  --slate-dim:     #7a7d85;   /* secondary text */
  --slate-text:    #d4d6dc;   /* primary text on canvas */
  --slate-bone:    #fafaf7;   /* off-white type for hero / display mark */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--slate-canvas);
  color: var(--slate-text);
  font: 400 17px/1.65 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

/* Brand wordmark / header */
.legal-head {
  margin: 0 0 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--slate-raised);
}

.legal-head a.brand {
  display: inline-block;
  font: 700 19px/1 'Inter Tight', 'Inter', sans-serif;
  letter-spacing: -0.02em;
  color: var(--slate-bone);
  text-decoration: none;
}

h1 {
  margin: 28px 0 6px;
  font: 700 34px/1.12 'Inter Tight', 'Inter', sans-serif;
  letter-spacing: -0.025em;
  color: var(--slate-bone);
}

.updated {
  margin: 0;
  font-size: 13.5px;
  color: var(--slate-dim);
  letter-spacing: 0.01em;
}

h2 {
  margin: 44px 0 12px;
  font: 600 21px/1.3 'Inter Tight', 'Inter', sans-serif;
  letter-spacing: -0.015em;
  color: var(--slate-bone);
  scroll-margin-top: 24px;
}

h3 {
  margin: 28px 0 8px;
  font: 600 16px/1.4 'Inter', sans-serif;
  color: var(--slate-text);
}

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

a { color: var(--slate-bone); text-underline-offset: 2px; }

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

.note {
  margin: 28px 0;
  padding: 16px 18px;
  border: 1px solid var(--slate-raised);
  border-radius: 12px;
  background: var(--slate-surface);
  color: var(--slate-dim);
  font-size: 14.5px;
}

.toc {
  margin: 0 0 36px;
  padding: 18px 20px;
  border: 1px solid var(--slate-raised);
  border-radius: 14px;
  background: var(--slate-surface);
}
.toc h2 { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-dim); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 5px 0; }
.toc a { color: var(--slate-text); text-decoration: none; }
.toc a:hover { color: var(--slate-bone); }

footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--slate-raised);
  font-size: 13px;
  color: var(--slate-faint);
}
footer a { color: var(--slate-dim); }