/* Scoped to pages that contain a process illustration. */
.process-figure {
  margin: 28px 0 36px;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.process-figure__stage { position: relative; aspect-ratio: 1; }
.process-figure .process-figure__poster,
.process-figure__animation {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.process-figure .process-figure__poster { display: block; margin: 0; border-radius: 0; object-fit: contain; }
.process-figure__animation { visibility: hidden; }
.process-figure.is-ready .process-figure__animation { visibility: visible; }
.process-figure.is-ready .process-figure__poster { visibility: hidden; }
.process-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.process-grid .process-figure { margin: 0; }
@media (max-width: 640px) {
  .process-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-figure.is-ready .process-figure__poster { visibility: visible; }
  .process-figure.is-ready .process-figure__animation { visibility: hidden; }
}