/* landing/v2.css — responsive overrides for the v2 landing remix.
 * Most styling lives inline in v2-sections*.jsx; this file holds the
 * media-query collapses + a couple of global helpers. */

@media (max-width: 980px) {
  /* Hero: stack columns */
  .v2-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .v2-hero-grid .v2-hero-phone { left: 0 !important; transform: rotate(-6deg) scale(0.85) !important; }
  .v2-hero-grid .v2-hero-tablet { margin-left: 40px !important; max-width: 460px !important; }

  /* §5 (v5 polish): the feature scroller now renders a SEPARATE stacked-card
   * tree on mobile (matchMedia ≤980px in V2FeatureScroller), so the old CSS
   * sticky-unwind hack was removed. Keep the grid collapse for the narrow
   * desktop band (768–980px) where the desktop render still applies. */
  .v2-scroller-grid { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* Stats: 2-up */
  .v2-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Stacking cards collapse to single column inside each card */
  .v2-stack-card { grid-template-columns: 1fr !important; padding: 36px 28px !important; gap: 24px !important; }

  /* Testimonial wall: span 12 → all stack */
  .v2-test-grid > * { grid-column: span 12 !important; }

  /* FAQ: stack */
  .v2-faq-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
}

@media (max-width: 560px) {
  .v2-stats-grid { grid-template-columns: 1fr !important; }
  .v2-hero-grid .v2-hero-phone { display: none !important; }
  .v2-hero-grid .v2-hero-tablet { margin-left: 0 !important; }
  /* §2 (v5 polish): drop absolute positioning, flow the chip below the tablet */
  .v2-hero-grid .v2-hero-chip {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 16px auto 0 !important;
    width: 100% !important;
    max-width: 460px !important;
  }
}