/* Responsive polish pass for mobile, tablet and AI-search friendly crawlable layout */
html, body { max-width:100%; overflow-x:hidden !important; }
img, svg, video, canvas { max-width:100%; height:auto; }
* { min-width:0; }

/* Safer touch targets without changing the visual hierarchy */
a.brand,
button,
.btn,
.navlinks a,
.footer-nav a,
a.pill,
.mobile-menu-toggle,
#subpage-mobile-menu-toggle,
#global-mobile-menu-panel a {
  min-height:44px !important;
}
.mobile-menu-toggle,
#subpage-mobile-menu-toggle {
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  flex:0 0 46px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.navlinks a,
.footer-nav a,
a.pill,
#global-mobile-menu-panel a {
  display:inline-flex !important;
  align-items:center !important;
}

/* Better wrapping for long financial terms and domain names */
h1, h2, h3, h4, p, li, a, span, strong, .provider-name, .brand, .btn, .pill, .badge,
.meta-box, .signal, .score-note, .tier-price, .price-amount, .footer-network-grid a {
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Keep mobile header compact and robust */
@media (max-width: 760px) {
  .container { padding-left:16px !important; padding-right:16px !important; }
  .nav { min-height:68px !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; }
  .brand { max-width:calc(100% - 62px) !important; min-height:44px !important; }
  .brand span:last-child { white-space:normal !important; overflow-wrap:normal !important; }
  .hero { padding-top:24px !important; }
  .hero-grid, .hero-inner, .directory-layout, .subpage-grid, .pricing-grid, .pricing-grid-pro, .research-grid, .topic-grid, .cards-grid, .footer-grid {
    grid-template-columns:1fr !important;
  }
  .hero-copy, .hero-card, .filters-shell, .card, .legal-card, .footer-shell, .profile-modal-card, .lead-gate-card, .contact-card, .faq-card, .pricing-tier, .pricing-card, .content-card, .sidebar-card, .topic-card, .cta-panel {
    padding:20px !important;
    border-radius:18px !important;
  }
  .hero-copy h1, .hero h1, h1 {
    font-size:clamp(28px, 9.2vw, 36px) !important;
    line-height:1.08 !important;
    letter-spacing:-0.035em !important;
  }
  .hero-copy .lead, .lead {
    font-size:16px !important;
    line-height:1.62 !important;
  }
  .section-head h2, h2 { font-size:clamp(23px, 7vw, 30px) !important; line-height:1.14 !important; }
  h3 { font-size:clamp(19px, 5.6vw, 24px) !important; line-height:1.18 !important; }
  .hero-search { grid-template-columns:1fr !important; gap:12px !important; }
  .hero-search .search-input, .search-input, input, select, textarea, .select {
    width:100% !important;
    min-height:50px !important;
    font-size:16px !important;
  }
  .hero-search .btn, .filters-shell .btn, .provider-bottom .btn, .center-row .btn, .contact-card .btn, form .btn {
    width:100% !important;
    min-height:48px !important;
    justify-content:center !important;
  }
  .filters-grid, .filter-row, .filters-bar, #providers .filter-row, #providers .filters-bar, #providers .provider-grid, .provider-grid {
    grid-template-columns:1fr !important;
  }
  .provider-card { width:100% !important; }
  .provider-ident, .provider-bottom, .provider-actions, .price-line, .tier-actions {
    flex-wrap:wrap !important;
  }
  .provider-bottom .btn, .provider-actions .btn { flex:1 1 100% !important; }
  .meta-pills, .provider-badges, .provider-tags, .plan-features { gap:8px !important; }
  a.pill, .navlinks a, .footer-nav a { min-height:44px !important; }
  .pill:not(a), .badge, .provider-tags span, .meta-pills span { min-height:34px !important; }
  .toast-success, .form-confirmation-message, .success-message {
    max-width:calc(100vw - 32px) !important;
    word-break:normal !important;
  }
}

@media (max-width: 420px) {
  .container { padding-left:16px !important; padding-right:16px !important; }
  .brand span:last-child { font-size:14px !important; }
  .brand-mark { width:34px !important; height:34px !important; flex-basis:34px !important; }
  .hero-copy, .hero-card, .filters-shell, .card, .legal-card, .footer-shell, .profile-modal-card, .lead-gate-card, .contact-card, .faq-card, .pricing-tier, .pricing-card, .content-card, .sidebar-card, .topic-card, .cta-panel {
    padding:20px !important;
  }
  .hero-copy h1, .hero h1, h1 { font-size:clamp(28px, 9vw, 34px) !important; }
  .eyebrow { font-size:11px !important; line-height:1.2 !important; }
  .price-amount, .tier-price span { font-size:36px !important; }
}