html.mobile-menu-open{overflow:hidden}
@media(max-width:700px){
  .header.mobile-menu-open{height:100dvh;max-height:100dvh;background:var(--vyne-paper,#f5f4ef);backdrop-filter:none;align-items:flex-start}
  .header.mobile-menu-open>.logo,.header.mobile-menu-open>.button{visibility:hidden;pointer-events:none}
  .header.mobile-menu-open .menu-toggle{position:absolute;right:20px;top:12px;z-index:2}
  .mobile-nav{display:flex;position:absolute;top:64px;left:20px;right:20px;bottom:0;height:calc(100dvh - 64px);padding:20px 36px 48px;border:0;border-radius:0;box-shadow:none;background:var(--vyne-paper,#f5f4ef);overflow-y:auto;gap:0;opacity:0;transform:translateY(-20px);transition:opacity .3s ease-in-out,transform .3s ease-in-out;overscroll-behavior:contain}
  .mobile-nav[hidden]{display:none}
  .header.mobile-menu-open .mobile-nav{opacity:1;transform:translateY(0)}
  .mobile-primary{display:flex;flex-direction:column;gap:0}
  .mobile-primary a{font-size:22px;line-height:1.35;padding:8px 0;border-radius:0}
  .mobile-secondary{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin-top:44px}
  .mobile-secondary a{font-size:16px;line-height:1.3;padding:9px 0;color:#101d1c99;border-radius:0}
  .mobile-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:36px}
  .mobile-actions .button{font-size:16px;line-height:1.25;min-height:40px;padding:10px 16px;text-align:center;justify-content:center;border:0;border-radius:999px}
  .mobile-actions .button.ghost{background:#101d1c06}
  .mobile-nav a:hover{background:none;opacity:.6}
  .mobile-nav .button:hover{background:var(--vyne-pine);color:var(--vyne-paper);opacity:1}
}
@media(max-width:350px){.mobile-nav{padding-left:20px;padding-right:20px}.mobile-primary a{font-size:20px}.mobile-secondary{column-gap:14px;margin-top:28px}}
@media(prefers-reduced-motion:reduce){.mobile-nav{transition:none}}