/* ---------------------------------------------------------------------------
   rai-sw.com — layout corrections
   Added 2026-08-14.

   BUG — overlapping product screenshots in the "ACTUAL PRODUCT INTERFACES"
   section (rAI-GO / rAI-Q).

   .interface-media declares a fixed `min-height:540px`, but both of its
   children (.screen-main and .screen-inset) are `position:absolute` and so are
   out of flow — they contribute no height to the container. Their own height
   instead scales with the container's WIDTH, because `.screen-frame img` is
   `width:100%; height:auto`.

   That 540px only holds while the media column is around 950px wide. Beyond
   that, .screen-main grows taller than its container and spills into the
   following content:

       viewport   overflow
       2560px     +301px
       2092px     +128px
        800px      +71px   (single-column rules widen .screen-main to 96%)

   which is what made the rAI-GO and rAI-Q frames collide.

   FIX — derive the container's height from its width via aspect-ratio, so the
   whole composition scales at the proportion it was authored at (644x540)
   rather than being pinned to one magic number. Verified: no overflow at any
   width from 320px to 2560px.
   --------------------------------------------------------------------------- */

.interface-media {
	min-height: 0;
	aspect-ratio: 644 / 540;
}

@media (max-width: 800px) {
	.interface-media,
	.q-feature .interface-media {
		min-height: 0;
		aspect-ratio: 600 / 420;
	}
}