/* ────────────────────────────────────────────────────────────────────────
   doc-page.css — shared shell for the standalone document pages
   (privacy, terms, changelog, 403/404). Same brand language as the app:
   Brandy, calm paper background, one white card, generous rhythm.
   Fonts live in /fonts, so these paths hold for any page at web root.
   ──────────────────────────────────────────────────────────────────────── */
@font-face { font-family:'Brandy'; src:url('../fonts/brandy-regular.woff2')  format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Brandy'; src:url('../fonts/brandy-medium.woff2')   format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Brandy'; src:url('../fonts/brandy-semibold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Brandy'; src:url('../fonts/brandy-bold.woff2')     format('woff2'); font-weight:700; font-display:swap; }

:root {
    --bg:#edebe7; --card:#fff; --ink:#272b33; --sub:#66707e; --soft:#8b93a1;
    --accent:#3b5be8; --line:#e7e3dc; --hair:#f0ece5;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
    background:var(--bg); color:var(--ink);
    font-family:'Brandy', ui-sans-serif, system-ui, sans-serif;
    line-height:1.7; font-variant-numeric:tabular-nums;
    -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.doc-nav {
    display:flex; justify-content:space-between; align-items:center; gap:20px;
    max-width:1180px; margin:0 auto; padding:22px 28px;
}
.doc-logo { font-size:18px; font-weight:500; color:var(--ink); letter-spacing:-.01em; }
.doc-logo:hover { text-decoration:none; }
.doc-logo .my { opacity:.5; font-weight:400; }
.doc-logo .ooo { color:var(--accent); }
.doc-nav-links { display:flex; gap:22px; align-items:center; }
.doc-nav-links a { color:var(--sub); font-size:14px; font-weight:500; }
.doc-nav-links a:hover { color:var(--ink); text-decoration:none; }
.doc-cta {
    background:var(--accent); color:#fff !important; padding:9px 18px;
    border-radius:10px; font-weight:600; font-size:13px;
    transition:background .18s ease, transform .18s ease;
}
.doc-cta:hover { background:#2742c4; text-decoration:none !important; transform:translateY(-1px); }
@media (max-width:640px) { .doc-nav-links a:not(.doc-cta) { display:none; } }

/* ── The page card ───────────────────────────────────────────────────── */
.doc-wrap { max-width:760px; margin:0 auto; padding:16px 28px 90px; }
.doc-card {
    background:var(--card); border:1px solid var(--line); border-radius:22px;
    padding:52px 56px;
    box-shadow:0 1px 2px rgba(39,43,51,.04), 0 22px 50px -28px rgba(39,43,51,.28);
}
@media (max-width:640px) { .doc-card { padding:32px 24px; border-radius:18px; } }

.doc-eyebrow {
    font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
    color:var(--accent);
}
.doc-card h1 {
    font-size:clamp(28px,4.2vw,40px); font-weight:600; letter-spacing:-.025em;
    line-height:1.15; margin:10px 0 8px;
}
.doc-updated { color:var(--soft); font-size:13.5px; }
.doc-lede { color:var(--sub); font-size:16.5px; margin-top:18px; }

.doc-card h2 {
    font-size:19px; font-weight:600; letter-spacing:-.012em;
    margin:38px 0 10px; padding-top:22px; border-top:1px solid var(--hair);
}
.doc-card h2:first-of-type { border-top:0; padding-top:0; }
.doc-card p, .doc-card li { color:#4a515d; font-size:15.5px; }
.doc-card p + p { margin-top:12px; }
.doc-card ul { margin:10px 0 0 20px; }
.doc-card li { margin-bottom:6px; }
.doc-card strong { font-weight:600; color:var(--ink); }

.doc-back {
    display:inline-flex; align-items:center; gap:8px; margin-top:40px;
    font-weight:500; font-size:15px;
}
.doc-back:hover { text-decoration:none; gap:11px; }
.doc-back span { transition:transform .18s ease; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.doc-foot {
    max-width:760px; margin:0 auto; padding:0 28px 60px;
    display:flex; gap:20px; flex-wrap:wrap; align-items:center;
}
.doc-foot a { color:var(--soft); font-size:14px; }
.doc-foot a:hover { color:var(--ink); text-decoration:none; }
.doc-foot .doc-copy { color:var(--soft); font-size:13px; margin-right:auto; }