/*
 * .brtr — Responsive Breakpoints
 * All @media queries consolidated in one file.
 * Breakpoints: 1280px (large), 1024px (tablet), 640px (mobile).
 * CSS file: responsive.css — load LAST so overrides take effect.
 */


/* ================================================================
   LARGE — ≤ 1280px
   Tighten padding, shrink aurora blobs, pull floating cards inward.
   ================================================================ */
@media (max-width: 1280px) {
  .s2-wrap { padding: 0 56px; }
  .s2-statement { font-size: 3rem; }
}


/* ================================================================
   TABLET — ≤ 1024px
   Stack layouts, hide sidebars + floating cards, reduce font sizes.
   ================================================================ */
@media (max-width: 1024px) {
  /* Section 2 — Social proof */
  .s2 { padding: 80px 0 100px; }
  .s2-wrap { padding: 0 36px; }
  .s2-scroll-text { font-size: 1.6rem; padding-left: 8px; }
  .s2-cta { font-size: 2.5rem; padding-left: 8px; }
  .s2-card { flex: 0 0 280px; min-height: 240px; }
  .s2-cards-label { padding-left: 10px; }

  /* Section 2b — Mentor network */
  .s2b { padding: 70px 0 80px; }
  .s2b-wrap { padding: 0 36px; margin-bottom: 40px; }
  .s2b-heading { font-size: 1.8rem; }
  .s2b-card { flex: 0 0 270px; padding: 24px 20px; }

  /* Section 3 — Prototype */
  .s3 { padding: 80px 0 100px; }
  .s3-wrap { padding: 0 36px; }
  .s3-scroll-text { font-size: 1.6rem; padding-left: 8px; }
  .proto-outer { padding: 0 28px; }
  .proto-inner { grid-template-columns: 1fr; }
  .proto-side { display: none; }
  .proto-content { padding: 24px; }
  .proto-label { padding-left: 10px; }

  /* Section 4 — Mentors */
  .s4 { padding: 80px 0 100px; }
  .s4-wrap { padding: 0 36px; }
  .s4-scroll-text { font-size: 1.6rem; padding-left: 8px; }

  /* Section 5 — AMA */
  .s5 { padding: 80px 0 100px; }
  .s5-wrap { padding: 0 36px; }
  .s5-scroll-text { font-size: 1.6rem; padding-left: 8px; }

  /* Section 6 — Scroll text + Learning path */
  .s6 { padding: 80px 0 100px; }
  .s6-wrap { padding: 0 36px; }
  .s6-scroll-text { font-size: 1.6rem; padding-left: 8px; }
  .m4-cards { grid-template-columns: 1fr; }
  .m4-add__field { width: 140px; }

  /* Section 7 — Scroll text */
  .s7 { padding: 80px 0 100px; }
  .s7-wrap { padding: 0 36px; }
  .s7-scroll-text { font-size: 1.6rem; padding-left: 8px; }

  /* Section 8 — Scroll text */
  .s8 { padding: 80px 0 100px; }
  .s8-wrap { padding: 0 36px; }
  .s8-scroll-text { font-size: 1.6rem; padding-left: 8px; }

  /* Section 9 — Roadmap */
  .s9 { padding: 80px 0 100px; }
  .s9-wrap { padding: 0 36px; }
  .s9-heading { font-size: 1.6rem; padding-left: 8px; }
  .s9-sub { padding-left: 8px; }
  .s9-grid { padding: 0 8px; }

  /* Section 10 — Footer CTA */
  .s10 { padding: 80px 0 60px; }
  .s10-heading { font-size: 2.6rem; }
  .s10-marquee__item { font-size: 5rem; padding: 0 28px; }

  /* Footer */
  .footer-wrap { flex-direction: column; gap: 20px; text-align: center; }

}


/* ================================================================
   MOBILE — ≤ 640px
   Single-column everything, minimal padding, smallest font sizes.
   ================================================================ */
@media (max-width: 640px) {
  /* Section 2 — Social proof */
  .s2 { padding: 60px 0 80px; }
  .s2-wrap { padding: 0 16px; }
  .s2-scroll-text { font-size: 1.25rem; padding-left: 0; }
  .s2-cta { font-size: 38px; padding-left: 0; margin-top: 40px; }
  .s2-card { flex: 0 0 260px; min-height: 220px; padding: 22px 20px; }
  .s2-cards-label { padding-left: 2px; }
  .s2-statement { font-size: 1.75rem; padding-left: 0; }

  /* Section 2b — Mentor network */
  .s2b { padding: 56px 0 64px; }
  .s2b-wrap { padding: 0 16px; margin-bottom: 32px; }
  .s2b-heading { font-size: 1.4rem; }
  .s2b-sub { font-size: 13px; }
  .s2b-track { gap: 14px; }
  .s2b-card { flex: 0 0 260px; padding: 22px 18px; }

  /* Section 3 — Prototype */
  .s3 { padding: 60px 0 80px; }
  .s3-wrap { padding: 0 16px; }
  .s3-scroll-text { font-size: 1.25rem; padding-left: 0; }
  .proto-outer { padding: 0 16px; }
  .proto-teams { grid-template-columns: 1fr; }
  .proto-label { padding-left: 2px; }

  /* Section 4 — Mentors */
  .s4 { padding: 60px 0 80px; }
  .s4-wrap { padding: 0 16px; }
  .s4-scroll-text { font-size: 1.25rem; padding-left: 0; }

  /* Section 5 — AMA */
  .s5 { padding: 60px 0 80px; }
  .s5-wrap { padding: 0 16px; }
  .s5-scroll-text { font-size: 1.25rem; padding-left: 0; }

  /* Section 6 — Scroll text + Learning path */
  .s6 { padding: 60px 0 80px; }
  .s6-wrap { padding: 0 16px; }
  .s6-scroll-text { font-size: 1.25rem; padding-left: 0; }

  /* Section 7 — Scroll text + Insights */
  .s7 { padding: 60px 0 80px; }
  .s7-wrap { padding: 0 16px; }
  .s7-scroll-text { font-size: 1.25rem; padding-left: 0; }

  /* Section 8 — Scroll text + Content feed */
  .s8 { padding: 60px 0 80px; }
  .s8-wrap { padding: 0 16px; }
  .s8-scroll-text { font-size: 1.25rem; padding-left: 0; }
  .m8-grid { grid-template-columns: 1fr 1fr; }

  /* Section 9 — Roadmap */
  .s9 { padding: 60px 0 80px; }
  .s9-wrap { padding: 0 16px; }
  .s9-heading { font-size: 1.25rem; padding-left: 0; }
  .s9-sub { padding-left: 0; font-size: 13px; margin-bottom: 32px; }
  .s9-grid { grid-template-columns: 1fr; padding: 0; gap: 12px; }
  .s9-card { padding: 18px 20px; }
  .s9-card__num { font-size: 28px; }
  .m7-stats { grid-template-columns: 1fr; }
  .m7-member__head { flex-wrap: wrap; }
  .m7-member__metrics { width: 100%; margin-top: 4px; }
  .m6-week-row { flex-wrap: wrap; }
  .m6-week-row__formats { width: 100%; margin-top: 4px; }
  .m5-thread { padding: 14px 16px; }
  .m5-voice { margin-left: 0; }
  .m5-transcript { margin-left: 0; }
  .m5-a { margin-left: auto; max-width: 85%; }
  .m5-a__text { padding-left: 0; }
  .m5-input { padding: 12px 16px; }

  .m4-add { flex-wrap: wrap; }
  .m4-add__input { width: 100%; }
  .m4-add__field { flex: 1; }

  /* Scheduler panel — bottom-anchored on mobile */
  .m4-sched {
    width: calc(100vw - 32px) !important;
    left: 16px !important;
    right: 16px;
    bottom: 16px !important;
    top: auto !important;
    max-height: 80vh;
    border-radius: 12px;
  }

  /* Section 10 — Footer CTA */
  .s10 { padding: 64px 0 48px; }
  .s10-wrap { padding: 0 16px; }
  .s10-heading { font-size: 1.8rem; margin-bottom: 16px; }
  .s10-sub { font-size: 13px; margin-bottom: 32px; }
  .s10-btn { font-size: 14px; padding: 16px 32px; }
  .s10-marquee__item { font-size: 3.5rem; padding: 0 20px; }
  .s10-glow { width: 300px; height: 300px; }

  /* Footer */
  .footer-wrap { flex-direction: column; gap: 16px; text-align: center; }
  .footer-brand { justify-content: center; }
  .footer-links { justify-content: center; }

}