/* The default is a complete, flowing story. Pinning is a desktop enhancement. */
.tracking-word{display:inline-block;white-space:nowrap;vertical-align:baseline}
.tracking-ink{display:inline-block;letter-spacing:calc(var(--tracking-base,0px) + var(--tracking-shift,0em));transform:translate3d(calc(var(--tracking-offset,0)*var(--tracking-shift,0em)),var(--tracking-y,0px),0)}
@media(prefers-reduced-motion:reduce){.tracking-ink{transform:none;letter-spacing:var(--tracking-base,0px)}}
.motion-paused .tracking-ink{transform:none;letter-spacing:var(--tracking-base,0px)}
.scroll-story{position:relative;isolation:isolate;scroll-margin-top:0}
.benefit-story{background:linear-gradient(180deg,var(--pale),var(--mid));color:var(--ink)}
.story-stage{position:relative;overflow:clip}
.story-texture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}
.story-topline{display:flex;justify-content:space-between;align-items:center;padding-top:32px;gap:16px}
.story-topline .eyebrow,.benefit-story .eyebrow{color:#465770}
.story-signature{width:min(55%,660px);height:auto;max-height:140px;object-fit:contain;margin:26px auto 0;pointer-events:none;mix-blend-mode:darken}
.benefit-scene{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,6vw,96px);padding:64px 0 80px}
.benefit-scene+.benefit-scene{border-top:1px solid #46577040}
.benefit-copy{min-width:0;position:relative}
.benefit-copy>.eyebrow{margin-bottom:24px}
.benefit-copy h2{font-size:clamp(44px,5.1vw,74px);line-height:1.05;letter-spacing:-.04em}
.benefit-copy h2 em{font-weight:400}
.benefit-copy>p:not(.eyebrow){max-width:455px;margin-top:26px;font-size:17px;line-height:1.6}
.benefit-copy>p.story-detail{font-size:10px;line-height:1.6;text-transform:uppercase;letter-spacing:.025em;margin-top:36px;color:#465770}
.benefit-product{display:flex;flex-direction:column;align-items:center;min-width:0;position:relative}
.story-phone{position:relative;width:274px;max-width:100%;padding:5px;border-radius:34px;background:var(--night);box-shadow:0 30px 50px -26px #101a2860,0 1px 1px #eceff380;overflow:hidden}
.story-phone>img,.phone-slides{width:100%;aspect-ratio:402/874;border-radius:29px;overflow:hidden;background:var(--paper)}
.story-phone>img{height:auto;object-fit:cover}
.phone-slides{position:relative}
.phone-slide{position:absolute;inset:0;transform:translateX(calc((var(--slide-number,0) - var(--slide,0))*100%));transition:transform .75s var(--ease);overflow:hidden;will-change:transform}
.phone-slide:nth-child(2){--slide-number:1}
.phone-slide>img{width:100%;height:100%;object-fit:fill}
.screen-controls{display:flex;justify-content:center;gap:12px;width:min(100%,200px);margin-top:18px}
.screen-controls button{position:relative;flex:1;padding:12px 0;min-height:44px;border:0;background:none;font:10px/1.5 var(--mono);color:#465770}
.screen-timer{position:absolute;top:0;left:0;right:0;height:2px;overflow:hidden;border-radius:2px;background:#62697340}
.screen-timer>span{display:block;height:100%;background:#626973;transform:scaleX(0);transform-origin:left}
.screen-controls button[aria-pressed=true]{color:var(--night)}
.screen-controls button[aria-pressed=true] .screen-timer>span{transform:scaleX(1)}
.phone-carousel-frame{display:contents}
.carousel-cue{display:none}
.product-caption{margin-top:24px;font-size:10px;color:#465770;text-transform:uppercase;text-align:center}
.progress-clip-slot{position:relative;max-width:384px;aspect-ratio:16/9;margin-top:30px;background:var(--night)}
.progress-clip-slot video{width:100%;height:100%;object-fit:cover}
.progress-clip-slot::after,.traveling-clip::after{content:'';position:absolute;inset:0;border:2px solid var(--warm);pointer-events:none;z-index:1}
.traveling-clip::after{opacity:var(--clip-border-opacity,1)}
.scene-share .benefit-copy{grid-column:2;grid-row:1}
.scene-share .benefit-product{grid-column:1;grid-row:1}
/* Pixel bounds from the approved 402 × 874 Figma screen components. */
.feed-video-slot{position:absolute;left:calc(19 / 402 * 100%);top:calc(159 / 874 * 100%);width:calc(364 / 402 * 100%);height:calc(182 / 874 * 100%);background:#000;overflow:hidden}
.feed-video-slot video{width:100%;height:100%;object-fit:cover}
.instagram-video-slot{position:absolute;left:0;right:0;top:calc(159 / 874 * 100%);height:calc(502.5 / 874 * 100%);background:#000;overflow:hidden}
/* Match the Figma crop: its visible source starts 13.1% below the video top. */
.instagram-video-slot video{position:absolute;left:0;bottom:0;width:100%;height:115.08%;object-fit:cover;object-position:47.2% bottom}
.instagram-muted{position:absolute;left:calc(360 / 402 * 100%);top:calc(460 / 502.5 * 100%);width:calc(28 / 402 * 100%);height:calc(28 / 502.5 * 100%);pointer-events:none}
.traveling-clip{display:none;position:absolute;top:0;left:0;width:384px;aspect-ratio:16/9;transform-origin:0 0;background:#000;pointer-events:none;z-index:4;will-change:transform,opacity;overflow:hidden}
.traveling-clip video{width:100%;height:100%;object-fit:cover}
.story-nav,.how-nav{display:none}
.how-story{background:var(--night);overflow-x:clip}
.how-stage{display:flex;flex-direction:column;padding-top:64px;padding-bottom:64px}
.how-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;order:0}
.how-copy-stack{display:contents}
.how-copy{max-width:860px;margin:40px auto 30px;text-align:center}
.how-copy:nth-child(1){order:1}
.how-copy:nth-child(2){order:3}
.how-copy:nth-child(3){order:5}
.how-copy h2{font:400 clamp(46px,5.6vw,76px)/1.06 var(--display);letter-spacing:-.035em}
.how-copy>p:last-child{max-width:565px;margin:20px auto 0;font-size:17px;line-height:1.6}
.how-programming{order:2;position:relative;width:min(100%,852px);align-self:center}
.program-deck{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;padding:20px 6px 0}
.program-card{position:relative;min-width:0;margin:56px -6px 0;padding:24px 20px 18px;border:2px solid var(--ink);background:#fff;color:var(--ink);box-shadow:0 20px 40px -26px #0006;transform-origin:50% 70%}
.program-monday{margin-top:0;z-index:2}
.program-date{position:absolute;top:-20px;left:14px;margin:0;border:1px solid var(--ink);padding:8px 12px;background:var(--night);color:#fff;font:italic 700 11px/1.2 var(--display);letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.program-section+.program-section{border-top:1px solid var(--pale);margin-top:14px;padding-top:14px}
.program-section h5{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font:700 11px/18px var(--mono);letter-spacing:1px;text-transform:uppercase}
.program-section h5 span{font:500 18px/18px var(--body);letter-spacing:0}
.how-programming .program-section p{margin:12px 0 0;color:var(--secondary);font:400 14px/20px var(--mono);overflow-wrap:break-word}
.program-day-controls{display:none}
.how-arrival-static{order:4;width:min(100%,420px);aspect-ratio:1;align-self:center}
.how-story .constellation{order:6}
.how-story .workout-film{aspect-ratio:1}
.how-story .how-arrival-video{display:none}
.how-story .workout-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.how-story .tracking-box{border-color:#94a3b833}
.how-story .movement-name{color:var(--mid)}
.how-story .movement-card:hover .movement-name,.how-story .movement-card[aria-pressed=true] .movement-name{color:var(--warm)}

/* No wheel or touch interception: the document scrolls and CSS holds the stage. */
.benefit-story.is-pinned{height:400svh}
.is-pinned .story-stage{position:sticky;top:var(--header-height);height:calc(100svh - var(--header-height));min-height:calc(700px - var(--header-height))}
.is-pinned .story-topline{position:absolute;top:0;left:0;right:0;padding-top:24px}
.is-pinned .story-signature{position:absolute;top:9%;left:50%;width:48%;height:16%;max-height:150px;margin:0;transform:translateX(-50%);opacity:.82}
.is-pinned .benefit-scenes{position:absolute;inset:23% 0 12%;max-width:1120px}
.is-pinned .benefit-scene{position:absolute;inset:0;padding:0;border:0;gap:64px;opacity:0;pointer-events:none;will-change:opacity}
.is-pinned .benefit-scene.is-current{pointer-events:auto}
.is-pinned .benefit-copy,.is-pinned .benefit-product{will-change:opacity}
.is-pinned .benefit-scene:first-child{opacity:1}
.is-pinned .benefit-copy h2{font-size:clamp(46px,5.1vw,74px)}
.is-pinned .benefit-copy>.eyebrow{margin-bottom:20px}
.is-pinned .benefit-copy>p:not(.eyebrow){margin-top:24px}
.is-pinned .story-phone{width:min(280px,calc((100svh - var(--header-height))*.267));border-radius:clamp(24px,3.5svh,34px)}
.is-pinned .story-phone>img,.is-pinned .phone-slides{border-radius:clamp(20px,3svh,29px)}
/* Reserve the same footer space as carousel controls so phones crossfade in place. */
.is-pinned .product-caption{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:18px}
.is-pinned .progress-clip-slot{width:min(100%,calc((100svh - var(--header-height))*.38));margin-top:24px;background:transparent;box-shadow:none}
.is-pinned .static-progress-video{visibility:hidden}
.is-pinned .progress-clip-slot::after{display:none}
.is-pinned .traveling-clip{display:block}
.is-pinned .story-nav,.is-pinned .how-nav{display:flex;gap:32px;align-items:center;border-top:1px solid #46577050;position:absolute;bottom:24px;left:0;right:0;padding-top:12px}
.story-nav a,.how-nav a{display:flex;gap:12px;align-items:center;min-height:44px;font:12px/1.5 var(--mono);color:#465770;position:relative}
.story-nav a span,.how-nav a span{font-size:9px;opacity:.65}
.story-nav a:before,.how-nav a:before{content:'';position:absolute;top:-13px;left:0;right:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.story-nav a[aria-current],.how-nav a[aria-current]{color:var(--night)}
.story-nav a[aria-current]:before,.how-nav a[aria-current]:before{transform:scaleX(1)}
.scroll-cue{display:flex;gap:20px;align-items:center;margin-left:auto;font-size:9px;text-transform:uppercase;color:#465770}
.how-story.is-pinned{height:310svh}
.is-pinned .how-stage{position:sticky;top:var(--header-height);height:calc(100svh - var(--header-height));min-height:calc(700px - var(--header-height));padding:0;display:block}
.is-pinned .how-header{position:absolute;top:32px;left:0;right:0}
.is-pinned .how-copy-stack{position:absolute;left:0;right:0;top:var(--how-copy-top,10%);height:var(--how-copy-height,22%);display:grid;place-items:start center}
.is-pinned .how-copy{grid-area:1/1;margin:0;max-width:860px;opacity:0;pointer-events:none}
.is-pinned .how-copy:first-child{opacity:1}
.is-pinned .how-copy h2{font-size:clamp(46px,min(5.6vw,7.6svh),76px)}
.is-pinned .how-copy:last-child h2 br{display:none}
.is-pinned .how-copy>p:last-child{font-size:16px;line-height:1.5;margin-top:16px;max-width:555px}
.is-pinned .how-copy:last-child,.is-pinned .how-copy:last-child>p{max-width:760px}
.is-pinned .how-description-line{display:block;text-wrap:balance}
.is-pinned .how-arrival-static{display:none}
.is-pinned .how-programming{position:absolute;top:var(--program-top,62%);left:50%;transform:translate(-50%,-50%) scale(var(--program-scale,1));z-index:4}
.is-pinned .program-deck{clip-path:inset(-24px -200px 0)}
.is-pinned .constellation{position:absolute;top:var(--how-media-top,42%);height:var(--how-media-height,40%);left:0;right:0}
.is-pinned .constellation-stage{height:100%;margin:0}
.is-pinned .workout-film{width:min(46%,var(--how-media-height));aspect-ratio:1}
.is-pinned .how-arrival-video{display:block;z-index:1}
.how-story .how-nav{border-color:#94a3b84d}
.how-nav a,.how-story .scroll-cue{color:var(--mid)}
.how-nav a[aria-current]{color:var(--paper)}
.how-story .movement{max-height:100%}
.how-story.is-pinned .movement{width:min(calc(var(--w)*.82),var(--movement-max-width,100%))}
.js .how-story.is-pinned .movement{left:50%;top:50%;transition:none;transform:translate3d(calc(-50% + var(--spread-x,0px)*var(--spread,0)),calc(-50% + var(--spread-y,0px)*var(--spread,0)),0) scale(calc(.58 + .42*var(--spread,0)))}
.how-story.is-pinned .movement-card{max-height:26svh}
.motion-paused .phone-slide{transition:none}

@media(max-width:899px){
  .story-topline{padding-top:20px;align-items:center}
  .story-topline .eyebrow{font-size:9px}
  .story-signature{width:85%;max-height:112px;margin-top:28px}
  .benefit-scenes{max-width:620px}
  .benefit-scene{grid-template-columns:1fr;gap:36px;padding:40px 0 64px}
  .benefit-scene+.benefit-scene{padding-top:54px}
  .benefit-copy h2{font-size:clamp(42px,9.6vw,64px);line-height:1.06}
  .benefit-copy>.eyebrow{margin-bottom:20px}
  .benefit-copy>p:not(.eyebrow){font-size:16px;line-height:1.6;margin-top:22px;max-width:100%}
  .benefit-copy>p.story-detail{font-size:9px;margin-top:22px}
  .story-phone{width:min(84%,274px);padding:5px;border-radius:30px}
  .story-phone>img,.phone-slides{border-radius:25px}
  .scene-share .benefit-copy,.scene-share .benefit-product{grid-column:auto;grid-row:auto}
  .progress-clip-slot{max-width:100%;margin-top:28px;margin-bottom:18px}
  .product-caption{font-size:9px;margin-top:20px}
  .story-texture{display:none}
  /* Repeat the artwork at its native proportions, in two places along the story. */
  .scene-replay .benefit-product,.scene-share .benefit-product{isolation:isolate}
  .scene-replay .benefit-product::before,.scene-share .benefit-product::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;width:clamp(560px,120vw,900px);aspect-ratio:1440/868;transform:translate(-50%,-50%);background:url('assets/figma/story-background.png') center/contain no-repeat;mix-blend-mode:multiply;opacity:.9;mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
  .how-stage{padding-block:48px}
  .how-header{flex-wrap:wrap;gap:12px}
  .how-copy{text-align:left;margin:44px 0 28px}
  .how-copy h2{font-size:clamp(42px,9.6vw,60px)}
  .how-copy>p:last-child{font-size:16px;margin-top:20px}
  .how-copy:not(:first-child){border-top:1px solid #94a3b840;padding-top:40px;margin-top:48px}
  .how-story .constellation-stage{height:600px}
}
@media(min-width:701px) and (max-width:899px){.how-story .constellation-stage{height:420px}.how-story .workout-film{width:35%}.how-story .movement{width:calc(var(--w)*.82)}}
@media(min-width:900px) and (max-height:800px){
  .is-pinned .program-card{padding:12px 18px;margin-top:40px}
  .is-pinned .program-monday{margin-top:0}
  .is-pinned .program-section+.program-section{margin-top:6px;padding-top:6px}
  .is-pinned .program-section h5{font-size:10px;line-height:16px}
  .is-pinned .program-section p{font-size:11px;line-height:14px;margin-top:9px}
  .is-pinned .program-date{font-size:10px;padding:7px 10px;top:-18px}
}
@media(max-width:700px){
  .how-story .constellation-stage{height:max(520px,calc((100vw - 36px)*1.7))}
  .phone-carousel-frame{display:flex;justify-content:center;position:relative;width:100%}
  /* Leave breathing room beside the phone; keep the full tap target on-screen. */
  .js .carousel-cue{display:grid;place-items:center;position:absolute;top:50%;left:min(calc(50% + min(42%,137px) + 8px),calc(100% - 28px));width:44px;height:64px;padding:0;border:0;background:transparent;color:#626973;transform:translateY(-50%);cursor:pointer}
  .carousel-cue svg{width:32px;height:48px;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;opacity:.65;transition:opacity .2s}
  .carousel-cue:hover svg,.carousel-cue:focus-visible svg{opacity:1}
  .carousel-cue:focus-visible{outline:1px solid currentColor;outline-offset:-4px;border-radius:6px}
  [data-active-slide="1"] .carousel-cue{left:auto;right:min(calc(50% + min(42%,137px) + 8px),calc(100% - 28px));transform:translateY(-50%)}
  [data-active-slide="1"] .carousel-cue svg{transform:rotate(180deg)}
  .program-deck{display:flex;gap:18px;margin-inline:-24px;padding:24px 24px 24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;scrollbar-width:none;isolation:isolate}
  .program-deck::-webkit-scrollbar{display:none}
  .program-card{flex:0 0 min(82vw,320px);margin:0;padding:28px 20px 20px;scroll-snap-align:center}
  .program-section+.program-section{margin-top:16px;padding-top:16px}
  .how-programming .program-section p{font-size:13px;line-height:19px}
  .js .program-day-controls{display:flex;justify-content:center;gap:32px;margin-top:4px}
  .program-day-controls button{min-width:44px;min-height:44px;padding:10px 4px;border:0;border-bottom:1px solid transparent;background:none;color:var(--mid);font:11px/1.5 var(--mono)}
  .program-day-controls button[aria-pressed=true]{color:var(--paper);border-bottom-color:var(--paper)}
}
@media(max-width:370px){.story-topline{gap:8px}.story-topline .eyebrow{font-size:8px}.benefit-copy h2{font-size:40px}.how-copy h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){.phone-slide{transition:none}.story-signature{transform:none}.how-story .movement{transition:none}}
@media print{.scroll-story,.scroll-story.is-pinned{height:auto}.story-stage,.is-pinned .story-stage,.how-stage,.is-pinned .how-stage{position:relative;height:auto;min-height:0}.benefit-scenes,.is-pinned .benefit-scenes,.benefit-scene,.is-pinned .benefit-scene{position:relative;inset:auto;opacity:1!important;display:grid}.story-nav,.how-nav,.traveling-clip{display:none!important}}