/* ============================================================
   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; }

}

/* ─── 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; }
}