/* Canonical public-site navigation
   Loaded last so every page uses the same geometry and interaction surface. */
site-header {
  display: block;
}

.site-announcement {
  background: #061414;
  border-bottom: 1px solid #163333;
  font: 400 .8125rem/1.5 var(--sans);
}

.site-announcement .site-announcement-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .375rem 1rem;
  min-height: 2.75rem;
  padding-block: .625rem;
  color: #c4d4d4;
  text-align: center;
  text-decoration: none;
  border: 0;
}

.site-announcement-label {
  color: #14fcfc;
  font: 500 .625rem/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.site-announcement-action {
  color: #14fcfc;
  white-space: nowrap;
}

.site-announcement-link:hover .site-announcement-action {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.site-announcement-link:focus-visible {
  outline: 2px solid #14fcfc;
  outline-offset: -3px;
}

.site-nav {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  min-height: 72px !important;
  border: 0 !important;
  border-bottom: 1px solid #20282a !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, .96) !important;
  box-shadow: none !important;
  color: #aeb8b5;
  font-family: var(--mono) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.site-nav[data-scrolled] {
  border-bottom-color: #30393b !important;
  background: rgba(0, 0, 0, .985) !important;
}

.site-nav .site-nav-inner {
  min-height: 72px !important;
  max-width: 1440px !important;
  display: flex;
  align-items: center;
  gap: 1.5rem !important;
}

.site-nav .site-nav-brand {
  width: 118px !important;
  flex: none;
  transform: none !important;
}

.site-nav .site-nav-brand:hover {
  opacity: .9;
  transform: none !important;
}

.site-nav .site-nav-actions {
  display: flex;
  align-items: center;
  gap: .125rem !important;
  margin-left: auto;
}

.site-nav .site-nav-actions > * {
  order: 0 !important;
}

.site-nav .site-nav-link {
  min-height: 40px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem .76rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  color: #858f8d !important;
  font: 700 .64rem/1 var(--mono) !important;
  letter-spacing: .055em !important;
  text-transform: none !important;
  white-space: nowrap;
}

.site-nav .site-nav-link:hover,
.site-nav .site-nav-link[aria-current="page"] {
  background: #06090a !important;
  color: #eef4f2 !important;
  box-shadow: inset 0 -1px 0 #14fcfc !important;
}

.site-nav .site-nav-actions > a[href*="/login"] {
  position: relative;
  margin-left: .7rem !important;
}

.site-nav .site-nav-actions > a[href*="/login"]::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -.45rem;
  width: 1px;
  background: #20282a !important;
}

.site-nav .site-nav-actions > .site-nav-demo,
.site-nav .site-nav-actions > .site-nav-app {
  margin-left: .25rem !important;
  padding-inline: 1rem !important;
  border: 1px solid #30393b !important;
}

.site-nav .site-nav-actions > .site-nav-demo {
  background: #030505 !important;
  color: #c7cecc !important;
}

.site-nav .site-nav-actions > .site-nav-demo:hover {
  border-color: #14fcfc !important;
  background: #050909 !important;
  color: #14fcfc !important;
  box-shadow: none !important;
}

.site-nav .site-nav-actions > .site-nav-app {
  border-color: #eef4f2 !important;
  background: #eef4f2 !important;
  color: #030504 !important;
}

.site-nav .site-nav-actions > .site-nav-app:hover {
  border-color: #14fcfc !important;
  background: #14fcfc !important;
  color: #001010 !important;
  box-shadow: none !important;
}

.site-nav .site-nav-company,
.site-nav .site-nav-resources {
  position: relative;
}

.site-nav .site-nav-resources > summary::after,
.site-nav .site-nav-company > summary::after,
.site-nav .site-nav-menu > summary::after {
  content: "" !important;
  display: block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px .2rem !important;
  border: 0 !important;
  border-right: 1.5px solid #6d7775 !important;
  border-bottom: 1.5px solid #6d7775 !important;
  transform: rotate(45deg);
}

.site-nav .site-nav-resources[open] > summary::after,
.site-nav .site-nav-company[open] > summary::after,
.site-nav .site-nav-menu[open] > summary::after {
  margin-bottom: -3px !important;
  transform: rotate(225deg);
  border-color: #c7cecc !important;
}

.site-nav .site-nav-company-panel,
.site-nav .site-nav-resources-panel {
  position: absolute;
  top: calc(100% + .75rem) !important;
  right: 0 !important;
  left: auto !important;
  width: 330px !important;
  padding: .65rem !important;
  transform: none !important;
  border: 1px solid #30383a !important;
  border-radius: 0 !important;
  background: #030505 !important;
  box-shadow: 18px 18px 0 rgba(5, 7, 8, .95) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-nav .site-nav-company-panel a,
.site-nav .site-nav-resources-panel a {
  position: relative;
  display: grid;
  gap: .27rem;
  padding: .78rem .85rem;
  border: 0 !important;
  border-radius: 0 !important;
  color: #d4dcda !important;
  font: 700 .67rem/1.2 var(--mono) !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}

.site-nav .site-nav-company-panel a:hover,
.site-nav .site-nav-company-panel a[aria-current="page"],
.site-nav .site-nav-resources-panel a:hover,
.site-nav .site-nav-resources-panel a[aria-current="page"] {
  background: #071011 !important;
  color: #eef4f2 !important;
}

/* Both navigation layouts use the same resource groups. */
.site-nav .site-nav-resources-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  width: min(44rem, calc(100vw - 3rem)) !important;
  max-height: calc(100svh - 6rem);
  overflow-y: auto;
  padding: 1rem !important;
  box-shadow: 0 1rem 3rem #0008 !important;
}
.site-nav .site-nav-resource-group { min-width: 0; }
.site-nav .site-nav-resource-group a { justify-content: start; text-align: left; white-space: normal; }
.site-nav .site-nav-menu-heading {
  display: block;
  padding: .65rem .85rem;
  color: #96a4a7;
  font: 400 .65rem/1.4 var(--mono);
}
.site-nav .site-nav-resources-panel a {
  min-height: 2.75rem;
  font: 400 .82rem/1.4 var(--sans) !important;
  letter-spacing: 0 !important;
}
.site-nav .site-nav-resources-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  border-top: 1px solid #253136;
  padding-top: .5rem;
}

.site-nav-menu {
  display: none;
  margin-left: auto;
}

@media (max-width: 1240px) {
  .site-nav,
  .site-nav .site-nav-inner {
    min-height: 64px !important;
  }

  .site-nav {
    background: rgba(0, 0, 0, .985) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-nav .site-nav-brand {
    width: 108px !important;
  }

  .site-nav .site-nav-actions {
    display: none !important;
  }

  .site-nav .site-nav-menu {
    display: block !important;
    margin-left: auto;
  }

  .site-nav .site-nav-menu > summary {
    min-width: 84px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .7rem .85rem;
    border: 1px solid #394345 !important;
    border-radius: 0 !important;
    background: #020404 !important;
    color: #d4dcda !important;
    cursor: pointer;
    list-style: none;
    font: 700 .64rem/1 var(--mono) !important;
    letter-spacing: .05em !important;
    text-transform: none !important;
  }

  .site-nav .site-nav-menu > summary::-webkit-details-marker {
    display: none;
  }

  .site-nav .site-nav-menu-panel {
    position: fixed !important;
    top: 64px !important;
    right: 0 !important;
    bottom: 0;
    z-index: 1002;
    width: min(400px, 100vw) !important;
    height: calc(100dvh - 64px) !important;
    padding: 1rem 1.25rem 2rem !important;
    overflow-y: auto;
    border: 0 !important;
    border-left: 1px solid #20282a !important;
    border-radius: 0 !important;
    background: #020303 !important;
    box-shadow: -35px 0 90px rgba(0, 0, 0, .52) !important;
  }

  .site-nav .site-nav-menu-panel .site-nav-menu-heading {
    display: block;
    padding: 1.15rem .65rem .45rem;
    color: #697370;
    font: 700 .6rem/1 var(--mono);
    letter-spacing: .12em;
    text-transform: none !important;
  }

  .site-nav .site-nav-menu-panel > .site-nav-menu-heading:first-child {
    padding-top: .35rem;
  }

  .site-nav .site-nav-menu-panel .site-nav-link {
    width: 100%;
    min-height: 47px !important;
    justify-content: flex-start;
    padding: .82rem .7rem !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(48, 57, 59, .62) !important;
    border-radius: 0 !important;
    color: #b9c2bf !important;
    font: 700 .72rem/1.2 var(--mono) !important;
    letter-spacing: .035em !important;
  }

  .site-nav .site-nav-menu-panel .site-nav-link:hover,
  .site-nav .site-nav-menu-panel .site-nav-link[aria-current="page"] {
    background: #06090a !important;
    color: #eef4f2 !important;
  }

  .site-nav .site-nav-menu-panel .site-nav-demo,
  .site-nav .site-nav-menu-panel .site-nav-app {
    min-height: 50px !important;
    justify-content: center;
    border: 1px solid #394345 !important;
    border-radius: 0 !important;
  }

  .site-nav .site-nav-menu-panel .site-nav-demo {
    margin-top: .8rem;
    background: #030505 !important;
    color: #d4dcda !important;
  }

  .site-nav .site-nav-menu-panel .site-nav-app {
    margin-top: .45rem;
    border-color: #eef4f2 !important;
    background: #eef4f2 !important;
    color: #030504 !important;
  }
}

@media (max-width: 480px) {
  .site-nav .site-nav-menu-panel {
    width: 100vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-nav * {
    transition: none !important;
    animation: none !important;
  }
}