/*
 * The section introduction remains pinned while the three cards build their
 * stack. It releases with the completed stack before the following section.
 */
.ecosystem-intro-pin {
  position: sticky !important;
  top: clamp(64px, 8vh, 100px) !important;
  z-index: 10 !important;
  isolation: isolate;
}

/* Prevent releasing cards from showing through the pinned introduction. */
.ecosystem-intro-pin::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 -16px;
  background: var(--color-dark-bg);
  pointer-events: none;
}

/*
 * Equal card heights plus compensated wrapper depths make every card reach
 * the end of the sticky container together. The 92px offsets are supplied by
 * the existing stack script and leave each preceding card heading visible.
 */
.ecosystem-cards {
  padding-bottom: clamp(160px, 20vh, 240px);
}

.ecosystem-card {
  height: 440px;
  min-height: 440px;
  transform: none !important;
}

.ecosystem-card-wrap:nth-child(1) {
  padding-bottom: 200px !important;
}

.ecosystem-card-wrap:nth-child(2) {
  padding-bottom: 108px !important;
}

.ecosystem-card-wrap:nth-child(3) {
  padding-bottom: 16px !important;
}

/*
 * Sticky stacks cannot keep long card copy readable in a narrow or short
 * viewport. In those cases, use the same content as a normal page sequence.
 */
@media (max-width: 899px), (max-height: 899px) {
  .ecosystem-intro-pin {
    position: relative !important;
    top: 0 !important;
    z-index: auto !important;
  }

  .ecosystem-intro-pin::before {
    content: none;
  }

  .ecosystem-card-wrap,
  .ecosystem-card-wrap:nth-child(1),
  .ecosystem-card-wrap:nth-child(2),
  .ecosystem-card-wrap:nth-child(3) {
    position: relative !important;
    top: auto !important;
    padding-bottom: var(--space-4) !important;
  }

  .ecosystem-cards {
    padding-bottom: 0;
  }

  .ecosystem-card {
    height: auto;
    min-height: 0;
  }
}

/*
 * Enhanced desktop sequence: JavaScript creates one sticky wrapper around the
 * introduction and all cards. Because the wrapper releases as a single box,
 * the completed stack cannot collapse or overtake its preceding cards.
 */
.ecosystem-scroll-enhanced {
  position: relative;
}

.ecosystem-scroll-enhanced .ecosystem-pin {
  position: sticky;
  top: clamp(64px, 8vh, 100px);
  width: 100%;
  overflow: hidden;
}

.ecosystem-scroll-enhanced .ecosystem-intro-pin {
  position: relative !important;
  top: 0 !important;
  z-index: 10 !important;
}

.ecosystem-scroll-enhanced .ecosystem-intro-pin::before {
  content: none;
}

.ecosystem-scroll-enhanced .ecosystem-cards {
  position: absolute !important;
  inset: 0 !important;
  max-width: 1100px;
  margin-inline: auto;
  padding-bottom: 0;
}

.ecosystem-scroll-enhanced .ecosystem-card-wrap,
.ecosystem-scroll-enhanced .ecosystem-card-wrap:nth-child(1),
.ecosystem-scroll-enhanced .ecosystem-card-wrap:nth-child(2),
.ecosystem-scroll-enhanced .ecosystem-card-wrap:nth-child(3) {
  position: absolute !important;
  inset: 0 0 auto !important;
  top: 0 !important;
  width: 100%;
  padding-block: var(--space-4) !important;
  transform: translate3d(0, 110vh, 0);
  will-change: transform;
}

.ecosystem-scroll-enhanced .ecosystem-card-wrap:nth-child(1) {
  z-index: 1;
}

.ecosystem-scroll-enhanced .ecosystem-card-wrap:nth-child(2) {
  z-index: 2;
}

.ecosystem-scroll-enhanced .ecosystem-card-wrap:nth-child(3) {
  z-index: 3;
}

/* Let the script measure real content height instead of the old fixed card. */
.ecosystem-card {
  height: auto;
  min-height: 0;
}

.ecosystem-scroll-enhanced .ecosystem-card-wrap,
.ecosystem-scroll-enhanced .ecosystem-card-wrap:nth-child(1),
.ecosystem-scroll-enhanced .ecosystem-card-wrap:nth-child(2),
.ecosystem-scroll-enhanced .ecosystem-card-wrap:nth-child(3) {
  padding-block: 0 !important;
}

.ecosystem-outro {
  margin-top: var(--space-6) !important;
  font-size: clamp(1rem, 1.4vw, 1.125rem) !important;
  line-height: 1.6;
}

/* Bumped from the sitewide .eyebrow-pill's --type-label (13-14px). Kept in
   step with .built-different .eyebrow-pill in built-different.css — change
   both together or the two section labels stop matching. */
.ecosystem-intro .eyebrow-pill {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
}