/* klyr.css — shared chrome for every page (tokens, nav, footer, buttons, consent).
   Single source: pages link this AFTER their own styles so chrome always wins. */
:root{
  --void:#04060a; --panel:rgba(10,16,24,.62);
  --holo:#9adcf5; --holo-mid:rgba(154,220,245,.55); --holo-dim:rgba(154,220,245,.30); --holo-faint:rgba(154,220,245,.10);
  --you:#ffb37e; --you-core:#f0925a;
  --text:#eef6fa; --sub:rgba(238,246,250,.68); --muted:rgba(238,246,250,.44); --dim:rgba(238,246,250,.28);
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Geist',sans-serif; --mono:'Geist Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  /* aliases used by static/blog/docs pages (phase 1 of #299;
     naming unification comes with the shell refactor) */
  --bg:#04060a; --bg2:#060910;
  --card:rgba(10,16,24,.38); --card2:rgba(14,22,32,.38);
  --accent:#9adcf5; --accent2:#f0925a;
  --border:rgba(154,220,245,.16);
}
body{background:var(--void);color:var(--text)}
::selection{background:rgba(154,220,245,.25)}

/* ————— nav: liquid glass pill ————— */
.navbar{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:14px;
  background:linear-gradient(165deg,rgba(120,180,220,.10),rgba(10,18,28,.34));
  backdrop-filter:blur(30px) saturate(2) brightness(1.18);-webkit-backdrop-filter:blur(30px) saturate(2) brightness(1.18);
  border:1px solid rgba(154,220,245,.30);border-radius:14px;padding:11px 20px;overflow:hidden;
  box-shadow:0 12px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(154,220,245,.08), 0 0 30px rgba(154,220,245,.06)}
.navbar::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.02) 30%,transparent 55%,rgba(154,220,245,.08) 100%)}
.navbar>*{position:relative;z-index:1}
.navbar .mark{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:16px;font-weight:700;color:var(--text);text-decoration:none;letter-spacing:-.01em;margin-right:8px}
.navbar .mark .mkglyph{display:block}
.navbar .mark .mkglyph .cur{animation:kblink 1.2s infinite}
@keyframes kblink{0%,58%{opacity:1}72%,86%{opacity:.15}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.navbar .mark .mkglyph .cur{animation:none}}
.navbar .mark b{color:var(--holo)}
.navbar a.nl{color:var(--sub);text-decoration:none;font-size:13.5px;white-space:nowrap;
  padding:7px 13px;border-radius:9px;border:1px solid transparent;
  transition:color .25s, background .3s var(--ease), border-color .3s, box-shadow .3s, transform .3s var(--ease)}
.navbar a.nl:hover{color:#fff;
  background:linear-gradient(165deg,rgba(154,220,245,.16),rgba(154,220,245,.05));
  border-color:rgba(154,220,245,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px rgba(154,220,245,.14);
  transform:translateY(-1px)}
.navbar .cta{text-decoration:none;display:inline-block;background:linear-gradient(180deg,#ffc496,#f0925a);color:#1c0e05;font-weight:700;white-space:nowrap;
  border:none;border-radius:9px;padding:9px 20px;font-size:13.5px;cursor:pointer;margin-left:6px;
  box-shadow:0 0 26px rgba(240,146,90,.3);transition:all .3s var(--ease)}
.navbar .cta:hover{transform:translateY(-2px) scale(1.03);
  box-shadow:0 0 46px rgba(240,146,90,.55), inset 0 1px 0 rgba(255,255,255,.45)}
.navbar .menu-toggle{display:none;background:transparent;border:none;color:var(--sub);cursor:pointer;padding:7px 8px;border-radius:9px}
.navbar .menu-toggle:hover{color:#fff;background:rgba(154,220,245,.10)}
@media (max-width:900px){
  .navbar{flex-wrap:wrap;left:12px;right:12px;transform:none;width:auto;max-width:none;gap:8px;padding:9px 12px}
  .navbar .cta{padding:8px 14px;font-size:12.5px;white-space:nowrap}
  .navbar .mark{margin-right:0}
  .navbar a.nl{display:none}
  .navbar .menu-toggle{display:inline-flex;order:2}
  .navbar .cta{order:1;margin-left:auto}
  .navbar .mark{order:0}
  .navbar.open a.nl{display:block;order:3;width:100%;padding:11px 13px;border-top:1px solid rgba(154,220,245,.10)}
  .navbar.open a.nl:first-of-type{margin-top:8px}
}

/* ————— buttons ————— */
.btn{background:linear-gradient(180deg,#ffc496,#f0925a);color:#1c0e05;font-weight:700;font-size:15.5px;border:none;border-radius:11px;
  padding:15px 34px;cursor:pointer;box-shadow:0 0 36px rgba(240,146,90,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .3s var(--ease), box-shadow .3s;text-decoration:none;display:inline-block;text-align:center}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 54px rgba(240,146,90,.5), inset 0 1px 0 rgba(255,255,255,.4)}
.ghost{color:var(--holo);text-decoration:none;font-family:var(--mono);font-size:13.5px;letter-spacing:.04em}

/* ————— footer ————— */
footer.site{position:relative;z-index:2;border-top:1px solid rgba(154,220,245,.12);padding:24px 36px 26px;display:flex;flex-direction:column;gap:12px;
  font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.05em;background:rgba(4,6,10,.6);backdrop-filter:blur(8px)}
footer.site .frow{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
footer.site .fsub{font-size:10.5px;color:var(--muted);letter-spacing:.06em}
footer.site a{color:var(--muted);text-decoration:none}
footer.site .fsub a{color:var(--muted)}
footer.site a:hover{color:var(--holo)}
footer.site .flinks{font-size:12.5px}
footer.site .fbrand{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-family:var(--sans);font-weight:700}
footer.site .fbrand b{color:var(--holo)}

/* Consent banner styles live in /consent.js (injected with the banner). */

/* breadcrumb back to the list (blog/docs articles) */
.crumb{margin:0 0 10px;font-size:13.5px}
.crumb a{color:var(--sub);text-decoration:none}
.crumb a:hover{color:var(--holo)}


/* Waitlist CTAs are plain anchors (#295): keep the button classes
   rendering identically on <a>. */
a.btn,a.tbtn,a.cta{text-decoration:none;display:inline-block;text-align:center;box-sizing:border-box}