/* The NEX sigil: two angular ribbons with a diamond at their centre. */
.nex-currency-mark,
.nex-pass-symbol {
  border: 0;
  border-radius: 0;
  background: none;
  color: #cbb3ff;
  flex-shrink: 0;
}
.nex-currency-mark > svg,
.nex-pass-symbol > svg {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
}
.nex-login-offer .nex-currency-mark {
  width: 24px;
  height: 24px;
  color: #dac7ff;
}
.nex-membership-pass .nex-pass-symbol {
  width: 30px;
  height: 33px;
}

/* A warm, readable highlight gives the compact entry its own character. */
.nex-login-offer {
  border-color: #edb78340;
  background: linear-gradient(110deg, #bfa7ff0d, #ed86540a);
  box-shadow: inset 0 1px #ffecd209;
}
.nex-login-offer:hover {
  border-color: #edb78388;
  background: linear-gradient(110deg, #bfa7ff16, #ed865414);
}
.nex-login-offer:focus-visible {
  outline-color: #ffcf92;
}
.nex-login-offer > span.nex-offer-copy {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.nex-login-offer .nex-ember-text {
  font-family: 'Nexora Unbounded', sans-serif;
  font-size: .75rem;
  font-weight: 550;
  letter-spacing: -.04em;
  line-height: 1.5;
  color: #ffe1b6;
}
.nex-offer-ember {
  position: relative;
  display: inline-flex;
  flex: 0 0 13px;
  align-items: center;
}
.nex-login-offer .nex-offer-flame {
  width: 13px;
  height: 17px;
  overflow: visible;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 0 3px #ed865460);
  animation: nex-ember-breathe 3.2s ease-in-out infinite;
}
.nex-offer-ember::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 8px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffd397;
  opacity: 0;
  pointer-events: none;
  animation: nex-ember-rise 6.4s ease-out infinite;
}
.nex-login-offer > .nex-offer-arrow {
  width: 15px;
  height: 15px;
  margin-left: auto;
  color: #c2a993;
}
.nex-plan-intro .nex-ember-heading {
  display: inline-block;
  font-family: 'Nexora Unbounded', sans-serif;
  font-size: clamp(1.1rem, 2.3vw, 1.45rem);
  line-height: 1.35;
  letter-spacing: -.055em;
  color: #ffe1b6;
}
@media (max-width: 380px) {
  .nex-login-offer .nex-ember-text {
    font-size: .6875rem;
    white-space: nowrap;
  }
  .nex-login-offer > span.nex-offer-copy {
    gap: 6px;
  }
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .nex-login-offer .nex-ember-text,
  .nex-plan-intro .nex-ember-heading {
    background-image: linear-gradient(105deg, #ffe1b6 0%, #ffd397 32%, #fff6e8 46%, #edac76 58%, #ffe1b6 76%, #ffe1b6 100%);
    background-size: 250% 100%;
    background-position: 100% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  .nex-login-offer .nex-ember-text {
    animation: nex-text-heat 6.4s ease-in-out infinite;
  }
  .nex-plans-dialog[open] .nex-ember-heading {
    animation: nex-heading-heat 2.8s ease-out both;
  }
}
@keyframes nex-text-heat {
  0%, 28%, 100% { background-position: 100% 50%; }
  66%, 82% { background-position: 0% 50%; }
}
@keyframes nex-heading-heat {
  from { background-position: 100% 50%; }
  to { background-position: 0% 50%; }
}
@keyframes nex-ember-breathe {
  0%, 100% { transform: scale(1) rotate(-3deg); opacity: .85; }
  50% { transform: scale(1.07) rotate(3deg); opacity: 1; }
}
@keyframes nex-ember-rise {
  0%, 56%, 100% { transform: translate(0, 0); opacity: 0; }
  62% { opacity: .7; }
  80% { transform: translate(2px, -8px); opacity: 0; }
}
#loginView[data-paused="true"] .nex-ember-text,
#loginView[data-paused="true"] .nex-offer-flame,
#loginView[data-paused="true"] .nex-offer-ember::after,
body:has(#plansDialog[open]) .nex-login-offer .nex-ember-text,
body:has(#plansDialog[open]) .nex-login-offer .nex-offer-flame,
body:has(#plansDialog[open]) .nex-login-offer .nex-offer-ember::after {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .nex-login-offer .nex-ember-text,
  .nex-login-offer .nex-offer-flame,
  .nex-login-offer .nex-offer-ember::after,
  .nex-plans-dialog[open] .nex-ember-heading {
    animation: none;
  }
}
@media (forced-colors: active) {
  .nex-login-offer .nex-ember-text,
  .nex-plan-intro .nex-ember-heading {
    background: none;
    color: ButtonText;
  }
}