/* Legal pages — privacy, terms, accessibility. Same document shape, one stylesheet. */

.legal-hero {
  padding: clamp(110px, 16vh, 150px) 0 clamp(50px, 7vh, 80px);
  background: var(--color-cream);
}

.legal-hero h1 {
  color: var(--color-ink);
  max-width: 700px;
}

.legal-updated {
  margin-top: 16px;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.legal-body {
  padding: clamp(50px, 8vh, 90px) 0 clamp(84px, 12vh, 130px);
}

.legal-content {
  max-width: var(--measure);
}

.legal-content h2 {
  font-size: var(--text-2xl);
  margin-top: clamp(40px, 6vh, 64px);
  margin-bottom: 18px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: var(--text-md);
  margin-top: 30px;
  margin-bottom: 10px;
}

.legal-content p {
  margin-bottom: 18px;
  line-height: 1.75;
}

.legal-content ul,
.legal-content ol {
  margin-bottom: 18px;
  padding-left: 22px;
}

.legal-content ul {
  list-style: disc;
}

.legal-content ol {
  list-style: decimal;
}

.legal-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.legal-content li > ul,
.legal-content li > ol {
  margin-top: 8px;
  margin-bottom: 0;
}

.legal-content a {
  text-decoration: underline;
}

.legal-content strong {
  color: var(--color-ink);
}

/* Table used once, for the data-subject-rights summary on the privacy page. */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: var(--text-sm);
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid rgba(51, 51, 51, 0.14);
  vertical-align: top;
}

.legal-table th {
  background: var(--color-cream);
  font-weight: 700;
}

@media (min-width: 768px) {
  .legal-hero {
    padding-top: clamp(120px, 18vh, 160px);
  }
}