/* ============================================================
   AvioIQ — Mobile hardening (loaded LAST, overrides where needed)
   One global pass: overflow, readable type, tap targets, spacing.
   Desktop (>=981px) is untouched.
   ============================================================ */

/* 1) Kill horizontal scroll everywhere ---------------------- */
html, body { max-width: 100%; overflow-x: clip; }
*, *::before, *::after { min-width: 0; }
img, svg, video, canvas, iframe, table { max-width: 100%; }

@media (max-width: 980px) {
  /* Nothing should be wider than the screen */
  .container, .container-wide { width: 100%; overflow-x: clip; }

  /* Big scaled hero mockups: contain, never bleed */
  .hvx-stage, .hero-visual, .macw, .dvf, .bsh { max-width: 100%; }
}

/* 2) Phone layout (<=640px) --------------------------------- */
@media (max-width: 640px) {

  /* --- Rhythm: tighten section + gutter spacing --- */
  section { padding: 48px 0 !important; }
  .container, .container-wide { padding-left: 18px !important; padding-right: 18px !important; }

  /* --- Readable type: enforce sane minimums --- */
  body { font-size: 16px; }
  .h-display { font-size: clamp(31px, 8.6vw, 40px) !important; line-height: 1.06 !important; }
  .h-section { font-size: clamp(25px, 6.6vw, 33px) !important; line-height: 1.12 !important; }
  .h-card { font-size: 18px !important; }
  .lede { font-size: 16.5px !important; line-height: 1.55 !important; }

  /* Long mono figures ($2,140M etc.) must never force width */
  .mono, .bsh-kpi .v, .proof-num, .kpi .v { overflow-wrap: anywhere; word-break: break-word; }

  /* --- Header CTA crowds the hamburger on phones; drawer already has one --- */
  .nav-right .btn-primary { display: none; }

  /* --- Tap targets: 44px min for anything clickable --- */
  .btn, .nav-toggle, .footer-social a, .footer-form button,
  .cases-personas button, .hvx-tabs button, .mnav-close {
    min-height: 44px;
  }
  .btn { padding: 13px 20px; }

  /* CTAs stack full-width so they're easy to hit */
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }

  /* --- Forms: full width, no zoom-on-focus (16px inputs) --- */
  input, textarea, select { font-size: 16px !important; }
  .form-row-2 { grid-template-columns: 1fr !important; }
  .contact-form, .footer-form { max-width: 100% !important; width: 100%; }

  /* --- Any leftover multi-column grids collapse to one --- */
  .impact-grid, .cm-kpis, .pd-caps, .pd-related, .feature-grid,
  .steps, .prod-row {
    grid-template-columns: 1fr !important;
  }

  /* --- Product-page demo screen: mirror the home hero. Keep the full desktop
     layout as a fixed-width canvas that JS scales down (see product-demo.js),
     instead of collapsing the sidebar + grids into a tall single column. --- */
  .macw-body { overflow: hidden; }
  .macw-body .bsh { grid-template-columns: 224px 1fr !important; width: 920px; max-width: none !important; transform-origin: top left; }
  .macw-body .bsh.bsh-col { grid-template-columns: 1fr !important; }
  .macw-body .bsh-side { display: flex !important; }
  .macw-body .bsh-cards { grid-template-columns: 1fr 1fr !important; }
  .macw-body .bsh-panels { grid-template-columns: 1fr 1fr !important; }
  .macw-body .bsh-panels.wide-narrow { grid-template-columns: 1.6fr 1fr !important; }
  .macw-body .bsh-kpis { grid-template-columns: repeat(5, 1fr) !important; }
  .macw-body .bsh-kpis.two { grid-template-columns: repeat(2, 1fr) !important; }
  .macw-body .bsh-kpis.three { grid-template-columns: repeat(3, 1fr) !important; }
  .macw-body .bsh-4col { grid-template-columns: repeat(4, 1fr) !important; }

  /* Center-align section heads that were split on desktop */
  .section-split { row-gap: 28px !important; }

  /* Decorative overflow that can still cause scroll on small screens */
  .hvx-glow, .hvx-arcs, .hvx-floor, .float-chip { display: none !important; }
}

/* 3) Very small phones (<=380px) ---------------------------- */
@media (max-width: 380px) {
  .container, .container-wide { padding-left: 15px !important; padding-right: 15px !important; }
  .h-display { font-size: 28px !important; }
  .nav-logo { font-size: 19px !important; }
  .nav-logo-img { height: 30px !important; }
}