/*
  Four levers: one pinned scene, four deterministic states.
  The scroll track belongs to .system; the two columns never compete for sticky
  ownership and only the active lever can occupy the right-hand scene.
*/
@media (min-width: 901px) {
  .system {
    position: relative;
    min-height: 400svh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    background: #101216;
  }

  .system-sticky,
  .system-steps {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 100svh;
  }

  .system-sticky {
    z-index: 2;
    overflow: hidden;
  }

  .system-steps {
    z-index: 1;
    padding: 0 !important;
    overflow: hidden;
    background: #101216;
  }

  .system-step,
  .system-step:nth-child(n) {
    position: absolute !important;
    inset: 0;
    z-index: 1 !important;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: calc(76px + 7vh) clamp(42px, 5vw, 88px) 7vh !important;
    display: flex;
    visibility: hidden;
    opacity: 0 !important;
    clip-path: inset(0 0 100% 0);
    transform: none !important;
    background: #101216;
    transition: clip-path .48s cubic-bezier(.76,0,.24,1), opacity .22s ease, visibility 0s linear .48s;
  }

  .system-step.is-active {
    z-index: 2 !important;
    visibility: visible;
    opacity: 1 !important;
    clip-path: inset(0);
    transition: clip-path .58s cubic-bezier(.76,0,.24,1), opacity .28s ease;
  }

  .system-step h3,
  .system-step:last-child h3 { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  .system-step { transition: none; }
}

/* Keep the lever identity in its accents; the first three titles stay white. */
.system-step:nth-child(-n+3) h3 {
  color: #f5f1eb;
}