/* ============================================================
   Stotely web shell — shared tokens, nav, footer, cookie notice
   Themes: dark constellation (default) + light constellation.
   Accents: user-selectable pairs applied via data-accent.
   ============================================================ */

/* ---------- theme tokens ---------- */
:root, :root[data-theme="dark"]{
  --bg1:#151A3C; --bg2:#0A0C1E; --bg3:#080A18;
  --sh-bg:linear-gradient(165deg,var(--bg1) 0%,var(--bg2) 62%,var(--bg3) 100%);
  --sh-text:#F3F2FA; --sh-text-soft:#C6C9E0; --sh-muted:#9BA2CB; --sh-label:#E4E7F7;
  --sh-surface:rgba(255,255,255,.055); --sh-surface-2:rgba(255,255,255,.085);
  --sh-border:rgba(255,255,255,.10); --sh-border-strong:rgba(255,255,255,.18);
  --sh-glass:rgba(14,17,38,.46);
  --sh-shadow:0 18px 44px rgba(3,4,14,.55);
  --sh-star:rgba(148,141,209,.55);
  --sh-ink:var(--a2);   /* accent used as text (readable on the dark ground) */
}
/* Light: the Dawn ground — warm paper + warm neutrals, WCAG-safe text */
:root[data-theme="light"]{
  --bg1:#F7F4EE; --bg2:#F1ECE3; --bg3:#EAE3D7;
  --sh-bg:linear-gradient(165deg,var(--bg1) 0%,var(--bg2) 58%,var(--bg3) 100%);
  --sh-text:#2A231B; --sh-text-soft:#4A4238; --sh-muted:#655B4E; --sh-label:#3A322A;
  --sh-surface:rgba(255,253,249,.72); --sh-surface-2:rgba(255,253,249,.9);
  --sh-border:rgba(60,50,38,.14); --sh-border-strong:rgba(60,50,38,.24);
  --sh-glass:rgba(247,244,238,.66);
  --sh-shadow:0 18px 40px rgba(60,48,30,.14);
  --sh-star:rgba(90,72,45,.3);
  --sh-ink:#5B51A8;     /* darkened aurora for links/labels: ~6:1 on paper (AA) */
}

/* ---------- accent pairs (personalized in Settings) ---------- */
:root, :root[data-accent="aurora"]{ --a1:#948DD1; --a2:#7FC2D1; --a1-rgb:148,141,209; --a2-rgb:127,194,209; }
:root[data-accent="dawn"]  { --a1:#D9A48C; --a2:#C48FA9; --a1-rgb:217,164,140; --a2-rgb:196,143,169; }
:root[data-accent="ocean"] { --a1:#7FA8D1; --a2:#7FD1C0; --a1-rgb:127,168,209; --a2-rgb:127,209,192; }
:root[data-accent="orchid"]{ --a1:#B98CD1; --a2:#D18CB4; --a1-rgb:185,140,209; --a2-rgb:209,140,180; }
:root{
  --sh-grad:linear-gradient(135deg, rgba(var(--a1-rgb),.85) 0%, rgba(var(--a2-rgb),.85) 100%);
  --sh-accent-line:rgba(var(--a1-rgb),.34);
  --sh-serif:"Raleway","Inter",system-ui,sans-serif;
  --sh-sans:"Inter",system-ui,-apple-system,sans-serif;
}

/* ---------- shared nav ---------- */
.snav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:22px;
  padding:14px 34px;
  background:var(--sh-glass);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  border-bottom:1px solid var(--sh-border);
  font-family:var(--sh-sans);
}
.snav__brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--sh-text);}
/* the official mark: ivory cut on dark, ink cut on light */
.brandmark{display:block; position:relative;}
.brandmark img{width:100%; height:100%; display:block;}
.brandmark .bm-ink{display:none;}
:root[data-theme="light"] .brandmark .bm-ivory{display:none;}
:root[data-theme="light"] .brandmark .bm-ink{display:block;}
.snav__brand .brandmark{width:36px; height:36px;}
.snav__brand span{font-family:var(--sh-serif); font-weight:300; font-size:1.4rem; letter-spacing:.06em;}
.snav__links{display:flex; gap:6px; margin-left:8px;}
.snav__links a{
  padding:8px 15px; border-radius:999px; text-decoration:none;
  font-size:.88rem; font-weight:500; color:var(--sh-muted);
  transition:color .2s, background .2s;
}
.snav__links a:hover{color:var(--sh-text);}
.snav__links a.on{
  color:var(--sh-text); background:var(--sh-surface-2);
  border:1px solid var(--sh-border);
}
.snav__search{flex:1; max-width:520px; margin:0 auto; position:relative;}
.snav__search input{
  width:100%; padding:11px 18px 11px 44px; border-radius:999px;
  border:1px solid var(--sh-border); background:var(--sh-surface);
  color:var(--sh-text); font-family:var(--sh-sans); font-size:.92rem;
  outline:none; transition:border .25s, box-shadow .25s;
  backdrop-filter:blur(10px);
}
.snav__search input::placeholder{color:#7C8098;}
:root[data-theme="light"] .snav__search input::placeholder{color:#9A938A;}
.snav__search input{display:block;}
.snav__search input:focus{border-color:var(--sh-accent-line); box-shadow:0 0 0 4px rgba(var(--a1-rgb),.10), 0 0 26px rgba(var(--a1-rgb),.16);}
.snav__search > svg:not(.ring){position:absolute; left:16px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--sh-muted); fill:none; stroke-width:2; stroke-linecap:round;}
.snav__search input{padding-right:48px;}
.snav__go{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:2px; cursor:pointer;
  display:grid; place-items:center;
}
/* the restless needle: a live pearl whose droplet orbits like a compass needle.
   It stays hidden until the search bar is active (focused or holding text). */
.snav__needle{
  position:relative; display:block; width:28px; height:28px;
  filter:drop-shadow(0 0 6px rgba(var(--a2-rgb),.3));
  opacity:0; transform:scale(.55);
  transition:filter .25s, opacity .3s, transform .3s;
}
.snav__go.live .snav__needle{opacity:1; transform:none;}
.snav__go:hover .snav__needle{filter:drop-shadow(0 0 12px rgba(var(--a2-rgb),.55));}
.snav__right{display:flex; align-items:center; gap:14px; margin-left:auto;}
.snav__gear{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  color:var(--sh-muted); text-decoration:none;
  border:1px solid transparent; transition:color .2s, border .2s;
}
.snav__gear:hover, .snav__gear.on{color:var(--sh-text); border-color:var(--sh-border-strong);}
.snav__gear svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.snav__ico svg{width:21px; height:21px; fill:currentColor; stroke:none;}
.snav__avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--sh-grad);
  display:grid; place-items:center; font-weight:600; font-size:.9rem;
  color:var(--bg2); border:1px solid var(--sh-border-strong);
  overflow:hidden; text-decoration:none; cursor:pointer;
  transition:transform .2s, box-shadow .2s;
}
.snav__avatar:hover{transform:scale(1.05); box-shadow:0 0 0 3px var(--sh-accent-line);}
.snav__avatar img{width:100%; height:100%; object-fit:cover; display:block;}
:root[data-theme="light"] .snav__avatar{color:#FFFFFF;}
/* nav search: focus feedback is the soft glow; suppress the boxy focus-visible outline */
#searchInput:focus-visible{outline:none;}
.snav__spacer{flex:1;}
@media (max-width:860px){ .snav__links a{padding:8px 10px; font-size:.8rem;} .snav__search{display:none;} }

/* ---------- collapsed nav on scroll: compass FAB + liquid-glass side nav
   (pattern from the Spark topic page mockup) ---------- */
.snav{transition:opacity .35s ease, transform .35s ease;}
.snav.split{opacity:0; transform:translateY(-8px); pointer-events:none;}

.snav-fab{
  position:fixed; left:24px; bottom:24px; z-index:60;
  width:58px; height:58px; border-radius:50%; cursor:grab;
  display:none; align-items:center; justify-content:center; overflow:hidden;
  background:var(--sh-glass);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--sh-border-strong);
  box-shadow:var(--sh-shadow), inset 0 1px 1px rgba(255,255,255,.25);
  transition:transform .25s ease, opacity .25s ease;
  touch-action:none;
}
.snav-fab::before{
  content:""; position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:58%; height:36%; border-radius:50%; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0));
}
.snav-fab .brandmark{position:relative; z-index:1; width:36px; height:36px;}
.snav-fab:active{cursor:grabbing;}
body.nav-collapsed .snav-fab{display:flex;}
body.nav-open .snav-fab{opacity:0; transform:scale(.6); pointer-events:none;}

.snav-side{
  position:fixed; left:16px; bottom:24px; z-index:60;
  transform:translateY(12px) scale(.7); transform-origin:left bottom;
  opacity:0; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 10px;
  background:linear-gradient(160deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 45%, var(--sh-glass) 100%);
  backdrop-filter:blur(32px) saturate(2.1);
  -webkit-backdrop-filter:blur(32px) saturate(2.1);
  border:1px solid var(--sh-border-strong); border-radius:999px;
  box-shadow:var(--sh-shadow), inset 0 1px 1px rgba(255,255,255,.14), inset 0 0 24px rgba(255,255,255,.04);
  transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.3,.5,1);
}
.snav-side.right-side{left:auto; right:16px; transform-origin:right bottom;}
.snav-side::before{
  content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:48%; height:8%; border-radius:999px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
}
body.nav-open .snav-side{opacity:1; pointer-events:auto; transform:translateY(0) scale(1);}
.snav-side__edge{height:10px; align-self:stretch; cursor:pointer;}
.snav-side a{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--sh-text-soft); text-decoration:none;
  transition:background .15s, color .15s;
}
.snav-side a:hover{background:rgba(var(--a1-rgb),.16); color:var(--sh-text);}
.snav-side a.on{background:rgba(var(--a1-rgb),.22); color:var(--sh-text);}
.snav-side a svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.snav-side a.snav__ico svg{fill:currentColor; stroke:none;}

/* ---------- shared footer ---------- */
.sfoot{
  position:relative; z-index:1;
  margin-top:60px; padding:40px 34px 28px;
  background:var(--sh-glass);
  backdrop-filter:blur(22px);
  border-top:1px solid var(--sh-border);
  font-family:var(--sh-sans); color:var(--sh-text-soft);
}
.sfoot::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--a1-rgb),.4) 30%, rgba(var(--a2-rgb),.35) 70%, transparent);
}
.sfoot__grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:32px; max-width:1180px; margin:0 auto;
}
@media (max-width:860px){ .sfoot__grid{grid-template-columns:1fr 1fr;} }
/* footer brand: the mark above the display-weight wordmark */
.sfoot__brand{display:flex; flex-direction:column; align-items:flex-start; gap:12px; color:var(--sh-text); margin-bottom:12px;}
.sfoot__brand .brandmark{width:88px; height:88px;}
/* scoped under .sfoot__brand so the generic `.sfoot__brand span` rule
   (weight 300) cannot override the wordmark's treatment. Slate, Medium 500. */
.sfoot__brand span.sfoot__wordmark{
  display:inline-flex; align-items:center;
  font-family:var(--sh-serif); font-weight:500; font-size:1.45rem;
  letter-spacing:.05em; line-height:1; color:#5A6273;
}
:root[data-theme="dark"] .sfoot__brand span.sfoot__wordmark{color:#A9B0C2;}
.sfoot__wordmark .wm-o{
  width:.72em; height:.72em; align-self:center; overflow:visible;
  transform:translateY(.1em); margin:0 .015em; color:inherit;
}
.sfoot__brand span{font-family:var(--sh-serif); font-weight:300; font-size:1.2rem; letter-spacing:.06em;}
.sfoot__tag{font-size:.84rem; line-height:1.6; color:var(--sh-muted); max-width:32ch;}
.sfoot h5{font-size:.72rem; letter-spacing:.04em; color:var(--sh-label); font-weight:600; margin-bottom:12px;}
.sfoot__col a{
  display:block; padding:4px 0; text-decoration:none;
  font-size:.84rem; color:var(--sh-muted); transition:color .2s;
}
.sfoot__col a:hover{color:var(--sh-text);}
.sfoot__bottom{
  max-width:1180px; margin:30px auto 0; padding-top:18px;
  border-top:1px solid var(--sh-border);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  font-size:.76rem; color:var(--sh-muted);
}
.sfoot__bottom a{color:var(--sh-muted); text-decoration:none; margin-left:16px; transition:color .2s;}
.sfoot__bottom a:hover{color:var(--sh-text);}
.sfoot__bottom .ck-foot{
  width:16px; height:16px; fill:currentColor;
  vertical-align:-3px;
  transition:fill .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
#cookiePrefsLink:hover .ck-foot, #cookiePrefsLink:focus-visible .ck-foot{
  transform:scale(1.45);
}

/* ---------- cookie notice ---------- */
.scookie{
  position:fixed; z-index:80; left:50%; bottom:22px; transform:translate(-50%, 16px);
  width:min(560px, calc(100vw - 32px));
  padding:18px 22px; border-radius:6px;
  background:var(--sh-glass);
  backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid var(--sh-border-strong);
  box-shadow:var(--sh-shadow);
  font-family:var(--sh-sans);
  opacity:0; pointer-events:none; transition:opacity .5s, transform .5s;
}
.scookie.show{opacity:1; pointer-events:auto; transform:translate(-50%, 0);}
.scookie p{font-size:.84rem; line-height:1.55; color:var(--sh-text-soft); margin:0 0 14px;}
.scookie p a{color:var(--sh-text); text-decoration:underline; text-underline-offset:2px;}
.scookie__row{display:flex; gap:10px; flex-wrap:wrap;}
.scookie button{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:999px; cursor:pointer;
  font-family:var(--sh-sans); font-size:.82rem; font-weight:600;
  transition:transform .2s, box-shadow .2s;
}
.scookie__accept{
  color:#F3EDF7; background:linear-gradient(180deg,#5A3663 0%, #472A50 55%, #3E2347 100%);
  border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.28), 0 6px 16px rgba(24,10,30,.30);
}
:root[data-theme="light"] .scookie__accept{color:#F3EDF7;}
.scookie__accept:hover{transform:translateY(-1px); filter:brightness(1.12);}
.scookie__essential{
  color:var(--sh-text-soft); background:var(--sh-surface);
  border:1px solid var(--sh-border);
}
.scookie__essential:hover{color:var(--sh-text); border-color:var(--sh-border-strong);}
.scookie .ck{width:16px; height:16px; fill:currentColor; flex:none;}

/* ---------- shared page scaffold (placeholder pages) ---------- */
.spage{
  min-height:calc(100vh - 70px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:60px 24px; text-align:center;
  font-family:var(--sh-sans); position:relative; z-index:1;
}
.spage__chip{
  padding:7px 16px; border-radius:999px; font-size:.76rem; font-weight:600;
  color:var(--sh-label); background:var(--sh-surface); border:1px solid var(--sh-border);
  backdrop-filter:blur(10px);
}
.spage h1{
  font-family:var(--sh-serif); font-weight:300; color:var(--sh-text);
  font-size:clamp(2.2rem, 5vw, 3.4rem); margin:0;
}
.spage p{color:var(--sh-muted); font-size:1rem; line-height:1.7; max-width:52ch; margin:0;}
.spage__glow{
  position:fixed; top:20%; left:50%; transform:translateX(-50%);
  width:640px; height:640px; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(var(--a1-rgb),.18), rgba(var(--a2-rgb),.06) 55%, transparent 70%);
  filter:blur(60px);
}
body.sbody{
  margin:0; background:var(--sh-bg); min-height:100vh;
  -webkit-font-smoothing:antialiased;
}


/* ---------- accessibility: keyboard focus + reduced motion (site-wide) ---------- */
.snav a:focus-visible, .snav button:focus-visible,
.sfoot a:focus-visible, .scookie button:focus-visible,
.snav-fab:focus-visible, .snav-side a:focus-visible,
#typeFilter:focus-visible{
  outline:2px solid var(--a2); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .snav, .snav-fab, .snav-side, .scookie,
  .snav__needle, .sfoot__bottom .ck-foot{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
}

/* the canvas itself always carries the theme color, so repaints never flash white */
html{background:var(--bg2);}

/* ---------- living background orbs (shared, both themes) ---------- */
.orbs{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.orbs i{
  position:absolute; border-radius:50%; will-change:transform;
  filter:blur(80px); opacity:.5;
  animation:orbDrift 28s ease-in-out infinite alternate;
}
.orbs i:nth-child(1){width:580px;height:580px; background:radial-gradient(circle at 35% 35%, rgba(var(--a1-rgb),.55), transparent 70%); top:-170px; right:-120px;}
.orbs i:nth-child(2){width:470px;height:470px; background:radial-gradient(circle at 60% 40%, rgba(var(--a2-rgb),.45), transparent 70%); bottom:-140px; left:-90px; animation-duration:36s; animation-delay:-9s;}
.orbs i:nth-child(3){width:420px;height:420px; background:radial-gradient(circle at 50% 50%, rgba(217,176,140,.34), transparent 70%); top:36%; left:52%; animation-duration:31s; animation-delay:-18s;}
@keyframes orbDrift{
  0%{transform:translate(0,0) scale(1);}
  55%{transform:translate(-110px,80px) scale(1.15);}
  100%{transform:translate(70px,-60px) scale(.94);}
}
/* Light: the orbs become dawn light — peach, rose, a touch of gold */
:root[data-theme="light"] .orbs i{opacity:.55;}
:root[data-theme="light"] .orbs i:nth-child(1){background:radial-gradient(circle at 35% 35%, rgba(233,196,160,.62), transparent 70%);}
:root[data-theme="light"] .orbs i:nth-child(2){background:radial-gradient(circle at 60% 40%, rgba(226,180,197,.56), transparent 70%);}
:root[data-theme="light"] .orbs i:nth-child(3){background:radial-gradient(circle at 50% 50%, rgba(235,210,158,.5), transparent 70%);}

/* ---------- shared popups: premium sheet + keep-spark dialog ---------- */
body.sh-lock{overflow:hidden;}
.sh-modal{
  position:fixed; inset:0; z-index:90; display:none;
  align-items:center; justify-content:center; padding:22px;
  font-family:var(--sh-sans);
}
.sh-modal.open{display:flex;}
.sh-modal__veil{
  position:absolute; inset:0; background:rgba(5,6,18,.55);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
:root[data-theme="light"] .sh-modal__veil{background:rgba(228,235,234,.55);}
.sh-sheet, .sh-dialog{
  position:relative; overflow:hidden; color:var(--sh-text);
  border-radius:6px; border:1px solid var(--sh-border-strong);
  background:rgba(13,16,36,.92);
  backdrop-filter:blur(30px) saturate(1.5);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:var(--sh-shadow);
  animation:sheetUp .5s cubic-bezier(.3,1.08,.4,1) both;
}
:root[data-theme="light"] .sh-sheet, :root[data-theme="light"] .sh-dialog{background:rgba(248,245,239,.95);}
.sh-dialog{background:rgba(13,16,36,.72);}
:root[data-theme="light"] .sh-dialog{background:rgba(246,248,247,.76);}
@keyframes sheetUp{from{opacity:0; transform:translateY(26px) scale(.97);} to{opacity:1; transform:none;}}
.sh-sheet{width:min(430px,100%); max-height:calc(100vh - 44px); overflow-y:auto;}
.sh-dialog{width:min(392px,100%);}
.sh-sheet__glow{position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit;}
.sh-sheet__glow i{
  position:absolute; border-radius:50%;
  filter:blur(56px); opacity:.5; will-change:transform;
  animation:orbDrift 24s ease-in-out infinite alternate;
}
.sh-sheet__glow i:nth-child(1){width:340px;height:340px; background:radial-gradient(circle at 40% 40%, rgba(var(--a1-rgb),.55), transparent 70%); top:-110px; left:-80px;}
.sh-sheet__glow i:nth-child(2){width:300px;height:300px; background:radial-gradient(circle at 55% 45%, rgba(var(--a2-rgb),.45), transparent 70%); bottom:-90px; right:-70px; animation-duration:30s; animation-delay:-8s;}
.sh-sheet__glow i:nth-child(3){width:260px;height:260px; background:radial-gradient(circle at 50% 50%, rgba(217,176,140,.3), transparent 70%); top:42%; left:44%; animation-duration:27s; animation-delay:-15s;}
.sh-sheet__body{position:relative; z-index:1; padding:34px 30px 26px; text-align:center;}
.sh-dialog .sh-sheet__body{padding:32px 28px 26px;}
.sh-x{
  position:absolute; top:0; right:2px; z-index:2;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:none; border:none; color:var(--sh-muted);
  transition:color .2s, background .2s;
}
.sh-x:hover{color:var(--sh-text); background:var(--sh-surface-2);}
.sh-x svg{width:16px; height:16px; stroke:currentColor; stroke-width:2; stroke-linecap:round; fill:none;}
.sh-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.68rem; font-weight:700; letter-spacing:.32em; text-transform:uppercase;
  color:#EBCB9F;
}
:root[data-theme="light"] .sh-eyebrow{color:#8F5B21;}
.sh-eyebrow svg{width:12px; height:12px; fill:currentColor;}
.sh-title{
  font-family:var(--sh-serif); font-weight:300; font-size:1.72rem; line-height:1.18;
  margin:12px 0 8px;
}
.sh-sub{font-size:.86rem; line-height:1.6; color:var(--sh-text-soft); max-width:36ch; margin:0 auto 20px;}
.sh-plans{
  display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  background:var(--sh-surface-2); border:1px solid var(--sh-border); margin-bottom:18px;
}
.sh-plan{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 17px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  font-family:var(--sh-sans); font-size:.8rem; font-weight:600;
  color:var(--sh-muted); background:transparent; transition:color .2s, background .2s;
}
.sh-plan:hover{color:var(--sh-text);}
.sh-plan.on{color:var(--sh-text); background:var(--sh-surface); border-color:var(--sh-border-strong);}
.sh-plan .bv{   /* Best value pill: Ink */
  padding:3px 8px; border-radius:999px; font-size:.62rem; font-weight:700;
  color:#FBF3EC; background:#3E2347;
}
.sh-price{font-family:"Geist", var(--sh-serif); font-weight:500;}
.sh-price b{font-size:2.5rem; font-weight:500; letter-spacing:-.01em;}
.sh-price span{font-size:.94rem; color:var(--sh-text-soft);}
.sh-billed{font-size:.76rem; color:var(--sh-muted); margin:4px 0 2px;}
.sh-trial{font-size:.8rem; font-weight:600; color:var(--a2); margin:0 0 20px;}
:root[data-theme="light"] .sh-trial{color:#2E6E7E;}
.sh-feats{
  display:flex; flex-direction:column; gap:14px; text-align:left;
  padding:18px; border-radius:6px; margin-bottom:20px;
  background:var(--sh-surface); border:1px solid var(--sh-border);
}
.sh-feats .ft{display:flex; gap:12px; align-items:flex-start;}
.sh-feats .ft svg{
  width:17px; height:17px; flex:none; margin-top:2px;
  stroke:var(--a2); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
:root[data-theme="light"] .sh-feats .ft svg{stroke:#2E6E7E;}
.sh-feats .ft b{display:block; font-size:.84rem; font-weight:600; margin-bottom:1px;}
.sh-feats .ft small{display:block; font-size:.74rem; line-height:1.45; color:var(--sh-muted);}
/* CTA — solid. With a chosen accent it fills with that accent; with no accent
   picked (the default) it falls back to a simple neutral glass effect. */
.sh-cta{
  width:100%; padding:15px 22px; border-radius:999px; cursor:pointer;
  font-family:var(--sh-sans); font-size:.92rem; font-weight:700;
  color:var(--sh-text); background:var(--sh-surface-2);
  border:1px solid var(--sh-border-strong);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 8px 26px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.sh-cta:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.22);}
:root[data-accent-chosen] .sh-cta{
  color:var(--bg2); background:var(--a1);
  border-color:rgba(255,255,255,.32);
  box-shadow:0 8px 28px rgba(var(--a1-rgb),.35), inset 0 1px 0 rgba(255,255,255,.35);
}
:root[data-theme="light"][data-accent-chosen] .sh-cta{color:#fff;}
:root[data-accent-chosen] .sh-cta:hover{box-shadow:0 12px 34px rgba(var(--a1-rgb),.45);}
/* Premium upsell trial button: deep plum, overriding the accent fill */
#shPremCta, :root[data-accent-chosen] #shPremCta{background:#3E2347; color:#FBF3EC; border-color:#3E2347; box-shadow:0 8px 26px rgba(3,4,14,.35);}
#shPremCta:hover, :root[data-accent-chosen] #shPremCta:hover{box-shadow:0 12px 30px rgba(62,35,71,.5);}
.sh-fine{font-size:.7rem; color:var(--sh-muted); line-height:1.6; margin:14px 0 2px;}
.sh-fine a{color:var(--sh-text-soft); text-underline-offset:2px;}
.sh-restore{
  background:none; border:none; cursor:pointer; padding:6px;
  font-family:var(--sh-sans); font-size:.74rem; font-weight:600; color:var(--sh-muted);
}
.sh-restore:hover{color:var(--sh-text); text-decoration:underline; text-underline-offset:3px;}
/* the Orbit liquid (ambient.js data-liquid) is the dialog's avatar */
.sh-keep-orb{
  width:58px; height:58px; margin:2px auto 16px;
  filter:drop-shadow(0 0 14px rgba(var(--a1-rgb),.45));
  animation:keepBreathe 4s ease-in-out infinite;
}
@keyframes keepBreathe{0%,100%{transform:scale(1);} 50%{transform:scale(1.06);}}
.sh-keep-orb [data-liquid]{display:block; width:100%; height:100%;}
/* Premium sheet: an Orbit pearl in place of the old star eyebrow */
.sh-prem-orb{
  position:relative; width:52px; height:52px; margin:2px auto 6px;
  filter:drop-shadow(0 0 14px rgba(var(--a1-rgb),.45));
  animation:keepBreathe 4s ease-in-out infinite;
}
.sh-prem-orb [data-liquid]{display:block; width:100%; height:100%;}
/* a few droplets orbiting the pearl */
.sh-prem-orb i{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 30%, rgba(var(--a1-rgb),.95), rgba(var(--a2-rgb),.55) 68%, transparent);
  animation:dropFloat 5s ease-in-out infinite;
}
.sh-prem-orb i:nth-of-type(1){width:9px; height:9px; top:-3px; right:-4px; animation-delay:-.6s;}
.sh-prem-orb i:nth-of-type(2){width:6px; height:6px; bottom:0; left:-7px; animation-delay:-2.3s;}
.sh-prem-orb i:nth-of-type(3){width:5px; height:5px; top:15px; right:-9px; animation-delay:-3.8s;}
@keyframes dropFloat{0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-3px) scale(1.1);}}
/* deep plum: the default primary CTA for the aurora accent (Keep dialog) */
#shKeep .sh-cta{
  color:#F3EDF7; border:none;
  background:linear-gradient(180deg,#5A3663 0%, #472A50 55%, #3E2347 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             inset 0 -1px 0 rgba(0,0,0,.28),
             0 6px 16px rgba(24,10,30,.30);
}
#shKeep .sh-cta:hover{
  filter:brightness(1.12); transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             inset 0 -1px 0 rgba(0,0,0,.28),
             0 10px 22px rgba(24,10,30,.38);
}
.sh-dialog h3{font-family:var(--sh-serif); font-weight:300; font-size:1.5rem; margin:0 0 8px;}
.sh-dialog .sh-keep-sub{font-size:.86rem; line-height:1.6; color:var(--sh-text-soft); max-width:32ch; margin:0 auto 22px;}
.sh-dialog__row{display:flex; flex-direction:column; gap:10px;}
.sh-ghost{
  width:100%; padding:13px 22px; border-radius:999px; cursor:pointer;
  font-family:var(--sh-sans); font-size:.86rem; font-weight:600;
  color:var(--sh-text-soft); background:var(--sh-surface); border:1px solid var(--sh-border);
  transition:color .2s, border .2s;
}
.sh-ghost:hover{color:var(--sh-text); border-color:var(--sh-border-strong);}
.sh-modal :focus-visible{outline:2px solid var(--a2); outline-offset:2px;}

/* final wordmark (Italiana + Srisakdi masters) replaces the styled-text footer wordmark */
img.sfoot__wordmark--img{height:24px; width:auto; display:block;}