/* Single homepage-derived header for all marketing pages. No blog/article selectors. */
.marketing .site-header {
  --nav-bg: #fbfcff;
  --nav-text: #172a46;
  --nav-muted: #52657e;
  --nav-line: #d7e2ef;
  --nav-accent: #174ea6;
  background: var(--nav-bg);
  color: var(--nav-text);
  border-bottom: 1px solid var(--nav-line);
  padding: 16px max(32px, calc((100vw - 1136px) / 2));
  gap: 24px;
}
.dark .marketing .site-header { --nav-bg: #0e192b; --nav-text: #eff5ff; --nav-muted: #b5c7df; --nav-line: #354e70; --nav-accent: #9ac5ff; }
.marketing .site-header .wordmark { color: var(--nav-text); font-size: 36px; letter-spacing: -.04em; }
.marketing .site-header nav { gap: 20px; }
.marketing .site-header nav a { color: var(--nav-muted); font-size: 14px; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.marketing .site-header nav a:hover, .marketing .site-header nav a[aria-current] { color: var(--nav-accent); text-decoration: underline; }
.marketing .site-header button { min-height: 48px; border-radius: 8px; color: var(--nav-text); border-color: var(--nav-line); background: transparent; font-size: 14px; font-weight: 700; padding: 12px 20px; }
.marketing .site-header :focus-visible { outline: 3px solid var(--nav-accent); outline-offset: 5px; }
html:not(.js) .marketing .site-header button { display: none; }
html:not(.js) .marketing .site-header { position: static; }
@media (max-width: 1050px) {
  .marketing .site-header { flex-wrap: nowrap; gap: 16px; }
  .marketing .site-header nav { gap: 12px; }
}
@media (max-width: 980px) {
  .marketing .site-header { flex-wrap: wrap; }
  .marketing [data-menu] { display: block; margin-left: auto; }
  .marketing .site-header nav { order: 4; flex-basis: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .js .marketing .site-header nav:not(.open) { display: none; }
}
@media (max-width: 600px) {
  .marketing .site-header { padding: 12px 24px; gap: 12px; }
  .marketing .site-header nav { grid-template-columns: repeat(2, 1fr); }
  .marketing .site-header .wordmark { font-size: 32px; }
  .marketing .site-header button { padding-inline: 12px; }
}