/* One navigation component for the Railway home and every marketing page. */
:root:has(.marketing-header) { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #655676 #101015; }
:root[data-study-theme="light"]:has(.marketing-header) { scrollbar-color: #a69bbd #efedf5; }
:root:has(.cm-page > .marketing-header) { scroll-padding-top: 100px; }
@font-face { font-family: "Instrument Sans"; src: url('/fonts/violet-circuit/instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Archivo"; src: url('/fonts/violet-circuit/archivo.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
.marketing-header {
  --nav-ground: #08080b;
  --nav-panel: #141319;
  --nav-ink: #f4f1fa;
  --nav-rule: #3a3443;
  --nav-inset: clamp(20px, 3vw, 44px);
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 24px;
  width: 100%; height: 82px; padding: 0 var(--nav-inset);
  border-bottom: 1px solid var(--nav-rule);
  background: var(--nav-ground); color: var(--nav-ink);
  font: 400 14px/1.4 "Instrument Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
:root[data-study-theme="light"] .marketing-header { --nav-ground: #f5f4f8; --nav-panel: #fff; --nav-ink: #231d32; --nav-rule: #ddd8e5; }
.railway-page .marketing-header { position: fixed; left: 0; right: 0; }
.marketing-header a { color: inherit; text-decoration: none; }
.marketing-header a:hover { text-decoration: none; }
.marketing-header :is(a, button, summary):focus-visible { outline: 2px solid var(--railgrid-accent); outline-offset: 4px; }
.marketing-header svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.marketing-header .marketing-brand { display: inline-flex; align-items: center; flex: none; gap: 10px; font: 600 31px/1 "Archivo", sans-serif; letter-spacing: -.03em; }
.marketing-brand svg { width: 30px; height: 30px; color: var(--railgrid-accent); }
.marketing-header .marketing-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.marketing-nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.marketing-header :is(.marketing-nav, .marketing-menu) a:hover { color: var(--railgrid-accent); }
.marketing-header a[aria-current] { color: var(--railgrid-accent); text-decoration: underline; text-underline-offset: 5px; }
.marketing-header :is(.marketing-start, .marketing-menu-start) { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 44px; padding: 10px 19px; border: 1px solid var(--railgrid-accent); border-radius: 4px; background: var(--railgrid-accent); color: var(--railgrid-on-accent); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.marketing-header :is(.marketing-start, .marketing-menu-start):hover { background: var(--railgrid-accent-hover); border-color: var(--railgrid-accent-hover); color: var(--railgrid-on-accent); }
.marketing-header :is(.marketing-start, .marketing-menu-start) svg { width: 18px; height: 18px; }
.marketing-header .cl-theme-picker { position: relative; flex: none; margin: 0; }
.marketing-header [hidden], .marketing-header details:not([open]) > :not(summary) { display: none; }
.marketing-header summary { list-style: none; cursor: pointer; }
.marketing-header summary::-webkit-details-marker { display: none; }
.marketing-header .cl-theme-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 56px; height: 44px; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--nav-ink); font: inherit; }
.marketing-header .cl-theme-toggle:hover, .marketing-header .cl-theme-picker[open] .cl-theme-toggle { background: var(--nav-panel); }
.marketing-header .cl-theme-picker svg { width: 18px; height: 18px; }
.marketing-header .cl-theme-toggle .cl-theme-chevron { width: 10px; height: 10px; color: inherit; }
.marketing-header .cl-sun { display: none; }
:root[data-study-theme="light"] .marketing-header .cl-sun { display: block; }
:root[data-study-theme="light"] .marketing-header .cl-moon { display: none; }
.marketing-header .cl-theme-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 3; width: 176px; padding: 6px; border: 1px solid var(--nav-rule); border-radius: 4px; background: var(--nav-panel); }
.marketing-header .cl-theme-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px; border: 0; border-radius: 2px; background: transparent; color: var(--nav-ink); font: inherit; text-align: left; cursor: pointer; }
.marketing-header .cl-theme-menu button:hover, .marketing-header .cl-theme-menu button:focus-visible { background: var(--nav-ground); }
.marketing-header .cl-theme-menu button[aria-pressed="true"] { color: var(--railgrid-accent); }
.marketing-header .cl-theme-check { width: 14px; height: 14px; margin-left: auto; visibility: hidden; }
.marketing-header [aria-pressed="true"] .cl-theme-check { visibility: visible; }
.marketing-header .marketing-menu { display: none; }
.marketing-menu summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; }
.marketing-menu summary svg { width: 18px; height: 18px; transform: rotate(90deg); }
.marketing-menu[open] summary svg { transform: rotate(-90deg); }
.marketing-menu nav { position: absolute; top: 100%; left: var(--nav-inset); right: var(--nav-inset); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; margin: 0; border: 1px solid var(--nav-rule); border-radius: 4px; background: var(--nav-panel); max-height: calc(100svh - 90px); overflow-y: auto; }
.marketing-menu nav a { display: flex; align-items: center; min-height: 44px; padding: 10px; }
.marketing-header .marketing-menu-start { grid-column: 1 / -1; margin-top: 8px; }
.marketing-skip { position: fixed; z-index: 1100; top: 12px; left: 20px; transform: translateY(-180%); padding: 12px 20px; background: var(--railgrid-accent); color: var(--railgrid-on-accent); }
.marketing-skip:focus { transform: none; }
@media (max-width: 1050px) {
  .marketing-header { gap: 16px; }
  .marketing-header .marketing-nav { display: none; }
  .marketing-header .cl-theme-picker { margin-left: auto; }
  .marketing-header .marketing-menu { display: block; }
}
@media (max-width: 700px) {
  .marketing-header { height: 72px; gap: 8px; }
  .marketing-header .marketing-brand { font-size: 24px; gap: 8px; }
  .marketing-brand svg { width: 24px; height: 24px; }
  .marketing-header .cl-theme-toggle { width: 44px; }
  .marketing-header > .marketing-start { display: none; }
}