/* Shared marketing navigation bar — SINGLE SOURCE OF TRUTH.
 *
 * Loaded by public/index.html, /alternatives/*, /guides/* and /tools/* 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,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line,#e2edf0)}
header::after{content:"";display:block;height:2px;background:var(--grad,linear-gradient(135deg,#0891b2,#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,#0c1b21);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,#0891b2,#22d3ee));display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(8,145,178,.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,#27414a);text-decoration:none}
header nav .links a:hover{color:var(--brand,#0891b2)}
header nav .links a[aria-current="page"]{color:var(--brand,#0891b2)}
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,#0891b2,#22d3ee));color:#fff;box-shadow:0 12px 30px -10px rgba(8,145,178,.6)}
header nav .btn.p:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 16px 36px -10px rgba(8,145,178,.7)}
header nav .btn.g{background:#fff;border-color:#d7e5ea;color:var(--ink,#0c1b21)}
header nav .btn.g:hover{border-color:var(--brand,#0891b2);color:var(--brand,#0891b2);transform:translateY(-1px)}
/* phones: the link row drops below the logo and WRAPS (v1.25.0). It used to be `display:none`
   under 860px, so Features / Pricing / FAQs / Compare / Guides simply vanished on every phone —
   the whole site was two buttons. Then it became a hidden-scrollbar `overflow-x:auto` strip, which
   at 390px cut the last link mid-word 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, and the only "Sign in" left on the page was buried in the footer.
   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}
}