/* The diagram remains readable without JavaScript. Scroll animation is progressive enhancement. */
html:has(.solver-journey), .mk-page:has(.solver-journey) { overflow-x: clip; }
.solver-journey, .solver-journey * { box-sizing: border-box; }
.solver-journey.mk-section { width: calc(100% - 96px); max-width: 1244px; margin: 0 auto; padding: 32px 0 80px; }
.sj-stage { position: relative; }
.sj-eyebrow { margin: 0 0 12px; color: var(--sv-teal-700); font-size: 14px; font-weight: 800; line-height: 1.2; }
.sj-heading h2 { margin: 0; font-family: var(--sv-font-display); font-size: clamp(40px, 4vw, 56px); font-weight: 900; line-height: 1.04; letter-spacing: -.045em; }
.sj-heading h2 > span { display: block; }
.sj-heading em { color: var(--sv-teal-700); font-style: normal; }
.sj-intro { max-width: 1210px; margin: 18px 0 0; font-size: 18px; font-weight: 450; line-height: 1.45; letter-spacing: -.02em; }
.sj-comparison { margin-top: 30px; }
.sj-comparison-stage { display: flow-root; }
.sj-process h3 { margin: 0 0 10px; font-family: var(--sv-font-display); font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.045em; }
.sj-track { position: relative; }
.sj-scrollport { min-width: 0; }
.sj-scrollport:focus-visible { outline: 2px solid var(--sv-teal-700); outline-offset: 4px; }
.sj-scrollport--solvie { flex: 0 0 61%; }
.sj-track--manual { height: 254px; }
.sj-paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sj-connector, .sj-repeat-path { fill: none; stroke: var(--sv-ink); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sj-guide { fill: none; stroke: var(--sv-ink); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .24; }
.sj-track--solvie .sj-guide { stroke: var(--sv-teal-700); stroke-width: 3px; opacity: .34; }
.sj-track--solvie .sj-connector { stroke: var(--sv-teal-700); stroke-width: 3px; }
.sj-steps { list-style: none; padding: 0; margin: 0; }
.sj-step { position: absolute; display: flex; flex-direction: column; align-items: center; width: 10%; left: calc(var(--step-index) * 10%); top: 52px; }
.sj-track--manual .sj-step:nth-child(even) { top: 96px; }
.sj-number { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 2.5px solid var(--sv-ink); border-radius: 50%; background: var(--sv-gold-500); font-size: 17px; font-weight: 800; line-height: 1; box-shadow: 2px 2px 0 var(--sv-ink); }
.sj-step.is-current .sj-number { outline: 2px solid var(--sv-teal-700); outline-offset: 4px; }
.sj-step.is-current .sj-label { color: var(--sv-teal-700); font-weight: 800; }
.sj-label { position: absolute; top: 54px; width: 100%; padding: 0 5px; text-align: center; font-size: 14px; line-height: 1.2; font-weight: 650; letter-spacing: -.025em; text-wrap: balance; }
.sj-track--manual .sj-step:nth-child(odd) .sj-label { top: auto; bottom: 54px; }
.sj-repeat { position: absolute; top: 208px; left: 71%; transform: translateX(-50%); border: 2px solid var(--sv-ink); border-radius: 999px; padding: 5px 14px; background: var(--sv-gold-500); font-size: 13px; line-height: 1.2; font-weight: 750; white-space: nowrap; }
.sj-process--solvie { margin-top: 14px; }
.sj-process--solvie h3 { margin-bottom: 14px; }
.sj-easy-row { display: flex; align-items: center; gap: 18px; }
.sj-track--solvie { height: 104px; }
.sj-track--solvie .sj-step { top: 18px; width: 33.333333%; left: calc(var(--step-index) * 33.333333%); }
.sj-track--solvie .sj-number { background: var(--sv-teal-700); color: var(--sv-cream-50); width: 50px; height: 50px; flex-basis: 50px; font-size: 18px; }
.sj-track--solvie .sj-label { top: 62px; font-size: 15px; }
.sj-conversation-marks { flex: 0 0 30px; width: 30px; height: 58px; color: var(--sv-ink); }
.sj-saving { margin: 0; color: var(--sv-teal-700); font-size: clamp(17px, 1.5vw, 21px); font-weight: 750; line-height: 1.3; letter-spacing: -.035em; }
.is-auto-driven .sj-connector, .is-auto-driven .sj-repeat-path { stroke-dasharray: 1; }
.solver-journey-reading .mk-floating-cta { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 1099px) {
  .solver-journey.mk-section { width: calc(100% - 40px); max-width: 700px; padding-bottom: 48px; }
  .sj-heading h2 { font-size: clamp(32px, 5.7vw, 46px); font-weight: 850; line-height: 1.08; }
  .sj-intro { font-size: 17px; line-height: 1.5; margin-top: 18px; }
  .sj-desktop-break { display: none; }
  .sj-comparison { margin-top: 32px; }
  .sj-process h3 { font-size: 26px; margin-bottom: 20px; }
  .solver-journey { --sj-mobile-step: clamp(112px, 35vw, 140px); }
  .sj-scrollport { width: calc(100% + 20px); margin-right: -20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sj-scrollport::-webkit-scrollbar { display: none; }
  .sj-track--manual { width: calc(var(--sj-mobile-step) * 10); }
  .sj-label { font-size: 15px; }
  .sj-process--solvie { margin-top: 24px; }
  .sj-easy-row { flex-wrap: wrap; gap: 0; }
  .sj-scrollport--solvie { flex: 0 0 100%; width: 100%; margin-right: 0; overflow: hidden; }
  .sj-track--solvie { width: 100%; height: 124px; }
  .sj-track--solvie .sj-number { width: 44px; height: 44px; flex-basis: 44px; font-size: 17px; }
  .sj-track--solvie .sj-label { top: 56px; padding: 0 6px; font-size: 13px; line-height: 1.25; }
  .sj-conversation-marks { display: none; }
  .sj-saving { margin: 20px 0 0; font-size: 18px; font-weight: 650; }
}


/* High-contrast progression without flashes or a moving page layout. */
.is-auto-driven .sj-number {transition:transform 180ms ease,opacity 180ms ease,outline-color 180ms ease;}
.is-auto-driven .sj-label {transition:opacity 180ms ease,color 180ms ease;}
.is-auto-driven .sj-step.is-waiting .sj-number {opacity:.35;}
.is-auto-driven .sj-step.is-waiting .sj-label {opacity:.5;}
.is-auto-driven .sj-step.is-current .sj-number {transform:scale(1.1);outline-width:3px;outline-offset:5px;}
.is-auto-driven .sj-track--manual .sj-step.is-current .sj-number {outline-color:var(--sv-gold-700);}
.is-auto-driven .sj-track--manual .sj-step.is-current .sj-label {color:var(--sv-ink);}
.is-auto-driven .sj-track--manual :is(.sj-connector,.sj-repeat-path) {stroke:var(--sv-gold-700);stroke-width:3.5px;}
.is-auto-driven .sj-track--manual marker path {stroke:var(--sv-gold-700);}
.is-auto-driven .sj-track--solvie .sj-connector {stroke-width:4px;}
.is-auto-driven .sj-guide {opacity:.18;}
.is-auto-driven .sj-track--solvie .sj-guide {opacity:.22;}
@media(prefers-reduced-motion:reduce){.sj-number,.sj-label{transition:none;}}