/* TP Context / HOME04 / Mobile-only: original three process cards after the hero kicker.
   Desktop DOM and appearance remain unchanged. No market or navigation data is touched. */

/* The mobile duplicate is always visually absent on desktop. */
body .tpx-home04-steps { display: none !important; }

@media (max-width: 720px) {
  body.tpx-home-active .tpx-home-shell .tpx-hero-copy > .tpx-home04-steps {
    display: block !important;
    position: relative !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 15px 0 18px !important;
    padding: 0 !important;
  }

  body.tpx-home-active .tpx-home04-steps-track.tpx-process {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 11px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 3px 2px 12px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: rgba(76, 176, 227, .5) transparent;
    scrollbar-width: thin;
  }

  body.tpx-home-active .tpx-home04-steps-track .tpx-process-card {
    position: relative !important;
    flex: 0 0 min(300px, calc(100% - 51px)) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    min-height: 183px !important;
    height: auto !important;
    padding: 14px 15px 15px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(91, 168, 219, .30) !important;
    background: linear-gradient(158deg, rgba(19, 45, 67, .98), rgba(8, 27, 43, .98)) !important;
    box-shadow: 0 11px 28px rgba(0, 5, 13, .17), inset 0 1px 0 rgba(159, 218, 255, .035) !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.tpx-home-active .tpx-home04-steps-track .tpx-process-number {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    line-height: 1 !important;
    background: rgba(12, 47, 74, .97) !important;
    border: 1px solid rgba(67, 179, 237, .36) !important;
    color: #6cd5ff !important;
    z-index: 2;
  }

  body.tpx-home-active .tpx-home04-steps-track .tpx-process-icon {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 45px !important;
    width: 45px !important;
    height: 45px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 0 10px !important;
    border-radius: 13px !important;
    background: rgba(30, 103, 145, .23) !important;
    color: #64d1ff !important;
    font-size: 23px !important;
  }

  body.tpx-home-active .tpx-home04-steps-track .tpx-process-icon::before {
    width: 27px !important;
    height: 27px !important;
  }

  body.tpx-home-active .tpx-home04-steps-track .tpx-process-card > div {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.tpx-home-active .tpx-home04-steps-track .tpx-process-card h3 {
    margin: 0 0 7px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 740 !important;
    letter-spacing: -.015em !important;
    white-space: normal !important;
  }

  body.tpx-home-active .tpx-home04-steps-track .tpx-process-card p {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.42 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    color: #bbccd9 !important;
  }

  body.tpx-home-active .tpx-home04-steps-track .tpx-process-card p br { display: none !important; }
  body.tpx-home-active .tpx-home04-steps-track .tpx-process-arrow { display: none !important; }

  body.tpx-home-active .tpx-home04-steps-hint {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 2px 4px 0 !important;
    color: rgba(141, 190, 220, .86) !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    letter-spacing: .025em;
  }

  /* Hide the original process header/cards only after the mobile copy exists.
     Keep the original disclaimer and all functionality below it. */
  body.tpx-home-active .tpx-home-shell.tpx-home04-ready #tpxHow .tpx-how-row {
    display: none !important;
  }

  body.tpx-home-active .tpx-home-shell.tpx-home04-ready #tpxHow {
    padding-top: 2px !important;
  }
}