/* Terms and Privacy (terms.html, privacy.html): one reading column under the nav, the survey's headline,
   then sections with the guide's heads and body. Reuses style.css / page.css / form.css: --ink, --body,
   --muted, --m, .start-h1, .form-page nav. Boilerplate copy until Michael's counsel replaces it. */
.legal { min-height: calc(100svh - var(--nav-h)); padding: 32px var(--m) 136px; }
.legal-col { width: 640px; max-width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 48px; }
.legal-head { display: flex; flex-direction: column; gap: 16px; }
.legal-date { font: 400 16px/24px var(--font-ui); color: var(--muted); }
.legal-sec { display: flex; flex-direction: column; gap: 12px; }
.legal-sec h2 { font: 400 24px/32px var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.legal-sec p, .legal-sec li { font: 400 16px/24px var(--font-ui); color: var(--body); text-wrap: pretty; }
.legal-sec ul { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; list-style: disc; }
.legal-sec a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }