/* Live DRS stays in the monitor; the phone links to the real Play Store listing. */
.cp-home-hero .cp-device-visual { padding:0; }
.cp-device-scene { position:relative; width:100%; aspect-ratio:1.48; isolation:isolate; }
.cp-device-scene::after { content:''; position:absolute; z-index:-1; left:-4%; right:-3%; bottom:3%; height:11%; border-radius:50%; background:radial-gradient(ellipse,#77654838,transparent 68%); pointer-events:none; }
.cp-device-halo { position:absolute; z-index:-2; width:91%; height:86%; right:-3%; top:-4%; border-radius:50%; background:linear-gradient(145deg,#ffe995,#fee417 65%,#f2d119); pointer-events:none; }
.cp-device-halo::after { content:''; position:absolute; inset:-4% 4%; border:1px solid #d7b64b55; border-radius:50%; transform:rotate(-24deg) scaleX(1.22); }
.cp-home-hero .cp-device-scene > .cp-hero-bat { z-index:0; top:65%; left:-7%; width:114%; }
/* The photographed bezel and curved aluminium stand follow the selected reference. */
.cp-home-hero .cp-device-scene { aspect-ratio:1.36; }
.cp-monitor-frame { position:absolute; z-index:2; left:-9%; top:-2%; width:100%; aspect-ratio:1448/1086; }
.cp-monitor-photo { display:block; width:100%; height:100%; pointer-events:none; filter:drop-shadow(2px 9px 7px #514b3430); }
.cp-home-hero .cp-monitor-frame > .cp-desktop-monitor {
 position:absolute; z-index:1; left:0; top:0; width:100%; height:auto; aspect-ratio:1.6;
 margin:0; padding:0; border:0; border-radius:6px; background:#111713; box-shadow:none;
 transform:var(--monitor-screen-transform); transform-origin:0 0; transform-style:flat;
 transition:none; will-change:auto; rotate:none; opacity:0;
}
.cp-monitor-frame.is-fitted > .cp-desktop-monitor { opacity:1; }
.cp-home-hero .cp-monitor-frame > .cp-desktop-monitor::before,
.cp-home-hero .cp-monitor-frame > .cp-desktop-monitor::after { display:none; }
.cp-monitor-frame .hero-broadcast-frame.hero-drs.drs-view { border-radius:6px; box-shadow:none; }
.cp-device-ball { position:absolute; z-index:4; left:11%; bottom:2%; width:16%; height:auto; filter:drop-shadow(3px 8px 5px #4e2e2340); transform:rotate(-14deg); pointer-events:none; }
.cp-device-scene .drs-bottom { top:clamp(8px,1.4vw,14px); bottom:auto; }
/* Photographic hardware: a single alpha asset keeps every edge and detail in proportion. */
.cp-store-phone {
 position:absolute; z-index:5; right:0; bottom:4%; width:32%; aspect-ratio:732/1508;
 display:block; padding:0; border:0; border-radius:14% / 6.8%; background:transparent;
 box-shadow:none; filter:drop-shadow(5px 10px 9px #24242538);
 transform:rotate(1deg); transform-origin:50% 90%; container-type:inline-size;
 text-decoration:none; color:#16171b;
}
.cp-store-phone:hover { color:#16171b; }
.cp-store-phone:focus-visible { outline:3px solid #0b3d23; outline-offset:6px; }
.cp-phone-hardware { position:absolute; z-index:4; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
/* This opening is measured in the original 1024 × 1536 hardware image. */
.cp-phone-screen { position:absolute; left:5.6%; top:2.1%; width:88.8%; height:95.8%; overflow:hidden; border-radius:13% / 5.8%; background:#fff; }
.cp-phone-screen > .cp-phone-store-shot { position:absolute; inset:6.5% 0 3.5%; display:block; width:100%; height:90%; object-fit:cover; object-position:top; opacity:0; transition:opacity .5s ease; }
.cp-phone-screen > .cp-phone-store-shot.is-active { opacity:1; }
.cp-phone-status { display:flex; justify-content:space-between; align-items:center; height:6.5%; padding:0 7.5%; font:600 4cqw/1 Arial,sans-serif; background:#fff; }
.cp-phone-status svg { width:23%; height:37%; }
.cp-phone-home { position:absolute; z-index:5; width:30%; height:.6%; max-height:4px; min-height:1px; bottom:3.6%; left:35%; border-radius:5px; background:#151619; }
.cp-device-visual .cp-hero-preview-caption { margin-top:2px; }

@media (max-width:1120px) {
 .cp-device-scene { max-width:680px; margin-inline:auto; }
 .cp-home-hero .cp-device-visual { width:min(100%,680px); }
}
@media (max-width:600px) {
 .cp-home-hero .cp-device-visual { width:min(100%,480px); }
 .cp-home-hero .cp-monitor-frame > .cp-desktop-monitor { border-radius:4px; }
 .cp-monitor-frame .hero-broadcast-frame.hero-drs.drs-view { border-radius:4px; }
 .cp-device-halo { top:-4%; }
 .cp-device-scene .drs-top.drs-top-simple { top:5px; right:5px; }
 .cp-device-scene .hero-live-badge { font-size:8px; padding:3px 4px; }
 .cp-device-scene .drs-bottom { left:5px; top:5px; bottom:auto; }
 .cp-device-scene .drs-result { padding:4px 6px; }
 .cp-device-scene .drs-result strong { font-size:8px !important; }
 .cp-device-visual .cp-hero-preview-caption p { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
 .cp-phone-screen > .cp-phone-store-shot { transition:none; }
 .cp-home-hero .cp-monitor-frame > .cp-desktop-monitor { transform:var(--monitor-screen-transform) !important; }
 .cp-store-phone { transform:none !important; }
}