/* Promo bar — extracted from style.css for use on (site) pages */
/* ---------- Header ---------- */
/* top notification / download bar — stays pinned at the top on scroll */
.promo-bar {
  position: sticky;
  top: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0.5rem 1.25rem;
  background: #14141b;
  color: #a0a0a0;
  text-align: center;
}
.promo-bar__viewport {
  display: flex;
  justify-content: center;
  max-width: 100%;
  width: 100%;
}
.promo-bar__track {
  display: flex;
}
/* The message is the only thing that travels. The duplicate trails it so the
   loop closes without a seam, and is hidden wherever the bar does not scroll. */
.promo-bar__text--dupe { display: none; }
.promo-bar__text {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02rem;
}
.promo-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: none;
  cursor: pointer;
  color: #ff4844;
  font: inherit;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.02rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* static: out of the marquee, in from the close button */
.promo-bar__cta {
  flex: none;
  padding-inline: 0.75rem;
  margin-inline: 0.25rem 3rem;
  white-space: nowrap;
}
/* Wider than a phone the message doesn't scroll, so the viewport shrinks to
   the text and the centred bar sets Download Now straight after "Scale-ups".
   Phones keep the full-width marquee with the button parked at the right. */
@media (min-width: 601px) {
  .promo-bar { padding-inline: 3rem; }
  .promo-bar__viewport { width: auto; min-width: 0; }
  .promo-bar__cta { margin-inline: 0.15rem 0; padding-inline: 0.35rem; }
}
/* the track holds two identical groups, so -50% lands exactly on the duplicate */
@keyframes promo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 600px) {
  .promo-bar { padding-inline: 0; cursor: pointer; }
  .promo-bar__viewport { overflow: hidden; width: 100%; justify-content: flex-start; }
  .promo-bar__track { width: max-content; animation: promo-marquee 24s linear infinite; }
  /* the gap between the end of the message and the start of its repeat */
  .promo-bar__text { white-space: nowrap; padding-inline-end: 0.9rem; }
  .promo-bar__text--dupe { display: block; }
  .promo-bar:hover .promo-bar__track,
  .promo-bar:focus-within .promo-bar__track { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) {
    .promo-bar { padding-inline: 1.25rem; cursor: auto; }
    .promo-bar__viewport { overflow: visible; }
    .promo-bar__track { width: auto; animation: none; }
    .promo-bar__text { white-space: normal; padding-inline-end: 0; }
    .promo-bar__text--dupe { display: none; }
  }
}

/* ============================================================
   Dismissable promo bar
   ============================================================ */
.promo-bar {
  position: relative;   /* anchor for the close button */
  overflow: hidden;
  max-height: 140px;
  transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
}
.promo-bar__close {
  position: absolute;
  right: clamp(0.75rem, 2vw, 1.25rem);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #a0a0a0;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.promo-bar__close:hover { color: #fff; }
.promo-bar__close:focus-visible { outline: 2px solid #ff4844; outline-offset: 2px; }
/* keep the marquee clear of the button on small screens */
/* Keep the marquee clear of the close button on small screens. Padding does
   not do it: overflow clips at the padding box, so the text still scrolled
   through the padded strip and under the X. The box itself has to end early. */
@media (max-width: 767px) {
  .promo-bar__viewport {
    padding-inline-end: 0;
    margin-inline-end: 0;
    min-width: 0;
  }
}

/* dismissed: the bar collapses and everything pinned below it rises by 32px */
html.promo-dismissed .promo-bar {
  /* !important because style.css is currently served twice on some routes,
     so plain specificity was not reliably winning */
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  border: 0 !important;
}
.site-header,
.hb-menu,
.wk-top { transition: top 0.35s ease; }
html.promo-dismissed .site-header { top: 0; }
html.promo-dismissed .hb-menu { top: 58px; }
html.promo-dismissed .wk-top { top: 58px; }

/* Phones: the bar is a thin strip and the marquee runs nearly four times the
   width of the screen, so the type wants to be smaller than the desktop 0.85rem.
   Here rather than in style.css, so it is the same on every page. */
@media (max-width: 640px) {
  /* Pinned rather than inherited, so nothing about the page around it can
     change the size: px instead of rem (immune to a different root size), the
     family declared here instead of inherited from body (the two layouts set
     different stacks), and the adjust set on the bar itself so it does not
     depend on a page-level reset being present. */
  .promo-bar,
  .promo-bar * {
    font-family: 'greycliff-cf', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  .promo-bar__text,
  .promo-bar__cta {
    font-size: 11px;
    letter-spacing: 0.01em;
  }
  /* clear of the close button, which is 26px wide at 12px from the edge */
  .promo-bar__cta { margin-inline: 0.25rem 3rem; }
}