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

body {
  position: relative;
}

.topbar,
.hero,
.section,
.auth-shell,
.dashboard-shell,
.checkout-shell,
.user-layout,
.admin-layout,
.agent-layout,
.support-grid,
.planner,
.apply-layout,
.intro-strip {
  max-width: 100%;
}

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

  .topbar,
  .dashboard-page .topbar {
    max-width: 100vw;
    overflow: hidden;
  }

  .topbar .nav {
    flex-wrap: wrap;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .topbar .nav a {
    flex: 0 1 auto;
  }

  body:not(.dashboard-page) .topbar .nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  body:not(.dashboard-page) .topbar .nav a {
    min-width: 0;
    padding: 6px 4px;
    text-align: center;
    white-space: nowrap;
  }

  .hero,
  .section,
  .auth-shell,
  .dashboard-shell,
  .checkout-shell,
  .user-layout,
  .admin-layout,
  .agent-layout,
  .support-grid,
  .planner,
  .apply-layout,
  .intro-strip {
    min-width: 0;
  }
}