/* ============================================
   LARGE SCREENS (min-width: 1280px)
   ============================================ */
@media (min-width: 1280px) {
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
    gap: 18px;
  }
  .feature-card { padding: 40px 26px; }
  .concept__body { max-width: 600px; }
  .concept__summary { max-width: 600px; }
  .concept__heading { max-width: 800px; }
  .room-points { max-width: 960px; }
  .whos-inside__body { max-width: 600px; }
  .rules__inner { max-width: 600px; }
}

/* ============================================
   LARGE SCREENS (min-width: 1440px)
   ============================================ */
@media (min-width: 1440px) {
  .hero__content { max-width: 1100px; }
  .concept { padding-top: 200px; padding-bottom: 220px; }
  .the-room { padding-top: 220px; padding-bottom: 220px; }
  .whos-inside { padding-top: 200px; padding-bottom: 180px; }
  .gold-cta { padding-top: 180px; padding-bottom: 180px; }

  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
    gap: 20px;
  }
  .feature-card { padding: 44px 28px; }

  /* Founders stay STACKED (Jonah -> Stanley -> The Decision), not columns --
     the story reads top to bottom as the illumination wave washes down it. */
  .room-points { max-width: 1040px; gap: 80px; }

  .concept__body { max-width: 640px; }
  .concept__summary { max-width: 640px; }
  .concept__heading { max-width: 900px; }
  .concept__format { margin-top: 100px; }
  .tag-cloud { max-width: 880px; }
  .whos-inside__body { max-width: 640px; }
  .rules__inner { max-width: 660px; }
  .gold-cta__sub { max-width: 600px; }
}

/* ============================================
   EXTRA LARGE SCREENS (min-width: 1920px)
   ============================================ */
@media (min-width: 1920px) {
  .hero__content { max-width: 1200px; }
  .concept { padding-top: 240px; padding-bottom: 260px; }
  .the-room { padding-top: 260px; padding-bottom: 260px; }
  .whos-inside { padding-top: 240px; padding-bottom: 200px; }

  .feature-grid {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    gap: 28px;
  }
  .feature-card { padding: 52px 36px; }

  .room-points {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    gap: 96px;
  }

  .concept__body { max-width: 720px; }
  .concept__summary { max-width: 720px; }
  .concept__heading { max-width: 1040px; }
  .concept__format { margin-top: 120px; }
  .whos-inside__body { max-width: 700px; }
  .rules__inner { max-width: 740px; }
  .tag-cloud { max-width: 1000px; }
  .gold-cta__sub { max-width: 720px; }
}

/* ============================================
   RESPONSIVE: TABLET (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  :root { --nav-height: 64px; --nav-padding-x: 28px; }

  .nav-logo .b { font-size: 24px; }
  .nav-logo .name { font-size: 11px; letter-spacing: 3px; }
  .nav-right { gap: 16px; }
  .nav-btn { padding: 8px 18px; font-size: 10px; }

  .hero {
    padding-top: calc(var(--nav-height) + 2rem);
    padding-bottom: 4rem;
    padding-left: 32px;
    padding-right: 32px;
  }
  .hero__heading { letter-spacing: 3px; }

  .concept { padding: 100px 28px 120px; }
  .concept__body { font-size: 18px; }
  .concept__format { margin-top: 64px; }
  .concept__summary { max-width: 100%; }
  .concept__summary .stat-word { font-size: clamp(18px, 3.5vw, 28px); }

  .the-room { padding: 120px 28px; }
  .the-room__accent--left { left: 28px; }
  .the-room__accent--right { right: 28px; }

  .whos-inside { padding: 100px 28px 120px; }

  .rules { margin-top: 56px; padding-top: 48px; }
  .rules__label { margin-bottom: 36px; }

  .gold-cta { padding: 100px 28px; }

  .footer { padding: 48px 28px; }

  .scroll-dist { height: 180vh; }
}

/* ============================================
   RESPONSIVE: MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  :root { --nav-height: 60px; --nav-padding-x: 20px; }

  .nav-logo .b { font-size: 20px; }
  .nav-logo .name { font-size: 10px; letter-spacing: 3px; }
  .nav-right { gap: 12px; }
  .nav-link { font-size: 10px; letter-spacing: 1.5px; padding: 14px 8px; }
  .nav-btn { padding: 14px 18px; font-size: 10px; letter-spacing: 1.5px; }

  .hero {
    padding-top: calc(var(--nav-height) + 1.5rem);
    padding-bottom: 3.5rem;
    padding-left: 24px;
    padding-right: 24px;
  }
  .hero__label { font-size: 10px; letter-spacing: 4px; margin-bottom: 24px; }
  .hero__heading { letter-spacing: 2px; margin-bottom: 40px; }
  .hero__cta { padding: 14px 36px; font-size: 10px; letter-spacing: 2px; }
  .hero__frame-line--top { margin-top: -140px; }
  .hero__frame-line--bottom { margin-top: 140px; }

  .concept { padding: 72px 20px 96px; }
  .concept__label { font-size: 10px; letter-spacing: 3px; }
  .concept__heading { max-width: 100%; }
  .concept__rule { width: 32px; }
  .concept__body { font-size: 17px; max-width: 100%; line-height: 1.7; }
  .concept__format { margin-top: 48px; }
  .concept__summary { max-width: 100%; }
  .concept__summary .stat-cell { padding: 20px 10px; }
  .concept__summary .stat-word { font-size: 20px; }
  .concept__summary .stat-desc { font-size: 11px; white-space: normal; }

  .whos-inside__body { font-size: 17px; max-width: 100%; line-height: 1.7; }

  .how-it-works__label { font-size: 10px; letter-spacing: 3px; }
  .how-it-works__heading { margin-bottom: 40px; }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .feature-card { padding: 36px 24px; }
  .feature-card__title { font-size: 13px; }
  .feature-card__desc { font-size: 15px; }

  .rules { margin-top: 40px; padding-top: 40px; }
  .rules__inner { max-width: 100%; }
  .rules__label { font-size: 10px; letter-spacing: 3px; margin-bottom: 32px; }
  .rule-item { font-size: 11px; letter-spacing: 1.5px; gap: 18px; padding: 18px 0; }

  .the-room { padding: 80px 20px; }
  .the-room__label { font-size: 10px; letter-spacing: 3px; }
  .the-room__subtext { font-size: 15px; }
  .the-room__accent--left { left: 16px; }
  .the-room__accent--right { right: 16px; }
  .room-points { gap: 40px; max-width: 100%; }
  .room-point__title { font-size: 22px; }
  .room-point__desc { font-size: 18px; }

  .whos-inside { padding: 72px 20px 96px; }
  .whos-inside__label { font-size: 10px; letter-spacing: 3px; }
  .whos-inside__heading { margin-bottom: 36px; }
  .tag-cloud { max-width: 100%; gap: 6px; margin-bottom: 36px; }
  .tag { padding: 8px 14px; font-size: 10px; letter-spacing: 1.5px; }
  .gold-cta { padding: 80px 20px; }
  .gold-cta__sub { font-size: 15px; }
  .gold-cta__btn {
    padding: 16px 40px; font-size: 10px;
    width: 100%; max-width: 280px;
  }

  .footer { padding: 40px 20px; }
  .footer__logo .b { font-size: 18px; }
  .footer__logo .name { font-size: 10px; letter-spacing: 3px; }
  .footer__tagline { font-size: 13px; margin-bottom: 20px; }
  .footer__links { gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
  .footer__link { font-size: 10px; }
  .footer__copy { font-size: 11px; }

  .scroll-dist { height: 150vh; }
}