/* Process */
.process { position: relative; isolation: isolate; }
.process::after { content: ""; position: absolute; inset-inline-start: 5%; bottom: 10%; width: 360px; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); filter: blur(130px); opacity: 0.3; z-index: -1; }
.process__inner { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 1024px) { .process__inner { grid-template-columns: 1fr 1fr; } .process__intro { position: sticky; top: 140px; } }
.process__box { position: relative; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-bg) 70%, #ece6f7); border: var(--border-width) solid color-mix(in srgb, var(--color-secondary) 18%, transparent); box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--color-secondary) 60%, transparent); }
.process__steps { margin: 0; padding: 0; list-style: none; }

.step { position: relative; border-block-end: var(--border-width) dashed color-mix(in srgb, var(--color-primary) 22%, transparent); }
.step:last-child { border: 0; }
.step__heading { margin: 0; font-size: inherit; color: inherit; }
.step__toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding-block: var(--space-5); background: none; border: 0; color: inherit; text-align: start; cursor: pointer; }
.step__title { font-size: var(--text-xl); font-weight: var(--weight-heavy, 900); color: var(--color-primary); line-height: 1.1; transition: transform 0.5s var(--ease-out); }
.step.is-open .step__title { transform: translateX(-8px); }
.step__num { position: relative; font-size: var(--text-xl); font-weight: var(--weight-heavy, 900); color: transparent; -webkit-text-stroke: 1px var(--color-secondary); background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; background-size: 100% 0%; background-position: bottom; background-repeat: no-repeat; transition: background-size 0.6s var(--ease-out), transform 0.4s var(--ease-out), -webkit-text-stroke-color 0.4s; }
.step.is-open .step__num { background-size: 100% 100%; transform: scale(1.15); -webkit-text-stroke-width: 0; }
.step__toggle:hover .step__num { transform: scale(1.15); }

/* Panel opens smoothly (grid rows 0fr → 1fr) */
.step__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.7s var(--ease-out); }
.step__body { overflow: hidden; }
.step__body p { margin: 0; padding-block-end: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); max-width: 46ch; }
.js .step:not(.is-open) .step__panel { grid-template-rows: 0fr; }
.js .step .step__body p { opacity: 0; filter: blur(6px); transform: translateY(10px); transition: opacity 0.3s, filter 0.3s, transform 0.3s; }
.js .step.is-open .step__body p { opacity: 1; filter: none; transform: none; transition: opacity 0.8s var(--ease-out) 0.15s, filter 0.8s var(--ease-out) 0.15s, transform 0.8s var(--ease-out) 0.15s; }

/* Progress bar of the active step (fills while the step is shown) */
.step__progress { position: absolute; inset-inline: 0; bottom: -1px; height: 3px; border-radius: 3px; background: var(--gradient-brand); transform: scaleX(0); transform-origin: right; opacity: 0; }
.step.is-open .step__progress { opacity: 1; }
.process.is-auto .step.is-open .step__progress { animation: step-progress var(--step-duration, 5s) linear forwards; }
.process.is-paused .step.is-open .step__progress { animation-play-state: paused; }
@keyframes step-progress { to { transform: scaleX(1); } }

.process__pause { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: var(--border-width) solid color-mix(in srgb, var(--color-primary) 25%, transparent); border-radius: 50%; background: var(--color-bg); cursor: pointer; }
.process__pause-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.process__pause-icon { width: 10px; height: 10px; border-inline: 3px solid var(--color-primary); }
.process__pause[aria-pressed="true"] .process__pause-icon { border: 0; width: 0; height: 0; border-block: 5px solid transparent; border-inline-end: 8px solid var(--color-primary); }

@media (max-width: 1023px) {
	.process__inner { gap: var(--space-4); }
	.process__intro .section-title { margin-block-end: var(--space-3); }
}