/* site/css/mobile.css */
@media (max-width: 640px) {
  body { padding-bottom: 72px; } /* space for sticky CTA */

  .section-inner { padding: 32px 16px; }
  .hero-inner { padding: 32px 16px; }

  /* Steps: single full-width cards, vertical layout */
  .steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .step {
    text-align: center;
    padding: 24px 20px;
  }
  .step-icon-unicorn {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
  }
  .step-icon-occult {
    margin: 0 auto 14px;
  }
  .step-title {
    margin-bottom: 8px;
    font-size: 0.9rem;
  }
  .step-body {
    font-size: 0.8rem;
  }

  /* Curse grid: 2 cols, more breathing room */
  .curse-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .curse-card {
    padding: 18px 8px 14px;
    min-height: 110px;
  }
  .curse-emoji { font-size: 1.5rem; }
  .curse-name  { font-size: 0.7rem; }
  .curse-desc  { font-size: 0.55rem; }

  /* Testimonials: single column */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Pricing presets: wrap nicely */
  .pricing-presets { justify-content: center; }
  .pricing-preset  { padding: 10px 18px; }

  /* Pull quote: tighter on mobile */
  .section-pullquote .section-inner { padding: 48px 16px; }
  .pullquote p { font-size: clamp(1.4rem, 7vw, 2rem); }

  /* Waitlist form full width */
  #waitlist-form { max-width: 100%; }

  /* Footer wraps better */
  .site-footer { padding: 24px 16px; }
}

/* Tablet: steps 3-col but smaller body text */
@media (max-width: 860px) and (min-width: 641px) {
  .steps { gap: 16px; }
  .step-body { font-size: 0.85rem; }
}

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