:root{--knk-demo-bar-height:48px}
html{scroll-padding-top:calc(var(--knk-demo-bar-height) + 88px)}
body.knk-demo-context{padding-top:var(--knk-demo-bar-height)!important}
body.knk-demo-context .site-header,
body.knk-demo-context .header{top:var(--knk-demo-bar-height)!important}
body.knk-demo-context .progress{top:var(--knk-demo-bar-height)!important}
.knk-demo-context-bar{position:fixed;z-index:2147483000;top:0;right:0;left:0;min-height:48px;color:#f8f4ec;background:rgba(31,34,30,.96);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 10px 34px rgba(20,22,19,.18);backdrop-filter:blur(18px);font-family:Inter,Manrope,"Segoe UI",Arial,sans-serif}
.knk-demo-context-inner{width:min(1320px,calc(100% - 28px));min-height:48px;margin:auto;display:flex;align-items:center;gap:16px}
.knk-demo-context-home{display:flex;align-items:center;gap:9px;color:#f8f4ec;text-decoration:none;white-space:nowrap;font-size:12px;font-weight:800;letter-spacing:.01em}
.knk-demo-context-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#f5efe4;color:#30342f;font-size:13px;font-weight:900;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.knk-demo-context-back{color:#c9c9c1;font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap;transition:.2s}
.knk-demo-context-back:hover{color:#fff}
.knk-demo-context-divider{width:1px;height:20px;background:rgba(255,255,255,.16)}
.knk-demo-context-current{min-width:0;display:flex;align-items:center;gap:8px;margin-right:auto;color:#e3dfd6;font-size:11px}
.knk-demo-context-current i{width:7px;height:7px;border-radius:50%;background:#9aae98;box-shadow:0 0 0 4px rgba(154,174,152,.12);flex:0 0 auto}
.knk-demo-context-current b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:750}
.knk-demo-context-actions{display:flex;gap:7px}
.knk-demo-context-action{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border:1px solid rgba(255,255,255,.16);border-radius:10px;color:#f8f4ec;background:rgba(255,255,255,.05);text-decoration:none;white-space:nowrap;font-size:10px;font-weight:800;transition:transform .2s,border-color .2s,background .2s}
.knk-demo-context-action:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.1)}
.knk-demo-context-action.primary{border-color:#f3ece0;background:#f3ece0;color:#30342f}
.knk-demo-context-cta{position:relative;z-index:5;margin:0;padding:56px 20px;color:#343832;background:linear-gradient(135deg,#f6f0e6,#e6ddd0 58%,#d8e0d3);border-top:1px solid rgba(52,56,50,.12);border-bottom:1px solid rgba(52,56,50,.12);font-family:Inter,Manrope,"Segoe UI",Arial,sans-serif}
.knk-demo-context-cta-inner{width:min(1120px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.knk-demo-context-cta-copy span{display:block;margin-bottom:10px;color:#8b6653;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.knk-demo-context-cta-copy h2{max-width:760px;margin:0;font-family:Manrope,Inter,sans-serif;font-size:clamp(28px,4vw,48px);line-height:1.03;letter-spacing:-.045em}
.knk-demo-context-cta-copy p{max-width:690px;margin:14px 0 0;color:#676c65;font-size:14px;line-height:1.7}
.knk-demo-context-cta-actions{display:grid;gap:9px;min-width:220px}
.knk-demo-context-cta-actions a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:14px;border:1px solid rgba(52,56,50,.16);color:#343832;background:rgba(255,253,248,.62);font-size:12px;font-weight:850;text-decoration:none;transition:.22s}
.knk-demo-context-cta-actions a:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(56,48,40,.1)}
.knk-demo-context-cta-actions a:first-child{color:#fffdf8;background:#343832;border-color:#343832}
@media(max-width:760px){:root{--knk-demo-bar-height:56px}.knk-demo-context-inner{width:calc(100% - 16px);gap:8px}.knk-demo-context-home span:last-child,.knk-demo-context-divider,.knk-demo-context-current{display:none}.knk-demo-context-back{margin-right:auto}.knk-demo-context-action{min-height:34px;padding:0 9px;font-size:9px}.knk-demo-context-action.secondary{display:none}.knk-demo-context-cta{padding:42px 16px}.knk-demo-context-cta-inner{grid-template-columns:1fr}.knk-demo-context-cta-actions{grid-template-columns:1fr 1fr;min-width:0}.knk-demo-context-cta-copy p{font-size:13px}}
@media(max-width:420px){.knk-demo-context-back{font-size:10px}.knk-demo-context-action{padding:0 8px}.knk-demo-context-action.primary{max-width:118px}.knk-demo-context-cta-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.knk-demo-context-action,.knk-demo-context-cta-actions a{transition:none}}

/* Two legacy landing layouts keep their header inside <main>. Make it fixed
   below the demo bar so the sticky offset does not create an empty strip. */
body.knk-demo-context-fitness{padding-top:calc(var(--knk-demo-bar-height) + 84px)!important}
body.knk-demo-context-fitness .site-header{position:fixed!important;top:var(--knk-demo-bar-height)!important;right:0;left:0;z-index:2147482000!important}
body.knk-demo-context-barbershop{padding-top:calc(var(--knk-demo-bar-height) + 86px)!important}
body.knk-demo-context-barbershop .header{position:fixed!important;top:var(--knk-demo-bar-height)!important;right:0;left:0;z-index:2147482000!important}
@media(max-width:760px){body.knk-demo-context-fitness{padding-top:calc(var(--knk-demo-bar-height) + 72px)!important}}
@media(max-width:720px){body.knk-demo-context-barbershop{padding-top:calc(var(--knk-demo-bar-height) + 72px)!important}}