/* Shared, progressive-enhancement navigation for the marketing site. */
.site-header.vf-nav-ready { z-index: 100; }
.site-header .vf-nav-wrap { max-width: 1280px; width: 100%; height: auto; min-height: 74px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 30px; }
.site-header .vf-nav { display: flex; align-items: center; gap: 26px; width: 100%; height: auto; min-height: 74px; margin: 0; }
.site-header .vf-nav-brand { flex: none; display: inline-flex; align-items: center; gap: 10px; color: #eef2fb; font-size: 19px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; text-decoration: none; }
.site-header .vf-nav-brand img { width: 30px; height: 30px; border-radius: 8px; }
.site-header .vf-nav-brand em { color: #6ba0ff; font-style: normal; }
.site-header .vf-nav-links { display: flex; align-items: center; gap: 22px; margin: 0; }
.site-header .vf-nav-trigger, .site-header .vf-nav-price { border: 0; background: none; color: #c7d0e0; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; padding: 24px 0; cursor: pointer; white-space: nowrap; text-decoration: none; }
.site-header .vf-nav-trigger:hover, .site-header .vf-nav-trigger[aria-expanded="true"], .site-header .vf-nav-price:hover { color: #fff; text-decoration: none; }
.site-header .vf-nav-trigger[aria-expanded="true"] { box-shadow: inset 0 -2px #77a6ff; }
.site-header .vf-nav-trigger svg { width: 12px; height: 12px; margin-left: 3px; transition: transform .15s ease; }
.site-header .vf-nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-header .vf-nav-actions { display: flex; align-items: center; gap: 17px; margin-left: auto; white-space: nowrap; }
.site-header .vf-nav-actions a { color: #eef2fb; font-size: 14px; font-weight: 650; text-decoration: none; }
.site-header .vf-nav-actions .vf-nav-primary { background: #225fc2; color: #fff; padding: 10px 16px; border-radius: 9px; }
.site-header .vf-nav-actions .vf-nav-primary:hover { background: #1b50a8; }
.site-header .vf-nav-mobile-toggle { display: none; border: 1px solid #34445f; border-radius: 9px; padding: 9px; background: #192640; color: #eef2fb; cursor: pointer; margin-left: auto; }
.site-header .vf-nav-mobile-toggle svg { display: block; width: 22px; height: 22px; }
.site-header .vf-nav-dropdown[hidden] { display: none !important; }
.site-header .vf-nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100vw - 32px)); background: #15223a; border: 1px solid #34445f; border-top: 0; border-radius: 0 0 16px 16px; box-shadow: 0 25px 60px rgba(0,0,0,.36); padding: 26px 28px 0; color: #eef2fb; }
.site-header .vf-nav-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(215px, 1.05fr); gap: 28px; }
.site-header .vf-nav-col h2 { margin: 0 0 12px; color: #8fb5f5; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; }
.site-header .vf-nav-col { min-width: 0; }
.site-header .vf-nav-item { display: block; padding: 8px 6px 12px; margin-left: -6px; border-radius: 7px; color: #eef2fb; text-decoration: none; }
.site-header .vf-nav-item:hover, .site-header .vf-nav-item:focus-visible { background: #203351; text-decoration: none; }
.site-header .vf-nav-item strong { display: block; color: #eef2fb; font-size: 14px; line-height: 1.3; }
.site-header .vf-nav-item span { display: block; color: #aebbd1; font-size: 12px; line-height: 1.4; margin-top: 3px; }
/* category items with a thumbnail image */
.site-header .vf-nav-item.has-thumb { display: flex; gap: 11px; align-items: center; padding: 7px 6px; }
.site-header .vf-nav-item.has-thumb .vf-nav-thumb { flex: 0 0 auto; width: 54px; height: 40px; border-radius: 7px; overflow: hidden; background: #0b1220; border: 1px solid #2c3f5e; }
.site-header .vf-nav-item.has-thumb .vf-nav-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-header .vf-nav-item.has-thumb .vf-nav-body { min-width: 0; }
.site-header .vf-nav-feature { background: #203351; border: 1px solid #405b83; border-radius: 12px; padding: 18px; }
.site-header .vf-nav-feature-label { color: #a8c8ff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.site-header .vf-nav-feature h2 { color: #fff; font-size: 18px; line-height: 1.25; margin: 10px 0 8px; letter-spacing: -.02em; }
.site-header .vf-nav-feature p { color: #c4d0e2; font-size: 12px; line-height: 1.5; margin: 0; }
.site-header .vf-nav-feature a { display: inline-block; color: #c7dbff; font-size: 12px; font-weight: 700; margin-top: 18px; text-decoration: none; }
.site-header .vf-nav-feature a:hover { text-decoration: underline; }
.site-header .vf-nav-bottom { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 20px; border-top: 1px solid #34445f; padding: 13px 0 16px; }
.site-header .vf-nav-bottom a { color: #c7dbff; font-size: 12px; font-weight: 650; text-decoration: none; }
.site-header .vf-nav-bottom a:hover { text-decoration: underline; }
.site-header .vf-nav-trigger:focus-visible, .site-header .vf-nav-mobile-toggle:focus-visible, .site-header .vf-nav-actions a:focus-visible, .site-header .vf-nav-price:focus-visible { outline: 2px solid #9cc1ff; outline-offset: 3px; }
@media (max-width: 980px) {
  .site-header .vf-nav-wrap { padding: 0 20px; }
  .site-header .vf-nav { flex-wrap: wrap; min-height: 68px; gap: 0 16px; }
  .site-header .vf-nav-brand { min-height: 68px; }
  .site-header .vf-nav-mobile-toggle { display: block; }
  .site-header .vf-nav-links, .site-header .vf-nav-actions { display: none; flex-basis: 100%; margin: 0; }
  .site-header .vf-nav[data-mobile-open="true"] .vf-nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px; }
  .site-header .vf-nav[data-mobile-open="true"] .vf-nav-actions { display: flex; justify-content: space-between; padding: 10px 0 16px; border-top: 1px solid #34445f; }
  .site-header .vf-nav-trigger, .site-header .vf-nav-price { width: 100%; text-align: left; padding: 11px 6px; }
  .site-header .vf-nav-trigger { display: flex; align-items: center; justify-content: space-between; }
  .site-header .vf-nav-trigger[aria-expanded="true"] { box-shadow: none; color: #fff; }
  .site-header .vf-nav-dropdown { position: static; transform: none; width: 100%; padding: 20px; border: 1px solid #34445f; border-radius: 12px; margin: 0 0 12px; box-shadow: none; max-height: min(70vh, 720px); overflow-y: auto; }
  .site-header .vf-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 590px) {
  .site-header .vf-nav-grid { grid-template-columns: 1fr; }
  .site-header .vf-nav-dropdown { max-height: 66vh; }
  .site-header .vf-nav-col h2 { margin-bottom: 4px; }
  .site-header .vf-nav-feature { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) { .site-header .vf-nav-trigger svg { transition: none; } }