/* Reuse the Work hardware assets, dimensions and curved silhouette masks. */
.figma-mode .case-main .hero-mockup{aspect-ratio:16/10;min-height:0}
.case-body .hero-mockup .work-mockup{background:transparent;overflow:visible}
.case-body .apple-device .device-screen{left:var(--screen-left);top:var(--screen-top);width:var(--screen-width);height:var(--screen-height);display:block;box-shadow:none;border:0;z-index:1}
.case-body .apple-device .device-screen img{display:block;image-rendering:auto}
.case-body .apple-device.device-desktop .device-screen{border-radius:1px}
.case-body .apple-device.device-laptop .device-screen{border-radius:2% 2% 0 0;background:#202020}
.case-body .apple-device.device-phone .device-screen{border-radius:15.5% / 6.8%;background:#fff}
.case-body .apple-device .device-island,.case-body .apple-device .device-notch,.case-body .apple-device .device-home-indicator{z-index:3;pointer-events:none}
.case-body .apple-device::before,.case-body .apple-device::after{content:none}
.case-body .video-panel{--device-padding:28px;padding:var(--device-padding);box-sizing:border-box}
.case-body .video-panel .apple-device{position:relative;flex:none;inset:auto;width:min(100%,calc((var(--stage-h) - 2 * var(--device-padding)) * var(--device-ar)));max-height:100%;margin:0;filter:drop-shadow(0 8px 8px #243e4326)}
.case-body .video-panel .device-desktop{--device-ar:1.3333333333}
.case-body .video-panel .device-laptop{--device-ar:1.5}
.case-body .video-panel .device-phone{--device-ar:.48885172798}
.case-body .apple-device .device-frame{display:block;position:absolute;inset:0;width:100%;height:100%;image-rendering:auto;pointer-events:none}
.case-body .apple-device .device-screen video{display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:contain;border-radius:0;background:#fff}
.case-body .apple-device.device-laptop .device-screen video{background:#202020}
.case-body .apple-device.device-phone .device-screen video{position:absolute;top:7%;left:0;width:100%;height:89%;background:#fff}
/* Give the opening product preview more room without crowding project details. */
@media(min-width:751px){
 .figma-mode .case-main .case-hero .hero-mockup{width:62%}
 /* Align the visible phone edge, accounting for its transparent image margin. */
 .case-body .hero-microsoft .work-mockup{transform:translate(5.8826%, 7.4449%)}
 /* Align visible device bottoms with the project details box, excluding transparent margins. */
 .case-body .hero-allied .work-mockup{transform:translateY(8.3890%)}
 /* Align the visible iMac silhouette with the Service card edge. */
 .case-body .hero-allied .device-desktop{left:auto;right:-3.4240%}
 .figma-mode .case-main .case-hero .case-meta{width:calc(76% - 20px);max-width:none}
 .figma-mode .case-main .case-hero .case-meta dd{overflow-wrap:anywhere}
}
@media(max-width:750px){
 .figma-mode .case-main .case-hero .hero-mockup{aspect-ratio:16/10;min-height:0;width:100%;margin:12px 0}
 .case-body .final-swipe .video-panel{--device-padding:16px}
}