/* Mobile-only layout refinements: loaded at 767px and below. */

.hero {
  min-height: 790px;
  padding-bottom: 64px;
}

.motion-ready [data-reveal="left"],
.motion-ready [data-reveal="right"] {
  transform: translate3d(0, 20px, 0);
}

.motion-ready [data-reveal].is-visible {
  transform: translate3d(0, 0, 0);
}

.hero-visual {
  position: relative;
  min-height: 330px;
  margin-top: 28px;
}

.hero-photo {
  height: 230px;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(5, 80, 50, 0.14);
}

.hero-photo img {
  object-position: 64% center;
  transform: scale(1.015);
}

.case-preview-mobile {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 158px;
  margin-top: 0;
  box-shadow: 0 18px 42px rgba(5, 80, 50, 0.16);
}

.preparation {
  min-height: 870px;
}

.preparation-photo {
  height: 190px;
  margin-top: 24px;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(5, 80, 50, 0.1);
}

.preparation-photo img {
  object-position: center 58%;
}

.preparation .safe-submit {
  margin-top: 20px;
}

.mobile-menu nav {
  transform-origin: top right;
  animation: mobileMenuIn 240ms ease both;
}

@keyframes mobileMenuIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 359px) {
  .hero {
    min-height: 820px;
  }

  .case-preview-mobile {
    right: 6px;
    left: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu nav {
    animation: none;
  }
}

/* Compact image-led landing page. */
.compact-hero {
  min-height: 650px;
  padding-top: 34px;
  padding-bottom: 44px;
}

.compact-hero h1 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 1.35;
}

.compact-hero .hero-lead {
  margin-top: 20px;
  font-size: 14px;
}

.compact-hero .hero-button {
  margin-top: 24px;
}

.compact-hero .hero-visual {
  min-height: 292px;
  margin-top: 24px;
}

.compact-hero .hero-photo {
  height: 240px;
}

.compact-hero .hero-photo img {
  object-position: 68% center;
}

.hero-status-card {
  right: 10px;
  bottom: 0;
  left: 10px;
  gap: 7px;
  padding: 13px 14px;
}

.hero-status-card > strong {
  font-size: 14px;
}

.visual-flow,
.role-strip,
.compact-pricing,
.compact-faq {
  padding-block: 60px;
}

.compact-dashboard {
  padding-block: 60px;
}

.compact-dashboard-card {
  min-height: 374px;
}

.role-strip-grid {
  grid-template-columns: 1fr;
}

.compact-final {
  min-height: 230px;
  padding-block: 58px;
}

@media (max-width: 359px) {
  .compact-hero {
    min-height: 680px;
  }
}

/* Althera / MedVi-derived landing layout. */
.reference-hero {
  min-height: 900px;
}

.reference-hero h1 {
  font-size: 41px;
}

.reference-card-rail {
  margin-top: 50px;
}

.reference-card {
  flex-basis: 218px;
  width: 218px;
}

.reference-card img {
  height: 176px;
}

.reference-showcase-media,
.reference-showcase-media > img {
  height: 540px;
}

.reference-showcase-panel {
  padding: 18px;
}

.reference-portal-person img {
  object-position: center 25%;
}

.reference-footer {
  min-height: 470px;
}

@media (max-width: 359px) {
  .reference-hero h1 {
    font-size: 37px;
  }
}

/* Mobile keeps the same motion grammar with shorter travel distances. */
.motion-ready .reference-card[data-reveal] {
  transform: translate3d(0, 34px, 0) rotate(var(--card-angle)) scale(0.96);
}

.motion-ready .reference-card[data-reveal].is-visible {
  transform: translate3d(0, 0, 0) rotate(var(--card-angle)) scale(1);
}

.reference-card-rail {
  scroll-behavior: smooth;
}

.reference-step-icon::after {
  inset: -6px;
}

/* Mobile keeps the medical photograph visible behind a compact first view. */
.reference-hero {
  min-height: 780px;
  padding-top: 36px;
  padding-bottom: 34px;
}

.reference-hero-photo img {
  object-position: 63% center;
}

.reference-hero::before {
  background: linear-gradient(180deg, rgba(var(--forest-rgb), 0.86) 0%, rgba(var(--forest-rgb), 0.72) 46%, rgba(var(--forest-rgb), 0.96) 100%);
}

.reference-hero-copy {
  padding-top: 34px;
}

.reference-hero h1 {
  max-width: 355px;
  font-size: 39px;
  line-height: 1.08;
}

.reference-hero-copy > p:not(.reference-kicker) {
  max-width: 330px;
  font-size: 14px;
  line-height: 1.6;
}

.reference-hero-points {
  margin-top: 42px;
}