/* Shared prose styling for /privacy and /terms. Deliberately separate from
   styles.css (which is tuned for the animated marketing pages), but matches
   the dark theme used sitewide (styles.css sets `main { background:
   var(--dark); color: var(--on-dark) }`, same treatment as about.html's
   `.about` block) rather than fighting it — Chris confirmed 2026-07-26 he
   wants these pages to match the About page look. Use the on-dark / on-dark-
   muted tokens throughout, not the light-background text/text-secondary
   tokens (that mismatch was the original "font is too dark" bug: dark-on-
   near-black instead of cream-on-near-black). */

.doc { max-width: 720px; margin: 0 auto; padding: 56px 22px 80px; }
.doc__eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 800; color: var(--primary-light); margin-bottom: 10px; }
.doc__title { font-size: clamp(28px, 5vw, 40px); font-weight: 900; letter-spacing: -0.5px; line-height: 1.1; color: var(--on-dark); margin-bottom: 10px; }
.doc__updated { font-size: 14px; color: var(--on-dark-muted); margin-bottom: 40px; }
.doc__intro { font-size: 17px; color: var(--on-dark-muted); line-height: 1.7; margin-bottom: 8px; }

.doc h2 { font-size: 19px; font-weight: 800; color: var(--on-dark); margin: 36px 0 12px; }
.doc h3 { font-size: 15px; font-weight: 800; color: var(--on-dark); margin: 20px 0 8px; }
.doc p { font-size: 16px; color: var(--on-dark-muted); line-height: 1.7; margin-bottom: 12px; }
.doc a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { color: var(--on-dark-muted); }

/* Flush paragraphs with an inline bold lead-in ("5.6(a)", "Intellectual
   Property Rights", ...), NOT a hanging indent: an absolutely-positioned
   label in a fixed-width gutter overlapped the clause text whenever the
   label was wider than the gutter (long labels + numbered sub-clauses like
   5.6(a)-(d)), confirmed live 2026-07-26. This also matches how the native
   app renders the same clauses (LegalClause in src/components/LegalDoc.tsx)
   — no hanging indent there either. */
.doc ol.clauses { list-style: none; margin: 0 0 12px; padding: 0; }
.doc ol.clauses > li { font-size: 16px; color: var(--on-dark-muted); line-height: 1.7; margin-bottom: 10px; }
.doc ol.clauses > li > b { color: var(--on-dark); font-weight: 800; margin-right: 6px; }

.doc__contact { margin-top: 44px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); }
.doc__contact p { margin-bottom: 4px; color: var(--text-secondary); }

.doc__back { display: inline-block; margin-bottom: 24px; font-size: 14px; font-weight: 800; color: var(--on-dark-muted); text-decoration: none; }
.doc__back:hover { color: var(--on-dark); }