/* ============================================================
   Mayfly — Comprehensive Responsive Fixes
   Breakpoints: 900 | 768 | 600 | 480 | 375
   ============================================================ */

/* ── Global: prevent grid/flex child overflow ───────────────── */
*, *::before, *::after { min-width: 0; }
body { overflow-x: hidden !important; }

/* ── Long text break safely ─────────────────────────────────── */
h1,h2,h3,h4,h5,h6,p,li,td,th,span {
  overflow-wrap: break-word;
}

/* ── Section padding scale down ─────────────────────────────── */
@media (max-width: 900px) {
  .sec     { padding: 72px 0 !important; }
  .sec-sm  { padding: 48px 0 !important; }
  .cta-sec { padding: 72px 0 !important; }
}
@media (max-width: 600px) {
  .sec     { padding: 52px 0 !important; }
  .sec-sm  { padding: 36px 0 !important; }
  .cta-sec { padding: 52px 0 !important; }
  .wrap    { padding: 0 16px !important; }
}
@media (max-width: 375px) {
  .sec  { padding: 40px 0 !important; }
  .wrap { padding: 0 14px !important; }
}

/* ── Top nav: tiny screens ───────────────────────────────────── */
@media (max-width: 375px) {
  .nav-top-inner { padding: 0 12px !important; gap: 12px !important; }
  .logo-mark     { font-size: 0.88rem !important; }
  .logo-sub      { display: none !important; }
}

/* ============================================================
   INDEX — HERO
   ============================================================ */
@media (max-width: 600px) {
  .hero-h1  { font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important; }
  .hero-lead{ font-size: 0.95rem !important; }
  .hero-scroll { display: none; }
}
@media (max-width: 375px) {
  .hero-h1 { font-size: 1.6rem !important; }
}

/* ── Hero stats: fix 2x2 border logic at tablet ─────────────── */
@media (max-width: 900px) {
  .hero-stat {
    border-right: none !important;
    margin-right: 0    !important;
    padding: 0 12px    !important;
  }
  /* In 2×2 grid: only odd items (col-1) get right border */
  .hero-stat:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.06) !important;
  }
  .hero-stat:first-child { padding-left: 0 !important; }
  .hero-stat:nth-child(2){ padding-right: 0 !important; }
}
@media (max-width: 600px) {
  .stat-val  { font-size: 1.5rem !important; }
  .stat-desc { font-size: 0.58rem !important; line-height: 1.4 !important; word-break: break-all; }
}

/* ── Trust marquee: hide label on mobile ─────────────────────── */
@media (max-width: 600px) {
  .trust-eyebrow { display: none !important; }
  .trust-sec     { padding-left: 0; }
}

/* ── Problem & PET grids: padding ────────────────────────────── */
@media (max-width: 600px) {
  .problem-card { padding: 20px !important; }
  .pet-card     { padding: 20px 18px 18px !important; }
}

/* ── Proof stats: 4→2→1 and padding ─────────────────────────── */
@media (max-width: 900px) {
  .proof-stat { padding: 28px 16px !important; }
  .proof-val  { font-size: 1.9rem !important; }
}
@media (max-width: 480px) {
  .proof-grid { grid-template-columns: 1fr 1fr !important; }
  .proof-stat { padding: 22px 10px !important; }
  .proof-val  { font-size: 1.55rem !important; }
  .proof-desc { font-size: 0.6rem !important; }
}
@media (max-width: 375px) {
  .proof-grid { grid-template-columns: 1fr !important; }
}

/* ── Advisor card ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .advisor-card  { padding: 20px !important; gap: 20px !important; }
  .advisor-name  { font-size: 1.4rem !important; }
  .advisor-creds { grid-template-columns: 1fr !important; }
  .cred-badge    { padding: 10px 12px !important; }
}

/* ── Pricing preview: kill featured scale ───────────────────── */
@media (max-width: 900px) {
  .price-card-feat {
    transform: none !important;
    box-shadow: 0 0 0 2px rgba(6,182,212,0.3) !important;
  }
}
@media (max-width: 600px) {
  .price-card { padding: 22px 18px !important; }
  .price-amt  { font-size: 2rem !important; }
}

/* ── Footer ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 16px !important;
    gap: 12px !important;
  }
  .footer-links { gap: 14px !important; }
}

/* ============================================================
   PRICING.HTML — PLANS
   ============================================================ */
@media (max-width: 900px) {
  /* Stack cards, featured first */
  .plans-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .plan-featured {
    order: -1;
    transform: none !important;
    box-shadow: 0 0 0 2px rgba(6,182,212,0.3), 0 12px 40px rgba(6,182,212,0.08) !important;
  }
}
@media (max-width: 600px) {
  .plan          { padding: 22px 18px !important; }
  .plan-price    { font-size: 2.4rem  !important; }
  .plans-wrap    { padding: 0 16px    !important; }
  .compare-wrap  { padding: 0 16px    !important; }
}

/* ── Comparison table: force scroll ─────────────────────────── */
.compare-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  min-width: 560px;
}
@media (max-width: 768px) {
  .compare-table thead th { padding: 12px 14px !important; }
  .compare-table td       { padding: 10px 14px !important; font-size: 0.82rem !important; }
}

/* ── ROI cards ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .roi-card { padding: 20px !important; }
  .roi-val  { font-size: 1.9rem !important; }
}

/* ── FAQ ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .faq-q    { font-size: 0.88rem !important; padding: 18px 0 !important; }
  .faq-a    { font-size: 0.85rem !important; }
  .faq-icon { flex-shrink: 0 !important; margin-left: 12px !important; }
}

/* ── Enterprise CTA ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .ent-cta   { padding: 22px 18px !important; gap: 20px !important; }
  .ent-cta h3{ font-size: 1.3rem !important; }
  .ent-btns  { min-width: auto !important; }
}

/* ============================================================
   CONTENT PAGES (sidebar nav)
   ============================================================ */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
  .page-container {
    padding: 1rem !important;
    padding-top: calc(1rem + 56px) !important;
  }
  .page-header h1 { font-size: 1.5rem !important; }
  .card-grid      { grid-template-columns: 1fr !important; }
}