.nav-title { color: #555; font-size: .78rem; letter-spacing: .06em; margin: 12px 4px 6px; text-align: center; text-transform: uppercase; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a { border-radius: 8px; color: #111; display: block; font-size: .75rem; padding: 4px 10px; text-decoration: none; }
.nav-list a:hover, .nav-list a:focus { background: rgba(0,0,0,.07); }
.nav-group + .nav-group { border-top: 1px solid rgba(0,0,0,.1); margin-top: 10px; padding-top: 10px; }
.has-flyout { position: relative; }
.flyout { background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); color: #111; display: none; left: 100%; margin-left: 10px; max-height: 70vh; overflow: auto; padding: 10px; position: absolute; top: 0; width: 300px; z-index: 1000; }
.has-flyout:hover .flyout, .has-flyout:focus-within .flyout { display: block; }
.flyout-list { display: grid; gap: 4px 12px; grid-template-columns: 1fr 1fr; list-style: none; margin: 0; padding: 0; }
.flyout-heading { color: #666; font-size: 12px; font-weight: 700; grid-column: 1 / -1; margin: 8px 0 4px; pointer-events: none; text-transform: uppercase; }
.flyout-list a { padding: 8px 10px; }
@media (max-width: 800px) { .left-section nav { display: none; } }