/* Shared marketing navigation bar — SINGLE SOURCE OF TRUTH.
 *
 * Loaded by public/index.html, /alternatives/* and /guides/* so the header looks and
 * behaves identically everywhere. The /changelog header (server/changelog.js) is a
 * self-contained page and mirrors these values by hand — change them together.
 *
 * Everything here is scoped under `header` so a page's own .btn / .logo styles
 * (hero CTAs, footer logo) are untouched. Vars come from the page palette, with
 * literal fallbacks so the bar still renders if a stylesheet loads out of order.
 */
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line,#e7dcd6)}
header::after{content:"";display:block;height:2px;background:var(--grad,linear-gradient(135deg,#b91c1c,#f97316));opacity:.85}
/* explicit line-height: pages set their own body line-height (1.55 vs 1.6), which would
   otherwise leave the bar a pixel or two taller on some pages than on others */
header nav{display:flex;align-items:center;gap:12px;height:66px;line-height:1.55}
header .logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;letter-spacing:-.02em;color:var(--ink,#101223);text-decoration:none;white-space:nowrap}
header .logo .m{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:var(--grad,linear-gradient(135deg,#b91c1c,#f97316));display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(185,28,28,.55)}
header nav .links{display:flex;gap:26px;margin-left:26px;font-weight:600;font-size:14.5px}
header nav .links a{color:var(--slate,#33384f);text-decoration:none}
header nav .links a:hover{color:var(--brand,#b91c1c)}
header nav .links a[aria-current="page"]{color:var(--brand,#b91c1c)}
header nav .sp{flex:1}
header nav .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:12px 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap;text-decoration:none}
header nav .btn.p{background:var(--grad,linear-gradient(135deg,#b91c1c,#f97316));color:#fff;box-shadow:0 12px 30px -10px rgba(185,28,28,.6)}
header nav .btn.p:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 16px 36px -10px rgba(185,28,28,.7)}
header nav .btn.g{background:#fff;border-color:#cbdfd9;color:var(--ink,#101223)}
header nav .btn.g:hover{border-color:var(--brand,#b91c1c);color:var(--brand,#b91c1c);transform:translateY(-1px)}
/* phones: the link row drops below the logo and swipes sideways (v1.2.4) */
@media(max-width:860px){
  header nav{flex-wrap:wrap;height:auto;padding:10px 0;row-gap:2px}
  header nav .links{order:9;width:100%;margin-left:0;gap:18px;overflow-x:auto;white-space:nowrap;padding:2px 0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  header nav .links::-webkit-scrollbar{display:none}
}
@media(max-width:560px){header nav .btn{padding:10px 14px;font-size:13.5px}}
@media(max-width:480px){header nav{gap:8px}header nav .btn{padding:9px 13px;font-size:13.5px}header .logo{font-size:17px}header nav .btn.g{display:none}}