/* ============================================================
   Home page — 3D gift boxes on white, Curio hero, Curio helper (index.html).
   ============================================================ */
:root{
  --hp-ink:#2F024E;
  --hp-gold:#CD9423;
  --hp-gold-hi:#F1CB6A;
  --hp-gold-ink:#8A5E06;
  --hp-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- PANEL 1: stage (white) ---------- */
.hp-stage{position:relative; overflow:hidden; color:var(--hp-ink); text-align:center; background:#fff;
  padding:30px 0 34px; min-height:calc(100svh - 120px);}
/* warm light behind the boxes, on its own layer so the stage stays plain white */
.hp-stage::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(62% 46% at 50% 52%, rgba(255,230,170,.55), rgba(255,255,255,0) 72%);}
.hp-sparks{position:absolute; inset:0; pointer-events:none;}
.hp-sp{position:absolute; width:var(--s); height:var(--s); background:#E3AE3A; opacity:0;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:hpTw var(--t) ease-in-out var(--dl) infinite;}
@keyframes hpTw{0%,100%{opacity:0; transform:translateY(0) scale(.6);} 45%{opacity:.85; transform:translateY(-8px) scale(1);} 70%{opacity:.2;}}

.hp-stage-head{position:relative; z-index:3; padding:0 20px;}
.hp-pill{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#6E4F0C; background:var(--surface-warm); border:1px solid #EBDDB4; border-radius:20px; padding:7px 16px;}
.hp-stage h2{font-size:clamp(30px,5.4vw,56px); font-weight:800; line-height:1.08; margin:16px 0 10px; color:var(--hp-ink);}
.hp-word{display:inline-block; color:var(--hp-gold-ink); transition:opacity .25s ease, transform .25s ease;}
.hp-word.swap{opacity:0; transform:translateY(8px);}
/* On phones the word sits on its own line, so the heading has the same height whatever the word. Before, between about 370 and 550 px wide,
   a short word ("Time") fitted beside "Give the Gift of" and a long one ("Feeling Lighter") wrapped, so the boxes below jumped 33 px up and down
   while swiping (Alex 2026-11-10, on his phone). Measured: every word fits on ONE line from 548 px up, so from 600 px the heading stays on one line. */
@media (max-width:599px){ .hp-stage h2 .hp-word{display:block; white-space:nowrap;} }
.hp-stage-head p{font-size:clamp(15px,2vw,18px); color:var(--text); margin:0;}
.hp-stage-head b{color:var(--hp-ink);}

/* carousel */
.hp-car{--ch:clamp(360px, calc(100svh - 470px), 620px); --cw:min(calc(var(--ch) * .5625), 58vw); --sp:120%; /* --sp = distance between two boxes, in card widths */
  position:relative; z-index:2; height:var(--ch); margin:12px auto 0; perspective:1500px;
  perspective-origin:50% 45%; touch-action:pan-y; user-select:none; -webkit-user-select:none; outline:none; cursor:grab;}
.hp-car.dragging{cursor:grabbing;}
.hp-car:focus-visible{outline:3px solid var(--hp-ink); outline-offset:-6px; border-radius:20px;}
.hp-card{--d:0; --ad:0; position:absolute; left:50%; top:50%; width:var(--cw); aspect-ratio:9/16; margin:0; padding:0; border:0;
  background:none; font:inherit; color:inherit; text-align:inherit; cursor:pointer; transform-style:preserve-3d;
  transform:translate(-50%,-50%) translateX(calc(var(--d) * var(--sp))) translateZ(calc(var(--ad) * -170px))
    rotateY(clamp(-34deg, calc(var(--d) * -22deg), 34deg));
  opacity:clamp(0, calc(1.7 - var(--ad) * .62), 1);
  transition:transform .65s var(--hp-ease), opacity .45s ease; will-change:transform;}
.hp-car.dragging .hp-card,.hp-car.floating .hp-card{transition:none;}   /* .floating = the slow continuous drift (home.js startDrift): every frame is set by the script */
.hp-card.far{pointer-events:none; visibility:hidden; transition:transform .65s var(--hp-ease), opacity .45s ease, visibility 0s linear .7s;}   /* a box that leaves fades out completely first, and is only hidden after the fade (2026-11-11: no jump); one that comes in starts from fully transparent */

.hp-face{position:relative; display:block; width:100%; height:100%;}

/* ----- the gift box: the poster's own gold box, cut out of the poster art (box-closed.webp / box-open.webp share one frame) ----- */
.gb-wrap{--W:calc(var(--cw) * .96); position:absolute; left:0; right:0; top:2%; bottom:36%;}
.gb-shadow{position:absolute; left:50%; bottom:5%; width:calc(var(--W) * .92); height:calc(var(--W) * .15); transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(45,0,70,.38), rgba(45,0,70,0));}
.gbox{position:absolute; left:50%; bottom:5%; width:var(--W); aspect-ratio:780/674; transform:translateX(-50%);
  animation:gbFloat 3.6s ease-in-out infinite alternate; animation-delay:var(--dly,0s);}
@keyframes gbFloat{from{transform:translateX(-50%) translateY(0) rotate(-1deg);} to{transform:translateX(-50%) translateY(-3%) rotate(1deg);}}
.hp-card.center .gbox{animation-duration:3s;}
/* light that spills out when the box opens */
.gbox::before{content:""; position:absolute; z-index:-1; left:4%; right:12%; bottom:28%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,231,140,.95), rgba(255,214,102,.5) 55%, rgba(255,214,102,0));
  opacity:0; transform:scale(.5); transition:opacity .3s ease, transform .55s var(--hp-ease);}
.gb-img{position:absolute; left:0; bottom:0; width:100%; height:auto; display:block; pointer-events:none; -webkit-user-drag:none;}
/* the closed picture is drawn twice, split along the lid's bottom edge: the lid (with the bow) lifts off and tips back, the body stays */
.gb-clid{clip-path:polygon(0 0,100% 0,100% 22.77%,73.73% 57.4%,0 46.94%); transform-origin:88% 34%;}
.gb-cbody{clip-path:polygon(0 46.94%,73.73% 57.4%,100% 22.77%,100% 100%,0 100%);}
/* Opening (2026-11-10, smoother): the lid swings up and back to where the open picture has its lid, and the closed box melts into the
   open one under it (a plain cross-fade, no jump); light then grows out of the inside of the box, and the video unfolds from that light
   (the viewer's .hp-vglow and the seed-sized .hp-vbox, further down). */
.gb-open{opacity:0;}
/* The open picture is split like the closed one, along the back rim of the box: the box without its lid (.gb-obody) and the open lid alone
   (.gb-olid). The open lid stays hidden while the closed lid travels and only fades in as that one arrives, so there are never two lids. */
.gb-obody{clip-path:polygon(0 0,27% 0,27% 38.4%,32% 40.6%,87.2% 46.5%,88.5% 55.3%,100% 56.5%,100% 100%,0 100%);}
.gb-olid{clip-path:polygon(27% 0,100% 0,100% 56.5%,88.5% 55.3%,87.2% 46.5%,32% 40.6%,27% 38.4%); z-index:1;}
.gb-glow{position:absolute; z-index:2; left:51%; top:44%; width:78%; aspect-ratio:1; border-radius:50%; pointer-events:none; opacity:0;
  transform:translate(-50%,-50%) scale(.25);
  background:radial-gradient(closest-side, #fff 0, rgba(255,247,210,.97) 26%, rgba(255,222,128,.62) 56%, rgba(255,214,102,0) 100%);}
/* 2026-11-10 night (Alex: the lid jumped and a second lid showed behind it): the closed lid and the open picture's lid are two different
   shapes (the open one is tipped back and shows its inside), so no slide can turn one into the other. Now the lid only cracks open on its
   hinge, light bursts out of the gap (.gb-flash) and covers both lids for a moment, and the lids swap INSIDE the light, in one frame. */
.gb-flash{position:absolute; z-index:3; left:52%; top:30%; width:190%; aspect-ratio:1; border-radius:50%; pointer-events:none; opacity:0;
  transform:translate(-50%,-50%) scale(.12);   /* 190 % of the box: its solid part (to 76 % of the radius) just covers both lids */
  background:radial-gradient(closest-side, #fff 0, #fffbe8 50%, rgba(255,244,196,.98) 76%, rgba(255,226,140,.6) 88%, rgba(255,214,102,0) 100%);}
.hp-card.lifting .gb-clid{animation:gbLid 1s linear forwards;}
.hp-card.lifting .gb-cbody{animation:gbBody 1s ease-in-out forwards;}
.hp-card.lifting .gb-obody{animation:gbOpen 1s ease-in-out forwards;}
.hp-card.lifting .gb-olid{animation:gbOLid 1s linear forwards;}
.hp-card.lifting .gb-flash{animation:gbFlash 1s linear forwards;}
.hp-card.lifting .gb-glow{animation:gbGlow 1.3s cubic-bezier(.3,.6,.3,1) forwards;}
.hp-card.lifting .gbox::before{opacity:1; transform:scale(1.2);}
/* the lid presses down a touch, then swings up on its back-right hinge (transform-origin of .gb-clid); at 58-60 % it is gone, under the light */
@keyframes gbLid{0%{transform:none; opacity:1; animation-timing-function:ease-out;}
  10%{transform:translateY(1.4%); opacity:1; animation-timing-function:cubic-bezier(.3,0,.3,1);}
  52%{transform:translate(2.5%,-7%) rotate(9deg); opacity:1; animation-timing-function:linear;}
  58%{transform:translate(3%,-8.5%) rotate(10.5deg); opacity:1;}
  60%,100%{transform:translate(3%,-8.5%) rotate(10.5deg); opacity:0;}}
/* the open lid appears in the same frame the closed one goes (both hidden by the light), so there are never two lids */
@keyframes gbOLid{0%,58%{opacity:0;} 60%,100%{opacity:1;}}
@keyframes gbBody{0%,20%{opacity:1;} 60%,100%{opacity:0;}}
@keyframes gbOpen{0%,12%{opacity:0;} 56%,100%{opacity:1;}}
/* the burst: starts in the gap under the lid, is full (covering both lids) from 54 to 64 %, then thins out over the open box */
@keyframes gbFlash{0%,24%{opacity:0; transform:translate(-50%,-50%) scale(.12); animation-timing-function:cubic-bezier(.4,0,.7,.6);}
  54%{opacity:1; transform:translate(-50%,-50%) scale(1);} 64%{opacity:1; transform:translate(-50%,-50%) scale(1.03); animation-timing-function:ease-out;}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.12);}}
@keyframes gbGlow{0%,30%{opacity:0; transform:translate(-50%,-50%) scale(.25);} 72%{opacity:1; transform:translate(-50%,-54%) scale(1.05);}
  100%{opacity:1; transform:translate(-50%,-58%) scale(1.5);}}

/* label and tap pill under the box */
.hp-card .lbl{position:absolute; left:0; right:0; bottom:14%; text-align:center; padding:0 6px; color:var(--hp-ink);}
.hp-card .lbl i{display:block; font-style:italic; font-weight:600; font-size:clamp(11px,1.5vw,14px); color:var(--text-soft);}
.hp-card .lbl b{display:block; font-weight:800; font-size:clamp(19px,2.6vw,26px); line-height:1.1; margin-top:1px;}
.hp-card .lbl small{display:block; font-weight:700; font-size:12px; letter-spacing:.06em; color:var(--hp-gold-ink); margin-top:3px;}
.hp-card .tap{position:absolute; left:50%; bottom:2.5%; transform:translateX(-50%); white-space:nowrap;
  font-size:13px; font-weight:700; color:var(--hp-ink); background:linear-gradient(180deg,#ffe08a,#e9b43a);
  border-radius:20px; padding:9px 18px; box-shadow:0 6px 14px -6px rgba(0,0,0,.4);}
.hp-card.center:not(.done) .tap{animation:hpBob 2.4s ease-in-out infinite;}
@keyframes hpBob{0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-4px);}}

/* opened box = the poster */
.hp-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:22px; opacity:0; transition:opacity .5s ease;
  box-shadow:0 24px 36px -18px rgba(0,0,0,.5);}
.hp-card.done .hp-poster{opacity:1;}
.hp-card.done.center .hp-poster{cursor:pointer;}   /* the opened poster is a link to that box's page in the shop (home.js) */
.hp-card.done .gb-wrap,.hp-card.done .lbl,.hp-card.done .tap{opacity:0; pointer-events:none;}
/* on the opened poster: "Shop this gift" across, under it Replay (bottom left) and Share (bottom right) */
.hp-acts{position:absolute; left:5%; right:5%; bottom:3%; display:none; flex-wrap:wrap; gap:6px; justify-content:space-between;}
.hp-card.done.center .hp-acts{display:flex;}
.hp-acts a,.hp-acts span{text-align:center; font-size:11.5px; font-weight:700; border-radius:18px; padding:8px 6px; cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent;}
.hp-acts a{flex:1 1 100%; background:var(--hp-ink); color:#fff;}
.hp-acts a:hover{background:#4a0d78; color:#fff;}
.hp-acts span{flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:7px 11px 7px 9px; background:#fff; color:var(--hp-ink); box-shadow:0 4px 10px -6px rgba(0,0,0,.5);}
.hp-acts span svg{width:14px; height:14px; flex:none;}
.hp-acts span:focus-visible{outline:3px solid var(--hp-gold); outline-offset:2px;}
.hp-toast{z-index:90001;}   /* "Link copied", when Share has no share sheet to open */

.hp-arrow{position:relative; flex:none; width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--line); background:#fff; color:var(--hp-ink); font-size:28px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 4px; box-shadow:0 6px 14px -8px rgba(0,0,0,.4);}
@media (hover:hover) and (pointer:fine){ .hp-arrow:hover{background:var(--hp-ink); color:#fff;} }   /* only with a mouse: on a phone a tap would leave the button dark */
/* the arrows sit in the foot row, either side of the dots: outside the boxes (2026-11-11, Alex: they were mixed into the boxes) */
.hp-navrow{display:flex; align-items:center; justify-content:center; gap:18px;}

.hp-stage-foot{position:relative; z-index:3; margin-top:12px; display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 20px;}
.hp-dots{display:flex; gap:8px;}
.hp-dots button{width:9px; height:9px; border-radius:50%; border:0; padding:0; background:#D7C9E6; cursor:pointer;
  transition:background .25s, transform .25s;}
.hp-dots button.on{background:var(--hp-ink); transform:scale(1.35);}
.hp-dots button.seen:not(.on){background:var(--hp-gold);}
.hp-surprise{font:inherit; font-size:14px; font-weight:700; color:var(--hp-ink); background:linear-gradient(180deg,#ffe08a,#e9b43a);
  border:0; border-radius:24px; padding:11px 24px; cursor:pointer; box-shadow:0 8px 16px -8px rgba(0,0,0,.45);}
.hp-surprise:hover{filter:brightness(1.06);}
.hp-fine{font-size:12px; color:var(--text-mute); margin:0;}

/* ---------- PANEL 2: Curio ---------- */
.hp-curio{background:#fff; padding:64px 32px 0; position:relative;}
.hp-curio-in{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.05fr 1fr; gap:36px; align-items:center;}
/* the panel without the big Curio: one centred column */
.hp-curio-in.solo{grid-template-columns:1fr; max-width:860px; text-align:center; padding-bottom:8px;}
.hp-curio-in.solo .hp-lede{max-width:640px; margin-left:auto; margin-right:auto;}
.hp-curio-in.solo .hp-ctas,.hp-curio-in.solo .hp-chips{justify-content:center;}
.hp-curio h1{font-size:clamp(38px,6.4vw,74px); font-weight:800; line-height:1.02; color:var(--hp-ink); margin:0 0 18px; letter-spacing:-.01em;}
.hp-lede{font-size:clamp(15px,1.7vw,18px); line-height:1.65; color:var(--text); max-width:520px; margin-bottom:26px;}
.hp-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px;}
.hp-btn{border:0; cursor:pointer; color:var(--hp-ink);}
.hp-btn:hover{color:var(--hp-ink);}
.hp-chips{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.hp-chips-label{font-size:12.5px; font-weight:700; color:var(--text-mute); margin-right:2px;}
.hp-chips button{font:inherit; font-size:13px; font-weight:600; color:var(--hp-ink); background:var(--surface);
  border:1.5px solid var(--line); border-radius:20px; padding:9px 15px; cursor:pointer; transition:background .2s, border-color .2s, color .2s;}
.hp-chips button.on{background:var(--hp-ink); border-color:var(--hp-ink); color:#fff;}
@media (hover:hover) and (pointer:fine){ .hp-chips button:hover{background:var(--hp-ink); border-color:var(--hp-ink); color:#fff;} }

.hp-curio-stage{position:relative; min-height:460px; display:flex; align-items:flex-end; justify-content:center;}
.hp-aura{position:absolute; left:50%; bottom:6%; width:min(520px,100%); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(closest-side, #f3e9ff 0%, #f8f1ff 55%, rgba(255,255,255,0) 100%); border-radius:50%;}
.hp-fig{position:relative; width:min(470px,92%); aspect-ratio:1; transform-origin:50% 90%;}
.hp-fig .still,.hp-fig video{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; mix-blend-mode:multiply;}
.hp-fig .still{transform-origin:50% 92%; animation:hpBreathe 4.2s ease-in-out infinite; transition:opacity .3s ease;}
.hp-fig video{opacity:0; transition:opacity .3s ease; pointer-events:none;}
.hp-fig.playing video{opacity:1;}
.hp-fig.playing .still{opacity:0;}
/* the standing Curio (assets/curio-anim.js, big clips) sits where the still picture was; he steps aside while the greeting video plays */
/* size and place measured against the still (curio-hero-still.png): same body size, feet on the same line (2026-11-10, rebuilt clips) */
.hp-fig .hp-cv-hero{position:absolute; left:48.9%; bottom:1.9%; height:118.4%; width:auto; aspect-ratio:540/690; transform:translateX(-50%); transition:opacity .3s ease; pointer-events:none;}
.hp-fig .hp-cv-hero[hidden]{display:none;}
.hp-fig.playing .hp-cv-hero{opacity:0;}
@keyframes hpBreathe{0%,100%{transform:scale(1,1);} 50%{transform:scale(1.008,1.02);}}
.hp-snd{position:absolute; z-index:4; right:4%; bottom:2%; font:inherit; font-size:12.5px; font-weight:700; color:var(--hp-ink); background:#fff;
  border:1.5px solid var(--line); border-radius:20px; padding:8px 14px; cursor:pointer; box-shadow:0 6px 14px -8px rgba(0,0,0,.4);}
@media (hover:hover) and (pointer:fine){ .hp-snd:hover{background:var(--hp-ink); color:#fff;} }
.hp-speech{position:absolute; z-index:3; left:2%; top:2%; max-width:min(330px,86%); min-height:64px; background:var(--hp-ink); color:#fff;
  border-radius:20px 20px 20px 6px; padding:16px 20px; font-size:clamp(15px,1.7vw,18px); font-weight:600; line-height:1.45;
  box-shadow:0 14px 26px -14px rgba(0,0,0,.5);}
.hp-speech::after{content:""; position:absolute; left:58px; bottom:-13px; width:18px; height:13px; background:var(--hp-ink); clip-path:polygon(0 0,100% 0,50% 100%);}
.hp-speech .caret{display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-.12em; background:var(--hp-gold-hi); animation:hpCaret 1s steps(1) infinite;}
.hp-speech.typed .caret{display:none;}
@keyframes hpCaret{50%{opacity:0;}}

.hp-stats{list-style:none; margin:40px auto 0; padding:26px 0; max-width:var(--maxw); display:grid; grid-template-columns:repeat(4,1fr); gap:20px; border-top:1px solid var(--line);}
.hp-stats li{text-align:center; padding:0 8px;}
/* the peptide facts RUN from right to left (assets/facts.js builds the track; without the script or with reduced motion it stays the plain grid) */
.hp-ticker{max-width:var(--maxw); margin:40px auto 0; overflow:hidden; border-top:1px solid var(--line); -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.hp-ticker .hp-stats.hp-run{display:flex; grid-template-columns:none; width:max-content; margin:0; max-width:none; border-top:0; gap:0; animation:hpRun var(--hp-dur,60s) linear infinite;}
.hp-ticker .hp-stats.hp-run li{flex:0 0 auto; width:250px; padding:0 18px;}
.hp-ticker .hp-stats.hp-run:hover, .hp-ticker .hp-stats.hp-run:focus-within{animation-play-state:paused;}
.hp-ticker{position:relative;}
.hp-ticker .hp-stats.hp-run.hp-still{animation-play-state:paused;}
.hp-pause{position:absolute; right:8px; top:50%; transform:translateY(-50%); z-index:2; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; background:rgba(47,2,78,.88); color:#fff; font-size:13px; line-height:1; box-shadow:0 6px 16px -8px rgba(47,2,78,.6);}
.hp-pause:hover{background:#2F024E;}
.hp-pause:focus-visible{outline:3px solid var(--hp-gold); outline-offset:2px;}
.hp-fact{display:block; text-decoration:none; color:inherit; border-radius:12px; padding:4px 0;}
.hp-fact:hover b, .hp-fact:focus-visible b{text-decoration:underline; text-underline-offset:4px;}
.hp-fact:focus-visible{outline:3px solid var(--hp-gold); outline-offset:2px;}
@keyframes hpRun{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (max-width:700px){ .hp-ticker .hp-stats.hp-run li{width:210px; padding:0 12px;} }
@media (prefers-reduced-motion:reduce){ .hp-ticker .hp-stats.hp-run{animation:none;} }
.hp-stats b{display:block; font-size:clamp(26px,3.4vw,36px); font-weight:800; color:var(--gold-ink); line-height:1.1;}
.hp-stats span{display:block; font-size:12.5px; line-height:1.5; color:var(--text-mute); margin-top:4px;}


/* ---------- viewer ---------- */
.hp-viewer{position:fixed; inset:0; z-index:90000;}
.hp-scrim{position:absolute; inset:0; background:#fff; opacity:0; transition:opacity .45s ease;}
.hp-viewer.on .hp-scrim{opacity:1;}
/* The video starts as a small glowing card inside the box (.seed, placed by home.js) and unfolds to its full 9:16 frame;
   the picture itself fades in once it is really playing, so nothing pops. */
.hp-vbox{position:fixed; overflow:hidden; border-radius:22px; background:linear-gradient(170deg,#fffaf0,#f1e4ff);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.5);
  --vb-ease:cubic-bezier(.4,0,.2,1);   /* starts gently, so the card unfolds out of the light instead of jumping to size */
  transition:left .85s var(--vb-ease), top .85s var(--vb-ease), width .85s var(--vb-ease), height .85s var(--vb-ease), border-radius .85s var(--vb-ease),
    opacity .3s ease, box-shadow 1.1s ease;}
.hp-vbox.seed{opacity:0; box-shadow:0 0 56px 22px rgba(255,224,130,.95);}
.hp-vbox video{width:100%; height:100%; object-fit:cover; display:block; background:transparent; opacity:0; transition:opacity .5s ease .12s;}
.hp-viewer.playing .hp-vbox video{opacity:1;}
/* the light the video comes out of: it sits where the box's glow was, then spreads and fades while the video unfolds */
.hp-vglow{position:fixed; aspect-ratio:1; border-radius:50%; pointer-events:none; opacity:.96; transform:translate(-50%,-50%) scale(1);
  background:radial-gradient(closest-side, #fff 0, rgba(255,247,210,.97) 28%, rgba(255,222,128,.6) 58%, rgba(255,214,102,0) 100%);}
.hp-vglow.go{opacity:0; transform:translate(-50%,-50%) scale(3.4); transition:transform 1.15s cubic-bezier(.2,.7,.2,1), opacity 1s ease .2s;}
.hp-vbar{position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(0,0,0,.14);}
.hp-vbar b{display:block; height:100%; width:0; background:var(--hp-gold);}
/* Viewer buttons (2026-11-10): white pills with an icon AND a word, so each one says what it is: Sound on / Sound off, Close, Replay, Share.
   They never change colour on a tap (the old round buttons turned dark on a phone and stayed dark, because a touch leaves :hover on). */
.hp-vbtn{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px 0 12px; border-radius:20px; border:1.5px solid var(--line);
  background:#fff; color:var(--hp-ink); font:inherit; font-size:13px; font-weight:700; line-height:1; white-space:nowrap; cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.45); -webkit-tap-highlight-color:transparent; transition:transform .12s ease;}
.hp-vbtn[hidden]{display:none;}
.hp-vbtn svg{width:18px; height:18px; flex:none;}
.hp-vbtn:active{transform:scale(.95);}
.hp-vbtn:focus-visible{outline:3px solid var(--hp-gold); outline-offset:2px;}
@media (hover:hover) and (pointer:fine){ .hp-vbtn:hover{background:#F3EAFB; border-color:#cdb5e6;} }
/* Sound + Skip: inside the video frame, top right (on a phone the video fills the screen, so buttons outside it had nowhere to sit) */
.hp-vtop{position:absolute; top:10px; right:10px; display:flex; gap:6px; pointer-events:none; opacity:0; transition:opacity .3s ease .25s;}
.hp-viewer.on .hp-vtop{opacity:1;}
.hp-vtop .hp-vbtn{pointer-events:auto; height:34px; padding:0 11px 0 9px; gap:6px; font-size:12px; background:rgba(255,255,255,.95);}
.hp-vtop .hp-vbtn svg{width:16px; height:16px;}
.hp-vtop #hpVClose{padding:0 9px 0 12px;}
@media (min-width:900px){ .hp-vtop{top:14px; right:14px; gap:8px;} .hp-vtop .hp-vbtn{height:38px; font-size:13px;} }
.hp-vsound .i-off{display:none;}
.hp-vsound.off .i-on{display:none;}
.hp-vsound.off .i-off{display:block;}
.hp-vsound.off{color:#6B5A7D;}   /* sound off: crossed-out speaker, quieter ink; still a white pill */
/* Share sits inside the video, bottom right (Replay is on the opened poster only) */
.hp-vctl{position:absolute; left:10px; right:10px; bottom:14px; display:flex; justify-content:space-between; align-items:center; pointer-events:none;
  opacity:0; transition:opacity .3s ease .35s;}
.hp-viewer.on .hp-vctl{opacity:1;}
.hp-vctl .hp-vbtn{pointer-events:auto; height:36px; padding:0 13px 0 11px; font-size:12.5px; background:rgba(255,255,255,.95);}
.hp-vctl .hp-vshare{margin-left:auto;}
.hp-vhint{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); margin:0; background:var(--hp-ink); color:#fff; font-size:13px; font-weight:700; padding:9px 16px; border-radius:20px;}

/* ---------- Curio helper: floats by himself ---------- */
.hp-guide{display:contents;}
.hp-chip{--h:168px; position:relative; flex:0 0 auto; padding:0; border:0; background:none; cursor:pointer; line-height:0;}
.hp-bot{position:relative; display:block; height:var(--h); aspect-ratio:288/368; pointer-events:none; filter:drop-shadow(0 8px 8px rgba(0,0,0,.25));}
/* Curio STANDS (no floating): the picture is the still pose, the canvas plays his moves on top of it (assets/curio-anim.js) */
.hp-bot .hp-still,.hp-bot .hp-cv{position:absolute; inset:0; width:100%; height:100%; display:block;}
.hp-bot .hp-cv[hidden]{display:none;}
.hp-chip::after{content:""; position:absolute; left:20%; right:20%; bottom:2px; height:10px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.28), rgba(0,0,0,0)); animation:hpShadow 5s ease-in-out infinite;}
@keyframes hpShadow{0%,100%{transform:scale(1); opacity:.9;} 50%{transform:scale(.8); opacity:.55;}}
.hp-chip[data-dock="corner"]{position:fixed; z-index:70; left:14px; bottom:12px;}
/* resting place: bottom right corner (the round floating Share button that used to sit there was removed 2026-11-11) */
.hp-chip[data-dock="fab"]{--h:80px; position:fixed; z-index:61; right:24px; bottom:24px;}
.hp-chip[data-dock="fab"]::after{display:none;}
.hp-chip[data-dock="fab"] .hp-bot{filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));}
body.pc-cookiebar-visible .hp-chip[data-dock="fab"]{bottom:104px;}
html.pc-menu-open .hp-chip[data-dock="fab"],html.pc-menu-open .hp-bubble{display:none;}
.hp-chip:focus-visible{outline:3px solid var(--hp-ink); outline-offset:3px; border-radius:12px;}
/* shared motion */
.a-idle{animation:hpFloat 5s ease-in-out infinite;}
.a-wave{animation:hpWave 1.3s ease-in-out 1;}
.a-nod{animation:hpNod .9s ease-in-out 1;}
.a-think{animation:hpThink 1.5s ease-in-out 1;}
.a-point{animation:hpPoint 1.2s ease-in-out 1;}
.a-cheer{animation:hpCheer 1.1s ease-in-out 1;}
@keyframes hpFloat{0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-9px) rotate(1.2deg);}}
@keyframes hpWave{0%,100%{transform:rotate(0)} 15%{transform:rotate(-10deg)} 35%{transform:rotate(9deg)} 55%{transform:rotate(-8deg)} 75%{transform:rotate(6deg)}}
@keyframes hpNod{0%,100%{transform:translateY(0)} 25%{transform:translateY(6px) scaleY(.96)} 50%{transform:translateY(0)} 75%{transform:translateY(5px) scaleY(.97)}}
@keyframes hpThink{0%,100%{transform:rotate(0) translateX(0)} 30%{transform:rotate(-7deg) translateX(-2px)} 70%{transform:rotate(-7deg) translateX(-2px)}}
@keyframes hpPoint{0%,100%{transform:translateX(0) scale(1)} 30%,70%{transform:translateX(6px) scale(1.06)} 50%{transform:translateX(3px) scale(1.06)}}
@keyframes hpCheer{0%,100%{transform:translateY(0) scale(1)} 30%{transform:translateY(-14px) scale(1.07) rotate(-5deg)} 55%{transform:translateY(0) scale(.97)} 75%{transform:translateY(-7px) scale(1.04) rotate(4deg)}}

.hp-bubble{position:fixed; z-index:71; width:min(320px,calc(100vw - 24px)); background:var(--hp-ink); color:#fff; border-radius:18px;
  padding:16px 18px 12px; box-shadow:0 18px 34px -14px rgba(0,0,0,.55); --tail:40px;}
.hp-bubble[data-dock="corner"]{left:14px; bottom:186px;}
.hp-bubble[data-dock="fab"]{right:16px; bottom:112px;}
body.pc-cookiebar-visible .hp-bubble[data-dock="fab"]{bottom:192px;}
.hp-bubble::after{content:""; position:absolute; width:18px; height:12px; background:var(--hp-ink); bottom:-12px; clip-path:polygon(0 0,100% 0,50% 100%);}
.hp-bubble[data-dock="corner"]::after{left:var(--tail);}
.hp-bubble[data-dock="fab"]::after{right:var(--tail);}
/* the big Curio is on screen, so the corner helper steps aside */
body.hp-hero-in .hp-chip[data-dock="corner"],body.hp-hero-in .hp-bubble[data-dock="corner"]{display:none;}
body.pc-cookiebar-visible .hp-chip[data-dock="corner"]{bottom:112px;}
body.pc-cookiebar-visible .hp-bubble[data-dock="corner"]{bottom:286px;}
.hp-x{position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; border:0; background:rgba(255,255,255,.14);
  color:#fff; font-size:12px; cursor:pointer;}
.hp-x:hover{background:rgba(255,255,255,.3);}
.hp-say{margin:0 22px 10px 0; font-size:14.5px; font-weight:600; line-height:1.5;}
.hp-say a{color:var(--hp-gold-hi); text-decoration:underline; font-weight:700;}
.hp-ask{display:flex; gap:6px;}
.hp-ask input{flex:1 1 auto; min-width:0; font:inherit; font-size:13.5px; padding:9px 12px; border-radius:16px; border:0; background:#fff; color:var(--hp-ink);}
.hp-ask button{font:inherit; font-size:13px; font-weight:700; padding:0 14px; border:0; border-radius:16px; background:var(--hp-gold); color:var(--hp-ink); cursor:pointer;}
.hp-snd2{display:block; margin-top:8px; padding:6px 10px; font:inherit; font-size:12px; font-weight:700; color:#fff; background:rgba(255,255,255,.14); border:0; border-radius:14px; cursor:pointer;}
.hp-snd2:hover{background:rgba(255,255,255,.28);}
.hp-note{display:block; margin-top:8px; font-size:11px; line-height:1.4; color:#CDBBE3;}

/* ---------- the Peptide Team stage (assets/team.js) ---------- */
/* the question on its own, larger line; the buttons stacked under it in even, centred rows (same width each), so adding or removing a topic keeps it tidy */
.pt-q{font-size:clamp(21px,2.4vw,27px); font-weight:800; line-height:1.2; color:var(--ink); text-align:center; margin:4px 0 16px;}
.pt-goals{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:1200px; margin:0 auto 24px;}
.pt-goals button{flex:0 0 140px; font:inherit; font-size:14.5px; font-weight:700; line-height:1.2; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:22px; padding:11px 8px;
  text-align:center; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;}
.pt-goals button:hover{border-color:var(--gold);}
.pt-goals button[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink);}
.pt-goals button:focus-visible,.pt-char:focus-visible,.pt-big:focus-visible{outline:3px solid var(--hp-gold); outline-offset:2px; border-radius:14px;}
.pt-stage{position:relative; border-radius:28px; padding:26px 12px 16px; background:radial-gradient(92% 72% at 50% 100%, #E7D9F7 0, #F2EAFB 46%, rgba(250,248,252,0) 80%);}
.pt-hint{text-align:center; font-size:14.5px; font-weight:600; color:var(--text-mute); margin:0 0 18px;}
.pt-sec:not(.pt-on) .pt-hint,.pt-sec:not(.pt-on) .pt-goals,.pt-sec:not(.pt-on) .pt-q{display:none;}        /* no script: a plain grid of links */
.pt-crew{--fh:clamp(96px,11.4vw,150px); display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end;   /* feet of a row on one line, whatever the height of each character */ transition:opacity .3s ease, filter .3s ease;}
.pt-char{position:relative; flex:0 0 10.8%; min-width:0; display:flex; flex-direction:column; align-items:center; color:var(--ink); text-align:center; padding-bottom:6px;
  -webkit-tap-highlight-color:transparent; transition:opacity .3s ease, filter .3s ease;}
.pt-char:hover{color:var(--ink);}
.pt-char:nth-child(-n+9){z-index:1;}                              /* back row */
.pt-char:nth-child(n+10){z-index:2; margin-top:-1.4%;}            /* front row: half a step forward and between the ones behind */
.pt-fig{position:relative; display:flex; align-items:flex-end; justify-content:center; width:100%; height:calc(var(--fh) * var(--k,1));
  transform-origin:50% 100%; transition:transform .25s cubic-bezier(.2,.9,.3,1.3);}
.pt-char:nth-child(-n+9) .pt-fig{height:calc(var(--fh) * var(--k,1) * .86);}
/* Standing still (Alex: "a really gentle wobble, but not the whole picture"): the feet stay on the floor; the body leans a touch from
   side to side (.pt-wob, a shear from the feet up) and breathes (the picture gets a hair taller and slimmer), each at its own pace
   (--st / --bt are set per character by team.js). */
.pt-fig::before{content:""; position:absolute; left:16%; right:16%; bottom:-5px; height:12px; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(47,2,78,.2), rgba(47,2,78,0));}
.pt-wob{position:relative; display:flex; align-items:flex-end; justify-content:center; height:100%; transform-origin:50% 100%;
  /* sway AND breath live on the wrapper that holds both the picture and (later) his clip, so the clip takes over at exactly the same size and lean */
  animation:ptSway var(--st,5.4s) ease-in-out infinite calc(var(--i,0) * -.73s), ptBreathe var(--bt,3.6s) ease-in-out infinite calc(var(--i,0) * -.41s);}
.pt-fig img{height:100%; width:auto; max-width:none; display:block; filter:drop-shadow(0 4px 4px rgba(47,2,78,.14)); transform-origin:50% 100%; transition:visibility 0s linear 0s;}
.pt-fig canvas{position:absolute; left:50%; bottom:0; height:100%; aspect-ratio:var(--ar,1); transform:translateX(-50%); opacity:0; transition:opacity .16s linear;
  filter:drop-shadow(0 4px 4px rgba(47,2,78,.14));}
.pt-char.live .pt-fig canvas{opacity:1;}
.pt-fig canvas[hidden]{display:none;}
.pt-char b{font-size:12.5px; font-weight:800; margin-top:6px; line-height:1.15; white-space:nowrap;}
.pt-char i{font-style:normal; font-size:11px; font-weight:600; color:var(--text-mute); line-height:1.25;}
.pt-on .pt-char i{display:none;}
@media (hover:hover) and (pointer:fine){
  .pt-on .pt-char:hover{z-index:4;}
  .pt-on .pt-char:hover .pt-fig{transform:translateY(-5%) scale(1.16);}
  .pt-on .pt-char:hover b{color:var(--gold-ink);}
}
.pt-char.dim{opacity:.26; filter:grayscale(.5);}
/* a topic is chosen: everyone who fits is LIT (a little lifted and bigger, gold glow, gold name) and waits to be tapped */
.pt-char.match{z-index:3;}
.pt-char.match .pt-fig{transform:translateY(-4%) scale(1.1);}
.pt-char.match b{color:var(--gold-ink);}
.pt-char.match .pt-fig::after{content:""; position:absolute; left:12%; right:12%; bottom:-7px; height:16px; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(241,203,106,.95), rgba(241,203,106,0));}
.pt-char.on{opacity:.22;}
.pt-char.live .pt-fig img{visibility:hidden; transition-delay:.16s;}                     /* his real clip plays on the canvas */
@keyframes ptSway{0%,100%{transform:skewX(-1.5deg) rotate(-.5deg);} 50%{transform:skewX(1.5deg) rotate(.5deg);}}
@keyframes ptBreathe{0%,100%{scale:1 1;} 50%{scale:.986 1.02;}}
/* three small moves for the ones whose clips are not made yet */
.pt-char.dance.d1 .pt-fig img{animation:ptD1 1.6s ease-in-out 1;}
.pt-char.dance.d2 .pt-fig img{animation:ptD2 1.6s ease-in-out 1;}
.pt-char.dance.d3 .pt-fig img{animation:ptD3 1.6s ease-in-out 1;}
@keyframes ptD1{0%,100%{transform:none;} 15%{transform:translateY(-14%) rotate(-8deg);} 30%{transform:translateY(0) scale(1.06,.94);} 45%{transform:translateY(-14%) rotate(8deg);}
  60%{transform:translateY(0) scale(1.06,.94);} 78%{transform:translateY(-8%) rotate(-4deg);}}
@keyframes ptD2{0%,100%{transform:none;} 20%{transform:translateX(-12%) rotate(-7deg);} 40%{transform:translateX(12%) rotate(7deg);} 60%{transform:translateX(-8%) rotate(-5deg);} 80%{transform:translateX(6%) rotate(4deg);}}
@keyframes ptD3{0%,100%{transform:none;} 20%{transform:translateY(-10%) scale(.96,1.05);} 50%{transform:translateY(-18%) rotateY(360deg);} 75%{transform:translateY(0) scale(1.08,.92);}}
/* one of them has stepped forward */
.pt-open .pt-char{opacity:.3; filter:saturate(.6);}
.pt-open .pt-char.match{opacity:.92; filter:none;}       /* the others who fit the chosen topic stay bright */
.pt-open .pt-char.on{opacity:.16;}
.pt-spot{position:absolute; inset:0; z-index:6; display:flex; align-items:flex-end; justify-content:center; gap:16px; padding:0 4% 14px; pointer-events:none;}
.pt-spot[hidden]{display:none;}
.pt-big{position:relative; display:block; flex:0 0 auto; height:calc(min(80%,340px) * var(--bk,1)); pointer-events:auto; filter:drop-shadow(0 14px 12px rgba(47,2,78,.25));}
.pt-big img{height:100%; width:auto; max-width:none; display:block; transform-origin:50% 100%;}
.pt-big canvas{position:absolute; left:50%; bottom:0; height:100%; width:auto; transform:translateX(-50%);}
.pt-big canvas[hidden]{display:none;}
.pt-big.talk img{animation:ptTalk .52s ease-in-out 5;}
@keyframes ptTalk{0%,100%{transform:none;} 50%{transform:translateY(-2.5%) scale(1.02,.985) rotate(-1.5deg);}}
.pt-card{position:relative; pointer-events:auto; align-self:center; width:min(340px,46%); background:var(--hp-ink); color:#fff; border-radius:20px; padding:18px 20px;
  box-shadow:0 22px 40px -16px rgba(0,0,0,.55); animation:ptCard .35s cubic-bezier(.2,1.2,.4,1) .2s both;}
@keyframes ptCard{from{opacity:0; transform:translateY(10px) scale(.95);} to{opacity:1; transform:none;}}
.pt-card::after{content:""; position:absolute; left:-11px; top:50%; width:12px; height:18px; margin-top:-9px; background:var(--hp-ink); clip-path:polygon(100% 0,100% 100%,0 50%);}
.pt-name{display:block; font-size:21px; font-weight:800; color:var(--hp-gold-hi); line-height:1.1; padding-right:30px;}
.pt-role{display:block; font-style:normal; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#CDBBE3; margin:5px 0 10px;}
.pt-line{margin:0 0 14px; font-size:15.5px; font-weight:600; line-height:1.45;}
.pt-card .pt-go{font-size:13.5px;}
.pt-x{position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:12px; cursor:pointer;}
.pt-x:hover{background:rgba(255,255,255,.3);}
@media (max-width:700px){
  .pt-goals{gap:8px; margin-bottom:16px;}
  .pt-goals button{flex:0 0 calc((100% - 16px) / 3); font-size:13.5px; padding:10px 4px;}
  .pt-stage{padding:16px 0 10px; margin:0 -20px; border-radius:0;}
  .pt-char{flex:0 0 33.33%;}
  .pt-char:nth-child(n+10){margin-top:0;}
  /* with the script: one strip to swipe; the one in the middle is on stage */
  .pt-on .pt-crew{--fh:150px; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-end; overflow-x:auto; scroll-snap-type:x mandatory; padding:16px 27% 4px; scrollbar-width:none;}
  .pt-on .pt-crew::-webkit-scrollbar{display:none;}
  .pt-on .pt-char{flex:0 0 46%; scroll-snap-align:center; transform:scale(.7); transform-origin:50% 100%; opacity:.7; transition:transform .25s ease, opacity .25s ease;}
  .pt-on .pt-char.center{transform:none; opacity:1;}
  .pt-on .pt-char:nth-child(-n+9) .pt-fig{height:calc(var(--fh) * var(--k,1));}
  .pt-on .pt-char b{font-size:14.5px;}
  .pt-open .pt-char{opacity:.7; filter:none;}
  .pt-open .pt-char.center{opacity:1;}
  .pt-spot{position:fixed; inset:0; z-index:85; flex-direction:column; align-items:center; justify-content:flex-end; gap:10px; padding:0 14px 18px; background:rgba(47,2,78,.6); pointer-events:auto;}
  .pt-big{height:calc(min(42vh,320px) * var(--bk,1));}
  .pt-card{width:100%; max-width:420px; align-self:auto;}
  .pt-card::after{left:calc(50% - 9px); top:-11px; margin:0; width:18px; height:12px; clip-path:polygon(0 100%,100% 100%,50% 0);}
}
@media (prefers-reduced-motion:reduce){
  .pt-fig img,.pt-wob,.pt-big.talk img,.pt-card{animation:none;}
  .pt-fig{transition:none;}
}
/* ---------- end of the Peptide Team stage ---------- */

/* ---------- the Peptide Calculator door on the homepage (the tool itself lives on calculator.html) ---------- */
.calc-feature{display:grid; grid-template-columns:1fr 1.08fr; gap:34px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:24px;
  padding:28px 28px 28px 36px; margin-bottom:22px; color:var(--ink); transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease;}
.calc-feature:hover{color:var(--ink); border-color:#dcccec; box-shadow:0 16px 40px rgba(47,2,78,.12); transform:translateY(-2px);}
.calc-feature:focus-visible{outline:3px solid var(--hp-gold); outline-offset:3px;}
.calc-feature h3{font-size:clamp(24px,3.4vw,34px); font-weight:800; line-height:1.15; margin:8px 0 12px;}
.calc-feature p{font-size:15px; line-height:1.6; color:var(--text-soft); margin:0 0 20px; max-width:440px;}
.calc-feature .cf-art svg{display:block; width:100%; height:auto; border-radius:20px; font-family:inherit;}
@media (max-width:820px){ .calc-feature{grid-template-columns:1fr; gap:18px; padding:20px;} .calc-feature .cf-art{order:-1;} }
@media (prefers-reduced-motion:reduce){ .calc-feature{transition:none;} .calc-feature:hover{transform:none;} }

/* ---------- Curio's entrance (big, then he shrinks into his corner) and the website tour (assets/curio-tour.js) ---------- */
body.ct-enter .hp-chip,body.ct-enter .hp-bubble{visibility:hidden;}          /* the little one waits until the big one has landed on his spot */
.ct-stage{--ctb:12px; --cth:min(56vh,500px); --ctl:clamp(14px,5vw,90px); position:fixed; inset:0; z-index:80; pointer-events:none;}
.ct-stage[hidden]{display:none;}
body.pc-cookiebar-visible .ct-stage{--ctb:112px; --cth:min(50vh,460px);}
.ct-big{position:absolute; left:var(--ctl); bottom:var(--ctb); height:var(--cth); aspect-ratio:540/690; pointer-events:auto; cursor:pointer;
  transform-origin:50% 100%; opacity:0; filter:drop-shadow(0 16px 14px rgba(0,0,0,.22));}
.ct-stage.again .ct-big{cursor:default;}
.ct-stage.in .ct-big{animation:ctPop .6s cubic-bezier(.2,1.25,.4,1) both;}
@keyframes ctPop{from{opacity:0; transform:translateY(34px) scale(.8);} to{opacity:1; transform:none;}}
.ct-big img,.ct-big canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.ct-big canvas[hidden]{display:none;}
.ct-big:focus-visible{outline:3px solid var(--hp-gold); outline-offset:4px; border-radius:20px;}
.ct-card{position:absolute; left:max(14px,calc(var(--ctl) + var(--cth) * .3913 - 76px)); bottom:calc(var(--ctb) + var(--cth) + 14px); width:min(430px,calc(100vw - 28px));   /* the subtitles sit ABOVE his head (2026-11-11) */
  background:var(--hp-ink); color:#fff; border-radius:20px; padding:18px 20px 14px; box-shadow:0 22px 40px -16px rgba(0,0,0,.6); pointer-events:auto;
  opacity:0; transform:translateY(10px) scale(.95); transform-origin:76px 100%; transition:opacity .3s ease .1s, transform .45s cubic-bezier(.2,1.2,.4,1) .3s;}
.ct-stage.in .ct-card{opacity:1; transform:none;}
.ct-stage .ct-card.out{opacity:0; transform:scale(.9); transition:opacity .25s ease, transform .25s ease;}
.ct-card::after{content:""; position:absolute; left:64px; bottom:-11px; width:24px; height:12px; background:var(--hp-ink); clip-path:polygon(0 0,100% 0,50% 100%);}
.ct-say{margin:0 0 14px; font-size:17px; font-weight:700; line-height:1.4; min-height:2.8em;}
.ct-btns{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.ct-stage.again .ct-go{display:none;}   /* a returning visitor: only Sound and Skip */
/* first visit, before anybody tapped him: he waves, and a small bubble by his head invites the tap */
.ct-stage.wait .ct-card{display:none;}
.ct-tap{display:none; position:absolute; left:calc(var(--ctl) + var(--cth) * .7826 - 34px); bottom:calc(var(--ctb) + var(--cth) * .62); pointer-events:auto; cursor:pointer;
  font:inherit; font-size:17px; font-weight:800; color:#fff; background:var(--hp-ink); border:0; border-radius:22px; padding:13px 18px; box-shadow:0 16px 30px -14px rgba(0,0,0,.6);
  transform-origin:0 100%; animation:ctTap 1.6s ease-in-out infinite;}
.ct-tap::after{content:""; position:absolute; left:-10px; bottom:14px; width:12px; height:16px; background:var(--hp-ink); clip-path:polygon(100% 0,100% 100%,0 50%);}
.ct-stage.wait.in .ct-tap{display:block;}
.ct-tap:focus-visible{outline:3px solid var(--hp-gold-hi); outline-offset:2px;}
@keyframes ctTap{0%,100%{transform:scale(1);} 50%{transform:scale(1.07);}}
.ct-stage.again .ct-say{margin-bottom:8px; min-height:1.4em;}
.ct-btns button{font:inherit; font-size:14px; font-weight:800; border:0; border-radius:18px; padding:10px 16px; cursor:pointer;}
.ct-go{background:linear-gradient(180deg,#ffe08a,#e9b43a); color:var(--hp-ink);}
.ct-no{background:rgba(255,255,255,.14); color:#fff;}
.ct-no:hover{background:rgba(255,255,255,.28);}
.ct-snd{font:inherit; font-size:12px; font-weight:700; color:#fff; background:rgba(255,255,255,.14); border:0; border-radius:14px; padding:6px 10px; cursor:pointer;}
.ct-snd:hover{background:rgba(255,255,255,.28);}
.ct-btns .ct-snd{font-size:14px; padding:10px 14px; border-radius:18px; background:rgba(255,255,255,.14);}
.ct-btns .ct-snd:hover{background:rgba(255,255,255,.28);}
.ct-card button:focus-visible,.ct-ctl button:focus-visible{outline:3px solid var(--hp-gold-hi); outline-offset:2px;}
/* while he speaks: a small nod, so he is not a still picture with a moving mouth (his mouth follows his voice, curio-anim.js speak/mouth) */
/* while he talks he STANDS (2026-11-11, Alex: "he floats kind of weirdly, he shouldn't float, he should talk"): only the mouth moves and he breathes; the old rocking and rising loop (hpSpeak) is gone */
.hp-bot.speaking .hp-cv,.ct-big.speaking canvas{transform-origin:50% 100%; animation:hpBreathe 3.4s ease-in-out infinite;}
@keyframes hpSpeak{0%,100%{transform:rotate(-1deg);} 50%{transform:rotate(1deg) translateY(-1.2%);}}
@media (prefers-reduced-motion:reduce){ .hp-bot.speaking .hp-cv,.ct-big.speaking canvas{animation:none;} }
/* the tour: its buttons live in his bubble; the gold frame marks the part of the page he is showing */
.ct-ctl{display:flex; align-items:center; gap:6px; margin-top:2px;}
.ct-ctl[hidden]{display:none;}
.ct-ctl button{font:inherit; font-size:12.5px; font-weight:800; border:0; border-radius:14px; padding:7px 11px; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; white-space:nowrap;}
.ct-ctl button:hover{background:rgba(255,255,255,.28);}
.ct-ctl button:disabled{opacity:.35; cursor:default;}
.ct-ctl .nx{background:var(--hp-gold); color:var(--hp-ink);}
.ct-ctl .nx:hover{background:var(--hp-gold-hi);}
.ct-ctl .cnt{font-size:12px; font-weight:700; color:#CDBBE3; margin:0 2px; white-space:nowrap;}
.ct-ctl .sk{margin-left:auto;}
.hp-bubble.tour .hp-ask,.hp-bubble.tour .hp-note,.hp-bubble.tour .hp-row2,.hp-bubble.tour .hp-x{display:none;}
.hp-bubble.tour .hp-say{margin-right:0; font-size:15.5px; min-height:2.9em;}
.hp-row2{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
.hp-row2 .hp-snd2{margin-top:0;}
body.ct-touring.hp-hero-in .hp-chip[data-dock="corner"]{display:block;}      /* he stays while the tour passes the big Curio panel */
body.ct-touring.hp-hero-in .hp-bubble[data-dock="corner"]:not([hidden]){display:block;}
.ct-ring{position:fixed; z-index:69; left:0; top:0; width:0; height:0; border-radius:18px; pointer-events:none; opacity:0; border:3px solid var(--hp-gold-hi);
  box-shadow:0 0 0 200vmax rgba(47,2,78,.24), 0 0 26px 4px rgba(241,203,106,.55); transition:opacity .3s ease;}
.ct-ring[hidden]{display:none;}
@media (max-width:700px){ body.pc-cookiebar-visible .ct-stage{--cth:min(31vh,260px);} }
@media (max-width:560px){ body.pc-cookiebar-visible .ct-stage{--ctb:154px;} }   /* the phone's cookie bar is three lines tall: he stands on top of it, not behind it (2026-11-11) */
@media (max-width:700px){
  .ct-stage{--cth:min(34vh,290px);}   /* the subtitles are above his head now, so on a phone he is a little smaller to leave them room below the header */
  .ct-big{left:50%; margin-left:calc(var(--cth) * -.3913);}
  .ct-card{left:14px; right:14px; width:auto; bottom:calc(var(--ctb) + var(--cth) + 16px); transform-origin:50% 100%;}
  .ct-card::after{left:calc(50% - 12px);}
  .ct-card::after{left:calc(50% - 9px); bottom:-11px; width:18px; height:12px; clip-path:polygon(0 0,100% 0,50% 100%);}
  .ct-say{font-size:16px;}
  .ct-tap{left:50%; bottom:calc(var(--ctb) + var(--cth) + 14px); transform-origin:50% 100%; margin-left:-78px;}
  .ct-tap::after{left:calc(50% - 8px); bottom:-10px; width:16px; height:12px; clip-path:polygon(0 0,100% 0,50% 100%);}
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hp-curio{padding:44px 20px 0;}
  .hp-curio-in{grid-template-columns:1fr; gap:10px;}
  .hp-curio-stage{order:-1; min-height:400px;}
  .hp-curio-copy{text-align:center;}
  .hp-lede{margin-left:auto; margin-right:auto;}
  .hp-ctas,.hp-chips{justify-content:center;}
  .hp-stats{grid-template-columns:repeat(2,1fr); margin-top:36px;}
  .hp-arrow{display:none;}
  .hp-car{--sp:110%;}
}
@media (max-width:560px){
  .hp-car{--sp:104%;}   /* phones: the neighbours must still peek in at both edges */
  .hp-chip[data-dock="fab"]{--h:68px; right:16px; bottom:16px;}
  body.pc-cookiebar-visible .hp-chip[data-dock="fab"]{bottom:150px;}
  .hp-bubble[data-dock="fab"]{right:12px; bottom:96px;}
  body.pc-cookiebar-visible .hp-bubble[data-dock="fab"]{bottom:230px;}
}
@media (max-width:480px){
  .hp-stage{padding-top:30px;}
  .hp-speech{left:0; top:0;}
  .hp-chip{--h:140px;}
  .hp-bubble[data-dock="corner"]{bottom:166px;}
}
@media (prefers-reduced-motion:reduce){
  .hp-card,.hp-vbox,.hp-word,.gbox::before{transition-duration:.01s;}
  .hp-card.lifting .gb-clid,.hp-card.lifting .gb-cbody{animation:none; opacity:0;}
  .hp-card.lifting .gb-open{animation:none; opacity:1;}
  .hp-card.lifting .gb-glow,.hp-card.lifting .gb-flash{animation:none; opacity:0;}
  .hp-vglow{display:none;}
  .hp-vbox.seed{opacity:1; box-shadow:0 30px 60px -24px rgba(0,0,0,.5);}
  .hp-vbox video{transition:none;}
  .hp-sp,.gbox,.hp-fig .still,.a-idle,.hp-card.center:not(.done) .tap,.hp-chip::after{animation:none;}
  .hp-sp{opacity:.5;}
}

/* ---- tour v2 (2026-11-11): page preview beside Curio, dimmed page, Pause / Restart and the dots ---- */
.ct-ctl{flex-wrap:wrap;}
.ct-dots{display:flex; gap:6px; flex:1 0 100%; justify-content:center; margin-top:4px;}
.ct-dots i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; display:block;}
.ct-dots i.on{background:#F1CB6A;}
.ct-dim{position:fixed; inset:0; z-index:66; background:rgba(47,2,78,.55); opacity:0; transition:opacity .3s ease;}
.ct-dim.on{opacity:1;}
.ct-page{position:fixed; z-index:67; left:4vw; top:96px; width:min(760px,56vw); height:min(62vh,540px); background:#fff; border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6); opacity:0; transform:translateY(16px) scale(.98); transition:opacity .3s ease, transform .3s ease;}
.ct-page.on{opacity:1; transform:none;}
.ct-page[hidden], .ct-dim[hidden]{display:none;}
.ct-pg-bar{flex:0 0 34px; background:#EDE4F7; display:flex; align-items:center; gap:6px; padding:0 12px;}
.ct-pg-bar i{width:10px; height:10px; border-radius:50%; background:#C9B0E6; display:block;}
.ct-pg-url{margin-left:10px; flex:1; background:#fff; border-radius:8px; padding:5px 10px; font:600 12px/1.2 Montserrat,system-ui,sans-serif; color:#2F024E; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ct-pg-view{position:relative; flex:1; overflow:hidden; background:#fff;}
.ct-pg-view img{display:block; width:100%; height:auto; will-change:transform;}
.ct-pg-open{position:absolute; right:14px; bottom:14px; background:#CD9423; color:#fff!important; border-radius:999px; padding:10px 16px; font:800 14px/1 Montserrat,system-ui,sans-serif; text-decoration:none; box-shadow:0 10px 24px -10px rgba(47,2,78,.6);}
.ct-pg-open:hover{background:#b9831c;}
@media (max-width:700px){ .ct-page{left:12px; right:12px; width:auto; top:62px; height:35vh;} }
@media (prefers-reduced-motion:reduce){ .ct-page, .ct-dim{transition:none;} }