/* Contain long RTL copy and mixed technical identifiers at narrow widths. */
html[dir="rtl"] body,
html[dir="rtl"] .site-header,
html[dir="rtl"] main,
html[dir="rtl"] footer {
  width: 100%;
  max-width: 100%;
}

.hero > div,
.content,
.cta,
.contact,
.stats,
.grid,
.product-grid,
.product-card,
.product-card > div {
  min-width: 0;
  max-width: 100%;
}

h1, h2, h3, p, a, dt, dd {
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .site-header { gap: 10px; padding-inline: 14px; }
  .hero { padding-inline: 20px; }
  .hero h1 { font-size: clamp(30px, 10vw, 38px); }
  .content h2, .cta h2, .contact h2, .stats h2 { font-size: 30px; }
  .product-card h3 { font-size: 22px; }
  .eyebrow { letter-spacing: 3px; }
}