/* ============================================================
   Mobile responsive layer for SaaS Edition.
   The page uses heavy React inline styles. React serializes inline
   styles to the DOM as kebab-case CSS *without* quotes, e.g.
     style={{gridTemplateColumns:'1fr 1fr'}}
     → style="grid-template-columns: 1fr 1fr;"
   So all our [style*="..."] selectors must match that DOM form.
   Loaded LAST so `!important` wins over inline `style="…"`.
   ============================================================ */

/* ----- Universal: never let anything cause horizontal scroll ----- */
html, body { overflow-x: hidden; }

/* Hard cap any image / svg from blowing out width */
img, svg { max-width: 100%; }

/* ============================================================
   ≤ 900px — TABLET / MOBILE
   ============================================================ */
@media (max-width: 900px) {

  /* --- Section padding: shrink large vertical and horizontal padding --- */
  section[style*="padding: 120px 28px"],
  section[style*="padding: 160px 28px"],
  section[style*="padding: 96px 28px"] {
    padding: 72px 20px !important;
  }

  /* Hero needs special treatment — keep enough top padding for the fixed nav */
  section[style*="padding: 110px 28px 60px"] {
    padding: 96px 20px 56px !important;
    min-height: 0 !important;
  }

  /* --- Two-column 1fr 1fr layouts collapse to a single column --- */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1.05fr 1fr"],
  div[style*="grid-template-columns: 1.1fr 1fr"],
  div[style*="grid-template-columns: 340px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* Sticky-side columns shouldn't be sticky on mobile */
  div[style*="position: sticky"] {
    position: static !important;
  }

  /* --- 4-up stat / feature grids → 2-up --- */
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* --- 3-up grids (support pillars etc.) → single column --- */
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Footer: 1.5fr 1fr 1fr 1fr → 2 columns */
  div[style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  /* --- Compare table grid: stays grid (we use horizontal scroll wrapper) --- */
  /* Don't touch grid-template-columns: 2.4fr repeat(4, 1fr) — it stays as-is
     and the .saas-compare-scroll parent provides horizontal overflow. */

  /* --- Heading sizes: cap clamp() so they don't overflow on tiny screens --- */
  h1[style*="clamp(48px"] {
    font-size: clamp(36px, 9vw, 56px) !important;
    max-width: 100% !important;
  }
  h2[style*="clamp(40px"],
  h2[style*="clamp(48px"] {
    font-size: clamp(30px, 7vw, 44px) !important;
  }
  h2[style*="clamp(30px"],
  h2[style*="clamp(36px"] {
    font-size: clamp(26px, 6vw, 36px) !important;
  }

  /* Lead paragraphs */
  p[style*="font-size: 19px"] { font-size: 16px !important; }

  /* --- Pricing: enormous $5 number --- */
  span[style*="font-size: 104px"] {
    font-size: 84px !important;
  }

  /* --- Final CTA decorative auras: shrink so they don't blow out the layout --- */
  .saas-heart-inner { width: 90vw !important; height: 90vw !important; }
  .saas-heart-outer { width: 110vw !important; height: 110vw !important; }
  .saas-ring        { width: 60vw !important; height: 60vw !important; }

  /* --- Compare table: scroll horizontally on mobile rather than crushing --- */
  .saas-compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .saas-compare-scroll > div {
    min-width: 640px;
  }

  /* --- Vibe card inner grid (code → preview): stack on mobile --- */
  div[style*="grid-template-columns: 1fr 24px 1fr"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 10px !important;
  }
  div[style*="grid-template-columns: 1fr 24px 1fr"] > div:nth-child(1),
  div[style*="grid-template-columns: 1fr 24px 1fr"] > div:nth-child(3) {
    height: 140px !important;
  }
  div[style*="grid-template-columns: 1fr 24px 1fr"] > div:nth-child(2) {
    transform: rotate(90deg);
    height: 18px !important;
  }

  /* --- FAQ answer: kill the 68px indent that lined up with the number column --- */
  p[style*="padding: 0px 24px 20px 68px"],
  p[style*="padding: 0 24px 20px 68px"] {
    padding: 0 20px 20px 20px !important;
  }

  /* --- DashCard headers / body: tighter padding on mobile --- */
  div[style*="padding: 14px 20px"] {
    padding: 12px 16px !important;
  }
  div[style*="padding: 22px 20px"] {
    padding: 18px 16px !important;
  }
}

/* ============================================================
   ≤ 640px — PHONE
   ============================================================ */
@media (max-width: 640px) {

  section[style*="padding: 120px 28px"],
  section[style*="padding: 160px 28px"],
  section[style*="padding: 96px 28px"] {
    padding: 56px 16px !important;
  }
  section[style*="padding: 110px 28px 60px"] {
    padding: 88px 16px 48px !important;
  }

  /* Hero stat row tightens font */
  div[style*="font-size: 28px"][style*="font-weight: 700"] {
    font-size: 22px !important;
  }

  /* Footer: collapse to single column on phone */
  div[style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Pricing card features 1fr 1fr → single column on phone for readability */
  div[style*="grid-template-columns: 1fr 1fr"][style*="row-gap: 10px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   NAV — desktop links hidden on mobile, hamburger appears
   ============================================================ */

@media (max-width: 820px) {
  .saas-nav-links { display: none !important; }
  .saas-nav-signin { display: none !important; }
  .saas-nav-cta {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
  }
  .saas-nav-hamburger { display: inline-flex !important; }
  /* Reduce nav side padding */
  nav[style*="padding: 14px 28px"] {
    padding: 12px 16px !important;
  }
}
@media (min-width: 821px) {
  .saas-nav-hamburger { display: none !important; }
}

/* Mobile menu drawer */
.saas-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(250, 251, 252, 0.98);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  display: none;
  flex-direction: column;
  padding: 72px 24px 32px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
}
.saas-mobile-menu.open { display: flex; }
.saas-mobile-menu a {
  font-size: 22px;
  font-weight: 600;
  color: #0B1220;
  letter-spacing: -0.015em;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(11,18,32,0.08);
  cursor: pointer;
}
.saas-mobile-menu a:last-child { border-bottom: none; }
.saas-mobile-menu .mm-cta {
  margin-top: 24px;
  padding: 14px 22px;
  border-radius: 10px;
  background: #0B1220;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  border-bottom: none;
}
.saas-mobile-menu .mm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(11,18,32,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #0B1220;
  cursor: pointer;
  padding: 0;
}

/* Hamburger button */
.saas-nav-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(11,18,32,0.14);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
}
.saas-nav-hamburger svg { display: block; }