/* ------------------------------------------------------------------
   Homepage hero visual (Oct 2026): the truck photo was replaced by a
   transparent image of the clinic portal on a laptop + phone
   (portal/platform-mockup*.webp, shared with the Platform Overview section). Webflow's .image-31 rules were
   written for a portrait photo (500px min-width, 20px radius, fixed
   372px height on phones); these overrides fit the 2:1 device mockup.
   ------------------------------------------------------------------ */

.image-31.hero-devices {
  min-width: 520px;
  height: auto;
  border-radius: 0;
}

@media screen and (max-width: 991px) {
  .image-31.hero-devices {
    min-width: 0;
  }
}

/* The mockup used to be revealed by Webflow's scroll-into-view interaction,
   which only fires once the element's bottom passes 52% of the viewport.
   With the hero's trust-badge row removed the image sits higher, so on tall
   desktop windows that trigger never fired and the image stayed invisible.
   It is above the fold anyway, so it fades in on load instead. */
.image-31.hero-devices {
  animation: hero-devices-in 0.8s ease-out 0.2s both;
}

@keyframes hero-devices-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-31.hero-devices {
    animation: none;
  }
}