@media (max-width: 800px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    .topbar, .hero, .page-heading, .form-shell, .auth-wrap, .case-header, .case-grid { width: 100%; max-width: 100%; }
    .topbar { padding: 0 14px; gap: 10px; }
    .topbar nav { gap: 0; }
    .nav-admin { padding: 9px 11px; font-size: 12px; white-space: nowrap; }
    .brand { gap: 8px; font-size: 14px; white-space: nowrap; }
    .brand-mark { width: 34px; height: 34px; }
    .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; padding: 58px 24px 65px; }
    .hero-copy { min-width: 0; }
    .hero-copy > p { font-size: 18px; }
    .actions { align-items: stretch; flex-direction: column; }
    .actions .button { width: 100%; }
    .steps, .grid.two, .grid.three, .auth-wrap, .case-grid, .metrics { grid-template-columns: minmax(0, 1fr); }
    .form-card { grid-template-columns: 42px minmax(0, 1fr); }
    .form-card, .section-body, .split-title, label, input, select, textarea { min-width: 0; max-width: 100%; }
    .section-body { padding: 22px 18px; overflow-wrap: anywhere; }
    .page-heading h1, .hero h1 { overflow-wrap: anywhere; }
    .case-header, .dashboard-head { align-items: flex-start; flex-direction: column; }
    .page-heading h1 { font-size: 38px; }
    .auth-wrap { gap: 30px; padding-top: 50px; }
    .auth-intro h1 { font-size: 42px; }
}

@media (max-width: 430px) {
    .brand strong { display: none; }
    .topbar nav { display: none; }
    .hero h1 { font-size: 40px; }
}