/* iPhone status bar proportions, with real vector indicators. */
.iphone-status{height:auto;aspect-ratio:390/59;padding:0 6.2%;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;font-size:11px;font-weight:600;line-height:1;letter-spacing:-.25px;color:#111;align-items:center;background:#fff}
.iphone-status>span:first-child{width:35px;text-align:center;padding-top:2px}.iphone-island{width:32.3%;height:62.7%;top:11.9%;border-radius:30px;background:#080808}.iphone-indicators{display:flex;align-items:center;gap:3px;letter-spacing:0;padding-top:1px}.iphone-indicators svg{display:block;flex:none}.status-signal{width:11px;height:8px}.status-wifi{width:11px;height:9px}.status-battery{width:18px;height:10px}
/* A generous asymmetric silhouette, distinct from the device outline. */
.iphone-stage:before{inset:13px -29px 42px -30px;width:auto;border-radius:0;transform:rotate(-7deg);background:#E3F0FA;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 650'%3E%3Cpath d='M96 23C160-12 190 38 253 25C335 10 388 65 367 130C350 178 409 203 391 277C375 342 351 345 371 421C394 503 332 548 270 560C212 572 175 653 107 616C48 584 68 509 28 457C-13 402 34 354 17 285C-8 208 23 172 37 121C51 74 38 50 96 23Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@media(max-width:1150px){.iphone-stage:before{inset:10px auto 38px;left:50%;width:min(390px,100%);transform:translateX(-50%) rotate(-7deg)}}
@media(max-width:700px){.iphone-stage:before{width:90%;inset-block:12px 46px;transform:translateX(-50%) rotate(-4deg)}}
.feature-case{z-index:1}
/* Keep the case and the organic backdrop visually separate at every breakpoint. */
@media(min-width:1151px){.feature-panel{column-gap:80px}}
@media(max-width:1150px){.feature-panel{row-gap:54px}}
@media(max-width:700px){.feature-panel{row-gap:50px}}
@media(min-width:1151px){.iphone-stage:before{right:-5px}}