/* privacy.html, terms.html and cookie-policy.html. Replaces privacy.css and
   terms.css, which had drifted into two copies of the same file. Same tokens
   and nav as the landing page (home.css), the backdrop from backdrop.css at
   the top of the page, and the document set for reading: one column of
   ~70ch beside a sticky contents list. The markup the page scripts touch is
   unchanged: #sidebarNav links get `.active`, #mobileToc gets `.visible`,
   #mobileTocBtn gets `.open`. */

:root {
    color-scheme: dark;
    --bg: #040D12;
    --bg-raised: #071519;
    --surface: #0d2424;
    --surface-2: #132e2e;
    --border: rgba(147, 177, 166, 0.12);
    --border-hover: rgba(147, 177, 166, 0.28);
    --accent: #93B1A6;
    --accent-dim: rgba(147, 177, 166, 0.18);
    --accent-glow: rgba(147, 177, 166, 0.08);
    --green: #56c896;
    --amber: #e8a84a;
    --text-1: #edf2f0;
    --text-2: #8faaa0;
    --text-3: #6f8f84;
    --radius-md: 16px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --font-head: 'Outfit', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    position: relative; background: var(--bg); color: var(--text-1);
    font: 400 1rem/1.7 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2 { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* The page backdrop only lights the top of the document, then fades. */
.backdrop.is-legal { height: 640px; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }

/* ── Nav ──────────────────────────────────────────────────────────── */
.navbar-wrap { position: sticky; top: 0; z-index: 50; background: rgba(4, 13, 18, 0.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); }
.navbar { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 24px; }
.nav-logo { display: flex; align-items: center; gap: 10px; font: 700 1.15rem/1 var(--font-head); }
.nav-logo img { width: 28px; height: 28px; }
.legal-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--border); background: rgba(7, 21, 25, 0.6); margin-right: auto; }
.legal-tabs a { font-size: 0.85rem; color: var(--text-2); padding: 6px 14px; border-radius: 999px; transition: color .2s, background .2s; }
.legal-tabs a:hover { color: var(--text-1); }
.legal-tabs a[aria-current="page"] { background: var(--accent-dim); color: var(--text-1); }
.nav-back { display: inline-flex; align-items: center; gap: 8px; font: 600 0.85rem/1 var(--font-head); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border-hover); transition: border-color .2s, background .2s; }
.nav-back:hover { border-color: var(--accent); background: var(--accent-glow); }

/* ── Layout ───────────────────────────────────────────────────────── */
.page-wrapper { max-width: 1200px; margin: 0 auto; padding: 72px 24px 96px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 72px; }
.sidebar { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
.sidebar-label { font-size: 0.78rem; color: var(--text-3); margin-bottom: 12px; padding-left: 14px; }
.sidebar-nav { display: grid; gap: 2px; border-left: 1px solid var(--border); }
.sidebar-nav a { display: block; font-size: 0.875rem; color: var(--text-2); padding: 6px 14px; margin-left: -1px; border-left: 2px solid transparent; transition: color .2s, border-color .2s, background .2s; }
.sidebar-nav a:hover { color: var(--text-1); }
.sidebar-nav a.active { color: var(--text-1); border-left-color: var(--accent); background: linear-gradient(90deg, var(--accent-glow), transparent); }
.content { max-width: 760px; }

/* ── Document header ──────────────────────────────────────────────── */
.doc-header { padding-bottom: 40px; margin-bottom: 48px; border-bottom: 1px solid var(--border); }
.doc-eyebrow { display: inline-flex; font-size: 0.8rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-hover); background: rgba(7, 21, 25, 0.6); color: var(--text-2); }
.doc-title { font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -0.035em; margin: 18px 0 20px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.doc-meta-item { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--text-2); padding: 6px 12px; border-radius: 999px; background: var(--accent-glow); }
.doc-meta-item svg { color: var(--accent); }
.doc-intro { color: var(--text-2); font-size: 1.05rem; }
.doc-intro strong { color: var(--text-1); font-weight: 500; }

/* ── Sections ─────────────────────────────────────────────────────── */
.policy-section { position: relative; }
.section-anchor { display: block; position: relative; top: -96px; visibility: hidden; pointer-events: none; }
/* The contents list already numbers every section. */
.section-number { display: none; }
.section-title { font-size: 1.6rem; margin-bottom: 18px; }
.section-body { display: grid; gap: 14px; color: var(--text-2); }
.section-body > button { justify-self: start; }
.section-body strong { color: var(--text-1); font-weight: 500; }
.section-body a, .callout a, .contact-card a, .rule-block a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(147, 177, 166, 0.35); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.section-body a:hover, .callout a:hover, .contact-card a:hover, .rule-block a:hover { color: var(--text-1); text-decoration-color: currentColor; }
.section-divider { height: 1px; margin: 48px 0; background: linear-gradient(90deg, var(--border-hover), transparent); }

.subsection { margin-top: 22px; }
.subsection-title { font: 600 1.02rem var(--font-head); color: var(--text-1); margin-bottom: 10px; }
.policy-list { display: grid; gap: 10px; }
.policy-list li { position: relative; padding-left: 22px; }
.policy-list li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.callout { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 18px 20px; border-radius: var(--radius-md);
    background: rgba(13, 36, 36, 0.55); border: 1px solid var(--border); box-shadow: inset 3px 0 0 var(--accent); color: var(--text-2); font-size: 0.95rem; }
.callout svg { flex: none; margin-top: 3px; color: var(--accent); }
.callout strong { color: var(--text-1); font-weight: 500; }
.callout.green { background: rgba(86, 200, 150, 0.07); box-shadow: inset 3px 0 0 var(--green); }
.callout.green svg { color: var(--green); }
.callout.amber { background: rgba(232, 168, 74, 0.07); box-shadow: inset 3px 0 0 var(--amber); }
.callout.amber svg { color: var(--amber); }

.rule-block { margin-top: 18px; padding: 16px 20px; border-radius: var(--radius-md); background: var(--accent-glow); border: 1px solid var(--border); color: var(--text-2); }
.rule-block strong { color: var(--text-1); font-weight: 500; }

.table-wrapper { margin-top: 20px; overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th { text-align: left; font: 600 0.85rem var(--font-head); color: var(--text-1); background: rgba(13, 36, 36, 0.7); padding: 12px 16px; }
.data-table td { padding: 12px 16px; color: var(--text-2); border-top: 1px solid var(--border); vertical-align: top; }
.data-table tr:hover td { background: rgba(147, 177, 166, 0.03); }

.contact-card { display: grid; gap: 12px; padding: 24px; border-radius: 20px; border: 1px solid var(--border-hover);
    background: radial-gradient(400px 200px at 100% 0%, rgba(147, 177, 166, 0.12), transparent 70%), linear-gradient(160deg, #183D3D, var(--bg-raised) 70%); }
.contact-card-title { font: 600 1.1rem var(--font-head); }
.contact-card-desc { display: grid; gap: 6px; color: var(--text-2); font-size: 0.95rem; }
.contact-card-desc strong { color: var(--text-1); font-weight: 500; }

/* ── Mobile contents ──────────────────────────────────────────────── */
.mobile-toc-toggle { display: none; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; margin-bottom: 8px;
    border-radius: 999px; border: 1px solid var(--border-hover); background: rgba(7, 21, 25, 0.7); color: var(--text-1); font: 500 0.9rem var(--font-body); cursor: pointer; }
.mobile-toc-toggle svg { transition: transform .3s var(--ease); }
.mobile-toc-toggle.open svg { transform: rotate(180deg); }
.mobile-toc { display: none; margin-bottom: 24px; padding: 8px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-raised); }
.mobile-toc.visible { display: block; }
.mobile-toc ul a { display: block; padding: 9px 12px; border-radius: 10px; font-size: 0.9rem; color: var(--text-2); }
.mobile-toc ul a:hover { background: var(--accent-glow); color: var(--text-1); }

/* ── Footer ───────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); background: var(--bg-raised); }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 32px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-logo-small { display: flex; align-items: center; gap: 8px; font: 700 1rem var(--font-head); }
.footer-logo-small img { width: 22px; height: 22px; }
.footer-copy { color: var(--text-3); font-size: 0.85rem; margin-right: auto; }
.footer-links-row { display: flex; gap: 20px; font-size: 0.875rem; color: var(--text-2); }
.footer-links-row a:hover, .footer-links-row a[aria-current="page"] { color: var(--text-1); }

@media (max-width: 1023px) {
    .page-wrapper { grid-template-columns: 1fr; gap: 0; padding-top: 40px; }
    .sidebar { display: none; }
    .mobile-toc-toggle { display: flex; }
}
@media (max-width: 767px) {
    .legal-tabs { display: none; }
    .nav-back { margin-left: auto; }
    .navbar, .page-wrapper, .footer-inner { padding-left: 16px; padding-right: 16px; }
    .doc-header { margin-bottom: 36px; }
    .section-divider { margin: 36px 0; }
    .callout, .contact-card { padding: 16px; }
}