/* ============================================================
   MOBILE GUARD — loaded LAST on every page so it wins the cascade.

   THE BUG THIS FIXES
   ------------------
   Measured on a real 375px viewport: `.hero-grid` was 335px wide but its
   computed grid-template-columns was 413px. That is the classic CSS Grid
   min-content blowout — a `1fr` track carries an implicit `min-width:auto`,
   so any child with wide content (a long headline, a fixed-width media card,
   a nowrap button) forces the TRACK wider than its container.

   Because main.css sets `overflow-x:clip` on sections, the overflow did not
   produce a scrollbar — it silently CLIPPED. Content was being cut off the
   right edge with no visual warning. 26 elements on the homepage, 203 on
   packages.

   The fix is minmax(0,1fr) + min-width:0, applied defensively.
============================================================ */

@media (max-width: 900px) {

  /* ---- 1. Kill the grid blowout at the source ------------------------- */
  .hero-grid,
  .pkg-grid,
  .price-strip,
  .roi-grid,
  .grid, .grid-2, .grid-3, .grid-4,
  .testi-grid, .fit-grid, .steps, .work-grid,
  .foot-inner, .foot-top,
  .nproof-grid, .wn-grid, .ytproof-stats-row,
  .compare-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Any grid or flex child may shrink below its content width. */
  .hero-grid > *, .pkg-grid > *, .price-strip > *, .roi-grid > *,
  .grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *,
  .testi-grid > *, .fit-grid > *, .steps > *, .work-grid > *,
  .foot-inner > *, .foot-top > *,
  .nproof-grid > *, .wn-grid > *,
  .hero-cta > *, .final-btns > *, .btns-row > *, .closer-cta > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ---- 2. Long words / URLs must never push a container open ---------- */
  h1, h2, h3, h4, p, li, td, th, a, span, div {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* ---- 3. Buttons wrap instead of forcing width ----------------------- */
  .btn, .nproof-cta, .pc-go, .viz-nav-cta, .drawer-cta {
    white-space: normal !important;
    max-width: 100% !important;
    line-height: 1.3;
  }

  /* Pills / badges: nowrap + wide letter-spacing overflows narrow screens */
  .hero-meta .badge, .badge, .pill, .hero-pill, .viz-state-badge, .pkg-badge {
    white-space: normal !important;
    max-width: 100% !important;
    letter-spacing: 1.4px !important;
    line-height: 1.35 !important;
    text-align: center;
  }

  /* Sticky bottom bar: three short labels that must never break mid-word.
     Rule 3 above allows .btn to wrap; these are explicitly exempted. */
  .sticky-cta a, .ams-sticky-cta a, #mobbar a {
    white-space: nowrap !important;
    letter-spacing: .4px !important;
    font-size: 13px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (max-width: 400px) {
    .sticky-cta a, .ams-sticky-cta a, #mobbar a { letter-spacing: 0 !important; gap: 4px !important; }
  }

  /* ---- 4. Media never exceeds its box -------------------------------- */
  img, video, iframe, svg, canvas, table {
    max-width: 100% !important;
    height: auto;
  }
  iframe { width: 100% !important; }

  /* ---- 5. Sections with negative gutters (visualize nav) -------------- */
  .viz-nav {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
  }
  .wrap, .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  /* ---- 6. Wide tables scroll inside their own box -------------------- */
  .compare-wrap, .article-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .compare { min-width: 620px; }   /* scrolls inside the wrap, not the page */

  /* ---- 7. Absolutely-positioned decoration must not extend the page --- */
  .hero::before, .page-header::before, body::before { max-width: 100vw; }
}

/* ---- 8. Final backstop: the document itself may never scroll sideways -- */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---- 9. Small phones (≤380px) — tighten type and padding ------------- */
@media (max-width: 380px) {
  .wrap, .container { padding-left: 14px !important; padding-right: 14px !important; }
  h1 { font-size: clamp(28px, 8.5vw, 38px) !important; letter-spacing: -0.6px !important; }
  .pc-price { font-size: 28px !important; }
  .btn { padding: 14px 18px !important; font-size: 13px !important; letter-spacing: 1px !important; }
}

/* ─────────── EXIT-INTENT MODAL (packages only) ─────────── */
#ams-exit{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
#ams-exit .ams-exit-back{position:absolute;inset:0;background:rgba(30,42,56,.55);backdrop-filter:blur(3px)}
#ams-exit .ams-exit-card{position:relative;background:#FFFFFF;border:1px solid rgba(184,134,11,.35);border-top:4px solid #B8860B;border-radius:6px;max-width:460px;width:100%;padding:34px 30px;box-shadow:0 24px 60px rgba(30,42,56,.28);font-family:'Inter',-apple-system,sans-serif}
#ams-exit .ams-exit-x{position:absolute;top:10px;right:14px;background:none;border:0;font-size:26px;line-height:1;color:rgba(30,42,56,.45);cursor:pointer;padding:4px 8px}
#ams-exit .ams-exit-x:hover{color:#1E2A38}
#ams-exit .ams-exit-eyebrow{font-size:13px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#B8860B;margin-bottom:10px}
#ams-exit h3{font-family:'Playfair Display',Georgia,serif;font-size:24px;font-weight:700;color:#1E2A38;line-height:1.25;margin:0 0 12px}
#ams-exit p{font-size:15.5px;line-height:1.65;color:rgba(30,42,56,.72);margin:0 0 18px}
#ams-exit form{display:flex;gap:8px;flex-wrap:wrap}
#ams-exit input[type=email]{flex:1;min-width:200px;padding:14px 15px;border:1px solid rgba(184,134,11,.35);border-radius:3px;font-size:15px;font-family:inherit;color:#1E2A38;background:#FAF7F1}
#ams-exit input[type=email]:focus{outline:none;border-color:#B8860B}
#ams-exit form button{background:#B8860B;color:#fff;border:0;padding:14px 22px;border-radius:3px;font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;font-family:inherit;white-space:nowrap}
#ams-exit .ams-exit-fine{font-size:13px;color:rgba(30,42,56,.5);margin:14px 0 0}
@media(max-width:520px){#ams-exit .ams-exit-card{padding:28px 22px}#ams-exit h3{font-size:21px}#ams-exit form button{width:100%}}