/* Shared stylesheet for /terms.html and /privacy.html. CHANGED 2026-11-03:
   long-form documents on the same sky as the homepage and the signup, so
   following a link down there doesn't leave the piece. No scripts on these
   pages, so the sky is painted once: the same blues and a tile of stars. */
:root{
  --line:rgba(200,212,255,.22); --ink:#F2F4F8; --ink-muted:#C2CBE6; --frost:#B4C3FF; --signal:#FFD43B;
  --font:'Archivo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scrollbar-color:#4C5FA8 #060D26; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font); font-weight:420; font-size:1.0625rem; -webkit-font-smoothing:antialiased;
  background:#071444; color:var(--ink); line-height:1.6; caret-color:var(--signal);
}
body::before{ content:""; position:fixed; inset:0; z-index:-1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cg fill='%23E8EEFF'%3E%3Ccircle cx='36' cy='62' r='.9' opacity='.6'/%3E%3Ccircle cx='128' cy='24' r='.7' opacity='.45'/%3E%3Ccircle cx='214' cy='96' r='1.2' opacity='.7'/%3E%3Ccircle cx='302' cy='44' r='.8' opacity='.5'/%3E%3Ccircle cx='412' cy='118' r='1' opacity='.65'/%3E%3Ccircle cx='76' cy='188' r='1.1' opacity='.55'/%3E%3Ccircle cx='172' cy='232' r='.7' opacity='.4'/%3E%3Ccircle cx='268' cy='176' r='.9' opacity='.6'/%3E%3Ccircle cx='356' cy='248' r='1.3' opacity='.7'/%3E%3Ccircle cx='438' cy='206' r='.7' opacity='.45'/%3E%3Ccircle cx='24' cy='312' r='.8' opacity='.5'/%3E%3Ccircle cx='118' cy='356' r='1' opacity='.6'/%3E%3Ccircle cx='226' cy='318' r='.7' opacity='.45'/%3E%3Ccircle cx='324' cy='386' r='1.1' opacity='.65'/%3E%3Ccircle cx='404' cy='332' r='.8' opacity='.5'/%3E%3Ccircle cx='60' cy='432' r='.9' opacity='.55'/%3E%3Ccircle cx='190' cy='444' r='.7' opacity='.4'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(40% 32% at 18% 14%, rgba(48,92,235,.5), transparent 72%),
    radial-gradient(46% 36% at 84% 26%, rgba(20,128,200,.24), transparent 72%),
    radial-gradient(54% 40% at 64% 90%, rgba(62,58,200,.38), transparent 72%),
    radial-gradient(120% 95% at 50% 40%, #0B1D5C 0%, #071444 36%, #040B28 68%, #01030D 100%);
}
::selection{ background:var(--frost); color:#0B1430; }
a{ color:var(--frost); text-decoration-thickness:1.5px; text-underline-offset:.2em; }
a:focus-visible{ outline:2px solid var(--frost); outline-offset:3px; }
.top-nav{ display:flex; align-items:center; justify-content:space-between; padding:22px 20px; max-width:760px; margin:0 auto; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-stretch:122%; font-weight:820; font-size:1.5rem; letter-spacing:-.04em; color:var(--ink); text-decoration:none; text-transform:lowercase; }
.brand::before{ content:""; width:26px; height:32px; background:url(/icons/mark.png) center / contain no-repeat; }
.brand .dot{ display:none; }
.wrap{ max-width:760px; margin:0 auto; padding:clamp(8px,4vh,32px) 20px 96px; animation:page-rise 700ms var(--ease-out) both; }
@keyframes page-rise{ from{ opacity:0; transform:translateY(14px); } }
h1{ font-stretch:112%; font-weight:760; font-size:clamp(2.1rem,5vw,3.1rem); margin:0 0 10px; line-height:1.03; letter-spacing:-.03em; text-wrap:balance; }
h2{ font-stretch:108%; font-weight:730; font-size:1.35rem; margin:40px 0 6px; line-height:1.15; letter-spacing:-.018em; text-wrap:balance; }
p, li{ margin:0 0 12px; max-width:68ch; color:var(--ink-muted); }
strong{ color:var(--ink); font-weight:680; }
ul, ol{ padding-left:22px; }
.updated{ color:var(--frost); font-size:.92rem; margin-bottom:28px; }
.muted{ color:var(--ink-muted); }
.card{ background:linear-gradient(180deg, rgba(44,68,159,.7), rgba(34,54,132,.7)); box-shadow:inset 0 0 0 1px var(--line); border-radius:16px; padding:20px 22px; margin:20px 0; }
.card p:last-child, .card li:last-child{ margin-bottom:0; }
.back-link{ display:inline-block; margin-top:28px; padding-top:16px; border-top:1px solid var(--line); font-size:.95rem; font-weight:600; }
@media (max-width:640px){
  .top-nav{ padding:18px 16px; }
  .wrap{ padding-left:16px; padding-right:16px; }
}

/* Between pages: the browser's own cross-fade, as on the homepage. */
@view-transition{ navigation:auto; }

@media (prefers-reduced-motion:reduce){
  .wrap{ animation:none; }
}