.funding-workflow-canvas {
  --workflow-canvas: #faf9f8;
  --workflow-ink: #252525;
  --workflow-muted: #77736f;
  --workflow-line: rgba(37, 37, 37, 0.2);
  --workflow-soft-line: rgba(37, 37, 37, 0.1);
  --workflow-placeholder: rgba(37, 37, 37, 0.13);
  --workflow-accent: #ff6842;
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  container-type: inline-size;
  color: var(--workflow-ink);
  background: var(--workflow-canvas);
  isolation: isolate;
  text-align: left;
}

.funding-workflow-canvas *,
.funding-workflow-canvas *::before,
.funding-workflow-canvas *::after { box-sizing: border-box; }
.funding-workflow-canvas strong,
.funding-workflow-canvas span { letter-spacing: 0; }
.funding-workflow-canvas strong { font-weight: 700; }

.workflow-placeholder-line {
  display: block;
  width: var(--line-width);
  height: 1.6cqw;
  max-height: 15px;
  margin-top: 2.5cqw;
  border-radius: 999px;
  background: var(--workflow-placeholder);
}

/* 01: application */
.workflow-application-sheet {
  position: absolute;
  left: 10%;
  top: 9%;
  width: 80%;
  height: 91%;
  border-radius: 4.8cqw 4.8cqw 0 0;
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 42px rgba(50,40,30,.035);
}
.workflow-application-title { position: absolute; left: 7%; top: 14%; font-size: 5.8cqw; line-height: 1; }
.workflow-application-copy { position: absolute; left: 7%; top: 32%; width: 55%; }
.workflow-application-action {
  position: absolute; right: 7%; bottom: 10%; display: grid; place-items: center;
  min-width: 35%; min-height: 14%; padding: 0 5%; border-radius: 1.7cqw;
  color: #fff; background: var(--workflow-accent); font-size: 3.2cqw; font-weight: 700;
}

/* 02: assessment */
.workflow-assessment-frame { position: absolute; left: 7.1%; top: 10.8%; width: 66.8%; height: 77.4%; border: 1px solid var(--workflow-soft-line); border-radius: 1.6cqw; }
.workflow-assessment-grid { position: absolute; left: 9.2%; top: 9.2%; width: 86%; height: 75.8%; border: 1px solid var(--workflow-line); background: linear-gradient(to right,transparent calc(50% - .5px),var(--workflow-line) 50%,transparent calc(50% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),var(--workflow-line) 50%,transparent calc(50% + .5px)); }
.workflow-axis,.workflow-axis-title { position: absolute; color: var(--workflow-ink); font-size: 1.4cqw; font-weight: 400; }
.workflow-axis--top { left: 4.7%; top: 10%; }.workflow-axis--bottom { left: 4.7%; bottom: 11%; }.workflow-axis--left { left: 11%; bottom: 4%; }.workflow-axis--right { right: 6%; bottom: 4%; }
.workflow-axis-title--vertical { left: 2.1%; top: 43%; writing-mode: vertical-rl; }.workflow-axis-title--horizontal { left: 46%; bottom: 2.5%; }
.workflow-axis-arrow { position: absolute; background: var(--workflow-line); }
.workflow-axis-arrow--vertical { left: 5.5%; top: 18%; width: 1px; height: 18%; }.workflow-axis-arrow--vertical::before { content:""; position:absolute; left:-3px; top:0; width:7px; height:7px; border-left:1px solid var(--workflow-line); border-top:1px solid var(--workflow-line); transform:rotate(45deg); }
.workflow-axis-arrow--horizontal { left: 12%; bottom: 6.5%; width: 72%; height: 1px; }.workflow-axis-arrow--horizontal::after { content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-right:1px solid var(--workflow-line); border-top:1px solid var(--workflow-line); transform:rotate(45deg); }
.workflow-assessment-copy { position:absolute; width:24%; }.workflow-assessment-copy--a{left:18%;top:20%}.workflow-assessment-copy--b{left:61%;top:20%}.workflow-assessment-copy--c{left:18%;top:60%}
.workflow-assessment-result-dot { position:absolute; left:65%; top:63%; width:2.2cqw; height:2.2cqw; border-radius:50%; background:var(--workflow-accent); }
.workflow-assessment-result { position:absolute; left:70%; top:60%; font-size:1.9cqw; white-space:nowrap; }
.workflow-assessment-note { position:absolute; right:5.7%; top:29%; width:17.7%; height:37%; padding:4% 3%; border:1px solid var(--workflow-soft-line); border-radius:1.6cqw; background:rgba(255,255,255,.58); box-shadow:0 10px 28px rgba(50,40,30,.04); }
.workflow-assessment-note strong { display:block; font-size:1.5cqw; }.workflow-assessment-note .workflow-placeholder-line{height:1.2cqw;margin-top:1.5cqw}.workflow-note-rule{display:block;height:1px;margin:3.2cqw 0;background:var(--workflow-soft-line)}

/* 03: approval */
.workflow-approval-lines,.workflow-closure-lines { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:rgba(37,37,37,.46); stroke-width:2; }
.workflow-dashed { stroke-dasharray:10 9; }
.workflow-approval-box { position:absolute; border:1px solid var(--workflow-soft-line); border-radius:1.6cqw; background:rgba(255,255,255,.6); box-shadow:0 12px 30px rgba(50,40,30,.04); }
.workflow-approval-box--plan { left:5.2%; top:37.3%; width:21.6%; height:20.2%; padding:3.2%; }
.workflow-approval-box--approved { left:39.7%; top:23.9%; width:20.6%; height:50.9%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3.4cqw; border:2px solid var(--workflow-accent); box-shadow:0 12px 34px rgba(255,104,66,.06); }
.workflow-approval-box--fees { right:5.2%; top:22.4%; width:21.6%; height:20%; padding:3.2%; }.workflow-approval-box--terms { right:5.2%; bottom:25.1%; width:21.6%; height:20%; padding:3.2%; }
.workflow-approval-box strong { position:absolute; left:10%; bottom:14%; font-size:1.8cqw; }
.workflow-square-placeholder { position:absolute; left:10%; top:18%; width:13%; aspect-ratio:1; background:var(--workflow-placeholder); }.workflow-approval-box>div { position:absolute; left:36%; top:18%; width:52%; }
.workflow-approved-check { display:grid; place-items:center; width:11cqw; height:11cqw; max-width:110px; max-height:110px; border:2px solid var(--workflow-accent); border-radius:50%; color:var(--workflow-accent); font-size:4cqw; font-weight:400; }.workflow-approval-box--approved strong { position:static; color:var(--workflow-accent); font-size:3cqw; white-space:nowrap; }

/* 04: funding */
.workflow-funding-box { position:absolute; top:50%; width:25.2%; height:24%; transform:translateY(-50%); border:1px solid var(--workflow-soft-line); border-radius:1.6cqw; background:rgba(255,255,255,.6); }
.workflow-funding-box--support{left:10%}.workflow-funding-box--progress{right:10%}.workflow-funding-box strong{position:absolute;left:12.7%;top:21%;font-size:1.9cqw}.workflow-funding-box>div{position:absolute;left:12.7%;right:12.7%;top:48%;margin:0}.workflow-funding-box .workflow-placeholder-line{height:1.2cqw;max-height:12px;margin-top:0}.workflow-funding-box .workflow-placeholder-line + .workflow-placeholder-line{margin-top:2.4cqw}
.workflow-funding-arrow{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:5.3cqw;height:5.3cqw;max-width:58px;max-height:58px;transform:translate(-50%,-50%);border-radius:50%;color:#fff;background:var(--workflow-accent);font-size:4cqw;font-weight:400}
.workflow-live-dot{position:absolute;right:7%;top:19%;width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--workflow-accent)}

/* 05: closure */
.workflow-closure-source { position:absolute; left:16.2%; top:34.6%; width:19%; height:27.5%; padding:4%; border:1px solid var(--workflow-soft-line); border-radius:1.6cqw; background:rgba(255,255,255,.6); }
.workflow-closure-source strong{display:block;text-align:center;font-size:1.9cqw}.workflow-closure-source>div{margin-top:4cqw}
.workflow-closure-balance{position:absolute;left:45.1%;top:44.2%;display:grid;place-items:center;width:5.3cqw;height:5.3cqw;max-width:58px;max-height:58px;border-radius:50%;color:#fff;background:var(--workflow-accent)}
.workflow-scales-icon{width:68%;height:68%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.workflow-closure-outcome{position:absolute;right:17.3%;width:18%;height:27.8%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2cqw;border:1px solid var(--workflow-soft-line);border-radius:1.6cqw;background:rgba(255,255,255,.6)}
.workflow-closure-outcome--positive{top:15.9%}.workflow-closure-outcome--negative{bottom:14.8%}.workflow-outcome-symbol{display:grid;place-items:center;width:6.4cqw;height:6.4cqw;max-width:66px;max-height:66px;border-radius:50%;background:var(--workflow-placeholder);font-size:2.7cqw;font-weight:400}.workflow-closure-outcome strong{font-size:1.9cqw;white-space:nowrap}.workflow-closure-outcome>span:last-child{color:var(--workflow-muted);font-size:1.55cqw;font-weight:400;white-space:nowrap}

@media (prefers-reduced-motion: reduce) {
  .funding-workflow-canvas *,
  .funding-workflow-canvas *::before,
  .funding-workflow-canvas *::after { animation:none!important; transition:none!important; }
}