/* Shared chrome + prose for the Vektes legal pages (/terms, /privacy, /risks).
   Palette, type, and dark-mode tokens mirror index.html so the legal pages read as the same site. */
:root{
  --paper:#edf1ef; --surface:#f7faf8; --raise:#ffffff;
  --ink:#0e1c1a; --ink-2:#3c4b49; --ink-3:#6d7d7a;
  --line:rgba(14,28,26,.13); --line-2:rgba(14,28,26,.07);
  --accent:#0c8f6b; --accent-ink:#0a6f53; --accent-wash:rgba(12,143,107,.09);
  --clay:#b4633a; --clay-ink:#9a4f2c;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1120px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0b1413; --surface:#10201d; --raise:#132520;
    --ink:#e9eeeb; --ink-2:#9db0ac; --ink-3:#6f827e;
    --line:rgba(233,238,235,.14); --line-2:rgba(233,238,235,.07);
    --accent:#24b98c; --accent-ink:#4fd3a8; --accent-wash:rgba(36,185,140,.12);
    --clay:#ce8256; --clay-ink:#e0996e;
  }
}
:root[data-theme="light"]{
  --paper:#edf1ef; --surface:#f7faf8; --raise:#ffffff;
  --ink:#0e1c1a; --ink-2:#3c4b49; --ink-3:#6d7d7a;
  --line:rgba(14,28,26,.13); --line-2:rgba(14,28,26,.07);
  --accent:#0c8f6b; --accent-ink:#0a6f53; --accent-wash:rgba(12,143,107,.09);
  --clay:#b4633a; --clay-ink:#9a4f2c;
}
:root[data-theme="dark"]{
  --paper:#0b1413; --surface:#10201d; --raise:#132520;
  --ink:#e9eeeb; --ink-2:#9db0ac; --ink-3:#6f827e;
  --line:rgba(233,238,235,.14); --line-2:rgba(233,238,235,.07);
  --accent:#24b98c; --accent-ink:#4fd3a8; --accent-wash:rgba(36,185,140,.12);
  --clay:#ce8256; --clay-ink:#e0996e;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; letter-spacing:.005em;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
a{color:inherit}
h1,h2,h3{font-family:var(--font-mono); font-weight:700; letter-spacing:-.02em; text-wrap:balance; margin:0}
.eyebrow{font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-ink)}
.mono{font-family:var(--font-mono)}

/* ---- header (matches index.html) ---- */
header{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-2)}
.nav{display:flex; align-items:center; gap:20px; height:66px}
.brand{font-family:var(--font-mono); font-weight:700; letter-spacing:.24em; font-size:15px; text-decoration:none; display:flex; align-items:center; gap:10px}
.brand .dot{width:11px; height:11px; border-radius:3px; background:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.nav .spacer{flex:1}
.nav a.link{display:none; text-decoration:none; color:var(--ink-2); font-size:14px; font-family:var(--font-mono); letter-spacing:.02em}
.nav a.link:hover{color:var(--ink)}
.pill{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); border:1px solid var(--line); padding:5px 10px; border-radius:100px; display:inline-flex; gap:7px; align-items:center; white-space:nowrap}
.pill .live{width:7px; height:7px; border-radius:50%; background:var(--accent)}
@media(min-width:760px){ .nav a.link{display:inline} }

/* ---- title block ---- */
.legal-hero{padding:56px 0 8px}
.legal-hero h1{font-size:clamp(30px,5vw,46px); line-height:1.04; margin:14px 0 0}
.legal-hero .meta{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3); letter-spacing:.03em; margin-top:16px}
.legal-hero .meta b{color:var(--ink-2); font-weight:600}

/* ---- legal sub-nav (Terms / Privacy / Risks) ---- */
.subnav{display:flex; flex-wrap:wrap; gap:8px; padding:26px 0 8px; border-bottom:1px solid var(--line-2)}
.subnav a{font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; text-decoration:none; color:var(--ink-2); padding:8px 14px; border:1px solid var(--line); border-radius:100px; background:var(--surface); transition:border-color .12s, color .12s}
.subnav a:hover{border-color:var(--ink-3); color:var(--ink)}
.subnav a[aria-current="page"]{background:var(--accent); color:#fff; border-color:transparent}
:root[data-theme="dark"] .subnav a[aria-current="page"]{color:#04120d}
@media(prefers-color-scheme:dark){.subnav a[aria-current="page"]{color:#04120d}}

/* ---- prose ---- */
.prose{max-width:72ch; padding:34px 0 8px; color:var(--ink-2)}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:clamp(19px,2.6vw,23px); color:var(--ink); margin:44px 0 0; padding-top:26px; border-top:1px solid var(--line-2); scroll-margin-top:84px}
.prose h2:first-of-type{border-top:none; padding-top:0; margin-top:8px}
.prose h3{font-size:16px; color:var(--ink); margin:26px 0 0; letter-spacing:-.01em}
.prose p{margin:14px 0 0}
.prose ul{margin:14px 0 0; padding-left:20px}
.prose li{margin:7px 0}
.prose li::marker{color:var(--accent-ink)}
.prose strong{color:var(--ink); font-weight:650}
.prose a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--line)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose code{font-family:var(--font-mono); font-size:.86em; background:var(--accent-wash); color:var(--accent-ink); padding:1px 6px; border-radius:5px}
.prose .lead{font-size:19px; color:var(--ink); margin-top:0}

/* callout for the "Important Notice" / AS-IS blocks */
.prose .callout{margin:22px 0 0; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px}
.prose .callout p{margin:8px 0 0} .prose .callout p:first-child{margin-top:0}
.prose .caps{font-size:14px; line-height:1.65; color:var(--ink-2)}

/* cookie table */
.tablecard{margin-top:18px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface)}
.tablecard .scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-family:var(--font-mono)}
th,td{text-align:left; padding:13px 18px; font-size:13.5px; white-space:nowrap}
thead th{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line); font-weight:600}
tbody tr+tr td{border-top:1px solid var(--line-2)}
tbody td:first-child{color:var(--ink)}

/* ---- footer (matches index.html) ---- */
footer{border-top:1px solid var(--line); padding:52px 0 40px; margin-top:52px}
.foot{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start}
.foot .brand{font-size:14px}
.foot .links{display:flex; gap:22px; flex-wrap:wrap}
.foot a{color:var(--ink-2); text-decoration:none; font-family:var(--font-mono); font-size:14px}
.foot a:hover{color:var(--ink)}
.disc{margin-top:30px; padding-top:22px; border-top:1px solid var(--line-2); color:var(--ink-3); font-size:12.5px; line-height:1.6; max-width:80ch}
.disc b{color:var(--ink-2)}