/* Keep every part of the long page within reach on smaller screens. */
.menu-toggle{display:none;align-items:center;justify-content:center;gap:7px;background:transparent;border:1px solid #ffffff29;border-radius:999px;color:#f5f5f7;padding:8px 12px;font-size:13px;white-space:nowrap;transition:background .25s ease,border-color .25s ease}
.menu-toggle>span{display:inline-block;font-size:18px;line-height:1;transition:transform .3s ease}
.menu-toggle[aria-expanded="true"]>span{transform:rotate(45deg)}
.menu-toggle:hover{background:#ffffff0c;border-color:#d7c19670}
.page-menu{position:absolute;top:100%;left:0;right:0;background:#131316f7;border-bottom:1px solid #ffffff21;box-shadow:0 24px 40px #0005;backdrop-filter:blur(20px);animation:menu-arrive .28s ease both;max-height:calc(100dvh - 76px);overflow:auto}
.page-menu[hidden],.menu-toggle[hidden]{display:none}
.page-menu nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;padding:18px 24px 24px;max-width:800px}
.page-menu a{padding:13px 16px;border:1px solid #ffffff10;border-radius:12px;font-size:15px;color:#dedbe3;background:#ffffff03;transition:background .25s ease,transform .25s ease,border-color .25s ease}
.page-menu a:hover{background:#e8d3a80d;border-color:#e8d3a838;transform:translateY(-2px)}
.page-menu a:active{transform:scale(.98)}
@keyframes menu-arrive{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){header>nav{gap:10px}header .links{margin-left:auto}header .links>a{display:none}.menu-toggle{display:inline-flex}}
@media(max-width:370px){header>nav{padding-inline:14px;gap:8px}header .brand{font-size:15px}.cart-trigger{padding:8px 10px}.menu-toggle{padding:8px 10px;font-size:12px}.page-menu nav{padding:16px;gap:8px}.page-menu a{padding:12px}}
@media(prefers-reduced-motion:reduce){.page-menu{animation:none}.menu-toggle,.menu-toggle>span,.page-menu a{transition:none}.page-menu a:hover,.page-menu a:active{transform:none}}

/* The triangle is an additional shortcut; the academy name still returns to the top. */
.brand-group{display:flex;align-items:center;gap:4px;flex-shrink:0}
.brand-group .brand{white-space:nowrap}
.brand-menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:44px;margin-left:-6px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--gold);transition:background .25s ease,box-shadow .25s ease}
.brand-menu-toggle[hidden]{display:none}
.brand-menu-toggle>span{font-size:16px;line-height:1;display:block;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.brand-menu-toggle[aria-expanded="true"]>span{transform:rotate(90deg)}
.brand-menu-toggle:hover{background:#ead5a414;box-shadow:0 0 16px #ead5a410}
.page-menu nav{gap:8px 14px;max-width:900px}
.page-menu a{display:flex;align-items:center;gap:12px;min-height:53px;line-height:1.5}
.menu-index{font-size:12px;letter-spacing:.04em;color:#c8af83;font-variant-numeric:tabular-nums;flex-shrink:0}
@media(max-width:600px){.page-menu nav{grid-template-columns:1fr;padding:14px 20px 22px;gap:6px}.page-menu a{min-height:47px;padding:11px 14px;font-size:15px}.brand-group{gap:0}.brand-menu-toggle{flex-basis:28px;width:28px}.brand-menu-toggle>span{font-size:14px}}
@media(max-width:370px){header>nav{gap:6px}.brand-menu-toggle{flex-basis:24px;width:24px;margin-left:-4px}.cart-trigger{padding:8px}.menu-toggle{padding:8px;font-size:12px}.page-menu nav{padding:12px 16px 18px}}

/* Put the highlight inside each step instead of a detached oversized pseudo-element. */
.lesson-path{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.lesson-path>li:nth-child(n){display:block;min-width:0;min-height:162px;padding:22px 18px;border:1px solid #ffffff10;border-radius:16px;background:linear-gradient(140deg,#1b1722,#131116);transform-origin:center}
.lesson-path>li::before{content:none;display:none}
.lesson-path>li>span{display:block;font-size:13px;line-height:1.5;letter-spacing:.08em;color:#c2a2e4}
.lesson-path h4{font-size:17px;line-height:1.5;margin:14px 0 8px;font-weight:500}
.lesson-path p{font-size:14px;line-height:1.8;margin:0;color:#b1a8bb}
.course-cost-note{margin:26px 0 0;padding-top:18px;border-top:1px solid #ffffff0d;font-size:13px;line-height:1.8;color:#a69cad}
@media(hover:hover) and (pointer:fine){.lesson-path>li:hover{transform:translateY(-3px) scale(1.015);background:#211a2b;border-color:#c2a2e43b;box-shadow:0 10px 28px #0003}}
@media(max-width:1000px) and (min-width:761px){.lesson-path{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.lesson-path{grid-template-columns:1fr;gap:10px}.lesson-path>li:nth-child(n){min-height:100px;padding:20px;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;align-content:center;align-items:baseline}.lesson-path>li>span{grid-row:1 / 3}.lesson-path h4{font-size:18px;margin:0 0 5px}.lesson-path p{grid-column:2;margin:0}.course-cost-note{margin-top:22px;padding-top:18px}}
@media(prefers-reduced-motion:reduce){.brand-menu-toggle,.brand-menu-toggle>span{transition:none}.lesson-path>li:hover{transform:none}}

.faq details[open]>p{animation:faq-answer-arrive .28s ease both}
@keyframes faq-answer-arrive{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.faq details[open]>p{animation:none}}