/* ─────────────────────────────────────────────
   goodlys v2 — 3D + motion layer
   Sits on top of the original styles; same font, palette and content.
   ───────────────────────────────────────────── */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:64px;
}
[hidden]{display:none!important}
html{overflow-x:clip}
body{overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
html.has-motion{scroll-behavior:auto}
::selection{background:var(--g);color:#fff}
section[id],header[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

/* split words (headline reveals) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .06em .24em;margin:-.06em -.06em -.24em}
.split-done .w{overflow:visible}
.wi{display:inline-block;will-change:transform}

/* scroll progress */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:300;
  background:linear-gradient(90deg,var(--g),var(--gold));
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
}

/* ── NAV ── */
nav{
  background:rgba(246,245,240,.72);
  -webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);
  border-bottom-color:transparent;
  transition:transform .7s var(--ease-out),opacity .9s ease .15s,border-color .3s,background .3s;
}
nav.nav-scrolled{border-bottom-color:var(--border);background:rgba(246,245,240,.82)}
/* Download App panel slides open instead of popping */
.nav-dropdown{
  display:flex;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-10px) scale(.96);transform-origin:top right;
  transition:opacity .25s ease,transform .45s var(--ease-out),visibility 0s linear .45s;
}
.nav-dropdown.open{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .25s ease,transform .45s var(--ease-out),visibility 0s;
}
.nav-drop-link{transition:background .15s,transform .35s var(--ease-out)}
.nav-drop-link:hover{transform:translateX(3px)}
.logo img{transition:transform .6s var(--ease-out)}
.logo:hover img{transform:rotate(-8deg) scale(1.08)}

/* ── HERO ── */
.hero{
  max-width:1240px;
  min-height:calc(100svh - var(--nav-h));
  display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:1rem 3vw;
  padding:32px 6vw 80px;
  text-align:left;position:relative;
}
.hero-copy{position:relative;z-index:2;will-change:transform}
.hero-label{margin-bottom:1.6rem}
.hero-title{
  font-size:clamp(2.5rem,5.2vw,4.5rem);
  letter-spacing:-.05em;line-height:1.0;margin-bottom:1.6rem;
}
.hero-sub{margin:0 0 2.4rem;max-width:470px}
.nowrap{white-space:nowrap}

/* ── DOWNLOAD CTA ── */
/* the visitor's own store (detected on phones) is the brand-green button */
.dl{position:relative}
.dl-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.dl-btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:.8rem;
  height:60px;padding:0 1.4rem 0 1.15rem;border-radius:18px;
  background:var(--dark);color:#fff;text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 14px 30px -14px rgba(46,58,52,.7);
  transition:background .35s ease,box-shadow .35s ease;
}
.dl-btn::before{ /* shine sweep */
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-18deg);transition:left .8s var(--ease-out);
}
.dl-btn:hover{background:#24302a;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 20px 36px -14px rgba(46,58,52,.75),0 0 0 4px rgba(111,143,122,.18)}
.dl-btn:hover::before{left:120%}
.dl-btn:focus-visible{outline:3px solid var(--g);outline-offset:3px}
.dl-btn.is-primary{background:var(--g);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 30px -12px rgba(111,143,122,.8)}
.dl-btn.is-primary:hover{background:#63826e}
.dl-btn.is-primary .dl-txt small{opacity:.85}
.dl-ico{width:36px;height:36px;flex-shrink:0;border-radius:9px;transition:transform .6s var(--ease-out)}
.dl-ico-ios{display:block;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.dl-ico-tile{display:grid;place-items:center;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.dl-ico-tile img{width:24px;height:24px;display:block;margin-left:2px}
.nav-drop-ico{width:22px;height:22px;border-radius:6px;flex-shrink:0;display:block}
.nav-drop-tile{display:grid;place-items:center;background:#fff;border:1px solid var(--border)}
.nav-drop-tile img{width:15px;height:15px;margin-left:1px}
.dl-btn:hover .dl-ico{transform:scale(1.12) rotate(-6deg)}
.dl-txt{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.dl-txt small{font-size:.7rem;font-weight:600;letter-spacing:.02em;opacity:.7}
.dl-txt b{font-size:1.12rem;font-weight:800;letter-spacing:-.025em}

.dl-qr-toggle{
  display:inline-flex;align-items:center;gap:.5rem;height:60px;padding:0 1.1rem;border-radius:18px;
  font-family:'Manrope',sans-serif;font-size:.8rem;font-weight:700;color:var(--text);cursor:pointer;
  background:rgba(255,255,255,.7);border:1.5px dashed rgba(46,58,52,.25);
  transition:border-color .3s,background .3s,color .3s;
}
.dl-qr-toggle svg{width:22px;height:22px}
.dl-qr-toggle:hover,.dl-qr-toggle[aria-expanded="true"]{border-style:solid;border-color:var(--g);color:var(--g);background:#fff}
.dl-qr-toggle:focus-visible{outline:3px solid var(--g);outline-offset:3px}

.dl-qr{
  position:absolute;left:0;top:calc(100% + 14px);z-index:20;width:236px;
  background:#fff;border:1px solid var(--border);border-radius:22px;padding:14px 14px 16px;
  box-shadow:0 30px 60px -24px rgba(46,58,52,.45);
  transform-origin:50% -10px;animation:qr-in .45s var(--ease-out);
}
.dl-qr::before{content:'';position:absolute;top:-7px;left:var(--arrow,40px);width:12px;height:12px;background:#fff;border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}
@keyframes qr-in{from{opacity:0;transform:translateY(-8px) scale(.94)}to{opacity:1;transform:none}}
.dl-qr-tabs{display:flex;background:var(--bg);border-radius:12px;padding:3px;margin-bottom:12px}
.dl-qr-tabs button{
  flex:1;border:none;background:transparent;border-radius:9px;padding:7px 0;cursor:pointer;
  font-family:'Manrope',sans-serif;font-size:.74rem;font-weight:700;color:var(--muted);transition:background .25s,color .25s;
}
.dl-qr-tabs button.is-active{background:#fff;color:var(--text);box-shadow:0 1px 4px rgba(46,58,52,.12)}
.dl-qr-code{aspect-ratio:1;width:100%;display:grid;place-items:center;border-radius:14px;background:#fff}
.dl-qr-code svg{width:100%;height:100%;display:block}
.dl-qr-note{font-size:.72rem;line-height:1.5;color:var(--muted);text-align:center;margin-top:10px}

.hero-stage{position:relative;height:min(76svh,640px);min-height:380px}
.hero-stage::before{ /* soft brand halo behind the bag */
  content:'';position:absolute;left:50%;top:52%;width:min(92%,560px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(111,143,122,.2) 0%,rgba(198,179,106,.08) 45%,rgba(246,245,240,0) 70%);
  pointer-events:none;
}
.hero-stage canvas{
  position:absolute;left:-12%;top:-8%;width:124%;height:114%;
  display:block;touch-action:pan-y;cursor:grab;
  opacity:0;transition:opacity 1s ease;
}
.hero-stage canvas:active{cursor:grabbing}
.hero-fallback{
  position:absolute;left:50%;top:50%;width:auto;height:82%;max-width:100%;object-fit:contain;
  transform:translate(-50%,-50%);transition:opacity .8s ease;
  filter:drop-shadow(0 30px 40px rgba(46,58,52,.18));
}
.hero-stage.is-3d canvas{opacity:1}
/* the photo is only a fallback: hidden while the 3D bag loads, shown if WebGL or the CDN fails */
.hero-fallback{opacity:0;pointer-events:none}
.hero-stage.no-webgl .hero-fallback{opacity:1}
.hero-stage.no-webgl canvas{display:none}
.hero-hint{
  position:absolute;left:50%;bottom:2%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--border);border-radius:50px;padding:.45rem .9rem;
  opacity:0;transition:opacity .8s ease 1.4s;pointer-events:none;
}
.hero-hint-icon{font-size:.9rem;letter-spacing:0;display:inline-block;animation:hint-spin 3s var(--ease-out) infinite}
@keyframes hint-spin{0%,40%{transform:rotate(0)}80%,100%{transform:rotate(-360deg)}}
.hero-stage.is-3d .hero-hint{opacity:1}

.scroll-cue{
  position:absolute;left:6vw;bottom:26px;display:flex;align-items:center;gap:.7rem;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none;
}
.scroll-cue-line{width:44px;height:1px;background:var(--border);position:relative;overflow:hidden}
.scroll-cue-line::after{content:'';position:absolute;inset:0;background:var(--g);transform:translateX(-100%);animation:cue 2.2s var(--ease-out) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ── HOW IT WORKS: stacking 3D cards ── */
.how{max-width:1080px;padding:120px 6vw 120px}
.how-top{display:flex;flex-direction:column;gap:1rem;margin-bottom:3.2rem}
.how-top .section-label{margin-bottom:0}
.how-head{
  font-size:clamp(2.3rem,5.4vw,4.2rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--text);
}
.steps-stack{display:flex;flex-direction:column;gap:22px;margin-bottom:6.5rem}
.step-card{position:sticky;top:calc(var(--nav-h) + 28px + var(--i) * 18px)}
.step-card-inner{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:1.5rem 2.5rem;
  min-height:clamp(270px,40vh,360px);
  padding:clamp(1.6rem,4vw,3.2rem);
  border-radius:30px;background:#fff;border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 40px 70px -40px rgba(46,58,52,.45);
  transform-origin:50% 0;will-change:transform;
}
.step-card:nth-child(2) .step-card-inner{background:var(--g);border-color:transparent;color:#fff}
.step-card:nth-child(3) .step-card-inner{background:var(--dark);border-color:transparent;color:#fff}
.step-big{
  position:absolute;right:-.02em;top:-.2em;z-index:-1;
  font-size:clamp(9rem,24vw,17rem);font-weight:800;letter-spacing:-.08em;line-height:1;
  color:currentColor;opacity:.07;pointer-events:none;
}
.step-card .step-num{font-size:.72rem;letter-spacing:.16em;margin-bottom:1.2rem}
.step-card:nth-child(n+2) .step-num{color:rgba(255,255,255,.7)}
.step-card:nth-child(3) .step-num{color:var(--gold)}
.step-card h3{
  font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;
  margin-bottom:.8rem;color:inherit;
}
.step-card p{font-size:clamp(.92rem,1.4vw,1.05rem);line-height:1.7;max-width:470px;color:var(--muted)}
.step-card:nth-child(n+2) p{color:rgba(255,255,255,.72)}
.step-icon{
  width:clamp(64px,8vw,88px);height:clamp(64px,8vw,88px);border-radius:24px;
  display:grid;place-items:center;background:rgba(111,143,122,.12);color:var(--g);
}
.step-card:nth-child(n+2) .step-icon{background:rgba(255,255,255,.12);color:#fff}
.step-card:nth-child(3) .step-icon{color:var(--gold)}
.step-icon svg{width:44%;height:44%}
.step-shade{position:absolute;inset:0;background:#1d2621;opacity:0;pointer-events:none;border-radius:inherit}

/* ── BAG WIDGET upgrades ── */
.bag-widget{max-width:720px}
.bw-intro{font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:800;letter-spacing:-.04em;margin-bottom:.6rem}
.bw-sub{font-size:.9rem;max-width:400px}
.bw-bottom{border-radius:24px;box-shadow:0 30px 60px -30px rgba(46,58,52,.35);transform-style:preserve-3d}
.bw-bag-photo{filter:drop-shadow(0 18px 22px rgba(46,58,52,.18))}
.bw-item-card{border-radius:14px;will-change:transform}
.bw-discount-price{font-size:2.4rem}

/* ── SUPPORTED BY ── */
.backers{border-top:1px solid var(--border);padding:clamp(40px,6vw,64px) 6vw}
.backers-inner{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:2.5rem}
.backers .section-label{margin:0;white-space:nowrap}
.backers-list{list-style:none;flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.backer{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  height:84px;padding:0 1.2rem;border-radius:20px;overflow:hidden;
  background:#fff;border:1px solid var(--border);
  transition:transform .5s var(--ease-out),box-shadow .4s,border-color .3s;
}
.backer:hover{transform:translateY(-3px);border-color:rgba(111,143,122,.45);box-shadow:0 18px 36px -22px rgba(46,58,52,.4)}
.backer-logo{display:block;width:auto;flex-shrink:0}
.backer-aws{height:32px;margin-top:5px}
.backer-azure{height:30px}
.backer-rize{height:24px;max-width:100%}
.backer-name{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;color:#232F3E;white-space:nowrap}
@media(max-width:768px){
  .backers{padding:40px 5vw}
  .backers-inner{flex-direction:column;align-items:stretch;gap:1.1rem}
  .backers-list{grid-template-columns:1fr;gap:10px}
  .backer{height:68px;border-radius:18px}
}

/* ── TRUST ── */
.trust{padding:80px 6vw}
.trust-inner{max-width:1000px}
.trust-num{font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.trust-bar{width:40px}

/* ── PROMISE ── */
.promise{max-width:1100px}
.promise-item{transition:background .3s}
.pi-icon{transition:transform .5s var(--ease-out),background .3s}
.promise-item:hover .pi-icon{transform:rotate(-8deg) scale(1.1);background:rgba(111,143,122,.2)}
@media(min-width:900px){
  .promise{display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:start;padding:130px 6vw}
  .promise-intro{position:sticky;top:calc(var(--nav-h) + 48px)}
  .promise h2{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.045em;line-height:1.1}
  .promise-item{padding:1.6rem 0}
  .pi-title{font-size:1.02rem}
  .pi-body{font-size:.9rem}
}

/* ── PARTNER ── */
.partner{padding:120px 6vw;overflow:hidden}
.partner-inner{max-width:1000px}
.partner-head{font-size:clamp(2.1rem,4.8vw,3.8rem);letter-spacing:-.05em;line-height:1.02}

/* ── PARTNER APP WALKTHROUGH ── */
.pflow{margin-bottom:4rem}
.pflow-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem 4rem;align-items:center;
}
.pflow-steps{list-style:none;display:flex;flex-direction:column;gap:.35rem;counter-reset:none}
.pflow-step{
  width:100%;display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:start;
  text-align:left;font-family:'Manrope',sans-serif;color:#fff;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:18px;padding:1rem 1.1rem;
  transition:background .4s,border-color .4s;
}
.pflow-step:hover{background:rgba(255,255,255,.04)}
.pflow-step:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.pflow-step.is-active{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.pflow-badge{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-size:.72rem;font-weight:800;color:rgba(255,255,255,.6);
  border:1.5px solid rgba(255,255,255,.18);transition:background .4s,border-color .4s,color .4s,transform .6s var(--ease-out);
}
.pflow-step.is-done .pflow-badge{border-color:var(--g);color:var(--g)}
.pflow-step.is-active .pflow-badge{background:var(--g);border-color:var(--g);color:#fff;transform:scale(1.08)}
.pflow-step.is-active .pflow-badge-live{background:var(--gold);border-color:var(--gold);color:var(--dark)}
.pflow-text{display:flex;flex-direction:column;min-width:0;padding-top:.28rem}
.pflow-text b{font-size:1rem;font-weight:700;letter-spacing:-.01em;color:rgba(255,255,255,.5);transition:color .4s}
.pflow-step.is-active .pflow-text b{color:#fff}
.pflow-desc{
  display:block;font-size:.84rem;line-height:1.6;color:rgba(255,255,255,.5);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--ease-out),opacity .4s ease,margin .6s var(--ease-out);
}
.pflow-step.is-active .pflow-desc{max-height:6em;opacity:1;margin-top:.35rem}
.pflow-bar{grid-column:2;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;opacity:0;margin-top:.7rem;transition:opacity .3s}
.pflow-bar i{display:block;height:100%;width:100%;background:var(--g);transform-origin:0 50%;transform:scaleX(0)}
.pflow.is-playing .pflow-step.is-active .pflow-bar{opacity:1}
.pflow.is-playing .pflow-step.is-active .pflow-bar i{animation:pflow-fill var(--dwell,3800ms) linear forwards}
@keyframes pflow-fill{to{transform:scaleX(1)}}

.pflow-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.4rem;perspective:1400px;padding:1rem 0}
.pflow-glow{
  position:absolute;left:50%;top:44%;width:130%;max-width:560px;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(111,143,122,.35),rgba(111,143,122,0) 62%);pointer-events:none;
  transition:background .8s ease;
}
.pflow.is-live .pflow-glow{background:radial-gradient(circle,rgba(198,179,106,.38),rgba(198,179,106,0) 62%)}
.phone{
  --rx:0deg;--ry:0deg;
  position:relative;width:clamp(230px,24vw,300px);
  padding:10px;border-radius:46px;
  background:linear-gradient(145deg,#3b4641,#161b18 45%,#2a322e);
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.08) inset,
    0 50px 80px -30px rgba(0,0,0,.7),
    0 20px 40px -20px rgba(0,0,0,.5);
  transform:rotateX(calc(4deg + var(--rx))) rotateY(calc(-12deg + var(--ry)));
  transform-style:preserve-3d;
}
.phone::before,.phone::after{ /* side buttons */
  content:'';position:absolute;width:3px;border-radius:2px;background:#2a322e;
}
.phone::before{left:-3px;top:22%;height:9%}
.phone::after{right:-3px;top:28%;height:14%}
.phone.is-bump{animation:phone-bump .7s var(--ease-out)}
@keyframes phone-bump{
  0%{transform:rotateX(calc(4deg + var(--rx))) rotateY(calc(-12deg + var(--ry)))}
  35%{transform:rotateX(calc(4deg + var(--rx))) rotateY(calc(-6deg + var(--ry))) translateY(-8px) scale(1.015)}
  100%{transform:rotateX(calc(4deg + var(--rx))) rotateY(calc(-12deg + var(--ry)))}
}
.phone-screen{
  position:relative;aspect-ratio:1290/2796;border-radius:37px;overflow:hidden;
  background:#F4F2EC;touch-action:pan-y;-webkit-user-select:none;user-select:none;
}
.phone-island{
  position:absolute;left:50%;top:19px;width:30%;height:22px;border-radius:14px;background:#0c0f0d;
  transform:translateX(-50%);pointer-events:none;
}
.pflow-shot{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transform:translateX(34%) scale(.94);
  transition:opacity .55s ease,transform .8s var(--ease-out);
  pointer-events:none;-webkit-user-drag:none;
}
.pflow-shot.is-before{transform:translateX(-22%) scale(.94)}
.pflow-shot.is-active{opacity:1;transform:none}
.pflow-dim{
  position:absolute;inset:0;background:rgba(20,26,23,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.pflow-toast{
  position:absolute;left:6%;right:6%;top:50%;
  transform:translateY(-50%) scale(.6);opacity:0;
  transition:transform .7s cubic-bezier(.3,1.6,.45,1),opacity .35s ease;
  pointer-events:none;
}
.pflow-toast img{display:block;width:100%;height:auto;border-radius:9%/20%;box-shadow:0 24px 50px -10px rgba(0,0,0,.5)}
.pflow.is-live .pflow-dim{opacity:1}
.pflow.is-live .pflow-toast{opacity:1;transform:translateY(-50%) scale(1);transition-delay:.25s}

.pflow-hot{
  position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  border:none;padding:0;background:transparent;cursor:pointer;z-index:2;
  transition:left .8s var(--ease-out),top .8s var(--ease-out);
}
.pflow-hot span,.pflow-hot::before,.pflow-hot::after{
  content:'';position:absolute;inset:0;border-radius:50%;
}
.pflow-hot span{inset:13px;background:var(--gold);box-shadow:0 0 0 3px rgba(255,255,255,.9),0 4px 10px rgba(0,0,0,.25)}
.pflow-hot::before,.pflow-hot::after{border:2px solid var(--gold);animation:hot-pulse 2s ease-out infinite}
.pflow-hot::after{animation-delay:1s}
@keyframes hot-pulse{from{transform:scale(.35);opacity:1}to{transform:scale(1.35);opacity:0}}
.pflow-hot:focus-visible{outline:2px solid #fff;outline-offset:3px}

.pflow-nav{display:flex;align-items:center;gap:1rem;position:relative}
.pflow-arrow{
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  font-family:'Manrope',sans-serif;font-size:1rem;font-weight:700;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  transition:background .3s,border-color .3s,transform .4s var(--ease-out);
}
.pflow-arrow:hover{background:var(--g);border-color:var(--g);transform:scale(1.06)}
.pflow-count{font-size:.72rem;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.45);min-width:3.5em;text-align:center;font-variant-numeric:tabular-nums}

@media(max-width:899px){
  .pflow-grid{grid-template-columns:1fr;gap:1.6rem}
  .pflow-stage{order:-1}
  .phone{width:min(58vw,250px);transform:rotateX(2deg) rotateY(-6deg)}
  .pflow-steps{gap:.1rem}
  .pflow-step{padding:.8rem .9rem}
}
@media (prefers-reduced-motion:reduce){
  .pflow-hot::before,.pflow-hot::after,.phone.is-bump{animation:none}
  .pflow-shot,.pflow-toast{transition:opacity .3s ease}
}

.pcalc{border-radius:24px}
/* sliders: a tall invisible hit area around a thin track, so they're easy to grab with a thumb */
.pcalc-range{height:34px;margin:0;display:block;background:transparent;border-radius:0}
.pcalc-range::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--g) var(--fill,50%),rgba(255,255,255,.14) var(--fill,50%));
}
.pcalc-range::-webkit-slider-thumb{margin-top:-9px;width:22px;height:22px}
.pcalc-range::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.pcalc-range::-moz-range-progress{height:4px;border-radius:2px;background:var(--g)}
.pcalc-range::-moz-range-thumb{width:22px;height:22px}
@media (pointer:coarse){
  .pcalc-range::-webkit-slider-thumb{margin-top:-11px;width:26px;height:26px}
  .pcalc-range::-moz-range-thumb{width:26px;height:26px}
}
.calc-res-num{font-variant-numeric:tabular-nums}
.pstep{position:relative}

/* cursor-follow spotlight */
.spot{position:relative;isolation:isolate}
.spot::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(111,143,122,.26),transparent 62%);
  opacity:0;transition:opacity .35s ease;
}
.spot:hover::after{opacity:1}
.step-card:nth-child(n+2) .spot::after{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 62%)}

/* ── CONTACT ── */
.contact{padding:120px 6vw}
.contact-head{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.05em;line-height:1.05}
.contact-item{overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .5s var(--ease-out)}
.contact-item:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(46,58,52,.4)}
.contact-arrow{margin-left:auto;font-size:1.2rem;color:var(--muted);transition:transform .5s var(--ease-out),color .3s}
.contact-item:hover .contact-arrow{transform:translateX(6px);color:var(--g)}

/* ── BIG WORDMARK ── */
.foot-word{
  position:relative;text-align:center;overflow:hidden;
  padding:clamp(40px,8vw,90px) 4vw 0;border-top:1px solid var(--border);
  user-select:none;-webkit-user-select:none;
}
.foot-word-text{
  display:block;font-size:clamp(5rem,25vw,23rem);font-weight:800;letter-spacing:-.075em;line-height:1;
  color:var(--dark);margin-top:-.12em;padding-bottom:.02em;
}
.foot-word{padding-bottom:clamp(20px,3.5vw,48px)}

/* ── CUSTOM CURSOR (fine pointers only, created by JS) ── */
.cursor{
  position:fixed;left:0;top:0;z-index:10001;pointer-events:none;
  width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  border:1.5px solid rgba(46,58,52,.55);
  display:grid;place-items:center;
  transition:width .45s var(--ease-out),height .45s var(--ease-out),margin .45s var(--ease-out),background .3s,border-color .3s,opacity .3s;
}
.cursor-label{font-size:.58rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s}
.cursor.is-link{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(111,143,122,.14);border-color:var(--g)}
.cursor.is-drag{width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--dark);border-color:var(--dark)}
.cursor.is-drag .cursor-label{opacity:1}
.cursor.is-dark{border-color:rgba(255,255,255,.6)}
.cursor.is-hidden{opacity:0}

/* ── RESPONSIVE ── */
@media(max-width:899px){
  .hero{
    grid-template-columns:1fr;text-align:center;
    min-height:0;padding:8px 5vw 72px;gap:0;
  }
  .hero-stage{order:-1;height:min(40svh,340px);min-height:250px;margin:0 -5vw .4rem}
  .hero-hint{display:none}
  .hero-stage canvas{left:0;top:-4%;width:100%;height:108%}
  .hero-fallback{height:88%}
  .hero-label{margin-bottom:1rem}
  .hero-title{font-size:clamp(2rem,8.6vw,3rem);margin-bottom:1rem}
  .hero-sub{margin:0 auto 1.6rem;font-size:.95rem;line-height:1.6;max-width:30em;text-wrap:balance}
  .hero-sub br{display:none}
  .dl-row{justify-content:center}
  .dl-qr-toggle,.dl-qr{display:none!important}
  .scroll-cue{display:none}

}
@media(max-width:768px){
  :root{--nav-h:56px}
  .how{padding:72px 5vw 80px}
  .how-top{margin-bottom:2rem}
  .steps-stack{gap:16px;margin-bottom:4.5rem}
  .step-card{top:calc(var(--nav-h) + 16px + var(--i) * 12px)}
  .step-card-inner{grid-template-columns:1fr;align-items:start;border-radius:24px;min-height:0}
  .step-icon{order:-1;width:56px;height:56px;border-radius:18px}
  .trust{padding:56px 5vw}
  .promise{padding:72px 5vw}
  .partner{padding:72px 5vw}
  .contact{padding:72px 5vw}
  .bw-discount-price{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){
  .hero-hint-icon,.scroll-cue-line::after{animation:none}
}
@media (hover:none){.dl-qr-toggle,.dl-qr{display:none!important}}
@media(max-width:480px){
  .dl-row{flex-wrap:nowrap;gap:.6rem}
  .dl-btn{flex:1 1 0;min-width:0;justify-content:center;height:58px;padding:0 .8rem;gap:.6rem;border-radius:16px}
  .dl-ico{width:32px;height:32px;border-radius:8px}
  .dl-ico-tile img{width:21px;height:21px}
  .dl-txt small{font-size:.66rem}
  .dl-txt b{font-size:.98rem;white-space:nowrap}
}

/* ── Touch-friendly hit areas (stress-test findings) ── */
.nav-link{padding:.7rem .3rem}
.bw-reset{min-height:40px;padding:.45rem 1.1rem}
.pflow-arrow{width:44px;height:44px}
.scroll-cue{padding:.6rem 0}
@media(max-width:899px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .nav-btn{min-height:40px}
}
/* very small phones (iPhone SE 1st gen, small Androids): stack the store buttons */
@media(max-width:359px){
  .hero-title{font-size:1.85rem}
  .dl-row{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  .dl-btn{flex:none;width:100%}
}
/* phones held sideways: side-by-side hero so the headline isn't pushed off-screen */
@media(max-width:899px) and (orientation:landscape) and (max-height:520px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);text-align:left;gap:0 4vw;padding:12px 5vw 40px;min-height:calc(100svh - var(--nav-h))}
  .hero-stage{order:0;height:calc(100svh - var(--nav-h) - 40px);min-height:0;margin:0}
  .hero-title{font-size:clamp(1.6rem,4.4vw,2.3rem);margin-bottom:.7rem}
  .hero-sub{margin:0 0 1.1rem;font-size:.85rem;text-wrap:pretty}
  .dl-row{justify-content:flex-start}
  .dl-btn{flex:0 1 auto;height:52px}
}

/* community + Instagram cards */
.contact-icon-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.contact-item-featured{background:var(--dark);border-color:var(--dark)}
.contact-item-featured .contact-title{color:rgba(255,255,255,.6)}
.contact-item-featured .contact-val{color:#fff}
.contact-item-featured:hover{border-color:var(--g)}
.contact-item-featured.spot::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),transparent 62%)}
.contact-cta{
  margin-left:auto;flex-shrink:0;padding:.55rem 1.1rem;border-radius:50px;
  background:#25D366;color:#fff;font-size:.8rem;font-weight:800;letter-spacing:.02em;
  transition:transform .5s var(--ease-out),background .3s;
}
.contact-item-featured:hover .contact-cta{transform:translateX(4px);background:#1fbe5b}
.foot-legal{display:inline-block;padding:.6rem 0}
@media(max-width:400px){.contact-item{padding:1.1rem 1.1rem;gap:.9rem}.contact-cta{padding:.5rem .85rem}}

/* ── STAY UPDATED (opt-in form) ── */
.signup{padding:clamp(56px,8vw,110px) 6vw 0}
.signup-card{
  position:relative;overflow:hidden;max-width:1000px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2.5rem 3.5rem;align-items:center;
  background:var(--dark);color:#fff;border-radius:30px;padding:clamp(1.8rem,4.5vw,3.4rem);
  box-shadow:0 40px 80px -40px rgba(46,58,52,.6);
}
.signup-card::before{
  content:'';position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(111,143,122,.35),rgba(111,143,122,0) 65%);pointer-events:none;
}
.signup .section-label{color:var(--gold);margin-bottom:1rem}
.signup-head{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:800;letter-spacing:-.05em;line-height:1.02;margin-bottom:.9rem}
.signup-sub{font-size:.98rem;line-height:1.65;color:rgba(255,255,255,.62);max-width:380px}
.signup-form{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field:first-of-type{grid-column:1 / -1}
.field-label{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.field input,.field-phone{
  width:100%;height:52px;border-radius:14px;border:1.5px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:#fff;font-family:'Manrope',sans-serif;font-size:1rem;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.field input{padding:0 1rem;outline:none}
.field input::placeholder{color:rgba(255,255,255,.3)}
.field input:focus,.field-phone:focus-within{border-color:var(--g);background:rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(111,143,122,.25)}
.field input[aria-invalid="true"]{border-color:#e8836f}
.field-phone{display:flex;align-items:center;overflow:hidden}
.field-phone input{height:100%;border:none;background:transparent;border-radius:0;padding-left:.6rem}
.field-phone input:focus{box-shadow:none;background:transparent}
.field-prefix{padding-left:1rem;font-weight:700;color:rgba(255,255,255,.55);flex-shrink:0}
.signup-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.signup-consent{
  grid-column:1 / -1;display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;
  font-size:.78rem;line-height:1.55;color:rgba(255,255,255,.6);margin-top:.2rem;
}
.signup-consent input{width:20px;height:20px;flex-shrink:0;margin-top:1px;accent-color:var(--g);cursor:pointer}
.signup-consent a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.signup-btn{
  grid-column:1 / -1;height:56px;border:none;border-radius:16px;cursor:pointer;
  background:var(--g);color:#fff;font-family:'Manrope',sans-serif;font-size:1rem;font-weight:800;letter-spacing:-.01em;
  box-shadow:0 14px 30px -14px rgba(111,143,122,.9);transition:background .25s,transform .4s var(--ease-out);
}
.signup-btn:hover{background:#63826e;transform:translateY(-2px)}
.signup-btn:disabled{opacity:.7;cursor:progress;transform:none}
.signup-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.signup-error{grid-column:1 / -1;font-size:.84rem;font-weight:600;color:#f1a391}
.signup-done{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;outline:none;animation:qr-in .6s var(--ease-out)}
.signup-done-check{width:52px;height:52px;border-radius:50%;background:var(--g);display:grid;place-items:center;color:#fff;margin-bottom:.4rem}
.signup-done-check svg{width:24px;height:24px}
.signup-done-head{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.04em;line-height:1.1}
.signup-dl{margin-top:.8rem}
.signup .dl-btn{background:#fff;color:var(--dark);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.signup .dl-btn:hover{background:#F1EEE6}
.signup .dl-btn.is-primary{background:var(--g);color:#fff}
.signup .dl-ico-tile{box-shadow:0 0 0 1px var(--border)}
@media(max-width:768px){
  .signup{padding:56px 5vw 0}
  .signup-card{grid-template-columns:1fr;border-radius:24px;gap:1.8rem}
  .signup-form{grid-template-columns:1fr}
  .signup-done{align-items:stretch}
}
@media(max-width:480px){
  .signup-dl{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  .signup-dl .dl-btn{flex:none;width:100%;height:58px}
}
.dl-txt small{white-space:nowrap}

/* ── COOKIE CONSENT ── */
.consent{
  position:fixed;z-index:500;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:min(400px,calc(100vw - 32px));
  background:#fff;color:var(--text);border:1px solid var(--border);border-radius:20px;padding:1.1rem 1.1rem 1rem;
  box-shadow:0 24px 60px -20px rgba(46,58,52,.45);
  animation:consent-in .6s var(--ease-out);
}
@keyframes consent-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.consent p{font-size:.84rem;line-height:1.55;color:var(--muted);margin-bottom:.9rem}
.consent a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.consent-actions{display:flex;gap:.6rem}
.consent-btn{
  flex:1;height:44px;border-radius:12px;cursor:pointer;font-family:'Manrope',sans-serif;font-size:.86rem;font-weight:700;
  transition:background .2s,border-color .2s;
}
.consent-decline{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.consent-decline:hover{border-color:var(--muted)}
.consent-accept{background:var(--dark);border:1.5px solid var(--dark);color:#fff}
.consent-accept:hover{background:var(--g);border-color:var(--g)}

/* ── Hero 3D: over a treat the cursor becomes a small name pill beside the pointer, so it never hides the treat ── */
.cursor.is-drag.is-treat{width:118px;height:30px;margin:22px 0 0 10px;border-radius:15px;background:var(--dark);border-color:var(--dark)}
.cursor.is-treat .cursor-label{letter-spacing:.12em;white-space:nowrap}

/* ── How it works: a dessert from the hero bag lands on each card ── */
.step-treat{position:absolute;z-index:3;top:0;right:clamp(18px,6vw,84px);width:clamp(92px,13vw,164px);pointer-events:none;transform:translateY(-30%)}
.step-card:nth-child(2) .step-treat{right:clamp(18px,14vw,220px)}
.step-treat-drop{display:block}
.step-treat img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 14px rgba(29,38,33,.26));animation:treat-float 5s ease-in-out infinite}
.step-card:nth-child(2) .step-treat img{animation-delay:-1.6s}
.step-card:nth-child(3) .step-treat img{animation-delay:-3.2s}
@keyframes treat-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@media (max-width:760px){.step-treat{width:84px;right:14px;transform:translateY(14%)}.step-card:nth-child(2) .step-treat{right:14px}}
@media (prefers-reduced-motion:reduce){.step-treat img{animation:none}}

/* ── Footer: 3D model credits (CC BY 4.0), one click away ── */
.foot-credits{font-size:.72rem;color:#6f6a63;text-align:right;max-width:340px}
.foot-credits summary{cursor:pointer;list-style:none;display:inline-block;padding:.6rem 0;transition:color .2s}
.foot-credits summary::-webkit-details-marker{display:none}
.foot-credits summary:hover,.foot-credits[open] summary{color:var(--text)}
.foot-credits p{line-height:1.5;padding-bottom:.4rem}
.foot-credits a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ── Customer journey: one evening with the app, as a timeline with a running clock.
   Phones: a native swipe rail. Desktop: the page scroll walks the timeline sideways while the section holds still. ── */
.cj{
  --w:min(58vw,236px);
  position:relative;width:100vw;margin:0 calc(50% - 50vw) 5.5rem;
}
.cj-pin{display:flex;flex-direction:column;justify-content:center}
.cj-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  width:min(1080px,100%);margin:0 auto 2.4rem;padding:0 6vw;
}
.cj-head .app-flow-label{margin-bottom:.9rem}
.cj-title{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.045em;line-height:1.06;color:var(--text)}
.cj-clock{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;flex-shrink:0}
.cj-clock-time{font-size:clamp(2.4rem,5.4vw,4.4rem);font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--text);font-variant-numeric:tabular-nums}
.cj-clock-num{display:inline-block;transition:transform .5s var(--ease-out),opacity .3s}
.cj-clock-num.is-tick{animation:cj-tick .55s var(--ease-out)}
@keyframes cj-tick{0%{transform:translateY(40%);opacity:0}100%{transform:none;opacity:1}}
.cj-clock-ampm{font-size:.38em;letter-spacing:-.02em;color:var(--muted)}
.cj-clock-sub{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cj-clock-sub b{color:var(--g)}

.cj-rail{
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:1.2rem calc(50vw - var(--w) / 2 - 30px) 1.4rem;outline:none;
}
.cj-rail::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){.cj:not(.is-pinned) .cj-rail{cursor:grab}}
.cj-rail.is-dragging{cursor:grabbing;scroll-snap-type:none;-webkit-user-select:none;user-select:none}
.cj-rail:focus-visible{box-shadow:inset 0 0 0 2px var(--g)}
.cj-track{position:relative;width:max-content}
.cj-stops{display:flex;list-style:none;margin:0;padding:0}
.cj-stop{
  width:calc(var(--w) + 60px);display:flex;flex-direction:column;align-items:center;
  scroll-snap-align:center;cursor:pointer;
}
.cj-shot{
  position:relative;width:var(--w);aspect-ratio:720/1477;margin:0;border-radius:calc(var(--w) * .13);
  overflow:hidden;background:#fff;
  box-shadow:0 0 0 6px #fff,0 0 0 7px var(--border),0 34px 50px -30px rgba(46,58,52,.5);
  transform:scale(.86) rotate(var(--tilt,-2deg));opacity:.5;
  transition:transform .8s var(--ease-out),opacity .5s ease,box-shadow .5s ease;
}
.cj-stop:nth-child(even) .cj-shot{--tilt:2deg}
.cj-shot img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.cj-stop.is-on .cj-shot{transform:none;opacity:1;box-shadow:0 0 0 6px #fff,0 0 0 7px var(--border),0 44px 70px -34px rgba(46,58,52,.6)}
.cj-stamp{
  position:absolute;left:50%;top:15%;padding:.45rem .9rem;border:2.5px solid var(--g);border-radius:8px;
  background:rgba(246,245,240,.92);color:var(--g);font-size:.8rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  transform:translate(-50%,-50%) rotate(-14deg) scale(1.8);opacity:0;
  transition:transform .5s cubic-bezier(.3,1.6,.5,1) .5s,opacity .2s ease .5s;
}
.cj-stop.is-on .cj-stamp{transform:translate(-50%,-50%) rotate(-14deg) scale(1);opacity:1}

/* the route: dashed ahead, solid behind, a dot per stop */
.cj-line{
  position:absolute;left:calc(var(--w) / 2 + 30px);right:calc(var(--w) / 2 + 30px);
  top:calc(var(--w) * 2.0514 + 30px);height:2px;margin-top:-1px;
  background:repeating-linear-gradient(90deg,rgba(46,58,52,.28) 0 6px,transparent 6px 12px);
}
.cj-line i{position:absolute;inset:0;background:var(--g);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.cj-dot{
  position:relative;z-index:1;width:14px;height:14px;margin:23px 0 14px;border-radius:50%;
  background:var(--bg);border:2px solid rgba(46,58,52,.3);transition:background .4s,border-color .4s,transform .5s var(--ease-out);
}
.cj-stop.is-past .cj-dot,.cj-stop.is-on .cj-dot{background:var(--g);border-color:var(--g)}
.cj-stop.is-on .cj-dot{transform:scale(1.35);box-shadow:0 0 0 6px rgba(111,143,122,.18)}
.cj-stop--last.is-on .cj-dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 6px rgba(198,179,106,.25)}
.cj-cap{max-width:calc(var(--w) + 30px);text-align:center;opacity:.45;transition:opacity .5s}
.cj-stop.is-on .cj-cap{opacity:1}
.cj-time{display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--g);margin-bottom:.3rem}
.cj-cap h4{font-size:1.02rem;font-weight:800;letter-spacing:-.02em;color:var(--text);margin-bottom:.3rem}
.cj-cap p{font-size:.84rem;line-height:1.5;color:var(--muted)}

@media (max-width:760px){
  .cj-head{flex-direction:column;align-items:flex-start;gap:1.2rem;padding:0 5vw;margin-bottom:1.2rem}
  .cj-clock{flex-direction:row;align-items:baseline;gap:.8rem}
}

/* Desktop with room to spare: the section holds while scrolling walks the timeline (set by js/customer-journey.js) */
.cj.is-pinned{--w:min(17vw,250px,max(140px,calc((100vh - 450px) / 2.05)))}
.cj.is-pinned .cj-head{margin-bottom:.6rem}
.cj.is-pinned .cj-title{font-size:clamp(1.6rem,2.8vw,2.4rem)}
.cj.is-pinned .cj-clock-time{font-size:clamp(2.4rem,4.4vw,3.8rem)}
.cj.is-pinned .cj-pin{position:sticky;top:0;height:100vh;padding-top:calc(var(--nav-h) + 16px);justify-content:flex-start;overflow:hidden}
@media (min-height:900px){.cj.is-pinned .cj-pin{justify-content:center;padding-top:var(--nav-h)}}
.cj.is-pinned .cj-dot{margin:16px 0 10px}
.cj.is-pinned .cj-line{top:calc(var(--w) * 2.0514 + 23px)}
.cj.is-pinned .cj-rail{overflow:visible;scroll-snap-type:none;padding:1.2rem 0 0 calc(max(0px,50vw - 540px) + 1.5vw)}
.cj.is-pinned .cj-track{will-change:transform}
.cj.is-pinned .cj-stop{width:calc(var(--w) + 9vw)}
.cj.is-pinned .cj-line{left:calc(var(--w) / 2 + 4.5vw);right:calc(var(--w) / 2 + 4.5vw)}

@media (prefers-reduced-motion:reduce){
  .cj-shot,.cj-stamp,.cj-dot,.cj-cap,.cj-clock-num{transition:none;animation:none!important}
}