/* Platform tour — real product screenshots.
   Replaces the mock-screen stylesheet that used to build the screens in CSS.
   The browser chrome comes from .showcase-wrap in styles.css, so this only has
   to size and crop the image. */

.tour-shot {
  margin: 0;
  display: block;
  background: var(--ink-2);
}

.tour-shot img {
  display: block;
  width: 100%;
  height: auto;
  /* Screens are captured at 1280x800; cropping to that ratio keeps every tab the
     same height instead of the panel jumping as you switch screens. */
  aspect-ratio: 1280 / 800;
  object-fit: cover;
  object-position: top center;
}

/* Below tablet a full desktop screen scaled to the viewport is unreadable, so the
   shot keeps a legible width and pans horizontally instead of shrinking. */
@media (max-width: 720px) {
  .tour-shot {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .tour-shot img {
    width: 680px;
    max-width: none;
    aspect-ratio: 1280 / 760;
  }
}

@media (max-width: 480px) {
  .tab-row { gap: 6px; }
  .tab { padding: 7px 10px; font-size: 12px; }
}