.clipo-pricing-features-rail {
  position: relative;
  display: flow-root;
}

/* Fill the entire incoming mask, including space below the fitted canvas. */
.clipo-pricing-features-rail.is-clipo-video-entry-active {
  background: var(--clipo-paper, #f7f7f6);
}

.clipo-pricing-features-rail__hold { height: 0; }

/* A separate painted line can exit without moving the benefits' mask. */
.is-transition-enabled .clipo-pricing__details {
  border-top-color: transparent;
}

.is-transition-enabled .clipo-pricing__details::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  border-top: 1px solid var(--clipo-line, #cacac9);
  translate: 0 var(--pricing-divider-exit-y, 0px);
  pointer-events: none;
}

.clipo-pricing-features-rail.is-transition-enabled > .clipo-pricing {
  position: sticky;
  top: var(--pricing-pin-top, 0px);
  min-height: var(--pricing-viewport-height, 1117px);
  z-index: 1;
}

.clipo-pricing-features-rail.is-transition-enabled > .clipo-features {
  min-height: var(--pricing-viewport-height, 1888px);
  z-index: 2;
  transform-origin: top left;
}

.clipo-features-entry-slot {
  position: relative;
  width: 100%;
  z-index: 2;
}

.clipo-features-overflow-reveal {
  position: relative;
  width: 100%;
  overflow: hidden;
  transform-origin: top left;
}

.clipo-pricing-features-rail.is-transition-enabled
  > .clipo-features-entry-slot
  > .clipo-features-overflow-reveal
  > .clipo-features {
  min-height: var(--pricing-viewport-height, 1888px);
  transform-origin: top left;
}

.clipo-features.is-pricing-entry-active {
  pointer-events: none;
  will-change: transform, clip-path;
  backface-visibility: hidden;
}

/* Do not demote the full blue panel on the same frame that Pricing disappears.
   The FAQ handoff removes this layer only after Features is fully covered. */
.clipo-features.is-pricing-entry-settled {
  backface-visibility: hidden;
}