.process { position: relative; padding-bottom: var(--section-y); background: var(--ink-950); }
.process__seam { height: clamp(140px, 16vw, 220px); background: linear-gradient(to bottom, var(--paper), var(--ink-950)); }

.process__head { display: grid; gap: var(--space-5); margin-top: clamp(1rem, 3vw, 3rem); }
.process__title { font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.045em; max-width: 17ch; }

.process__grid {
  margin-top: clamp(3rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.process__stepswrap { position: relative; }
.process__rail { position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--ink-line-strong); }
.process__rail i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(var(--accent-soft), var(--accent)); transform-origin: top; box-shadow: 0 0 12px rgba(34, 195, 230, 0.8); }

.process__steps { list-style: none; margin: 0; padding: 0; display: grid; }
.pstep {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 24px;
  min-height: 62vh; min-height: 62svh;
  padding-bottom: 40px;
}
.pstep:last-child { min-height: 40vh; }
.pstep__node {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.8rem;
  background: var(--ink-900); color: var(--on-ink-faint);
  box-shadow: inset 0 0 0 1px var(--ink-line-strong);
  transition: background var(--dur-med), color var(--dur-med), box-shadow var(--dur-med);
}
.pstep.is-on .pstep__node { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 6px rgba(34, 195, 230, 0.18), 0 0 30px rgba(34, 195, 230, 0.6); }
.pstep__body { display: grid; gap: 14px; align-content: start; padding-top: 4px; }
.pstep__title {
  font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.045em;
  color: var(--on-ink-faint); transition: color var(--dur-med);
}
.pstep.is-on .pstep__title { color: var(--on-ink); }
.pstep__text { color: var(--on-ink-muted); max-width: 44ch; opacity: 0.55; transition: opacity var(--dur-med); }
.pstep.is-on .pstep__text { opacity: 1; }
.pstep__meta { color: var(--accent-soft); }

.process__sticky { position: sticky; top: 16vh; }
.process__stage {
  position: relative;
  padding: clamp(20px, 3vw, 36px);
  border-radius: var(--r-xl);
  background: radial-gradient(80% 70% at 70% 0%, rgba(34, 195, 230, 0.28), transparent 70%), var(--ink-900);
  box-shadow: inset 0 0 0 1px var(--ink-line);
  min-height: 460px;
  display: grid; align-content: center;
}
.process__counter { position: absolute; top: 20px; right: 24px; color: var(--on-ink); }
.process__counter span { color: var(--on-ink-faint); }

@media (max-width: 959px) {
  .process__grid { grid-template-columns: minmax(0, 1fr); }
  .pstep { min-height: 0; padding-bottom: 56px; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .pstep__title { color: var(--on-ink); }
  .pstep__text { opacity: 1; }
  .pstep__visual { margin-top: 12px; }
}
@media (max-width: 560px) {
  .pstep { grid-template-columns: minmax(0, 1fr); }
  .process__rail { display: none; }
  .pstep__node { width: 36px; height: 36px; }
  .pstep__visual { margin-inline: -4px; }
}