/* Shared styles for the legal pages (/privacy, /terms).
   Deliberately mirrors index.html's design language -- same tokens, same
   eyebrow/gradient-dash/blob vocabulary -- so the legal pages read as part of
   the site rather than as a bare document dump. index.html keeps its CSS
   inline; with two pages needing this and no build step, a shared file is the
   only way to avoid maintaining the palette in three places. */

:root{
  --bg:#0f1020;
  --bg-soft:#16182e;
  --card:#1b1e38;
  --ink:#eef0ff;
  --muted:#a6abce;
  --line:#2a2e50;
  --brand:#7c6cff;
  --brand-2:#9d8bff;
  --save:#34d399;
  --save-deep:#0f9d6b;
  --grad-logo:linear-gradient(135deg,var(--brand),var(--save));
  --grad-btn:linear-gradient(135deg,var(--brand),var(--brand-2));
  --font-d:'Space Grotesk','Segoe UI',sans-serif;
  --font-b:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --radius:18px;
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
h1,h2,h3,.n{font-family:var(--font-d)}

.btn{display:inline-block;font-weight:700;font-size:1rem;padding:15px 28px;border-radius:999px;cursor:pointer;border:0;
  background:var(--grad-btn);color:#fff;box-shadow:0 10px 26px -10px rgba(124,108,255,.6);
  transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(124,108,255,.7)}
.btn.ghost{background:transparent;border:1.5px solid var(--line);box-shadow:none;color:var(--ink)}
.btn.ghost:hover{border-color:var(--brand)}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:20;background:rgba(15,16,32,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:700;font-size:1.2rem;letter-spacing:.2px}
.logo svg{display:block}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a:not(.btn){color:var(--muted);font-size:.95rem;font-weight:500}
.nav-links a:not(.btn):hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links .btn{padding:11px 22px;font-size:.92rem}
@media(max-width:640px){.nav-links a.hide-sm{display:none}}

/* ---------- hero ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.blob.a{width:420px;height:420px;background:rgba(124,108,255,.25);top:-170px;right:4%}
.blob.b{width:360px;height:360px;background:rgba(52,211,153,.14);bottom:-200px;left:-90px}

.l-hero{position:relative;overflow:hidden;padding:72px 0 56px}
.l-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(238,240,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(238,240,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(74% 66% at 40% 30%,#000 26%,transparent 100%);
  mask-image:radial-gradient(74% 66% at 40% 30%,#000 26%,transparent 100%)}
.l-hero .wrap{position:relative}
.pill{display:inline-block;font-size:.82rem;font-weight:600;color:var(--brand-2);background:rgba(124,108,255,.12);
  border:1px solid var(--line);padding:6px 14px;border-radius:999px;margin-bottom:24px}
.l-hero h1{font-size:clamp(2.3rem,5vw,3.8rem);line-height:1.05;letter-spacing:-.03em;font-weight:700;margin-bottom:20px}
.grad-text{background:linear-gradient(120deg,var(--brand-2),var(--save));-webkit-background-clip:text;background-clip:text;color:transparent}
.l-hero .sub{font-size:clamp(1rem,1.5vw,1.14rem);color:var(--muted);max-width:60ch}
.l-hero .sub + .sub{margin-top:14px}
.l-hero .sub a{color:var(--brand-2)}
.eff{margin-top:26px;display:inline-flex;align-items:center;gap:10px;font-size:.86rem;color:var(--muted);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:8px 16px}
.eff .dot{width:8px;height:8px;border-radius:50%;background:var(--save);box-shadow:0 0 0 4px rgba(52,211,153,.15)}

/* ---------- table of contents ---------- */
.toc-band{padding:8px 0 20px}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--brand-2);font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;font-size:.76rem;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:2.5px;border-radius:2px;background:var(--grad-logo)}
.toc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.toc a{display:flex;gap:12px;align-items:baseline;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:12px;padding:13px 16px;font-size:.93rem;color:var(--muted);line-height:1.4;
  transition:transform .18s ease,border-color .18s ease,color .18s ease}
.toc a:hover{color:var(--ink);border-color:var(--brand);transform:translateY(-2px)}
.toc a .n{font-family:var(--font-d);font-weight:700;font-size:.82rem;color:var(--brand-2);flex:none;min-width:20px}

/* ---------- document body ---------- */
.doc{padding:34px 0 40px}
.doc .wrap{max-width:860px}

.sec{position:relative;border-top:1px solid var(--line);padding-top:30px;margin-top:64px;scroll-margin-top:90px}
.sec::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:3px;border-radius:3px;background:var(--grad-logo)}
.sec .kicker{display:flex;align-items:center;gap:10px;color:var(--brand-2);font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;font-size:.72rem;margin-bottom:10px}
.sec h2{font-size:clamp(1.45rem,2.7vw,2rem);font-weight:700;letter-spacing:-.02em;line-height:1.16;margin-bottom:18px}

.doc h3{font-size:1.06rem;margin:30px 0 10px;color:var(--ink)}
.doc h3::after{content:"";display:block;width:30px;height:2px;border-radius:2px;background:var(--grad-logo);margin-top:8px;opacity:.75}
.doc p{margin:0 0 14px;color:#d3d8f3;max-width:72ch}
.doc ul{margin:0 0 16px;padding-left:0;list-style:none;max-width:72ch}
.doc li{position:relative;padding-left:22px;margin:0 0 8px;color:#d3d8f3}
.doc li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;
  background:var(--grad-logo);opacity:.85}
.doc strong{color:var(--ink);font-weight:600}
.doc a{color:var(--brand-2);text-decoration:underline;text-underline-offset:3px}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--card);
  border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--brand-2)}

/* Plain-language callout -- mirrors index.html's .disclosure panel. */
.callout{position:relative;background:linear-gradient(180deg,var(--bg-soft),var(--bg));border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px 24px 32px;overflow:hidden;margin:0 0 26px}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad-logo)}
.callout p{margin:0;color:var(--muted);font-size:.97rem;max-width:none}
.callout strong{color:var(--ink)}

/* Emphasis card for the "we don't do this yet" forward-looking clauses. */
.futures{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:0 0 16px}
.futures p{margin:0;color:var(--muted);font-size:.92rem}

/* Uppercase disclaimer blocks in the ToS: legible, not shouty. */
.caps{font-size:.9rem;letter-spacing:.15px;color:#bfc6ea;line-height:1.62}
.caps-panel{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:0 0 16px}
.caps-panel p{max-width:none}
.caps-panel p + p{margin-top:14px}
.caps-panel ul{margin-bottom:0}

/* Unfilled placeholders render loud on purpose -- these must never ship blank. */
.todo{background:#ffd44d;color:#22160a;font-weight:700;padding:1px 9px;border-radius:6px;
  text-decoration:none;font-size:.92em;white-space:nowrap}

/* ---------- closing contact panel ---------- */
.contact{padding:34px 0 96px}
.contact .panel{position:relative;overflow:hidden;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:28px;text-align:center;padding:clamp(44px,6vw,68px) 28px}
.contact .blob.a{background:rgba(124,108,255,.2);top:-170px;left:12%}
.contact .blob.b{background:rgba(52,211,153,.14);bottom:-190px;right:8%}
.contact .panel > *{position:relative}
.contact h2{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;margin-bottom:12px}
.contact p{color:var(--muted);max-width:52ch;margin:0 auto 26px}
.contact .meta{margin-top:22px;font-size:.86rem;color:var(--muted)}
.contact .meta a{color:var(--brand-2)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:38px 0;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
footer a{color:var(--brand-2)}

/* NOTE: index.html fades sections in on scroll (.reveal). These pages
   deliberately do NOT. Legal text that fails to un-hide is legal text nobody
   can read -- including a store reviewer -- so it is always rendered. The
   visual match with the marketing page comes from the shared vocabulary above
   (hero, blobs, eyebrows, cards, gradient rules), not from animation. */

/* ---------- responsive ---------- */
@media(max-width:900px){
  .toc{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .toc{grid-template-columns:1fr}
  .l-hero{padding:52px 0 44px}
  .sec{margin-top:48px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{transition:none}
  html{scroll-behavior:auto}
}