/* ═══════════════════════════════════════════════════════════════════════════
   JiveDB — Legal pages layout
   Shared by: privacy.html, privacy_vi.html, terms.html, terms_vi.html

   Design tokens, fonts, header (.nav) and footer (.footer) are inherited from
   css/styles.css (index.html standard). The page container reuses the global
   .wrap sizing. This file only adds the document/article layout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Token this layout needs that styles.css does not define ───────────────── */
:root { --surface-2: #131a30; }
[data-theme="light"] { --surface-2: #f1f4fb; }

/* ── Document typography ───────────────────────────────────────────────────── */
body { line-height: 1.7; }
main a, .toc a { color: var(--primary-ink); }
main a:hover, .toc a:hover { text-decoration: underline; }

/* ── Page header (eyebrow + title) ─────────────────────────────────────────── */
header.page { padding: 56px 0 28px; border-bottom: 1px solid var(--line); }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--primary-ink);
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); margin-bottom: 18px;
}
h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.1; margin: 0 0 12px; letter-spacing: -0.025em; }
.meta { color: var(--muted); font-size: 14px; margin: 0; }

/* ── Table of contents ─────────────────────────────────────────────────────── */
.toc {
  margin: 28px 0; padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
}
.toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 12px; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.toc li { margin: 4px 0; break-inside: avoid; }
@media (max-width: 560px) { .toc ol { columns: 1; } }

/* ── Article content ───────────────────────────────────────────────────────── */
main { padding: 8px 0 40px; }
section { padding-top: 30px; scroll-margin-top: 76px; }
h2.sec { font-size: 22px; margin: 0 0 12px; letter-spacing: -0.01em; }
h2.sec .num { color: var(--primary-ink); font-variant-numeric: tabular-nums; margin-right: 8px; }
h3 { font-size: 17px; margin: 22px 0 6px; }
main p, main li { color: var(--ink-soft); }
main ul, main ol.list { padding-left: 22px; }
main li { margin: 6px 0; }
main strong { color: var(--ink); }
.lead { font-size: 18px; color: var(--ink); }
.legal-strong { text-transform: uppercase; font-size: 14px; letter-spacing: 0.02em; }
.callout {
  margin: 18px 0; padding: 16px 18px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--primary); font-size: 15px;
}
.callout.amber { border-left-color: var(--amber); }
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 700; }
code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.88em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }