/* The legal pages (/privacy, /terms): one document card on the ground, in the site's own ramp. Prose is held to a
   68ch measure; every other value is a token from tokens.css. */
.legal { width: min(100% - 2 * var(--gutter), calc(68ch + 2 * var(--sp-48))); padding-block: var(--sp-48) var(--sp-96); }
.legal-head { display: grid; gap: var(--sp-12); margin-bottom: var(--sp-32); }
.legal-date { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.legal-lede { max-width: 68ch; font-size: var(--fs-lede); line-height: var(--lh-lede); }
.legal-doc { padding: var(--sp-48); }
.legal-doc > * { max-width: 68ch; }
.legal-doc h2 { margin-top: var(--sp-40); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 600; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 { margin-top: var(--sp-24); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
/* a #section link lands below the sticky nav (base.css .nav-in, 64px tall) */
.legal-doc [id] { scroll-margin-top: calc(var(--sp-64) + var(--sp-16)); }
.legal-doc p, .legal-doc ul, .legal-doc ol { margin-top: var(--sp-12); }
.legal-doc ul { padding-left: var(--sp-20); list-style: disc; }
.legal-doc ol { padding-left: var(--sp-24); list-style: decimal; }
.legal-doc li + li { margin-top: var(--sp-8); }
.legal-doc a { text-underline-offset: var(--sp-2); }
.legal-doc strong { font-weight: 600; }
.legal-nav .btn { margin-left: auto; }

/* Contents: the sections as one numbered list, two columns where the card is wide enough, under a hairline */
.legal-toc { padding-bottom: var(--sp-32); border-bottom: var(--hair) solid var(--sel); }
.legal-toc ol { columns: 2; column-gap: var(--sp-32); font-size: var(--fs-small); line-height: var(--lh-small); }
.legal-toc li { break-inside: avoid; }
.legal-toc li + li { margin-top: var(--sp-4); }
.legal-toc a { color: inherit; }
.legal-toc a:hover { color: var(--muted); }

/* The plans table: hairline rows, the caption read by assistive tech only (the sentence above names it) */
.legal-table { margin-top: var(--sp-16); overflow-x: auto; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-small); }
.legal-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.legal-table th, .legal-table td { padding: var(--sp-8) var(--sp-12) var(--sp-8) 0; text-align: left; vertical-align: top; border-bottom: var(--hair) solid var(--sel); }
.legal-table thead th { color: var(--muted); font-weight: 600; }
.legal-table tbody th { font-weight: 600; }

/* The model withdrawal form: set apart on the ground colour so it reads as a form to copy */
.legal-form { padding: var(--sp-16) var(--sp-20); border-radius: var(--r-ctl); background: var(--ground); font-size: var(--fs-small); line-height: var(--lh-small); }

@media (max-width: 640px) {
  .legal { padding-block: var(--sp-32) var(--sp-64); }
  .legal-doc { padding: var(--sp-24); }
  .legal-toc ol { columns: 1; }
}