/* The Privacy Policy and Terms pages: plain HTML, so they open instantly,
   work without the app and can be read by anyone (Google's reviewers too).
   Same fonts and colours as the app. */
@font-face { font-family: 'SpaceGrotesk'; src: url('/assets/assets/fonts/SpaceGrotesk-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/assets/fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/assets/fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  --brand: #0F3D2E;
  --accent: #F5A623;
  --canvas: #FAFAF7;
  --surface: #FFFFFF;
  --tile: #EEEDE8;
  --ink: #1A1A17;
  --muted: #5F5E57;
  --line: #E2E1DA;
  --link: #0F3D2E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0B1511;
    --surface: #111D18;
    --tile: #17251F;
    --ink: #EDEDE8;
    --muted: #A3A69E;
    --line: #22332B;
    --link: #7FD1AE;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 16px/1.65 'Inter', system-ui, sans-serif;
}

header {
  background: var(--brand);
  color: #fff;
  padding: 20px 16px 36px;
}
.bar, main, footer .inner { max-width: 720px; margin: 0 auto; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.mark {
  position: relative; width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 20px/1 'SpaceGrotesk', sans-serif;
}
.mark::after {
  content: ''; position: absolute; right: 8.6px; bottom: 8.6px;
  width: 4.3px; height: 4.3px; border-radius: 50%; background: var(--accent);
}
.word { font: 600 20px/1 'SpaceGrotesk', sans-serif; letter-spacing: -0.8px; }
.word span { color: var(--accent); }
.open {
  color: var(--brand); background: var(--accent); text-decoration: none;
  font: 600 14px/1 'SpaceGrotesk', sans-serif; padding: 10px 14px; border-radius: 12px;
  white-space: nowrap;
}
header h1 {
  max-width: 720px; margin: 28px auto 6px;
  font: 600 34px/1.15 'SpaceGrotesk', sans-serif; letter-spacing: -1px;
}
header .updated { max-width: 720px; margin: 0 auto; color: rgba(255, 255, 255, 0.75); font-size: 14px; }

main { padding: 28px 16px 48px; }
.summary {
  background: var(--tile); border-radius: 16px; padding: 18px 20px; margin: 0 0 28px;
}
.summary h2 { margin-top: 0; }
.summary ul { margin-bottom: 0; }
nav.toc { margin: 0 0 32px; }
nav.toc ol { padding-left: 20px; columns: 2 260px; column-gap: 24px; margin: 8px 0 0; }
nav.toc li { break-inside: avoid; margin-bottom: 4px; }

h2 {
  font: 600 22px/1.25 'SpaceGrotesk', sans-serif; letter-spacing: -0.5px;
  margin: 36px 0 10px; scroll-margin-top: 16px;
}
h3 { font: 600 17px/1.3 'SpaceGrotesk', sans-serif; margin: 22px 0 6px; }
p, ul, ol { margin: 0 0 14px; }
li { margin-bottom: 6px; }
a { color: var(--link); text-underline-offset: 3px; }
strong { font-weight: 600; }

table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font: 600 14px/1.3 'SpaceGrotesk', sans-serif; color: var(--muted); }
.scroll { overflow-x: auto; }

footer { border-top: 1px solid var(--line); padding: 20px 16px 40px; color: var(--muted); font-size: 14px; }
footer .inner { display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer a { color: var(--muted); }

@media (max-width: 480px) {
  header h1 { font-size: 28px; }
  th, td { padding: 8px; }
}