/* =========================================================
   Columna Esthetic · Black Friday 2026 · Landing + Mulțumim (base shared with the waitlist page)
   ========================================================= */

:root{
  /* colour: one ink, one paper, one accent (the logo blue) */
  --ink:#0C0D0F;
  --paper:#F1EFEA;
  --accent:#5499CD;
  --p-70:var(--paper);
  --p-50:var(--paper);
  --rule:rgba(241,239,234,.16);
  --i-60:var(--ink);
  --i-rule:rgba(12,13,15,.18);
  --err:#B3261E;

  /* type: one family, three sizes */
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-display:clamp(44px,6.8vw,104px);
  --fs-lead:clamp(18px,1.55vw,22px);
  --fs-body:clamp(14px,1vw,15px);

  --pad:clamp(64px,8vw,112px);
  --gutter:clamp(16px,3.4vw,40px);
  --max:1240px;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-punch:cubic-bezier(.18,1.35,.4,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.intro-lock,.intro-lock body{overflow:hidden;overscroll-behavior:none}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--f);font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{margin:0}
svg{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* shared type */
.hero__title,.head__title,.finale__title,.done__title{
  font-size:var(--fs-display);font-weight:700;font-stretch:68%;line-height:.94;letter-spacing:-.01em;margin:0;text-wrap:balance}
.lead{font-size:var(--fs-lead);line-height:1.45;color:var(--p-70);text-wrap:pretty}
.rule{display:block;height:1px;flex:1;background:var(--rule)}

/* split titles: words in masks, letters react to the cursor */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em 0 .14em;margin:-.06em 0 -.14em}
.w{display:inline-block}
.wm--acc{color:var(--accent)}
.ch{display:inline-block;transform-origin:50% 100%;
  transform:translateY(calc(var(--k,0) * -.14em)) scaleY(calc(1 + var(--k,0) * .28));
  color:color-mix(in oklab,var(--accent) calc(var(--k,0) * 100%),currentColor);
  text-shadow:calc(var(--k,0) * var(--gx,2px)) 0 rgb(255 64 160 / calc(var(--k,0) * .85)),calc(var(--k,0) * var(--gx,2px) * -1) 0 rgb(64 224 255 / calc(var(--k,0) * .85));
  transition:transform .45s var(--ease-out),color .45s var(--ease-out),text-shadow .3s var(--ease-out)}

/* section reveals */
.rv{opacity:0;translate:0 22px;transition:opacity .8s var(--ease-out) calc(var(--d,0) * 90ms),translate .8s var(--ease-out) calc(var(--d,0) * 90ms)}
.rv.in{opacity:1;translate:none}
.rv .fx-title .w,.fx-title.rv .w{transform:translateY(108%);transition:transform 1s var(--ease-out) calc(var(--wi,0) * 55ms + 80ms)}
.rv.in .fx-title .w,.fx-title.rv.in .w{transform:none}
.rv:has(.fx-title),.fx-title.rv{translate:none}

/* intro choreography: hidden until the particles land */
.js .ii{opacity:0;translate:0 18px}
.intro-done .ii{opacity:1;translate:none;transition:opacity 1s var(--ease-out) calc(var(--ii,0) * 120ms),translate 1s var(--ease-out) calc(var(--ii,0) * 120ms)}
.js .hero__title .w{opacity:0}
/* the raw title text must never paint before app.js splits it; only the split words can show.
   Safety net: if the script never arrives, the plain title appears after 12s */
.js .hero__title{visibility:hidden;animation:title-safety 0s 12s forwards}
.js .hero__title .wm{visibility:visible}
@keyframes title-safety{to{visibility:visible}}
/* the marquee under the hero waits for the intro too, otherwise its blue edge shows before the animation */
.js .ticker{opacity:0;animation:ticker-safety 0s 12s forwards}
.intro-done .ticker{opacity:1;transition:opacity 1s var(--ease-out) .36s}
@keyframes ticker-safety{to{opacity:1}}
.hero__title.go .w{animation:punch .85s var(--ease-punch) calc(var(--wi,0) * 65ms) both}
@keyframes punch{
  0%{opacity:0;transform:translateY(30%) scale(2.4)}
  45%{opacity:1}
  100%{opacity:1;transform:none}}
@media (hover:none){
  .hero__title.go .w{animation-name:punch-t}
  @keyframes punch-t{0%{opacity:0;transform:translateY(30%) scale(2.2)}45%{opacity:1}100%{opacity:1;transform:none}}
}

/* ---------- cursor + spotlight (desktop only) ---------- */
.cursor{display:none}
.has-cursor .cursor{display:block;position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .6s var(--ease-out)}
.cursor-on .cursor{opacity:1}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor label,.has-cursor [data-cursor]{cursor:none}
.has-cursor input,.has-cursor textarea{cursor:text}
.cursor__dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--paper);transition:opacity .3s}
.cursor__ring{position:absolute;left:0;top:0;width:var(--rs,38px);height:var(--rs,38px);margin:calc(var(--rs,38px) / -2) 0 0 calc(var(--rs,38px) / -2);border-radius:999px;
  border:1px solid rgba(241,239,234,.55);display:grid;place-items:center;
  transition:width .45s var(--ease-out),height .45s var(--ease-out),margin .45s var(--ease-out),background-color .35s,border-color .35s,opacity .3s}
.cursor__label{font-size:var(--fs-body);font-weight:600;color:var(--ink);white-space:nowrap;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s var(--ease-out)}
.cursor.is-link .cursor__ring{--rs:64px;background:rgba(241,239,234,.08);border-color:var(--paper)}
.cursor.is-label .cursor__ring{--rs:96px;background:var(--accent);border-color:var(--accent)}
.cursor.is-label .cursor__label{opacity:1;transform:none}
.cursor.is-label .cursor__dot,.cursor.is-link .cursor__dot{opacity:0}
.cursor__dot,.cursor__ring{transition-property:width,height,margin,background-color,border-color,opacity}
.cursor.on-light .cursor__dot{background:var(--ink)}
.cursor.on-light .cursor__ring{border-color:rgba(12,13,15,.7)}
.cursor.on-light.is-link .cursor__ring{background:rgba(12,13,15,.08);border-color:var(--ink)}
.cursor.is-field .cursor__ring,.cursor.is-field .cursor__dot,.cursor.is-out .cursor__ring,.cursor.is-out .cursor__dot{opacity:0}
.glow{display:none}
.has-cursor .glow{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1s var(--ease-out)}
.cursor-on .glow{opacity:1}
.glow span{position:absolute;left:0;top:0;width:480px;height:480px;margin:-240px 0 0 -240px;border-radius:50%;will-change:transform,opacity}
.glow__b{background:radial-gradient(closest-side,rgba(84,153,205,.30),rgba(84,153,205,.08) 50%,rgba(84,153,205,0))}
.glow__c{background:radial-gradient(closest-side,rgba(40,220,255,.34),rgba(40,220,255,.08) 42%,rgba(40,220,255,0))}
.glow__m{background:radial-gradient(closest-side,rgba(255,40,150,.32),rgba(255,40,150,.08) 42%,rgba(255,40,150,0))}

/* reading progress */
.progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:90;pointer-events:none}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#7FD8F5);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--rule);position:relative;z-index:2}
.mast__row{display:flex;align-items:center;justify-content:center;height:72px}
.mast__logo img{width:clamp(112px,10vw,132px)}
.mast__meta{display:flex;gap:28px;color:var(--p-50)}
.mast__meta a{color:var(--paper);font-weight:600}
.ulink{text-decoration:none;background:linear-gradient(currentColor,currentColor) 100% 100% / 0 1px no-repeat;transition:background-size .5s var(--ease-io)}
.ulink:hover{background-size:100% 1px;background-position:0 100%}

/* ---------- buttons ---------- */
.btn{--h:66px;position:relative;translate:0 0;display:inline-flex;align-items:center;justify-content:space-between;gap:26px;height:var(--h);padding:0 9px 0 30px;border-radius:999px;
  color:var(--ink);font-size:var(--fs-lead);font-weight:700;text-decoration:none;isolation:isolate;cursor:pointer;border:0;
  transition:translate .3s var(--ease-out),transform .6s var(--ease-out),box-shadow .35s var(--ease-out);will-change:transform;box-shadow:0 10px 40px -14px rgba(84,153,205,.8)}
.btn__bg{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1;background:var(--accent)}
/* hover: the text never moves; a soft light follows the pointer, the halo blooms and one quick shine crosses */
.btn__bg::before{content:"";position:absolute;inset:0;background:radial-gradient(140px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 70%);opacity:0;transition:opacity .3s var(--ease-out)}
.btn:hover .btn__bg::before,.btn:focus-visible .btn__bg::before{opacity:1}
.btn:hover,.btn:focus-visible{box-shadow:0 0 0 4px rgba(84,153,205,.28),0 0 44px rgba(84,153,205,.6),0 20px 50px -10px rgba(84,153,205,1)}
.btn__ping{position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);pointer-events:none;animation:ping 2.6s var(--ease-out) infinite}
.btn__ping + .btn__ping{display:none}
.btn:hover .btn__ping{animation:none;opacity:0}
@keyframes ping{0%{transform:scale(1);opacity:.85}75%,100%{transform:scale(1.12,1.5);opacity:0}}
.btn__txt{position:relative;display:inline-flex;white-space:nowrap}
/* shine: a band of light sweeps across every few seconds, inviting the click */
.btn__bg::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-35%;width:26%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-20deg) translateX(0);animation:shine 3.4s var(--ease-io) infinite}
@keyframes shine{0%,58%{transform:skewX(-20deg) translateX(0)}100%{transform:skewX(-20deg) translateX(620%)}}
.btn:hover .btn__bg::after{animation:shine-hover .7s var(--ease-out) 1 both}
@keyframes shine-hover{from{transform:skewX(-20deg) translateX(0)}to{transform:skewX(-20deg) translateX(620%)}}
.btn:hover{translate:0 -3px}
.btn__arr{position:relative;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--paper);overflow:hidden;flex:none;transition:transform .35s var(--ease-out)}
.btn__arr svg{position:absolute;left:14px;top:14px;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease-out)}
.btn__arr svg:first-child{animation:nudge-x 2.6s var(--ease-io) infinite}
.btn__arr svg + svg{transform:translateX(-200%)}
.btn:hover .btn__arr{transform:scale(1.08)}
.btn:hover .btn__arr svg:first-child{animation:none;transform:translateX(200%)}
.btn:hover .btn__arr svg + svg{transform:none}
@keyframes nudge-x{0%,60%,100%{transform:none}75%{transform:translateX(5px)}}
.btn--xl{--h:84px;padding-left:40px;gap:36px}
.btn--xl .btn__arr{width:64px;height:64px}
.btn--xl .btn__arr svg{left:20px;top:20px;width:24px;height:24px}
.btn--block{width:100%}
.btn.is-busy{pointer-events:none}
.btn.is-busy .btn__arr svg{animation:none}
.btn.is-busy .btn__arr::after{content:"";position:absolute;inset:12px;border-radius:50%;border:2px solid rgba(241,239,234,.3);border-top-color:var(--paper);animation:spin .8s linear infinite}
.btn.is-busy .btn__arr svg{opacity:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding-bottom:clamp(40px,6vw,72px)}
.pfx{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero > .wrap,.hero__mega{position:relative;z-index:1}
/* opening: the logo, centred on screen, before it turns into particles */
.intro-logo{position:fixed;left:50%;top:50%;z-index:60;width:clamp(220px,30vw,420px);pointer-events:none;opacity:0;transform:translate(-50%,-50%)}
.intro-logo img{width:100%;filter:drop-shadow(0 0 40px rgba(84,153,205,.45))}
.js .intro-logo{animation:logo-in .9s var(--ease-out) 2.55s forwards}
/* the very first beat: a question, before the logo */
.intro-q{position:fixed;left:50%;top:50%;z-index:61;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;opacity:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  font-size:calc(var(--fs-display) * .95);font-weight:200;line-height:1;letter-spacing:-.02em;color:var(--paper);-webkit-font-smoothing:antialiased}
.js .intro-q{animation:q-in-out 1.45s cubic-bezier(.45,0,.2,1) .05s forwards}
/* second beat: the tease */
.js .intro-q--2{animation-delay:1.35s}
.intro-q--2 span{color:var(--accent)}
@keyframes q-in-out{
  0%{opacity:0;filter:blur(14px);transform:translate(-50%,-50%) scale(1.12)}
  38%{opacity:1;filter:blur(0);transform:translate(-50%,-50%)}
  70%{opacity:1;filter:blur(0);transform:translate(-50%,-50%)}
  100%{opacity:0;filter:blur(10px);transform:translate(-50%,-50%) scale(1.08)}}
.intro-logo.gone{animation:logo-out .2s linear forwards}
@keyframes logo-in{from{opacity:0;transform:translate(-50%,-46%) scale(.94);filter:blur(10px)}to{opacity:1;transform:translate(-50%,-50%);filter:blur(0)}}
@keyframes logo-out{from{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-50%) scale(1.04)}}
@media (max-width:760px){.intro-logo{width:62vw}}
.hero__float{will-change:transform,opacity}
.hero__line{display:flex;justify-content:center;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule);text-align:center}
.hero__tag::after{content:"";display:inline-block;width:1px;height:1.1em;margin-left:14px;background:var(--line-2,rgba(241,239,234,.35));vertical-align:-.2em}
.hero__phone{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-lead);font-weight:600;color:var(--paper);text-decoration:none;font-variant-numeric:tabular-nums;transition:color .3s}
.hero__phone svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round;transition:transform .5s var(--ease-punch)}
.hero__phone:hover{color:var(--accent)}
.hero__phone:hover svg{transform:rotate(-14deg) scale(1.1)}
.hero__when{color:var(--p-70)}
.hero__mega{height:clamp(150px,min(24vw,25vh),380px);margin:clamp(10px,1.8vh,22px) 0 clamp(6px,1.2vh,14px);pointer-events:none}
.hero__title{max-width:14.5em;margin:0 auto;text-align:center}
.hero__lead{max-width:36em;margin:clamp(16px,2vw,24px) auto 0;text-align:center}
.hero__count{display:flex;flex-direction:column;align-items:center;margin-top:clamp(22px,2.6vw,34px);padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--rule)}
.hero__count .clock{justify-content:center}
@media (min-width:1100px){
  .hero__count{display:grid;grid-template-columns:auto auto;column-gap:clamp(36px,4vw,64px);justify-content:center;align-items:center}
  .hero__count .clock__label{grid-column:1 / -1;text-align:center}
  .hero__count .clock{margin-bottom:0}
}
.hero__count .clock__u{flex:none;width:clamp(96px,9.5vw,148px);align-items:center;text-align:center}

.split{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:clamp(28px,4vw,56px);margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--rule)}
.split__rule{background:var(--rule)}
.split .lead{max-width:30em}

.clock__label{color:var(--paper);margin-bottom:6px}
.clock{display:flex;margin-bottom:26px}
.clock__u{display:flex;flex-direction:column;gap:8px;padding:0 clamp(14px,2vw,26px);border-left:1px solid var(--rule);flex:1;min-width:0}
.clock__u:first-child{padding-left:0;border-left:0}
.clock__n{display:flex;font-size:var(--fs-display);font-weight:600;font-stretch:68%;line-height:1.08}
.clock__l{color:var(--paper)}
.clock__n.beat{animation:beat .95s var(--ease-out)}
@keyframes beat{0%{transform:scale(1.07);text-shadow:0 0 28px rgba(84,153,205,.9)}100%{transform:none;text-shadow:0 0 0 rgba(84,153,205,0)}}
.slot{display:inline-grid;overflow:hidden;width:.58em;height:1.08em;text-align:center}
.slot i{grid-area:1/1;font-style:normal;display:block;will-change:transform,filter}
.clock__u:last-child .clock__n{color:var(--accent)}

/* =========================================================
   VELOCITY MARQUEE
   ========================================================= */
.ticker{background:var(--accent);color:var(--ink);overflow:hidden;white-space:nowrap;position:relative}
.ticker__track{display:inline-flex;will-change:transform}
.ticker__set{display:inline-flex;align-items:center;padding:.12em 0 .16em;font-size:var(--fs-display);font-weight:700;font-stretch:68%;line-height:1}
.ticker__set span{padding:0 .28em;transition:color .3s}
.ticker__set i{font-style:normal;font-weight:400;color:var(--paper)}
.ticker__set span:nth-of-type(2n){color:var(--paper)}

/* =========================================================
   SECTION HEADS
   ========================================================= */
.head{margin-bottom:clamp(32px,4vw,52px)}
.head__label{color:var(--accent);font-weight:600;margin-bottom:14px}
.head__title{max-width:14em}
.head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}

/* =========================================================
   PRICE SHEET
   ========================================================= */
.sheet{padding:var(--pad) 0 calc(var(--pad) * .7)}
.table{border-top:1px solid var(--paper)}
.table__head,.row{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,.55fr);gap:24px;align-items:center}
.table__head{padding:12px 0;color:var(--p-50);border-bottom:1px solid var(--rule)}
.t-r{text-align:right}
.row{position:relative;padding:24px 0;border-bottom:1px solid var(--rule);isolation:isolate}
.row.rv{opacity:1;translate:none}
.row__wipe{position:absolute;left:0;right:0;top:-1px;bottom:-1px;z-index:3;pointer-events:none;background:var(--ink);transform-origin:100% 50%;
  transition:transform 1.1s var(--ease-io) calc(var(--i,0) * 90ms)}
.row__wipe::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);box-shadow:0 0 18px 2px rgba(84,153,205,.8)}
.row.in .row__wipe{transform:scaleX(0)}
.row.rv .redact__bar{transform:scaleX(0);transform-origin:0 50%}
.row.rv.in .redact__bar{transform:none;transition:transform .7s var(--ease-io) calc(var(--i,0) * 90ms + .7s)}
.row.rv .row__pct{opacity:0;scale:.4}
.row.rv.in .row__pct{opacity:1;scale:1;transition:opacity .4s calc(var(--i,0) * 90ms + .8s),scale .7s var(--ease-punch) calc(var(--i,0) * 90ms + .8s),transform .5s var(--ease-punch)}
.row::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-io)}
.row::after{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);z-index:-1;opacity:0;transition:opacity .4s var(--ease-out);
  background:radial-gradient(420px 160px at var(--mx,50%) 50%,rgba(84,153,205,.16),rgba(84,153,205,0))}
.row:hover::before{transform:scaleX(1)}
.row:hover::after{opacity:1}
.row__info{transition:transform .6s var(--ease-out)}
.row:hover .row__info{transform:translateX(14px)}
.row__name{font-size:var(--fs-lead);font-weight:600;line-height:1.25}
.row__desc{color:var(--p-50);margin-top:4px}
.row__list{font-size:var(--fs-lead);color:var(--p-50)}
.row__list s{text-decoration-thickness:1px}
.row__bf{font-size:var(--fs-lead);font-weight:600}
.row__save{display:none;font-size:var(--fs-body);font-weight:400;color:var(--accent)}
.row__pct{font-size:var(--fs-lead);font-weight:600;color:var(--accent);text-align:right;transition:transform .5s var(--ease-punch)}
.row:hover .row__pct{transform:scale(1.25);transform-origin:100% 50%}

.redact{position:relative;display:inline-block;min-width:5.6em;white-space:nowrap}
.redact__val{font-variant-numeric:tabular-nums}
.redact__bar{position:absolute;left:-6px;right:-6px;top:-3px;bottom:-3px;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-body);font-weight:600;transform-origin:100% 50%;transition:transform .7s var(--ease-io)}
.row.rv.in:hover .redact__bar,.row.rv.in.peek .redact__bar{transform:translateX(44%);transition-delay:0s}
.redact__bar.nudge{animation:nudge .5s var(--ease-io)}
@keyframes nudge{25%{translate:-6px 0}50%{translate:5px 0}75%{translate:-3px 0}}
.is-on .row.rv .redact__bar,.is-on .row.rv.in:hover .redact__bar{transform:scaleX(0);transform-origin:100% 50%;transition-delay:calc(var(--i,0) * 80ms)}
.is-on .row__save{display:block;animation:rise .6s var(--ease-out) both;animation-delay:calc(var(--i,0) * 80ms + .4s)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* ---------- service photo cards ---------- */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
/* the two groups from the clinic's list: single treatments, then packages */
.svc__group{display:flex;align-items:center;justify-content:center;gap:18px;margin:clamp(40px,5vw,72px) 0 clamp(18px,2vw,28px);font-size:var(--fs-lead);font-weight:700;line-height:1.2;color:var(--paper);text-align:center}
.svc__group:first-child{margin-top:0}
.svc__group .rule{max-width:220px}
.svc__card{position:relative;display:flex}
/* the card (hover target) stays put; only the inner layer lifts, so the hover can't flicker on and off at the edge */
.svc__lift{position:relative;display:flex;flex-direction:column;width:100%;border-radius:24px;overflow:hidden;background:#14171C;isolation:isolate;
  box-shadow:inset 0 0 0 1px var(--rule);transform:translateZ(0);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.svc__card.in:hover .svc__lift{transform:translate3d(0,-10px,0);box-shadow:inset 0 0 0 1px rgba(84,153,205,.7),0 40px 80px -30px rgba(84,153,205,.45)}
.svc__card.rv{opacity:0;translate:0 50px;transition:opacity .9s var(--ease-out) calc(var(--i,0) * 110ms),translate 1s var(--ease-out) calc(var(--i,0) * 110ms)}
.svc__card.rv.in{opacity:1;translate:0 0}
.svc__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#1B1F26}
.svc__media img,.svc__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateZ(0) scale(1);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform 1.2s var(--ease-out)}
.svc__card:hover .svc__media img,.svc__card:hover .svc__media video{transform:translateZ(0) scale(1.07)}
/* slideshow: slides cross-fade; a clip fades in over its poster once it is actually playing */
.svc__media .sl{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease-out)}
.svc__media .sl.is-on{opacity:1}
.svc__media video{opacity:0;transition:opacity .45s var(--ease-out),transform 1.2s var(--ease-out)}
.svc__media video.is-playing{opacity:1}
.sl-bars{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;display:flex;gap:5px;pointer-events:none}
.sl-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.sl-bars b{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.sl-bars i.done b{transform:none}
.sl-bars i.run b{animation:sl-run var(--d,4s) linear forwards}
.sl-bars.paused i.run b{animation-play-state:paused}
@keyframes sl-run{to{transform:none}}
.svc__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,13,15,0) 55%,rgba(12,13,15,.55));pointer-events:none}
/* -40% bookmark: a silk ribbon tucked under the top edge of the photo */
.svc__badge{position:absolute;top:-8px;right:20px;z-index:2;filter:drop-shadow(0 8px 10px rgba(12,13,15,.42));
  transform:translate3d(0,-110%,0);transition:transform .9s var(--ease-punch) calc(var(--i,0) * 110ms + .8s)}
.svc__card.in .svc__badge{transform:none;transition-delay:calc(var(--i,0) * 110ms + .8s)}
.svc__card.in:hover .svc__badge{transform:translate3d(0,6px,0);transition:transform .6s var(--ease-punch)}
/* slim black ribbon: a fine blue keyline follows the notched tail */
.bm{position:relative;display:flex;justify-content:center;width:60px;height:80px;padding-top:26px;color:var(--paper);
  background:linear-gradient(172deg,#222B38 0%,#12161C 45%,#0C0D0F 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 87%,0 100%)}
.bm::before{content:"";position:absolute;inset:0;pointer-events:none;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80' preserveAspectRatio='none'%3E%3Cpath d='M4 0V74.3L30 65.3L56 74.3V0' fill='none' stroke='%235499CD' stroke-opacity='.85' stroke-width='1'/%3E%3C/svg%3E")}
.bm::after{content:"";position:absolute;left:0;right:0;top:0;height:14px;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0))}
.bm b{position:relative;font-size:var(--fs-lead);font-weight:800;font-stretch:68%;line-height:1;letter-spacing:-.01em}
.bm i{font-style:normal;color:var(--accent)}
.svc__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;container-type:inline-size}
#oferte .head{text-align:center}
#oferte .head__title{margin-inline:auto}
.svc__name,.svc__desc{text-align:center}
.svc__name{margin:0 0 6px;font-size:var(--fs-lead);font-weight:700;line-height:1.2}
.svc__desc{color:var(--paper);margin-bottom:18px}
.svc__price{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);font-size:min(var(--fs-lead),7.2cqi)}
.svc__list,.svc__bf{display:flex;justify-content:space-between;align-items:center;gap:10px}
.svc__list s{font-weight:600;text-decoration-thickness:1.5px;text-decoration-color:var(--accent)}
.svc__bf{position:relative;min-height:56px;margin-top:12px;font-weight:600}
.svc__bf .redact{position:static;flex:none;min-width:0;font-weight:700}
.svc__bfl{white-space:nowrap}
.svc .redact__bar{left:0;right:0;top:0;bottom:0;gap:10px;border:0;border-radius:14px;font-size:inherit;font-weight:700;background:var(--paper);color:var(--ink);font-family:var(--f);cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums;
  transition:background-color .45s var(--ease-out),box-shadow .45s var(--ease-out),transform .8s var(--ease-io)}
.svc .redact__bar svg{flex:none;width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.lk__shackle{transform-box:fill-box;transform-origin:100% 100%;transition:transform .55s var(--ease-punch)}
/* hover a card: the lock turns blue, the shackle lifts, the date rolls into a live countdown */
.svc__card:hover .redact__bar{background:var(--accent);box-shadow:0 8px 24px -6px rgba(84,153,205,.9)}
.svc__card:hover .lk__shackle{transform:translateY(-3px) rotate(-18deg)}
.svc .redact__bar:focus-visible{background:var(--accent)}
.svc .redact__bar:active{transform:scale(.97)}
/* "Află prețul" wiggles every couple of seconds; it runs on the wrapper with a plain transform (iOS Safari drops the individual rotate/scale props), so the bar's own transform stays free for :active and the unlock */
.svc__card.in .svc__bf .redact__bar{transform-origin:50% 50%;animation:bar-wiggle 2.6s var(--ease-io) calc(var(--i,0) * .35s + 1.2s) infinite;will-change:transform}
.svc__card.in .redact__bar svg{animation:lk-hop 2.6s var(--ease-io) calc(var(--i,0) * .35s + 1.2s) infinite}
.is-on .svc__card .svc__bf .redact__bar,.is-on .svc__card .redact__bar svg{animation:none}
@keyframes bar-wiggle{0%,62%,100%{transform:none}66%{transform:rotate(-2.6deg) scale(1.045)}71%{transform:rotate(2.2deg) scale(1.045)}76%{transform:rotate(-1.6deg) scale(1.03)}81%{transform:rotate(1deg) scale(1.02)}86%{transform:rotate(-.5deg) scale(1.01)}90%{transform:none}}
@keyframes lk-hop{0%,62%,90%,100%{transform:none}67%{transform:translateY(-3px) rotate(-8deg)}74%{transform:none}79%{transform:translateY(-2px)}84%{transform:none}}
.svc__card .row__save{margin-top:8px}
.is-on .svc .redact__bar{transform:scaleX(0);transform-origin:100% 50%;transition:transform .8s var(--ease-io) calc(var(--i,0) * 80ms)}
@media (max-width:900px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}.svc > :last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - clamp(14px,1.6vw,22px) / 2)}}
@media (max-width:560px){.svc{grid-template-columns:minmax(0,1fr)}.svc > :last-child:nth-child(odd){grid-column:auto;width:auto}}

.sheet__note{display:flex;align-items:center;gap:18px;margin-top:28px;color:var(--p-70);justify-content:center;text-align:center;text-wrap:balance}
@media (max-width:760px){.sheet__note .rule{display:none}}

/* =========================================================
   WAITLIST: a paper sheet that expands to full bleed as you scroll in
   ========================================================= */
.list{position:relative;padding:clamp(44px,4.6vw,72px) 0 clamp(56px,6vw,96px);color:var(--ink);isolation:isolate;--f:1}
.list__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .7s var(--ease-out);mix-blend-mode:multiply;
  clip-path:inset(calc((1 - var(--f)) * 9%) calc((1 - var(--f)) * 6%) round calc((1 - var(--f)) * 56px));
  background:radial-gradient(320px circle at var(--b-x,-600px) var(--b-y,-600px),rgba(84,153,205,.42),rgba(84,153,205,0) 70%),
             radial-gradient(260px circle at var(--c-x,-600px) var(--c-y,-600px),rgba(30,200,240,.26),rgba(30,200,240,0) 70%),
             radial-gradient(260px circle at var(--m-x,-600px) var(--m-y,-600px),rgba(255,40,150,.2),rgba(255,40,150,0) 70%)}
.list.glow-on .list__glow{opacity:1}
.list__sheet{position:absolute;inset:0;z-index:-1;background:var(--paper);
  clip-path:inset(calc((1 - var(--f)) * 9%) calc((1 - var(--f)) * 6%) round calc((1 - var(--f)) * 56px))}
.list .head__label{color:var(--accent)}
.list__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
/* glassy wake behind the sliding title (drawn by app.js) */
.list__lava{position:absolute;left:0;top:0;width:100%;height:0;z-index:0;pointer-events:none}
.list__mega{margin:0;font-size:calc(var(--fs-display) * 1.7);font-weight:700;font-stretch:66%;line-height:.86;letter-spacing:-.02em}
.list__line{display:block;white-space:nowrap;text-align:center;transform:translate3d(calc((1 - var(--t,1)) * var(--dir) * 30vw),0,0);will-change:transform}
.list__lead{max-width:32em;margin:22px auto 0;color:var(--ink)}
@media (min-width:1000px){.list__lead{max-width:none}.list__lead .one-line{display:block;white-space:nowrap}}
.points{list-style:none;margin:44px 0 0;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.points li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 20px;isolation:isolate;color:var(--ink);transition:color .45s var(--ease-out)}
.points li + li{border-left:1px solid var(--ink)}
.points li::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease-io)}
.points b{font-size:var(--fs-lead);font-weight:700;color:var(--accent)}
.points li:hover{color:var(--paper)}
.points li:hover::before{transform:scaleY(1)}
.list__cta{margin-top:clamp(40px,5vw,64px)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);width:100%;margin-top:clamp(30px,3.4vw,48px);perspective:1400px;text-align:left}
.list__pin{width:100%}
.list__stage{width:100%;display:flex;flex-direction:column;align-items:center}
.cards-run{display:none}
@media (min-width:761px){
  .list__stage{position:sticky;top:var(--stick,24px)}
  .cards-run{display:block;height:var(--run,0px)}
}
.card{--p:1;position:relative;display:flex;flex-direction:column;background:var(--ink);color:var(--paper);border-radius:28px;padding:12px 12px 30px;overflow:hidden;
  transform-origin:50% 100%;translate:0 0;
  transform:translate3d(0,calc((1 - var(--p)) * 170px),0) rotateX(calc((1 - var(--p)) * 26deg)) scale(calc(.84 + var(--p) * .16));
  opacity:clamp(0,calc(var(--p) * 1.6 - .3),1);
  box-shadow:0 50px 90px -50px rgba(12,13,15,.7);will-change:transform,opacity;transition:translate .6s var(--ease-out),box-shadow .6s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.card:hover{translate:0 -10px;box-shadow:0 70px 110px -50px rgba(12,13,15,.8),0 0 0 1px rgba(84,153,205,.5)}}
.card__vis{position:relative;height:clamp(200px,17vw,250px);border-radius:20px;margin-bottom:26px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(90% 100% at 50% 110%,rgba(84,153,205,.55),rgba(84,153,205,0) 70%),radial-gradient(60% 60% at 0% 0%,rgba(84,153,205,.14),rgba(84,153,205,0) 70%),#171A20;
  transition:background-color .6s}
@media (hover:hover) and (pointer:fine){.card:hover .card__vis{background-color:#1D222B}}
.list .card,.list .card *{-webkit-tap-highlight-color:transparent}
.card__kicker,.card__title,.card__text{padding:0 18px}
.card__kicker{color:var(--accent);font-weight:700;margin-bottom:8px}
.card__title{margin:0 0 10px;font-size:var(--fs-lead);font-weight:700;line-height:1.2}
.card__text{color:var(--paper)}

/* Direct: an SMS lands */
.typing{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;gap:6px;padding:13px 18px;border-radius:99px;background:rgba(241,239,234,.12);transition:opacity .3s .5s,scale .3s .5s}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--paper);animation:typing 1s var(--ease-io) infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:none}30%{transform:translateY(-6px)}}
.card.lit .typing{opacity:0;scale:.5}
.sms{display:flex;gap:12px;width:88%;padding:14px;border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 24px 50px -14px rgba(0,0,0,.7);
  transform:translateY(40px) scale(.86);opacity:0;transition:transform .9s var(--ease-punch) .6s,opacity .5s .6s}
.card.lit .sms{transform:none;opacity:1}
.sms__ico{width:40px;height:40px;border-radius:11px;flex:none}
.sms__top{display:flex;justify-content:space-between;gap:8px;margin-bottom:2px}
.sms__top span{font-weight:600;color:var(--accent)}
.sms__msg{line-height:1.38}

/* Primul: the bell rings */
.card__vis--bell{display:flex;flex-direction:column;justify-content:center;gap:18px}
.bell{position:relative;width:96px;height:96px;display:grid;place-items:center}
.bell__svg{position:relative;z-index:1;width:76px;height:76px;transform-origin:50% 12%}
.bell__body{fill:var(--paper)}
.bell__clap{fill:var(--accent)}
.bell__badge{position:absolute;z-index:2;right:2px;top:2px;min-width:30px;height:30px;padding:0 8px;border-radius:99px;background:var(--accent);color:var(--ink);
  font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 4px #171A20,0 0 20px rgba(84,153,205,.9);transform:scale(0);transition:transform .6s var(--ease-punch) 1s}
.bell__ring{position:absolute;inset:6px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.card.lit .bell__svg{animation:ring 2.8s var(--ease-io) .6s infinite}
.card.lit .bell__badge{transform:none}
.card.lit .bell__ring{animation:ripple 2.8s var(--ease-out) .6s infinite}
.card.lit .bell__ring:nth-child(2){animation-delay:.9s}
.card.lit .bell__ring:nth-child(3){animation-delay:1.2s}
@keyframes ring{0%{transform:rotate(0)}6%{transform:rotate(18deg)}12%{transform:rotate(-16deg)}18%{transform:rotate(12deg)}24%{transform:rotate(-8deg)}30%{transform:rotate(4deg)}36%,100%{transform:rotate(0)}}
@keyframes ripple{0%{transform:scale(.7);opacity:.9}40%,100%{transform:scale(1.9);opacity:0}}
.bell__note{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .5s 1.1s,transform .7s var(--ease-out) 1.1s}
.bell__note b{font-weight:700}
.bell__note span{color:var(--accent);font-weight:600}
.card.lit .bell__note{opacity:1;transform:none}

/* (legacy) Primul clock */
.cclock{display:flex;align-items:center;font-size:clamp(58px,6.4vw,100px);font-weight:700;font-stretch:68%;line-height:1.08;color:var(--paper);transition:color .4s 1.3s,text-shadow .6s 1.3s}
.cclock__n{display:flex}
.cclock__sep{margin:0 .03em;animation:sep 1s steps(2,jump-none) infinite}
@keyframes sep{50%{color:var(--accent)}}
.card.lit .cclock{color:var(--accent);text-shadow:0 0 40px rgba(84,153,205,.9)}
.cclock__date{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-weight:600}

/* Liber: the switch flips on */
.card__vis--toggle{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 20px}
.tgl{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:16px 18px;border-radius:16px;background:rgba(241,239,234,.08)}
.tgl__label{font-weight:600}
.tgl__sw{position:relative;flex:none;width:58px;height:34px;border-radius:99px;background:rgba(241,239,234,.25);transition:background-color .4s .7s,box-shadow .4s .7s}
.tgl__sw i{position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;background:var(--paper);box-shadow:0 2px 8px rgba(0,0,0,.45);transition:transform .6s var(--ease-punch) .7s}
.card.lit .tgl__sw{background:var(--accent);box-shadow:0 0 22px rgba(84,153,205,.8)}
.card.lit .tgl__sw i{transform:translateX(24px)}
.tgl__link{color:var(--accent);font-weight:600}
.points li:hover svg{transform:none;opacity:1;color:var(--accent)}

/* the form: an ink card on the paper sheet */
.paper{background:var(--ink);color:var(--paper);padding:clamp(28px,3.4vw,48px);position:relative;overflow:hidden}
/* popup glows: a soft light on each half trails the system cursor (moved by app.js, transform + opacity only) */
.glowl{position:absolute;left:0;top:0;z-index:0;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;pointer-events:none;opacity:0;will-change:transform,opacity}
.glowl--paper{background:radial-gradient(closest-side,rgba(84,153,205,.36),rgba(84,153,205,.12) 55%,rgba(84,153,205,0))}
.glowl--side{background:radial-gradient(closest-side,rgba(255,255,255,.36),rgba(255,255,255,.1) 55%,rgba(255,255,255,0))}
.form,.done{position:relative}
.field{position:relative;margin-bottom:14px}
.field input{width:100%;height:66px;padding:26px 52px 8px 20px;border:1px solid rgba(241,239,234,.22);border-radius:14px;outline:none;color:var(--paper);
  background:rgba(241,239,234,.045);font-family:var(--f);font-size:max(16px,var(--fs-lead));font-weight:500;
  transition:border-color .3s,background-color .3s,box-shadow .4s var(--ease-out);-webkit-appearance:none;appearance:none}
.field label{position:absolute;left:21px;top:22px;font-weight:600;color:var(--paper);pointer-events:none;transform-origin:0 0;
  transition:transform .4s var(--ease-out),color .3s}
.field input:focus + label,.field input:not(:placeholder-shown) + label{transform:translateY(-12px) scale(.86);color:var(--accent)}
.field input:hover{border-color:rgba(241,239,234,.4)}
.field input:focus{border-color:var(--accent);background:rgba(84,153,205,.1);box-shadow:0 0 0 4px rgba(84,153,205,.22),0 10px 30px -10px rgba(84,153,205,.6)}
.field input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px #1A2230 inset;-webkit-text-fill-color:var(--paper)}
.field__ok{position:absolute;right:16px;top:20px;width:26px;height:26px;border-radius:50%;background:var(--accent);display:grid;place-items:center;
  transform:scale(0) rotate(-90deg);transition:transform .5s var(--ease-punch)}
.field__ok svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.field.is-valid .field__ok{transform:none}
.field.is-valid input{border-color:rgba(84,153,205,.7)}
.field.has-err input{border-color:#FF8A80;box-shadow:0 0 0 4px rgba(255,138,128,.16)}
.field__err{display:block;color:#FF8A80;margin-top:6px;padding-left:4px}
.field__err:empty{display:none}
.field__err--check{margin:-10px 0 16px}
.check{display:flex;gap:14px;align-items:flex-start;margin:10px 0 22px;padding:14px 16px;border-radius:14px;background:rgba(241,239,234,.045);cursor:pointer;color:var(--paper);line-height:1.5;transition:background-color .3s}
.check:hover{background:rgba(84,153,205,.1)}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check__box{flex:none;width:24px;height:24px;margin-top:0;border-radius:7px;border:1.5px solid var(--paper);display:grid;place-items:center;transition:background .25s,border-color .25s}
.check__box svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s var(--ease-out)}
.check input:checked + .check__box{background:var(--accent);border-color:var(--accent)}
.check input:checked + .check__box svg{stroke-dashoffset:0}
.check input:focus-visible + .check__box{outline:2px solid var(--accent);outline-offset:2px}
.check a{color:var(--paper)}
.btn--block{width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form__fail{margin-top:14px;color:#FF8A80}
.form__fine{margin-top:16px;color:var(--paper)}
.form__head{margin-bottom:18px;padding-right:56px}
.form__kicker{color:var(--accent);font-weight:700;margin-bottom:6px}
.form__title{margin:0;font-size:var(--fs-lead);font-weight:700;line-height:1.2}

/* form wins: every completed step is celebrated (sparks are drawn on .burst by app.js) */
/* performance: loops sleep off screen and behind the popup */
.off,.off *,.modal-open main *{animation-play-state:paused!important}
.modal-open .glow{opacity:0}
canvas.burst{position:fixed;inset:0;width:100%;height:100%;z-index:250;pointer-events:none}
.form__kicker{overflow:hidden}
.form__kicker span{display:inline-block}
.form__kicker span.roll-out{animation:roll-out .26s var(--ease-io) forwards}
.form__kicker span.roll-in{animation:roll-in .6s var(--ease-punch) both}
@keyframes roll-out{to{transform:translateY(-110%);opacity:0}}
@keyframes roll-in{from{transform:translateY(110%);opacity:0}}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px}
.steps i{position:relative;height:4px;border-radius:2px;background:rgba(241,239,234,.14);transition:box-shadow .6s var(--ease-out)}
.steps i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#7FD8F5);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out)}
.steps i.on{box-shadow:0 0 14px rgba(127,216,245,.55)}
.steps i.on::after{transform:none}
.fx{position:absolute;left:0;right:0;top:0;height:66px;border-radius:14px;pointer-events:none;overflow:hidden;opacity:0}
.check .fx{height:auto;bottom:0}
.fx::before{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(105deg,rgba(127,216,245,0) 30%,rgba(127,216,245,.38) 47%,rgba(255,255,255,.6) 50%,rgba(127,216,245,.38) 53%,rgba(127,216,245,0) 70%)}
.fx::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px #7FD8F5,inset 0 0 26px rgba(127,216,245,.45)}
.win > .fx{animation:fx-fade 1.2s var(--ease-out) both}
.win > .fx::before{animation:fx-sweep .85s var(--ease-out) both}
@keyframes fx-fade{0%{opacity:0}10%,55%{opacity:1}100%{opacity:0}}
@keyframes fx-sweep{to{transform:translateX(100%)}}
.field__ok svg path{stroke-dasharray:20;stroke-dashoffset:0}
.field.win .field__ok,.check.win .check__box{animation:ok-pop .7s var(--ease-punch) both}
.field.win .field__ok svg path{animation:ok-draw .45s var(--ease-out) .18s both}
@keyframes ok-pop{0%{transform:scale(0) rotate(-40deg)}55%{transform:scale(1.5) rotate(10deg)}100%{transform:none}}
@keyframes ok-draw{from{stroke-dashoffset:20}}
.check{position:relative}
.modal__big{transform-origin:0 70%}
.modal__big.punch{animation:big-punch .75s var(--ease-punch)}
@keyframes big-punch{0%{transform:none}30%{transform:scale(1.1) rotate(-2.5deg)}100%{transform:none}}
.btn.is-ready{box-shadow:0 0 0 4px rgba(84,153,205,.28),0 0 44px rgba(84,153,205,.6),0 20px 50px -10px rgba(84,153,205,1)}
.btn.charged{animation:charge .9s var(--ease-punch)}
.btn.charged .btn__bg::after{animation:shine-hover .9s var(--ease-out) 1 both}
@keyframes charge{0%{transform:none}28%{transform:scale(1.05)}100%{transform:none}}
.meter{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.meter__bar{flex:1;height:6px;border-radius:99px;background:rgba(241,239,234,.12);overflow:hidden}
.meter__bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#8FD3F7);transform-origin:0 50%;transform:scaleX(var(--m,0));transition:transform .6s var(--ease-punch);box-shadow:0 0 14px rgba(84,153,205,.8)}
.meter__txt{font-weight:600;white-space:nowrap}
.meter.full .meter__txt{color:var(--accent)}

.form.out{opacity:0;translate:0 -10px;transition:opacity .35s var(--ease-out),translate .35s var(--ease-out)}
.done{outline:none}
.done.in .done__title,.done.in > p,.done.in li,.done.in .done__links{animation:rise .7s var(--ease-out) both}
.done.in > p{animation-delay:.08s}
.done.in li:nth-child(1){animation-delay:.16s}.done.in li:nth-child(2){animation-delay:.24s}.done.in li:nth-child(3){animation-delay:.32s}
.done.in .done__links{animation-delay:.4s}
.done__title{margin-bottom:18px}
.done > p{color:var(--p-50);margin-bottom:18px}
.done__steps{list-style:none;margin:0 0 26px;padding:0}
.done__steps li{display:flex;gap:16px;padding:13px 0;border-top:1px solid var(--rule)}
.done__steps li:last-child{border-bottom:1px solid var(--rule)}
.done__steps b{color:var(--accent);min-width:1ch}
.done__links{display:flex;flex-wrap:wrap;gap:12px 28px}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--paper);text-decoration:none;border-bottom:1px solid var(--paper);padding-bottom:2px}
.link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-out)}
.link:hover svg{transform:translateX(3px)}
.link:hover{color:var(--accent);border-color:var(--accent)}

/* =========================================================
   POPUP: bursts open in a circle from the button you pressed
   ========================================================= */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.modal__scrim{position:absolute;inset:0;background:rgba(12,13,15,.82);opacity:0;transition:opacity .5s var(--ease-out)}
@media (hover:hover){.modal__scrim{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.modal.open .modal__scrim{opacity:1}
.modal__panel{position:relative;width:min(1060px,100%);max-height:calc(100svh - 48px);overflow:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);border-radius:8px;
  clip-path:circle(0 at var(--ox,50%) var(--oy,50%));transition:clip-path .95s var(--ease-io)}
.modal.open .modal__panel{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}
.modal.closing .modal__panel{transition-duration:.55s}
.modal.open.settled .modal__panel{clip-path:none;box-shadow:0 0 0 1px rgba(241,239,234,.14),0 50px 140px -30px rgba(84,153,205,.55)}
.modal__main{background:radial-gradient(90% 60% at 100% 100%,rgba(84,153,205,.28),rgba(84,153,205,0) 70%),radial-gradient(60% 40% at 0% 0%,rgba(84,153,205,.12),rgba(84,153,205,0) 70%),#121418;display:flex;flex-direction:column;justify-content:center}
.modal__side{position:relative;isolation:isolate;overflow:hidden;color:var(--ink);padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;gap:20px;
  background:radial-gradient(70% 45% at 100% 0%,#9ACCF1 0%,rgba(154,204,241,0) 65%),radial-gradient(85% 60% at 0% 100%,#2D6A9C 0%,rgba(45,106,156,0) 66%),linear-gradient(165deg,#4F97CF 0%,#4485BD 55%,#3C7AB0 100%)}
/* fine grain gives the blue a printed, tactile surface */
.modal__side::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.modal__side > :not(.glowl):not(.modal__fx){position:relative;z-index:1}
.modal__fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.modal__big{margin:4px 0 -4px;font-size:clamp(84px,10vw,150px);font-weight:800;font-stretch:72%;line-height:.86;letter-spacing:-.02em;color:var(--paper)}
/* the -40%: polished white metal with an embossed edge; its highlight follows the cursor (app.js) */
.modal__big span[aria-hidden]{display:inline-block;transform-origin:0 70%;padding:0 .04em;
  background:linear-gradient(112deg,#FFFFFF 0%,#EEF2F6 16%,#B9C6D3 31%,#FFFFFF 46%,#D3DCE5 60%,#F7F9FB 74%,#A9B8C7 90%,#E9EEF3 100%);
  background-size:260% 100%;background-position:40% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.7)) drop-shadow(0 2px 0 rgba(26,66,104,.5)) drop-shadow(0 16px 22px rgba(12,13,15,.32))}
/* entrance: it drops from above the panel and lands hard */
.modal.open .modal__big span[aria-hidden]{animation:slam .82s .35s both}
@keyframes slam{
  0%{opacity:0;transform:translate3d(0,-14px,0) scale(2.3);animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  50%{opacity:1;transform:scale(.92);animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  72%{transform:scale(1.035)}
  100%{opacity:1;transform:none}}
.modal__side.thud{animation:thud .42s var(--ease-out)}
@keyframes thud{0%{transform:none}22%{transform:translate3d(0,5px,0)}48%{transform:translate3d(0,-2px,0)}100%{transform:none}}
/* VIP access pass: a black ticket with a perforated stub */
.modal__tag{font-weight:700;filter:drop-shadow(0 12px 16px rgba(12,13,15,.32))}
.pass{--cut:118px;display:inline-flex;align-items:stretch;height:48px;border-radius:12px;background:var(--ink);color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(241,239,234,.14);
  -webkit-mask:radial-gradient(circle 7px at var(--cut) 0,#0000 96%,#000) top/100% 51% no-repeat,radial-gradient(circle 7px at var(--cut) 100%,#0000 96%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 7px at var(--cut) 0,#0000 96%,#000) top/100% 51% no-repeat,radial-gradient(circle 7px at var(--cut) 100%,#0000 96%,#000) bottom/100% 51% no-repeat;
  opacity:0;transform:translate3d(-34px,0,0);transition:opacity .5s var(--ease-out) .35s,transform .9s var(--ease-punch) .35s}
.modal.open .pass{opacity:1;transform:none}
.pass__stub{display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--cut);line-height:1.08;font-size:var(--fs-body);font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.pass__stub em{font-style:normal;color:var(--accent)}
.pass__ev{display:flex;align-items:center;padding:0 20px;border-left:1.5px dashed rgba(241,239,234,.34);font-weight:600;white-space:nowrap}
.ml{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em 0 .14em;margin:-.04em 0 -.14em}
.ml > span{display:inline-block;transform:translateY(112%);transition:transform 1.05s var(--ease-out) .48s}
.ml + .ml > span{transition-delay:.58s}
.modal.open .ml > span{transform:none}
.modal__title{margin:0;font-size:var(--fs-display);font-weight:700;font-stretch:68%;line-height:.92;letter-spacing:-.01em}
.modal__clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:auto}
.modal__clock div{display:flex;flex-direction:column;gap:4px;padding:14px 14px 12px;border-radius:14px;background:rgba(247,245,240,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 30px -18px rgba(12,13,15,.6);
  opacity:0;transform:translate3d(0,24px,0) scale(.9);transition:opacity .6s var(--ease-out) .72s,transform .85s var(--ease-punch) .72s}
.modal__clock div:nth-child(2){transition-delay:.8s}
.modal__clock div:nth-child(3){transition-delay:.88s}
.modal__clock div:nth-child(4){transition-delay:.96s;background:var(--ink);color:var(--paper);box-shadow:0 16px 30px -14px rgba(12,13,15,.7)}
.modal.open .modal__clock div{opacity:1;transform:none}
.modal__clock b{display:flex;font-size:min(var(--fs-display),clamp(34px,4.2vw,58px));font-weight:700;font-stretch:68%;line-height:1.08}
.modal__clock span{font-weight:600}
.modal__perks{list-style:none;margin:auto 0 0;padding:0}
.modal__perks li{padding:11px 0 11px 26px;border-top:1px solid var(--ink);font-weight:600;position:relative}
.modal__perks li::before{content:"+";position:absolute;left:2px;top:9px;font-weight:700}
.modal__x{position:absolute;top:16px;right:16px;z-index:3;width:48px;height:48px;border-radius:50%;background:var(--paper);display:grid;place-items:center;transform:scale(0) rotate(-120deg);transition:transform .7s var(--ease-punch) .55s}
.modal.open .modal__x{transform:none}
.modal.settled .modal__x{transition-delay:0s}
.modal__x svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.modal.open .modal__x:hover{transform:rotate(90deg) scale(1.08);transition-delay:0s}
.modal .st{opacity:0;transform:translate3d(0,28px,0);transition:opacity .7s var(--ease-out) calc(var(--si,0) * 70ms + .42s),transform .9s var(--ease-out) calc(var(--si,0) * 70ms + .42s)}
.modal.open .st{opacity:1;transform:none}
.modal .form > .btn.st{transform:translate3d(0,28px,0) scale(.9);transition:opacity .6s var(--ease-out) calc(var(--si,0) * 70ms + .42s),transform 1s var(--ease-punch) calc(var(--si,0) * 70ms + .42s),translate .3s var(--ease-out),box-shadow .35s var(--ease-out)}
.modal.open .form > .btn.st{transform:none}
.modal.settled .form > .btn.st{transition-delay:0s}
.modal .steps i{transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease-out) .7s,box-shadow .6s var(--ease-out)}
.modal .steps i:nth-child(2){transition-delay:.78s,0s}
.modal .steps i:nth-child(3){transition-delay:.86s,0s}
.modal .steps i:nth-child(4){transition-delay:.94s,0s}
.modal.open .steps i{transform:none}
/* the custom cursor rests inside the popup: the system cursor shows exactly what is under it */
.has-cursor.modal-open .cursor{opacity:0}
.has-cursor.modal-open .modal,.has-cursor.modal-open .modal *{cursor:default}
.has-cursor.modal-open .modal :is(a,button,label,.check,.check *){cursor:pointer}
.has-cursor.modal-open .modal :is(input,textarea){cursor:text}
html.modal-open{overflow:hidden}

/* =========================================================
   REVIEWS: notifications stacking on a phone, driven by scroll
   ========================================================= */
.voices{position:relative;height:var(--pinH,200vh)}
.voices__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.voices__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,110px);align-items:center}
.voices__lead{margin-top:20px;max-width:24em}
.voices__label{display:inline-flex;align-items:center;gap:10px}
.voices__label .gicon{width:24px;height:24px;padding:4px;border-radius:7px;background:#fff;box-sizing:content-box}
.voices__stars{position:relative;display:flex;align-items:center;gap:6px;height:1em;margin-top:clamp(24px,3vw,40px);font-size:calc(var(--fs-display) * .7);line-height:1}
.voices__stars span{display:inline-block;width:1em;height:1em}
.lstar{display:block;width:100%;height:100%;overflow:visible;transition:filter .6s}
.lstar__outline{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-linejoin:round}
.lstar__wave{fill:var(--accent)}
.lstar__wave--back{fill:#9FD0F2;opacity:.7}
/* empty: the liquid sits below the star; filling: it rises, its surface rolling like water */
.lstar__liquid{transform:translateY(24px);transition:transform .65s cubic-bezier(.4,0,.2,1) calc(var(--si) * 80ms)}
.lstar__wave{animation:wave .7s linear infinite}
.lstar__wave--back{animation-duration:1s;animation-direction:reverse}
@keyframes wave{to{transform:translateX(-12px)}}
.voices__stars.filling .lstar__liquid,.voices__stars.full .lstar__liquid{transform:translateY(-4px)}
.voices__stars.full .lstar__wave{animation:none}
.voices__stars.full .lstar{filter:drop-shadow(0 0 10px rgba(84,153,205,.65))}
/* one big pulse once all five are full */
.voices__stars.is-grand span{animation:star-grand 1.2s var(--ease-punch) calc(var(--si) * 70ms) both}
@keyframes star-grand{0%{transform:none}30%{transform:scale(1.42) translateY(-6px) rotate(-10deg);filter:brightness(1.5)}60%{transform:scale(.94) rotate(4deg)}100%{transform:none}}
.voices__fx{position:absolute;left:-120px;top:-140px;width:calc(100% + 240px);height:300px;pointer-events:none;display:block}
.voices__note{margin-top:14px;font-weight:600}

.phone{--ph:min(88vh,740px);position:relative;text-align:left;width:calc(var(--ph) * .5);height:var(--ph);padding:11px;border-radius:calc(var(--ph) * .078);
  background:linear-gradient(145deg,#2A2F38,#0C0D0F 40%,#1C2027);box-shadow:0 0 0 1px rgba(241,239,234,.14),0 60px 120px -40px rgba(84,153,205,.55),0 30px 60px -30px rgba(0,0,0,.9)}
.phone__screen{position:relative;height:100%;border-radius:calc(var(--ph) * .064);overflow:hidden;
  background:radial-gradient(120% 70% at 50% 0%,#6FAEE0 0%,#2D5A86 38%,#13243A 70%,#0C0D0F 100%)}
.phone__status{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:16px 24px 0}
.phone__status b{font-weight:700}
.phone__island{position:absolute;left:50%;top:12px;width:32%;height:28px;border-radius:99px;background:#000;transform:translateX(-50%)}
.phone__icons{display:flex;gap:4px;align-items:flex-end}
.phone__icons i{display:block;width:4px;background:var(--paper);border-radius:2px}
.phone__icons i:nth-child(1){height:6px}.phone__icons i:nth-child(2){height:9px}.phone__icons i:nth-child(3){height:12px}
.phone__lock{position:relative;z-index:1;text-align:center;margin-top:calc(var(--ph) * .05)}
.phone__date{font-weight:600}
.phone__time{font-size:calc(var(--ph) * .11);font-weight:700;font-stretch:72%;line-height:1;letter-spacing:-.01em}
.notifs{position:absolute;left:9px;right:9px;top:calc(var(--ph) * .29);bottom:12px}
.notif{position:absolute;left:0;right:0;top:0;display:block;padding:12px 14px 13px;border-radius:20px;overflow:hidden;
  background:rgba(241,239,234,.94);color:var(--ink);box-shadow:0 14px 34px -14px rgba(0,0,0,.65);
  opacity:0;transform-origin:50% 0;will-change:transform,opacity}
.notif__ico{flex:none;width:24px;height:24px;border-radius:7px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(12,13,15,.08)}
.notif__ico .gicon{width:15px;height:15px}
.notif__main{min-width:0;flex:1}
.notif__top{display:flex;align-items:center;gap:8px;white-space:nowrap;margin-bottom:5px}
.notif__top b{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.notif__stars{color:var(--accent);letter-spacing:1px;margin-left:4px}
.notif__when{margin-left:auto;font-weight:600}
.notif__txt{line-height:1.38}
.notif__who{margin-top:5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:900px){
  .voices__grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:20px}
  .voices__lead{display:none}
  .voices__stars{justify-content:center;margin-top:8px;font-size:30px}
  .voices__note{display:none}
  .voices__copy .head__title{font-size:calc(var(--fs-display) * .8)}
  .phone{--ph:min(62svh,560px);width:min(82vw,calc(var(--ph) * .56))}
  .notif{padding:10px 12px 11px}
  .notif__txt{line-height:1.32}
  .notif__when{display:none}
}

/* =========================================================
   FINALE
   ========================================================= */
.finale{position:relative;padding:calc(var(--pad) * .6) 0 var(--pad)}
.finale > .wrap,.finale__mega{position:relative;z-index:1}
.finale__mega{height:clamp(150px,24vw,340px);pointer-events:none;margin-bottom:clamp(16px,2vw,28px)}
.finale > .wrap{text-align:center}
.finale__title{max-width:13em;margin-left:auto;margin-right:auto}
.finale__row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;margin-top:clamp(28px,3vw,40px)}
.finale__row p{color:var(--p-70)}
.finale__row p a{color:var(--paper);font-weight:600}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding:22px 0;color:var(--p-50)}
.foot__row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot a{margin-left:22px}
.foot a:first-child{margin-left:0}
.foot a:hover{color:var(--paper)}

.dock{display:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .table__head{display:none}
  .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"name name name" "list bf pct";row-gap:16px;align-items:end}
  .row__info{grid-area:name}
  .row__list{grid-area:list}.row__bfc{grid-area:bf}.row__pct{grid-area:pct}
  .row__list::before,.row__bfc::before{content:attr(data-label);display:block;font-size:var(--fs-body);color:var(--p-50);margin-bottom:4px}
  .row:hover .row__info{transform:none}
}
@media (max-width:760px){
  .mast__addr{display:none}
  .hero__line{flex-direction:column;gap:2px}
  .hero__mega{height:clamp(130px,38vw,220px)}
  .split{grid-template-columns:minmax(0,1fr);gap:28px}
  .split__rule{display:none}
  .clock{justify-content:space-between}
  .clock__u{flex:1;padding:0 0 0 10px}
  .clock__u:first-child{padding-left:0}
  .split__b .btn{width:100%}
  .voices__btn{width:44px;height:44px}
  .finale__row .btn{width:100%}
  .list__mega{font-size:calc(var(--fs-display) * 1.2)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .hero__line{flex-direction:row;flex-wrap:wrap;gap:6px 12px}
  .hero__tag::after{display:none}
  .hero__count .clock{width:100%}
  .hero__count .clock__u{flex:1;width:auto}
  .hero__count .btn{width:100%}
  .points li + li{border-left:0;border-top:1px solid var(--ink)}
  .btn{--h:62px;padding-left:24px;gap:18px}
  .btn--xl{--h:72px;padding-left:28px}
  .btn--xl .btn__arr{width:54px;height:54px}.btn--xl .btn__arr svg{left:15px;top:15px}
  .modal{padding:0;align-items:end}
  .modal__panel{grid-template-columns:minmax(0,1fr);max-height:94svh;border-radius:14px 14px 0 0}
  .modal__big{font-size:76px}
  .modal__side{gap:16px}
  .modal__tag{align-self:flex-start;padding:0 64px 0 0}
  .pass{--cut:96px;height:auto;min-height:52px}
  .pass__ev{padding:8px 16px;white-space:normal;line-height:1.25}
  .modal__title{text-wrap:balance}
  /* popup on phones: everything on one centre axis */
  .modal__side{align-items:center;text-align:center}
  .modal__big span[aria-hidden]{transform-origin:50% 70%}
  .modal__big{transform-origin:50% 70%}
  .modal__clock{align-self:stretch}
  .modal__clock div{align-items:center;padding:12px 6px 10px}
  .modal__clock b{justify-content:center}
  .form__head{padding-right:0;text-align:center}
  .field input{text-align:center;padding:26px 48px 8px}
  .field label{left:0;right:0;text-align:center;transform-origin:50% 0}
  .field__err{text-align:center;padding-left:0}
  .check{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .form__fine,.form__fail{text-align:center}
  .modal .btn--block{padding-left:75px}
  .modal .btn--block .btn__txt{flex:1;justify-content:center}
  .done{text-align:center}
  .done__steps li,.done__links{justify-content:center}
  .clock__u{padding:0 0 0 10px}
  .finale__mega{height:clamp(120px,36vw,200px)}
  .foot{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .foot__row{flex-direction:column;align-items:center;text-align:center}
  .foot a{margin:0 10px}

  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;align-items:center;justify-content:space-between;gap:12px;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--ink);border-top:1px solid var(--rule);
    transform:translateY(100%);transition:transform .5s var(--ease-out)}
  .dock.show{transform:none}
  .dock__time{color:var(--p-50);line-height:1.3}
  .dock__time b{display:block;color:var(--paper);font-weight:600;font-variant-numeric:tabular-nums}
  .dock__btn{display:inline-flex;align-items:center;height:46px;padding:0 20px;background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none;border-radius:2px}
}

@media (prefers-reduced-motion:reduce){
  .cards-run{display:none!important}.list__stage{position:static}
  .modal.open .modal__big span[aria-hidden],.modal__side.thud{animation:none}
  .pass,.ml > span,.modal__clock div,.modal__x,.modal .st,.modal .steps i{transition:none!important}
  .win > .fx,.win > .fx::before,.field.win .field__ok,.field.win .field__ok svg path,.check.win .check__box,.modal__big.punch,.btn.charged,.form__kicker span{animation:none}
  .svc__card.in .svc__bf .redact__bar,.svc__card.in .redact__bar svg{animation:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.js .ii,.js .hero__title .w,.js .ticker{opacity:1;translate:none}
  .row__wipe{display:none}.row.rv .redact__bar{transform:none}.row.rv .row__pct{opacity:1;scale:1}
  .list__line{transform:none}.list__sheet{clip-path:none}
  .card{transform:none;opacity:1}
  .svc__card.rv{opacity:1;translate:none}.svc__badge,.svc__card.in:hover .svc__badge{transform:none}
  .rv .fx-title .w,.fx-title.rv .w{transform:none}
}

/* =========================================================
   LANDING PAGE
   ========================================================= */
.lp main{overflow-x:clip}
/* the one caps label on the page */
.eyebrow{color:var(--accent);font-weight:800;letter-spacing:.18em;font-size:var(--fs-body)}
/* placeholders the client still has to send: impossible to miss, impossible to mistake for copy */
.todo{display:inline;padding:.08em .5em;border:1.5px dashed #FF7AC2;border-radius:8px;background:rgba(255,92,176,.12);color:#FF9CD2;font-weight:700;font-size:.92em;letter-spacing:.02em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.light .todo{color:#B4126A;background:rgba(255,92,176,.1);border-color:#E0458F}

/* ---------- 1. hero ---------- */
.lp-hero{position:relative;padding:clamp(36px,5vw,64px) 0 clamp(48px,6vw,80px);isolation:isolate}
.lp-hero__fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.lp-hero__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.lp-hero__title{max-width:17em;margin:16px auto 0;font-size:clamp(38px,5.2vw,80px)}
.vsl{width:min(940px,100%);margin:clamp(28px,3.4vw,44px) auto 0}
.vsl__frame{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#14171C;
  box-shadow:0 0 0 1px var(--rule),0 50px 120px -40px rgba(84,153,205,.55);isolation:isolate}
.vsl__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.5);transform:scale(1.04);transition:transform 1.2s var(--ease-out)}
.vsl:hover .vsl__frame img{transform:scale(1.08)}
.vsl__frame::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 50%,rgba(84,153,205,.25),rgba(12,13,15,.55));pointer-events:none}
.vsl__play{position:absolute;left:50%;top:50%;z-index:2;width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);margin:calc(clamp(72px,8vw,104px) / -2) 0 0 calc(clamp(72px,8vw,104px) / -2);border-radius:50%;
  background:var(--accent);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(84,153,205,.22),0 20px 60px -10px rgba(84,153,205,.9);transition:transform .5s var(--ease-punch)}
.vsl__play::before,.vsl__play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:ping 2.6s var(--ease-out) infinite}
.vsl__play::after{animation-delay:1.3s}
.vsl__play svg{width:38%;height:38%;margin-left:6%;fill:var(--ink)}
.vsl:hover .vsl__play{transform:scale(1.08)}
.vsl__todo{position:absolute;left:18px;bottom:16px;z-index:2}
.lp-hero__lead{max-width:38em;margin:clamp(26px,3vw,36px) auto 0;color:var(--paper)}
.lp-hero__facts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.lp-hero__facts li{display:flex;align-items:center;gap:10px;font-weight:600}
.lp-hero__facts svg,.lp-count__note svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lp-count{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:clamp(26px,3vw,40px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--rule)}
.lp-count .clock{justify-content:center}
.lp-count .clock__u{flex:none;width:clamp(86px,9vw,140px);align-items:center;text-align:center}
.lp-count__note{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:18px;text-wrap:balance}

/* ---------- trust bar ---------- */
.trust .ticker__set{font-size:var(--fs-lead);font-stretch:100%;font-weight:700;padding:18px 0}
.trust .ticker__set span{padding:0 .9em;color:var(--ink)}
.trust .ticker__set span:nth-of-type(2n){color:var(--ink)}
.trust .ticker__set i{color:var(--paper);font-weight:800}

/* ---------- section heads ---------- */
.sec-head{text-align:center;margin-bottom:clamp(32px,4vw,56px)}
.sec-title{margin:0 auto;max-width:17em;font-size:clamp(34px,4.4vw,68px);font-weight:700;font-stretch:68%;line-height:.96;letter-spacing:-.01em;text-wrap:balance}
.sec-head .lead{max-width:38em;margin:clamp(18px,2vw,26px) auto 0;color:var(--paper)}
.sec-note{max-width:46em;margin:14px auto 0;color:var(--paper)}
.sec-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;text-align:left}
.sec-head--row .sec-title{margin:0;max-width:15em}
.sub-title{margin:clamp(56px,6vw,88px) 0 clamp(20px,2vw,28px);text-align:center;font-size:clamp(26px,2.6vw,40px);font-weight:700;font-stretch:72%;line-height:1}

/* ---------- 2. offer chapters ---------- */
.offers{padding:var(--pad) 0 calc(var(--pad) * .6)}
#chapters{margin-top:clamp(20px,3vw,40px)}
.chap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4.4vw,72px);align-items:start;padding:clamp(44px,5vw,80px) 0;border-top:1px solid var(--rule)}
.chap--flip .chap__media{order:2}
.chap__media{position:sticky;top:clamp(24px,5vh,72px)}
.chap__frame{border-radius:26px;box-shadow:0 50px 100px -50px rgba(84,153,205,.5),inset 0 0 0 1px var(--rule)}
.chap__media.in .svc__badge{transform:none}
.chap__title{margin:0 0 18px;font-size:clamp(30px,3.4vw,52px);font-weight:700;font-stretch:72%;line-height:.98;letter-spacing:-.005em;text-wrap:balance}
.chap--group .chap__title{color:var(--accent)}
.chap__pain{font-size:var(--fs-lead);line-height:1.5;color:var(--paper);text-wrap:pretty}
.chap__fix{margin:18px 0 28px;padding:4px 0 4px 18px;border-left:2px solid var(--accent);font-size:var(--fs-lead);line-height:1.5;font-weight:600;color:var(--paper);text-wrap:pretty}
.rows{container-type:inline-size;border-radius:22px;overflow:hidden;background:rgba(241,239,234,.035);box-shadow:inset 0 0 0 1px var(--rule)}
/* each offer is a two-line ticket: what you get on top, then list price, BF price and the button on one baseline */
.rows__head{display:none}
.prow{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;grid-template-areas:"name name name" "list bf buy";gap:16px 44px;align-items:end;padding:22px 24px}
.prow__name{grid-area:name;padding-bottom:16px;border-bottom:1px dashed var(--rule)}.prow__list{grid-area:list}.prow__bf{grid-area:bf}
.prow > div:last-child{grid-area:buy}
.prow{position:relative;transition:background-color .35s var(--ease-out)}
.prow + .prow{border-top:1px solid var(--rule)}
.prow:hover{background:rgba(84,153,205,.08)}
.prow__name b{display:block;font-size:var(--fs-lead);font-weight:700;line-height:1.25;text-wrap:balance}
.incl{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-weight:600;color:var(--paper)}
.incl svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.prow__lbl{display:block;margin-bottom:4px;font-weight:600;color:var(--accent);white-space:nowrap}
.prow__list s{font-size:var(--fs-lead);font-weight:600;text-decoration-thickness:1.5px;text-decoration-color:var(--accent);white-space:nowrap}
.prow__bf b{font-size:var(--fs-lead);font-weight:800;color:var(--accent);white-space:nowrap}
.buy{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 22px;border-radius:999px;background:var(--paper);color:var(--ink);font-weight:700;white-space:nowrap;
  box-shadow:0 10px 30px -14px rgba(84,153,205,.9);transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out),transform .35s var(--ease-out)}
.buy svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:nudge-x 2.6s var(--ease-io) infinite}
.buy:hover,.buy:focus-visible{background:var(--accent);transform:translateY(-2px);box-shadow:0 0 0 4px rgba(84,153,205,.25),0 16px 36px -10px rgba(84,153,205,1)}
.buy:active{transform:scale(.97)}
/* below 700px of table width the rows read like a receipt: label left, price right, full-width button */
@container (max-width:700px){
  .prow{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "list" "bf" "buy";gap:10px;padding:20px}
  .buy{width:100%;justify-content:center}
  .prow__name{padding-bottom:14px}
  .prow__list,.prow__bf{display:flex;justify-content:space-between;align-items:center;gap:18px}
  .prow__lbl{margin:0;line-height:1.35;white-space:normal}
  .prow > div:last-child{margin-top:8px}
}

/* ---------- strips: reels, Instagram, diplomas ---------- */
.reels,.ig,.dipl{padding:var(--pad) 0 0}
.strip{--side:max(var(--gutter),calc((100vw - var(--max)) / 2));display:flex;gap:clamp(12px,1.4vw,18px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:6px var(--side) 18px;scroll-padding-inline:var(--side);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.has-cursor .strip{cursor:none}
.strip.is-drag{scroll-snap-type:none;user-select:none}
.strip > *{scroll-snap-align:start;flex:none}
.strip-nav{display:flex;gap:10px;flex:none}
.strip-nav__b{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--rule);transition:background-color .3s,box-shadow .3s,transform .35s var(--ease-out)}
.strip-nav__b svg{width:22px;height:22px;fill:none;stroke:var(--paper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.strip-nav__b:hover{background:var(--accent);box-shadow:none;transform:scale(1.06)}
.strip-nav__b:hover svg{stroke:var(--ink)}
.reel{width:clamp(196px,21vw,268px);margin:0}
.reel__media{aspect-ratio:9/16;border-radius:22px;box-shadow:inset 0 0 0 1px var(--rule);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.reel:hover .reel__media{transform:translateY(-8px);box-shadow:inset 0 0 0 1px rgba(84,153,205,.7),0 30px 60px -30px rgba(84,153,205,.6)}
.reel figcaption{margin-top:12px;text-align:center;font-size:var(--fs-lead);font-weight:700}
.igc{position:relative;width:min(340px,82vw);height:620px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(84,153,205,.5)}
.igc::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,#1B1F26 30%,#252A33 50%,#1B1F26 70%) 0 0/250% 100%;animation:shimmer 1.4s linear infinite;transition:opacity .5s}
.igc.is-ready::before{opacity:0;animation:none}
@keyframes shimmer{to{background-position:-250% 0}}
.igc iframe{position:relative;width:100%;height:100%;border:0;display:block}

/* ---------- 5. Google reviews ---------- */
.gr{padding:var(--pad) 0}
.gr__label{display:flex;justify-content:center;margin-bottom:18px}
.gr__label .gicon{width:30px;height:30px;padding:9px;border-radius:14px;background:#fff;box-sizing:content-box}
.gr__wall{display:grid;gap:16px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.gr__row{overflow:hidden}
.gr__track{display:flex;gap:16px;width:max-content;animation:drift 70s linear infinite}
.gr__row--r .gr__track{animation-direction:reverse;animation-duration:80s}
.gr__wall:hover .gr__track{animation-play-state:paused}
@keyframes drift{to{transform:translateX(-50%)}}
.rcard{width:clamp(280px,26vw,360px);flex:none;padding:20px 22px;border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.rcard__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rcard__g .gicon{width:22px;height:22px}
.rcard__stars{color:var(--accent);letter-spacing:2px}
.rcard{display:flex;flex-direction:column}
.rcard__txt{line-height:1.5}
.rcard__who{margin-top:auto;padding-top:14px;font-weight:700}
.gr__cta{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:clamp(36px,4vw,56px);text-align:center}

/* ---------- light sections (paper) ---------- */
.light{position:relative;color:var(--ink);isolation:isolate}
.now__sheet,.how__sheet{position:absolute;inset:0;z-index:-1;background:var(--paper)}
.light .sec-head .lead,.light .lead{color:var(--ink)}

/* ---------- 6. why now ---------- */
.now{padding:var(--pad) 0}
.now__title{max-width:18em;text-align:center}
.now__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(32px,4vw,56px);align-items:start}
.now__copy .lead + .lead{margin-top:18px}
.now__save{color:#2B6FA6;white-space:nowrap}
.now__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.now__list li{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:18px;background:#fff;box-shadow:0 18px 40px -26px rgba(12,13,15,.45),inset 0 0 0 1px var(--i-rule)}
.now__list p{font-size:var(--fs-lead);line-height:1.45}
.now__ic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--ink);display:grid;place-items:center}
.now__ic svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:780px;margin:clamp(40px,5vw,64px) auto 0}
.tiles > div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px 14px;border-radius:20px;background:var(--ink);color:var(--paper);box-shadow:0 24px 50px -28px rgba(12,13,15,.8)}
.tiles > div:last-child{background:var(--accent);color:var(--ink)}
.tiles b{display:flex;font-size:clamp(40px,5.4vw,78px);font-weight:700;font-stretch:68%;line-height:1.05}
.tiles span{font-weight:600}
.tiles--dark > div{background:rgba(241,239,234,.06);box-shadow:inset 0 0 0 1px var(--rule)}
.tiles--dark > div:last-child{background:var(--accent);box-shadow:none}
.now__cta,.ba__cta{display:flex;justify-content:center;margin-top:clamp(32px,4vw,48px)}

/* ---------- 7. story ---------- */
.story{padding:var(--pad) 0}
.story__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,84px);align-items:center}
.story .sec-title{margin:0;max-width:12em}
.story__year{margin:clamp(18px,2vw,28px) 0 clamp(10px,1.4vw,18px);font-size:clamp(84px,11vw,168px);font-weight:800;font-stretch:72%;line-height:.86;letter-spacing:-.02em}
.story__year span{display:inline-block;background:linear-gradient(112deg,#FFFFFF 0%,#EEF2F6 16%,#9FB2C6 31%,#FFFFFF 46%,#C9D6E3 60%,#F7F9FB 74%,#8FA6BD 90%,#E9EEF3 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 -1px 0 rgba(255,255,255,.5)) drop-shadow(0 14px 24px rgba(84,153,205,.35));animation:sheen-y 9s var(--ease-io) infinite alternate}
@keyframes sheen-y{from{background-position:10% 0}to{background-position:90% 0}}
.story__p{font-size:var(--fs-lead);line-height:1.55;color:var(--paper);text-wrap:pretty;opacity:0;translate:0 22px;transition:opacity .9s var(--ease-out),translate .9s var(--ease-out)}
.story__p + .story__p{margin-top:18px}
.story__p.in{opacity:1;translate:none}
.story__p--last{font-weight:700}
.story__pics{position:relative;aspect-ratio:20/19;margin-bottom:44px}  /* sized by its width, so the overlapping photos never spill out of it */
.story__pic{position:absolute;margin:0;border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.9),inset 0 0 0 1px var(--rule);will-change:transform}
.story__pic img{width:100%;height:100%;object-fit:cover}
.story__pic--a{left:0;top:2%;width:70%;aspect-ratio:4/3;z-index:2}
.story__pic--b{right:0;top:26%;width:46%;aspect-ratio:4/5;z-index:3}
.story__pic--c{left:8%;bottom:0;width:42%;aspect-ratio:4/5;z-index:1}
.story__todo{position:absolute;right:0;top:calc(100% + 14px);z-index:4}

/* ---------- 8. before / after ---------- */
.ba{padding:var(--pad) 0}
.ba__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.bas{margin:0}
.bas__frame,.bas__clip{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#1B1F26;box-shadow:inset 0 0 0 1px var(--rule)}
.bas__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bas__b{clip-path:inset(0 0 0 var(--x,50%))}
.bas__line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:var(--paper);box-shadow:0 0 18px rgba(84,153,205,.9);pointer-events:none}
.bas__knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--paper);display:grid;place-items:center;box-shadow:0 0 0 6px rgba(241,239,234,.22),0 10px 30px -6px rgba(0,0,0,.6);transition:transform .35s var(--ease-punch)}
.bas__knob svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bas__frame:hover .bas__knob{transform:scale(1.1)}
.bas__tag{position:absolute;top:14px;z-index:2;padding:6px 12px;border-radius:99px;background:rgba(12,13,15,.72);color:var(--paper);font-weight:700;pointer-events:none}
.bas__tag--a{left:14px}.bas__tag--b{right:14px;background:var(--accent);color:var(--ink)}
.bas__range{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.has-cursor .bas__range{cursor:ew-resize}
.bas figcaption{margin-top:12px;text-align:center;font-size:var(--fs-lead);font-weight:700}

/* ---------- 9. team + technology ---------- */
.team{padding:var(--pad) 0 calc(var(--pad) * .4)}
/* flex rows, so an incomplete last row sits centred instead of hanging left */
.docs{--cols:5;--gap:clamp(12px,1.4vw,18px);list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.docs > *,.devices > *{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0}
.doc{display:flex;flex-direction:column;align-items:center;gap:16px;padding:clamp(22px,2.4vw,32px) 16px;border-radius:24px;background:#14171C;box-shadow:inset 0 0 0 1px var(--rule);text-align:center;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.doc:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(84,153,205,.6),0 30px 60px -30px rgba(84,153,205,.5)}
.doc__mono{width:clamp(84px,8vw,112px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:clamp(34px,3.2vw,46px);font-weight:800;font-stretch:72%;
  background:radial-gradient(70% 70% at 30% 20%,#2A4F73,#12161C 70%);box-shadow:inset 0 0 0 1.5px rgba(84,153,205,.75),0 16px 40px -18px rgba(84,153,205,.8);color:var(--paper)}
.doc__name{font-size:var(--fs-lead);font-weight:700;line-height:1.2}
.doc--todo{justify-content:center;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(241,239,234,.2)}
.devices{--cols:3;--gap:clamp(14px,1.6vw,22px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.dev__media{border-radius:22px;box-shadow:inset 0 0 0 1px var(--rule)}
.dev__txt{margin-top:14px;font-size:var(--fs-lead);line-height:1.45;text-align:center;text-wrap:balance}
.dev__txt b{font-weight:700}

/* ---------- 10. diplomas ---------- */
.dipl__card{width:clamp(220px,22vw,280px);aspect-ratio:3/4;border-radius:20px;display:grid;place-items:center;background:linear-gradient(160deg,#1B1F26,#12151A);box-shadow:inset 0 0 0 1.5px rgba(241,239,234,.16)}

/* ---------- 11. how it works: a line with a travelling light joins the steps ---------- */
.how{padding:var(--pad) 0;margin-top:var(--pad)}
.team + .how{margin-top:0;padding-top:calc(var(--pad) * .6)}
.how__steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.how__steps::before{content:"";position:absolute;left:28px;right:28px;top:28px;height:2px;background:linear-gradient(90deg,rgba(12,13,15,.18),rgba(12,13,15,.18))}
.how__steps::after{content:"";position:absolute;top:22px;left:28px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(84,153,205,.25),0 0 24px 6px rgba(84,153,205,.8);animation:travel 5.5s var(--ease-io) infinite}
@keyframes travel{0%{left:28px;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 42px);opacity:0}}
.how__steps li{position:relative}
.how__n{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:var(--fs-lead);font-weight:800;box-shadow:0 0 0 6px var(--paper)}
.how__steps li:nth-child(4) .how__n{background:var(--accent);color:var(--ink)}
.how__steps p{margin-top:20px;font-size:var(--fs-lead);line-height:1.45;text-wrap:pretty}

/* ---------- 12. FAQ ---------- */
.faq{padding:var(--pad) 0}
.faq__wrap{max-width:calc(900px + var(--gutter) * 2)}
.qa{border-top:1px solid var(--rule)}
.qa:last-child{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;font-size:var(--fs-lead);font-weight:700;line-height:1.3;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;flex:none;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--rule);transition:background-color .35s,transform .5s var(--ease-punch)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--paper);border-radius:2px;transition:transform .45s var(--ease-out)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i{background:var(--accent);transform:rotate(180deg)}
.qa[open] summary i::before{background:var(--ink)}
.qa[open] summary i::after{transform:rotate(0);background:var(--ink)}
.qa summary:hover i{box-shadow:inset 0 0 0 1px var(--accent)}
.qa__a{overflow:hidden}
.qa__a p{padding:0 56px 26px 0;font-size:var(--fs-lead);line-height:1.55;color:var(--paper);text-wrap:pretty}
.qa__a a{color:var(--accent)}

/* ---------- 13. final ---------- */
.finale__lead{max-width:36em;margin:clamp(18px,2vw,26px) auto 0;color:var(--paper)}
.finale .tiles{margin-top:clamp(28px,3vw,40px)}

/* ---------- order popup ---------- */
.pick{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:18px;background:rgba(247,245,240,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 30px -18px rgba(12,13,15,.6)}
.pick__name{font-size:var(--fs-lead);font-weight:700;line-height:1.25;text-wrap:balance}
.pick__list,.pick__bf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:600}
.pick__list s{text-decoration-thickness:1.5px}
.pick__bf b{font-size:clamp(26px,2.6vw,36px);font-weight:800;font-stretch:72%;line-height:1}
.pick.flash{animation:big-punch .7s var(--ease-punch)}
.form__text{margin-top:8px}
#formSteps{grid-template-columns:repeat(5,minmax(0,1fr))}
.field__hint{display:block;margin-top:6px;padding-left:4px;font-weight:600;color:var(--paper)}
.field select,.field textarea{width:100%;border:1px solid rgba(241,239,234,.22);border-radius:14px;outline:none;color:var(--paper);background:rgba(241,239,234,.045);font-family:var(--f);font-size:max(16px,var(--fs-lead));font-weight:500;
  transition:border-color .3s,background-color .3s,box-shadow .4s var(--ease-out);-webkit-appearance:none;appearance:none}
.field select{height:66px;padding:26px 48px 8px 20px;text-overflow:ellipsis}
.field select option{color:var(--ink)}
.field textarea{min-height:104px;padding:30px 20px 12px;resize:vertical;line-height:1.45}
.field select:focus,.field textarea:focus{border-color:var(--accent);background:rgba(84,153,205,.1);box-shadow:0 0 0 4px rgba(84,153,205,.22)}
.field--select label,.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{transform:translateY(-12px) scale(.86);color:var(--accent)}
.field__caret{position:absolute;right:16px;top:21px;width:24px;height:24px;pointer-events:none}
.field__caret svg{width:100%;height:100%;fill:none;stroke:var(--paper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.who{border:0;margin:0 0 14px;padding:0}
.who legend{padding:0;margin-bottom:10px;font-weight:600}
.who__opts{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.who__opts .fx{height:auto;bottom:0}
.who__o{position:relative;cursor:pointer}
.who__o input{position:absolute;opacity:0;width:1px;height:1px}
.who__o span{display:flex;align-items:center;justify-content:center;min-height:58px;padding:10px 14px;border-radius:14px;text-align:center;font-weight:600;line-height:1.25;
  background:rgba(241,239,234,.045);box-shadow:inset 0 0 0 1px rgba(241,239,234,.22);transition:background-color .3s,box-shadow .3s,color .3s}
.who__o:hover span{box-shadow:inset 0 0 0 1px rgba(241,239,234,.45)}
.who__o input:checked + span{background:var(--accent);color:var(--ink);box-shadow:none}
.who__o input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.who__opts.win .who__o input:checked + span{animation:ok-pop .7s var(--ease-punch)}
.check--opt{margin-top:-10px}
.form__fine{display:flex;gap:10px;align-items:flex-start}
.form__fine svg{flex:none;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .docs{--cols:3}
}
@media (max-width:960px){
  .chap{grid-template-columns:minmax(0,1fr);gap:26px}
  .chap--flip .chap__media{order:0}
  .chap__media{position:relative;top:0}
  .now__grid,.story__grid{grid-template-columns:minmax(0,1fr)}
  .how__steps{grid-template-columns:minmax(0,1fr);gap:26px;padding-left:78px}
  .how__steps::before{left:28px;right:auto;top:28px;bottom:28px;width:2px;height:auto}
  .how__steps::after{left:22px;top:28px;animation-name:travel-y}
  @keyframes travel-y{0%{top:28px;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:calc(100% - 42px);opacity:0}}
  .how__steps li{display:block}
  .how__n{position:absolute;left:-78px;top:-6px}
  .how__steps p{margin-top:0}
  .ba__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .devices{--cols:2}
}
@media (max-width:760px){
  .lp main .btn{width:100%;max-width:440px;white-space:nowrap;font-size:var(--fs-body);gap:14px;padding-left:26px}
  .lp-hero__title{font-size:clamp(34px,9vw,48px)}
  .lp-count .clock{width:100%}
  .lp-count .clock__u{flex:1;width:auto}
  .lp-count .btn{width:100%}
  .lp-count .btn .btn__txt{flex:1;justify-content:center;white-space:normal;text-align:center;line-height:1.15}
  .sec-head--row{flex-direction:column;align-items:center;text-align:center}
  .sec-head--row .sec-title{margin:0 auto}
  .strip-nav{display:none}
  .docs{--cols:2}
  .ba__grid{grid-template-columns:minmax(0,1fr)}
  .devices{--cols:1}
  .story__pics{height:auto;aspect-ratio:auto;margin-bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .story__pic{position:relative;inset:auto;width:auto;transform:none!important}
  .story__pic--a{grid-column:1 / -1}
  .story__todo{position:static;justify-self:start}
  .tiles{gap:8px}
  .tiles > div{padding:14px 4px 10px}
  .now__cta .btn,.finale__row .btn,.gr__cta .btn,.ba__cta .btn{width:100%}
  .now__cta .btn__txt,.finale__row .btn__txt,.gr__cta .btn__txt,.ba__cta .btn__txt{flex:1;justify-content:center;white-space:normal;text-align:center;line-height:1.15}
  .qa__a p{padding-right:0}
  .who__opts{grid-template-columns:1fr}
  .field select{text-align:center;text-align-last:center;padding:26px 40px 8px}
  .field textarea{text-align:center}
  .field__hint{text-align:center;padding-left:0}
  .dock__time{font-size:13px}
  .dock__btn{height:46px;padding:0 14px;font-size:13px;text-align:center;line-height:1.15}
  .pick{align-self:stretch;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .story__p{opacity:1;translate:none}
  .how__steps::after,.gr__track,.buy svg,.story__year span,.vsl__play::before,.vsl__play::after{animation:none!important}
}

/* =========================================================
   THANK-YOU PAGE
   ========================================================= */
.ty-hero{position:relative;padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,96px);isolation:isolate}
.ty-badge{display:inline-flex;align-items:center;gap:12px}
.ty-badge__tick{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 8px rgba(84,153,205,.2),0 0 40px rgba(84,153,205,.7)}
.ty-badge__tick svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.intro-done .ty-badge__tick{animation:ok-pop .8s var(--ease-punch) .2s both}
.intro-done .ty-badge__tick svg{animation:tick-draw .5s var(--ease-out) .55s forwards}
@keyframes tick-draw{to{stroke-dashoffset:0}}
.ty-hero__title{max-width:13em;margin:20px auto 0;font-size:clamp(42px,6vw,96px)}
.ty-note{padding:var(--pad) 0}
.ty-note__in{max-width:calc(860px + var(--gutter) * 2);text-align:center}
.ty-note__body{margin-top:clamp(26px,3vw,40px)}
.ty-note .story__p{font-size:clamp(19px,1.7vw,24px)}
.ty-next{margin-top:0}
.ty-tel{color:inherit;font-weight:700;white-space:nowrap;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.ty-order{padding:var(--pad) 0 calc(var(--pad) * .5)}
/* the order as a printed receipt with a torn bottom edge */
.receipt{position:relative;max-width:620px;margin:0 auto;padding:30px 32px 44px;background:var(--paper);color:var(--ink);border-radius:22px 22px 0 0;box-shadow:0 50px 100px -40px rgba(84,153,205,.55);
  -webkit-mask:radial-gradient(9px at 50% 100%,#0000 96%,#000) 0 100%/22px 51% repeat-x,linear-gradient(#000 0 0) top/100% 50% no-repeat;
  mask:radial-gradient(9px at 50% 100%,#0000 96%,#000) 0 100%/22px 51% repeat-x,linear-gradient(#000 0 0) top/100% 50% no-repeat}
.receipt__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1.5px dashed rgba(12,13,15,.25)}
.receipt__head img{width:132px}
.receipt__ok{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:var(--ink);color:var(--paper);font-weight:700}
.receipt__ok svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.receipt__rows{margin:0}
.receipt__rows div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 0;border-bottom:1px solid rgba(12,13,15,.1)}
.receipt__rows dt{font-weight:600}
.receipt__rows dd{margin:0;text-align:right;font-size:var(--fs-lead);font-weight:700;text-wrap:balance}
.receipt__rows s{text-decoration-thickness:1.5px;text-decoration-color:var(--accent)}
.receipt__paid dd{font-size:clamp(28px,3vw,40px);font-weight:800;font-stretch:72%;line-height:1}
.receipt__saved{border-bottom:0!important}
.receipt__saved dd{color:#2B6FA6}
/* printing: each line slides out of the slot, one after another */
.receipt.rv{translate:none}
.receipt__rows div{opacity:0;transform:translateY(-14px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.receipt.printed .receipt__rows div{opacity:1;transform:none}
.receipt.printed .receipt__rows div:nth-child(2){transition-delay:.1s}
.receipt.printed .receipt__rows div:nth-child(3){transition-delay:.2s}
.receipt.printed .receipt__rows div:nth-child(4){transition-delay:.3s}
.receipt.printed .receipt__rows div:nth-child(5){transition-delay:.45s}
.receipt.printed .receipt__rows div:nth-child(6){transition-delay:.6s}
.receipt.printed .receipt__paid dd{animation:big-punch .8s var(--ease-punch) .7s}
.ty-order__note{max-width:620px;margin:22px auto 0;text-align:center;font-size:var(--fs-lead);color:var(--paper)}
.ty-promise{padding:var(--pad) 0}
.promise{list-style:none;margin:0 auto;padding:0;max-width:860px;display:grid;gap:12px}
.promise li{display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:18px;background:#14171C;box-shadow:inset 0 0 0 1px var(--rule);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.promise li:hover{transform:translateX(8px);box-shadow:inset 0 0 0 1px rgba(84,153,205,.6)}
.promise .now__ic{background:var(--accent)}
.promise .now__ic svg{stroke:var(--ink)}
.promise p{font-size:var(--fs-lead);line-height:1.4}
.ty-end{padding:calc(var(--pad) * .4) 0 var(--pad);text-align:center}
.ty-end__big{margin:0 auto;max-width:12em;font-size:clamp(44px,6.4vw,104px);font-weight:700;font-stretch:68%;line-height:.94;text-wrap:balance}
.ty-end__sign{margin-top:28px;font-size:var(--fs-lead);line-height:1.5}
.ty-end__sign b{color:var(--accent)}
@media (max-width:760px){
  .receipt{padding:24px 20px 40px}
  .receipt__rows div{flex-direction:column;align-items:flex-start;gap:4px}
  .receipt__rows dd{text-align:left}
  .promise li{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .receipt__rows div{opacity:1;transform:none}
  .ty-badge__tick svg{stroke-dashoffset:0}
}

/* the order form is taller than most laptop screens: the blue side stays pinned (with its countdown) while the form scrolls */
/* the close button stays in reach too: a sticky grid item laid over the top corner */
.lp .modal__x{position:sticky;top:16px;grid-area:1/2;justify-self:end;align-self:start;margin:16px 16px 0 0}
.lp .modal__side{grid-area:1/1}
.lp .modal__main{grid-area:1/2}
@media (min-width:761px){
  .lp .modal__side{position:sticky;top:0;align-self:start;height:calc(100svh - 48px)}
}
@media (max-width:760px){
  .lp .modal__x{grid-area:1/1}
  .lp .modal__main{grid-area:2/1}
}

/* =====================================================================
   TYPE SYSTEM: three sizes, nothing else
   title (every headline and big number) · secondary title (sub-heads, offer names, prices) · body (all the rest)
   ===================================================================== */
:root{
  --fs-title:clamp(36px,4.6vw,68px);
  --fs-sub:clamp(20px,1.8vw,27px);
  --fs-body:clamp(15px,1.12vw,17px);
  --fs-display:var(--fs-title);
  --fs-lead:var(--fs-body);
}
body.lp .lp-hero__title,body.lp .sec-title,body.lp .finale__title,body.lp .ty-hero__title,body.lp .ty-end__big,
body.lp .story__year,body.lp .tiles b{font-size:var(--fs-title)}
/* the popup's metallic -40% is an emblem, not a line of text: it keeps its own scale */
body.lp .chap__title,body.lp .sub-title,body.lp .prow__name b,body.lp .prow__list s,body.lp .prow__bf b,body.lp .doc__mono,
body.lp .pick__bf b,body.lp .receipt__paid dd,body.lp .form__title,body.lp .modal__title,body.lp .modal__clock b{font-size:var(--fs-sub);line-height:1.2}
body.lp .chap__title,body.lp .sub-title{font-stretch:72%;line-height:1.02}
body.lp .eyebrow,body.lp .todo,body.lp .ty-note .story__p,body.lp .receipt__rows dd,body.lp .bm b,body.lp .dock__time,body.lp .dock__btn,
body.lp .pass__stub,body.lp .rcard__stars{font-size:var(--fs-body)}
body.lp .tiles b{line-height:1.02}
body.lp .story__year{font-size:calc(var(--fs-title) * 1)}

/* =====================================================================
   SECTION TITLES: a hairline drops into each title, the accent phrase turns blue and a pen stroke underlines it
   ===================================================================== */
.sec-head::before{content:"";display:block;width:1px;height:clamp(34px,3.6vw,52px);margin:0 auto clamp(16px,1.8vw,24px);
  background:linear-gradient(rgba(84,153,205,0),var(--accent));transform-origin:50% 0;transform:scaleY(0);transition:transform 1s var(--ease-out)}
.sec-head.rv.in::before{transform:none}
.sec-head--row::before{display:none}
.acc{position:relative;display:inline-block;white-space:nowrap}
.acc__line{position:absolute;left:-1.5%;width:103%;bottom:-.02em;height:.2em;overflow:visible;pointer-events:none}
.acc__line path{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.15s var(--ease-out) .55s}
.rv.in .acc__line path,.hero__title.go .acc__line path{stroke-dashoffset:0}
.hero__title.go .acc__line path{transition-delay:1.1s}
.hero__title.go .acc__line{visibility:visible}  /* the hero title is hidden until its words animate in */

/* =====================================================================
   HERO
   ===================================================================== */
.lp-hero{padding:clamp(40px,5.4vw,84px) 0 clamp(56px,6.4vw,96px);overflow:hidden}
.lp-hero__aura{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(46% 34% at 50% 58%,rgba(84,153,205,.30),rgba(84,153,205,0) 72%),
             radial-gradient(38% 26% at 50% 0%,rgba(84,153,205,.16),rgba(84,153,205,0) 72%),
             linear-gradient(180deg,rgba(12,13,15,0) 70%,var(--ink))}
.lp-hero__kicker{display:flex;align-items:center;gap:18px;width:min(620px,100%);margin:0 auto}
.lp-hero__kicker .rule{height:1px;flex:1;background:linear-gradient(90deg,rgba(84,153,205,0),var(--accent))}
.lp-hero__kicker .rule:last-child{background:linear-gradient(270deg,rgba(84,153,205,0),var(--accent))}
.lp-hero__kicker .eyebrow{white-space:nowrap}
body.lp .lp-hero__title{max-width:15.5em;margin:clamp(18px,2vw,28px) auto 0;line-height:.98}
.vsl{width:min(1000px,100%);margin:clamp(36px,4vw,56px) auto 0}
.vsl__frame{border-radius:28px;box-shadow:0 60px 140px -60px rgba(84,153,205,.75),0 30px 60px -30px rgba(0,0,0,.9)}
.vsl__frame::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--rule);pointer-events:none}
.lp-hero__lead{max-width:40em;margin:clamp(30px,3.2vw,44px) auto 0;color:var(--paper);line-height:1.6;text-wrap:pretty}
.lp-hero__facts{margin-top:20px;gap:12px 0}
.lp-hero__facts li{padding:0 22px}
.lp-hero__facts li + li{border-left:1px solid var(--rule)}
.lp-count{width:min(720px,100%);margin:clamp(36px,4vw,52px) auto 0;padding:clamp(24px,2.8vw,34px) clamp(18px,3vw,40px) clamp(22px,2.4vw,30px);border-top:0;border-radius:28px;
  background:#14171C;box-shadow:inset 0 0 0 1px var(--rule),0 50px 90px -60px rgba(0,0,0,.95)}
.lp-count__label{margin:0 0 14px;font-weight:600;color:var(--paper)}
.lp-count__tiles{width:100%;max-width:none;margin:0 0 24px}
.lp-count__note{display:block;max-width:34em;margin:18px auto 0;text-align:center;color:var(--paper)}
/* icons sit inline with their (centred) sentence instead of drifting to the far edge */
.lp-hero__facts li{display:block;text-align:center}
.lp-hero__facts svg,.lp-count__note svg{display:inline-block;vertical-align:-4px;margin-right:8px}

/* the play button: a true circle with evenly spaced ripples (uniform scale only) */
.vsl__play{width:clamp(76px,8vw,108px);height:auto;aspect-ratio:1;margin:0;translate:-50% -50%;background:none;box-shadow:none;display:block;transition:none}
.vsl__play::before,.vsl__play::after{display:none}
.vsl:hover .vsl__play{transform:none}
.vsl__btn{position:absolute;inset:0;z-index:1;border-radius:50%;background:var(--accent);display:grid;place-items:center;
  box-shadow:0 18px 50px -12px rgba(84,153,205,.95),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .5s var(--ease-punch)}
.vsl:hover .vsl__btn{transform:scale(1.07)}
.vsl__btn svg{width:36%;height:36%;margin-left:7%;fill:var(--ink)}
.vsl__ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(127,216,245,.8);opacity:0;animation:vsl-ring 3.6s cubic-bezier(.2,.6,.35,1) infinite}
.vsl__ring:nth-child(2){animation-delay:1.2s}
.vsl__ring:nth-child(3){animation-delay:2.4s}
@keyframes vsl-ring{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.15);opacity:0}}

@media (max-width:760px){
  .lp-hero__kicker .rule{display:none}
  .lp-hero__kicker .eyebrow{white-space:normal;letter-spacing:.12em;text-align:center;text-wrap:balance}
  /* sticky bar: the countdown on one line, the button full width under it */
  .lp .dock{flex-direction:column;align-items:stretch;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .lp .dock__time{text-align:center;white-space:nowrap}
  .lp .dock__time b{display:inline;margin-left:6px}
  .lp .dock__btn{justify-content:center;width:100%;height:46px;border-radius:999px;font-weight:700}
  .lp .pass{--cut:118px}
  .lp .pass__stub{letter-spacing:.1em}
  .lp-hero__facts{flex-direction:column;align-items:center}
  .lp-hero__facts li{padding:0}
  .lp-hero__facts li + li{border-left:0}
  .lp-count{padding:22px 14px 20px;border-radius:22px}
  .lp-count__tiles{gap:8px}
  .lp-count__tiles > div{padding:14px 4px 10px;border-radius:16px}
  .vsl__frame{border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
  .vsl__ring{display:none}
  .acc__line path{stroke-dashoffset:0;transition:none}
  .sec-head::before{transform:none;transition:none}
}

/* =====================================================================
   SCROLL STORY: the page plays like a trailer as you scroll (all transform / opacity)
   ===================================================================== */

/* hero paragraph: a statement at secondary-title size, written by the scroll */
body.lp .lp-hero__lead{max-width:30em;font-size:var(--fs-sub);line-height:1.42;font-weight:500;text-wrap:balance}
.lp-hero__lead .sw{transition:opacity .45s var(--ease-out),filter .45s var(--ease-out)}
body.scrolly .lp-hero__lead .sw{opacity:.14}
body.scrolly .lp-hero__lead .sw.on{opacity:1}
.hl{font-weight:800;color:var(--paper);white-space:nowrap;padding:0 .08em;
  background:linear-gradient(rgba(84,153,205,.38),rgba(84,153,205,.38)) 0 92%/100% .34em no-repeat}
.hl--acc{color:var(--accent)}
body.scrolly .hl{background-size:0% .34em;transition:opacity .45s var(--ease-out),background-size .7s var(--ease-out) .15s}
body.scrolly .hl.on{background-size:100% .34em}
.hl__ic{display:inline-grid;place-items:center;width:1.3em;height:1.3em;margin-right:.3em;vertical-align:-.22em;border-radius:50%;background:var(--accent);color:var(--ink)}
.hl__ic svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.scrolly .hl__ic{scale:0;transition:scale .6s var(--ease-punch) .1s}
body.scrolly .hl.on .hl__ic{scale:1}

/* countdown card: lands with an impact, the seconds tile keeps pulsing */
.lp-count{position:relative;transform-origin:50% 60%;will-change:transform}
.lp-count::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 2px var(--accent);opacity:0;pointer-events:none}
.lp-count.impact{animation:slam-shake .5s var(--ease-out)}
.lp-count.impact::after{animation:slam-ring .9s var(--ease-out)}
.lp-count.impact .lp-count__tiles > div{animation:tile-pop .65s var(--ease-punch) both}
.lp-count.impact .lp-count__tiles > div:nth-child(2){animation-delay:.06s}
.lp-count.impact .lp-count__tiles > div:nth-child(3){animation-delay:.12s}
.lp-count.impact .lp-count__tiles > div:nth-child(4){animation-delay:.18s}
.lp-count.impact .btn{animation:tile-pop .7s var(--ease-punch) .26s both}
@keyframes slam-shake{0%{translate:0 0}15%{translate:-7px 4px}35%{translate:6px -3px}55%{translate:-4px 2px}75%{translate:2px -1px}100%{translate:0 0}}
@keyframes slam-ring{0%{opacity:1;scale:1}100%{opacity:0;scale:1.07 1.12}}
@keyframes tile-pop{0%{scale:1}35%{scale:1.1}100%{scale:1}}
.lp-count__tiles > div:last-child{position:relative}
.lp-count__tiles > div:last-child::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--accent);animation:sec-ping 1s var(--ease-out) infinite;pointer-events:none}
@keyframes sec-ping{0%{opacity:.9;scale:1}100%{opacity:0;scale:1.18}}

/* trust strip: the treatment names are links to their offer */
.trust .ticker__set a{padding:0 .9em;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em;text-decoration-color:rgba(12,13,15,.35);transition:text-decoration-color .3s}
.trust .ticker__set a:hover{text-decoration-color:var(--ink)}

/* procedure index: sticky under the strip while the offers scroll by */
.pnav{position:sticky;top:0;z-index:15;margin-bottom:clamp(8px,1.4vw,18px);background:rgba(12,13,15,.94);border-bottom:1px solid var(--rule)}
.pnav__track{display:flex;gap:10px;max-width:calc(var(--max) + var(--gutter) * 2);margin:0 auto;padding:12px var(--gutter);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.pnav__track::-webkit-scrollbar{display:none}
.pnav__a{flex:none;display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;background:#14171C;box-shadow:inset 0 0 0 1px var(--rule);color:var(--paper);font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background-color .35s var(--ease-out),color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.pnav__a img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.pnav__a em{font-style:normal;color:var(--accent)}
.pnav__a:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.pnav__a.is-on{background:var(--accent);color:var(--ink);box-shadow:none}
.pnav__a.is-on em{color:var(--ink)}

/* testimonials: the two posts side by side */
.ig__pair{display:flex;justify-content:center;gap:clamp(16px,2.4vw,32px);padding:0 var(--gutter)}
.ig__pair .igc{width:min(400px,44vw);height:640px}

/* Google reviews: rows can be grabbed and flung, and never stop drifting */
.gr__track{animation:none!important}
.gr__row{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gr__row.grab{cursor:grabbing}

/* 4 steps: the line fills with the scroll, each step lights up as it is reached */
#pasi .how__steps::after{animation:none;left:28px;right:28px;top:27px;width:auto;height:4px;border-radius:2px;background:var(--accent);box-shadow:0 0 18px rgba(84,153,205,.6);transform-origin:0 50%;transform:scaleX(var(--hp,1))}
#pasi .how__n{transition:background-color .4s var(--ease-out),color .4s var(--ease-out),scale .55s var(--ease-punch)}
body.scrolly #pasi .how__steps li .how__n{background:var(--ink);color:var(--paper)}
body.scrolly #pasi .how__steps li.lit .how__n{background:var(--accent);color:var(--ink);scale:1.12}
body.scrolly #pasi .how__steps li p{opacity:.2;transition:opacity .5s var(--ease-out)}
body.scrolly #pasi .how__steps li.lit p{opacity:1}

@media (max-width:960px){
  #pasi .how__steps::after{left:27px;right:auto;top:28px;bottom:28px;width:4px;height:auto;transform-origin:50% 0;transform:scaleY(var(--hp,1))}
}
@media (max-width:760px){
  .ig__pair{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;scrollbar-width:none}
  .ig__pair .igc{flex:none;width:82vw;height:600px;scroll-snap-align:center}
  .pnav__a{padding-right:12px}
  .pnav__a img{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){
  .lp-count__tiles > div:last-child::after{display:none}
}

/* =====================================================================
   ROUND 4
   ===================================================================== */
html,body{overscroll-behavior-y:none}               /* no rubber-band gap above the page */
body.lp .sec-title{margin-left:auto!important;margin-right:auto!important;text-align:center}
.sec-head--row{flex-direction:column;align-items:center;text-align:center}
.trust .ticker__set a{text-decoration:none;color:var(--ink);transition:color .3s}
.trust .ticker__set a:hover{color:var(--paper)}
.pnav{position:relative;top:auto;background:none;border-bottom:0}

/* placeholders for content the client still has to send: quiet, on-palette, still unmistakable */
body.lp .todo{display:inline;padding:.1em .6em;border:1px dashed rgba(84,153,205,.6);border-radius:6px;background:rgba(84,153,205,.1);color:#8EC1E6;
  font-weight:600;letter-spacing:.01em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
body.lp .light .todo{color:#2F6E9E;background:rgba(84,153,205,.12);border-color:rgba(47,110,158,.45)}

/* hero statement scene: the paragraph holds the screen on its own while the scroll writes it */
.lp-hero{overflow:clip}
.lp-hero__fx{bottom:auto;height:min(100%,130vh)}
.scene{position:relative;width:100%;height:260vh;margin-top:clamp(20px,3vw,40px)}
.scene__pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center}
body.lp .lp-hero__lead{max-width:17em;margin:0 auto;font-size:var(--fs-title);font-weight:600;font-stretch:78%;line-height:1.1;letter-spacing:-.005em;text-wrap:balance;will-change:transform}
body.scrolly .lp-hero__lead .sw{opacity:.1}
.hl{background-position:0 94%;background-size:100% .16em}
body.scrolly .hl{background-size:0% .16em}
body.scrolly .hl.on{background-size:100% .16em}
.hl__ic{width:1em;height:1em;margin-right:.18em;vertical-align:-.12em}

/* countdown card: lands, then a light sweeps across it */
.lp-count{overflow:hidden}
.lp-count::after{display:none}
.lp-count::before{content:"";position:absolute;inset:-20% auto -20% 0;width:38%;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.08) 35%,rgba(205,230,250,.42) 50%,rgba(255,255,255,.08) 65%,rgba(255,255,255,0));transform:translateX(-120%) skewX(-12deg)}
.lp-count.impact::before{animation:card-shine 1.25s cubic-bezier(.3,.1,.2,1) .05s}
@keyframes card-shine{0%{opacity:1;transform:translateX(-120%) skewX(-12deg)}100%{opacity:1;transform:translateX(330%) skewX(-12deg)}}
@media (max-width:760px){.scene{height:230vh}}

/* prices: the old price drops, bursts, the new one lands */
.bfx{position:relative;display:inline-grid;flex:none;width:max-content;justify-items:end}
.bfx > *{grid-area:1/1}
.bfx__old{position:relative;display:flex;white-space:nowrap;text-decoration:none;font-size:var(--fs-sub);font-weight:600;line-height:1.2;color:var(--paper);opacity:0;pointer-events:none}
.bfx__old i{font-style:normal;display:inline-block}
.bfx__old::after{content:"";position:absolute;left:0;right:0;top:52%;height:2px;background:var(--accent)}
body.scrolly .bfx b{display:inline-block;opacity:0;scale:.4;filter:blur(6px)}
body.scrolly .bfx.drop .bfx__old{animation:price-fall .55s cubic-bezier(.55,0,.9,.4) forwards}
@keyframes price-fall{0%{opacity:1;transform:translate(var(--fx),var(--fy))}100%{opacity:1;transform:translate(0,0)}}
body.scrolly .bfx.burst .bfx__old::after{opacity:0;transition:opacity .15s}
body.scrolly .bfx.burst .bfx__old i{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.6);opacity:0;transition:transform .75s cubic-bezier(.15,.8,.3,1),opacity .75s ease-out}
body.scrolly .bfx.burst b{opacity:1;scale:1;filter:none;transition:opacity .3s ease-out .05s,scale .7s var(--ease-punch) .05s,filter .4s ease-out .05s}
@media (prefers-reduced-motion:reduce){.bfx__old{display:none}}

/* ---------- chosen by: pinned, the scroll walks sideways through every clip ---------- */
.reels{padding-bottom:0}
.hpin{position:relative}
.hpin__stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hpin .sec-head{margin-bottom:clamp(20px,2.6vw,36px)}
.hpin__track{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;padding:0 max(var(--gutter),calc((100vw - var(--max)) / 2));will-change:transform}
.hpin__track .reel{width:calc(min(56svh,540px) * 9 / 16);transform-origin:50% 60%}
.hpin__bar{width:min(320px,60vw);height:3px;margin:clamp(20px,2.4vw,32px) auto 0;border-radius:3px;background:var(--rule);overflow:hidden}
.hpin__bar i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.hpin--static .hpin__stick{position:static;height:auto}
.hpin--static .hpin__view{overflow-x:auto}

/* ---------- testimonials: the clinic's feed on a phone, swiped by the scroll ---------- */
.ig{padding-bottom:0}
.vpin{position:relative;height:240vh;height:240svh}
.vpin__stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.vpin .sec-head{margin-bottom:clamp(16px,2vw,28px)}
.phone{--ph:min(680px,calc(100svh - 250px));position:relative;width:max(350px,calc(var(--ph) * .53));height:var(--ph);padding:10px 12px 12px;border-radius:48px;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#20252D,#0E1014);box-shadow:inset 0 0 0 1.5px rgba(241,239,234,.2),inset 0 0 0 7px #07080A,0 70px 130px -60px rgba(84,153,205,.75)}
.phone__top{position:relative;height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 16px;color:var(--paper);font-weight:700}
.phone__cam{position:absolute;left:50%;top:6px;width:88px;height:24px;margin-left:-44px;border-radius:14px;background:#000}
.phone__handle{padding-top:14px}
.phone__reels{width:22px;height:22px;margin-top:14px;fill:none;stroke:var(--paper);stroke-width:1.7;stroke-linejoin:round}
.phone__screen{position:relative;flex:1;margin-top:6px;border-radius:34px;overflow:hidden;background:#fff}
.phone__feed{height:100%;will-change:transform}
.phone__post{position:relative;height:100%}
.phone__post .igc{width:100%;height:100%;border-radius:0;box-shadow:none}
.phone__hit{position:absolute;inset:0;z-index:2}
.phone__dots{position:absolute;right:-26px;top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:8px}
.phone__dots i{width:6px;height:6px;border-radius:3px;background:rgba(241,239,234,.25);transition:height .4s var(--ease-out),background-color .4s}
.phone__dots i.on{height:22px;background:var(--accent)}

/* ---------- why now: one column, a statement, then three promises each on its own row ---------- */
.now__p{max-width:30em;margin:0 auto;text-align:center;font-size:var(--fs-sub);line-height:1.42;font-weight:500;color:var(--ink);text-wrap:balance}
.now__p + .now__p{margin-top:clamp(16px,2vw,24px)}
.now__p .now__save{color:#2F6E9E;font-weight:800}
.feats{list-style:none;max-width:900px;margin:clamp(44px,5.6vw,80px) auto 0;padding:0;display:grid;gap:clamp(14px,1.6vw,20px)}
.feat{--mx:50%;--my:50%}
.feat__in{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(18px,2.6vw,36px);
  padding:clamp(20px,2.6vw,32px) clamp(20px,3.2vw,44px);border-radius:32px;background:#fff;box-shadow:0 34px 70px -40px rgba(12,13,15,.5),inset 0 0 0 1px rgba(12,13,15,.06);transition:transform .6s var(--ease-out)}
.feat__in::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(320px circle at var(--mx) var(--my),rgba(84,153,205,.18),rgba(84,153,205,0) 70%)}
.feat:hover .feat__in::before{opacity:1}
.feat p{position:relative;margin:0;font-size:var(--fs-sub);line-height:1.34;font-weight:600;color:var(--ink);text-wrap:pretty}
.feat__ic{position:relative;width:clamp(64px,7vw,92px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--ink);box-shadow:0 16px 30px -14px rgba(12,13,15,.7)}
.feat__ic svg{width:58%;height:58%;overflow:visible;fill:none;stroke:var(--accent);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.feat__ic .cl-dot{fill:var(--accent);stroke:none}
.cl-h,.cl-m,.lk-shackle{transform-box:view-box;transform-origin:24px 24px}
.ck-path{stroke-dasharray:1}
body.scrolly .lk-shackle{transform:translateY(-6px);transition:transform .5s var(--ease-punch) .25s}
body.scrolly .feat.lit .lk-shackle{transform:none}
body.scrolly .ck-path{stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease-out) .2s}
body.scrolly .feat.lit .ck-path{stroke-dashoffset:0}
body.scrolly .feat.lit .cl-m{animation:hand-spin 1.4s var(--ease-out) .1s}
body.scrolly .feat.lit .cl-h{animation:hand-spin 1.4s var(--ease-out) .1s reverse}
body.scrolly .feat.lit .feat__ic{animation:ic-pop .7s var(--ease-punch)}
@keyframes hand-spin{from{rotate:-360deg}to{rotate:0deg}}
@keyframes ic-pop{0%{scale:.6}60%{scale:1.12}100%{scale:1}}
#acum .tiles{margin-top:clamp(48px,6vw,84px)}

/* ---------- team: each doctor rises into a spotlight, a ring draws around the monogram ---------- */
.doc{position:relative;gap:18px;padding:clamp(30px,3vw,44px) 16px clamp(24px,2.6vw,34px);border-radius:30px;background:linear-gradient(180deg,#171B21,#0F1216);overflow:visible}
.doc__beam{position:absolute;left:50%;top:-34%;width:130%;height:96%;translate:-50% 0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(127,216,245,.34),rgba(127,216,245,0) 85%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);opacity:0;transform-origin:50% 0;transform:scaleY(.2);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.doc.lit .doc__beam{opacity:1;transform:none}
.doc__medal{position:relative;z-index:1;width:clamp(96px,9.4vw,132px);aspect-ratio:1;display:grid;place-items:center;transition:filter .9s var(--ease-out)}
.doc__medal svg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.doc__track{fill:#0D1014;stroke:rgba(241,239,234,.12);stroke-width:2}
.doc__ring{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1}
body.scrolly .doc__ring{stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease-out) .15s}
body.scrolly .doc.lit .doc__ring{stroke-dashoffset:0}
.doc__medal b{position:relative;font-size:var(--fs-sub);font-weight:800;font-stretch:72%;color:var(--paper);letter-spacing:.02em}
.doc.lit .doc__medal{filter:drop-shadow(0 0 26px rgba(84,153,205,.5))}
.doc__name{position:relative;z-index:1}
body.scrolly .doc__name,body.scrolly .doc .todo{opacity:0;translate:0 12px;transition:opacity .7s var(--ease-out) .45s,translate .7s var(--ease-out) .45s}
body.scrolly .doc.lit .doc__name,body.scrolly .doc.lit .todo{opacity:1;translate:none}
.doc__medal--todo .doc__track{fill:none;stroke-dasharray:4 6}
.doc__medal--todo .doc__ring{display:none}
.doc--todo{background:linear-gradient(180deg,#14171C,#0F1216)}

/* ---------- equipment: one stage per machine ---------- */
.devices{display:grid!important;gap:clamp(56px,8vw,120px);margin-top:clamp(32px,4vw,56px)}
.devices > *{flex:none}
.dev{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,84px)}
.dev--flip .dev__stage{order:2}
.dev__stage{position:relative;isolation:isolate}
.dev__spot{position:absolute;inset:-22%;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(84,153,205,.34),rgba(84,153,205,0) 70%);opacity:0;transition:opacity 1.1s var(--ease-out)}
.dev.lit .dev__spot{opacity:1}
.dev .dev__media{aspect-ratio:4/3;border-radius:30px;box-shadow:inset 0 0 0 1px var(--rule),0 50px 100px -50px rgba(0,0,0,.95)}
.dev__name{margin:0;font-size:var(--fs-title);font-weight:700;font-stretch:68%;line-height:.95}
.dev__copy .dev__txt{margin-top:16px;font-size:var(--fs-sub);line-height:1.36;text-align:left;text-wrap:pretty}

/* ---------- diplomas: a trophy wall, frames land on lit shelves ---------- */
.dipl{padding-bottom:clamp(40px,5vw,72px)}
.altar{display:grid;gap:clamp(70px,8vw,110px);margin-top:clamp(70px,8vw,110px)}
.shelf{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(20px,4vw,64px);padding:0 4%}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:-16px;height:14px;border-radius:3px;background:linear-gradient(180deg,#2C323B,#14171C);box-shadow:inset 0 1px 0 rgba(241,239,234,.2),0 34px 40px -20px rgba(0,0,0,.95)}
.trophy{position:relative;width:clamp(96px,17vw,220px)}
.trophy__spot{position:absolute;left:50%;bottom:20%;width:190%;height:190%;translate:-50% 0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(127,216,245,.2),rgba(84,153,205,.06) 55%,rgba(84,153,205,0) 85%);clip-path:polygon(46% 0,54% 0,92% 100%,8% 100%);opacity:0;transition:opacity .9s var(--ease-out) .1s}
.trophy.lit .trophy__spot{opacity:1}
.trophy__frame{position:relative;z-index:1;aspect-ratio:3/4;padding:clamp(6px,.8vw,11px);border-radius:6px;background:linear-gradient(145deg,#F4F2ED,#C9C4BA);box-shadow:0 30px 50px -22px rgba(0,0,0,.95)}
.trophy.lit .trophy__frame{animation:frame-land .55s var(--ease-punch)}
@keyframes frame-land{0%{scale:1.04 .92}55%{scale:.98 1.03}100%{scale:1}}
.trophy__mat{height:100%;display:grid;place-items:center;align-content:center;gap:12px;padding:8px;text-align:center;border-radius:3px;background:#1A1D23;box-shadow:inset 0 10px 30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05)}
.trophy__mat svg{width:clamp(22px,2.4vw,34px);fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round}

/* ---------- 4 steps: a vertical line the scroll fills, sparks at its head ---------- */
.tl{position:relative;max-width:1040px;margin:clamp(24px,3vw,48px) auto 0}
.tl__fx{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.tl__rail{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;border-radius:2px;background:rgba(12,13,15,.1)}
.tl__fill{position:absolute;inset:0;border-radius:2px;background:linear-gradient(180deg,#7FD8F5,var(--accent) 60%,#2F6E9E);transform-origin:50% 0;transform:scaleY(0)}
.tl__head{position:absolute;left:50%;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px var(--accent),0 0 34px 10px rgba(84,153,205,.65)}
.tl__list{position:relative;z-index:2;list-style:none;margin:0;padding:clamp(24px,3vw,48px) 0;display:grid;gap:clamp(48px,7vw,110px)}
.tl__step{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:center}
.tl__n{grid-column:2;grid-row:1;justify-self:center;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);font-size:var(--fs-sub);font-weight:800;
  box-shadow:0 0 0 2px rgba(12,13,15,.16);transition:background-color .4s var(--ease-out),color .4s var(--ease-out),scale .6s var(--ease-punch),box-shadow .5s}
.tl__card{grid-column:1;grid-row:1;justify-self:end;max-width:410px;padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,30px);border-radius:26px;background:#fff;box-shadow:0 34px 70px -44px rgba(12,13,15,.55)}
.tl__step:nth-child(even) .tl__card{grid-column:3;justify-self:start}
.tl__card p{margin:0;font-size:var(--fs-sub);line-height:1.34;font-weight:500;color:var(--ink);text-wrap:pretty}
body.scrolly .tl__card{opacity:.18;translate:-36px 0;transition:opacity .7s var(--ease-out),translate .8s var(--ease-out)}
body.scrolly .tl__step:nth-child(even) .tl__card{translate:36px 0}
body.scrolly .tl__step.lit .tl__card{opacity:1;translate:none}
body.scrolly .tl__step.lit .tl__n{background:var(--accent);scale:1.18;box-shadow:0 0 0 8px rgba(84,153,205,.22),0 0 40px rgba(84,153,205,.55)}

@media (max-width:960px){
  .dev{grid-template-columns:minmax(0,1fr);gap:22px}
  .dev--flip .dev__stage{order:0}
}
@media (max-width:760px){
  .phone__dots{right:-16px}
  .feat__in{grid-template-columns:auto minmax(0,1fr);border-radius:24px}
  .shelf{gap:14px;padding:0}
  .tl__rail{left:31px}
  .tl__step{grid-template-columns:62px minmax(0,1fr);gap:14px}
  .tl__n{grid-column:1;width:56px;height:56px}
  .tl__card,.tl__step:nth-child(even) .tl__card{grid-column:2;justify-self:stretch;max-width:none}
  body.scrolly .tl__card,body.scrolly .tl__step:nth-child(even) .tl__card{translate:30px 0}
}

/* phone refinements for the scroll scenes */
.scene__pin{padding:0 var(--gutter);box-sizing:border-box}
body.lp .lp-hero__lead{max-width:min(17em,100%)}
@media (max-width:760px){
  .hl{white-space:normal}
  .doc__beam{top:-18%;height:70%;width:110%;background:linear-gradient(180deg,rgba(127,216,245,.22),rgba(127,216,245,0) 80%)}
}

/* =====================================================================
   ROUND 5
   ===================================================================== */

/* ---------- procedure bar: full width, after the offers, drifting and swipeable ---------- */
.pbar{padding:clamp(28px,3.4vw,48px) 0 clamp(8px,1vw,16px);margin:0}
.pbar__row{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pbar__row.grab{cursor:grabbing}
.pbar__track{display:flex;gap:12px;width:max-content;padding:6px 0;will-change:transform}
.pbar .pnav__a{gap:12px;padding:6px 20px 6px 6px;-webkit-user-drag:none}
.pbar .pnav__a img{width:48px;height:48px;-webkit-user-drag:none;pointer-events:none}
.pbar .pnav__a:hover{background:var(--accent);color:var(--ink);box-shadow:none}
.pbar .pnav__a:hover em{color:var(--ink)}
.pbar__row--static{overflow-x:auto}

/* ---------- why now: a pinned stage, once in a lifetime ---------- */
.legend{padding:0}
.legend__pin{position:relative;height:360vh;height:360svh}
.legend__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.2vw,30px);padding:0 var(--gutter);
  background:radial-gradient(70% 55% at 50% 40%,rgba(84,153,205,.2),rgba(84,153,205,0) 72%)}
.legend__rays{position:absolute;left:50%;top:40%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;pointer-events:none;opacity:.35;transition:opacity 1.2s var(--ease-out);
  background:repeating-conic-gradient(from 0deg,rgba(127,216,245,.09) 0deg 5deg,rgba(127,216,245,0) 5deg 15deg);
  -webkit-mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.5) 30%,transparent 62%);mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.5) 30%,transparent 62%);
  animation:rays-turn 80s linear infinite}
.legend__stage.lit .legend__rays{opacity:1}
@keyframes rays-turn{to{rotate:360deg}}
.legend__top{position:relative;width:100%;height:clamp(110px,15vw,210px);display:grid;place-items:center}
.legend__years{position:absolute;left:0;top:50%;display:flex;gap:clamp(28px,4vw,64px);white-space:nowrap;transform:translate3d(0,-50%,0);will-change:transform}
.legend__years span{position:relative;font-size:var(--fs-sub);font-weight:700;color:rgba(241,239,234,.4);transition:color .35s var(--ease-out),scale .45s var(--ease-punch)}
.legend__years span::after{content:"";position:absolute;left:-8%;right:-8%;top:54%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease-out)}
.legend__years span.past::after{transform:none}
.legend__years span.cur{color:var(--paper);scale:1.45}
.legend__years .legend__now{color:var(--accent)}
.legend__years .legend__now::after{display:none}
.legend__big{position:relative;margin:0;font-size:clamp(110px,15vw,210px);font-weight:800;font-stretch:72%;line-height:.86;letter-spacing:-.02em;text-align:center;will-change:transform}
body.scrolly .legend__big{opacity:0}
.legend__big span{display:inline-block;padding:0 .04em;
  background:linear-gradient(112deg,#FFFFFF 0%,#EEF2F6 16%,#B9C6D3 31%,#FFFFFF 46%,#D3DCE5 60%,#F7F9FB 74%,#A9B8C7 90%,#E9EEF3 100%);background-size:260% 100%;background-position:90% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.7)) drop-shadow(0 3px 0 rgba(26,66,104,.6)) drop-shadow(0 24px 40px rgba(84,153,205,.45))}
.legend__big.landed span{animation:metal-sweep 1.4s cubic-bezier(.3,.1,.2,1) both,big-land .6s var(--ease-punch)}
@keyframes metal-sweep{from{background-position:90% 0}to{background-position:10% 0}}
@keyframes big-land{0%{scale:1.08}45%{scale:.96}100%{scale:1}}
.legend__head{margin:0}
.legend__head .w{transform:translateY(108%);transition:transform .9s var(--ease-out) calc(var(--wi,0) * 55ms)}
.legend__head.in .w{transform:none}
.legend__head.in .acc__line path{stroke-dashoffset:0}
.legend__head::before{display:none}
.legend__copy{max-width:34em;text-align:center}
.legend .now__p{color:var(--paper);max-width:none}
.legend .now__p .now__save{color:var(--accent)}
body.scrolly .legend__copy .now__p{opacity:0}
.legend--static .legend__pin,.legend--static.legend__pin{height:auto}
.legend--static .legend__stage{position:relative;height:auto;padding:var(--pad) var(--gutter)}
.legend--static .legend__years{display:none}
.now__after{padding:clamp(20px,3vw,40px) var(--gutter) var(--pad)}
.legend .feat__in{background:#14171C;box-shadow:inset 0 0 0 1px var(--rule),0 34px 70px -40px rgba(0,0,0,.95)}
.legend .feat p{color:var(--paper)}
.legend .feat__ic{background:#0B0D10;box-shadow:inset 0 0 0 1.5px rgba(84,153,205,.45),0 0 30px -6px rgba(84,153,205,.5)}
.legend .feats{margin-top:0}

/* ---------- team: one doctor at a time, the whole screen each ---------- */
.cast{position:relative}
.cast__stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;padding-top:clamp(40px,7vh,90px)}
.cast__head{margin-bottom:0}
.cast__rays{position:absolute;left:50%;top:58%;width:min(900px,120vw);aspect-ratio:1;translate:-50% -50%;pointer-events:none;background:radial-gradient(closest-side,rgba(84,153,205,.22),rgba(84,153,205,0) 70%)}
.cast .docs{position:relative;flex:1;width:100%;display:block!important;margin:0}
.cast .doc{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(680px,92vw);padding:0;background:none;box-shadow:none;gap:clamp(16px,2.4vw,28px);will-change:transform,opacity}
.cast .doc:hover{transform:none;box-shadow:none}
body.scrolly .cast .doc{opacity:0}
.cast .doc__beam{top:-62%;height:120%;width:150%}
.cast .doc__medal{width:clamp(170px,22vw,270px)}
.cast .doc__medal b{font-size:var(--fs-title);font-stretch:68%}
.cast .doc__name{font-size:var(--fs-title);font-weight:700;font-stretch:68%;line-height:.95;text-align:center}
.cast .doc--todo .todo{font-size:var(--fs-sub)}
.cast__dots{position:absolute;right:clamp(8px,2vw,28px);top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:8px}
.cast__dots i{width:6px;height:6px;border-radius:3px;background:rgba(241,239,234,.25);transition:height .4s var(--ease-out),background-color .4s}
.cast__dots i.on{height:22px;background:var(--accent)}
.cast--static{height:auto!important}
.cast--static .cast__stage{position:relative;height:auto}
.cast--static .docs{display:flex!important;flex-wrap:wrap;justify-content:center;gap:24px}
.cast--static .doc{position:relative;left:auto;top:auto;translate:none;width:auto;opacity:1}

@media (max-width:760px){
  .legend__years{gap:26px}
  .legend .now__p{font-size:var(--fs-body)}
  .pbar .pnav__a img{width:40px;height:40px}
}

/* =====================================================================
   ROUND 6
   ===================================================================== */

/* masthead: a little larger, tight to the top */
.mast__row{height:80px}
.mast__logo img{width:clamp(150px,13vw,184px)}

/* hero opening: logo -> particles -> huge -40% */
.lp .intro-logo{animation-delay:.2s}
.lp-hero{padding-top:clamp(8px,1.6vw,24px)}
.lp-hero__field{height:100vh;height:100svh;bottom:auto;z-index:0}
.lp-hero__mega{width:100%;height:clamp(140px,min(22vw,26vh),340px);margin:0 0 clamp(6px,1.2vh,16px)}
body.lp .lp-hero__title{margin-top:clamp(12px,1.6vw,20px)}

/* hero paragraph: lighter, Apple-like, emoji instead of drawn icons, tighter to what follows */
body.lp .lp-hero__lead{font-weight:500;font-stretch:88%;letter-spacing:-.012em;line-height:1.12}
.hl{background:none!important;font-weight:700;padding:0}
.hl--acc{color:var(--accent)}
.hl__em{display:inline-block;font-style:normal;font-size:.86em;margin-right:.12em;vertical-align:.02em;line-height:1}
body.scrolly .hl__em{scale:0;transition:scale .6s var(--ease-punch) .08s}
body.scrolly .hl.on .hl__em{scale:1}
.scene{height:205vh;height:205svh;margin-top:0}
.lp-hero__facts{margin-top:0}
.lp-count{margin-top:clamp(22px,2.6vw,34px)}
@media (max-width:760px){.scene{height:190vh;height:190svh}}

/* titles: no hairline above; the pen stroke sits under the descenders, never through them */
.sec-head::before{display:none!important}
.acc__line{bottom:-.17em}

/* why now: one 40%, it flies into the headline */
.legend__big{position:absolute;left:50%;top:50%;z-index:3;margin:0;translate:-50% -50%;font-size:clamp(150px,24vw,340px);font-weight:700;font-stretch:68%;line-height:.96;letter-spacing:-.01em;white-space:nowrap;pointer-events:none}
.legend__big span{padding:0}
.legend__head h2 > .wm:first-child .w{transform:none!important;opacity:0;transition:opacity .25s}
.legend__head.got h2 > .wm:first-child .w{opacity:1}

/* testimonials: a phone built at true size, scaled to fit */
.phone-box{position:relative;width:calc(400px * var(--ps,.8));height:calc(860px * var(--ps,.8))}
.phone{position:absolute;left:0;top:0;width:400px;height:860px;transform:scale(var(--ps,.8));transform-origin:0 0;padding:12px 14px 14px;border-radius:58px}
.phone__status{position:relative;height:36px}
.phone__cam{top:10px;width:110px;height:30px;margin-left:-55px;border-radius:18px}
.phone__app{display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 18px 0 20px;color:var(--paper);font-weight:700;font-size:17px}
.phone__handle{padding-top:0}
.phone__reels{margin-top:0;width:24px;height:24px}
.phone__screen{margin-top:0;border-radius:42px}
.phone-box .phone__dots{right:-28px}

/* 4 steps: when a step lights up its card gives a happy shake */
body.scrolly .tl__step.lit .tl__card{animation:card-shake .75s var(--ease-out) .05s}
@keyframes card-shake{0%{rotate:0deg;scale:1}18%{rotate:-2.6deg;scale:1.05}36%{rotate:2.2deg}54%{rotate:-1.4deg}72%{rotate:.7deg}100%{rotate:0deg;scale:1}}

/* team: a light section, portrait cards that land one by one */
.team{position:relative;isolation:isolate}
.team__sheet{position:absolute;inset:0;z-index:-1;background:var(--paper)}
.team .docs{--gap:clamp(12px,1.6vw,20px)}
.team .doc{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:10px 10px 20px;border-radius:26px;overflow:hidden;text-align:center;
  background:#fff;box-shadow:0 34px 70px -40px rgba(12,13,15,.5),inset 0 0 0 1px rgba(12,13,15,.06)}
.team .doc:hover{transform:none}
.doc__photo{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(80% 60% at 50% 30%,rgba(84,153,205,.45),rgba(84,153,205,0) 70%),linear-gradient(170deg,#1B3550,#0C0D0F 85%)}
.doc__photo::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.8),rgba(255,255,255,0));transform:translateX(-160%) skewX(-12deg)}
.doc.lit .doc__photo::after{animation:card-shine 1.15s cubic-bezier(.3,.1,.2,1) .1s}
body.lp .team .doc__mono{width:auto;aspect-ratio:auto;border-radius:0;background:none;box-shadow:none;font-size:var(--fs-title);font-weight:800;font-stretch:68%;color:var(--paper);line-height:1;text-shadow:0 10px 40px rgba(84,153,205,.6)}
.doc__todo{position:absolute;left:10px;bottom:10px}
.team .doc__name{font-size:var(--fs-sub);font-weight:700;font-stretch:72%;line-height:1.08;color:var(--ink);padding:0 6px}
.team .doc--todo{justify-content:flex-start}
body.lp .team .doc--todo .doc__mono{color:rgba(241,239,234,.45)}
.team .doc--todo .todo{align-self:center}
.team .sub-title{color:var(--ink)}

/* Google: the stars sit centred under the headline */
.gr__stars{justify-content:center;width:max-content;margin:clamp(20px,2.4vw,32px) auto 0}
.doc__photo .todo{color:#8EC1E6!important;background:rgba(12,13,15,.55)!important;border-color:rgba(84,153,205,.6)!important}

/* =====================================================================
   ROUND 7
   ===================================================================== */

/* more air between the masthead and the particle -40% */
.lp-hero{padding-top:clamp(28px,4.2vw,64px)}

/* hero paragraph: light words, bold phrases; a soft wave of rising, sharpening words runs through it with the scroll */
body.lp .lp-hero__lead{font-weight:300;font-stretch:90%;letter-spacing:-.018em;line-height:1.13}
.hl{font-weight:750}
.lp-hero__lead .sw{display:inline-block;transition:none!important;will-change:transform,opacity}
body.scrolly .lp-hero__lead .sw{opacity:.1}

/* the paragraph holds the centre of the screen, and the facts follow right under it when it lets go */
.scene{height:calc(var(--ph,40vh) + 100vh);height:calc(var(--ph,40svh) + 100svh);margin-top:clamp(40px,6vw,96px)}
.scene__pin{top:calc(50vh - var(--ph,40vh) / 2);top:calc(50svh - var(--ph,40svh) / 2);height:auto;display:block}
body:not(.scrolly) .scene{height:auto}
body:not(.scrolly) .scene__pin{position:static}
.lp-hero__facts{margin-top:clamp(28px,3vw,44px)}
@media (max-width:760px){.scene{height:calc(var(--ph,40svh) + 90svh)}}

/* hidden title letters never answer the cursor (they used to peek out of their masks) */
.rv:not(.in) .fx-title .ch,.fx-title.rv:not(.in) .ch,.legend__head:not(.in) .ch,.legend__head:not(.got) h2 > .wm:first-child .ch{--k:0!important}

/* Google stars: room to breathe above the review rows */
.gr__stars{margin-bottom:clamp(36px,4vw,60px)}

/* =====================================================================
   ROUND 8
   ===================================================================== */

/* titles: room for Romanian diacritics (ț, ș, Î, Ă) between lines */
body.lp .sec-title,body.lp .finale__title{line-height:1.06}
body.lp .lp-hero__title{line-height:1.04}

/* offer chapters: the treatment is the headline, its promise sits under it in blue */
body.lp .chap__title{margin:0 0 22px;line-height:1.2;font-stretch:100%;text-wrap:balance}
.chap__name{display:block;font-size:var(--fs-title);font-weight:700;font-stretch:68%;line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.chap__tag{display:block;margin-top:.45em;color:var(--accent);font-size:var(--fs-sub);font-weight:500;font-stretch:100%;line-height:1.2;letter-spacing:-.005em}
.chap--group .chap__name{color:var(--accent)}

/* service media: a polished metal border that turns with the scroll and blazes while the chapter is on stage */
.chap__fx{position:relative;will-change:transform}
.blaze{position:relative;border-radius:30px;padding:4px;overflow:hidden;isolation:isolate;background:#8ea7ba}
.blaze > .chap__frame{position:relative;z-index:1;border-radius:26px;box-shadow:0 0 0 1px rgba(10,16,22,.6)}
.blaze__spin{position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;transform:translate(-50%,-50%);will-change:transform;pointer-events:none}
.blaze__spin i{position:absolute;inset:0;border-radius:50%;animation:blaze-spin 9s linear infinite;
  background:conic-gradient(from 0deg,#5f7a90 0deg,#a9bfd0 22deg,#eef4f8 40deg,#ffffff 47deg,#bfe6ff 51deg,#5499cd 60deg,#2c4459 78deg,#7f9bb1 104deg,#d5e3ee 132deg,#97b1c5 158deg,#3a536a 178deg,#6f8ca4 196deg,#c9dae7 218deg,#ffffff 226deg,#9fd8ff 231deg,#4f8fc4 242deg,#2a4053 262deg,#8aa6bb 292deg,#e3edf4 318deg,#9db6c9 340deg,#5f7a90 360deg)}
@keyframes blaze-spin{to{transform:rotate(360deg)}}
.blaze__glow{position:absolute;inset:-2px;border-radius:30px;pointer-events:none;opacity:.3;
  box-shadow:0 0 22px 2px rgba(159,212,245,.55),0 0 70px 8px rgba(84,153,205,.4),0 40px 110px -30px rgba(84,153,205,.6)}
@media (prefers-reduced-motion:reduce){.blaze__spin i{animation:none}.blaze__glow{opacity:.6}}

/* the Black Friday price breathes once it has landed */
.prow__bf b{position:relative;display:inline-block;isolation:isolate;transform-origin:100% 60%}
.prow__bf b::before{content:"";position:absolute;inset:-45% -18%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(84,153,205,.42),rgba(84,153,205,0));opacity:0;pointer-events:none}
body:not(.scrolly) .prow__bf b,body.scrolly .bfx.burst b{animation:price-beat 1.8s var(--ease-io) 1.1s infinite}
body:not(.scrolly) .prow__bf b::before,body.scrolly .bfx.burst b::before{animation:price-glow 1.8s var(--ease-io) 1.1s infinite}
@keyframes price-beat{0%,100%{transform:none}45%{transform:scale(1.075)}}
@keyframes price-glow{0%,100%{opacity:0}45%{opacity:1}}
@media (max-width:760px){.prow__bf b{transform-origin:100% 60%}}
@media (prefers-reduced-motion:reduce){.prow__bf b,.prow__bf b::before{animation:none!important}}

/* treatment bar: tight under the offers, then it rides along at the top for the rest of the page */
:root{--pbar:66px}
.offers{padding-bottom:clamp(14px,1.6vw,24px)}
.pbar{position:sticky;top:0;z-index:40;padding:8px 0;background:rgba(11,12,14,.96);border-bottom:1px solid var(--rule);box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
.pbar__track{padding:0}
.pbar .pnav__a{padding:4px 18px 4px 4px}
.pbar .pnav__a img{width:42px;height:42px}
/* the pinned scenes after it hold the screen below the bar, not under it */
.hpin__stick,.vpin__stick,.legend__stage,.voices__pin{top:var(--pbar);height:calc(100vh - var(--pbar));height:calc(100svh - var(--pbar))}
@media (max-width:760px){
  :root{--pbar:56px}
  .pbar{padding:6px 0}
  .pbar .pnav__a{padding:3px 14px 3px 3px}
  .pbar .pnav__a img{width:36px;height:36px}
}

/* why now: a shorter hold, the scene lets go soon after the copy has landed */
.legend__pin{height:230vh;height:230svh}
@media (max-width:760px){.legend__pin{height:210vh;height:210svh}}
/* the reels start right under the treatment bar instead of floating mid-screen */
.reels .hpin__stick{justify-content:flex-start;padding-top:clamp(24px,4vh,48px);box-sizing:border-box}
.offers .chap:last-child{padding-bottom:clamp(24px,3vw,44px)}
.reels{padding-top:0}
.reels .hpin__stick{padding-top:clamp(32px,5vh,56px)}
/* a lead made of two statements: each one gets its own row */
.lead__ln{display:block;text-wrap:balance}

/* =====================================================================
   ROUND 9
   ===================================================================== */

/* why now: the rays fade into the page instead of stopping on a hard edge; what follows comes up closer */
.legend__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(12,13,15,0),rgba(12,13,15,.55) 45%,var(--ink))}
.legend__stage > :not(.legend__rays){position:relative;z-index:2}
.legend__stage > .legend__big{position:absolute;z-index:3}
.now__after{position:relative;z-index:2;margin-top:-12vh;padding-top:0;padding-bottom:calc(var(--pad) * .45)}
.story{padding-top:calc(var(--pad) * .55)}

/* equipment: each machine's name sits on a glossy glass plate (Apple style), the dark lettering stays crisp on the paper */
.dev__name{position:relative;isolation:isolate;font-weight:700;font-stretch:68%;line-height:1.02}
.dev__name::before{content:"";position:absolute;left:-6%;top:-18%;width:min(78%,520px);height:140%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(84,153,205,.5),rgba(127,216,245,.18) 55%,rgba(84,153,205,0))}
.dev__glass{position:relative;display:inline-block;padding:.12em .4em .17em;border-radius:.34em;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.5) 55%,rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,inset 0 -12px 28px rgba(84,153,205,.12),0 30px 60px -30px rgba(12,13,15,.4),0 2px 8px rgba(12,13,15,.06)}
@media (hover:hover) and (pointer:fine){.dev__glass{-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7)}}
/* the gloss: a soft light lying across the top half of the glass, and a slow sheen passing over it */
.dev__glass::before{content:"";position:absolute;left:0;right:0;top:0;height:52%;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0))}
.dev__glass::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0))}
.dev__word{position:relative;z-index:1;display:inline-block;font-weight:700;font-stretch:68%;font-variation-settings:"wdth" 68;
  background:linear-gradient(180deg,#4a5d71 0%,#1a2530 46%,#0C0D0F 72%,#22303d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
body.scrolly .dev__glass{opacity:0}
body.scrolly .dev.lit .dev__glass{animation:glass-drop 1s var(--ease-punch) both}
body.scrolly .dev.lit .dev__glass::after{animation:glass-sheen 1.3s cubic-bezier(.3,.1,.2,1) .55s both,glass-sheen 1.3s cubic-bezier(.3,.1,.2,1) 6s infinite}
body:not(.scrolly) .dev__glass::after{animation:glass-sheen 1.3s cubic-bezier(.3,.1,.2,1) 1s infinite}
@keyframes glass-drop{
  0%{opacity:0;transform:translate3d(0,.3em,0) scale(1.18);filter:blur(16px)}
  55%{opacity:1;transform:scale(.98);filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes glass-sheen{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}

/* pinned testimonials: the title keeps clear of the treatment bar */
.vpin__stick{box-sizing:border-box;padding-top:clamp(28px,4.5vh,56px);justify-content:flex-start;gap:clamp(14px,2vh,24px)}

/* opening line, Apple style: one sentence alone on black, written in word by word, then it melts away for the logo */
.intro-line{position:fixed;inset:0;z-index:61;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;column-gap:.26em;margin:0;padding:0 var(--gutter);
  text-align:center;font-size:var(--fs-title);font-weight:600;font-stretch:100%;letter-spacing:-.025em;line-height:1.05;color:var(--paper);pointer-events:none}
.intro-line span{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(.28em);animation:line-word 1s var(--ease-out) calc(.3s + var(--i) * .15s) forwards}
.intro-line .intro-line__acc{color:var(--accent)}
.intro-line.out{animation:line-out .7s var(--ease-io) forwards}
@keyframes line-word{to{opacity:1;filter:blur(0);transform:none}}
@keyframes line-out{to{opacity:0;filter:blur(12px);transform:scale(.94)}}
.lp .intro-logo{animation-delay:2.75s}
.intro-line{display:none}
.js .intro-line{display:flex}
body.intro-done .intro-line{display:none}
@media (prefers-reduced-motion:reduce){.js .intro-line{display:none}}
/* during the opening only the line, the logo and the particles are on screen */
.intro-lock #leadScene,.intro-lock .lp-hero__facts,.intro-lock #heroCount{visibility:hidden}

/* hero: the film and the paragraph share the pinned screen, so the play button stays in view while the words are written */
.scene{margin-top:clamp(28px,3.4vw,48px)}
.scene__pin .vsl{margin:0 auto clamp(18px,2.6vh,30px);transform-origin:50% 0;will-change:transform}
.intro-lock #leadScene{visibility:visible}
.intro-lock #heroLead{visibility:hidden}

/* hero: the glow fades in from the top instead of starting on a hard line under the masthead */
.lp-hero__aura{-webkit-mask:linear-gradient(180deg,transparent 0,#000 260px);mask:linear-gradient(180deg,transparent 0,#000 260px)}

/* machine names: radiant clouds of light drift behind the frosted glass */
.dev__name::before,.dev__name::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;will-change:transform}
.dev__name::before{left:-8%;top:-40%;width:min(62%,440px);height:180%;
  background:radial-gradient(closest-side,rgba(84,153,205,.75),rgba(84,153,205,.28) 55%,rgba(84,153,205,0));animation:cloud-a 9s ease-in-out infinite alternate}
.dev__name::after{left:min(34%,240px);top:-30%;width:min(54%,380px);height:160%;
  background:radial-gradient(closest-side,rgba(127,216,245,.7),rgba(186,226,255,.3) 55%,rgba(127,216,245,0));animation:cloud-b 11s ease-in-out infinite alternate}
.dev--flip .dev__name::before,.dev--flip .dev__name::after{animation-direction:alternate-reverse}
@keyframes cloud-a{from{transform:translate3d(-6%,-4%,0) scale(1)}to{transform:translate3d(14%,8%,0) scale(1.15)}}
@keyframes cloud-b{from{transform:translate3d(8%,6%,0) scale(1.1)}to{transform:translate3d(-12%,-6%,0) scale(.92)}}
.dev__glass{background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.22) 60%,rgba(255,255,255,.34));
  border-color:rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.25),inset 0 -14px 30px rgba(84,153,205,.16),0 30px 60px -30px rgba(12,13,15,.35),0 0 60px -10px rgba(127,216,245,.35)}
@media (hover:hover) and (pointer:fine){.dev__glass{-webkit-backdrop-filter:blur(26px) saturate(1.9);backdrop-filter:blur(26px) saturate(1.9)}}
@media (hover:none),(pointer:coarse){.dev__glass{background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.62),rgba(232,243,252,.5) 60%,rgba(255,255,255,.55))}}
@media (prefers-reduced-motion:reduce){.dev__name::before,.dev__name::after{animation:none}}

/* =====================================================================
   ROUND 11 (phone polish)
   ===================================================================== */

/* machine names rise out of the paper: faded, blurred and low, they surface and come into focus */
@keyframes glass-drop{
  0%{opacity:0;transform:translate3d(0,.55em,0) scale(.97);filter:blur(18px)}
  45%{opacity:.75;filter:blur(6px)}
  100%{opacity:1;transform:none;filter:blur(0)}}
body.scrolly .dev.lit .dev__glass{animation:glass-drop 1.5s cubic-bezier(.16,1,.3,1) both}
body.scrolly .dev__name::before,body.scrolly .dev__name::after{opacity:0;transition:opacity 1.6s ease-out .2s}
body.scrolly .dev.lit .dev__name::before,body.scrolly .dev.lit .dev__name::after{opacity:1}

/* clinic photos: the picture inside settles from a close-up as the frame surfaces */
.story__pic img{transform-origin:50% 50%;will-change:transform}
.story__todo{white-space:nowrap}

@media (max-width:760px){
  /* every title sits on the centre line */
  .chap__title,.dev__copy,.story .sec-head,.story__year{text-align:center}
  .chap__tag{margin-inline:auto}
  .story .sec-title{margin-inline:auto!important}
  /* 2015 photos: the reception across the top, the two rooms below, the right one set a little lower */
  .story__pics{grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin-top:8px}
  .story__pic{border-radius:20px}
  .story__pic--a{aspect-ratio:4/3}
  .story__pic--b,.story__pic--c{aspect-ratio:4/5}
  .story__pic--c{margin-top:36px}
  .story__todo{grid-column:1 / -1;justify-self:center;margin-top:4px}
  /* diplomas: the placeholder labels fit inside their frames */
  .shelf{gap:12px}
  .trophy{width:calc((100% - 24px) / 3);max-width:120px}
  .trophy__mat{padding:4px;gap:8px}
  body.lp .trophy .todo{font-size:12px;padding:2px 5px;letter-spacing:0;max-width:100%;white-space:nowrap}
  /* results: each caption belongs to the picture right above it, with clear air before the next one */
  .ba__grid{gap:44px}
  .bas figcaption{margin-top:10px}
  /* timeline: the travelling light rides on the line */
  .tl__head{left:50%}
}
@media (max-width:760px){.dev__copy .dev__txt{text-align:center;text-wrap:balance}}

/* =====================================================================
   ROUND 12 (thank-you page, rebuilt on the landing's language)
   ===================================================================== */

/* opening: the logo comes straight in (no line before it here) and bursts into "Mulțumim!" */
.ty .intro-logo{animation-delay:.2s}
.ty-kicker .ty-badge__tick{flex:none;width:30px;height:30px;box-shadow:0 0 0 6px rgba(84,153,205,.18)}
.ty-kicker .ty-badge__tick svg{width:17px;height:17px}
.ty-hero .lp-hero__title{max-width:13em}

/* the message: copy beside two clinic photos that surface as they arrive */
.ty-note{padding:calc(var(--pad) * .7) 0 var(--pad)}
.ty-note .sec-title{margin-inline:auto}
.ty-note .story__p b{font-weight:700;color:var(--paper)}
.ty-pics{aspect-ratio:20/17;margin-bottom:0}
.ty-pics .story__pic--a{left:0;top:0;width:72%}
.ty-pics .story__pic--b{right:0;top:auto;bottom:0;width:46%}

/* what happens next: same travelling-light timeline as the landing */
.ty-next{margin-top:0}
.ty-next .tl__card b{font-weight:800}
.ty-next .tl__card .todo{white-space:normal}

/* the receipt comes out of a slot as you scroll; each line shows as it clears the slot */
.ty-order{padding:var(--pad) 0 calc(var(--pad) * .7)}
.printer{position:relative;max-width:690px;margin:0 auto}
.printer__slot{position:relative;z-index:2;height:28px;border-radius:14px;
  background:linear-gradient(180deg,#2B3038 0%,#15181D 45%,#0A0B0D 70%,#1C2027 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.05),0 22px 40px -18px rgba(0,0,0,.95)}
.printer__slot i{position:absolute;left:5.5%;right:5.5%;top:50%;height:5px;margin-top:-2px;border-radius:3px;background:#030405;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(127,216,245,.55),0 4px 18px 1px rgba(84,153,205,.45)}
.printer__out{position:relative;z-index:1;margin:-14px 35px 0;clip-path:inset(0 -90px -180px -90px)}
.printer__out .receipt{max-width:none;border-radius:0;padding-top:40px;will-change:transform}
.receipt__rows div.on{opacity:1;transform:none}
.receipt__paid.on dd{animation:big-punch .8s var(--ease-punch) .1s,price-beat 1.8s var(--ease-io) 1.2s infinite}
.receipt__paid dd{transform-origin:100% 60%}
.receipt.printed .receipt__paid dd{animation:big-punch .8s var(--ease-punch) .7s,price-beat 1.8s var(--ease-io) 1.8s infinite}
.ty-order__note{margin-top:30px;text-wrap:balance}

/* our promise: each one rises out of the paper on a sheet of frosted glass, clouds of light drifting behind it */
.ty-promise{padding:var(--pad) 0}
.pr{list-style:none;margin:0 auto;padding:0;max-width:980px;display:grid;gap:clamp(64px,8vw,120px);text-align:center}
.pr__it{display:flex;flex-direction:column;align-items:center}
.pr__em{display:block;font-size:var(--fs-title);line-height:1;margin-bottom:clamp(14px,1.6vw,22px)}
.pr__name{position:relative;isolation:isolate;margin:0;max-width:100%;font-size:var(--fs-title);font-weight:700;font-stretch:68%;line-height:1.02}
.pr__name .dev__glass{max-width:100%}
.pr__name .dev__word{text-wrap:balance}
.pr__name::before,.pr__name::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;will-change:transform}
.pr__name::before{left:-12%;top:-45%;width:62%;height:190%;
  background:radial-gradient(closest-side,rgba(84,153,205,.75),rgba(84,153,205,.28) 55%,rgba(84,153,205,0));animation:cloud-a 9s ease-in-out infinite alternate}
.pr__name::after{right:-12%;top:-35%;width:56%;height:170%;
  background:radial-gradient(closest-side,rgba(127,216,245,.7),rgba(186,226,255,.3) 55%,rgba(127,216,245,0));animation:cloud-b 11s ease-in-out infinite alternate}
.pr__it:nth-child(even) .pr__name::before,.pr__it:nth-child(even) .pr__name::after{animation-direction:alternate-reverse}
.pr__txt{margin:clamp(14px,1.6vw,22px) 0 0;max-width:30em;font-size:var(--fs-sub);font-weight:400;line-height:1.3;color:var(--ink);text-wrap:balance}
body.scrolly .pr__name::before,body.scrolly .pr__name::after{opacity:0;transition:opacity 1.6s ease-out .2s}
body.scrolly .pr__it.lit .pr__name::before,body.scrolly .pr__it.lit .pr__name::after{opacity:1}
body.scrolly .pr__it.lit .dev__glass{animation:glass-drop 1.5s cubic-bezier(.16,1,.3,1) both}
body.scrolly .pr__it.lit .dev__glass::after{animation:glass-sheen 1.3s cubic-bezier(.3,.1,.2,1) .55s both,glass-sheen 1.3s cubic-bezier(.3,.1,.2,1) 6s infinite}
body.scrolly .pr__em{opacity:0;scale:.4;transition:opacity .5s var(--ease-out),scale .8s var(--ease-punch)}
body.scrolly .pr__it.lit .pr__em{opacity:1;scale:1}
body.scrolly .pr__txt{opacity:0;translate:0 .6em;transition:opacity .9s var(--ease-out) .45s,translate 1.1s cubic-bezier(.16,1,.3,1) .45s}
body.scrolly .pr__it.lit .pr__txt{opacity:1;translate:none}
@media (hover:hover) and (pointer:fine){
  body.scrolly .pr__txt{filter:blur(8px);transition:opacity .9s var(--ease-out) .45s,translate 1.1s cubic-bezier(.16,1,.3,1) .45s,filter 1s var(--ease-out) .45s}
  body.scrolly .pr__it.lit .pr__txt{filter:none}
}

/* closing */
.ty-end{padding:var(--pad) 0 calc(var(--pad) * 1.1)}
.ty-end__logo{display:block;width:clamp(130px,12vw,170px);height:auto;margin:clamp(30px,3.4vw,44px) auto 0}

@media (max-width:760px){
  .ty-pics{aspect-ratio:auto}
  .ty-pics .story__pic--a,.ty-pics .story__pic--b{grid-column:auto;width:auto;aspect-ratio:4/5}
  .ty-kicker{justify-content:center;gap:12px}
  .ty-kicker .eyebrow{text-align:left}
  .ty-pics .story__pic--b{margin-top:44px}
  .printer__slot{height:24px;border-radius:12px}
  .printer__out{margin:-12px 14px 0}
  .printer__out .receipt{padding:34px 20px 40px}
  .pr__name::before{left:-6%;width:70%}
  .pr__name::after{right:-6%;width:64%}
}
@media (prefers-reduced-motion:reduce){.pr__name::before,.pr__name::after{animation:none}}

/* timeline (both pages): a lit card always lands home — on phone the even cards kept their slide-in offset and ran off the screen */
body.scrolly .tl__step.lit:nth-child(n) .tl__card{opacity:1;translate:none}
/* on phone the cards rise into place instead of sliding in from the right edge, so they never poke out of the screen */
@media (max-width:760px){
  body.scrolly .tl__card,body.scrolly .tl__step:nth-child(even) .tl__card{translate:0 30px}
}

/* opening (both pages): while the line, the logo and the particles play, nothing else of the hero shows through;
   it all fades in with its usual reveal once the particles have landed */
.js body.lp:not(.intro-done) .lp-hero__in > :not(#heroBox):not(.hero__title){visibility:hidden;opacity:0}

/* 2015 story on phone: only the two portrait photos, side by side (the wide reception shot is desktop only) */
@media (max-width:760px){
  .story__pics:not(.ty-pics) .story__pic--a{display:none}
  .story__pics:not(.ty-pics){margin-top:12px}
  #poveste{padding-bottom:calc(var(--pad) * .35)}
}

/* =====================================================================
   ROUND 13 (real team portraits)
   ===================================================================== */
/* the team: eleven people, four to a row on desktop; each card is the studio portrait, the name and the role */
.team .docs{--cols:4;max-width:1180px;margin-inline:auto}
.doc--photo .doc__photo{background:#E6E7E9}
.doc__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;transform-origin:50% 30%;transition:transform 1.2s var(--ease-out)}
body.scrolly .team .doc:not(.lit) .doc__photo img{transform:scale(1.12)}
.team .doc{gap:10px;padding-bottom:22px}
.team .doc__name{margin-top:6px}
.doc__role{display:block;padding:0 10px;font-size:var(--fs-body);font-weight:400;line-height:1.35;color:var(--ink);text-wrap:balance}
body.scrolly .doc__role{opacity:0;translate:0 10px;transition:opacity .7s var(--ease-out) .55s,translate .7s var(--ease-out) .55s}
body.scrolly .doc.lit .doc__role{opacity:1;translate:none}
@media (max-width:1100px){.team .docs{--cols:3}}
@media (max-width:760px){
  .team .docs{--cols:2}
  .team .doc{padding:8px 8px 18px;border-radius:22px}
  .doc__photo{border-radius:15px}
  .doc__role{padding:0 4px}
}


@keyframes ig-shimmer{to{background-position:-250% 0}}

/* ---------- gift card: a pearl card tied with the clinic's blue satin ribbon ---------- */
.gc{padding:clamp(40px,5vw,72px) 0 clamp(16px,2vw,32px)}
.gc__banner{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy stage";align-items:center;gap:clamp(28px,4vw,64px);
  padding:clamp(32px,4.6vw,72px);border-radius:24px;overflow:hidden;
  background:radial-gradient(60% 80% at 82% 50%,rgba(84,153,205,.34),rgba(84,153,205,0) 70%),radial-gradient(50% 60% at 0% 100%,rgba(84,153,205,.14),rgba(84,153,205,0) 70%),#121418;
  box-shadow:0 0 0 1px rgba(241,239,234,.12),0 50px 120px -60px rgba(84,153,205,.6)}
.gc__copy{grid-area:copy}
.gc__kicker{color:var(--accent);font-weight:700;margin-bottom:14px}
.gc__title{margin:0;max-width:11em;font-size:clamp(34px,4.4vw,68px);font-weight:700;font-stretch:68%;line-height:.96;letter-spacing:-.01em;text-wrap:balance}
.gc__lead{margin-top:clamp(16px,1.8vw,24px);max-width:24em;color:var(--paper)}
.gc__amounts{border:0;margin:clamp(24px,2.6vw,36px) 0 0;padding:0;max-width:440px}
.gc__amounts legend{padding:0;margin-bottom:10px;font-weight:600}
.gc__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gc__o{position:relative;cursor:pointer}
.gc__o input{position:absolute;opacity:0;width:1px;height:1px}
.gc__o span{display:flex;align-items:center;justify-content:center;height:58px;border-radius:14px;font-size:var(--fs-lead);font-weight:700;
  background:rgba(241,239,234,.045);box-shadow:inset 0 0 0 1px rgba(241,239,234,.22);transition:background-color .3s,box-shadow .3s,color .3s}
.gc__o:hover span{box-shadow:inset 0 0 0 1px rgba(241,239,234,.5)}
.gc__o input:checked + span{background:var(--accent);color:var(--ink);box-shadow:0 12px 30px -12px rgba(84,153,205,.9)}
.gc__o input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.gc__o input:checked + span{animation:big-punch .6s var(--ease-punch)}
.gc__cta{margin-top:clamp(24px,2.6vw,36px)}
.gc__fine{margin-top:14px;color:var(--paper)}

.gc__stage{grid-area:stage;position:relative;display:grid;place-items:center;padding:clamp(20px,3vw,40px) 0;perspective:1200px}
.gcard{position:relative;width:min(500px,100%);aspect-ratio:1.586;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));opacity:0}
.gc__stage.in .gcard{animation:gc-in 1.15s var(--ease-out) both,gc-float 6s var(--ease-io) 1.15s infinite}
@keyframes gc-in{0%{opacity:0;translate:0 70px;rotate:-14deg;scale:.86}60%{opacity:1}100%{opacity:1;translate:0 0;rotate:-4deg;scale:1}}
@keyframes gc-float{0%,100%{opacity:1;translate:0 0;rotate:-4deg}50%{opacity:1;translate:0 -12px;rotate:-2.5deg}}
.gcard.bump .gcard__face{animation:big-punch .6s var(--ease-punch)}
.gcard__face{position:absolute;inset:0;border-radius:18px;overflow:hidden;color:var(--ink);
  background:radial-gradient(120% 90% at 0% 0%,#FFFFFF 0%,rgba(255,255,255,0) 60%),linear-gradient(135deg,#FBFAF7 0%,#EEEBE4 55%,#E2E6EA 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(12,13,15,.06),0 50px 90px -40px rgba(12,13,15,.9),0 30px 80px -30px rgba(84,153,205,.65)}
/* light that follows the pointer, and a band of shine that crosses the card now and then */
.gcard__sheen{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s var(--ease-out);
  background:radial-gradient(60% 70% at var(--mx,50%) var(--my,50%),rgba(255,255,255,.75),rgba(255,255,255,0) 70%)}
.gcard.tilt .gcard__sheen{opacity:1}
.gcard__face::after{content:"";position:absolute;z-index:3;top:-30%;bottom:-30%;left:-40%;width:22%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg) translateX(0);animation:gc-shine 5.5s var(--ease-io) 1.6s infinite}
@keyframes gc-shine{0%,62%{transform:skewX(-18deg) translateX(0)}100%{transform:skewX(-18deg) translateX(820%)}}
.gcard__logo{position:absolute;left:7%;top:11%;width:44%;height:auto}
.gcard__label{position:absolute;left:7%;bottom:31%;font-weight:700}
.gcard__val{position:absolute;left:7%;bottom:9%;display:flex;align-items:baseline;gap:8px;font-weight:700;line-height:1}
.gcard__val b{display:inline-block;overflow:hidden;padding:.06em 0;font-size:clamp(40px,4.4vw,62px);font-weight:800;font-stretch:72%;letter-spacing:-.01em;line-height:.9}
.gcard__val b span{display:inline-block}
.gcard__val .roll-out{animation:roll-out .23s var(--ease-io) forwards}
.gcard__val .roll-in{animation:roll-in .6s var(--ease-punch) both}
.gcard__band{position:absolute;z-index:1;top:0;bottom:0;left:72%;width:15%;
  background:linear-gradient(90deg,#2D6A9C 0%,#4F97CF 28%,#9ACCF1 50%,#4F97CF 72%,#2D6A9C 100%);box-shadow:0 0 18px rgba(12,13,15,.18)}
.gcard__bow{position:absolute;z-index:4;left:79.5%;top:9%;width:46%;height:auto;translate:-50% 0;overflow:visible;
  transform:translateZ(40px) scale(0);transform-origin:50% 48%;filter:drop-shadow(0 10px 12px rgba(12,13,15,.35))}
.gc__stage.in .gcard__bow{animation:gc-bow .9s var(--ease-punch) .75s both}
@keyframes gc-bow{0%{transform:translateZ(40px) scale(0) rotate(-30deg)}100%{transform:translateZ(40px) scale(1) rotate(0)}}
.gcard__loop{transform-box:fill-box}
.gcard__loop--l{transform-origin:100% 80%}
.gcard__loop--r{transform-origin:0% 80%}
.gc__stage.in .gcard__loop--l{animation:gc-loop-l 3.2s var(--ease-io) 1.8s infinite}
.gc__stage.in .gcard__loop--r{animation:gc-loop-r 3.2s var(--ease-io) 1.8s infinite}
@keyframes gc-loop-l{0%,70%,100%{transform:none}80%{transform:rotate(-7deg) scale(1.04)}90%{transform:rotate(3deg)}}
@keyframes gc-loop-r{0%,70%,100%{transform:none}80%{transform:rotate(7deg) scale(1.04)}90%{transform:rotate(-3deg)}}
.gc__floor{position:absolute;left:50%;bottom:0;width:70%;height:40px;translate:-50% 0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(84,153,205,.55),rgba(84,153,205,0));opacity:0;transition:opacity 1s var(--ease-out) .4s}
.gc__stage.in .gc__floor{opacity:1;animation:gc-floor 6s var(--ease-io) 1.15s infinite}
@keyframes gc-floor{0%,100%{transform:scale(1)}50%{transform:scale(.86)}}

/* the modal in gift-card mode: no list price to strike */
.modal.is-gc .pick__list{display:none}

/* gift card: the four values as a "how happy she'll be" meter in the blue side (one face per value) */
.love{display:flex;flex-direction:column;gap:18px;margin:auto 0;align-self:stretch;
  opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s var(--ease-out) .6s,transform .85s var(--ease-out) .6s}
.love[hidden]{display:none}
.modal.open .love{opacity:1;transform:none}
.love__msg{display:flex;flex-direction:column;gap:4px;margin:0}
.love__msg b{font-size:var(--fs-sub);font-weight:800;font-stretch:72%;line-height:1.1;text-wrap:balance}
.love__msg span{font-weight:600}
.love__msg.love-in > *{animation:love-in .55s var(--ease-out) both}
.love__msg.love-in span{animation-delay:.07s}
@keyframes love-in{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.love__meter{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
/* the line joins the four faces at their centres and fills up to the chosen one */
.love__track{position:absolute;left:12.5%;right:12.5%;top:27px;height:3px;margin-top:-1.5px;border-radius:2px;background:rgba(247,245,240,.28);pointer-events:none}
.love__fill{position:absolute;inset:0;border-radius:inherit;background:var(--paper);transform-origin:0 50%;transform:scaleX(0);transition:transform .6s var(--ease-io)}
.love__o{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.love__face{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#73A9D6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 24px -14px rgba(12,13,15,.6);transition:transform .5s var(--ease-punch),background-color .35s var(--ease-out),color .35s var(--ease-out)}
.love__face svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.love__face svg .dot{fill:currentColor;stroke:none}
.love__o.is-past .love__face{background:#A9CDEA}
.love__o.is-on .love__face{background:var(--ink);color:var(--paper);transform:scale(1.12)}
.love__o:hover:not(.is-on) .love__face{transform:scale(1.06)}
.love__o:focus-visible{outline:none}
.love__o:focus-visible .love__face{outline:2px solid var(--ink);outline-offset:3px}
.love__v{white-space:nowrap}
.love__o.is-on .love__v{font-weight:800}
@media (max-width:760px){
  .love{gap:14px;margin:0}
  .love__msg{align-items:center;text-align:center}
  .love__face{width:48px;height:48px}.love__face svg{width:32px;height:32px}
  .love__track{top:24px}
}
/* short laptop screens: the pinned blue side has a fixed height, so the emblem gives up room for the meter */
@media (min-width:761px) and (max-height:820px){
  .modal.is-gc .modal__big{font-size:clamp(64px,7vw,96px)}
  .modal.is-gc .modal__side{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .love,.love__face,.love__fill{transition:none}
  .love__msg.love-in > *{animation:none}
}

@media (max-width:900px){
  .gc__banner{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "copy";text-align:center;gap:clamp(8px,2vw,20px);padding-top:clamp(20px,4vw,40px)}
  .gc__title{margin:0 auto}
  .gc__lead{margin-left:auto;margin-right:auto}
  .gc__amounts{margin-left:auto;margin-right:auto}
  .gc__amounts legend{margin-left:auto;margin-right:auto}
  .gcard{width:min(400px,88%)}
}
@media (max-width:760px){
  .gc__banner{border-radius:20px;padding-left:16px;padding-right:16px}
  .gc__cta .btn{width:100%}
  .gcard__val b{font-size:clamp(34px,10vw,44px)}
}
@media (prefers-reduced-motion:reduce){
  .gcard{opacity:1;rotate:-4deg}
  .gc__stage .gcard,.gc__stage.in .gcard,.gc__stage.in .gcard__bow,.gc__stage.in .gcard__loop--l,.gc__stage.in .gcard__loop--r,.gc__stage.in .gc__floor,.gcard__face::after,.gc__o input:checked + span{animation:none}
  .gcard__bow{transform:translateZ(40px)}
  .gc__floor{opacity:1}
}

/* thank-you paragraph: no emoji, thin and airy, with clear space under the film */
body.ty .scene__pin .vsl{margin-bottom:clamp(48px,8vh,88px)}
body.ty .lp-hero__lead{max-width:21em;font-size:clamp(22px,2.4vw,36px);font-weight:300;font-stretch:100%;letter-spacing:-.01em;line-height:1.42}
body.ty .hl{font-weight:500}
body.ty .lp-hero__lead .sw{will-change:auto}

/* the pinned strip can be grabbed and swiped sideways */
.hpin:not(.hpin--static) .hpin__view{touch-action:pan-y;-webkit-user-select:none;user-select:none}
@media (hover:hover) and (pointer:fine){.hpin:not(.hpin--static) .hpin__view{cursor:grab}.hpin.is-grabbing .hpin__view{cursor:grabbing}}

/* chosen by, now a swipe carousel: the page scrolls straight past, the strip moves sideways under the finger,
   the trackpad or a mouse drag, and snaps to a clip. Arrows sit on the strip's edges */
.hpin.hpin--swipe{height:auto!important}
.hpin--swipe .hpin__stick{position:static;height:auto;overflow:visible}
.reels .hpin--swipe .hpin__stick{padding-top:clamp(40px,5vw,72px)}
.hpin--swipe + .hpin--swipe .hpin__stick{padding-top:clamp(48px,6vw,88px)}
.reels .hpin--swipe:last-child{padding-bottom:clamp(8px,2vw,24px)}
.hpin__frame{position:relative}
.hpin.hpin--swipe .hpin__view{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
  touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;padding:18px 0 10px}
.hpin--swipe .hpin__view::-webkit-scrollbar{display:none}
.hpin.hpin--swipe.hpin--loop .hpin__view{overflow:hidden;scroll-snap-type:none;touch-action:pan-y}
.hpin.hpin--loop .hpin__track{padding:0;will-change:transform}
.hpin.hpin--swipe.is-grabbing .hpin__view,.hpin.hpin--swipe.is-gliding .hpin__view{scroll-snap-type:none}
.hpin--swipe .hpin__track{will-change:auto}
.hpin--swipe .reel{scroll-snap-align:center}
/* the first and last clips snap to the strip's very ends (an oversized margin clamps their snap point to 0 and to the end) */
.hpin--swipe .reel:first-child{scroll-snap-align:start;scroll-margin-left:100vw}
.hpin--swipe .reel:last-child{scroll-snap-align:end;scroll-margin-right:100vw}
/* the arrows: round paper buttons on the strip's edges, centred on the clips; "next" nudges until the strip has been moved once */
.hnav{position:absolute;top:50%;z-index:3;width:56px;height:56px;margin-top:-28px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;
  background:var(--paper);color:var(--ink);box-shadow:0 18px 40px -16px rgba(0,0,0,.7),0 0 0 6px rgba(241,239,234,.12);
  transition:transform .4s var(--ease-out),opacity .3s var(--ease-out);-webkit-tap-highlight-color:transparent}
.hnav[hidden]{display:grid;opacity:0;pointer-events:none;transform:scale(.6)}
.hnav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hnav--next{right:max(16px,calc((100vw - var(--max)) / 2 - 28px))}
.hnav--prev{left:max(16px,calc((100vw - var(--max)) / 2 - 28px))}
.hnav--prev svg{transform:rotate(180deg)}
.hnav:hover{transform:scale(1.08)}
.hnav:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.hpin--swipe:not(.is-seen) .hnav--next{animation:hnav-nudge 2.4s var(--ease-io) 1.2s infinite}
@keyframes hnav-nudge{0%,55%,100%{transform:none}70%{transform:translate3d(8px,0,0)}85%{transform:translate3d(-2px,0,0)}}
.offscreen .hnav--next{animation-play-state:paused}
@media (max-width:760px){
  .hnav{width:48px;height:48px;margin-top:-24px}
  .hnav svg{width:20px;height:20px}
  .hnav--next{right:10px}.hnav--prev{left:10px}
}
@media (prefers-reduced-motion:reduce){.hpin--swipe .hnav--next{animation:none}}

/* the Instagram-only figures: the same pinned strip as above; a tap opens the official reel in a popup */
.reel--ig{position:relative}
.reel__ig{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(10,12,16,.55);pointer-events:none}
.reel__ig svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8}
.reel__ig .dot{fill:#fff;stroke:none}
.reel__hit{position:absolute;inset:0;z-index:3;width:100%;border:0;padding:0;background:none;cursor:pointer;border-radius:22px}
.reel__hit:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.reel__play{position:absolute;left:50%;top:50%;z-index:2;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;background:rgba(10,12,16,.45);opacity:0;transform:scale(.8);transition:opacity .35s var(--ease-out),transform .45s var(--ease-out);pointer-events:none}
.reel__play svg{width:22px;height:22px;margin-left:3px;fill:#fff}
@media (hover:hover) and (pointer:fine){.reel--ig:hover .reel__play{opacity:1;transform:none}}
.igbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(8,10,13,.86);opacity:0;transition:opacity .35s var(--ease-out)}
.igbox[hidden]{display:none}
.igbox.is-in{opacity:1}
.igbox__panel{position:relative;width:min(400px,100%);transform:translateY(24px) scale(.97);transition:transform .5s var(--ease-out)}
.igbox.is-in .igbox__panel{transform:none}
.igbox__frame{position:relative;height:min(720px,calc(100svh - 96px));border-radius:18px;overflow:hidden;background:#1B1F26}
.igbox__frame::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,#1B1F26 30%,#252A33 50%,#1B1F26 70%) 0 0/250% 100%;animation:ig-shimmer 1.4s linear infinite}
.igbox__frame.is-ready::before{display:none}
.igbox__frame iframe{position:relative;display:block;width:100%;height:100%;border:0;background:#fff}
/* the player's profile and footer links lead to Instagram: only the video itself stays clickable, so the visitor stays on the site */
.igbox__shield{position:absolute;left:0;right:0;z-index:2}
.igbox__shield--top{top:0;height:54px}
.igbox__shield--end{top:calc(54px + min(400px,100vw - 32px) * 1.25);bottom:0}
.igbox__frame.is-locked .igbox__shield--top{height:auto;bottom:0}
.igbox__frame video{position:relative;display:block;width:100%;height:100%;object-fit:contain;background:var(--ink)}
.igbox__close{position:absolute;top:-54px;right:0;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);cursor:pointer;transition:transform .35s var(--ease-out)}
.igbox__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.igbox__close:hover{transform:rotate(90deg)}
html.igbox-open{overflow:hidden}

/* the client asked for a bigger −40% ribbon on the offer media: it scales as one piece with the frame */
.chap__media .svc__badge{right:clamp(16px,2vw,28px)}
body.lp .chap__media .bm{--bw:clamp(94px,11vw,160px);width:var(--bw);height:calc(var(--bw) * 1.1);padding-top:calc(var(--bw) * .3)}
body.lp .chap__media .bm::after{height:calc(var(--bw) * .22)}
body.lp .chap__media .bm b{font-size:calc(var(--bw) * .36);font-stretch:66%}

/* sideways swipes never leave the page: no back/forward overscroll navigation (Chrome, Edge, Firefox, Android) */
html,body{overscroll-behavior-x:none}

/* ---------------- lead mode: on arrival the popup is a short contact form, not the order ---------------- */
.modal.is-lead #pick,.modal.is-lead .field--select,.modal.is-lead .who,.modal.is-lead #giftField,.modal.is-lead .field--area,
.modal.is-lead .check--opt,.modal.is-lead #emailHint,.modal.is-lead .field__err[data-for="for"]{display:none!important}
.modal.is-lead #formSteps i:nth-child(5){display:none}
/* sent: the arrow turns into a tick (drawn), the button settles; the popup closes a moment later */
.btn.is-done{pointer-events:none;translate:none}
.btn.is-done .btn__bg::after{animation:none;opacity:0}
.btn.is-done .btn__arr{transform:scale(1.08)}
.btn.is-done .btn__arr svg{opacity:0;animation:none}
.btn.is-done .btn__arr::before{content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1EFEA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/22px no-repeat;
  animation:tick-in .45s var(--ease-punch) both}
@keyframes tick-in{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}

/* the thank-you card that lands at the top of the page after the arrival form */
.lead-toast{position:fixed;z-index:1000;top:max(16px,env(safe-area-inset-top));left:50%;width:min(520px,calc(100% - 32px));
  display:flex;align-items:center;gap:14px;padding:14px 18px 14px 14px;border-radius:18px;background:var(--paper);color:var(--ink);
  box-shadow:0 18px 50px -12px rgba(0,0,0,.55);cursor:pointer;
  transform:translate(-50%,-140%);opacity:0;transition:transform .6s var(--ease-out),opacity .45s var(--ease-out)}
.lead-toast.in{transform:translate(-50%,0);opacity:1}
.lead-toast.out{transform:translate(-50%,-40%);opacity:0;transition-duration:.45s}
.lead-toast__ok{flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.lead-toast__ok svg{width:20px;height:20px;fill:none;stroke:var(--paper);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24}
.lead-toast.in .lead-toast__ok svg{animation:tick-draw .5s .35s var(--ease-out) forwards}
@keyframes tick-draw{to{stroke-dashoffset:0}}
.lead-toast__txt{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-body);line-height:1.4}
.lead-toast__txt b{font-weight:700}
@media (prefers-reduced-motion:reduce){
  .lead-toast,.lead-toast.out{transition:opacity .2s linear;transform:translate(-50%,0)}
  .lead-toast__ok svg,.lead-toast.in .lead-toast__ok svg{animation:none;stroke-dashoffset:0}
  .btn.is-done .btn__arr::before{animation:none}
}

/* the arrival lead form is locked: no close button, and the page shows through, blurred, behind it */
.modal.is-locked .modal__x{display:none}
.modal.is-locked .modal__scrim{background:rgba(12,13,15,.22);-webkit-backdrop-filter:blur(9px) saturate(1.2);backdrop-filter:blur(9px) saturate(1.2);cursor:default}
/* the lead form is short: a compact panel, so the blurred page shows all around it */
@media (min-width:761px){
  .modal.is-lead .modal__panel{width:min(980px,100%)}
  .lp .modal.is-lead .modal__side{position:relative;height:auto;align-self:stretch}
}
@media (max-width:760px){
  /* on phones the sheet stops short of the top, so the blurred page stays visible above it */
  .modal.is-locked .modal__panel{max-height:84svh}
}

/* behind the locked lead form: the offers as product cards, blurred by the scrim above them */
.lead-bg{position:absolute;inset:0;overflow:hidden;background:var(--ink)}
.lead-bg__grid{position:absolute;left:50%;top:50%;width:max(1560px,128vw);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;
  transform:translate(-50%,-50%) rotate(-3deg)}
.lead-bg__card{background:#14171C;border-radius:20px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--rule)}
.lead-bg__card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.lead-bg__body{display:grid;gap:6px;padding:16px 18px 18px;color:var(--paper);font-size:var(--fs-body)}
.lead-bg__body b{font-size:var(--fs-lead);line-height:1.2}
.lead-bg__body s{text-decoration-color:var(--accent);text-decoration-thickness:1.5px}
.lead-bg__bf{display:flex;align-items:center;gap:10px;color:var(--accent);font-weight:800;font-size:var(--fs-lead)}
.lead-bg__bf i{font-style:normal;font-size:var(--fs-body);background:var(--accent);color:var(--ink);border-radius:999px;padding:3px 10px}
@media (max-width:760px){.lead-bg__grid{width:190vw;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}

/* lead mode: the blue side carries the clinic's logo in white above the ticket */
.modal__logo{display:none}
.modal.is-lead .modal__logo{display:block;width:clamp(130px,11vw,160px);height:auto;filter:brightness(0) invert(1)}
@media (min-width:761px){
  /* left-aligned like the form beside it: logo on the title's line, ticket + -40% in the middle, countdown on the button's line */
  .modal.is-lead .modal__side{align-items:flex-start;text-align:left}
  .modal.is-lead .modal__logo{width:clamp(170px,15vw,210px);margin:0 0 auto}
  .modal.is-lead .modal__big{margin-left:-.04em}
  .modal.is-lead .modal__clock{align-self:stretch}
  .modal.is-lead .modal__clock div{align-items:center}
  .modal.is-lead .modal__clock b{justify-content:center}
}
@media (max-width:760px){.modal.is-lead .modal__logo{width:120px}.modal.is-locked .modal__tag{padding:0;align-self:center}}

/* named packages: what the package contains, under its name */
.pkg-mix{display:block;margin-top:4px;font-size:var(--fs-body);font-weight:500;font-stretch:100%;line-height:1.35;opacity:.78}

/* payment step: Stripe's Payment Element takes the form's place inside the popup */
.pay{display:flex;flex-direction:column;gap:14px}
.pay[hidden]{display:none}
.pay.pay-in{animation:payIn .7s var(--ease-out) both}
@keyframes payIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pay .form__head{margin-bottom:4px}
.pay__test{margin:0;padding:10px 14px;border:1px dashed rgba(84,153,205,.7);border-radius:12px;background:rgba(84,153,205,.1)}
.pay__el{position:relative;min-height:230px}
.pay:not(.is-ready) .pay__el::before{content:"";position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;border:2px solid rgba(241,239,234,.18);border-top-color:var(--accent);animation:paySpin .8s linear infinite}
.pay.is-ready .pay__el{min-height:0}
@keyframes paySpin{to{transform:rotate(360deg)}}
.pay__err:empty{display:none}
#payBtn:disabled{opacity:.55;cursor:default}
.pay__back{align-self:center;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:0;background:none;color:rgba(241,239,234,.72);font:inherit;cursor:pointer;transition:color .2s}
.pay__back:hover,.pay__back:focus-visible{color:var(--paper)}
.pay__back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#payTitle{outline:none}
@media (prefers-reduced-motion:reduce){.pay.pay-in{animation:none}}

/* ---------- order popup: details already given fold into one line; discount code ---------- */
.known{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;padding:14px 18px;
  border:1px solid rgba(84,153,205,.7);border-radius:14px;background:rgba(84,153,205,.08)}
.known[hidden]{display:none}
.known__who{display:flex;flex-direction:column;gap:2px;min-width:0;margin:0}
.known__who span{overflow-wrap:anywhere}
.known__who span:last-child{color:rgba(241,239,234,.72)}
.known__edit,.coupon__open,.coupon__del{flex:none;padding:6px 2px;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.known__edit:hover,.coupon__open:hover,.coupon__del:hover{color:var(--paper)}
.coupon{margin:-2px 0 16px}
.coupon__open[hidden]{display:none}
.coupon__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;margin-top:6px}
.coupon__row[hidden]{display:none}
.coupon__row .field{margin:0}
.coupon__row .field input{padding-right:20px;text-transform:uppercase}
.coupon__apply{height:66px;padding:0 24px;border:1px solid var(--accent);border-radius:14px;background:rgba(84,153,205,.16);color:var(--paper);
  font:inherit;font-weight:600;cursor:pointer;transition:background-color .25s}
.coupon__apply:hover{background:rgba(84,153,205,.3)}
.coupon__apply:disabled{opacity:.55;cursor:default}
.coupon__ok{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0;padding:12px 16px;border:1px solid rgba(84,153,205,.7);border-radius:14px;background:rgba(84,153,205,.08)}
.coupon__ok[hidden]{display:none}
.coupon__ok svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.coupon__ok span{flex:1 1 200px;font-weight:600}
.modal.is-lead .known,.modal.is-lead .coupon{display:none!important}

/* ---------- order popup: the chosen offer as a photo card; the picker with every offer ---------- */
.ofr{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:76px;padding:10px 16px 10px 10px;
  border:1px solid rgba(241,239,234,.22);border-radius:14px;background:rgba(241,239,234,.045);color:var(--paper);font:inherit;text-align:left;cursor:pointer;
  transition:border-color .25s,background-color .25s,box-shadow .35s var(--ease-out)}
.ofr:hover{border-color:rgba(241,239,234,.4)}
.ofr:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(84,153,205,.22)}
.ofr__img,.pk__img{display:block;overflow:hidden;border-radius:10px;background:rgba(241,239,234,.08)}
.ofr__img{width:56px;height:56px}
.ofr__img img,.pk__img img{display:block;width:100%;height:100%;object-fit:cover}
.ofr__txt,.pk__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ofr__lbl{color:var(--accent);font-weight:600}
.ofr__name,.pk__name{font-weight:700;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ofr__price,.pk__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.ofr__price b,.pk__price b{font-weight:700;color:var(--paper)}
.ofr__price s,.pk__price s{color:rgba(241,239,234,.6);text-decoration-thickness:1.5px}
.ofr__caret{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-out)}
.ofr:hover .ofr__caret{transform:translateX(3px)}
.thumb-gc{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;line-height:1.05;color:#fff;font-weight:600;
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.35),rgba(255,255,255,0) 55%),linear-gradient(135deg,#7FB6E0,#3E79AE)}
.thumb-gc b{font-weight:800}

.picker{display:flex;flex-direction:column;gap:20px}
.picker[hidden]{display:none}
.picker.pay-in{animation:payIn .6s var(--ease-out) both}
.picker__head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-right:56px}
.picker__head .form__title{margin:0}
.picker__back{display:inline-flex;align-items:center;gap:6px;padding:6px 2px;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
.picker__back:hover{color:var(--paper)}
.picker__back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pk-group + .pk-group{margin-top:20px}
.pk-group__t{margin:0 0 10px;font-size:inherit;font-weight:700;color:var(--accent)}
.pk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pk{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:10px 40px 10px 10px;
  border:1px solid rgba(241,239,234,.18);border-radius:14px;background:rgba(241,239,234,.045);color:var(--paper);font:inherit;text-align:left;cursor:pointer;
  transition:border-color .25s,background-color .25s,transform .35s var(--ease-out)}
.pk:hover{border-color:rgba(84,153,205,.7);background:rgba(84,153,205,.08);transform:translateY(-1px)}
.pk:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(84,153,205,.22)}
.pk__img{width:64px;height:64px}
.pk__in{display:none;color:var(--accent);font-weight:600}
.pk.is-in .pk__in{display:block}
.pk.is-on{border-color:var(--accent);background:rgba(84,153,205,.14);box-shadow:0 0 0 1px var(--accent) inset}
.pk__tick{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--accent);display:grid;place-items:center;
  transform:scale(0);transition:transform .4s var(--ease-punch)}
.pk__tick svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.pk.is-on .pk__tick{transform:none}
@media (max-width:700px){.pk-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.picker.pay-in{animation:none}.pk,.ofr__caret{transition:none}}
/* picker cards: the photo on top, then the name and the price, two to a row */
.pk-grid,.pk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pk{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.pk__img{width:100%;height:auto;aspect-ratio:16/10;border-radius:0}
.pk .thumb-gc{gap:2px}
.pk__txt{flex:1;gap:6px;padding:12px 14px 14px}
.pk__name{-webkit-line-clamp:4}
.pk__mix{display:block;font-weight:500;color:rgba(241,239,234,.72)}
.pk__price{margin-top:auto}
.pk__tick{top:10px;right:10px;width:26px;height:26px;box-shadow:0 0 0 3px rgba(18,20,24,.6)}
.pk:hover{transform:translateY(-2px)}
.pk__img img{transition:transform .6s var(--ease-out)}
.pk:hover .pk__img img{transform:scale(1.04)}
@media (max-width:700px){.pk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.pk__img img{transition:none}}
.pk__name{overflow-wrap:anywhere}
/* gift card tile: the page's gift card in small, logo, value, a diagonal sheen */
.thumb-gc{position:relative;overflow:hidden;flex-direction:row;align-items:baseline;gap:4px}
.thumb-gc::after{content:"";position:absolute;inset:-40% auto -40% -30%;width:40%;transform:rotate(20deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0))}
.thumb-gc i{font-style:normal}
.thumb-gc__logo{display:none}
.pk .thumb-gc{align-items:flex-end;justify-content:flex-start;padding:14px 16px}
.pk .thumb-gc__logo{display:block;position:absolute;top:14px;left:16px;width:min(110px,48%);height:auto;filter:brightness(0) invert(1);opacity:.95}
.pk .thumb-gc b{font-size:clamp(26px,2.6vw,36px);font-weight:800;font-stretch:72%;line-height:1}
.ofr__img .thumb-gc{align-items:center;justify-content:center;flex-direction:column;gap:0}

/* ---------- order popup: the cart. One box: each product (photo, name, price, quantity, remove), add another,
   the discount code (always in view) and the total ---------- */
.cart{margin:0 0 18px;padding:16px 18px 18px;border:1px solid rgba(241,239,234,.18);border-radius:18px;background:rgba(241,239,234,.035)}
.cart__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding-bottom:4px}
.cart__head b{font-weight:700}
.cart__head span{color:rgba(241,239,234,.72);font-weight:600}
.lines{display:block;margin:0}
.line{padding:14px 0;border-bottom:1px solid rgba(241,239,234,.12)}
.line .field--select{display:none}
.line.line-in{animation:line-in .5s var(--ease-out)}
@keyframes line-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ofr{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;width:100%;min-height:0;padding:0;border:0;border-radius:12px;background:none;box-shadow:none}
.ofr:hover{border:0}
.ofr:focus-visible{outline:2px solid var(--accent);outline-offset:4px;box-shadow:none}
.ofr__img{width:64px;height:64px;border-radius:12px}
.ofr__change{color:var(--accent);font-weight:600}
.ofr:hover .ofr__change{text-decoration:underline;text-underline-offset:3px}
.line__ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0 78px}
.qty{display:inline-flex;align-items:center;height:40px;min-height:0;border:1px solid rgba(241,239,234,.22);border-radius:999px;background:rgba(241,239,234,.045)}
.qty__b{display:grid;place-items:center;width:40px;height:100%;padding:0;border:0;background:none;color:var(--paper);cursor:pointer;transition:color .2s}
.qty__b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.qty__b:hover{color:var(--accent)}
.qty__b:disabled{opacity:.3;cursor:default;color:var(--paper)}
.qty__n{min-width:24px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.line__del{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 2px;border:0;background:none;color:rgba(241,239,234,.72);font:inherit;font-weight:600;cursor:pointer;transition:color .2s}
.line__del svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.line__del:hover{color:#FF8A80}
.lines__add{display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:14px 0;border:0;border-bottom:1px solid rgba(241,239,234,.12);background:none;
  color:var(--accent);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.lines__add[hidden]{display:none}
.lines__plus{flex:none;display:grid;place-items:center;width:64px;height:44px;border:1px dashed rgba(84,153,205,.7);border-radius:12px;transition:background-color .25s}
.lines__plus svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.lines__add:hover .lines__plus{background:rgba(84,153,205,.14)}
.cart .coupon{margin:16px 0 0}
.cart .coupon__row{margin:0}
.cart .coupon__row[hidden]{display:none}
.cart__total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(241,239,234,.12);font-weight:600}
.cart__sum{display:flex;align-items:baseline;flex-wrap:wrap;justify-content:flex-end;gap:2px 12px}
.cart__sum s{color:rgba(241,239,234,.6);text-decoration-thickness:1.5px}
.cart__sum s:empty{display:none}
.cart__sum b{font-size:var(--fs-sub,26px);font-weight:800;font-stretch:72%;line-height:1.1}
.modal.is-lead .cart{display:none!important}
@media (max-width:420px){
  .cart{padding:14px 14px 16px}
  .ofr{grid-template-columns:56px minmax(0,1fr);gap:12px}
  .ofr__img{width:56px;height:56px}
  .line__ctl{margin-left:68px}
  .lines__plus{width:56px}
}
@media (prefers-reduced-motion:reduce){.line.line-in{animation:none}}
.cart .coupon__ok{flex-wrap:nowrap;gap:10px;padding:12px 14px}
.cart .coupon__ok span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.pick__line{display:block}
.pick__line + .pick__line{margin-top:4px}

/* ---------- order popup: invoice data (address, optional company) ---------- */
.bill{border:0;margin:0 0 6px;padding:0}
.bill legend{padding:0;margin-bottom:10px;font-weight:600}
.bill .check--firm{margin:0 0 14px}
.bill__firm[hidden]{display:none}
.modal.is-lead .bill{display:none!important}

/* ---------- 7. the story as a deck: each chapter is a card that the next one covers ---------- */
.story__deck{--sc-top:calc(var(--pbar) + 16px);display:grid;row-gap:clamp(22px,3vw,40px);margin-top:clamp(28px,3.4vw,48px)}
.sc{position:sticky;top:var(--sc-top);display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);border-radius:clamp(26px,3vw,40px);overflow:hidden;transform-origin:50% 0;box-shadow:0 -24px 60px -34px rgba(0,0,0,.9),inset 0 0 0 1px rgba(241,239,234,.1)}
.sc__media{position:relative;align-self:center;margin:clamp(14px,1.7vw,26px);overflow:hidden;aspect-ratio:3/2;border-radius:clamp(18px,2.2vw,30px)}  /* the photo is framed by the card and always shown whole, however long the text is */
.sc__media--year{display:grid;place-items:center;overflow:visible;margin:0;border-radius:0}
.sc__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.38fr)}
.sc--flip .sc__media{order:2}
.sc__body{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.6vw,22px);padding:clamp(28px,4.4vw,72px)}
.sc__k{margin:0;font-size:var(--fs-title);font-weight:800;font-stretch:72%;line-height:1.02;letter-spacing:-.01em}
body.lp .sc .story__year{margin:0;font-size:clamp(96px,14vw,216px);line-height:1;text-align:center}
.sc__p{margin:0;font-size:var(--fs-sub);font-weight:300;line-height:1.36;text-wrap:pretty}
.sc__p b{font-weight:750}
.sc__dim{position:absolute;inset:0;z-index:2;background:var(--ink);opacity:0;pointer-events:none}
.sc--night{background:linear-gradient(150deg,#1B2C3D 0%,#101821 60%,#0C0D0F 100%);color:var(--paper)}
.sc--paper{background:var(--paper);color:var(--ink);box-shadow:0 -24px 60px -34px rgba(0,0,0,.9)}
.sc--deep{background:linear-gradient(150deg,#2D6A9C 0%,#1B3F5E 100%);color:var(--paper)}
.sc--blue{grid-template-columns:minmax(0,1fr);text-align:center;background:var(--accent);color:var(--ink);box-shadow:0 -24px 60px -34px rgba(0,0,0,.9)}
.sc--blue .sc__body{align-items:center;padding:clamp(40px,6vw,96px) clamp(24px,7vw,120px)}
.sc--blue .sc__p{max-width:30em;font-size:var(--fs-sub);font-weight:400}
.sc--blue .sc__p b{font-weight:800}
@media (min-width:761px) and (max-width:1120px),(min-width:761px) and (max-height:760px){.sc__p{font-size:var(--fs-body)}}
@media (max-width:760px){
  .story__deck{--sc-top:calc(var(--pbar) + 8px)}
  .sc,.sc--flip{grid-template-columns:minmax(0,1fr)}
  .sc__media--year{aspect-ratio:auto;padding:30px 0 0}
  body.lp .sc .story__year{font-size:clamp(84px,26vw,120px)}
  .sc--flip .sc__media{order:0}
  .sc__media{margin:10px 10px 0}
  .sc__media--year{margin:0}
  .sc__body{padding:22px 20px 26px;gap:10px;text-align:center;align-items:center}
  .sc__p{font-size:17px;line-height:1.42}
}
@media (max-width:760px) and (max-height:720px){.sc{position:relative;top:auto}}
@media (prefers-reduced-motion:reduce){.sc{position:relative;top:auto}}

/* ---------- gift cards inside the order: four small copies of the real pearl card, always in view ---------- */
.gcs{padding:14px 0 0;container-type:inline-size}
.gcs__t{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 12px;margin:0 0 10px}
.gcs__t b{font-weight:700}
.gcs__t span{color:rgba(241,239,234,.72)}
.gcs__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@container (min-width:360px){.gcs__row{grid-template-columns:repeat(4,minmax(0,1fr))}.gcs__row .gcc{aspect-ratio:1.5}}
.gcc{position:relative;display:block;width:100%;aspect-ratio:2.35;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;color:var(--ink);font:inherit;text-align:left;
  background:radial-gradient(120% 90% at 0% 0%,#FFF 0%,rgba(255,255,255,0) 60%),linear-gradient(135deg,#FBFAF7 0%,#EEEBE4 55%,#E2E6EA 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 18px -12px rgba(84,153,205,.7);transition:transform .4s var(--ease-punch),box-shadow .3s var(--ease-out)}
.gcc:disabled{cursor:default}
.gcc::after{content:"";position:absolute;z-index:3;top:-20%;bottom:-20%;left:0;width:36%;opacity:0;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0));transform:translateX(-120%) skewX(-12deg)}
.gcs__row.wave .gcc::after{animation:card-shine 1.05s cubic-bezier(.3,.1,.2,1) calc(.75s + var(--i) * .13s)}
.gcc__logo{position:absolute;left:8px;top:9px;width:46%;max-width:64px;height:auto}
.gcc__band{position:absolute;top:0;bottom:0;right:7%;width:9%;background:linear-gradient(90deg,#2D6A9C 0%,#4F97CF 28%,#9ACCF1 50%,#4F97CF 72%,#2D6A9C 100%)}
.gcc__bow{position:absolute;z-index:1;left:88.5%;top:4px;width:30px;height:auto;translate:-50% 0;filter:drop-shadow(0 3px 3px rgba(12,13,15,.22))}
.gcc__val{position:absolute;left:8px;bottom:8px;display:flex;align-items:baseline;gap:3px;font-size:var(--fs-body);font-weight:700;font-stretch:72%;line-height:1;white-space:nowrap}
.gcc__val b{font-weight:800}
.gcc__tick{position:absolute;z-index:2;right:2px;bottom:3px;min-width:20px;height:20px;box-sizing:border-box;padding:0 3px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:2px;background:var(--ink);color:var(--paper);font-size:var(--fs-body);font-weight:800;opacity:0;transform:scale(.4);transition:opacity .2s var(--ease-out),transform .4s var(--ease-punch)}
.gcc__tick i{font-style:normal}
.gcc__tick i:empty{display:none}
.gcc__tick i:not(:empty)+svg{display:none}
.gcc__tick svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gcc.is-on{box-shadow:0 0 0 2px var(--accent),0 10px 20px -12px rgba(84,153,205,.95)}
.gcc.is-on .gcc__tick{opacity:1;transform:none}
.gcc.pop{animation:gcc-pop .5s var(--ease-punch)}
@keyframes gcc-pop{0%{transform:scale(.93)}100%{transform:none}}
.gcc:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.gcc:not(:disabled):hover{transform:translate3d(0,-4px,0) rotate(-1.2deg)}}
@media (prefers-reduced-motion:reduce){.gcs__row.wave .gcc::after,.gcc.pop{animation:none}.gcc,.gcc__tick{transition:none}}

/* the two reel strips read as one wall: a tight gap, the arrows are the only navigation */
.reels .hpin--swipe + .hpin--swipe .hpin__stick{padding-top:clamp(14px,1.6vw,24px)}
.reels .hpin__bar{display:none}
.reels .hnav--next{right:clamp(10px,1.6vw,28px)}
.reels .hnav--prev{left:clamp(10px,1.6vw,28px)}

/* ---------- 4b. client testimonials: real patients on real phones, fanned over the clinic's blue ---------- */
.tst{--w:clamp(236px,19.5vw,290px);--phone:calc((var(--w) - 16px) * 630 / 340 + 42px);padding:var(--pad) 0 clamp(92px,9.5vw,136px);overflow:clip}
.tst__sheet{position:absolute;inset:0;z-index:-1;border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0;background:linear-gradient(180deg,#F1EFEA 34%,#EEEDEA 37.0%,#E6E9E8 40.0%,#D9E2E6 43.0%,#C9D9E4 46.0%,#B7CFE0 49.0%,#A4C4DD 52.0%,#91BAD9 55.0%,#7FB0D6 58.0%,#6EA7D2 61.0%,#619FD0 64.0%,#579BCE 67.0%,#5499CD 70.0%,#5396C9 72.5%,#4E8DBD 75.0%,#4880AB 77.5%,#417196 80.0%,#385F7E 82.5%,#2F4D66 85.0%,#263C4E 87.5%,#1E2D39 90.0%,#172028 92.5%,#11161A 95.0%,#0D0F12 97.5%,#0C0D0F 100.0%)}
.tst__title{font-size:var(--fs-title);max-width:none}
.tst__title .wm{overflow:visible}
.tst__title .w{display:inline-block;transform-origin:50% 70%}
.tst__title .wm:not(.wm--acc){font-weight:300}
.tst__title .wm--acc{font-weight:800}
.tst__title .acc__line path{stroke-dasharray:1;stroke-dashoffset:1;transition:none!important;animation:none!important}
.tst__tabs{--at:0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,640px);margin:clamp(28px,3.4vw,44px) auto 0;padding:7px;border-radius:30px;background:#fff;box-shadow:0 26px 50px -30px rgba(12,13,15,.5),inset 0 0 0 1px rgba(12,13,15,.06)}
.tst__thumb{position:absolute;top:7px;bottom:7px;left:7px;width:calc((100% - 14px) / 4);border-radius:24px;background:var(--ink);transform:translate3d(calc(var(--at) * 100%),0,0);transition:transform .6s var(--ease-punch)}
.tst__tab{position:relative;z-index:1;appearance:none;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:84px;padding:8px 4px;border-radius:24px;color:var(--ink);font:inherit;font-size:var(--fs-body);font-weight:600;transition:color .35s var(--ease-out)}
.tst__tab b{font-size:var(--fs-sub);font-weight:800;font-stretch:72%;line-height:1.05;font-variant-numeric:tabular-nums;transition:transform .45s var(--ease-punch)}
.tst__tab.is-on{color:var(--paper)}
.tst__tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.tst__tab:not(.is-on):hover b{transform:translate3d(0,-3px,0) scale(1.1)}}
.tst__frame{position:relative;margin-top:clamp(40px,4.6vw,68px)}
.tst__stage{position:relative;height:calc(var(--phone) + 16px);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;transform-origin:50% 60%}
.tst__stage.is-grabbing,.tst__stage.is-grabbing .tst__hit{cursor:grabbing}
.tst__card{position:absolute;left:50%;top:0;width:var(--w);margin:0 0 0 calc(var(--w) / -2);transform-origin:50% 50%;visibility:hidden}
.tst__card[hidden]{display:none}
.tst__phone{position:relative;height:var(--phone);box-sizing:border-box;padding:8px;border-radius:44px;overflow:hidden;background:linear-gradient(150deg,#4A4F58,#0C0D0F 34%,#1D2026 70%,#3A3E46);box-shadow:0 44px 70px -32px rgba(12,13,15,.75),inset 0 0 0 1px rgba(241,239,234,.14)}
.tst__screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#fff}
.tst__status{height:26px;display:grid;place-items:center;background:#fff}
.tst__status i{width:68px;height:18px;margin-top:6px;border-radius:10px;background:var(--ink)}
.tst__embed{position:relative;height:calc((var(--w) - 16px) * 630 / 340);overflow:hidden;background:#fff}
.tst__embed img{display:block;width:100%;height:100%;object-fit:cover}
.tst__dim{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out)}
.tst__card:not(.is-c) .tst__dim{opacity:.22}
.tst__shine{position:absolute;top:-20%;bottom:-20%;left:0;width:45%;opacity:0;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));transform:translateX(-120%) skewX(-12deg)}
.tst__card.hit .tst__shine{animation:card-shine 1s cubic-bezier(.3,.1,.2,1)}
.tst__card.hit .tst__phone{animation:tst-land .5s var(--ease-punch)}
@keyframes tst-land{0%{transform:scale(.965)}100%{transform:none}}
.tst__hit{position:absolute;inset:0;width:100%;border:0;padding:0;background:none;cursor:pointer;border-radius:44px}
.tst__hit:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.tst__ctrl{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,18px);margin-top:clamp(22px,2.6vw,36px);padding:0 var(--gutter)}
.tst .hnav{position:relative;top:auto;left:auto;right:auto;margin:0;flex:none;background:var(--paper);color:var(--ink);z-index:auto;box-shadow:0 14px 26px -14px rgba(12,13,15,.7)}
.tst__now{position:relative;overflow:hidden;flex:0 1 330px;min-width:0;min-height:68px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:8px 16px 11px;border-radius:24px;background:var(--paper);color:var(--ink);font-size:var(--fs-body);text-align:center;box-shadow:0 14px 26px -14px rgba(12,13,15,.7)}
.tst__now b{font-weight:800}
.tst__prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(84,153,205,.28)}
.tst__prog i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-out)}
.tst:not(.is-seen) .hnav--next{animation:hnav-nudge 2.4s var(--ease-io) 1.2s infinite}
@media (hover:none){.tst__phone{box-shadow:0 20px 30px -18px rgba(12,13,15,.7),inset 0 0 0 1px rgba(241,239,234,.14)}}
@media (max-width:760px){
  .tst{--w:min(66vw,270px)}
  .tst__tabs{padding:5px;border-radius:24px}
  .tst__thumb{top:5px;bottom:5px;left:5px;width:calc((100% - 10px) / 4);border-radius:20px}
  .tst__tab{min-height:72px;border-radius:20px}
  .tst__phone{border-radius:38px}
  .tst__screen{border-radius:30px}
  .tst__hit{border-radius:38px}
}
@media (prefers-reduced-motion:reduce){.tst .hnav--next,.tst__card.hit .tst__phone,.tst__card.hit .tst__shine{animation:none}.tst__title .acc__line path{stroke-dashoffset:0}.tst__thumb{transition:none}}

/* the real sales films: YouTube's own designed covers, shown as they are, and the player replaces them on press */
.vsl--yt .vsl__frame img{filter:none;transform:none}
.vsl--yt:hover .vsl__frame img{transform:scale(1.02)}
.vsl--yt .vsl__frame::after{display:none}
.vsl--yt .vsl__frame:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
html:not(.has-cursor) body:not(.has-cursor) .vsl--yt[data-cursor]{cursor:pointer}
.vsl--yt .vsl__frame iframe{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s var(--ease-out)}
.vsl--yt.is-ready .vsl__frame iframe{opacity:1}
.vsl__sound{position:absolute;inset:0;z-index:4;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer;border-radius:inherit}
.vsl__sound[hidden]{display:none}
/* the basket button: appears once something is in the basket, floats over the header and the sticky treatments bar */
.cartbtn{position:fixed;z-index:60;top:18px;right:clamp(12px,2vw,28px);width:52px;height:52px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(12,13,15,.85);transition:opacity .3s var(--ease-out);animation:cart-in .55s var(--ease-punch) both}
.cartbtn[hidden]{display:none}
.cartbtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cartbtn__n{position:absolute;top:-4px;right:-4px;min-width:24px;height:24px;box-sizing:border-box;padding:0 6px;border-radius:12px;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-size:var(--fs-body);font-weight:800;line-height:1;box-shadow:0 0 0 2px var(--paper)}
.cartbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html.modal-open .cartbtn,html.igbox-open .cartbtn,body:not(.intro-done) .cartbtn{opacity:0;pointer-events:none}
@keyframes cart-in{0%{transform:scale(.4)}100%{transform:none}}
@media (hover:hover) and (pointer:fine){.cartbtn:hover{transform:scale(1.06)}}
@media (max-width:760px){.cartbtn{top:14px;width:46px;height:46px}}
@media (prefers-reduced-motion:reduce){.cartbtn{animation:none}}
.vsl__sound span{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;background:var(--paper);font-weight:700;line-height:1;box-shadow:0 18px 40px -16px rgba(12,13,15,.75);animation:vsl-sound 2.4s var(--ease-io) infinite}
.vsl__sound svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vsl__sound:focus-visible span{outline:2px solid var(--accent);outline-offset:3px}
@keyframes vsl-sound{0%,100%{transform:none}50%{transform:scale(1.05)}}
.vsl--yt.is-on .vsl__play{opacity:0;visibility:hidden;transition:opacity .3s}
/* /live: the cover's 40% fills the centre, so the button waits in the free corner */
.vsl--live .vsl__play{left:93%;top:86%;width:clamp(44px,7.2vw,76px)}
/* /thank-you: the cover already draws a play button; the ripples leave from that one */
.vsl--thanks .vsl__play{left:81.8%;top:71.8%;width:11.3%}
.vsl--thanks .vsl__btn{display:none}
@media (max-width:760px){.vsl--live .vsl__play{left:91.5%;top:85%;width:40px}}