/* ==========================================================================
   MJL Home Page — Mobile Final Polish (≤768px only)
   Single source of truth for Home mobile hero + feature strip.
   ========================================================================== */

@media (max-width: 768px) {
  .home-page-body .hero.v2-hero.home-shot-hero.page-hero.has-responsive-cover {
    background-image:
      linear-gradient(
        180deg,
        rgba(3, 14, 9, 0.28) 0%,
        rgba(3, 14, 9, 0.52) 42%,
        rgba(5, 11, 8, 0.82) 78%,
        rgba(5, 11, 8, 0.94) 100%
      );
  }

  .home-page-body .hero.v2-hero.home-shot-hero.page-hero:not(.has-responsive-cover) {
    min-height: auto;
    height: auto;
    justify-content: flex-start;
    padding-top: calc(95px + env(safe-area-inset-top, 0px));
    padding-bottom: 42px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    background-image:
      linear-gradient(
        180deg,
        rgba(3, 14, 9, 0.28) 0%,
        rgba(3, 14, 9, 0.52) 42%,
        rgba(5, 11, 8, 0.82) 78%,
        rgba(5, 11, 8, 0.94) 100%
      ),
      var(
        --page-hero-mobile-image,
        var(
          --hero-mobile-image,
          var(--page-hero-tablet-image, var(--hero-tablet-image, var(--page-hero-image, var(--hero-desktop-image, url('/img/lounge-hero.png')))))
        )
      );
  }

  .home-page-body .hero.home-shot-hero.page-hero::after {
    display: block;
    height: 100px;
    background: linear-gradient(to bottom, transparent, #050b08);
  }

  .home-page-body .hero.home-shot-hero .responsive-hero-overlay {
    opacity: 0.42;
    background:
      linear-gradient(180deg, rgba(5, 11, 8, 0.18), rgba(5, 11, 8, 0.55)),
      linear-gradient(90deg, rgba(3, 18, 11, 0.5) 0%, rgba(3, 18, 11, 0.22) 50%, rgba(3, 18, 11, 0.12) 100%);
  }

  .home-page-body .hero.home-shot-hero .v2-hero-content,
  .home-page-body .hero.home-shot-hero .level-hero-grid {
    transform: translateY(-18px);
    padding-top: 0;
    padding-bottom: 0;
  }

  .home-page-body .hero.home-shot-hero .level-hero-copy {
    transform: none;
    max-width: none;
  }

  .home-page-body .hero.home-shot-hero .hero-kicker {
    margin-bottom: 10px;
  }

  .home-page-body .home-hero-title {
    margin-bottom: 10px;
    font-size: clamp(48px, 13vw, 68px);
    line-height: 0.9;
    letter-spacing: -1.5px;
  }

  .home-page-body .home-hero-title span {
    display: block;
  }

  .home-page-body .home-hero-title .word-play,
  .home-page-body .home-hero-title .word-connect,
  .home-page-body .home-hero-title .word-compete {
    font-size: 1em;
  }

  .home-page-body .hero.home-shot-hero .neon-underline {
    width: min(200px, 46vw);
    height: 4px;
    margin: 10px 0 0;
  }

  .home-page-body .hero.home-shot-hero .hero-subtitle {
    margin-top: 22px;
    margin-bottom: 8px;
    font-size: 17px;
    line-height: 1.55;
  }

  .home-page-body .hero.home-shot-hero .level-hero-copy p:not(.hero-subtitle) {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 100%;
  }

  .home-page-body .hero.home-shot-hero .hero-actions {
    margin-top: 18px;
    gap: 14px;
  }

  .home-page-body .hero.home-shot-hero .hero-actions .btn {
    width: 100%;
    height: 56px;
    min-height: 56px;
    border-radius: 18px;
    font-size: 17px;
  }

  .home-page-body .hero.home-shot-hero .feature-strip {
    margin-top: -12px;
    padding-top: 18px;
    padding-bottom: 18px;
    gap: 12px;
  }

  .home-page-body .hero.home-shot-hero .feature-strip div {
    padding: 24px;
    border-radius: 22px;
  }
}