/* Legal documents (User Agreement, Privacy Policy). Hero holds the same
   680px measure as .prose so the page reads as one column. */
.page-hero { max-width: 680px; padding-bottom: 24px; }
.legal-updated { font-size: 14px; line-height: 22px; color: var(--ink-soft); }

.legal-doc h2 { scroll-margin-top: 96px; text-transform: none; }
.legal-doc h3 { margin-top: 28px; scroll-margin-top: 96px; }
.legal-doc .legal-num { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.legal-doc h2 .legal-num, .legal-doc h3 .legal-num { color: inherit; }

/* Numbered paragraphs: the number hangs in its own column, nested levels step in. */
.legal-doc .legal-p { font-size: 15px; line-height: 26px; }
.legal-doc .legal-p.has-num { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: 8px; }
.legal-doc .legal-p.d1 { margin-left: 1.5em; }
.legal-doc .legal-p.d2 { margin-left: 3em; }
.legal-doc .legal-p.d3 { margin-left: 4.5em; }
.legal-doc > .legal-p + .legal-p { margin-top: 12px; }
.legal-doc a { overflow-wrap: anywhere; }

.legal-toc { margin-top: 32px; padding: 20px 24px; background: var(--linen); border-radius: 12px; }
.legal-toc h2 { font-size: 15px; line-height: 22px; margin: 0 0 8px; font-weight: var(--w-medium); color: var(--ink-strong); }
.legal-toc ol { list-style: none; padding: 0; columns: 2; column-gap: 32px; }
.legal-toc li { font-size: 14px; line-height: 26px; break-inside: avoid; }
.legal-toc a { text-decoration: none; color: var(--ink); }
.legal-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .legal-toc ol { columns: 1; }
  .legal-doc .legal-p.d1 { margin-left: 0.75em; }
  .legal-doc .legal-p.d2 { margin-left: 1.5em; }
  .legal-doc .legal-p.d3 { margin-left: 2.25em; }
}