.campaign-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.campaign-eyebrow .campaign-period {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 15px 8px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 9px;
  background: var(--orange);
  box-shadow: 0 5px 12px rgba(0, 16, 55, .22);
  color: #fff;
  letter-spacing: .08em;
  transform-origin: 16px 6px;
  will-change: transform;
}

.campaign-eyebrow .campaign-period::before,
.campaign-eyebrow .campaign-period::after {
  position: absolute;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, #d9dde4 24%, #7f8894 65%, #343b45 100%);
  box-shadow: 0 1px 2px rgba(0, 16, 55, .7);
  content: "";
}

.campaign-eyebrow .campaign-period::before {
  left: 12px;
}

.campaign-eyebrow .campaign-period::after {
  right: 12px;
}

.campaign-extended .campaign-eyebrow .campaign-period {
  animation: campaign-sign-drop 1.45s cubic-bezier(.2, .7, .25, 1) .18s both;
}

.campaign-extended .campaign-eyebrow .campaign-period::after {
  animation: campaign-nail-pop .62s cubic-bezier(.25, .7, .35, 1) .28s both;
}

.hero-tagline {
  margin: 0 0 14px;
  color: #dbe6ff;
  font: 600 clamp(1.05rem, 2vw, 1.35rem)/1.35 Montserrat, Arial, sans-serif;
}

.offer-deadline {
  margin: 0 0 14px;
  color: #fff;
  font-weight: 700;
}

.campaign-deadline-note {
  display: block;
  margin-top: 4px;
  font-family: Roboto, Arial, sans-serif;
  font-size: .78em;
  font-weight: 400;
  line-height: 1.45;
}

.hero-points {
  margin-bottom: 16px;
}

.hero-audiences {
  margin: 0 0 28px;
  font: 700 .88rem/1.5 Montserrat, Arial, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero-audiences-label {
  margin: 0 0 2px;
  color: #dbe6ff;
  font-weight: 700;
}

.hero-audiences span {
  padding: 0 5px;
  color: var(--orange);
}

.local-company {
  margin: 0 0 22px;
  color: #dbe6ff;
  font-weight: 700;
}

.price .local-company {
  margin: 4px 0 0;
  color: #dbe6ff;
  font: 700 .9rem/1.45 Roboto, Arial, sans-serif;
}

.reservation-deadline {
  color: var(--orange) !important;
  font-weight: 700;
}

.campaign-extended [data-campaign-original-deadline] {
  opacity: .7;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.campaign-extended .campaign-deadline-note {
  opacity: .7;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

[data-campaign-extension] {
  display: block;
  margin-top: 5px;
  color: var(--orange);
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.campaign-period [data-campaign-extension],
.offer-deadline [data-campaign-extension],
.reservation-deadline [data-campaign-extension] {
  color: #ffb77f;
}

[data-campaign-extension][hidden] {
  display: none !important;
}

@keyframes campaign-sign-drop {
  0%, 18% {
    transform: rotate(0deg);
  }

  38% {
    transform: rotate(15deg);
  }

  56% {
    transform: rotate(3deg);
  }

  72% {
    transform: rotate(10deg);
  }

  86% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(7deg);
  }
}

@keyframes campaign-nail-pop {
  0%, 20% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  48% {
    opacity: 1;
    transform: translate(4px, -5px) rotate(35deg) scale(1.08);
  }

  100% {
    opacity: 0;
    transform: translate(22px, -20px) rotate(140deg) scale(.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-extended .campaign-eyebrow .campaign-period {
    animation: none;
    transform: rotate(7deg);
  }

  .campaign-extended .campaign-eyebrow .campaign-period::after {
    display: none;
    animation: none;
  }
}