:where(.pv){
  --pv-w-line:3px;
  --pv-w-node:12px;
  --pv-w-lift:0 12px 24px -18px rgba(14,14,56,.5);   
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) :where(.pv){ --pv-w-lift:0 12px 24px -16px rgba(0,0,0,.85) } }
:root[data-theme="dark"] :where(.pv){ --pv-w-lift:0 12px 24px -16px rgba(0,0,0,.85) }







:where(.pv) .pvw-steps{position:relative; --pv-w-x:-28px}
@media (max-width:1239px){ :where(.pv) .pvw-steps{--pv-w-x:-22px} }
@media (max-width:1099px){ :where(.pv) .pvw-steps{padding-left:34px; --pv-w-x:6px} }

:where(.pv) .pvw-rail,
:where(.pv) .pvw-node,
:where(.pv) .pvw-tip{position:absolute; top:0; pointer-events:none}
:where(.pv) .pvw-rail{left:calc(var(--pv-w-x) - var(--pv-w-line) / 2); width:var(--pv-w-line); background:var(--pv-hair)}
:where(.pv) .pvw-fill{position:absolute; inset:0; background:var(--pv-accent); transform:scaleY(0); transform-origin:center top}
:where(.pv) .pvw-node,
:where(.pv) .pvw-tip{left:calc(var(--pv-w-x) - var(--pv-w-node) / 2); width:var(--pv-w-node); height:var(--pv-w-node); border-radius:var(--pv-radius)}
:where(.pv) .pvw-node{z-index:1; background:var(--pv-paper); border:2px solid var(--pv-rule);
  transition:background-color 250ms var(--pv-ease), border-color 250ms var(--pv-ease)}
:where(.pv) .pvw-node.is-lit{background:var(--pv-accent); border-color:var(--pv-accent); animation:pv-hww-pop 420ms var(--pv-ease)}

:where(.pv) .pvw-tip{z-index:2; background:var(--pv-accent); opacity:0;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pv-accent) 22%, transparent);
  transition:opacity 200ms var(--pv-ease)}
:where(.pv) .pvw-tip.is-on{opacity:1}


:where(.pv) .pvw-node::after{content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pv-accent) 22%, transparent); opacity:0; transition:opacity 200ms var(--pv-ease)}
:where(.pv) .pvw-node.is-ring::after{opacity:1}





:where(.pv) .pvw-steps .split-txt{position:relative}
:where(.pv) .pvw-steps .split-txt::before{content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--pv-accent); transform:scaleX(0); transform-origin:left center;
  transition:transform 700ms var(--pv-ease)}
:where(.pv) .pvw-steps .step.is-lit .split-txt::before{transform:scaleX(1)}
:where(.pv) .pvw-steps .split-txt > *{transition:opacity 500ms var(--pv-ease), transform 500ms var(--pv-ease), color 450ms var(--pv-ease)}



:where(.pv) .pvw-steps .step-n,
:where(.pv) .pvw-steps .step-h,
:where(.pv) .pvw-steps .step-p{color:var(--pv-body)}
:where(.pv) .pvw-steps .step.is-lit .step-n{color:var(--pv-accent)}
:where(.pv) .pvw-steps .step.is-lit .step-h{color:var(--pv-ink)}
:where(.pv) .pvw-steps .step.is-lit .step-p{color:var(--pv-body)}

@keyframes pv-hww-pop{0%{transform:scale(1)} 45%{transform:scale(1.4)} 100%{transform:scale(1)}}





:where(.pv) .pvw-stages{position:relative}
:where(.pv) .pvw-stages .stage .cost{background:var(--pv-band); border-top:2px solid var(--pv-accent);
  border-radius:var(--pv-radius); padding:12px 14px 14px}
@media (max-width:900px){ :where(.pv) .pvw-stages .stage .cost{margin-top:2px} }



:where(.pv) .pvw-stages.is-armed .stages::before,
:where(.pv) .pvw-stages.is-armed .stages::after{left:var(--pv-w-a); right:auto; width:var(--pv-w-len);
  top:calc(var(--pv-w-node) / 2 - var(--pv-w-line) / 2); height:var(--pv-w-line)}
@media (max-width:900px){
  :where(.pv) .pvw-stages.is-armed .stages::before,
  :where(.pv) .pvw-stages.is-armed .stages::after{left:calc(var(--pv-w-node) / 2 - var(--pv-w-line) / 2); width:var(--pv-w-line);
    top:var(--pv-w-a); bottom:auto; height:var(--pv-w-len)}
}
:where(.pv) .pvw-stages .pvw-tip{left:0; transition:opacity 200ms var(--pv-ease), transform 300ms var(--pv-ease)}

:where(.pv) .pvw-stages.is-armed .stages::after{transition:transform 300ms var(--pv-ease)}






:where(.pv) .pvw-stages.is-armed .stage .n,
:where(.pv) .pvw-stages.is-armed .stage h3{color:var(--pv-body); transition:color 450ms var(--pv-ease) 150ms}
:where(.pv) .pvw-stages .stage[data-on] .n{color:var(--pv-accent)}
:where(.pv) .pvw-stages .stage[data-on] h3{color:var(--pv-ink)}

:where(.pv) .pvw-stages.is-armed .stage[data-on] .node{animation:pv-hww-pop 420ms var(--pv-ease) 150ms; transition-delay:150ms}
:where(.pv) .pvw-stages.is-armed .stage .cost{opacity:0; transform:translateY(var(--pv-rise)); box-shadow:none;
  transition:opacity 500ms var(--pv-ease), transform 500ms var(--pv-ease), box-shadow 700ms var(--pv-ease)}
:where(.pv) .pvw-stages.is-armed .stage.is-held .cost{opacity:1; transform:none; box-shadow:var(--pv-w-lift); transition-delay:180ms}


@media (prefers-reduced-motion:reduce){
  :where(.pv) .pvw-fill{transform:none}
  :where(.pv) .pvw-tip{display:none}
  :where(.pv) .pvw-node.is-lit,
  :where(.pv) .pvw-stages.is-armed .stage[data-on] .node{animation:none}
  :where(.pv) .pvw-steps .split-txt::before,
  :where(.pv) .pvw-steps .split-txt > *,
  :where(.pv) .pvw-stages .stage .cost{transition:none}
}



:where(.pv) .hero-sub h1{text-wrap:pretty}   


@media print{
  :where(.pv) .pvw-rail,:where(.pv) .pvw-node,:where(.pv) .pvw-tip{display:none}
  :where(.pv) .pvw-steps{padding-left:0}
  :where(.pv) .pvw-steps .step-n{color:var(--pv-accent)}
  :where(.pv) .pvw-steps .step-h{color:var(--pv-ink)}
  :where(.pv) .pvw-steps .step-p{color:var(--pv-body)}
  :where(.pv) .pvw-stages.is-armed .stage .cost{opacity:1; transform:none}
}