.iphone-scroll-story{height:250svh;position:relative;background:#0a1424;overflow-anchor:none}
.iphone-scroll-story>.hero{position:sticky;top:0;height:calc(100svh - 100px);min-height:540px;max-height:none;overflow:hidden;--iphone-copy-opacity:1;--iphone-parts-opacity:0}
.iphone-scroll-story .hero-copy,.iphone-scroll-story .hero-top,.iphone-scroll-story .hero-bottom{opacity:var(--iphone-copy-opacity)}
.iphone-scroll-story .iphone-grid-ready .hero-copy,.iphone-scroll-story .iphone-grid-ready .hero-copy>*{pointer-events:none}
.iphone-scroll-story .hero-phone-slot{position:absolute!important;z-index:4;max-height:none!important}
.iphone-scroll-story .hero-phone-slot canvas{touch-action:pan-y}
.iphone-scroll-story .orbit{opacity:var(--iphone-copy-opacity)}
.iphone-scroll-story .iphone-in-pieces .pro-phone-stage>.explore-button{opacity:0;pointer-events:none}
.iphone-scroll-title{position:absolute;left:4.3%;top:20px;z-index:5;opacity:var(--iphone-parts-opacity);pointer-events:none}
.iphone-scroll-title h2{font:400 26px/1.1 Arial,sans-serif;letter-spacing:-.055em;margin:0 0 8px;color:#e7eaf4}
.iphone-scroll-title p{font-size:10px;margin:0;color:#9caec6;letter-spacing:.01em}
.iphone-scroll-anchor{position:absolute;top:60%;width:1px;height:1px;pointer-events:none}
.iphone-piece-labels{position:absolute;inset:0;pointer-events:none;z-index:8}
.iphone-piece-label{position:absolute;transform:translate(-50%,-105%);max-width:180px;width:max-content;pointer-events:auto;white-space:normal;text-align:center;color:#dbe5f5;background:#0b1529df;border:1px solid #9daed02b;border-radius:18px;padding:5px 10px;font:11px/1.3 Arial;box-shadow:0 4px 18px #04091855;cursor:pointer;backdrop-filter:blur(5px)}
.iphone-piece-label:after{content:'';position:absolute;left:50%;top:100%;width:1px;height:8px;background:linear-gradient(#8b9ac177,transparent)}
.iphone-piece-label.secondary{color:#96a7c2;font-size:9px;background:#0b1529aa}
.iphone-piece-label:hover,.iphone-piece-label.is-hovered,.iphone-piece-label[aria-pressed=true]{border-color:#b4a7df;color:white;box-shadow:0 0 22px #7565b744}
.iphone-piece-label[hidden],.iphone-inline-detail[hidden]{display:none}
.iphone-inline-detail{position:absolute;left:4.3%;bottom:24px;z-index:10;max-width:290px;background:#0b1529e8;border:1px solid #929cca33;border-radius:16px;padding:16px 18px;backdrop-filter:blur(10px)}
.iphone-inline-detail strong{display:block;font-size:18px;font-weight:400;letter-spacing:-.03em}
.iphone-inline-detail p{font-size:11px;line-height:1.6;color:#b5c5db;margin:9px 0}
.iphone-inline-detail a,.iphone-inline-detail button{font-size:10px;display:inline-block;padding:5px 0;color:#bec7ea;border-bottom:1px solid #929cca55}
.iphone-inline-detail button{margin-left:18px}
.iphone-fallback-pieces{position:absolute;inset:80px 6% 45px;display:none;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;z-index:6}
.iphone-fallback-pieces a{display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:11px;text-align:center;gap:8px}
.iphone-fallback-pieces img{width:100%;height:140px;object-fit:contain}
.iphone-interior-fallback.iphone-in-pieces .iphone-fallback-pieces{display:grid}
.iphone-interior-fallback.iphone-in-pieces .hero-phone-slot{visibility:hidden}
@media(max-width:720px){
 .iphone-scroll-story>.hero{height:calc(100svh - 64px);min-height:440px}
 .iphone-scroll-story .hero-copy{opacity:1}
 .iphone-scroll-story .hero-copy>*{opacity:var(--iphone-copy-opacity)}
 .iphone-scroll-title{top:15px;left:6%}
 .iphone-scroll-title h2{font-size:21px;margin-bottom:6px}
 .iphone-scroll-title p{font-size:9px}
 .iphone-piece-label{font-size:9px;padding:4px 7px;max-width:145px}
 .iphone-piece-label.secondary{font-size:8px;padding:3px 6px}
 .iphone-inline-detail{left:6%;bottom:12px;max-width:calc(100% - 100px);padding:12px 14px}
 .iphone-inline-detail strong{font-size:16px}
 .iphone-inline-detail p{font-size:10px;margin:6px 0}
 .iphone-inline-detail a,.iphone-inline-detail button{font-size:9px}
 .iphone-inline-detail button{display:block;margin:6px 0 0}
 .iphone-fallback-pieces{inset:72px 8% 95px 5%;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
 .iphone-fallback-pieces a{font-size:8px;gap:2px}
 .iphone-fallback-pieces img{height:calc((100svh - 250px)/5 - 20px);min-height:32px}
}

/* More gesture travel on phones; desktop and reduced motion stay unchanged. */
@media(max-width:720px) and (prefers-reduced-motion:no-preference){
 .iphone-scroll-story{height:400svh}
}