/* ---------- Tokens ---------- */
:root{
  --bg: #08080c;
  --bg-alt: #0f0f17;
  --surface: #14141f;
  --surface-2: #191926;
  --border: rgba(255,255,255,.08);
  --fg: #f3f2f7;
  --fg-dim: #a3a1b0;
  --accent: #7c5cff;
  --accent-2: #ff6b9d;
  --accent-soft: rgba(124,92,255,.14);
  --radius: 18px;
  --radius-sm: 10px;
  --container: 1180px;
  --ff-head: "Space Grotesk", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, sans-serif;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--ff-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  cursor:default;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--ff-head); font-weight:600; line-height:1.08; margin:0 0 .5em; letter-spacing:-.02em; }
p{ margin:0 0 1em; color:var(--fg-dim); }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.container-pad{ padding-inline:24px; }
.section{ position:relative; padding-block:min(14vh,120px); }
.eyebrow{
  font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.14em;
  font-size:.75rem; color:var(--accent); margin-bottom:1em; font-weight:600;
}
.body-text{ font-size:1.05rem; max-width:46ch; }
.text-link{ color:var(--fg); font-weight:500; border-bottom:1px solid var(--border); padding-bottom:2px; }
.arrow-link{ display:inline-block; margin-top:.5em; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- grain + cursor ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; translate:-50% -50%; will-change:transform; }   /* centred with `translate`: the script moves them with `transform` */
.cursor-dot{ width:6px; height:6px; background:var(--fg); }
.cursor-ring{ width:34px; height:34px; border:1px solid rgba(255,255,255,.55); transition:width .25s,height .25s,border-color .25s,background .25s; }
.cursor-ring.is-active{ width:64px; height:64px; background:rgba(255,255,255,.06); border-color:var(--accent); }
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- progress bar ---------- */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:9997;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform-origin:0 50%; transform:scaleX(0);
}

/* ---------- preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.preloader-inner{ position:relative; z-index:1; text-align:center; }

/* animated colorful "CGI" backdrop */
.preloader-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.pl-blob{
  position:absolute; width:56vmax; height:56vmax; min-width:520px; min-height:520px;
  border-radius:50%; filter:blur(70px); opacity:.6; mix-blend-mode:screen;
  animation:blob-float ease-in-out infinite;
}
.pl-blob.b1{ background:radial-gradient(circle,var(--accent),transparent 65%); top:-22%; left:-16%; animation-duration:11s; }
.pl-blob.b2{ background:radial-gradient(circle,var(--accent-2),transparent 65%); bottom:-26%; right:-12%; animation-duration:13s; animation-delay:-3s; }
.pl-blob.b3{ background:radial-gradient(circle,#5ce1ff,transparent 65%); top:6%; right:-22%; animation-duration:15s; animation-delay:-6s; }
.pl-blob.b4{ width:42vmax; height:42vmax; min-width:400px; min-height:400px; background:radial-gradient(circle,#ffd166,transparent 65%); bottom:-14%; left:6%; animation-duration:10s; animation-delay:-2s; opacity:.45; }
@keyframes blob-float{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(6%,-8%) scale(1.15); }
  66%{ transform:translate(-8%,6%) scale(.9); }
}
.pl-halo{
  position:absolute; top:50%; left:50%; width:min(120vw,1100px); height:min(120vw,1100px);
  margin:calc(min(120vw,1100px) / -2) 0 0 calc(min(120vw,1100px) / -2);
  background:conic-gradient(from 0deg,var(--accent),var(--accent-2),#5ce1ff,#ffd166,var(--accent));
  opacity:.16; filter:blur(70px); border-radius:50%;
  animation:halo-spin 16s linear infinite;
}
@keyframes halo-spin{ to{ transform:rotate(360deg); } }
.pl-grid{
  position:absolute; inset:-10%;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(circle at 50% 46%,#000 8%,transparent 62%);
  mask-image:radial-gradient(circle at 50% 46%,#000 8%,transparent 62%);
  animation:grid-pan 16s linear infinite;
}
@keyframes grid-pan{ from{ background-position:0 0,0 0; } to{ background-position:420px 0,0 420px; } }

/* phone-to-phone message send */
.preloader-phones{ position:relative; display:flex; align-items:center; justify-content:space-between; width:280px; height:150px; margin:0 auto 26px; }
.ploader-phone{
  position:relative; width:54px; height:104px; flex:none;
  background:var(--surface); border:2px solid var(--border); border-radius:16px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
}
.ploader-notch{ position:absolute; top:8px; left:50%; width:18px; height:3px; margin-left:-9px; border-radius:2px; background:var(--border); }
.ploader-screen{
  position:absolute; inset:16px 6px; border-radius:8px; opacity:.55;
  background:linear-gradient(160deg,var(--accent-soft),transparent 70%);
}
.phone-b .ploader-screen{ animation:screen-flash 1.8s ease-in-out infinite; }
@keyframes screen-flash{ 0%,80%{ opacity:.55; } 88%{ opacity:1; } 100%{ opacity:.55; } }
.ploader-ping{
  position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; border:1.5px solid var(--accent); opacity:0;
}
.ping-a{ animation:ploader-ping 1.8s ease-out infinite; }
.ping-b{ animation:ploader-ping 1.8s ease-out infinite; animation-delay:1.55s; border-color:var(--accent-2); }
@keyframes ploader-ping{ 0%{ transform:scale(.5); opacity:.7; } 70%,100%{ transform:scale(2.6); opacity:0; } }
.ploader-dot{
  position:absolute; top:0; left:0; width:9px; height:9px;
  border-radius:50%; background:var(--fg); box-shadow:0 0 12px 3px var(--accent);
  offset-path:path("M 54 75 Q 140 20 226 75"); offset-rotate:0deg; offset-anchor:center;
  animation:ploader-send 1.8s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes ploader-send{
  0%{ offset-distance:0%; opacity:0; }
  8%{ opacity:1; }
  86%{ opacity:1; }
  94%{ offset-distance:100%; opacity:0; }
  100%{ offset-distance:100%; opacity:0; }
}
.preloader-word img{ display:block; height:clamp(40px,8vw,56px); width:auto; margin:0 auto; }
.preloader-bar{ width:220px; height:2px; background:var(--border); margin:20px auto 10px; overflow:hidden; }
.preloader-bar span{ display:block; height:100%; width:0%; background:var(--accent); }
.preloader-pct{ font-family:var(--ff-head); font-size:.8rem; color:var(--fg-dim); }

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding-block:22px; transition:background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  padding-block:12px; background:rgba(8,8,12,.9);
  border-bottom-color:var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:inline-flex; position:relative; flex-shrink:0; }
.logo-img{ display:block; height:34px; width:auto; transition:opacity .3s; }
.logo-img-light{ position:absolute; left:0; top:0; opacity:0; }   /* the same logo for the light menu overlay */
.main-nav{ display:flex; gap:28px; font-size:.92rem; color:var(--fg-dim); }
.main-nav a:hover{ color:var(--fg); }
.header-actions{ display:flex; align-items:center; gap:18px; }
@media (max-width:820px){ .main-nav{ display:none; } }

/* ---------- buttons ---------- */
/* A pill with the label on the left and a round arrow chip on the right. On hover the chip turns accent-coloured and tips
   up and to the right. Primary = white pill; outline = dark pill with a white chip. */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:6px 6px 6px 22px; border-radius:100px; font-weight:500; font-size:.92rem; letter-spacing:-.005em;
  overflow:hidden; isolation:isolate; will-change:transform; transition:background-color .3s;
  box-shadow:0 6px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.08);
}
.btn-label{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:18px; }
.btn-label::after{
  content:"→"; flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  font-size:1.05rem; line-height:1; background:var(--chip,#0b0b12); color:var(--chip-ink,#fff);
  transition:transform .45s cubic-bezier(.65,0,.35,1), background-color .3s, color .3s;
}
.btn:hover .btn-label::after{ transform:rotate(-45deg); background:var(--accent); color:#fff; }
.btn-primary{ background:#fff; color:#0b0b12; }
.btn-primary:hover{ background:#f3f0ff; }
.btn-outline{ --chip:#fff; --chip-ink:#0b0b12; background:#1c1c27; border:1px solid var(--border); color:#fff; }
.btn-outline:hover{ background:#262636; }
.btn-lg{ padding:8px 8px 8px 28px; font-size:1rem; }
.btn-lg .btn-label::after{ width:42px; height:42px; }
.site-header .btn{ padding:4px 4px 4px 18px; font-size:.86rem; }
.site-header .btn .btn-label{ gap:14px; }
.site-header .btn .btn-label::after{ width:30px; height:30px; font-size:.95rem; }

/* ---------- hero ---------- */
.hero{ min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding-top:120px; }
.hero-wordmark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-start;
  font-family:var(--ff-head); font-weight:700; font-size:min(38vw,520px); color:#fff;
  opacity:.045; letter-spacing:-.02em; pointer-events:none; user-select:none;
  padding-left:clamp(8px,3vw,40px);
}
.hero-layers{ position:absolute; inset:0; pointer-events:none; }
.signal-scene{ perspective:1600px; }

/* satellite / broadcast-signal composition, tilted into 3D and driven by the cursor.
   .signal-tilt owns the interactive rotateX/Y/Z (one Animatable, set in initHeroTilt).
   Each .signal-layer inside it is JS-parallaxed (translate only) via [data-parallax-speed];
   all pulse/spin/travel animation lives on .signal-layer-inner and its children —
   so no two controllers/CSS rules ever fight over the same element's transform. */
.signal-tilt{
  position:absolute; right:2%; top:50%; width:940px; height:940px; margin-top:-400px;
  transform-style:preserve-3d; will-change:transform;
}
.signal-layer{ position:absolute; inset:0; transform-style:preserve-3d; }
.signal-layer-inner{ position:absolute; inset:0; transform-style:preserve-3d; }

/* counter-rotated wrapper around each rigid 3D body (earth/moon/satellite) so it
   always faces the camera as a true sphere/object instead of the flat disc it
   actually is — see initHeroTilt(), which drives its rotate to the inverse of
   #signalTilt's own rotate on every update. */
.billboard{ transform-style:preserve-3d; }
.earth-billboard{ position:absolute; inset:0; }

/* the earth/moon/satellite are a real WebGL scene (earth-scene.js) painted into this canvas.
   The orbit radii in earth-scene.js are kept inside the camera's field of view with
   margin, so nothing clips against the camera frustum — canvas size below is purely
   a display-size choice now, it can't fix frustum clipping since it scales the whole
   scene (earth included) uniformly rather than adding safe margin around it. */
.earth-canvas{
  position:absolute; top:50%; left:50%; width:1500px; height:1500px; margin:-750px 0 0 -750px;
}

/* a small link packet continuously travels its own orbit around the earth canvas */
@media (max-width:760px){
  /* phones: the globe sits centred above the headline (scaled down), the copy starts below it.
     Kept noticeably shorter than it looks like it needs to be: a phone browser's own address/tab bar
     covers a real chunk of the screen that plain CSS viewport units don't reliably account for
     (confirmed against a real device, not just a simulated one — see the CTAs below). */
  .hero{ align-items:flex-start; padding-top:266px; padding-bottom:36px; }
  .earth-canvas{ width:820px; height:820px; margin:-410px 0 0 -410px; }
  .signal-layer-inner{ transform:scale(.56); transform-origin:center; }
  .signal-tilt{ left:50%; right:auto; margin-left:-470px; top:-222px; margin-top:0; opacity:1; }
  .signal-tilt, .billboard{ transform:none !important; } /* no CSS 3D tilt on phones: the globe stays a flat, true circle */
  .globe-label{ display:none; }
  .hero-sub{ font-size:1rem; line-height:1.45; }
}

/* full-bleed: drops .container's centered max-width + side padding so the headline
   touches the left edge of the viewport and the sub copy + CTAs touch the right edge */
.hero-inner{ position:relative; z-index:2; max-width:none; width:100%; margin:0; padding-inline:clamp(16px,2.6vw,44px); }
.hero-lead{ margin-left:0; }
.hero-follow{ margin-left:auto; margin-top:28px; text-align:right; }
.hero-title{ font-size:clamp(2.6rem,6vw,4.6rem); }
.hero-title .split-line{ overflow:hidden; display:block; }
.hero-title .split-line > span{ display:inline-block; will-change:transform; }
.hero-sub{ font-size:1.15rem; max-width:46ch; margin-left:auto; color:#c9c7d6; text-shadow:0 1px 14px rgba(8,8,12,.95), 0 0 4px rgba(8,8,12,.8); }
.hero-ctas{ display:flex; gap:16px; margin-top:12px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:760px){
  .hero-follow{ margin-top:14px; }
  .hero-ctas{ gap:12px; margin-top:8px; } /* the two CTAs stack here (too narrow to sit side by side): tighter spacing keeps both on screen without scrolling */
}
.scroll-cue{
  position:absolute; bottom:36px; left:24px; display:flex; align-items:center; gap:10px;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim);
}
.scroll-cue span{ width:1px; height:32px; background:linear-gradient(var(--fg-dim),transparent); display:block; }

/* ---------- the snake line ---------- */
main{ position:relative; overflow-x:clip; } /* slide-in reveals must not widen the page on phones */
.snake{
  position:absolute; left:0; width:100%; z-index:0; pointer-events:none; overflow:visible;
}
#snakeGlow{ stroke-width:36px; opacity:.2; }
#snakeHead{ filter:drop-shadow(0 0 10px rgba(124,92,255,.75)) drop-shadow(0 0 4px rgba(255,255,255,.9)); }
/* soft ring + glow on an object the moment the snake reaches it */
.snake-hit{ animation:snakeHit 1.2s ease-out; }
@keyframes snakeHit{
  0%{ box-shadow:0 0 0 0 rgba(124,92,255,.6), 0 0 0 rgba(124,92,255,0); border-color:var(--accent); }
  100%{ box-shadow:0 0 0 22px rgba(124,92,255,0), 0 0 34px rgba(124,92,255,0); }
}

/* ---------- intro: light panel, huge statement, copy + pill on the left, gradient media card on the right ---------- */
/* the top padding is the room the rising tide (see .tide-light) needs before the headline */
.intro{ padding-block:clamp(230px,30vh,320px) clamp(90px,16vh,170px); }
.intro-wrap{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  column-gap:clamp(24px,5vw,72px); row-gap:clamp(40px,7vw,96px);
}
.intro-title{
  grid-column:1 / -1; margin:0; color:#0b0b12; font-weight:400;
  font-size:clamp(3rem,9.4vw,7.2rem); line-height:1; letter-spacing:-.02em;
}
.intro-line{ display:block; }
.intro-line.l2{ margin-left:clamp(0px,14%,170px); }
.intro-card{
  grid-column:2; grid-row:2; margin:0;
  padding:clamp(18px,2.6vw,34px); border-radius:18px; overflow:hidden;
  background:linear-gradient(150deg,#7c5cff 0%,#c45bff 48%,#ff6b9d 100%);
}
.intro-card .mock-window{ box-shadow:0 22px 50px -18px rgba(40,10,80,.6); }
.intro-body{ grid-column:1; grid-row:2; }
.intro-body p{ margin:0 0 2rem; max-width:46ch; color:#1b1b26; font-size:1.06rem; line-height:1.5; }
.pill-btn{
  border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:16px; padding:6px 6px 6px 22px; border-radius:100px;
  background:#fff; color:#0b0b12; font:500 .95rem/1 var(--ff-body); letter-spacing:-.005em;
  box-shadow:0 6px 10px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.04);
  transition:background-color .3s, color .3s; will-change:transform;
}
.pill-arrow{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#0b0b12; color:#fff; font-size:1.05rem; line-height:1;
  transition:transform .45s cubic-bezier(.65,0,.35,1), background-color .3s;
}
.pill-btn:hover .pill-arrow{ transform:rotate(-45deg); background:var(--accent); }
@media (max-width:860px){
  .intro-wrap{ grid-template-columns:1fr; }
  .intro-line.l2{ margin-left:0; }
  .intro-card, .intro-body{ grid-column:1; grid-row:auto; }
}
.mock-window{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.mock-window-bar{ display:flex; gap:6px; padding:14px; border-bottom:1px solid var(--border); }
.mock-window-bar span{ width:9px; height:9px; border-radius:50%; background:var(--border); }
.mock-window-body{ padding:22px; display:flex; flex-direction:column; gap:14px; }
.mock-listing{ display:flex; align-items:center; gap:14px; background:var(--surface-2); border-radius:var(--radius-sm); padding:14px; }
.mock-listing-dot{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); flex:none; }
.mock-listing-dot.alt{ background:linear-gradient(135deg,#5ce1ff,var(--accent)); }
.mock-listing-lines{ flex:1; display:flex; flex-direction:column; gap:7px; }
.mock-listing-lines span{ height:8px; border-radius:4px; background:var(--border); display:block; width:80%; }
.mock-listing-lines .short{ width:45%; }
.mock-listing-price{ font-family:var(--ff-head); font-weight:600; color:var(--fg); }

/* ---------- how it works (pin) ---------- */


/* ---------- the bridge between the reviews and the pricing: a wordless animation ---------- */
.bridge{
  position:relative; z-index:1; height:clamp(640px,92vh,920px); margin-block:-19vh; overflow:hidden; pointer-events:none; /* taller, and overlapping the faded ends of the sections on either side, so there is no gap */
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.05) 5%,rgba(0,0,0,.18) 10%,rgba(0,0,0,.4) 15%,rgba(0,0,0,.68) 20%,rgba(0,0,0,.9) 25%,#000 29%,#000 71%,rgba(0,0,0,.9) 75%,rgba(0,0,0,.68) 80%,rgba(0,0,0,.4) 85%,rgba(0,0,0,.18) 90%,rgba(0,0,0,.05) 95%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.05) 5%,rgba(0,0,0,.18) 10%,rgba(0,0,0,.4) 15%,rgba(0,0,0,.68) 20%,rgba(0,0,0,.9) 25%,#000 29%,#000 71%,rgba(0,0,0,.9) 75%,rgba(0,0,0,.68) 80%,rgba(0,0,0,.4) 85%,rgba(0,0,0,.18) 90%,rgba(0,0,0,.05) 95%,rgba(0,0,0,0) 100%);
}
.bridge canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* only the middle of the band takes the pointer, so its overlapping ends never block anything in the sections behind them */
.bridge-hit{ position:absolute; left:0; right:0; top:24%; bottom:24%; pointer-events:auto; cursor:grab; touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
.bridge-hit.is-drag{ cursor:grabbing; }

/* ---------- pricing: a stage with two cards ---------- */
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.pricing-section{ position:relative; overflow:hidden; padding-block:clamp(84px,11vh,120px) clamp(120px,18vh,190px); }

/* everything behind the cards is one scene that fades in and out with the section, and to nothing at its top and bottom edge */
.pr-scene{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:var(--pfade,1);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.04) 5%,rgba(0,0,0,.14) 10%,rgba(0,0,0,.34) 15%,rgba(0,0,0,.6) 20%,rgba(0,0,0,.84) 25%,rgba(0,0,0,.96) 30%,#000 34%,#000 66%,rgba(0,0,0,.96) 70%,rgba(0,0,0,.84) 75%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.34) 85%,rgba(0,0,0,.14) 90%,rgba(0,0,0,.04) 95%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.04) 5%,rgba(0,0,0,.14) 10%,rgba(0,0,0,.34) 15%,rgba(0,0,0,.6) 20%,rgba(0,0,0,.84) 25%,rgba(0,0,0,.96) 30%,#000 34%,#000 66%,rgba(0,0,0,.96) 70%,rgba(0,0,0,.84) 75%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.34) 85%,rgba(0,0,0,.14) 90%,rgba(0,0,0,.04) 95%,rgba(0,0,0,0) 100%);
}
.pr-cursor{ /* a soft light that follows the cursor across the whole stage; moved with a transform, so it costs almost nothing */
  position:absolute; left:0; top:0; width:920px; height:920px; margin:-460px 0 0 -460px; border-radius:50%; pointer-events:none; opacity:0; transition:opacity .5s; will-change:transform;
  background:radial-gradient(closest-side,rgba(124,92,255,.26),rgba(255,107,157,.08) 55%,transparent 75%);
}
.pr-aurora{ position:absolute; inset:0; overflow:hidden; }
.pr-aurora i{ position:absolute; width:58vw; max-width:760px; aspect-ratio:1; border-radius:50%; opacity:.34; animation:rvFloat 20s ease-in-out infinite alternate; }
.pr-aurora i:nth-child(1){ left:-12%; top:6%; background:radial-gradient(circle,#7c5cff,transparent 65%); }
.pr-aurora i:nth-child(2){ right:-14%; top:30%; background:radial-gradient(circle,#ff6b9d,transparent 65%); animation-duration:25s; animation-delay:-7s; }
.pr-aurora i:nth-child(3){ left:30%; bottom:-10%; opacity:.24; background:radial-gradient(circle,#5ce1ff,transparent 65%); animation-duration:29s; animation-delay:-12s; }
.pr-stars{ position:absolute; left:0; top:0; }

/* giant outlined words drifting in opposite directions */
.pr-marquee{ position:absolute; inset:0; overflow:hidden; }
.pr-row{
  position:absolute; left:0; display:flex; width:max-content; white-space:nowrap; animation:prMarquee 60s linear infinite;
  font:700 clamp(6rem,15vw,13rem)/1 var(--ff-head); letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.07);
}
.pr-row:nth-child(1){ top:9%; }
.pr-row.rev{ top:auto; bottom:16%; animation-direction:reverse; animation-duration:75s; }
.pr-row b{ font-weight:400; padding-inline:.25em; -webkit-text-stroke:1.5px rgba(255,107,157,.16); }
@keyframes prMarquee{ to{ transform:translate3d(-50%,0,0); } }

/* paper planes crossing the stage, each with a fading trail */
.pr-fly{ position:absolute; left:0; top:var(--y); animation:prFly var(--dur) linear var(--dl) infinite; will-change:transform; }
.pr-fly svg{ display:block; width:calc(40px * var(--s)); height:auto; filter:drop-shadow(0 0 8px rgba(160,140,255,.7)); }
.pr-fly::before{ content:""; position:absolute; right:calc(100% - 6px); top:50%; width:calc(190px * var(--s)); height:2px; transform:translateY(-50%); background:linear-gradient(90deg,transparent,rgba(190,170,255,.75)); }
@keyframes prFly{ from{ transform:translate3d(-260px,0,0) rotate(var(--r)); } to{ transform:translate3d(calc(100vw + 300px),var(--dy),0) rotate(var(--r)); } }

/* a perspective floor of glowing grid lines rushing toward you */
.pr-floor{
  position:absolute; left:-25%; right:-25%; bottom:0; height:58%; overflow:hidden; perspective:520px; perspective-origin:50% 0;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.7) 45%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.7) 45%,transparent 100%);
}
.pr-plane{ position:absolute; left:0; right:0; top:0; height:230%; transform-origin:50% 0; transform:rotateX(66deg); }
.pr-plane i{
  position:absolute; left:0; right:0; top:-80px; bottom:0;
  background-image:linear-gradient(rgba(124,92,255,.5) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,107,157,.4) 1.5px,transparent 1.5px);
  background-size:90px 90px; animation:prGrid 2.6s linear infinite; will-change:transform;
}
@keyframes prGrid{ to{ transform:translate3d(0,90px,0); } }

.pr-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
/* the heading block arrives piece by piece: the headline pulls into focus */
.pr-inner > :not(.pricing-grid){ opacity:0; transform:translateY(26px); transition:opacity .8s, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--n,0) * 90ms); }
.pricing-section.is-in .pr-inner > :not(.pricing-grid){ opacity:1; transform:none; }
.pricing-section h2{ filter:blur(16px); transition:opacity 1s, transform .9s cubic-bezier(.2,.8,.2,1), filter 1.3s ease-out, letter-spacing 1.5s cubic-bezier(.2,.8,.2,1); letter-spacing:.05em; }
.pricing-section.is-in h2{ filter:none; letter-spacing:-.045em; }
.pr-eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:22px; padding:9px 16px; border-radius:99px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; font:600 .82rem/1 var(--ff-body);
}
.pr-eyebrow svg{ color:#ffc94d; }
.pricing-section h2{ margin:0 0 .55em; font-size:clamp(2.6rem,6vw,5.2rem); line-height:1; color:#fff; }
.pr-hl{ color:#ff8fb8; }

/* billing toggle */
.pr-toggle{
  position:relative; display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; margin:0 auto 16px; padding:5px; border-radius:99px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
}
.pr-thumb{
  position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:99px;
  background:linear-gradient(120deg,#7c5cff,#ff6b9d); box-shadow:0 10px 26px -8px rgba(124,92,255,.85);
  transform:translateX(calc(var(--i,0) * 100%)); transition:transform .55s cubic-bezier(.3,1.35,.4,1);
}
.pr-toggle button{
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border:0; border-radius:99px;
  background:none; color:#b9b7c9; font:600 .92rem/1 var(--ff-body); cursor:pointer; transition:color .3s;
}
.pr-toggle button[aria-checked="true"]{ color:#fff; }
.pr-toggle em{ font-style:normal; font-size:.72rem; padding:3px 8px; border-radius:99px; background:rgba(255,255,255,.18); }
.pr-spark{
  position:absolute; left:var(--x); top:50%; width:7px; height:7px; border-radius:50%; background:var(--sc); box-shadow:0 0 10px var(--sc); pointer-events:none;
  animation:prSpark .9s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes prSpark{ from{ opacity:1; transform:translate(-50%,-50%) scale(1); } to{ opacity:0; transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(0); } }
/* the savings line takes up its space all the time, so nothing jumps when you switch */
.pr-save{ height:24px; margin:0 0 66px; font-size:.92rem; color:var(--fg-dim); }
.pr-save b{ color:#ffd98a; font-weight:700; font-variant-numeric:tabular-nums; }
.pricing-section:not([data-billing="yearly"]) .pr-inner > .pr-save{ opacity:0; transform:translateY(-8px); }

/* the cards */
.pricing-grid{
  width:100%; max-width:920px; margin-inline:auto; margin-top:130px; display:grid; grid-template-columns:1fr 1.08fr; align-items:center; gap:clamp(16px,2.4vw,30px); perspective:1500px; text-align:left;
  /* room above for the featured card's "Most popular" badge and spinning seal, which sit above its top edge */
}
.price-card{ position:relative; opacity:0; }
.pricing-section.is-in .price-card{ opacity:1; animation:prIn 1s cubic-bezier(.2,.8,.2,1) calc(var(--n) * 150ms) backwards; }
.price-card.featured{ z-index:2; }
.pricing-section.is-in .price-card.featured{ animation:prIn 1s cubic-bezier(.2,.8,.2,1) calc(var(--n) * 150ms) backwards, prFloat 7s ease-in-out 1.8s infinite; }
@keyframes prIn{ from{ opacity:0; transform:translate3d(0,90px,0) rotateX(24deg) scale(.92); } }
@keyframes prFloat{ 50%{ transform:translate3d(0,-10px,0); } }
/* the scroll-driven fan: cards swing in from the sides as the section arrives and away as it leaves (--fan, set in initPricing) */
.pc-fan{
  --s:1; height:100%;
  transform:translate3d(0,calc(var(--fan,0) * var(--lift,70px)),0) rotateY(calc(var(--fan,0) * var(--side,0) * -22deg)) scale(calc(var(--s) - var(--fan,0) * var(--fan,0) * .05));
}
.price-card.featured .pc-fan{ --s:1.04; --lift:22px; }
/* real 3D: the card tilts, and its contents sit at different depths, so they slide against each other as it turns */
.pc-inner{
  position:relative; height:100%; padding:1.5px; border-radius:28px; background:rgba(255,255,255,.1); transform-style:preserve-3d;
  transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .3s ease-out; will-change:transform;
}
.pc-inner::before{ /* the gradient border: it spins on the popular plan, and on the others when you hover */
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .4s;
  background:conic-gradient(from var(--ang),var(--c1),var(--c2),var(--c1));
  animation:prSpin 4.5s linear infinite;
}
.price-card:hover .pc-inner::before, .price-card.featured .pc-inner::before{ opacity:1; }
@keyframes prSpin{ to{ --ang:360deg; } }
.pc-halo{
  position:absolute; inset:-14%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(124,92,255,.55),rgba(255,107,157,.18) 60%,transparent);
  animation:prHalo 5s ease-in-out infinite alternate;
}
@keyframes prHalo{ from{ opacity:.55; transform:scale(.94); } to{ opacity:1; transform:scale(1.06); } }
.pc-body{
  position:relative; height:100%; display:flex; flex-direction:column; border-radius:26.5px; transform-style:preserve-3d; transform:translateZ(1px);
  padding:34px 30px 30px; background:linear-gradient(180deg,#14141f,#0c0c15);
}
.price-card.featured .pc-body{ padding-block:44px 34px; background:linear-gradient(180deg,#191927,#0e0e18); }
.pc-body > h3{ transform:translateZ(26px); }
.pc-body > .pc-tag{ transform:translateZ(16px); }
.pc-body > .pc-price{ transform:translateZ(64px); }
.pc-body > .pc-note{ transform:translateZ(22px); }
.pc-body > .pc-list{ transform:translateZ(14px); }
.pc-body > .pc-cta{ margin-top:auto; transform:translateZ(38px); }
/* light effects live on a clipped layer of their own (clipping would flatten the 3D contents) */
.pc-fx{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; }
.price-card.featured .pc-fx::after{ /* a slow diagonal sheen */
  content:""; position:absolute; top:-30%; bottom:-30%; left:-60%; width:38%; transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent); animation:prSheen 5.5s ease-in-out infinite; will-change:transform;
}
@keyframes prSheen{ 0%,55%{ transform:translateX(0) rotate(18deg); } 100%{ transform:translateX(605%) rotate(18deg); } }   /* -60% to 170% of the card, moved rather than repainted */
.pc-glow{ /* light that follows the cursor */
  position:absolute; inset:0; opacity:0; transition:opacity .3s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c1) 26%,transparent),transparent 70%);
}
.price-card:hover .pc-glow{ opacity:1; }
.pc-foil{ /* a holographic foil that slides across the card as it tilts */
  position:absolute; inset:0; opacity:0; mix-blend-mode:screen; transition:opacity .4s;
  background:linear-gradient(115deg,transparent 18%,rgba(255,107,157,.34) 32%,rgba(255,201,77,.3) 42%,rgba(92,225,255,.34) 52%,rgba(124,92,255,.4) 62%,transparent 78%);
  background-size:260% 260%; background-position:var(--mx,50%) var(--my,50%);
}
.price-card:hover .pc-foil{ opacity:.5; }
.price-card.featured .pc-foil{ opacity:.26; }
.price-card.featured:hover .pc-foil{ opacity:.72; }
.pc-badge{
  position:absolute; top:-15px; left:50%; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:8px 15px; border-radius:99px; color:#fff; font:700 .74rem/1 var(--ff-body); letter-spacing:.03em; transform:translateX(-50%) translateZ(70px);
  background:linear-gradient(100deg,#7c5cff,#ff6b9d,#ffc94d,#7c5cff); background-size:300% 100%; animation:prShimmer 4s linear infinite;
  box-shadow:0 10px 26px -8px rgba(255,107,157,.8);
}
/* a seal that spins on the corner of the popular plan; it says "save 20%" when you pick yearly */
.pc-seal{
  position:absolute; top:-52px; right:-46px; width:118px; height:118px; pointer-events:none; transform:translateZ(90px) rotate(10deg);
  filter:drop-shadow(0 14px 22px rgba(255,107,157,.55));
}
.pc-seal text{ font:700 10.5px var(--ff-head); fill:#fff; letter-spacing:.06em; }
.seal-ring{ transform-origin:60px 60px; animation:prSpinSeal 16s linear infinite; }
.seal-star{ fill:#fff; }
@keyframes prSpinSeal{ to{ transform:rotate(360deg); } }
.price-card h3{ position:relative; margin:0 0 4px; font-size:1.5rem; letter-spacing:-.03em; color:#fff; }
.pc-tag{ position:relative; margin:0 0 22px; font-size:.86rem; color:var(--fg-dim); }
.pc-price{
  position:relative; display:flex; align-items:baseline; gap:4px; margin:0 0 6px; color:#fff; font-family:var(--ff-head); font-weight:600;
  font-size:clamp(3.6rem,5.6vw,5rem); line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums;
}
.pc-price .odo{ filter:drop-shadow(0 0 16px color-mix(in srgb,var(--c1) 55%,transparent)); } /* on the wheels as a whole, so the glow isn't clipped to each digit's box */
.pc-price .pc-cur{ align-self:flex-start; margin-top:.12em; font-size:.42em; letter-spacing:0; color:var(--c1); }
.pc-price .pc-cur.is-after{ align-self:flex-end; margin:0 0 .12em .14em; }
.pc-price .pc-per{ font-family:var(--ff-body); font-weight:500; font-size:.9rem; letter-spacing:0; color:var(--fg-dim); }
.pc-free span{
  background:linear-gradient(100deg,#fff 30%,var(--c1) 50%,#fff 70%); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:prShimmer 3.6s linear infinite;
}
@keyframes prShimmer{ to{ background-position:-260% 0; } }
.odo{ display:inline-flex; }
.odo-col{ display:block; height:1em; line-height:1; overflow:hidden; }
.odo-strip{
  display:flex; flex-direction:column; transform:translate3d(0,calc(var(--d,0) * -1em),0);
  transition:transform 1.2s cubic-bezier(.2,.9,.2,1); transition-delay:calc(var(--k,0) * 110ms);
}
.odo-strip i{ display:block; height:1em; font-style:normal; }
.pc-note{ position:relative; margin:0 0 24px; font-size:.82rem; color:var(--fg-dim); }
.pc-list{ position:relative; display:flex; flex-direction:column; gap:13px; margin:0 0 30px; padding:0; list-style:none; }
.pc-list li{ display:flex; align-items:center; gap:11px; font-size:.95rem; color:#dcdae8; }
.pc-list svg{ flex:none; width:19px; height:19px; padding:3px; border-radius:50%; box-sizing:content-box; fill:none; stroke:var(--c1); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; background:color-mix(in srgb,var(--c1) 14%,transparent); }
.pc-list svg path{ stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .6s ease calc(.75s + var(--n) * .15s + var(--i) * .13s); }
.pricing-section.is-in .pc-list svg path{ stroke-dashoffset:0; }
.pc-list li{ opacity:0; transform:translateX(-12px); transition:opacity .5s ease calc(.7s + var(--n) * .15s + var(--i) * .13s), transform .6s cubic-bezier(.2,.8,.2,1) calc(.7s + var(--n) * .15s + var(--i) * .13s); }
.pricing-section.is-in .pc-list li{ opacity:1; transform:none; }
.price-card .btn{ position:relative; width:100%; }
.price-card .btn-label{ width:100%; justify-content:space-between; }
.pr-foot{ margin:38px 0 0; font-size:.9rem; color:var(--fg-dim); }

@media (max-width:980px){
  .pricing-grid{ grid-template-columns:1fr; max-width:460px; gap:34px; perspective:none; margin-top:120px; } /* room for the featured card's badge + seal, which now sit right under the heading (order:-1 puts it first) */
  .price-card.featured{ order:-1; }
  .pc-fan{ transform:none; }
  .price-card.featured .pc-fan{ --s:1; }
  .pr-row{ font-size:clamp(5rem,26vw,9rem); }
  .pc-seal{ width:92px; height:92px; top:-40px; right:-10px; }
}
@media (prefers-reduced-motion:reduce){
  .pr-row, .pr-fly, .pr-plane i, .pr-aurora i, .pc-halo, .pc-inner::before, .pc-badge, .pc-free span, .price-card.featured .pc-fx::after, .seal-ring{ animation:none; }
  .price-card{ opacity:1; }
  .pr-inner > :not(.pricing-grid), .pricing-section h2{ opacity:1; transform:none; filter:none; transition:none; }
  .pc-list li{ opacity:1; transform:none; transition:none; }
  .pc-list svg path{ stroke-dashoffset:0; transition:none; }
  .odo-strip{ transition:none; }
}

/* ---------- the finale: a night sky, an Earth, and a name to claim ---------- */
.cta-section{ position:relative; min-height:120vh; display:flex; align-items:flex-start; overflow:hidden; padding-block:clamp(110px,16vh,170px) 0; }
.cta-scene{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 5%,rgba(0,0,0,.24) 10%,rgba(0,0,0,.55) 15%,rgba(0,0,0,.85) 20%,#000 25%,#000 76%,rgba(0,0,0,.9) 82%,rgba(0,0,0,.6) 88%,rgba(0,0,0,.28) 94%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 5%,rgba(0,0,0,.24) 10%,rgba(0,0,0,.55) 15%,rgba(0,0,0,.85) 20%,#000 25%,#000 76%,rgba(0,0,0,.9) 82%,rgba(0,0,0,.6) 88%,rgba(0,0,0,.28) 94%,rgba(0,0,0,0) 100%);
}
.cta-scene canvas{ display:block; }
.cta-inner{ position:relative; z-index:2; width:100%; max-width:720px; margin-inline:auto; text-align:center; }
.cta-inner > *{ opacity:0; transform:translateY(24px); transition:opacity .8s, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--n,0) * 90ms); }
.cta-section.is-in .cta-inner > *{ opacity:1; transform:none; }
.cta-section h2{ margin:0 0 .4em; font-size:clamp(2.7rem,6.2vw,5.2rem); letter-spacing:-.045em; line-height:1; color:#fff; }
.cta-section .hero-sub{ max-width:46ch; margin:0 auto 34px; color:rgba(255,255,255,.75); text-shadow:none; }

.claim-wrap{ position:relative; }
.claim{ width:min(620px,100%); margin:0 auto; }
.claim-row{
  display:flex; align-items:center; gap:10px; padding:7px; border-radius:99px;
  background:rgba(12,10,32,.55); border:1px solid rgba(255,255,255,.18); transition:border-color .3s, box-shadow .3s;
}
.claim-row:focus-within{ border-color:rgba(255,120,175,.75); box-shadow:0 0 0 4px rgba(124,92,255,.24), 0 24px 60px -22px rgba(255,107,157,.6); }
.claim[data-state="ok"] .claim-row{ border-color:rgba(125,255,176,.55); }
.claim[data-state="bad"] .claim-row{ border-color:rgba(255,120,150,.6); }
.claim.is-sending .claim-row{ border-color:rgba(255,190,220,.9); box-shadow:0 0 44px -6px rgba(255,107,157,.75); }
.claim-field{ flex:1; min-width:0; display:flex; align-items:center; gap:2px; padding:0 8px 0 22px; cursor:text; }
.claim-prefix{ flex:none; color:#a9a6bd; font:500 1.02rem/1 var(--ff-body); white-space:nowrap; }
.claim-field input{ flex:1; min-width:0; padding:16px 6px; border:0; outline:0; background:none; color:#fff; font:600 1.05rem/1 var(--ff-body); }
.claim-field input::placeholder{ color:rgba(255,255,255,.34); font-weight:500; }
.claim-status{ position:relative; flex:none; width:26px; height:26px; }
.claim-status > *{ position:absolute; inset:0; margin:auto; opacity:0; transform:scale(.6); transition:opacity .25s, transform .35s cubic-bezier(.2,.9,.3,1.4); }
.cs-spin{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.25); border-top-color:#fff; }
.claim[data-state="checking"] .cs-spin{ animation:csSpin .7s linear infinite; } /* only spins while it is checking */
@keyframes csSpin{ to{ transform:rotate(360deg); } }
.claim-status svg{ width:22px; height:22px; fill:none; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.cs-ok{ stroke:#7dffb0; } .cs-no{ stroke:#ff8fb0; }
.claim[data-state="checking"] .cs-spin, .claim[data-state="ok"] .cs-ok, .claim[data-state="bad"] .cs-no{ opacity:1; transform:none; }
.claim[data-state="checking"] .cs-spin{ transform:none; }
.claim .btn-lg{ flex:none; }
.claim-more{ display:grid; grid-template-rows:0fr; margin-top:0; transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1), margin .45s; }
.claim-more > div{ overflow:hidden; min-height:0; }
.claim.is-open .claim-more{ grid-template-rows:1fr; margin-top:12px; }
.claim-more input{
  width:100%; padding:14px 22px; border-radius:99px; border:1px solid rgba(255,255,255,.14); outline:0; background:rgba(12,10,32,.45);
  color:#fff; font:500 .95rem/1 var(--ff-body); transition:border-color .3s, box-shadow .3s;
}
.claim-more input::placeholder{ color:rgba(255,255,255,.34); }
.claim-more input:focus-visible{ border-color:rgba(255,120,175,.7); box-shadow:0 0 0 3px rgba(124,92,255,.22); }
.claim-hint{ min-height:24px; margin:14px 0 0; font-size:.92rem; color:var(--fg-dim); transition:color .3s; }
.claim[data-state="ok"] .claim-hint{ color:#7dffb0; }
.claim[data-state="bad"] .claim-hint{ color:#ff9db8; }
.claim-done{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.claim-done[hidden], .claim[hidden]{ display:none; }
.claim-tick{
  display:grid; place-items:center; width:58px; height:58px; margin-bottom:6px; border-radius:50%; color:#fff; font-size:1.7rem;
  background:linear-gradient(140deg,#12a066,#33d688); box-shadow:0 14px 34px -10px rgba(18,160,102,.75); animation:tickPop .7s cubic-bezier(.2,.9,.3,1.5) both;
}
@keyframes tickPop{ from{ transform:scale(.3); opacity:0; } }
.claim-done-title{ margin:0; color:#fff; font:600 clamp(1.5rem,3.4vw,2.2rem)/1.15 var(--ff-head); letter-spacing:-.03em; outline:none; }
.claim-done-title b{ color:#ff8fb8; font-weight:600; }
.claim-done-sub{ max-width:44ch; margin:0 0 12px; color:rgba(255,255,255,.75); line-height:1.5; }
.claim-done-actions{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px 22px; }
.claim-again{ padding:8px 4px; border:0; background:none; color:var(--fg-dim); font:500 .9rem var(--ff-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.claim-again:hover{ color:#fff; }
@media (max-width:560px){
  .claim-row{ flex-direction:column; align-items:stretch; gap:8px; border-radius:30px; }
  .claim-field{ padding-left:18px; }
  .claim-row .btn{ width:100%; }
}

/* ---------- footer ---------- */
.site-footer{ position:relative; padding-block:0 30px; }
.ft-mark{
  display:flex; justify-content:center; margin-bottom:10px; font:700 clamp(5.6rem,27vw,23rem)/.82 var(--ff-head); letter-spacing:-.06em; user-select:none;
}
.ft-mark span{ /* an outline that fills with colour around the cursor and rises toward it (see initWordmark) */
  display:inline-block; --k:0; padding-inline:.02em; color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,calc(.11 + var(--k) * .55));
  background:radial-gradient(circle 280px at var(--gx,50%) var(--gy,140%),rgba(255,107,157,.95),rgba(124,92,255,.8) 46%,rgba(124,92,255,0) 74%);
  -webkit-background-clip:text; background-clip:text;
  transform:translateY(calc(var(--k) * -.07em)) scale(calc(1 + var(--k) * .035));
  transition:transform .4s cubic-bezier(.2,.9,.3,1.25); will-change:transform;
}
/* the support band at the top of the footer (a tip jar on Ko-fi) */
.support-band{
  display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:56px; padding:26px 30px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(124,92,255,.14),rgba(255,107,157,.1) 60%,rgba(255,209,102,.08));
}
#support[hidden]{ display:none; }
.sb-copy{ display:flex; align-items:center; gap:18px; }
.sb-cup{ flex:none; display:grid; place-items:center; width:54px; height:54px; border-radius:16px; font-size:1.6rem; background:rgba(255,255,255,.06); }
.support-band h3{ font:600 1.25rem/1.25 var(--ff-head); margin:0 0 4px; }
.support-band p{ margin:0; font-size:.92rem; color:var(--fg-dim); max-width:46ch; }
.sb-btn{ flex:none; white-space:nowrap; gap:8px; }
@media (max-width:700px){ .support-band{ flex-direction:column; align-items:flex-start; padding:22px; } .sb-btn{ width:100%; justify-content:center; } }
/* undoing a purchase: a countdown and a button that asks twice (see refundControl); the dialogs are light panels */
.od-refund{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:18px 0 0; padding:14px 16px; border:1px dashed #d5d5e6; border-radius:14px; text-align:left; }
.od-refund p{ margin:0; font-size:.88rem; color:#4b4b5e; }
.od-refund p b{ color:#0b0b12; font-variant-numeric:tabular-nums; }
.od-refund-btn{ padding:9px 16px; border-radius:99px; border:1px solid #d5d5e6; background:#f4f4fb; color:#0b0b12; font:600 .8rem/1 var(--ff-body); cursor:pointer; transition:background-color .2s, border-color .2s, color .2s; font-variant-numeric:tabular-nums; }
.od-refund-btn:hover{ background:#e6e6f2; }
.od-refund-btn.is-armed{ background:#e0244d; border-color:#e0244d; color:#fff; }
.od-refund-btn:disabled{ opacity:.6; cursor:default; }
.od-refund-err{ flex-basis:100%; color:#a8002f !important; }
.od-refund.is-compact{ margin:0 0 0 auto; padding:0; border:0; }
.od-refund.is-compact .od-refund-btn{ padding:6px 11px; font-size:.72rem; }
.od-tick-refund{ background:#e6e6f2 !important; color:#0b0b12 !important; }
.au-code{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 8px; padding:14px 16px; border-radius:14px; background:#f4f4fb; border:1px solid #e1e1ee; text-align:left; }
.au-code span{ font-size:.86rem; line-height:1.4; color:#4b4b5e; }
.au-code b{ flex:none; color:#0b0b12; font:700 2rem/1 var(--ff-head); letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.au-wait{ margin:8px 0 20px; font-size:.86rem; color:#4b4b5e; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:50px; }
.footer-brand p{ font-size:.9rem; margin-top:10px; }
.footer-col h4{ font-family:var(--ff-head); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-dim); margin-bottom:14px; }
.footer-col a{ display:block; font-size:.92rem; color:var(--fg-dim); margin-bottom:10px; }
.footer-col a:hover{ color:var(--fg); }
.footer-bottom{ position:relative; font-size:.8rem; color:var(--fg-dim); padding-top:24px; display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:space-between; }
.footer-bottom::before{ content:""; position:absolute; top:0; left:24px; right:24px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); } /* a divider that fades out at both ends */
.model-credit{ max-width:60ch; font-size:.75rem; line-height:1.5; }
.model-credit a{ color:var(--fg-dim); text-decoration:underline; text-underline-offset:2px; }
.model-credit a:hover{ color:var(--fg); }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (prefers-reduced-motion:reduce){
  .cta-inner > *{ opacity:1; transform:none; transition:none; }
  .cs-spin, .claim-tick{ animation:none; }
  .ft-mark span{ transition:none; }
}

/* ---------- letter-roll hover (see initLetterRoll) ---------- */
/* each letter is a 2-line stack in an overflow-hidden box; the bottom padding is exactly the
   gap, so the copy below never peeks through and descenders aren't clipped */
.roll-word{ display:inline-block; white-space:nowrap; }
.roll-char{
  position:relative; display:inline-block; vertical-align:top;
  overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em;
}
.roll-char > span + span{ position:absolute; left:0; top:100%; }
.roll-char > span{
  display:block; white-space:pre;
  transition:transform .55s cubic-bezier(.65,0,.35,1); transition-delay:calc(var(--i, 0) * 22ms);
}
.rollable:hover .roll-char > span,
.rollable:focus-visible .roll-char > span,
.roll-heading .roll-word:hover .roll-char > span{ transform:translateY(calc(-100% - .1em)); }
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* the cursor stays visible over light panels through a dark edge (blend modes would re-blend the whole page on every frame) */
.cursor-dot{ box-shadow:0 0 0 1.5px rgba(8,8,12,.55); }
.cursor-ring{ box-shadow:0 0 0 1px rgba(8,8,12,.3), inset 0 0 0 1px rgba(8,8,12,.3); }

/* ---------- menu pill + full-screen menu ---------- */
.menu-pill{
  display:inline-flex; align-items:center; gap:12px; padding:14px 20px; border:0; border-radius:100px; cursor:pointer;
  font:500 .78rem/1 var(--ff-body); text-transform:uppercase; letter-spacing:.03em;
  color:var(--fg); background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:background-color .3s, color .3s, box-shadow .3s;
}
.menu-pill-dots{ display:inline-flex; gap:4px; transition:gap .3s cubic-bezier(.65,0,.35,1); }
.menu-pill-dots i{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.menu-pill:hover .menu-pill-dots{ gap:8px; }
.menu-pill:hover{ background:#fff; color:#0b0b12; }
body.menu-open .menu-pill{ background:#0b0b12; color:#fff; box-shadow:none; }
body.menu-open .menu-pill-dots{ gap:0; }

.menu-overlay{
  position:fixed; inset:0; z-index:890; background:#eff0fa; color:#0b0b12;
  visibility:hidden; pointer-events:none; overflow-y:auto;
  clip-path:circle(0 at calc(100% - 64px) 44px);
  transition:clip-path .85s cubic-bezier(.76,0,.24,1), visibility 0s .85s;
}
body.menu-open .menu-overlay{
  visibility:visible; pointer-events:auto; clip-path:circle(150vmax at calc(100% - 64px) 44px);
  transition:clip-path .85s cubic-bezier(.76,0,.24,1), visibility 0s;
}
.menu-inner{
  min-height:100%; display:flex; flex-direction:column; justify-content:center;
  padding-top:110px; padding-bottom:36px;
}
.menu-links{ display:flex; flex-direction:column; }
.menu-link{
  display:flex; align-items:baseline; gap:clamp(14px,2vw,28px); overflow:hidden;
  padding-block:.02em .1em; border-bottom:1px solid rgba(11,11,18,.1);
}
.menu-num{ font:500 .8rem var(--ff-head); letter-spacing:.06em; color:#6b6b80; min-width:2ch; }
.menu-link-inner{
  display:block; font-family:var(--ff-head); font-weight:400; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(2.6rem,8.2vw,6.6rem); color:#0b0b12;
  transform:translateY(115%); transition:transform .8s cubic-bezier(.16,1,.3,1), color .3s;
}
.menu-link:hover .menu-link-inner{ color:var(--accent); }
body.menu-open .menu-link-inner{ transform:none; transition-delay:calc(.28s + var(--n, 0) * 70ms), 0s; }
.menu-link:nth-child(1) .menu-link-inner{ --n:0; } .menu-link:nth-child(2) .menu-link-inner{ --n:1; }
.menu-link:nth-child(3) .menu-link-inner{ --n:2; } .menu-link:nth-child(4) .menu-link-inner{ --n:3; }
.menu-link:nth-child(5) .menu-link-inner{ --n:4; }
.menu-meta{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px 40px; flex-wrap:wrap;
  margin-top:clamp(28px,6vh,64px);
  opacity:0; transform:translateY(16px); transition:opacity .4s, transform .4s;
}
body.menu-open .menu-meta{ opacity:1; transform:none; transition-duration:.7s; transition-delay:.7s; }
.menu-meta p{ margin:0; color:#3b3b4d; font-size:.95rem; line-height:1.4; }
.menu-social{ display:flex; gap:22px; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; }
.menu-social a{ color:#0b0b12; }
.menu-overlay .pill-btn{ background:#0b0b12; color:#fff; }
.menu-overlay .pill-arrow{ background:#fff; color:#0b0b12; }
.menu-overlay .pill-btn:hover .pill-arrow{ background:var(--accent); color:#fff; }

/* header while the menu is open: dark text on the light panel, only logo + close remain */
.site-header .logo, .site-header .main-nav, .site-header .text-link, .site-header .header-actions .btn{ transition:opacity .3s, color .3s; }
body.menu-open .site-header{ background:transparent; backdrop-filter:none; border-bottom-color:transparent; }
body.menu-open .site-header .logo-img{ opacity:0; }
body.menu-open .site-header .logo-img-light{ opacity:1; }
body.menu-open .site-header .main-nav,
body.menu-open .site-header .text-link,
body.menu-open .site-header .header-actions .btn{ opacity:0; pointer-events:none; }
@media (max-width:700px){ .header-actions .text-link{ display:none; } }
@media (max-width:480px){ .header-actions .btn{ display:none; } .header-inner{ gap:12px; } .header-actions{ gap:10px; } .site-header .logo-img{ height:26px; } }
@media (max-width:390px){ .site-header .logo-img{ height:24px; } }
@media (max-width:760px){ .menu-meta{ flex-direction:column; align-items:flex-start; } }

/* ---------- the app: pinned, scroll-driven phone (see initPhoneSection) ---------- */
.phone-section{ position:relative; background:#0d0a24; }
.phone-track{ position:relative; height:880vh; }   /* the intro keeps ~170vh of it; the five slides share the rest (see INTRO in initPhoneSection) */
/* the backdrop colour is set from JS (one saturated tint per tool); the gradients only add depth */
.phone-sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background-color:#0d0a24; }
/* the depth gradients live on their own layer: repainting them every frame (as the colour above changes) is slow */
.phone-glow{
  position:absolute; inset:0; pointer-events:none; will-change:transform; transform:translateZ(0);
  background-image:
    radial-gradient(50% 58% at 50% 48%, rgba(255,255,255,.17), transparent 72%),
    radial-gradient(110% 55% at 50% 118%, rgba(0,0,0,.30), transparent 70%);
}
.phone-planes{ position:absolute; inset:0; pointer-events:none; }
.phone-plane{ position:absolute; fill:none; stroke:#fff; stroke-width:1.3; stroke-linejoin:round; opacity:.3; will-change:transform; }
.phone-words{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.phone-word{
  position:absolute; left:0; right:0; top:50%; opacity:0; text-align:center; white-space:nowrap;
  font:700 min(27vw,46vh)/.8 var(--ff-head); letter-spacing:-.05em; color:rgba(255,255,255,.12); will-change:transform,opacity;
}

.phone-intro, .phone-ring-copy{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; pointer-events:none;
}
.phone-intro{ z-index:0; padding-inline:20px; will-change:transform,opacity; }
.pi-row{ display:flex; align-items:center; justify-content:center; gap:var(--gap,340px); }
.phone-intro h2{
  margin:0; font-size:clamp(2.4rem,6.6vw,6.2rem); font-weight:500; line-height:.98; letter-spacing:-.04em; color:#fff;
}
.pi-l{ text-align:right; }
.pi-r{ text-align:left; }
.phone-intro-sub{ max-width:24ch; margin:22px 0 0; font-size:1rem; line-height:1.45; color:rgba(255,255,255,.75); }
.phone-ring-copy{
  z-index:2; margin:0; padding-bottom:6vh; justify-content:flex-end; opacity:0;
  font:500 .78rem/1 var(--ff-body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85);
}

.phone-links{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:0; }
.phone-links line{ stroke:rgba(255,255,255,.55); stroke-width:1.2; stroke-dasharray:3 7; stroke-linecap:round; }

.phone-stage{ position:absolute; inset:0; z-index:1; perspective:1500px; }
.phone{
  position:absolute; left:50%; top:50%; width:280px; height:580px; margin:-290px 0 0 -140px;
  transform-style:preserve-3d; will-change:transform;
}
/* solid titanium-style body: a stack of rounded-rect layers gives the edge its thickness */
.phone-layers{ position:absolute; inset:0; transform-style:preserve-3d; }
.phone-layers i{ position:absolute; inset:0; border-radius:44px; background:#2b2b39; border:1px solid #56566b; }
.phone-layers i.back{ background:#101018; box-shadow:0 50px 70px -18px rgba(0,0,0,.5); }
.phone-btn{ position:absolute; width:4px; border-radius:2px; background:#3c3c4d; transform:translateZ(0); }
.phone-btn.vol{ left:-3px; top:112px; height:50px; }
.phone-btn.pwr{ right:-3px; top:150px; height:78px; }
.phone-front{
  position:absolute; inset:0; border-radius:44px; overflow:hidden; transform:translateZ(8.5px);
  background:#0a0a10; border:2px solid #7d7d94;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 6px #0a0a10;
}
.phone-front::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 30%);
}
.phone-status{
  position:absolute; top:16px; left:0; right:0; height:22px; padding:0 32px; z-index:3;
  display:flex; align-items:center; justify-content:space-between; font:600 11px var(--ff-body); color:#fff;
}
.phone-island{ position:absolute; left:50%; top:0; width:78px; height:22px; margin-left:-39px; border-radius:20px; background:#000; }
.phone-status i{ width:20px; height:9px; border-radius:3px; border:1px solid rgba(255,255,255,.7); background:linear-gradient(90deg,#fff 0 72%,transparent 72%); }
.phone-screen{ position:absolute; inset:9px; border-radius:36px; overflow:hidden; background:#0b0a1c; }
/* screens slide vertically: the outgoing one leaves upward, the next rises in from below */
.pscreen{
  position:absolute; inset:0; padding:52px 14px 14px; display:flex; flex-direction:column; gap:8px;
  font-size:11px; color:#fff; opacity:0; transform:translateY(28px) scale(.98);
  transition:opacity .5s, transform .7s cubic-bezier(.16,1,.3,1);
}
.pscreen[data-s="on"]{ opacity:1; transform:none; }
.pscreen[data-s="before"]{ transform:translateY(-28px) scale(.98); }
.pscreen svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pscreen.idle{ align-items:center; justify-content:center; background:radial-gradient(70% 42% at 50% 42%,rgba(124,92,255,.55),transparent 70%); }
.idle-logo{ width:56%; }
.idle-logo img{ display:block; width:100%; height:auto; }
/* the product screens are full-bleed: they own their whole area */
.pscreen.s-ms, .pscreen.s-spooky, .pscreen.s-pixel, .pscreen.s-pinky, .pscreen.s-xp{ padding:0; display:block; gap:0; }

/* ---- 1 · messenger: a sent4u.link link goes out (all CSS, restarts each time the slide becomes active) ---- */
.s-ms{ background:#0c0b16; }
.ms-head{ position:absolute; top:34px; left:0; right:0; height:46px; display:flex; align-items:center; gap:8px; padding:0 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.ms-back{ font-size:22px; line-height:1; color:#bdb8ff; margin-right:-2px; }
.ms-av{ flex:none; width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#ff6b9d,#ffb86b); }
.ms-who{ display:flex; flex-direction:column; gap:1px; }
.ms-who b{ font-size:12px; }
.ms-who small{ display:flex; align-items:center; gap:4px; font-size:8.5px; color:#8f8cab; }
.ms-who small i{ width:5px; height:5px; border-radius:50%; background:#3ddc84; }
.ms-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; color:#bdb8ff; }
.ms-actions svg{ stroke-width:1.7; }
.ms-body{ position:absolute; top:86px; left:0; right:0; bottom:56px; padding:10px 12px; display:flex; flex-direction:column; gap:7px; }
.ms-time{ text-align:center; font-size:8.5px; color:#77749a; margin-bottom:2px; }
.ms-msg{ max-width:80%; padding:8px 11px; border-radius:16px; font-size:11px; line-height:1.35; }
.ms-msg.in{ align-self:flex-start; background:rgba(255,255,255,.1); border-bottom-left-radius:5px; }
.ms-msg.out{ align-self:flex-end; background:linear-gradient(135deg,#7c5cff,#b45cff 60%,#ff6b9d); border-bottom-right-radius:5px; }
.ms-link-msg{ padding:4px; opacity:0; transform:translateY(26px) scale(.92); transform-origin:100% 100%; }
.ms-url{ display:block; padding:4px 7px 6px; font-size:10.5px; text-decoration:underline; text-underline-offset:2px; }
.ms-card{ overflow:hidden; border-radius:12px; background:#fff; color:#0b0b12; }
.ms-thumb{ position:relative; height:72px; display:grid; place-items:center; color:#fff; background:linear-gradient(140deg,#3b30ff,#8a5cff 55%,#ff6b9d); }
.ms-thumb span{ font:700 22px var(--ff-head); letter-spacing:.02em; }
.ms-thumb-spooky{ background:#1c0f38 url("assets/showcase/spooky-1-gate.webp") 50% 27% / cover no-repeat; }   /* the link preview is the card itself */
.ms-thumb-spooky span{ display:none; }
.ms-thumb svg{ position:absolute; right:10px; bottom:8px; fill:none; stroke:#fff; stroke-width:1.5; opacity:.85; }
.ms-meta{ padding:7px 9px 9px; display:flex; flex-direction:column; gap:2px; }
.ms-meta small{ font-size:8.5px; color:#6b6b80; text-transform:uppercase; letter-spacing:.05em; }
.ms-meta b{ font-size:10.5px; line-height:1.25; color:#0b0b12; }
.ms-status{ position:relative; align-self:flex-end; height:12px; margin-top:-3px; font-size:8.5px; color:#8f8cab; }
.ms-status span{ position:absolute; right:2px; top:0; white-space:nowrap; opacity:0; }
.ms-typing{ display:flex; gap:4px; padding:11px 13px; opacity:0; }
.ms-typing i{ width:6px; height:6px; border-radius:50%; background:#bdb8ff; }
.ms-reply{ opacity:0; transform:translateY(16px) scale(.94); transform-origin:0 100%; }
.ms-input{ position:absolute; left:10px; right:10px; bottom:14px; height:34px; display:flex; align-items:center; gap:8px; padding:0 5px 0 13px; border-radius:20px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.1); font-size:11px; }
.ms-ph{ position:absolute; left:13px; color:#77749a; }
.ms-typed{ position:relative; flex:1; white-space:nowrap; overflow:hidden; }
.ms-typed span{ display:inline-block; clip-path:inset(0 100% 0 0); }
.ms-send{ position:relative; margin-left:auto; flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#7c5cff,#ff6b9d); }
.ms-send svg{ fill:#fff; stroke:none; }
.pscreen[data-s="on"] .ms-ph{ animation:msGone .1s .55s forwards; }
.pscreen[data-s="on"] .ms-typed span{ animation:msType 1.3s .6s steps(19) both, msGone .15s 2.05s forwards; }
.pscreen[data-s="on"] .ms-send{ animation:msPulse .4s 1.95s both; }
.pscreen[data-s="on"] .ms-link-msg{ animation:msPop .55s 2.1s cubic-bezier(.2,.9,.3,1.15) both; }
.pscreen[data-s="on"] .ms-st1{ animation:msShow .3s 2.9s both, msGone .3s 3.9s forwards; }
.pscreen[data-s="on"] .ms-st2{ animation:msShow .3s 3.9s both; }
.pscreen[data-s="on"] .ms-typing{ animation:msShow .3s 4.2s both, msGone .2s 5.3s forwards; }
.pscreen[data-s="on"] .ms-typing i{ animation:msDot .9s infinite; }
.pscreen[data-s="on"] .ms-typing i:nth-child(2){ animation-delay:.15s; }
.pscreen[data-s="on"] .ms-typing i:nth-child(3){ animation-delay:.3s; }
.pscreen[data-s="on"] .ms-reply{ animation:msPop .5s 5.4s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes msType{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes msGone{ to{ opacity:0; } }
@keyframes msShow{ from{ opacity:0; } to{ opacity:1; } }
@keyframes msPop{ from{ opacity:0; transform:translateY(26px) scale(.92); } to{ opacity:1; transform:none; } }
@keyframes msPulse{ 50%{ transform:scale(.78); } }
@keyframes msDot{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-3px); opacity:1; } }

/* ---- 2 · Pixel: Game Boy LCD (olive #9bb477, ink #20351b, the site's own LoveLCD font) ---- */
.s-pixel{ background:#9bb477; color:#20351b; font-family:LCD,monospace; }
.s-pixel::before{
  content:""; position:absolute; inset:0; opacity:.2; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 3h4M3 0v4' stroke='%2320351b' stroke-width='.4'/%3E%3C/svg%3E");
}
.px-scene{ position:absolute; inset:0; width:100%; height:100%; stroke:none; }
.px-top{ position:absolute; top:38px; left:12px; right:12px; display:flex; align-items:center; gap:6px; font-size:8px; letter-spacing:.04em; }
.px-net{ flex:1; }
.px-bars{ display:flex; align-items:flex-end; gap:2px; height:13px; }
.px-bars i{ width:3px; background:#20351b; }
.px-bars i:nth-child(1){ height:4px; } .px-bars i:nth-child(2){ height:7px; } .px-bars i:nth-child(3){ height:10px; } .px-bars i:nth-child(4){ height:13px; }
.px-batt{ display:flex; gap:1px; width:22px; height:10px; padding:1px; border:2px solid #20351b; }
.px-batt i{ flex:1; background:#20351b; }
.px-logo{ position:absolute; top:60px; left:0; right:0; }
.px-logo img, .pk-logo img{ display:block; height:13px; width:auto; margin:0 auto; }   /* the logo's lettering, as in the real cards */
.px-new{ position:absolute; top:100px; left:0; right:0; text-align:center; font-size:8px; letter-spacing:.06em; }
.px-title{ position:absolute; top:116px; left:66px; right:66px; text-align:center; font-size:24px; line-height:1.15; }   /* a narrow block: three short lines, clear of the moon and sparkles */
.px-btns{ position:absolute; left:14px; right:14px; bottom:36px; display:flex; justify-content:space-between; font-size:17px; }
.px-cap{ position:absolute; bottom:15px; left:0; right:0; text-align:center; font-size:6px; letter-spacing:.06em; }
.pscreen[data-s="on"] .px-heart{ animation:pxBeat 1s steps(1) infinite; }
@keyframes pxBeat{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }

/* ---- 3 · Pinky: black, neon #ff2e7e, Instrument Serif + Bodoni Moda italics ---- */
.s-pinky{ background:#000; font-family:"Plus Jakarta Sans",var(--ff-body); }
.pk-glow{ position:absolute; left:5%; top:32%; width:90%; height:32%; background:radial-gradient(closest-side,rgba(255,46,126,.3),transparent); }
.pk-line{ position:absolute; left:0; right:0; top:62%; height:1px; background:rgba(255,255,255,.1); }   /* Yes on top, No underneath: the same stacked layout as on a phone */
.pk-logo{ position:absolute; top:66px; left:0; right:0; }
.pk-logo img{ height:15px; }
.pk-bubble{
  position:absolute; left:22px; right:22px; top:124px; padding:13px 16px; text-align:center; color:#fff;
  font:italic 700 15px/1.25 "Bodoni Moda",Georgia,serif; background:#16050d; border:1.5px solid #ff2e7e; border-radius:14px;
  box-shadow:0 0 20px rgba(255,46,126,.55), inset 0 0 14px rgba(255,46,126,.22);
}
.pk-bubble::before, .pk-bubble::after{ content:""; position:absolute; left:16px; border:solid transparent; border-bottom:0; }
.pk-bubble::before{ bottom:-10px; border-width:10px 9px 0; border-top-color:#ff2e7e; }
.pk-bubble::after{ bottom:-7.5px; left:17.5px; border-width:8px 7.5px 0; border-top-color:#16050d; }
.pk-heart{ position:absolute; right:-8px; top:-12px; font-style:normal; font-size:22px; line-height:1; color:#ff2e7e; filter:drop-shadow(0 0 6px rgba(255,46,126,.9)); }
.pk-yes, .pk-no{ position:absolute; left:0; right:0; text-align:center; font:italic 400 66px/1 "Instrument Serif",Georgia,serif; }
.pk-yes{ top:218px; color:#ff2e7e; text-shadow:0 0 30px rgba(255,46,126,.5); }
.pk-no{ top:424px; color:#d6d6d6; }
.pscreen[data-s="on"] .pk-bubble{ animation:pkPop .6s .2s cubic-bezier(.2,.9,.3,1.2) both, pkGlow 2.6s 1s ease-in-out infinite; }
.pscreen[data-s="on"] .pk-heart{ animation:pkBeat 1.3s ease-in-out infinite; }
.pscreen[data-s="on"] .pk-yes{ animation:pkBreath 3s ease-in-out infinite; }
@keyframes pkPop{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:none; } }
@keyframes pkGlow{ 50%{ box-shadow:0 0 30px rgba(255,46,126,.8), inset 0 0 18px rgba(255,46,126,.32); } }
@keyframes pkBeat{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.22); } }
@keyframes pkBreath{ 50%{ text-shadow:0 0 44px rgba(255,46,126,.85); } }

/* ---- 4 · WinXP: Bliss desktop, Luna window, Tahoma ---- */
.s-xp{ background:#2a7bde; font-family:Tahoma,Verdana,Arial,sans-serif; color:#fff; }
.xp-sky{
  position:absolute; inset:0;
  background:
    radial-gradient(40px 16px at 22% 27%, rgba(255,255,255,.92), transparent 70%),
    radial-gradient(52px 18px at 78% 20%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(60px 20px at 64% 46%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(34px 12px at 12% 52%, rgba(255,255,255,.8), transparent 70%),
    linear-gradient(180deg,#1a63d8 0%,#3b90e8 45%,#8fc6f5 72%);
}
.xp-hill{
  position:absolute; left:-40%; top:60%; width:190%; height:80%; border-radius:50% 50% 0 0 / 22% 22% 0 0; transform:rotate(-7deg);
  background:radial-gradient(60% 40% at 30% 10%,#93d052,transparent 70%), linear-gradient(180deg,#63b333 0%,#3f9a1e 45%,#2c7a12 100%);
}
.xp-icons{ position:absolute; left:6px; top:42px; display:flex; flex-direction:column; gap:8px; }
.xp-icon{ width:58px; text-align:center; font-size:7.5px; line-height:1.15; text-shadow:0 1px 2px rgba(0,0,0,.85); }
.xp-icon svg{ display:block; width:24px; height:24px; margin:0 auto 2px; stroke:none; fill:none; }
.xp-icon svg *{ stroke-width:1; }
.xp-icon span{ display:inline-block; padding:0 2px; }
.xp-window{ position:absolute; left:50px; right:6px; top:178px; border-radius:7px 7px 0 0; border:3px solid #0a4fd8; border-top:0; background:#0a4fd8; box-shadow:0 8px 22px rgba(0,20,80,.5); opacity:0; }
.xp-title{ display:flex; align-items:center; gap:4px; height:22px; padding:0 3px 0 5px; border-radius:6px 6px 0 0; font-size:8.5px; color:#fff; text-shadow:1px 1px 0 rgba(0,20,90,.7);
  background:linear-gradient(180deg,#3d95ff 0%,#0a5fe8 12%,#0553df 55%,#0a5fe8 88%,#0844b8 100%); }
.xp-title svg{ stroke:none; flex:none; }
.xp-title b{ flex:1; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xp-wb{ display:flex; gap:2px; }
.xp-wb i{ position:relative; width:13px; height:13px; border-radius:3px; border:1px solid #fff; background:linear-gradient(180deg,#5fa0ff,#2a68e8); display:grid; place-items:center; font:700 8px/1 Tahoma,sans-serif; color:#fff; }
.xp-wb i.x{ background:linear-gradient(180deg,#f0876a,#d6401c); }
.xp-wb i:nth-child(1)::after{ content:"_"; margin-top:-4px; }
.xp-wb i:nth-child(2)::after{ content:"□"; font-size:9px; }
.xp-wb i.x::after{ content:"✕"; font-size:7px; }
.xp-menu{ display:flex; gap:9px; padding:3px 7px; font-size:7.5px; color:#111; background:#ece9d8; border-bottom:1px solid #cfcbb6; }
.xp-body{ padding:11px 8px 12px; text-align:center; background:#f6f4ea; }
.pscreen .xp-heart{ width:28px; height:25px; margin:0 auto 6px; display:block; stroke:none; }   /* (needs the .pscreen too: ".pscreen svg" would otherwise put a thick white outline on it) */
.xp-body p{ margin:0 0 11px; font-size:14px; font-weight:700; line-height:1.2; color:#12315d; }
.xp-btns{ display:flex; gap:7px; justify-content:center; }
.xp-b{ padding:5px 9px; font-size:9px; color:#062b59; background:linear-gradient(180deg,#fff,#ecebe5 85%,#d6d0c5); border:1px solid #003c74; border-radius:3px; }
.xp-b.def{ box-shadow:inset 0 0 0 1px #6fa0f0, inset 0 0 0 2px #b9d3fb; }
.xp-cursor{ position:absolute; left:0; top:0; width:12px; height:19px; opacity:0; stroke:none; z-index:4; }
.xp-taskbar{ position:absolute; left:0; right:0; bottom:0; height:26px; display:flex; align-items:center; gap:5px; background:linear-gradient(180deg,#3d8af5 0%,#245edb 15%,#1f52c8 85%,#1a44a8 100%); border-top:1px solid #4d92f7; }
.xp-start{ align-self:stretch; display:flex; align-items:center; gap:3px; padding:0 11px 0 7px; border-radius:0 10px 10px 0; font:italic 700 12px Tahoma,Verdana,sans-serif; text-shadow:1px 1px 1px rgba(0,0,0,.5); background:linear-gradient(180deg,#5cc05c 0%,#2f9a2f 20%,#2b8a2b 80%,#237523 100%); box-shadow:inset -1px 0 0 rgba(0,0,0,.25); }
.xp-start i{ font-style:normal; font-size:10px; }
.xp-quick{ width:6px; }
.xp-task{ flex:1; min-width:0; padding:4px 6px; border-radius:3px; font-size:7.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:linear-gradient(180deg,#1f57cf,#1447b5); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); opacity:0; }
.xp-tray{ align-self:stretch; display:flex; align-items:center; gap:5px; padding:0 8px; margin-left:auto; font-size:8px; background:linear-gradient(180deg,#19a0f5,#0f8ae8 20%,#0b7fdc); border-left:1px solid #0b3f9a; }
.xp-tray i{ font-style:normal; }
.pscreen[data-s="on"] .xp-cursor{ animation:xpCursor 1.3s .4s cubic-bezier(.4,0,.2,1) both, xpGone .25s 2.5s forwards; }
.pscreen[data-s="on"] .xp-invite span{ animation:xpSel .01s 1.7s forwards; }
.pscreen[data-s="on"] .xp-window{ animation:xpPop .45s 1.95s cubic-bezier(.2,.9,.3,1.15) both; }
.pscreen[data-s="on"] .xp-task{ animation:msShow .2s 2s both; }
@keyframes xpCursor{ from{ opacity:1; transform:translate(170px,440px); } 78%{ transform:translate(30px,262px) scale(1); } 88%{ transform:translate(30px,262px) scale(.82); } to{ opacity:1; transform:translate(30px,262px) scale(1); } }
@keyframes xpGone{ to{ opacity:0; } }
@keyframes xpSel{ to{ background:#316ac5; outline:1px dotted #fff; } }
@keyframes xpPop{ from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:none; } }


.phone-pills{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.tool-pill{
  position:absolute; left:50%; top:50%; display:inline-flex; align-items:center; gap:10px; padding:13px 20px;
  border:0; border-radius:100px; background:#fff; color:#0b0b12; cursor:pointer;
  font:500 .78rem/1 var(--ff-body); letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.12);
  opacity:0; pointer-events:none; will-change:transform,opacity; transition:background-color .3s, color .3s;
}
.tool-pill i{ width:7px; height:7px; border-radius:50%; background:var(--c); transition:transform .3s; }
.tool-pill.is-live{ pointer-events:auto; }
.tool-pill.is-live:hover, .tool-pill.is-on{ background:#0b0b12; color:#fff; }
.tool-pill.is-on{ box-shadow:0 0 0 1px rgba(255,255,255,.32), 0 10px 26px -10px rgba(0,0,0,.5); }
.tool-pill.is-live:hover i{ transform:scale(1.7); }

.phone-copy{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.pfeature{ position:absolute; inset:0; display:flex; align-items:center; visibility:hidden; }
.pfeature.text-l{ justify-content:flex-start; padding-left:clamp(28px,6vw,110px); }
.pfeature.text-r{ justify-content:flex-end; padding-right:clamp(28px,6vw,110px); }
.pf-inner{ width:min(360px,28vw); will-change:transform,opacity; }
.pf-kicker{ display:flex; align-items:center; gap:12px; margin:0 0 18px; font:500 .78rem/1 var(--ff-body); letter-spacing:.06em; color:#fff; }
.pf-kicker b{ font-weight:500; }
.pf-kicker i{ width:38px; height:1px; background:rgba(255,255,255,.55); }
.pf-kicker span{ opacity:.6; }
.pfeature h3{ margin:0 0 16px; font-size:clamp(2rem,3.4vw,3.2rem); font-weight:500; line-height:1.04; letter-spacing:-.03em; color:#fff; }
.pf-text{ margin:0; font-size:1.02rem; line-height:1.5; color:rgba(255,255,255,.84); }
.pf-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.pf-tags li{
  display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:100px;
  background:rgba(255,255,255,.16); color:#fff; font-size:.78rem; font-weight:500; letter-spacing:.02em;
}
.pf-tags li::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; }

@media (max-width:900px){
  .phone-intro{ justify-content:flex-start; padding-top:16vh; }
  .pi-row{ flex-direction:column; gap:0 !important; }
  .phone-intro h2{ font-size:clamp(2.4rem,11vw,3.4rem); }
  .pi-l, .pi-r{ text-align:center; }
  .pi-r br{ display:none; }
  .phone-intro-sub{ display:none; }
  .phone-ring-copy{ padding-bottom:12vh; }
  .pfeature.text-l, .pfeature.text-r{ align-items:flex-end; justify-content:flex-start; padding:0 22px 92px; }
  .pf-inner{ width:100%; }
  .pfeature h3{ margin-bottom:10px; font-size:1.7rem; }
  .pf-kicker{ margin-bottom:10px; }
  .pf-text{ font-size:.95rem; }
  .pf-tags{ display:none; }
  .tool-pill{ padding:10px 14px; gap:7px; font-size:.66rem; }
  .tool-pill i{ width:6px; height:6px; }
}

/* ---------- per-product themes: each slide re-skins the stage in that product's own design language ---------- */
@font-face{ font-family:LCD; src:url("assets/fonts/LoveLCD-Regular.woff2") format("woff2"); font-display:swap; }

.phone-glow-pink{
  opacity:0;
  background-image:radial-gradient(46% 52% at 50% 50%, rgba(255,46,126,.34), transparent 72%);
}
.phone-grid{
  position:absolute; inset:0; opacity:0; pointer-events:none; will-change:opacity;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 5h6M5 0v6' stroke='%2320351b' stroke-width='.6'/%3E%3C/svg%3E");
  background-size:6px 6px;
}
.phone-status{ color:var(--st,#fff); }
.phone-status i{ border-color:currentColor; background:linear-gradient(90deg,currentColor 0 72%,transparent 72%); }

/* giant word behind the phone */
.phone-word.w-spooky{ font-family:"Rubik Wet Paint","Space Grotesk",sans-serif; font-weight:400; letter-spacing:0; color:rgba(255,122,26,.15); }
.phone-word.w-pixel{ font-family:LCD,monospace; font-weight:400; letter-spacing:-.02em; color:rgba(32,53,27,.14); }
.phone-word.w-pinky{ font-family:"Instrument Serif",Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.03em; line-height:.8; color:rgba(255,46,126,.11); }
.phone-word.w-xp{ font-family:Tahoma,Verdana,sans-serif; font-weight:700; letter-spacing:-.04em; color:rgba(255,255,255,.17); }

/* copy: shared pieces */
.pf-link{
  display:inline-flex; align-items:center; gap:14px; margin-top:22px; padding:6px 6px 6px 20px; border-radius:100px; pointer-events:auto;
  background:#fff; color:#0b0b12; font:500 .92rem/1 var(--ff-body); letter-spacing:-.005em;
  box-shadow:0 6px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.08);
}
.pf-link i{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#0b0b12; color:#fff; font-style:normal; font-size:1rem;
  transition:transform .45s cubic-bezier(.65,0,.35,1), background-color .3s, color .3s;
}
.pf-link i::before{ content:"→"; }
.pf-link:hover i{ transform:rotate(-45deg); background:var(--accent); color:#fff; }
.pfeature h3 em{ font-style:italic; }

/* Pixel — LCD type, ink on olive, square corners */
.t-pixel, .t-pixel .pf-text, .t-pixel h3, .t-pixel .pf-kicker, .t-pixel .pf-tags li, .t-pixel .pf-link{ font-family:LCD,monospace; color:#20351b; }
.t-pixel h3{ font-weight:400; letter-spacing:0; line-height:1.08; font-size:clamp(1.9rem,3.1vw,2.9rem); }
.t-pixel .pf-text{ font-size:1.12rem; line-height:1.35; }
.t-pixel .pf-kicker{ font-size:.95rem; letter-spacing:.04em; }
.t-pixel .pf-kicker i{ background:#20351b; height:2px; }
.t-pixel .pf-kicker span{ opacity:.65; }
.t-pixel .pf-tags li{ border-radius:0; background:transparent; border:2px solid #20351b; font-size:.95rem; font-weight:400; letter-spacing:.02em; padding:7px 12px; }
.t-pixel .pf-tags li::before{ border-radius:0; background:#20351b; }
.t-pixel .pf-link{ border-radius:0; background:#20351b; color:#9bb477; box-shadow:4px 4px 0 rgba(32,53,27,.35); font-size:1rem; letter-spacing:.04em; }
.t-pixel .pf-link i{ border-radius:0; background:#9bb477; color:#20351b; }
.t-pixel .pf-link:hover i{ background:#e2f0c4; color:#20351b; }

/* Pinky — black stage, neon pink, italic serifs */
.t-pinky h3{ font-family:"Instrument Serif",Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.01em; line-height:1; font-size:clamp(2.6rem,4.6vw,4.2rem); }
.t-pinky h3 em{ color:#ff2e7e; text-shadow:0 0 28px rgba(255,46,126,.55); }
.t-pinky .pf-kicker{ color:#ff2e7e; font-family:"Plus Jakarta Sans",var(--ff-body); }
.t-pinky .pf-kicker i{ background:rgba(255,46,126,.55); }
.t-pinky .pf-text{ color:rgba(255,255,255,.72); }
.t-pinky .pf-tags li{ background:rgba(255,46,126,.1); border:1px solid rgba(255,46,126,.55); color:#ffd3e4; }
.t-pinky .pf-tags li::before{ background:#ff2e7e; box-shadow:0 0 8px #ff2e7e; }
.t-pinky .pf-link{ background:#ff2e7e; color:#fff; box-shadow:0 0 22px rgba(255,46,126,.55); }
.t-pinky .pf-link i{ background:#fff; color:#ff2e7e; }
.t-pinky .pf-link:hover i{ background:#0b0b12; color:#fff; }

/* WinXP — Tahoma, Luna buttons, start-button green */
.t-xp, .t-xp .pf-text, .t-xp h3, .t-xp .pf-kicker, .t-xp .pf-tags li, .t-xp .pf-link{ font-family:Tahoma,Verdana,Arial,sans-serif; }
.t-xp h3{ font-weight:700; letter-spacing:-.01em; font-size:clamp(1.9rem,3.2vw,2.9rem); text-shadow:2px 2px 0 rgba(0,40,130,.55); }
.t-xp .pf-text{ text-shadow:1px 1px 0 rgba(0,40,130,.45); color:#fff; }
.t-xp .pf-tags li{ border-radius:3px; background:linear-gradient(180deg,#fff,#ecebe5 85%,#d6d0c5); border:1px solid #003c74; color:#062b59; font-weight:400; font-size:.84rem; }
.t-xp .pf-tags li::before{ content:"♥"; width:auto; height:auto; background:none; border-radius:0; color:#e8455f; font-size:.75rem; line-height:1; }
.t-xp .pf-link{ border-radius:14px; background:linear-gradient(180deg,#5cc05c,#2f9a2f 25%,#2b8a2b 80%,#237523); color:#fff; font-style:italic; font-weight:700; font-size:1rem; letter-spacing:0; text-shadow:1px 1px 1px rgba(0,0,0,.45); }
.t-xp .pf-link i{ background:rgba(255,255,255,.28); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); text-shadow:none; font-style:normal; }
.t-xp .pf-link:hover{ background:linear-gradient(180deg,#7ad37a,#3fae3f 25%,#379a37 80%,#2d8a2d); color:#fff; }
.t-xp .pf-link:hover i{ background:rgba(255,255,255,.45); }

/* Halloween Night — the card's own palette: night purple, pumpkin orange, toxic green; dripping Rubik Wet Paint titles */
.t-spooky h3{ font-family:"Rubik Wet Paint","Space Grotesk",sans-serif; font-weight:400; letter-spacing:.01em; line-height:1; font-size:clamp(2.6rem,4.4vw,4.1rem);
  color:#ff8a1f; text-shadow:0 3px 0 #5a1d00, 0 0 26px rgba(255,122,26,.45); }
.t-spooky h3 em{ font-style:normal; color:#9dff6e; text-shadow:0 3px 0 #123f0a, 0 0 26px rgba(125,255,90,.45); }
.t-spooky .pf-kicker{ color:#ffb15c; flex-wrap:wrap; }
.t-spooky .pf-kicker i{ background:rgba(255,138,31,.6); }
.pf-new{ margin-left:4px; padding:5px 10px; border-radius:100px; font:600 .66rem/1 var(--ff-body); font-style:normal; letter-spacing:.08em; text-transform:uppercase;
  color:#1a0b00; background:linear-gradient(135deg,#ffb347,#ff7a1a); box-shadow:0 0 18px rgba(255,122,26,.55); }
.t-spooky .pf-text{ color:rgba(236,226,255,.86); }
.sp-steps{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; counter-reset:sp; }
.sp-steps li{ counter-increment:sp; display:flex; align-items:center; gap:11px; font:500 .86rem/1.2 var(--ff-body); color:rgba(236,226,255,.5); transition:color .35s; }
.sp-steps li::before{
  content:counter(sp); flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:.72rem;
  border:1px solid rgba(236,226,255,.28); transition:background-color .35s, border-color .35s, color .35s, box-shadow .35s;
}
.sp-steps li.is-done{ color:rgba(236,226,255,.72); }
.sp-steps li.is-done::before{ content:"✓"; border-color:rgba(157,255,110,.6); color:#9dff6e; }
.sp-steps li.is-on{ color:#fff; }
.sp-steps li.is-on::before{ background:#ff7a1a; border-color:#ff7a1a; color:#1a0b00; box-shadow:0 0 16px rgba(255,122,26,.7); }
.t-spooky .pf-link{ background:linear-gradient(135deg,#ffb347,#ff7a1a); color:#1a0b00; box-shadow:0 0 24px rgba(255,122,26,.45); }
.t-spooky .pf-link i{ background:#1a0b00; color:#ffb347; }
.t-spooky .pf-link:hover i{ background:#9dff6e; color:#0c2a05; }
.pill-spooky i{ box-shadow:0 0 8px #ff7a1a; }
@media (max-width:900px){
  .t-spooky h3{ font-size:clamp(1.8rem,8.4vw,2.3rem); white-space:nowrap; }
  .t-spooky .pf-text{ font-size:.88rem; line-height:1.42; }
  .t-spooky .pf-link{ margin-top:12px; }
  .pf-new{ padding:4px 8px; font-size:.6rem; }
  .sp-steps{ margin-top:10px; }
  .sp-steps li:not(.is-on){ display:none; }   /* a phone has room for the current chapter only */
}

/* the phone shows the real card, one still per chapter */
.s-spooky{ background:#1c0f38; }
.s-spooky img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.05); transition:opacity .45s, transform 1.4s cubic-bezier(.16,1,.3,1); }
.s-spooky img.is-on{ opacity:1; transform:none; }

/* the haunted hill behind the phone (built in initPhoneSection; --g, --e, --w, --k0…, --r0…, --f and --t are set from the scroll) */
.phone-spooky{ position:absolute; inset:0; pointer-events:none; opacity:0; visibility:hidden; overflow:hidden; }
.phone-spooky.is-live{ visibility:visible; }
.phone-spooky:not(.is-live) *{ animation-play-state:paused !important; }
.sp-sky{ position:absolute; inset:0;
  background:
    radial-gradient(70% 40% at 50% 78%, rgba(124,72,190,.55), transparent 70%),
    linear-gradient(180deg,#120826 0%,#24124a 38%,#3a1f68 66%,#160b2c 86%,#0b0617 100%); }
.sp-stars{ position:absolute; left:0; top:0; width:2px; height:2px; border-radius:50%; background:transparent; animation:spTwinkle 3.6s ease-in-out infinite; }
.sp-stars.b{ animation-delay:-1.8s; }
@keyframes spTwinkle{ 50%{ opacity:.35; } }
.sp-clouds i{ position:absolute; width:62vmax; height:20vmax; border-radius:50%; opacity:.55; will-change:transform;
  background:radial-gradient(closest-side,rgba(150,104,214,.42),rgba(150,104,214,.12) 60%,transparent); }
.sp-clouds i:nth-child(1){ left:-14vmax; top:8%; }
.sp-clouds i:nth-child(2){ right:-18vmax; top:24%; width:70vmax; opacity:.45; }
.sp-clouds i:nth-child(3){ left:20%; top:48%; width:56vmax; height:14vmax; opacity:.3; }
.sp-moon{
  position:absolute; left:9%; top:10%; width:clamp(84px,15vmin,170px); aspect-ratio:1; border-radius:50%; will-change:transform;
  background:radial-gradient(circle at 38% 34%,#fffbe8 0%,#f7e6a8 42%,#e5c873 74%,#c9a552 100%);
  box-shadow:0 0 50px 14px rgba(255,226,150,.26), 0 0 140px 50px rgba(170,120,255,.16);
}
.sp-moon::before{ content:""; position:absolute; inset:0; border-radius:50%; opacity:.5;
  background:radial-gradient(circle at 62% 58%,rgba(170,130,60,.5) 0 9%,transparent 10%), radial-gradient(circle at 34% 64%,rgba(170,130,60,.35) 0 6%,transparent 7%), radial-gradient(circle at 56% 28%,rgba(170,130,60,.3) 0 5%,transparent 6%); }
.sp-moon i{ position:absolute; inset:-60%; border-radius:50%; opacity:var(--f,0); background:radial-gradient(closest-side,rgba(255,228,160,.42),rgba(157,255,110,.12) 55%,transparent); }
.sp-sparks{ position:absolute; left:0; top:0; width:0; height:0; }
.sp-sparks i{ position:absolute; left:-3px; top:-3px; width:6px; height:6px; border-radius:50%; opacity:0; will-change:transform,opacity; }
.sp-bats{ position:absolute; inset:0; }
.sp-bat{ position:absolute; left:0; top:0; width:44px; height:22px; fill:#0d0618; will-change:transform; }
.sp-bat .wl, .sp-bat .wr{ transform-box:fill-box; animation:spFlap .34s ease-in-out infinite alternate; }
.sp-bat .wl{ transform-origin:100% 40%; } .sp-bat .wr{ transform-origin:0 40%; }
@keyframes spFlap{ to{ transform:scaleY(.35) rotate(0deg); } }
.sp-side{ position:absolute; bottom:0; height:min(46vh,430px); width:calc(min(46vh,430px) * 5 / 3); overflow:visible; }
.sp-left{ left:0; } .sp-right{ right:0; }
.sp-side .far{ fill:#25153f; } .sp-side .near{ fill:#0f0820; } .sp-side .ink{ fill:#130a24; }
.sp-win{ fill:#ffb547; opacity:calc(.25 + var(--w,0) * .75); animation:spFlicker 2.6s steps(2) infinite; }
.sp-win.g{ fill:#9dff6e; animation-delay:-1.1s; }
@keyframes spFlicker{ 0%,100%{ opacity:calc(.25 + var(--w,0) * .75); } 47%{ opacity:calc(.15 + var(--w,0) * .55); } }
.sp-bars{ fill:none; stroke:#120a22; stroke-width:5; stroke-linecap:round; }
.sp-gl, .sp-gr{ transform-box:fill-box; }
.sp-gl{ transform-origin:0 50%; transform:scaleX(calc(1 - var(--g,0) * .82)); }
.sp-gr{ transform-origin:100% 50%; transform:scaleX(calc(1 - var(--g,0) * .82)); }
.sp-stone{ fill:#3b2b5f; stroke:#1d1236; stroke-width:3; }
.sp-time{ font:700 21px "Space Grotesk",sans-serif; fill:#9dff6e; text-anchor:middle; }
.sp-what{ font:600 9.5px "Space Grotesk",sans-serif; fill:#c9ffb3; text-anchor:middle; }
.sp-pk-body{ fill:#ef6a12; } .sp-pk-rib{ fill:#c9530a; } .sp-pk-stem{ fill:#4f6b1d; }
.sp-pk-face{ fill:#3a1604; }
.sp-pk-lit{ fill:#ffd66b; }
.sp-pk-glow{ animation:spGlow 1.7s ease-in-out infinite alternate; }
@keyframes spGlow{ to{ opacity:.72; } }
.sp-fog i{ position:absolute; left:-30%; width:160%; bottom:-6vh; height:26vh; opacity:.9; will-change:transform;
  background:radial-gradient(28% 50% at 20% 60%,rgba(214,200,255,.17),transparent 70%), radial-gradient(30% 46% at 58% 50%,rgba(214,200,255,.14),transparent 70%), radial-gradient(26% 50% at 88% 64%,rgba(214,200,255,.16),transparent 70%);
  animation:spFog 22s linear infinite alternate; }
.sp-fog i:nth-child(2){ bottom:4vh; height:18vh; opacity:.6; animation-duration:31s; animation-direction:alternate-reverse; }
@keyframes spFog{ to{ transform:translateX(12%); } }
.sp-letter{ position:absolute; left:0; top:0; width:64px; height:46px; opacity:0; will-change:transform,opacity; filter:drop-shadow(0 0 14px rgba(255,190,110,.65)); }
.sp-env{ fill:#f3e3c0; stroke:#b08a4a; stroke-width:2; } .sp-flap{ fill:none; stroke:#b08a4a; stroke-width:2; stroke-linejoin:round; } .sp-seal{ fill:#b3213a; }
@media (max-width:900px){
  .sp-moon{ left:6%; top:7%; width:clamp(60px,17vw,90px); }
  .sp-side{ height:calc(50vw * .6); width:50vw; }
}
.lite .sp-clouds, .lite .sp-fog i:nth-child(2){ display:none; }
.lite .sp-letter{ filter:none; }
.lite .phone-spooky *{ animation:none !important; }
.phone-status{ transition:color .4s; }

/* headings the line loops around should hug their text, not stretch to the cell's width */


/* ---------- the light backdrop behind sections 2–3 ---------- */
.light-panel{ position:absolute; left:0; width:100%; z-index:0; pointer-events:none; background:#eff0fa; }

/* ---------- tides: the two section changes ---------- */
/* Each tide is an overlay covering the last screen before a section boundary. Its three layers (each a wavy edge on a block of
   colour) are moved up by initTides as you scroll, brand colours ahead, the destination colour last. The waves also drift
   sideways on their own. */
.tide{ position:absolute; left:0; width:100%; z-index:40; overflow:hidden; pointer-events:none; --wh:130px; }
.tide-light{ --t1:#cbbfff; --t2:#ffc4da; --t3:#eff0fa; }
.tide-dark{ --t1:#6a4dff; --t2:#ff6b9d; --t3:#0d0a24; -webkit-mask-image:linear-gradient(#000 calc(100% - 210px), transparent); mask-image:linear-gradient(#000 calc(100% - 210px), transparent); } /* its last stretch lies over the phone section: fade into that section's own glow instead of ending on a hard line */
.tide-layer{ position:absolute; left:0; right:0; top:0; height:0; will-change:transform; transform:translate3d(0,160vh,0); }
.tide-layer svg{
  position:absolute; left:0; top:calc(1px - var(--wh)); width:200%; height:var(--wh); display:block;
  animation:tideDrift 18s linear infinite;
}
.tide-layer path{ fill:var(--c); }
.tide-layer i{ position:absolute; left:0; right:0; top:0; height:340px; background:var(--c); }
.tl-a{ --c:var(--t1); }
.tl-b{ --c:var(--t2); } .tl-b svg{ animation-duration:12s; animation-direction:reverse; }
.tl-c{ --c:var(--t3); } .tl-c svg{ animation-duration:8s; }
.tl-c i{ height:calc(100vh + 320px); }
@keyframes tideDrift{ to{ transform:translate3d(-50%,0,0); } }
body:not(.tide-on) .tide{ display:none; }

/* ---------- the globe's "link sent" toast (its position is set in earth-scene.js) ---------- */
.globe-label{ position:absolute; left:0; top:0; z-index:3; pointer-events:none; will-change:transform; }
.gt-card{
  display:flex; align-items:center; gap:11px; padding:8px 16px 8px 8px; border-radius:16px; white-space:nowrap;
  background:#fff; color:#0b0b12; box-shadow:0 16px 36px -12px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.35);
  opacity:0; transform-origin:0 100%;
}
.gt-card.pop{ animation:gtPop .55s cubic-bezier(.2,.9,.3,1.2) both; }
.gt-icon{ display:grid; place-items:center; width:32px; height:32px; border-radius:11px; color:#fff; background:linear-gradient(140deg,#7c5cff,#ff6b9d); }
.gt-text{ display:flex; flex-direction:column; gap:4px; }
.gt-text b{ font:600 .8rem/1 var(--ff-head); }
.gt-route{ font:400 .72rem/1 var(--ff-body); color:#5b5b70; }
@keyframes gtPop{ from{ opacity:0; transform:translateY(10px) scale(.92); } to{ opacity:1; transform:none; } }
@media (max-width:760px){ .globe-label{ display:none; } } /* after the base rule so it wins */

/* ---------- how it works: a pinned page that slides right → left, one full screen per step ---------- */
.how-wrapper{ position:relative; height:calc(100vh + max(340vw, 300vh) + 120px); padding:0 0 120px; }
.how-sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; color:#0b0b12; }
.how-track{ position:absolute; left:0; top:0; height:100%; display:flex; align-items:stretch; will-change:transform; }
.how-slide, .how-panel{ flex:none; width:100vw; }

.how-slide{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-inline:24px; }
.how-eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px; padding:9px 16px; border-radius:99px; background:#fff;
  font:600 .82rem/1 var(--ff-body); color:#0b0b12; box-shadow:0 1px 0 rgba(11,11,18,.06), 0 8px 20px -10px rgba(60,40,160,.4);
}
.how-eyebrow i{ width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#7c5cff,#ff6b9d); }
.how-intro h2{ margin:0 0 .32em; font-size:clamp(2.8rem,8vw,6.8rem); font-weight:600; letter-spacing:-.045em; line-height:1; color:#0b0b12; }
.how-intro h2 .hl{ color:#5b3fe0; }
.how-sub{ max-width:44ch; margin:0 auto 30px; color:#3b3b4d; font-size:1.08rem; line-height:1.55; }
.how-route{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 22px; margin:0; padding:0; list-style:none; }
.how-route li{ position:relative; padding:9px 16px; border-radius:99px; border:1px solid rgba(11,11,18,.2); font:500 .88rem/1 var(--ff-body); }
.how-route li + li::before{ content:"→"; position:absolute; left:-19px; top:50%; transform:translateY(-50%); opacity:.45; }

.how-panel{ display:grid; place-items:center; padding:clamp(84px,12vh,110px) 5vw clamp(96px,17vh,140px); }
.how-inner{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(28px,6vw,96px); width:min(1120px,100%); }
.how-inner.flip .how-card{ order:-1; }
.how-step{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:20px; padding:8px 14px; border-radius:99px; background:#fff;
  font:600 .8rem/1 var(--ff-body); color:#0b0b12; box-shadow:0 1px 0 rgba(11,11,18,.06), 0 8px 20px -10px rgba(60,40,160,.4);
}
.how-step em{ font-style:normal; color:#8a8aa0; font-weight:500; }
.how-copy h3{ margin:0 0 .3em; font-size:clamp(2.4rem,5.4vw,4.6rem); font-weight:600; letter-spacing:-.04em; line-height:1.02; color:#0b0b12; }
.how-lead{ margin:0 0 24px; max-width:44ch; color:#3b3b4d; font-size:1.08rem; line-height:1.55; }
.how-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.how-chips li{ padding:8px 14px; border-radius:99px; background:rgba(255,255,255,.7); border:1px solid rgba(11,11,18,.1); font:500 .82rem/1 var(--ff-body); color:#2a2a3a; }

/* the illustration card: a brand-gradient tile holding a little mock of the step's screen */
.how-card{ position:relative; justify-self:center; width:min(460px,100%); padding:clamp(18px,2.4vw,30px); border-radius:26px; will-change:transform; box-shadow:0 34px 60px -30px rgba(30,20,110,.6); }
.hc-violet{ background:linear-gradient(140deg,#3b30ff,#6a4dff 55%,#9d86ff); }
.hc-pink{ background:linear-gradient(140deg,#ff5f9a,#ff8fb8 55%,#ffc0a8); }
.hc-cyan{ background:linear-gradient(140deg,#1592ff,#3cc0ff 55%,#a4ecff); }
.hc-mint{ background:linear-gradient(140deg,#12a066,#33d688 55%,#b6f5c9); }
.hc-ui{ display:flex; flex-direction:column; gap:12px; padding:20px; border-radius:18px; background:#fff; color:#0b0b12; font-family:var(--ff-body); box-shadow:0 18px 40px -20px rgba(8,8,40,.5); }
.hc-title{ display:flex; align-items:center; justify-content:space-between; margin:0; color:#0b0b12; font:600 .98rem/1 var(--ff-head); }
.hc-badge{ padding:4px 9px; border-radius:99px; background:#efeaff; color:#4a2fe0; font:600 .68rem/1 var(--ff-body); }
.hc-badge.ok{ background:#dcf7e8; color:#137a48; }
.hc-field{ flex:1; display:flex; flex-direction:column; gap:6px; padding:11px 13px; border-radius:12px; background:#f4f4fa; }
.hc-field small{ font-size:.68rem; color:#7a7a90; }
.hc-field b{ font:600 .9rem/1 var(--ff-body); }
.hc-row{ display:flex; gap:10px; }
.hc-toggle{ display:flex; align-items:center; justify-content:space-between; padding:2px; font-size:.84rem; color:#3b3b4d; }
.hc-toggle i{ position:relative; width:36px; height:21px; border-radius:99px; background:#7c5cff; }
.hc-toggle i::after{ content:""; position:absolute; right:3px; top:3px; width:15px; height:15px; border-radius:50%; background:#fff; }
.hc-btn{ padding:13px; border-radius:12px; text-align:center; background:#0b0b12; color:#fff; font:600 .86rem/1 var(--ff-body); }
.hc-offer{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; background:#f4f4fa; }
.hc-offer.best{ background:#fff1f6; box-shadow:inset 0 0 0 1.5px #ff6b9d; }
.hc-offer .av{ flex:none; width:34px; height:34px; border-radius:50%; }
.av.a1{ background:linear-gradient(140deg,#ff6b9d,#ffb199); } .av.a2{ background:linear-gradient(140deg,#7c5cff,#9d86ff); } .av.a3{ background:linear-gradient(140deg,#3cc0ff,#a4ecff); }
.hc-offer div{ flex:1; display:flex; flex-direction:column; gap:5px; }
.hc-offer b{ font:600 .88rem/1 var(--ff-body); }
.hc-offer small{ font-size:.68rem; color:#7a7a90; }
.hc-offer strong{ font:600 .98rem/1 var(--ff-head); }
.hc-steps{ display:flex; flex-direction:column; margin:0; padding:0; list-style:none; }
.hc-steps li{ position:relative; display:flex; align-items:flex-start; gap:12px; padding:9px 0; }
.hc-steps li + li::before{ content:""; position:absolute; left:10px; top:-13px; height:22px; width:2px; background:#d8d8e6; }
.hc-steps li.done + li::before{ background:#22c07a; }
.hc-steps i{ position:relative; flex:none; width:22px; height:22px; border-radius:50%; border:2px solid #d4d4e2; background:#fff; }
.hc-steps li.done i{ background:#22c07a; border-color:#22c07a; }
.hc-steps li.done i::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:.7rem; font-weight:700; }
.hc-steps div{ display:flex; flex-direction:column; gap:5px; }
.hc-steps b{ font:600 .88rem/1 var(--ff-body); }
.hc-steps small{ font-size:.7rem; color:#7a7a90; }
.hc-big{ display:flex; align-items:center; gap:10px; margin:0; color:#0b0b12; font:600 2.1rem/1 var(--ff-head); letter-spacing:-.03em; }
.hc-chart{ display:block; width:100%; height:84px; overflow:visible; }
.hc-chart .area{ fill:rgba(18,160,102,.14); }
.hc-chart .line{ fill:none; stroke:#12a066; stroke-width:2.6; stroke-linecap:round; vector-effect:non-scaling-stroke; }

/* each card's contents pop in one after another, in step with scroll (--r set per item in initHow) */
.hc-ui > *, .hc-steps > li{ opacity:var(--r,1); transform:translateY(calc((1 - var(--r,1)) * 16px)) scale(calc(.9 + var(--r,1) * .1)); }
.hc-heart{ display:inline-block; animation:hc-heartbeat 1.1s ease-in-out .3s infinite; }
@keyframes hc-heartbeat{ 0%,100%{ transform:scale(1); } 22%{ transform:scale(1.22); } 40%{ transform:scale(.96); } 55%{ transform:scale(1.12); } 70%{ transform:scale(1); } }

/* segmented progress bar */
.how-progress{ position:absolute; left:50%; bottom:clamp(24px,6vh,52px); transform:translateX(-50%); z-index:3; display:flex; gap:10px; width:min(560px,86vw); }
.hp-seg{ flex:1; display:flex; flex-direction:column; gap:9px; }
.hp-bar{ position:relative; display:block; height:4px; border-radius:4px; overflow:hidden; background:rgba(11,11,18,.12); }
.hp-bar i{ position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,#7c5cff,#ff6b9d); transform-origin:0 50%; transform:scaleX(var(--f,0)); }
.hp-label{ font:600 .76rem/1 var(--ff-body); color:#9a9aae; transition:color .3s; }
.hp-seg.is-active .hp-label, .hp-seg.is-done .hp-label{ color:#0b0b12; }

@media (max-width:720px){
  .how-panel{ padding-inline:22px; }
  .how-inner{ grid-template-columns:1fr; gap:22px; }
  .how-inner.flip .how-card{ order:0; }
  .how-copy h3{ font-size:clamp(2.1rem,9.5vw,2.8rem); }
  .how-lead{ font-size:.98rem; margin-bottom:0; }
  .how-chips{ display:none; }
  .how-step{ margin-bottom:14px; }
  .how-card{ width:100%; padding:14px; border-radius:20px; }
  .hc-ui{ padding:14px; gap:9px; }
}

/* ---------- reviews: a full-bleed wall of cards as the section's background, the headline on top ---------- */
.reviews{ display:flex; align-items:center; min-height:118vh; overflow:hidden; padding-block:clamp(90px,14vh,150px); }
/* the whole scene (glow, wall, veil, headline) fades in as the section arrives and out as it leaves: --fade is set from the scroll position */
.rv-scene{
  position:absolute; inset:0; z-index:0; opacity:var(--fade,1);
  /* nothing is visible right at the section's top and bottom edge, so there is no line where it meets its neighbours */
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.04) 5%,rgba(0,0,0,.14) 10%,rgba(0,0,0,.34) 15%,rgba(0,0,0,.6) 20%,rgba(0,0,0,.84) 25%,rgba(0,0,0,.96) 30%,#000 34%,#000 66%,rgba(0,0,0,.96) 70%,rgba(0,0,0,.84) 75%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.34) 85%,rgba(0,0,0,.14) 90%,rgba(0,0,0,.04) 95%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.04) 5%,rgba(0,0,0,.14) 10%,rgba(0,0,0,.34) 15%,rgba(0,0,0,.6) 20%,rgba(0,0,0,.84) 25%,rgba(0,0,0,.96) 30%,#000 34%,#000 66%,rgba(0,0,0,.96) 70%,rgba(0,0,0,.84) 75%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.34) 85%,rgba(0,0,0,.14) 90%,rgba(0,0,0,.04) 95%,rgba(0,0,0,0) 100%);
}
.rv-inner{ opacity:var(--fade,1); }
.rv-aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.rv-aurora i{ position:absolute; width:60vw; max-width:780px; aspect-ratio:1; border-radius:50%; opacity:.4; animation:rvFloat 18s ease-in-out infinite alternate; }
.rv-aurora i:nth-child(1){ left:-14%; top:-12%; background:radial-gradient(circle,#7c5cff,transparent 65%); }
.rv-aurora i:nth-child(2){ right:-16%; top:18%; background:radial-gradient(circle,#ff6b9d,transparent 65%); animation-duration:23s; animation-delay:-6s; }
.rv-aurora i:nth-child(3){ left:28%; bottom:-26%; opacity:.26; background:radial-gradient(circle,#5ce1ff,transparent 65%); animation-duration:27s; animation-delay:-11s; }
@keyframes rvFloat{ to{ transform:translate3d(6vw,-4vh,0) scale(1.15); } }

/* the wall: columns tilted in 3D; each column loops its cards (JS repeats them), every other one runs the other way */
.rv-stage{
  position:absolute; inset:0; z-index:1; perspective:1500px;
  opacity:0; transform:scale(.97); transition:opacity 1.2s, transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.reviews.is-in .rv-stage{ opacity:1; transform:none; }
.rv-wall{
  position:absolute; inset:-14% -8%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px;
  transform:rotateX(var(--rx,12deg)) rotateY(var(--ry,-10deg)) rotateZ(var(--rz,5deg)); transform-style:preserve-3d; will-change:transform;
}
.rv-col{ will-change:transform; }
.rv-track{ display:flex; flex-direction:column; animation:rvScroll var(--dur,50s) linear infinite; will-change:transform; }
.rv-col[data-dir="down"] .rv-track{ animation-direction:reverse; }
@keyframes rvScroll{ to{ transform:translate3d(0,-50%,0); } }
.rv-stage:hover .rv-track{ animation-play-state:paused; }
.reviews.is-still .rv-track{ animation:none; }

/* a dark pool behind the headline keeps it readable; the cards glow back to full strength toward the edges */
.rv-veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 52% 48% at 50% 50%, rgba(8,8,12,.94) 0%, rgba(8,8,12,.82) 40%, rgba(8,8,12,.35) 72%, transparent 100%);
}

.rv-inner{ position:relative; z-index:3; width:100%; pointer-events:none; }
.rv-inner a, .rv-inner button{ pointer-events:auto; }
.rv-copy{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:900px; margin-inline:auto; }
/* the copy fades up, one piece after another, when the section scrolls into view (.is-in is set in initReviews) */
.rv-copy > *{ opacity:0; transform:translateY(26px); transition:opacity .8s, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--n,0) * 90ms); }
.reviews.is-in .rv-copy > *{ opacity:1; transform:none; }
.rv-eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:22px; padding:9px 16px; border-radius:99px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; font:600 .82rem/1 var(--ff-body);
}
.rv-eyebrow svg{ color:#ffc94d; }
.rv-copy h2{ margin:0 0 .5em; font-size:clamp(2.6rem,5vw,4.8rem); letter-spacing:-.045em; line-height:1; color:#fff; }
.rv-hl{ color:#ff8fb8; }
.rv-score{
  display:flex; align-items:center; gap:22px; width:fit-content; max-width:100%; margin:0 0 22px; padding:18px 26px; border-radius:20px;
  background:rgba(20,20,31,.7); border:1px solid rgba(255,255,255,.12);
}
.rv-big{ display:flex; align-items:baseline; gap:6px; font-family:var(--ff-head); }
.rv-big .rv-count{ font-size:clamp(3rem,5vw,4.2rem); line-height:1; letter-spacing:-.04em; color:#fff; }
.rv-big small{ font-size:1.05rem; color:var(--fg-dim); }
.rv-rating{ text-align:left; }
.rv-stars{ display:flex; gap:3px; font-size:1.4rem; line-height:1; color:#ffc94d; }
.rv-stars i{ font-style:normal; opacity:.22; transform:scale(.6); }
.reviews.is-in .rv-stars i{ animation:rvStar .55s cubic-bezier(.2,.9,.3,1.5) both; animation-delay:calc(var(--i) * 120ms + 350ms); }
@keyframes rvStar{ 60%{ transform:scale(1.35); } to{ opacity:1; transform:none; filter:drop-shadow(0 0 8px rgba(255,201,77,.65)); } }
.rv-rating p{ margin:8px 0 0; font-size:.9rem; }
.rv-rating .rv-count{ font-weight:600; color:#fff; }
.rv-facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 30px; padding:0; list-style:none; }
.rv-facts li{ padding:9px 15px; border-radius:99px; background:rgba(20,20,31,.7); border:1px solid rgba(255,255,255,.14); font-size:.85rem; color:var(--fg-dim); }
.rv-facts b{ color:#fff; font-weight:600; }

.rv-card{
  position:relative; margin:0 0 18px; padding:22px 22px 20px; border-radius:20px; overflow:hidden;
  background:linear-gradient(160deg,rgba(38,38,56,.9),rgba(20,20,31,.85)); border:1px solid rgba(255,255,255,.1);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.1), border-color .3s, box-shadow .3s;
}
.rv-card::before{ /* spotlight that follows the cursor */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--c) 34%, transparent), transparent 70%);
}
.rv-card::after{ content:""; position:absolute; left:22px; top:0; width:42px; height:3px; border-radius:0 0 3px 3px; background:var(--c); box-shadow:0 0 16px var(--c); }
.rv-card:hover{ transform:scale(1.045); border-color:color-mix(in srgb, var(--c) 65%, transparent); box-shadow:0 26px 50px -24px var(--c); }
.rv-card:hover::before{ opacity:1; }
.rv-top{ position:relative; display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.rv-avatar{
  flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:#fff; font:600 .8rem/1 var(--ff-head);
  background:linear-gradient(140deg,var(--c),color-mix(in srgb, var(--c) 40%, #ff6b9d));
}
.rv-who{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.rv-who b{ font:600 .92rem/1 var(--ff-body); color:#fff; }
.rv-who small{ font-size:.75rem; line-height:1; color:var(--fg-dim); }
.rv-tool{ flex:none; padding:5px 10px; border-radius:99px; font:600 .68rem/1 var(--ff-body); color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent); }
.rv-cardstars{ position:relative; margin-bottom:10px; color:#ffc94d; font-size:.85rem; letter-spacing:2px; }
.rv-card blockquote{ position:relative; margin:0; color:#e7e5f1; font-size:.95rem; line-height:1.55; }

@media (max-width:1180px){
  .rv-wall{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rv-col:nth-child(n+4){ display:none; }
}
@media (max-width:760px){
  .rv-wall{ inset:-8% -4%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; --rx:8deg; --ry:0deg; --rz:3deg; }
  .rv-col:nth-child(n+3){ display:none; }
  .rv-card{ padding:18px 18px 16px; }
  .rv-tool{ display:none; } /* the coloured bar on top still says which product it was */
  .rv-card blockquote{ font-size:.88rem; }
  .rv-veil{ background:radial-gradient(ellipse 90% 60% at 50% 50%, rgba(8,8,12,.95) 0%, rgba(8,8,12,.85) 50%, rgba(8,8,12,.4) 85%, transparent 100%); }
}
@media (prefers-reduced-motion:reduce){
  .rv-stage, .rv-copy > *{ opacity:1; transform:none; transition:none; }
  .rv-track, .rv-aurora i{ animation:none; }
}

/* ---------- reviews: pending cards + the leave-a-review dialog ---------- */
.rv-cardstars .off{ color:rgba(255,255,255,.2); }
.rv-card.is-pending{ border-style:dashed; border-color:rgba(255,255,255,.28); }
.rv-card.is-pending .rv-tool{ color:#fff; background:rgba(255,255,255,.14); }

.rv-modal{ position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:18px; }
.rv-modal[hidden]{ display:none; }
.rvm-backdrop{ position:absolute; inset:0; background:rgba(6,6,12,.74); backdrop-filter:blur(7px); opacity:0; transition:opacity .35s; }
.rvm-panel{
  position:relative; width:min(580px,100%); max-height:calc(100vh - 36px); max-height:calc(100dvh - 36px); overflow:auto; overscroll-behavior:contain;
  padding:36px 36px 32px; border-radius:26px; background:#f4f4fb; color:#0b0b12; outline:none; color-scheme:light;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  opacity:0; transform:translateY(26px) scale(.97); transition:opacity .35s, transform .5s cubic-bezier(.2,.8,.2,1);
}
.rv-modal.is-open .rvm-backdrop{ opacity:1; }
.rv-modal.is-open .rvm-panel{ opacity:1; transform:none; }
.rvm-close{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border:0; border-radius:50%; cursor:pointer;
  background:#e4e4f0; color:#0b0b12; font:400 1.4rem/1 var(--ff-body); transition:background-color .25s, transform .35s cubic-bezier(.2,.9,.3,1.3);
}
.rvm-close:hover{ background:#d6d6e8; transform:rotate(90deg); }
.rvm-panel h3{ margin:0 0 8px; font-size:1.8rem; letter-spacing:-.035em; color:#0b0b12; }
.rvm-sub{ margin:0 0 24px; max-width:44ch; color:#4b4b5e; font-size:.95rem; line-height:1.5; }
.rvm-panel fieldset{ margin:0 0 20px; padding:0; border:0; min-width:0; }
.rvm-panel legend, .rvm-field > span{ display:block; margin:0 0 8px; padding:0; font:600 .82rem/1 var(--ff-body); color:#0b0b12; }
.rvm-field em{ margin-left:4px; font-style:normal; font-weight:500; color:#8a8aa0; }
.rvm-field{ display:block; margin:0 0 16px; }
.rvm-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.rvm-panel input[type="text"], .rvm-panel input[type="email"], .rvm-panel input:not([type]), .rvm-panel textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #d3d3e3; background:#fff; color:#0b0b12;
  font:400 .95rem/1.4 var(--ff-body); transition:border-color .2s, box-shadow .2s;
}
.rvm-panel textarea{ display:block; resize:vertical; min-height:110px; }
.rvm-panel input::placeholder, .rvm-panel textarea::placeholder{ color:#9a9ab0; }
.rvm-panel input:focus-visible, .rvm-panel textarea:focus-visible{ outline:0; border-color:#7c5cff; box-shadow:0 0 0 3px rgba(124,92,255,.22); }
.rvm-count{ display:block; margin-top:6px; text-align:right; font-size:.72rem; color:#8a8aa0; }

.rvm-stars{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; }
.rvm-stars input, .rvm-chips input{ position:absolute; opacity:0; pointer-events:none; }
.rvm-stars label{ font-size:2.1rem; line-height:1; color:#cdcde0; cursor:pointer; transition:color .15s, transform .25s cubic-bezier(.2,.9,.3,1.6); }
.rvm-stars label:hover, .rvm-stars label:hover ~ label, .rvm-stars input:checked ~ label{ color:#ffb800; }
.rvm-stars label:hover{ transform:scale(1.2); }
.rvm-stars input:focus-visible + label, .rvm-chips input:focus-visible + label{ outline:2px solid #7c5cff; outline-offset:3px; border-radius:8px; }
.rvm-sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.rvm-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.rvm-chips label{
  padding:9px 15px; border-radius:99px; border:1px solid #d3d3e3; background:#fff; color:#0b0b12; cursor:pointer;
  font:500 .86rem/1 var(--ff-body); transition:background-color .2s, color .2s, border-color .2s;
}
.rvm-chips label:hover{ border-color:var(--c); }
.rvm-chips input:checked + label{ background:var(--c); border-color:var(--c); color:#fff; }
.rvm-hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }
.rvm-check{ display:flex; align-items:flex-start; gap:10px; margin:2px 0 18px; font-size:.86rem; line-height:1.45; color:#3b3b4d; cursor:pointer; }
.rvm-check input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:#7c5cff; }
.rvm-error{ margin:0 0 16px; padding:11px 14px; border-radius:12px; background:#ffe6ed; color:#a8002f; font-size:.88rem; line-height:1.4; }
.rvm-submit{ background:#0b0b12; color:#fff; }
.rvm-submit .pill-arrow{ background:#fff; color:#0b0b12; }
.rvm-submit:hover .pill-arrow{ color:#fff; }
.rvm-submit:disabled{ opacity:.6; pointer-events:none; }
.rvm-done{ display:flex; flex-direction:column; align-items:flex-start; padding-block:10px 4px; }
.rvm-done[hidden], .rvm-panel form[hidden], .rvm-error[hidden]{ display:none; }
.rvm-done h3{ outline:none; }
.rvm-done-text{ margin:0 0 26px; max-width:44ch; color:#4b4b5e; line-height:1.55; }
.rvm-tick{
  display:grid; place-items:center; width:54px; height:54px; margin-bottom:18px; border-radius:50%; color:#fff; font-size:1.6rem;
  background:linear-gradient(140deg,#12a066,#33d688); box-shadow:0 12px 28px -10px rgba(18,160,102,.7);
}
@media (max-width:560px){
  .rvm-panel{ padding:28px 20px 24px; border-radius:22px; }
  .rvm-row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .rvm-backdrop, .rvm-panel{ transition:none; }
}

/* ---------- reviews: empty state ---------- */
.rv-lead{ max-width:50ch; margin:0 0 26px; color:#c9c7d6; font-size:1.05rem; line-height:1.55; }
.rv-score[hidden], .rv-facts[hidden], .rv-lead[hidden]{ display:none; }
/* placeholder cards while there are no real reviews yet: no names and no words, just the shape of a review, with a slow shimmer */
.rv-ghost{ pointer-events:none; }
.rv-ghost .g{ display:block; border-radius:8px; background:rgba(255,255,255,.085); } /* still: a shimmer here would be hundreds of animations repainting every frame */
.rv-ghost .g-av{ flex:none; width:40px; height:40px; border-radius:50%; }
.rv-ghost .g-name{ width:56%; height:11px; margin-bottom:8px; }
.rv-ghost .g-role{ width:38%; height:8px; }
.rv-ghost .g-stars{ width:72px; height:11px; margin-bottom:12px; background:rgba(255,201,77,.35); }
.rv-ghost .g-line{ height:9px; margin-bottom:9px; }
.rv-ghost .g-line:last-child{ margin-bottom:0; }
.rvm-turnstile{ margin:0 0 16px; min-height:65px; }
.rvm-turnstile[hidden]{ display:none; }

/* ---------- performance ---------- */
/* a section that is well off screen does not animate (initOffscreenPause toggles .is-off) */
.is-off, .is-off *, .is-off *::before, .is-off *::after{ animation-play-state:paused !important; }
/* on a slow machine (initPerfGuard adds .lite) the pure decoration goes: the rest of the page looks the same */
.lite .pr-marquee, .lite .pr-fly, .lite .pr-floor, .lite .rv-aurora, .lite .pr-aurora, .lite .pc-halo, .lite .pc-foil{ display:none; }
.lite .tide-layer svg, .lite .pc-inner::before, .lite .price-card.featured .pc-fx::after, .lite .pc-badge, .lite .seal-ring, .lite .pc-free span{ animation:none; }
/* no 3D on a slow or touch screen: every depth layer is one more surface for the phone's GPU to composite */
.lite .rv-stage, .lite .pricing-grid{ perspective:none; }
.lite .rv-wall, .lite .pc-inner, .lite .pc-body{ transform-style:flat; }
.lite .pc-body, .lite .pc-body > *{ transform:none !important; }
.lite .pc-fan, .lite .pc-inner{ transform:none !important; }

/* ---------- phones ----------
   Touch screens always start in the lite mode (see initPerfGuard). Here that means: no film grain over everything, no filters on the moving
   paper planes, and a phone mockup that is one flat card whose screens are simply shown or not shown (the 3D version, with its stack of
   layers, rounded clips and fading screens, is what a phone's GPU could not draw, so the Pixel and Windows XP screens never appeared). */
.lite .grain{ display:none; }
.lite #snakeHead, .lite .pk-heart{ filter:none; }
.lite #snakeGlow{ display:none; }   /* the wide soft copy of each line is a second stroke to draw on every frame */
.lite .phone-stage{ perspective:none; }
.lite .phone{ transform-style:flat; }
.lite .phone-layers, .lite .phone-btn, .lite .phone-planes, .lite .phone-grid{ display:none; }
.lite .phone-front{ transform:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 6px #0a0a10, 0 26px 44px -18px rgba(0,0,0,.55); }
.lite .pscreen{ transition:none; transform:none; }
.lite .pscreen:not([data-s="on"]){ display:none; }
.lite .pscreen[data-s="on"]{ animation:pscreenIn .45s ease-out both; }
@keyframes pscreenIn{ from{ opacity:0; } }
/* the wave band takes no touches on a phone (the page scrolls through it; the tilt plays it instead) */
@media (hover:none){ .bridge-hit{ display:none; } }

/* "Tilt to explore": the iPhone permission button, and the hint on Android */
.tilt-pill{
  position:fixed; z-index:950; top:calc(92px + env(safe-area-inset-top, 0px)); right:12px; display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 14px; border-radius:99px; border:1px solid rgba(255,255,255,.24); background:rgba(20,20,31,.88); color:#fff;
  font:600 .78rem/1 var(--ff-body); opacity:0; transform:translateY(-8px); transition:opacity .4s, transform .4s;
  -webkit-tap-highlight-color:transparent; pointer-events:none;
}
.tilt-pill.is-on{ opacity:1; transform:none; }
button.tilt-pill{ cursor:pointer; pointer-events:auto; }
.tilt-pill svg{ flex:none; }
.tilt-pill.is-min{ width:38px; padding:0; justify-content:center; }
.tilt-pill.is-min span{ display:none; }

/* ---------- buying: the pack buttons and the order dialog ---------- */
button.btn{ font-family:inherit; border:0; cursor:pointer; }
button.btn.btn-outline{ border:1px solid var(--border); }
.pc-price .odo-dot{ display:block; height:1em; line-height:1; }
.cta-buy{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.cta-note{ margin:18px 0 0; font-size:.86rem; color:rgba(255,255,255,.6); }

.od-view{ display:flex; flex-direction:column; align-items:flex-start; }
.od-view[hidden]{ display:none; }
.od-view h3{ outline:none; }
.od-spin{ width:34px; height:34px; margin:4px 0 18px; border-radius:50%; border:3px solid #dcdcf0; border-top-color:#7c5cff; animation:odSpin .8s linear infinite; }
@keyframes odSpin{ to{ transform:rotate(360deg); } }
.od-demo{ display:inline-block; margin-left:8px; padding:4px 9px; border-radius:99px; background:#fff1c9; color:#7a5200; font:700 .66rem/1 var(--ff-body); letter-spacing:.07em; text-transform:uppercase; vertical-align:middle; }
.od-sum{ display:flex; justify-content:space-between; gap:12px; width:100%; margin:0 0 20px; padding:15px 17px; border-radius:14px; background:#fff; border:1px solid #e1e1ee; font:600 1rem/1.2 var(--ff-body); }
.od-left{ display:flex; align-items:baseline; gap:10px; margin:0 0 16px; color:#4b4b5e; font:500 .92rem/1 var(--ff-body); }
.od-left b{ color:#0b0b12; font:700 2.4rem/1 var(--ff-head); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.od-products{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; width:100%; margin:0 0 20px; padding:0; list-style:none; }
.od-prod{ display:flex; align-items:center; gap:14px; padding:13px 15px; border-radius:16px; background:#fff; border:1.5px solid #e1e1ee; transition:border-color .2s, box-shadow .25s; }
.od-prod.has{ border-color:var(--c); box-shadow:0 10px 24px -16px var(--c); }
.od-swatch{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--c); color:#fff; font:700 1.05rem/1 var(--ff-head); }
.od-name{ flex:1; min-width:0; }
.od-name b{ display:block; margin-bottom:3px; font:600 1rem/1.2 var(--ff-body); color:#0b0b12; }
.od-name small{ display:block; color:#6a6a80; font-size:.8rem; }
.od-step{ display:flex; align-items:center; gap:6px; }
.od-step button{ width:36px; height:36px; border-radius:50%; border:1px solid #d5d5e6; background:#f4f4fb; color:#0b0b12; font:600 1.15rem/1 var(--ff-body); cursor:pointer; transition:background-color .15s, transform .15s; }
.od-step button:hover:not(:disabled){ background:#e6e6f2; transform:scale(1.06); }
.od-step button:disabled{ opacity:.35; cursor:default; }
.od-step output{ min-width:28px; text-align:center; font:700 1.2rem/1 var(--ff-head); font-variant-numeric:tabular-nums; color:#0b0b12; }
.od-links{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; width:100%; max-height:min(300px,40vh); margin:0 0 20px; padding:0; list-style:none; overflow:auto; overscroll-behavior:contain; }
.od-link{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:#fff; border:1px solid #e1e1ee; }
.od-tag{ flex:none; padding:5px 10px; border-radius:99px; background:var(--c); color:#fff; font:700 .72rem/1 var(--ff-body); }
.od-url{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#2a2a3c; font:500 .8rem/1.2 ui-monospace,Consolas,monospace; }
.od-copy, .od-open{ flex:none; padding:8px 12px; border-radius:99px; border:1px solid #d5d5e6; background:#f4f4fb; color:#0b0b12; font:600 .76rem/1 var(--ff-body); text-decoration:none; cursor:pointer; }
.od-copy:hover, .od-open:hover{ background:#e6e6f2; }
.od-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.od-actions .pill-btn[hidden]{ display:none; }
.od-ghost{ background:#e6e6f2; color:#0b0b12; }
.od-ghost .pill-arrow{ background:#0b0b12; color:#fff; }
.od-fine{ margin:16px 0 0; color:#7a7a90; font-size:.78rem; line-height:1.5; }
@media (max-width:480px){
  .od-prod{ padding:11px 12px; gap:11px; }
  .od-swatch{ width:38px; height:38px; }
  .od-link{ flex-wrap:wrap; }
  .od-url{ flex-basis:100%; order:3; }
}

.auth-trigger{ white-space:nowrap; padding:9px 16px; border-radius:99px; border:1px solid var(--border); background:transparent; color:inherit; font:600 .86rem/1 var(--ff-body); cursor:pointer; transition:background-color .15s, border-color .15s; }
.auth-trigger:hover{ background:rgba(255,255,255,.08); }
.au-view{ display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.au-view[hidden]{ display:none; }
.au-view h3{ outline:none; }
.au-orders{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; width:100%; max-height:min(360px,44vh); margin:0 0 20px; padding:0; list-style:none; overflow:auto; overscroll-behavior:contain; }
.au-order{ padding:12px; border-radius:16px; background:#fff; border:1px solid #e1e1ee; }
.au-order-head{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font:600 .9rem/1 var(--ff-body); color:#0b0b12; }
.au-status{ padding:3px 9px; border-radius:99px; background:#e6e6f2; color:#4b4b5e; font:700 .66rem/1 var(--ff-body); letter-spacing:.05em; text-transform:uppercase; }
.au-status.is-paid{ background:#dff3e3; color:#1c6b34; }
.au-empty{ margin:0 0 20px; color:#7a7a90; font-size:.9rem; }

/* ---------- Legal pages (terms / privacy / refunds) ---------- */
.legal-header{ padding:28px 0; border-bottom:1px solid var(--border); }
.legal-header .logo{ text-decoration:none; color:var(--fg); }
.legal-main{ padding:56px 0 96px; }
.legal-main .container{ max-width:760px; }
.legal-main h1{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:.2em; }
.legal-updated{ color:var(--fg-dim); font-size:.86rem; margin:0 0 2.6em; }
.legal-main h2{ font-family:var(--ff-head); font-size:1.15rem; margin:1.8em 0 .6em; color:var(--fg); }
.legal-main p, .legal-main li{ color:var(--fg-dim); line-height:1.7; font-size:.98rem; }
.legal-main ul{ margin:0 0 1.2em; padding-left:1.2em; }
.legal-main li{ margin-bottom:.5em; }
.legal-main a{ color:var(--accent); }
.legal-main strong{ color:var(--fg); }
.legal-back{ display:inline-block; margin-bottom:2.4em; color:var(--fg-dim); font-size:.86rem; text-decoration:none; }
.legal-back:hover{ color:var(--fg); }
.legal-footer{ padding:28px 0 48px; border-top:1px solid var(--border); color:var(--fg-dim); font-size:.82rem; }

/* ---------- the styles gallery: a card per style, filtered by the tabs (see initStyles) ---------- */
.styles-gallery{ background:var(--bg); padding-block:clamp(72px,12vh,140px); }
.sg-head{ max-width:720px; margin:0 0 clamp(28px,5vw,48px); }
.sg-eyebrow{ display:inline-block; margin-bottom:18px; padding:7px 14px; border-radius:99px; border:1px solid var(--border); font:600 .72rem/1 var(--ff-head); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.styles-gallery h2{ margin:0 0 18px; font-size:clamp(2.2rem,6vw,4.2rem); line-height:1.02; letter-spacing:-.03em; }
.sg-hl{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sg-lead{ max-width:52ch; margin:0; color:var(--fg-dim); font-size:1.05rem; line-height:1.55; }
.sg-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 clamp(22px,4vw,36px); }
.sg-tabs button{ padding:10px 18px; border-radius:99px; border:1px solid var(--border); background:transparent; color:var(--fg-dim); font:600 .86rem/1 var(--ff-body); cursor:pointer; transition:background-color .2s, color .2s, border-color .2s; }
.sg-tabs button:hover{ color:var(--fg); border-color:rgba(255,255,255,.22); }
.sg-tabs button[aria-selected="true"]{ background:var(--fg); color:#0b0b12; border-color:var(--fg); }
.sg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:clamp(14px,2vw,22px); margin:0; padding:0; list-style:none; }
.sg-item[hidden]{ display:none; }
.sg-card{ position:relative; display:flex; flex-direction:column; gap:6px; height:100%; padding:10px 10px 18px; border-radius:22px; border:1px solid var(--border); background:var(--surface); color:var(--fg); text-decoration:none; transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .35s; }
a.sg-card:hover, a.sg-card:focus-visible{ transform:translateY(-6px); border-color:var(--c); box-shadow:0 18px 44px -18px var(--c); }
.sg-shot{ position:relative; display:block; aspect-ratio:585/960; margin-bottom:10px; overflow:hidden; border-radius:14px; background:var(--surface-2); }
.sg-shot img{ display:block; width:100%; height:100%; object-fit:cover; }
.sg-soon{ position:absolute; inset:0; display:grid; place-items:center; font-size:4rem; color:var(--c); background:radial-gradient(60% 50% at 50% 45%,color-mix(in srgb,var(--c) 35%,transparent),transparent 70%); }
.sg-name{ padding-inline:8px; font:700 1.15rem/1.1 var(--ff-head); letter-spacing:-.01em; }
.sg-name::before{ content:""; display:inline-block; width:9px; height:9px; margin-right:9px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); vertical-align:1px; }
.sg-blurb{ padding-inline:8px; color:var(--fg-dim); font-size:.9rem; line-height:1.4; }
.sg-demo{ margin-top:auto; padding:10px 8px 0; font:600 .8rem/1 var(--ff-body); letter-spacing:.04em; color:var(--c); }
.sg-card.is-soon{ opacity:.7; }
.sg-card.is-soon .sg-demo{ color:var(--fg-dim); }
@media (prefers-reduced-motion:reduce){ a.sg-card:hover, a.sg-card:focus-visible{ transform:none; } }