/* ===== LEGAL / PROSE PAGES (privacy, terms) =====
   A reading layout, not a marketing one: one narrow column, generous
   leading, and a sticky contents rail on wide screens. Shared by
   privacy.html and terms.html. */

.legal-hero { position: relative; overflow: hidden; padding-block: clamp(2.4rem, 6vw, 4.5rem) clamp(1.2rem, 3vw, 2rem); }
.legal-hero__title { font-size: clamp(2.1rem, 6vw, 3.6rem); text-transform: uppercase; line-height: .95; margin-top: .8rem; }
.legal-hero__lead { max-width: 60ch; margin-top: 1rem; }
.legal-hero__updated {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-top: 1.4rem; display: block;
}

.legal-body { padding-block: 1rem clamp(60px, 9vw, 120px); }
.legal-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* Contents rail */
.legal-toc { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.legal-toc h2 {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--flame-2); margin-bottom: .9rem;
}
.legal-toc ol { list-style: none; counter-reset: toc; display: grid; gap: .1rem; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: block; padding: .4rem .6rem; border-radius: 8px; font-size: .84rem;
  color: var(--muted); line-height: 1.4; transition: color .2s, background .2s;
}
.legal-toc a::before { content: counter(toc) ". "; color: var(--faint); font-family: var(--mono); font-size: .78rem; }
.legal-toc a:hover { color: var(--text); background: var(--surface); }

/* Prose */
.legal { max-width: 74ch; }
.legal > section { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.legal > section + section { margin-top: clamp(2.2rem, 5vw, 3.2rem); }
.legal h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.2; margin-bottom: .9rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.legal > section:first-child h2 { border-top: 0; padding-top: 0; }
.legal h3 {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--flame-2); margin: 1.6rem 0 .7rem;
}
.legal p { color: var(--muted); line-height: 1.75; margin-bottom: 1rem; }
.legal p:last-child { margin-bottom: 0; }
.legal strong { color: var(--text); font-weight: 700; }
.legal a:not(.btn) { color: var(--flame-2); text-decoration: underline; text-underline-offset: 3px; }
.legal a:not(.btn):hover { color: var(--text); }

.legal ul, .legal ol { margin: 0 0 1rem 1.1rem; display: grid; gap: .5rem; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { color: var(--muted); line-height: 1.7; padding-left: .3rem; }
.legal li::marker { color: var(--flame-1); }

/* Data tables — what we collect, who we share it with */
.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; font-size: .9rem; }
.legal-table caption {
  text-align: left; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); padding-bottom: .6rem;
}
.legal-table th, .legal-table td { text-align: left; padding: .75rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.6; }
.legal-table th {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); font-weight: 400; background: var(--surface);
}
.legal-table td { color: var(--muted); }
.legal-table td:first-child { color: var(--text); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-scroll { overflow-x: auto; margin-bottom: 1.2rem; }
.legal-scroll .legal-table { margin-bottom: 0; min-width: 420px; }

/* Callout for the things people actually need to notice */
.legal-note {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--flame-1);
  border-radius: 0 12px 12px 0; padding: 1rem 1.2rem; margin: 0 0 1.2rem;
}
.legal-note p { margin-bottom: 0; font-size: .92rem; }

.legal-contact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.2rem, 3vw, 1.6rem); }
.legal-contact p { margin-bottom: .5rem; }
.legal-contact p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .legal-wrap { grid-template-columns: 1fr; gap: 1.6rem; }
  .legal-toc { position: static; border-bottom: 1px solid var(--line); padding-bottom: 1.2rem; }
  .legal-toc ol { grid-template-columns: 1fr 1fr; gap: .1rem .6rem; }
}
@media (max-width: 520px) {
  .legal-toc ol { grid-template-columns: 1fr; }
}