/* The site's phone menu (docs/28-site-v3.md, Section 10), on every page in both languages. The nav
   hides its page links and its language link below 980px (v2's landing.css); the menu button takes
   their place there and opens a panel with all of them. Logical properties, so Arabic mirrors. */
.v3-menu-btn { display: none; }
@media (max-width: 980px) {
  .v3-menu-btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-inline-end: -8px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }
  .v3-menu-btn svg { width: 22px; height: 22px; }
  .v3-menu-btn:focus-visible, .v3-menu-close:focus-visible, .v3-menu a:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
}
/* the smallest phones: Sign in moves into the panel, so the logo, Start free and the button fit */
@media (max-width: 480px) { .navr a.t[href$="/sign-in"] { display: none; } }

.v3-menu { position: fixed; inset: 0; z-index: 100; background: rgba(17, 22, 43, .32); }
.v3-menu[hidden] { display: none; }
.v3-menu-in { position: absolute; inset: 0 0 auto 0; max-height: 100dvh; overflow-y: auto; padding: 8px 20px 24px; border-radius: 0 0 24px 24px; background: #f7f8fb; box-shadow: 0 24px 48px rgba(17, 22, 43, .18); animation: v3-menu-in .28s cubic-bezier(.23, 1, .32, 1); }
@keyframes v3-menu-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v3-menu-in { animation: none; } }
.v3-menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.v3-menu-close { display: grid; place-items: center; width: 44px; height: 44px; margin-inline-end: -8px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }
.v3-menu-close svg { width: 22px; height: 22px; }
.v3-menu-links { display: grid; margin-top: 4px; }
.v3-menu-links a { display: flex; align-items: center; min-height: 56px; font: 500 20px/1.25 "Instrument Sans", system-ui, sans-serif; letter-spacing: -.01em; color: var(--ink); text-decoration: none; box-shadow: inset 0 -1px 0 var(--line); }
.v3-menu-links a[aria-current="page"] { color: var(--cobalt); }
.v3-menu-lang { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font: 500 16px/1 "Instrument Sans", system-ui, sans-serif; color: var(--body); text-decoration: none; }
.v3-menu-cta { display: grid; gap: 10px; margin-top: 14px; }
.v3-menu-cta a { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 12px; font: 500 15.5px/1 "Instrument Sans", system-ui, sans-serif; text-decoration: none; }
.v3-menu-cta a.pri { color: #fff; background: linear-gradient(180deg, #4568cc 0%, #3a5cc0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px #3456b8; }
.v3-menu-cta a.sec { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 22, 43, .14); }
html.v3-menu-open, html.v3-menu-open body { overflow: hidden; }