/* Rounded green gradient around the practice phone. */
body.product-yogaspace-current #sequence-story #features {
  background: #f6f6f1 !important;
}
body.product-yogaspace-current #sequence-story #features::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: calc(50% + var(--phone-x, 22vw));
  width: min(40vw, 620px);
  transform: translateX(-50%);
  top: 5%;
  bottom: 5%;
  border-radius: 36px;
  background: var(--ys-section-green-wash);
  opacity: var(--build-opacity, 1);
  pointer-events: none;
}
@media (max-width: 850px) {
  body.product-yogaspace-current #sequence-story #features::before {
    left: 5%;
    right: 5%;
    width: auto;
    transform: none;
    top: 34%;
    bottom: 3%;
    border-radius: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.product-yogaspace-current #sequence-story #features::before {
    left: 5%;
    right: 5%;
    width: auto;
    transform: none;
    top: 230px;
    bottom: 44%;
    opacity: 1;
  }
}

/* The verified remaining percentage fills the bar below the offer. */
.ys-launch-offer__choice { padding: 0; background: transparent; }
.ys-offer-places { display: block; grid-column: 1 / -1; width: 100%; height: 8px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: rgba(34, 86, 65, .10); }
.ys-offer-places::before { content: ''; display: block; height: 100%; width: var(--places-remaining, 100%); border-radius: inherit; background: linear-gradient(90deg, #a5d9c0 0%, #66ae8c 55%, #397c5d 100%); transition: width .76s cubic-bezier(.22, 1, .36, 1); }
.ys-launch-offer:has(.ys-offer-places:not([hidden])) .ys-launch-offer__countdown { border-top: 0; margin-top: 12px; padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .ys-offer-places::before { transition: none; } }

.ys-launch-offer__places-label { display: block; margin-top: 12px; text-align: right; font-size: 12px; line-height: 1.5; color: #496454; }