/* MostlyQR — the liquid-glass header, shared by every marketing page (F312). Markup: window.MQRNav in
   mqr/shared/chrome.jsx (which also sets the is-dark / is-light tone from what is under the bar). */
/* ── Liquid-glass header (every marketing page, F312 — founder 2026-10-09) ──
   Floating glass PILLS over the hero instead of a bright full-width bar: the logo, the page links (centred) and
   the actions, each its own pill — no long empty bar between them. The header box keeps its place at the top of
   the flow but takes no space (negative margin), so the page's first section runs up underneath. That section
   gets a transparent top border the height of the bar (its background still paints under it — background-origin
   border-box), so its content starts below the pills on every page without per-page padding. The pills' padding is taken out of the gutter, so the logo sits exactly over the headline. */
.mk-nav.mk-nav--glass { --lk-nav-h: 68px; position: sticky; top: 0; z-index: 40; height: var(--lk-nav-h); margin-bottom: calc(-1 * var(--lk-nav-h));
  padding-top: 12px; box-sizing: border-box; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.mk-nav--glass .mk-wrap.mk-nav__inner { height: 46px; padding: 0 calc(var(--mk-gutter, 32px) - 14px); gap: 12px; }
.mk-nav--glass .mk-brand, .mk-nav--glass .mk-nav__links, .mk-nav--glass .mk-nav__cta {
  pointer-events: auto; height: 46px; box-sizing: border-box; display: inline-flex; align-items: center; border-radius: 999px;
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.mk-nav--glass .mk-brand { padding: 0 16px 0 13px; }
.mk-nav--glass .mk-nav__links { margin: 0 auto; padding: 0 22px; gap: 24px; }
.mk-nav--glass .mk-nav__cta { margin-left: 0; padding: 0 5px 0 12px; gap: 6px; }
.mk-nav--glass.is-dark { --fg: #ffffff; --fg-muted: rgba(255,255,255,.74); --hairline: rgba(255,255,255,.14); }
.mk-nav--glass.is-dark .mk-brand, .mk-nav--glass.is-dark .mk-nav__links, .mk-nav--glass.is-dark .mk-nav__cta {
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)), rgba(12,15,26,.55);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.05), 0 12px 32px -12px rgba(0,0,0,.65); }
.mk-nav--glass.is-light .mk-brand, .mk-nav--glass.is-light .mk-nav__links, .mk-nav--glass.is-light .mk-nav__cta {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 0 0 1px rgba(10,14,40,.06), 0 12px 30px -14px rgba(10,14,40,.28); }
.mk-nav--glass .mk-brand { color: var(--fg); }
/* the links pill follows the shared nav's own breakpoint (marketing.css hides .mk-nav__links at ≤940px) */
@media (max-width: 940px) { .mk-nav--glass .mk-nav__links { display: none; } .mk-nav--glass .mk-wrap.mk-nav__inner { justify-content: space-between; } }
@media (max-width: 640px) {
  .mk-nav--glass .mk-wrap.mk-nav__inner { padding: 0 max(8px, calc(var(--mk-gutter, 20px) - 12px)); justify-content: space-between; }
  .mk-nav--glass .mk-brand { padding: 0 13px 0 10px; }
}

.mk-nav--glass + * { border-top: var(--lk-nav-h, 68px) solid transparent !important; background-origin: border-box; }
.mk-nav--glass + *[id] { scroll-margin-top: 0; }
:root { scroll-padding-top: 76px; }   /* in-page anchors land below the floating bar */
/* the old .ent-nav tint must not paint behind the pills */
.mk-nav--glass.ent-nav { background: none; }

/* Page edge (status bar on iOS 26, overscroll): the hero's colour on dark-hero pages; content keeps the light ground. */
html, body { background: var(--mq-edge, var(--bg)); }
.mk-root { background: var(--bg); }