/* v45: complete screenshots inside proportionate iPhone hardware. */
.product-device{
  --mbp-device-ready:1;--product-x:0px;--product-y:0px;--product-rx:0deg;--product-ry:0deg;--product-scale:1;
  position:relative;box-sizing:border-box;width:min(100%,286px);flex:0 1 286px;
  padding:7px;border:1px solid #827F83;border-radius:14% / 6.6%;
  background:linear-gradient(135deg,#8D898A 0%,#1A1B20 8%,#08090D 45%,#4E4D53 92%,#B2ACAA);
  box-shadow:0 26px 40px -22px #080A1C70,inset 0 0 0 2px #090A0E;
  transform:translate3d(var(--product-x),var(--product-y),0) rotateX(var(--product-rx)) rotateY(var(--product-ry)) scale(var(--product-scale));
  transform-origin:50% 52%;backface-visibility:hidden;
}
.product-device::before,.product-device::after{content:"";position:absolute;width:3px;background:#55535A;border-radius:2px;pointer-events:none}
.product-device::before{left:-3px;top:20%;height:12%}
.product-device::after{right:-3px;top:27%;height:10%}
.iphone-screen{position:relative;overflow:hidden;border-radius:11.8% / 5.5%;isolation:isolate;background:#071A36;aspect-ratio:1170 / 2532}
.product-device .iphone-screen img{display:block;position:relative;width:100%;height:100%;max-width:none;aspect-ratio:1170 / 2532;object-fit:contain;border-radius:0;box-shadow:none;transform:none;filter:none}
.iphone-notch{position:absolute;top:0;left:33%;width:34%;height:3%;background:#090A0D;border-radius:0 0 18% 18% / 0 0 60% 60%;pointer-events:none}
.iphone-notch::after{content:"";position:absolute;right:17%;top:31%;width:6px;height:6px;background:#111827;border:1px solid #24252A;border-radius:50%}
.iphone-reflection{position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 30%,#FFFFFF12 44%,transparent 58%);background-size:300% 100%;opacity:0}
[data-product-motion="running"] .iphone-reflection{animation:productReflection 12s ease-in-out infinite}
[data-product-motion="running"] .product-device{will-change:transform}
[data-device-stage]{perspective:1500px;perspective-origin:50% 45%}
.goodnight-hero .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px}
.goodnight-hero .goodnight-product-stage{display:flex;justify-content:center;align-items:center;margin:0;overflow:visible;min-width:0}
.goodnight-hero .product-device{width:min(100%,286px);flex:none}
.goodnight-hero{padding-top:72px;padding-bottom:82px;background:radial-gradient(ellipse at 88% 42%,#E6DDCB80,transparent 60%),var(--paper)}
.product-pair{display:flex;justify-content:center;align-items:flex-start;gap:24px;min-width:0;padding:12px 0 34px}
.product-pair .product-device{flex:0 1 210px;width:min(45%,210px);min-width:0}
.product-pair .product-device:nth-child(2){margin-top:28px}
.ui-steps .product-device{width:min(calc(100% - 12px),240px);margin:0 auto 26px}
.product-single{display:flex;justify-content:center;padding:12px 0 24px}
.home-product-stage{display:flex;flex-direction:column;align-items:center;gap:28px;overflow:visible}
.home-product-stage .product-device{width:min(100%,286px);flex:none}
@keyframes productReflection{0%,68%,100%{background-position:120% 0;opacity:0}78%{background-position:30% 0;opacity:.5}88%{background-position:-100% 0;opacity:0}}
/* The screenshot stays uncropped in project previews at every breakpoint. */
.labs-home-visual img,.labs-project .labs-desktop-frame img{aspect-ratio:1440 / 800;object-fit:contain}
.home-areas .card:first-child img[src*="header-v45"]{aspect-ratio:1440 / 800;object-fit:contain;background:#F5F0E6}
@media(max-width:820px){
  .goodnight-hero .hero-grid{grid-template-columns:1fr;gap:42px}
  .goodnight-hero{padding-top:48px;padding-bottom:72px}
  .goodnight-hero .product-device{width:min(76vw,260px)}
  .product-pair{gap:18px}
}
@media(max-width:480px){
  .product-device{padding:5px}
  .product-pair{flex-direction:column;align-items:center;gap:30px}
  .product-pair .product-device{width:min(100%,248px);flex:none}
  .product-pair .product-device:nth-child(2){margin-top:0}
  .ui-steps .product-device{width:min(calc(100% - 12px),238px)}
}
@media(prefers-reduced-motion:reduce){
  .product-device{transform:none!important;will-change:auto!important}
  .iphone-reflection{animation:none!important;opacity:0!important}
}