.story{height:400vh;padding:0;--growth:0;--early:1;--late:0}.story-stage{height:100vh;position:sticky;top:0;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:30px;overflow:hidden}.story-copy{opacity:var(--early);transform:translateY(calc((1 - var(--early))*-25px));pointer-events:none}.story-copy h1{font-size:clamp(62px,6.8vw,106px)}.story-copy .button{pointer-events:auto}.device-stage{perspective:1100px;display:flex;justify-content:center;align-items:center;height:80vh;grid-column:2;grid-row:1}.device{position:relative;width:min(350px,39vh);aspect-ratio:9/21;transform:translateY(var(--lift)) rotateY(var(--turn)) rotateX(var(--lean));filter:drop-shadow(22px 35px 35px #0008)}.phone-art{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}.insights{position:absolute;inset:13.5% 9% 11%;border-radius:30px;background:#080909;color:#fff;padding:12px 14px 16px;overflow:hidden;font-family:"Manrope",system-ui,sans-serif}.screen-header{font-family:Georgia,serif;font-size:21px;display:flex;justify-content:space-between}.screen-title{font-size:14px!important;color:#fff!important;margin:16px 0 4px}.screen-period,.screen-sub{font-size:12px!important;color:#8b9195!important}.metric-head{display:flex;justify-content:space-between;font-size:24px;letter-spacing:-1px;margin:28px 0 3px}.metric-head span,.metric span:last-child{color:#a8e8c5}.growth-chart{width:100%;margin:12px 0 18px}.grid{stroke:#24282d;fill:none;stroke-width:1}.growth{fill:none;stroke:#ff6300;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--growth))}.metric{display:flex;justify-content:space-between;font-size:12px;margin:14px 0 6px}.track{height:4px;background:#24282d;border-radius:3px;overflow:hidden}.track i{display:block;background:#acb9ff;height:100%;width:calc(15% + 70%*var(--growth))}.screen-note{font-size:12px!important;color:#898e93!important;margin-top:24px}.growth-copy{grid-column:1;grid-row:1;opacity:var(--late);transform:translateY(calc((1 - var(--late))*25px));pointer-events:none}.growth-copy h2{font-size:clamp(40px,5vw,75px)}.growth-copy .button{pointer-events:auto}.story-copy{grid-column:1;grid-row:1}.skip{position:absolute;bottom:28px;left:0;font-size:13px;color:#aaa}.story-progress{height:2px;background:var(--orange);position:absolute;bottom:0;left:0;width:calc(100%*var(--progress))}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.revealed{opacity:1;transform:none}@media(max-width:700px){.story{height:350vh}.story-stage{grid-template-columns:1fr;grid-template-rows:39% 57%;gap:0}.story-copy,.growth-copy{grid-column:1;grid-row:1;align-self:end}.story-copy h1{font-size:clamp(43px,10vw,64px);margin-bottom:16px}.story-copy p:not(.eyebrow){display:none}.story-copy .eyebrow{font-size:10px}.story-copy .button{display:none}.device-stage{grid-column:1;grid-row:2;height:100%;align-items:center}.device{width:min(200px,23vh);max-height:100%}.insights{padding:8px 9px 8px;border-radius:22px}.screen-header{font-size:16px}.screen-title{font-size:12px!important;margin-top:8px}.metric-head{margin-top:12px;font-size:20px}.growth-chart{margin:5px 0}.metric{margin-top:7px}.screen-note{margin-top:10px}.growth-copy h2{font-size:39px;margin-bottom:15px}.growth-copy>p:not(.eyebrow){display:none}.skip{bottom:9px;font-size:12px}.growth-copy .button{padding:9px 16px}}@media(prefers-reduced-motion:reduce){.story{height:auto}.story-stage{position:relative;min-height:850px;height:auto;padding:50px 0}.device{transform:none}.reveal{opacity:1;transform:none;transition:none}.story-copy{display:none}.growth-copy{opacity:1;transform:none}.story-progress{display:none}}

.illustration-note{position:absolute;bottom:28px;right:0;color:#aaa;font-size:12px}.story-stage{height:calc(100svh - 94px);min-height:580px}.device{width:min(320px,34vh)}@media(max-width:700px){.story-stage{height:calc(100svh - 78px);min-height:690px}.device{width:min(200px,23vh)}.illustration-note{bottom:29px;left:0;right:auto;font-size:12px}.insights .metric:last-of-type{display:none}.screen-note{display:none}.screen-title{font-size:12px!important}.screen-period{margin-bottom:7px}.growth-chart{max-height:90px}}

@media(max-width:700px){.device{width:min(180px,21vh);transform:rotateY(var(--turn)) rotateX(var(--lean))}.story-stage{grid-template-rows:38% 54%}}

/* Final Seedance product film: scroll controls time, not phone geometry. */
.device-stage{perspective:none;overflow:visible;min-width:0}.device{width:180%;max-width:none;flex-shrink:0;aspect-ratio:16/9;transform:translate(var(--cursor-x,0px),var(--cursor-y,0px));filter:none;max-height:none}.hero-video{display:block;width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent)}.device .insights{inset:23% 42.4% 20%;padding:10px 9px;border-radius:16px;opacity:var(--dashboard,0);pointer-events:none}.device .screen-header{font-size:15px}.device .screen-title{font-size:10px!important;margin-top:10px}.device .screen-period,.device .screen-sub{font-size:9px!important}.device .metric-head{font-size:19px;margin-top:12px}.device .metric{font-size:9px;margin-top:7px}.device .growth-chart{margin:4px 0;max-height:75px}.device .track{height:3px}@media(max-width:700px){.device{width:190%;max-height:none;transform:translate(var(--cursor-x,0px),var(--cursor-y,0px))}.device .insights{padding:7px}.device .screen-title{margin-top:5px}.device .screen-period{display:none}.device .metric-head{margin-top:6px}.device .growth-chart{max-height:55px}}@media(prefers-reduced-motion:reduce){.device{transform:none}.device .insights{opacity:1}}

.hero-video{mask-image:radial-gradient(ellipse 25% 50% at 50% 50%,#000 76%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 25% 50% at 50% 50%,#000 76%,transparent 100%)}

/* Scale the dashboard with the actual phone glass, including small mobile screens. */
.device .insights{inset:13% 40% 13.2%;padding:0;border-radius:13% / 6.3%;background:#080909;container-type:inline-size;display:block}
.device .insights::before{content:"";position:absolute;z-index:1;top:2.1%;left:50%;transform:translateX(-50%);width:28%;height:2.5%;border-radius:20px;background:#000}
.device .insights::after{content:"";position:absolute;bottom:2.2%;left:35%;width:30%;height:.7%;border-radius:4px;background:#d3d3d3}
.insights-content{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;padding:13% 6% 9%;overflow:hidden}
.device .insights .screen-header{flex:0 0 auto;font-size:10cqw;line-height:1.2}
.device .insights .screen-title{flex:0 0 auto;font-size:6.2cqw!important;line-height:1.25;margin:7cqw 0 2cqw}
.device .insights .screen-period,.device .insights .screen-sub{flex:0 0 auto;display:block;font-size:5cqw!important;line-height:1.3;margin:0}
.device .insights .metric-head{flex:0 0 auto;font-size:12cqw;line-height:1.2;letter-spacing:-.04em;margin:7cqw 0 2cqw}
.device .insights .growth-chart{flex:1 1 0;width:100%;min-height:0;max-height:none;margin:5cqw 0}
.device .insights .metric{display:flex;flex:0 0 auto;font-size:5.5cqw;line-height:1.3;margin:4.5cqw 0 2cqw}
.device .insights .track{flex:0 0 auto;height:1.5cqw}

/* Keep the phone visible while mobile browsers buffer the scroll-controlled film. */
.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mask-image:radial-gradient(ellipse 25% 50% at 50% 50%,#000 76%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 25% 50% at 50% 50%,#000 76%,transparent 100%)}
.hero-video{position:relative;opacity:0}
.video-ready .hero-video{opacity:1}
.video-ready .hero-poster{visibility:hidden}
.story:not(.video-ready) .insights{visibility:hidden}
@media(max-width:700px){
 .intro.story{padding:0}
 .story-stage{height:calc(100svh - 78px);min-height:0;grid-template-rows:minmax(0,42fr) minmax(0,53fr) minmax(0,5fr)}
 .story-copy,.growth-copy{min-height:0}
 .device-stage{min-height:0}
 .device{width:min(190%,120svh)}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
 .story-stage{height:auto;min-height:650px;grid-template-rows:auto 360px;padding:40px 0}
}