.mmenu { position: fixed; inset: 0; margin: 0; height: 100dvh; max-height: none; width: 100%; max-width: none; border: 0; background: var(--neutral-white); padding: 0; color: var(--fg); }
.mmenu::backdrop { background: transparent; }
.mmenu__inner { display: flex; height: 100dvh; flex-direction: column; }
.mmenu__bar { display: flex; height: 64px; flex-shrink: 0; align-items: center; gap: 16px; padding-inline: 16px; }
.mmenu__bar-left { display: flex; flex: 1 1 0%; align-items: center; gap: 16px; }
.mmenu__logo { display: inline-flex; flex: 1 1 0%; align-items: center; justify-content: center; border-radius: 6px; color: var(--blue); }
.mmenu__bar-right { display: flex; flex: 1 1 0%; align-items: center; justify-content: flex-end; }
.mmenu__scroll { flex: 1 1 0%; overflow-y: auto; }
.mmenu__body { display: flex; min-height: 100%; flex-direction: column; justify-content: space-between; gap: 32px; padding: 32px 16px 16px; }
.mmenu__root { display: flex; flex-direction: column; gap: 32px; }
.mmenu__list { display: flex; flex-direction: column; }
.mmenu__item { display: flex; height: 56px; width: 100%; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--fg-12);
  font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; color: var(--fg); }
.mmenu__actions { display: flex; flex-direction: column; gap: 12px; }
.mmenu__btn { display: flex; height: 48px; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); padding-inline: 12px; font-size: 1rem; line-height: 1.3; font-weight: 500; }
.mmenu__btn--blue { background: var(--blue-ink); color: var(--neutral-white); transition: background-color .15s var(--ease); }
@media (hover: hover) { .mmenu__btn--blue:hover { background: var(--blue-dark); } }