/* ============================================================
   Global responsive overrides — loaded LAST.
   Neutralises fixed-width inline styles + tightens every
   custom section on tablet / mobile. !important beats inline px.
   ============================================================ */

/* never allow horizontal scroll anywhere */
html, body { max-width: 100vw !important; overflow-x: hidden !important; }
img, svg, video, iframe { max-width: 100%; }
*, *::before, *::after { min-width: 0; }

/* ---------- Tablet + mobile (≤1280px) ---------- */
@media (max-width: 1280px) {
  /* hard-contain anything that tries to push past the screen edge */
  .deco-blob { display: none !important; }
  .eco-stars, .hjB2__glow { overflow: hidden !important; }
  .section, [class*="section--"], .container { overflow-x: clip; }
  /* ecosystem dark card fills the column width */
  .eco-detail, .eco-grid, .eco-head, .eco-dots { width: 100% !important; max-width: 100% !important; }
  /* --- uniformity (tablet/mobile only — desktop untouched) --- */
  .container { width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; }
  .section, [class*="section--"] { padding-left: 0 !important; padding-right: 0 !important; }
  .section-head { max-width: 760px !important; margin: 0 auto var(--space-9) !important; padding: 0 !important; height: auto !important; text-align: center !important; }
  .section-head > .eyebrow,
  .section-head > .section-title,
  .section-head > .section-sub { margin-left: auto !important; margin-right: auto !important; }
  .section-head > .section-sub { max-width: 620px !important; }
  .love-row__copy { padding: var(--space-6) var(--space-5) !important; }
  /* Remove text max-width cap so content fills the card evenly */
  .love-row__desc { max-width: 100% !important; }
  /* Match love-wide copy padding to love-row at tablet */
  .love-wide__copy { padding: var(--space-6) var(--space-5) !important; }

  .hj__sub { margin-left: auto !important; margin-right: auto !important; width: auto !important; max-width: 640px !important; }
  [data-screen-label="02 Clients"] .section-head { margin-left: auto !important; margin-right: auto !important; }
  .love-wide__visual { width: auto !important; }
  /* Solution rows → single column, visuals centred + uncropped, no 700px gap */
  .love-rows { grid-template-columns: 1fr !important; }
  .love-rows .love-row { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .love-row, .love-row--reverse { flex-direction: column !important; }
  .love-row__visual {
    width: auto !important; max-width: 100% !important; height: auto !important;
    margin: var(--space-6) auto 0 !important;
    align-self: center !important;
    overflow: visible !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
  }
  .love-row__visual img { max-width: 100% !important; height: auto !important; }
  .love-row__visual--cutout img { width: 100% !important; margin: 0 !important; }
  /* QR-checkin (card 3): let card3-checkin.css scale the WHOLE desktop
     composition (girl left + phone right, overlapping) down to fit.
     Do NOT reposition any piece here. */
  .love-rows > .love-row:nth-child(3) { padding-bottom: 0 !important; }
  .love-rows > .love-row:nth-child(3) .love-row__visual { margin: var(--space-3) auto -2px !important; overflow: visible !important; }
  /* phones / animated stages sit centred in normal flow */
  .c2p-stage, .c4cap, .c4t { margin-left: auto !important; margin-right: auto !important; }
  /* Card 1 (booking dashboard) — bigger image, minimal top/bottom space */
  .love-rows > .love-row:first-child { padding-bottom: var(--space-4) !important; }
  .love-rows > .love-row:first-child .love-row__copy { padding-bottom: 0 !important; }
  .love-rows > .love-row:first-child .love-row__visual { margin: 0 auto !important; height: auto !important; }
  .love-rows > .love-row:first-child .love-row__visual--cutout img { width: 100% !important; max-width: 100% !important; margin: 0 !important; }

  /* Card 2 (notifications phone) — tighter text/visual gap (chips keep their
     normal outward positioning so they straddle the phone like on desktop) */
  .love-rows > .love-row:nth-child(2) { height: auto !important; justify-content: flex-start !important; padding-bottom: var(--space-4) !important; }
  .love-rows > .love-row:nth-child(2) .love-row__copy { padding-bottom: 0 !important; }
  .love-rows > .love-row:nth-child(2) .love-row__visual { margin-top: calc(var(--space-6) * -1) !important; }
  .c2p-chan { display: flex !important; }
  /* push Email & Push chips further right, outside the phone */
  .c2p-ch-email, .c2p-ch-push { right: -64px !important; left: auto !important; }
  /* push WhatsApp & SMS chips further left, outside the phone */
  .c2p-ch-wa, .c2p-ch-sms { left: -64px !important; right: auto !important; }

  /* Card 3 (QR check-in phone) — reduce gap between text and phone */
  .love-rows > .love-row:nth-child(3) { height: auto !important; justify-content: flex-start !important; }
  .love-rows > .love-row:nth-child(3) .love-row__copy { padding-bottom: 0 !important; }

  /* stack ALL multi-column section grids at tablet width too (≤1280),
     so nothing stays 2-column in a narrow viewport with empty side gaps */
  .eco-grid { grid-template-columns: 1fr !important; gap: var(--space-7) !important; }
  .eco-ring { max-width: 360px !important; margin: 0 auto !important; }
  .eco-detail, .eco-detail-card { width: auto !important; max-width: 100% !important; }
  .revA-wrap, .revA-grid { grid-template-columns: 1fr !important; }
  .revA-stage { flex-direction: column !important; }
  .revA-img { width: auto !important; max-width: 100% !important; }
  .impl__grid, .implementation__grid, .whyq, .changes-grid, .support__layout,
  .faq__grid, .testi-grid { grid-template-columns: 1fr !important; gap: var(--space-7) !important; }
  .whyq__founder { max-width: 380px !important; margin: 0 auto !important; }
  .mf__grid { grid-template-columns: 1fr 1fr !important; }
  .footer__grid { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- Phones (≤760px) ---------- */
@media (max-width: 760px) {
  .container { padding-left: 18px !important; padding-right: 18px !important; }
  .section, [class*="section--"] { padding-left: 0 !important; padding-right: 0 !important; }
  [style*="width: 564px"], [style*="width:564px"],
  [style*="width: 690px"], [style*="width:690px"],
  [style*="width: 600px"], [style*="width: 560px"] { width: auto !important; max-width: 100% !important; }

  /* ---- HERO ---- */
  .hj__h1 { font-size: 32px !important; line-height: 1.1 !important; }
  .hj__sub { font-size: 16px !important; max-width: 100% !important; margin-top: 16px !important; }
  .hj__btns { flex-wrap: wrap; }
  .hj__btns .btn { flex: 1 1 auto; justify-content: center; }
  /* hero step conveyor → 2-up wrap */
  .hj-conv { flex-wrap: wrap !important; gap: 10px !important; }
  .hj-conv__step { flex: 1 1 42% !important; }
  .hj-conv__conn { display: none !important; }

  /* ---- generic section heads ---- */
  .section-title, .eco-head__t, .whyq__title, .impl__title, .love-wide__title,
  .section-head h2 { font-size: clamp(24px, 6.4vw, 34px) !important; white-space: normal !important; }
  .section-head { margin-left: auto !important; margin-right: auto !important; }

  /* ---- AI ECOSYSTEM ring ---- */
  .eco-grid { grid-template-columns: 1fr !important; gap: var(--space-7) !important; }
  .eco-ring { max-width: 320px !important; margin: 0 auto !important; }
  #ecoStageLight, .eco-stage { padding-left: 14px !important; padding-right: 14px !important; }

  /* ---- SOLUTION love rows (extra mobile tightening) ---- */
  .love-row__copy { padding: var(--space-7) !important; }
  .love-row__desc { max-width: 100% !important; }
  .love-wide__copy { padding: var(--space-7) !important; }

  /* card 5 horizontal → stack */
  .love-wide { flex-direction: column !important; height: auto !important; }
  .love-wide__copy, .love-wide__visual { width: auto !important; height: auto !important; flex: none !important; padding: var(--space-7) !important; }
  .love-wide__visual { padding-top: 0 !important; }
  .love-wide__visual img { object-position: center !important; height: auto !important; }

  /* ---- phone mockups (card 2 & 3): keep their normal outward chip layout ---- */

  /* ---- REVENUE ---- */
  .revA-wrap, .revA-grid { grid-template-columns: 1fr !important; }
  .revA-stage { flex-direction: column !important; }
  .revA-img { width: auto !important; }
  .revA-float--1 { right: 6px !important; } .revA-float--2 { left: 6px !important; }

  /* ---- IMPLEMENTATION / WHY / CHANGES / SUPPORT / FAQ ---- */
  .impl__grid, .implementation__grid, .whyq, .changes-grid, .support__layout,
  .faq__grid, .testi-grid { grid-template-columns: 1fr !important; gap: var(--space-7) !important; }
  .whyq__founder { max-width: 360px; margin: 0 auto; }

  /* ---- MORE FEATURES ---- */
  .mf__grid { grid-template-columns: 1fr 1fr !important; }

  /* ---- FOOTER ---- */
  .footer__grid { grid-template-columns: 1fr 1fr !important; }

  /* video modal full-bleed-ish */
  .video-modal__panel { max-width: 100% !important; }
}

/* ---------- Small phones (≤460px) ---------- */
@media (max-width: 460px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  .hj__h1 { font-size: 28px !important; }
  .hj-conv__step { flex: 1 1 100% !important; }
  .mf__grid { grid-template-columns: 1fr !important; }
  .footer__grid { grid-template-columns: 1fr !important; }
  /* shrink the whole phone composition so phone + chips fit a small screen */
  .c2p-stage, .c3p-stage { zoom: 0.82; }
}

/* ---------- Desktop only (≥1281px) ---------- */
@media (min-width: 1281px) {
  /* keep the original card padding on desktop (mobile uses the reduced base value) */
  .love-row { padding-left: var(--space-9) !important; padding-right: var(--space-9) !important; }
  /* Card 4 (AI calling) — nudge the visual down a little */
  .love-rows > .love-row:nth-child(4) .love-row__visual { margin-top: 20px !important; }
}