/* ============================================================
   /privacy and /terms: long-form legal text. A reading column
   with an "On this page" index beside it on wide screens (sticky)
   and above it on narrow ones.
   ============================================================ */

.legal { padding-block: var(--sp-7) var(--section-y); }

.legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 46rem);
  grid-template-areas: "toc head" "toc body";
  gap: var(--sp-6) var(--sp-7);
  align-items: start;
}

.legal__head { grid-area: head; }
.legal__body { grid-area: body; }
.legal__kicker {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--turquoise-ink);
}
.legal__head h1 {
  margin-top: var(--sp-2);
  font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -.02em;
  color: var(--ocean-deep);
}
.legal__updated { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--stone); }
.legal__lead { margin-top: var(--sp-5); font-size: var(--fs-md); color: var(--slate); }

.legal__toc { grid-area: toc; position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
.legal__toc h2 {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stone); margin-bottom: var(--sp-3);
}
.legal__toc ol { display: grid; gap: var(--sp-1); border-left: 1px solid var(--hairline); }
.legal__toc a {
  display: block; padding: var(--sp-1) var(--sp-3); margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--fs-ui); color: var(--slate);
}
.legal__toc a:hover { color: var(--ocean); border-left-color: var(--turquoise); text-decoration: none; }

.legal__body section + section {
  margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: 1px solid var(--hairline);
}
.legal__body h2 { font-size: var(--fs-xl); color: var(--ocean-deep); }
.legal__body h3 { margin-top: var(--sp-5); font-size: var(--fs-md); color: var(--charcoal); }
.legal__body p, .legal__body ul, .legal__body ol { margin-top: var(--sp-3); }
.legal__body ul, .legal__body ol { padding-left: 1.25rem; display: grid; gap: var(--sp-2); }
.legal__body li::marker { color: var(--turquoise-ink); }
.legal__body a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 960px) {
  .legal { padding-top: var(--sp-6); }
  .legal__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "toc" "body"; }
  .legal__toc {
    position: static;
    padding: var(--sp-4) var(--sp-5); border-radius: var(--r-card);
    background: var(--seafoam-tint); border: 1px solid var(--hairline);
  }
  .legal__toc ol { border-left: 0; }
  .legal__toc a { padding-inline: 0; margin-left: 0; border-left: 0; }
}