/* MUNK global responsive safety layer — presentation only; loaded after all page styles. */
:root {
  color-scheme: dark;
  scrollbar-color: #294158 #08131f;
  scrollbar-width: thin;
}
*,
*::before,
*::after {
  scrollbar-color: #294158 #08131f;
  scrollbar-width: thin;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: #08131f;
}
*::-webkit-scrollbar-thumb {
  background: #294158;
  border: 2px solid #08131f;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #3b5c78;
}
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
main,
main > *,
.site-header,
.site-footer,
.nav-wrap,
.page-shell,
.page-content,
.content-wrap,
.dashboard-shell,
.munk-dashboard-shell,
.munk-admin-shell,
.munk-dashboard-main,
.munk-admin-main {
  min-width: 0;
  max-width: 100%;
}
img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
}
pre,
.code-block,
.api-code,
code {
  overflow-wrap: anywhere;
  word-break: break-word;
}
input,
select,
textarea,
button {
  max-width: 100%;
}
main table,
main .table-responsive,
main .table-wrap,
main .table-scroll,
main .data-table-wrap {
  max-width: 100%;
}
main .table-responsive,
main .table-wrap,
main .table-scroll,
main .data-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: #294158 #08131f;
  scrollbar-width: thin;
}
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    padding-inline: 22px;
  }
  .hero-art {
    min-width: 0;
    margin-right: 0;
  }
  .hero-art img {
    width: 100%;
    max-width: 100%;
  }
  .section,
  .cta,
  .trust-strip,
  .footer-main,
  .footer-bottom {
    max-width: 100%;
  }
  .main-nav {
    min-width: 0;
  }
}
@media (max-width: 768px) {
  html,
  body {
    overflow-x: clip;
  }
  main {
    width: 100%;
    min-width: 0;
  }
  .section,
  .page-shell,
  .page-content,
  .content-wrap,
  .profile-page,
  .admin-profiles-page {
    width: calc(100% - 28px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
  .hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    padding: 38px 18px 30px;
  }
  .hero-art {
    display: none;
  }
  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 8px;
    padding: 18px 14px;
  }
  .trust-strip div {
    min-width: 0;
    padding: 0 8px;
    border-right: 0;
  }
  .feature-grid,
  .mini-grid,
  .directory-grid,
  .active-member-grid,
  .dashboard-grid,
  .munk-admin-stats,
  .profile-form-grid,
  .analytics-grid,
  .metric-grid,
  .stats-grid,
  .kpi-grid,
  .campaign-grid,
  .cards-grid,
  .profile-edit-layout,
  .admin-profile-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .feature-card,
  .mini-card,
  .panel,
  .card,
  .admin-panel,
  .profile-card,
  .dashboard-card {
    min-width: 0;
    max-width: 100%;
  }
  .cta,
  .footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 18px;
    gap: 14px;
  }
  .main-nav {
    max-width: calc(100vw - 32px);
  }
  .nav-wrap,
  .nav-actions,
  .actions,
  .inline-actions,
  .form-actions,
  .commission-review-actions {
    min-width: 0;
    flex-wrap: wrap;
  }
  main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #294158 #08131f;
    scrollbar-width: thin;
  }
  main table th,
  main table td {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .panel,
  .card,
  .section,
  .page-shell,
  .admin-panel,
  .profile-card {
    overflow-wrap: anywhere;
  }
  .chart-container,
  .chart-wrap,
  .analytics-chart,
  .graph-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  canvas,
  svg {
    max-width: 100%;
  }
}
@media (max-width: 560px) {
  .section {
    padding-top: 42px;
    padding-bottom: 42px;
  }
  .feature-grid,
  .mini-grid,
  .directory-grid,
  .active-member-grid,
  .profile-edit-layout,
  .admin-profile-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .dashboard-grid,
  .munk-admin-stats,
  .profile-form-grid,
  .analytics-grid,
  .metric-grid,
  .stats-grid,
  .kpi-grid,
  .campaign-grid,
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .feature-card,
  .mini-card {
    padding: 20px;
  }
  .feature-card h3 {
    font-size: 21px;
    overflow-wrap: anywhere;
  }
  .nav-wrap {
    padding-inline: 10px;
  }
  .nav-actions {
    gap: 6px;
  }
  .language-picker {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .form-grid,
  .profile-form-grid,
  .commission-review-reference {
    min-width: 0;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 360px) {
  .dashboard-grid,
  .munk-admin-stats,
  .profile-form-grid,
  .analytics-grid,
  .metric-grid,
  .stats-grid,
  .kpi-grid,
  .campaign-grid,
  .cards-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .section,
  .page-shell,
  .page-content,
  .content-wrap {
    width: calc(100% - 20px);
  }
}
/* Respect user motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
