@layer components{.tg-steps{--tg-steps-size: 3rem;--tg-steps-gap: clamp(1.75rem, 4vw, 2.75rem);--tg-steps-line: color-mix(in oklab, currentColor 20%, transparent);display: grid;gap: var(--tg-steps-gap);margin: 0;padding: 0;list-style: none}.tg-steps--words{--tg-steps-size: 4.75rem}.tg-section__head + .tg-steps{margin-top: 0}.tg-steps + .tg-btn-row{margin-top: clamp(1.75rem, 4vw, 2.5rem)}.tg-steps__item{position: relative;display: grid;grid-template-columns: var(--tg-steps-size) minmax(0, 1fr);column-gap: clamp(1rem, 2.5vw, 1.5rem);align-items: start}.tg-steps__marker{position: relative;z-index: 1;display: grid;place-items: center;width: var(--tg-steps-size);height: 3rem;border-radius: 999px;background: var(--tg-steps-bg, #111);color: var(--tg-steps-fg, #fff);font-family: var(--font-primary, inherit);font-size: 1.125rem;font-weight: 800;line-height: 1;font-variant-numeric: tabular-nums}.tg-steps__marker--word{padding-inline: 0.4em;font-size: 0.9375rem;text-align: center;overflow-wrap: anywhere}.tg-steps__marker--icon svg{width: 1.25rem;height: 1.25rem;fill: currentColor}.tg-steps__marker--dot{width: 1.125rem;height: 1.125rem;margin: calc((3rem - 1.125rem) / 2) auto 0;box-shadow: 0 0 0 6px color-mix(in oklab, var(--tg-steps-bg, #111) 22%, transparent)}.tg-steps__body{min-width: 0;padding-top: 0.55rem}.tg-steps--boxed .tg-steps__body{padding: 1.25rem 1.5rem 1.4rem;border-radius: var(--tg-card-radius, 1rem);background: color-mix(in oklab, currentColor 6%, transparent)}.tg-steps__img{display: block;width: 100%;height: auto;aspect-ratio: 3 / 2;object-fit: cover;margin-bottom: 1rem;border-radius: calc(var(--tg-card-radius, 1rem) * 0.75)}.tg-steps__title{margin: 0 0 0.5rem;font-family: var(--font-primary, inherit);font-size: clamp(1.125rem, 1.6vw, 1.3125rem);font-weight: 700;line-height: 1.25;color: inherit}.tg-steps__text{line-height: 1.6}.tg-steps__text > *{margin: 0}.tg-steps__text > * + *{margin-top: 0.75em}.tg-steps__go{margin: 0.75rem 0 0}.tg-steps__go a{display: inline-flex;align-items: center;gap: 0.35em;min-height: 1.5rem;font-weight: 700;color: inherit;text-underline-offset: 0.2em}.tg-steps__go svg{width: 0.9em;height: 0.9em;fill: currentColor}.tg-steps__item:not(:last-child)::before, .tg-steps__item:not(:last-child)::after{content: "";position: absolute;top: 3rem;bottom: calc(-1 * var(--tg-steps-gap));left: calc(var(--tg-steps-size) / 2 - 1px);width: 2px}.tg-steps__item:not(:last-child)::before{background: var(--tg-steps-line)}.tg-steps__item:not(:last-child)::after{background: var(--tg-steps-bg, #111);transform-origin: top}.tg-steps:not(.tg-steps--draw) .tg-steps__item::after{content: none}@media (width >= 64rem){.tg-steps--zigzag .tg-steps__item{grid-template-columns: minmax(0, 1fr) var(--tg-steps-size) minmax(0, 1fr);column-gap: clamp(1.5rem, 3vw, 2.5rem)}.tg-steps--zigzag .tg-steps__marker{grid-column: 2;grid-row: 1}.tg-steps--zigzag .tg-steps__img{aspect-ratio: 16 / 9}.tg-steps--zigzag .tg-steps__body{grid-row: 1;grid-column: 3}.tg-steps--zigzag .tg-steps__item:nth-child(odd) .tg-steps__body{grid-column: 1;text-align: end}.tg-steps--zigzag .tg-steps__item:not(:last-child)::before, .tg-steps--zigzag .tg-steps__item:not(:last-child)::after{left: calc(50% - 1px)}}@media (width >= 64rem){.tg-steps--row{grid-auto-flow: column;grid-auto-columns: minmax(0, 1fr);column-gap: var(--tg-steps-gap)}.tg-steps--row .tg-steps__item{grid-template-columns: minmax(0, 1fr);grid-template-rows: auto 1fr;row-gap: 1.25rem}.tg-steps--row .tg-steps__body{padding-top: 0}.tg-steps--row .tg-steps__marker--dot{margin: calc((3rem - 1.125rem) / 2) 0}.tg-steps--row .tg-steps__item:not(:last-child)::before, .tg-steps--row .tg-steps__item:not(:last-child)::after{top: calc(1.5rem - 1px);bottom: auto;left: calc(var(--tg-steps-size) + 0.75rem);right: calc(-1 * var(--tg-steps-gap) + 0.75rem);width: auto;height: 2px}.tg-steps--row .tg-steps__item:not(:last-child)::after{transform-origin: left}.tg-steps--row .tg-steps__marker--dot + .tg-steps__body{margin-top: 0}}@media (prefers-reduced-motion: no-preference){@supports (animation-timeline: view()){.tg-steps--draw .tg-steps__item::after{animation: tg-steps-fill linear both;animation-timeline: view(50% 49.9%);animation-range: cover 0% cover 100%}.tg-steps--draw .tg-steps__marker{animation: tg-steps-light linear both;animation-timeline: view(50% 49.9%);animation-range: cover 0% cover 1%}@media (width >= 64rem){.tg-steps--row.tg-steps--draw .tg-steps__item::after{animation-name: tg-steps-fill-x;animation-timeline: view();animation-range: entry 60% cover 50%}.tg-steps--row.tg-steps--draw .tg-steps__marker{animation-timeline: view();animation-range: entry 70% cover 45%}}}}@keyframes tg-steps-fill{from{scale: 1 0}to{scale: 1 1}}@keyframes tg-steps-fill-x{from{scale: 0 1}to{scale: 1 1}}@keyframes tg-steps-light{from{background: color-mix(in oklab, currentColor 10%, transparent);color: inherit;box-shadow: inset 0 0 0 2px var(--tg-steps-line)}}}