/* Shared responsive safeguards */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

@media (max-width: 991.98px) {
  .navbar .container { padding-left: 20px; padding-right: 20px; }
  .hero-section .row, .about-section .row { --bs-gutter-x: 1.5rem; }
  .main-visual-card { max-width: calc(100% - 30px); }
}

@media (max-width: 767.98px) {
  .container { width: 100%; }
  .section-heading { gap: 18px; }
  .section-heading > div { margin-bottom: 4px; }
  .hero-actions .btn { flex: 1 1 190px; }
  .trust-row { align-items: flex-start; }
  .trust-row > span:last-child { max-width: 210px; }
  .detail-page .row, .form-shell .row { --bs-gutter-x: 1rem; }
}

@media (max-width: 575.98px) {
  .navbar-brand { font-size: .98rem; }
  .brand-mark { width: 34px; height: 34px; }
  .hero-copy h1 { max-width: 100%; overflow-wrap: anywhere; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { width: 100%; }
  .item-footer { gap: 10px; align-items: flex-start; }
  .item-footer span { line-height: 1.4; }
  .item-footer a { white-space: nowrap; }
  .listing-header .d-flex { width: 100%; }
  .listing-header .d-flex .btn { flex: 1; }
  .auth-card h1, .form-heading h1 { overflow-wrap: anywhere; }
}