/* ============================================================
   RESPONSIVE REFINEMENT LAYER — Platinum 2026
   Mobile-first polish on top of styles.css / design-system-2026.
   Loads LAST so these rules win the cascade without editing
   thousands of lines in the legacy stylesheet.

   Breakpoints used:
     • ≤1200px  small desktop / large tablet landscape
     • ≤1024px  tablet landscape
     • ≤ 900px  tablet portrait
     • ≤ 768px  large phone / small tablet
     • ≤ 600px  phone landscape
     • ≤ 480px  phone portrait (iPhone 12/13/14/15)
     • ≤ 380px  small phone (iPhone SE, Galaxy S8)
   ============================================================ */


/* ============================================================
   §1  GLOBAL BASELINE — applies to every viewport
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Fluid media — images, videos, svgs never blow out the viewport */
img,
svg,
video,
canvas,
picture {
  max-width: 100%;
  height: auto;
}

/* Prevent long words from breaking layout on narrow screens */
h1, h2, h3, h4, h5, h6,
p, li, a, span, label, .hero__title, .hero__subtitle,
.section__title, .section-header__title {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Minimum comfortable body text at every viewport */
body {
  font-size: clamp(0.95rem, 0.9rem + 0.18vw, 1.0625rem);
  line-height: 1.65;
}

/* Respect iOS safe-area (notch, home indicator) */
@supports (padding: max(0px)) {
  .header,
  .footer-v2,
  .fab-demo,
  .container {
    padding-left: max(var(--space-6, 1.5rem), env(safe-area-inset-left));
    padding-right: max(var(--space-6, 1.5rem), env(safe-area-inset-right));
  }
}


/* ============================================================
   §2  TABLE OVERFLOW SAFETY
   ============================================================ */

table {
  max-width: 100%;
}

.table-responsive,
.comparison-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ============================================================
   §3  TAP TARGETS & FORMS
   ============================================================ */

/* Minimum 44×44 tap targets (Apple HIG / WCAG 2.5.5) */
.btn,
.btn--sm,
.header__nav-link,
.hamburger,
.chip,
.hero__chip,
.tab,
.tab-trigger,
.footer-v2__nav a,
.fab-demo {
  min-height: 44px;
}

.btn--sm {
  min-height: 38px;
}

/* Form inputs ≥16px prevents iOS Safari auto-zoom on focus */
.form-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="name"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}


/* ============================================================
   §4  SECTION SPACING — tighter on small viewports
   ============================================================ */

@media (max-width: 900px) {
  .section {
    padding: clamp(3rem, 5vw, 5rem) 0;
  }
  .section--sm {
    padding: clamp(2.25rem, 4vw, 3.5rem) 0;
  }
  .section--lg {
    padding: clamp(3.5rem, 6vw, 6rem) 0;
  }
  .hero + .section,
  .hero + .section.section--bg-tinted,
  .hero + .section.section--bg-white {
    padding-top: clamp(2.5rem, 5vw, 4rem);
  }
}

@media (max-width: 600px) {
  .section {
    padding: 2.75rem 0;
  }
  .section--sm {
    padding: 2rem 0;
  }
  .section--lg {
    padding: 3.25rem 0;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 2.25rem 0;
  }
  .section--sm {
    padding: 1.75rem 0;
  }
  .section--lg {
    padding: 2.75rem 0;
  }
}


/* ============================================================
   §5  CONTAINER PADDING — mobile-friendly edge gutters
   ============================================================ */

@media (max-width: 768px) {
  .container {
    padding-left: var(--space-5, 1.25rem);
    padding-right: var(--space-5, 1.25rem);
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: var(--space-4, 1rem);
    padding-right: var(--space-4, 1rem);
  }
}

@media (max-width: 380px) {
  .container {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
}


/* ============================================================
   §6  GRID SYSTEM — smoother break cascade
   ============================================================ */

/* Tighten gaps earlier than the defaults */
@media (max-width: 900px) {
  .grid {
    gap: var(--space-6, 1.5rem);
  }
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grid {
    gap: var(--space-5, 1.25rem);
  }
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
  .stagger-children > * + * {
    margin-top: 0;
  }
}


/* ============================================================
   §7  HEADING & TYPOGRAPHY SCALE — mobile refinements
   ============================================================ */

@media (max-width: 768px) {
  h1 { font-size: clamp(1.75rem, 5vw + 0.5rem, 2.35rem); line-height: 1.18; }
  h2 { font-size: clamp(1.45rem, 4vw + 0.4rem, 1.95rem); line-height: 1.22; }
  h3 { font-size: clamp(1.2rem, 3vw + 0.35rem, 1.55rem); line-height: 1.28; }
  h4 { font-size: clamp(1.05rem, 2.2vw + 0.3rem, 1.25rem); line-height: 1.32; }

  .section-header__title,
  .section__title,
  .cta-section__title {
    font-size: clamp(1.5rem, 4.2vw + 0.4rem, 2rem);
    line-height: 1.2;
  }

  .section-header {
    margin-bottom: var(--space-8, 2rem);
  }

  .section-header__text,
  .section-header__subtitle {
    font-size: 0.975rem;
    line-height: 1.65;
  }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(1.55rem, 6vw + 0.25rem, 2rem); }
  h2 { font-size: clamp(1.3rem, 5vw + 0.2rem, 1.7rem); }
  h3 { font-size: clamp(1.1rem, 4vw + 0.2rem, 1.4rem); }

  .section-header__title,
  .section__title {
    font-size: clamp(1.35rem, 5.5vw, 1.8rem);
  }
}


/* ============================================================
   §8  HERO — split grid, chips, actions, badge
   ============================================================ */

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height, 72px) + 2.75rem);
    padding-bottom: 1.75rem;
  }

  .hero-split-grid {
    gap: var(--space-5, 1.25rem);
  }

  .hero-split-grid__content .hero__title {
    font-size: clamp(1.7rem, 3.2vw + 1rem, 2.35rem);
    line-height: 1.18;
  }

  .hero-split-grid__content .hero__subtitle {
    font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.05rem);
    line-height: 1.6;
  }
}

@media (max-width: 768px) {
  .hero-split-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-split-grid__content,
  .hero-split-grid__content .hero__subtitle,
  .hero-split-grid__content .hero__actions,
  .hero-split-grid__content .hero__chips {
    text-align: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-split-grid__content .hero__title {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-split-grid__visual {
    order: -1;
    max-width: 280px;
    margin: 0 auto var(--space-4, 1rem);
  }

  .hero-split-grid__visual img,
  .hero-slider,
  .hero-slider__slide {
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  .hero__badge {
    font-size: 0.72rem;
    padding: 0.35rem 0.75rem;
  }

  .hero__chips {
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero__chip {
    font-size: 0.72rem;
    padding: 0.35rem 0.7rem;
  }

  .hero__actions {
    flex-wrap: wrap;
    gap: 0.65rem;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .hero-split-grid__visual {
    max-width: 240px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__chip {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .hero-split-grid__visual {
    max-width: 220px;
  }

  .hero-split-grid__content .hero__title {
    font-size: clamp(1.5rem, 6.5vw, 1.95rem);
  }

  .hero-split-grid__content .hero__subtitle {
    font-size: 0.95rem;
  }
}


/* ============================================================
   §9  FEATURE CARDS — comfortable padding + icons
   ============================================================ */

@media (max-width: 900px) {
  .feature-card {
    padding: var(--space-8, 2rem);
  }
}

@media (max-width: 600px) {
  .feature-card {
    padding: var(--space-6, 1.5rem);
    border-radius: var(--radius-xl, 24px);
  }
  .feature-card__icon,
  .card__icon {
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-4, 1rem);
  }
  .feature-card__icon svg,
  .card__icon svg {
    width: 22px;
    height: 22px;
  }
  .feature-card__title,
  .feature-card h3,
  .feature-card h4 {
    font-size: 1.08rem;
    margin-bottom: var(--space-2, 0.5rem);
  }
  .feature-card__description,
  .feature-card__text,
  .feature-card__desc,
  .feature-card p {
    font-size: 0.915rem;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .feature-card {
    padding: 1.15rem 1.15rem 1.25rem;
  }
}


/* ============================================================
   §10  BUTTONS — mobile sizing
   ============================================================ */

@media (max-width: 600px) {
  .btn {
    padding: 12px 22px;
    font-size: 0.9rem;
  }
  .btn--lg {
    padding: 14px 26px;
    font-size: 0.95rem;
  }
  .btn--sm {
    padding: 8px 16px;
    font-size: 0.78rem;
  }
}

@media (max-width: 480px) {
  .hero__actions,
  .cta-section__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero__actions .btn,
  .cta-section__actions .btn {
    width: 100%;
  }
}


/* ============================================================
   §11  CTA SECTION — scale down the oversized hardcoded padding
   ============================================================ */

@media (max-width: 900px) {
  .cta-section {
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 2.5rem);
    border-radius: var(--radius-2xl, 32px);
  }
  .cta-section--split {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-6, 1.5rem);
  }
  .cta-section--split .cta-section__actions {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .cta-section {
    padding: 2.25rem 1.25rem;
    border-radius: var(--radius-xl, 24px);
  }
  .cta-section__title {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem);
    margin-bottom: var(--space-3, 0.75rem);
  }
  .cta-section__text {
    font-size: 0.95rem;
    margin-bottom: var(--space-5, 1.25rem);
  }
  .cta-section::before,
  .cta-section::after {
    display: none;
  }
}


/* ============================================================
   §12  SECTION HEADERS — spacing
   ============================================================ */

@media (max-width: 768px) {
  .section-header {
    padding: 0 var(--space-2, 0.5rem);
  }
  .section__label,
  .section-header__label {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }
}


/* ============================================================
   §13  STATS / NUMBERS ROWS
   ============================================================ */

@media (max-width: 900px) {
  .stats-row,
  .hero__proof {
    flex-wrap: wrap;
    gap: var(--space-5, 1.25rem);
    justify-content: center;
  }
  .stats-divider,
  .hero__proof-divider,
  .ehr-divider {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .hero__proof-item {
    flex: 1 1 40%;
    text-align: center;
  }
}


/* ============================================================
   §14  HERO SLIDER — consistent sizing on mobile
   ============================================================ */

.hero-slider {
  width: 100%;
}

@media (max-width: 768px) {
  .hero-slider,
  .hero-slider__slide {
    border-radius: var(--radius-lg, 18px);
  }
}


/* ============================================================
   §15  HORIZONTAL OVERFLOW GUARDS
   ============================================================ */

/* Common offenders that push layouts sideways on phones */
.hero,
.section,
main {
  max-width: 100vw;
  overflow-x: clip;
}

/* Pre / code blocks should scroll, not overflow */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  word-break: break-word;
}


/* ============================================================
   §16  SUPPORT QUICK CARDS, PRICING, MISC COMMON GRIDS
   ============================================================ */

@media (max-width: 768px) {
  .support-page__quick-contacts,
  .support-grid,
  .pricing-grid,
  .pricing-cards,
  .role-content--active,
  .dashboard-mock__body {
    grid-template-columns: 1fr !important;
    gap: var(--space-5, 1.25rem);
  }
}


/* ============================================================
   §17  FLOATING DEMO BUTTON — avoid covering content on phones
   ============================================================ */

@media (max-width: 600px) {
  .fab-demo {
    right: max(1rem, env(safe-area-inset-right)) !important;
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
  }
  .fab-demo__icon svg {
    width: 18px;
    height: 18px;
  }
}


/* ============================================================
   §18  ACCESSIBILITY — focus & reduced motion
   ============================================================ */

:where(a, button, .btn, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-primary, #0069a6);
  outline-offset: 3px;
  border-radius: 6px;
}

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


/* ============================================================
   §19  IMAGE / SVG CONSISTENCY
   ============================================================ */

.svg-img-responsive {
  width: 100%;
  height: auto;
  max-width: 100%;
}

@media (max-width: 768px) {
  .svg-illust--hero {
    max-width: min(420px, 85%);
    margin-inline: auto;
  }
  .svg-illust--section {
    max-width: min(360px, 80%);
    margin-inline: auto;
  }
  .svg-illust--card {
    max-width: min(260px, 70%);
  }
}


/* ============================================================
   §20  HEADER / MOBILE NAV SAFETY
   ============================================================ */

@media (max-width: 768px) {
  .header {
    padding-top: max(0px, env(safe-area-inset-top));
  }
}


/* ============================================================
   §21  LANDSCAPE PHONE CLAMP — avoid huge hero on short viewports
   ============================================================ */

@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height, 72px) + 0.75rem);
    padding-bottom: 1rem;
  }
  .hero-split-grid__visual {
    max-width: 180px;
  }
}


/* ============================================================
   §22  LARGE DESKTOPS — prevent overly wide line-lengths
   ============================================================ */

@media (min-width: 1400px) {
  .hero__subtitle,
  .section-header__text,
  .section-header__subtitle {
    max-width: 62ch;
  }
}


/* ============================================================
   §23  UNIVERSAL MEDIA-SPLIT STACKING
   -------------------------------------------------------------
   Any section laid out as a two-column "text + illustration"
   grid must, on mobile, collapse to one column AND lift the
   illustration to the top. Desktop layout is untouched.

   Strategy:
   • :has() detects any grid container that wraps an <img>.
   • :has(> *:nth-child(2):last-child) limits the rule to
     exactly-2-children grids, so 3- and 4-column card grids
     with images (e.g. logo rows, stat tiles) are unaffected.
   • The child that actually contains the <img> receives
     order:-1 on mobile, so reversed layouts keep working too.

   Browser support: :has() is shipped in every current
   Chrome / Safari / Firefox / Edge release.
   ============================================================ */

/* Desktop sanity: make sure split containers with images
   lay out with their image visually capped at a readable size. */
.section [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) img.svg-img-responsive,
.section [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) .svg-illust--hero,
.section [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) .svg-illust--section {
  max-width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  /* Any two-child inline grid that contains an image →
     stack to a single column with comfortable gap. */
  [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) {
    grid-template-columns: 1fr !important;
    gap: clamp(1.25rem, 4vw, 2rem) !important;
    text-align: center;
  }

  /* The child that contains the illustration jumps to the top. */
  [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) > *:has(> img),
  [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) > *:has(img.svg-img-responsive),
  [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) > *:has(.svg-illust--hero),
  [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) > *:has(.svg-illust--section),
  [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) > *:has(.svg-illust--card) {
    order: -1 !important;
  }

  /* The text child centers nicely once stacked. */
  [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) > *:not(:has(img)) {
    align-items: center !important;
    text-align: center;
  }

  /* Inline-style image containers lose flex-start alignment
     so action buttons inside the text column center too. */
  [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) .btn {
    align-self: center !important;
  }

  /* Clamp the illustration so it doesn't dominate the viewport. */
  [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) img {
    max-width: min(420px, 82%);
    margin-inline: auto;
    display: block;
  }
}

@media (max-width: 600px) {
  [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) img {
    max-width: min(340px, 78%);
  }
}

@media (max-width: 480px) {
  [style*="grid-template-columns"]:has(> *:nth-child(2):last-child):has(img) img {
    max-width: min(280px, 74%);
  }
}


/* ============================================================
   §24  CLASS-BASED SPLIT PATTERNS
   -------------------------------------------------------------
   Covers the design-system classes that don't rely on inline
   grid-template-columns: feature-split, cta-section--split,
   hero-split-grid, and the page-specific class hooks used on
   payment_division, integrations, and community_partners.
   ============================================================ */

/* Make sure the named split components cooperate on mobile. */
@media (max-width: 900px) {
  .feature-split,
  .cta-section--split,
  .hero-split-grid,
  .hero__split,
  .pd-overview-split,
  .cp-overview-split,
  .integrations-feature-split {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: clamp(1.25rem, 4vw, 2rem) !important;
  }

  /* Image-bearing child always floats to the top of the stack. */
  .feature-split__illustration,
  .cta-section--split .cta-section__right,
  .cta-section--split .cta-illustration,
  .hero-split-grid__visual,
  .hero__split-right,
  .pd-overview-split > *:has(img),
  .cp-overview-split > *:has(img),
  .integrations-feature-split > *:has(img) {
    order: -1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Text-bearing sibling normalizes to centered on mobile. */
  .feature-split__content,
  .cta-section--split .cta-section__left,
  .cta-section--split .cta-section__content,
  .hero-split-grid__content,
  .hero__split-left {
    text-align: center;
    align-items: center !important;
  }

  .feature-split__content .btn,
  .cta-section--split .cta-section__left .btn,
  .cta-section--split .cta-section__content .btn,
  .hero-split-grid__content .btn,
  .hero__split-left .btn {
    align-self: center !important;
  }

  /* Undo feature-split RTL flip on mobile so order:-1 works. */
  .feature-split--reversed {
    direction: ltr !important;
  }
}

/* Clamp the named-split illustration sizes at each step. */
@media (max-width: 900px) {
  .feature-split__illustration,
  .hero-split-grid__visual,
  .hero__split-right,
  .cta-section--split .cta-section__visual {
    max-width: min(380px, 80%);
  }
}
@media (max-width: 600px) {
  .feature-split__illustration,
  .hero-split-grid__visual,
  .hero__split-right,
  .cta-section--split .cta-section__visual {
    max-width: min(300px, 75%);
  }
}
@media (max-width: 480px) {
  .feature-split__illustration,
  .hero-split-grid__visual,
  .hero__split-right,
  .cta-section--split .cta-section__visual {
    max-width: min(240px, 72%);
  }
}


/* ============================================================
   §25  QUIZ CTA / CARD SPLITS — efficient_practice_quiz etc.
   ============================================================ */

@media (max-width: 900px) {
  .efficient-practice-quiz__cta-grid,
  .cta-section[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: var(--space-6, 1.5rem) !important;
  }

  .cta-section[style*="grid-template-columns"] > *[style*="order:2"],
  .cta-section[style*="grid-template-columns"] > *:has(img) {
    order: -1 !important;
  }

  .cta-section[style*="grid-template-columns"] .cta-section__actions {
    justify-content: center !important;
  }

  .cta-section[style*="grid-template-columns"] [style*="text-align:left"] {
    text-align: center !important;
  }
}


/* ============================================================
   §26  FALLBACK — browsers without :has() support
   -------------------------------------------------------------
   Firefox <121 and Safari <15.4. The universal rule above is
   ignored there, so this rule targets known class hooks used
   inside templates as a defensive net.
   ============================================================ */

@supports not selector(:has(*)) {
  @media (max-width: 900px) {
    .pd-overview-split,
    .cp-overview-split,
    .integrations-feature-split,
    .feature-split,
    .cta-section--split,
    .hero-split-grid {
      display: flex !important;
      flex-direction: column-reverse !important;
      gap: clamp(1.25rem, 4vw, 2rem) !important;
      text-align: center !important;
    }
  }
}


/* ============================================================
   §27  DEEP MOBILE REFINEMENT (2026 pass)
   -------------------------------------------------------------
   Catches remaining inline-style anti-patterns surfaced by
   scripts/responsive_scan.py — grid-template-columns with N≥2
   that don't collapse, flex items with rigid min-widths,
   hardcoded 2rem+ font-sizes, fixed decorative ornaments,
   and iOS-safe viewport heights.
   ============================================================ */

/* ── 27.1  Universal inline-grid collapse ───────────────
   Any element using inline `grid-template-columns: repeat(N, ...)`
   (N ≥ 2) collapses to 2-col at 900px and 1-col at 600px.
   Limited to descendants of <section> / .container / main to
   avoid touching dashboards. */
@media (max-width: 900px) {
  main [style*="grid-template-columns: repeat(3"],
  main [style*="grid-template-columns:repeat(3"],
  main [style*="grid-template-columns: repeat(4"],
  main [style*="grid-template-columns:repeat(4"],
  main [style*="grid-template-columns: repeat(5"],
  main [style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-5, 1.25rem) !important;
  }
}
@media (max-width: 600px) {
  main [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-4, 1rem) !important;
  }
}

/* ── 27.2  Flex items with rigid min-widths → wrap gracefully
   Pattern: `style="flex:1;min-width:180px;..."` used on
   module_* pages for stat rows. 4 × 180 = 720 → overflows
   typical phone. Force natural wrap below tablet. */
@media (max-width: 900px) {
  main [style*="min-width:180px"],
  main [style*="min-width: 180px"],
  main [style*="min-width:200px"],
  main [style*="min-width: 200px"],
  main [style*="min-width:220px"],
  main [style*="min-width: 220px"] {
    min-width: 0 !important;
    flex-basis: calc(50% - .75rem) !important;
  }
}
@media (max-width: 600px) {
  main [style*="min-width:180px"],
  main [style*="min-width: 180px"],
  main [style*="min-width:200px"],
  main [style*="min-width: 200px"],
  main [style*="min-width:220px"],
  main [style*="min-width: 220px"],
  main [style*="min-width:260px"],
  main [style*="min-width: 260px"] {
    flex-basis: 100% !important;
  }
}

/* Parent flex rows that host these pills — gentle gap + wrap */
@media (max-width: 900px) {
  main [style*="display:flex"][style*="gap:"]:has([style*="min-width:180px"]),
  main [style*="display: flex"][style*="gap:"]:has([style*="min-width: 180px"]) {
    flex-wrap: wrap !important;
    gap: var(--space-4, 1rem) !important;
  }
}

/* ── 27.3  Hardcoded inline font-size ≥ 1.75rem → clamp ──
   Replaces rigid large typography with fluid scale at ≤600px. */
@media (max-width: 600px) {
  main [style*="font-size:2rem"],
  main [style*="font-size: 2rem"] {
    font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important;
  }
  main [style*="font-size:2.1rem"],
  main [style*="font-size: 2.1rem"],
  main [style*="font-size:2.2rem"],
  main [style*="font-size: 2.2rem"] {
    font-size: clamp(1.4rem, 5.8vw, 1.9rem) !important;
  }
  main [style*="font-size:2.4rem"],
  main [style*="font-size: 2.4rem"],
  main [style*="font-size:2.5rem"],
  main [style*="font-size: 2.5rem"] {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  main [style*="font-size:3rem"],
  main [style*="font-size: 3rem"],
  main [style*="font-size:3.5rem"],
  main [style*="font-size: 3.5rem"] {
    font-size: clamp(1.7rem, 7vw, 2.25rem) !important;
  }
  main [style*="font-size:1.8rem"],
  main [style*="font-size: 1.8rem"] {
    font-size: clamp(1.2rem, 5vw, 1.55rem) !important;
  }
}

/* ── 27.4  Inline rigid padding (px) → responsive pad ───
   Targets the common ~36/40/48/60/80px inline paddings used
   on in-page cards. Keeps ≤32px paddings untouched. */
@media (max-width: 600px) {
  main [style*="padding:36px"],
  main [style*="padding: 36px"],
  main [style*="padding:40px"],
  main [style*="padding: 40px"] {
    padding: var(--space-6, 1.5rem) !important;
  }
  main [style*="padding:48px"],
  main [style*="padding: 48px"],
  main [style*="padding:56px"],
  main [style*="padding: 56px"],
  main [style*="padding:60px"],
  main [style*="padding: 60px"] {
    padding: var(--space-6, 1.5rem) !important;
  }
  main [style*="padding:80px"],
  main [style*="padding: 80px"],
  main [style*="padding:100px"],
  main [style*="padding: 100px"],
  main [style*="padding:120px"],
  main [style*="padding: 120px"] {
    padding: clamp(1.75rem, 7vw, 2.75rem) var(--space-5, 1.25rem) !important;
  }
}

/* ── 27.5  Fixed decorative ornaments & ambient orbs ────
   Large circular gradients used as background decoration
   should scale at phone widths — keeps the vibe without
   painting 500px of canvas on a 375px phone. */
@media (max-width: 900px) {
  [style*="width:500px"][style*="height:500px"],
  [style*="width: 500px"][style*="height: 500px"],
  [style*="width:480px"][style*="height:480px"],
  [style*="width: 480px"][style*="height: 480px"],
  [style*="width:400px"][style*="height:400px"],
  [style*="width: 400px"][style*="height: 400px"],
  [style*="width:300px"][style*="height:300px"],
  [style*="width: 300px"][style*="height: 300px"] {
    width: 55vw !important;
    height: 55vw !important;
    max-width: 380px;
    max-height: 380px;
  }
  .cov-map-ambient__orb { width: 62vw; height: 62vw; }
}
@media (max-width: 600px) {
  [style*="width:500px"][style*="height:500px"],
  [style*="width: 500px"][style*="height: 500px"],
  [style*="width:480px"][style*="height:480px"],
  [style*="width: 480px"][style*="height: 480px"],
  [style*="width:400px"][style*="height:400px"],
  [style*="width: 400px"][style*="height: 400px"] {
    width: 72vw !important;
    height: 72vw !important;
  }
}

/* ── 27.6  Avatar circles — scale to comfortable thumb size */
@media (max-width: 480px) {
  [style*="width:100px"][style*="height:100px"][style*="border-radius:50%"],
  [style*="width: 100px"][style*="height: 100px"][style*="border-radius:50%"] {
    width: 82px !important;
    height: 82px !important;
  }
}

/* ── 27.7  Hero min-height on short viewports ───────────
   `min-height: 80vh / 100vh` causes iOS Safari to overshoot
   when the URL bar collapses. Use `svh` (small-viewport) with
   `vh` fallback, and drop to auto on short phones. */
.hero.hero--2026 {
  min-height: auto;
}
.hero {
  min-height: 70svh;
  min-height: 70vh;
}
@media (max-width: 900px) {
  .hero,
  .hero.hero--2026 {
    min-height: auto;
  }
}

/* ── 27.8  Horizontal carousels — snap scrolling on phones */
@media (max-width: 900px) {
  .carousel-track {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-4, 1rem);
  }
  .carousel-track > .carousel-card {
    scroll-snap-align: start;
  }
}

/* ── 27.9  Trust-bar / logo strip wrap on mobile ────────
   Long marquees with many logos need to wrap on phones. */
@media (max-width: 768px) {
  .trust-bar__track,
  .trust-bar__logos {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: clamp(.75rem, 3vw, 1.5rem) !important;
  }
  .trust-bar img,
  .trust-bar svg {
    max-height: 32px;
    width: auto;
  }
}

/* ── 27.10  Coverage-map HUD — additional phone polish ──
   The cov-map-hud panels live inside a ≤600px scaled-down
   variant — ensure they never overlap the map markers. */
@media (max-width: 600px) {
  .cov-map-hud--tl {
    left: 10px !important;
    right: 10px !important;
    top: 10px !important;
  }
  .cov-hud-hero {
    padding: .65rem .8rem;
    min-width: 0 !important;
  }
  .cov-hud-hero__row {
    gap: .5rem;
  }
  .cov-hud-hero__number {
    font-size: clamp(1.8rem, 7vw, 2.2rem) !important;
  }
  .cov-hud-hero__trend {
    font-size: .65rem;
    padding: .2rem .45rem;
  }
  .cov-map-hud--bl {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
  }
  .cov-hud-chips {
    justify-content: center !important;
    gap: .4rem !important;
  }
  #client-coverage-map {
    height: clamp(360px, 65vh, 520px) !important;
  }
  .cov-map-canvas {
    padding: 10px !important;
    border-radius: 18px !important;
  }
}

/* ── 27.11  Dashboard preview mock — clamp on phones ───
   The home-page dashboard mock uses a large stage that
   should scale not overflow on small screens. */
@media (max-width: 768px) {
  .dashboard-mock,
  .ai-notification-card,
  .notification-pill--warning,
  .notification-pill--coral {
    max-width: 100%;
  }
  .dashboard-mock * {
    font-size: inherit;
  }
}

/* ── 27.12  Stats rows with count-up numbers ────────────
   .stat__number uses data-count animations. Must shrink on
   phones so 6-digit numbers don't wrap mid-count. */
@media (max-width: 600px) {
  .stat {
    padding: var(--space-3, .75rem) var(--space-2, .5rem) !important;
  }
  .stat__number {
    font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
    letter-spacing: -.02em;
  }
  .stat__label {
    font-size: .78rem !important;
    line-height: 1.35;
  }
}

/* ── 27.13  Section headers — safe breathing room on phones */
@media (max-width: 600px) {
  .section-header,
  .cov-map-header {
    padding-left: var(--space-2, .5rem);
    padding-right: var(--space-2, .5rem);
  }
  .cov-map-header__title {
    font-size: clamp(1.5rem, 6.5vw, 2.1rem) !important;
    line-height: 1.15 !important;
  }
  .cov-map-header__lead {
    font-size: .95rem !important;
    line-height: 1.6 !important;
  }
}

/* ── 27.14  Award badges grid — prevent cramped wrap ────*/
@media (max-width: 600px) {
  .awards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-3, .75rem) !important;
  }
  .award-badge {
    padding: var(--space-4, 1rem) !important;
  }
  .award-badge__title {
    font-size: .78rem !important;
  }
}
@media (max-width: 380px) {
  .awards-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ── 27.15  Overflow safety for any absolute-positioned node
   with large negative offsets (decorative badges). */
@media (max-width: 600px) {
  [style*="position:absolute"][style*="top:-12px"],
  [style*="position: absolute"][style*="top: -12px"],
  [style*="position:absolute"][style*="left:-12px"],
  [style*="position: absolute"][style*="left: -12px"] {
    top: -6px !important;
    left: -6px !important;
  }
}

/* ── 27.16  Fluid spacing utilities lock ────────────────
   Convert --space-12+ spacers into smaller clamps on phones
   so they don't push content 100+px down. */
@media (max-width: 600px) {
  :root {
    --space-12: 2rem;
    --space-16: 2.75rem;
    --space-20: 3.25rem;
    --space-24: 4rem;
  }
}

/* ── 27.17  Carousel buttons — keep on-screen on mobile ─*/
@media (max-width: 600px) {
  .carousel-btn {
    width: 38px;
    height: 38px;
  }
  .carousel-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* ── 27.18  Mobile footer — prevent wide-link overflow ──*/
@media (max-width: 600px) {
  .footer-v2__nav,
  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5, 1.25rem);
  }
  .footer-v2__column,
  .footer-v2__column h4 {
    font-size: .95rem;
  }
}

/* ── 27.19  Anti-zoom: text inputs ≥16px already set, but
   also make sure <select> chevrons don't clip on iOS. */
select {
  padding-right: 2rem !important;
  background-position: right .75rem center !important;
}

/* ── 27.20  Universal ultra-narrow guard (≤360px) ──────
   Very small phones (Galaxy Fold outer, older Android Go). */
@media (max-width: 360px) {
  body { font-size: .92rem; }
  .btn { padding: 10px 16px; font-size: .82rem; }
  .hero__title,
  .section__title { font-size: clamp(1.3rem, 7vw, 1.6rem) !important; }
  .container { padding-left: .75rem; padding-right: .75rem; }
  .cov-hud-chip__label { display: none !important; }
  .cov-map-canvas { padding: 8px !important; }
}