/* Complete native client windows: no enlarged images or clipped screenshot edges. */
#workflow .module-stage,
#intelligence .module-stage {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 24px auto 0;
  padding: 22px 0 48px;
  perspective: 2100px;
  overflow: visible;
}

#workflow .module-stage { max-width: 1060px; }

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

#intelligence .module-frame {
  width: min(86%, 610px);
  transform: rotateX(calc(4deg + var(--py, 0deg))) rotateY(calc(-5deg + var(--px, 0deg))) rotateZ(-1.5deg);
}

#workflow .module-frame > img,
#intelligence .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;
}

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

@media (max-width: 760px) {
  #workflow .module-stage,
  #intelligence .module-stage {
    margin-top: 16px;
    padding: 16px 0 34px;
    perspective: 1700px;
  }

  #workflow .module-frame,
  #intelligence .module-frame {
    width: 90%;
    max-width: 580px;
    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;
  }

  #workflow .module-frame > img,
  #intelligence .module-frame > img { border-radius: 5px; }
}

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