.v8-process {
  --process-pine: var(--pine, #163f43);
  --process-paper: var(--paper, #fffdf8);
  --process-line: var(--line, #cbd4d1);
  color: var(--ink, #1b292b);
  font: 18px/1.5 Arial, "Helvetica Neue", sans-serif;
  padding: 48px 28px;
  background: var(--process-paper);
  border: 1px solid var(--process-line);
  border-radius: 10px;
}
.v8-process, .v8-process * { box-sizing: border-box; }
.v8-process__heading { margin-bottom: 40px; }
.v8-process h2 { margin: 0; color: var(--process-pine); font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: -.025em; }
.v8-process__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.v8-process__step { position: relative; min-width: 0; text-align: center; }
.v8-process__step:not(:last-child)::before,
.v8-process__step:not(:last-child)::after { content: ""; position: absolute; top: 31px; left: 50%; width: 100%; height: 3px; background: var(--process-line); }
.v8-process__step:not(:last-child)::after { background: var(--process-pine); transform-origin: left; }
.v8-process__marker { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; margin-inline: auto; border: 2px solid var(--process-pine); border-radius: 50%; background: var(--process-pine); color: var(--process-paper); }
.v8-process__marker svg { width: 32px; height: 32px; }
.v8-process__number { position: absolute; right: -4px; bottom: -5px; display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid var(--process-paper); border-radius: 50%; background: var(--sun, #f2be45); color: var(--process-pine); font-size: 14px; font-weight: 700; }
.v8-process h3 { margin: 22px 10px 0; font-size: 18px; line-height: 1.45; font-weight: 700; overflow-wrap: anywhere; }
.v8-process.is-pending .v8-process__step::after { transform: scaleX(0); }
.v8-process.is-pending .v8-process__marker { background: var(--process-paper); color: var(--process-pine); border-color: var(--process-line); }
.v8-process.is-running .v8-process__step::after { animation: v8-process-connect-x .56s linear calc(var(--step) * .56s) both; }
.v8-process.is-running .v8-process__marker { animation: v8-process-activate .36s ease-out calc(var(--step) * .56s) both; }
@keyframes v8-process-connect-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v8-process-connect-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes v8-process-activate { from { background: var(--process-paper); color: var(--process-pine); border-color: var(--process-line); } to { background: var(--process-pine); color: var(--process-paper); border-color: var(--process-pine); } }
@media (max-width: 799px) {
  .v8-process { padding: 32px 24px; }
  .v8-process__heading { margin-bottom: 32px; }
  .v8-process__steps { grid-template-columns: 1fr; }
  .v8-process__step { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 24px; align-items: start; min-height: 112px; padding-bottom: 32px; text-align: left; }
  .v8-process__step:last-child { min-height: 64px; padding-bottom: 0; }
  .v8-process__step:not(:last-child)::before,
  .v8-process__step:not(:last-child)::after { top: 32px; left: 31px; width: 3px; height: 100%; transform-origin: top; }
  .v8-process h3 { margin: 18px 0 0; }
  .v8-process.is-pending .v8-process__step::after { transform: scaleY(0); }
  .v8-process.is-running .v8-process__step::after { animation-name: v8-process-connect-y; }
}
@media (prefers-reduced-motion: reduce) {
  .v8-process.is-pending .v8-process__step::after { transform: none; }
  .v8-process.is-pending .v8-process__marker { background: var(--process-pine); color: var(--process-paper); border-color: var(--process-pine); }
  .v8-process.is-running .v8-process__step::after,
  .v8-process.is-running .v8-process__marker { animation: none; }
}