/* Complete native screens, framed and centred as a single object. */
.product-stage{width:100%;aspect-ratio:8/5;position:relative;overflow:hidden;isolation:isolate;container-type:inline-size;background:#e9e5db;line-height:0}
.product-stage,.product-stage *{box-sizing:border-box}
.product-stage .stage-paint{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.product-stage .stage-browser{position:absolute;left:9%;top:50%;width:82%;transform:translateY(-50%);height:auto;border:1px solid #ffffffb3;border-radius:1.4cqw;overflow:hidden;background:#f7f6f3;box-shadow:0 1cqw 2cqw #17202735;display:flex;flex-direction:column}
.product-stage .stage-browser.paired{left:4%;width:68%}
.product-stage .stage-browser.tall{left:28%;width:44%}
.product-stage .stage-bar{height:2.4cqw;flex:none;display:flex;align-items:center;gap:.45cqw;padding:0 1cqw;background:#f4f3f1;position:relative}
.product-stage .stage-bar i{width:.65cqw;height:.65cqw;border-radius:50%;background:#d6d2cc}
.product-stage .stage-bar i:nth-child(1){background:#e5a19b}.product-stage .stage-bar i:nth-child(2){background:#e8cd97}.product-stage .stage-bar i:nth-child(3){background:#b2c7ab}
.product-stage .stage-bar span{position:absolute;left:27%;width:46%;height:70%;display:flex;align-items:center;justify-content:center;background:#ffffff8c;border-radius:.45cqw;color:#797771;font:.72cqw Arial,sans-serif;white-space:nowrap;overflow:hidden}
.product-stage .stage-viewport{position:relative;flex:none;width:100%;aspect-ratio:8/5;background:#fff}
.product-stage .stage-browser.tall .stage-viewport{aspect-ratio:8/9}
.product-stage .stage-browser.raw .stage-viewport{aspect-ratio:760/470}
.product-stage .stage-viewport>img,.product-stage .stage-viewport>video{position:absolute;inset:0;display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
.product-stage .stage-phone{position:absolute;width:22.8125%;height:74.6%;top:17.1%;left:73.625%;filter:drop-shadow(.4cqw .8cqw 1cqw #19262540)}
.product-stage>.stage-phone{top:50%;transform:translateY(-50%)}
.product-stage .stage-phone-plate{position:absolute;width:167.143%;height:104.895%;left:-33.571%;top:-2.797%}
.product-stage .stage-glass{position:absolute;left:23.3125%;top:4.9511%;width:53.375%;height:90.0971%;overflow:hidden;border-radius:13% / 6.02%;background:#fff}
.product-stage .stage-glass img{width:100%;height:100%;object-fit:contain;display:block}
.product-stage .stage-front{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.product-stage .stage-phones .stage-phone{top:13.3%;left:38.625%}
.product-stage .stage-phones.three .stage-phone:nth-child(1){left:10.4375%}.product-stage .stage-phones.three .stage-phone:nth-child(2){left:38.625%}.product-stage .stage-phones.three .stage-phone:nth-child(3){left:66.8125%}
.product-stage .stage-phones.single .stage-phone{width:25.4375%;height:83.2%;left:37.25%;top:8.4%}
.gallery .software-ci .product-stage.cm{height:auto;aspect-ratio:8/5}
/* Sequences return to the original state; off-screen playback is paused. */
.product-stage .stage-sequence .stage-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.product-stage .stage-sequence .frame-1,.product-stage .stage-sequence .frame-2{opacity:0;animation-duration:12s;animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:paused}
.product-stage.is-active .frame-1,.product-stage.is-active .frame-2{animation-play-state:running}
.product-stage .frame-1{animation-name:stage-second}.product-stage .frame-2{animation-name:stage-third}
.product-stage .stage-glass>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}
.product-stage video{opacity:0}
@keyframes stage-second{0%,24%{opacity:0}29%,56%{opacity:1}61%,100%{opacity:0}}@keyframes stage-third{0%,57%{opacity:0}62%,85%{opacity:1}90%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.product-stage video{visibility:hidden}.product-stage .frame-1,.product-stage .frame-2{animation:none;opacity:0}}
/* Single handset previews retain a readable portrait canvas on phones. */
@media(max-width:700px){.software-media .product-stage:has(.stage-phones.single),.project-image>.product-stage:has(.stage-phones.single){aspect-ratio:9/14}.software-media .product-stage .stage-phones.single .stage-phone,.project-image>.product-stage .stage-phones.single .stage-phone{height:88%;width:auto;aspect-ratio:700/1430;left:50%;top:6%;transform:translateX(-50%)}}