/* ==========================================================================
   Callback Clone — Mobile Enhancement Layer
   Loaded on every page after motion.css. Keeps the phone experience close
   to the desktop design while tightening spacing, growing tap targets, and
   trimming continuous background animation so scrolling stays smooth.
   ========================================================================== */

/* Never allow any page to scroll sideways on a phone */
html, body { max-width: 100%; overflow-x: hidden; }

/* Stop pull-to-refresh / rubber-band bounce from chaining past the page edges,
   without disabling normal vertical scrolling */
html, body { overscroll-behavior-y: contain; }

@media (max-width: 767px) {
  /* ---- Bigger, easier tap targets ---- */
  .btn-primary, .btn-secondary, .buy-btn,
  a.btn-primary, a.btn-secondary { min-height: 46px; touch-action: manipulation; }
  .addon-tile [data-addon-btn], .plan-tile { touch-action: manipulation; }
  header.site-nav a, .drawer-nav a { min-height: 46px; display: flex; align-items: center; }
  #fanBtn, .theme-toggle { touch-action: manipulation; }

  /* ---- Decorative blobs no longer animate anywhere (see motion.css); this
         just keeps their blur radius cheaper for lower-powered phones ---- */
  .blob { filter: blur(36px); }

  /* ---- Marquee & shimmer: slow down, stay legible ---- */
  .marquee-track { animation-duration: 34s; }
  .shine-text { animation-duration: 8s; }

  /* ---- Mouse-follow glow only makes sense with a mouse ---- */
  .ambient-glow, .card-glow::before { display: none; }

  /* ---- Tighter, more phone-appropriate section rhythm ---- */
  .container-page { padding-left: 1.1rem; padding-right: 1.1rem; }

  /* ---- Prevent iOS Safari from zooming in on form focus ---- */
  input, select, textarea { font-size: max(16px, 1em); }

  /* ---- Sticky mobile CTA: don't let it cover the last bit of content ---- */
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* ---- Live-call waveform: 40 bars animating `height` forever means layout
         + paint on every frame, even scrolled out of view. Same visual, moved
         onto the compositor via transform. !important because the page-level
         <style> blocks load after this file. ---- */
  .wave-bar {
    height: 26px !important;
    transform-origin: bottom !important;
    animation-name: waveScale !important;
  }
}

@keyframes waveScale {
  0%, 100% { transform: scaleY(0.154); }
  50%      { transform: scaleY(1); }
}

@media (max-width: 420px) {
  .blob { filter: blur(24px); }
  h1, .font-display.text-4xl, .font-display.text-\[clamp\(2rem\,3vw\+1rem\,3rem\)\] { letter-spacing: -0.01em; }
}

/* Respect reduced-motion regardless of screen size (belt-and-braces with motion.css) */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
}