/* The product story follows one continuous path, in the page's normal scroll. */
.build-journey { --journey-mint: #22f2b0; padding: 128px 0 88px; overflow-x: clip; }
.build-journey .build-journey__inner { max-width: 1200px; gap: 0; }
.build-journey__head { max-width: 760px; }
.build-journey__head .lp-h2 { max-width: 680px; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.04em; }
.build-journey__head .lp-lead { max-width: 660px; font-size: 16px; line-height: 26px; }
.build-journey__body { position: relative; width: 100%; margin-top: 28px; padding-top: 192px; }
.build-journey__route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.build-journey__route path { fill: none; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.build-journey__track { stroke: #d7f5e9; }
.build-journey__progress { stroke: var(--journey-mint); filter: drop-shadow(0 0 3px rgba(34,242,176,.25)); }
.build-journey__steps { position: relative; list-style: none; padding: 0 0 64px; margin: 0; display: grid; gap: 80px; }
.build-journey__step { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr); align-items: center; gap: 80px; min-height: 400px; padding-left: 64px; }
.build-journey__copy { position: relative; max-width: 340px; }
.build-journey__node { position: absolute; left: -51px; top: 43px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #d5dce2; }
.build-journey__step.is-reached .build-journey__node { background: var(--journey-mint); box-shadow: 0 0 0 5px rgba(34,242,176,.12), 0 0 12px rgba(34,242,176,.25); }
.build-journey__number { margin-bottom: 12px; color: #84909c; font-size: 11px; line-height: 18px; font-weight: 500; letter-spacing: .08em; }
.build-journey__copy h3 { color: #135f46; font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -.8px; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .build-journey__copy h3 { background: linear-gradient(110deg, #0b3f30 0%, #116849 38%, #1cce8a 44%, #b7ffe3 51%, #22f2b0 56%, #10694a 64%, #0b3f30 100%) 0% 50% / 250% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; }
}
.build-journey__description { margin-top: 16px; color: #737373; font-family: var(--lp-font-paragraph); font-size: 15px; line-height: 25px; }
.build-journey__visual { min-width: 0; perspective: 1400px; }
.build-journey__media { width: 100%; aspect-ratio: 8 / 5; margin: 0; border-radius: 22px; transform-origin: center top; backface-visibility: hidden; box-shadow: 0 22px 40px -32px rgba(27,52,65,.25); }
.build-journey__video { display: block; width: 100%; height: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: inherit; }

/* Enhancement is opt-in: the original media/posters remain visible without JS. */
@media (prefers-reduced-motion: no-preference) {
  .build-journey.is-motion .build-journey__copy { opacity: 0; transform: translateY(32px); transition: opacity .65s ease, transform .8s cubic-bezier(.16,1,.3,1); }
  .build-journey.is-motion .is-revealed .build-journey__copy { opacity: 1; transform: none; }
  .build-journey.is-motion .build-journey__media { visibility: hidden; transform: translate3d(0,var(--journey-lift,-36px),var(--journey-depth,-140px)) rotateX(var(--journey-flip,30deg)); will-change: transform; }
  .build-journey.is-motion .is-media-visible .build-journey__media { visibility: visible; }
  .build-journey.is-motion .is-shimmering h3 { animation: build-journey-shimmer 1.9s ease-in-out .08s both; }
  .build-journey__node { transition: background .25s, box-shadow .25s; }
}
@keyframes build-journey-shimmer {
  0% { background-position: 100% 50%; filter: drop-shadow(0 0 0 transparent); }
  45% { filter: drop-shadow(0 0 7px rgba(34,242,176,.38)); }
  100% { background-position: 0% 50%; filter: drop-shadow(0 0 0 transparent); }
}
@media (max-width: 1000px) {
  .build-journey__step { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 40px; min-height: 350px; }
  .build-journey__copy h3 { font-size: 25px; }
  .build-journey__description { font-size: 14px; line-height: 23px; }
}
@media (max-width: 760px) {
  .build-journey { padding: 88px 0 64px; }
  .build-journey__head .lp-h2 { max-width: 440px; font-size: 34px; }
  .build-journey__head .lp-lead { max-width: 440px; font-size: 15px; line-height: 24px; }
  .build-journey__body { margin-top: 20px; padding-top: 112px; }
  .build-journey__steps { gap: 72px; padding-bottom: 32px; }
  .build-journey__step { grid-template-columns: 1fr; min-height: 0; gap: 26px; padding-left: 42px; }
  .build-journey__copy { max-width: 440px; }
  .build-journey__node { left: -33px; top: 42px; width: 8px; height: 8px; }
  .build-journey__copy h3 { max-width: 340px; font-size: 26px; line-height: 1.2; }
  .build-journey__description { margin-top: 14px; }
  .build-journey__media { border-radius: 15px; }
}