/* The app screenshots inside the phone frames.
   Last sheet in the cascade, where the three generated screens-* sheets used
   to sit: the phones held hand-built DOM mock-ups until 2026-08-12, when the
   owner replaced them with real captures of the shipped app
   (design_handoff_fitonova_site/screenshots -> tools/gen_shots.py ->
   public/assets/shots/<theme>/<name>.webp).

   Three things this sheet owes the page, and each one is asserted by
   tools/check/shots_checks.py:

   1. THE PICTURE FILLS THE GLASS AND NOTHING ELSE.
      The captures are 1080x2400 and .phone-screen is
      `height: (--pwn - padding*2) * 800px / 360` -- both 9:20 -- so the
      image sits in the frame with no crop and no letterbox at any --pwn the
      hero, the fan and the doc figures use. `object-fit: cover` is the
      insurance, not the plan: it decides only what a sub-pixel rounding
      difference does, and it must never be `contain`, which would show the
      frame's own ground as two bars.

   2. EXACTLY ONE OF THE PAIR IS EVER VISIBLE.
      Every slot carries a light capture and a dark one, switched by the same
      --mark-l / --mark-d pair the brand marks and the theme glyph use -- the
      four theme blocks in tokens.css set them, so the switch follows the
      system preference AND the header toggle without a line of script.

   3. AND THE SWITCH CANNOT BE OUTRANKED.
      `.brand img { display: block }` beating a lone `.mark-light` is the
      trap this site has already paid for once. Nothing here sets `display`
      on the shared class: the ONLY two display declarations in the sheet are
      the two theme rules, each qualified with .shot so it outranks any
      element-level `img` rule that arrives later. */

.shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.shot.shot-light {
  display: var(--mark-l);
}

.shot.shot-dark {
  display: var(--mark-d);
}