/* =========================================================
   LIVN PC MOBILE CTA FIX V7
   Loaded after style.css / announcement / promo CSS.
   Purpose: keep the primary diagnosis CTA fully visible on
   iPhone Safari without changing desktop layout.
========================================================= */

@media (max-width: 700px) and (orientation: portrait) {
  #heroScreen {
    min-height: calc(100svh + 125px) !important;
    padding-top: 296px !important;
    padding-bottom: 48px !important;
    align-items: flex-start !important;
  }

  #heroScreen .hero-content {
    width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #heroScreen .eyebrow {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-size: 8px !important;
    letter-spacing: 2.6px !important;
  }

  #heroScreen .hero-title {
    margin-top: 0 !important;
    font-size: clamp(44px, 13.2vw, 54px) !important;
    line-height: .94 !important;
    letter-spacing: -1.8px !important;
  }

  #heroScreen .hero-title-gradient {
    margin-top: 4px !important;
  }

  #heroScreen .hero-tagline {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    font-size: 8px !important;
    letter-spacing: 2.4px !important;
  }

  #heroScreen .hero-description {
    margin-top: 10px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  #heroScreen .hero-buttons {
    margin-top: 12px !important;
    gap: 7px !important;
  }

  #heroScreen .start-button,
  #heroScreen .secondary-button {
    height: 52px !important;
    min-height: 52px !important;
  }

  #heroScreen .hero-meta {
    margin-top: 9px !important;
    font-size: 8px !important;
  }

  #heroScreen .engine-badge,
  #heroScreen .scroll-indicator {
    display: none !important;
  }
}

@media (max-width: 420px) and (orientation: portrait) {
  #heroScreen {
    min-height: calc(100svh + 115px) !important;
    padding-top: 292px !important;
    padding-bottom: 42px !important;
  }

  #heroScreen .hero-title {
    font-size: clamp(42px, 12.8vw, 50px) !important;
  }

  #heroScreen .hero-description {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
  }

  #heroScreen .start-button,
  #heroScreen .secondary-button {
    height: 50px !important;
    min-height: 50px !important;
  }
}