/* Privacy and Terms pages. Same tokens, nav and footer as index.html (whose
   CSS is inline there), cut down to what a reading page needs: one text
   column, the section pill switching between the two pages. */
:root{
  --floor:#080A0F;
  --surface:#0E121A;
  --raise:#161B26;
  --rule:#232A39;
  --text:#C6CEDC;
  --dim:#909EB3;
  --silver:#E9F0FC;
  --violet:#A57DFF;
  --sans:"Archivo",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--floor);color:var(--text);font:400 17px/1.65 var(--sans);font-stretch:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}
.wrap{max-width:calc(1180px + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;font-weight:650;font-size:14px;text-decoration:none;background:var(--silver);color:#0A0D14;transition:transform .15s ease,background .15s ease}
.btn:hover{background:#fff;transform:translateY(-1px)}
.btn svg{width:18px;height:18px}

/* nav: index.html's bar, with the section pill switching Privacy / Terms */
.nav{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--rule);background:rgba(8,10,15,.88);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;height:68px;max-width:none;padding:0 clamp(16px,2vw,24px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;justify-self:start}
.brand img{width:34px;height:34px;border-radius:9px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 18px -6px rgba(165,125,255,.55)}
.brand span{font-weight:700;color:var(--silver);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.brand b{color:var(--violet);font-weight:700}
.seg{padding:3px;border:1px solid var(--rule);border-radius:11px;background:var(--surface)}
.seg ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.seg a{display:block;text-decoration:none;color:var(--dim);font-size:14px;font-weight:600;padding:7px 16px;border-radius:8px;transition:color .2s ease}
.seg a:hover{color:var(--silver)}
.seg a[aria-current]{color:var(--silver);background:var(--raise);box-shadow:inset 0 -2px 0 var(--violet)}
.nav-end{display:flex;align-items:center;gap:12px;justify-self:end}
.nav-ghost{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--rule);border-radius:10px;color:var(--dim);text-decoration:none;font-size:14px;font-weight:600;transition:color .2s ease,border-color .2s ease}
.nav-ghost:hover{color:var(--silver);border-color:#34405a}
.nav-ghost svg{width:18px;height:18px}
@media (max-width:900px){.brand span{display:none}}
@media (max-width:560px){.nav .wrap{gap:10px}.nav-ghost span,.btn span{display:none}.nav-ghost,.btn{padding:0 11px;height:40px}}

/* the reading column */
.doc{max-width:760px;margin:0 auto;padding:clamp(48px,8vw,88px) var(--gutter) 0}
.doc h1{margin:0;font-family:var(--sans);font-stretch:125%;font-weight:800;color:var(--silver);letter-spacing:-.02em;line-height:1.02;font-size:clamp(36px,5.4vw,56px)}
.updated{margin:20px 0 0;font:500 13px/1.4 var(--mono);letter-spacing:.02em;color:var(--dim)}
.intro{margin:26px 0 0;font-size:clamp(17px,1.6vw,19px)}
.gist{margin:32px 0 0;padding:22px 24px;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.doc .gist h2{margin:0 0 10px;font:600 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.gist ul{margin:0;padding:0;list-style:none}
.gist li{position:relative;padding-left:22px;margin:6px 0;color:var(--silver)}
.gist li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--violet);box-shadow:0 0 8px rgba(165,125,255,.6)}
.doc section{margin-top:44px;scroll-margin-top:88px}
.doc h2{margin:0 0 12px;font-size:22px;line-height:1.25;font-weight:700;color:var(--silver);letter-spacing:-.01em}
.doc h3{margin:22px 0 6px;font-size:17px;font-weight:700;color:var(--silver)}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 12px;padding-left:22px}
.doc li{margin:6px 0}
.doc li::marker{color:var(--dim)}
.doc strong{color:var(--silver);font-weight:650}
.doc kbd{font-family:var(--mono);font-size:.88em;color:var(--silver)}
.doc code{font-family:var(--mono);font-size:.86em;color:var(--silver);overflow-wrap:anywhere}
.doc a{text-decoration:none;border-bottom:1px solid var(--rule);transition:border-color .15s}
.doc a:hover{border-color:var(--silver)}
.doc a[href^="http"]::after{content:" ↗";font-size:.8em;color:var(--dim)}

/* where the app goes online: one row per service */
.svc{margin:14px 0 12px;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--surface)}
.svc div{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:4px 20px;padding:14px 18px}
.svc div + div{border-top:1px solid var(--rule)}
.svc dt{margin:0;font-weight:650;color:var(--silver);font-size:15px}
.svc dt span{display:block;font:500 12px/1.5 var(--mono);color:var(--dim);font-weight:500;overflow-wrap:anywhere}
.svc dd{margin:0;font-size:15px;line-height:1.55}
@media (max-width:640px){.svc div{grid-template-columns:1fr}}

/* footer: index.html's */
footer{margin-top:clamp(80px,10vw,128px);border-top:1px solid var(--rule);padding:36px 0 48px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
footer p{margin:0;font-size:14px;color:var(--dim)}
footer nav{display:flex;flex-wrap:wrap;gap:12px 24px}
footer a{text-decoration:none;color:var(--dim);font-size:15px}
footer a:hover,footer a[aria-current]{color:var(--silver)}

@media (prefers-reduced-motion:reduce){.btn,.nav-ghost,.seg a{transition:none}}