/* V31: homepage-only front hardware, independently drawn from Apple’s published
   78 × 163.4 mm silhouette and rounded-display proportions. No Apple artwork.
   Reference: https://support.apple.com/en-us/125091
   Original video/app aspect stays untouched inside the stable hardware shell. */
.recording-hero .hero-phone-pair .hero-phone{
 box-sizing:border-box;height:auto!important;aspect-ratio:78/163.4!important;
 padding:0;border:1px solid #c3c8d2;border-radius:16.2% / 7.733%;
 background:linear-gradient(112deg,#e5e8ef 0%,#9299a5 12%,#303641 28%,#a5adb9 52%,#555d69 78%,#d1d6df 100%);
 box-shadow:inset 0 0 0 1px #ffffff45,0 18px 32px #0007;
 overflow:visible;
}
.recording-hero .hero-phone-pair .hero-phone:before{
 content:'';display:block;position:absolute;inset:0 -3px 0 1px;z-index:-1;
 border:1px solid #747e8b;border-radius:inherit;
 background:linear-gradient(90deg,#343b47,#b5bdc9 88%,#505967 96%,#d2d9e3);
 box-shadow:2px 1px 3px #0008;pointer-events:none;
}
.recording-hero .hero-phone-pair .hero-phone:after{display:none}
.recording-hero .hero-device-glass{
 position:absolute;inset:1.54% 3.28%;z-index:2;isolation:isolate;
 border-radius:14.8% / 6.811%;overflow:hidden;background:#090a0d;
 box-shadow:0 0 0 2px #040509,0 0 0 2.7px #ffffff26;
 /* Keep the hardware's curved glass as the clipping boundary on iOS. */
 -webkit-mask-image:-webkit-radial-gradient(white,black);
}
.recording-hero .hero-phone-pair .hero-phone-screen[data-device-platform]{
 position:absolute;inset:auto 0 0;width:100%;height:auto;max-height:100%;
 aspect-ratio:var(--device-aspect,.492);border-radius:0;transform:none;
}
.recording-hero .hero-phone-pair .hero-phone-screen:after{display:none}
.recording-hero .hero-device-glass>.hero-phone-screen[data-device-mode="recorded"]{
 top:50%;bottom:auto;transform:translateY(-50%);
}
.recording-hero .hero-device-island{
 position:absolute;top:1.2%;left:35.5%;width:29%;height:4%;z-index:5;
 display:block;border:1px solid #141922;border-radius:999px;background:#010204;
 box-shadow:0 0 0 .5px #000,inset 0 1px 1px #222834;pointer-events:none;
}
.recording-hero .hero-device-island i{
 position:absolute;right:8%;top:22%;height:56%;aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle at 40% 35%,#394c73 0,#111c30 24%,#050910 60%,#010204 80%);
 box-shadow:inset 0 0 0 .5px #1b2435;
}
/* A captured app screen keeps its own interface; no second island or app bar. */
.recording-hero .hero-phone-screen[data-device-mode="recorded"]~.hero-device-island{display:none}
.recording-hero .hero-device-buttons{position:absolute;inset:0;z-index:1;pointer-events:none}
.recording-hero .hero-device-buttons i{
 position:absolute;display:block;width:1.1%;min-width:1px;border-radius:2px;
 background:linear-gradient(90deg,#444d5b,#d6dce6 45%,#657080);box-shadow:0 0 1px #0009;
}
.recording-hero .device-action{left:-1.35%;top:19%;height:3.5%}
.recording-hero .device-volume-up{left:-1.35%;top:27%;height:6.3%}
.recording-hero .device-volume-down{left:-1.35%;top:36%;height:6.3%}
.recording-hero .device-side{right:-1.65%;top:29%;height:9%}
.recording-hero .device-camera{right:-1.65%;top:62%;height:7%}
@media(min-width:1101px){
 .recording-hero .hero-phone-front{max-width:calc((clamp(560px,35.95vw,760px) - 50px) * .4773561812)}
 .recording-hero .hero-phone-back{max-width:calc((clamp(560px,35.95vw,760px) - 110px) * .4773561812)}
}
@media(max-width:760px){
 .recording-hero .hero-phone-pair{aspect-ratio:.92}
 .recording-hero .hero-phone-pair .hero-phone{box-shadow:inset 0 0 0 .5px #ffffff40,0 10px 22px #0006}
 .recording-hero .hero-phone-pair .hero-phone:before{inset:0 -1.5px 0 .5px;box-shadow:1px 1px 2px #0007}
 .recording-hero .hero-device-glass{box-shadow:0 0 0 1px #040509,0 0 0 1.5px #ffffff20}
 .recording-hero .hero-device-island{border-width:.5px}
}