/* Legal pages (privacy, terms). Reuses every token from main.css; adds a calm,
   readable prose column. No JS on these pages, so the landing nav — which main.js
   normally fades in — is shown here directly. */

/* The landing nav starts at opacity 0 and is revealed by GSAP; no GSAP here. */
.nav { opacity: 1; }
/* Accent links on sage need dark ink; the apricot route token is for dark maps. */
body { --route: #2e5341; --amber: #805321; }

.legal {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(104px, 13vw, 144px) var(--pad) clamp(72px, 10vw, 112px);
}

.legal-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--route); margin-bottom: 16px;
}
.legal h1 {
  font-family: var(--display); font-weight: 400; letter-spacing: -.035em;
  font-size: clamp(30px, 5.4vw, 60px); line-height: 1.06;
}
.legal-updated { color: var(--sub); font-size: 14px; margin-top: 16px; }
.legal-lede { color: var(--text); font-size: clamp(16px, 2vw, 19px); line-height: 1.6; margin-top: 24px; }

.legal h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 3vw, 27px); line-height: 1.2;
  margin: clamp(40px, 6vw, 56px) 0 14px; scroll-margin-top: 88px;
}
.legal h3 { font-family: var(--body); font-weight: 700; font-size: 16.5px; color: var(--text); margin: 24px 0 8px; }

.legal p, .legal li { color: var(--sub); font-size: 16px; line-height: 1.66; }
.legal p { margin: 12px 0; }
.legal ul { margin: 12px 0 14px; padding-left: 22px; }
.legal li { margin: 8px 0; }
.legal li::marker { color: var(--route); }
.legal strong { color: var(--text); font-weight: 700; }
.legal a { color: var(--route); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--primary); }
.legal hr { border: none; border-top: 1px solid var(--line); margin: clamp(36px, 5vw, 52px) 0; }

/* Contents card */
.legal-toc { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; margin: 30px 0; }
.legal-toc p { color: var(--text); font-weight: 700; margin: 0 0 12px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.legal-toc li { color: var(--sub); margin: 6px 0; }
.legal-toc a { color: var(--sub); text-decoration: none; }
.legal-toc a:hover { color: var(--route); }

/* Highlighted block — the riding-safety section, mainly */
.legal-callout { background: color-mix(in srgb, var(--coral) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--coral) 35%, var(--line)); border-radius: 16px; padding: 18px 20px; margin: 20px 0; }
.legal-callout p { color: var(--text); }
.legal-callout strong { color: var(--coral); }

/* Fill-in tokens — find every .ph and replace before publishing. */
.ph { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); padding: 0 5px; border-radius: 4px; white-space: nowrap; }

@media (max-width: 620px) {
  .legal-toc ol { columns: 1; }
}