.promo-steps-wrap {
  position: relative;
  z-index: 10;
}

.promo-steps__title {
  margin: 0 0 64px;
  color: #000;
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  text-box: trim-both cap alphabetic;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: Nunito;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 43px;
}

@media (max-width: 991px) {
  .promo-steps__title {
    margin-bottom: 32px;
    font-size: 26px;
    padding: 0 8px;
  }
}

.promo-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  align-self: stretch;
}

.promo-step__media {
  width: calc(100% + 80px);
  margin: auto -40px -48px -40px;
  display: flex;
  justify-content: center;
}

.promo-step__media img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Step 1 illustration: ZEN FOR ME pill + phone + mascot */
.zen-step-illust {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 35px;
}

.zen-step-pill {
  position: relative;
  display: inline-flex;
  width: auto;
  min-width: min(237px, calc(100% - 80px));
  max-width: calc(100% - 80px);
  height: 65px;
  margin-top: 8px;
  padding: 9.792px 18.432px;
  justify-content: center;
  align-items: center;
  gap: 4.608px;
  border-radius: 64px;
  border: 1.152px solid #1BCD3A;
  background: linear-gradient(138deg, #22E243 22.99%, #35DD52 48.9%, #1BCD39 78.5%);
  box-shadow: 0 4px 16.5px 0 rgba(0, 0, 0, 0.25);
  z-index: 3;
  white-space: nowrap;
  overflow: hidden;
}

.zen-step-pill__text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.zen-step-pill__text strong {
  color: var(--Primary, #222);
  text-align: center;
  font-family: Nunito;
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: 13.248px;
}

.zen-step-pill__text-rest {
  color: var(--Primary, #222);
  font-family: Nunito;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 13.248px;
}

.zen-step-line {
  width: 6px;
  height: 80px;
  display: block;
  position: absolute;
  z-index: 2;
  top: 65px;
  left: calc(50% - min(381.362px, 100%) * 0.215);
  transform: translateX(-50%);
  pointer-events: none;
  transform-origin: top center;
}

.zen-step-mascot {
  position: absolute;
  top: 15px;
  right: 6%;
  width: 129.543px;
  height: 140.104px;
  aspect-ratio: 49/53;
  z-index: 4;
  pointer-events: none;
  transform-origin: 50% 80%;
  display: block;
}

.zen-step-mascot__img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 80%;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.zen-step-phone {
  width: 100%;
  max-width: 381.362px;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

/* Step 2 illustration: card + brush + mascot */
.zen-step-illust--2 {
  justify-content: center;
  gap: 0;
}

.zen-step-2-stack {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
}

.zen-step-2-brush {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: none;
  height: auto;
  z-index: 1;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.zen-step-2-card-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 52px;
  z-index: 2;
}

.zen-step-2-card {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  top: 20px;
  left: 12px;
  z-index: 2;
  transform-origin: 30% 100%;
}

.zen-step-2-mascot {
  position: absolute;
  top: -20%;
  left: 4%;
  aspect-ratio: 64/59;
  z-index: 3;
  pointer-events: none;
  display: block;
  transform-origin: 50% 80%;
}

.zen-step-2-mascot__img {
  display: block;
  height: auto;
  transform-origin: 50% 80%;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Step 3 illustration: phone + mascot with coffee + steam wisps */
.zen-step-illust--3 {
  justify-content: center;
  gap: 0;
}

.zen-step-3-phone-wrap {
  width: 100%;
  max-width: 320.381px;
  margin: 0 auto;
  position: relative;
  bottom: 25px;
}

.zen-step-3-phone-wrap > .zen-step-line {
  top: 42%;
  left: 28.5%;
}

.zen-step-3-stack {
  position: relative;
  width: 356px;
  max-width: 100%;
  height: 330px;
  margin: -50px auto 0;
  z-index: -1;
}

.zen-step-3-phone {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 103/113;
  z-index: 2;
  transform-origin: 50% 80%;
}

.zen-step-3-mascot-wrap {
  position: absolute;
  top: 13%;
  left: 4%;
  width: 30%;
  z-index: 3;
  pointer-events: none;
}

.zen-step-3-mascot {
  position: relative;
  display: block;
  width: 100%;
  transform-origin: 50% 80%;
}

.zen-step-3-mascot__img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 80%;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.zen-step-3-steam {
  position: absolute;
  top: -40%;
  left: 62%;
  width: 28%;
  height: 60%;
  pointer-events: none;
  z-index: 4;
  transform-origin: 50% 80%;
  will-change: transform;
}

.zen-step-3-steam__wisp {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  filter: blur(2px);
  opacity: 0;
  transform: translate(-50%, 0) scale(0.6);
}

.zen-step-3-steam__wisp:nth-child(1) { --steam-x: -6px; }
.zen-step-3-steam__wisp:nth-child(2) { --steam-x: 4px; }
.zen-step-3-steam__wisp:nth-child(3) { --steam-x: -2px; }

.zen-step-3-code {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 299px;
  max-width: calc(100% - 80px);
  z-index: 10;
}

.zen-step-3-code .promo-card__code.zen-step-3-code__btn {
  display: flex;
  width: 100%;
  height: 65px;
  padding: 8px 6px 8px 8px;
  justify-content: space-between;
  align-items: center;
  border-radius: 64px;
  background: var(--Gradient-Darkside, linear-gradient(143deg, #222 0.72%, #000 100%));
  color: #FFF;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.zen-step-3-code .promo-card__code.zen-step-3-code__btn .promo-card__code-text {
  flex: 1 1 auto;
  display: flex;
  /* right-padding 57px = 49px green-pill width + 8px gap → text centers in the
     space LEFT of the icon pill, not the full button. */
  padding: 16px 57px 16px 16px;
  justify-content: center;
  align-items: center;
  gap: 19px;
  color: var(--Shades-Dark-Side-White, #FFF);
  leading-trim: both;
  text-edge: cap;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: Nunito;
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  line-height: 32px;
  letter-spacing: 3px;
}

/* Step 1 illustration enter/exit transitions */
.zen-step-pill {
  opacity: 0;
  transform: translateY(-12px) scale(0.85);
  transition:
    opacity .55s cubic-bezier(.34,1.56,.64,1) .25s,
    transform .55s cubic-bezier(.34,1.56,.64,1) .25s;
}

.zen-step-line {
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
  transition:
    opacity .4s cubic-bezier(.65,.05,.36,1) .15s,
    transform .4s cubic-bezier(.65,.05,.36,1) .15s;
}

.zen-step-phone {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity .6s cubic-bezier(.22,1,.36,1) .05s,
    transform .6s cubic-bezier(.22,1,.36,1) .05s;
}

.zen-step-mascot {
  opacity: 0;
  transform: translateY(-24px) rotate(-18deg);
  transition:
    opacity .6s cubic-bezier(.34,1.56,.64,1) 0s,
    transform .6s cubic-bezier(.34,1.56,.64,1) 0s;
}

.promo-step.is-in-view .zen-step-pill {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: .05s;
}

.promo-step.is-in-view .zen-step-line {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
  transition-delay: .35s;
}

.promo-step.is-in-view .zen-step-phone {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .2s;
}

.promo-step.is-in-view .zen-step-mascot {
  opacity: 1;
  transform: translateY(0) rotate(0);
  transition-delay: .55s;
}

.promo-step.is-in-view .zen-step-mascot__img {
  animation: zenStepMascotIdle 6s cubic-bezier(.45,.05,.55,.95) 1.2s infinite;
}

/* Step 2 enter/exit transitions */
.zen-step-2-brush {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition:
    opacity .35s ease 0s,
    clip-path .9s cubic-bezier(.22,1,.36,1) 0s;
}

.zen-step-2-card {
  opacity: 0;
  transform: translateY(60px) scale(0.92);
  transition:
    opacity .6s cubic-bezier(.22,1,.36,1) .05s,
    transform .6s cubic-bezier(.22,1,.36,1) .05s;
}

.zen-step-2-mascot {
  opacity: 0;
  transform: translateY(-24px) rotate(-18deg) scale(0.7);
  transition:
    opacity .6s cubic-bezier(.34,1.56,.64,1) 0s,
    transform .6s cubic-bezier(.34,1.56,.64,1) 0s;
}

.promo-step.is-in-view .zen-step-2-brush {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition-delay: .05s;
}

.promo-step.is-in-view .zen-step-2-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: .25s;
  animation: zenStep2CardSway 2.8s ease-in-out 1.3s infinite;
}

@keyframes zenStep2CardSway {
  0%, 50%, 100% { transform: translate(0, 0)      rotate(0deg);    }
  25%           { transform: translate(-3px, 2px) rotate(-2.5deg); }
  75%           { transform: translate(-3px, 2px) rotate(-2.5deg); }
}

.promo-step.is-in-view .zen-step-2-mascot {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
  transition-delay: .65s;
}

.promo-step.is-in-view .zen-step-2-mascot__img {
  animation: zenStep2MascotJam 2.8s ease-in-out 1.3s infinite;
}

/* Step 3 enter/exit transitions */
.zen-step-3-phone {
  opacity: 0;
  transform: translateY(60px) scale(0.92);
  transition:
    opacity .6s cubic-bezier(.22,1,.36,1) .05s,
    transform .6s cubic-bezier(.22,1,.36,1) .05s;
}

.zen-step-3-mascot-wrap {
  opacity: 0;
  transform: translateY(-24px) rotate(-15deg) scale(0.7);
  transition:
    opacity .6s cubic-bezier(.34,1.56,.64,1) 0s,
    transform .6s cubic-bezier(.34,1.56,.64,1) 0s;
}

.zen-step-3-code {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 30px)) scale(0.9);
  transition:
    opacity .55s cubic-bezier(.22,1,.36,1) 0s,
    transform .55s cubic-bezier(.22,1,.36,1) 0s;
}

.promo-step.is-in-view .zen-step-3-phone {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: .15s;
}

.promo-step.is-in-view .zen-step-3-mascot-wrap {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
  transition-delay: .55s;
}

.promo-step.is-in-view .zen-step-3-code {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: .4s;
}

.promo-step.is-in-view .zen-step-3-mascot__img {
  animation: zenStep3MascotSip 3.6s ease-in-out 1.3s infinite;
}

@keyframes zenStep3MascotSip {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  40%      { transform: translateY(-3px) rotate(-6deg); }
  60%      { transform: translateY(-3px) rotate(-6deg); }
}

.promo-step.is-in-view .zen-step-3-steam {
  animation: zenStep3SteamSway 3.6s ease-in-out 1.3s infinite;
}

.promo-step.is-in-view .zen-step-3-steam__wisp {
  animation: zenStep3Steam 2.4s ease-in 1.6s infinite;
}

.promo-step.is-in-view .zen-step-3-steam__wisp:nth-child(2) {
  animation-delay: 2.4s;
}

.promo-step.is-in-view .zen-step-3-steam__wisp:nth-child(3) {
  animation-delay: 3.2s;
}

@keyframes zenStep3Steam {
  0%   { opacity: 0; transform: translate(calc(-50% + 0px),  0)    scale(0.6); }
  20%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--steam-x, 0px)), -100%) scale(1.4); }
}

@keyframes zenStep3SteamSway {
  0%, 100% { transform: translate(2px, 2px)   rotate(1deg);  }
  40%, 60% { transform: translate(-2px, -2px) rotate(-1deg); }
}

@keyframes zenStep2MascotJam {
  0%, 50%, 100% { transform: translateY(0)    rotate(0deg);  }
  25%           { transform: translateY(-6px) rotate(-6deg); }
  75%           { transform: translateY(-6px) rotate(6deg);  }
}

@keyframes zenStepMascotIdle {
  0%   { transform: translateY(0)    rotate(0deg);    }
  25%  { transform: translateY(-4px) rotate(-5deg);   }
  50%  { transform: translateY(0)    rotate(0deg);    }
  75%  { transform: translateY(-3px) rotate(4deg);    }
  100% { transform: translateY(0)    rotate(0deg);    }
}

@media (max-width: 440px) {
  .zen-step-illust--3 {
    --step3-scale: calc((100vw - 60px) / 380);
    transform: scale(var(--step3-scale));
    transform-origin: center top;
    margin-bottom: calc((var(--step3-scale) - 1) * 330px);
  }
}

@media (max-width: 370px) {
  .zen-step-3-phone {
    left: unset !important;
  }

  .zen-step-3-mascot-wrap {
    top: 21%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zen-step-pill,
  .zen-step-line,
  .zen-step-phone,
  .zen-step-mascot,
  .zen-step-2-brush,
  .zen-step-2-card,
  .zen-step-2-mascot,
  .zen-step-3-phone,
  .zen-step-3-mascot-wrap,
  .zen-step-3-code {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .zen-step-3-code {
    transform: translate(-50%, -50%);
  }
  .zen-step-line {
    transform: translateX(-50%);
  }
  .zen-step-2-brush {
    transform: translate(-50%, -50%);
    clip-path: none;
  }
  .promo-step.is-in-view .zen-step-mascot__img,
  .promo-step.is-in-view .zen-step-2-mascot__img,
  .promo-step.is-in-view .zen-step-2-card,
  .promo-step.is-in-view .zen-step-3-mascot__img,
  .promo-step.is-in-view .zen-step-3-steam,
  .promo-step.is-in-view .zen-step-3-steam__wisp {
    animation: none;
  }
}

.promo-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 397px;
  max-width: 100%;
  min-height: 553.759px;
  padding: 48px 40px;
  box-sizing: border-box;
  border-radius: 16px;
  border: 2px solid transparent;
  background-image:
    linear-gradient(0deg, #E0D5C3 0%, rgba(239, 228, 210, 0.89) 100%),
    linear-gradient(to bottom, #E8E1D4 0%, rgba(186, 179, 168, 0.7) 50%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.42) 100%);
  background-origin: padding-box, border-box, border-box;
  background-clip: padding-box, border-box, border-box;
  backdrop-filter: blur(10.4px);
  -webkit-backdrop-filter: blur(10.4px);
  overflow: hidden;
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: 397px 553.759px;
  isolation: isolate;
  transform: translateZ(0);
  will-change: backdrop-filter;
}

.promo-step__number {
  margin: 0 0 24px;
  color: var(--Muted-Green, #20BB3B);
  leading-trim: both;
  text-edge: cap;
  text-box: trim-both cap alphabetic;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: Nunito;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
}

.promo-step__title {
  margin: 0 0 32px;
  color: var(--Shades-Dark-Side-Rich-Black, #000);
  leading-trim: both;
  text-edge: cap;
  text-box: trim-both cap alphabetic;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: Nunito;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

.promo-step__description {
  margin: 0 0 55px !important;
  width: 320px;
  max-width: 100%;
  color: var(--Shades-Dark-Side-Rich-Black, #000);
  leading-trim: both;
  text-edge: cap;
  text-box: trim-both cap alphabetic;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: Nunito;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.promo-step__description strong {
  color: var(--Shades-Dark-Side-Rich-Black, #000);
  leading-trim: both;
  text-edge: cap;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: Nunito;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.promo-step__link {
  color: var(--Muted-Green, #20BB3B);
  font-family: Nunito;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  display: inline-block;
}

.promo-step__link:hover {
  text-decoration: underline;
}

.promo-steps-nav {
  display: none;
}

@media (max-width: 991px) {
  .promo-steps-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    gap: 6px;
  }

  .promo-steps-nav__arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #20BB3B;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s ease, color .2s ease;
  }

  .promo-steps-nav__arrow:disabled {
    color: #BDAC9C;
    opacity: .5;
    cursor: default;
    pointer-events: none;
  }

  .promo-steps-nav__dots {
    list-style: none;
    padding: 12px 12px;
    margin: 0;
    border-radius: 64px;
    border: 1px solid #BDAC9C;
    display: inline-flex;
    align-items: center;
    gap: 0;
  }

  .promo-steps-nav__item {
    line-height: 0;
  }

  .promo-steps-nav__dot {
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    position: relative;
  }

  .promo-steps-nav__dot::before {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #C1B4A6;
    border-radius: 50%;
    transition: background .2s ease;
  }

  .promo-steps-nav__dot.is-active::before,
  .promo-steps-nav__dot:focus-visible::before {
    background: #20BB3B;
  }
}

@media (max-width: 991px) {
  .promo-steps {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 16px;
    padding: 0 20px;
    scroll-padding-left: 20px;
    overscroll-behavior-x: contain;
  }

  .promo-steps::-webkit-scrollbar {
    display: none;
  }

  .promo-step {
    flex: 0 0 calc(100%);
    max-width: 397px;
  }

  .zen-step-2-card-wrap {
    margin: 0 auto 20px;
  }
}