.sl-announcement {
  position: relative;
  z-index: 70;
  display: flex;
  min-height: 58px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 24px);
  overflow: hidden;
  padding: 10px 24px;
  background: #652cf0;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(7, 20, 58, .18);
}

.sl-announcement:hover {
  background: #4f1dcc;
}

.sl-announcement:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
}

.sl-announcement__badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff;
  color: #4f1dcc;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.sl-announcement__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 8px;
  font-size: 14px;
  line-height: 1.35;
}

.sl-announcement__copy strong {
  font-family: Sora, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.sl-announcement__copy > span {
  color: rgba(255, 255, 255, .86);
}

.sl-announcement__countdown {
  color: rgba(255, 255, 255, .92);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sl-announcement__countdown b {
  color: #fff;
}

.sl-announcement__cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.sl-announcement__cta span {
  font-size: 20px;
  line-height: 1;
  transition: transform .18s ease;
}

.sl-announcement:hover .sl-announcement__cta span {
  transform: translateX(3px);
}

@media (max-width: 760px) {
  .sl-announcement {
    flex-wrap: wrap;
    gap: 7px 12px;
    min-height: 0;
    padding: 10px 16px;
  }

  .sl-announcement__copy {
    flex-basis: 100%;
    order: 2;
  }

  .sl-announcement__countdown {
    order: 3;
  }

  .sl-announcement__cta {
    order: 4;
  }
}

@media (max-width: 420px) {
  .sl-announcement {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .sl-announcement__copy {
    justify-content: flex-start;
  }

  .sl-announcement__badge {
    margin-top: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl-announcement__cta span {
    transition: none;
  }
}