.mobile-menu-toggle { display: none; }
.mobile-menu-toggle, .mobile-menu-close {
    align-items: center; justify-content: center; width: 44px; height: 44px;
    padding: 0; flex-shrink: 0; border: 1px solid #deded9; border-radius: 10px;
    color: #111; background: #fff; cursor: pointer;
}
.mobile-menu {
    position: fixed; inset: 0 0 0 auto; margin: 0;
    width: min(88vw, 400px); max-width: 100vw;
    height: 100vh; height: 100dvh; max-height: 100dvh;
    padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
    border: 0; border-left: 1px solid #e0e3dd;
    background: #fafbf7; color: #17241e; overflow-y: auto; overscroll-behavior: contain;
    box-shadow: -16px 0 60px #0002;
}
.mobile-menu[open] { display: flex; flex-direction: column; animation: mobile-menu-enter .22s ease-out; }
.mobile-menu::backdrop { background: #11201980; backdrop-filter: blur(4px); }
.mobile-menu-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mobile-menu-heading > span { font: 700 1.2rem var(--font-display); letter-spacing: -.03em; }
.mobile-menu-close { display: flex; font-size: 28px; }
.mobile-menu-intro { margin: 18px 0 28px; color: #626b63; font-size: .9rem; }
.mobile-menu-links { display: grid; gap: 4px; }
.mobile-menu-links a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 64px; padding: 16px 4px; border-bottom: 1px solid #dce2da;
    color: #182a21; font: 600 1.2rem var(--font-display); text-decoration: none;
}
.mobile-menu-links .mobile-menu-feature {
    padding: 20px 16px; margin-bottom: 16px; border: 0; border-radius: 14px;
    color: #fff; background: #176c5a;
}
.mobile-menu-feature strong, .mobile-menu-feature small { display: block; }
.mobile-menu-feature small { margin-top: 6px; font: 400 .82rem var(--font-body); color: #e2f5ec; }
.mobile-menu-footer { margin-top: auto; padding-top: 40px; }
.mobile-menu-footer > span { display: block; color: #626b63; font-size: .75rem; }
.mobile-menu-footer button {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    width: 100%; min-height: 48px; margin-top: 16px; padding: 12px 0;
    border: 0; border-top: 1px solid #dce2da; background: none; color: #344b40;
    font: 500 .85rem var(--font-body); text-align: left; cursor: pointer;
}
.mobile-menu a:focus-visible, .mobile-menu button:focus-visible, .mobile-menu-toggle:focus-visible {
    outline: 3px solid #2e987c; outline-offset: 3px;
}
@keyframes mobile-menu-enter { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (max-width: 992px) {
    .navbar .nav-links { display: none; }
    .mobile-menu-toggle { display: flex; }
    .navbar .nav-actions { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .mobile-menu[open] { animation: none; } }
