.form-flow {
  position: relative;
  transition: height var(--duration-base, .42s) var(--ease-out, cubic-bezier(.22,.61,.36,1));
}

.form-flow__fields {
  display: inherit;
  flex-direction: inherit;
  align-items: inherit;
  justify-content: inherit;
  flex-wrap: inherit;
  gap: inherit;
  grid-template-columns: inherit;
  flex: 1 1 auto;
  min-width: 0;
  transition: opacity var(--duration-fast, .26s) var(--ease-out, cubic-bezier(.22,.61,.36,1)),
              transform var(--duration-fast, .26s) var(--ease-out, cubic-bezier(.22,.61,.36,1)),
              filter var(--duration-fast, .26s) var(--ease-out, cubic-bezier(.22,.61,.36,1));
}

.form-flow--busy .form-flow__fields,
.form-flow--done .form-flow__fields {
  opacity: 0;
  transform: scale(.97);
  filter: blur(2px);
  pointer-events: none;
}

.form-flow__state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  opacity: 0;
  transform: scale(.94);
  transition: opacity var(--duration-base, .42s) var(--ease-out, cubic-bezier(.22,.61,.36,1)),
              transform var(--duration-base, .42s) var(--ease-out, cubic-bezier(.22,.61,.36,1));
  pointer-events: none;
}

.form-flow--busy .form-flow__state,
.form-flow--done .form-flow__state {
  opacity: 1;
  transform: none;
}

.form-flow__mark {
  width: 66px;
  height: 66px;
}

.form-flow__ring {
  fill: none;
  stroke: var(--color-border-subtle, rgba(22,163,74,.2));
  stroke-width: 4;
}

.form-flow__arc {
  fill: none;
  stroke: var(--color-brand-600, #16a34a);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 44 132;
  transform-origin: 50% 50%;
  animation: form-flow-spin 1.1s linear infinite;
}

.form-flow--done .form-flow__arc {
  stroke-dasharray: 176;
  stroke-dashoffset: 0;
  animation: none;
  opacity: .28;
}

.form-flow__check {
  fill: none;
  stroke: var(--color-brand-600, #16a34a);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}

.form-flow--done .form-flow__check {
  animation: form-flow-draw .5s var(--ease-out, cubic-bezier(.22,.61,.36,1)) .1s forwards;
}

.form-flow__title {
  font-weight: 600;
  font-size: 17px;
}

.form-flow__text {
  max-width: 320px;
  color: var(--color-text-muted, #64748b);
  font-size: 14px;
  line-height: 1.5;
}

@keyframes form-flow-spin {
  to { transform: rotate(360deg); }
}

@keyframes form-flow-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .form-flow,
  .form-flow__fields,
  .form-flow__state {
    transition: none;
  }

  .form-flow__arc {
    animation: none;
  }

  .form-flow--done .form-flow__check {
    animation: none;
    stroke-dashoffset: 0;
  }
}