/* Legal pages (privacy.html, terms.html). Builds on v2.css. */

.legal-main { max-width: calc(44rem + 2 * var(--gutter)); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 0; }
.legal h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -.045em; line-height: 1.05; }
.legal .updated { margin: .9rem 0 2rem; color: var(--mute); font-size: .95rem; }
.legal h2 { font-size: 1.45rem; letter-spacing: -.025em; line-height: 1.25; margin: 2.6rem 0 .8rem; scroll-margin-top: 5rem; }
.legal h3 { font-size: 1.06rem; margin: 1.6rem 0 .5rem; }
.legal ul, .legal ol { padding-left: 1.3rem; margin: 0 0 1em; }
.legal li { margin: 0 0 .45em; }
.legal a { color: var(--ink); text-underline-offset: .18em; }
.legal strong { color: var(--ink); font-weight: 600; }

.legal .toc { margin: 0 0 1rem; padding: 1.1rem 1.4rem; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); background: rgb(255 255 255 / .6); }
.legal .toc ol { columns: 2 16rem; column-gap: 2rem; margin: 0; font-size: .93rem; }
.legal .toc li { break-inside: avoid; }

.legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .93rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .65rem .7rem .65rem 0; border-top: 1px solid var(--line); }
.legal th { color: var(--ink); font-weight: 600; }

/* Details still to fill in before launch. Easy to spot, easy to search for. */
.legal mark.fill { background: #ffe1d6; color: #8a3b12; padding: 0 .25em; border-radius: 4px; }

@media (max-width: 40rem) {
  .legal table, .legal thead, .legal tbody, .legal tr, .legal th, .legal td { display: block; }
  .legal thead { display: none; }
  .legal td { padding: .2rem 0; border: 0; }
  .legal tr { padding: .7rem 0; border-top: 1px solid var(--line); }
  .legal td:first-child { color: var(--ink); font-weight: 600; }
}