/* Mobile homepage composition; desktop and material previews keep their layouts. */
@media (max-width: 760px) {
  .home-page .hero {
    gap: 20px;
    padding: 12px 16px 16px;
    justify-content: flex-start;
  }

  .home-page .hero-copy {
    flex: none;
    justify-content: flex-start;
    padding: 0;
  }

  .home-page .hero h1 {
    font-size: clamp(1.5rem, 6.6vw, 1.875rem);
    line-height: 1.18;
    letter-spacing: -0.035em;
    margin-block: 16px 12px;
    text-wrap: initial;
  }

  .home-page .hero-lead {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .home-page .hero-lead br {
    display: none;
  }

  .home-page .hero-actions {
    margin-block: 18px;
  }

  .home-page .hero-actions .button {
    flex: 1;
    padding-inline: 10px;
    min-height: 46px;
  }

  .home-page .hero-benefits {
    margin: 0;
    gap: 10px;
  }

  .home-page .hero-benefits li {
    flex-direction: column;
    gap: 5px;
  }

  .home-page .hero-benefits svg {
    width: 20px;
    height: 20px;
  }

  .home-page .hero-visual {
    display: block;
    flex: 1 0 auto;
    height: auto;
    min-height: 0;
    max-height: 360px;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }

  .home-page .hero-visual img {
    object-position: 30% center;
  }

  .home-page .visual-note {
    display: none;
  }

  .home-page .visual-label {
    max-width: calc(100% - 24px);
    padding: 6px 9px;
    font-size: 0.6875rem;
    line-height: 1.4;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .home-page .hero {
    padding-block: 12px;
  }

  .home-page .hero-visual {
    aspect-ratio: 3 / 2;
  }
}