.features-list { --ml-step: 80px; }

.features-list{
  overscroll-behavior: contain; /* stop scroll chaining */
  overflow-anchor: none;        /* stop anchor jumps during expand/collapse */
}


/* base motion: we compose FLIP translate + enter slide + scale */
.features-list .feature-item{
  transform: translateY(var(--ty, 0)) translateY(var(--enterY, 0)) scale(var(--scale, 1));
  opacity: var(--alpha, 1);
  margin-left: var(--ml, 0px);
  /* transition:
    transform 320ms ease,
    margin-left 320ms ease,
    opacity 320ms ease; */
  will-change: transform, margin-left, opacity;
}

.features-list .feature-item{
  transition:
    transform 360ms cubic-bezier(.22,.61,.36,1),
    margin-left 360ms cubic-bezier(.22,.61,.36,1),
    opacity 360ms cubic-bezier(.22,.61,.36,1);
}

.feature-item .feature_pill,
.feature-item .feature-text,
.feature-item .feature-btn,
.feature-item .feature-icon {
  transition: width 320ms ease, left 320ms ease, opacity 320ms ease;
}

.feature-item.expand .feature_pill { width: 100%; justify-content: space-between; }
.feature-item.expand .feature-icon { left: -120px !important; }
.feature-item.expand .feature-text { width: 40%; }
.feature-item.expand .feature-btn { width: 20%; }
.feature-item.expand .feature-description { max-height: 500px; opacity: 1; }

.feature-item.expanding { --scale: 1.02; }
.feature-item.deexpanding { --scale: 0.98; --alpha: .92; }

.feature_pill {
    width: 60%;
    justify-content: space-between;
}

.feature-icon {
    bottom: 0;
}

.feature-text{
    width: 60%;
}

/* .feature-description {
    display: none;
} */

.feature-btn{
    width: 30%;
}


.feature-item.expand .feature_pill {
    width: 100%;
    justify-content: space-between;
}

.feature-item.expand .feature-icon {
    left: -120px !important;
}

.feature-item.expand .feature-text {
    width: 40%;
}

/* .feature-item.expand .feature-description {
    display: block;
    width: 40%;
} */

.feature-item .feature-description {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 320ms ease, opacity 320ms ease;
  display: none;
}

.feature-item.expand .feature-description {
    display: block;
    width: 40%;
}

.feature-item.expand .feature-btn {
    width: 20%;
}

.features_btn { cursor: pointer; }