* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.page { max-width: 680px; margin: 0 auto; padding: 48px 24px 64px; }
.brand { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; text-decoration: none; }
/* Type sizes come from the app scale (specs/design-alignment-gate.md "Type scale"). Standalone links keep a 44 px hit area
   through a ::before, so nothing moves: the header wordmark (29 tall + 2 x 8, 2 px past each side) and the footer links (22 tall + 2 x 11, inside
   the 24 px gap between them). */
.brand::before { content: ""; position: absolute; inset: -8px -2px; }
.brand img { width: 28px; height: 28px; image-rendering: pixelated; }
h1 { margin: 40px 0 8px; font-size: 32px; line-height: 1.2; letter-spacing: -0.03em; }
h2 { margin: 32px 0 10px; font-size: 20px; line-height: 1.4; }
p { margin: 0 0 16px; }
.updated { font-size: 13px; margin-bottom: 32px; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
code { font-size: 0.9em; }
/* /privacy's "On this page" (design ruling, AND-1540 align v3): a list of full-width rows at 17 px, with a hairline between
   rows, not tight links. The "Also:" list under it uses the same rows (design ruling, align v4: they are navigation too).
   Align v5 polish: each row is at least 44 tall and centres its text (no vertical padding), inset 16 px like an iOS list
   row; the hairline is 0.5 px in the separator colour (light rgba(60,60,67,.29), dark below). Scoped to that nav: the
   footer nav and sw-off.html share this file. */
nav[aria-labelledby="on-this-page"] ul { list-style: none; margin: 0 0 16px; padding: 0; }
nav[aria-labelledby="on-this-page"] li + li { border-top: 0.5px solid rgba(60, 60, 67, 0.29); }
nav[aria-labelledby="on-this-page"] li a { min-height: 44px; display: flex; align-items: center; padding: 0 16px; font-size: 17px; line-height: 22px; }
footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid #ddd; font-size: 13px; }
footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
footer nav a { position: relative; }
footer nav a::before { content: ""; position: absolute; inset: -11px -4px; }
@media (max-width: 480px) {
  .page { padding-top: 28px; }
  h1 { margin-top: 32px; font-size: 28px; }
}
/* Dark tokens: canvas #000, label #FFF, secondary label rgba(235,235,245,.6), separator rgba(84,84,88,.6). Links keep the label colour and the default underline. */
@media (prefers-color-scheme: dark) {
  body { background: #000; color: #fff; }
  a { color: #fff; }
  a:focus-visible { outline-color: #fff; }
  .updated { color: rgba(235, 235, 245, 0.6); }
  footer, nav[aria-labelledby="on-this-page"] li + li { border-top-color: rgba(84, 84, 88, 0.6); }
}