/* Only the two display surfaces in the existing questionnaire hero.
   The original photo is untouched. Match its cover/25% crop at every size. */
.product-page .pf-questionnaire .pf-hero-questionnaire .q-hero-imagebox {
  position:absolute; inset:0; container-type:size; pointer-events:none;
}
.product-page .pf-questionnaire .q-hero-device-stage {
  position:absolute; width:max(100cqw,150cqh); height:max(66.6666667cqw,100cqh);
  left:50%; top:25%; transform:translate(-50%,-25%); isolation:isolate;
}
.product-page .pf-questionnaire .pf-hero-questionnaire .q-hero-device-stage > img {
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:fill; object-position:center; transform:none;
}
.product-page .pf-questionnaire .q-hero-device-stage > .pf-screen-plane {
  position:absolute; top:0; left:0; width:100%; height:auto;
  aspect-ratio:1436 / 2024; overflow:hidden; border-radius:1.6%;
  transform-origin:0 0; visibility:hidden; background:#f6f8fc; z-index:1;
}
.product-page .pf-questionnaire .q-hero-device-stage > .pf-screen-plane[data-projection-state="mapped"] {visibility:visible}
.product-page .pf-questionnaire .pf-hero-questionnaire .q-hero-device-stage .pf-screen-plane > img {
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:fill; object-position:center; transform:none;
}
.product-page .pf-questionnaire .q-hero-device-stage > .q-phone-foreground {
  z-index:2; clip-path:url(#q-hero-phone-outline);
}
.product-page .pf-questionnaire .q-hero-device-stage > .pf-screen-plane.q-phone-screen {
  /* Sample the supplied original near the phone's aspect ratio before the
     existing corner projection, avoiding an oversized, compressed texture. */
  z-index:3; border-radius:10% / 6%;
  width:45%; max-width:1012px; height:auto; aspect-ratio:1 / 2;
}
@media(max-width:800px) {
  .product-page .pf-questionnaire .pf-hero-questionnaire .q-hero-imagebox {
    width:135%; transform:translateX(-25.9%);
  }
}