/* GENERATED from statx-site/shared; SHA256 e99511f06797f1b696e007e6f583ad5d2886b01318562dccfb4d5198c2dd2ebd. Run scripts/sync-header.mjs; do not edit. */
/* Canonical Statx top header. Edit here, then run scripts/sync-header.mjs. */
:root {
  --sx-header-height-mobile: 6.5rem;
  --sx-header-height-desktop: 6.5rem;
  --sx-header-pad-inline: 1rem;
  --sx-header-bg: rgba(10, 14, 22, 0.28);
  --sx-header-border: rgba(255, 255, 255, 0.10);
  --sx-header-blur: blur(8px);
  --sx-header-z: 60;
  --sx-header-offset-top: 0px;
  --sx-header-font: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  --sx-menu-overlay-bg: rgba(0, 0, 0, 0.36);
  --sx-menu-duration: 200ms;
  --sx-menu-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sx-burger-size: 2.5rem;
  --sx-burger-radius: 8px;
  --sx-burger-border: rgba(255, 255, 255, 0.24);
  --sx-burger-bg: rgba(255, 255, 255, 0.035);
  --sx-scrollbar-gap: 0px;
}
html { scrollbar-gutter: stable; }
html.sx-scroll-locked { overflow: hidden !important; }
.sx-header, .sx-menu-glass, .sx-menu-panel, .sx-menu-overlay { box-sizing: border-box; }
.sx-header, .sx-menu-panel { font-family: var(--sx-header-font); }
.sx-header {
  position: fixed;
  top: var(--sx-header-offset-top);
  left: 0;
  right: var(--sx-scrollbar-gap);
  z-index: var(--sx-header-z);
  height: var(--sx-header-height-mobile);
  background: var(--sx-header-bg);
  border-bottom: 1px solid var(--sx-header-border);
  -webkit-backdrop-filter: var(--sx-header-blur);
  backdrop-filter: var(--sx-header-blur);
  box-shadow: 0 18px 44px -32px rgba(0, 0, 0, 0.68);
  color: white;
}
.sx-header-inner {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem var(--sx-header-pad-inline);
}
.sx-header-brand { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
.sx-header .sx-header-brand img { display: block; width: 5rem; height: auto; }
.sx-header-brand[data-brand="leanhero"] img { width: 67.5px; height: 54px; object-fit: contain; }
.sx-burger {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--sx-burger-size);
  width: var(--sx-burger-size);
  height: var(--sx-burger-size);
  padding: 0;
  border: 1px solid var(--sx-burger-border);
  border-radius: var(--sx-burger-radius);
  background: var(--sx-burger-bg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 14px rgba(255,255,255,.07);
  color: white;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
.sx-burger,
.sx-burger * {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
.sx-burger:focus,
.sx-burger:active {
  background: var(--sx-burger-bg) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 14px rgba(255,255,255,.07) !important;
  outline: none;
}
@media (hover: hover) and (pointer: fine) {
  .sx-burger:hover { background: rgba(255,255,255,.08) !important; }
}
.sx-burger:focus-visible {
  outline: 2px solid white;
  outline-offset: 4px;
}
.sx-burger-line {
  position: absolute;
  pointer-events: none;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--sx-menu-duration) var(--sx-menu-ease), opacity var(--sx-menu-duration) ease;
}
.sx-burger-line:first-child { transform: translateY(-6px); }
.sx-burger-line:last-child { transform: translateY(6px); }
.sx-burger[aria-expanded="true"] .sx-burger-line:first-child { transform: rotate(45deg); }
.sx-burger[aria-expanded="true"] .sx-burger-line:nth-child(2) { opacity: 0; }
.sx-burger[aria-expanded="true"] .sx-burger-line:last-child { transform: rotate(-45deg); }
/* One backing spans the reserved header row and intrinsic menu row. Neither
   content container filters independently when open. The dimmer is row three. */
.sx-menu-layer {
  position: fixed;
  top: var(--sx-header-offset-top);
  bottom: 0;
  left: 0;
  right: var(--sx-scrollbar-gap);
  z-index: calc(var(--sx-header-z) - 1);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--sx-header-height-mobile) minmax(0, max-content) minmax(0, 1fr);
  pointer-events: none;
}
.sx-menu-glass {
  grid-area: 1 / 1 / 3 / 2;
  min-height: 0;
  z-index: 0;
  background: var(--sx-header-bg);
  border-bottom: 1px solid var(--sx-header-border);
  -webkit-backdrop-filter: var(--sx-header-blur);
  backdrop-filter: var(--sx-header-blur);
  visibility: hidden;
  transition: visibility 0s var(--sx-menu-duration);
}
.sx-menu-layer[data-menu-state="open"] > .sx-menu-glass { visibility: visible; transition-delay: 0s; }
.sx-menu-panel, .sx-menu-overlay {
  position: relative;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sx-menu-panel {
  grid-area: 2 / 1;
  z-index: 1;
  /* Reveal vertically without measuring content; long menus still scroll. */
  max-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent;
  /* Reserve existing panel geometry; the backing owns the visible divider. */
  border-bottom: 1px solid transparent;
  transform-origin: top center;
  transform: translateY(-0.35rem);
  transition: max-height var(--sx-menu-duration) var(--sx-menu-ease), transform var(--sx-menu-duration) var(--sx-menu-ease), opacity 160ms ease, visibility 0s var(--sx-menu-duration);
}
.sx-menu-content { display: grid; gap: 1.5rem; padding: 2.75rem var(--sx-header-pad-inline) 1.25rem; }
/* Shared navigation appearance; content and active-page identity remain native. */
.sx-header .main-nav a, .sx-menu-panel :is(.statx-nav-link, .main-nav a) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 2.5rem;
  padding: 0 .75rem !important;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #d4d4d4 !important;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4 !important;
  text-decoration: none;
}
.sx-header .main-nav a:hover, .sx-menu-panel :is(.statx-nav-link, .main-nav a):hover,
.sx-header .main-nav :is(.current-menu-item > a, a.sx-active),
.sx-menu-panel :is(.statx-nav-link-active, .current-menu-item > a, a.sx-active) {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 18px rgba(255,255,255,.08), inset 0 0 14px rgba(255,255,255,.03);
  color: white !important;
}
.sx-header .main-nav a:focus-visible, .sx-menu-panel :is(.statx-nav-link, .main-nav a):focus-visible {
  outline: 2px solid rgba(255,255,255,.72);
  outline-offset: 2px;
}
.sx-menu-overlay {
  grid-area: 3 / 1;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--sx-menu-overlay-bg) !important;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 0;
  transition: opacity var(--sx-menu-duration) ease, visibility 0s var(--sx-menu-duration);
}
.sx-menu-overlay:hover,
.sx-menu-overlay:focus,
.sx-menu-overlay:active {
  background: var(--sx-menu-overlay-bg) !important;
  outline: none;
  box-shadow: none;
}

.sx-menu-panel[data-menu-state="open"], .sx-menu-overlay[data-menu-state="open"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.sx-menu-panel[data-menu-state="open"] {
  max-height: calc(100dvh - var(--sx-header-offset-top) - var(--sx-header-height-mobile));
  transform: translateY(0);
}
@media (max-width: 1023px), (pointer: coarse) {
  :root {
    --sx-header-bg: rgba(10, 14, 22, 0.50);
    --sx-header-blur: blur(4px);
  }
}

@media (max-width: 1023px) {
  /* Hand paint back to the header only after the shared backing collapses. */
  .sx-header {
    transition: background-color 0s var(--sx-menu-duration), backdrop-filter 0s var(--sx-menu-duration), -webkit-backdrop-filter 0s var(--sx-menu-duration), border-bottom-color 0s var(--sx-menu-duration), box-shadow 0s var(--sx-menu-duration);
  }
  .sx-header.sx-menu-open {
    transition-delay: 0s;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
  }
}
@media (min-width: 1024px) {
  .sx-menu-layer { display: none; }
  .sx-header { height: var(--sx-header-height-desktop); }
  .sx-header-brand[data-brand="leanhero"] img { width: 82.5px; height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-header, .sx-menu-glass, .sx-menu-panel, .sx-menu-overlay, .sx-burger-line { transition: none; }
  .sx-menu-panel { transform: none; }
}