/* The supplied films already reserve their left half for copy. Render them once,
   across the stage, so the authored subject stays in the right half. */
.story{height:1120svh;background:white}
.stage{background:white;min-height:620px}
.story-film{position:absolute;inset:0;opacity:var(--film-opacity,0);pointer-events:none}
.lifecycle-hero{position:absolute;left:44%;top:16%;width:52%;height:70%;pointer-events:none;will-change:transform,opacity}
.lifecycle-hero svg{width:100%;height:100%;overflow:visible}
.cycle-center{font-size:31px;font-weight:500;letter-spacing:-1px;text-anchor:middle;fill:#12213b}
.cycle-center.accent{fill:#0755ff}
.cycle-ecosystem{font-size:12px;font-weight:650;letter-spacing:2.8px;text-anchor:middle;fill:#60718a}
.cycle-node circle{fill:white;stroke:#d9e4f5;stroke-width:1.5}
.cycle-node text{font-size:12px;fill:#0755ff;text-anchor:middle;font-weight:600}
.cycle-node .cycle-label{font-size:14px;fill:#60718a;font-weight:450}
.cycle-orbit{transform-origin:350px 300px;animation:cycle-travel 18s linear infinite}
@keyframes cycle-travel{to{transform:rotate(360deg)}}
.motion-enabled .cycle-orbit{animation:cycle-travel 18s linear infinite!important}
.reduced .cycle-orbit{animation:none!important}
.chapter-copy{will-change:transform}
.header{background:#ffffffed;border-bottom-color:#edf0f4}
.poster,#sequence,.stage[data-chapter="0"] .poster,.stage[data-chapter="0"] #sequence{inset:80px 0 60px;width:100%;height:calc(100% - 140px);mask-image:none}
.poster img{object-fit:contain}
.chapter-copy,.stage[data-chapter="0"] .chapter-copy{left:6%;top:24%;width:35%;max-width:510px;transform:translateY(var(--copy-lift,0px));transition:none}
.chapter-copy h1,.chapter-copy h2,.stage[data-chapter="0"] h1{font-size:clamp(36px,3.7vw,64px);letter-spacing:-2.4px;line-height:1.06}
.chapter-copy .description{max-width:390px}
.scene-caption{position:absolute;right:6%;bottom:115px;width:43%;text-align:center;font-size:11px;color:#718098;letter-spacing:.35px;pointer-events:none}
.scene-caption:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#68a48a;margin:0 9px 2px 0}
.stage-top{top:105px}
.micro-component{background:#ffffffec;box-shadow:none;border-color:#e5e9ef;max-width:345px}
.story-bottom{bottom:25px}
.scroll-cue{display:flex;font-size:9px;letter-spacing:1.15px;min-width:245px}
.stage[data-transitioning="true"] .scroll-cue{color:var(--blue)}
.story-progress{height:3px;background:#edf0f4}
.reduced .stage{min-height:680px}
@media(min-width:1600px){.chapter-copy,.stage[data-chapter="0"] .chapter-copy{top:26%}.stage-top{top:128px}}
@media(max-width:1100px) and (min-width:761px){.chapter-copy,.stage[data-chapter="0"] .chapter-copy{top:24%;left:5%;width:36%}.chapter-copy h1,.chapter-copy h2,.stage[data-chapter="0"] h1{font-size:37px;letter-spacing:-1.7px}.scene-caption{bottom:100px;font-size:10px}}
@media(max-height:760px) and (min-width:761px){.chapter-copy,.stage[data-chapter="0"] .chapter-copy{top:23%}.chapter-copy h1,.chapter-copy h2,.stage[data-chapter="0"] h1{font-size:35px}.chapter-copy .description{font-size:11px!important}.scene-caption{bottom:85px}.stage-top{top:95px}}
@media(max-width:760px){
 .lifecycle-hero{left:0;top:29%;width:100%;height:43%}
 .story{height:1000svh}.stage{min-height:640px}
 .chapter-copy{height:calc(100svh - 200px)}
 .chapter-copy,.stage[data-chapter="0"] .chapter-copy{top:125px;left:7%;width:86%;max-width:none;transform:translateY(var(--copy-lift,0px))}
 .chapter-copy h1,.chapter-copy h2,.stage[data-chapter="0"] h1{font-size:32px;letter-spacing:-1.4px;max-width:340px}
 .poster,#sequence,.stage[data-chapter="0"] .poster,.stage[data-chapter="0"] #sequence{inset:auto;left:0;top:28%;width:100%;height:37%;mask-image:none}
 .chapter-copy .micro-component{top:calc(100svh - 413px);left:0;width:100%;max-width:none;min-height:130px;max-height:157px}
 .chapter-copy .story-link{top:calc(100svh - 260px);min-height:32px}
 .stage[data-chapter="0"] .chapter-copy .button{top:calc(100svh - 295px)}
 .scene-caption{bottom:calc(35% + 7px);left:7%;right:7%;width:86%;font-size:8px}
 .stage-top{top:78px}
 .story-bottom{bottom:12px;left:7%;right:7%;gap:0}
 .scroll-cue{display:flex;width:100%;font-size:7px;min-width:0;min-height:20px;gap:10px;letter-spacing:.8px}
 .scroll-cue>span{font-size:17px}
 #chapter-nav{width:78%;margin:0;order:3;justify-content:flex-start}
 #chapter-nav button{min-width:35px;min-height:34px}
 .chapter-counter{bottom:8px}
 .reduced .stage{height:800px;min-height:0}
 .reduced .chapter-copy{opacity:1!important}
 .reduced .stage[data-chapter="0"] .chapter-copy .button{position:static;margin-top:25px}
}
/* Intro copy has its own reading scale; the five product chapters retain theirs. */
.stage[data-chapter="0"] .chapter-copy{width:40%;max-width:610px}
.stage[data-chapter="0"] .chapter-copy h1{font-size:clamp(36px,3.65vw,60px)}
.stage[data-chapter="0"] .chapter-copy .eyebrow{font-size:10px;letter-spacing:1.7px}
.stage[data-chapter="0"] .chapter-copy .description{display:block;font-size:clamp(18px,1.4vw,22px)!important;line-height:1.65;max-width:540px;margin-bottom:24px;color:#52637b}
.stage[data-chapter="0"] .description strong{font-weight:600;color:#12213b}
.stage[data-chapter="0"] .chapter-copy .benefit{font-size:13px;max-width:460px;line-height:1.65}
@media(max-width:760px){
 .stage[data-chapter="0"] .chapter-copy{width:86%;max-width:none}
 .stage[data-chapter="0"] .chapter-copy h1{font-size:32px;margin-bottom:16px}
 .stage[data-chapter="0"] .chapter-copy .eyebrow{font-size:7px;letter-spacing:1.1px;margin-bottom:14px}
 .stage[data-chapter="0"] .chapter-copy .description{font-size:15px!important;line-height:1.6;margin-bottom:0}
 .stage[data-chapter="0"] .chapter-copy .benefit{display:none}
 .lifecycle-hero{top:47%;height:43%}
}
@media(max-width:760px) and (max-height:740px){
 .stage[data-chapter="0"] .chapter-copy h1{font-size:27px;margin-bottom:12px}
 .stage[data-chapter="0"] .chapter-copy .description{font-size:13px!important;line-height:1.5}
 .stage[data-chapter="0"] .chapter-copy .eyebrow{font-size:6px;margin-bottom:10px}
 .lifecycle-hero{top:52%;height:35%}
}
@media(max-width:760px) and (max-height:740px){
 .chapter-copy,.stage[data-chapter="0"] .chapter-copy{top:117px}
 .chapter-copy h1,.chapter-copy h2,.stage[data-chapter="0"] h1{font-size:27px}
 .poster,#sequence,.stage[data-chapter="0"] .poster,.stage[data-chapter="0"] #sequence{top:29%;height:29%}
 .scene-caption{bottom:42%;font-size:7px}
 .chapter-copy .micro-component{top:calc(100svh - 383px);max-height:138px;min-height:125px}
 .chapter-copy .story-link{top:calc(100svh - 245px)}
 .stage[data-chapter="0"] .chapter-copy .button{top:calc(100svh - 260px)}
}

.motion-actions{justify-content:flex-end}