.mobile-nav{ display: none;} @media (max-width: 860px){ .site-nav{ display: none;} .site-header-inner{ justify-content: space-between;} .mobile-nav{ display: block; position: relative;} .mobile-nav-btn{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); background: var(--color-neutral-white); cursor: pointer; list-style: none;} .mobile-nav-btn::-webkit-details-marker{ display: none;} .mobile-nav-bars{ position: relative; display: block; width: 22px; height: 2px; border-radius: 1px; background: var(--color-neutral-ink); transition: background .15s ease;} .mobile-nav-bars::before, .mobile-nav-bars::after{ content: ""; position: absolute; left: 0; width: 22px; height: 2px; border-radius: 1px; background: var(--color-neutral-ink); transition: transform .2s ease, top .2s ease;} .mobile-nav-bars::before{ top: -7px;} .mobile-nav-bars::after{ top: 7px;} .mobile-nav[open] .mobile-nav-bars{ background: transparent;} .mobile-nav[open] .mobile-nav-bars::before{ top: 0; transform: rotate(45deg);} .mobile-nav[open] .mobile-nav-bars::after{ top: 0; transform: rotate(-45deg);} .mobile-nav-panel{ position: absolute; top: calc(100% + 10px); right: calc(-1 * var(--space-md)); z-index: 40; min-width: 240px; max-width: calc(100vw - 32px); background: var(--color-neutral-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(26, 27, 31, .12); padding: var(--space-xs) 0;} .mobile-nav-panel ul{ list-style: none; margin: 0; padding: 0;} .mobile-nav-panel a{ display: block; min-height: 44px; padding: 12px 18px; color: var(--color-neutral-700); text-decoration: none; border-top: 1px solid var(--color-neutral-100);} .mobile-nav-panel li:first-child > a{ border-top: 0;} .mobile-nav-panel a:hover{ color: var(--color-primary-600);} .mobile-nav-panel a.active{ color: var(--color-primary-600); font-weight: 600;} .mobile-nav-sub a{ padding-left: 34px; font-size: .95rem; color: var(--color-neutral-600);}} @media (prefers-reduced-motion: reduce){ .mobile-nav-bars, .mobile-nav-bars::before, .mobile-nav-bars::after{ transition: none;}}