/* Body-only styles for /privacy/ and /terms/. Nav + footer styles live
   in chrome.css; brand tokens (--paper, --ink, --brand…) come from there
   too, so don't redefine :root here. */

body.legal-doc {
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Wide page (1200 px from chrome.css's .wrap), narrow readable column. */
.legal-body { padding: 48px 0 64px; }
.legal-content { max-width: 760px; margin: 0 auto; padding: 0 32px; line-height: 1.6; }
.crumbs { color: var(--ink-3); font-size: 14px; margin: 0 0 24px; }
.crumbs a { color: var(--brand); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.eyebrow { color: var(--ink-3); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
h1 { font-size: 36px; margin: 6px 0 12px; line-height: 1.2; }
.lead { color: var(--ink-2); font-size: 18px; margin: 0 0 8px; }
.updated { color: var(--ink-3); font-size: 14px; font-style: italic; margin: 0 0 36px; }

h2 { font-size: 22px; margin: 36px 0 12px; line-height: 1.3; }
h3 { font-size: 17px; margin: 22px 0 8px; }
.legal-content p, .legal-content li { font-size: 16px; color: var(--ink); margin: 0 0 12px; }
.legal-content ul, .legal-content ol { padding-left: 22px; margin: 0 0 16px; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--brand); }

.callout {
  background: var(--paper-2);
  border-left: 4px solid var(--brand);
  padding: 16px 20px;
  border-radius: 8px;
  margin: 20px 0;
}
.warn {
  background: var(--warn-soft, #FBE7CE);
  border-left: 4px solid var(--warn, #9c5615);
  padding: 16px 20px;
  border-radius: 8px;
  margin: 20px 0;
}
.warn strong { color: var(--warn, #9c5615); }

.legal-content table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.legal-content th, .legal-content td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--paper-3); vertical-align: top; }
.legal-content th { background: var(--paper-2); font-weight: 700; }

@media (max-width: 600px) {
  .legal-content { padding: 0 18px; }
  h1 { font-size: 28px; }
}

/* RTL Arabic — body-side tweaks (nav/footer RTL is handled in chrome.css). */
html[lang="ar"] body.legal-doc { direction: rtl; text-align: right; }
html[lang="ar"] .legal-content th, html[lang="ar"] .legal-content td { text-align: right; }
html[lang="ar"] .legal-content ul, html[lang="ar"] .legal-content ol { padding-right: 22px; padding-left: 0; }
html[lang="ar"] .callout, html[lang="ar"] .warn { border-left: none; border-right: 4px solid var(--brand); }
html[lang="ar"] .warn { border-right-color: var(--warn, #9c5615); }