#mobile-menu-toggle{display:none}
#mobile-menu:not([open]){display:none}
#mobile-menu{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100%);max-width:100%;height:100dvh;max-height:100dvh;box-sizing:border-box;border:0;padding:24px 26px max(26px,env(safe-area-inset-bottom));background:var(--bg);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;box-shadow:-20px 0 80px #102c5230}
#mobile-menu::backdrop{background:#081d38a6;backdrop-filter:blur(3px)}
.mobile-menu-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.mobile-menu-top img{width:220px;max-width:calc(100% - 64px);height:auto;border-radius:6px}
.mobile-menu-top button{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;color:var(--ink);background:var(--surface);cursor:pointer}
#mobile-menu nav>a,#mobile-menu summary{display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:14px 0;box-sizing:border-box;font-size:1.15rem;font-weight:500;text-decoration:none;cursor:pointer;list-style:none;color:var(--ink)}
#mobile-menu nav>a,#mobile-menu nav>details{border-bottom:1px solid var(--line)}
#mobile-menu summary::-webkit-details-marker{display:none}
#mobile-menu summary svg{flex:none;transition:transform .15s}
#mobile-menu details[open]>summary{color:var(--accent)}
#mobile-menu details[open]>summary svg{transform:rotate(180deg)}
.mobile-menu-children{display:grid;gap:2px;padding:0 0 18px 16px}
.mobile-menu-children a{display:flex;align-items:center;min-height:48px;padding:10px 14px;border-radius:8px;text-decoration:none;font-size:1rem;line-height:1.45;color:var(--ink)}
#mobile-menu a[aria-current=page]{background:var(--accent-soft);color:var(--accent)}
#mobile-menu a:hover{color:var(--accent)}
#mobile-menu :is(a,button,summary):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.mobile-menu-theme{padding-top:28px;display:flex}
.mobile-menu-theme button{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:44px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:24px;cursor:pointer;font:inherit;font-size:.9rem}
.mobile-menu-theme .theme-sun{display:none}:root[data-theme=dark] .mobile-menu-theme .theme-moon{display:none}:root[data-theme=dark] .mobile-menu-theme .theme-sun{display:block}
html.mobile-menu-open{overflow:hidden}
@media(max-width:1100px){
 .mobile-menu-ready .site-header{display:flex;flex-wrap:nowrap;gap:12px;padding-block:14px}
 .mobile-menu-ready .site-header>.brand{width:220px;max-width:calc(100% - 148px);margin:0;min-width:0}
 .mobile-menu-ready .site-header>nav{display:none}
 .mobile-menu-ready .header-actions{gap:4px;margin-left:auto}
 .mobile-menu-ready .header-actions .header-icon{width:44px;height:44px;border:0}
 .mobile-menu-ready #mobile-menu-toggle:not([hidden]){display:inline-flex}
}
@media(prefers-reduced-motion:reduce){#mobile-menu summary svg{transition:none}}
/* Keep the full original navigation readable as pages are restored. */
.site-header>nav>a,.site-header>nav>.courses-menu>a{white-space:nowrap}
@media(min-width:1101px) and (max-width:1400px){.site-header{gap:20px}.site-header>.brand{width:270px}.site-header>nav{gap:20px}}

/* Primary invitation to try the Academy, shared by desktop and mobile. */
.site-header>nav .nav-free-cta,#mobile-menu nav>a.nav-free-cta{display:inline-flex;align-items:center;justify-content:center;align-self:center;min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:10px;background:var(--button);color:var(--button-text);font-weight:600;line-height:1.3;text-decoration:none}
.site-header>nav .nav-free-cta:hover,#mobile-menu nav>a.nav-free-cta:hover{filter:brightness(1.1)}
.site-header>nav .nav-free-cta[aria-current=page],#mobile-menu nav>a.nav-free-cta[aria-current=page]{background:var(--button);color:var(--button-text);border-color:transparent}
#mobile-menu nav>a.nav-free-cta{width:100%;min-height:52px;margin:8px 0 12px}
@media(min-width:1101px) and (max-width:1400px){.site-header>nav{gap:16px}}
@media(min-width:1101px) and (max-width:1240px){.site-header>.brand{width:250px}}