/* Shared BGL header treatment for public, account, and administration pages. */
html {
  scrollbar-width: thin;
  scrollbar-color: #277e96 #02050b;
}

body::-webkit-scrollbar {
  width: 9px;
}

body::-webkit-scrollbar-track {
  background: #02050b;
}

body::-webkit-scrollbar-thumb {
  border: 2px solid #02050b;
  border-radius: 99px;
  background: linear-gradient(#50d8f4, #155e75);
}

body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#7ae8ff, #1b7892);
}

[data-bgl-header] [hidden] {
  display: none !important;
}

:where(.site-header, .legal-header, .header, .bgl-global-header)[data-bgl-header] {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  border-bottom: 1px solid #263249 !important;
  background: rgba(2, 4, 10, .94) !important;
  backdrop-filter: blur(16px) !important;
}

:where(.site-header-inner, .legal-header-inner, .header-inner, .bgl-global-header-inner)[data-bgl-header-inner] {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr) !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 0 28px !important;
}

[data-bgl-header-inner] :where(.brand, .site-logo-link, .legal-brand) {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  justify-self: start !important;
}

[data-bgl-header-inner] :where(.brand img, .site-logo, .legal-brand img) {
  display: block !important;
  width: min(330px, 35vw) !important;
  max-height: 44px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

:where(.site-nav, .legal-nav, .nav, .bgl-global-nav)[data-bgl-primary-nav] {
  position: static !important;
  left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-self: center !important;
  gap: 8px !important;
  transform: none !important;
  white-space: nowrap !important;
}

[data-bgl-primary-nav] a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #aeb9ca !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: color .16s ease, opacity .16s ease !important;
}

[data-bgl-primary-nav] a:hover,
[data-bgl-primary-nav] a:focus-visible {
  color: #fff !important;
  background: transparent !important;
}

/* Page-specific legacy underlines must not cross the shared navigation text. */
[data-bgl-primary-nav] a::before,
[data-bgl-primary-nav] a::after {
  display: none !important;
  content: none !important;
}

[data-bgl-primary-nav] a:is(.active, .is-active, [aria-current="page"]) {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

[data-bgl-primary-nav] a:is(.active, .is-active, [aria-current="page"])::after {
  position: absolute !important;
  right: 14px !important;
  bottom: 5px !important;
  left: 14px !important;
  display: block !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #67e8f9, #9b8cff) !important;
  box-shadow: 0 0 10px rgba(103, 232, 249, .22) !important;
  content: "" !important;
}

[data-bgl-header-inner] :where(.account, .legal-account, .premium-account, .auth-slot, .site-account, .bgl-header-account) {
  position: relative !important;
  justify-self: end !important;
}

[data-bgl-header] :where(.login-link, .legal-account-link.is-guest, .login-button, .site-login) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 9px 16px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #5865f2 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important;
  color: #fff !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

[data-bgl-header] :where(.login-link, .legal-account-link.is-guest, .login-button, .site-login):hover,
[data-bgl-header] :where(.login-link, .legal-account-link.is-guest, .login-button, .site-login):focus-visible {
  background: #4752c4 !important;
  color: #fff !important;
}

[data-bgl-header] :where(.login-link, .legal-account-link.is-guest, .login-button, .site-login) svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
  fill: currentColor !important;
}

[data-bgl-header] :where(.account-button, .bgl-account-button, .profile-button, .user-menu-button) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 42px !important;
  padding: 5px 8px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

/*
 * Account controls start with placeholder markup and are hydrated after the
 * page loads. Keep that placeholder from painting, while preserving its space
 * in the header, until the real signed-in identity is ready.
 */
[data-bgl-header] :where(#accountButton, #bglAccountButton, #legalAccountLink) {
  visibility: hidden !important;
}

[data-bgl-header] :where(#accountButton, #bglAccountButton, #legalAccountLink).bgl-account-ready {
  visibility: visible !important;
}

[data-bgl-header] :where(.account-button, .bgl-account-button, .profile-button, .user-menu-button):hover,
[data-bgl-header] :where(.account-button, .bgl-account-button, .profile-button, .user-menu-button):focus-visible {
  background: rgba(255, 255, 255, .06) !important;
}

[data-bgl-header] :where(.account-avatar, .bgl-account-avatar, .profile-avatar, .user-avatar, .legal-account-avatar) {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 50% !important;
  background: #172238 !important;
  object-fit: cover !important;
}

[data-bgl-header] :where(.account-name, .bgl-account-name, .profile-name, .user-name, .legal-account-name) {
  max-width: 150px !important;
  overflow: hidden !important;
  color: #fff !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

[data-bgl-header] :where(.account-menu, .bgl-account-menu, .profile-menu, .user-dropdown, .user-dropdown-menu) {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 120 !important;
  width: 220px !important;
  overflow: hidden !important;
  padding: 6px !important;
  border: 1px solid #33415a !important;
  border-radius: 12px !important;
  background: #101827 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .6) !important;
}

[data-bgl-header] :where(.account-menu, .bgl-account-menu, .profile-menu, .user-dropdown, .user-dropdown-menu) :where(a, button) {
  display: block !important;
  width: 100% !important;
  padding: 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #e8edf5 !important;
  font: inherit !important;
  font-size: 13px !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

[data-bgl-header] :where(.account-menu, .bgl-account-menu, .profile-menu, .user-dropdown, .user-dropdown-menu) :where(a, button):hover,
[data-bgl-header] :where(.account-menu, .bgl-account-menu, .profile-menu, .user-dropdown, .user-dropdown-menu) :where(a, button):focus-visible {
  background: #1b273b !important;
}

[data-bgl-header] :where(.account-menu, .bgl-account-menu, .profile-menu, .user-dropdown, .user-dropdown-menu) :where(.logout, .bgl-account-logout, .logout-link) {
  color: #ff9baa !important;
}

[data-bgl-header] :where(.mobile-menu-button, .legal-mobile-menu-button) {
  display: none !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 1px solid #34435d !important;
  border-radius: 9px !important;
  background: #111a2a !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 20px !important;
  cursor: pointer !important;
}

[data-bgl-header] :where(.mobile-nav, .legal-mobile-nav) {
  display: none !important;
  padding: 0 14px 12px !important;
  background: rgba(2, 4, 10, .98) !important;
}

[data-bgl-header] :where(.mobile-nav, .legal-mobile-nav):is(.open, .is-open) {
  display: block !important;
}

[data-bgl-header] :where(.mobile-nav, .legal-mobile-nav) a {
  display: block !important;
  padding: 10px !important;
  border-radius: 8px !important;
  color: #d4dbe6 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

[data-bgl-header] :where(.mobile-nav, .legal-mobile-nav) a:hover,
[data-bgl-header] :where(.mobile-nav, .legal-mobile-nav) a:focus-visible {
  background: #172238 !important;
  color: #fff !important;
}

[data-bgl-mobile-nav] a:is(.active, .is-active, [aria-current="page"]) {
  color: #fff !important;
  background: rgba(255, 255, 255, .035) !important;
  box-shadow: inset 2px 0 0 rgba(103, 232, 249, .78) !important;
}

@media (max-width: 900px) {
  :where(.site-header-inner, .legal-header-inner, .header-inner, .bgl-global-header-inner)[data-bgl-header-inner] {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 12px !important;
    min-height: 64px !important;
    padding: 0 14px !important;
  }

  :where(.site-nav, .legal-nav, .nav, .bgl-global-nav)[data-bgl-primary-nav] {
    display: none !important;
  }

  [data-bgl-header] :where(.mobile-menu-button, .legal-mobile-menu-button) {
    display: inline-grid !important;
  }

  [data-bgl-header-inner] :where(.brand img, .site-logo, .legal-brand img) {
    width: min(250px, 58vw) !important;
    max-height: 37px !important;
  }

  [data-bgl-header-inner].desktop-header {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  [data-bgl-header-inner].desktop-header-only {
    display: none !important;
  }
}

@media (max-width: 520px) {
  [data-bgl-header-inner] :where(.brand img, .site-logo, .legal-brand img) {
    width: min(205px, 54vw) !important;
  }

  [data-bgl-header] :where(.login-link, .legal-account-link.is-guest, .login-button, .site-login) {
    padding: 9px 11px !important;
  }

  [data-bgl-header] :where(.login-link, .legal-account-link.is-guest, .login-button, .site-login) span,
  [data-bgl-header] :where(.account-name, .bgl-account-name, .profile-name, .user-name, .legal-account-name) {
    display: none !important;
  }
}

/* Controls and illustrative marketing art should not highlight during a drag.
   Keep paragraphs, records, form fields, and legal content selectable. */
:where([data-bgl-header] a, [data-bgl-header] button, .site-footer-links a,
  a.button, a.btn, button, [role="button"], [role="tab"]) {
  -webkit-user-select: none;
  user-select: none;
}

:where(.business-hero) :where(h1, .eyebrow, .hero-proof),
:where(.atom-page .hero) :where(h1, .eyebrow, .hero-checks, .hero-evidence),
:where(.atom-page) :where(.product-shot),
:where(.premium-page .premium-hero) :where(h1, .eyebrow, .premium-hero-terms, .premium-rank-preview),
:where(.hub-hero) :where(h1, .eyebrow, .hero-features, .hero-visual) {
  -webkit-user-select: none;
  user-select: none;
}