/* iPhone mockup */
.iphone { --sb: #F2EFF9; --ink: #14062E; --drop: 0 30px 60px -22px rgba(20, 6, 46, .55), 0 12px 24px -12px rgba(20, 6, 46, .35);
  container-type: inline-size; position: relative; padding: 0.9%; border-radius: 14.2% / 6.6%; background: #040108;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1.2px #a9a4b6, var(--drop);
  transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.iphone::before, .iphone::after { content: ""; position: absolute; width: 1.1%; border-radius: 2px; background: linear-gradient(90deg, #45405a, #9a95a8); }
.iphone::before { left: -1.4%; top: 18%; height: 7%; }
.iphone::after { right: -1.4%; top: 26%; height: 12%; background: linear-gradient(90deg, #9a95a8, #45405a); }
.iphone.dark { --sb: #15062F; --ink: #fff; }
.iphone-screen { position: relative; overflow: hidden; border-radius: 13.4% / 6.2%; background: var(--sb); }
.iphone-status { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 12.3cqw; padding: 1.2cqw 7cqw 0 9.5cqw; color: var(--ink); font: 700 4.6cqw/1 "Plus Jakarta Sans", system-ui, sans-serif; }
.iphone-island { position: absolute; left: 50%; top: 2.6cqw; width: 28cqw; height: 8cqw; margin-left: -14cqw; border-radius: 99px; background: #000; }
.iphone-icons { display: flex; align-items: center; gap: 1.4cqw; }
.iphone-icons svg { height: 3.4cqw; width: auto; fill: currentColor; }
.iphone-icons svg.bat { height: 3.8cqw; }
.iphone-screen img { display: block; width: 100%; height: auto; }
.iphone { --hb: #FFFFFF; }
.iphone.dark { --hb: #1A0A3B; }
.iphone.dark.recap { --sb: #1B0A37; --hb: #6E4EE2; }
.iphone-screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7.7cqw; background: radial-gradient(closest-side, var(--ink) 99%, transparent) center 3.2cqw / 34cqw 1.4cqw no-repeat; }
@media (prefers-reduced-motion: reduce) { .iphone { transition: none; } }