/* ============================================
   MOBILE COMPRESSION — shrinks page from ~20
   screens to ~8 on phones by:
   - turning bloated grids into horizontal swipe
   - tightening all section padding
   - scaling down oversized text
   ============================================ */

@media (max-width: 820px) {

  /* ---- Global section tightening ---- */
  main .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .section__title {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .section__subtitle, .section__desc {
    font-size: 14px;
    line-height: 1.5;
  }

  .section__header {
    margin-bottom: 24px;
  }

  .section__label {
    font-size: 11px;
    letter-spacing: 0.15em;
  }

  /* ---- HERO: tighten ---- */
  .hero {
    min-height: auto;
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .hero__title, .hero-word {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1;
  }

  .hero__subtitle {
    font-size: 15px;
    margin-top: 12px;
  }

  .hero__actions {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 24px;
  }

  .hero__actions .btn {
    font-size: 14px;
    padding: 12px 20px;
  }

  .hero__trust {
    gap: 12px;
    margin-top: 20px;
  }

  .hero__trust-item {
    font-size: 11px;
  }

  /* ---- Reusable swipe carousel for grids ---- */
  .demos-grid,
  .grid-3,
  .personality-cards,
  .compare-grid-v2,
  .form-radio-cards,
  .pricing-cards-wrapper,
  .pricing-grid,
  .wwd-grid,
  .steps-container,
  .testimonials-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 20px;
    padding: 8px 20px 16px !important;
    margin: 0 -20px !important;
    gap: 14px !important;
    grid-template-columns: none !important;
    scrollbar-width: none;
  }

  .demos-grid::-webkit-scrollbar,
  .grid-3::-webkit-scrollbar,
  .personality-cards::-webkit-scrollbar,
  .compare-grid-v2::-webkit-scrollbar,
  .form-radio-cards::-webkit-scrollbar,
  .pricing-cards-wrapper::-webkit-scrollbar,
  .pricing-grid::-webkit-scrollbar,
  .wwd-grid::-webkit-scrollbar,
  .steps-container::-webkit-scrollbar,
  .testimonials-grid::-webkit-scrollbar { display: none; }

  /* Each card takes ~85% of viewport so the next one peeks */
  .demos-grid > *,
  .grid-3 > *,
  .personality-cards > *,
  .compare-grid-v2 > *,
  .form-radio-cards > *,
  .pricing-cards-wrapper > *,
  .pricing-grid > *,
  .wwd-grid > *,
  .steps-container > *,
  .testimonials-grid > * {
    flex: 0 0 82vw;
    max-width: 82vw;
    scroll-snap-align: start;
  }

  /* Testimonials (uses inline wrapper div) */
  #testimonials .container > div:not(.section__header) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px 16px !important;
    margin: 0 -20px !important;
    gap: 14px !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    scrollbar-width: none;
  }
  #testimonials .container > div:not(.section__header)::-webkit-scrollbar { display: none; }
  #testimonials .container > div:not(.section__header) > * {
    flex: 0 0 82vw;
    max-width: 82vw;
    scroll-snap-align: start;
  }

  /* ---- Swipe hint (injected via ::after) ---- */
  .demos-grid::after,
  .personality-cards::after,
  .compare-grid-v2::after,
  .pricing-cards-wrapper::after,
  .pricing-grid::after {
    content: '';
    flex: 0 0 8vw;
  }

  /* Add "swipe →" hint above carousels */
  .section--demos .section__header::after,
  #compare .section__header::after,
  #personality .section__header::after,
  #pricing .section__header::after,
  #what-we-do .section__header::after,
  #testimonials .section__header::after,
  #how-it-works .section__header::after {
    content: 'Swipe →';
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    color: rgba(0,191,255,0.7);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 10px;
    animation: swipeHint 2s ease-in-out infinite;
  }

  @keyframes swipeHint {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(6px); opacity: 1; }
  }

  /* ---- Card sizing inside carousels ---- */
  .demo-card,
  .personality-card,
  .pricing-card {
    padding: 20px !important;
  }

  .personality-card__title,
  .pricing-card__name {
    font-size: 17px;
  }

  .pricing-card__price {
    font-size: 32px !important;
  }

  .personality-card__desc,
  .pricing-card__desc {
    font-size: 13px;
  }

  .pricing-card__features li {
    font-size: 13px;
  }

  /* ---- Compare section: vertical stack inside cards is fine ---- */
  .compare-counters {
    flex-direction: column;
    gap: 16px;
  }

  .compare-counter {
    padding: 18px !important;
  }

  .compare-counter__value {
    font-size: 48px !important;
  }

  .compare-counter--vs {
    font-size: 14px !important;
    padding: 8px !important;
  }

  /* ---- Testimonials: swipe ---- */
  .testimonials-grid,
  .testimonials-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 8px 20px 16px;
    margin: 0 -20px;
    scrollbar-width: none;
  }

  .testimonials-grid::-webkit-scrollbar,
  .testimonials-wrapper::-webkit-scrollbar { display: none; }

  .testimonials-grid > *,
  .testimonials-wrapper > * {
    flex: 0 0 82vw;
    scroll-snap-align: start;
  }

  /* ---- How it works: make steps more compact ---- */
  .steps-grid {
    gap: 16px;
  }

  .step-card {
    padding: 18px !important;
  }

  /* Hide the long connector bars between steps on mobile */
  .step-connector {
    display: none !important;
  }

  /* ---- Form section: tighten ---- */
  .section--form {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* ---- Final CTA: tighter ---- */
  .final-cta {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* ---- Trust bar / counters: stack nicely ---- */
  .compare-grid-v2 .compare-col-v2 {
    flex: 0 0 85vw;
    max-width: 85vw;
  }

  /* ---- Floating CTA button: don't cover content ---- */
  .floating-cta, .call-now-fab {
    bottom: 16px !important;
    right: 16px !important;
    transform: scale(0.85);
  }

  /* ---- Reduce big text blocks ---- */
  .section p {
    font-size: 14px;
    line-height: 1.55;
  }
}

/* Small phones */
@media (max-width: 400px) {
  .hero__title, .hero-word { font-size: clamp(1.8rem, 8.5vw, 2.5rem) !important; }
  .section__title { font-size: clamp(1.4rem, 6.5vw, 1.9rem); }
  .demos-grid > *, .grid-3 > *, .personality-cards > *,
  .pricing-cards-wrapper > *, .pricing-grid > *, .testimonials-grid > * {
    flex: 0 0 86vw;
    max-width: 86vw;
  }
}