/* Tablet */
@media (max-width: 768px) {
  .container { padding: 0 15px; }

  .logo-wrapper { margin-bottom: 5px; margin-top: 0; }

  .hero-title { font-size: clamp(24px, 4.5vw, 42px); margin-bottom: 15px; }
  .hero-subtitle { font-size: clamp(14px, 3vw, 16px); margin-bottom: 10px; }

  .carousel-track { gap: 15px; }
  .carousel-slide { width: 220px; }

  .faq-question { padding: 20px; font-size: 16px; }
  .faq-answer.active { padding: 0 20px 20px 20px; }

  .logo { max-width: 125px; }
  .video-container { max-width: 300px; }
  /* Ensure CTA matches the tablet player width */
  .hero-container .cta-button { max-width: 300px; }

  .carousel-container.has-arrows .carousel-arrow.prev { left: 2px; }
  .carousel-container.has-arrows .carousel-arrow.next { right: 2px; }
  .carousel-container.has-arrows svg { width: 44px; height: 44px; }

  .guarantee-seals { max-width: 220px; }
}

/* Mobile */
@media (max-width: 480px) {
  .hero-container {
    padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
  }

  .logo-wrapper {
    margin-top: 0 !important;
    margin-bottom: 4px;
  }

  .hero-subtitle {
    font-size: clamp(12px, 3.2vw, 14px);
  }

  .pricing-card {
    padding: 22px 16px;
    border-radius: 14px;
  }

  .price-item {
    gap: 10px;
    margin-bottom: 10px;
    padding-left: 18px;
    font-size: 15px;
  }

  .pricing-intro::after { width: 90px; }

  .guarantee-seals { max-width: 200px; }

  .guarantee-image-wrapper { margin-bottom: 12px; }

  /* Reduce glow/light behind the transformation image on mobile only */
  .feature-image {
    filter: drop-shadow(0 10px 26px rgba(255, 0, 204, 0.22)) !important;
  }
  .feature-image:hover {
    filter: drop-shadow(0 12px 30px rgba(255, 0, 204, 0.26)) !important;
  }

  /* Reduce glow/light behind the result carousel images on mobile only */
  .results-container .result-image {
    filter: drop-shadow(0 6px 16px rgba(0, 191, 255, 0.18)) !important;
  }

  .overlay-content {
    padding: 18px;
    /* Maintain strict 1:1 ratio and responsive sizing on mobile */
    aspect-ratio: 1 / 1 !important;
    /* Slightly smaller square on mobile */
    width: min(62%, 200px);
    height: auto;
    max-width: none;
    gap: 8px;
    overflow: hidden;
  }
  
  .text-top,
  .text-bottom {
    /* Increase mobile font size slightly */
    font-size: 14px;
    margin: 2px 0; /* ensure extremely small spacing on mobile */
  }
  
  .sound-icon {
    margin: 2px 0; /* ensure extremely small spacing on mobile */
  }

  .sound-icon svg {
    width: 72px;
    height: 72px; /* increase icon size on mobile */
  }
}