.legal-content {
  width: min(100%, var(--container-reading));
  margin: 0 auto;
  padding: 8rem var(--space-10) var(--space-13);
}

.legal-content h1,
.legal-content h2 { font-family: var(--font-family-display); font-weight: var(--font-weight-regular); }
.legal-content h1 { margin-bottom: var(--space-10); font-size: var(--font-size-display-sm); }
.legal-content h2 { margin: var(--space-10) 0 var(--space-4); font-size: var(--font-size-heading-md); }
.legal-content p,
.legal-content li { margin-bottom: var(--space-4); color: var(--color-text-strong-muted); font-size: var(--font-size-lg); }
.legal-content ul { padding-left: var(--space-8); }
.legal-content li { margin-bottom: var(--space-3); }
.legal-content a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }

.legal-footer {
  padding: var(--space-10) var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid color-mix(in srgb, var(--color-text-inverse) 6%, transparent);
  background: var(--color-text-primary);
  color: color-mix(in srgb, var(--color-text-inverse) 42%, transparent);
}

.legal-footer__links { display: flex; justify-content: center; gap: var(--space-10); }
.legal-footer__links a { color: inherit; font-size: var(--font-size-sm); }
.legal-footer__links a:hover { color: color-mix(in srgb, var(--color-text-inverse) 68%, transparent); }

@media (max-width: 720px) {
  .legal-content { padding: 6.5rem var(--space-8) var(--space-11); }
  .legal-content h1 { font-size: var(--font-size-heading-xl); }
  .legal-footer { padding-inline: var(--space-8); text-align: center; }
}