/* =========================================================
   Hi_friend — landing styles
   ========================================================= */
:root{
  --bg:#08080b;
  --bg-2:#0d0d12;
  --panel:#101017;
  --ink:#f4f2ef;
  --ink-soft:#b9b6c4;
  --ink-mute:#7a7787;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);

  --uv:#8a5cff;          /* signature violet */
  --uv-bright:#b69cff;
  --uv-glow:rgba(138,92,255,.45);
  --pink:#ff2d6b;        /* energy / amazon */
  --pink-soft:#ff5c8a;
  --amazon:#ffb43d;      /* warm amber CTA */
  --amazon-2:#ff9a2e;

  --serif:'Fraunces', Georgia, serif;
  --sans:'Space Grotesk', system-ui, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;

  --maxw:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip (NOT hidden) — `hidden` computes overflow-y to `auto`, turning html/body
   into scroll containers, which breaks the hero's position:sticky (it scrolls away and
   leaves black space). `clip` contains horizontal drift WITHOUT creating a scroll container. */
html{scroll-behavior:smooth;overflow-x:clip;overscroll-behavior:none}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
section{position:relative}

/* ---- shared bits ---- */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--uv-bright);
  margin-bottom:1.1rem;
}
.eyebrow.center{text-align:center}
.accent-serif{font-family:var(--serif);font-style:italic;font-weight:400}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.01em}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-weight:600;font-size:.95rem;
  padding:.85rem 1.5rem;border-radius:100px;
  cursor:pointer;border:1px solid transparent;
  transition:transform .4s var(--ease), background .3s, box-shadow .4s, color .3s;
  white-space:nowrap;
}
.btn svg{transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-amazon{
  background:linear-gradient(135deg,var(--amazon),var(--amazon-2));
  color:#1a1206;
  box-shadow:0 8px 30px rgba(255,154,46,.30);
}
.btn-amazon:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,154,46,.45)}
.btn-ghost{
  background:rgba(255,255,255,.04);
  border-color:var(--line);
  color:var(--ink);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.btn-guide{
  background:linear-gradient(135deg,#43e3a5,#12b784);
  color:#052a1e;
  box-shadow:0 8px 30px rgba(30,200,140,.32);
}
.btn-guide:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(30,200,140,.5)}
.btn-lg{font-size:1.05rem;padding:1.05rem 2.1rem}
.btn.full{width:100%;justify-content:center}

/* progress */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--uv),var(--pink));
  box-shadow:0 0 12px var(--uv-glow);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.05rem clamp(1.1rem,4vw,2.6rem);
  transition:background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(8,8,11,.72);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line-2);
  padding-top:.75rem;padding-bottom:.75rem;
}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--sans);font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.brand-mark{display:grid;place-items:center;color:var(--uv-bright);filter:drop-shadow(0 0 8px var(--uv-glow))}
.brand-us{color:var(--uv-bright)}
.main-nav{display:flex;gap:2rem}
.main-nav a{font-size:.9rem;color:var(--ink-soft);position:relative;padding:.2rem 0;transition:color .3s}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--uv-bright);transition:width .4s var(--ease)}
.main-nav a:hover{color:var(--ink)}
.main-nav a:hover::after{width:100%}
.main-nav .nav-lab{color:var(--uv-bright)}
.main-nav .nav-lab:hover{color:#d4c2ff;text-shadow:0 0 12px rgba(138,92,255,.5)}
.header-actions{display:flex;align-items:center;gap:1.1rem}
.lang-switch{display:flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.8rem}
.lang-switch button{background:none;border:none;color:var(--ink-mute);cursor:pointer;font-family:inherit;font-size:inherit;padding:.2rem;transition:color .3s}
.lang-switch button.is-active{color:var(--ink)}
.lang-div{color:var(--ink-mute)}

/* =========================================================
   HERO
   ========================================================= */
.hero{min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 75% 30%, rgba(138,92,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(8,8,11,.55) 0%, rgba(8,8,11,.15) 40%, rgba(8,8,11,.9) 92%, var(--bg) 100%),
    linear-gradient(90deg, rgba(8,8,11,.85) 0%, transparent 60%);
}
/* film grain: masks gradient banding on dark tones, adds texture */
.hero-veil::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  mix-blend-mode:overlay;
}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.6rem) clamp(3rem,8vh,6rem)}
.hero-title{font-size:clamp(2.9rem,8vw,6.4rem);margin:.4rem 0 1.3rem;line-height:.98}
.hero-title span{display:block}
.hero-sub{max-width:38ch;color:var(--ink-soft);font-size:clamp(1rem,1.4vw,1.18rem)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.9rem 0 2.2rem}
.hero-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem}
.hero-chips li{
  display:flex;flex-direction:column;line-height:1.1;
  padding:.6rem 1rem;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.03);backdrop-filter:blur(8px);
}
.hero-chips b{font-family:var(--mono);font-size:1.05rem;color:var(--uv-bright)}
.hero-chips span{font-size:.72rem;color:var(--ink-mute);letter-spacing:.04em}

.scroll-cue{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-mute)}
.scroll-cue i{width:1px;height:42px;background:linear-gradient(var(--uv-bright),transparent);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--ink);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{top:-50%}60%,100%{top:100%}}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.hero-title .reveal:nth-child(2){transition-delay:.08s}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);overflow:hidden;background:var(--bg-2);padding:1.1rem 0}
.marquee-track{display:flex;align-items:center;gap:2.2rem;white-space:nowrap;width:max-content;animation:scrollx 34s linear infinite;font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.marquee-track i{color:var(--uv-bright);font-style:normal}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* =========================================================
   ANATOMY (signature scroll)
   ========================================================= */
.anatomy{background:radial-gradient(120% 80% at 50% 0%, #131119 0%, var(--bg) 60%)}
.anatomy-scroll{height:220vh;position:relative}
.anatomy-stage{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1rem,2.4vh,1.7rem);text-align:center;
  max-width:1080px;margin:0 auto;padding:clamp(1.4rem,4vh,2.4rem) clamp(1.1rem,4vw,2.6rem);
}
.anatomy-copy{max-width:46ch;margin:0 auto}
.anat-head{font-size:clamp(1.8rem,3.2vw,3rem);margin-bottom:.55rem}
.anat-head br{display:none}
.anat-line{color:var(--ink-soft)}
.anat-progress{margin:1rem auto 0;height:2px;background:var(--line);border-radius:2px;overflow:hidden;max-width:240px}
.anat-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--uv),var(--pink))}
.anatomy-viz{position:relative;width:100%;display:grid;place-items:center}
.device-viewer{
  position:relative;width:min(100%,1000px);margin-inline:auto;
  max-height:58svh;border-radius:24px;overflow:hidden;
  aspect-ratio:1000/562;
  background:radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #f5f2f9 60%, #eae6f1 100%);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 0 70px rgba(138,92,255,.07);
}
#anatomyCanvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply}
.dv-labels{position:absolute;inset:0;pointer-events:none}
/* dot lives on the part (--dx/--dy); text label sits independently (--x/--y) so the two are decoupled */
.dv-cl{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease)}
.dv-cl i{position:absolute;left:var(--dx,var(--x));top:var(--dy,var(--y));transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--uv);box-shadow:0 0 0 4px rgba(138,92,255,.16);display:grid;place-items:center;color:transparent;font-size:0;font-style:normal}
.dv-cl b{position:absolute;top:var(--y);left:calc(var(--x) + 16px);transform:translateY(-50%);white-space:nowrap;font-family:var(--mono);font-weight:400;font-size:.64rem;letter-spacing:.08em;color:#2a2733}
.dv-cl.dv-l b{left:auto;right:calc(100% - var(--x) + 16px);text-align:right}
.dv-legend{display:none}
.dv-final{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%) translateY(8px);
  display:flex;align-items:center;gap:.55rem;white-space:nowrap;
  background:rgba(10,10,16,.88);backdrop-filter:blur(8px);
  border:1px solid rgba(138,92,255,.45);border-radius:100px;
  padding:.6rem 1.15rem;opacity:0;pointer-events:none;
  font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--ink);
  box-shadow:0 10px 34px rgba(138,92,255,.25);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.dv-final.on{opacity:1;transform:translateX(-50%) translateY(0)}
.dv-final-star{color:var(--uv-bright)}
.dv-loader{position:absolute;inset:0;display:grid;place-items:center;background:#f3f0f7;transition:opacity .5s var(--ease)}
.dv-loader.done{opacity:0;pointer-events:none}
.dv-loader i{width:34px;height:34px;border:3px solid rgba(138,92,255,.2);border-top-color:var(--uv);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   FEATURE SPLIT
   ========================================================= */
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,10vh,8rem) clamp(1.1rem,4vw,2.6rem)}
.fs-media{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.fs-media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 80px rgba(138,92,255,.18)}
.fs-media img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.fs-copy h2{font-size:clamp(1.8rem,3.2vw,2.9rem);margin-bottom:2rem}
.feat-list{list-style:none;display:grid;gap:1.5rem}
.feat-list li{display:flex;gap:1.1rem}
.feat-ic{
  flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:16px;position:relative;
  background:
    linear-gradient(150deg,#17141f 0%,#0e0c14 100%) padding-box,
    linear-gradient(150deg,rgba(182,156,255,.65),rgba(255,92,138,.35) 60%,rgba(255,255,255,.06)) border-box;
  border:1px solid transparent;
  box-shadow:0 8px 24px rgba(138,92,255,.16), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .4s var(--ease), box-shadow .4s;
}
.feat-ic::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 60% at 50% 30%,rgba(138,92,255,.22),transparent 70%);pointer-events:none}
.feat-ic svg{width:26px;height:26px;filter:drop-shadow(0 0 6px rgba(138,92,255,.55))}
.feat-list li:hover .feat-ic{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 34px rgba(138,92,255,.3), inset 0 1px 0 rgba(255,255,255,.08)}
.feat-list h3{font-family:var(--sans);font-weight:600;font-size:1.08rem;margin-bottom:.25rem}
.feat-list p{color:var(--ink-soft);font-size:.96rem}

/* =========================================================
   KIT
   ========================================================= */
.kit{background:var(--bg-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.kit-inner{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,5vw,5rem);align-items:center;max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,10vh,7rem) clamp(1.1rem,4vw,2.6rem)}
.kit-copy h2{font-size:clamp(1.9rem,3.4vw,3rem);margin:.3rem 0 .8rem}
.kit-copy>p{color:var(--ink-soft);margin-bottom:1.6rem}
.kit-list{list-style:none;display:grid;gap:.8rem}
.kit-list li{position:relative;padding-left:1.8rem;color:var(--ink-soft)}
.kit-list li::before{content:"✦";position:absolute;left:0;color:var(--uv-bright)}
.kit-media{border-radius:22px;overflow:hidden;border:1px solid var(--line)}

/* =========================================================
   FAMILY / MODEL 2
   ========================================================= */
.family{padding:clamp(4rem,11vh,9rem) clamp(1.1rem,4vw,2.6rem);max-width:var(--maxw);margin:0 auto}
.family-head{text-align:center;max-width:46ch;margin:0 auto 3rem}
.fam-title{font-size:clamp(2.1rem,4.5vw,3.8rem);margin-bottom:1.1rem}
.fam-sub{color:var(--ink-soft)}
.family-stage{
  position:relative;display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  border:1px solid var(--line);border-radius:28px;padding:clamp(1.2rem,3vw,2.4rem);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  overflow:hidden;transition:box-shadow .6s var(--ease);
}
.fam-glow{position:absolute;width:60%;height:140%;left:8%;top:-20%;border-radius:50%;filter:blur(90px);opacity:.4;z-index:0;transition:background .6s var(--ease)}
.fam-media{position:relative;z-index:1;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.fam-media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:opacity .45s var(--ease)}
.fam-media.swapping img{opacity:0}
.fam-panel{position:relative;z-index:1}
.swatches{display:flex;gap:.8rem;margin-bottom:.6rem}
.sw{width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.25);transition:transform .3s var(--ease),box-shadow .3s}
.sw:hover{transform:scale(1.1)}
.sw.is-active{box-shadow:0 0 0 3px var(--bg),0 0 0 5px currentColor;transform:scale(1.08)}
.sw-pink{background:#ff2d6b;color:#ff2d6b}
.sw-black{background:#15151a;color:#888}
.sw-rose{background:#f3a9c4;color:#f3a9c4}
.sw-name{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.6rem}
.fam-features{list-style:none;display:grid;gap:1.1rem;margin-bottom:1.8rem}
.fam-features li{display:flex;flex-direction:column;border-left:2px solid var(--line);padding-left:1rem}
.fam-features b{font-family:var(--sans);font-weight:600;font-size:1rem}
.fam-features span{color:var(--ink-mute);font-size:.9rem}

/* spatial product showcase — the UV Tweezer finishes (glowing switcher) */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center;max-width:1100px;margin:0 auto}
.showcase[data-color="pink"]{--sc-accent:#ff2d6b}
.showcase[data-color="black"]{--sc-accent:#b69cff}
.showcase[data-color="rose"]{--sc-accent:#f3a9c4}
.showcase[data-color="red"]{--sc-accent:#ff3b47}
/* AL95 render is landscape — scale it up so it breaks past the glow ring like AL90 */
#al95 .sc-float{width:130%}
/* small downward nudge so the module sits centred in the glow ring */
#al95 .sc-img{transform:translateY(5%)}
/* model badge + hard-spec line (shared by AL90 / AL95 blocks) */
.model-badge{display:inline-block;margin:0 0 1.2rem;font-family:var(--mono);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--uv-bright);border:1px solid rgba(182,156,255,.5);border-radius:100px;padding:.45rem 1.15rem}
.spec-line{font-family:var(--mono);font-size:.68rem;line-height:1.6;letter-spacing:.02em;color:var(--ink-mute);margin:-.4rem 0 1.5rem}
.sc-visual{position:relative;aspect-ratio:1;display:grid;place-items:center;isolation:isolate}
/* deep ambient colour filling the disc (depth) */
.sc-depth{position:absolute;inset:-6%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 47%,
    color-mix(in srgb,var(--sc-accent) 40%,transparent) 0%,
    color-mix(in srgb,var(--sc-accent) 15%,transparent) 34%,
    transparent 64%);
  filter:blur(10px)}
/* bright central glow behind the product */
.sc-glow{position:absolute;inset:8%;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 49%,
    color-mix(in srgb,var(--sc-accent) 92%,transparent) 0%,
    color-mix(in srgb,var(--sc-accent) 46%,transparent) 20%,
    color-mix(in srgb,var(--sc-accent) 12%,transparent) 40%,
    transparent 56%);
  filter:blur(40px);animation:sc-breathe 5.5s ease-in-out infinite}
@keyframes sc-breathe{0%,100%{transform:scale(1);opacity:.82}50%{transform:scale(1.07);opacity:1}}
/* concentric rings with inner depth-shadow */
.sc-ring{position:absolute;inset:4%;border-radius:50%;z-index:2;pointer-events:none;
  border:1px dashed color-mix(in srgb,var(--sc-accent) 26%,rgba(255,255,255,.14));
  box-shadow:inset 0 0 70px color-mix(in srgb,var(--sc-accent) 16%,transparent);
  animation:sc-spin 40s linear infinite}
.sc-ring::after{content:"";position:absolute;inset:11%;border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--sc-accent) 18%,rgba(255,255,255,.08))}
@keyframes sc-spin{to{transform:rotate(360deg)}}
/* running accent arc that sweeps around the outer ring */
.sc-arc{position:absolute;inset:4%;border-radius:50%;z-index:3;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,
    color-mix(in srgb,var(--sc-accent) 95%,transparent) 12deg,
    color-mix(in srgb,var(--sc-accent) 22%,transparent) 34deg,
    transparent 50deg,transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
  filter:drop-shadow(0 0 5px var(--sc-accent));
  animation:sc-spin 4.6s linear infinite}
.sc-float{position:relative;z-index:4;width:80%;animation:sc-float 6s ease-in-out infinite;display:grid;place-items:center}
@keyframes sc-float{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
.sc-img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));transition:opacity .35s var(--ease),transform .5s var(--ease)}
.sc-img.swapping{opacity:0;transform:scale(.82)}
.sc-details{max-width:440px}
.sc-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.01em;margin:.4rem 0 .6rem;background:linear-gradient(180deg,var(--ink),var(--ink-mute));-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-desc{color:var(--ink-soft);margin-bottom:1.6rem;line-height:1.6}
.sc-stats{display:flex;flex-direction:column;gap:1rem;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.3rem;margin-bottom:1.6rem}
.sc-stat-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.85rem}
.sc-stat-l{color:var(--ink-soft)}
.sc-stat-v{font-family:var(--mono);font-size:.75rem;color:var(--ink-mute)}
.sc-bar{height:6px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden}
.sc-bar i{display:block;height:100%;width:0;border-radius:100px;background:var(--sc-accent);box-shadow:0 0 12px -2px var(--sc-accent);animation:sc-fill 1.1s var(--ease) .3s forwards}
@keyframes sc-fill{to{width:var(--w)}}
.sc-switch{position:relative;display:flex;gap:0;width:max-content;margin:0;padding:.4rem;border-radius:100px;background:rgba(16,16,23,.8);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.5);backdrop-filter:blur(12px)}
/* AL90 left column: product on top, finish switcher dropped to the CTA level, centred under the ring */
#family .showcase{align-items:stretch}
.sc-col-left{display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;gap:1.2rem}
.sc-col-left .sc-visual{width:100%}
/* AL95: centre the Amazon CTA under its column */
#al95 .sc-details .btn-amazon{display:flex;width:max-content;margin-inline:auto}
.sc-thumb{position:absolute;top:.4rem;bottom:.4rem;left:6px;width:calc((100% - .8rem)/3);border-radius:100px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.16);will-change:transform}
.sc-opt{position:relative;z-index:1;min-width:clamp(84px,10vw,120px);padding:.7rem .4rem;border:none;background:none;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:.86rem;color:var(--ink-mute);transition:color .3s;border-radius:100px}
.sc-opt.is-active{color:var(--ink)}
.sc-opt:hover{color:var(--ink-soft)}
@media(max-width:820px){
  .showcase{grid-template-columns:1fr;gap:1.6rem}
  .sc-visual{max-width:360px;width:100%;margin:0 auto}
  #al95 .sc-float{width:100%}
  .sc-details{margin:0 auto;text-align:center}
  .sc-stats,.fam-features{text-align:left;max-width:400px;margin-left:auto;margin-right:auto}
}

/* =========================================================
   COMPARE
   ========================================================= */
.compare{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,8vh,6rem) clamp(1.1rem,4vw,2.6rem) clamp(4rem,10vh,8rem)}
.cmp-title{text-align:center;font-size:clamp(1.9rem,3.6vw,3rem);margin:.4rem 0 3rem}
.cmp-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:center}
.cmp-card{border:1px solid var(--line);border-radius:22px;padding:1.6rem;background:var(--panel);transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.cmp-card:hover{transform:translateY(-6px);border-color:rgba(138,92,255,.4);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.cmp-card--alt:hover{border-color:rgba(255,45,107,.45)}
.cmp-img{border-radius:14px;overflow:hidden;margin-bottom:1.2rem;aspect-ratio:16/10}
.cmp-img img{width:100%;height:100%;object-fit:cover}
.cmp-card h3{font-family:var(--sans);font-weight:700;font-size:1.3rem}
.cmp-tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--uv-bright);margin:.2rem 0 1rem}
.cmp-card ul{list-style:none;display:grid;gap:.55rem;margin-bottom:1.4rem}
.cmp-card li{padding-left:1.5rem;position:relative;color:var(--ink-soft);font-size:.95rem}
.cmp-card li::before{content:"→";position:absolute;left:0;color:var(--uv-bright)}
.cmp-vs{font-family:var(--mono);font-size:.85rem;color:var(--ink-mute);text-align:center}

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews{background:var(--bg-2);border-top:1px solid var(--line-2);padding:clamp(4rem,10vh,7rem) clamp(1.1rem,4vw,2.6rem)}
.reviews-head{max-width:var(--maxw);margin:0 auto 2.6rem;text-align:center}
.reviews-head h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.stars-big{margin-top:1rem;color:var(--amazon);letter-spacing:.18em;font-size:1.1rem}
.stars-big span{color:var(--ink-soft);font-family:var(--mono);font-size:.85rem;letter-spacing:0;margin-left:.4rem}
.reviews-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.rev-card{border:1px solid var(--line);border-radius:18px;padding:1.5rem;background:var(--panel);display:flex;flex-direction:column;gap:1rem;opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rev-card.in{opacity:1;transform:none}
.rev-stars{color:var(--amazon);letter-spacing:.12em;font-size:.85rem}
.rev-text{font-size:1.02rem;line-height:1.55}
.rev-text b{color:var(--uv-bright);font-weight:600;font-style:italic;font-family:var(--serif)}
.rev-who{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.rev-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:700;color:#1a1206;background:linear-gradient(135deg,var(--uv-bright),var(--pink-soft))}
.rev-name{font-weight:600;font-size:.9rem}
.rev-role{font-size:.78rem;color:var(--ink-mute)}
.rev-verified{margin-left:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-mute);border:1px solid var(--line);border-radius:100px;padding:.2rem .55rem}

/* ---- 3D testimonial book — StPageFlip (real page curl) ---- */
/* touch-action:pan-y — the finger must always be able to scroll the page over the book;
   on phones the flip lib's pointer handling is off entirely (buttons drive the pages) */
.tbook{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.7rem;touch-action:pan-y}
.tb-book-wrap{display:flex;justify-content:center;width:100%}
.tb-book{width:min(94vw,720px);margin:0 auto;touch-action:pan-y;filter:drop-shadow(0 40px 60px rgba(0,0,0,.5))}
.tb-book .stf__parent{margin:0 auto}
.tb-book .stf__item{background:#f0e9dc}
/* each provided page (a StPageFlip .stf__item) is filled by one skin */
.tb-leaf{width:100%;height:100%}
.tb-cover,.tb-sheet{position:relative;width:100%;height:100%;box-sizing:border-box;
  display:flex;flex-direction:column;padding:1.7rem 1.5rem;overflow:hidden}
/* spine-side shading */
.tb-sheet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:26px;
  background:linear-gradient(90deg,rgba(0,0,0,.16),transparent);pointer-events:none;z-index:3}
/* fallback if the library is unavailable: simple responsive grid of the sheets */
.tb-book.tb-fallback{width:100%;max-width:var(--maxw);filter:none;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1.2rem}
.tb-book.tb-fallback .tb-leaf{aspect-ratio:auto}
.tb-book.tb-fallback .tb-cover{display:none}
.tb-book.tb-fallback .tb-sheet{border:1px solid var(--line);border-radius:14px;min-height:230px}

/* cream review / index / end pages */
.tb-sheet{background:linear-gradient(180deg,#faf6ee 0%,#f0e9dc 100%);color:#26202e;align-items:flex-start;justify-content:center;gap:.55rem}
.tb-quote-mark{position:absolute;top:.4rem;right:1rem;font-family:var(--serif);font-size:5rem;line-height:1;color:rgba(138,92,255,.16);z-index:0}
.tb-who{display:flex;align-items:center;gap:.7rem;position:relative;z-index:1}
.tb-av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:.95rem;color:#1a1206;background:linear-gradient(135deg,var(--uv-bright),var(--pink-soft))}
.tb-who-t{display:flex;flex-direction:column;line-height:1.2}
.tb-who-t b{font-weight:600;font-size:.98rem}
.tb-who-t i{font-style:normal;font-size:.76rem;color:#7c7488}
.tb-stars{display:flex;gap:.12rem;font-size:.95rem;letter-spacing:.02em;position:relative;z-index:1}
.tb-star{color:#d9cfc0}
.tb-star.on{color:#f5a800}
.tb-text{position:relative;z-index:1;font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.5;color:#332b3d}
.tb-text b{font-style:italic;font-weight:600;color:var(--uv)}
.tb-verified{margin-top:.2rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:#8a8296;position:relative;z-index:1}

/* dark hardcover */
.tb-cover{background:radial-gradient(120% 90% at 70% 0%,#1c1630 0%,#0c0a16 70%);color:var(--ink);
  align-items:center;justify-content:space-between;text-align:center;
  border:1px solid rgba(182,156,255,.18);box-shadow:inset 0 0 60px rgba(138,92,255,.12)}
.tb-cover-brand{font-family:var(--sans);font-weight:700;font-size:.95rem;letter-spacing:.02em;color:var(--ink-soft)}
.tb-cover-brand span{color:var(--uv-bright)}
.tb-cover-mid{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.tb-cover-title{font-family:var(--serif);font-weight:400;font-size:1.9rem;line-height:1.1;letter-spacing:-.01em;background:linear-gradient(180deg,#f4ecd6,#caa96b);-webkit-background-clip:text;background-clip:text;color:transparent}
.tb-cover-sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.tb-cover-open{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--uv-bright)}
.tb-cover .tb-stars{color:#caa96b;font-size:1rem}
.tb-cover .tb-star,.tb-cover .tb-star.on{color:#e3c583}

/* end page */
.tb-end{align-items:center;justify-content:center;text-align:center;gap:1rem}
.tb-end-t{font-family:var(--serif);font-size:2.1rem;color:#26202e}
.tb-end-rule{width:44px;height:2px;background:linear-gradient(90deg,var(--uv),var(--pink))}
.tb-end-sub{font-size:.9rem;color:#6c6478;max-width:22ch}

/* controls */
.tb-controls{display:flex;align-items:center;gap:1.4rem}
.tb-nav{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.tb-nav:hover:not(:disabled){border-color:rgba(182,156,255,.6);background:#161122;transform:translateY(-2px)}
.tb-nav:disabled{opacity:.32;cursor:not-allowed}
.tb-count{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;color:var(--ink-mute);min-width:56px;text-align:center}
.tb-count b{color:var(--ink);font-weight:700}
.tb-count-sep{margin:0 .35rem;opacity:.5}

/* =========================================================
   LEAD MAGNET
   ========================================================= */
.lead{padding:clamp(4rem,10vh,8rem) clamp(1.1rem,4vw,2.6rem)}
.lead-inner{
  max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;
  border:1px solid var(--line);border-radius:28px;padding:clamp(1.8rem,4vw,3.4rem);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(138,92,255,.14), transparent 55%),
    radial-gradient(80% 120% at 100% 100%, rgba(255,45,107,.1), transparent 55%),
    var(--panel);
}
.lead-copy h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin:.3rem 0 1rem}
.lead-copy>p{color:var(--ink-soft);margin-bottom:1.4rem}
.lead-bullets{list-style:none;display:grid;gap:.6rem}
.lead-bullets li{padding-left:1.7rem;position:relative;color:var(--ink-soft);font-size:.95rem}
.lead-bullets li::before{content:"✓";position:absolute;left:0;color:var(--uv-bright);font-weight:700}
.lead-form{position:relative}
.lf-row{margin-bottom:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.lf-row label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.lf-row input{
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;
  padding:.9rem 1rem;color:var(--ink);font-family:var(--sans);font-size:1rem;transition:border-color .3s,background .3s;
}
.lf-row input:focus{outline:none;border-color:var(--uv);background:rgba(138,92,255,.06)}
.lf-error{display:none;color:var(--pink-soft);font-size:.8rem}
.lf-row.invalid input{border-color:var(--pink)}
.lf-row.invalid .lf-error{display:block}
.lf-fine{margin-top:.9rem;font-size:.78rem;color:var(--ink-mute);text-align:center}
.lf-success{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:.6rem;background:var(--panel);border-radius:16px;padding:1rem;animation:pop .6s var(--ease)}
.lf-success[hidden]{display:none}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lf-success h3{font-family:var(--sans);font-weight:700;font-size:1.4rem}
.lf-success p{color:var(--ink-soft);max-width:32ch}
.lf-check{width:64px;height:64px}
.lf-check svg{width:100%;height:100%}
.lf-check circle{stroke:var(--uv);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:draw .6s var(--ease) .1s forwards}
.lf-check path{stroke:var(--uv-bright);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:draw .4s var(--ease) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* =========================================================
   FINAL CTA + FOOTER
   ========================================================= */
.final-cta{padding:clamp(4rem,12vh,9rem) clamp(1.1rem,4vw,2.6rem);text-align:center;background:radial-gradient(80% 140% at 50% 120%, rgba(138,92,255,.22), transparent 60%)}
.fc-inner{max-width:30ch;margin:0 auto}
.final-cta h2{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:.8rem}
.final-cta p{color:var(--ink-soft);margin-bottom:2rem}
.site-footer{border-top:1px solid var(--line-2);padding:clamp(2.5rem,5vw,4rem) clamp(1.1rem,4vw,2.6rem) 2rem;background:var(--bg-2)}
.foot-top{max-width:var(--maxw);margin:0 auto 2rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.foot-tag{color:var(--ink-mute);font-size:.9rem}
.foot-bottom{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.4rem;border-top:1px solid var(--line-2);font-size:.78rem;color:var(--ink-mute)}
.foot-note{max-width:50ch}

/* =========================================================
   PAINS / OLD WAY VS NEW WAY
   ========================================================= */
.pains{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,10vh,7rem) clamp(1.1rem,4vw,2.6rem)}
.pains-head{text-align:center;max-width:44ch;margin:0 auto 3rem}
.pains-head h2{font-size:clamp(2rem,4vw,3.3rem)}
.pains-grid{display:grid;grid-template-columns:.9fr 1.2fr .9fr;gap:1.4rem;align-items:stretch}
.pain-visual{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);margin:0}
.pain-visual img{width:100%;height:100%;object-fit:cover}
.pain-visual--old img{filter:grayscale(1) brightness(.82)}
.pain-visual--new img{object-position:left center}   /* keep the lamp head in frame; crop the hand side instead */
.pain-visual--new{box-shadow:0 0 0 1px rgba(138,92,255,.35),0 20px 60px rgba(138,92,255,.12)}
.pain-visual figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1rem .9rem;background:linear-gradient(transparent,rgba(5,5,8,.85));font-family:var(--mono);font-size:.66rem;letter-spacing:.22em}
.pain-visual--old figcaption span{color:var(--ink-mute)}
.pain-visual--new figcaption span{color:var(--uv-bright)}
.pain-list{list-style:none;display:grid;gap:1.1rem;align-content:center}
.pain-list li{border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.3rem;background:var(--panel);transition:border-color .4s,transform .4s var(--ease)}
.pain-list li:hover{border-color:rgba(255,45,107,.35);transform:translateX(4px)}
.pain-list h3{font-family:var(--sans);font-weight:600;font-size:1.02rem;margin-bottom:.3rem}
.pain-list h3::before{content:"— ";color:var(--pink-soft)}
.pain-list p{color:var(--ink-soft);font-size:.9rem;line-height:1.5}

.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.6rem;border:1px solid var(--line);border-radius:18px;padding:1.4rem;background:linear-gradient(90deg,rgba(138,92,255,.07),rgba(255,45,107,.05))}
.stats-bar>div{text-align:center;display:flex;flex-direction:column;gap:.15rem}
.stats-bar b{font-family:var(--mono);font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--uv-bright)}
.stats-bar span{font-size:.78rem;color:var(--ink-mute);letter-spacing:.04em}

/* hero urgency note */
.hero-note{display:flex;align-items:center;gap:.55rem;margin:-1.3rem 0 1.8rem;font-size:.82rem;color:var(--ink-mute)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--amazon);flex:none;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,180,61,.5)}70%{box-shadow:0 0 0 9px rgba(255,180,61,0)}100%{box-shadow:0 0 0 0 rgba(255,180,61,0)}}

/* =========================================================
   SALON TRUST
   ========================================================= */
.salon{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,8vh,6rem) clamp(1.1rem,4vw,2.6rem)}
.salon-head{text-align:center;max-width:52ch;margin:0 auto 2.6rem}
.salon-head h2{font-size:clamp(2rem,4vw,3.3rem)}
.salon-sub{margin:1.1rem auto 0;max-width:48ch;color:var(--ink-soft);font-size:1.02rem;line-height:1.55}
.salon-hero{margin:0 0 1.2rem;border-radius:22px;overflow:hidden;border:1px solid var(--line);position:relative}
.salon-hero img{width:100%;display:block}
.salon-hero figcaption,.salon-duo figcaption{padding:.85rem 1.1rem;font-size:.88rem;color:var(--ink-soft);background:var(--panel);border-top:1px solid var(--line-2)}
.salon-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.salon-duo figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.salon-duo img{width:100%;aspect-ratio:16/8.2;object-fit:cover;display:block}

/* =========================================================
   FAQ
   ========================================================= */
.faq{background:var(--bg-2);border-top:1px solid var(--line-2);padding:clamp(4rem,9vh,7rem) clamp(1.1rem,4vw,2.6rem)}
.faq-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.faq-head h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin:.3rem 0 .8rem}
.faq-sub{color:var(--ink-soft)}
.faq-list{display:grid;gap:.7rem}
.faq-list details{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;transition:border-color .3s}
.faq-list details[open]{border-color:rgba(138,92,255,.4)}
.faq-list summary{cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.25rem;font-weight:600;font-size:1rem;position:relative;user-select:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:1.15rem;color:var(--uv-bright);transition:transform .3s var(--ease)}
.faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-list details p{padding:0 1.25rem 1.15rem;color:var(--ink-soft);font-size:.94rem;line-height:1.6}

/* =========================================================
   GUARANTEES
   ========================================================= */
.guarantees{max-width:var(--maxw);margin:0 auto;padding:clamp(2.4rem,5vh,4rem) clamp(1.1rem,4vw,2.6rem) 0}
.guarantees ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.guarantees li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;border:1px solid var(--line);border-radius:16px;padding:1.2rem 1rem;background:rgba(255,255,255,.02)}
.g-ic{
  width:46px;height:46px;display:grid;place-items:center;border-radius:14px;margin-bottom:.35rem;
  background:
    linear-gradient(150deg,#17141f 0%,#0e0c14 100%) padding-box,
    linear-gradient(150deg,rgba(182,156,255,.5),rgba(255,92,138,.25) 60%,rgba(255,255,255,.05)) border-box;
  border:1px solid transparent;
  box-shadow:0 6px 18px rgba(138,92,255,.14);
}
.g-ic svg{width:24px;height:24px;filter:drop-shadow(0 0 5px rgba(138,92,255,.5))}
.guarantees b{font-size:.9rem;font-family:var(--sans)}
.guarantees li>span:last-child{font-size:.76rem;color:var(--ink-mute)}

/* =========================================================
   STICKY MOBILE CTA
   ========================================================= */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  display:none;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(10,10,14,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.sticky-cta.show{transform:none}
.sc-info{display:flex;flex-direction:column;line-height:1.25}
.sc-info b{font-size:.92rem}
.sc-info span{font-size:.72rem;color:var(--amazon)}
.sticky-cta .btn{padding:.65rem 1.2rem;font-size:.88rem}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:980px){
  .main-nav{display:none}
  .anatomy-stage{gap:clamp(1rem,3vh,1.6rem)}
  .anatomy-copy{max-width:none}
  .device-viewer{max-height:44svh}
  /* mobile anatomy: numbered dots on device + legend below */
  .dv-cl b{display:none}
  .dv-cl i{width:19px;height:19px;font-size:.6rem;font-weight:700;color:#fff;box-shadow:0 0 0 3px rgba(138,92,255,.2),0 2px 6px rgba(0,0,0,.35)}
  .dv-legend{display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1rem;margin:1rem auto 0;padding:0;list-style:none;max-width:420px}
  .dv-legend li{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;color:var(--ink-soft)}
  .dv-legend li span{flex:none;width:19px;height:19px;border-radius:50%;background:var(--uv);color:#fff;display:grid;place-items:center;font-size:.6rem;font-weight:700}
  /* caption pinned to the clear bottom-left corner (device head is upper-left, tweezer body
     runs centre→right) so the whole tweezer stays visible; must wrap, not overflow */
  .dv-final{white-space:normal;text-align:left;max-width:min(56vw,205px);line-height:1.35;
    left:4%;transform:translateX(0) translateY(8px);
    font-size:.72rem;border-radius:16px;padding:.55rem .8rem;bottom:5%;gap:.4rem}
  .dv-final.on{transform:translateX(0) translateY(0)}
  .feature-split,.kit-inner,.lead-inner{grid-template-columns:1fr}
  .kit-inner .kit-media{order:-1}
  .family-stage{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .cmp-grid{grid-template-columns:1fr;gap:1rem}
  .cmp-vs{padding:.4rem 0}
  .pains-grid{grid-template-columns:1fr 1fr}
  .pain-list{grid-column:1/-1;order:-1}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .salon-duo{grid-template-columns:1fr}
  .faq-inner{grid-template-columns:1fr}
  .guarantees ul{grid-template-columns:repeat(2,1fr)}
  .sticky-cta{display:flex}
}
@media(max-width:600px){
  body{font-size:16px}
  .header-cta{display:none}
  .hero-chips li{flex:1 1 calc(50% - .7rem)}
  .scroll-cue{display:none}
  .anatomy-scroll{height:200vh}
}

/* =========================================================
   lab-hero — the particle/UV experience as the homepage hero
   (sticky section; progress driven by lab-hero.js)
   ========================================================= */
.lab-hero{position:relative;height:520svh;background:var(--bg)}
.lab-sticky{position:sticky;top:0;height:100svh;overflow:hidden;touch-action:pan-y}
.lab-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(46% 40% at 50% 44%, rgba(124,74,255,.20), rgba(138,92,255,.07) 46%, transparent 72%)}
.lab-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.lab-stage canvas{display:block;width:100%;height:100%}
.lab-video{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none}
.lab-video canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lab-viddark{position:absolute;inset:0;background:#050506;pointer-events:none}
.lab-vidglow{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(34% 40% at 63% 40%, rgba(138,92,255,.30), transparent 72%)}
.lab-ov{position:absolute;inset:0;z-index:5;display:grid;place-items:center;text-align:center;
  padding:0 clamp(1.1rem,4vw,2.6rem);pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.lab-ov.on{opacity:1}
.lab-ov--top{align-items:end}
.lab-ov--top>div{margin-bottom:16vh}
.lab-ov .eyebrow{margin-bottom:.7rem}
.lab-sub{color:var(--ink-soft);font-family:var(--mono);font-size:.8rem;letter-spacing:.1em}
.lab-h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1.05}
#labOv3{place-items:center start;padding-left:clamp(1.5rem,7vw,6rem);
  background:linear-gradient(90deg, rgba(6,6,10,.94) 0%, rgba(6,6,10,.78) 36%, rgba(6,6,10,.32) 62%, transparent 84%)}
.lab-hero-inner{max-width:600px;text-align:left;text-shadow:0 2px 40px rgba(8,8,11,.9)}
.lab-hero-inner .hero-title,.lab-hero-inner .hero-sub,.lab-hero-inner .hero-cta,.lab-hero-inner .hero-chips{opacity:1;transform:none}
.lab-ov.on .hero-cta a{pointer-events:auto}
/* staged funnel — the first block teases the tour instead of firing CTAs; buying stays
   one tap away via the header button (desktop) / sticky bottom bar (mobile) */
.hero-journey{margin-top:1.9rem;display:flex;flex-direction:column;gap:1.15rem;align-items:flex-start}
.hj-tour{display:flex;align-items:center;gap:.7rem;font-family:var(--mono);font-weight:700;font-size:.95rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);line-height:1.3}
.hj-tour i{font-style:normal;color:var(--uv-bright);animation:labCueDrop 1.5s var(--ease) infinite}
.hj-gift{display:inline-flex;align-items:center;gap:.55rem;border:1px solid rgba(138,92,255,.45);background:rgba(138,92,255,.10);border-radius:100px;padding:.6rem 1.05rem;font-size:.86rem;font-weight:600;color:var(--ink);box-shadow:0 8px 30px rgba(138,92,255,.14)}
/* tour stops as chips — number + stop, roomy gaps so the frames don't crowd each other
   (sized so all three fit one row inside the 600px hero column) */
.hero-chips--tour{margin-top:.15rem;gap:.8rem}
.hero-chips--tour li{flex-direction:row;align-items:center;gap:.55rem;padding:.62rem .9rem}
.hero-chips--tour b{font-size:.76rem}
.hero-chips--tour span{font-size:.76rem;color:var(--ink-soft)}
.lab-cue{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mute);transition:opacity .5s}
.lab-cue i{width:1px;height:40px;background:linear-gradient(var(--uv-bright),transparent)}
/* end-of-hero cue: shows once the light is on, nudging the scroll onward */
.lab-cue--end{opacity:0;color:var(--ink-soft)}
.lab-cue--end i{animation:labCueDrop 1.5s var(--ease) infinite}
@keyframes labCueDrop{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(7px);opacity:.35}}
/* mobile: lift the scroll cues above the fixed "Buy on Amazon" bar so they stay visible */
@media(max-width:980px){.lab-cue{bottom:6rem}}
.lab-fallback{position:absolute;inset:0;z-index:4;display:none;place-items:center;text-align:center;padding:2rem}
.lab-fallback img{max-width:min(620px,86vw);border-radius:20px;border:1px solid var(--line)}
@media(max-width:640px){
  /* no particle phase on phones — the film opens the page, so the runway is shorter */
  .lab-hero{height:330svh}
  .lab-stage,.lab-ambient{display:none}
  .lab-hero-inner .hero-journey{align-items:center;gap:1rem}
  .hj-tour{text-align:center;max-width:88vw;font-size:.84rem}
  .hj-gift{font-size:.8rem;text-align:center;white-space:normal;line-height:1.4;border-radius:18px}
  /* tour chips stack as full-width rows — a readable checklist, not a cramped grid */
  .hero-chips--tour{width:100%;max-width:340px;gap:.65rem}
  .hero-chips--tour li{flex:1 1 100%;justify-content:center}
  /* the horizontal left-scrim only darkens the left edge — on a centred mobile layout the
     text lands over the bright marble frame. Swap to a full vertical scrim so the title,
     copy, CTAs and chips stay legible over the (still faintly visible) product shot. */
  #labOv3{place-items:center;padding:0 clamp(1.2rem,6vw,2rem);
    background:linear-gradient(180deg, rgba(6,6,10,.44) 0%, rgba(6,6,10,.68) 34%, rgba(6,6,10,.88) 72%, rgba(6,6,10,.96) 100%)}
  /* final hero on phones: a near-solid scrim (the frame is only ~56vw tall, so the copy can
     never sit INSIDE it — let it sit ON a clean field instead) + a title that stays two lines */
  #labOv3{background:linear-gradient(180deg, rgba(6,6,10,.86) 0%, rgba(6,6,10,.94) 40%, rgba(6,6,10,.97) 100%)}
  .lab-hero-inner{text-align:center;max-width:440px}
  .lab-hero-inner .hero-title{font-size:clamp(2.2rem,9.4vw,2.9rem);margin:.3rem 0 .9rem}
  .lab-hero-inner .hero-sub{font-size:.98rem;max-width:34ch;margin-left:auto;margin-right:auto}
  .lab-hero-inner .hero-cta{justify-content:center}
  .lab-hero-inner .hero-chips{justify-content:center}
  /* film captions ("Scroll — press the light on", "The UV wakes up") sit ABOVE the 16:9 frame,
     not at the bottom where the scroll cue and the sticky Amazon bar live on real phones */
  .lab-ov--top{align-items:end}
  .lab-ov--top>div{margin-bottom:calc(50svh + 28.125vw + 1.1rem)}
  .lab-cue{bottom:6.5rem}
  /* backdrop-filter blur re-computes on every scroll frame — expensive on phones.
     Swap it for a slightly more opaque solid bar; visually near-identical, much cheaper. */
  .site-header.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(8,8,11,.94)}
}

/* showroom vitrine — the 23" lamp finishes (moved from the Lab, under the tweezer) */
.showroom{position:relative;background:var(--bg);border-top:1px solid var(--line-2);
  padding:clamp(4rem,10vh,7rem) clamp(1.1rem,4vw,2.6rem) clamp(5rem,12vh,8rem)}
.sr-head{text-align:center;max-width:46ch;margin:0 auto 3rem}
.sr-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.04;letter-spacing:-.01em}
.sr-italic{font-style:italic}
.sr-sub{margin-top:1rem;color:var(--ink-soft)}
.sr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;max-width:760px;margin:0 auto}
.sr-item{display:flex;flex-direction:column;gap:.8rem}
.sr-item .sr-card{flex:1}
.sr-buy{justify-content:center;text-align:center}
.sr-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--panel);transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.sr-card:hover{transform:translateY(-8px);border-color:rgba(138,92,255,.55);box-shadow:0 24px 60px rgba(138,92,255,.18)}
.sr-img{aspect-ratio:4/5;overflow:hidden}
.sr-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.sr-card:hover .sr-img img{transform:scale(1.07)}
.sr-meta{display:flex;flex-direction:column;gap:.15rem;padding:1rem 1.15rem 1.2rem}
.sr-meta b{font-size:1.02rem}
.sr-meta span{font-size:.8rem;color:var(--ink-mute)}
.sr-meta i{margin-top:.7rem;font-style:normal;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--uv-bright);opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s var(--ease)}
.sr-card:hover .sr-meta i{opacity:1;transform:none}
@media(max-width:820px){.sr-grid{grid-template-columns:1fr 1fr;max-width:640px}}
@media(max-width:520px){.sr-grid{grid-template-columns:1fr}}

/* =========================================================
   LIGHT THEME — "quiet luxury" ivory edition
   Opt-in via html[data-theme="light"] (toggle in the header,
   persisted in localStorage). Everything runs off the same
   CSS variables; the cinematic zones (the hero film) re-pin
   the dark palette locally and stay untouched, the way big
   fashion/beauty houses keep the campaign film dark inside
   an otherwise ivory site.
   ========================================================= */
html[data-theme="light"]{
  --bg:#faf7f1;                 /* warm bone */
  --bg-2:#f2ede3;               /* deep ivory band */
  --panel:#fffdf9;              /* warm-white cards */
  --ink:#211a28;                /* warm near-black plum */
  --ink-soft:#5c5468;
  --ink-mute:#6f6779;
  --line:rgba(33,26,40,.13);
  --line-2:rgba(33,26,40,.07);
  --uv:#6a3bf5;                 /* deeper violet for light-surface contrast */
  --uv-bright:#5d2fe0;
  --uv-glow:rgba(106,59,245,.20);
  --pink:#e0175f;
  --pink-soft:#c9134f;
  --gold:#a16207;               /* champagne — the luxury accent */
}
/* faint warm sheen from the top — the "expensive paper" feel */
html[data-theme="light"] body{
  background:radial-gradient(90% 46rem at 50% 0%, #fffdf8 0%, var(--bg) 70%) fixed;
}

/* --- HERO, light edition: the same film behind a warm "milk glass" veil ---
   The black cover layer becomes an ivory one, the side/vertical scrims flip to warm
   white, text runs in plum ink with a soft ivory halo. (The particle word itself is
   re-tinted to deep violet + champagne by lab-hero.js when the theme flips.) */
html[data-theme="light"] .lab-hero{
  background:radial-gradient(60% 50% at 50% 38%, rgba(138,92,255,.10), transparent 70%), var(--bg);
}
html[data-theme="light"] .lab-viddark{background:#faf7f1}
html[data-theme="light"] .lab-ambient{
  background:radial-gradient(46% 40% at 50% 44%, rgba(124,74,255,.13), rgba(161,98,7,.05) 46%, transparent 72%);
}
html[data-theme="light"] .lab-vidglow{
  mix-blend-mode:multiply;
  background:radial-gradient(34% 40% at 63% 40%, rgba(138,92,255,.30), transparent 72%);
}
html[data-theme="light"] .lab-ov{text-shadow:0 1px 26px rgba(250,247,241,.9)}
html[data-theme="light"] #labOv3{
  background:linear-gradient(90deg, rgba(250,247,241,.96) 0%, rgba(250,247,241,.82) 36%, rgba(250,247,241,.36) 62%, transparent 84%);
}
html[data-theme="light"] .lab-hero-inner{text-shadow:0 2px 40px rgba(250,247,241,.92)}
@media(max-width:640px){
  html[data-theme="light"] #labOv3{
    background:linear-gradient(180deg, rgba(250,247,241,.88) 0%, rgba(250,247,241,.95) 40%, rgba(250,247,241,.98) 100%);
  }
}

/* --- header: solid warm glass so the nav reads over the dark film and the ivory page --- */
html[data-theme="light"] .site-header{
  background:rgba(250,247,241,.88);
  -webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);
  border-bottom-color:var(--line-2);
  box-shadow:0 10px 34px rgba(33,26,40,.06);
}
html[data-theme="light"] .site-header.scrolled{background:rgba(250,247,241,.94)}
@media(max-width:640px){
  html[data-theme="light"] .site-header.scrolled{background:rgba(250,247,241,.97);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* --- champagne details: section eyebrows, marquee stars, rating gold --- */
html[data-theme="light"] main .eyebrow{color:var(--gold)}
html[data-theme="light"] .marquee i{color:var(--gold)}
html[data-theme="light"] .lead-bullets li::before{color:var(--gold)}

/* --- film grain over the whole page (desktop) — the "printed matte paper" texture --- */
@media(min-width:641px){
  html[data-theme="light"] body::after{
    content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.045;
    mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* --- ambient light washes behind key sections — depth instead of flat white --- */
html[data-theme="light"] .family{background:radial-gradient(52% 60% at 50% 32%, rgba(138,92,255,.09), transparent 70%)}
html[data-theme="light"] .reviews{background:radial-gradient(55% 50% at 50% 18%, rgba(161,98,7,.07), transparent 70%)}
html[data-theme="light"] .showroom{background:radial-gradient(60% 55% at 50% 24%, rgba(138,92,255,.08), transparent 72%), var(--bg)}
html[data-theme="light"] .marquee{background:linear-gradient(180deg,#f6f1e8,#f2ede3)}
html[data-theme="light"] .kit{background:linear-gradient(180deg,#f4efe6 0%, #faf7f1 100%)}
html[data-theme="light"] .faq{background:linear-gradient(180deg,#f5f0e7 0%, #faf7f1 100%)}

/* --- glass cards: translucent warm white, inner top highlight, deep soft drop --- */
html[data-theme="light"] :is(.cmp-card,.faq-list details,.guarantees li,.sr-card){
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,253,249,.62));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-color:rgba(33,26,40,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(33,26,40,.05), 0 24px 60px -18px rgba(33,26,40,.18);
}
html[data-theme="light"] .sr-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 30px 70px -14px rgba(106,59,245,.28)}
html[data-theme="light"] :is(.pain-visual,.fs-media,.kit-media,.fam-media,.salon-hero,.salon-duo figure){
  box-shadow:0 2px 4px rgba(33,26,40,.06), 0 26px 60px -16px rgba(33,26,40,.22);
}
/* champagne-to-violet hairline frame on the stats band + a lifted CTA glow */
html[data-theme="light"] .stats-bar{
  border:1px solid transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(120deg, rgba(161,98,7,.55), rgba(138,92,255,.45)) border-box;
  box-shadow:0 16px 40px -14px rgba(33,26,40,.15);
}
html[data-theme="light"] .btn-amazon{box-shadow:0 14px 38px rgba(255,154,46,.38)}

/* --- surfaces that were tinted white-on-dark flip to plum-on-ivory --- */
html[data-theme="light"] .btn-ghost{background:rgba(33,26,40,.05);border-color:rgba(33,26,40,.16);color:var(--ink)}
html[data-theme="light"] .btn-ghost:hover{background:rgba(33,26,40,.09)}
html[data-theme="light"] .sc-stats{background:rgba(33,26,40,.03)}
html[data-theme="light"] .sc-bar{background:rgba(33,26,40,.09)}
html[data-theme="light"] .sw{border-color:rgba(33,26,40,.22)}
html[data-theme="light"] .sc-thumb{background:linear-gradient(180deg,rgba(33,26,40,.10),rgba(33,26,40,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
html[data-theme="light"] .guarantees li{background:var(--panel)}
html[data-theme="light"] .hero-chips li{background:rgba(255,255,255,.55);border-color:rgba(33,26,40,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 26px -10px rgba(33,26,40,.14)}
html[data-theme="light"] .lf-row input{background:#fff}
html[data-theme="light"] .lf-row input:focus{background:rgba(106,59,245,.05)}
html[data-theme="light"] .tb-nav:hover:not(:disabled){background:var(--bg-2)}
/* anatomy: the near-black top glow becomes a warm parchment one */
html[data-theme="light"] .anatomy{background:radial-gradient(120% 80% at 50% 0%, #efe7d8 0%, var(--bg) 60%)}
/* finish switcher: dark glass pill → warm glass pill */
html[data-theme="light"] .sc-switch{background:rgba(255,255,255,.72);border-color:rgba(33,26,40,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 16px 40px -12px rgba(33,26,40,.20)}
/* icon tiles (features + guarantees): dark squares → warm glass tiles, same gradient
   hairline; the violet-pink SVG strokes are deepened via filter so they read on white */
html[data-theme="light"] :is(.feat-ic,.g-ic){
  background:
    linear-gradient(150deg,#ffffff 0%,#f4eefc 100%) padding-box,
    linear-gradient(150deg,rgba(106,59,245,.55),rgba(224,23,95,.35) 60%,rgba(161,98,7,.28)) border-box;
  box-shadow:0 10px 26px -8px rgba(106,59,245,.25), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .feat-ic::after{background:radial-gradient(60% 60% at 50% 30%,rgba(138,92,255,.12),transparent 70%)}
html[data-theme="light"] :is(.feat-ic,.g-ic) svg{filter:saturate(1.35) brightness(.7)}
html[data-theme="light"] .feat-list li:hover .feat-ic{box-shadow:0 16px 36px -8px rgba(106,59,245,.35), inset 0 1px 0 rgba(255,255,255,.9)}

/* showroom finish cards: the studio shots are night-lit — blend them into the ivory
   cards editorially (gentle exposure lift + the photo's foot dissolving into cream) */
html[data-theme="light"] .sr-img{position:relative}
html[data-theme="light"] .sr-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* a thin seam feather only — a taller/denser fade reads as fog IN FRONT of the lamp
     and swallows its base */
  background:linear-gradient(180deg, rgba(255,253,249,0) 91%, rgba(255,253,249,.5) 100%);
}
html[data-theme="light"] .sr-img img{filter:brightness(1.08) saturate(1.05)}

/* the book's big 50%-black drop-shadow was tuned for the dark bg — on ivory it reads
   as a dirty blob; swap for a warm two-layer contact + soft-falloff shadow */
html[data-theme="light"] .tb-book{
  filter:drop-shadow(0 3px 6px rgba(33,26,40,.10)) drop-shadow(0 26px 34px rgba(59,44,28,.16));
}

/* the testimonial book cover, ivory edition: cream leather + deep gold foil */
html[data-theme="light"] .tb-cover{
  background:radial-gradient(120% 90% at 70% 0%, #fffdf8 0%, #f0e8d8 70%);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(33,26,40,.08);
}
html[data-theme="light"] .tb-cover-brand{color:#5c5468}
html[data-theme="light"] .tb-cover-brand span{color:#6a3bf5}
html[data-theme="light"] .tb-cover-title{background:linear-gradient(180deg,#9a7b2e,#7c5d10);-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .tb-cover .tb-star,
html[data-theme="light"] .tb-cover .tb-star.on{color:#a16207}
html[data-theme="light"] .tb-cover-sub{color:#7a7286}
html[data-theme="light"] .tb-cover-open{color:#a16207}
/* the anatomy caption pill stays a dark capsule — its text must stay light too */
html[data-theme="light"] .dv-final{color:#f4f2ef}
html[data-theme="light"] .dv-final-star{color:#b69cff}
html[data-theme="light"] .stats-bar{background:linear-gradient(90deg,rgba(161,98,7,.06),rgba(106,59,245,.05))}
html[data-theme="light"] .stars-big{color:var(--gold)}

/* --- mobile sticky buy bar: warm glass instead of black glass --- */
html[data-theme="light"] .sticky-cta{background:rgba(250,247,241,.94);border-top-color:var(--line);box-shadow:0 -10px 30px rgba(33,26,40,.08)}

/* --- theme toggle button (in the header, next to EN/ES) --- */
.theme-toggle{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;
  transition:color .3s,border-color .3s,transform .3s var(--ease)}
.theme-toggle:hover{color:var(--ink);border-color:rgba(138,92,255,.55);transform:translateY(-1px)}
.theme-toggle svg{display:block}
.theme-toggle .tt-moon{display:none}
html[data-theme="light"] .theme-toggle .tt-sun{display:none}
html[data-theme="light"] .theme-toggle .tt-moon{display:block}

/* one-shot smooth cross-fade while switching themes (class added for ~.6s by JS) */
html.theming, html.theming body, html.theming *{
  transition:background-color .5s var(--ease),background .5s var(--ease),color .5s var(--ease),
    border-color .5s var(--ease),box-shadow .5s var(--ease)!important;
}

/* =========================================================
   STACKING CARD DECK — sections rise over one another as
   you scroll, so the mid-page reads like a shuffled deck
   instead of one long scroll.
   ========================================================= */
.stack{position:relative;z-index:1}
.stack-card{
  position:sticky;top:0;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  border-radius:30px 30px 0 0;
  box-shadow:0 -30px 80px rgba(0,0,0,.6);
  background:var(--bg);
  overflow:hidden;
  transform-origin:50% 0;
  will-change:transform,filter;
  isolation:isolate;
}
/* hairline highlight on the leading (top) edge — reads as a physical card */
.stack-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:6;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
}
/* per-card mood: a soft brand-tint wash over the base bg. Because it's a translucent
   tint on top of var(--bg) (not a dark solid mixed into a light page), it stays clean
   in BOTH themes and never muddies into a grey smudge. Centre sits just above the top
   edge so it reads as a gentle top glow, not a blob in the middle. */
.stack-card[data-card="0"]{background:radial-gradient(150% 70% at 50% -8%, rgba(138,92,255,.16), transparent 60%), var(--bg)}
.stack-card[data-card="1"]{background:radial-gradient(150% 70% at 50% -8%, rgba(138,92,255,.13), transparent 60%), var(--bg)}
.stack-card[data-card="2"]{background:radial-gradient(150% 70% at 50% -8%, rgba(255,45,107,.13), transparent 60%), var(--bg-2)}
.stack-card[data-card="3"]{background:radial-gradient(150% 70% at 50% -8%, rgba(96,132,255,.14), transparent 60%), var(--bg)}
.stack-card[data-card="4"]{background:radial-gradient(150% 70% at 50% -8%, rgba(45,200,150,.12), transparent 60%), var(--bg-2)}
/* keep inner section spacing tidy inside a viewport-tall card */
.stack-card>section{width:100%;position:relative;z-index:1;padding-top:clamp(3rem,6vh,4.5rem);padding-bottom:clamp(3rem,6vh,4.5rem)}
.stack-card>.kit .kit-inner{padding-top:clamp(1.5rem,3vh,2.5rem);padding-bottom:clamp(1.5rem,3vh,2.5rem)}

/* entrance animation for each card's content — only when JS enables it */
.stack.stack-anim .stack-card>section{opacity:0;transition:opacity .8s var(--ease), transform .8s var(--ease)}
.stack.stack-anim .stack-card.card-in>section{opacity:1;transform:none}
/* the pinned base card (the screenshot block) is already on screen — never hide it */
.stack.stack-anim .stack-card[data-anim="none"]>section{opacity:1;transform:none;transition:none}
.stack.stack-anim .stack-card[data-anim="rise"]>section{transform:translateY(70px)}
.stack.stack-anim .stack-card[data-anim="left"]>section{transform:translateX(-80px)}
.stack.stack-anim .stack-card[data-anim="zoom"]>section{transform:scale(.9)}
.stack.stack-anim .stack-card[data-anim="tilt"]>section{transform:perspective(1200px) rotateX(11deg) translateY(52px);transform-origin:50% 100%}

/* light theme: softer shadow + top highlight (tints already adapt across themes) */
html[data-theme="light"] .stack-card{box-shadow:0 -26px 66px rgba(60,40,90,.16)}
html[data-theme="light"] .stack-card::before{background:linear-gradient(90deg,transparent,rgba(120,90,180,.4),transparent)}

/* -------- deck: fill the viewport-tall cards so content isn't marooned in the middle --
   the roomy blocks (features / kit) are shorter than a viewport; scale their media, type
   and spacing up so the card reads as a full, deliberate layout instead of a tiny island. */
@media (min-width:761px) and (min-height:641px){
  /* trim the card's own block padding — the content itself now fills the height */
  .stack-card[data-card="3"]>section,
  .stack-card[data-card="4"]>section{padding-top:clamp(2rem,4vh,3.5rem);padding-bottom:clamp(2rem,4vh,3.5rem)}
  .stack-card[data-card="3"] .feature-split,
  .stack-card[data-card="4"] .kit-inner{max-width:1360px;width:100%;gap:clamp(3rem,6vw,6.5rem)}
  /* media scales with the viewport HEIGHT so the block stays full on tall screens too */
  .stack-card[data-card="3"] .fs-media img{height:clamp(380px,76vh,780px);width:100%;object-fit:cover;object-position:center;aspect-ratio:auto}
  /* the kit photo is landscape (4:3, 1400x1050) — show ALL of it, never crop it into a portrait frame */
  .stack-card[data-card="4"] .kit-media{aspect-ratio:4/3;max-height:78vh;width:100%}
  .stack-card[data-card="4"] .kit-media img{width:100%;height:100%;object-fit:cover;object-position:center;aspect-ratio:4/3}
  .stack-card[data-card="3"] .fs-copy h2,
  .stack-card[data-card="4"] .kit-copy h2{font-size:clamp(2.4rem,2.2vw+2vh,4.4rem);margin-bottom:clamp(1.4rem,3vh,2.4rem)}
  .stack-card[data-card="3"] .feat-list{gap:clamp(1.4rem,3vh,2.6rem)}
  .stack-card[data-card="3"] .feat-list h3{font-size:clamp(1.1rem,.6vw+.9vh,1.35rem)}
  .stack-card[data-card="3"] .feat-list p{font-size:clamp(1rem,.4vw+.7vh,1.12rem)}
  .stack-card[data-card="3"] .feat-ic{width:56px;height:56px}
  .stack-card[data-card="3"] .feat-ic svg{width:30px;height:30px}
  .stack-card[data-card="4"] .kit-inner{grid-template-columns:1fr 1.7fr;align-items:center}
  .stack-card[data-card="4"] .kit-copy>p{font-size:clamp(1.1rem,.5vw+.8vh,1.32rem);margin-bottom:clamp(1.4rem,3vh,2.4rem)}
  .stack-card[data-card="4"] .kit-list{gap:clamp(1.1rem,2.4vh,1.9rem)}
  .stack-card[data-card="4"] .kit-list li{font-size:clamp(1.12rem,.5vw+.85vh,1.35rem);padding-left:2.1rem}
  .stack-card[data-card="4"] .kit .eyebrow{font-size:.82rem}
}

/* mobile: keep the deck, soften the chrome (rounded top edge, lighter shadow) */
@media (max-width:760px){
  .stack-card{border-radius:22px 22px 0 0;box-shadow:0 -18px 40px rgba(0,0,0,.28)}
  /* a tall card pins with its BOTTOM at the viewport bottom — right under the sticky Amazon bar.
     Give every card's content clearance for that bar, and a scroll "hold" (margin) so the
     card stays fully readable for a while before the next one climbs over it. */
  .stack-card>section{padding-bottom:calc(clamp(3rem,6vh,4.5rem) + 5.5rem)}
  .stack-card:not(:last-child){margin-bottom:38vh}
  .stack-card[data-card="0"]{border-radius:0}
  .stack.stack-anim .stack-card[data-anim="left"]>section{transform:translateX(-40px)}
  .stack.stack-anim .stack-card[data-anim="tilt"]>section{transform:translateY(40px)}
}
/* once a card has entered, its content ALWAYS settles at rest — this outranks every
   data-anim start-state above (same specificity there meant the start-state won and the
   content stayed shifted; invisible on desktop, cut off on phones) */
.stack.stack-anim .stack-card.card-in[data-anim]>section{opacity:1;transform:none}

/* very short viewports (landscape phones): fall back to plain vertical flow (no pinning, no clipping) */
@media (max-height:520px){
  .stack-card{position:static;min-height:0;border-radius:0;box-shadow:none;overflow:visible}
  .stack-card::before{display:none}
  .stack.stack-anim .stack-card>section{opacity:1;transform:none;transition:none}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .rev-card{opacity:1;transform:none}
  .callout{opacity:1}
  .stack.stack-anim .stack-card>section{opacity:1!important;transform:none!important}
}

/* lead form: honeypot (off-screen, never for humans) + footer links */
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf-fine a{color:inherit;text-decoration:underline}
.foot-link{color:var(--ink-mute);text-decoration:underline;margin-left:.6rem}