/* ============================================================================
   LayonMed — mobile refinements  ("extra code for the phone")
   ----------------------------------------------------------------------------
   Linked AFTER each page's own <style>, so on equal specificity these win.
   Phone-only (media queries); tablet and desktop layouts are untouched.
   ============================================================================ */

/* 0 — Light-only site. Declared so a phone in "dark mode" / browser auto-dark never
        re-themes the design or the native form controls (also set via <meta> per page).
        accent-color keeps checkboxes/radios on-brand instead of OS blue/grey. */
:root{ color-scheme: light; accent-color: #2eb8a0; }

/* 1 — Never allow sideways scrolling on a phone.
        (overflow-x:clip clips without creating a scroll container, so the
         sticky nav and fixed chat button keep working.) */
@media (max-width: 768px){
  html, body{ overflow-x: clip; }
  img, svg, video, canvas, iframe{ max-width: 100%; height: auto; }
}

/* 2 — Homepage root cause: the "services" header was a non-shrinking two-column
        row whose 380px description forced the page to 557px wide. Stack it. */
@media (max-width: 768px){
  .services-header{ flex-direction: column; align-items: flex-start; gap: 18px; }
  .services-desc{ max-width: 100%; flex-shrink: 1; }
}

/* 3 — Large display headlines: wrap to fit the screen instead of being cropped
        (the CTA title "Built from the patient's own anatomy" was clipping). */
@media (max-width: 768px){
  .cta-title{ font-size: clamp(30px, 8vw, 50px); line-height: 1.06; }
  .cta-title, .section-title, .hero-brand{ overflow-wrap: break-word; max-width: 100%; }
}

/* 4 — Submit-a-case page: roomier padding and full-width tap targets on a phone. */
@media (max-width: 600px){
  .wrap{ padding-left: 18px; padding-right: 18px; }
  .trust span{ font-size: 9px; padding: 6px 9px; }
  .drop{ padding: 26px 16px; }
  .picks{ gap: 10px; }
  .picks .btn{ flex: 1 1 140px; }   /* "Choose folder/files" share the row */
  .btn.send{ width: 100%; }          /* easy-to-hit submit button */
}

/* 5 — Very small phones (≤380px): tame the very largest type so nothing clips. */
@media (max-width: 380px){
  .cta-title{ font-size: 30px; }
  .section-title{ font-size: clamp(28px, 8.5vw, 40px); }
}

/* 6 — Homepage hero stats (0.1mm · 500+ · 2–5d): the desktop row uses gap:60px with no
        mobile rule, so on a phone they crowd and "2–5d" wraps/misaligns. Space them
        evenly across equal thirds and keep each number on one line. */
@media (max-width: 600px){
  .hero-stats{ gap: 12px; justify-content: space-between; padding-top: 28px; }
  .stat{ flex: 1 1 0; min-width: 0; }
  .stat-num{ font-size: clamp(24px, 7.2vw, 32px); white-space: nowrap; }
  .stat-num span{ font-size: 0.62em; }
}