/* =========================================================
   FULFILIX ORDER MANAGEMENT — MOBILE EXPERIENCE V1
   Load AFTER all OMS/page inline styles.
   Desktop/tablet above 767px is intentionally untouched.
   ========================================================= */

@media (max-width: 767px) {

  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden !important;
    background: #08080c;
  }

  body .container,
  body .product-hero-container,
  body .alt-feature-inner,
  body .automation-inner,
  body .inquiry-inner {
    width: calc(100% - 28px) !important;
    max-width: 560px !important;
    margin-inline: auto !important;
  }

  /* =======================================================
     NAVBAR — SAME COMPACT MOBILE FEEL
     ======================================================= */

  body .navbar {
    padding: 10px 12px 0 !important;
  }

  body .navbar .nav-shell,
  body .navbar.scrolled .nav-shell {
    min-height: 58px !important;
    height: 58px !important;
    padding: 0 10px 0 14px !important;
    border-radius: 17px !important;
    gap: 8px !important;
    background: rgba(249,248,252,.985) !important;
    border: 1px solid rgba(255,255,255,.96) !important;
    box-shadow:
      0 12px 32px -22px rgba(44,10,95,.78),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  body .navbar .nav-logo,
  body .navbar.scrolled .nav-logo {
    min-width: 0 !important;
    padding: 0 !important;
  }

  body .navbar .nav-logo img,
  body .navbar.scrolled .nav-logo img {
    width: 126px !important;
    max-width: 126px !important;
    height: 36px !important;
    object-fit: contain !important;
  }

  body .navbar .nav-links,
  body .navbar .nav-trial {
    display: none !important;
  }

  /* =======================================================
     HERO
     ======================================================= */

  body .product-hero {
    min-height: auto !important;
    padding: 104px 0 46px !important;
    overflow: hidden !important;
  }

  body .product-hero-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  body .product-hero-content {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  body .product-hero-content .section-tag,
  body .product-hero-content .product-hero-tag {
    margin-inline: auto !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* Current OMS title becomes tighter/fewer lines */
  body .product-hero-content h1 {
    width: 100% !important;
    max-width: 395px !important;
    margin: 14px auto 0 !important;
    font-size: clamp(29px, 7.5vw, 34px) !important;
    line-height: 1.055 !important;
    letter-spacing: -.05em !important;
    text-align: center !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body .product-hero-content h1 .gradient-text {
    display: inline !important;
  }

  body .product-hero-content > p {
    max-width: 445px !important;
    margin: 16px auto 0 !important;
    font-size: 13.5px !important;
    line-height: 1.66 !important;
    text-align: center !important;
  }

  /* Start Trial + Sign In to OMS = one row */
  body .product-hero-cta {
    width: 100% !important;
    max-width: 450px !important;
    margin: 22px auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  body .product-hero-cta .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 46px !important;
    padding: 0 8px !important;
    justify-content: center !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  body .product-hero-cta .oms-signin-btn {
    gap: 5px !important;
  }

  body .product-hero-cta .oms-signin-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }

  body .product-hero-visual {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body .product-hero-visual img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    border-radius: inherit !important;
  }

  /* =======================================================
     FEATURES STRIP — TWO ITEMS PER ROW
     ======================================================= */

  body .features-strip {
    padding: 12px 0 18px !important;
  }

  body .features-strip-inner {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  body .strip-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 9px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    border-radius: 11px !important;
    text-align: left !important;
    font-size: 9.5px !important;
    line-height: 1.25 !important;
  }

  body .strip-item svg {
    flex: 0 0 15px !important;
    width: 15px !important;
    height: 15px !important;
  }

  /* Fifth feature centered below the 2 x 2 rows */
  body .strip-item:last-child {
    grid-column: 1 / -1 !important;
    width: calc(50% - 4px) !important;
    justify-self: center !important;
  }

  /* =======================================================
     MULTI-CHANNEL / ROUTING / CARRIER SECTIONS
     LEFT ALIGNED ON MOBILE LIKE PHARMACY PAGE
     ======================================================= */

  body .alt-feature {
    padding: 60px 0 !important;
  }

  body .alt-feature + .alt-feature {
    padding-top: 48px !important;
  }

  body .alt-feature-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body .alt-feature-content {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    text-align: left !important;
  }

  body .alt-feature-content .section-tag {
    margin: 0 0 12px !important;
    justify-content: flex-start !important;
    font-size: 9px !important;
  }

  body .alt-feature-content h2 {
    width: 100% !important;
    max-width: 445px !important;
    margin: 0 !important;
    font-size: clamp(27px, 6.9vw, 31px) !important;
    line-height: 1.07 !important;
    letter-spacing: -.045em !important;
    text-align: left !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body .alt-feature-content > p {
    width: 100% !important;
    max-width: 500px !important;
    margin: 14px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.66 !important;
    text-align: left !important;
  }

  body .alt-feature-list {
    width: 100% !important;
    max-width: 520px !important;
    margin: 20px 0 !important;
    display: grid !important;
    gap: 8px !important;
    text-align: left !important;
  }

  body .alt-feature-list li {
    width: 100% !important;
    padding: 9px 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    text-align: left !important;
  }

  body .alt-feature-list li svg {
    flex: 0 0 15px !important;
    width: 15px !important;
    height: 15px !important;
    margin-top: 1px !important;
  }

  body .alt-feature-content > .btn {
    width: auto !important;
    min-width: 150px !important;
    max-width: 210px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    justify-content: center !important;
    font-size: 11px !important;
  }

  body .alt-feature-visual {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    min-height: 0 !important;
  }

  body .alt-feature-visual img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 17px !important;
  }

  /* =======================================================
     HOW IT WORKS — 2 BOXES PER ROW
     ======================================================= */

  body .how-it-works {
    padding: 64px 0 !important;
  }

  body .how-it-works .section-header {
    width: 100% !important;
    max-width: 480px !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body .how-it-works .section-header h2 {
    max-width: 420px !important;
    margin-inline: auto !important;
    font-size: clamp(26px, 6.7vw, 30px) !important;
    line-height: 1.07 !important;
    letter-spacing: -.04em !important;
    text-wrap: balance !important;
  }

  body .how-it-works .section-header p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  body .steps-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 520px !important;
    margin-inline: auto !important;
  }

  body .step-card {
    min-width: 0 !important;
    min-height: 178px !important;
    padding: 16px 10px !important;
    border-radius: 15px !important;
    text-align: center !important;
  }

  body .step-num {
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto 12px !important;
    font-size: 13px !important;
  }

  body .step-card h4 {
    margin: 0 0 7px !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }

  body .step-card p {
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
  }

  /* =======================================================
     RESULTS — 2 x 2 STAT BOXES
     ======================================================= */

  body .automation-section {
    padding: 64px 0 !important;
  }

  body .automation-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body .automation-text {
    width: 100% !important;
    max-width: 520px !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body .automation-text .section-tag {
    margin-inline: auto !important;
  }

  body .automation-text h2 {
    max-width: 395px !important;
    margin: 12px auto 0 !important;
    font-size: clamp(26px, 6.7vw, 30px) !important;
    line-height: 1.07 !important;
    letter-spacing: -.04em !important;
    text-wrap: balance !important;
  }

  body .automation-text > p {
    max-width: 445px !important;
    margin: 14px auto 0 !important;
    font-size: 12.5px !important;
    line-height: 1.62 !important;
  }

  body .stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 22px auto 0 !important;
  }

  body .stat-box {
    min-width: 0 !important;
    min-height: 112px !important;
    padding: 15px 10px !important;
    border-radius: 14px !important;
  }

  body .stat-box-num {
    font-size: 29px !important;
    line-height: 1 !important;
  }

  body .stat-box-label {
    margin-top: 7px !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  body .automation-text > .btn {
    width: auto !important;
    min-width: 190px !important;
    max-width: 250px !important;
    min-height: 46px !important;
    margin: 20px auto 0 !important;
    justify-content: center !important;
    font-size: 11px !important;
  }

  body .automation-visual {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }

  body .media-thumbnail,
  body .media-thumbnail img {
    width: 100% !important;
    height: auto !important;
  }

  body .media-thumbnail img {
    display: block !important;
    object-fit: cover !important;
    border-radius: 17px !important;
  }

  /* =======================================================
     OMS PRICING — COMPACT MOBILE
     ======================================================= */

  body #pricing.oms-pricing {
    padding: 68px 14px 62px !important;
  }

  body #pricing .oms-price-head {
    margin-bottom: 24px !important;
  }

  body #pricing .oms-price-kicker {
    padding: 7px 12px !important;
    font-size: 9px !important;
  }

  /* Screenshot pricing title is too tall — compact it */
  body #pricing .oms-price-head h2 {
    max-width: 415px !important;
    margin: 15px auto 10px !important;
    font-size: clamp(26px, 6.75vw, 30px) !important;
    line-height: 1.07 !important;
    letter-spacing: -.04em !important;
    text-wrap: balance !important;
  }

  body #pricing .oms-price-head p {
    max-width: 455px !important;
    font-size: 12.5px !important;
    line-height: 1.62 !important;
  }

  body #pricing .oms-price-toggle-wrap {
    margin-bottom: 26px !important;
    gap: 8px !important;
  }

  body #pricing .oms-price-toggle {
    width: 100% !important;
    max-width: 340px !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #pricing .oms-price-toggle button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  body #pricing .oms-price-save {
    font-size: 9px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  body #pricing .oms-price-cards {
    grid-template-columns: 1fr !important;
    max-width: 500px !important;
    gap: 12px !important;
  }

  body #pricing .oms-price-card {
    min-height: 0 !important;
    padding: 20px 17px 17px !important;
    border-radius: 19px !important;
    transform: none !important;
  }

  body #pricing .oms-price-card:hover {
    transform: none !important;
  }

  body #pricing .oms-popular {
    top: 13px !important;
    right: 13px !important;
    padding: 5px 8px !important;
    font-size: 8px !important;
  }

  /* 4 benefit boxes -> 2 x 2 */
  body #pricing .oms-price-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    max-width: 500px !important;
    margin-top: 14px !important;
    padding: 8px !important;
    border-radius: 15px !important;
  }

  body #pricing .oms-benefit {
    min-width: 0 !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    column-gap: 7px !important;
    min-height: 72px !important;
    padding: 8px 7px !important;
  }

  body #pricing .oms-benefit:nth-child(odd) {
    border-left: 0 !important;
  }

  body #pricing .oms-benefit:nth-child(even) {
    border-left: 1px solid rgba(255,255,255,.08) !important;
  }

  body #pricing .oms-benefit:nth-child(n+3) {
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }

  body #pricing .oms-benefit-icon {
    width: 30px !important;
    height: 30px !important;
  }

  body #pricing .oms-benefit-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  body #pricing .oms-benefit strong {
    font-size: 9px !important;
  }

  body #pricing .oms-benefit > span:last-child > span {
    font-size: 7.5px !important;
  }

  /* =======================================================
     FINAL CTA — 2-LINE HEADING + TWO BUTTONS SAME ROW
     ======================================================= */

  body .cta-section {
    padding: 64px 0 !important;
  }

  body .cta-card {
    width: 100% !important;
    max-width: 520px !important;
    margin-inline: auto !important;
    padding: 30px 16px !important;
    border-radius: 19px !important;
    text-align: center !important;
  }

  body .cta-card .section-tag {
    margin: 0 auto 14px !important;
  }

  body .cta-card h2 {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    font-size: clamp(27px, 7vw, 31px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.045em !important;
    text-align: center !important;
    text-wrap: balance !important;
  }

  body .cta-card > p {
    max-width: 420px !important;
    margin: 14px auto 0 !important;
    font-size: 12.5px !important;
    line-height: 1.62 !important;
  }

  body .cta-buttons {
    width: 100% !important;
    max-width: 440px !important;
    margin: 20px auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body .cta-buttons .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 46px !important;
    padding: 0 8px !important;
    justify-content: center !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  body .cta-note {
    margin-top: 14px !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
  }

  /* =======================================================
     INQUIRY MOBILE SAFETY
     ======================================================= */

  body .inquiry-section {
    padding: 64px 0 !important;
  }

  body .inquiry-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body .inquiry-copy {
    max-width: 520px !important;
    margin-inline: auto !important;
  }

  body .inquiry-copy h2 {
    font-size: clamp(26px, 6.8vw, 30px) !important;
    line-height: 1.07 !important;
    text-wrap: balance !important;
  }

  body .inquiry-contacts {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body .form-panel {
    width: 100% !important;
    max-width: 520px !important;
    margin-inline: auto !important;
    padding: 20px 15px !important;
    border-radius: 18px !important;
  }

  body .fx-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body .fx-input,
  body .fx-select,
  body .fx-textarea {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Scroll top */
  body .scroll-top {
    right: 14px !important;
    bottom: 16px !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 90 !important;
  }

  body .reveal,
  body .reveal-left,
  body .reveal-right {
    transform: none !important;
  }
}


/* =========================================================
   EXTRA SMALL PHONES
   Requested paired layouts remain paired.
   ========================================================= */
@media (max-width: 420px) {

  body .container,
  body .product-hero-container,
  body .alt-feature-inner,
  body .automation-inner,
  body .inquiry-inner {
    width: calc(100% - 22px) !important;
  }

  body .product-hero {
    padding-top: 98px !important;
  }

  body .product-hero-content h1 {
    max-width: 350px !important;
    font-size: clamp(27px, 7.3vw, 30px) !important;
  }

  /* Never stack hero/final CTA buttons */
  body .product-hero-cta,
  body .cta-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body .product-hero-cta .btn,
  body .cta-buttons .btn {
    min-height: 44px !important;
    padding-inline: 6px !important;
    font-size: 9.5px !important;
  }

  /* Never collapse feature strip to one column */
  body .features-strip-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body .strip-item:last-child {
    grid-column: 1 / -1 !important;
    width: calc(50% - 3.5px) !important;
  }

  body .alt-feature-content h2 {
    font-size: clamp(25px, 6.55vw, 28px) !important;
  }

  body .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body .step-card {
    min-height: 168px !important;
    padding: 14px 8px !important;
  }

  body .step-card h4 {
    font-size: 10.8px !important;
  }

  body .step-card p {
    font-size: 8.5px !important;
  }

  body .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #pricing .oms-price-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .cta-card h2 {
    max-width: 350px !important;
    font-size: clamp(25px, 6.6vw, 28px) !important;
  }
}


@media (hover: none) and (pointer: coarse) {
  body #pricing .oms-price-card:hover {
    transform: none !important;
  }
}


@media (prefers-reduced-motion: reduce) {
  body .reveal,
  body .reveal-left,
  body .reveal-right,
  body #pricing .oms-price-card {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}