/* The two genuine client windows share a height without cropping or distortion. */
#intent .module-stage {
  position: relative;
  width: 100%;
  height: auto;
  min-height: var(--intent-stage-height, 0px);
  max-height: none;
  margin: var(--intent-stage-margin, 24px) auto 0;
  padding: 22px 0 48px;
  perspective: 2100px;
  overflow: visible;
}

#intent .module-frame {
  position: relative;
  inset: auto;
  width: var(--intent-frame-width, 240px);
  max-width: 90%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0 auto;
  padding: 5px;
  overflow: visible;
  transform-origin: 50% 50%;
  transform: rotateX(calc(4deg + var(--py, 0deg))) rotateY(calc(-5deg + var(--px, 0deg)));
  box-shadow: 2px 3px 0 #c4b3d6, 5px 7px 0 #a28ab7, 0 30px 46px -27px #4c2e645c;
}

#intelligence .module-frame {
  transform: rotateX(calc(4deg + var(--py, 0deg))) rotateY(calc(-5deg + var(--px, 0deg)));
}

#intent .module-frame > img {
  display: block;
  position: static;
  inset: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
}

#intent .module-stage::before {
  bottom: 20px;
  height: 72px;
  transform: rotateX(65deg);
  opacity: .8;
}

@media (max-width: 760px) {
  #intent .module-stage {
    min-height: 0;
    margin-top: 16px;
    padding: 16px 0 34px;
    perspective: 1700px;
  }
  #intent .module-frame {
    width: min(70%, 260px);
    padding: 3px;
    border-radius: 9px;
    transform: rotateX(2deg) rotateY(-2deg) rotateZ(-.7deg);
    box-shadow: 2px 3px 0 #c4b3d6, 4px 5px 0 #a28ab7, 0 18px 30px -20px #4c2e645c;
  }
  #intelligence .module-frame { transform: rotateX(2deg) rotateY(-2deg) rotateZ(-.7deg); }
  #intent .module-frame > img { border-radius: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  #intent .module-frame { transition: none; }
}