/* `.cover` is a fixed square everywhere else (the logo centers inside it and
   the demo video fills it edge-to-edge via `object-fit: cover`), but the app
   screenshot is a landscape UI capture — `contain`ing it into a square left a
   visible gap above and below the image, between its own drop-shadowed edge
   and `.cover`'s square border, so the border read as not "wrapping" the
   screenshot at all. Matching the box to the screenshot's own aspect ratio
   removes the gap entirely: `object-fit: contain` then fills it exactly, with
   the 16px padding reading as a deliberate, even frame on every side.

   Shipped as its own file rather than folded into the page's inline <style>
   block: the CSP only allow-lists that inline block by exact content hash, so
   editing it in place would need a matching server-side config change. A
   same-origin external stylesheet is covered by the existing `style-src 'self'`
   directive with no server change at all. */
.player[data-preview-state="screenshot"] .cover {
  aspect-ratio: 1124 / 818;
}