/* ==========================================================================
   Responsive overrides — inline styles handle desktop; these collapse mobile.
   Targets data-attrs + tag selectors with !important to win over inline CSS.
   ========================================================================== */

html, body { overflow-x: hidden; }

/* Tablet ≤ 1024px */
@media (max-width: 1024px) {
  [data-r="hero-inner"] { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; padding: 56px 20px 32px !important; }
  [data-r="hero-right"], [data-r="hero-preview-wrap"], [data-r="mobile-device"], [data-r="terminal-root"], [data-r="terminal-scene"] {
    min-width: 0 !important; max-width: 100% !important; overflow: hidden !important;
  }
  [data-r="hero-h1"] { font-size: 44px !important; }
  [data-r="hero-right"] { display: flex !important; justify-content: center !important; }
  [data-r="hero-floatcard"] { display: none !important; }

  [data-r="mode-stage-grid"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-r="mode-stage-grid"] > *:last-child { order: -1; }

  [data-r="dev-flow"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [data-r="dev-connector"] { display: none !important; }
  [data-r="dev-footer-row"] { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }

  [data-r="adv-grid"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-r="fee-inner"] { grid-template-columns: 1fr !important; gap: 24px !important; }

  [data-r="nav-links"] { display: none !important; }

  [data-r="cta-h2"] { font-size: 36px !important; }

  [data-r="modes-h2"], [data-r="adv-h2"], [data-r="dev-h2"], [data-r="faq-h2"] { font-size: 36px !important; }
}

/* Phone ≤ 640px */
@media (max-width: 640px) {
  [data-r="nav-inner"] { padding: 12px 16px !important; }
  [data-r="nav-signin"] { display: none !important; }

  [data-r="hero-inner"] { padding: 40px 16px 24px !important; }
  [data-r="hero-h1"] { font-size: 36px !important; letter-spacing: -0.035em !important; }
  [data-r="hero-lede"] { font-size: 16px !important; max-width: 100% !important; }
  [data-r="hero-cta-row"] { flex-direction: column !important; align-items: stretch !important; }
  [data-r="hero-cta-row"] > button { width: 100% !important; justify-content: center !important; }
  [data-r="hero-preview-wrap"] { transform: scale(0.58) !important; transform-origin: top center !important; min-height: 300px !important; max-width: 100% !important; overflow: hidden !important; }

  [data-r="modes-wrap"] { padding: 64px 0 !important; }
  [data-r="modes-inner"] { padding: 0 16px !important; }
  [data-r="modes-h2"], [data-r="adv-h2"], [data-r="dev-h2"], [data-r="faq-h2"], [data-r="cta-h2"] { font-size: 28px !important; }
  [data-r="modes-sub"] { font-size: 15px !important; }
  [data-r="modes-stage"] { padding: 24px 16px !important; border-radius: 20px !important; }

  [data-r="modes-toggle"] { width: 100% !important; flex-direction: column !important; gap: 6px !important; }
  [data-r="modes-toggle"] button { width: 100% !important; justify-content: flex-start !important; }
  [data-r="modes-toggle-btn"] { min-height: 48px !important; padding: 14px 20px !important; font-size: 14px !important; }

  [data-r="mode-stage-content"] h3 { font-size: 24px !important; }
  [data-r="mode-stage-content"] p { font-size: 15px !important; }

  [data-r="adv-wrap"] { padding: 64px 0 !important; }
  [data-r="adv-inner"] { padding: 0 16px !important; }
  [data-r="adv-grid"] { grid-template-columns: 1fr !important; gap: 12px !important; }
  [data-r="adv-card"] { padding: 20px !important; }
  [data-r="fee-wrap"] { padding: 24px 20px !important; margin-top: 40px !important; }

  [data-r="dev-wrap"] { padding: 64px 0 !important; }
  [data-r="dev-inner"] { padding: 0 16px !important; }
  [data-r="dev-lede"] { font-size: 15px !important; }
  [data-r="dev-footer-row"] { padding: 20px !important; }
  [data-r="dev-stats-row"] { gap: 16px !important; }
  [data-r="dev-stat-div"] { display: none !important; }

  [data-r="faq-wrap"] { padding: 64px 0 !important; }
  [data-r="faq-inner"] { padding: 0 16px !important; }
  [data-r="faq-row"] { padding: 18px 20px !important; }

  [data-r="cta-wrap"] { padding: 48px 16px 24px !important; }
  [data-r="cta-card-inner"] { padding: 48px 20px !important; }

  [data-r="footer-inner"] { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 0 16px !important; }

  /* Terminal demos scale down to fit */
  [data-r="terminal-scene"] { transform: scale(0.7) !important; transform-origin: top center !important; max-width: 100% !important; overflow: hidden !important; }
  [data-r="terminal-root"] { transform: scale(0.58) !important; transform-origin: top center !important; }
  [data-r="mobile-device"] { transform: scale(0.85) !important; transform-origin: top center !important; max-width: 100% !important; overflow: hidden !important; }

  /* Tweaks panel narrower on mobile */
  [data-r="tweaks-root"] { right: 12px !important; left: 12px !important; width: auto !important; }
}

/* Small phone ≤ 380px */
@media (max-width: 380px) {
  [data-r="hero-h1"] { font-size: 30px !important; }
  [data-r="modes-h2"], [data-r="adv-h2"], [data-r="dev-h2"], [data-r="faq-h2"], [data-r="cta-h2"] { font-size: 24px !important; }
}