.how-it-works { background: #070707; color: #fff; overflow: hidden; padding: clamp(64px, 8vw, 116px) var(--page-pad-x) clamp(52px, 6vw, 88px); }
.how-it-works__inner { margin: 0 auto; max-width: 1280px; }
.how-it-works__heading { text-align: center; }
.how-it-works__heading-mobile { display: none; }
.how-it-works__heading h2 { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 48px); font-weight: 400; line-height: 1.1; margin: 0; }
.how-it-works__heading p { color: rgba(255,255,255,.7); font-size: 18px; margin: 16px 0 48px; }
.how-it-works__heading .how-it-works__subtitle { color: #fff; font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 28px); line-height: 1.3; margin: 20px 0 0; }
.how-it-works__heading p a { border-bottom: 1px solid transparent; color: inherit; padding-bottom: 3px; text-decoration: none; transition: border-color 160ms ease; }
.how-it-works__heading p a:hover { border-color: currentColor; }
.how-it-works__heading p a:focus-visible { border-color: currentColor; outline: 2px solid var(--color-accent); outline-offset: 4px; }
.how-it-works__viewport { --how-it-works-rail-inset: clamp(96px, 14vw, 280px); margin-left: calc(50% - 50vw); overflow: hidden; width: 100vw; }
.how-it-works__track { --how-it-works-card-width: calc((100vw - var(--how-it-works-rail-inset) - 20px) / 1.8); display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: auto; scrollbar-width: none; scroll-behavior: smooth; touch-action: pan-y; }
.how-it-works__track::-webkit-scrollbar { display: none; }
.how-it-works__track { overflow-y: hidden; }
.how-it-works__rail { flex: 0 0 var(--how-it-works-rail-inset); }
.how-it-works__slide { background: transparent; flex: 0 0 var(--how-it-works-card-width); min-width: 0; overflow: visible; }
.how-it-works__media { aspect-ratio: 1.64; background: #151519; border: 1.167px solid rgba(255,255,255,.09); border-radius: 18px; box-sizing: border-box; overflow: hidden; position: relative; }
.how-it-works__media > img, .how-it-works__media > picture, .how-it-works__video { height: 100%; object-fit: cover; width: 100%; }
.how-it-works__media > picture { display: block; }
.how-it-works__media > picture > img { height: 100%; object-fit: cover; width: 100%; }
.how-it-works__slide[data-how-it-works-slide="1"] .how-it-works__media { background: #27272b; }
.how-it-works__slide[data-how-it-works-slide="1"] .how-it-works__media > picture > img { object-fit: contain; }
.how-it-works__video { filter: brightness(.62) saturate(.82); }
.how-it-works__radar-media { height: 100%; position: relative; }
.how-it-works__radar-overlay { bottom: 8%; display: grid; gap: clamp(20px, 2.8vw, 40px); left: 4%; position: absolute; right: 8%; z-index: 2; }
.how-it-works__radar-item { color: #fff; display: grid; font-size: clamp(13px, 1.25vw, 18px); justify-items: start; text-shadow: 0 1px 8px #000; }
.how-it-works__radar-item img { display: block; height: clamp(28px, 2.8vw, 44px); margin: 0 0 10px; object-fit: contain; width: clamp(28px, 2.8vw, 44px); }
.how-it-works__radar-item strong { font-size: clamp(16px, 1.4vw, 22px); font-weight: 600; line-height: 1.15; }
.how-it-works__radar-item small { display: block; font-size: clamp(12px, 1vw, 15px); font-weight: 400; line-height: 1.35; margin-top: 8px; }
.how-it-works__copy { background: #070707; margin-top: 30px; min-height: 112px; padding: 20px 24px; }
.how-it-works__copy h3 { font-size: clamp(18px, 1.55vw, 24px); font-weight: 500; line-height: 1.15; margin: 0; }
.how-it-works__copy p { color: rgba(255,255,255,.56); font-size: 14px; margin: 10px 0 0; }
.how-it-works__copy-mobile { display: none; }
.how-it-works__controls { align-items: center; display: flex; justify-content: flex-end; margin-top: 18px; gap: 20px; transform: translateX(40px); }
.how-it-works__controls div { display: flex; gap: 8px; }.how-it-works__controls button { background: transparent; border: 0; border-radius: 50%; height: 34px; padding: 0; transition: opacity 160ms ease; width: 34px; }.how-it-works__controls button:hover { opacity: .7; }.how-it-works__controls button img { display: block; height: 100%; width: 100%; }
.how-it-works__pagination { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .how-it-works--reveal-ready .how-it-works__heading,
  .how-it-works--reveal-ready .how-it-works__controls { opacity: 0; transform: translateY(22px); transition: opacity 900ms ease, transform 900ms cubic-bezier(.16, 1, .3, 1); }
  .how-it-works--reveal-ready .how-it-works__media,
  .how-it-works--reveal-ready .how-it-works__copy { opacity: 0; transform: translateY(24px); transition: opacity 1000ms ease, transform 1200ms cubic-bezier(.22, 1, .36, 1); }
  .how-it-works--reveal-ready.how-it-works--revealed .how-it-works__heading,
  .how-it-works--reveal-ready.how-it-works--revealed .how-it-works__controls { opacity: 1; transform: translateY(0); }
  .how-it-works--reveal-ready.how-it-works--revealed .how-it-works__media,
  .how-it-works--reveal-ready.how-it-works--revealed .how-it-works__copy { opacity: 1; transform: translateY(0); }
  .how-it-works__slide:nth-of-type(1) { --how-media-delay: 900ms; --how-copy-delay: 1600ms; }
  .how-it-works__slide:nth-of-type(2) { --how-media-delay: 2300ms; --how-copy-delay: 3000ms; }
  .how-it-works__slide:nth-of-type(3) { --how-media-delay: 3700ms; --how-copy-delay: 4400ms; }
  .how-it-works__slide:nth-of-type(4) { --how-media-delay: 5100ms; --how-copy-delay: 5800ms; }
  .how-it-works--reveal-ready.how-it-works--revealed .how-it-works__media { transition-delay: var(--how-media-delay); }
  .how-it-works--reveal-ready.how-it-works--revealed .how-it-works__copy { transition-delay: var(--how-copy-delay); }
  .how-it-works--reveal-ready.how-it-works--revealed .how-it-works__controls { transition-delay: 1400ms; }
}
@media (min-width: 768px) {
  .how-it-works { padding-bottom: clamp(36px, 4.5vw, 72px); padding-top: clamp(48px, 6.5vw, 96px); }
  .how-it-works__copy { border-top: 1px solid rgba(255,255,255,.16); margin-right: -20px; padding: 32px 24px 20px; }
}
@media (max-width: 767px) {
  .how-it-works { padding: 56px 0 48px; }
  .how-it-works__inner { max-width: none; }
  .how-it-works__heading { padding: 0 var(--page-pad-x); text-align: left; }
  .how-it-works__heading h2 { font-size: 32px; }
  .how-it-works__heading-desktop { display: none; }
  .how-it-works__heading-mobile { display: inline; }
  .how-it-works__heading p { display: block; font-size: 14px; margin: 12px 0 0; }
  .how-it-works__heading .how-it-works__subtitle { font-size: 18px; margin: 14px 0 0; }
  .how-it-works__viewport { --how-it-works-rail-inset: var(--page-pad-x); margin-top: 64px; }
  .how-it-works__track { --how-it-works-card-width: min(76vw, 350px); gap: 12px; overflow-y: clip; overscroll-behavior-x: contain; scroll-snap-type: x proximity; touch-action: pan-x pan-y; }
  .how-it-works__rail { flex-basis: var(--page-pad-x); }
  .how-it-works__media { aspect-ratio: .94; border-radius: 16px; }
  .how-it-works__copy { height: 82px; margin-top: 30px; min-height: 82px; overflow: hidden; padding: 0; }
  .how-it-works__copy-mobile { display: inline; }
  .how-it-works__copy.has-mobile-copy .how-it-works__copy-desktop { display: none; }
  .how-it-works__copy h3 { font-size: 20px; }
  .how-it-works__copy p { font-size: 14px; margin-top: 8px; }
  .how-it-works__controls { justify-content: center; margin: 24px auto 0; transform: none; width: max-content; }
  .how-it-works__controls > div:first-child { display: none; }
  .how-it-works__pagination { align-items: center; background: #343434; border-radius: 999px; display: flex !important; gap: 9px !important; height: 23px; justify-content: center; padding: 0 8px; }
  .how-it-works__pagination button { background: #777; border: 0; border-radius: 999px; height: 7px; padding: 0; transition: background 160ms ease, width 160ms ease; width: 7px; }
  .how-it-works__pagination button[aria-current="true"] { background: #fff; width: 24px; }
  .how-it-works__radar-overlay { bottom: 7%; column-gap: 16px; display: grid; grid-template-columns: 1fr 1fr; left: 8%; right: 8%; }
  .how-it-works__radar-item { align-content: start; }
  .how-it-works__radar-item:first-child { grid-column: 2; grid-row: 1; }
  .how-it-works__radar-item:last-child { grid-column: 1; grid-row: 1; }
  .how-it-works__radar-item img { height: 26px; margin-bottom: 7px; width: 26px; }
  .how-it-works__radar-item strong { font-size: 10px; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; }
  .how-it-works__radar-item small { font-size: 10px; line-height: 1.3; margin-top: 7px; }
  .how-it-works__radar-media::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #040F1D 42.93%); bottom: 0; content: ""; height: 45%; inset: auto 0 0; pointer-events: none; position: absolute; z-index: 1; }

  /* A vertical page swipe must never wait for the card entrance animation. */
  .how-it-works--reveal-ready .how-it-works__heading,
  .how-it-works--reveal-ready .how-it-works__controls,
  .how-it-works--reveal-ready .how-it-works__card,
  .how-it-works--reveal-ready .how-it-works__media,
  .how-it-works--reveal-ready .how-it-works__copy {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) { .how-it-works__track { scroll-behavior: auto; }.how-it-works__controls button { transition: none; } }