/* ===========================================================
   JetPatient — Marketing Mobile Override v2.0
   ---------------------------------------------------------
   Mobile-only stylesheet. Every rule below is gated to
   viewports ≤ 760 px via the file-level <link media="(max-width:760px)">
   attribute, so desktop CSS is byte-untouched.

   Load AFTER all existing stylesheets so these tokens win.

   Issued: May 2026 · v2.0
   Companion: jp-marketing-mobile.css (older breakpoint shims).
   =========================================================== */


/* ── Global mobile primitives ───────────────────────────── */
:root{
  --jp-mob-bg:        #ffffff;
  --jp-mob-bg-off:    #F6F8FC;
  --jp-mob-text:      #111827;
  --jp-mob-muted:     #5A6B8C;
  --jp-mob-border:    #E4E9F2;
  --jp-mob-navy:      #0A2D6E;
  --jp-mob-navy-lt:   #0e3b90;
  --jp-mob-teal:      #00C9C0;
  --jp-mob-teal-dk:   #00A89F;
  --jp-mob-tap:       44px;
  --jp-mob-cta-h:     56px;
  --jp-mob-safe-b:    env(safe-area-inset-bottom);
}

html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
body{ overscroll-behavior-y:contain }

/* Disable tap-flash everywhere */
*{ -webkit-tap-highlight-color: transparent }

/* Suppress hover-only fight on touch */
@media (hover: none) and (pointer: coarse){
  a:hover, button:hover { background-color: inherit }
}

/* Reduce-motion handling — JetPatient mobile policy (v2.2):
   We keep brand-essential motion (hero globe, fade-ins, micro-interactions)
   running across all users so the iPhone app-feel is consistent. Truly
   vestibular-aggressive effects (parallax, multi-axis drift) are still
   disabled below. Opt out per-element with .jp-anim-allow-reduce. */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px){
  .hp-blob, .hero-parallax, .hp-b1, .hp-b2, .hp-b3,
  [data-reduce-motion="strict"], [data-reduce-motion="strict"] *{
    animation:none!important;
    transition:none!important;
  }
  /* Allow brand globes/fade-ins/tap feedback to keep running */
  .hero-globe *, .jp-anim-keep, .jp-anim-keep *{
    animation-duration: revert!important;
    transition-duration: revert!important;
  }
}

/* Disable expensive animations on small screens for perf */
.hp-blob, .hero-parallax, .hp-b1, .hp-b2, .hp-b3{ display:none!important }


/* ── Reflow page padding & rhythm ───────────────────────── */
html{ font-size: 17px }
body{ font-size: 16px; line-height: 1.6 }

section{ padding: 48px 18px!important }
.container{ padding: 0 18px!important }

h1{ font-size: clamp(28px, 8vw, 36px)!important; line-height: 1.12!important; letter-spacing: -.025em!important }
h2{ font-size: clamp(24px, 6.4vw, 30px)!important; line-height: 1.18!important; letter-spacing: -.02em!important }
h3{ font-size: 18px!important; line-height: 1.3!important }
.lead{ font-size: 16px!important; line-height: 1.65!important }
p { font-size: 16px; line-height: 1.6 }


/* ── Inputs — force ≥16px so iOS Safari doesn't auto-zoom ─ */
input, select, textarea, .f-input, .f-select{
  font-size: 16px!important;
  min-height: 48px!important;
  padding: 12px 14px!important;
}
input[type="checkbox"], input[type="radio"]{ min-height:auto!important }
button, .btn{
  min-height: 48px!important;
  font-size: 15.5px!important;
}


/* ── Nav: hamburger drawer polish ───────────────────────── */
.jp-nav-simplified, .nav, .nav-wrap, [class*="nav-bar"]{
  padding: 12px 16px!important;
}
.nav-links{ display:none!important }
#mobileMenu{
  position:fixed!important;
  left:0!important; right:0!important;
  top:0!important;
  height:100dvh!important;
  height:100vh!important;
  padding: max(calc(env(safe-area-inset-top) + 16px), 56px) 24px 24px!important;
  background:#fff!important;
  z-index:9999!important;
  display:flex!important;
  flex-direction:column!important;
  gap: 4px!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
#mobileMenu.open{ transform:none!important }
#mobileMenu a{
  font-size:18px!important;
  font-weight:700!important;
  color: var(--jp-mob-navy)!important;
  padding: 14px 0!important;
  border-bottom: 1px solid var(--jp-mob-border)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
#mobileMenu a::after{ content:'›'; color: var(--jp-mob-muted); font-size: 22px; font-weight:300 }
#mobileMenu .btn, #mobileMenu .btn-teal, #mobileMenu .btn-navy{
  margin-top: 16px!important;
  width: 100%!important;
  min-height: var(--jp-mob-cta-h)!important;
}
#nav-hamburger{
  width: 44px!important; height: 44px!important;
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
}


/* ── Hero: single-column, tighter, no parallax ─────────── */
#hero, .hero, .hero-inner{
  padding: 100px 18px 56px!important;
}
.hero-inner{
  display:block!important;
  grid-template-columns: 1fr!important;
  gap: 28px!important;
}
.hero-text{ max-width:none!important }
.hero-text .lead{ max-width:none!important }
.hero-visual{ display:none!important }      /* desktop floating-card composition; hide on mobile */
.hero-ctas{ display:flex!important; flex-direction:column!important; gap: 10px!important; margin-top: 24px!important }
.hero-ctas .btn, .hero-ctas .btn-navy, .hero-ctas .btn-teal{
  width:100%!important; justify-content:center!important;
}
.aud-router{ margin-top: 20px!important; padding-top: 20px!important }
.aud-router-grid{ grid-template-columns: 1fr!important; gap: 8px!important }
.aud-chip{ padding: 14px!important; min-height: var(--jp-mob-tap)!important }


/* ── Marquee: smaller items, smoother scroll ─────────── */
#marquee{ padding: 14px 0!important; overflow:hidden!important }
.marquee-track{ animation-duration: 28s!important }
.marquee-item{ padding: 0 24px!important; gap: 8px!important }
.marquee-label{ display:none!important }


/* ── WHY / problem block ─────────────────────────────── */
.why-grid{
  display:block!important;
  grid-template-columns: 1fr!important;
  gap: 28px!important;
}
.why-cards{ gap: 10px!important; margin-top: 20px!important }
.why-card{ padding: 16px!important }
.stat-panel{ padding: 24px 20px!important; margin-top: 8px!important }


/* ── Solution tabs / audience switcher ────────────────── */
.tab-bar{
  width: 100%!important;
  margin-bottom: 24px!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch!important;
  white-space:nowrap!important;
}
.tab{
  padding: 12px 18px!important;
  font-size: 13.5px!important;
  min-height: var(--jp-mob-tap)!important;
}


/* ── Process steps (vertical, not horizontal) ───────── */
.step-grid, .process-grid{
  grid-template-columns: 1fr!important;
  gap: 16px!important;
}
.step, .process-step{
  flex-direction:row!important;
  padding: 16px!important;
  gap: 14px!important;
  text-align:left!important;
}


/* ── Clinic / Network cards: single column ─────────── */
.network-grid, .clinics-grid, .partners-grid{
  grid-template-columns: 1fr!important;
  gap: 12px!important;
}


/* ── Testimonials / stories: horizontal carousel ────── */
.stories-grid, .testimonials-grid{
  display:flex!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-snap-type: x mandatory!important;
  gap: 12px!important;
  padding: 4px 18px!important;
  margin: 0 -18px!important;
}
.stories-grid > *, .testimonials-grid > *{
  flex: 0 0 86%!important;
  scroll-snap-align: start!important;
}


/* ── AI Suite columns: stack ──────────────────────── */
.ai-grid, .ai-suite-grid{
  grid-template-columns: 1fr!important;
  gap: 16px!important;
}


/* ── Comparison table → card mode ────────────────── */
.compare-table, .feature-compare{
  font-size: 13px!important;
}
.compare-table table, .feature-compare table{
  display:block!important;
}
.compare-table thead, .feature-compare thead{
  display:none!important;
}
.compare-table tbody, .feature-compare tbody{
  display:block!important;
}
.compare-table tr, .feature-compare tr{
  display:block!important;
  padding: 12px 14px!important;
  border: 1px solid var(--jp-mob-border)!important;
  border-radius: 12px!important;
  margin-bottom: 8px!important;
  background:#fff!important;
}
.compare-table td, .feature-compare td{
  display:flex!important;
  justify-content:space-between!important;
  border:none!important;
  padding: 6px 0!important;
}
.compare-table td:first-child, .feature-compare td:first-child{
  font-weight: 700!important;
  color: var(--jp-mob-navy)!important;
  border-bottom: 1px dashed var(--jp-mob-border)!important;
  margin-bottom: 4px!important;
  display:block!important;
}


/* ── Footer reflow ────────────────────────────────── */
.jp-footer, footer{ padding: 32px 18px!important }
.jp-footer-columns, .footer-cols{
  grid-template-columns: 1fr 1fr!important;
  gap: 20px 14px!important;
}


/* ── Cost-savings table cards ───────────────────── */
.cost-card, .savings-card{
  padding: 16px!important;
  border-radius: 14px!important;
  margin-bottom: 12px!important;
}


/* ── Page-specific tweaks ─────────────────────────────────
   Below blocks target individual pages that have unique
   mobile pain points per the audit.
   ───────────────────────────────────────────────────────── */


/* === Savings Calculator =============================== */
body.jp-page-savings .calc-procedures,
.calc-procedures{
  grid-template-columns: repeat(2, 1fr)!important;
  gap: 8px!important;
}
.calc-procedure-chip{
  padding: 12px 10px!important;
  font-size: 13.5px!important;
  min-height: 56px!important;
}
.calc-result-card{
  padding: 18px 16px!important;
  border-radius: 16px!important;
}
.calc-result-num{
  font-size: clamp(40px, 12vw, 56px)!important;
}


/* === Marketplace ====================================== */
.marketplace-filters, .mp-filter-sidebar{
  position: fixed!important;
  left: 0!important; right: 0!important; bottom: 0!important;
  top: auto!important;
  height: auto!important;
  max-height: 80dvh!important;
  background: #fff!important;
  border-radius: 24px 24px 0 0!important;
  box-shadow: 0 -8px 32px rgba(10,45,110,.14)!important;
  padding: 8px 18px calc(18px + var(--jp-mob-safe-b))!important;
  transform: translateY(110%)!important;
  transition: transform .28s cubic-bezier(.32,.72,0,1)!important;
  z-index: 200!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
.marketplace-filters.open, .mp-filter-sidebar.open{
  transform: translateY(0)!important;
}
.marketplace-filters::before, .mp-filter-sidebar::before{
  content:'';
  display:block;
  width: 40px; height: 4px;
  margin: 6px auto 14px;
  border-radius: 2px;
  background: #CBD5E1;
}
.mp-results, .marketplace-results{
  grid-template-columns: 1fr!important;
  gap: 12px!important;
}


/* === AI Navigator: single-column, sidecar collapses === */
.cpv2-chat{ grid-template-columns: 1fr!important; }
.cpv2-sidecar{
  border-right:none!important;
  border-bottom: 1px solid var(--jp-mob-border)!important;
  padding: 12px 14px!important;
  max-height: none!important;
}
.cpv2-sc-list{
  display:flex!important;
  overflow-x:auto!important;
  gap: 8px!important;
  white-space:nowrap!important;
  -webkit-overflow-scrolling:touch!important;
  padding: 4px 0!important;
}
.cpv2-sc-list li{
  flex: 0 0 auto!important;
  background: var(--jp-mob-bg-off)!important;
  border-radius: 99px!important;
  padding: 6px 12px!important;
  font-size: 12px!important;
}


/* === Clinic Apply: step indicator at top ============= */
.clinic-apply-form{ padding: 0 18px!important }
.clinic-apply-form section{
  padding: 20px 0!important;
  border-top: 1px solid var(--jp-mob-border)!important;
}


/* === Quality Report: table → card cascade =========== */
.quality-table, .quality-report table{
  display:block!important;
}
.quality-table thead, .quality-report thead{ display:none!important }
.quality-table tbody, .quality-report tbody{ display:block!important }
.quality-table tr, .quality-report tr{
  display:block!important;
  padding: 14px!important;
  border:1px solid var(--jp-mob-border)!important;
  border-radius:14px!important;
  margin-bottom:10px!important;
  background:#fff!important;
}
.quality-table td, .quality-report td{
  display:flex!important;
  justify-content:space-between!important;
  padding:6px 0!important;
  border:none!important;
}


/* === Country hub === */
.hub-stats{
  grid-template-columns: repeat(2, 1fr)!important;
  gap: 8px!important;
}
.hub-clinic-grid{
  grid-template-columns: 1fr!important;
  gap: 12px!important;
}


/* ── Sign-in / Auth: drawer → bottom sheet ───────────── */
#siModal, .jp-auth-modal, [class*="auth-modal"]{
  align-items: flex-end!important;
}
.jp-auth-drawer, [class*="auth-drawer"]{
  position: fixed!important;
  left: 0!important; right: 0!important; bottom: 0!important;
  top: auto!important;
  max-height: 92dvh!important;
  width: 100%!important;
  border-radius: 24px 24px 0 0!important;
  padding-bottom: calc(20px + var(--jp-mob-safe-b))!important;
  animation: jp-sheet-up .28s cubic-bezier(.32,.72,0,1)!important;
}
@keyframes jp-sheet-up{ from{ transform:translateY(110%) } to{ transform:translateY(0) } }


/* ── Body padding for sticky mobile CTA bar ─────────── */
body.jp-has-mobile-cta{
  padding-bottom: calc(var(--jp-mob-cta-h) + 20px + var(--jp-mob-safe-b))!important;
}


/* ── Disable any "horizontal scroll" hint that breaks 375px ── */
body, html{ overflow-x: hidden!important }
img, picture, video, svg, iframe{ max-width: 100%!important; height: auto!important }


/* ── Final safety: never let buttons under 44px touch target ── */
a.btn, button, .btn-sm, .btn-md, .btn-lg, .btn-navy, .btn-teal, .btn-outline, .btn-ghost-white{
  min-height: var(--jp-mob-tap);
}


/* ===========================================================
   v2.1 polish · 2026-05-11  (additive only, ≤ 760 px)
   - 44pt touch-target enforcement across every CTA-shaped el
   - Dark-on-dark legibility safety for hero gradients
   - Hide stale text wordmarks in legacy mobile topbars
   - Ensure audience-switcher chips & hub cards have full hit area
   - Globe wrapper styles for mobile heroes
   =========================================================== */

/* Touch targets — every clickable element on mobile must be ≥ 44pt */
.jp-btn, .jp-btn-primary, .jp-btn-ghost, .jp-btn-lg, .jp-btn-block,
.topbar-btn, .topbar-back, .topbar-logo, .topbar-actions a,
.aud-pill, .aud-tab, .chip, .chip-row .chip,
.hero-ctas a, .hero-ctas .jp-btn, .ai-tile-cta,
.proc-step, .why-card, .hub, .hub-cta,
.problem-card, .solution-list li, .stat,
.pricing-tile, .trust-cell,
.ftr-col a, .topbar-logo-text, .topbar-logo-mark{
  min-height: var(--jp-mob-tap);
}
a.jp-btn, button.jp-btn,
a.aud-pill, a.aud-tab,
a.chip, a.hub, a.ai-tile-cta, .hero-ctas a, .ftr-col a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.hero-ctas a, .ftr-col a{ justify-content: flex-start }
a.hub{ display: block }  /* hub cards are large blocks, not flex */

/* Make every "card-like" link tappable across the whole card */
.hub, .why-card, .proc-step, .problem-card, .ai-tile, .pricing-tile{
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* Hide legacy text-only wordmarks (the JS injects an <img> logo instead) */
.topbar-logo-mark, .topbar-logo-text{ display: none!important }
.topbar-actions{ display: none!important }

/* ── Dark-on-dark hero legibility safety ────────────────────
   Any .hero with a navy/dark gradient should ALWAYS have white text.
   jp-mobile.css defines `.jp-m h1 { color: var(--jp-navy) }` at the
   design-system level — that rule has equal specificity to `.hero h1`,
   so the page's inline `.hero h1 { /* no color */ }` doesn't override.
   We use !important here as a defensive belt-and-suspenders to lock
   white text inside dark hero / cta-card sections regardless of source
   order, specificity, or page-level overrides. */
body.jp-m .hero,
body.jp-m .hero h1, body.jp-m .hero h2, body.jp-m .hero h3,
body.jp-m .hero p, body.jp-m .hero p.lede, body.jp-m .hero .lede,
body.jp-m .hero li, body.jp-m .hero strong, body.jp-m .hero em, body.jp-m .hero span,
body.jp-m .hero-proof, body.jp-m .hero-proof *,
body.jp-m .hero-proof-text, body.jp-m .hero-proof-text *,
body.jp-m .cta-card h1, body.jp-m .cta-card h2, body.jp-m .cta-card h3,
body.jp-m .cta-card p, body.jp-m .cta-card li{
  color: #fff !important;
}
/* The "grad" span inside hero h1 retains its white→teal text-clip gradient */
body.jp-m .hero h1 .grad{
  color: transparent !important;
  background: linear-gradient(110deg,#ffffff,#6FE7E2) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* Restore navy on white CTAs INSIDE dark heros (the button itself stays light) */
body.jp-m .hero .jp-btn-primary,
body.jp-m .cta-card .jp-btn-primary{ color: #0A2D6E !important; background: #fff !important }
/* Hero pills get teal text on translucent dark background */
body.jp-m .hero .hero-pill,
body.jp-m .cta-card .hero-pill,
body.jp-m .hero .eyebrow,
body.jp-m .cta-card .eyebrow{ color: var(--jp-mob-teal) !important }
body.jp-m .hero .hero-pill-dot,
body.jp-m .hero .hero-pill::before{ background: var(--jp-mob-teal) !important }

/* Chips stay legible on white background regardless of context */
body.jp-m .hero .chip, body.jp-m .chip-row .chip{
  color: #0A2D6E !important;
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.40) !important;
}

/* ── Globe wrapper for mobile heroes ───────────────────────
   The mobile globe SVG (viewBox 0 0 600 600) sits as a clean
   background element behind hero copy. Centered horizontally,
   biased upward, and de-saturated/de-opaqued so the hero text
   stays legible. */
.hero{ position: relative; isolation: isolate; overflow: hidden }
.hero-globe{
  position: absolute;
  top: -28%;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  filter: saturate(108%);
}
.hero-globe svg{ width: 100%; height: auto; display: block }
.hero > *:not(.hero-globe){ position: relative; z-index: 1 }

/* Globe flight-arc + city-pulse animations (mirror of canonical index.html) */
.hero-globe .globe-arc{ fill: none; stroke-linecap: round; opacity: 0 }
.hero-globe .ga-1{ stroke-dasharray:125; stroke-dashoffset:125; animation:gam1 5.2s ease-in-out 0.0s infinite }
.hero-globe .ga-2{ stroke-dasharray:170; stroke-dashoffset:170; animation:gam2 6.0s ease-in-out 2.5s infinite }
.hero-globe .ga-3{ stroke-dasharray:145; stroke-dashoffset:145; animation:gam3 5.6s ease-in-out 1.2s infinite }
.hero-globe .ga-4{ stroke-dasharray:110; stroke-dashoffset:110; animation:gam4 4.8s ease-in-out 3.8s infinite }
.hero-globe .ga-5{ stroke-dasharray:78;  stroke-dashoffset:78;  animation:gam5 4.2s ease-in-out 1.8s infinite }
.hero-globe .ga-6{ stroke-dasharray:215; stroke-dashoffset:215; animation:gam6 7.2s ease-in-out 0.6s infinite }
.hero-globe .ga-7{ stroke-dasharray:290; stroke-dashoffset:290; animation:gam7 8.0s ease-in-out 3.2s infinite }
.hero-globe .ga-8{ stroke-dasharray:330; stroke-dashoffset:330; animation:gam8 8.8s ease-in-out 5.5s infinite }
@keyframes gam1{0%{stroke-dashoffset:125;opacity:0}12%{opacity:.75}52%{stroke-dashoffset:0;opacity:.75}78%{stroke-dashoffset:0;opacity:.3}100%{stroke-dashoffset:0;opacity:0}}
@keyframes gam2{0%{stroke-dashoffset:170;opacity:0}12%{opacity:.60}52%{stroke-dashoffset:0;opacity:.60}78%{stroke-dashoffset:0;opacity:.25}100%{stroke-dashoffset:0;opacity:0}}
@keyframes gam3{0%{stroke-dashoffset:145;opacity:0}12%{opacity:.65}52%{stroke-dashoffset:0;opacity:.65}78%{stroke-dashoffset:0;opacity:.28}100%{stroke-dashoffset:0;opacity:0}}
@keyframes gam4{0%{stroke-dashoffset:110;opacity:0}12%{opacity:.55}52%{stroke-dashoffset:0;opacity:.55}78%{stroke-dashoffset:0;opacity:.22}100%{stroke-dashoffset:0;opacity:0}}
@keyframes gam5{0%{stroke-dashoffset:78; opacity:0}12%{opacity:.50}52%{stroke-dashoffset:0;opacity:.50}78%{stroke-dashoffset:0;opacity:.20}100%{stroke-dashoffset:0;opacity:0}}
@keyframes gam6{0%{stroke-dashoffset:215;opacity:0}10%{opacity:.55}55%{stroke-dashoffset:0;opacity:.55}80%{stroke-dashoffset:0;opacity:.20}100%{stroke-dashoffset:0;opacity:0}}
@keyframes gam7{0%{stroke-dashoffset:290;opacity:0}10%{opacity:.45}55%{stroke-dashoffset:0;opacity:.45}80%{stroke-dashoffset:0;opacity:.16}100%{stroke-dashoffset:0;opacity:0}}
@keyframes gam8{0%{stroke-dashoffset:330;opacity:0}10%{opacity:.48}55%{stroke-dashoffset:0;opacity:.48}80%{stroke-dashoffset:0;opacity:.18}100%{stroke-dashoffset:0;opacity:0}}

.hero-globe .city-grp .pr{
  animation: cityPulseM 2.8s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.hero-globe .cg-2 .pr{ animation-delay:.7s }
.hero-globe .cg-3 .pr{ animation-delay:1.4s }
.hero-globe .cg-4 .pr{ animation-delay:.3s }
.hero-globe .cg-5 .pr{ animation-delay:1.0s }
.hero-globe .cg-6 .pr{ animation-delay:1.7s }
.hero-globe .cg-7 .pr{ animation-delay:2.1s }
.hero-globe .cg-8 .pr{ animation-delay:.5s }
@keyframes cityPulseM{0%{transform:scale(1);opacity:.85}100%{transform:scale(4.5);opacity:0}}

/* Globe animations: keep them running for all mobile users per JetPatient
   policy. (Earlier reduce-motion override removed — see top of file for the
   v2.2 policy + opt-out.) */

/* Push page content above the sticky CTA bar (belt-and-suspenders) */
body.jp-has-mobile-cta main{
  padding-bottom: calc(var(--jp-mob-cta-h) + 28px + env(safe-area-inset-bottom));
}

/* END — jp-marketing-mobile-v2.css (v2.1 polish · 2026-05-11) */