/* CloudMellow Process Flow Widget v1.0.0 — generated file */
.cmpf{
  --cmpf-m:64px;--cmpf-icon:calc(var(--cmpf-m)*.4);--cmpf-badge:24px;
  --cmpf-col-gap:30px;--cmpf-row-gap:40px;--cmpf-content-gap:20px;
  --cmpf-line:2px;--cmpf-inner:10px;--cmpf-arrow:8px;
  --cmpf-line-color:#d5dbe5;--cmpf-line-active:#2563eb;
  --cmpf-speed:600ms;--cmpf-voffset:max(0px,calc(var(--cmpf-m)/2 - 14px));
  position:relative;margin:0;padding:0;list-style:none;box-sizing:border-box;
}
.cmpf *,.cmpf *::before,.cmpf *::after{box-sizing:border-box}
.cmpf-step{position:relative;min-width:0;margin:0;padding:0;list-style:none}
.cmpf-step::marker{content:none}
.cmpf-marker-wrap{position:relative;display:flex}
.cmpf-marker{
  position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  width:var(--cmpf-m);height:var(--cmpf-m);flex:0 0 var(--cmpf-m);
  border-radius:50%;background-color:#eef2ff;color:#2563eb;
  border:2px solid transparent;line-height:1;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.cmpf--m-dot .cmpf-marker{background-color:#cbd5e1}
.cmpf-step.is-active .cmpf-marker{background-color:#2563eb;color:#fff}
.cmpf-step.is-active .cmpf-marker svg{fill:#fff}
.cmpf--hover .cmpf-step:hover .cmpf-marker{transform:scale(1.08)}
.cmpf-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.cmpf-icon i{font-size:var(--cmpf-icon)}
.cmpf-icon svg{width:var(--cmpf-icon);height:var(--cmpf-icon);fill:currentColor}
.cmpf-num{font-size:calc(var(--cmpf-m)*.34);font-weight:700;line-height:1}
.cmpf-badge{
  position:absolute;top:-4px;right:-4px;min-width:var(--cmpf-badge);height:var(--cmpf-badge);
  padding:0 6px;border-radius:calc(var(--cmpf-badge)/2);display:inline-flex;align-items:center;justify-content:center;
  background:#0f172a;color:#fff;font-size:calc(var(--cmpf-badge)*.5);font-weight:700;line-height:1;
  box-shadow:0 0 0 3px #fff;
}
.cmpf-content{position:relative;min-width:0}
.cmpf-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#2563eb;margin-bottom:6px}
.cmpf-title{margin:0 0 8px;font-size:1.15em;line-height:1.3}
.cmpf-title a{color:inherit;text-decoration:none}
.cmpf-desc{margin:0;line-height:1.6;opacity:.85}
.cmpf-desc p:last-child{margin-bottom:0}

/* connector */
.cmpf-connector{position:absolute;z-index:1;pointer-events:none;color:var(--cmpf-line-color);transition:color 0s linear var(--cmpf-speed)}
.cmpf-line,.cmpf-fill{position:absolute;border:0 solid var(--cmpf-line-color)}
.cmpf-fill{border-color:var(--cmpf-line-active);transition:clip-path var(--cmpf-speed) linear}
.cmpf-step.is-done .cmpf-connector{color:var(--cmpf-line-active)}
.cmpf--arrows .cmpf-connector::after{content:"";position:absolute;width:0;height:0}

/* entrance animation (enabled by JS so content never stays hidden without it) */
.cmpf--entrance.cmpf-ready .cmpf-step{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.cmpf--entrance.cmpf-ready .cmpf-step.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .cmpf *,.cmpf--entrance.cmpf-ready .cmpf-step{transition:none!important;animation:none!important}
}

/* ===== HORIZONTAL ===== */
.cmpf--h.cmpf--stack-none{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:var(--cmpf-col-gap)}
.cmpf--h.cmpf--stack-none > .cmpf-step{flex:1 1 0;display:flex;flex-direction:column}
.cmpf--h.cmpf--stack-none .cmpf-marker-wrap{width:100%;margin-bottom:var(--cmpf-content-gap);justify-content:flex-start}
.cmpf--h.cmpf--stack-none.cmpf--ha-center .cmpf-marker-wrap{justify-content:center}
.cmpf--h.cmpf--stack-none.cmpf--ha-right .cmpf-marker-wrap{justify-content:flex-end}
.cmpf--h.cmpf--stack-none .cmpf-content{text-align:left}
.cmpf--h.cmpf--stack-none.cmpf--ha-center .cmpf-content{text-align:center}
.cmpf--h.cmpf--stack-none.cmpf--ha-right .cmpf-content{text-align:right}
.cmpf--h.cmpf--stack-none .cmpf-connector{top:calc(var(--cmpf-m)/2 - var(--cmpf-line)/2);height:var(--cmpf-line);left:calc(var(--cmpf-m) + var(--cmpf-inner));width:calc(100% + var(--cmpf-col-gap) - var(--cmpf-m) - 2*var(--cmpf-inner))}
.cmpf--h.cmpf--stack-none.cmpf--ha-center .cmpf-connector{left:calc(50% + var(--cmpf-m)/2 + var(--cmpf-inner))}
.cmpf--h.cmpf--stack-none.cmpf--ha-right .cmpf-connector{left:calc(100% + var(--cmpf-inner))}
.cmpf--h.cmpf--stack-none .cmpf-line,.cmpf--h.cmpf--stack-none .cmpf-fill{top:0;left:0;right:0;height:0;border-top-width:var(--cmpf-line)}
.cmpf--h.cmpf--stack-none .cmpf-fill{clip-path:inset(0 100% 0 0)}
.cmpf--h.cmpf--stack-none .cmpf-step.is-done .cmpf-fill{clip-path:inset(0 0 0 0)}
.cmpf--h.cmpf--stack-none.cmpf--arrows .cmpf-connector::after{right:-1px;top:50%;transform:translateY(-50%);border-left:var(--cmpf-arrow) solid currentColor;border-top:calc(var(--cmpf-arrow)*.7) solid transparent;border-bottom:calc(var(--cmpf-arrow)*.7) solid transparent}
.cmpf--h.cmpf--stack-none.cmpf--arrows .cmpf-line,.cmpf--h.cmpf--stack-none.cmpf--arrows .cmpf-fill{right:calc(var(--cmpf-arrow) - 1px)}
@media (min-width:1025px){
.cmpf--h.cmpf--stack-tablet{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:var(--cmpf-col-gap)}
.cmpf--h.cmpf--stack-tablet > .cmpf-step{flex:1 1 0;display:flex;flex-direction:column}
.cmpf--h.cmpf--stack-tablet .cmpf-marker-wrap{width:100%;margin-bottom:var(--cmpf-content-gap);justify-content:flex-start}
.cmpf--h.cmpf--stack-tablet.cmpf--ha-center .cmpf-marker-wrap{justify-content:center}
.cmpf--h.cmpf--stack-tablet.cmpf--ha-right .cmpf-marker-wrap{justify-content:flex-end}
.cmpf--h.cmpf--stack-tablet .cmpf-content{text-align:left}
.cmpf--h.cmpf--stack-tablet.cmpf--ha-center .cmpf-content{text-align:center}
.cmpf--h.cmpf--stack-tablet.cmpf--ha-right .cmpf-content{text-align:right}
.cmpf--h.cmpf--stack-tablet .cmpf-connector{top:calc(var(--cmpf-m)/2 - var(--cmpf-line)/2);height:var(--cmpf-line);left:calc(var(--cmpf-m) + var(--cmpf-inner));width:calc(100% + var(--cmpf-col-gap) - var(--cmpf-m) - 2*var(--cmpf-inner))}
.cmpf--h.cmpf--stack-tablet.cmpf--ha-center .cmpf-connector{left:calc(50% + var(--cmpf-m)/2 + var(--cmpf-inner))}
.cmpf--h.cmpf--stack-tablet.cmpf--ha-right .cmpf-connector{left:calc(100% + var(--cmpf-inner))}
.cmpf--h.cmpf--stack-tablet .cmpf-line,.cmpf--h.cmpf--stack-tablet .cmpf-fill{top:0;left:0;right:0;height:0;border-top-width:var(--cmpf-line)}
.cmpf--h.cmpf--stack-tablet .cmpf-fill{clip-path:inset(0 100% 0 0)}
.cmpf--h.cmpf--stack-tablet .cmpf-step.is-done .cmpf-fill{clip-path:inset(0 0 0 0)}
.cmpf--h.cmpf--stack-tablet.cmpf--arrows .cmpf-connector::after{right:-1px;top:50%;transform:translateY(-50%);border-left:var(--cmpf-arrow) solid currentColor;border-top:calc(var(--cmpf-arrow)*.7) solid transparent;border-bottom:calc(var(--cmpf-arrow)*.7) solid transparent}
.cmpf--h.cmpf--stack-tablet.cmpf--arrows .cmpf-line,.cmpf--h.cmpf--stack-tablet.cmpf--arrows .cmpf-fill{right:calc(var(--cmpf-arrow) - 1px)}
}
@media (min-width:768px){
.cmpf--h.cmpf--stack-mobile{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:var(--cmpf-col-gap)}
.cmpf--h.cmpf--stack-mobile > .cmpf-step{flex:1 1 0;display:flex;flex-direction:column}
.cmpf--h.cmpf--stack-mobile .cmpf-marker-wrap{width:100%;margin-bottom:var(--cmpf-content-gap);justify-content:flex-start}
.cmpf--h.cmpf--stack-mobile.cmpf--ha-center .cmpf-marker-wrap{justify-content:center}
.cmpf--h.cmpf--stack-mobile.cmpf--ha-right .cmpf-marker-wrap{justify-content:flex-end}
.cmpf--h.cmpf--stack-mobile .cmpf-content{text-align:left}
.cmpf--h.cmpf--stack-mobile.cmpf--ha-center .cmpf-content{text-align:center}
.cmpf--h.cmpf--stack-mobile.cmpf--ha-right .cmpf-content{text-align:right}
.cmpf--h.cmpf--stack-mobile .cmpf-connector{top:calc(var(--cmpf-m)/2 - var(--cmpf-line)/2);height:var(--cmpf-line);left:calc(var(--cmpf-m) + var(--cmpf-inner));width:calc(100% + var(--cmpf-col-gap) - var(--cmpf-m) - 2*var(--cmpf-inner))}
.cmpf--h.cmpf--stack-mobile.cmpf--ha-center .cmpf-connector{left:calc(50% + var(--cmpf-m)/2 + var(--cmpf-inner))}
.cmpf--h.cmpf--stack-mobile.cmpf--ha-right .cmpf-connector{left:calc(100% + var(--cmpf-inner))}
.cmpf--h.cmpf--stack-mobile .cmpf-line,.cmpf--h.cmpf--stack-mobile .cmpf-fill{top:0;left:0;right:0;height:0;border-top-width:var(--cmpf-line)}
.cmpf--h.cmpf--stack-mobile .cmpf-fill{clip-path:inset(0 100% 0 0)}
.cmpf--h.cmpf--stack-mobile .cmpf-step.is-done .cmpf-fill{clip-path:inset(0 0 0 0)}
.cmpf--h.cmpf--stack-mobile.cmpf--arrows .cmpf-connector::after{right:-1px;top:50%;transform:translateY(-50%);border-left:var(--cmpf-arrow) solid currentColor;border-top:calc(var(--cmpf-arrow)*.7) solid transparent;border-bottom:calc(var(--cmpf-arrow)*.7) solid transparent}
.cmpf--h.cmpf--stack-mobile.cmpf--arrows .cmpf-line,.cmpf--h.cmpf--stack-mobile.cmpf--arrows .cmpf-fill{right:calc(var(--cmpf-arrow) - 1px)}
}

/* ===== VERTICAL (incl. stacked horizontal) ===== */
.cmpf--v{display:flex;flex-direction:column;gap:var(--cmpf-row-gap)}
.cmpf--v > .cmpf-step{display:flex;flex-direction:row;align-items:flex-start;gap:var(--cmpf-content-gap)}
.cmpf--v .cmpf-marker-wrap{flex:0 0 var(--cmpf-m);width:var(--cmpf-m);align-self:stretch;justify-content:center;align-items:flex-start;margin:0}
.cmpf--v .cmpf-content{flex:1 1 auto;text-align:left;padding-top:var(--cmpf-voffset)}
.cmpf--v .cmpf-connector{left:calc(50% - var(--cmpf-line)/2);width:var(--cmpf-line);top:calc(var(--cmpf-m) + var(--cmpf-inner));bottom:calc(var(--cmpf-inner) - var(--cmpf-row-gap));height:auto}
.cmpf--v .cmpf-line,.cmpf--v .cmpf-fill{top:0;bottom:0;left:0;width:0;height:auto;border-left-width:var(--cmpf-line)}
.cmpf--v .cmpf-fill{clip-path:inset(0 0 100% 0)}
.cmpf--v .cmpf-step.is-done .cmpf-fill{clip-path:inset(0 0 0 0)}
.cmpf--v.cmpf--arrows .cmpf-connector::after{bottom:-1px;left:50%;transform:translateX(-50%);border-top:var(--cmpf-arrow) solid currentColor;border-left:calc(var(--cmpf-arrow)*.7) solid transparent;border-right:calc(var(--cmpf-arrow)*.7) solid transparent}
.cmpf--v.cmpf--arrows .cmpf-line,.cmpf--v.cmpf--arrows .cmpf-fill{bottom:calc(var(--cmpf-arrow) - 1px)}
@media (max-width:1024px){
.cmpf--h.cmpf--stack-tablet{display:flex;flex-direction:column;gap:var(--cmpf-row-gap)}
.cmpf--h.cmpf--stack-tablet > .cmpf-step{display:flex;flex-direction:row;align-items:flex-start;gap:var(--cmpf-content-gap)}
.cmpf--h.cmpf--stack-tablet .cmpf-marker-wrap{flex:0 0 var(--cmpf-m);width:var(--cmpf-m);align-self:stretch;justify-content:center;align-items:flex-start;margin:0}
.cmpf--h.cmpf--stack-tablet .cmpf-content{flex:1 1 auto;text-align:left;padding-top:var(--cmpf-voffset)}
.cmpf--h.cmpf--stack-tablet .cmpf-connector{left:calc(50% - var(--cmpf-line)/2);width:var(--cmpf-line);top:calc(var(--cmpf-m) + var(--cmpf-inner));bottom:calc(var(--cmpf-inner) - var(--cmpf-row-gap));height:auto}
.cmpf--h.cmpf--stack-tablet .cmpf-line,.cmpf--h.cmpf--stack-tablet .cmpf-fill{top:0;bottom:0;left:0;width:0;height:auto;border-left-width:var(--cmpf-line)}
.cmpf--h.cmpf--stack-tablet .cmpf-fill{clip-path:inset(0 0 100% 0)}
.cmpf--h.cmpf--stack-tablet .cmpf-step.is-done .cmpf-fill{clip-path:inset(0 0 0 0)}
.cmpf--h.cmpf--stack-tablet.cmpf--arrows .cmpf-connector::after{bottom:-1px;left:50%;transform:translateX(-50%);border-top:var(--cmpf-arrow) solid currentColor;border-left:calc(var(--cmpf-arrow)*.7) solid transparent;border-right:calc(var(--cmpf-arrow)*.7) solid transparent}
.cmpf--h.cmpf--stack-tablet.cmpf--arrows .cmpf-line,.cmpf--h.cmpf--stack-tablet.cmpf--arrows .cmpf-fill{bottom:calc(var(--cmpf-arrow) - 1px)}
}
@media (max-width:767px){
.cmpf--h.cmpf--stack-mobile{display:flex;flex-direction:column;gap:var(--cmpf-row-gap)}
.cmpf--h.cmpf--stack-mobile > .cmpf-step{display:flex;flex-direction:row;align-items:flex-start;gap:var(--cmpf-content-gap)}
.cmpf--h.cmpf--stack-mobile .cmpf-marker-wrap{flex:0 0 var(--cmpf-m);width:var(--cmpf-m);align-self:stretch;justify-content:center;align-items:flex-start;margin:0}
.cmpf--h.cmpf--stack-mobile .cmpf-content{flex:1 1 auto;text-align:left;padding-top:var(--cmpf-voffset)}
.cmpf--h.cmpf--stack-mobile .cmpf-connector{left:calc(50% - var(--cmpf-line)/2);width:var(--cmpf-line);top:calc(var(--cmpf-m) + var(--cmpf-inner));bottom:calc(var(--cmpf-inner) - var(--cmpf-row-gap));height:auto}
.cmpf--h.cmpf--stack-mobile .cmpf-line,.cmpf--h.cmpf--stack-mobile .cmpf-fill{top:0;bottom:0;left:0;width:0;height:auto;border-left-width:var(--cmpf-line)}
.cmpf--h.cmpf--stack-mobile .cmpf-fill{clip-path:inset(0 0 100% 0)}
.cmpf--h.cmpf--stack-mobile .cmpf-step.is-done .cmpf-fill{clip-path:inset(0 0 0 0)}
.cmpf--h.cmpf--stack-mobile.cmpf--arrows .cmpf-connector::after{bottom:-1px;left:50%;transform:translateX(-50%);border-top:var(--cmpf-arrow) solid currentColor;border-left:calc(var(--cmpf-arrow)*.7) solid transparent;border-right:calc(var(--cmpf-arrow)*.7) solid transparent}
.cmpf--h.cmpf--stack-mobile.cmpf--arrows .cmpf-line,.cmpf--h.cmpf--stack-mobile.cmpf--arrows .cmpf-fill{bottom:calc(var(--cmpf-arrow) - 1px)}
}

/* vertical: line on right */
.cmpf--v.cmpf--vs-right > .cmpf-step{flex-direction:row-reverse}
.cmpf--v.cmpf--vs-right .cmpf-content{text-align:right}

/* vertical: zigzag timeline (tablet & desktop) */
@media (min-width:768px){
  .cmpf--v.cmpf--vs-zigzag > .cmpf-step{display:grid;grid-template-columns:minmax(0,1fr) var(--cmpf-m) minmax(0,1fr);column-gap:var(--cmpf-content-gap);align-items:start}
  .cmpf--v.cmpf--vs-zigzag .cmpf-marker-wrap{grid-column:2;grid-row:1}
  .cmpf--v.cmpf--vs-zigzag > .cmpf-step:nth-child(odd) .cmpf-content{grid-column:3;grid-row:1;text-align:left}
  .cmpf--v.cmpf--vs-zigzag > .cmpf-step:nth-child(even) .cmpf-content{grid-column:1;grid-row:1;text-align:right}
  .cmpf--v.cmpf--vs-zigzag.cmpf--zz-left > .cmpf-step:nth-child(odd) .cmpf-content{grid-column:1;text-align:right}
  .cmpf--v.cmpf--vs-zigzag.cmpf--zz-left > .cmpf-step:nth-child(even) .cmpf-content{grid-column:3;text-align:left}
  .cmpf--v.cmpf--vs-zigzag.cmpf--entrance.cmpf-ready > .cmpf-step:nth-child(odd):not(.is-in){transform:translateX(24px)}
  .cmpf--v.cmpf--vs-zigzag.cmpf--entrance.cmpf-ready > .cmpf-step:nth-child(even):not(.is-in){transform:translateX(-24px)}
}

