/**
 * ChilledSites legal page stylesheet (Privacy Policy, Terms of Service)
 *
 * Restyles the two static legal pages onto the site's design tokens
 * (see /css/article.css). No dark-mode block needed here: the tokens
 * already flip in article.css.
 */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 96px;
  font-family: 'Archivo', system-ui, sans-serif;
  color: var(--text);
  line-height: 1.7;
  font-size: 16px;
}

.legal h1 {
  font-family: 'Bricolage Grotesque', 'Archivo', sans-serif;
  font-weight: var(--w-strong);
  font-size: 36px;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

@media (max-width: 640px) {
  .legal h1 {
    font-size: 28px;
  }
}

.legal h2,
.legal h3 {
  font-family: 'Archivo', sans-serif;
  font-size: 19px;
  font-weight: var(--w-strong);
  color: var(--text-strong);
  margin: 40px 0 12px;
}

.legal p,
.legal li {
  color: var(--text);
}

.legal ul,
.legal ol {
  padding-left: 22px;
  margin: 0 0 16px;
}

.legal ul {
  list-style: disc;
}

.legal ol {
  list-style: decimal;
}

.legal li {
  margin-bottom: 6px;
}

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

.legal a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal a:hover {
  color: var(--coral-light);
}

.legal-back {
  margin-bottom: 32px;
}

.legal-back a {
  font-size: 13px;
  font-weight: var(--w-med);
  color: var(--muted);
  text-decoration: none;
}

.legal-back a:hover {
  color: var(--text-strong);
}

.legal-updated {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 32px;
}

.legal-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 32px;
}

@media (max-width: 640px) {
  .legal-card {
    padding: 20px;
  }
}

.legal-card > h2:first-child,
.legal-card > h3:first-child,
.legal-card section:first-child > h2,
.legal-card section:first-child > h3 {
  margin-top: 0;
}