/* ─────────────────────────────────────────────────────────────
   LanDocs — Legal pages (Privacy Policy, Terms of Service)
   Self-contained reading layout built on the design tokens
   from colors_and_type.css. No build step.
   ───────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body.legal {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--fg-1);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--lh-loose);
}

/* ── Top bar (mirrors the landing nav, simplified) ── */
.lg-nav {
    border-bottom: var(--bw) solid var(--border);
    background: var(--bg);
}
.lg-nav-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--s-4) var(--s-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lg-logo {
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.lg-back {
    font-size: var(--t-small);
    color: var(--fg-3);
    text-decoration: none;
}
.lg-back:hover { color: var(--accent); }

/* ── Document column ── */
.lg-doc {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--s-8) var(--s-5) var(--s-9);
}

.lg-doc h1 {
    font-size: var(--t-h2);
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 var(--s-2);
}
.lg-updated {
    font-size: var(--t-small);
    color: var(--fg-3);
    margin: 0 0 var(--s-7);
}

.lg-doc h2 {
    font-size: var(--t-h3);
    line-height: var(--lh-snug);
    font-weight: 600;
    color: var(--ink);
    margin: var(--s-7) 0 var(--s-3);
    padding-top: var(--s-2);
}

.lg-doc h3 {
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--fg);
    margin: var(--s-5) 0 var(--s-2);
}

.lg-doc p,
.lg-doc li {
    font-size: var(--t-body);
    color: var(--fg-1);
}

.lg-doc ul {
    padding-left: var(--s-5);
    margin: var(--s-3) 0;
}
.lg-doc li { margin: var(--s-1) 0; }

.lg-doc a { color: var(--accent); }
.lg-doc a:hover { color: var(--accent-hover); }

.lg-doc strong { color: var(--fg); font-weight: 600; }

.lg-doc code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-muted);
    border: var(--bw) solid var(--border);
    border-radius: var(--r-1);
    padding: 1px 5px;
}

/* Callout — for the "your data stays in your browser" highlight */
.lg-callout {
    background: var(--accent-soft);
    border: var(--bw) solid #cfe0ff;
    border-radius: var(--r-3);
    padding: var(--s-4) var(--s-5);
    margin: var(--s-5) 0;
}
.lg-callout p { margin: 0; color: var(--fg-1); }

/* Intro lead under the title */
.lg-lead {
    font-size: var(--t-lead);
    line-height: var(--lh-loose);
    color: var(--fg-2);
    margin: 0 0 var(--s-6);
}

/* ── Footer ── */
.lg-footer {
    border-top: var(--bw) solid var(--border);
}
.lg-footer-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--s-6) var(--s-5);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    font-size: var(--t-small);
    color: var(--fg-3);
}
.lg-footer-inner a { color: var(--fg-3); text-decoration: none; }
.lg-footer-inner a:hover { color: var(--accent); }
.lg-footer-sep { color: var(--border-strong); }

@media (max-width: 600px) {
    .lg-doc { padding: var(--s-6) var(--s-4) var(--s-8); }
    .lg-doc h1 { font-size: 28px; }
}