/* 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,#dbe6f2)}
header::after{content:"";display:block;height:2px;background:var(--grad,linear-gradient(135deg,#1e88e0,#22d3ee));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,#1e88e0,#22d3ee));display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(30,136,224,.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,#1e88e0)}
header nav .links a[aria-current="page"]{color:var(--brand,#1e88e0)}
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,#1e88e0,#22d3ee));color:#fff;box-shadow:0 12px 30px -10px rgba(30,136,224,.6)}
header nav .btn.p:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 16px 36px -10px rgba(30,136,224,.7)}
header nav .btn.g{background:#fff;border-color:#cfe0f2;color:var(--ink,#101223)}
header nav .btn.g:hover{border-color:var(--brand,#1e88e0);color:var(--brand,#1e88e0);transform:translateY(-1px)}
/* phones: the link row drops below the logo and WRAPS (v1.20.0).
 * It used to be a hidden-scrollbar `overflow-x:auto` strip, which at 390px cut the last link
 * mid-word ("Guide") with nothing on screen saying it scrolled — a link nobody can see is a link
 * nobody clicks. A wrapping row costs one line of height and every link is reachable. */
@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:14px 18px;flex-wrap:wrap;white-space:normal;padding:2px 0 6px}
}
@media(max-width:560px){header nav .btn{padding:10px 14px;font-size:13.5px}}
/* Sign in used to be `display:none` under 480px — an existing customer on a phone had no way in
   from the marketing site at all. Both buttons stay and stay on the LOGO's row (they shrink to fit),
   so the bar reads logo · Sign in · Start free trial, then the links underneath. */
@media(max-width:480px){
  header nav{gap:6px}
  header nav .btn{padding:8px 11px;font-size:12.5px;border-radius:10px}
  header .logo{font-size:15.5px;gap:7px}header .logo .m{width:26px;height:26px}
}
@media(max-width:400px){
  header nav{gap:5px}
  header nav .btn{padding:7px 9px;font-size:12px}
  header .logo{font-size:14.5px}header .logo .m{width:24px;height:24px}
  header nav .links{gap:10px 14px;font-size:13.5px}
}