/* TradeConnect mobile fit layer
   Goal: make pages phone-safe without changing app behavior or Maxx/chat option styling. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

/* Do not restyle Maxx chat option buttons or matching-flow controls. */

@media (max-width: 900px) {
  body {
    width: 100%;
  }

  main,
  section,
  .main,
  .wrap,
  .container,
  .section,
  .hero,
  .how,
  .footer,
  .guarantee-section {
    max-width: 100% !important;
  }

  .nav,
  nav {
    max-width: 100vw;
  }

  .nav-inner {
    max-width: 100%;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .nav-links.open,
  .mobile-nav-menu.open {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .hero,
  .section,
  .how,
  .guarantee-section,
  .footer,
  .main,
  .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero-inner,
  .how-inner,
  .footer-inner,
  .footer-bottom,
  .guarantee-inner,
  .container {
    max-width: 100% !important;
  }

  .cards,
  .stats,
  .stats-bar,
  .grid,
  .pro-grid,
  .benefits-grid,
  .steps,
  .reviews-grid,
  .pricing-grid,
  .plans-grid,
  .form,
  .features-grid,
  .trust-grid {
    min-width: 0;
  }

  .table-wrap,
  .messages,
  .company-list,
  .results-card,
  .review-form,
  .search-card,
  .panel,
  .section-card,
  .card,
  .login-box,
  .login-card {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table,
  .table {
    max-width: 100%;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .nav-cta,
  .login-btn,
  .save-btn,
  .smallbtn,
  .home-btn,
  .call-btn,
  .plan-upgrade-btn {
    white-space: normal;
    text-align: center;
  }

  .lead-actions,
  .form-actions,
  .hero-cta,
  .hero-btns,
  .actions,
  .rebook-actions,
  .status-btns {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .lead-card,
  .pro,
  .perk,
  .profile-card,
  .review-card,
  .company-option,
  .stat,
  .section-card,
  .card {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  h1,
  .title,
  .hero h1 {
    overflow-wrap: anywhere;
  }

  .hero {
    padding-top: 42px !important;
    padding-bottom: 34px !important;
  }

  .hero h1,
  .title {
    line-height: 0.98 !important;
  }

  .stats,
  .stats-bar,
  .cards {
    grid-template-columns: 1fr !important;
  }

  .stat + .stat::before,
  .stat-item + .stat-item::before {
    display: none !important;
  }

  .grid,
  .pro-grid,
  .benefits-grid,
  .steps,
  .reviews-grid,
  .pricing-grid,
  .plans-grid,
  .form,
  .features-grid,
  .trust-grid {
    grid-template-columns: 1fr !important;
  }

  .top,
  .guarantee-inner,
  .footer-bottom,
  .review-top {
    display: block !important;
  }

  .side {
    width: 100% !important;
    min-width: 0 !important;
  }

  .shell {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .main {
    width: 100% !important;
    min-width: 0 !important;
  }

  .panel,
  .section-card,
  .search-card,
  .review-form,
  .results-card,
  .login-box,
  .card {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .table,
  table {
    min-width: 620px;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 420px) {
  .nav-logo,
  .logo,
  .brand {
    letter-spacing: 1px !important;
  }

  .hero h1,
  .title {
    font-size: clamp(34px, 12vw, 44px) !important;
  }

  .num,
  .stat-val,
  .stat-num {
    font-size: clamp(30px, 11vw, 42px) !important;
  }

  .nav-inner {
    gap: 10px;
  }
}