/* How it works process animation. Ported from arfiko.com (Oleksandr's build), same markup and timing. */
#hiw {
  --line2: rgba(15, 23, 42, 0.14);
  --mu: #4a5568;
  --mu2: #64748b;
  --tx: #0b1324;
  --ac: #2456f5;
  --ac2: #2456f5;
  --card: #ffffff;
  --sans: var(--font-inter), -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: var(--font-jb), ui-monospace, Menlo, monospace;
}
#hiw h3, #hiw p, .hiw-list { margin: 0; padding: 0; }
#hiw *, #hiw *::before, #hiw *::after { box-sizing: border-box; }
.hiw-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.hiw-head > div { flex: 1 1 420px; }
.hiw-replay { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0px 10px; border: 1px solid var(--line2); border-radius: 8px; background: #ffffff; color: var(--mu); font: 500 13px var(--sans); cursor: pointer; transition: color 0.2s, background 0.2s, opacity 0.4s; white-space: nowrap; }
.hiw-replay:hover { color: var(--tx); background: rgba(15, 23, 42, 0.05); }
.hiw-replay:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.hiw-replay svg { width: 14px; height: 14px; }
.hiw-js .hiw-replay { opacity: 0; pointer-events: none; }
.hiw-js.hiw-done .hiw-replay { opacity: 1; pointer-events: auto; }
.hiw-flow { position: relative; display: flex; align-items: stretch; margin-top: 96px; }
.hiw-node { position: relative; flex: 1 1 0px; min-width: 0px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 18px 18px 20px; display: flex; flex-direction: column; transition: opacity 0.5s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s, background 0.4s, box-shadow 0.4s; }
.hiw-node.cur { border-color: rgba(36, 86, 245, 0.45); background: linear-gradient(180deg,rgba(36,86,245,.10),var(--card) 70%); box-shadow: rgba(36, 86, 245, 0.5) 0px 20px 60px -30px; }
.hiw-tile { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(rgba(36, 86, 245, 0.14), rgba(36, 86, 245, 0.04)); border: 1px solid rgba(36, 86, 245, 0.22); box-shadow: rgba(255, 255, 255, 0.8) 0px 1px 0px inset; color: var(--ac2); }
.hiw-tile svg { width: 20px; height: 20px; }
.hiw-dock { position: absolute; left: 70px; top: 23px; width: 24px; height: 30px; pointer-events: none; }
.hiw-n { display: block; margin-top: 20px; font: 700 13px/1 var(--mono); color: rgb(36, 86, 245); }
.hiw-node h3 { font: 600 16px/1.3 var(--sans); letter-spacing: -0.015em; margin-top: 8px; }
.hiw-meta { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 12px/1.3 var(--mono); color: var(--mu2); }
.hiw-meta svg { flex: 0 0 auto; }
.hiw-conn { position: relative; flex: 0 0 44px; align-self: flex-start; margin-top: 38px; height: 0px; }
.hiw-conn i { position: absolute; left: 5px; right: 7px; top: -0.5px; height: 1px; background: rgba(36, 86, 245, 0.55); transform: scaleX(0); transform-origin: 0px 50%; transition: transform 0.55s cubic-bezier(0.45, 0, 0.2, 1); }
.hiw-conn b { position: absolute; right: 6px; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid var(--ac2); border-right: 1.5px solid var(--ac2); transform: rotate(45deg); opacity: 0; transition: opacity 0.25s 0.45s; }
.hiw-conn.on i { transform: none; }
.hiw-conn.on b { opacity: 1; }
.hiw-loop { position: absolute; left: 50px; bottom: calc(100% - 28px); display: flex; align-items: center; gap: 6px; pointer-events: none; }
.hiw-loop svg { display: block; overflow: visible; }
.hiw-loop .hiw-lv { display: none; }
.hiw-lpath { fill: none; stroke: none; }
.hiw-lp, .hiw-lh { fill: none; stroke: var(--ac2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hiw-lp { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.7s cubic-bezier(0.45, 0, 0.2, 1); }
.hiw-lh { opacity: 0; transition: opacity 0.2s 0.6s; }
.hiw-ql { font: 12px/1.2 var(--mono); color: var(--mu); white-space: nowrap; margin-bottom: 24px; opacity: 0; transition: opacity 0.4s 0.3s; }
.hiw-ql em { font-style: normal; color: var(--ac2); }
.hiw-loop.on .hiw-lp { stroke-dashoffset: 0; }
.hiw-loop.on .hiw-lh, .hiw-loop.on ~ .hiw-ql, .hiw-loop.on .hiw-ql { opacity: 1; }
.hiw-log rect { fill: none; stroke: var(--line2); }
.hiw-log path { stroke: var(--mu2); stroke-width: 1.2; stroke-linecap: round; }
.hiw-log circle { fill: rgb(22, 163, 74); opacity: 0; transition: opacity 0.25s; }
.hiw-log.on circle { opacity: 1; }
.hiw-log.on circle:nth-of-type(2) { transition-delay: 0.15s; }
.hiw-log.on circle:nth-of-type(3) { transition-delay: 0.3s; }
.hiw-doc { position: absolute; left: 0px; top: 0px; width: 24px; height: 30px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.35s; will-change: transform; }
.hiw-doc.on { opacity: 1; }
.hiw-doc-in { width: 24px; height: 30px; filter: drop-shadow(rgba(15, 23, 42, 0.18) 0px 4px 8px); }
.hiw-doc svg { display: block; width: 24px; height: 30px; overflow: visible; }
.hiw-doc .y, .hiw-doc .pz, .hiw-doc .ok { opacity: 0; }
.hiw-doc.is-yours .s { opacity: 0; }
.hiw-doc.is-yours .y { opacity: 1; }
.hiw-doc.is-priced .pz { opacity: 1; }
.hiw-doc.is-done .ok { opacity: 1; transition: opacity 0.3s; }
.hiw-list { list-style: none; margin-top: 56px; border-bottom: 1px solid var(--line); }
.hiw-li { display: grid; grid-template-columns: 64px minmax(0px, 1fr) minmax(0px, 1.7fr); gap: 24px; padding: 24px 0px; border-top: 1px solid var(--line); transition: opacity 0.6s; }
.hiw-li b { font: 700 13px/1.6 var(--mono); color: rgb(36, 86, 245); padding-top: 2px; }
.hiw-li h3 { font: 600 19px/1.35 var(--sans); letter-spacing: -0.02em; }
.hiw-li p { color: var(--mu); font-size: 15px; line-height: 1.6; max-width: 40em; }
.hiw-close { margin-top: 32px; font: 500 17px/1.5 var(--sans); color: var(--tx); display: flex; align-items: center; gap: 12px; transition: opacity 0.6s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hiw-close::before { content: ""; flex: 0 0 auto; width: 16px; height: 1px; background: var(--ac2); }
.hiw-js .hiw-node { opacity: 0; transform: translateY(10px); }
.hiw-js .hiw-node.on { opacity: 1; transform: none; }
.hiw-js .hiw-li { opacity: 0.45; }
.hiw-js .hiw-li.on { opacity: 1; }
.hiw-js .hiw-close { opacity: 0; transform: translateY(6px); }
.hiw-js .hiw-close.on { opacity: 1; transform: none; }
.hiw-snap, .hiw-snap * { transition: none !important; }
.hiw-doc g { transition: opacity 0.15s; }
#hiw:not(.hiw-js) .hiw-conn i { transform: none; }
#hiw:not(.hiw-js) .hiw-conn b { opacity: 1; }
#hiw:not(.hiw-js) .hiw-lp { stroke-dashoffset: 0; }
#hiw:not(.hiw-js) .hiw-lh, #hiw:not(.hiw-js) .hiw-ql, #hiw:not(.hiw-js) .hiw-log circle { opacity: 1; }
@media (max-width: 1000px) and (min-width: 821px) {
  .hiw-node { padding: 18px 14px; }
  .hiw-node h3 { font-size: 15px; }
  .hiw-conn { flex-basis: 32px; }
}
@media (max-width: 820px) {
  .hiw-flow { flex-direction: column; margin-top: 40px; }
  .hiw-node { display: grid; grid-template-columns: 40px minmax(0px, 1fr); column-gap: 14px; padding: 14px 56px 14px 14px; align-items: start; }
  .hiw-tile { grid-row: 1 / 4; }
  .hiw-n { margin-top: 0px; font-size: 12px; }
  .hiw-node h3 { margin-top: 4px; font-size: 16px; }
  .hiw-meta { padding-top: 8px; }
  .hiw-dock { left: auto; right: 16px; top: 19px; }
  .hiw-conn { flex: 0 0 28px; align-self: stretch; margin: 0px; height: 28px; }
  .hiw-conn i { inset: 4px 27.5px 7px auto; width: 1px; height: auto; transform: scaleY(0); transform-origin: 50% 0px; }
  .hiw-conn b { right: 24px; top: auto; bottom: 6px; transform: rotate(135deg); }
  .hiw-n2 { padding-right: 96px; }
  .hiw-loop { inset: 2px 36px auto auto; }
  .hiw-loop .hiw-ld { display: none; }
  .hiw-loop .hiw-lv { display: block; }
  .hiw-ql { display: none; }
  .hiw-n2 .hiw-meta .hiw-qm { display: inline; }
  .hiw-li { grid-template-columns: 40px minmax(0px, 1fr); gap: 6px 14px; padding: 20px 0px; }
  .hiw-li p { grid-column: 2; }
  .hiw-close { font-size: 16px; align-items: flex-start; }
  .hiw-close::before { margin-top: 12px; }
}
.hiw-qm { display: none; }
@media (min-width: 821px) {
  .hiw-loop .hiw-lv { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw *, .hiw-doc { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
}
.hiw-video .vid { margin-top: 72px; }
@media (max-width: 820px) {
  .hiw-video .vid { margin-top: 48px; }
}