/* Photographic hardware. The original app screenshots remain separate image elements. */
body .phone.studio-device {
  position:relative;
  aspect-ratio:var(--studio-device-ratio,652 / 1425);
  height:auto;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  background:transparent!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:visible;
  transform:none!important;
  line-height:0;
  filter:drop-shadow(5px 13px 12px #00000028);
  isolation:isolate;
}
body .phone.studio-device::before,body .phone.studio-device::after{content:none!important}
body .phone.studio-device .studio-device-crop {
  position:absolute;left:0;top:0;width:652px;height:1425px;
  transform-origin:0 0;overflow:hidden;pointer-events:none;
}
body .phone.studio-device .studio-device-hardware {
  position:absolute;left:-188px;top:-55px;
  display:block;width:1024px!important;height:1536px!important;
  max-width:none!important;border:0!important;border-radius:0!important;
  margin:0!important;padding:0!important;z-index:0;
}
body .phone.studio-device .studio-device-plane {
  position:absolute;left:0;top:0;width:390px;height:844px;
  transform-origin:0 0;border-radius:48px;overflow:hidden;
  background:white;z-index:1;
}
body .phone.studio-device .studio-device-plane>img {
  display:block;width:100%!important;height:100%!important;
  max-width:none!important;object-fit:fill;border:0!important;
  border-radius:0!important;margin:0!important;padding:0!important;
}
body .phone.studio-device-front .studio-device-plane>img{object-fit:contain;background:#fff}
.hero-product .device-discover,.hero-product .device-matches {transform:none!important}
.hero-product {gap:6px;perspective:none;padding-left:0;padding-right:0}
.hero-product .device {width:auto;min-width:0;margin-left:0;margin-right:0}
.hero-product .device-discover {flex:.86 1 0;max-width:242px;margin-top:0;margin-bottom:40px;z-index:1}
.hero-product .device-matches {flex:1.14 1 0;max-width:304px;margin-top:28px;margin-bottom:0;z-index:2}
.hero-product .studio-device {width:100%}
.hero-product::after {opacity:.09;filter:blur(15px);bottom:38px}
.insight-card .phone.studio-device {width:calc(100% + 10px);max-width:250px;margin-left:-5px;margin-right:-5px}
.insight-card .screenshot-link {padding-left:2px;padding-right:2px}
.choice-phone.studio-device {width:270px;max-width:36%;filter:drop-shadow(7px 19px 15px #0005)}
.blog-app .phone.studio-device {max-width:240px}
@media(min-width:1500px){.hero-product .device-discover{max-width:250px}.hero-product .device-matches{max-width:314px}}
@media(max-width:1050px){.choice-phone.studio-device{max-width:42%}}
@media(max-width:700px){
  .hero-product{height:auto;aspect-ratio:auto;gap:4px;padding:18px 0 35px}
  .hero-product .device{width:auto;max-width:none}
  .hero-product .device-discover{flex:.86 1 0;margin-top:0;margin-bottom:28px}
  .hero-product .device-matches{flex:1.14 1 0;margin-top:22px;margin-bottom:0}
  .hero-product .phone.studio-device{filter:drop-shadow(3px 9px 8px #00000028)}
  .choice-phone.studio-device{width:245px;max-width:90%}
}
@media(max-width:640px){
  .insight-card .phone.studio-device{width:calc(100% + 6px);max-width:none;margin-left:-3px;margin-right:-3px;filter:drop-shadow(3px 8px 8px #00000028)}
}

/* Give the real hardware and app UI enough space on phone-sized browsers. */
@media(max-width:640px){
 .insight-card{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px}
 .insight-card .insight-copy{margin-bottom:0}
 .insight-card .screenshot-link{width:100%;padding:0}
 .insight-card .phone.studio-device{width:min(100%,240px);max-width:240px;margin:0 auto}
 .insight-card .zoom-label{justify-content:center;font-size:11px;margin-top:12px;padding-top:12px}
}