/* The site menu: Products, Academy, a Services dropdown, and a button menu on phones. Used by index.html and every page under products/. */
.nav-desktop { display: none; align-items: center; gap: 2rem; }
@media (min-width: 1024px) { .nav-desktop { display: flex; } .menu-btn { display: none !important; } .mobile-menu { display: none !important; } }

.nav-drop { position: relative; }
.nav-drop-btn { background: none; border: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: .4rem; padding: 0; }
.nav-drop-btn svg { width: 10px; height: 10px; transition: transform .2s; }
.nav-drop[data-open="true"] .nav-drop-btn svg { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 16px); left: -1rem; min-width: 200px; display: none; padding: .5rem; background: rgba(13, 13, 13, .98); border: 1px solid #2A2A2A; border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.nav-menu::before { content: ''; position: absolute; top: -18px; left: 0; right: 0; height: 18px; } /* keeps the menu open while the pointer crosses the gap */
.nav-drop:hover .nav-menu, .nav-drop[data-open="true"] .nav-menu { display: block; }
.nav-menu a { display: block; padding: .65rem .9rem; border-radius: 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-decoration: none; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(0, 255, 136, .08); color: #00FF88; outline: none; }
.nav-link[aria-current="page"] { color: #00FF88; }

.menu-btn { background: none; border: 1px solid #2A2A2A; border-radius: 10px; width: 44px; height: 44px; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.menu-btn:focus-visible, .nav-drop-btn:focus-visible { outline: 2px solid #00FF88; outline-offset: 3px; }
.menu-btn svg { width: 22px; height: 22px; }
.mobile-menu { display: none; border-top: 1px solid #2A2A2A; padding: .5rem 0 1.5rem; }
.mobile-menu[data-open="true"] { display: block; }
.mobile-menu a { display: block; padding: .9rem 0; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.mobile-menu .mm-label { padding: .9rem 0 .2rem; font-size: .65rem; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; color: #00FF88; }
.mobile-menu .mm-sub a { padding-left: 1rem; color: #A8A8A8; font-size: .78rem; }
.mobile-menu a.mm-cta { display: inline-block; margin-top: 1.25rem; padding: .85rem 1.5rem; border: 0; background: #00FF88; color: #0D0D0D; border-radius: 8px; font-size: .75rem; }