/* Selected header concept: compact capsule. Shared by every site page. */
.nav-capsule { width: min(1440px, calc(100% - 64px)); margin: 22px auto 0; top: 18px; border: 1px solid #ffffff13; border-radius: 999px; background: #171719eb; backdrop-filter: blur(18px); box-shadow: 0 8px 28px #0003; }
.nav-capsule .nav-inner { width: 100%; max-width: none; height: 74px; padding: 0 18px 0 26px; gap: 14px; }
.nav-capsule .brand { flex: none; padding-right: 26px; border-right: 0; font-size: 20px; gap: 12px; letter-spacing: -.5px; }
.nav-capsule .brand img { width: 36px; height: 36px; object-fit: contain; }
.nav-capsule .nav-links { position: static; flex: 1; justify-content: center; margin: 0; gap: 2px; font-size: 14px; font-weight: 600; }
.nav-capsule .nav-links > a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 12px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; transition: color .15s, background .15s, border-color .15s; }
.nav-capsule .nav-links > a:hover { background: #ffffff06; }
.nav-capsule .nav-links > a.nav-current { color: var(--accent); border-color: #ff8a1e3b; background: #ff8a1e0d; }
.nav-glyph { width: 19px; height: 19px; flex: none; background: currentColor; mask: var(--nav-icon) center/contain no-repeat; -webkit-mask: var(--nav-icon) center/contain no-repeat; }
.nav-glyph-box { --nav-icon: url('/img/nav-icons/box.svg'); }
.nav-glyph-tag { --nav-icon: url('/img/nav-icons/tag.svg'); }
.nav-glyph-message { --nav-icon: url('/img/nav-icons/message-square.svg'); }
.nav-glyph-help { --nav-icon: url('/img/nav-icons/circle-question-mark.svg'); }
.nav-glyph-cart { --nav-icon: url('/img/nav-icons/shopping-cart.svg'); }
.nav-glyph-headphones { --nav-icon: url('/img/nav-icons/headphones.svg'); }
.nav-capsule .nav-account-actions { display: flex; align-items: center; flex: none; gap: 12px; border-left: 1px solid #ffffff20; padding-left: 14px; }
.nav-capsule .nav-account { border-color: transparent; background: none; gap: 9px; padding: 0 8px; min-height: 44px; font-size: 14px; }
.nav-capsule .nav-account .i { width: 20px; height: 20px; }
.nav-capsule .nav-download { min-height: 48px; padding: 0 20px; border-radius: 999px; gap: 9px; font-size: 14px; box-shadow: 0 5px 18px #ff681426; }
.nav-capsule .nav-download .i { width: 19px; height: 19px; }
.nav-capsule ~ main #features, .nav-capsule ~ main #pricing, .nav-capsule ~ main #reviews, .nav-capsule ~ main #faq { scroll-margin-top: 120px; }
.nav-capsule a:focus-visible, .nav-capsule .burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 1181px) and (max-width: 1380px) {
  .nav-capsule { width: calc(100% - 40px); }
  .nav-capsule .nav-inner { padding: 0 12px 0 18px; gap: 8px; }
  .nav-capsule .brand { padding-right: 16px; font-size: 18px; gap: 8px; }
  .nav-capsule .brand img { width: 32px; height: 32px; }
  .nav-capsule .nav-links > a { padding: 10px 8px; gap: 6px; font-size: 13px; }
  .nav-capsule .nav-account-actions { gap: 7px; padding-left: 8px; }
  .nav-capsule .nav-download { padding: 0 14px; font-size: 13px; }
}
@media (max-width: 1180px) {
  body:has(.nav-capsule).mobile-menu-open { overflow: hidden; }
  .nav-capsule { width: calc(100% - 32px); margin-top: 16px; top: 12px; z-index: 1001; }
  .nav-capsule .nav-inner { position: relative; height: 66px; padding: 0 12px 0 18px; gap: 8px; }
  .nav-capsule .brand { margin-right: auto; border: 0; padding: 0; font-size: 18px; gap: 10px; }
  .nav-capsule .brand img { width: 32px; height: 32px; }
  .nav-capsule .nav-account-actions { gap: 0; border-left: 1px solid #ffffff20; padding-left: 8px; }
  .nav-capsule .nav-download { display: none; }
  .nav-capsule .nav-account { display: inline-flex; width: 42px; min-height: 44px; padding: 0; }
  .nav-capsule .nav-account-label { display: none; }
  .nav-capsule .burger { display: block; margin-left: 0; width: 42px; height: 44px; flex: none; padding: 10px; border: 0; border-radius: 50%; background: none; }
  .nav-capsule .burger span { width: 22px; height: 2px; margin: 4px 0; transition: transform .2s, opacity .2s; }
  .nav-capsule .burger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-capsule .burger.active span:nth-child(2) { opacity: 0; }
  .nav-capsule .burger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-capsule .nav-links { display: none; position: absolute; left: -1px; right: -1px; top: 76px; margin: 0; padding: 12px; border: 1px solid #ffffff1a; border-radius: 24px; background: #171719; max-height: calc(100dvh - 116px); overflow-y: auto; box-shadow: 0 20px 60px #0006; }
  .nav-capsule .nav-links.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .nav-capsule .nav-links > a { min-width: 0; min-height: 44px; justify-content: flex-start; padding: 8px; font-size: 14px; gap: 8px; white-space: normal; border-radius: 14px; }
  .nav-capsule .nav-links > a::after { display: none; }
  .nav-capsule .mobile-nav-actions { display: grid; grid-column: 1/-1; gap: 8px; padding: 12px 0 0; margin-top: 4px; border-top: 1px solid var(--border); }
  .nav-capsule .mobile-nav-actions .btn { display: flex; gap: 9px; min-height: 46px; height: 46px; padding: 0 12px; border-radius: 14px; }
  body:has(.nav-capsule) .mobile-nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1000; border: 0; padding: 0; background: #0008; backdrop-filter: blur(5px); }
}
@media (max-width: 359px) {
  .nav-capsule { width: calc(100% - 20px); }
  .nav-capsule .nav-inner { padding: 0 8px 0 14px; gap: 4px; }
  .nav-capsule .brand { font-size: 16px; gap: 7px; }
  .nav-capsule .brand img { width: 28px; height: 28px; }
  .nav-capsule .nav-links { padding: 10px; }
  .nav-capsule .nav-links > a { font-size: 12px; padding: 8px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .nav-capsule .burger span, .nav-capsule .nav-links > a { transition: none; } }

.nav-capsule .nav-links > a > .i { width: 19px; height: 19px; flex: none; }

@media (max-width: 1180px) { .nav-capsule .nav-links > a[href="/privacy"] { grid-column: 1 / -1; } }