/* Each screen has a different composition; the central phone stays unobstructed. */
.product-stage .glass{left:var(--card-x);top:var(--card-y);right:auto;bottom:auto;width:23%;max-width:255px;transition:left .65s cubic-bezier(.22,1,.36,1),top .65s cubic-bezier(.22,1,.36,1),opacity .22s ease,transform .45s ease}
.product-stage .g1{--card-x:5%;--card-y:23%}
.product-stage .g2{--card-x:72%;--card-y:15%}
.product-stage .g3{--card-x:71%;--card-y:63%}
.product-stage[data-feature="1"] .g1{--card-x:4%;--card-y:12%}
.product-stage[data-feature="1"] .g2{--card-x:73%;--card-y:35%}
.product-stage[data-feature="1"] .g3{--card-x:6%;--card-y:62%}
.product-stage[data-feature="2"] .g1{--card-x:72%;--card-y:13%}
.product-stage[data-feature="2"] .g2{--card-x:4%;--card-y:36%}
.product-stage[data-feature="2"] .g3{--card-x:71%;--card-y:65%}
.product-stage[data-feature="3"] .g1{--card-x:5%;--card-y:16%}
.product-stage[data-feature="3"] .g2{--card-x:72%;--card-y:53%}
.product-stage[data-feature="3"] .g3{--card-x:4%;--card-y:65%}
.product-stage[data-feature="4"] .g1{--card-x:72%;--card-y:22%}
.product-stage[data-feature="4"] .g2{--card-x:5%;--card-y:57%}
.product-stage[data-feature="4"] .g3{--card-x:72%;--card-y:68%}
.feature-nav{align-items:center;gap:4px}
.feature-nav button{width:30px;height:30px;background:transparent;position:relative}
.feature-nav button::after{content:"";position:absolute;left:11px;top:11px;width:8px;height:8px;border-radius:8px;background:#565752;transition:background .2s,width .2s,left .2s}
.feature-nav button.active{width:40px;background:transparent}
.feature-nav button.active::after{width:28px;left:6px;background:white}
.feature-nav button:focus-visible{outline:2px solid white;outline-offset:3px}
@media(max-width:800px){
 .product-stage{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0;padding:480px 16px 74px;align-items:stretch}
 .product-stage .feature-shot{height:470px}
 .product-stage .glass{position:relative;display:block;left:auto;top:auto;width:100%;max-width:none;margin:0;z-index:4;order:1;transition:opacity .22s,transform .35s}
 .product-stage .g3{grid-column:1 / -1;order:2;min-height:106px}
 .product-stage .g1,.product-stage .g2{min-height:155px}
 .product-stage[data-feature="2"] .g1,.product-stage[data-feature="4"] .g1{order:0;grid-column:2;grid-row:1}
 .product-stage[data-feature="2"] .g2,.product-stage[data-feature="4"] .g2{grid-column:1;grid-row:1}
 .product-stage::after{display:none}
}
@media(prefers-reduced-motion:reduce){.product-stage .glass,.feature-nav button::after{transition:none}}