/* MoxKit process widget. */
/* Process Showcase widget */
.moxkit-process{position:relative;--moxkit-marker-size:64px;--moxkit-connector-color:#cbc7fb;
--moxkit-connector-width:2px;--moxkit-connector-offset:0px;--moxkit-connector-highlight:var(--moxkit-accent);
--moxkit-line-speed:2.4s;--moxkit-process-body-gap:16px;--moxkit-step-gap:32px}
.moxkit-process-list{list-style:none;margin:0;padding:0}
.moxkit-process-step{position:relative}
.moxkit-process-marker{position:relative;z-index:1;display:inline-flex;
align-items:center;justify-content:center;box-sizing:border-box;width:var(--moxkit-marker-size);
height:var(--moxkit-marker-size);border:0 solid transparent;background:#f0efff;
color:#635bff;font-size:24px;line-height:1;flex:0 0 auto;transition:background-color .2s,color .2s,border-color .2s}
.moxkit-process-marker svg{width:1em;height:1em;fill:currentColor}
.moxkit-process-number{font-weight:700}
.moxkit-process-badge{--moxkit-badge-x:-4px;--moxkit-badge-y:-4px;--moxkit-badge-size:20px;
position:absolute;top:var(--moxkit-badge-y);right:var(--moxkit-badge-x);
display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
min-width:var(--moxkit-badge-size);height:var(--moxkit-badge-size);padding:0 .4em;
border:0 solid currentColor;border-radius:99px;background:var(--moxkit-ink);
color:#fff;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;
outline:var(--moxkit-badge-ring, 2px) solid var(--moxkit-badge-ring-color, #fff);
outline-offset:0;transition:color .2s,background-color .2s,border-color .2s,outline-color .2s}
.moxkit-process-title{margin:0 0 8px;font-size:18px}
.moxkit-process-desc{color:#596579;line-height:1.7}
.moxkit-process-action{margin-top:16px}
.moxkit-process:not(.moxkit-process--cards) .moxkit-process-body{box-sizing:border-box;min-width:0}
.moxkit-process--horizontal .moxkit-process-body{align-self:stretch;flex:1 1 auto;width:100%;margin-inline:auto}
.moxkit-process:is(.moxkit-process--vertical,.moxkit-process--alternate) .moxkit-process-body{flex:1 1 auto}
/* Connector: one element per gap (or one track for the alternating timeline). Axis vars pick patterns and keyframes. */
.moxkit-process-line,.moxkit-process-track{display:none;position:absolute;
z-index:0;pointer-events:none;overflow:hidden;background:var(--moxkit-connector-color);
transform-origin:0 0;--moxkit-line-dash:calc(var(--moxkit-connector-width) * 4);
--moxkit-line-period:calc(var(--moxkit-connector-width) * 7);--moxkit-line-angle:90deg;
--moxkit-line-flow:moxkit-line-flow-x;--moxkit-line-beam:moxkit-line-beam-x;
--moxkit-line-dot:moxkit-line-dot-x;--moxkit-line-hidden:scaleX(0);--moxkit-beam-w:40%;
--moxkit-beam-h:100%;--moxkit-dot:max(8px, calc(var(--moxkit-connector-width) * 4))}
.moxkit-process--vertical .moxkit-process-line,.moxkit-process-track{--moxkit-line-angle:180deg;
--moxkit-line-flow:moxkit-line-flow-y;--moxkit-line-beam:moxkit-line-beam-y;
--moxkit-line-dot:moxkit-line-dot-y;--moxkit-line-hidden:scaleY(0);--moxkit-beam-w:100%;
--moxkit-beam-h:40%}
.moxkit-process:is([data-line=dashed],[data-line=dotted],[data-line-anim=flow]) :is(.moxkit-process-line,.moxkit-process-track){
background:repeating-linear-gradient(var(--moxkit-line-angle),var(--moxkit-connector-color) 0 var(--moxkit-line-dash),transparent var(--moxkit-line-dash) var(--moxkit-line-period))}
.moxkit-process[data-line=dotted] :is(.moxkit-process-line,.moxkit-process-track){
--moxkit-line-dash:var(--moxkit-connector-width);--moxkit-line-period:calc(var(--moxkit-connector-width) * 3)}
/* Horizontal */
.moxkit-process--horizontal .moxkit-process-list{display:grid;grid-template-columns:repeat(var(--moxkit-cols, var(--moxkit-count, 4)),minmax(0,1fr));
column-gap:var(--moxkit-step-gap);row-gap:var(--moxkit-row-gap, var(--moxkit-step-gap))}
.moxkit-process--horizontal .moxkit-process-step{min-width:0;display:flex;
flex-direction:column;align-items:center;text-align:center}
.moxkit-process--horizontal .moxkit-process-body{margin-top:var(--moxkit-process-body-gap)}
.moxkit-process--horizontal .moxkit-process-step:not(:first-child)>.moxkit-process-line:not(.moxkit-process-line--out){
display:block;top:calc(var(--moxkit-marker-size) / 2 - var(--moxkit-connector-width) / 2);
height:var(--moxkit-connector-width);left:calc(-50% - var(--moxkit-step-gap) + var(--moxkit-marker-size) / 2 + var(--moxkit-connector-offset));
right:calc(50% + var(--moxkit-marker-size) / 2 + var(--moxkit-connector-offset))}
/* Wrapped rows (classes set by widgets.js): the row end fades out to the right, the next row fades in from the left. */
.moxkit-process--horizontal[data-wrap=fade] .moxkit-process-step.is-row-start>.moxkit-process-line{
left:calc(var(--moxkit-step-gap) / -2);-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);
mask-image:linear-gradient(90deg,transparent,#000 70%)}
.moxkit-process--horizontal[data-wrap=fade] .moxkit-process-step.is-row-end>.moxkit-process-line--out{
display:block;top:calc(var(--moxkit-marker-size) / 2 - var(--moxkit-connector-width) / 2);
height:var(--moxkit-connector-width);left:calc(50% + var(--moxkit-marker-size) / 2 + var(--moxkit-connector-offset));
right:calc(var(--moxkit-step-gap) / -2);-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent);
mask-image:linear-gradient(90deg,#000 30%,transparent)}
/* Continue / snake: an SVG path (drawn by widgets.js) replaces the line into each row's first step. */
.moxkit-process--horizontal:not([data-wrap=fade]) .moxkit-process-step.is-row-start>.moxkit-process-line{display:none}
/* Snake rows that run right to left mirror their connectors (and their animation direction). */
.moxkit-process--horizontal .moxkit-process-step.is-reversed:not(.is-row-start)>.moxkit-process-line:not(.moxkit-process-line--out){
left:calc(50% + var(--moxkit-marker-size) / 2 + var(--moxkit-connector-offset));
right:calc(-50% - var(--moxkit-step-gap) + var(--moxkit-marker-size) / 2 + var(--moxkit-connector-offset));
transform:scaleX(-1);transform-origin:50% 50%}
.moxkit-process-wraps{position:absolute;top:0;left:0;z-index:0;overflow:visible;pointer-events:none}
.moxkit-process-wraps path{fill:none;stroke-width:var(--moxkit-connector-width);
stroke-linecap:round;stroke-linejoin:round}
.moxkit-process-wrap-base{stroke:var(--moxkit-connector-color)}
.moxkit-process[data-line-anim=flow] .moxkit-process-wrap-base{animation:moxkit-wrap-flow calc(var(--moxkit-line-speed) / 4) linear infinite}
.moxkit-process-wrap-beam{stroke:var(--moxkit-connector-highlight);animation:moxkit-wrap-beam calc(var(--moxkit-line-speed) * 1.5) cubic-bezier(.45,0,.55,1) infinite;
animation-delay:calc(var(--moxkit-i, 0) * var(--moxkit-line-speed) / 4)}
.moxkit-process-wrap-dot{fill:var(--moxkit-connector-highlight);filter:drop-shadow(0 0 5px var(--moxkit-connector-highlight))}
.moxkit-process-wrap-draw{stroke:var(--moxkit-connector-highlight);stroke-dashoffset:0}
.moxkit-process.is-armed .moxkit-process-wrap-draw{stroke-dashoffset:var(--len);
transition:stroke-dashoffset calc(var(--moxkit-line-speed) / 4) ease-in-out calc(var(--moxkit-i, 0) * var(--moxkit-line-speed) / 4)}
.moxkit-process.is-armed.is-inview .moxkit-process-wrap-draw{stroke-dashoffset:0}
/* One column: short vertical links in the gap above each step. */
.moxkit-process--horizontal.is-stacked .moxkit-process-step:not(:first-child)>.moxkit-process-line:not(.moxkit-process-line--out){
top:calc(var(--moxkit-connector-offset) - var(--moxkit-row-gap, var(--moxkit-step-gap)));
bottom:calc(100% + var(--moxkit-connector-offset));height:auto;left:calc(50% - var(--moxkit-connector-width) / 2);
right:auto;width:var(--moxkit-connector-width);-webkit-mask-image:none;
mask-image:none;--moxkit-line-angle:180deg;--moxkit-line-flow:moxkit-line-flow-y;
--moxkit-line-beam:moxkit-line-beam-y;--moxkit-line-dot:moxkit-line-dot-y;
--moxkit-line-hidden:scaleY(0);--moxkit-beam-w:100%;--moxkit-beam-h:40%}
.moxkit-process--horizontal.is-stacked[data-line-anim=dot] .moxkit-process-line::after{top:0;left:50%}
/* Vertical */
.moxkit-process--vertical .moxkit-process-list{display:flex;flex-direction:column;gap:var(--moxkit-step-gap)}
.moxkit-process--vertical .moxkit-process-step{display:flex;align-items:flex-start;gap:var(--moxkit-process-body-gap)}
.moxkit-process--vertical .moxkit-process-body{padding-top:calc(var(--moxkit-marker-size)/2 - .7em)}
.moxkit-process--vertical .moxkit-process-step:not(:last-child)>.moxkit-process-line{
display:block;left:calc(var(--moxkit-marker-size) / 2 - var(--moxkit-connector-width) / 2);
width:var(--moxkit-connector-width);top:calc(var(--moxkit-marker-size) + var(--moxkit-connector-offset));
bottom:calc(var(--moxkit-connector-offset) - var(--moxkit-step-gap))}
/* Alternating timeline */
.moxkit-process--alternate .moxkit-process-list{display:flex;flex-direction:column;
gap:var(--moxkit-step-gap);position:relative}
.moxkit-process--alternate>.moxkit-process-track{display:block;left:calc(50% - var(--moxkit-connector-width) / 2);
width:var(--moxkit-connector-width);top:0;bottom:0}
.moxkit-process--alternate .moxkit-process-step{width:50%;display:flex;
align-items:center;gap:var(--moxkit-process-body-gap)}
.moxkit-process--alternate .moxkit-process-step:nth-child(odd){margin-left:auto}
.moxkit-process--alternate .moxkit-process-step:nth-child(odd) .moxkit-process-marker{
margin-left:calc(var(--moxkit-marker-size)/-2)}
.moxkit-process--alternate .moxkit-process-step:nth-child(even){flex-direction:row-reverse;text-align:right}
.moxkit-process--alternate .moxkit-process-step:nth-child(even) .moxkit-process-marker{
margin-right:calc(var(--moxkit-marker-size)/-2)}
/* Cards */
.moxkit-process--cards .moxkit-process-list{display:grid;grid-template-columns:repeat(var(--moxkit-cols, 3),minmax(0,1fr));
column-gap:var(--moxkit-step-gap);row-gap:var(--moxkit-row-gap, var(--moxkit-step-gap))}
.moxkit-process--cards .moxkit-process-step{box-sizing:border-box;width:100%;
margin-inline:auto;display:flex;flex-direction:column;align-items:center;
text-align:center;background:#fff;border:1px solid #e2e5ec;border-radius:12px;
padding:28px}
.moxkit-process--cards .moxkit-process-body{margin-top:var(--moxkit-process-body-gap)}
/* Connector animations */
.moxkit-process[data-line-anim=flow] :is(.moxkit-process-line,.moxkit-process-track){
animation:var(--moxkit-line-flow) calc(var(--moxkit-line-speed) / 4) linear infinite}
.moxkit-process:is([data-line-anim=beam],[data-line-anim=dot],[data-line-anim=draw]) :is(.moxkit-process-line,.moxkit-process-track)::after{
content:"";position:absolute}
.moxkit-process[data-line-anim=beam] :is(.moxkit-process-line,.moxkit-process-track)::after{
top:0;left:0;width:var(--moxkit-beam-w);height:var(--moxkit-beam-h);background:linear-gradient(var(--moxkit-line-angle),transparent,var(--moxkit-connector-highlight),transparent);
animation:var(--moxkit-line-beam) var(--moxkit-line-speed) cubic-bezier(.45,0,.55,1) infinite;
animation-delay:calc(var(--moxkit-i, 0) * var(--moxkit-line-speed) / 4)}
.moxkit-process[data-line-anim=dot] :is(.moxkit-process-line,.moxkit-process-track){overflow:visible}
.moxkit-process[data-line-anim=dot] :is(.moxkit-process-line,.moxkit-process-track)::after{
top:50%;left:0;width:var(--moxkit-dot);height:var(--moxkit-dot);border-radius:50%;
background:var(--moxkit-connector-highlight);box-shadow:0 0 0 4px color-mix(in srgb, var(--moxkit-connector-highlight) 22%, transparent),0 0 14px var(--moxkit-connector-highlight);
transform:translate(-50%,-50%);animation:var(--moxkit-line-dot) var(--moxkit-line-speed) ease-in-out infinite;
animation-delay:calc(var(--moxkit-i, 0) * var(--moxkit-line-speed) / 4)}
.moxkit-process--vertical[data-line-anim=dot] .moxkit-process-line::after,.moxkit-process[data-line-anim=dot] .moxkit-process-track::after{
top:0;left:50%}
/* The timeline track runs behind every marker, so its dot travels above them (no stacking context on the track). */
.moxkit-process[data-line-anim=dot] .moxkit-process-track{z-index:auto}
.moxkit-process[data-line-anim=dot] .moxkit-process-track::after{z-index:2}
/* Draw: lines fill with the animation colour and markers pop in order once scrolled into view (armed by JS). */
.moxkit-process[data-line-anim=draw] :is(.moxkit-process-line,.moxkit-process-track)::after{
inset:0;background:var(--moxkit-connector-highlight);transform-origin:0 0}
.moxkit-process[data-line-anim=draw].is-armed :is(.moxkit-process-line,.moxkit-process-track)::after{
transform:var(--moxkit-line-hidden);transition:transform calc(var(--moxkit-line-speed) / 4) ease-out calc((var(--moxkit-i, 0) - 1) * var(--moxkit-line-speed) / 4)}
.moxkit-process--vertical[data-line-anim=draw].is-armed .moxkit-process-line::after,.moxkit-process[data-line-anim=draw].is-armed .moxkit-process-line--out::after{
transition-delay:calc(var(--moxkit-i, 0) * var(--moxkit-line-speed) / 4)}
.moxkit-process[data-line-anim=draw].is-armed .moxkit-process-track::after{
transition-duration:calc((var(--moxkit-count, 2) - 1) * var(--moxkit-line-speed) / 4);
transition-delay:0s;transition-timing-function:linear}
.moxkit-process[data-line-anim=draw].is-armed .moxkit-process-marker{transform:scale(.6);
opacity:.35;transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--moxkit-i, 0) * var(--moxkit-line-speed) / 4),opacity .3s ease calc(var(--moxkit-i, 0) * var(--moxkit-line-speed) / 4),background-color .2s,color .2s,border-color .2s}
.moxkit-process[data-line-anim=draw].is-armed.is-inview :is(.moxkit-process-line,.moxkit-process-track)::after{
transform:none}
.moxkit-process[data-line-anim=draw].is-armed.is-inview .moxkit-process-marker{transform:none;opacity:1}
@media(max-width:767px){
 .moxkit-process--alternate>.moxkit-process-track{left:calc(var(--moxkit-marker-size) / 2 - var(--moxkit-connector-width) / 2)}
 .moxkit-process--alternate .moxkit-process-step,.moxkit-process--alternate .moxkit-process-step:nth-child(odd),.moxkit-process--alternate .moxkit-process-step:nth-child(even){
width:100%;margin-left:0;flex-direction:row;text-align:left}
 .moxkit-process--alternate .moxkit-process-step .moxkit-process-marker{margin-left:0;margin-right:0}
}
@media(prefers-reduced-motion:reduce){
 .moxkit-process-marker{transition:none}
 .moxkit-process-line,.moxkit-process-track,.moxkit-process-wraps path{animation:none!important}
 .moxkit-process:is([data-line-anim=beam],[data-line-anim=dot]) :is(.moxkit-process-line,.moxkit-process-track)::after{
display:none}
}
@keyframes moxkit-wrap-flow{to{stroke-dashoffset:calc(var(--period) * -1)}}
@keyframes moxkit-wrap-beam{from{stroke-dashoffset:var(--seg)}to{stroke-dashoffset:calc(var(--len) * -1)}}
@keyframes moxkit-line-flow-x{from{background-position:0 0}to{background-position:var(--moxkit-line-period) 0}}
@keyframes moxkit-line-flow-y{from{background-position:0 0}to{background-position:0 var(--moxkit-line-period)}}
@keyframes moxkit-line-beam-x{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes moxkit-line-beam-y{from{transform:translateY(-100%)}to{transform:translateY(250%)}}
@keyframes moxkit-line-dot-x{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes moxkit-line-dot-y{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}