/* =========================================================
   Cognera Health — Mobile/Tablet Version
   Purpose: single-column mobile/tablet experience, preserved
   animations/icons, image-light layout, reliable hamburger.
   ========================================================= */

:root{
  --mobile-max: 1180px;
}

html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
  -webkit-text-size-adjust:100%;
}

body{
  padding-bottom:0 !important;
  background:#fff;
}

/* Keep the logo image only; remove decorative/content images for the mobile version. */
body img:not(.partner-logo):not(.keep-mobile-image):not(.logo-icon img),
.pill-image img,
.hero-images img,
.image-stack img,
.trust-image img,
.feature-image img,
.dashboard-image img,
section img:not(.partner-logo):not(.keep-mobile-image):not(.logo-icon img){
  display:none !important;
}

.logo-icon img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

/* Replace hidden image areas with clean gradient cards so the visual rhythm remains. */
.pill-image,
.hero-images,
.image-stack,
.trust-image,
.feature-image,
.dashboard-image,
[class*="image"]{
  min-height:0 !important;
}

.pill-image:empty,
.hero-images:empty{
  display:none !important;
}

/* Header / hamburger */
.nav{
  min-height:64px;
  padding:0.75rem 1rem !important;
  position:fixed !important;
}

.logo{
  min-width:0;
  flex:1 1 auto;
}

.logo-text{
  font-size:clamp(1rem,4vw,1.25rem) !important;
  white-space:nowrap;
}

.logo-icon{
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
}

.mobile-menu-btn{
  display:flex !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  gap:5px !important;
  border:1px solid rgba(99,101,240,.18) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 10px 24px rgba(31,42,53,.10) !important;
  cursor:pointer !important;
  z-index:1101 !important;
}

.mobile-menu-btn span{
  width:22px !important;
  height:2px !important;
  background:linear-gradient(135deg,var(--primary),var(--accent)) !important;
  border-radius:999px !important;
  transition:transform .25s ease, opacity .25s ease !important;
}

.mobile-menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg) !important;}
.mobile-menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0 !important;}
.mobile-menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg) !important;}

.nav-links{
  display:none !important;
}

.nav-links.active{
  display:flex !important;
  position:fixed !important;
  top:72px !important;
  left:12px !important;
  right:12px !important;
  width:auto !important;
  max-height:calc(100dvh - 88px) !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:.55rem !important;
  padding:.8rem !important;
  background:rgba(255,255,255,.98) !important;
  backdrop-filter:blur(18px) !important;
  border:1px solid rgba(99,101,240,.16) !important;
  border-radius:22px !important;
  box-shadow:0 24px 60px rgba(31,42,53,.18) !important;
  z-index:1100 !important;
}

.nav-links.active a,
.nav-links.active .dropdown-toggle{
  min-height:48px !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:.85rem 1rem !important;
  border-radius:14px !important;
  text-align:left !important;
  font-size:1rem !important;
  line-height:1.25 !important;
  color:#1f2a35 !important;
  background:rgba(99,101,240,.05) !important;
  border:1px solid rgba(99,101,240,.08) !important;
  text-decoration:none !important;
}

.nav-links.active .btn,
.nav-links.active .btn-primary{
  justify-content:center !important;
  color:#fff !important;
  background:linear-gradient(135deg,rgba(99,101,240,.95),rgba(170,89,247,.95),rgba(236,74,157,.95)) !important;
  border:0 !important;
}

.nav-dropdown{width:100% !important;}
.nav-dropdown .dropdown-menu{display:none !important;}
.nav-dropdown.open .dropdown-menu{
  display:flex !important;
  position:static !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  flex-direction:column !important;
  gap:.5rem !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  margin:.45rem 0 0 !important;
  padding:.5rem !important;
  box-shadow:none !important;
  border-radius:16px !important;
  background:rgba(246,247,249,.95) !important;
}

.dropdown-column{
  width:100% !important;
  padding:0 !important;
  border:0 !important;
}

.dropdown-item{
  white-space:normal !important;
  gap:.5rem !important;
}

.dropdown-item-icon{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  font-size:.9rem !important;
}

.dropdown-item-content h4{
  white-space:normal !important;
  font-size:.95rem !important;
}

/* Mobile/tablet layout foundation */
main,
section,
.container,
.hero-content,
[class*="content"],
[class*="grid"],
[class*="cards"],
[class*="columns"],
[class*="row"],
[style*="grid-template-columns"],
[style*="display: grid"],
[style*="display:grid"],
[style*="display: flex"],
[style*="display:flex"]{
  max-width:100% !important;
}

section{
  min-height:auto !important;
  height:auto !important;
  display:block !important;
  overflow:visible !important;
  padding:4rem 0 !important;
}

section:first-of-type,
.hero{
  padding-top:7.5rem !important;
}

.container{
  width:100% !important;
  max-width:760px !important;
  padding-left:1rem !important;
  padding-right:1rem !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.hero-content,
.hero-images,
.grid,
.cards,
.features-grid,
.dashboard-grid,
.team-grid,
.pricing-grid,
.contact-grid,
.footer-content{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:1.25rem !important;
  min-height:0 !important;
  height:auto !important;
}

.hero-images,
.image-stack,
.pill-image{
  display:none !important;
}

.hero-text,
[style*="padding-left"],
[style*="margin-left"],
[style*="margin-top: -"],
[style*="margin-top:-"]{
  padding-left:0 !important;
  margin-left:0 !important;
  margin-top:0 !important;
}

h1{font-size:clamp(2.05rem,8.5vw,3.6rem) !important; line-height:1.08 !important;}
h2{font-size:clamp(1.65rem,6.5vw,2.65rem) !important; line-height:1.15 !important;}
h3{font-size:clamp(1.15rem,4.8vw,1.6rem) !important; line-height:1.22 !important;}
p,li,span{max-width:100%;}
p{font-size:clamp(.98rem,3.7vw,1.1rem) !important; line-height:1.65 !important;}

.hero p, .section-subtitle, .subtitle{
  max-width:100% !important;
}

/* Cards and boxes */
.card,
.feature-card,
.service-card,
.contact-card,
.pricing-card,
[style*="border-radius"],
[style*="box-shadow"]{
  max-width:100% !important;
}

.hero-ctas,
.cta-buttons,
.button-group,
[style*="gap"]{
  flex-wrap:wrap !important;
}

.btn,
.btn-primary,
.btn-secondary,
button,
input,
select,
textarea{
  max-width:100% !important;
}

.hero-ctas .btn,
.cta-buttons .btn{
  width:100% !important;
  justify-content:center !important;
  text-align:center !important;
}

/* Tables become readable cards/scroll areas instead of breaking width. */
table{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  white-space:normal !important;
}

/* Partners/logos can remain when intentional, but constrained. */
.partners-logos{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:1rem !important;
}
.partner-logo{
  max-width:180px !important;
  width:auto !important;
  height:auto !important;
  display:block !important;
  transform:none !important;
}

/* Footer mobile cleanup */
footer, .footer{
  width:100% !important;
  overflow:hidden !important;
}

.footer-content,
.footer-grid,
.footer-table{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:1rem !important;
}

.footer-links{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:.7rem 1rem !important;
}

/* Cookie banner */
#cookie-consent{
  left:12px !important;
  right:12px !important;
  bottom:12px !important;
  width:auto !important;
  max-width:none !important;
}

/* Animation preservation with reduced-motion support */
.fade-in,.slide-in-left,.slide-in-right{
  transition:opacity .65s ease, transform .65s ease !important;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

@media (min-width: 768px) and (max-width: 1180px){
  .container{max-width:900px !important; padding-left:1.5rem !important; padding-right:1.5rem !important;}
  .hero-ctas .btn,.cta-buttons .btn{width:auto !important;}
  .cards,.features-grid,.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

@media (max-width: 520px){
  .logo-text{font-size:1rem !important;}
  .logo-icon{width:30px !important;height:30px !important;flex-basis:30px !important;}
  section{padding:3rem 0 !important;}
  section:first-of-type,.hero{padding-top:6.5rem !important;}
  .nav-links.active{top:66px !important; left:8px !important; right:8px !important;}
}

/* =========================================================
   Final mobile/tablet compatibility hardening — 2026-04-27
   ========================================================= */
*, *::before, *::after{
  box-sizing:border-box !important;
}

html{
  font-size:16px;
}

body{
  min-width:0 !important;
  width:100% !important;
  overflow-x:hidden !important;
}

/* Prevent inline desktop sizing from breaking mobile/tablet. */
[style*="width:"],
[style*="min-width:"],
[style*="max-width:"],
[style*="height:"],
[style*="min-height:"]{
  max-width:100% !important;
}

[style*="width: 480px"],
[style*="width:480px"],
[style*="width: 600px"],
[style*="width:600px"],
[style*="min-width: 400px"],
[style*="min-width:400px"],
[style*="min-width: 500px"],
[style*="min-width:500px"]{
  width:100% !important;
  min-width:0 !important;
}

/* Make all text readable and non-overflowing. */
h1,h2,h3,h4,h5,h6,p,li,a,span,div,small,strong,em{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Preserve Font Awesome and inline icons. */
i[class^="fa-"],
i[class*=" fa-"],
.fa,
.fa-solid,
.fa-regular,
.fa-brands,
.icon,
[class*="icon"] i{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
}

/* Header safety: fixed, visible, and above all content. */
.nav,
header .nav,
nav#nav{
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:1200 !important;
}

body.mobile-menu-open{
  overflow:hidden !important;
}

body.mobile-menu-open::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(31,42,53,.24);
  backdrop-filter:blur(2px);
  z-index:1099;
}

.nav-links.active{
  overscroll-behavior:contain;
}

/* Dropdown icon/text alignment on touch devices. */
.nav-links.active .dropdown-item{
  display:flex !important;
  align-items:center !important;
  min-height:48px !important;
  padding:.65rem .8rem !important;
  border-radius:12px !important;
  background:#fff !important;
}

.nav-links.active .dropdown-item-content{
  min-width:0 !important;
  width:100% !important;
}

.nav-links.active .dropdown-item-content h4,
.nav-links.active .dropdown-item-content p{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}

/* Generic desktop layouts converted to mobile/tablet safely. */
@media (max-width: 1180px){
  main{
    width:100% !important;
    overflow:hidden !important;
  }

  .container,
  .container-fluid,
  .wrapper,
  .content-wrapper,
  .section-content{
    width:100% !important;
    max-width:min(100%, 900px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:1rem !important;
    padding-right:1rem !important;
  }

  .hero,
  .section,
  section{
    width:100% !important;
  }

  .grid,
  .cards,
  .features-grid,
  .services-grid,
  .pricing-grid,
  .contact-grid,
  .team-grid,
  .stats-grid,
  .resource-grid,
  .leadership-grid,
  .timeline-grid,
  .footer-content,
  .footer-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:stretch !important;
  }

  [style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }

  [style*="display: flex"],
  [style*="display:flex"],
  .flex,
  .row{
    flex-wrap:wrap !important;
  }

  .card,
  .feature-card,
  .service-card,
  .pricing-card,
  .contact-card,
  .resource-card,
  .team-card,
  .stat-card,
  .glass-card,
  .info-card{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .btn,
  .button,
  .btn-primary,
  .btn-secondary,
  a.btn,
  button{
    min-height:44px !important;
    white-space:normal !important;
    line-height:1.25 !important;
  }

  input,select,textarea{
    width:100% !important;
    min-width:0 !important;
    font-size:16px !important;
  }

  iframe,video,canvas,svg{
    max-width:100% !important;
  }
}

@media (max-width: 767px){
  .container,
  .container-fluid,
  .wrapper,
  .content-wrapper,
  .section-content{
    max-width:100% !important;
    padding-left:1rem !important;
    padding-right:1rem !important;
  }

  .hero-ctas,
  .cta-buttons,
  .button-group{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
  }

  .hero-ctas > *,
  .cta-buttons > *,
  .button-group > *{
    width:100% !important;
  }

  table th,
  table td{
    min-width:140px;
  }
}

@media (min-width:768px) and (max-width:1180px){
  .container,
  .container-fluid,
  .wrapper,
  .content-wrapper,
  .section-content{
    padding-left:1.5rem !important;
    padding-right:1.5rem !important;
  }

  .nav-links.active{
    left:24px !important;
    right:24px !important;
  }
}

.mobile-table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

/* =========================================================
   Mobile/tablet spacing + card heading alignment final pass
   Request: reduce large spaces; keep box headings beside icons;
   fit content cleanly on phone and tablet.
   ========================================================= */
@media (max-width:1180px){
  /* Tight, consistent vertical rhythm across every page. */
  section,
  .section,
  main > div,
  .hero,
  .page-hero,
  .content-section,
  .cta-section{
    min-height:auto !important;
    height:auto !important;
    padding-top:1.75rem !important;
    padding-bottom:1.75rem !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  section:first-of-type,
  .hero:first-of-type,
  .page-hero:first-of-type{
    padding-top:5.75rem !important; /* room for fixed mobile header only */
  }

  /* Remove inherited desktop negative/large spacing from inline styles. */
  [style*="margin-top"],
  [style*="margin-bottom"]{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  [style*="padding: 6rem"],
  [style*="padding:6rem"],
  [style*="padding: 5rem"],
  [style*="padding:5rem"],
  [style*="padding: 4rem"],
  [style*="padding:4rem"],
  [style*="padding-top: 6rem"],
  [style*="padding-top:6rem"],
  [style*="padding-bottom: 6rem"],
  [style*="padding-bottom:6rem"],
  [style*="padding-top: 5rem"],
  [style*="padding-top:5rem"],
  [style*="padding-bottom: 5rem"],
  [style*="padding-bottom:5rem"],
  [style*="padding-top: 4rem"],
  [style*="padding-top:4rem"],
  [style*="padding-bottom: 4rem"],
  [style*="padding-bottom:4rem"]{
    padding-top:1.75rem !important;
    padding-bottom:1.75rem !important;
  }

  .container,
  .section-content,
  .content-wrapper,
  .wrapper{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  /* Compact grids/cards so stacked sections do not look spaced apart. */
  .grid,
  .cards,
  .features-grid,
  .services-grid,
  .pricing-grid,
  .contact-grid,
  .team-grid,
  .stats-grid,
  .resource-grid,
  .leadership-grid,
  .timeline-grid,
  .footer-content,
  .footer-grid{
    gap:0.95rem !important;
    row-gap:0.95rem !important;
    column-gap:0.95rem !important;
  }

  .card,
  .feature-card,
  .service-card,
  .pricing-card,
  .contact-card,
  .resource-card,
  .team-card,
  .stat-card,
  .glass-card,
  .info-card,
  .benefit-card,
  .compact,
  [class$="-card"]{
    padding:1rem !important;
    gap:0.65rem !important;
  }

  /* Keep every icon + heading row horizontal on mobile/tablet. */
  .card-header,
  .feature-header,
  .service-header,
  .contact-card-header,
  .benefit-header,
  .resource-header,
  .info-header,
  .legal-info-item,
  .dropdown-item,
  [class*="card-header"],
  [class*="feature-header"],
  [class*="benefit-header"]{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:0.65rem !important;
    text-align:left !important;
    margin-top:0 !important;
    margin-bottom:0.55rem !important;
    width:100% !important;
  }

  .contact-card-header > *,
  .card-header > *,
  .feature-header > *,
  .service-header > *,
  .benefit-header > *,
  .resource-header > *,
  .info-header > *{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  .contact-card-icon,
  .card-icon,
  .feature-icon,
  .service-icon,
  .benefit-icon,
  .resource-icon,
  .info-icon,
  .legal-info-icon,
  [class*="-icon"]{
    flex:0 0 2.5rem !important;
    width:2.5rem !important;
    min-width:2.5rem !important;
    max-width:2.5rem !important;
    height:2.5rem !important;
    min-height:2.5rem !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
  }

  .contact-card-icon svg,
  .card-icon svg,
  .feature-icon svg,
  .service-icon svg,
  .benefit-icon svg,
  .resource-icon svg,
  .info-icon svg,
  .legal-info-icon,
  [class*="-icon"] svg,
  [class*="-icon"] i{
    width:1.25rem !important;
    height:1.25rem !important;
    font-size:1.15rem !important;
    line-height:1 !important;
  }

  .contact-card-header h1,
  .contact-card-header h2,
  .contact-card-header h3,
  .contact-card-header h4,
  .card-header h1,
  .card-header h2,
  .card-header h3,
  .card-header h4,
  .feature-header h1,
  .feature-header h2,
  .feature-header h3,
  .feature-header h4,
  .service-header h1,
  .service-header h2,
  .service-header h3,
  .service-header h4,
  .benefit-header h1,
  .benefit-header h2,
  .benefit-header h3,
  .benefit-header h4,
  [class*="card-header"] h1,
  [class*="card-header"] h2,
  [class*="card-header"] h3,
  [class*="card-header"] h4{
    flex:1 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
    text-align:left !important;
    line-height:1.22 !important;
  }

  /* Prevent paragraph spacing inside cards from creating false section gaps. */
  .card p,
  .feature-card p,
  .service-card p,
  .pricing-card p,
  .contact-card p,
  .resource-card p,
  .team-card p,
  .stat-card p,
  .glass-card p,
  .info-card p,
  .benefit-card p{
    margin-top:0 !important;
    margin-bottom:0.55rem !important;
    line-height:1.55 !important;
  }

  .card p:last-child,
  .feature-card p:last-child,
  .service-card p:last-child,
  .pricing-card p:last-child,
  .contact-card p:last-child,
  .resource-card p:last-child,
  .team-card p:last-child,
  .stat-card p:last-child,
  .glass-card p:last-child,
  .info-card p:last-child,
  .benefit-card p:last-child{
    margin-bottom:0 !important;
  }

  h1,h2,h3,h4,h5,h6{
    margin-top:0 !important;
    margin-bottom:0.75rem !important;
  }

  p + h2,
  p + h3,
  div + h2,
  div + h3{
    margin-top:0.75rem !important;
  }

  /* Keep animations/icons working but stop animations from expanding layout. */
  .fade-in,
  .slide-in-left,
  .slide-in-right,
  .animate,
  [data-animate]{
    will-change:opacity, transform;
    backface-visibility:hidden;
  }
}

@media (max-width:767px){
  section,
  .section,
  .hero,
  .page-hero,
  .content-section,
  .cta-section{
    padding-top:1.25rem !important;
    padding-bottom:1.25rem !important;
  }

  section:first-of-type,
  .hero:first-of-type,
  .page-hero:first-of-type{
    padding-top:5.25rem !important;
  }

  .grid,
  .cards,
  .features-grid,
  .services-grid,
  .pricing-grid,
  .contact-grid,
  .team-grid,
  .stats-grid,
  .resource-grid,
  .leadership-grid,
  .timeline-grid{
    gap:0.8rem !important;
  }

  .card,
  .feature-card,
  .service-card,
  .pricing-card,
  .contact-card,
  .resource-card,
  .team-card,
  .stat-card,
  .glass-card,
  .info-card,
  .benefit-card,
  [class$="-card"]{
    padding:0.95rem !important;
  }
}

/* =========================================================
   Index page mobile/tablet spacing and heading wrap fixes
   Added for: Backed by clinicians, Care that scales,
   Built for real life, One platform sections.
   ========================================================= */
@media (max-width: 1180px) {
  /* Remove desktop-only section height and large gaps on index sections. */
  body .centered-section,
  body .feature-section,
  body .cards-section,
  body .cta-section,
  body .partners {
    min-height: auto !important;
    height: auto !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body .centered-section.alt,
  body .cards-section.alt {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    margin-top: 0 !important;
  }

  /* Kill all inline negative margin spacing used in the index file. */
  body [style*="margin-top: -"],
  body [style*="margin-top:-"] {
    margin-top: 0 !important;
  }

  /* Keep content close to the section above it. */
  #providers,
  #individuals,
  #paths,
  #contact {
    margin-top: 0 !important;
    padding-top: 1rem !important;
  }

  #providers .container,
  #individuals .container,
  #paths .container,
  #contact .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #providers .centered-content,
  #paths .centered-content,
  .feature-text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Pull Care that scales and Built for real life close to preceding text. */
  #providers .feature-grid,
  #individuals .feature-grid,
  #individuals .feature-grid.reverse {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
    align-items: start !important;
  }

  #providers .feature-text,
  #individuals .feature-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #providers .feature-text h2,
  #individuals .feature-text h2,
  #paths .centered-content h2,
  #providers .centered-content h2 {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    max-width: 100% !important;
    line-height: 1.15 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  /* Force wrapping for inline nowrap headings across the page. */
  h1[style*="white-space: nowrap"],
  h2[style*="white-space: nowrap"],
  h3[style*="white-space: nowrap"],
  [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  /* Specific requested headings. */
  #providers .centered-content h2,
  #paths .centered-content h2 {
    text-align: center !important;
    text-wrap: balance;
  }

  #providers .centered-content p,
  #paths .centered-content p,
  #individuals .feature-text p,
  #providers .feature-text p {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    max-width: 100% !important;
  }

  /* Image containers should not create vertical gaps when mobile hides images. */
  #providers .centered-images,
  #providers .feature-images,
  #individuals .feature-images,
  #paths .feature-images,
  .centered-images,
  .feature-images {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .feature-list {
    margin-top: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  .feature-list li {
    margin-bottom: 0.55rem !important;
  }
}

@media (max-width: 640px) {
  body .centered-section,
  body .feature-section,
  body .cards-section,
  body .cta-section,
  body .partners {
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
  }

  #providers,
  #individuals,
  #paths,
  #contact {
    padding-top: 0.75rem !important;
  }

  #providers .feature-grid,
  #individuals .feature-grid,
  #individuals .feature-grid.reverse {
    gap: 0.75rem !important;
    margin-top: 0.75rem !important;
  }
}

/* Final index.html mobile/tablet spacing + heading wrap fixes: 2026-04-27 */
.hero-content-tight,
.hero-content {
  margin-top: 0 !important;
}

.wrap-heading,
.backed-heading,
.paths-heading,
.feature-heading,
#providers h2,
#paths h2,
#individuals h2 {
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  line-height: 1.15 !important;
  max-width: 100% !important;
}

#providers {
  margin-top: 0 !important;
  padding-top: 1.25rem !important;
  padding-bottom: 1.5rem !important;
}

#providers .centered-content,
#paths .paths-content {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}

#providers .centered-content p,
#paths .paths-content p {
  margin-bottom: 1rem !important;
}

#providers .centered-images,
#providers .provider-scale-grid,
#individuals .individuals-first-grid,
#paths .paths-images {
  margin-top: 0.75rem !important;
}

#providers .feature-text,
#providers .feature-images,
#individuals .feature-text,
#individuals .feature-images {
  margin-top: 0 !important;
}

#individuals {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

#individuals .feature-grid + .feature-grid {
  margin-top: 1.5rem !important;
}

#paths {
  margin-top: 0 !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

@media (max-width: 1024px) {
  section,
  .centered-section,
  .feature-section,
  .cards-section,
  .cta-section {
    min-height: auto !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .hero {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    min-height: auto !important;
  }

  .hero-content {
    min-height: auto !important;
    gap: 1.25rem !important;
    margin-top: 0 !important;
  }

  .hero-images,
  .feature-images,
  .centered-images {
    height: auto !important;
    margin-top: 0.75rem !important;
    gap: 0.75rem !important;
  }

  .centered-images .pill-image,
  .feature-images .pill-image,
  .feature-images.triple .pill-image {
    height: 220px !important;
    margin-top: 0 !important;
  }

  #providers {
    margin-top: 0 !important;
    padding-top: 0.75rem !important;
  }

  #providers .centered-images {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }

  .feature-grid,
  .feature-grid.reverse {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .feature-text,
  .feature-text.fade-in {
    margin-top: 0 !important;
  }

  .feature-text h2,
  .centered-section h2,
  .cards-section h2 {
    margin-bottom: 0.75rem !important;
  }

  .feature-text p,
  .centered-section p,
  .cards-section p {
    margin-bottom: 1rem !important;
  }
}

@media (max-width: 640px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .wrap-heading,
  .backed-heading,
  .paths-heading {
    max-width: 18ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .feature-heading {
    max-width: 16ch !important;
  }

  #providers .centered-content p,
  #paths .paths-content p {
    text-align: left !important;
  }

  .centered-images .pill-image,
  .feature-images .pill-image,
  .feature-images.triple .pill-image {
    height: 190px !important;
  }

  #cookie-consent {
    left: 1rem !important;
    right: 1rem !important;
    width: auto !important;
    bottom: 1rem !important;
  }
}

/* =========================================================
   Mobile/tablet checkmark normalization
   Prevents oversized checkmarks on Legal and other pages
   ========================================================= */
@media (max-width: 1024px) {
  .feature-list li::before,
  ul.feature-list li::before,
  .check-list li::before,
  ul.check-list li::before,
  .legal-list li::before,
  ul.legal-list li::before,
  .benefit-list li::before,
  ul.benefit-list li::before,
  .service-list li::before,
  ul.service-list li::before,
  .resource-list li::before,
  ul.resource-list li::before,
  .card-list li::before,
  ul.card-list li::before {
      font-size: 0.8rem !important;
      line-height: 1 !important;
      width: 0.95rem !important;
      min-width: 0.95rem !important;
      max-width: 0.95rem !important;
      height: 0.95rem !important;
      min-height: 0.95rem !important;
      max-height: 0.95rem !important;
      margin-top: 0.2rem !important;
      flex: 0 0 0.95rem !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
  }

  .feature-list svg,
  ul.feature-list svg,
  .check-list svg,
  ul.check-list svg,
  .legal-list svg,
  ul.legal-list svg,
  .benefit-list svg,
  ul.benefit-list svg,
  .service-list svg,
  ul.service-list svg,
  .resource-list svg,
  ul.resource-list svg,
  .card-list svg,
  ul.card-list svg,
  .feature-bullet svg,
  .check-bullet svg,
  .legal-bullet svg {
      width: 13px !important;
      height: 13px !important;
      min-width: 13px !important;
      min-height: 13px !important;
      max-width: 13px !important;
      max-height: 13px !important;
      flex: 0 0 13px !important;
  }

  .feature-bullet,
  .check-bullet,
  .legal-bullet,
  .benefit-bullet,
  .service-bullet,
  .resource-bullet {
      width: 17px !important;
      height: 17px !important;
      min-width: 17px !important;
      min-height: 17px !important;
      max-width: 17px !important;
      max-height: 17px !important;
      flex: 0 0 17px !important;
  }

  /* =========================================
   GLOBAL CHECKMARK FIX (LEGAL + ALL PAGES)
   ========================================= */

/* Fix text-based checkmarks */
.feature-list li::before {
    font-size: 0.8rem !important;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Fix SVG-based checkmarks */
.feature-list svg,
.feature-bullet svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px;
    min-height: 14px;
}

/* Fix bullet container size */
.feature-bullet {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Prevent global SVG rules from breaking checkmarks */
.feature-list svg {
    max-width: 14px !important;
}

/* Tighten spacing for mobile */
.feature-list li {
    gap: 8px;
    align-items: flex-start;
}

svg {
    width: 24px;
    height: 24px;
}
}

/* =========================================================
   FINAL OVERRIDE: SMALL CHECKMARKS / LIST CHECK ICONS
   Added to the very bottom so it wins over earlier mobile.css,
   page-level styles, and the broad svg sizing rule above.
   ========================================================= */
@media (max-width: 1024px) {
  /* Text checkmarks created with ::before */
  .feature-list li::before,
  .compact-list li::before,
  .check-list li::before,
  .legal-list li::before,
  .benefit-list li::before,
  .service-list li::before,
  .resource-list li::before,
  .card-list li::before,
  .pricing-feature-list li::before,
  .career-feature-list li::before,
  .event-feature-list li::before,
  .investment-feature-list li::before,
  .compliance-feature-list li::before,
  .privacy-feature-list li::before,
  .terms-feature-list li::before {
    font-size: 0.78rem !important;
    line-height: 1 !important;
    width: 0.85rem !important;
    min-width: 0.85rem !important;
    max-width: 0.85rem !important;
    height: 0.85rem !important;
    min-height: 0.85rem !important;
    max-height: 0.85rem !important;
    flex: 0 0 0.85rem !important;
    margin-top: 0.28rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* SVG checkmark icons used across Legal, Terms, Privacy, Compliance, Careers, Events, Investment, HealScript, etc. */
  svg.legal-info-icon,
  svg.career-feature-check,
  svg.event-feature-check,
  svg.investment-feature-check,
  svg.pricing-feature-check,
  svg.check-icon,
  .legal-info-item > svg,
  .career-feature-list svg,
  .event-feature-list svg,
  .investment-feature-list svg,
  .pricing-feature-list svg,
  .feature-list svg,
  .check-list svg,
  .legal-list svg,
  .benefit-list svg,
  .service-list svg,
  .resource-list svg,
  .card-list svg,
  .feature-bullet svg,
  .check-bullet svg,
  .legal-bullet svg {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    max-width: 13px !important;
    max-height: 13px !important;
    flex: 0 0 13px !important;
  }

  /* Containers that hold check SVGs */
  .feature-bullet,
  .check-bullet,
  .legal-bullet,
  .benefit-bullet,
  .service-bullet,
  .resource-bullet,
  .feature-item > .check-icon,
  .legal-info-icon:not(svg) {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
    flex: 0 0 17px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Keep list rows aligned after shrinking icons */
  .feature-list li,
  .compact-list li,
  .check-list li,
  .legal-list li,
  .benefit-list li,
  .service-list li,
  .resource-list li,
  .card-list li,
  .career-feature-list li,
  .event-feature-list li,
  .investment-feature-list li,
  .pricing-feature-list li,
  .legal-info-item,
  .feature-item {
    gap: 0.55rem !important;
    align-items: flex-start !important;
  }
}

/* =========================================
   HEALSCRIPT HERO BADGE INLINE FIX
   Keeps hamburger-style badge icon and text side-by-side.
   ========================================= */
.hero-badge.hero-badge-inline,
.contact-hero .hero-badge.hero-badge-inline {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  white-space: normal !important;
}
.hero-badge.hero-badge-inline .badge-icon,
.contact-hero .hero-badge.hero-badge-inline .badge-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin-top: 0 !important;
}
.hero-badge.hero-badge-inline .badge-text,
.contact-hero .hero-badge.hero-badge-inline .badge-text {
  display: inline !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-align: left !important;
  line-height: 1.25 !important;
}
@media (max-width: 640px) {
  .hero-badge.hero-badge-inline,
  .contact-hero .hero-badge.hero-badge-inline {
    gap: 0.4rem !important;
    padding: 0.55rem 0.65rem !important;
  }
  .hero-badge.hero-badge-inline .badge-text,
  .contact-hero .hero-badge.hero-badge-inline .badge-text {
    font-size: 0.78rem !important;
    line-height: 1.22 !important;
  }
}


/* =====================================================
   FINAL HEALSCRIPT BADGE FIX - icon + text side by side
   Uses CSS grid so the badge text cannot drop below the 3-bar icon.
   ===================================================== */
.contact-hero .hero-badge.hero-badge-inline,
.hero-badge.hero-badge-inline {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: 0.5rem !important;
  row-gap: 0 !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 1rem 0 !important;
  padding: 0.6rem 0.85rem !important;
  text-align: left !important;
  white-space: normal !important;
}
.contact-hero .hero-badge.hero-badge-inline .badge-icon,
.hero-badge.hero-badge-inline .badge-icon {
  grid-column: 1 !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  display: block !important;
  align-self: center !important;
  margin: 0 !important;
}
.contact-hero .hero-badge.hero-badge-inline .badge-text,
.hero-badge.hero-badge-inline .badge-text {
  grid-column: 2 !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: clamp(0.82rem, 2.8vw, 1.05rem) !important;
  line-height: 1.22 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-align: left !important;
}
@media (max-width: 420px) {
  .contact-hero .hero-badge.hero-badge-inline,
  .hero-badge.hero-badge-inline {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    column-gap: 0.45rem !important;
    padding: 0.55rem 0.65rem !important;
  }
  .contact-hero .hero-badge.hero-badge-inline .badge-icon,
  .hero-badge.hero-badge-inline .badge-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
  }
  .contact-hero .hero-badge.hero-badge-inline .badge-text,
  .hero-badge.hero-badge-inline .badge-text {
    font-size: 0.78rem !important;
  }
}


/* =========================================
   HEALSCRIPT HERO TITLE - NO WRAP / MOBILE FIT
   Keeps “Introducing HealScript®” on one line.
   ========================================= */
.healscript-title-nowrap,
.healscript-title-nowrap * {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.healscript-title-nowrap {
  display: block !important;
  max-width: 100% !important;
  line-height: 1.1 !important;
}

@media (max-width: 1024px) {
  .healscript-hero-copy {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .healscript-title-nowrap {
    font-size: clamp(1.45rem, 5.2vw, 2.55rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.035em !important;
  }
}

@media (max-width: 480px) {
  .healscript-title-nowrap {
    font-size: clamp(1.32rem, 5.7vw, 1.7rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.045em !important;
  }
}


/* =========================================================
   FINAL ABOUT SUBMENU FIX — icon/text alignment + stable open
   Applies after all previous mobile overrides.
   ========================================================= */
.nav-dropdown.open > .dropdown-toggle,
.nav-links.active .nav-dropdown.open > .dropdown-toggle,
.nav-links.active .nav-dropdown > .dropdown-toggle:focus,
.nav-links.active .nav-dropdown > .dropdown-toggle:active {
  color:#6366f1 !important;
  -webkit-text-fill-color:#6366f1 !important;
  background:rgba(99,102,241,.06) !important;
}

.nav-links.active .nav-dropdown.open > .dropdown-menu {
  display:flex !important;
  position:static !important;
  flex-direction:column !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

.nav-links.active .about-dropdown,
.nav-links.active .services-dropdown {
  align-items:stretch !important;
  justify-content:flex-start !important;
}

.nav-links.active .dropdown-column {
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:.45rem !important;
  padding:0 !important;
  border:0 !important;
}

.nav-links.active .dropdown-item,
.dropdown-menu .dropdown-item {
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:.75rem !important;
  text-align:left !important;
  color:#1f2937 !important;
  -webkit-text-fill-color:currentColor !important;
}

.nav-links.active .dropdown-item-icon,
.dropdown-menu .dropdown-item-icon {
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  flex:0 0 40px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}

.nav-links.active .dropdown-item-icon i,
.dropdown-menu .dropdown-item-icon i {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  font-size:1.25rem !important;
  width:1.5rem !important;
  height:1.5rem !important;
}

.nav-links.active .dropdown-item-content,
.dropdown-menu .dropdown-item-content {
  flex:1 1 auto !important;
  min-width:0 !important;
  min-height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

.nav-links.active .dropdown-item-content h4,
.dropdown-menu .dropdown-item-content h4 {
  margin:0 !important;
  padding:0 !important;
  line-height:1.2 !important;
  display:flex !important;
  align-items:center !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  -webkit-text-fill-color:currentColor !important;
}