/* KeyVex site nav — the landing page's header, for every static page that is not the landing.
   The rules are the landing's (marketing/site/landing.html, "Nav" block) so the bar is the same bar; a page
   that uses it adds `kvx-navpage` to <body> for the top padding a fixed bar needs, includes the header markup
   the dataset pages carry, and loads /site-search.js + /site-nav.js. Edit the landing's copy and this one together. */
:root{--cta:linear-gradient(118deg,#5bff31 0%,#19d79b 100%)}
/* ═══════════ Nav ═══════════ */
.nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);
  width:min(1180px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;
  padding:9px 11px 9px 18px;background:rgba(9,16,18,.6);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);border-radius:15px;z-index:50;
  box-shadow:0 8px 30px -12px rgba(0,0,0,.6)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:1}
.brand img.mk{height:28px;width:auto;display:block}
.brand img.wd{height:20px;width:auto;display:block}
.links{display:flex;gap:4px}
.links a{color:#bccaca;text-decoration:none;font-size:14px;font-weight:500;padding:8px 13px;border-radius:9px;transition:.18s}
.links a:hover{color:#fff;background:rgba(255,255,255,.05)}
.acts{display:flex;align-items:center;gap:4px;flex:1;justify-content:flex-end}
.acts .ghost{color:#bccaca;text-decoration:none;font-size:14px;font-weight:600;padding:9px 13px;border-radius:10px;transition:.18s}
.acts .ghost:hover{color:#fff}
.acts .key{text-decoration:none;font-size:14px;font-weight:700;color:#04140c;padding:10px 16px;border-radius:10px;
  background:var(--cta);box-shadow:0 8px 22px -10px rgba(77,255,32,.55);transition:.18s}
.acts .key:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px rgba(77,255,32,.75)}

/* ═══════════ Mobile nav: account circle + hamburger (shown ≤820) ═══════════ */
.mnav{display:none;align-items:center;gap:8px}
.acct{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;
  color:#c4d2d2;text-decoration:none;transition:.16s;flex:0 0 auto}
.acct:hover,.acct:active{border-color:rgba(77,255,32,.45);color:#fff;background:rgba(77,255,32,.06)}
.acct svg{width:21px;height:21px}
/* signed-in state: the round button becomes the member's avatar */
.acct.avatar{padding:0;overflow:hidden;background:linear-gradient(118deg,#5bff31 0%,#19d79b 100%);
  color:#04140c;font-weight:700;font-size:15px;border-color:rgba(77,255,32,.35)}
.acct.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.burger{width:40px;height:40px;border:1px solid rgba(255,255,255,.12);border-radius:11px;
  background:rgba(255,255,255,.04);cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4.5px;padding:0;flex:0 0 auto;transition:.16s}
.burger:hover{border-color:rgba(255,255,255,.24)}
.burger span{display:block;width:18px;height:2px;background:#c4d2d2;border-radius:2px;
  transition:.26s cubic-bezier(.2,.7,.2,1)}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* dropdown sheet under the hamburger */
.msheet{position:fixed;top:80px;right:14px;width:min(320px,calc(100% - 28px));z-index:49;
  background:rgba(9,16,18,.94);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:10px;
  display:flex;flex-direction:column;gap:2px;box-shadow:0 30px 70px -22px rgba(0,0,0,.8);
  opacity:0;pointer-events:none;transform:translateY(-10px) scale(.98);transform-origin:top right;
  transition:opacity .2s,transform .22s cubic-bezier(.2,.7,.2,1)}
.msheet.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.msheet a{color:#cdd9d9;text-decoration:none;font-size:15.5px;font-weight:600;
  padding:13px 15px;border-radius:11px;transition:.14s}
.msheet a:hover,.msheet a:active{background:rgba(255,255,255,.05);color:#fff}
.msheet .div{height:1px;background:rgba(255,255,255,.08);margin:7px 6px}
.msheet .cta{background:var(--cta);color:#04140c;text-align:center;font-weight:700;margin-top:2px}
.msheet .cta:hover,.msheet .cta:active{color:#04140c;filter:brightness(1.06)}

/* ═══════════ Hero ═══════════ */
.hero{position:relative;z-index:10;max-width:1040px;margin:0 auto;padding:150px 24px 100px;text-align:center}
@media (max-width:820px){.links{display:none}.acts{display:none}.mnav{display:flex}}
body.kvx-navpage{padding-top:0}
body.kvx-navpage .kvx-navpad{padding-top:96px}