/* ============================================================
   SALESPANEL — Shared Mobile / Responsive Overrides
   Applies to ALL pages. Desktop (> 1024px) is UNTOUCHED.
   Only max-width media queries are used.
   ============================================================ */

/* ─── 1. Global base ─── */
@media (max-width: 1024px) {
  body { overflow-x: hidden; }
  img  { max-width: 100%; display: block; }

  /* Fix: backdrop-filter on position:fixed causes scroll jitter on mobile.
     Remove blur and use opaque background + GPU layer instead. */
  .navbar,
  #sp-navbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter:         none !important;
    background:              rgba(255,255,255,0.98) !important;
    will-change:             transform;
  }
}

/* ─── 2. Typography scaling ─── */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.8rem, 7.5vw, 2.4rem)  !important; line-height: 1.18 !important; }
  h2 { font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important; line-height: 1.22 !important; }
  h3 { font-size: clamp(1.05rem, 4.5vw, 1.35rem) !important; }
}

/* ─── 3. v1-row layout system ─── */

/* Tablet (769–1024px): only reset the heavy inline paddings */
@media (max-width: 1024px) {
  .v1-row-text[style],
  .v1-row-text.container[style] {
    max-width: 100% !important;
    padding-left:  2rem !important;
    padding-right: 2rem !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
  }
  .v1-row-img[style] {
    min-height: auto !important;
    padding: 2rem 1.5rem !important;
  }
}

/* Mobile (≤ 768px): full single-column stacking */
@media (max-width: 768px) {

  /* Hero */
  .v1-hero { grid-template-columns: 1fr !important; }
  .v1-hero-left {
    padding: 5.5rem 1.25rem 2rem !important;
    text-align: center !important;
  }
  /* Override inline padding-right / padding-left on hero-left containers */
  .v1-hero-left[style],
  .v1-hero-left.container[style] {
    padding-left:  1.25rem !important;
    padding-right: 1.25rem !important;
    margin-left:   0 !important;
    margin-right:  0 !important;
    max-width:     100% !important;
  }
  .v1-hero-left h1  { font-size: clamp(1.75rem, 7vw, 2.4rem) !important; }
  .v1-hero-left > p { font-size: 0.95rem !important; }
  .v1-hero-right    { min-height: auto !important; padding: 1.5rem 1rem !important; }

  /* Hero email form — covers .email-form, .hero-form, plain form */
  .email-form,
  .hero-form,
  .v1-hero-left form,
  .v1-hero-left .signup-form {
    flex-direction: column !important;
    align-items:    stretch   !important;
    max-width:      100% !important;
    gap: 0.75rem !important;
  }
  .email-form input[type="email"],
  .hero-form input,
  .v1-hero-left form input {
    width: 100% !important;
    border-radius: 7px !important;
    border-right: 1.5px solid rgba(0,0,0,0.14) !important;
  }
  .email-form button,
  .hero-form .btn,
  .v1-hero-left form button,
  .v1-hero-left form .btn {
    width: 100% !important;
    border-radius: 7px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Primary CTA button in hero */
  .v1-hero-left .btn,
  .v1-hero-left a[class*="btn"] {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Feature rows */
  .v1-row               { grid-template-columns: 1fr !important; min-height: auto !important; }
  .v1-row.rev           { direction: ltr !important; }
  .v1-row-text,
  .v1-row.rev .v1-row-text {
    padding:      2rem 1.25rem 1.5rem !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
    max-width:    100% !important;
  }
  .v1-row-img,
  .v1-row.rev .v1-row-img {
    border-left:  none !important;
    border-top:   1px solid rgba(0,0,0,0.07) !important;
    min-height:   auto !important;
    padding:      1.5rem 1.25rem !important;
    display:      flex !important;
    justify-content: center !important;
    align-items:  flex-start !important;
  }

  /* Images inside rows */
  .v1-row-img img,
  .v1-hero-right img {
    width:     90% !important;
    max-width: 400px !important;
    margin:    0 auto !important;
  }

  /* Stacked row (wide illustration below text) */
  .v1-row-stack .v1-row-text { text-align: center !important; }
  .v1-row-stack .v1-row-img  { min-height: auto !important; padding: 1.5rem 1rem !important; }
  .v1-row-stack .v1-row-img img {
    max-width: 100% !important;
    width: 80% !important;
  }

  /* CTA band */
  .v1-cta { padding: 4rem 0 !important; }
  .v1-cta-inner {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 2rem !important;
  }
  .v1-cta-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }
}

/* ─── 4. vis-card system (buyer-intent-data-v2, server-side-tracking, ip-lookup) ─── */
@media (max-width: 768px) {
  .vis-card,
  .vis-card.wide { max-width: 100% !important; }

  /* 2-column internal grid inside wide vis-card → single column */
  .vis-card .vis-body > div[style*="grid-template-columns"] {
    display:        flex !important;
    flex-direction: column !important;
    gap:            1rem !important;
  }

  /* Audience replication source→lookalike row */
  .vis-clone-row {
    flex-direction: column !important;
    align-items:    stretch !important;
    gap: 0.75rem !important;
  }
  .vis-clone-src,
  .vis-clone-dst { width: 100% !important; }

  /* Partner grid: 2 cols on mobile, 4 on desktop */
  .vis-partner-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ─── 5. Homepage / index grids ─── */
@media (max-width: 768px) {
  .testimonials-grid  { grid-template-columns: 1fr !important; }
  .stories-grid       { grid-template-columns: 1fr !important; }
  .usecases-grid      { grid-template-columns: 1fr 1fr !important; }
  .platform-features  { grid-template-columns: 1fr !important; }
  .features-grid      { grid-template-columns: 1fr !important; }
  .feature-cards      { grid-template-columns: 1fr !important; }

  /* Hero stats strip */
  .hero-stats,
  .hero__stats {
    flex-direction: column !important;
    gap: 1.5rem !important;
    align-items: center !important;
  }
  .hero-stats .stat,
  .hero__stats .stat { text-align: center !important; }
}

@media (max-width: 480px) {
  .usecases-grid { grid-template-columns: 1fr !important; }
}

/* ─── 6. Comparison / feature tables ─── */
@media (max-width: 768px) {
  /* Generic */
  .compare-grid { grid-template-columns: 1fr !important; }

  /* ip-lookup / lead-forensics 4-column → 2-column, hide extra cols */
  .comp-head,
  .comp-row { grid-template-columns: 1.6fr 1fr !important; overflow-x: hidden !important; }
  .comp-head > *:nth-child(n+3),
  .comp-row  > *:nth-child(n+3) { display: none !important; }

  /* leadfeeder / forensics scrollable table */
  .cmp-table            { overflow-x: auto !important; display: block !important; -webkit-overflow-scrolling: touch; }
  .cmp-table table      { min-width: 460px !important; }

  /* hcmp row */
  .hcmp-row             { grid-template-columns: 1fr 1fr !important; }

  /* feat-block */
  .feat-block           { grid-template-columns: 1fr !important; }
}

/* ─── 7. Pain / problem / benefits grids ─── */
@media (max-width: 768px) {
  .pain-grid            { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
  .problem-cards,
  .problem__grid        { grid-template-columns: 1fr !important; }
  .benefits__grid       { grid-template-columns: 1fr !important; }
  .approach-grid        { grid-template-columns: 1fr !important; }
  .infograph__grid      { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 480px) {
  .pain-grid            { grid-template-columns: 1fr !important; }
  .infograph__grid      { grid-template-columns: 1fr !important; }
}

/* ─── 8. Steps / process / journey ─── */
@media (max-width: 768px) {
  .steps-grid           { grid-template-columns: 1fr 1fr !important; }
  .steps-grid::before   { display: none !important; }   /* connecting line */
  .journey-list         { flex-direction: column !important; gap: 0 !important; }
  .journey-list li + li::before { display: none !important; }
}

@media (max-width: 480px) {
  .steps-grid           { grid-template-columns: 1fr !important; }
}

/* ─── 9. Pricing / savings / use-cases ─── */
@media (max-width: 768px) {
  .price-timeline       { flex-direction: column !important; gap: 0.75rem !important; }
  .price-timeline::after,
  .price-timeline::before { display: none !important; }
  .savings-block        { flex-direction: column !important; text-align: center !important; }
  .usecases__grid       { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
  .why__stat-grid       { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
}

@media (max-width: 480px) {
  .usecases__grid       { grid-template-columns: 1fr !important; }
}

/* ─── 10. Feature / plan / FAQ grids (account-reveal, data-platform, etc.) ─── */
@media (max-width: 768px) {
  .ar-features-grid,
  .dt-features-grid,
  .features__grid       { grid-template-columns: 1fr 1fr !important; }
  .plan-grid            { grid-template-columns: 1fr !important; }
  .featured-testimonial { grid-template-columns: 1fr !important; }
  .faq-grid             { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .ar-features-grid,
  .dt-features-grid,
  .features__grid       { grid-template-columns: 1fr !important; }
}

/* ─── 11. Mobile nav — consistent appearance across all pages ─── */
@media (max-width: 1100px) {
  /* Ensure the mobile-open menu fills the full screen.
     .navbar-links has height:100% (= 68px from navbar parent) which
     overrides the top/bottom stretch on the fixed overlay — clear it. */
  .navbar-links.mobile-open {
    width:    100vw !important;
    height:   auto !important;          /* remove height:100% so top+bottom stretch works */
    min-height: calc(100vh - 68px) !important;
    box-sizing: border-box !important;
  }
  .navbar-links.mobile-open .dropdown-mega { min-width: 0 !important; width: 100% !important; }

  /* Each top-level li is flex-row by default (label + dropdown side-by-side).
     Switch to column so the label stacks above its dropdown, fully left-aligned. */
  .navbar-links.mobile-open > li {
    flex-direction: column !important;
    align-items:    flex-start !important;
  }

  /* Some pages define the hamburger lines and Login as white (for dark hero
     backgrounds). Force them dark so they're always visible on the white nav. */
  .hamburger span { background: #374151 !important; }
  .navbar-login   { color: #374151 !important; }

  /* Open state: keep the X lines dark too */
  .hamburger.open span { background: #374151 !important; }

  /* ── Standardise the mobile-open overlay across all pages ──
     19 pages use #fff, 21 use #0D0A1E — force consistent dark menu. */
  .navbar-links.mobile-open {
    background: #0D0A1E !important;
  }
  /* Links inside the dark overlay must be light */
  .navbar-links.mobile-open > li {
    border-bottom-color: rgba(255,255,255,0.06) !important;
  }
  .navbar-links.mobile-open > li > a,
  .navbar-links.mobile-open > li > span {
    color: rgba(255,255,255,0.85) !important;
  }
  .navbar-links.mobile-open > li > a:hover,
  .navbar-links.mobile-open > li > span:hover {
    color: #fff !important;
  }
  /* Dropdown sub-links */
  .navbar-links.mobile-open .dropdown a,
  .navbar-links.mobile-open .dropdown-mega a {
    color: rgba(255,255,255,0.75) !important;
  }
  .navbar-links.mobile-open .dropdown a:hover,
  .navbar-links.mobile-open .dropdown-mega a:hover {
    color: #fff !important;
  }
  /* Description text under each dropdown link */
  .navbar-links.mobile-open .dd-desc {
    color: rgba(255,255,255,0.4) !important;
  }
  /* Section group titles (mega-menu) */
  .navbar-links.mobile-open .mega-group-title {
    color: rgba(255,255,255,0.35) !important;
  }
}