/*
 * Static marketing header seam.
 *
 * The live landing header in v2-interactive.jsx is canonical. Static pages
 * adopt these two layout classes and the canonical .nav-mark-group markup.
 * Page-local navigation links, actions, colors, borders, and sticky behavior
 * remain page-owned.
 */
:root {
  --sv-static-header-desktop-height: 98px;
  --sv-static-header-mobile-height: 74px;
}

nav.sv-static-header {
  box-sizing: border-box;
  height: var(--sv-static-header-desktop-height);
  min-height: var(--sv-static-header-desktop-height);
}

nav.sv-static-header > .nav-row.sv-static-header-row {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: var(--sv-static-header-desktop-height);
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1320px;
  min-height: var(--sv-static-header-desktop-height);
  padding: 26px 40px;
  width: 100%;
}

nav.sv-static-header .nav-mark-group {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}

nav.sv-static-header .nav-mark-group > .nav-mark {
  display: block;
  flex: 0 0 22px;
  height: 22px;
  width: 22px;
}

nav.sv-static-header .nav-mark-group > .nav-wordmark {
  align-items: baseline;
  color: var(--sv-pitch);
  display: inline-flex;
  font-family: var(--sv-font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 22px;
}

nav.sv-static-header .nav-mark-group > .nav-wordmark .nav-wordmark-dot {
  color: var(--sv-volt);
}

@media (max-width: 720px) {
  nav.sv-static-header {
    height: var(--sv-static-header-mobile-height);
    min-height: var(--sv-static-header-mobile-height);
  }

  nav.sv-static-header > .nav-row.sv-static-header-row {
    height: var(--sv-static-header-mobile-height);
    min-height: var(--sv-static-header-mobile-height);
    padding: 26px 20px;
  }
}