/* ============================================================
   Konnexta · Demo chrome
   Shared strip that sits above every demo site. Makes it
   unmistakable that the business is fictional and that the
   site was built by Konnexta.
   Loaded by every demo. Do not fork this file per site.
   ============================================================ */
:root{
  --kxd-bar-h: 40px;
  --kxd-navy:#0b1226;
  --kxd-navy-2:#070b18;
  --kxd-teal:#0cb8be;
  --kxd-teal-glow:#7fe9ec;
  --kxd-cream:#f0ebe3;
}
@media (max-width:720px){ :root{ --kxd-bar-h: 34px; } }

html{ scroll-padding-top: calc(var(--kxd-bar-h) + 72px); }
body{ padding-top: var(--kxd-bar-h); }

.kxd-bar{
  position:fixed; top:0; left:0; right:0; height:var(--kxd-bar-h);
  z-index:9000;
  background:linear-gradient(90deg,var(--kxd-navy-2),var(--kxd-navy) 55%,#101a33);
  border-bottom:1px solid rgba(127,233,236,.22);
  color:var(--kxd-cream);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:13px; line-height:1;
  display:flex; align-items:center;
  -webkit-font-smoothing:antialiased;
}
.kxd-bar__in{
  width:100%; max-width:1280px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; gap:12px;
}
.kxd-badge{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  background:var(--kxd-teal); color:#04201f;
  font-weight:800; letter-spacing:.12em; font-size:10px;
  padding:5px 9px; border-radius:5px; text-transform:uppercase;
}
.kxd-badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#04201f; opacity:.65;
}
.kxd-text{
  flex:1 1 auto; min-width:0;
  color:rgba(240,235,227,.86);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kxd-text strong{ color:var(--kxd-teal-glow); font-weight:700; }
.kxd-links{ flex:none; display:flex; align-items:center; gap:8px; }
.kxd-links a{
  color:var(--kxd-cream); text-decoration:none; white-space:nowrap;
  border:1px solid rgba(127,233,236,.34); border-radius:999px;
  padding:6px 12px; font-size:12px; font-weight:600;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.kxd-links a:hover,.kxd-links a:focus-visible{
  background:var(--kxd-teal); border-color:var(--kxd-teal); color:#04201f;
}
.kxd-links a.kxd-cta{ background:rgba(12,184,190,.16); }

/* On narrow screens keep the badge + the way back to the samples; the sentence
   truncates. konnexta.org stays one tap away in every demo's footer. */
@media (max-width:860px){
  .kxd-bar{ font-size:12px; }
  .kxd-links a.kxd-cta{ display:none; }
}
@media (max-width:560px){
  .kxd-text{ font-size:11px; }
  .kxd-bar__in{ padding:0 10px; gap:8px; }
  .kxd-links a{ padding:5px 10px; font-size:11px; }
}

/* Skip link, shared. */
.kxd-skip{
  position:absolute; left:-9999px; top:0; z-index:9500;
  background:var(--kxd-teal); color:#04201f;
  padding:10px 16px; border-radius:0 0 10px 0; font-weight:700;
}
.kxd-skip:focus{ left:0; }

@media print{ .kxd-bar,.kxd-skip{ display:none !important; } body{ padding-top:0 !important; } }