@layer components{.step-icon{flex:none;width:1.5em;height:1.5em}.timeline{--timeline-marker:3rem;--timeline-rail:.1875rem;--timeline-marker-top:var(--space-3);gap:var(--space-8);grid-template-columns:minmax(0,1fr);width:100%;display:grid}.timeline_rows{flex-direction:column;width:100%;margin:0;padding:0;list-style:none;display:flex}.timeline_row{grid-template-columns:var(--timeline-marker) minmax(0, 1fr);gap:var(--space-5);padding-bottom:var(--space-7);display:grid;position:relative}.timeline_row:last-child{padding-bottom:0}.timeline_row:before,.timeline_row:after{content:"";top:0;bottom:0;left:calc(var(--timeline-marker) / 2 - var(--timeline-rail) / 2);width:var(--timeline-rail);border-radius:var(--radius-round);position:absolute}.timeline_row:before{background-color:var(--border)}.timeline_row:after{background-color:var(--pillar-accent,var(--brand-500))}.timeline_row:first-child:before,.timeline_row:first-child:after{top:calc(var(--timeline-marker-top) + var(--timeline-marker) / 2)}.timeline_row:last-child:before,.timeline_row:last-child:after{bottom:calc(100% - var(--timeline-marker-top) - var(--timeline-marker) / 2)}.timeline_marker{z-index:1;margin-top:var(--timeline-marker-top);width:var(--timeline-marker);height:var(--timeline-marker);font-size:var(--text-small);font-weight:var(--primary-semibold);color:var(--white);background-color:var(--pillar-accent,var(--brand-500));border-radius:var(--radius-round);align-self:start;place-items:center;display:grid;position:relative}.timeline_marker:not(:has(svg)){background-color:var(--teal-950);border:2px solid var(--pillar-accent,var(--brand-500))}.timeline_card{gap:var(--space-2);padding:var(--space-6);background-color:var(--background-2);border:var(--border-width) solid color-mix(in lab, var(--pillar-border,var(--border)) 60%, transparent);border-radius:var(--radius-main);flex-direction:column;display:flex}.timeline_title{font-family:var(--primary-family);font-size:var(--h4);font-weight:var(--primary-semibold);line-height:var(--line-height-medium)}.timeline_body{max-width:68ch;font-size:var(--text-small);color:var(--text-muted)}.timeline.is-plain{--timeline-marker:5rem;--timeline-rail:.0625rem;--timeline-marker-top:0}.timeline.is-plain .timeline_row{gap:var(--space-5);padding-left:var(--space-5);padding-bottom:var(--space-8)}.timeline.is-plain .timeline_track{position:relative}.timeline.is-plain .timeline_row:before,.timeline.is-plain .timeline_row:after{display:none}.timeline_rail{width:var(--timeline-rail);background-color:var(--border);border-radius:var(--radius-round);position:absolute;top:0;bottom:0;left:0}.timeline_rail_fill{width:100%;height:calc(var(--rail-progress,0) * 100%);background-color:var(--pillar-accent,var(--brand-500));border-radius:inherit;position:absolute;top:0;left:0}.timeline_dot{left:50%;top:calc(var(--rail-progress,0) * 100%);background-color:var(--pillar-accent,var(--brand-500));border-radius:var(--radius-round);width:.625rem;height:.625rem;opacity:var(--rail-shown,0);transition:opacity .2s;position:absolute;transform:translate(-50%,-50%)}.timeline.is-plain .timeline_row:before,.timeline.is-plain .timeline_row:after{left:0}.timeline.is-plain .timeline_row:first-child:before,.timeline.is-plain .timeline_row:first-child:after{top:0}.timeline.is-plain .timeline_row:last-child:before,.timeline.is-plain .timeline_row:last-child:after{bottom:0}.timeline.is-plain .timeline_marker{width:auto;height:auto;font-family:var(--primary-family);font-size:clamp(3.25rem,6vw,4.75rem);font-weight:var(--primary-semibold);color:color-mix(in lab, var(--text) 30%, transparent);background-color:#0000;border:0;border-radius:0;place-items:start;line-height:.9}.timeline.is-plain .timeline_card{background-color:#0000;border:0;border-radius:0;padding:0}.timeline.is-plain .timeline_title{font-size:var(--h4)}.timeline.is-plain .timeline_body{max-width:52ch}.timeline[data-animate]{& .timeline_row:after{transform-origin:top;transition:transform .7s ease-out .12s;transform:scaleY(0)}& .timeline_card{opacity:0;transition:opacity .5s ease-out 80ms,transform .5s ease-out 80ms;transform:translateY(.75rem)}& .timeline_row[data-shown]{&:after{transform:scaleY(1)}& .timeline_card{opacity:1;transform:none}}}@media (width<48rem){.timeline{--timeline-marker:2.5rem}.timeline_row{gap:var(--space-4)}}@media (width>=64rem){.timeline.has-aside{gap:var(--site-gutter);grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}.timeline_aside{top:calc(var(--nav-height) + var(--space-6));position:sticky}}}
