/* ===========================================
   I'm OnCall — Responsive Styles
   =========================================== */

/* --- Tablet (768px - 1279px) --- */
@media (max-width: 1279px) {
  h1 { font-size: 56px; }
  h2 { font-size: 40px; }

  .container { padding: 0 32px; }
  .section { padding: 80px 0; }

  .hero { padding: 140px 0 80px; }

  .grid-2 { gap: 32px; }

  .pricing-card.featured {
    transform: scale(1.02);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
  }

  .feature-row { gap: 48px; }
}

/* --- Mobile (max-width: 767px) --- */
@media (max-width: 767px) {
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  h3 { font-size: 26px; }

  body { font-size: 16px; }

  .container { padding: 0 20px; }
  .section { padding: 60px 0; }
  .section-sm { padding: 40px 0; }

  /* Navbar */
  .navbar-links { display: none; }
  .navbar-cta.desktop-only { display: none; }
  .mobile-toggle { display: flex; }

  /* Hero */
  .hero {
    padding: 120px 0 60px;
  }

  .hero .grid-2 {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
  }

  .hero-ctas {
    justify-content: center;
  }

  .hero-trust {
    justify-content: center;
  }

  .hero-visual {
    order: 2;
  }

  .phone-mockup {
    width: 240px;
    height: 340px;
  }

  .sound-wave { display: none; }

  /* Stats */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .stat-item h3 { font-size: 44px; }

  /* Steps */
  .steps-flow {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .steps-flow::before { display: none; }

  /* Industries */
  .industry-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .industry-card { padding: 24px 16px; }
  .industry-icon { width: 48px; height: 48px; font-size: 22px; }

  /* Features */
  .feature-row {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 60px;
  }

  .feature-row.reverse {
    direction: ltr;
  }

  .feature-visual { min-height: 200px; padding: 24px; }

  /* Pricing */
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 400px;
    margin: 0 auto;
  }

  .pricing-card.featured {
    transform: none;
    order: -1;
  }

  .pricing-price { font-size: 44px; }

  /* Testimonials */
  .testimonial-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-brand-col {
    grid-column: span 2;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Legal pages */
  .legal-page { padding: 120px 0 60px; }
  .legal-page h1 { font-size: 36px; }
  .legal-content h2 { font-size: 24px; }

  /* Page hero */
  .page-hero { padding: 120px 0 40px; }
  .page-hero h1 { font-size: 40px; }

  /* ROI Calculator */
  .roi-calculator { padding: 24px; }
  .roi-result-value { font-size: 36px; }

  /* Audio demo */
  .audio-player-wrap { padding: 24px; }

  /* Comparison table - horizontal scroll */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-table { min-width: 600px; }

  /* Buttons */
  .btn { padding: 14px 24px; font-size: 16px; }
  .btn-large { padding: 16px 32px; font-size: 17px; }

  /* Sticky mobile CTA */
  .mobile-sticky-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--pure-white);
    padding: 12px 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 998;
    text-align: center;
  }

  .mobile-sticky-cta .btn {
    width: 100%;
  }
}

/* --- Small Mobile (375px) --- */
@media (max-width: 400px) {
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }

  .container { padding: 0 16px; }

  .industry-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand-col {
    grid-column: span 1;
  }
}

/* --- Desktop-only utility --- */
.desktop-only {
  display: initial;
}

.mobile-only {
  display: none;
}

@media (max-width: 767px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }

  /* Hide mobile sticky CTA on desktop */
  .mobile-sticky-cta { display: block; }
}

@media (min-width: 768px) {
  .mobile-sticky-cta { display: none !important; }
}