/* A stable viewport-sized stage keeps every step and its controls on screen.
   These rules are active only while the matching ScrollTriggers exist. */
.scroll-stories-enabled{--story-height:calc(100dvh - var(--story-top) - 24px)}
.scroll-story{height:var(--story-height);min-height:0;position:relative}
.scroll-stories-enabled .library-section,.scroll-stories-enabled .cost-section{overflow:clip}

#flow-theater.scroll-story{display:flex;flex-direction:column}
#flow-theater.scroll-story .theater-top{flex-shrink:0}
#flow-theater.scroll-story .theater-body{flex:1;min-height:0;overflow:hidden}
#flow-theater.scroll-story .screen-area{min-height:0}
#flow-theater.scroll-story .screen-canvas{height:100%;min-height:0}
#flow-theater.scroll-story .screen-canvas>img{height:100%;max-height:100%;min-height:0}
#flow-theater.scroll-story .scene-copy{padding:20px 24px;min-height:0}
#flow-theater.scroll-story .scene-copy h2{font-size:clamp(25px,2.4vw,34px)}
#flow-theater.scroll-story .scene-copy>p:not(.tour-note){font-size:12px}
#flow-theater.scroll-story .scene-counter{margin-bottom:12px}
#flow-theater.scroll-story .field-list{margin-top:14px}
#flow-theater.scroll-story .scene-next{margin-top:15px;padding-top:12px}
#flow-theater.scroll-story .tour-note{margin-top:12px}
#flow-theater.scroll-story .journey-tabs{flex-shrink:0}
#flow-theater.scroll-story .journey-tabs button{padding-block:16px}

.library-layout.scroll-story{align-items:center;gap:45px}
.library-layout.scroll-story .library-copy h2{font-size:clamp(35px,3.4vw,50px)}
.library-layout.scroll-story .chapter{margin-bottom:15px}
.library-layout.scroll-story .body-copy{font-size:14px;line-height:1.55;margin-top:18px}
.library-layout.scroll-story .chapter-tabs{margin-top:20px}
.library-layout.scroll-story .chapter-tabs button{padding-block:9px}
.library-layout.scroll-story .library-caption{margin-top:18px;min-height:45px}
.library-layout.scroll-story .library-stage{max-height:100%;display:flex;flex-direction:column}
.library-layout.scroll-story .library-image-wrap{min-height:0;flex:1;aspect-ratio:2420/1668}
.library-layout.scroll-story .library-image-wrap>img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.library-layout.scroll-story .screen-heading,.library-layout.scroll-story .library-footer{flex-shrink:0}

.ams-story.scroll-story{min-height:0}
.ams-story.scroll-story .ams-controls{max-height:100%;overflow:visible}
.ams-story.scroll-story .ams-image-wrap img{max-height:calc(var(--story-height) - 50px)}

.cost-layout.scroll-story{align-items:center}
.cost-layout.scroll-story .chapter{margin-bottom:14px}
.cost-layout.scroll-story h2{font-size:clamp(36px,3.7vw,53px)}
.cost-layout.scroll-story .body-copy{font-size:14px;line-height:1.55;margin-top:17px}
.cost-layout.scroll-story .cost-tabs{margin-top:20px}
.cost-layout.scroll-story .cost-explanation{margin-top:22px;min-height:100px}
.cost-layout.scroll-story .cost-explanation h3{font-size:23px}
.cost-layout.scroll-story .cost-explanation p{font-size:13px;line-height:1.6;margin-top:11px}
.cost-layout.scroll-story .text-action{margin-top:12px}
.cost-layout.scroll-story .cost-visual{height:100%;min-height:0;padding-bottom:25px}
.cost-layout.scroll-story .phone-frame{width:min(360px,calc((var(--story-height) - 36px)/2.18))}
.cost-layout.scroll-story .cost-annotation{bottom:20%}

.overview-tour{margin-top:28px}
.overview-tour.scroll-story{display:flex;flex-direction:column;align-items:center}
.overview-tour.scroll-story .device-switch{flex-shrink:0;margin:0 auto 20px}
.overview-tour.scroll-story .overview-stage{width:100%;height:auto;min-height:0;flex:1}
.overview-tour.scroll-story .overview-links{flex-shrink:0;margin-top:22px}

@media(max-height:720px){
  .cost-layout.scroll-story h2{font-size:38px}
  .cost-layout.scroll-story .chapter{margin-bottom:10px}
  .cost-layout.scroll-story .body-copy{font-size:13px;margin-top:14px}
  .cost-layout.scroll-story .cost-tabs{margin-top:18px}
  .cost-layout.scroll-story .cost-explanation{margin-top:18px;min-height:85px}
  .cost-layout.scroll-story .cost-explanation h3{font-size:21px}
  .cost-layout.scroll-story .cost-explanation p{margin-top:9px}
  .library-layout.scroll-story .body-copy{font-size:13px;margin-top:14px}
  .library-layout.scroll-story .library-copy h2{font-size:36px}
  .library-layout.scroll-story .chapter-tabs{margin-top:15px}
  .library-layout.scroll-story .chapter-tabs button{padding-block:7px}
  .library-layout.scroll-story .library-caption{margin-top:14px}
}

/* Keep source pixels intact; use more display area rather than sharpening text. */
.cost-visual .phone-caption{font-size:11px;letter-spacing:0;color:#a9caff;padding:4px 8px;border-bottom:1px solid #35547d}
.inspector-body.zoomed.portrait img{margin-inline:auto}