/* The legal pages (terms.html, privacy.html): the landing page's colours, as a
   plain reading page. The theme follows the apps (landing.js sets data-theme). */
:root {
  --bg: hsl(216 33% 96%); --card: hsl(0 0% 100%); --fg: hsl(222 47% 15%); --muted: hsl(220 14% 42%);
  --border: hsl(220 18% 85%); --link: hsl(224 64% 33%); --todo: hsl(40 100% 85%); --todo-fg: hsl(30 80% 22%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: hsl(240 5% 7.5%); --card: hsl(240 5% 11%); --fg: hsl(223 23% 94%); --muted: hsl(223 10% 65%);
    --border: hsl(240 5% 22%); --link: hsl(228 67% 70%); --todo: hsl(40 60% 22%); --todo-fg: hsl(40 100% 85%);
  }
}
:root[data-theme="dark"] {
  --bg: hsl(240 5% 7.5%); --card: hsl(240 5% 11%); --fg: hsl(223 23% 94%); --muted: hsl(223 10% 65%);
  --border: hsl(240 5% 22%); --link: hsl(228 67% 70%); --todo: hsl(40 60% 22%); --todo-fg: hsl(40 100% 85%);
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 40px 16px 64px; background: var(--bg); color: var(--fg);
  font-family: Nunito, system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.6; overflow-wrap: break-word;
}
main { max-width: 720px; margin: 0 auto; padding: 32px clamp(18px, 5vw, 44px); background: var(--card); border: 1px solid var(--border); }
nav { max-width: 720px; margin: 0 auto 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
a { color: var(--link); }
h1 { margin: 0 0 4px; font-size: clamp(28px, 6vw, 38px); font-weight: 900; line-height: 1.15; }
.updated { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
h2 { margin: 32px 0 8px; font-size: 20px; font-weight: 800; }
p, li { font-size: 16px; }
ul { padding-left: 22px; }
.box { margin: 16px 0; padding: 14px 18px; border: 1px solid var(--border); border-left: 4px solid var(--link); }
/* Details still to fill in before launch: easy to spot, impossible to miss. */
.todo { padding: 0 4px; background: var(--todo); color: var(--todo-fg); font-weight: 700; }