.legal.section-padding {
  padding-bottom: var(--section-y);
}

.legal-header {
  text-align: left;
  max-width: 900px;
}

.legal-title {
  margin-top: var(--gap);
  text-transform: uppercase;
  color: var(--color-ink);
  font-family: var(--type-section-title-family);
  font-weight: var(--type-section-title-weight);
  font-style: var(--type-section-title-style);
  font-size: var(--type-section-title-size);
  line-height: var(--type-section-title-height);
}

.legal-subtitle {
  margin-top: 12px;
  color: var(--color-muted);
  font-family: var(--type-lead-family);
  font-weight: var(--type-lead-weight);
  font-style: var(--type-lead-style);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-height);
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px var(--gap);
  margin-top: var(--gap-lg);
}

.legal-nav-link {
  font-family: var(--type-footer-link-family);
  font-weight: var(--type-footer-link-weight);
  font-style: var(--type-footer-link-style);
  font-size: var(--type-footer-link-size);
  line-height: var(--type-footer-link-height);
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out-soft);
}

.legal-nav-link:hover,
.legal-nav-link-active {
  color: var(--color-magenta);
}

.legal-prose {
  margin-top: var(--gap-lg);
}