.pflow{grid-template-columns:repeat(var(--steps,5), 1fr);grid-template-rows:auto 104px auto;margin:0;padding:0;list-style:none;display:grid;position:relative}.pflow:before{content:"";background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);pointer-events:none;position:absolute;inset:18% -6%}.pstep{display:contents}.pstep-node{grid-row:2;grid-column:var(--c);justify-content:center;align-items:center;display:flex;position:relative}.pstep-node:before{content:"";border-top:1.5px dashed color-mix(in srgb, var(--accent) 35%, var(--border));position:absolute;top:50%;left:0;right:0}.pstep-node:after{content:"";background:var(--accent);transform-origin:0;height:2px;position:absolute;top:calc(50% - 1px);left:0;right:0}.pstep:first-child .pstep-node:before,.pstep:first-child .pstep-node:after{left:50%}.pstep:last-child .pstep-node:before,.pstep:last-child .pstep-node:after{right:50%}@supports (animation-timeline:view()){.pstep-node:after{animation:linear both pflowDrawX;animation-timeline:view();animation-range:cover calc(18% + var(--i) * 5%) cover calc(23% + var(--i) * 5%)}}@keyframes pflowDrawX{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes pflowDrawY{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.pstep-dot{z-index:1;width:68px;height:68px;font-family:var(--font-display);letter-spacing:-.03em;color:var(--accent);background:var(--bg);border:1.5px solid var(--accent);box-shadow:0 0 0 7px var(--bg), 0 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent);border-radius:50%;justify-content:center;align-items:center;font-size:22px;transition:background .35s,color .35s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;display:flex;position:relative}.pstep:hover .pstep-dot{background:var(--accent);color:var(--bg);box-shadow:0 0 0 7px var(--bg), 0 0 0 8px var(--accent), 0 12px 32px color-mix(in srgb, var(--accent) 35%, transparent);transform:scale(1.1)}.pstep-body{grid-column:var(--c);text-align:center;padding:0 14px;position:relative}.pstep-body:before{content:"";width:1.5px;height:36px;position:absolute;left:50%;transform:translate(-50%)}.pstep:nth-child(odd) .pstep-body{grid-row:1;align-self:end;padding-bottom:26px}.pstep:nth-child(odd) .pstep-body:before{background:linear-gradient(to bottom, transparent, var(--accent));bottom:-18px}.pstep:nth-child(2n) .pstep-body{grid-row:3;align-self:start;padding-top:26px}.pstep:nth-child(2n) .pstep-body:before{background:linear-gradient(to top, transparent, var(--accent));top:-18px}.pstep-when{font-family:var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;font-size:10.5px;font-weight:600;display:block}.pstep-title{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text);margin-bottom:10px;font-size:19px;line-height:1.2;transition:color .3s}.pstep:hover .pstep-title{color:var(--accent)}.pstep-desc{color:var(--body);max-width:26ch;margin:0 auto;font-size:13.5px;line-height:1.7}@media (max-width:1023px){.pflow{grid-template-rows:none;grid-template-columns:60px 1fr}.pflow:before{inset:0 -10% 0 -30%}.pstep{grid-column:1/-1;grid-template-columns:subgrid;display:grid}.pstep-node{grid-area:auto/1;align-items:flex-start}.pstep-node:before,.pstep-node:after,.pstep:first-child .pstep-node:before,.pstep:first-child .pstep-node:after,.pstep:last-child .pstep-node:before,.pstep:last-child .pstep-node:after{inset:0 auto 0 50%}.pstep-node:before{border-top:none;border-left:1.5px dashed color-mix(in srgb, var(--accent) 35%, var(--border))}.pstep-node:after{transform-origin:top;width:2px;height:auto;margin-left:-.5px}.pstep:first-child .pstep-node:before,.pstep:first-child .pstep-node:after{top:28px}.pstep:last-child .pstep-node:before,.pstep:last-child .pstep-node:after{height:28px;bottom:auto}@supports (animation-timeline:view()){.pstep-node:after{animation-name:pflowDrawY;animation-range:entry 60% cover 50%}}.pstep-dot{width:56px;height:56px;font-size:18px}.pstep:nth-child(n) .pstep-body{text-align:left;grid-area:auto/2;align-self:start;padding:6px 0 40px 22px}.pstep:last-child .pstep-body{padding-bottom:0}.pstep:nth-child(n) .pstep-body:before{display:none}.pstep-desc{max-width:48ch;margin:0}}@media (prefers-reduced-motion:reduce){.pstep-node:after{animation:none!important;transform:none!important}}