/* ─────────────────────────────────────────────────────────────────────────
   Siren — shared stylesheet for the legal pages (Privacy Policy, Terms).
   A trimmed port of the landing page's inline Midnight styles: the same
   tokens, night sky, glass surfaces and orb mark, plus prose rules for long
   documents. The landing page keeps its own inline CSS (it carries the phone
   showcase and section bands these pages never need).
   ───────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Surfaces */
  --night:#0C1322;--surface:#131C30;--surface-v:#1D2A47;--surface-v2:#283757;
  /* Text */
  --fg:#E6EBF4;--muted:#A9B4CA;--dim:#7A879F;
  /* Primary — moonlit periwinkle over midnight */
  --primary:#AAC7FF;--primary-deep:#2E4A80;--primary-container:#25406C;--on-primary-container:#DAE4F9;
  /* Secondary — blush */
  --secondary:#EFC1CB;--blush:#F6CDC8;--blush-deep:#D08C95;
  /* Tertiary / status */
  --sage:#A8CDB8;--warning:#D9A05B;
  --outline:#1D2A47;--outline-v:#283757;

  /* Glass */
  --glass-panel:rgba(19,28,48,.58);
  --glass-chrome:rgba(12,19,34,.74);
  --glass-subtle:rgba(255,255,255,.06);
  --glass-border:rgba(255,255,255,.10);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
  --glass-shadow:0 8px 24px rgba(4,8,18,.42);

  /* Radius — AlessiaRadius */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-xxl:24px;--r-pill:999px;

  /* Brand gradient — periwinkle into blush */
  --brand:linear-gradient(135deg,#B4C9F1,#F6CDC8);--on-gradient:#2B3D6E;

  /* The editorial voice */
  --serif:Georgia,"Noto Serif","Times New Roman",serif;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
  background-color:var(--night);
  background-image:
    radial-gradient(1.2px 1.2px at 12% 14%,rgba(239,244,255,.75),transparent),
    radial-gradient(1px 1px at 27% 38%,rgba(239,244,255,.55),transparent),
    radial-gradient(1.4px 1.4px at 41% 9%,rgba(239,244,255,.7),transparent),
    radial-gradient(1px 1px at 58% 28%,rgba(239,244,255,.5),transparent),
    radial-gradient(1.3px 1.3px at 73% 12%,rgba(239,244,255,.7),transparent),
    radial-gradient(1px 1px at 86% 44%,rgba(239,244,255,.55),transparent),
    radial-gradient(1.2px 1.2px at 8% 66%,rgba(239,244,255,.6),transparent),
    radial-gradient(1px 1px at 33% 82%,rgba(239,244,255,.5),transparent),
    radial-gradient(1.4px 1.4px at 63% 74%,rgba(239,244,255,.65),transparent),
    radial-gradient(1px 1px at 91% 88%,rgba(239,244,255,.5),transparent),
    linear-gradient(rgba(12,19,34,.32),rgba(12,19,34,.32)),
    radial-gradient(120% 90% at 50% 50%,transparent 42%,rgba(6,10,20,.6) 100%),
    radial-gradient(46% 40% at 16% 10%,rgba(46,74,128,.62),transparent 70%),
    radial-gradient(38% 34% at 88% 22%,rgba(208,140,149,.30),transparent 70%),
    radial-gradient(44% 40% at 8% 62%,rgba(170,199,255,.20),transparent 70%),
    radial-gradient(46% 42% at 86% 84%,rgba(37,64,108,.72),transparent 70%),
    radial-gradient(36% 32% at 45% 100%,rgba(92,139,114,.22),transparent 70%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
}
a{color:inherit;text-decoration:none}
svg{display:block}
::selection{background:rgba(170,199,255,.28)}
.container{max-width:1180px;margin:0 auto;padding:0 1.25rem}
.prose-wrap{max-width:48rem;margin:0 auto}

/* ── Glass primitive ─────────────────────────────────────────────────── */
.glass{
  position:relative;background:var(--glass-panel);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--glass-border);border-radius:var(--r-xxl);
  box-shadow:var(--glass-shadow);
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--glass-sheen);pointer-events:none;
}
.glass>*{position:relative}

/* ── The orb — Siren's mark ────────────────────────────────────────── */
.orb{
  --s:3rem;position:relative;width:var(--s);height:var(--s);border-radius:50%;flex-shrink:0;overflow:hidden;
  background:radial-gradient(circle at 36% 31%,#D6E3FA 0%,#6080C4 55%,#16244A 100%);
  box-shadow:0 0 calc(var(--s)*.36) calc(var(--s)*.03) rgba(170,199,255,.32),0 0 calc(var(--s)*.6) calc(var(--s)*.05) rgba(208,140,149,.2);
}
.orb::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(1.5px 1.5px at 31% 62%,rgba(239,244,255,.95),transparent),
    radial-gradient(1.2px 1.2px at 66% 24%,rgba(239,244,255,.8),transparent),
    radial-gradient(1px 1px at 44% 20%,rgba(239,244,255,.7),transparent),
    radial-gradient(1.4px 1.4px at 72% 70%,rgba(239,244,255,.85),transparent),
    radial-gradient(1px 1px at 22% 40%,rgba(239,244,255,.6),transparent),
    radial-gradient(circle at 80% 82%,rgba(246,205,200,.55),rgba(246,205,200,0) 72%);
}
.orb::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 25% 22%,rgba(255,255,255,.26),rgba(255,255,255,.05) 42%,rgba(255,255,255,0) 75%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.orb .wv{position:absolute;left:18%;top:33%;width:64%;height:34%;z-index:1;overflow:visible}

/* ── Nav (chrome tier) ───────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;padding:.875rem 0;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s;
}
nav.scrolled{
  background:var(--glass-chrome);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
  border-bottom-color:var(--glass-border);
}
.nav-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.logo{display:flex;align-items:center;gap:.625rem;font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
.logo .orb{--s:1.875rem}
.back{font-size:.8125rem;font-weight:600;color:var(--muted);transition:color .2s}
.back:hover{color:var(--fg)}

/* ── Page ────────────────────────────────────────────────────────────── */
main{padding:7.5rem 0 4rem}
.page-header{margin-bottom:2rem}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .8125rem;
  background:var(--glass-subtle);border:1px solid var(--glass-border);border-radius:var(--r-pill);
  font-size:.625rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.25rem;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
h1{font-size:clamp(2.125rem,5vw,3.25rem);font-weight:700;line-height:1.06;letter-spacing:-.035em;margin-bottom:.875rem}
h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--primary);letter-spacing:-.01em}
.updated{font-size:.8125rem;color:var(--muted)}
.intro{font-size:1.0625rem;color:var(--muted);max-width:40rem;margin-top:1rem;line-height:1.65}
.intro strong{color:var(--fg);font-weight:600}

/* ── Prose ───────────────────────────────────────────────────────────── */
.prose{padding:2rem 2.25rem;font-size:.9375rem;color:var(--muted);line-height:1.7}
.prose p{margin-bottom:1rem}
.prose h2{
  font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--fg);
  margin-top:2.25rem;margin-bottom:.75rem;padding-top:1.75rem;border-top:1px solid var(--glass-border);
}
.prose h2:first-of-type{border-top:none;padding-top:0;margin-top:.25rem}
.prose h3{font-size:.9375rem;font-weight:700;color:var(--fg);letter-spacing:-.01em;margin-top:1.5rem;margin-bottom:.5rem}
.prose ul{list-style:none;padding:0;margin-bottom:1rem}
.prose ul li{padding-left:1.25rem;position:relative;margin-bottom:.4375rem}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.7em;width:.4375rem;height:.4375rem;border-radius:50%;
  background:radial-gradient(circle at 36% 31%,#D6E3FA 0%,#AAC7FF 55%,#6080C4 100%);
  box-shadow:0 0 6px rgba(170,199,255,.45);
}
.prose strong{color:var(--fg);font-weight:600}
.prose a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(170,199,255,.45);transition:color .2s,text-decoration-color .2s}
.prose a:hover{color:#DAE4F9;text-decoration-color:#DAE4F9}
.prose em{font-family:var(--serif);font-style:italic;color:var(--fg)}

/* A plain-English summary or a safety notice: the affirmation tile's
   midnight-and-blush treatment, with the four-point spark as its mark. */
.note{
  position:relative;overflow:hidden;margin:.25rem 0 1.5rem;padding:1.125rem 1.25rem 1.125rem 1.25rem;
  background:linear-gradient(135deg,#1D2A47,#0F1A33);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);
}
.note::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 92% 12%,rgba(246,205,200,.30),transparent 55%);pointer-events:none}
.note>*{position:relative}
.note .nt{display:flex;align-items:center;gap:.5rem;font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg);margin-bottom:.625rem}
.note .nt .sp{width:1.125rem;height:1.125rem;flex-shrink:0}
.note ul{margin-bottom:0}
.note ul li{margin-bottom:.375rem}
.note ul li:last-child{margin-bottom:0}
.note p{margin-bottom:0}
.note p+p{margin-top:.625rem}
.note.warn{background:linear-gradient(135deg,#2A2530,#171A2E);border-color:rgba(217,160,91,.28)}
.note.warn::before{background:radial-gradient(circle at 92% 12%,rgba(217,160,91,.26),transparent 55%)}
.note.warn .nt{color:#F0C98A}

/* Key/value rows inside lists (what · why) read as a soft table. */
.prose .kv{margin-bottom:1rem}
.prose .kv li{padding:.625rem 0 .625rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.06);margin:0}
.prose .kv li:last-child{border-bottom:none}
.prose .kv li::before{top:1.35em}
.prose .kv b{display:block;color:var(--fg);font-weight:600;margin-bottom:.125rem}

/* ── Footer ──────────────────────────────────────────────────────────── */
footer{padding:2.25rem 0;border-top:1px solid var(--outline-v);color:var(--muted);font-size:.8125rem}
.foot{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}
.foot .made{display:flex;align-items:center;gap:.5rem}
.foot .orb{--s:1.125rem;box-shadow:none}
.flinks{display:flex;gap:1.5rem}
.flinks a{transition:color .2s}
.flinks a:hover{color:var(--fg)}
.flinks a[aria-current="page"]{color:var(--fg);font-weight:600}

@media (min-width:768px){.foot{flex-direction:row;justify-content:space-between;text-align:left}}
@media (max-width:600px){main{padding:6.25rem 0 3rem}.prose{padding:1.375rem 1.25rem}.note{padding:1rem 1.0625rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}nav,.back,.prose a,.flinks a{transition:none}}