/* Cookie banner — Figma 18670:18789. A 1320 × 80 bar, #F6F8F9, 16 radius,
   16px above the viewport's bottom edge, title + one line of copy on the
   left, Decline / Accept outline pills (32 tall, 12 apart) on the right.
   Markup is injected by js/cookies.js. Below ~1350px the copy wraps and the
   bar grows; on phones the buttons drop under the text and share the width. */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 96;                         /* above the sticky CTA (90) and the demo pill (95), below the nav (100) */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(1320px, calc(100% - 32px));
  min-height: 80px;
  padding: 16px 25px 16px 24px;
  background: #f6f8f9;
  border-radius: 16px;
  box-shadow: 0 0.975px 2.925px rgba(10, 36, 66, 0.24);
  color: #0a2633;
  letter-spacing: 0.6px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 24px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.5s;
}
.cookie-banner.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.cookie-banner__text {
  flex: 1 1 auto;
  min-width: 0;
}
.cookie-banner__title {
  margin: 0;
  font-weight: 600;                    /* PP NM SemiBold */
  font-size: 14px;
  line-height: 24px;
}
.cookie-banner__copy {
  margin: 0;
  font-weight: 450;                    /* PP NM Regular */
  font-size: 13px;
  line-height: 24px;
  opacity: 0.7;
}

.cookie-banner__actions {
  flex: none;
  display: flex;
  gap: 12px;
}
.cookie-banner .btn {
  height: 32px;
  padding: 0 18px;
  letter-spacing: 0.2px;
}

/* While the banner is up, lift the floating CTAs above it. --cookie-h is
   the banner's measured height (set by js/cookies.js). */
html.has-cookie-banner .cta__btn--sticky {
  bottom: calc(var(--cookie-h, 80px) + 28px);
  transition:
    background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.35s ease,
    bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
html.has-cookie-banner .demo-pill {
  bottom: calc(var(--cookie-h, 80px) + 28px);
}

@media (max-width: 720px) {
  .cookie-banner {
    bottom: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: calc(100% - 16px);
    padding: 16px;
  }
  .cookie-banner__actions .btn { flex: 1 1 0; }
  html.has-cookie-banner .cta__btn--sticky,
  html.has-cookie-banner .demo-pill {
    bottom: calc(var(--cookie-h, 160px) + 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner,
  html.has-cookie-banner .cta__btn--sticky { transition: none; }
}