@layer component{.roadmap{--b-max: 72rem;--b-px: var(--s-section-pad-x, var(--s-space-xl, var(--s-space-md, 1rem)));--b-py: 0;--b-gap: var(--s-block-gap-md, var(--s-stack-md, var(--s-space-lg, 1.25rem)));--rm-align: center;--rm-content-pad: var(--s-card-pad-sm, var(--s-space-sm, var(--s-space-sm, .75rem))) var(--s-card-pad-md, var(--s-space-md, var(--s-space-lg, 1.25rem)));padding-block:var(--b-py);min-width:0}.roadmap__title{margin:0 0 var(--s-stack-lg, var(--s-space-lg, var(--s-space-lg, 1.5rem)))}.roadmap__list{max-width:var(--b-max);margin-inline:auto;padding-inline:var(--b-px);display:grid;gap:var(--b-gap);width:100%;box-sizing:border-box;min-width:0}.roadmap__item{min-width:0}.roadmap__item:first-child{--rm-cursor-offset: 14px}.roadmap__item[data-last=true] .rm-step.is-locked .rm-step__bar-light{opacity:0;filter:blur(8px);transform:translate(-50%,var(--cursor-y)) scale(.85);transition:opacity .26s ease,filter .26s ease,transform .26s ease;animation:none!important}.roadmap__item[data-last=true] .rm-step.is-locked .rm-step__bar-light:before,.roadmap__item[data-last=true] .rm-step.is-locked .rm-step__bar-light:after{opacity:0}}@layer component{.rm-step{--roadmap-step-progress: 0;--roadmap-step-rail-h: 1rem;--roadmap-step-rail-w: 1px;--roadmap-step-accent: var(--rm-accent, var(--s-accent));--roadmap-step-accent-20: color-mix(in srgb, var(--roadmap-step-accent) 20%, transparent);--roadmap-step-accent-40: color-mix(in srgb, var(--roadmap-step-accent) 40%, transparent);--roadmap-step-cursor-h: 40px;--roadmap-step-cursor-w: 8px;--roadmap-step-cursor-color: var(--roadmap-step-accent);--roadmap-step-cursor-glow: var(--roadmap-step-accent-20);--roadmap-step-cursor-offset: 0px;--roadmap-step-cursor-offset-ext: 0px;--roadmap-step-num-col: 4.5rem;--roadmap-step-align: start;--roadmap-step-num-size: clamp(42px, 9vw, 66px);--roadmap-step-rail-bg: linear-gradient(to bottom, var(--s-overlay-15), var(--s-overlay-5));--roadmap-step-rail-opacity: .95;--roadmap-step-puck-inset: inset 0 0 0 1px var(--s-overlay-25);--roadmap-step-puck-shadow: 0 0 10px 4px var(--roadmap-step-cursor-glow);--roadmap-step-puck-glow: radial-gradient(closest-side, var(--roadmap-step-accent-20) 0, transparent 70%);--roadmap-step-locked-shadow: 0 0 16px 8px var(--roadmap-step-accent-40), 0 0 38px 16px var(--roadmap-step-accent-20), inset 0 0 0 1px var(--s-overlay-40);--roadmap-step-locked-pulse: rmPulse .9s ease-in-out infinite;--roadmap-step-content-pad: 18px 22px;--roadmap-step-title-size: clamp(1rem, 1.1vw + .8rem, 1.35rem);--roadmap-step-title-lh: 1.2;--roadmap-step-text-lh: 1.6;--roadmap-step-text-opacity: .92;--roadmap-step-ease: cubic-bezier(.22,.72,.16,1);--roadmap-step-num-dur: .18s;--roadmap-step-title-dur: .2s;--roadmap-step-text-dur: .22s;--roadmap-step-puck-dur: .22s;--roadmap-step-rail-h-mobile: clamp(520px, 85vh, 1000px);--p: var(--roadmap-step-progress);--rail-h: var(--roadmap-step-rail-h);--bar-h: var(--rail-h);--rail-w: var(--roadmap-step-rail-w);--cursor-h: var(--roadmap-step-cursor-h);--cursor-w: var(--roadmap-step-cursor-w);--cursor-color: var(--roadmap-step-cursor-color);--cursor-glow: var(--roadmap-step-cursor-glow);--cursor-offset: var(--roadmap-step-cursor-offset);--cursor-y: calc( (var(--bar-h) - var(--cursor-h)) * clamp(0, var(--p), 1) + var(--rm-cursor-offset, var(--roadmap-step-cursor-offset-ext, 0px)) + var(--cursor-offset, 0px) );--num-size: var(--roadmap-step-num-size);display:grid;grid-template-columns:var(--rm-num-col, var(--roadmap-step-num-col, 4.5rem)) 10px minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(12px,2vw,16px) clamp(16px,2vw,22px);align-items:var(--rm-align, var(--roadmap-step-align, start));color:var(--sf-text, var(--surface-text, var(--surface-text)));min-width:0}.rm-step__num{grid-column:1;grid-row:1 / span 2;font-family:var(--s-font-heading, var(--font-family-display, "Funnel Display", sans-serif));font-size:var(--num-size);font-weight:800;line-height:.7;letter-spacing:-1px;text-transform:uppercase;color:var(--roadmap-step-accent);text-shadow:0 1px 18px var(--roadmap-step-accent-20);transform:perspective(1200px) translateY(calc((1 - clamp(0,var(--p),1))*14px)) rotateX(calc((1 - clamp(0,var(--p),1))*18deg));will-change:transform;transition:transform var(--roadmap-step-num-dur, .18s) var(--roadmap-step-ease, cubic-bezier(.22,.72,.16,1))}.rm-step__bar{grid-column:2;grid-row:1 / span 2;position:relative;width:22px;height:var(--bar-h);overflow:visible;isolation:isolate;border-radius:999px;opacity:.85;min-width:0}.rm-step__bar-bg{position:absolute;top:0;left:50%;width:var(--rail-w);height:100%;transform:translate(-50%);border-radius:999px;background:var(--roadmap-step-rail-bg, linear-gradient(to bottom, var(--s-overlay-15), var(--s-overlay-5)));opacity:var(--roadmap-step-rail-opacity, .95)}.rm-step__bar-fill{display:none}.rm-step__bar-light{position:absolute;top:0;left:50%;width:var(--cursor-w);height:var(--cursor-h);transform:translate(-50%,var(--cursor-y));border-radius:999px;background:var(--cursor-color);box-shadow:var(--roadmap-step-puck-shadow, 0 0 10px 4px var(--cursor-glow)),var(--roadmap-step-puck-inset, inset 0 0 0 1px var(--s-overlay-25));will-change:transform;transition:transform var(--roadmap-step-puck-dur, .22s) var(--roadmap-step-ease, cubic-bezier(.22,.72,.16,1));pointer-events:none}.rm-step__bar-light:before,.rm-step__bar-light:after{content:"";position:absolute;left:50%;transform:translate(-50%);width:150%;height:50%;background:var(--roadmap-step-puck-glow, radial-gradient(closest-side, var(--roadmap-step-accent-20) 0, transparent 70%));opacity:.85;pointer-events:none}.rm-step__bar-light:before{top:-8px}.rm-step__bar-light:after{bottom:-8px}.rm-step.is-locked .rm-step__bar-light{box-shadow:var(--roadmap-step-locked-shadow)}@keyframes rmPulse{0%,to{transform:translate(-50%,var(--cursor-y)) scale(1)}50%{transform:translate(-50%,var(--cursor-y)) scale(1.03)}}.rm-step.is-locked .rm-step__bar-light{animation:var(--roadmap-step-locked-pulse, rmPulse .9s ease-in-out infinite)}.rm-step__content{grid-column:3;grid-row:1 / span 2;position:relative;z-index:1;padding:var(--rm-content-pad, var(--roadmap-step-content-pad, 18px 22px));color:var(--sf-accent, var(--s-accent, inherit));background-clip:padding-box;min-width:0}.rm-step__title{margin:0 0 var(--s-space-xxs, .35rem) 0;font-weight:800;font-size:var(--roadmap-step-title-size, clamp(1rem, 1.1vw + .8rem, 1.35rem));line-height:var(--roadmap-step-title-lh, 1.2);color:var(--sf-text, var(--s-text-1));transform:translateY(calc((1 - clamp(0,calc(var(--p) * 1.1),1))*10px));will-change:transform;transition:transform var(--roadmap-step-title-dur, .2s) var(--roadmap-step-ease, cubic-bezier(.22,.72,.16,1))}.rm-step__text{margin:0;line-height:var(--roadmap-step-text-lh, 1.6);color:var(--sf-text, var(--surface-text));opacity:var(--roadmap-step-text-opacity, .92);transform:translateY(calc((1 - clamp(0,calc(var(--p) * 1.05),1))*10px));will-change:transform;transition:transform var(--roadmap-step-text-dur, .22s) var(--roadmap-step-ease, cubic-bezier(.22,.72,.16,1))}.rm-step.is-locked .rm-step__content{border-color:var(--s-overlay-25);box-shadow:var(--sf-shadow, none),0 0 0 1px var(--s-overlay-10),0 22px 72px #000000b8}@media (max-width: 640px){.rm-step{--rail-h: var(--roadmap-step-rail-h-mobile, clamp(520px, 85vh, 1000px));--bar-h: var(--rail-h)}}@media (prefers-reduced-motion: reduce){.rm-step__bar-light,.rm-step__num,.rm-step__title,.rm-step__text{transition:none!important}.rm-step.is-locked .rm-step__bar-light{animation:none!important}}}@layer component{.roadmap>.text-h3{--roadmap-title-accent: var(--s-accent);--roadmap-title-font: var(--s-font-heading, var(--font-family-display, "Funnel Display", sans-serif));--roadmap-title-size: clamp(1.8rem, 2.5vw, 2.4rem);--roadmap-title-weight: 800;--roadmap-title-lh: 1.2;--roadmap-title-letter: -.02em;--roadmap-title-align: center;--roadmap-title-color: var(--sf-text, var(--s-text-1, var(--surface-text, inherit)));--roadmap-title-mt: var(--s-section-gap-md, var(--s-stack-xl, var(--s-space-xl, 3rem)));--roadmap-title-mb: var(--s-section-gap-sm, var(--s-stack-lg, var(--s-space-lg, 2rem)));--roadmap-title-pad-bottom: var(--s-stack-xs, var(--s-space-sm, .75rem));--roadmap-title-margin: var(--roadmap-title-mt) 0 var(--roadmap-title-mb);--roadmap-title-underline-w: 72px;--roadmap-title-underline-h: 4px;--roadmap-title-underline-mt: var(--s-stack-sm, var(--s-interval-3M, 1rem));--roadmap-title-underline-radius: 2px;--roadmap-title-underline-glow: 12px;--roadmap-title-underline-glow-mix: 80%;--rm-accent: var(--roadmap-title-accent);font-family:var(--roadmap-title-font);font-size:var(--roadmap-title-size);font-weight:var(--roadmap-title-weight);line-height:var(--roadmap-title-lh);letter-spacing:var(--roadmap-title-letter);text-align:var(--roadmap-title-align);color:var(--roadmap-title-color);margin:var(--roadmap-title-margin);padding-bottom:var(--roadmap-title-pad-bottom);position:relative}.roadmap>.text-h3:after{content:"";display:block;width:var(--roadmap-title-underline-w, 72px);height:var(--roadmap-title-underline-h, 4px);margin:var(--roadmap-title-underline-mt, 1rem) auto 0;border-radius:var(--roadmap-title-underline-radius, 2px);background:var(--rm-accent);box-shadow:0 0 var(--roadmap-title-underline-glow, 12px) color-mix(in srgb,var(--rm-accent),transparent var(--roadmap-title-underline-glow-mix, 80%))}}
