/* ============================================================
   LEGAL — privacy, terms, disclaimer
   Quiet masthead, sticky contents, generous reading measure
   ============================================================ */

.legal-head {
  padding-block: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  background-color: var(--c-cream);
  border-bottom: 1px solid var(--c-beige);
}

.legal-head h1 {
  font-size: var(--t-3xl);
  margin-block: 0.85rem 1.15rem;
}

.legal-head__lede {
  max-width: 44rem;
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  color: var(--c-text-2);
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: 1.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-beige);
}

.legal-meta dt {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: 0.2rem;
}

.legal-meta dd {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink);
}

/* ── Layout ──────────────────────────────────────────────── */
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--header-h) + 1.75rem);
  padding: 1.25rem 1.4rem;
  background-color: var(--c-cream);
  border-radius: var(--r-md);
}

.legal-toc__title {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-sage-deep);
  margin-bottom: 0.85rem;
}

.legal-toc ol { counter-reset: lg; display: grid; gap: 0.5rem; }
.legal-toc li { counter-increment: lg; }

.legal-toc a {
  display: flex;
  gap: 0.5rem;
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--c-text-2);
  transition: color var(--d-fast);
}
.legal-toc a::before {
  content: counter(lg) '.';
  flex: none;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--c-sage);
  padding-top: 0.15em;
}
.legal-toc a:hover { color: var(--c-sage-deep); }

/* ── Body ────────────────────────────────────────────────── */
.legal-body { max-width: 46rem; }

.legal-body section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.legal-body section + section { margin-top: 2.75rem; }

.legal-body h2 {
  font-size: var(--t-xl);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--c-line);
}
.legal-body h2:first-child { margin-top: 0; }

.legal-body h3 {
  font-size: var(--t-base);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--c-ink);
  margin-top: 1.6em;
}

.legal-body p, .legal-body li { font-size: var(--t-sm); }

.legal-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  background-color: var(--c-cream);
  border-radius: var(--r-xs);
}

.legal-note {
  display: flex;
  gap: 0.85rem;
  margin-block: 1.5rem;
  padding: 1.1rem 1.3rem;
  background-color: var(--c-sage-pale);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-2);
}
.legal-note .icon {
  color: var(--c-sage-deep);
  flex: none;
  margin-top: 0.15em;
  width: 1.3em;
  height: 1.3em;
}
.legal-note strong { color: var(--c-ink); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; }
  .legal-toc ol { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
}