.hww-steps{row-gap:1rem;display:grid;position:relative}.hww-step{grid-template-columns:3rem minmax(0,1fr);align-items:center;column-gap:1rem;display:grid;position:relative}.hww-step:not(:last-child):before{content:"";background-color:var(--color-royal);width:2px;height:calc(100% + 1rem);position:absolute;top:50%;left:calc(1.5rem - 1px)}.hww-dot{z-index:1;background-color:var(--color-royal);width:3rem;height:3rem;color:var(--color-white);font-variant-numeric:tabular-nums;border-radius:9999px;place-items:center;font-size:.875rem;font-weight:600;line-height:1;display:grid;position:relative}@container hww (min-width:72rem){.hww-steps{--hww-gap:1rem;--hww-inset:calc((100% - 7 * var(--hww-gap)) / 16);column-gap:var(--hww-gap);grid-template-columns:repeat(8,minmax(0,1fr))}.hww-step{grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);place-items:stretch center;row-gap:1rem}.hww-step:not(:last-child):before{display:none}.hww-steps:before,.hww-steps:after{content:"";top:calc(1.5rem - 1px);left:var(--hww-inset);right:var(--hww-inset);border-radius:9999px;height:2px;position:absolute}.hww-steps:before{background-color:#0755b52e}.hww-steps:after{background-color:var(--color-royal);transform-origin:0}}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){@container hww (min-width:72rem){.hww-steps{view-timeline:--hww block;view-timeline-inset:0% 5%}.hww-steps:after{animation:linear both hww-fill;animation-timeline:--hww;animation-range:entry-crossing entry-crossing 92%}.hww-dot{animation:linear both hww-dot-fill;animation-timeline:--hww;animation-range:entry-crossing calc(var(--step) * 13.143%) entry-crossing calc(var(--step) * 13.143% + 8%)}}}@supports not (animation-timeline:view()){@container hww (min-width:72rem){[data-reveal=pending]>.hww-steps:after{scale:0 1}[data-reveal=shown]>.hww-steps:after{transition:scale .9s var(--ease-in-out)}[data-reveal=pending]>.hww-steps .hww-dot{background-color:var(--color-white);color:var(--color-royal);box-shadow:inset 0 0 0 2px #0755b540}[data-reveal=shown]>.hww-steps .hww-dot{animation:hww-pop .4s var(--ease-out) both;animation-delay:calc(var(--step) * .12s);transition:background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);transition-delay:calc(var(--step) * .12s)}}}}@keyframes hww-fill{0%{scale:0 1}}@keyframes hww-dot-fill{0%{background-color:var(--color-white);color:var(--color-royal);scale:1;box-shadow:inset 0 0 0 2px #0755b540}10%{background-color:var(--color-royal);color:var(--color-white);box-shadow:inset 0 0 0 2px var(--color-royal)}45%{scale:1.08}to{background-color:var(--color-royal);color:var(--color-white);box-shadow:inset 0 0 0 2px var(--color-royal);scale:1}}@keyframes hww-pop{50%{scale:1.08}}