/* iPhone 16 Pro Max: 1520×3068 frame; 1320×2868 display at (100,100).
   Separate image layer preserves screenshots and video playback. */
.shot.phone {
  position:relative; width:100%; aspect-ratio:1520 / 3068;
  border:0; border-radius:0; background:transparent; overflow:visible;
  box-shadow:none; isolation:isolate;
  filter:drop-shadow(0 12px 15px rgba(31,22,48,.19));
}
.shot.phone::before {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:url("iphone-16-pro-max-black.png") center / 100% 100% no-repeat;
}
.hero-shot.tilt .shot.phone::after {display:none}
.shot.phone .iphone-screen {
  position:absolute; left:6.578947%; top:3.259452%; width:86.842105%; height:93.481095%;
  border-radius:10% / 4.60251%; overflow:hidden; background:#0d0821;
}
.shot.phone .iphone-screen > img,.shot.phone .iphone-screen > video {
  display:block; width:100%; height:100%; object-fit:cover;
}
/* Older recordings omit the status area. Restore its space without stretching
   or cropping application controls; mask only the old partial island at the top. */
.shot.phone.legacy-capture .iphone-screen > img,
.shot.phone.legacy-capture .iphone-screen > video {
  position:absolute; bottom:0; height:auto; clip-path:inset(1.15% 0 0 0);
}
.shot.phone.legacy-capture:has(video[src*="dm"]) .iphone-screen {
  background:linear-gradient(110deg,#d5baff,#f8a5f6);
}
.shot.phone.only-narrow {display:none}
@media(max-width:760px){
  .shot.web.only-wide {display:none}
  .shot.phone.only-narrow {display:block;max-width:210px;margin:0 auto}
}