/* legal.css — /privacy, /terms, /legal/dpa, /ai-act (loaded with prose.css). */

/* ── Legal pages (/privacy, /terms, future /legal/*) ──────────────
   Long-form prose pages reuse the .prose typography; .legal adds
   the page header treatment and a small footnote block. No new
   component classes beyond these — section spacing, lists, links
   all inherit from .prose. */

.legal {
  max-width: 56rem;
  margin: var(--size-7) auto;
  padding: 0 var(--size-4);
}

.legal-head {
  margin: 0 0 var(--size-6);
  padding-bottom: var(--size-4);
  border-bottom: 1px solid var(--rule-soft);
}

.legal-badge {
  display: inline-block;
  margin: 0 0 var(--size-3);
  padding: 0.2em 0.7em;
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--surface-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
}

.legal-meta {
  margin: var(--size-2) 0 var(--size-3);
  color: var(--fg-muted);
  font-size: var(--font-size-1);
}

.legal-meta strong {
  color: var(--fg);
  font-weight: 600;
}

.legal-disclaimer {
  margin: var(--size-3) 0 0;
  padding: var(--size-3) var(--size-4);
  background: var(--surface-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-2);
  color: var(--fg-soft);
  font-size: var(--font-size-1);
}

.legal-footnote {
  margin: var(--size-4) 0 0;
  color: var(--fg-muted);
  font-size: var(--font-size-0);
  line-height: 1.6;
}