/* A scoped theater: existing home, work steps, product choices and wallet stay intact. */
#matchProgress { padding: 20px; scroll-margin-top: 90px; }
#matchProgress .progress-heading span,
#matchProgress .progress-heading strong { font-size: 1rem; }
#matchProgress .progress-track span { width: 100%; transform: scaleX(0); transform-origin: left; transition: none; }
.journey {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid #254454;
  border-radius: 22px;
  background: #091827;
  color: #f4fbff;
  isolation: isolate;
}
.journey-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px 0; color: #c4dee7; font-size: .875rem; font-weight: 650; }
.journey-topline strong { padding: 5px 11px; border: 1px solid #355262; border-radius: 7px; color: #e4fff7; font-size: 1rem; font-variant-numeric: tabular-nums; }
.journey-heading { min-height: 133px; padding: 14px 24px 20px; }
.journey-heading > span { display: block; margin-bottom: 5px; color: #76e6c5; font-size: .875rem; font-weight: 750; letter-spacing: .06em; }
.journey-heading h3 { margin: 0; color: #fff; font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 800; line-height: 1.35; letter-spacing: -.04em; }
.journey-heading p { margin: 9px 0 0; color: #c7dce5; font-size: 1rem; line-height: 1.65; }
.journey-stage { position: relative; aspect-ratio: 1000 / 560; min-height: 280px; overflow: hidden; background: #091827; contain: layout paint; }
.journey-airport { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 75%; opacity: .9; transition: opacity 1.5s ease; }
.journey-vignette { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, #091827 0%, transparent 25%, transparent 70%, #091827 100%); pointer-events: none; }
.journey-route-map { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s ease; }
.journey-clouds { position: absolute; z-index: 6; inset: -15%; opacity: 0; transition: opacity 1.5s ease; pointer-events: none; }
.journey-clouds span { position: absolute; width: 40%; height: 38%; background: radial-gradient(ellipse, #daeafa25, #daeafa0b 45%, transparent 72%); }
.journey-clouds span:nth-child(1) { top: 2%; left: 10%; }
.journey-clouds span:nth-child(2) { top: 42%; left: 45%; }
.journey-clouds span:nth-child(3) { top: 6%; left: 72%; }
.journey-hub { position: absolute; z-index: 7; padding: 9px 13px; border: 1px solid #416777; border-radius: 10px; background: #0b2134ed; transition: opacity 1s ease, transform 1s ease; }
.journey-hub small { display: block; color: #c6dce5; font-size: .875rem; }
.journey-hub strong { display: block; color: #fff; font-size: clamp(1rem, 2.2vw, 1.5rem); line-height: 1.4; font-weight: 850; }
.journey-hub > span { display: block; color: #a0f2d6; font-size: .875rem; max-height: 0; overflow: hidden; opacity: 0; transition: opacity 650ms ease; }
.journey[data-phase="compare"] .journey-hub > span { max-height: 40px; margin-top: 5px; opacity: 1; }
.journey[data-phase="compare"] .journey-origin { transform: translate3d(4%, 0, 0); }
.journey[data-phase="compare"] .journey-arrival { transform: translate3d(-4%, 0, 0); }
.journey-origin { top: 12%; left: 6%; }
.journey-arrival { top: 12%; right: 6%; }
.journey-product { position: absolute; z-index: 8; top: 0; left: 0; width: 28%; max-width: 210px; overflow: hidden; border: 1px solid #b9e6dd; border-radius: 15px; background: #fff; box-shadow: 0 18px 35px #0005; }
.journey-product img { display: block; width: 100%; aspect-ratio: 1.2; object-fit: cover; }
.journey-product > span { display: block; padding: 9px 6px; color: #173b32; font-size: 1rem; font-weight: 800; text-align: center; }
.journey-package { position: absolute; z-index: 8; top: 0; left: 0; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #c19b63; border-radius: 12px; background: linear-gradient(135deg, #f4d6a4, #cda46a); color: #705128; opacity: 0; }
.journey-package svg { width: 40px; height: 40px; }
.journey-plane { position: absolute; z-index: 5; top: 0; left: 0; width: 32%; opacity: 0; pointer-events: none; }
.journey-plane img { display: block; width: 100%; height: auto; }
.journey-plane-shadow { position: absolute; z-index: 3; top: 0; left: 0; width: 20%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse, #0009, transparent 72%); opacity: 0; }
.journey-buyer { position: absolute; z-index: 8; top: 0; left: 0; display: grid; justify-items: center; gap: 8px; width: min(70%, 310px); padding: 21px; border: 1px solid #77efbd; border-radius: 18px; background: #102c37f5; opacity: 0; }
.journey-buyer-check { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 50%; background: #75e9bd; color: #10332b; font-size: 1.7rem; font-weight: 850; }
.journey-buyer strong { color: #fff; font-size: 1.125rem; }
.journey-buyer small { color: #cce2e9; font-size: .875rem; }
.journey-receipt { position: absolute; z-index: 8; top: 0; left: 0; display: grid; gap: 10px; justify-items: center; width: min(80%, 360px); padding: 25px 18px; border: 1px solid #79e8c3; border-radius: 20px; background: #12303cf5; opacity: 0; }
.journey-receipt > span { color: #d8e9ef; font-size: 1rem; }
.journey-receipt > strong { color: #85f2c8; font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1.2; }
.journey-receipt > small { color: #d4e9e6; font-size: .875rem; text-align: center; }
.journey-stage-caption { position: absolute; z-index: 9; bottom: 12px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.journey-stage-caption > span { color: #d4f7eb; font-size: .875rem; font-weight: 750; }
.journey-stage-caption > small { color: #c7dce5; font-size: .875rem; }
.journey-finance { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px 24px; border-top: 1px solid #294654; background: #0e2332; }
.journey-finance > div { min-width: 0; }
.journey-finance span { display: block; margin-bottom: 6px; color: #d0e2ea; font-size: .875rem; }
.journey-finance strong { display: block; color: #fff; font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.journey-finance > div:last-child strong { color: #82efc5; }
.journey-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 15px 24px 20px; background: #0e2332; }
.journey-controls button { min-height: 46px; padding: 9px 14px; border: 1px solid #416271; border-radius: 10px; background: #173340; color: #fff; font-size: .875rem; font-weight: 750; transition: background 180ms ease; }
.journey-controls button:hover { background: #244853; }
.journey-controls button:focus-visible { outline: 3px solid #8cf0c7; outline-offset: 3px; }
.journey-controls > span { color: #c5dce5; font-size: .875rem; }
.journey[data-phase="flight"] .journey-airport { opacity: .06; }
.journey[data-phase="flight"] .journey-route-map { opacity: 1; }
.journey[data-phase="flight"] .journey-clouds { opacity: .9; }
.journey[data-phase="cargo"] .journey-hub { opacity: .65; }
.journey[data-phase="settle"] .journey-airport,
.journey[data-phase="complete"] .journey-airport { opacity: .28; }
.journey[data-phase="complete"] .journey-receipt::after { content: "✓"; position: absolute; top: -17px; right: -12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #7be9bd; color: #10372b; font-size: 1.3rem; font-weight: 800; }
.journey[data-paused="true"] { border-color: #718d98; }
.journey[data-paused="true"] * { animation-play-state: paused !important; }
.journey[data-running="true"][data-reduced="false"] .journey-plane,
.journey[data-running="true"][data-reduced="false"] .journey-airport,
.journey[data-running="true"][data-reduced="false"] .journey-clouds { will-change: transform; }
#matchStepList { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
#matchStepList li strong { font-size: .875rem; }
#matchStepList li > span { font-size: .875rem; }
#matchProgress > #matchMessage { font-size: 1rem; line-height: 1.7; }
#matchProgress > .scene-disclaimer { font-size: .875rem; line-height: 1.7; }
@media (max-width: 650px) {
  #matchProgress { padding: 12px; }
  .journey { border-radius: 16px; }
  .journey-topline { padding: 14px 14px 0; }
  .journey-heading { min-height: 155px; padding: 14px; }
  .journey-stage { min-height: 290px; }
  .journey-origin { left: 4%; top: 5%; }
  .journey-arrival { right: 4%; top: 5%; }
  .journey-hub { padding: 7px 10px; }
  .journey-hub small { font-size: .875rem; }
  .journey-product { width: 39%; }
  .journey-product > span { font-size: .875rem; }
  .journey-plane { width: 42%; }
  .journey-stage-caption { left: 12px; right: 12px; flex-direction: column; align-items: flex-start; gap: 3px; }
  .journey-finance { grid-template-columns: 1fr; padding: 16px 14px; gap: 12px; }
  .journey-finance > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .journey-finance span { margin: 0; }
  .journey-finance strong { font-size: 1.125rem; white-space: nowrap; }
  .journey-finance > div:last-child { padding-top: 12px; border-top: 1px solid #31505e; }
  .journey-controls { padding: 0 14px 16px; gap: 10px; }
  .journey-controls > span { order: 3; width: 100%; }
  #matchStepList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .journey *, .journey *::before, .journey *::after { transition: none !important; animation: none !important; }
}