/* Home-only responsive alignment fixes.
   Keep shared site styles untouched; this file only corrects Home layout edge cases. */

.home-page .hero-copy,
.home-page .hero-products,
.home-page .section-intro,
.home-page .steps,
.home-page .product-grid,
.home-page .business-grid,
.home-page .business-card,
.home-page .business-card > div,
.home-page .news,
.home-page .news-items,
.home-page .news-items article {
  min-width: 0;
}

.home-page .section-intro h2,
.home-page .business-card h3,
.home-page .news p {
  overflow-wrap: break-word;
}

/* Tablet / small desktop: keep the five-card hero inside the visual field.
   The previous 20% step + 25% card width pushed card 5 past the right edge. */
@media (min-width: 641px) and (max-width: 950px) {
  .home-page .hero {
    min-height: 500px;
    overflow: hidden;
  }

  .home-page .hero-products {
    left: 42%;
    right: 2%;
    top: 68px;
  }

  .home-page .hero-card {
    left: calc(var(--i) * 18.25%);
    width: 24%;
    padding-left: 9px;
    padding-right: 9px;
  }

  .home-page .hero-card h3 {
    font-size: clamp(11px, 1.55vw, 13px);
    line-height: 1.2;
    overflow-wrap: break-word;
  }

  .home-page .hero-card p {
    line-height: 1.55;
  }

  .home-page .hero-card .card-meta {
    gap: 2px;
  }

  .home-page .steps {
    gap: 14px;
  }

  .home-page .steps strong {
    font-size: 13px;
  }

  .home-page .steps p {
    font-size: 12px;
  }

  .home-page .product-grid {
    gap: 8px;
  }

  .home-page .product-card {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* The generic <=950 rule stacks every .hero-actions vertically.
     On the For Business block that wastes width and creates uneven spacing. */
  .home-page .business-section .hero-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }

  .home-page .news-items article {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Mobile hero: scale headline with viewport instead of forcing 68px at 360px.
   Also keep the final fan card inside the stack width. */
@media (max-width: 640px) {
  .home-page .hero h1 {
    font-size: clamp(48px, 16vw, 68px);
    line-height: 1;
  }

  .home-page .hero-products {
    overflow: hidden;
  }

  .home-page .hero-card {
    width: 26%;
    left: calc(var(--i) * 18.3%);
  }

  .home-page .hero-card h3 {
    overflow-wrap: break-word;
  }

  .home-page .product-grid .product-card {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 120px);
  }

  .home-page .business-card > div {
    min-width: 0;
  }

  .home-page .business-card h3 {
    overflow-wrap: break-word;
  }
}

@media (max-width: 390px) {
  .home-page .hero-actions {
    gap: 12px;
  }

  .home-page .hero-actions .button {
    padding-left: 15px;
    padding-right: 15px;
  }

  .home-page .product-grid .product-card {
    grid-template-columns: minmax(0, 1fr) 104px;
    column-gap: 12px;
  }

  .home-page .business-card {
    gap: 14px;
  }

  .home-page .business-card h3 {
    font-size: 21px;
  }
}