/* One layout boundary controls both the copy and GPU device placement. */
@media(min-width:1001px),(min-aspect-ratio:1001/1000){
 .scroll-middle.story:not(.is-static) .copy-stack{left:7%;top:50%;width:36%;max-width:490px;height:auto;transform:translateY(-50%)}
 .scroll-middle.story:not(.is-static) .copy-stack .feature{transform:translateY(-50%)}
}
.scroll-middle.story:not(.is-static){height:calc(100svh - var(--s4-nav,65px) + (560svh + var(--s4-nav,65px)*.7)*var(--story-weight,.9671875))}
.scroll-middle .scene-note{position:absolute;z-index:4;transform:translateX(-50%);max-width:44%;margin:0;text-align:center;color:#738177;font:400 12px/1.45 -apple-system,BlinkMacSystemFont,Arial,sans-serif;letter-spacing:0;text-decoration:none;opacity:0;visibility:hidden}
.scroll-middle .feature-scroll-cue{display:flex;justify-content:center;gap:10px;padding:8px 0}
.feature-scroll-cue:focus-visible{outline:2px solid #52785e;outline-offset:4px;border-radius:4px}
.scroll-middle:not(.is-static) .ritual-mechanism li:last-child{opacity:var(--timer-reveal,0)}
.scroll-middle:not(.is-static) .awareness-legend{opacity:var(--legend-alpha,0)}
.static-choice-title{display:none}
.scroll-middle.is-static .scene-note{position:static;transform:none;opacity:1!important;visibility:visible!important;pointer-events:auto!important;order:5;max-width:100%;width:100%;margin:20px auto}
.scroll-middle.is-static .static-choice-title{display:block;order:4;text-align:center;font-size:clamp(28px,5vw,44px);margin:30px auto 12px}
.scroll-middle.is-static .usage-choices{order:5}
@media(max-width:1000px) and (max-aspect-ratio:1/1){.scroll-middle .scene-note{max-width:88%;width:max-content;font-size:11px}.scroll-middle:not(.is-static) .ritual-steps p{font-size:clamp(10px,2.5vw,15px);line-height:1.4}.scroll-middle:not(.is-static) .timer-heading h2{font-size:clamp(25px,6vw,42px)}}
@media(max-height:550px) and (orientation:landscape){.scroll-middle .scene-note{font-size:10px}.scroll-middle:not(.is-static) .ritual-steps p{font-size:11px}.scroll-middle:not(.is-static) .timer-heading h2{font-size:24px}}

/* Keep the desktop composition, with the mobile action after the phone. */
@media(max-width:1000px) and (max-aspect-ratio:1/1){
 .hero{grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding-bottom:22px}
 .hero>.explore-features{grid-row:3;justify-self:center;margin:0;align-self:end}
 .hero-visual{grid-row:2;max-height:100%;min-height:0}
}