/* Privacy and accessibility pages: the site's tokens (src/index.css), in plain CSS. */
:root {
  color-scheme: light;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --ink: #323338;
  --soft: #4e5060;
  --mute: #676879;
  --line: #d0d4e4;
  --brand: #0073ea;
}
.dark {
  color-scheme: dark;
  --bg: #121317;
  --surface: #1c1d23;
  --ink: #ecedf2;
  --soft: #c4c6d0;
  --mute: #9a9daa;
  --line: #34363f;
  --brand: #57a0ff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.65 'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
header, main { max-width: 680px; margin: 0 auto; padding: 0 20px; }
header { padding-top: 24px; }
main { padding-top: 24px; padding-bottom: 80px; }
.back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--soft); text-decoration: none; font-size: 14px;
}
.back:hover { color: var(--ink); }
h1 { font-weight: 500; font-size: clamp(32px, 6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; margin: 24px 0 4px; }
h2 { font-weight: 500; font-size: 20px; line-height: 1.3; margin: 40px 0 8px; }
.meta { color: var(--mute); font-size: 14px; margin: 0 0 24px; }
.lead { font-size: 18px; color: var(--ink); }
p, li { color: var(--soft); }
strong { color: var(--ink); font-weight: 500; }
ul { padding-left: 20px; }
li { margin: 8px 0; }
a { color: var(--brand); text-underline-offset: 2px; }
a:focus-visible, .back:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.skip {
  position: absolute; left: 12px; top: -48px; z-index: 10; padding: 8px 14px;
  background: var(--ink); color: var(--bg); border-radius: 8px; text-decoration: none; transition: top 0.15s;
}
.skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { .skip { transition: none; } }