/* =====================================================
   MOBILE DELETIONS - HIDE SECTIONS ON MOBILE ONLY
   Target: Screens ≤ 768px
   Note: Desktop layout remains unchanged
   ===================================================== */

/* =====================================================
   1. INDUSTRY CARDS — MOBILE LAYOUT (was hidden, now shown)
   ===================================================== */
@media (max-width: 768px) {
  /* Show grid on mobile as a single-column stack */
  .industry-proof-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 20px 0 0 0 !important;
    padding: 0 16px !important;
    max-width: 100% !important;
  }

  /* Cards: row layout — accent bar on left, text on right */
  .industry-proof-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    text-align: left !important;
    padding: 0 !important;           /* padding handled by ind-body */
    border-radius: 10px !important;
  }

  /* Keep ind-accent bar at proper width */
  .ind-accent {
    width: 4px !important;
    flex-shrink: 0 !important;
  }

  /* Body padding for mobile */
  .ind-body {
    padding: 14px 16px 14px 14px !important;
    gap: 3px !important;
  }

  /* Label — tiny all-caps tag */
  .ind-label {
    font-size: 0.75rem !important;
    margin: 0 0 2px !important;
  }

  /* Headline — main benefit */
  .ind-headline {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  /* Supporting copy — optional, kept compact */
  .ind-copy {
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
    margin: 2px 0 0 !important;
    color: rgba(15,26,43,0.55) !important;
  }

  /* Tighten section spacing on mobile */
  .ccp-businesses {
    padding: 36px 0 48px 0 !important;
  }

  /* Remove the large bottom gap between header/subtext and the cards */
  /* Also remove gray box styling from businesses header */
  .ccp-businesses__header-box {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 20px 4px 20px !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }

  .ccp-businesses__subtext {
    margin-bottom: 0 !important;
  }
  
  /* Remove box styling from "How It Works" header */
  .how-header-box {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 20px !important;
    box-shadow: none !important;
    margin-bottom: 48px !important;
  }
}

/* =====================================================
   2. HIDE "SEE EVERY CONVERSATION" DASHBOARD SECTION
   Lines 2453-2547 in index.html
   Includes: Dashboard images + feature grid
   ===================================================== */
@media (max-width: 768px) {
  .see-conversations-section {
    display: none !important;
  }
}

/* =====================================================
   3. HIDE PRICING COMPARISON TABLE (Keep Cards)
   Lines 2632-2899 in index.html
   Note: Pricing cards (.pricing-grid) remain visible
   ===================================================== */
@media (max-width: 768px) {
  .pricing-comparison-table {
    display: none !important;
  }
  
  /* Ensure pricing cards are visible */
  .pricing-grid {
    display: grid !important;
  }
}

/* =====================================================
   4. HIDE CTA SECTION AI IMAGE (Keep Stats)
   Lines 3336-3360 in index.html
   Hide only the left column with circular AI image
   ===================================================== */
@media (max-width: 768px) {
  /* Hide the entire left column with AI image */
  .cta-centered-layout > div:first-child {
    display: none !important;
  }
  
  /* Make right column (CTA content) full width */
  .cta-centered-layout {
    grid-template-columns: 1fr !important;
  }
  
  /* Center the CTA header on mobile */
  .cta-header-centered {
    text-align: center !important;
  }
  
  /* Center the phone CTA button */
  .primary-call-cta {
    text-align: center !important;
  }
}

/* =====================================================
   5. SIMPLIFY FOOTER (Remove Product/Support Links)
   Lines 3521-3537 in index.html
   Keep only logo + copyright + security badge
   ===================================================== */
@media (max-width: 768px) {
  /* Hide product and support columns */
  .footer-column:not(.footer-column-main) {
    display: none !important;
  }
  
  /* Center the main footer column */
  .footer-column-main {
    text-align: center;
    max-width: 100%;
  }
  
  /* Center footer logo */
  .footer-logo {
    justify-content: center;
    margin-bottom: 16px;
  }
  
  /* Center footer bottom content */
  .footer-bottom {
    text-align: center;
    flex-direction: column;
    gap: 16px;
  }
}

/* =====================================================
   MOBILE OPTIMIZATION NOTES
   ===================================================== */
/* 
  Benefits of these deletions:
  - Reduces vertical scroll by ~1,500px
  - Removes horizontal scroll issues (pricing table)
  - Eliminates redundant content (industry cards)
  - Removes large images that don't work on mobile
  - Keeps all conversion-critical sections
  - Desktop experience remains 100% unchanged
  
  Sections KEPT on mobile:
  ✓ Hero
  ✓ Businesses We Serve (scrolling marquees)
  ✓ Real AI Conversations (video demos)
  ✓ Problem/Revenue Loss section
  ✓ Calculator
  ✓ AI Features (4 cards)
  ✓ How It Works timeline
  ✓ Pricing Cards (mobile-friendly)
  ✓ FAQ
  ✓ Demo/CTA form
  ✓ Footer (simplified)
*/

/* =====================================================
   HERO TEXT OPTIMIZATION - BETTER SIZING ON MOBILE
   ===================================================== */
@media (max-width: 768px) {
  /* Reduce hero section bottom padding */
  .hero {
    padding: 40px 0 40px 0 !important; /* Reduced bottom from 80px to 40px */
  }
  
  /* Reduce headline size on tablets/mobile */
  .hero-main-title {
    font-size: 2.5rem !important; /* Was 3.5rem - reduced by 28% */
    line-height: 1.15 !important;
    margin-bottom: 96px !important; /* Maintain spacing */
  }
  
  /* Reduce subtitle size */
  .hero-main-subtitle {
    font-size: 1.1rem !important; /* Was 1.25rem - reduced by 12% */
    line-height: 1.7 !important;
  }
  
  /* Adjust CTA button group spacing */
  .hero-cta-group {
    margin-top: 0 !important; /* Reduce top margin */
  }
  
  /* Lower the AI RECEPTIONIST badge */
  .hero-badge {
    bottom: 15px !important; /* Was 25px - moved down 10px */
  }
}

/* =====================================================
   HERO IMAGE OPTIMIZATION - BETTER FRAMING ON MOBILE
   ===================================================== */
@media (max-width: 480px) {
  /* Reduce hero padding on small phones */
  .hero {
    padding: 30px 0 30px 0 !important; /* Further reduction for phones */
  }
  
  /* Further reduce businesses section top padding */
  .ccp-businesses {
    padding: 30px 0 48px 0 !important; /* Even tighter on small phones */
  }
  
  /* No gap between subtext and cards on phones */
  .ccp-businesses__subtext {
    margin-bottom: 0 !important;
  }
  
  /* Tighter How It Works header on phones */
  .how-header-box {
    margin-bottom: 48px !important;
    padding: 0 16px !important;
  }
  
  /* Further reduce text on small phones */
  .hero-main-title {
    font-size: 2rem !important; /* Further reduction for phones */
    line-height: 1.2 !important;
    margin-bottom: 80px !important;
  }
  
  .hero-main-subtitle {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }
  
  /* Smaller circle on very small phones */
  .hero-circle-image {
    width: 320px !important;
    height: 320px !important;
    margin: 0 auto;
  }
  
  /* Adjust image position for smaller circle */
  .hero-ai-woman {
    object-position: center !important;
    transform: none !important;
  }
  
  /* Adjust badge size */
  .hero-badge {
    font-size: 0.75rem !important;
    padding: 10px 20px !important;
    bottom: 12px !important; /* Moved down further - was 20px */
  }
}

@media (max-width: 360px) {
  /* Extra small phones - even tighter text */
  .hero-main-title {
    font-size: 1.75rem !important; /* 28px - compact but readable */
    line-height: 1.25 !important;
    margin-bottom: 64px !important;
  }
  
  .hero-main-subtitle {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.6 !important;
  }
  
  /* Extra small phones - image */
  .hero-circle-image {
    width: 280px !important;
    height: 280px !important;
  }
  
  .hero-ai-woman {
    object-position: center !important;
    transform: none !important;
  }
  
  .hero-badge {
    font-size: 0.75rem !important;
    padding: 8px 16px !important;
    bottom: 10px !important; /* Moved down further - was 15px */
  }
}

/* =====================================================
   AUDIO/VIDEO SECTION TABLET OPTIMIZATION
   "Listen to Our AI Receptionist Answer Real Calls"
   ===================================================== */
@media (max-width: 768px) {
  /* Hide horizontal scroll arrows on tablet */
  .ccp-gallery-nav-controls {
    display: none !important;
  }

  /* Reduce gap between header copy and cards */
  .ccp-listen__top {
    margin-bottom: 16px !important;
  }
  
  /* Optimize section header */
  .ccp-listen {
    padding: 36px 12px 50px !important;
  }
  
  .ccp-listen__headline {
    font-size: 2rem !important;
    margin-bottom: 12px !important;
  }
  
  .ccp-listen__subtext {
    font-size: 1rem !important;
    margin-bottom: 32px !important;
  }
  
  .ccp-listen__badge {
    font-size: 13px !important;
    padding: 8px 16px !important;
    margin-bottom: 20px !important;
  }

  .ccp-video-gallery {
    gap: 32px !important;
  }
  
  .ccp-video-info {
    padding: 24px 20px 28px 20px !important;
  }
  
  .ccp-video-title {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  
  .ccp-video-desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Optimize CTA section */
  .ccp-listen__cta {
    padding: 32px 24px !important;
    margin-top: 40px !important;
  }
  
  .ccp-listen__cta-text {
    font-size: 1.25rem !important;
    margin-bottom: 16px !important;
  }
  
  .ccp-listen__cta-btn {
    padding: 16px 32px !important;
    font-size: 1rem !important;
  }
}

/* =====================================================
   PHONE LISTEN SECTION - Tighter spacing
   ===================================================== */
@media (max-width: 480px) {
  .ccp-listen {
    padding: 48px 12px 56px !important;
  }
  
  .ccp-listen__headline {
    font-size: 1.75rem !important;
  }
}
  
  .ccp-video-info {
    padding: 20px 16px 24px 16px !important;
  }
  
  .ccp-video-title {
    font-size: 15px !important;
  }
  
  .ccp-video-desc {
    font-size: 13px !important;
  }
  
  /* Compact CTA */
  .ccp-listen__cta {
    padding: 24px 20px !important;
    margin-top: 32px !important;
  }
  
  .ccp-listen__cta-text {
    font-size: 1.125rem !important;
  }
  
  .ccp-listen__cta-btn {
    padding: 14px 28px !important;
    font-size: 0.9375rem !important;
  }
}

/* =====================================================
   PROBLEM/REVENUE SECTION MOBILE OPTIMIZATION
   "75% of customers hang up" stats section
   ===================================================== */
@media (max-width: 768px) {
  /* Reduce section padding - tighter layout */
  .problem-section-new {
    padding: 60px 0 40px 0 !important; /* Was 80px/100px - reduced */
  }
  
  /* Reduce header margin */
  .problem-new-header {
    margin-bottom: 32px !important; /* Was 48px - faster to cards */
  }
  
  /* Reduce title size */
  .problem-new-title {
    font-size: 1.875rem !important; /* 30px - was 36px, -17% */
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
  }
  
  /* Reduce subtitle size */
  .problem-new-subtitle {
    font-size: 1rem !important; /* 16px - was 18px, standard body size */
    line-height: 1.6 !important;
  }
  
  /* Flat row: 1-col on mobile */
  .problem-flat-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 20px !important;
  }
  .problem-flat-badge {
    font-size: 2.75rem !important;
    line-height: 1 !important;
  }
  .problem-flat-title {
    font-size: 1.05rem !important;
  }
  .problem-flat-text {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
  
  /* CTA button */
  .problem-new-cta-btn {
    padding: 16px 28px !important;
    font-size: 0.9375rem !important;
  }
}

@media (max-width: 480px) {
  /* Even tighter on phones */
  .problem-section-new {
    padding: 48px 0 32px 0 !important;
  }
  
  .problem-new-header {
    margin-bottom: 24px !important;
  }
  
  .problem-new-title {
    font-size: 1.625rem !important; /* 26px - compact for phones */
    margin-bottom: 12px !important;
  }
  
  .problem-new-subtitle {
    font-size: 0.9375rem !important; /* 15px */
  }
  
  /* Flat row: 1-col on small phones */
  .problem-flat-row {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .problem-flat-badge {
    font-size: 2.4rem !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .problem-flat-title {
    font-size: 0.95rem !important;
  }
  .problem-flat-text {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }
  
  .problem-new-cta-btn {
    padding: 14px 24px !important;
    font-size: 0.875rem !important; /* 14px */
  }
}

/* =====================================================
   CALCULATOR SECTION MOBILE OPTIMIZATION
   "See What Your Missed Calls Are Really Costing You"
   ===================================================== */
@media (max-width: 768px) {
  /* Reduce section padding */
  .calculator-section {
    padding: 50px 20px 60px 20px !important; /* Was 60px/0px */
  }
  
  /* Reduce headline size */
  .calculator-section h2 {
    font-size: 1.75rem !important; /* 28px - was 32px, -25% */
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }
  
  /* Reduce subheadline size */
  .calculator-section .subheadline {
    font-size: 1.125rem !important; /* 18px - was 20px */
    margin-bottom: 32px !important;
  }
  
  /* Reduce card padding */
  .calculator-section .card {
    padding: 20px !important;
    margin-bottom: 20px !important;
  }
  
  /* Reduce input label size */
  .calculator-section .inputWrap label {
    font-size: 13px !important; /* Was 14px */
  }
  
  /* Thinner slider track */
  .calculator-section input[type="range"] {
    height: 6px !important; /* Was 8px */
  }
  
  /* Reduce "converted calls" box margin */
  .calculator-section .convertedBox {
    margin-top: 12px !important;
  }
  
  /* Reduce blue box padding */
  .calculator-section .bigBox {
    padding: 16px !important; /* Was 18px */
    min-height: 130px !important;
  }
  
  /* Reduce revenue amount size */
  .calculator-section .amount {
    font-size: 2.5rem !important; /* 40px - was clamp(32-42px), -20% */
  }
  
  /* Tighten mini boxes */
  .calculator-section .mini {
    margin-top: 10px !important; /* Was 14px */
    padding: 12px !important; /* Was 14px */
  }
  
  .calculator-section .mini .val {
    font-size: 18px !important; /* Was 20px */
  }
  
  /* Reduce CTA button */
  .calculator-section .cta-button {
    padding: 18px 32px !important; /* Was 20px/40px */
    font-size: 1rem !important;
  }
  
  /* Reduce background image visibility */
  .calculator-section .bigBox {
    background-position: right -160px center !important;
  }
}

@media (max-width: 480px) {
  /* Even tighter on phones */
  .calculator-section {
    padding: 40px 16px 48px 16px !important;
  }
  
  .calculator-section h2 {
    font-size: 1.5rem !important; /* 24px - compact */
    margin-bottom: 10px !important;
  }
  
  .calculator-section .subheadline {
    font-size: 1rem !important; /* 16px */
    margin-bottom: 24px !important;
  }
  
  .calculator-section .card {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }
  
  .calculator-section .inputWrap label {
    font-size: 12px !important;
  }
  
  .calculator-section .convertedBox {
    margin-top: 8px !important;
  }
  
  .calculator-section .bigBox {
    padding: 14px !important;
    min-height: 120px !important;
    background-position: right -180px center !important;
  }
  
  /* Fade out background image on tiny phones */
  .calculator-section .bigBox::after {
    background: linear-gradient(90deg, 
      rgba(38,69,122,.98) 0%, 
      rgba(38,69,122,.95) 50%, 
      rgba(38,69,122,.85) 100%) !important; /* More opaque overlay */
  }
  
  .calculator-section .amount {
    font-size: 2rem !important; /* 32px - smaller for phones */
  }
  
  .calculator-section .mini {
    margin-top: 8px !important;
    padding: 10px !important;
  }
  
  .calculator-section .mini .val {
    font-size: 16px !important;
  }
  
  .calculator-section .cta-button {
    padding: 16px 28px !important;
    font-size: 0.9375rem !important; /* 15px */
  }
}

/* =====================================================
   GLOBAL HEADLINE STANDARDIZATION - MOBILE ONLY
   Ensure all section headlines have consistent font & weight
   ===================================================== */
@media (max-width: 768px) {
  /* Businesses Section */
  .ccp-businesses__headline {
    font-size: 1.875rem !important; /* 30px */
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: rgba(15, 26, 43, 0.95) !important;
  }
  
  /* Listen/Video Section */
  .ccp-listen__headline {
    font-size: 1.875rem !important; /* Was 2rem - now consistent */
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: rgba(15, 26, 43, 0.95) !important;
  }
  
  /* AI Features Section */
  .ai-features-title {
    font-size: 1.875rem !important; /* 30px */
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: rgba(15, 26, 43, 0.95) !important;
  }
  
  /* How It Works Section */
  .how-main-title {
    font-size: 1.875rem !important; /* 30px */
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: rgba(15, 26, 43, 0.95) !important;
  }
  
  /* Calculator Section (inline style override) */
  #calculator h2 {
    font-size: 1.875rem !important; /* 30px */
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: rgba(15, 26, 43, 0.95) !important;
  }
  
  /* CTA Section */
  .cta-headline {
    font-size: 1.875rem !important; /* 30px */
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: rgba(15, 26, 43, 0.95) !important;
  }
  
  /* Pricing Section Headlines */
  #pricing h2 {
    font-size: 1.875rem !important; /* 30px */
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: rgba(15, 26, 43, 0.95) !important;
  }
}

@media (max-width: 480px) {
  /* Even smaller on phones - all headlines */
  .ccp-businesses__headline,
  .ccp-listen__headline,
  .ai-features-title,
  .how-main-title,
  .cta-headline,
  #calculator h2,
  #pricing h2 {
    font-size: 1.625rem !important; /* 26px */
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: rgba(15, 26, 43, 0.95) !important;
  }
}