/* Tablet / narrow desktop */
@media (max-width: 900px) {
  .site-header { min-height: 68px; }
  .menu-button { display: block; }

  .main-nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 14px;
    right: 14px;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #08151f;
  }
  .main-nav.open { display: flex; }

  .hero { min-height: 760px; }
  .hero-image { object-position: 58% center; }
  .hero-shade {
    background: linear-gradient(0deg,
      rgba(4, 10, 15, .9) 0%,
      rgba(4, 10, 15, .48) 50%,
      rgba(4, 10, 15, .04) 82%);
  }
  .hero-content { padding-bottom: 55px; }
  .hero h1 { font-size: clamp(3.3rem, 13vw, 5.6rem); }

  .split,
  .split-reverse,
  .section-heading,
  .community-card {
    grid-template-columns: 1fr;
  }
  .section-heading {
    align-items: start;
    gap: 0;
  }

  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .community-gallery {
    min-height: 0;
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 14px;
    align-items: end;
  }
  .community-wide { width: 100%; margin: 0; }
  .community-tall { position: static; width: 100%; }

  .cap-grid {
    overflow: auto;
    grid-template-columns: repeat(5, minmax(145px, 1fr));
  }

  .download-card {
    flex-direction: column;
    text-align: left;
  }
  .download-mascot {
    width: 100%;
    max-width: 320px;
    height: 380px;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .section { padding-block: clamp(48px, 10vw, 72px); }

  .hero { min-height: 700px; }
  .hero-image { object-position: 60% center; }
  .hero-content > p { font-size: 1rem; }

  .tool-grid { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .community-gallery { grid-template-columns: 1fr; }
  .community-tall { display: none; }

  .button-row .button { width: 100%; }

  .download-card {
    margin-inline: var(--gutter);
    flex-direction: column;
    align-items: flex-start;
  }
  .download-mascot {
    order: -1;
    width: 100%;
    max-width: none;
    height: 260px;
  }

  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
  }

  .feature-banner,
  .image-frame,
  .support-hero {
    border-radius: 14px;
  }
}