/*
 * =========================================================
 * OLYTIC - Legal Page Styles
 * legal.css
 *
 * Minimal styles for Privacy Policy and Terms of Use pages.
 * Extends the shared design system; no overrides of global
 * typography rules.
 * =========================================================
 */

/* ─── Hero ─────────────────────────────────────────────── */

.legal-hero {
  padding: var(--space-16) 0 var(--space-10);
}

.legal-hero__inner {
  max-width: 720px;
}

.legal-hero__accent-rule {
  width: 48px;
  height: 3px;
  background: var(--color-gold);
  margin-bottom: var(--space-6);
}

.legal-hero__headline {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
}

.legal-hero__sub {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--leading-body);
  margin: 0;
}

/* ─── Content Body ─────────────────────────────────────── */

.legal-body {
  padding: var(--space-10) 0 var(--space-16);
}

.legal-body__inner {
  max-width: 720px;
}

.legal-body h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  line-height: var(--leading-tight);
  margin: var(--space-10) 0 var(--space-4);
}

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

.legal-body p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-body-steel);
  line-height: var(--leading-body);
  margin: 0 0 var(--space-4);
}

.legal-body ul {
  padding-left: var(--space-6);
  margin: 0 0 var(--space-4);
}

.legal-body li {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-body-steel);
  line-height: var(--leading-body);
}

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

.legal-body a:hover {
  color: var(--color-navy);
}