/* Mobile overrides for the LODE marketing pages.
   The page layout comes from a design-tool export that uses inline styles,
   so these rules use !important + attribute selectors to win at small sizes. */

@media (max-width: 860px) {
  /* Any multi-column grid collapses to a single column. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* Tighten the 48px desktop gutters. */
  nav[style] {
    padding: 12px 20px !important;
    flex-wrap: wrap;
    row-gap: 10px;
  }

  nav[style] > div:last-child {
    gap: 16px !important;
    flex-wrap: wrap;
    row-gap: 10px;
  }

  /* Compact sticky nav: logo + "Get the App" pill on one row, links below. */
  nav[style] > div:last-child > a[href*="apps.apple.com"] {
    position: absolute;
    top: 10px;
    right: 16px;
    padding: 8px 16px !important;
    font-size: 14px !important;
  }

  nav[style] img[src*="lode-mark"] { height: 28px !important; }
  nav[style] .lode-wordmark { font-size: 17px !important; }

  header[style],
  header[style] > div[style],
  main[style] > div[style],
  section[style],
  x-dc div > section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  section[style*="padding: 96px"],
  section[style*="padding: 88px"],
  header[style*="padding: 88px"],
  div[style*="padding: 96px"],
  div[style*="padding: 120px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Display type scales down; Audiowide runs wide. */
  h1.lode-wordmark {
    font-size: clamp(32px, 9.5vw, 52px) !important;
    line-height: 1.12 !important;
  }

  h2.lode-wordmark {
    font-size: clamp(25px, 7vw, 36px) !important;
  }

  /* Device mockups shrink to the phone screen and drop staggered offsets. */
  img[src*="assets/mockups/"] {
    width: min(300px, 82vw) !important;
    max-width: 100%;
    transform: none !important;
  }

  /* Side-by-side mockup pairs and hero stat rows wrap. */
  div[style*="justify-content: center"][style*="gap: 18px"],
  div[style*="gap: 40px"] {
    flex-wrap: wrap;
    row-gap: 20px;
  }

  footer[style] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px;
    padding: 28px 20px !important;
  }

  footer[style] > div {
    flex-wrap: wrap;
    gap: 14px 18px !important;
  }
}

/* ---- Home hero, mobile: headline → download CTA → mockup peeking into view ---- */
@media (max-width: 860px) {
  .hero-grid {
    padding-top: 32px !important;
    padding-bottom: 48px !important;
    gap: 0 !important;
  }

  .hero-copy {
    gap: 18px !important;
    align-items: center;
    text-align: center;
  }

  .hero-copy > .lode-label { order: 0; }
  .hero-copy > h1 { order: 1; }
  .hero-cta { order: 2; }
  .hero-mockup-mobile { order: 3; }
  .hero-copy > p { order: 4; }
  .hero-stats { order: 5; }

  /* The download button is the hero's primary action. */
  .hero-cta {
    flex-direction: column;
    align-items: center !important;
    gap: 12px !important;
    width: 100%;
    margin-top: 4px;
  }

  .hero-cta img {
    height: 64px !important;
    filter: drop-shadow(0 0 28px rgba(28, 107, 255, 0.55));
  }

  .hero-mockup-mobile {
    display: block !important;
    width: min(54vw, 220px);
    margin: 6px auto 0;
    filter: drop-shadow(0 0 44px rgba(28, 107, 255, 0.4)) drop-shadow(0 20px 55px rgba(0, 0, 0, 0.7));
  }

  .hero-side { display: none !important; }

  .hero-copy > p { max-width: 36ch; }

  .hero-stats {
    justify-content: center;
    gap: 28px !important;
    margin-top: 4px !important;
  }
}

@media (max-width: 400px) {
  nav[style] > div:last-child {
    gap: 12px !important;
    font-size: 14px;
  }
}