/* Shared public-site chrome — the live-ad tickerbar, top nav, and footer
   injected into every public page via the __SITE_HEADER__/__SITE_FOOTER__
   placeholders (app.py _inject_site_chrome). Single source of truth,
   extracted verbatim from the homepage so /, /v2, /get-paid, /faq, /privacy,
   /terms, /install, /surface-pricing and /demo render the exact same chrome.

   Self-contained on purpose: values live in --kb-* custom properties defined
   on the chrome roots (NOT the page's :root), and every selector is scoped
   under .tickerbar/.site-nav/.site-footer, so neither a page's palette nor
   leftover page CSS can skew the shared chrome. The tape internals keep the
   class names market.js builds (.ti/.sym/.txt/.sep/.dim). */

.tickerbar,.site-nav,.site-footer{
  --kb-ink:#17181a;
  --kb-muted:#6f7378;
  --kb-faint:#a3a8ae;
  --kb-line-strong:rgba(20,30,24,.12);
  --kb-accent-dark:#0e6f36;
  --kb-accent2:#38c46b;
  --kb-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --kb-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
  --kb-maxw:1080px;
  margin:0;
  box-sizing:border-box;
  font-family:var(--kb-font);
  line-height:1.4;
}
.tickerbar *,.site-nav *,.site-footer *{box-sizing:border-box}
.site-nav a,.site-footer a{color:inherit;text-decoration:none}

/* ---- Top ticker — stock-market tape of the live bid market. Scrolls away
   with the page like a normal top bar (deliberately NOT sticky — it's set
   dressing, not chrome). Populated by market.js. ---- */
.tickerbar{
  position:relative;z-index:5;
  display:flex;align-items:stretch;
  background:linear-gradient(180deg,#1b1e23,#15171b);
  border-bottom:1px solid rgba(255,255,255,.08);
  height:38px;overflow:hidden;
  font-family:var(--kb-mono);font-size:11.5px;
}
.tickerbar .tapewrap{flex:1;display:flex;align-items:center;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.tickerbar .tape{display:flex;width:max-content;animation:tapeloop 38s linear infinite}
.tickerbar .tape .seq{display:flex;align-items:center;flex:0 0 auto}
@keyframes tapeloop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tickerbar .ti{display:inline-flex;align-items:center;gap:7px;padding:0 22px;color:#8b94a0;white-space:nowrap}
.tickerbar .ti b{color:#e8edf3;font-weight:700}
/* Brand bold green, ad line white — the tape mirrors the spinner ad look. */
.tickerbar .ti .sym{color:var(--kb-accent2);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.tickerbar .ti .txt{color:#fff}
.tickerbar .up{color:var(--kb-accent2)}
.tickerbar .dn{color:#e05c4e}
.tickerbar .dim{color:#6b7480}
.tickerbar .sep{width:1px;height:14px;background:rgba(255,255,255,.10);align-self:center}

/* ---- Top nav ---- */
.site-nav{
  position:relative;
  z-index:5;
  height:68px;
  max-width:var(--kb-maxw);
  margin:0 auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-nav .brand{display:flex;align-items:center;gap:12px;color:var(--kb-ink);font-weight:740;font-size:28px;letter-spacing:-.02em}
.site-nav .brand svg{filter:drop-shadow(0 8px 14px rgba(24,138,69,.18))}
.site-nav .brand .k-tile{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:linear-gradient(180deg,#2aa44f,#147a34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 11px rgba(56,196,107,.5),0 0 27px rgba(56,196,107,.26),0 5px 12px rgba(24,138,69,.28);color:#fff;font-family:'Montserrat',-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:24px;line-height:1;letter-spacing:-.02em}
.site-nav .brand .k-name{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.site-nav .nav-r{display:flex;gap:24px;align-items:center;font-size:13px;color:var(--kb-muted)}
.site-nav .nav-r a{white-space:nowrap;transition:color .16s ease,transform .16s ease}
.site-nav .nav-r a:hover{color:var(--kb-ink);transform:translateY(-1px)}
.site-nav .nav-r .nav-cta{color:var(--kb-accent-dark);font-weight:700;background:rgba(24,138,69,.10);border:1px solid rgba(24,138,69,.18);padding:8px 13px;border-radius:999px;box-shadow:0 8px 20px rgba(24,138,69,.08),inset 0 1px 0 rgba(255,255,255,.8)}
/* Long nav labels on desktop, short ones on mobile (smaller pill buttons). */
.site-nav .nav-xs{display:none}

/* ---- Footer ---- */
.site-footer{text-align:center;font-size:12px;color:var(--kb-muted);padding:30px 0 28px}
.site-footer .footdot{color:var(--kb-faint);padding:0 7px}

@media(max-width:860px){
  /* No ticker on mobile — the first screen is just nav (62px) + page header
     padding, so the homepage fold seam pins right at the fold. */
  .tickerbar{display:none}
  .site-nav .nav-xl{display:none}
  .site-nav .nav-xs{display:inline}
  .site-nav{height:62px;padding:0 18px}
  .site-nav .nav-r{gap:10px}
  .site-nav .nav-r .nav-cta{display:none}
  .site-nav .nav-r a{padding:7px 13px;border-radius:999px;border:1px solid var(--kb-line-strong);background:rgba(255,255,255,.88);color:var(--kb-ink);font-weight:600;box-shadow:0 8px 22px rgba(21,31,24,.07),inset 0 1px 0 rgba(255,255,255,.7)}
}
@media(max-width:480px){
  .site-nav .brand{font-size:25px}
  .site-nav .nav-r{gap:8px}
  .site-nav .nav-r a{padding:6px 11px;font-size:12px}
}
@media(max-width:360px){
  .site-nav .brand{gap:7px;font-size:23px}
  .site-nav .nav-r{gap:6px}
  .site-nav .nav-r a{padding:5px 9px;font-size:11px}
}
@media(max-width:340px){
  .site-nav{height:54px;padding:0 14px}
  .site-nav .brand{gap:7px}
  .site-nav .brand span:last-child{font-size:0;width:95px;display:inline-block}
  .site-nav .brand span:last-child:after{content:"Kickbacks";font-size:21px}
  .site-nav .nav-r a{padding:5px 8px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  /* Deliberate exception to page-level animation kills: the ticker tape IS
     the content (the live ad lineup) — a frozen tape reads as broken, so it
     keeps crawling even when the OS asks for reduced motion (e.g. Windows
     "animation effects" off, which silently froze it for some users). */
  .tickerbar .tape{animation:tapeloop 38s linear infinite!important}
}