/* ════════════════════════════════════════════════════════════════════════
   One stylesheet for the four legal documents.

   /terms, /privacy, /cookies and /dpa are reached from one line in the footer,
   and somebody who opens two of them in two tabs is comparing them. Each page
   used to carry its own copy of this sheet — four near-identical copies, kept
   in step by hand, which is why they drifted: --muted at .56 on one and .62 on
   three, --faint at .5 and .36, h2 at 19px and 20px, paragraphs 11px apart.
   Round four made the copies agree. This is the copy being gone.

   Tokens and scale: DESIGN-SYSTEM.md §2.1, §2.4, §3.1, §6.6, §13.24.
   Header, footer and buttons stay where they are for every page: chrome.css.
   ════════════════════════════════════════════════════════════════════════ */

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

:root {
  color-scheme: dark;
  /* §2.1, as written there. */
  --bg: #0A0B0F;
  --ink: #EAEEF7;
  --muted: rgba(234,238,247,.66);
  --faint: rgba(234,238,247,.56);
  --blue-1: #8BB4FF;
  --blue-2: #3A6BFF;
  --line: rgba(139,180,255,.14);
  --line-2: rgba(234,238,247,.10);
  --mono: "JetBrains Mono","SF Mono",ui-monospace,Consolas,monospace;
  --sans: "Instrument Sans","Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* What a phone sees past the top and bottom of these four pages
     (chrome.css §2.1a). Measured: the first row runs #0A0B0F–#0D121F depending
     on how much of the wash the heading sits in, the last is #05060A — the
     footer is darker than the page. The middle of the two. */
  --edge: #080A10;
}

body {
  background: radial-gradient(1100px 560px at 50% -8%, rgba(58,107,255,.12), transparent 62%), var(--bg);
  color: var(--ink);
  min-height: 100vh;
  font: 400 16px/1.6 var(--sans);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* §6.6: in a legal document a link is underlined, because nothing else in a
   grey paragraph tells you it is one. */
a { color: var(--blue-1); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { flex: 1; display: flex; justify-content: center; padding: min(8vh, 72px) 24px 72px; }
.card { width: 100%; max-width: 760px; }

/* Eyebrow, as the system sets it (§3.1): JetBrains Mono, .22em, blue. */
.eyebrow {
  margin-bottom: 16px;
  color: var(--blue-1);
  font: 500 12px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1 { margin-bottom: 10px; font: 600 34px/1.12 var(--sans); letter-spacing: -0.03em; text-wrap: balance; }
h2 { margin: 40px 0 6px; font: 600 20px/1.25 var(--sans); letter-spacing: -0.02em; scroll-margin-top: 20px; }
h3 { margin: 22px 0 4px; color: var(--ink); font: 600 15px/1.3 var(--sans); }

/* Terms wraps its prose in .legal-body; the other three put it straight in the
   card. One selector covers both, which is the point of the file. */
.card p { margin-top: 12px; max-width: 68ch; color: var(--muted); }
.card ul { margin: 12px 0 0 22px; max-width: 66ch; color: var(--muted); }
.card li { margin-top: 7px; }
.card strong { color: var(--ink); font-weight: 600; }
.card code { color: var(--blue-1); font: 400 13.5px/1.5 var(--mono); }

.lede { color: var(--muted); max-width: 68ch; }
.meta { margin-top: 8px; color: var(--faint); font-size: 13.5px; }

.tablewrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
th { color: var(--faint); font: 600 12px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
td { color: var(--muted); }
td strong { color: var(--ink); }
tbody tr:last-child td { border-bottom: 0; }

/* An aside inside a document: bordered like a card, with the blue rule down the
   left that says "this one is not the running text". Cookies drew it without
   the rule and Privacy with it — same box, two meanings, neither intended. */
.note {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue-2);
  border-radius: 12px;
  background: rgba(58,107,255,.06);
  color: var(--muted);
  font-size: 14.5px;
}

.annex { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }

.updated { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line-2); color: var(--faint); font-size: 13.5px; }
.back { display: inline-block; margin-top: 14px; font-size: 14px; }