/* Shared device presentation. Source screenshots stay intact; existing hardware frames are retained. */
.device-render{display:block;position:relative;width:100%;height:auto;aspect-ratio:.48;margin:0;padding:0;isolation:isolate;flex-shrink:0;font-size:initial;line-height:normal}
.device-render.tablet{aspect-ratio:.75}
.device-render>img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;position:static;margin:0;border:0;border-radius:0;box-shadow:none}
.device-render.native-shell{padding:3.5%;background:#111315;border:1px solid #8b8d90;border-radius:14% / 6.7%;box-shadow:0 0 0 2px #25282b,0 0 0 3px #595d60,0 15px 25px #0005}
.device-render.native-shell.tablet{padding:4%;border-radius:7% / 5.2%;box-shadow:0 0 0 2px #292b2c,0 0 0 3px #65696b,0 18px 25px #0005}
.device-render.native-shell>img,.exhibit-screen .native-shell>img{border-radius:11% / 5.3%;object-fit:contain}
.device-render.native-shell.tablet>img{border-radius:4% / 3%;object-fit:contain}
/* Crop the existing photographed phone, never the app UI, from SkyPilot's marketing canvas. */
.device-render.source-crop{overflow:hidden;border-radius:17% / 8%;background:#08090a}
.device-render.source-crop>img{position:absolute;left:var(--crop-left);top:var(--crop-top);width:var(--crop-width);height:var(--crop-height);max-width:none;object-fit:fill;border-radius:0}
.exhibit-screen{display:flex;flex-direction:column;justify-content:center;align-items:center}
.exhibit-screen>.device-render{width:100%;height:auto;max-height:none;flex-shrink:0}
.exhibit-screen>.screen-label{flex-shrink:0;width:100%;margin-top:7px}
.exhibit-ipad>.device-render{position:relative;display:block;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:100%;max-width:100%;margin:0 auto;padding:0;border-radius:0;background:none;transform:none;font-size:initial}
.exhibit-ipad>.device-render.native-shell{padding:4%;background:#111315;border-radius:7% / 5.2%}
.exhibit-ipad>.device-render img{width:100%;height:100%;object-fit:contain}
.gallery-canvas{padding:5px 10px}
.gallery-canvas>.device-render{height:100%;width:auto;max-width:100%;flex-shrink:1}
.gallery-canvas>.native-shell{padding:1.4%}
.gallery-canvas>.native-shell.tablet{padding:1.7%}
.gallery-canvas .device-render>img{width:100%;height:100%;max-width:none;max-height:none}
.gallery-canvas .source-crop>img{width:var(--crop-width);height:var(--crop-height)}
/* Four devices form one fanned deck, with enough exposed screen to identify every app. */
.hero-products .hero-phone{width:36%;height:auto;top:18%;transform-origin:50% 85%;filter:drop-shadow(0 22px 20px #0008);transition:transform .55s,filter .55s}
.hero-products .hero-phone>.device-render{position:relative;display:block;width:100%;height:auto;margin:0;aspect-ratio:.48;padding:0}
.hero-products .hero-phone>.native-shell{padding:3.5%}
.hero-products .hero-phone>.device-render>img{width:100%;height:100%;position:static;border:0;box-shadow:none;margin:0}
.hero-products .hero-left{left:1%;top:22%;z-index:1;transform:rotate(-12deg) translateY(18px)}
.hero-products .hero-center{left:22%;top:14%;z-index:4;transform:rotate(-3deg)}
.hero-products .hero-right{left:43%;right:auto;top:20%;z-index:2;transform:rotate(5deg) translateY(10px)}
.hero-products .hero-fourth{left:64%;top:22%;z-index:3;transform:rotate(12deg) translateY(18px)}
.hero-products .hero-phone:hover,.hero-products .hero-phone:focus-visible{z-index:6;transform:translateY(-20px) rotate(0deg);filter:drop-shadow(0 30px 28px #0009)}
.hero-products .hero-phone>.hero-product-label{position:relative;display:block;width:100%;height:auto;text-align:center;margin-top:15px;font-size:10px;color:#e4e0d6;white-space:nowrap;background:none;padding:0}
.hero-products .hero-left>.hero-product-label{text-align:left;padding-left:8%}
.hero-products .hero-right>.hero-product-label{text-align:right;padding-right:5%;transform:translateY(22px)}
.hero-products .hero-fourth>.hero-product-label{text-align:right;padding-right:5%}
@media(max-width:1100px){.hero-products .hero-phone{width:35%}.hero-products .hero-center{left:22%}.hero-products .hero-fourth{left:63%}.hero-products .hero-phone>.hero-product-label{font-size:9px}.hero-products .hero-right>.hero-product-label{transform:translateY(17px)}}
@media(max-width:760px){.hero-products{height:410px}.hero-products .hero-phone{width:35%;top:26%}.hero-products .hero-center{top:18%}.hero-products .hero-left{left:1%;transform:rotate(-12deg) translateY(8px)}.hero-products .hero-right{left:43%;transform:rotate(5deg) translateY(3px)}.hero-products .hero-fourth{left:63%;transform:rotate(12deg) translateY(8px)}.hero-products .hero-phone>.hero-product-label{font-size:7px;margin-top:10px}.hero-products .hero-right>.hero-product-label{transform:translateY(18px)}.device-render.native-shell{box-shadow:0 0 0 1px #25282b,0 0 0 2px #595d60,0 12px 18px #0004}.exhibit-screen>.screen-label{margin-top:3px}.exhibit-ipad>.device-render{width:auto;height:100%}.gallery-canvas>.native-shell{padding:2.5%}.gallery-canvas>.native-shell.tablet{padding:3%}}
.hero-products .hero-phone{width:31%;top:26%}.hero-products .hero-left{left:7%;top:26%}.hero-products .hero-center{left:24.5%;top:18%}.hero-products .hero-right{left:42%;top:24%}.hero-products .hero-fourth{left:59.5%;top:26%}
@media(max-width:760px){.hero-products .hero-phone{width:31%;top:29%}.hero-products .hero-center{top:22%}.hero-products .hero-left{left:7%}.hero-products .hero-right{left:42%}.hero-products .hero-fourth{left:59.5%}}
@media(prefers-reduced-motion:reduce){.hero-products .hero-phone{transition:none}.hero-products .hero-phone:hover,.hero-products .hero-phone:focus-visible{transform:none}}