/* Moving-page process design, scoped to carrying copy and its existing route controller. */

    body.home-page.loaders-page .loaders-how .prototype-how__shell {
      width: 100% !important;
      max-width: 1200px !important;
      margin: 0 auto !important;
      padding: 0 24px !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__eyebrow {
      display: block !important;
      margin-bottom: 10px !important;
      color: #00a83b !important;
      font-size: 12px !important;
      font-weight: 850 !important;
      line-height: 1 !important;
      letter-spacing: .105em !important;
      text-transform: uppercase !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__title {
      max-width: 900px !important;
      margin: 0 !important;
      color: #111827 !important;
      font-size: clamp(31px, 2.6vw, 38px) !important;
      font-weight: 900 !important;
      line-height: 1.08 !important;
      letter-spacing: -.038em !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__route {
      position: relative !important;
      min-height: 330px !important;
      margin-top: 42px !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__path {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 300px !important;
      overflow: visible !important;
      pointer-events: none !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__path--mobile,
    body.home-page.loaders-page .loaders-how .prototype-how__path--small-mobile { display: none !important; }

    body.home-page.loaders-page .loaders-how .prototype-how__path-line {
      fill: none !important;
      stroke-width: 7 !important;
      stroke-linecap: round !important;
      vector-effect: non-scaling-stroke !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__path-progress {
      fill: none !important;
      stroke: #079c3b !important;
      stroke-width: 7 !important;
      stroke-linecap: round !important;
      vector-effect: non-scaling-stroke !important;
      opacity: .78 !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__marker {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      z-index: 4 !important;
      width: 86px !important;
      height: 40px !important;
      opacity: 0;
      transform: translate3d(2px, 2px, 0) translate(-50%, -50%);
      transform-origin: 50% 50% !important;
      will-change: transform !important;
      pointer-events: none !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__marker img {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      filter: drop-shadow(0 4px 5px rgba(15, 23, 42, .2)) !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__steps {
      position: relative !important;
      z-index: 2 !important;
      display: grid !important;
      grid-template-columns: 1fr 1.08fr 1.12fr !important;
      gap: clamp(34px, 5vw, 72px) !important;
      padding-top: 42px !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__step {
      min-width: 0 !important;
      padding-right: 12px !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__step:nth-child(1) {
      --step-active-color: #e65353 !important;
      --step-active-text: #fff !important;
      --step-active-shadow: rgba(230, 83, 83, .22) !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__step:nth-child(2) {
      --step-active-color: #f2b824 !important;
      --step-active-text: #493600 !important;
      --step-active-shadow: rgba(242, 184, 36, .25) !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__step:nth-child(3) {
      --step-active-color: #079c3b !important;
      --step-active-text: #fff !important;
      --step-active-shadow: rgba(7, 156, 59, .18) !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__number {
      display: grid !important;
      width: 44px !important;
      height: 44px !important;
      margin-bottom: 20px !important;
      place-items: center !important;
      border-radius: 50% !important;
      border: 1px solid #ccebd5 !important;
      background: #eaf7ed !important;
      box-shadow: none !important;
      color: #14823c !important;
      font-size: 18px !important;
      font-weight: 900 !important;
      transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__number.is-active {
      border-color: var(--step-active-color) !important;
      background: var(--step-active-color) !important;
      box-shadow: 0 8px 18px var(--step-active-shadow) !important;
      color: var(--step-active-text) !important;
      transform: translateY(-1px) !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__step h3 {
      max-width: 14ch !important;
      margin: 0 !important;
      color: #111827 !important;
      font-size: clamp(22px, 2vw, 28px) !important;
      font-weight: 900 !important;
      line-height: 1.08 !important;
      letter-spacing: -.035em !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__step p {
      max-width: 34ch !important;
      margin: 12px 0 0 !important;
      color: #526174 !important;
      font-size: 15px !important;
      font-weight: 600 !important;
      line-height: 1.55 !important;
      text-wrap: pretty !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__step:nth-child(3) {
      padding-left: 44px !important;
      padding-right: 0 !important;
    }

    body.home-page.loaders-page .loaders-how .prototype-how__step:nth-child(3) p {
      max-width: 38ch !important;
    }

    @media (max-width: 1099px) {
      body.home-page.loaders-page .loaders-how .prototype-how__marker {
        width: 82px !important;
        height: 38px !important;
      }

  
      body.home-page.loaders-page .loaders-how .prototype-how__shell {
        max-width: 760px !important;
        padding: 0 !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__route {
        min-height: 710px !important;
        margin-top: 36px !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__path--desktop { display: none !important; }

      body.home-page.loaders-page .loaders-how .prototype-how__path--mobile {
        display: none !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__path--small-mobile {
        display: block !important;
        height: 710px !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__steps {
        grid-template-columns: 1fr !important;
        gap: 54px !important;
        padding: 38px 68px 0 0 !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__step {
        min-height: 160px !important;
        padding-right: 0 !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__step:nth-child(3) {
        padding-left: 0 !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__step h3 { max-width: 20ch !important; }
      body.home-page.loaders-page .loaders-how .prototype-how__step p { max-width: 44ch !important; }
    }

    @media (max-width: 620px) {
  
      body.home-page.loaders-page .loaders-how .prototype-how__title {
        font-size: 32px !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__route {
        min-height: 675px !important;
        margin-top: 30px !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__path--mobile { display: none !important; }

      body.home-page.loaders-page .loaders-how .prototype-how__path--small-mobile {
        display: block !important;
        height: 675px !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__steps {
        gap: 42px !important;
        padding: 34px 48px 0 0 !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__step {
        min-height: 166px !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__number {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 16px !important;
        font-size: 16px !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__step h3 {
        font-size: 23px !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__step p {
        margin-top: 9px !important;
        font-size: 14px !important;
        line-height: 1.48 !important;
      }

      body.home-page.loaders-page .loaders-how .prototype-how__marker {
        width: 76px !important;
        height: 35px !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      body.home-page.loaders-page .loaders-how .prototype-how__marker { display: none !important; }
      body.home-page.loaders-page .loaders-how .prototype-how__path-progress { display: none !important; }
      body.home-page.loaders-page .loaders-how .prototype-how__number {
        border-color: var(--step-active-color) !important;
        background: var(--step-active-color) !important;
        color: var(--step-active-text) !important;
      }
    }


body.home-page.loaders-page .loaders-how .prototype-how__shell {
  box-sizing: border-box;
  max-width: 1152px !important;
  padding: clamp(26px, 3vw, 40px) !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: var(--loaders-information-surface) !important;
}
body.home-page.loaders-page .loaders-how .prototype-how__step { display: block !important; }
body.home-page.loaders-page .loaders-how .prototype-how__step::after { display: none !important; }
body.home-page.loaders-page .loaders-how .prototype-how__path--desktop,
body.home-page.loaders-page .loaders-how .prototype-how__path-progress,
body.home-page.loaders-page .loaders-how .prototype-how__marker { display: block !important; }
body.home-page.loaders-page .loaders-how .prototype-how__path-line { stroke: url(#prototypeHowRouteGradient) !important; }
@media (max-width: 1119px) {
  body.home-page.loaders-page .loaders-how .prototype-how__route { min-height: 0 !important; }
  body.home-page.loaders-page .loaders-how .prototype-how__steps {
    grid-template-columns: 1fr !important; gap: 42px !important; padding: 10px 48px 0 0 !important;
  }
  body.home-page.loaders-page .loaders-how .prototype-how__step { padding: 0 !important; min-height: 160px !important; }
  body.home-page.loaders-page .loaders-how .prototype-how__step:last-child { min-height: 0 !important; }
  body.home-page.loaders-page .loaders-how .prototype-how__path--desktop,
  body.home-page.loaders-page .loaders-how .prototype-how__path--mobile { display: none !important; }
  body.home-page.loaders-page .loaders-how .prototype-how__path--small-mobile { display: block !important; height: 100% !important; }
  body.home-page.loaders-page .loaders-how .prototype-how__path-line { stroke: url(#prototypeHowRouteGradientSmallMobile) !important; }
}
@media (max-width: 639px) {
  body.home-page.loaders-page .loaders-how .prototype-how__shell { padding: clamp(18px, 5.3vw, 26px) !important; }
  body.home-page.loaders-page .loaders-how .prototype-how__title { font-size: clamp(26px, 6.7vw, 32px) !important; }
  body.home-page.loaders-page .loaders-how .prototype-how__route { margin-top: 20px !important; }
  body.home-page.loaders-page .loaders-how .prototype-how__step h3 { font-size: clamp(20px, 5.3vw, 23px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.home-page.loaders-page .loaders-how .prototype-how__marker,
  body.home-page.loaders-page .loaders-how .prototype-how__path-progress { display: none !important; }
}
