/* Visual-only homepage refinement; existing production markup, palette and fonts. */
.page-home .hero-copy > p { max-width: 32rem; }
.page-home .hero-kicker { line-height: 1.8; flex-wrap: wrap; }
.page-home .categories { gap: 14px; }
.page-home .categories > a {
  padding: 16px; min-height: 78px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface); align-items: center;
}
.page-home .categories > a:hover { background: #e7ebdd; border-color: #8ca476; }
.page-home .categories > a > span:not(.category-icon) { overflow-wrap: anywhere; }
.page-home .category-icon { background: var(--paper); }
.page-home .city-grid { gap: 12px; border: 0; }
.page-home .city-grid > a {
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  padding: 24px 18px; min-width: 0;
}
.page-home .city-grid > a:hover { background: #dfe8d3; }
.page-home .city-grid h3 { margin-block: 20px 12px; overflow-wrap: anywhere; }
.page-home .how-section li { min-width: 0; border-block-start: 1px solid var(--line); padding-block-start: 20px; }
@media (max-width: 800px) {
  .page-home .categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .page-home .categories > a { padding: 14px 12px; gap: 10px; }
  .page-home .categories > a:last-child { grid-column: auto; }
  .page-home .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-home .hero-copy > p { max-width: 100%; }
}
@media (max-width: 380px) {
  .page-home .categories > a { flex-wrap: wrap; font-size: 13px; }
  .page-home .city-grid > a { padding: 20px 14px; }
  .page-home .city-grid h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .hero-art *, .page-home .categories > a, .page-home .city-grid > a { animation: none !important; transition: none !important; }
}
/* Keep whole Arabic category names within adequately sized desktop cards. */
@media (min-width: 801px) {
  .page-home .categories { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .page-home .categories > a > span:not(.category-icon) { overflow-wrap: normal; }
}