/* ===== Cookie notice banner (marketing site only) ===== */
.ckb-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:var(--chrome); border-top:1px solid rgba(255,255,255,0.12);
  box-shadow:0 -8px 30px rgba(0,0,0,0.18);
  transform:translateY(100%); opacity:0; transition:transform .35s ease, opacity .35s ease;
  padding:18px 20px;
}
.ckb-banner.is-visible{ transform:translateY(0); opacity:1; }

.ckb-banner-inner{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.ckb-text{ flex:1 1 480px; font-size:13px; line-height:1.6; color:rgba(255,255,255,0.82); margin:0; }
.ckb-text strong{ color:#FFFFFF; }
.ckb-text a{ color:var(--brass); text-decoration:underline; }
.ckb-text a:hover{ color:var(--brass-bright, var(--brass)); }

.ckb-actions{ display:flex; gap:10px; flex:0 0 auto; }
.ckb-btn-primary{
  font-family:var(--font-mono); font-weight:700; font-size:12.5px;
  padding:10px 20px; border-radius:7px; background:var(--brass); color:#FFFFFF;
  border:none; cursor:pointer; white-space:nowrap;
}
.ckb-btn-ghost{
  font-family:var(--font-mono); font-weight:600; font-size:12.5px;
  padding:10px 18px; border-radius:7px; background:transparent; color:rgba(255,255,255,0.75);
  border:1px solid rgba(255,255,255,0.25); cursor:pointer; white-space:nowrap;
}
.ckb-btn-ghost:hover{ border-color:rgba(255,255,255,0.5); color:#FFFFFF; }

@media(max-width:640px){
  .ckb-banner{ padding:16px; max-height:80vh; overflow-y:auto; }
  .ckb-banner-inner{ flex-direction:column; align-items:stretch; gap:14px; }
  /* .ckb-text's flex-basis:480px means HEIGHT once the axis flips to
     column -- without resetting it here, the text block alone claims
     480px of vertical space on a short phone screen, which is most of
     the viewport. auto lets it size to its actual content instead. */
  .ckb-text{ flex:1 1 auto; }
  .ckb-actions{ width:100%; }
  .ckb-actions button{ flex:1; }
}