.how-root{padding-block:clamp(6rem,13vw,12rem)}.how-grid{gap:3.5rem 2.5rem;display:grid}.how-live,.how-rail{display:none}.how-steps{gap:4.5rem;display:grid}.how-step{gap:2rem;display:grid}.how-grid>*,.how-steps>*,.how-step>*{min-width:0}.how-h2{font-size:clamp(2rem,4.4vw,4.25rem)}@media (min-width:1024px){.how-step{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:2.5rem}}@media (min-width:1024px) and (min-height:700px){.how-root:not(.is-static){height:100vh;padding-block:calc(var(--nav-h) + 2rem) 2rem;overflow:hidden}.how-root:not(.is-static) .how-grid{grid-template:"header live""steps live"minmax(0,1fr)/minmax(0,5fr) minmax(0,7fr);gap:0 2.5rem;height:100%}.how-root:not(.is-static) .how-header{grid-area:header}.how-root:not(.is-static) .how-h2{font-size:clamp(1.875rem,min(3.4vw,6vh),3.5rem)}.how-root:not(.is-static) .how-steps{grid-area:steps;align-self:start;gap:0;margin-top:clamp(1.75rem,5vh,3.5rem)}.how-root:not(.is-static) .how-live{grid-area:live;justify-content:flex-end;align-items:center;min-height:0;display:flex}.how-root:not(.is-static) .how-frozen{display:none}.how-root:not(.is-static) .how-step{padding:.95rem 0 .95rem 1.6rem;display:block;position:relative}.how-root:not(.is-static) .how-rail{background:var(--line);width:1px;display:block;position:absolute;top:0;bottom:0;left:0}.how-root:not(.is-static) .how-rail>span{transform-origin:top;background:var(--signal-hi);height:100%;display:block;transform:scaleY(0)}.how-root:not(.is-static) .how-title,.how-root:not(.is-static) .how-tag{transition:color .9s cubic-bezier(.16,1,.3,1)}.how-root:not(.is-static) .how-step[data-active=false] .how-title{color:var(--dim)}.how-root:not(.is-static) .how-step[data-active=true] .how-tag{color:var(--signal-hi)}.how-root:not(.is-static) .how-body{opacity:0;grid-template-rows:0fr;transition:grid-template-rows .9s cubic-bezier(.16,1,.3,1),opacity .6s cubic-bezier(.16,1,.3,1);display:grid}.how-root:not(.is-static) .how-body>div{min-height:0;overflow:hidden}.how-root:not(.is-static) .how-step[data-active=true] .how-body{opacity:1;grid-template-rows:1fr}}@keyframes how-caret{0%,49%{opacity:1}50%,to{opacity:0}}.how-caret{animation:1s step-end infinite how-caret}
