/* Four levers: every scroll state is a complete, self-contained desktop scene. */
@media (min-width: 901px) {
  .system { align-items: stretch; }
  .system-sticky {
    z-index: 3;
    height: 100svh;
    padding: calc(76px + 4vh) var(--page) 7vh;
    overflow: hidden;
  }
  .system h2 {
    max-width: 8.2ch;
    margin-top: 24px;
    font-size: clamp(58px, 5vw, 82px);
    line-height: .9 !important;
  }
  .system-description {
    max-width: 32ch;
    margin-top: 24px;
    font-size: clamp(15px, 1.05vw, 18px) !important;
    line-height: 1.52;
  }
  .system-steps { padding: 0 !important; background: #101216; }
  .system-step {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 100svh;
    margin: 0;
    padding: calc(76px + 7vh) clamp(42px,5vw,88px) 7vh !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    visibility: hidden;
    opacity: 0 !important;
    transform: none !important;
    background: #101216;
  }
  .system-step:nth-child(1) { z-index: 1; }
  .system-step:nth-child(2) { z-index: 2; }
  .system-step:nth-child(3) { z-index: 3; }
  .system-step:nth-child(4) { z-index: 4; }
  .system-step.is-active { visibility: visible; opacity: 1 !important; }
  .system-step::before,
  .system-step::after { display: none; }
  .system-step .feature-icon { width: 48px; height: 48px; margin: 0 0 24px; }
  .system-step h3,
  .system-step:last-child h3 {
    width: auto;
    max-width: 8.8ch;
    margin: 0 0 21px;
    white-space: normal;
    font-size: clamp(56px, 5.75vw, 94px);
    line-height: .84;
  }
  .system-step p { max-width: 34ch; margin: 0; font-size: clamp(15px,1.05vw,18px) !important; line-height: 1.48; }
  .system-step ul { max-width: 36rem; margin-top: 26px; }
}