/* Tomapan — legal pages (privacy / terms) prose layout.
   Reuses the design tokens + nav/footer from landing.css. */
.legal { max-width: 760px; margin: 0 auto; padding: 56px 28px 80px; }
.legal-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 14px; color: var(--navyMuted); margin-bottom: 18px;
}
.legal-back:hover { color: var(--navy); }
.legal h1 {
  font-weight: 800; font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.6px; line-height: 1.1; margin: 0 0 6px; color: var(--navy);
}
.legal .legal-updated { font-size: 14px; color: var(--inkFaint); font-weight: 600; margin: 0 0 32px; }
.legal h2 {
  font-weight: 800; font-size: 20px; letter-spacing: -0.3px;
  margin: 38px 0 12px; color: var(--navy);
}
.legal p { font-size: 16px; color: var(--inkMuted); line-height: 1.7; margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.legal li { position: relative; padding-left: 20px; font-size: 16px; color: var(--inkMuted); line-height: 1.6; }
.legal li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 6px; height: 6px; border-radius: 999px; background: var(--red);
}
.legal a { color: var(--red); font-weight: 600; }
.legal a:hover { text-decoration: underline; }