/**
 * How It Works — mobile reference rebuild.
 * Scoped to .public-home-v2 .hp-journey
 * Icons ~30–40% larger than prior 44px / 22px implementation.
 */
.public-home-v2 .hp-journey.pub-p2 {
  --hiw-navy: #0a2a4a;
  --hiw-blue: #1a5fb4;
  --hiw-sky: #2563eb;
  --hiw-muted: #5c6d7c;
  --hiw-radius: 26px;
}

@media (max-width: 767px) {
  body.page-home.public-home-v2 .hp-journey.pub-p2,
  .public-home-v2 .hp-journey.pub-p2 {
    padding: 14px 12px 18px !important;
    background: #fff !important;
  }

  .public-home-v2 .hp-journey__dots-bg,
  .public-home-v2 .hp-journey__leaf,
  .public-home-v2 .hp-journey__trustbar {
    display: none !important;
  }

  .public-home-v2 .hp-journey__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* ---- Heading ---- */
  .public-home-v2 .hp-journey__head {
    position: relative !important;
    margin: 0 0 2px !important;
  }

  .public-home-v2 .hp-journey__heading {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    font-size: clamp(1.35rem, 5.5vw, 1.65rem) !important;
    font-weight: 800 !important;
    color: var(--hiw-navy) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.15 !important;
  }

  .public-home-v2 .hp-journey__heading-text {
    display: inline-block !important;
  }

  .public-home-v2 .hp-journey__sparkles {
    position: relative !important;
    width: 28px !important;
    height: 22px !important;
    margin-top: 2px !important;
    flex: 0 0 auto !important;
  }

  .public-home-v2 .hp-journey__sparkles i {
    position: absolute !important;
    background: var(--hiw-sky) !important;
    clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%) !important;
  }

  .public-home-v2 .hp-journey__sparkles i:nth-child(1) {
    width: 10px !important;
    height: 10px !important;
    top: 0 !important;
    left: 8px !important;
  }

  .public-home-v2 .hp-journey__sparkles i:nth-child(2) {
    width: 7px !important;
    height: 7px !important;
    top: 10px !important;
    left: 0 !important;
    opacity: .75 !important;
  }

  .public-home-v2 .hp-journey__sparkles i:nth-child(3) {
    width: 5px !important;
    height: 5px !important;
    top: 12px !important;
    left: 16px !important;
    opacity: .55 !important;
  }

  .public-home-v2 .hp-journey__underline {
    display: block !important;
    width: 42px !important;
    height: 4px !important;
    margin-top: 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--hiw-sky), #60a5fa) !important;
  }

  /* ---- Steps panel ---- */
  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__panel,
  .public-home-v2 .hp-journey__panel {
    padding: 14px 8px 12px !important;
    border-radius: var(--hiw-radius) !important;
    background: #fff !important;
    border: 1px solid rgba(226, 236, 247, 0.95) !important;
    box-shadow:
      0 14px 32px rgba(11, 47, 74, 0.07),
      0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
  }

  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__grid,
  .public-home-v2 .hp-journey__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__step,
  .public-home-v2 .hp-journey__step {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 2px !important;
    gap: 5px !important;
  }

  /* Kill old connector pseudo */
  .public-home-v2 .hp-journey__step:not(:last-child)::after {
    content: none !important;
    display: none !important;
  }

  .public-home-v2 .hp-journey__num {
    order: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 18px !important;
    padding: 0 7px !important;
    border-radius: 6px !important;
    background: var(--hiw-blue) !important;
    color: #fff !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
  }

  /* Icons: was 44/22 → now ~62/35 (~40% larger) */
  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__icon,
  .public-home-v2 .hp-journey__icon {
    order: 1 !important;
    position: relative !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    margin: 2px 0 0 !important;
    overflow: visible !important;
  }

  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__icon svg,
  .public-home-v2 .hp-journey__icon svg {
    width: 35px !important;
    height: 35px !important;
    max-width: 35px !important;
    max-height: 35px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__step--blue .hp-journey__icon,
  .public-home-v2 .hp-journey__step--blue .hp-journey__icon {
    color: #1d4ed8 !important;
    background:
      radial-gradient(circle at 50% 40%, rgba(147, 197, 253, 0.55), rgba(219, 234, 254, 0.95) 70%) !important;
    border: 1.5px solid rgba(59, 130, 246, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(191, 219, 254, 0.45), 0 6px 16px rgba(37, 99, 235, 0.12) !important;
  }

  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__step--mint .hp-journey__icon,
  .public-home-v2 .hp-journey__step--mint .hp-journey__icon {
    color: #047857 !important;
    background:
      radial-gradient(circle at 50% 40%, rgba(167, 243, 208, 0.55), rgba(209, 250, 229, 0.95) 70%) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(167, 243, 208, 0.4), 0 6px 16px rgba(5, 150, 105, 0.12) !important;
  }

  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__step--purple .hp-journey__icon,
  .public-home-v2 .hp-journey__step--purple .hp-journey__icon {
    color: #6d28d9 !important;
    background:
      radial-gradient(circle at 50% 40%, rgba(196, 181, 253, 0.55), rgba(237, 233, 254, 0.95) 70%) !important;
    border: 1.5px solid rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(221, 214, 254, 0.45), 0 6px 16px rgba(109, 40, 217, 0.12) !important;
  }

  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__step--sky .hp-journey__icon,
  .public-home-v2 .hp-journey__step--sky .hp-journey__icon {
    color: #0369a1 !important;
    background:
      radial-gradient(circle at 50% 40%, rgba(125, 211, 252, 0.5), rgba(224, 242, 254, 0.95) 70%) !important;
    border: 1.5px solid rgba(14, 165, 233, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(186, 230, 253, 0.45), 0 6px 16px rgba(2, 132, 199, 0.12) !important;
  }

  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__step--pink .hp-journey__icon,
  .public-home-v2 .hp-journey__step--pink .hp-journey__icon {
    color: #be185d !important;
    background:
      radial-gradient(circle at 50% 40%, rgba(249, 168, 212, 0.5), rgba(252, 231, 243, 0.95) 70%) !important;
    border: 1.5px solid rgba(236, 72, 153, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(251, 207, 232, 0.45), 0 6px 16px rgba(219, 39, 119, 0.12) !important;
  }

  .public-home-v2 .hp-journey__label {
    order: 2 !important;
    margin: 2px 0 0 !important;
    font-size: 0.62rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    color: var(--hiw-navy) !important;
    letter-spacing: -0.015em !important;
  }

  .public-home-v2 .hp-journey__accent {
    order: 3 !important;
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 999px !important;
    margin: 0 auto !important;
  }

  .public-home-v2 .hp-journey__step--blue .hp-journey__accent { background: #2563eb !important; }
  .public-home-v2 .hp-journey__step--mint .hp-journey__accent { background: #059669 !important; }
  .public-home-v2 .hp-journey__step--purple .hp-journey__accent { background: #7c3aed !important; }
  .public-home-v2 .hp-journey__step--sky .hp-journey__accent { background: #0284c7 !important; }
  .public-home-v2 .hp-journey__step--pink .hp-journey__accent { background: #db2777 !important; }

  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__desc,
  .public-home-v2 .hp-journey__desc {
    order: 4 !important;
    display: block !important;
    margin: 0 !important;
    font-size: 0.5rem !important;
    line-height: 1.25 !important;
    color: var(--hiw-muted) !important;
    max-width: 11.5ch !important;
  }

  /* Connectors … › */
  .public-home-v2 .hp-journey__conn {
    position: absolute !important;
    top: 34px !important;
    inset-inline-end: -10px !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
  }

  .public-home-v2 .hp-journey__conn i {
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: #cbd5e1 !important;
  }

  .public-home-v2 .hp-journey__conn svg {
    width: 9px !important;
    height: 9px !important;
    margin-inline-start: 1px !important;
  }

  /* ---- Support card ---- */
  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__support,
  .public-home-v2 .hp-journey__support {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 12px 12px !important;
    border-radius: var(--hiw-radius) !important;
    border: 1px solid rgba(147, 197, 253, 0.5) !important;
    background:
      radial-gradient(ellipse 50% 80% at 8% 50%, rgba(191, 219, 254, 0.55), transparent 55%),
      linear-gradient(105deg, #e8f2fc 0%, #f5f9ff 50%, #eaf3fc 100%) !important;
    box-shadow: 0 10px 24px rgba(11, 47, 74, 0.06) !important;
  }

  .public-home-v2 .hp-journey__support-ico {
    display: block !important;
    width: 48px !important;
    height: 54px !important;
  }

  .public-home-v2 .hp-journey__support-shield {
    width: 100% !important;
    height: 100% !important;
  }

  .public-home-v2 .hp-journey__support-copy {
    position: relative !important;
    min-width: 0 !important;
    padding-inline-start: 10px !important;
  }

  .public-home-v2 .hp-journey__support-copy::before {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 0 !important;
    top: 10% !important;
    bottom: 10% !important;
    width: 1px !important;
    background: rgba(148, 163, 184, 0.55) !important;
  }

  .public-home-v2 .hp-journey__support-copy strong {
    display: block !important;
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: var(--hiw-navy) !important;
  }

  .public-home-v2 .hp-journey__support-copy p {
    margin: 3px 0 0 !important;
    font-size: 0.64rem !important;
    line-height: 1.3 !important;
    color: var(--hiw-muted) !important;
  }

  .public-home-v2 .hp-journey__support-visual {
    width: 88px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .public-home-v2 .hp-journey__support-art {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* ---- Dots ---- */
  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__dots,
  .public-home-v2 .hp-journey__dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .public-home-v2 .hp-journey__dots li {
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #d0d8e2 !important;
  }

  .public-home-v2 .hp-journey__dots li.is-active {
    background: var(--hiw-blue) !important;
  }
}

@media (min-width: 390px) and (max-width: 767px) {
  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__icon,
  .public-home-v2 .hp-journey__icon {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
  }

  body.page-home.public-home-v2 .hp-journey.pub-p2 .hp-journey__icon svg,
  .public-home-v2 .hp-journey__icon svg {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }

  .public-home-v2 .hp-journey__label {
    font-size: 0.68rem !important;
  }

  .public-home-v2 .hp-journey__desc {
    font-size: 0.54rem !important;
    max-width: 12.5ch !important;
  }

  .public-home-v2 .hp-journey__num {
    min-width: 30px !important;
    height: 20px !important;
    font-size: 0.66rem !important;
  }

  .public-home-v2 .hp-journey__conn {
    top: 38px !important;
  }
}

@media (min-width: 768px) {
  .public-home-v2 .hp-journey__panel {
    padding: 28px 20px;
    border-radius: 28px;
  }

  .public-home-v2 .hp-journey__grid {
    display: flex;
    gap: 8px;
  }

  .public-home-v2 .hp-journey__icon {
    width: 72px;
    height: 72px;
  }

  .public-home-v2 .hp-journey__support {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 26px;
  }

  .public-home-v2 .hp-journey__dots {
    display: none;
  }
}