/* The legal pages, in the landing's own light interface. Tokens come from /tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink-secondary); font: 400 16px/1.7 var(--font-ui); -webkit-font-smoothing: antialiased; }
.container { max-width: 820px; margin: 0 auto; padding: 0 24px; }
main { padding: 56px 0 72px; }
h1 { font: var(--display-weight, 800) clamp(30px, 4vw, 42px)/1.1 var(--font-display); color: var(--ink); letter-spacing: -0.025em; margin: 0 0 10px; }
h2 { font: 700 21px/1.3 var(--font-display); color: var(--ink); letter-spacing: -0.015em; margin: 40px 0 12px; }
h3 { font: 700 16px/1.4 var(--font-ui); color: var(--brand); margin: 22px 0 8px; }
p { margin: 0 0 14px; }
ul { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 8px; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--ink); font-weight: 650; }
code { font-family: var(--font-figures); font-size: .92em; background: var(--surface-sunken); padding: 1px 5px; border-radius: 4px; }
.last-updated { font-size: 13.5px; color: var(--ink-muted); padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.legal-callout, .callout { background: var(--brand-tint); border: 1px solid var(--brand-tint-line); border-left: 3px solid var(--brand); border-radius: var(--radius-lg); padding: 16px 18px; margin: 20px 0 28px; }
.legal-callout p, .callout p { margin: 0; font-size: 14.5px; color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }