/* A light introduction beside a continuous dark process panel. */
.process-copy{display:contents}
.figma-v2 .expertise + .process.process-dark{border-top:1px solid #ededed}
.figma-v2 .process.process-dark{background:#fff;color:#181818;color-scheme:light;border-radius:0;padding:72px 16px;margin-bottom:48px;column-gap:clamp(40px,5vw,88px)}
.figma-v2 .process.process-dark .process-soft-light{display:none}
.figma-v2 .process.process-dark .process-copy>h2{color:#181818;white-space:normal;font-size:clamp(38px,3.85vw,60px);line-height:1.05;letter-spacing:-.045em}
.figma-v2 .process.process-dark .blue{color:var(--blue)}
.figma-v2 .process.process-dark .section-arrow>img{filter:none}
.figma-v2 .process.process-dark .process-intro{color:#818181;max-width:390px}
.figma-v2 .process.process-dark .process-stack{background:#181818;border-radius:0;color-scheme:dark}
.figma-v2 .process.process-dark .process-stack>li{background:#181818;border:0;border-radius:0;box-shadow:none;min-height:244px;padding:36px 30px 44px;gap:22px}
.figma-v2 .process.process-dark .process-stack>li+li{border-top:1px solid #ffffff24}
.figma-v2 .process.process-dark .process-number{font-size:clamp(58px,5.2vw,76px);line-height:1}
.figma-v2 .process.process-dark .process-stack h3{color:#f2f1ef}
.figma-v2 .process.process-dark .process-stack p{color:#a3a3a3;max-width:560px;text-wrap:balance}
@media(min-width:901px){
  .figma-v2 .process.process-dark{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-rows:35px auto 1fr}
}
@media(max-width:900px){
  .figma-v2 .process.process-dark{padding:48px 8px}
  .figma-v2 .process.process-dark .process-intro{max-width:560px;margin-bottom:36px}
}
@media(max-width:700px){
  .figma-v2 .process.process-dark{padding:36px 0;margin-bottom:32px}
  .figma-v2 .process.process-dark .process-copy>h2{font-size:clamp(32px,7.8vw,44px)}
  .figma-v2 .process.process-dark .process-stack>li{min-height:0;padding:30px 24px 36px;gap:22px}
  .figma-v2 .process.process-dark .process-number{font-size:56px}
}

/* Native scrolling layers each new step over the previous one. */
@media screen and (prefers-reduced-motion:no-preference) and (min-height:600px){
  .figma-v2 .process.process-dark{overflow:visible;--stack-top:clamp(24px,10vh,96px)}
  .figma-v2 .process.process-dark .process-stack{
    overflow:visible;
    background:transparent;
    /* Share the copy column's bottom boundary so both release together. */
    padding-bottom:0;
  }
  .figma-v2 .process.process-dark .process-stack>li{
    position:sticky;
    top:calc(var(--stack-top) + var(--step-offset));
    z-index:var(--step-layer);
    min-height:280px;
  }
  .figma-v2 .process.process-dark .process-stack>li:nth-child(1){--step-offset:0px;--step-layer:1}
  .figma-v2 .process.process-dark .process-stack>li:nth-child(2){--step-offset:18px;--step-layer:2}
  .figma-v2 .process.process-dark .process-stack>li:nth-child(3){--step-offset:36px;--step-layer:3}
}
@media screen and (min-width:901px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
  .figma-v2 .process.process-dark .process-copy{
    display:block;
    grid-column:1;
    grid-row:1 / 4;
    position:sticky;
    top:var(--stack-top);
    align-self:start;
  }
}