/* Halloween offer banner, shared with PC Tweaker (carved pumpkins from
   web/src/halloween-decor.ts, countdown cells). On Glarion's light pages it
   is a night panel in the brand's own plum ink, with an ember glow behind
   the pumpkins; text on it stays light for contrast. */
.hw-offer {
  --hw-ember: #ff6a3d;
  --hw-orange: #f7a14a;
  --hw-violet: #7345b2;
  --hw-surface: #2d103a;
  --hw-text: #fbf7fd;
  --hw-muted: #d6c8e0;
  --hw-line: rgba(255, 255, 255, 0.12);
  container-type: inline-size;
  margin: 1.75rem 0 1.25rem;
  font-family: Manrope, system-ui, sans-serif;
}
.hw-offer-inner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 104px;
  padding: 14px 118px 14px 156px;
  border: 1px solid color-mix(in srgb, var(--hw-ember) 34%, var(--hw-line));
  border-radius: 14px;
  color: var(--hw-text);
  background:
    radial-gradient(
      70% 140% at 0% 100%,
      color-mix(in srgb, var(--hw-ember) 20%, transparent),
      transparent 70%
    ),
    radial-gradient(
      55% 140% at 100% 100%,
      color-mix(in srgb, var(--hw-ember) 13%, transparent),
      transparent 70%
    ),
    linear-gradient(
      115deg,
      color-mix(in oklab, var(--hw-violet) 60%, var(--hw-surface)) 0%,
      var(--hw-surface) 55%,
      color-mix(in oklab, var(--hw-violet) 40%, var(--hw-surface)) 100%
    );
  animation: hw-offer-in 240ms ease-out;
}
.hw-offer-reserved {
  visibility: hidden;
}
.hw-offer-reserved .hw-offer-inner {
  animation: none;
}
@keyframes hw-offer-in {
  from {
    opacity: 0;
  }
}
.hw-offer-decor {
  position: absolute;
  bottom: -4px;
  pointer-events: none;
}
.hw-offer-decor svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hw-offer-decor-left {
  left: 4px;
  width: 146px;
  height: 98px;
}
.hw-offer-decor-right {
  right: 6px;
  width: 102px;
  height: 98px;
}
.hw-offer-copy {
  flex: 1;
  min-width: 0;
}
.hw-offer-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 5px;
  color: var(--hw-orange);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hw-offer-heading {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.hw-offer-fine {
  margin: 5px 0 0;
  max-width: 58ch;
  color: var(--hw-muted);
  font-size: 11px;
  line-height: 1.5;
}
.hw-offer-timer {
  flex: none;
  text-align: center;
}
.hw-offer-timer > span {
  display: block;
  margin-bottom: 6px;
  color: var(--hw-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hw-offer-cells {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* Separators sit between the cells, centred on the digits. */
.hw-offer-cell + .hw-offer-cell::before {
  content: ":";
  position: absolute;
  left: -9px;
  top: 6px;
  color: color-mix(in srgb, var(--hw-orange) 75%, transparent);
  font-size: 20px;
  font-weight: 700;
}
.hw-offer-cell {
  position: relative;
  min-width: 50px;
  margin-left: 12px;
  padding: 7px 6px 6px;
  border: 1px solid color-mix(in srgb, var(--hw-orange) 22%, var(--hw-line));
  border-radius: 9px;
  background: color-mix(in oklab, black 38%, var(--hw-surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hw-offer-cell:first-child {
  margin-left: 0;
}
.hw-offer-cell strong {
  display: block;
  color: #fff;
  font-size: 24px;
  font-weight: 720;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hw-offer-cell small {
  display: block;
  margin-top: 4px;
  color: var(--hw-muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Medium widths: keep the left pumpkins, drop the right one. */
@container (max-width: 760px) {
  .hw-offer-inner {
    padding-right: 18px;
  }
  .hw-offer-decor-right {
    display: none;
  }
}
/* Narrow: pumpkins in the top corner, countdown on its own row. */
@container (max-width: 560px) {
  .hw-offer-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px 16px;
  }
  .hw-offer-decor-left {
    top: -6px;
    right: 4px;
    left: auto;
    bottom: auto;
    width: 92px;
    height: 62px;
  }
  .hw-offer-copy {
    padding-right: 92px;
  }
  .hw-offer-cell {
    flex: 1;
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hw-offer-inner {
    animation: none;
  }
}

/* Page styles reach every paragraph and heading; the banner keeps its own type. */
.hw-offer .hw-offer-kicker { margin: 0 0 5px; color: var(--hw-orange); font-family: inherit; font-size: 11px; font-weight: 750; line-height: normal; letter-spacing: 0.16em; text-transform: uppercase; }
.hw-offer .hw-offer-heading { margin: 0; color: var(--hw-text); font-size: 15px; line-height: 1.35; }
.hw-offer .hw-offer-fine { margin: 5px 0 0; color: var(--hw-muted); font-size: 11px; line-height: 1.5; }

/* Struck reference price and the real percentage, on the plan cards and rows. */
.promo-off, .plan-row-off { display:inline-block; padding:.15rem .45rem; border:1px solid #ecc3a6; border-radius:6px; color:var(--ink,#2d103a); background:#fff4ec; font-size:.8125rem; font-weight:750; line-height:1.4; }
.purchase-cost s, .plan-row-was { color:var(--muted,#695174); font-weight:550; text-decoration-thickness:1.5px; }
.purchase-cost s { font-size:1.25rem; }
.plan-row-was { font-size:.85rem; margin-right:.35rem; }
.plan-row-off { margin-left:.4rem; }