/* ==========================================================================
   ZAPPP — Responsive
   ========================================================================== */

@media (max-width: 1080px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .pricing-grid{ grid-template-columns: 1fr; max-width:440px; }
  .integration-grid{ grid-template-columns: repeat(4,1fr); }
  .testi-track{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  /* The full "Start for FREE" + "Login" buttons crowd the header next to the
     logo and hamburger on phones/tablets — those same links already live in
     the mobile nav-drawer, so just show the hamburger up top. */
  .nav-cta .btn{ display:none; }
  .nav-cta{ gap:0; }
  .feature-row, .feature-row.reverse{ grid-template-columns: 1fr; direction:ltr; }
  .feature-visual{ order:-1; }
}

@media (max-width: 720px){
  .grid-4, .grid-3, .grid-2, .contact-split{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .integration-grid{ grid-template-columns: repeat(3,1fr); }
  .testi-track{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; gap:2.5rem 1.5rem; }
  .compare-table{ font-size:.8rem; }
  .compare-table-wrapper{ -webkit-overflow-scrolling:touch; }
  .compare-table{ min-width:640px; }
  .dash-demo{ padding:1rem; }
  .btn{ font-size:.9rem; padding:.8rem 1.3rem; }
}

@media (max-width: 520px){
  .footer-top{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; gap:1rem; text-align:center; }
  h1{ letter-spacing:-0.01em; }
  
  /* ===== FIX: Integration grid – 3 columns with tighter spacing for mobile ===== */
  .integration-grid{
    grid-template-columns: repeat(3,1fr);  /* changed from 2 to 3 */
    gap: 0.6rem;                          /* reduced from 0.75rem */
  }
  .integration-tile{
    padding: 0.5rem 0.2rem;               /* compact padding for 3-up */
    min-width: 0;                         /* prevent overflow */
    width: 100%;
  }
  
  .hero-float-badge{ display:none; }
}

/* mobile nav drawer */
.nav-drawer{
  position:fixed; inset:0 0 0 auto; width:min(320px,86vw); z-index:150;
  background:#fff; box-shadow:-20px 0 60px rgba(11,20,16,.25);
  padding: 6rem 2rem 2rem; transform: translateX(100%);
  transition: transform .5s cubic-bezier(.16,.8,.24,1);
  display:flex; flex-direction:column; gap:1.5rem;
}
.nav-drawer.is-open{ transform: translateX(0); }
.nav-drawer a{ font-size:1.1rem; font-weight:600; }
.nav-scrim{ position:fixed; inset:0; background:rgba(11,20,16,.4); z-index:140; opacity:0; pointer-events:none; transition: opacity .4s; }
.nav-scrim.is-open{ opacity:1; pointer-events:auto; }

/* ================================================================
   Strict Mobile Header Fix (Force Hide Buttons)
   ================================================================ */
@media (max-width: 920px) {
  .nav-cta .btn {
    display: none !important;
  }
  .nav-cta {
    display: flex !important;
    gap: 0 !important;
    width: auto !important;
  }
  .nav-toggle {
    display: flex !important;
    margin-left: auto;
  }
  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}