/* /privacy/ and /terms/: long text to read. On top of landing.css (nav, .info-kicker) and app.css (page frame, footer).
   Tokens only; logical properties so RTL works. Sections are numbered by CSS, so the translations carry no numbers. */

.legal { max-width: 780px; line-height: 1.8; counter-reset: legal; }
.legal-updated { color: var(--muted); font-size: 13px; margin-top: 8px; }
.legal-intro { font-size: 16px; margin-bottom: 8px; }

.legal section { counter-increment: legal; scroll-margin-top: 110px; }
.legal h2 {
  font-family: var(--font-display);
  font-size: calc(26px * max(var(--title-scale), 0.8));
  font-weight: 600;
  line-height: 1.3;
  color: var(--heading);
  margin: 36px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.legal h2::before { content: counter(legal) ". "; color: var(--gold-text); font-variant-numeric: lining-nums; }
html[lang="ur"] .legal h2::before { content: counter(legal) "۔ "; }

/* line-height is inherited, so Urdu keeps tokens.css's taller one for Nastaliq */
.legal section { font-size: 15px; line-height: 1.8; }
.legal section p { margin-bottom: 14px; }
.legal ul { padding-inline-start: 22px; margin-bottom: 14px; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--gold-text); }
.legal strong { color: var(--heading); font-weight: 600; }
.legal a { color: var(--gold-text); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

.find-foot a[aria-current="page"] { font-weight: 600; }

@media (max-width: 900px) { .legal section { scroll-margin-top: 140px; } }