/* Primary nav, shared by every page (markup written by
   scripts/build_landing_pages.py). Desktop: Solutions menu + links. Phones:
   one Menu button whose panel also holds the links. Loaded after each page's
   own styles. */
.nav-actions { gap: 4px; }
.nav-actions .nav-link, .nav-trigger {
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  padding: 10px 10px; background: none; border: 0; cursor: pointer; line-height: 1; border-radius: 60px;
}
.nav-actions .nav-link:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--ink); }
.nav-actions .nav-link[aria-current="page"] { color: var(--ink); }
.nav-actions .btn { margin-left: 8px; }
.nav-actions .btn + .btn { margin-left: 4px; }
.nav-actions :focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.nav-menu { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; }
.nav-trigger i { width: 10px; height: 10px; background: currentColor; -webkit-mask: url(/icons/caret.svg) center / contain no-repeat; mask: url(/icons/caret.svg) center / contain no-repeat; transition: transform .2s; }
.nav-trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.nav-trigger .t-menu { display: none; }

.nav-panel {
  position: absolute; top: calc(100% + 10px); left: -12px; z-index: 20; width: 420px;
  padding: 8px; border-radius: 20px; background: #131315; border: 1px solid rgba(240,239,235,.12);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
}
.nav-panel[hidden] { display: none; }
.nav-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-panel li { margin: 0; }
.nav-panel .np-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; text-decoration: none; }
.nav-panel .np-row:hover, .nav-panel .np-row[aria-current="page"] { background: rgba(255,255,255,.04); }
.nav-panel .np-row .badge {
  flex: none; width: 36px; height: 36px; border-radius: 99px; border: 1px solid #666; display: grid; place-items: center;
  background: var(--b, #272728); box-shadow: inset 0 -4px 4px rgba(255,255,255,.25), inset 0 4px 4px rgba(0,0,0,.25);
}
.nav-panel .np-row .badge i { display: block; width: 15px; height: 15px; background: #0c0c0d; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.nav-panel .np-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-panel .np-text strong { font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.nav-panel .np-text span { font-size: 13px; color: var(--ink-dim); line-height: 1.35; }
.nav-panel .np-more { display: none; }

@media (max-width: 900px) {
  .nav-actions > .nav-link, .nav-actions > .btn-line { display: none; }
  .nav-trigger .t-solutions, .nav-trigger i { display: none; }
  .nav-trigger .t-menu { display: inline; }
  .nav-menu { position: static; }
  .nav-panel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 80px); overflow-y: auto; }
  .nav-panel .np-more { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 12px 6px; margin-top: 6px; border-top: 1px solid rgba(240,239,235,.12); }
  .nav-panel .np-more a { color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 60px; background: rgba(255,255,255,.05); }
}
@media (max-width: 600px) {
  /* legal.css hides .btn in the nav on phones; keep Early access visible */
  .nav-actions .btn-fill { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) { .nav-trigger i { transition: none; } }