/* Public home, section 3b "See MediHelp in action" (workstream g55): the demo video (or the first app
 * screen until the video exists) in a phone frame, then the 8 localized store screenshots as one
 * horizontally scrolling story. No motion of its own; the video only plays when the visitor presses play. */
.hm-tour { overflow: hidden; }
.hm-tour__head { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .hm-tour__head { grid-template-columns: minmax(0, 1fr) minmax(0, 290px); gap: 3.5rem; } }

/* Phone frame: the same dark bezel as the store screenshots, no 3D. */
.hm-tour__phone {
  justify-self: center; width: min(64vw, 270px); padding: .5rem; border-radius: 2.6rem;
  background: linear-gradient(145deg, #5b6b78 0%, #232c35 22%, #12181f 50%, #2a343e 78%, #66778a 100%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .45), 0 0 60px color-mix(in srgb, var(--hm-ink) 18%, transparent);
}
.hm-tour__screen { position: relative; overflow: hidden; border-radius: 2.1rem; background: #05080b; }
[data-tour-media="video"] .hm-tour__screen { aspect-ratio: 9 / 16; }
.hm-tour__screen img { display: block; width: 100%; height: auto; }
.hm-tour__screen video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Screenshot strip: scroll-snap, keyboard scrollable (tabindex on the list), mirrored by dir="rtl". */
.hm-tour__strip {
  display: flex; gap: 1rem; margin: 2.5rem 0 0; padding: .5rem max(1rem, calc((100vw - 1200px) / 2 + 1.5rem)) 1.25rem;
  list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(1rem, calc((100vw - 1200px) / 2 + 1.5rem));
  scrollbar-width: thin; overscroll-behavior-x: contain;
}
.hm-tour__strip:focus-visible { outline: 2px solid var(--hm-ink); outline-offset: -2px; border-radius: 1rem; }
.hm-tour__shot { flex: 0 0 clamp(150px, 42vw, 240px); scroll-snap-align: start; }
.hm-tour__shot img {
  display: block; width: 100%; height: auto; border-radius: 1.1rem; border: 1px solid var(--hm-line);
  background: #060c1c; box-shadow: var(--mh-soft-shadow);
}
@media (prefers-reduced-motion: no-preference) { .hm-tour__strip { scroll-behavior: smooth; } }