:root {
  --pf-promo-height: 50px;   /* replaced at runtime with the bar's real height */
  --pf-promo-min: 50px;
  --pf-promo-rose: #e6a7b2;
  --pf-promo-rose-dark: #d68c9a;
  --pf-promo-ink: #0b1430;
}

.pf-promo-bar {
  position: fixed;
  z-index: 10000;
  inset: 0 0 auto;
  min-height: var(--pf-promo-min);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: stretch;
  background: var(--pf-promo-rose);
  box-shadow: 0 8px 28px rgba(11, 20, 48, 0.2);
  color: var(--pf-promo-ink);
  font-family: "Outfit", Inter, system-ui, sans-serif;
}

.pf-promo-bar__offer {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 10px 18px 10px 58px;
  color: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}

.pf-promo-bar__offer:hover,
.pf-promo-bar__offer:focus-visible {
  background: var(--pf-promo-rose-dark);
}

/* One offer, two lines of copy, one breakpoint. 640px is where the bar's own
   layout already changes, so the wording changes with it rather than at some
   second width of its own. */
.pf-promo-bar__narrow { display: none; }

.pf-promo-bar__close {
  border: 0;
  border-left: 1px solid rgba(11, 20, 48, 0.16);
  background: transparent;
  color: var(--pf-promo-ink);
  cursor: pointer;
  font: 400 27px/1 "Outfit", Inter, system-ui, sans-serif;
}

.pf-promo-bar__close:hover,
.pf-promo-bar__close:focus-visible {
  background: rgba(11, 20, 48, 0.09);
}

body.pf-has-promo-bar {
  padding-top: var(--pf-promo-height) !important;
}

body.pf-has-promo-bar > .pfnav {
  top: var(--pf-promo-height) !important;
}

.pf-home-subscriber-benefits {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  color: #176f57;
  font-size: 13px;
  font-weight: 650;
}

/* The offer box's heading, written per offer in the editor. */
.pf-home-subscriber-title {
  margin-bottom: 2px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pf-home-subscriber-deadline {
  margin-top: 10px;
  color: #a95365;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 640px) {
  :root { --pf-promo-min: 56px; }

  .pf-promo-bar__wide { display: none; }
  .pf-promo-bar__narrow { display: inline; }

  .pf-promo-bar__offer {
    justify-items: start;
    padding: 9px 12px 9px 16px;
    font-size: 12.5px;
    text-align: left;
  }
}