/* privacy, terms and deleting your data: one readable column, in the family look */

.legal {
  flex: 1; width: 100%; max-width: 680px; margin: 0 auto;
  padding: clamp(28px, 7vh, 72px) var(--gutter) max(56px, env(safe-area-inset-bottom));
}
.legal article { display: grid; gap: 14px; }
.legal h1 { font: 700 clamp(28px, 4vw, 36px)/1.1 var(--serif); letter-spacing: -0.01em; margin: 0 0 4px; text-wrap: balance; }
.legal h2 { font: 700 19px/1.3 var(--serif); margin: 22px 0 0; color: var(--ink); text-wrap: balance; }
.legal p, .legal li { color: var(--ink-2); font: 15px/1.6 var(--text); margin: 0; text-wrap: pretty; max-width: 66ch; }
.legal .lead { color: var(--ink); font-size: 17px; }
.legal .meta { color: var(--ink-3); font-size: 13px; }
.legal ul, .legal ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legal b { color: var(--ink); font-weight: 600; }
.legal code { font: 13px var(--mono); color: var(--ink); background: var(--chip); padding: 1px 5px; border-radius: 4px; }
.legal a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--seam-3); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: var(--ink-2); }
.legal a:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; border-radius: 2px; }