/* Order journey page: one order through eight stages */
.wt-body { margin: 0; min-height: 100vh; background: radial-gradient(80% 60% at 70% 30%, #EAF6FE 0%, #fff 60%) fixed, #fff; color: #101828; font-family: Poppins, system-ui, sans-serif; display: flex; flex-direction: column; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wt-top { display: flex; align-items: center; gap: 1.5rem; padding: 0.9rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid #E4EEF6; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.wt-top-title { font-weight: 600; font-size: 0.95rem; padding-left: 1.5rem; border-left: 1px solid #E4EEF6; }
.wt-top-title em { display: block; font-style: normal; font-weight: 400; font-size: 0.75rem; color: #667085; }
.wt-top-actions { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.wt-top-demo { font-size: 0.9rem; font-weight: 600; color: #fff; background: #0096EE; padding: 0.6rem 1.1rem; border-radius: 0.6rem; }
.wt-exit { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid #D0D5DD; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #344054; }
.wt-exit:hover { background: #F2F4F7; }

.wt { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3rem) 1.5rem; box-sizing: border-box; }

/* Stage track */
.wt-track { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.wt-line { position: absolute; left: 6.25%; right: 6.25%; top: 1.5rem; height: 3px; background: #E4EEF6; border-radius: 3px; }
.wt-line i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #0096EE, #33B1F5); border-radius: 3px; transition: width 0.7s cubic-bezier(.2, .8, .2, 1); }
.wt-runner { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #0096EE, 0 0 16px 4px rgba(0, 150, 238, 0.5); transition: left 0.7s cubic-bezier(.2, .8, .2, 1); }
.wt-stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; background: none; border: 0; cursor: pointer; font: inherit; color: #667085; padding: 0; }
.wt-dot { position: relative; width: 3rem; height: 3rem; border-radius: 50%; background: #fff; border: 2px solid #D7E6F2; color: #98A2B3; display: flex; align-items: center; justify-content: center; transition: all 0.35s ease; }
.wt-dot em { position: absolute; right: -4px; top: -4px; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #12B76A; color: #fff; font-style: normal; font-size: 0.65rem; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; transform: scale(0); transition: transform 0.3s cubic-bezier(.2, 1.4, .4, 1); }
.wt-stop-name { font-size: 0.82rem; font-weight: 500; }
.wt-stop.is-done .wt-dot { border-color: #0096EE; color: #0096EE; }
.wt-stop.is-done .wt-dot em { transform: scale(1); }
.wt-stop.is-active .wt-dot { background: #0096EE; border-color: #0096EE; color: #fff; transform: scale(1.12); box-shadow: 0 0 0 7px rgba(0, 150, 238, 0.14), 0 12px 24px -10px rgba(0, 120, 190, 0.7); }
.wt-stop.is-active .wt-stop-name { color: #0077C0; font-weight: 600; }
.wt-stop:hover .wt-dot { border-color: #0096EE; }
.wt-stop:focus-visible .wt-dot { outline: 2px solid #0096EE; outline-offset: 3px; }

/* Panels */
.wt-stage { position: relative; flex: 1; min-height: 540px; }
.wt-panel { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; opacity: 0; visibility: hidden; transform: translateX(30px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0.6s; }
.wt-panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wt-panel.is-leaving { transform: translateX(-30px); }
.wt-step { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #0077C0; }
.wt-copy h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; font-weight: 600; margin: 0.5rem 0 0.8rem; letter-spacing: -0.01em; }
.wt-copy h2 span { display: block; color: #0096EE; }
.wt-copy > p { font-size: 1.02rem; line-height: 1.6; color: #475467; margin: 0 0 1.1rem; max-width: 32rem; }
.wt-panel.is-active .wt-copy > * { animation: wt-in 0.55s cubic-bezier(.2, .8, .2, 1) both; }
.wt-panel.is-active .wt-copy > :nth-child(2) { animation-delay: 0.06s; }
.wt-panel.is-active .wt-copy > :nth-child(3) { animation-delay: 0.12s; }
.wt-panel.is-active .wt-copy > :nth-child(4) { animation-delay: 0.35s; }
.wt-panel.is-active .wt-copy > :nth-child(5) { animation-delay: 0.6s; }
.wt-panel.is-active .wt-copy > :nth-child(6) { animation-delay: 0.8s; }
.wt-panel.is-active .wt-copy > .wt-work { animation: none; }
@keyframes wt-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wt-agent { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 1rem; background: #fff; border: 1px solid #DCEBF7; box-shadow: 0 18px 36px -28px rgba(0, 84, 140, 0.55); max-width: 34rem; }
.wt-agent-ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; background: linear-gradient(135deg, #33B1F5, #0078BE); color: #fff; display: flex; align-items: center; justify-content: center; }
.wt-agent b { display: block; font-size: 0.85rem; color: #0077C0; margin-bottom: 0.2rem; }
.wt-agent span { font-size: 0.98rem; line-height: 1.55; color: #101828; }
.wt-agent mark { background: #E1F1FD; color: #005A94; font-weight: 600; padding: 0 0.25em; border-radius: 0.3em; }
.wt-next { position: relative; display: flex; align-items: center; gap: 0.9rem; margin-top: 1rem; padding: 0.85rem 1.1rem 1rem; border-radius: 1rem; background: #F5FAFE; border: 1px dashed #A9D7F5; max-width: 34rem; overflow: hidden; }
.wt-next-arrow { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #0096EE; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.wt-next small { display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #667085; font-weight: 600; }
.wt-next b { display: block; font-size: 1rem; }
.wt-next span { font-size: 0.82rem; color: #475467; }
.wt-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #0096EE; }
.wt-panel.is-active .wt-timer { animation: wt-timer var(--wt-dur, 7s) linear forwards; }
.wt.is-paused .wt-timer { animation-play-state: paused !important; }
@keyframes wt-timer { to { width: 100%; } }

/* Visual stage: a soft panel holding an app window and floating badges */
.wt-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 440px; border-radius: 1.75rem; background: radial-gradient(circle at 1px 1px, rgba(0, 120, 190, 0.13) 1px, transparent 1.6px) 0 0 / 18px 18px, radial-gradient(70% 70% at 30% 20%, #F4FAFF 0%, #DCEEFC 100%); padding: 2.5rem 2rem; box-sizing: border-box; overflow: hidden; padding-top: 4rem; padding-bottom: 4rem; }
.wt-visual::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; right: -15%; bottom: -25%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 150, 238, 0.22), transparent 65%); animation: wv-float 8s ease-in-out infinite; }
@keyframes wv-float { 50% { transform: translate(-20px, -20px); } }
.wt-panel.is-active .wt-visual { animation: wt-vis 0.7s cubic-bezier(.2, .8, .2, 1) both 0.1s; }
@keyframes wt-vis { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.wv-win { position: relative; z-index: 1; width: 100%; max-width: 440px; background: #fff; border-radius: 1rem; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 30px 60px -30px rgba(0, 50, 100, 0.55), 0 0 0 1px rgba(0, 84, 140, 0.06); overflow: hidden; }
.wt-panel.is-active .wv-win { animation: wv-rise 0.7s cubic-bezier(.2, .8, .2, 1) both 0.2s; }
@keyframes wv-rise { from { opacity: 0; transform: translateY(24px) rotateX(8deg); } to { opacity: 1; transform: none; } }
.wv-win-bar { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.9rem; background: #F7FAFD; border-bottom: 1px solid #EEF2F6; font-size: 0.78rem; }
.wv-win-dots { display: flex; gap: 0.3rem; }
.wv-win-dots i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #D0D5DD; }
.wv-win-dots i:first-child { background: #0096EE; }
.wv-win-bar b { font-weight: 600; color: #344054; }
.wv-win-bar em { margin-left: auto; font-style: normal; font-size: 0.7rem; font-weight: 600; color: #067647; display: flex; align-items: center; gap: 0.3rem; }
.wv-win-bar em i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #12B76A; animation: wv-pulse 1.6s ease-in-out infinite; }
.wv-win-body { padding: 1rem 1.1rem 1.2rem; }
.wv-win-title { display: block; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.8rem; color: #101828; }
.wv-badge { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.9rem; border-radius: 999px; background: #fff; font-size: 0.8rem; font-weight: 600; color: #101828; box-shadow: 0 16px 32px -18px rgba(0, 50, 100, 0.6); white-space: nowrap; }
.wv-badge i { font-style: normal; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: #fff; background: #0096EE; }
.wv-badge.is-ok i { background: #12B76A; font-size: 0.7rem; }
.wv-badge--tl { top: 1rem; left: 1.2rem; }
.wv-badge--br { bottom: 1rem; right: 1.2rem; }
.wt-panel.is-active .wv-badge { animation: wv-badge 0.5s cubic-bezier(.2, 1.4, .4, 1) both var(--d); }
.wt-panel.is-active .wv-badge--tl { animation-name: wv-badge, wv-bob; animation-duration: 0.5s, 4s; animation-delay: var(--d), calc(var(--d) + 0.5s); animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(.2, 1.4, .4, 1), ease-in-out; }
@keyframes wv-badge { from { opacity: 0; transform: scale(0.6) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wv-bob { 50% { transform: translateY(-5px); } }
.ok { color: #067647 !important; } .bad { color: #B42318 !important; }

/* Enquiry list */
.wv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.wv-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center; padding: 0.55rem 0.65rem; border-radius: 0.7rem; border: 1px solid #EEF2F6; }
.wv-list li b { display: block; font-size: 0.86rem; }
.wv-list li small { font-size: 0.74rem; color: #667085; }
.wv-list li em { font-style: normal; font-size: 0.7rem; color: #98A2B3; }
.wv-list li.is-hot { border-color: #8ACFF7; background: #F0F8FE; box-shadow: 0 0 0 3px rgba(0, 150, 238, 0.1); }
.wv-av { width: 2rem; height: 2rem; border-radius: 0.6rem; background: #E1F1FD; color: #0077C0; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.is-hot .wv-av { background: #0096EE; color: #fff; }
.wt-panel.is-active .wv-list li { animation: wv-slide 0.45s ease both; animation-delay: calc(0.45s + var(--i) * 0.12s); }
@keyframes wv-slide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* Quotation */
.wv-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 0.9rem; }
.wv-table th { text-align: left; font-weight: 600; color: #667085; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.4rem 0.3rem; border-bottom: 1px solid #EEF2F6; }
.wv-table td { padding: 0.55rem 0.3rem; border-bottom: 1px solid #F2F4F7; }
.wv-table th:last-child, .wv-table td:last-child { text-align: right; }
.wv-table .is-total td { font-weight: 700; border-bottom: 0; color: #0077C0; }
.wt-panel.is-active .wv-table tbody tr { animation: wt-in 0.4s ease both; animation-delay: calc(0.5s + var(--i) * 0.15s); }
.wv-meters { display: grid; gap: 0.55rem; }
.wv-meters > div { display: grid; grid-template-columns: 4.2rem 1fr 3.4rem; gap: 0.6rem; align-items: center; font-size: 0.8rem; color: #475467; }
.wv-meters b { text-align: right; color: #101828; }
.wv-meter { height: 8px; background: #EEF2F6; border-radius: 99px; overflow: hidden; }
.wv-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #33B1F5, #0078BE); }
.wt-panel.is-active .wv-meter i { animation: wv-grow 0.9s ease forwards 1s; }
@keyframes wv-grow { to { width: var(--to); } }

/* Planning */
.wv-tree { display: grid; justify-items: center; gap: 1.2rem; margin-bottom: 1rem; }
.wv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; width: 100%; position: relative; }
.wv-row::before { content: ""; position: absolute; left: 25%; right: 25%; top: -0.6rem; border-top: 2px solid #8ACFF7; }
.wv-node { position: relative; text-align: center; background: #F7FAFD; border: 1px solid #E4EEF6; border-radius: 0.65rem; padding: 0.55rem 0.6rem; font-size: 0.8rem; font-weight: 600; }
.wv-row .wv-node::before { content: ""; position: absolute; left: 50%; top: -0.62rem; height: 0.6rem; border-left: 2px solid #8ACFF7; }
.wv-node.is-top { background: #0096EE; border-color: #0096EE; color: #fff; padding: 0.6rem 1.2rem; }
.wv-node.is-make { background: #E1F1FD; border-color: #B9E1FA; color: #005A94; }
.wv-node.is-buy { background: #FFF6E5; border-color: #FEDF89; color: #93370D; }
.wt-panel.is-active .wv-node { animation: wt-in 0.45s ease both; animation-delay: calc(0.4s + var(--i) * 0.18s); }
.wv-gantt { display: grid; gap: 0.35rem; font-size: 0.72rem; color: #667085; }
.wv-gantt > div { display: grid; grid-template-columns: 3rem 1fr; gap: 0.5rem; align-items: center; }
.wv-gantt > div > div { position: relative; height: 14px; background: #F2F4F7; border-radius: 4px; }
.wv-gantt i { position: absolute; top: 0; bottom: 0; width: 0; border-radius: 4px; background: #B9E1FA; }
.wv-gantt i.is-new { background: linear-gradient(90deg, #33B1F5, #0078BE); box-shadow: 0 0 10px rgba(0, 150, 238, 0.5); }
.wt-panel.is-active .wv-gantt i { animation: wv-grow 0.8s ease forwards; animation-delay: calc(1.3s + var(--i) * 0.2s); }
.wv-gantt p { display: flex; justify-content: space-between; margin: 0.15rem 0 0 3.5rem; font-size: 0.66rem; }

/* Purchase */
.wv-vendors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
.wv-vendors > div { position: relative; display: grid; gap: 0.45rem; padding: 0.8rem 0.7rem; border-radius: 0.8rem; border: 1px solid #EEF2F6; font-size: 0.85rem; }
.wv-vendors > div > b { font-size: 0.85rem; }
.wv-vendors span { display: grid; font-weight: 600; }
.wv-vendors small { font-size: 0.66rem; color: #98A2B3; font-weight: 500; }
.wv-vendors .is-best { border-color: #0096EE; background: #F0F8FE; box-shadow: 0 0 0 3px rgba(0, 150, 238, 0.12); }
.wv-vendors em { position: absolute; top: -0.6rem; right: 0.6rem; font-style: normal; font-size: 0.62rem; font-weight: 700; color: #fff; background: #0096EE; padding: 0.15rem 0.5rem; border-radius: 99px; }
.wt-panel.is-active .wv-vendors > div { animation: wt-in 0.45s ease both; animation-delay: calc(0.45s + var(--i) * 0.15s); }
.wt-panel.is-active .wv-vendors .is-best { animation: wt-in 0.45s ease both 0.6s, wv-glow 2s ease-in-out infinite 1.4s; }
@keyframes wv-glow { 50% { box-shadow: 0 0 0 6px rgba(0, 150, 238, 0.18); } }

/* Stores */
.wv-racks { position: relative; display: grid; gap: 0.5rem; padding: 0.7rem; border-radius: 0.8rem; background: linear-gradient(180deg, #0D4778, #0A3459); overflow: hidden; margin-bottom: 0.8rem; }
.wv-shelf { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.35rem; padding-bottom: 0.35rem; border-bottom: 3px solid #E7A13A; }
.wv-shelf i { height: 26px; border-radius: 0.25rem; background: linear-gradient(180deg, #E7C08F, #C89559); }
.wv-shelf i.is-empty { background: rgba(255, 255, 255, 0.08); }
.wv-shelf i.is-target { background: #33B1F5; box-shadow: 0 0 0 2px #fff, 0 0 16px #33B1F5; }
.wt-panel.is-active .wv-shelf i { animation: wt-in 0.3s ease both; animation-delay: calc(0.4s + var(--i) * 0.03s); }
.wt-panel.is-active .wv-shelf i.is-target { animation: wt-in 0.3s ease both 0.7s, wv-blink 1s ease-in-out infinite 1.2s; }
@keyframes wv-blink { 50% { background: #fff; } }
.wv-scan { position: absolute; left: 0; right: 0; height: 2px; background: #5EE0A8; box-shadow: 0 0 12px 2px #5EE0A8; top: 0; animation: wv-scan 2.2s ease-in-out infinite; }
@keyframes wv-scan { 0%, 100% { top: 6%; } 50% { top: 92%; } }
.wv-grn { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; padding: 0.6rem 0.7rem; background: #F7FAFD; border-radius: 0.6rem; }

/* Production */
.wv-make { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; margin-bottom: 0.8rem; }
.wv-ring { position: relative; width: 120px; height: 120px; }
.wv-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wv-ring circle { fill: none; stroke-width: 4.5; }
.wv-ring circle:first-child { stroke: #EEF2F6; }
.wv-ring circle:last-child { stroke: #0096EE; stroke-linecap: round; stroke-dasharray: 0 100; }
.wt-panel.is-active .wv-ring circle:last-child { animation: wv-ring 1.4s ease forwards 0.5s; }
@keyframes wv-ring { to { stroke-dasharray: var(--p) 100; } }
.wv-ring b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.35rem; }
.wv-ring small { font-size: 0.6rem; color: #667085; font-weight: 500; }
.wv-machines { display: grid; gap: 0.4rem; }
.wv-machines span { display: grid; grid-template-columns: auto 1fr; column-gap: 0.55rem; align-items: center; border: 1px solid #EEF2F6; border-radius: 0.6rem; padding: 0.4rem 0.6rem; font-size: 0.8rem; font-weight: 600; }
.wv-machines span i { grid-row: span 2; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #12B76A; box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.16); animation: wv-pulse 1.6s ease-in-out infinite; }
.wv-machines span.is-stop { border-color: #FEDF89; background: #FFFAEB; }
.wv-machines span.is-stop i { background: #F79009; box-shadow: 0 0 0 4px rgba(247, 144, 9, 0.2); }
.wv-machines em { font-style: normal; font-size: 0.68rem; color: #667085; font-weight: 400; }
.wt-panel.is-active .wv-machines span { animation: wt-in 0.4s ease both; animation-delay: calc(0.5s + var(--i) * 0.12s); }
@keyframes wv-pulse { 50% { transform: scale(1.25); } }
.wv-spark { display: flex; align-items: flex-end; gap: 0.3rem; height: 46px; padding-top: 0.4rem; border-top: 1px solid #EEF2F6; }
.wv-spark i { flex: 1; height: 0; border-radius: 3px 3px 0 0; background: #B9E1FA; }
.wv-spark i:last-child { background: #0096EE; }
.wv-spark i.is-dip { background: #F79009; }
.wt-panel.is-active .wv-spark i { animation: wv-h 0.5s ease forwards; animation-delay: calc(1s + var(--i) * 0.07s); }
@keyframes wv-h { to { height: var(--h); } }

/* Quality */
.wv-samples { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.35rem; margin-bottom: 0.9rem; }
.wv-samples i { aspect-ratio: 1; border-radius: 0.3rem; background: #EEF2F6; }
.wt-panel.is-active .wv-samples i { animation: wv-sample 0.3s ease forwards; animation-delay: calc(0.5s + var(--i) * 0.06s); }
.wt-panel.is-active .wv-samples i.is-bad { animation-name: wv-sample-bad; }
@keyframes wv-sample { to { background: #12B76A; } }
@keyframes wv-sample-bad { to { background: #F04438; box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.25); } }
.wv-qc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.wv-qc > div { display: grid; gap: 0.1rem; padding: 0.6rem; border-radius: 0.7rem; background: #F7FAFD; text-align: center; }
.wv-qc b { font-size: 1.3rem; }
.wv-qc span { font-size: 0.7rem; color: #667085; }
.wt-panel.is-active .wv-qc > div { animation: wt-in 0.4s ease both 1.7s; }

/* Dispatch */
.wv-route { background: #F4F8FB; border-radius: 0.8rem; margin-bottom: 0.8rem; }
.wv-route svg { display: block; width: 100%; height: auto; }
.wv-route text { font-size: 9px; font-weight: 600; fill: #475467; font-family: inherit; }
.wv-road { fill: none; stroke: #D5E0EA; stroke-width: 8; stroke-linecap: round; }
.wv-road-done { fill: none; stroke: #0096EE; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.wt-panel.is-active .wv-road-done { animation: wv-draw 2.4s ease forwards 0.6s; }
@keyframes wv-draw { to { stroke-dashoffset: 0; } }
.wv-pin-a { fill: #0A3D6B; } .wv-pin-b { fill: #12B76A; stroke: #fff; stroke-width: 2; }
.wv-van rect, .wv-van path { fill: #0096EE; } .wv-van circle { fill: #101828; }
.wv-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.wv-checks li { display: flex; align-items: center; gap: 0.45rem; border: 1px solid #EEF2F6; border-radius: 0.6rem; padding: 0.45rem 0.55rem; font-size: 0.78rem; font-weight: 500; }
.wv-checks li span { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #12B76A; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; flex: none; }
.wt-panel.is-active .wv-checks li { animation: wt-in 0.4s ease both; animation-delay: calc(1.2s + var(--i) * 0.22s); }

/* How the agent worked: four small steps under the agent's message */
.wt-work { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; max-width: 34rem; }
.wt-work li { position: relative; display: grid; gap: 0.15rem; padding: 0.55rem 0.6rem; border-radius: 0.7rem; background: #fff; border: 1px solid #E4EEF6; opacity: 0.45; transition: opacity 0.3s ease, border-color 0.3s ease; }
.wt-work-dot { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #E1F1FD; color: #0077C0; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.wt-work b { font-size: 0.74rem; color: #101828; }
.wt-work em { font-style: normal; font-size: 0.68rem; line-height: 1.35; color: #667085; }
.wt-work li:not(:last-child)::after { content: ""; position: absolute; right: -0.4rem; top: 1.1rem; width: 0.4rem; border-top: 2px dotted #8ACFF7; }
.wt-panel.is-active .wt-work li { animation: wt-work 0.4s ease forwards; animation-delay: calc(0.9s + var(--k) * 0.7s); }
.wt-panel.is-active .wt-work li:last-child .wt-work-dot { animation: wt-work-ok 0.4s ease forwards 3s; }
@keyframes wt-work { to { opacity: 1; border-color: #8ACFF7; } }
@keyframes wt-work-ok { to { background: #12B76A; color: #fff; } }

/* Summary */
.wt-done .wt-copy h2 span { display: block; }
.wt-done-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.wt-summary { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; width: 100%; max-width: 400px; counter-reset: wt; }
.wt-summary li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center; background: #fff; border-radius: 0.75rem; padding: 0.55rem 0.9rem; font-size: 0.88rem; box-shadow: 0 10px 22px -18px rgba(0, 60, 110, 0.6); }
.wt-summary li span { width: 1.9rem; height: 1.9rem; border-radius: 0.55rem; background: #E1F1FD; color: #0096EE; display: flex; align-items: center; justify-content: center; }
.wt-summary li em { font-style: normal; font-size: 0.75rem; color: #667085; }
.wt-panel.is-active .wt-summary li { animation: wt-in 0.4s ease both; animation-delay: calc(0.2s + var(--i) * 0.1s); }

/* Controls */
.wt-controls { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }
.wt-btn { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid #D0D5DD; background: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #344054; display: flex; align-items: center; justify-content: center; }
.wt-btn:hover { border-color: #0096EE; color: #0096EE; }
.wt-btn--play { background: #0096EE; border-color: #0096EE; color: #fff; font-size: 0.75rem; }
.wt-btn--play:hover { color: #fff; background: #0A8BDA; }
.wt-hint { font-size: 0.78rem; color: #667085; margin-left: 0.5rem; }

@media (max-width: 900px) {
  .wt-top-title { display: none; }
  .wt-track { grid-template-columns: repeat(8, 4.4rem); overflow-x: auto; scrollbar-width: none; padding-bottom: 0.3rem; }
  .wt-track::-webkit-scrollbar { display: none; }
  .wt-line { left: 2.2rem; right: auto; width: calc(7 * 4.4rem); }
  .wt-stop-name { font-size: 0.72rem; }
  .wt-stage { min-height: 0; display: grid; }
  .wt-panel { position: relative; inset: auto; grid-area: 1 / 1; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .wt-visual { min-height: 320px; padding: 1.25rem; }
  .wv-make { grid-template-columns: 1fr; justify-items: center; }
  .wt-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wt-panel, .wt-line i, .wt-runner { transition: none; }
  .wv-funnel i, .wv-scan, .t-road, .wv-machines span i { animation: none; }
}

@media (max-width: 900px) {
  .wt-work { grid-template-columns: 1fr 1fr; }
  .wt-work li::after { display: none; }
  .wv-badge--tl { top: 0.6rem; left: 0.6rem; } .wv-badge--br { bottom: 0.6rem; right: 0.6rem; }
  .wt-visual { padding: 3rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .wt-work li { opacity: 1; } .wt-visual::before, .wv-scan { animation: none; } }

/* Closing screen: centred headline and the completed chain of stages */
.wt-done { display: flex; align-items: center; justify-content: center; }
.wt-fin { width: 100%; text-align: center; }
.wt-fin h2 { font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1.04; font-weight: 600; letter-spacing: -0.02em; margin: 0.8rem 0 1rem; }
.wt-fin h2 span { display: block; background: linear-gradient(90deg, #0078BE, #0096EE 40%, #4DC3FA 60%, #0096EE 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wt-shine 5s linear infinite; }
@keyframes wt-shine { to { background-position: -220% 0; } }
.wt-fin > p { font-size: 1.1rem; color: #475467; max-width: 36rem; margin: 0 auto 1.8rem; line-height: 1.6; }
.wt-fin-ctas { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin-bottom: 2.75rem; }
.wt-again { background: none; border: 0; font: inherit; font-size: 0.95rem; font-weight: 500; color: #0077C0; cursor: pointer; }
.wt-again:hover { text-decoration: underline; }
.wt-panel.is-active .wt-fin > * { animation: wt-in 0.6s cubic-bezier(.2, .8, .2, 1) both; }
.wt-panel.is-active .wt-fin > :nth-child(2) { animation-delay: 0.1s; }
.wt-panel.is-active .wt-fin > :nth-child(3) { animation-delay: 0.2s; }
.wt-panel.is-active .wt-fin > :nth-child(4) { animation-delay: 0.3s; }
.wt-panel.is-active .wt-fin > .wt-chain { animation: none; }
.wt-chain { position: relative; list-style: none; margin: 0 auto; padding: 1.4rem 1rem 1.2rem; display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.5rem; max-width: 980px; border-radius: 1.5rem; background: radial-gradient(circle at 1px 1px, rgba(0, 120, 190, 0.12) 1px, transparent 1.6px) 0 0 / 18px 18px, linear-gradient(160deg, #F4FAFF, #DCEEFC); overflow: hidden; }
.wt-chain::before { content: ""; position: absolute; left: 7%; right: 7%; top: 2.9rem; border-top: 2px dashed #8ACFF7; }
.wt-chain li { position: relative; display: grid; justify-items: center; gap: 0.3rem; }
.wt-chain li span { position: relative; width: 3rem; height: 3rem; border-radius: 0.9rem; background: #fff; color: #0096EE; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 24px -16px rgba(0, 60, 110, 0.6); }
.wt-chain li em { position: absolute; right: -5px; top: -5px; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #12B76A; color: #fff; font-style: normal; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.wt-chain b { font-size: 0.82rem; }
.wt-chain small { font-size: 0.68rem; color: #667085; }
.wt-panel.is-active .wt-chain li { animation: wt-in 0.45s ease both; animation-delay: calc(0.45s + var(--i) * 0.1s); }
.wt-panel.is-active .wt-chain li span { animation: wt-lit 0.5s ease forwards; animation-delay: calc(1.4s + var(--i) * 0.18s); }
@keyframes wt-lit { 50% { background: #0096EE; color: #fff; transform: scale(1.12); } 100% { background: #E1F1FD; color: #0077C0; } }
.wt-chain-pulse { position: absolute; top: calc(2.9rem - 6px); left: 7%; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #0096EE, 0 0 18px 6px rgba(0, 150, 238, 0.55); opacity: 0; }
.wt-panel.is-active .wt-chain-pulse { animation: wt-pulse-run 3.2s cubic-bezier(.45, 0, .55, 1) infinite 1.4s; }
@keyframes wt-pulse-run { 0% { left: 7%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 93%; opacity: 0; } }
@media (max-width: 900px) {
  .wt-chain { grid-template-columns: repeat(4, 1fr); row-gap: 1.2rem; }
  .wt-chain::before, .wt-chain-pulse { display: none; }
}