/* Isometric device: a flat screen recording skewed onto the angled screen of a device mock-up, in the browser (no re-encoding, so the video file stays small).
   The mock-up is a PNG with the screen cut out (assets/images/mands/iPad-mask.png, 1421 x 1006; the dark section colour is baked into it, so use it on a dark section).
   The video is laid out flat at its own size (1280 x 960) and one 3D matrix (matrix3d) pins its four corners to the four corners of the screen hole. That matrix is worked out from the corners
   of the hole (138,401  910,58  1299,520  524,863 in the PNG, grown 1.2% so the bezel hides the video's edge); for another mock-up or another video shape, work out a new one.
   The whole stage is drawn at the PNG's size and scaled to fit the box by js/iso-device.js (sets --k). Without the script it is at 0.859 (a 1220px box).
   <div class="iso-device">
     <div class="iso-device__stage">
       <video src="assets/video/….mp4" poster="…" muted loop playsinline autoplay preload="metadata" width="1280" height="960" aria-label="…"></video>
       <img class="iso-device__frame" src="assets/images/mands/iPad-mask.png" alt="" width="1421" height="1006">
     </div>
   </div> */
.iso-device { position: relative; width: 100%; aspect-ratio: 1421 / 1006; overflow: clip; }
.iso-device__stage { position: absolute; left: 0; top: 0; width: 1421px; height: 1006px; transform-origin: 0 0; transform: scale(var(--k, 0.859)); }
.iso-device__stage > video { position: absolute; left: 0; top: 0; width: 1280px; height: 960px; max-width: none; transform-origin: 0 0; transform: matrix3d(0.6088702444,-0.2712713449,0,-1.635694549e-06,0.4053758745,0.4844756853,0,-2.937573884e-06,0,0,1,0,131.043,400.286,0,1); background: #000; }
.iso-device__frame { position: absolute; left: 0; top: 0; width: 1421px; height: 1006px; max-width: none; pointer-events: none; }
.cs-section__title + .iso-device { margin-top: 56px; }   /* the mock-up PNG is opaque (the section colour is baked in), so keep it clear of the title's descenders */
.cs-columns:has(+ .iso-device) { position: relative; z-index: 1; }   /* the copy sits ABOVE the mock-up PNG (which is opaque), so the descenders of its last line are never covered */
.cs-columns + .iso-device { margin-top: 0; }   /* under the context / stats columns: the PNG has its own empty space above the iPad */
.iso-device + .cs-split { margin-top: var(--cs-row-gap); }   /* text + figure row under the mock-up */