/* Pinned cards and animated dashed route, adapted from the supplied React example. */
.process{background:#f7f8f4}
.process-board{position:relative;max-width:920px;margin:auto;background:repeating-linear-gradient(transparent 0 31px,#15211c08 31px 32px);border-radius:24px}
.process-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.process-path path{fill:none;stroke:#aebbb0;stroke-width:2;stroke-dasharray:8 6;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:route-dashes 3s linear infinite}
.pinned-steps{display:block;position:relative;height:680px;margin:0;padding:0;list-style:none}
.pinned-steps .pinned-step{position:absolute;width:280px;border:1px solid #e3e7df;border-radius:25px;background:#fff;padding:8px;box-shadow:0 10px 22px #15211c10;transform:rotate(var(--tilt));transition:transform .25s,box-shadow .25s}
.pinned-steps .pinned-step:hover{z-index:2;transform:rotate(0deg) translateY(-4px);box-shadow:0 14px 28px #15211c18}
.step-1{top:20px;left:12%;--tilt:5deg;--paper:#fff4e6;--edge:#f5ddbb;--ink:#a65a13}
.step-2{top:110px;right:12%;--tilt:-5deg;--paper:#edf5ff;--edge:#d3e3f6;--ink:#2861a5}
.step-3{top:330px;left:12%;--tilt:5deg;--paper:#f4efff;--edge:#e4d9f7;--ink:#7950a5}
.step-4{top:420px;right:12%;--tilt:-5deg;--paper:#edf6ed;--edge:#cfe5ce;--ink:#347346}
.step-pin{display:block;margin:3px auto 12px;color:var(--ink)}
.step-paper{background:var(--paper);border:1px solid var(--edge);border-radius:16px;padding:16px;min-height:174px}
.step-number{display:block;font-family:'Comic Sans MS','Chalkboard SE',cursive;font-size:30px;line-height:1;margin-bottom:14px;color:var(--ink)}
.pinned-steps h3{font-size:22px;line-height:1.2;margin:0 0 10px;color:#1b251f}
.pinned-steps p{font-size:14px;line-height:1.5;color:#546159;margin:0}
@keyframes route-dashes{to{stroke-dashoffset:-140}}
@media(max-width:800px){.step-1,.step-3{left:5%}.step-2,.step-4{right:5%}.pinned-steps .pinned-step{width:260px}}
@media(max-width:640px){.process-path{display:none}.process-board{padding:16px 12px}.pinned-steps{display:grid;height:auto;gap:24px;justify-items:center}.pinned-steps .pinned-step{position:relative;inset:auto;width:100%;max-width:320px;--tilt:2deg}.pinned-steps .pinned-step:nth-child(even){--tilt:-2deg}.step-paper{min-height:0}}
@media(prefers-reduced-motion:reduce){.process-path path{animation:none}.pinned-steps .pinned-step{transition:none}}