/* Red Rosa v2.5 - hard mobile override */
@media screen and (max-width: 800px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .container {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-header {
    position: static !important;
    padding: 10px 0 !important;
  }

  .nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .brand {
    align-self: flex-start !important;
  }

  .nav .cta {
    width: 100% !important;
    max-width: none !important;
    padding: 12px 14px !important;
    text-align: center !important;
  }

  .navlinks {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    width: 100% !important;
    gap: 18px !important;
    padding: 4px 0 2px !important;
    font-size: 13px !important;
    -webkit-overflow-scrolling: touch;
  }

  .navlinks a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .hero {
    padding: 24px 0 34px !important;
  }

  .hero .container.hero-grid {
    display: block !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    min-height: 0 !important;
  }

  .hero-copy,
  .hero-art {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .hero-copy {
    padding: 22px 18px 24px !important;
  }

  .hero-copy h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 36px !important;
    line-height: 1.07 !important;
    letter-spacing: -0.03em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .hero-copy .lead {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .hero .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hero .actions .btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-art {
    margin-top: 16px !important;
    padding: 10px !important;
  }

  .hero-art img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .split,
  .cards,
  .cards.two,
  .step-grid,
  .support-grid,
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .brand-showcase {
    padding: 44px 0 50px !important;
  }

  .brand-art-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  .brand-art {
    width: 100% !important;
    height: auto !important;
  }

  h2 { font-size: 31px !important; }
  h3 { font-size: 20px !important; }
  .lead { font-size: 17px !important; }
}

@media screen and (max-width: 420px) {
  .hero-copy h1 {
    font-size: 33px !important;
  }
}