/* Phone and tablet refinements only; the desktop layout starts at 992px. */
@media (max-width: 991.98px) {
  /* Fixed-width source images must fit their Bootstrap columns. */
  body > section img[src^="assets/img/homepage/"] {
    display: block;
    width: 100%;
    max-width: 100% !important;
    height: auto;
  }

  body > section .img-ph { min-height: 0; padding: 0; }

  /* Reveal effects should never reserve blank content or overflow a small screen. */
  body > section [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #mainNav { padding-block: 1rem; }
  #mainNav .navbar-toggler { min-width: 44px; min-height: 44px; }
  #mainNav .navbar-nav { padding-block: .75rem .25rem; gap: .25rem; }
  #mainNav .nav-link { padding-block: .65rem !important; }
  #mainNav .nav-item:last-child { margin-top: .5rem; }
  #mainNav .nav-item:last-child .btn { width: 100%; }

  #team .row.mt-n5 > .col-md-3 { width: 50%; }
  #team .card-body > small { color: #becfdb !important; }
  #team .card-body > p { color: #becfdb !important; }
  .pc-footer-tagline { margin-bottom: 1rem; }
}

@media (max-width: 767.98px) {
  /* Consistent section rhythm and clear separation when columns stack. */
  body > section[class] { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  body > section:first-of-type { padding-top: 8.5rem !important; }
  body > section .container-lg { padding-inline: 1.25rem; }
  body > section .text-center.text-md-start { text-align: left !important; }
  body > section .display-3,
  body > section .display-4 { font-size: clamp(1.875rem, 7.7vw, 2.25rem); line-height: 1.15; }
  body > section h2 { margin-bottom: 1.25rem !important; }
  body > section h6.text-uppercase { margin-bottom: 1rem !important; }
  body > section p { line-height: 1.65; }
  body > section .btn { max-width: 100%; white-space: normal; }
  body > section .callout-teal,
  body > section .dark-info-box { padding: 1.125rem; }

  /* Give each paired CTA its own row and a real gap. */
  body > section:first-of-type .text-md-start > .btn,
  #for-hospitals .text-md-start > .btn,
  #for-clinics .text-md-start > .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-inline: 0 !important;
  }
  body > section:first-of-type .text-md-start > .btn + .btn,
  #for-hospitals .text-md-start > .btn + .btn,
  #for-clinics .text-md-start > .btn + .btn { margin-top: .75rem; }

  /* Keep bullets next to the first line of a left-aligned statement. */
  body > section .list-unstyled > li,
  body > section .list-checked > li { text-align: left; }
  #credibility .list-unstyled > li { align-items: flex-start !important; }
  #credibility .list-unstyled > li > span:first-child { margin-top: .6rem; }

  body > section:first-of-type .row.align-items-center > .col-md-6 + .col-md-6 { margin-top: 2rem; }
  body > section:first-of-type .dark-info-box .row > .col-4 {
    width: 100%;
    padding: .75rem 0 !important;
    border-right: 0 !important;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    text-align: left !important;
  }
  body > section:first-of-type .dark-info-box .row > .col-4:first-child { padding-top: 0 !important; }
  body > section:first-of-type .dark-info-box .row > .col-4:last-child { padding-bottom: 0 !important; }
  body > section:first-of-type .dark-info-box .row > .col-4 + .col-4 { border-top: 1px solid rgba(255,255,255,.12); }
  body > section:first-of-type .dark-info-box .col-4 > :last-child { text-align: right; }
  body > section:first-of-type + .position-relative { display: none; }

  /* Explain each section before showing its supporting image or metrics. */
  #problem .order-md-1,
  #for-clinics .order-md-1,
  #platform > .container-lg > .row:first-child > .order-md-0,
  #credibility .text-md-start { order: -1; }
  #problem > .container-lg > .row,
  #for-hospitals > .container-lg > .row,
  #for-clinics > .container-lg > .row,
  #platform > .container-lg > .row:first-child,
  #credibility > .container-lg > .row,
  #impact > .container-lg > .row { row-gap: 2rem; }
  #credibility .mb-8.mb-md-0 { margin-bottom: 0 !important; }
  #problem .img-fluid,
  #impact .img-fluid { margin-bottom: 1.25rem !important; }

  #problem .row.g-3 { align-items: stretch; }
  #problem .row.g-3 > .col-6 { display: flex; }
  #problem .row.g-3 .card { width: 100%; padding: 1.25rem .75rem !important; justify-content: center; }
  #problem .stat-num { font-size: 1.75rem; }

  /* Deployment metrics retain aligned labels and values without collisions. */
  #for-hospitals .col-md-5 > div,
  #for-clinics .col-md-5 > div { padding: 1.25rem !important; }
  #for-hospitals .col-md-5 .d-flex > div:first-child,
  #for-clinics .col-md-5 .d-flex > div:first-child { flex-shrink: 0; }
  #for-hospitals .justify-content-between.align-items-center,
  #for-clinics .justify-content-between.align-items-center { gap: 1rem; align-items: flex-start !important; }
  #for-hospitals .justify-content-between.align-items-center > span,
  #for-clinics .justify-content-between.align-items-center > span { flex: 1; min-width: 0; }
  #for-hospitals .justify-content-between.align-items-center > span:last-child,
  #for-clinics .justify-content-between.align-items-center > span:last-child { flex: 0 0 auto; max-width: 44%; text-align: right; }

  #platform > .container-lg > .row:first-child { margin-bottom: 3rem !important; }
  #platform .hr-sm { margin-bottom: 2rem !important; }
  #platform .row.justify-content-center { margin-bottom: 2rem !important; }
  #platform .text-md-start .row.g-3 > .col-6 { width: 100%; }
  #platform .text-md-start .gap-2 { text-align: left; }
  #platform .feature-card { padding: 1.5rem; }

  .pc-credibility-stats { gap: .75rem; }
  .pc-credibility-stats .dark-info-box { padding: 1.25rem .75rem; }
  .pc-credibility-stats p { color: #bdceda !important; }

  #team .row.align-items-center { margin-bottom: 2rem !important; }
  #team .row.mt-n5 { margin-top: 0 !important; row-gap: 2rem; }
  #team .row.mt-n5 > .col-6 { width: 100%; }
  #team .card.mt-5 { margin-top: 0 !important; box-shadow: none; }
  #team .card-body { padding-top: 1.25rem; padding-bottom: 0; text-align: left !important; }
  #team .card-body > h5 { margin-bottom: .35rem !important; }
  #team .card-body > small { display: block; line-height: 1.5; }
  #team .card-body > p { margin-top: .75rem !important; font-size: 1rem; }
  #team > .container-lg > p:last-child { margin-top: 2.5rem !important; margin-bottom: 0; padding-bottom: 0 !important; color: #a7bdcc !important; }

  #contact .row.mb-8 { margin-bottom: 2rem !important; }
  footer.footer { padding-block: 3rem !important; }
  footer .container-lg { padding-inline: 1.25rem; }
  .pc-footer-brand,
  .pc-legal-footer { margin-bottom: 2rem !important; }
  .pc-footer-heading { margin-bottom: .75rem; }
  .pc-footer-address { line-height: 1.65; }
  .pc-legal-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .pc-legal-footer a { min-height: 40px; padding-block: .35rem; }
}

@media (max-width: 575.98px) {
  /* Narrative impact cards need more reading width than short metric cards. */
  #impact .row.g-3 > .col-6 { width: 100%; }
  #impact .row.g-3 .card {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    column-gap: .75rem;
    padding: 1.25rem !important;
  }
  #impact .card > .fs-lg { grid-row: 1 / span 2; }
  #impact .card > h6,
  #impact .card > p { grid-column: 2; }
  #impact .card > h6 { font-size: 1rem; }
}