/* Kept separate so the homepages' critical CSS and all other pages share one menu. */
.free-menu { position: relative; flex: 0 0 auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.free-menu + .free-menu { margin: 0; }
.free-menu summary { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 9px; color: var(--soft); font-size: 15px; font-weight: 600; white-space: nowrap; }
.free-menu summary::after { content: ''; float: none; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.free-menu[open] summary::after { transform: translateY(2px) rotate(225deg); }
.free-menu[open] summary { color: var(--accent); }
.free-menu-panel { position: absolute; z-index: 30; top: calc(100% + 8px); inset-inline-end: 0; width: min(290px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 14px 36px #0006; }
.free-menu-panel a { display: block; padding: 12px; border-radius: 7px; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.4; }
.free-menu-panel a:hover, .free-menu-panel a:focus-visible { background: var(--panel-2); text-decoration: none; }
.free-menu-panel small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 400; }
:is(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 1080px) { .top .nav { gap: 13px; } .top .wrap { gap: 12px; } }
@media (max-width: 760px) { .top .free-menu { margin-inline-start: auto; } .top .lang { margin-inline-start: 0; } }
@media (max-width: 540px) { .top .wrap { gap: 9px; padding-inline: 16px; } .top .brand img { width: 108px; height: auto; } .top > .wrap > .btn { display: none; } }