/* Sticky header: a Buy now button and the trial download on every screen.
 *
 * Over the hero video it is transparent and shows only the buttons (the video
 * already carries the big logo); once the hero has scrolled away header.js
 * adds .kl-head-solid and it becomes a dark bar with the small logo.
 * Self-contained, like footer.css: the home page is the Kadence mirror.
 */
.kl-head{position:fixed;top:0;left:0;right:0;z-index:9999;
  font:400 14px/1 'Host Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;transition:background-color .25s ease,box-shadow .25s ease}
.kl-head-in{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:12px}
.kl-head-logo{margin-right:auto;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.kl-head-logo img{display:block;width:120px;height:auto}
.kl-head a.kl-head-btn{display:inline-block;padding:11px 20px;border-radius:20px;text-decoration:none;
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  transition:opacity .2s ease}
.kl-head a.kl-head-btn:hover{opacity:.8}
.kl-head a.kl-head-trial{color:#f9f4ec;border:1px solid rgba(249,244,236,.55)}
.kl-head a.kl-head-buy{color:#f9f4ec;background:#7d4f27;border:1px solid #7d4f27}
.kl-head-solid{background:#252014;box-shadow:0 1px 0 rgba(249,244,236,.08)}
.kl-head-solid .kl-head-logo{opacity:1;visibility:visible}
/* Anchor jumps land below the bar, not under it. */
#pricing{display:block;scroll-margin-top:72px}
@media(max-width:600px){
  .kl-head-in{padding:10px 16px}
  .kl-head-logo img{width:104px}
  .kl-head a.kl-head-trial{display:none}
  .kl-head a.kl-head-btn{padding:10px 16px}
}