@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* Features mega-menu in the top nav (every page). Opens on hover, click or keyboard; see js/nav-features.js. */
.nav-mega { position: static; }
.nav-mega-btn { display: inline-flex; align-items: center; gap: 6px; font: 500 16px var(--ff); color: var(--mid); background: none; border: 0; padding: 0; cursor: pointer; transition: color 0.15s; }
.nav-mega-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.nav-mega-btn:hover, .nav-mega.is-open .nav-mega-btn, .nav-mega-btn[aria-current="page"] { color: var(--ink); }
.nav-mega.is-open .nav-mega-btn svg { transform: rotate(180deg); }
.nav-mega-btn:focus-visible { outline: 2px solid var(--r2); outline-offset: 4px; border-radius: 4px; }
.mega { position: fixed; top: 76px; left: 50%; transform: translate(-50%, -6px); width: min(1100px, calc(100vw - 48px)); background: #fff; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 18px 18px; box-shadow: 0 24px 48px rgba(17,17,17,0.10); opacity: 0; visibility: hidden; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s; z-index: 101; }
.nav-mega.is-open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.16s ease, transform 0.16s ease; }
.mega-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 28px; padding: 28px 32px 26px; }
/* the header (nav, Features panel, phone menu) is set in Space Grotesk */
nav, nav a, nav button, .mega, .mobile-menu, .mobile-menu a { font-family: 'Space Grotesk', var(--ff) !important; }
.mega-h { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--r2); margin: 0 0 8px 10px; }
.mega-item { display: block; padding: 9px 10px; border-radius: 10px; text-decoration: none; transition: background 0.12s; }
.mega-item b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.mega-item span { display: block; font-size: 13px; color: var(--mid); line-height: 1.45; margin-top: 2px; }
.mega-item.is-link:hover, .mega-item.is-link:focus-visible { background: var(--off); outline: none; }
@media (prefers-reduced-motion: reduce) { .mega, .nav-mega.is-open .mega, .nav-mega-btn svg { transition: none; } }
/* the nav centres its links with translateX, which would make the fixed panel position against the
   list instead of the window; centre it with auto margins instead */
nav > ul.nav-links.nav-links { left: 0; right: 0; width: max-content; margin: 0 auto; transform: none; }
/* every column is centred */
.mega-col { text-align: center; }
.mega-col .mega-h { margin: 0 0 8px; }
/* descriptions stay on one line */
.mega-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* phone menu: features listed under their group */
.mobile-menu .mm-feat { padding: 12px 0; border-bottom: 1px solid var(--border); }
.mobile-menu .mm-feat b { display: block; font-size: 16px; font-weight: 500; color: var(--ink); }
.mobile-menu .mm-feat span { display: block; font-size: 13px; color: var(--mid); line-height: 1.5; margin-top: 3px; }
.nav-links a[aria-current="page"] { color: var(--ink); }