.how-it-works { --color-section-accent: var(--color-trusted); --space-how-it-works-sticky-top: 140px; --space-how-it-works-card-entry-gap: 24px; --space-how-it-works-viewport-bottom: 20px; --space-how-it-works-scroll-end-hold: 36px; --size-how-it-works-desktop-card: 409px; --space-how-it-works-desktop-card-padding: 40px; --space-how-it-works-desktop-stack-offset: 125px; }
.how-it-works__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 862px); gap: 60px; align-items: start; }
.how-it-works__intro { position: sticky; top: var(--space-how-it-works-sticky-top); display: flex; flex-direction: column; align-items: flex-start; gap: 44px; padding-top: 3px; }
.how-it-works__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.how-it-works__heading > .title { white-space: nowrap; }
.how-it-works__cta { margin-top: 0; }
.how-it-works__steps { --how-stack-hold: 240px; block-size: calc(1900px + var(--how-stack-hold)); }
.how-it-works__stack { position: sticky; top: var(--space-how-it-works-sticky-top); block-size: var(--size-how-it-works-runtime-stack, min(904px, calc(100svh - var(--space-how-it-works-sticky-top) - var(--space-how-it-works-viewport-bottom)))); min-block-size: calc(var(--size-how-it-works-desktop-card) + var(--space-how-it-works-desktop-stack-offset) + var(--space-how-it-works-desktop-stack-offset) + var(--space-how-it-works-desktop-stack-offset)); overflow: visible; margin: 0; padding: 0; list-style: none; }
.how-it-works__step { position: absolute; inset-inline: 0; top: var(--how-step-offset); display: flex; min-block-size: var(--size-how-it-works-desktop-card); flex-direction: column; justify-content: space-between; padding: var(--space-how-it-works-desktop-card-padding); border-radius: 32px; color: var(--color-white); box-shadow: 0 0 0 1px var(--color-process-outline); transform: translate3d(0, var(--how-step-translate-y, 0), 0); will-change: transform; }
.how-it-works__step:last-child { margin-bottom: 0; }
.how-it-works__step:nth-child(1) { --how-step-offset: 0px; z-index: 1; }
.how-it-works__step:nth-child(2) { --how-step-offset: var(--space-how-it-works-desktop-stack-offset); z-index: 2; }
.how-it-works__step:nth-child(3) { --how-step-offset: calc(var(--space-how-it-works-desktop-stack-offset) + var(--space-how-it-works-desktop-stack-offset)); z-index: 3; }
.how-it-works__step:nth-child(4) { --how-step-offset: calc(var(--space-how-it-works-desktop-stack-offset) + var(--space-how-it-works-desktop-stack-offset) + var(--space-how-it-works-desktop-stack-offset)); z-index: 4; }
.how-it-works__step--light { background: var(--color-audit-card); color: var(--color-text); }
.how-it-works__step--mid { background: var(--color-process-mid); }
.how-it-works__step--dark { background: var(--color-trusted); }
.how-it-works__step--darkest { background: var(--color-process-darkest); }
.how-it-works__step-header, .how-it-works__step-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.how-it-works__step-title, .how-it-works__step-number, .how-it-works__step-description { margin: 0; }
.how-it-works__step-title, .how-it-works__step-number { font-size: 32px; font-weight: var(--fw-bold); line-height: 1; text-transform: uppercase; }
.how-it-works__step-title { max-width: calc(100% - 80px); }
.how-it-works__step-number { flex: none; }
.how-it-works__step-description { max-width: 680px; font-size: 20px; font-weight: var(--fw-semibold); line-height: 1.15; }
.how-it-works__step-icon { flex: none; inline-size: 44px; block-size: 44px; }
.how-it-works[data-how-ready] .how-it-works__step:not(.is-visible) { visibility: hidden; pointer-events: none; }

@media (min-width: 1024px) and (max-height: 943px) {
  .how-it-works { --space-how-it-works-desktop-card-padding: clamp(24px, 4svh, 40px); --space-how-it-works-desktop-stack-offset: clamp(70px, calc(24.8svh - 109px), 125px); --size-how-it-works-desktop-card: clamp(260px, calc(100svh - var(--space-how-it-works-sticky-top) - var(--space-how-it-works-viewport-bottom) - var(--space-how-it-works-desktop-stack-offset) - var(--space-how-it-works-desktop-stack-offset) - var(--space-how-it-works-desktop-stack-offset)), 409px); }
}

@media (max-width: 1023px) {
  .how-it-works { --size-how-it-works-mobile-card: 174px; --space-how-it-works-mobile-stack-offset: 46px; --size-how-it-works-mobile-final-stack: calc(var(--size-how-it-works-mobile-card) + var(--space-how-it-works-mobile-stack-offset) + var(--space-how-it-works-mobile-stack-offset) + var(--space-how-it-works-mobile-stack-offset)); --space-how-it-works-scroll-end-hold: 100px; --size-how-it-works-mobile-scroll-area: 1080px; --space-how-it-works-sticky-top-mobile: calc(var(--size-header-compact) + 20px); --space-how-it-works-mobile-viewport-bottom: 20px; padding-block: 80px; }
  .how-it-works__layout { display: flex; flex-direction: column; gap: 44px; }
  .how-it-works__intro { position: static; width: 100%; align-items: center; gap: 24px; padding: 0; text-align: center; }
  .how-it-works__heading { align-items: center; gap: 16px; }
  .how-it-works__heading > .title { white-space: normal; }
  .how-it-works__cta { height: 44px; margin-top: 0; padding-inline: 24px; font-size: 14px; }
  .how-it-works__steps { position: relative; width: 100%; block-size: calc(100svh + var(--size-how-it-works-mobile-scroll-area)); margin-block-end: min(0px, calc(var(--size-how-it-works-mobile-final-stack) + var(--space-how-it-works-sticky-top-mobile) + var(--space-how-it-works-mobile-viewport-bottom) - 100svh)); }
  .how-it-works__stack { position: sticky; top: var(--space-how-it-works-sticky-top-mobile); block-size: calc(100svh - var(--space-how-it-works-sticky-top-mobile) - var(--space-how-it-works-mobile-viewport-bottom)); min-block-size: var(--size-how-it-works-mobile-final-stack); margin: 0; }
  .how-it-works__step { position: absolute; inset-inline: 0; top: var(--how-mobile-stack-offset); block-size: var(--size-how-it-works-mobile-card); min-block-size: var(--size-how-it-works-mobile-card); margin: 0; padding: 20px; border-radius: 20px; opacity: 1; }
  .how-it-works__step:nth-child(1) { --how-mobile-stack-offset: 0px; z-index: 1; }
  .how-it-works__step:nth-child(2) { --how-mobile-stack-offset: var(--space-how-it-works-mobile-stack-offset); z-index: 2; }
  .how-it-works__step:nth-child(3) { --how-mobile-stack-offset: calc(var(--space-how-it-works-mobile-stack-offset) + var(--space-how-it-works-mobile-stack-offset)); z-index: 3; }
  .how-it-works__step:nth-child(4) { --how-mobile-stack-offset: calc(var(--space-how-it-works-mobile-stack-offset) + var(--space-how-it-works-mobile-stack-offset) + var(--space-how-it-works-mobile-stack-offset)); z-index: 4; }
  .how-it-works__step-header { display: flex; width: 247px; flex-direction: column; gap: 10px; }
  .how-it-works__step-number { order: -1; font-size: 16px; line-height: 1; }
  .how-it-works__step-title { max-width: none; font-size: 16px; line-height: 1.05; }
  .how-it-works__step-footer { display: block; width: 100%; }
  .how-it-works__step-description { max-width: none; font-size: 14px; line-height: 1.25; }
  .how-it-works__step-icon { position: absolute; inset-inline-end: 20px; inset-block-end: 20px; inline-size: 20px; block-size: 20px; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .how-it-works__steps { block-size: auto; margin-block-end: 0; }
  .how-it-works__stack { position: static; block-size: auto; }
  .how-it-works__step { position: relative; top: auto; margin-bottom: -128px; }
  .how-it-works__step:last-child { margin-bottom: 0; }
}