.legal {
  padding: clamp(48px, 8vh, 96px) 0 clamp(56px, 9vh, 104px);
  background: var(--paper);
}

.legal-inner { max-width: 72ch; }

.legal-meta {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: 12px 0 0;
}

.legal-back {
  display: inline-block;
  margin-top: clamp(28px, 4vw, 40px);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--accent);
}
.legal-back:hover { text-decoration: underline; }

.legal-lead {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--ink-soft);
  margin: 20px 0 0;
}

.legal-h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--ink);
  margin: clamp(30px, 4vw, 42px) 0 12px;
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--rule);
}

.legal-p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.legal-p:last-child { margin-bottom: 0; }
.legal-p strong { color: var(--ink); font-weight: 600; }

.legal-list { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.legal-list li {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink-soft);
  margin-bottom: 7px;
}
/* The reset blanks ::marker to keep VoiceOver list semantics without bullets.
   Prose lists want the bullet back, so restore the default marker content. */
.legal-list li::marker { content: normal; color: var(--ink-faint); }

.legal-link { color: var(--accent); font-weight: 500; }
.legal-link:hover { text-decoration: underline; }