/* Mobile responsive overrides for V1 and V2.
   Inline styles in the React prototypes can't be touched without rewriting,
   so we use [style*=...] attribute selectors with !important to override at <760px. */

@media (max-width: 760px) {
  /* ─── Stack 2-column grids ─── */
  .twj-page [style*="grid-template-columns: 1.2fr 1fr"],
  .twj-page [style*="grid-template-columns: 1.1fr 1fr"],
  .twj-page [style*="grid-template-columns: 1fr 1fr"],
  .twj-page [style*="grid-template-columns: 2fr 1fr"],
  .twj-page [style*="grid-template-columns: 1fr 2fr"],
  .twj-page [style*="grid-template-columns: 120px 1fr"],
  .twj-page [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Tighten 3-up stat blocks */
  .twj-page [style*="grid-template-columns: repeat(3, 1fr)"] {
    gap: 8px !important;
  }

  /* Member transformation grid 4 → 2 */
  .twj-page [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Footer 4-col → 2-col */
  .twj-page [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  /* ─── Padding reductions on big rounded cards ─── */
  .twj-page [style*="padding: 72px 56px"] { padding: 32px 22px !important; }
  .twj-page [style*="padding: 80px 56px"] { padding: 44px 22px !important; }
  .twj-page [style*="padding: 64px 56px"] { padding: 36px 22px !important; }
  .twj-page [style*="padding: 48px 56px"] { padding: 28px 22px !important; }
  .twj-page [style*="padding: 36px 36px 32px"] { padding: 24px 22px !important; }
  .twj-page [style*="padding: 36px 32px"] { padding: 24px 20px !important; }

  /* ─── Section-level horizontal padding ─── */
  .twj-page [style*="padding: 80px 24px"] { padding: 44px 16px !important; }
  .twj-page [style*="padding: 60px 24px"] { padding: 32px 16px !important; }
  .twj-page [style*="padding: 40px 24px"] { padding: 28px 16px !important; }
  .twj-page [style*="padding: 40px 24px 80px"] { padding: 24px 16px 48px !important; }
  .twj-page [style*="padding: 32px 24px 80px"] { padding: 16px 16px 40px !important; }
  .twj-page [style*="padding: 24px 24px 0"] { padding: 12px 16px 0 !important; }
  .twj-page [style*="padding: 60px 24px 32px"] { padding: 36px 16px 24px !important; }
  .twj-page [style*="padding: 16px 24px"] { padding: 10px 12px !important; }

  /* Nav inner pill */
  .twj-page [style*="padding: 12px 16px 12px 28px"] { padding: 8px 8px 8px 14px !important; }
  .twj-page [style*="padding: 10px 14px 10px 22px"] { padding: 8px 8px 8px 14px !important; }

  /* ─── Border radius — soften huge rounding ─── */
  .twj-page [style*="border-radius: 36px"] { border-radius: 22px !important; }

  /* ─── Heights / minHeights ─── */
  .twj-page [style*="height: 600px"] { height: 360px !important; }
  .twj-page [style*="max-height: 600px"] { max-height: 360px !important; }
  .twj-page [style*="min-height: 640px"] { min-height: 360px !important; }
  .twj-page [style*="min-height: 360px"] { min-height: 240px !important; }
  .twj-page [style*="min-height: 320px"] { min-height: 220px !important; }

  /* ─── Headings ─── */
  .twj-page h1 { font-size: clamp(40px, 11vw, 56px) !important; line-height: 1.02 !important; }
  .twj-page h2 { font-size: clamp(30px, 8vw, 40px) !important; line-height: 1.08 !important; }
  .twj-page h3 { font-size: clamp(20px, 5.5vw, 26px) !important; }

  /* Big numeric prices (fontSize: 64) */
  .twj-page [style*="font-size: 64px"] { font-size: 44px !important; }

  /* ─── Floating hero badges — pull into view ─── */
  .twj-page [style*="top: 80px"] { top: 12px !important; }
  .twj-page [style*="bottom: 80px"] { bottom: 12px !important; }

  /* ─── Decorative blobs in V1 hero — shrink ─── */
  .twj-page [style*="width: 420px"][style*="height: 420px"] { width: 240px !important; height: 240px !important; }
  .twj-page [style*="width: 320px"][style*="height: 320px"] { width: 200px !important; height: 200px !important; }

  /* ─── V2 bento app screenshots — shrink so they don't dominate ─── */
  .twj-page [style*="width: 280px"] { width: 180px !important; }

  /* ─── Nav center links — hide ─── */
  .twj-nav-links { display: none !important; }

  /* ─── App store badges row — center & wrap ─── */
  .twj-page [style*="padding: 22px 36px"] { padding: 16px 20px !important; }
}

/* Extra-tight: phones under 380px */
@media (max-width: 380px) {
  .twj-page h1 { font-size: 38px !important; }
  .twj-page h2 { font-size: 28px !important; }
  .twj-page [style*="font-size: 64px"] { font-size: 36px !important; }
}