/* Product windows on the older pages (v6, the Friday, the letter, home, features).
   Each window is a tight crop cut from the double-density screens in shots/ (see the generator notes in REVIEW.md),
   with its own phone window where the desktop one is too wide. Percentages for callouts and hotspots are computed
   from the window, so they hold at every width. */
.hw { display: block; position: relative; overflow: hidden; background: #fff; aspect-ratio: var(--ar-d); }
.hw picture { display: block; }
.hw img { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: var(--ar-d); }
.frame--mat .hw { border-radius: 8px; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.14); }
.hw .callout[data-m] { --rx: var(--drx); --ry: var(--dry); --rw: var(--drw); --rh: var(--drh); }
.hw .hs[data-m] { --x: var(--dx); --y: var(--dy); --w: var(--dw); --h: var(--dh); }
.lf-figs { display: grid; gap: 14px; min-width: 0; }
.lf-figs .lf-fig { margin: 0; }
@media (max-width: 720px) {
  .hw { aspect-ratio: var(--ar-m); }
  .hw img { aspect-ratio: var(--ar-m); }
  .hw .callout[data-m] { --rx: var(--mrx); --ry: var(--mry); --rw: var(--mrw); --rh: var(--mrh); }
  .hw .hs[data-m] { --x: var(--mx); --y: var(--my); --w: var(--mw); --h: var(--mh); }
  .hw [data-nm] { display: none; }
}
@media (min-width: 721px) { .hw [data-nd] { display: none; } }

/* phone-only caption variants where the phone window shows less than the desktop one */
.cap-m { display: none; }
@media (max-width: 720px) { .cap-d { display: none; } .cap-m { display: inline; } }