/* Homepage (/). Builds on styles.css and design.css tokens; everything here is prefixed vx-. */
.vx-page {
  --vx-orange: #FF6700;
  --vx-orange-text: #B34700;
  --vx-soft: #FFF4EC;
  --vx-muted: #6B6B68;
  --vx-grey: #D9D9D4;
  --vx-art: #F7F7F5;
}
.vx-page > section { position: relative; }

/* Animations only run while their graphic is on screen (voice-ai.js toggles .is-inview). */
.vx-js [data-anim]:not(.is-inview),
.vx-js [data-anim]:not(.is-inview) * { animation-play-state: paused !important; }

@keyframes vx-wave { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
@keyframes vx-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes vx-pop { from { opacity: 0; transform: translateY(4px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes vx-twinkle { 0%, 100% { opacity: 1; } 45% { opacity: .35; } 55% { opacity: 1; } }
@keyframes vx-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.vx-wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.vx-wave span { width: 3px; height: 100%; border-radius: 2px; background: var(--vx-orange); animation: vx-wave 1s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -83ms); }
.vx-wave span:nth-child(3n) { animation-duration: .8s; }
.vx-wave span:nth-child(3n+1) { animation-duration: 1.2s; }
.vx-typing { display: inline-flex; gap: 4px; align-items: center; }
.vx-typing i { width: 5px; height: 5px; border-radius: 1px; background: currentColor; animation: vx-blink 1s ease-in-out infinite; }
.vx-typing i:nth-child(2) { animation-delay: .15s; }
.vx-typing i:nth-child(3) { animation-delay: .3s; }

/* ---------------- Hero ---------------- */
/* On desktop the hero fills the first screen (up to 1000px) and its type scales with screen height,
   so every laptop and monitor sees the headline, the CTA and the whole console sitting on the city. */
.vx-hero { min-height: min(100vh, 1000px); min-height: min(100svh, 1000px); padding: calc(73px + clamp(24px, 6vh, 72px)) 32px clamp(28px, 5vh, 56px); }
/* on desktop the copy shares the spare height equally with the gap above the console, so it sits centred rather than tucked under the header */
.vx-hero .hero-inner { gap: clamp(16px, 2.8vh, 28px); margin-top: auto; }
/* the headline also shrinks on short laptop screens so the console still fits in the first screen */
.vx-hero h1 { max-width: 980px; font-size: clamp(48px, min(5.4vw, 8.4vh), var(--ds-h1)); letter-spacing: -.05em; }
.vx-hero p.lead { max-width: 760px; font-size: clamp(17px, 2.4vh, 20px); line-height: 1.45; }
.vx-hero .hero-cta { margin-top: clamp(0px, 1.2vh, 12px); }

.vx-console-wrap { position: relative; z-index: 1; width: 100%; max-width: 880px; margin-top: auto; padding-top: clamp(28px, 5vh, 64px); }
.vx-console {
  position: relative;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  grid-template-areas: "dial top" "dial stages" "dial status";
  column-gap: 36px;
  align-items: center;
  padding: 28px 32px 28px 28px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 32px 70px -34px rgba(20,20,20,.3);
  text-align: left;
}
/* two queued leads peeking out underneath */
.vx-console::before, .vx-console::after {
  content: "";
  position: absolute;
  left: 22px; right: 22px; bottom: -10px;
  height: 24px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: #FCFCFA;
  z-index: -1;
}
.vx-console::after { left: 46px; right: 46px; bottom: -20px; background: #F5F5F2; }

.vx-dial { grid-area: dial; position: relative; width: 160px; height: 160px; }
.vx-dial svg { width: 100%; height: 100%; overflow: visible; }
.vx-tick { stroke: #E4E4DF; stroke-width: 2; stroke-linecap: round; transition: stroke .12s ease; }
.vx-tick.major { stroke: #C9C9C2; stroke-width: 2.6; }
.vx-tick.is-on { stroke: var(--vx-orange); }
.vx-dial-ping { fill: none; stroke: var(--vx-orange); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.vx-console.is-calling .vx-dial-ping { animation: vx-ping 1.6s cubic-bezier(.2,.6,.3,1) infinite; }
.vx-console.is-calling .vx-dial-ping-2 { animation-delay: .8s; }
@keyframes vx-ping { 0% { opacity: .6; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.14); } }
.vx-dial-readout { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.vx-dial-readout strong { font: 500 30px/1 'Geist Mono', monospace; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; color: var(--dark); }
.vx-dial-readout span { font-size: 12px; line-height: 1.2; letter-spacing: -.1px; color: var(--vx-muted); }

.vx-console-top { grid-area: top; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.vx-lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; transition: opacity .3s ease, transform .3s ease; }
.vx-lead-src { flex-basis: 100%; margin-bottom: 2px; font-size: 13px; line-height: 1.4; letter-spacing: -.1px; color: var(--vx-muted); }
.vx-lead-src b { font-weight: 500; color: var(--dark); }
.vx-lead strong { font-size: 24px; font-weight: 500; letter-spacing: -.8px; }
.vx-lead-need { font-size: 16px; color: var(--ds-muted, #6B6B68); }

.vx-stages { --p: 0; grid-area: stages; position: relative; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 22px 0 18px; }
.vx-stages::before, .vx-stages::after { content: ""; position: absolute; top: 5px; left: 6px; height: 2px; border-radius: 2px; }
.vx-stages::before { width: 80%; background: var(--line); }
.vx-stages::after { width: calc(80% * var(--p)); background: var(--dark); transition: width .6s cubic-bezier(.4,0,.2,1); }
.vx-stages li { position: relative; z-index: 1; padding-top: 22px; font-size: 13px; letter-spacing: -.2px; color: var(--ds-muted, #6B6B68); transition: color .3s ease; }
.vx-stages li::before { content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 3px; background: #FFFFFF; border: 2px solid var(--vx-grey); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.vx-stages li.is-done { color: var(--dark); }
.vx-stages li.is-done::before { background: var(--dark); border-color: var(--dark); }
.vx-stages li.is-current::before { background: var(--vx-orange); border-color: var(--vx-orange); box-shadow: 0 0 0 5px rgba(255,103,0,.18); }

.vx-status { grid-area: status; min-height: 50px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; border-radius: 10px; background: var(--tint); font-size: 15px; line-height: 1.4; letter-spacing: -.2px; transition: opacity .3s ease, transform .3s ease; }
.vx-status .vx-wave { height: 18px; }
.vx-status-icon { width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px; }
.vx-status-new { background: var(--vx-orange); animation: vx-blink 1.2s ease-in-out infinite; }
.vx-status-done { background: var(--vx-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.vx-status-label { font: 500 11px/1 'Geist Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--vx-orange); }
.vx-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--line); font-size: 13px; white-space: nowrap; animation: vx-pop .35s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--i, 0) * 260ms); }
.vx-console.is-swapping .vx-lead,
.vx-console.is-swapping .vx-status { opacity: 0; transform: translateY(6px); }

/* Photo hero (heroTone: light): the console becomes dark frosted glass so the painting glows through it.
   White carries the reading; orange marks only what is happening now (dial progress, current stage, the check). */
.vx-hero-light .vx-console { color: #FCFCFC; background: rgba(12,12,12,.64); border-color: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 40px 90px -40px rgba(0,0,0,.75); }
.vx-hero-light .vx-console::before, .vx-hero-light .vx-console::after { display: none; }
.vx-hero-light .vx-tick { stroke: rgba(255,255,255,.16); }
.vx-hero-light .vx-tick.major { stroke: rgba(255,255,255,.36); }
.vx-hero-light .vx-tick.is-on { stroke: var(--vx-orange); }
.vx-hero-light .vx-dial-readout strong { color: #FFFFFF; }
.vx-hero-light .vx-dial-readout span, .vx-hero-light .vx-lead-src { color: rgba(255,255,255,.66); }
.vx-hero-light .vx-lead-src b { color: rgba(255,255,255,.92); }
.vx-hero-light .vx-lead-need { color: rgba(255,255,255,.7); }
.vx-hero-light .vx-stages::before { background: rgba(255,255,255,.18); }
.vx-hero-light .vx-stages::after { background: rgba(255,255,255,.85); }
.vx-hero-light .vx-stages li { color: rgba(255,255,255,.5); }
.vx-hero-light .vx-stages li.is-done { color: rgba(255,255,255,.92); }
.vx-hero-light .vx-stages li::before { background: transparent; border-color: rgba(255,255,255,.34); }
.vx-hero-light .vx-stages li.is-done::before { background: #FFFFFF; border-color: #FFFFFF; }
.vx-hero-light .vx-stages li.is-current::before { background: var(--vx-orange); border-color: var(--vx-orange); box-shadow: 0 0 0 5px rgba(255,103,0,.25); }
.vx-hero-light .vx-status { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: #FFFFFF; }
.vx-hero-light .vx-chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); color: #FFFFFF; }

/* ---------------- Problem ---------------- */
.vx-problem { background: var(--tint); }
.vx-reasons { width: 100%; max-width: 1056px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vx-reason { display: flex; flex-direction: column; gap: 24px; padding: 14px 14px 30px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; }
.vx-reason h3 { padding: 0 14px; font-size: 24px; line-height: 1.2; letter-spacing: -.8px; text-wrap: balance; }
.vx-vignette { position: relative; height: 200px; padding: 16px; border-radius: 8px; background: var(--vx-art); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.vx-vignette > svg { width: 100%; flex: 1; min-height: 0; }
.vx-svg-label { font: 500 9px 'Geist Mono', monospace; letter-spacing: .04em; fill: #8A8A85; }

.vx-js .vx-cool-px { opacity: 0; transform: translateY(6px); transition: opacity .4s ease var(--d), transform .4s ease var(--d); }
.vx-js .has-entered .vx-cool-px { opacity: 1; transform: none; }
.vx-cool-scan { fill: var(--dark); opacity: 0; animation: vx-scan 4.5s cubic-bezier(.45,0,.55,1) infinite 1.2s; }
@keyframes vx-scan { 0% { opacity: .55; transform: translateX(0); } 82% { opacity: .55; transform: translateX(214px); } 92%, 100% { opacity: 0; transform: translateX(214px); } }

.vx-dot { transform-box: fill-box; transform-origin: center; }
.vx-js .vx-dot { transform: scale(0); transition: transform .35s cubic-bezier(.3,1.5,.5,1) var(--d); }
.vx-js .has-entered .vx-dot { transform: none; }
.vx-dot.is-done { fill: var(--dark); }
.vx-dot.is-missed { fill: none; stroke: #BDBDB6; stroke-width: 1.4; stroke-dasharray: 2.6 2.2; animation: vx-miss 3.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes vx-miss { 0%, 68%, 100% { stroke: #BDBDB6; } 78% { stroke: var(--vx-orange); } }
.vx-grid-key { display: flex; gap: 16px; font: 500 10px 'Geist Mono', monospace; color: var(--vx-muted); }
.vx-grid-key span { display: inline-flex; align-items: center; gap: 6px; }
.vx-grid-key i { width: 9px; height: 9px; border-radius: 50%; }
.vx-grid-key i.is-done { background: var(--dark); }
.vx-grid-key i.is-missed { border: 1.4px dashed #BDBDB6; }

.vx-vignette-night { background: #1E1E1E; justify-content: flex-end; padding-bottom: 0; }
.vx-vignette > .vx-moon { position: absolute; top: 16px; left: 18px; width: 48px; height: 48px; flex: none; }
.vx-moon path { fill: #FCFCFC; opacity: .88; }
.vx-star { fill: #FCFCFC; animation: vx-twinkle 2.4s ease-in-out infinite; }
.vx-star-2 { animation-delay: .8s; }
.vx-star-3 { animation-delay: 1.6s; }
.vx-phone { position: relative; width: 142px; height: 150px; margin-bottom: -12px; padding: 20px 9px 0; border: 3px solid #3A3A37; border-bottom: 0; border-radius: 20px 20px 0 0; background: #2A2A28; display: flex; flex-direction: column; gap: 6px; }
.vx-phone::before { content: ""; position: absolute; top: 8px; left: 50%; width: 34px; height: 5px; border-radius: 3px; background: #3A3A37; transform: translateX(-50%); }
.vx-note { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 7px 9px 7px 20px; border-radius: 8px; background: #FCFCFC; font-size: 11px; line-height: 1.2; animation: vx-note 7s ease infinite; animation-delay: calc(var(--i) * 1.1s); }
.vx-note::before { content: ""; position: absolute; left: 8px; top: 10px; width: 6px; height: 6px; border-radius: 2px; background: var(--vx-orange); }
.vx-note b { font-weight: 600; color: var(--dark); }
.vx-note span { font: 500 9.5px 'Geist Mono', monospace; color: var(--vx-muted); }
.vx-js .vx-note { opacity: 0; }
@keyframes vx-note { 0% { opacity: 0; transform: translateY(-8px) scale(.96); } 6%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: scale(.98); } }
.vx-night-badge { position: absolute; top: 20px; right: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: rgba(252,252,252,.1); border: 1px solid rgba(252,252,252,.16); color: #FCFCFC; font: 500 10px/1 'Geist Mono', monospace; letter-spacing: .04em; animation: vx-badge 7s ease infinite; }
.vx-night-badge::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--vx-orange); }
.vx-js .vx-night-badge { opacity: 0; }
@keyframes vx-badge { 0%, 42% { opacity: 0; transform: translateY(-4px); } 48%, 74% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; } }

/* Experiment (problemArt: painting): the terrace painting as a strip, with frosted cards rising out of its lower half. */
.vx-scene { width: 100%; max-width: 1056px; display: flex; flex-direction: column; align-items: center; }
.vx-scene .vx-reasons { position: relative; z-index: 1; margin-top: clamp(-200px, -17vw, -90px); padding: 0 32px; }
.vx-scene .vx-reason { border-color: rgba(255,255,255,.6); background: rgba(252,252,250,.82); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); box-shadow: 0 28px 56px -30px rgba(20,20,20,.35); }
.vx-scene .vx-vignette:not(.vx-vignette-night) { background: rgba(244,244,241,.92); }

/* ---------------- Scroll reveal + response race ---------------- */
.vx-reveal {
  --rv-ink: #141414; --rv-sub: rgba(20,20,20,.72); --rv-near: rgba(20,20,20,.42); --rv-off: rgba(20,20,20,.14);
  --rv-card: #FFFFFF; --rv-card-solid: #FFFFFF; --rv-line: var(--line);
  --rv-track: #EDEDE8; --rv-fill: #CFCFC8; --rv-never: #B9B9B2;
  height: 220vh;
}
.vx-reveal .reveal-inner { gap: 22px; }
.vx-reveal .eyebrow-label { color: var(--rv-sub); }
.vx-dusk-text { max-width: 980px; font-size: 38px; font-weight: 500; line-height: 1.14; letter-spacing: -1.4px; color: var(--rv-ink); }
.vx-js .vx-dusk-text span { color: var(--rv-off); transition: color .3s ease; }
.vx-js .vx-dusk-text span.is-near { color: var(--rv-near); }
.vx-js .vx-dusk-text span.is-lit { color: var(--rv-ink); }
.vx-race { width: 100%; max-width: 980px; margin-top: 10px; padding: 20px 24px 16px; border: 1px solid var(--rv-line); border-radius: 12px; background: var(--rv-card); box-shadow: 0 24px 48px -36px rgba(20,20,20,.25); }
.vx-race-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; font: 500 11px/1.4 'Geist Mono', monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--rv-sub); }
.vx-race-clock { flex-shrink: 0; color: var(--rv-ink); font-variant-numeric: tabular-nums; }
.vx-lane { --w: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: center; padding: 6px 0; }
.vx-lane-name { font-size: 14px; font-weight: 500; letter-spacing: -.2px; color: var(--rv-sub); }
.vx-lane.is-you .vx-lane-name { color: var(--rv-ink); }
.vx-lane-track { position: relative; height: 26px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--rv-track) 0 6px, transparent 6px 10px); }
.vx-lane-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 100%); border-radius: 6px; background: var(--rv-fill); }
.vx-lane.is-you .vx-lane-fill { background: var(--vx-orange); }
.vx-lane.is-never .vx-lane-fill { background: repeating-linear-gradient(90deg, var(--rv-never) 0 3px, transparent 3px 9px); }
.vx-lane-result { position: absolute; top: 50%; left: calc(var(--w) * 100%); transform: translate(10px, -50%); white-space: nowrap; font-size: 13px; font-weight: 500; letter-spacing: -.2px; color: var(--rv-ink); opacity: 0; transition: opacity .3s ease; }
.vx-lane.is-inside .vx-lane-result { left: auto; right: calc((1 - var(--w)) * 100%); transform: translate(-6px, -50%); padding: 2px 6px; border-radius: 4px; }
.vx-lane.is-never .vx-lane-result { background: var(--rv-card-solid); color: var(--rv-sub); }
.vx-lane.is-done .vx-lane-result { opacity: 1; }
.vx-lane.is-you.is-done .vx-lane-result { color: var(--vx-orange-text); }
.vx-race-axis { display: flex; justify-content: space-between; margin: 8px 0 0 216px; font: 500 10px 'Geist Mono', monospace; letter-spacing: .04em; color: var(--rv-sub); }

/* ---------------- What we build: the two systems ---------------- */
/* Cards reuse the homepage system-card; each gets an animated diagram on top. */
/* Each system is a chapter: copy on one side, its painted scene on the other, with the live diagram
   floating over the painting's lower edge. System 02 mirrors 01 and follows the demo call. */
.vx-systems { background: var(--tint); }
.vx-systems { padding-bottom: 40px; }
.vx-svc + .vx-svc { margin-top: 120px; }
.vx-sys-index { display: inline-flex; margin-top: 8px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; }
.vx-sys-index a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; color: var(--dark); font-size: 14px; font-weight: 500; letter-spacing: -.2px; text-decoration: none; transition: background .2s ease; }
.vx-sys-index a:hover { background: var(--tint); }
.vx-sys-index a:focus-visible { outline: 2px solid var(--vx-orange); outline-offset: 2px; }
.vx-sys-index span { font: 500 11px/1 'Geist Mono', monospace; color: var(--vx-orange-text); }
.vx-svc { width: 100%; max-width: 1056px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; scroll-margin-top: 96px; }
.vx-svc.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.vx-svc.is-flip .vx-svc-stage { order: -1; }
.vx-svc-copy .system-num { color: var(--vx-orange-text); }
.vx-svc-copy h3 { margin-top: 18px; font-size: 40px; line-height: 1.06; letter-spacing: -1.6px; text-wrap: balance; }
.vx-svc-copy p { margin-top: 20px; font-size: 17px; line-height: 1.65; letter-spacing: -.2px; color: var(--ds-text, rgba(20,20,20,.75)); }
.vx-svc-copy .system-tags { margin-top: 26px; }
.vx-svc-copy .vx-svc-cta { margin-top: 24px; }
.vx-svc-copy .vx-svc-cta + p { margin-top: 24px; }
.vx-svc-stage { position: relative; display: flex; flex-direction: column; }
.vx-sys-art { position: relative; height: 290px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; overflow: hidden; }
.vx-strip-panel + .vx-sys-art { z-index: 3; margin: -112px 28px 0; border-color: rgba(255,255,255,.75); background: rgba(252,252,250,.9); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 30px 60px -30px rgba(20,20,20,.4); }
.vx-in-label { font: 500 10px/1 'Geist Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-muted); }

/* 01: enquiries flow from their sources through the agent into the CRM */
.vx-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(22px, 4.5vw, 60px); }
.vx-in-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vx-in-wires .w { fill: none; stroke: #D3D3CC; stroke-width: 1.2; }
.vx-in-wires .p { fill: none; stroke: var(--vx-orange); stroke-width: 2; stroke-linecap: round; stroke-dasharray: .16 2; stroke-dashoffset: .16; }
.vx-in-src { position: relative; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.vx-in-src li { padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px; background: #FFFFFF; font: 500 11px/1 'Geist Mono', monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: border-color .3s ease, box-shadow .3s ease; }
.vx-in-src li.is-lit { border-color: var(--vx-orange); box-shadow: 0 0 0 3px rgba(255,103,0,.14); }
.vx-in-agent { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vx-in-box { position: relative; width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 6px; background: var(--dark); box-shadow: 0 16px 30px -18px rgba(20,20,20,.6); }
.vx-in-box::before { content: ""; position: absolute; left: -5px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 2px; background: var(--dark); }
.vx-in-box span { width: 3px; height: 14px; border-radius: 1px; background: #FCFCFC; transform: scaleY(.45); }
.vx-in-box.is-talking span { animation: vx-wave .8s ease-in-out infinite; animation-delay: calc(var(--n) * -90ms); }
.vx-in-box.is-talking span:nth-child(odd) { animation-duration: .65s; }
.vx-in-crm { position: relative; padding: 14px 14px 10px; border: 1px solid var(--line); border-radius: 6px; background: #FFFFFF; }
.vx-in-crm ol { list-style: none; margin-top: 12px; }
.vx-in-crm li { display: flex; align-items: center; gap: 10px; height: 10px; margin-bottom: 9px; transition: opacity .35s ease; }
.vx-in-crm li i { width: 7px; height: 7px; flex-shrink: 0; background: var(--dark); transition: background .5s ease; }
.vx-in-crm li b { height: 3px; border-radius: 2px; background: #D3D3CC; }
.vx-in-crm li.is-new { animation: vx-row-in .45s cubic-bezier(.2,.8,.2,1) both; }
.vx-in-crm li.is-new i { background: var(--vx-orange); }
.vx-in-crm li.is-new b { transform-origin: left; animation: vx-grow .6s ease .15s both; }
.vx-in-crm li.is-out { opacity: 0; }
@keyframes vx-row-in { from { height: 0; margin-bottom: 0; opacity: 0; } }

/* 02: a scan sweeps the dormant database and sorts every record */
.vx-db { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.vx-db-head, .vx-db-legend { display: flex; justify-content: space-between; gap: 12px; font: 500 10.5px/1.2 'Geist Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-muted); }
.vx-db-head b, .vx-db-legend b { display: inline-block; min-width: 3ch; font-weight: 500; color: var(--dark); font-variant-numeric: tabular-nums; }
.vx-db-grid { display: block; width: 100%; height: auto; }
.vx-db-grid rect[data-db-cell] { transition: fill .3s ease, stroke .3s ease; }
.vx-db-grid .s-b { fill: var(--vx-orange); }
.vx-db-grid .s-q { fill: var(--dark); }
.vx-db-grid .s-c { fill: #FFFFFF; stroke: #D3D3CC; stroke-width: 1; }
.vx-db-grid rect.is-pending { fill: #E8E8E3; stroke: transparent; }
.vx-db-scan { fill: var(--vx-orange); opacity: 0; transition: transform .1s linear, opacity .3s ease; }
.vx-db.is-scanning .vx-db-scan { opacity: .14; }
.vx-db-legend { justify-content: flex-start; flex-wrap: wrap; gap: 8px 26px; list-style: none; }
.vx-db-legend li { display: inline-flex; align-items: center; gap: 8px; }
.vx-db-legend i { width: 9px; height: 9px; }
.vx-db-legend .s-b { background: var(--vx-orange); }
.vx-db-legend .s-q { background: var(--dark); }
.vx-db-legend .s-c { background: #FFFFFF; border: 1px solid #D3D3CC; }

/* ---------------- How it works: one enquiry followed through four steps ---------------- */
/* voice-ai.js moves .is-active along the steps; earlier steps get .is-done.
   Default styles are the finished state, so the cards read correctly without JS or with reduced motion. */
.vx-journey-section { background: var(--bg); }
.vx-journey { width: 100%; max-width: 1056px; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vx-jstep { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 22px; row-gap: 12px; padding: 12px 12px 12px 26px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease; }
/* the active step's top line fills orange over the step's duration; finished steps keep a full dark line */
.vx-jstep.is-active { border-color: #FFCFAD; box-shadow: 0 26px 50px -32px rgba(255,103,0,.5); transform: translateY(-4px); }
.vx-jrule { grid-column: 1 / -1; height: 3px; margin: 0 2px 0 -12px; border-radius: 3px; background: #ECECE7; overflow: hidden; }
.vx-jrule span { display: block; height: 100%; background: var(--dark); transform-origin: left; }
.vx-jstep.is-active .vx-jrule span { background: var(--vx-orange); animation: vx-rule var(--dur, 4s) linear both; }
@keyframes vx-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vx-js .vx-jstep:not(.is-done):not(.is-active) .vx-jrule span { transform: scaleX(0); }
.vx-jcopy { display: flex; flex-direction: column; justify-content: center; padding: 14px 0; }

.vx-jart { position: relative; min-height: 220px; padding: 14px; border-radius: 8px; background: var(--vx-art); overflow: hidden; }
.vx-jnum { font: 500 12px/1 'Geist Mono', monospace; letter-spacing: .06em; color: var(--vx-muted); transition: color .3s ease; }
.vx-jstep.is-active .vx-jnum { color: var(--vx-orange-text); }
.vx-jstep h3 { margin-top: 12px; font-size: 22px; line-height: 1.2; letter-spacing: -.6px; text-wrap: balance; }
.vx-jcopy p { margin-top: 10px; font-size: 15px; line-height: 1.6; letter-spacing: -.1px; color: var(--ds-text, rgba(20,20,20,.75)); }
/* waiting steps (JS on, not reached yet) */
.vx-js .vx-jstep:not(.is-done):not(.is-active) :is(.vx-j1-lead, .vx-j1-picked, .vx-q b, .vx-q i, .vx-j4-assign) { opacity: 0; }
.vx-js .vx-jstep:not(.is-done):not(.is-active) .vx-j4-lines i { transform: scaleX(0); }
.vx-js .vx-jstep:not(.is-done):not(.is-active) .vx-j4-pill { background: #E6E6E1; color: #55554F; }
.vx-js .vx-jstep:not(.is-done):not(.is-active) .vx-j4-slots .is-pick { background: #FFFFFF; border-color: var(--line); color: var(--vx-muted); }
@keyframes vx-in-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* 1: the enquiry lands in the CRM */
.vx-j1 { display: flex; flex-direction: column; align-items: center; }
.vx-j1-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.vx-src { padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; background: #FFFFFF; font-size: 10.5px; font-weight: 500; color: var(--ds-muted, #6B6B68); white-space: nowrap; transition: border-color .3s ease, color .3s ease, box-shadow .3s ease; }
.vx-src.is-lit { border-color: var(--vx-orange); color: var(--dark); box-shadow: 0 0 0 3px rgba(255,103,0,.14); }
.vx-j1-wire { position: relative; flex-shrink: 0; width: 2px; height: 18px; margin: 6px 0; background: repeating-linear-gradient(180deg, #C9C9C2 0 3px, transparent 3px 6px); }
.vx-j1-wire i { position: absolute; left: -2px; top: 0; width: 6px; height: 6px; border-radius: 2px; background: var(--vx-orange); opacity: 0; }
.vx-jstep.is-active .vx-j1-wire i { animation: vx-drop .7s ease-in .3s both; }
@keyframes vx-drop { 0% { top: -2px; opacity: 0; } 25% { opacity: 1; } 85% { top: 14px; opacity: 1; } 100% { top: 14px; opacity: 0; } }
.vx-j1-crm { position: relative; width: 100%; flex: 1; min-height: 0; padding: 28px 8px 8px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; }
.vx-j1-crm-label { position: absolute; top: 10px; left: 9px; font: 500 9px/1 'Geist Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-muted); }
.vx-j1-lead { display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; border-left: 2px solid var(--vx-orange); border-radius: 6px; background: var(--vx-art); }
.vx-jstep.is-active .vx-j1-lead { animation: vx-in-down .45s cubic-bezier(.2,.8,.2,1) 1s both; }
.vx-j1-new { font: 500 9px/1.3 'Geist Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--vx-orange-text); }
.vx-j1-lead strong { font-size: 13px; font-weight: 500; }
.vx-j1-need { font-size: 11px; line-height: 1.35; color: var(--vx-muted); }
.vx-j1-need b { font-weight: 500; color: var(--dark); }
.vx-j1-picked { position: absolute; top: 5px; right: 6px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 5px; border-radius: 999px; background: var(--dark); color: #FCFCFC; font-size: 9.5px; font-weight: 500; white-space: nowrap; }
.vx-j1-picked img { width: 10px; height: 10px; }
.vx-jstep.is-active .vx-j1-picked { animation: vx-pop .35s cubic-bezier(.3,1.4,.5,1) 1.8s both; }

/* 2: called within 60 seconds */
.vx-j2 { display: flex; flex-direction: column; gap: 12px; }
.vx-j2-top { display: flex; align-items: center; gap: 12px; }
.vx-j2-icon { position: relative; width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--dark); }
.vx-j2-icon svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: #FCFCFC; stroke-width: 1.6; stroke-linejoin: round; transition: opacity .3s ease; }
.vx-j2-icon::before, .vx-j2-icon::after { content: ""; position: absolute; inset: -1px; border: 1.5px solid var(--vx-orange); border-radius: 12px; opacity: 0; }
.vx-j2.is-ringing .vx-j2-icon::before { animation: vx-ring-out 1.2s ease-out infinite; }
.vx-j2.is-ringing .vx-j2-icon::after { animation: vx-ring-out 1.2s ease-out .6s infinite; }
@keyframes vx-ring-out { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.65); } }
.vx-j2-meta { min-width: 0; }
.vx-j2-meta strong { display: block; font-size: 14px; font-weight: 500; letter-spacing: -.2px; }
.vx-j2-meta span { font: 500 10.5px/1.4 'Geist Mono', monospace; color: var(--vx-muted); font-variant-numeric: tabular-nums; }
.vx-j2-bubble { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; background: #FFFFFF; box-shadow: 0 10px 22px -16px rgba(20,20,20,.3); transition: opacity .35s ease, transform .35s ease; }
.vx-js .vx-j2:not(.is-connected) .vx-j2-bubble { opacity: 0; transform: translateY(6px); }
.vx-j2-lang { font: 500 9px/1 'Geist Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-orange-text); }
.vx-j2-bubble p { margin-top: 5px; font-size: 13px; line-height: 1.4; }
.vx-j2-note { display: flex; align-items: center; gap: 7px; margin-top: auto; font-size: 11px; line-height: 1.35; color: var(--vx-muted); }
.vx-j2-note i { width: 7px; height: 7px; flex-shrink: 0; border-radius: 2px; background: var(--vx-orange); }

/* 3: the qualification questions tick off one by one */
.vx-j3 { display: flex; flex-direction: column; justify-content: center; }
.vx-j3-list { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.vx-q { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 8px; height: 24px; padding: 0 8px; font-size: 11.5px; }
.vx-q::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: #FFFFFF; opacity: 0; }
.vx-q span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--vx-muted); }
.vx-q b { font-weight: 500; white-space: nowrap; }
.vx-q i { width: 14px; height: 14px; border-radius: 4px; background: var(--vx-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat; }
.vx-jstep.is-active .vx-q::before { animation: vx-q-hl .9s ease calc(var(--i) * .55s + .25s) both; }
.vx-jstep.is-active .vx-q b { animation: vx-pop .3s ease calc(var(--i) * .55s + .45s) both; }
.vx-jstep.is-active .vx-q i { animation: vx-pop .3s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * .55s + .55s) both; }
@keyframes vx-q-hl { 0% { opacity: 0; } 25%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* 4: the qualified lead lands with the sales team */
.vx-j4 { display: flex; align-items: center; }
.vx-j4-record { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; box-shadow: 0 12px 26px -18px rgba(20,20,20,.3); }
.vx-j4-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vx-j4-top strong { font-size: 14px; font-weight: 500; }
.vx-j4-pill { padding: 4px 8px; border-radius: 999px; background: var(--vx-orange); color: #FFFFFF; font: 500 9.5px/1.2 'Geist Mono', monospace; letter-spacing: .05em; text-transform: uppercase; transition: background .3s ease, color .3s ease; }
.vx-jstep.is-active .vx-j4-pill { animation: vx-pill .4s ease .3s both; }
@keyframes vx-pill { from { background: #E6E6E1; color: var(--vx-muted); } to { background: var(--vx-orange); color: #FFFFFF; } }
.vx-j4-row { display: flex; flex-direction: column; gap: 6px; }
.vx-j4-label { font: 500 9px/1 'Geist Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-muted); }
.vx-j4-slots { display: flex; gap: 4px; }
.vx-j4-slots span { flex: 1; padding: 5px 0; border: 1px solid var(--line); border-radius: 6px; font-size: 10.5px; text-align: center; white-space: nowrap; color: var(--vx-muted); }
.vx-j4-slots .is-pick { background: var(--dark); border-color: var(--dark); color: #FCFCFC; }
.vx-jstep.is-active .vx-j4-slots .is-pick { animation: vx-pick .35s ease 1s both; }
@keyframes vx-pick { from { background: #FFFFFF; border-color: var(--line); color: var(--vx-muted); transform: scale(1); } 60% { transform: scale(1.08); } to { background: var(--dark); border-color: var(--dark); color: #FCFCFC; transform: none; } }
.vx-j4-lines { display: flex; flex-direction: column; gap: 4px; }
.vx-j4-lines i { height: 5px; border-radius: 3px; background: #E3E3DE; transform-origin: left; }
.vx-j4-lines i:nth-child(2) { width: 84%; }
.vx-j4-lines i:nth-child(3) { width: 58%; }
.vx-jstep.is-active .vx-j4-lines i { animation: vx-grow .5s ease both; animation-delay: calc(1.5s + var(--k, 0) * .18s); }
.vx-j4-lines i:nth-child(2) { --k: 1; }
.vx-j4-lines i:nth-child(3) { --k: 2; }
@keyframes vx-grow { from { transform: scaleX(0); } to { transform: none; } }
.vx-j4-assign { display: flex; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 500; }
.vx-j4-avatar { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: var(--vx-soft); color: var(--vx-orange-text); font: 600 8.5px/1 'Geist Mono', monospace; }
.vx-jstep.is-active .vx-j4-assign { animation: vx-pop .35s ease 2.4s both; }

/* No answer? It calls again. */
.vx-retry { width: 100%; max-width: 1056px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; padding: 36px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; }
.vx-subhead { margin: 104px 0 40px; }
.vx-subhead h3 { max-width: 760px; font-size: 40px; line-height: 1.1; letter-spacing: -1.6px; text-wrap: balance; }
.vx-retry-copy { display: flex; flex-direction: column; align-items: flex-start; }
.vx-retry-label { font-size: 13px; color: var(--vx-muted); }
.vx-retry-big { margin-top: 6px; font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -.8px; }

.vx-retry-key { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); align-self: stretch; font-size: 13px; color: var(--vx-muted); }
.vx-retry-key li { display: inline-flex; align-items: center; gap: 7px; }
.vx-retry-key i { width: 10px; height: 10px; border-radius: 3px; }
.vx-retry-key .k-call { background: var(--dark); }
.vx-retry-key .k-msg { width: 7px; height: 7px; border: 1.5px solid var(--vx-orange); border-radius: 2px; }
.vx-retry-key .k-pick { background: var(--vx-orange); }
.vx-retry-chart svg { display: block; width: 100%; height: auto; }
.vx-rt-band { fill: var(--vx-art); stroke: var(--line); }
.vx-rt-axis { font: 500 10px 'Geist Mono', monospace; fill: #8A8A85; }
.vx-rt-grid { stroke: #E6E6E1; stroke-dasharray: 2 4; }
.vx-rt-path { fill: none; stroke: #CFCFC8; stroke-width: 1.2; stroke-dasharray: 3 4; }
.vx-rt-head { stroke: var(--vx-orange); stroke-width: 1.5; opacity: 0; transition: transform .7s cubic-bezier(.5,0,.2,1), opacity .3s ease; }
.vx-retry.is-running .vx-rt-head { opacity: 1; }
.vx-rt-att .call { fill: #FFFFFF; stroke: #BDBDB6; stroke-width: 1.4; stroke-dasharray: 3 2; transition: fill .3s ease, stroke .3s ease; }
.vx-rt-att .ring { fill: none; stroke: var(--vx-orange); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.vx-rt-att .msg { fill: none; stroke: var(--vx-orange); stroke-width: 1.4; opacity: 0; transition: opacity .3s ease .2s; }
.vx-rt-att .lbl { font: 600 11px 'Geist', sans-serif; fill: var(--vx-orange-text); opacity: 0; transition: opacity .3s ease; }
.vx-rt-att.is-ringing .call { stroke: var(--vx-orange); stroke-dasharray: none; }
.vx-rt-att.is-ringing .ring { animation: vx-ring-out .9s ease-out infinite; }
.vx-rt-att.is-missed .call { fill: var(--dark); stroke: var(--dark); stroke-dasharray: none; }
.vx-rt-att.is-missed .msg { opacity: 1; }
.vx-rt-att.is-picked .call { fill: var(--vx-orange); stroke: var(--vx-orange); stroke-dasharray: none; }
.vx-rt-att.is-picked .lbl { opacity: 1; }
.vx-rt-att.is-cancelled { opacity: .3; }
.vx-rt-att { transition: opacity .4s ease; }
.vx-retry-status { min-height: 70px; margin-top: 22px; padding: 12px 14px; align-self: stretch; border-radius: 8px; background: var(--vx-art); font-size: 14px; line-height: 1.5; color: var(--dark); }

/* Works with: its own full-width band between How it works and Why Escalay, with rules running edge to edge. */
.vx-works-band { padding: 36px 32px; background: #FFFFFF; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vx-works { width: 100%; max-width: 1056px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.vx-works-label { flex-shrink: 0; font: 500 11px 'Geist Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-muted); }
.vx-works-logos { flex: 1; list-style: none; display: flex; align-items: center; justify-content: space-around; gap: 24px 40px; flex-wrap: wrap; }
.vx-works-logos img { display: block; width: auto; }
.vx-works-logos .l-icon { height: 30px; }
.vx-works-logos .l-salesforce { height: 36px; }
.vx-works-logos .l-selldo { height: 30px; }
.vx-works-logos .l-exotel { height: 22px; }
.vx-works-logos .l-mcube { height: 20px; }

/* ---------------- Mid-page booking prompt (under the follow-up schedule) ---------------- */
.vx-demo-cta { width: 100%; max-width: 1056px; margin-top: 44px; display: flex; justify-content: center; align-items: center; gap: 20px; }
.vx-demo-cta p { font-size: 18px; letter-spacing: -.3px; color: var(--ds-text, rgba(20,20,20,.75)); }

/* ---------------- Why Escalay ---------------- */
.vx-why { background: var(--tint); color: var(--dark); }
.vx-why-grid { width: 100%; max-width: 1056px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.vx-why-copy h2 { margin: 16px 0 26px; font-size: var(--ds-h2); line-height: 1.04; letter-spacing: -.05em; }
.vx-why-lead { margin-bottom: 18px; font-size: 22px; line-height: 1.45; letter-spacing: -.4px; }
.vx-why-copy p:not(.vx-why-lead) { font-size: 17px; line-height: 1.7; color: var(--ds-text, rgba(20,20,20,.75)); }
/* scattered pixels assemble into one skyline, bottom row first; voice-ai.js sets each pixel's delays */
.vx-focus { padding: 28px 28px 22px; border: 1px solid var(--line); border-radius: 16px; background: #FFFFFF; box-shadow: 0 34px 70px -48px rgba(20,20,20,.35); }
.vx-focus-tags text { font: 500 11px 'Geist Mono', monospace; letter-spacing: .04em; fill: var(--vx-muted); transition: opacity .6s ease; }
.vx-focus.is-built .vx-focus-tags text { opacity: 0; }
.vx-focus-caption { margin-top: 12px; text-align: center; font-size: 14px; letter-spacing: -.1px; color: var(--vx-muted); transition: opacity .3s ease; }
.vx-focus-caption.is-swapping { opacity: 0; }
.vx-focus-svg { display: block; width: 100%; height: auto; overflow: visible; }
.vx-focus-px { animation: vx-drift 7s ease-in-out infinite alternate; }
.vx-focus.is-built .vx-focus-px { animation: none; }
@keyframes vx-drift { from { transform: translate(0, 0); } to { transform: translate(6px, -4px); } }
.vx-focus-px rect { fill: #CFCFC8; opacity: var(--o, 1); transition: transform .95s cubic-bezier(.65,0,.25,1) var(--d, 0s), fill .45s ease var(--f, 0s), opacity .45s ease var(--f, 0s); }
.vx-focus.is-built .vx-focus-px rect { fill: var(--dark); opacity: 1; }
.vx-focus.is-built .vx-focus-px rect.is-win { fill: #3A3A37; }
.vx-focus.is-glow .vx-focus-px rect.is-lit { fill: var(--vx-orange); }
.vx-focus-ground { fill: var(--dark); transform-box: fill-box; transform-origin: center; transform: scaleX(0); transition: transform .8s cubic-bezier(.5,0,.2,1) .3s; }
.vx-focus.is-built .vx-focus-ground { transform: none; }


/* ---------------- Who you work with ---------------- */
.vx-founder-portrait { position: relative; }

/* buttons, the pixel arrow and the header over the hero come from design.css */

.hero-cta:focus-visible { outline: 2px solid var(--vx-orange); outline-offset: 3px; }

/* =====================================================================
   Experiment (scenes: painted): golden-hour paintings as still panels.
   The paintings never move; only the product graphics on the page animate.
   ===================================================================== */
.vx-strip { position: relative; isolation: isolate; width: 100%; max-width: 1056px; margin: 0; aspect-ratio: var(--ar); min-height: 190px; overflow: hidden; border-radius: 16px; background: var(--dark); box-shadow: 0 44px 80px -54px rgba(20,20,20,.45); }
.vx-strip::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); pointer-events: none; }
.vx-strip-art, .vx-strip-art img { position: absolute; inset: 0; }
.vx-strip-art img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.vx-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* a darker band along the top keeps the see-through header legible over the painting */
.vx-hero-light .vx-hero-scrim::after { content: ""; position: absolute; inset: 0 0 auto; height: 150px; background: linear-gradient(180deg, rgba(10,18,40,.5), rgba(10,18,40,0)); }

/* system scenes: painted panels beside the copy */
.vx-strip-panel { border-radius: 16px; min-height: 0; }

/* follow-up: the dusk painting with the schedule card floating over its lower edge */
.vx-follow { width: 100%; max-width: 1056px; display: flex; flex-direction: column; }
.vx-follow .vx-strip-dusk + .vx-retry { position: relative; z-index: 1; width: auto; margin: -112px 28px 0; box-shadow: 0 34px 64px -40px rgba(20,20,20,.4); }

@media (max-width: 960px) {
  .vx-follow .vx-strip-dusk + .vx-retry { margin: -72px 16px 0; }
}
@media (max-width: 600px) {
  .vx-strip { min-height: 170px; border-radius: 16px; }
  .vx-scene .vx-reasons { padding: 0 12px; }
  .vx-follow .vx-strip-dusk + .vx-retry { margin: -48px 8px 0; }
}

/* Experiment (heroArt: photo): painted skyline image instead of the pixel skyline. A soft haze keeps the copy readable. */
/* object-position 40% (not the top): on very wide screens the painting is taller than the capped hero, and this keeps
   the skyline at the same height behind the console instead of sinking below the fold. Narrower screens crop sideways. */
.vx-hero-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; pointer-events: none; }
.vx-hero-scrim { --haze: 62% 46%; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse var(--haze) at 50% 29%, rgba(250,250,247,.74) 0%, rgba(250,250,247,.5) 48%, rgba(250,250,247,0) 78%), linear-gradient(180deg, rgba(250,250,247,.25) 0%, rgba(250,250,247,0) 30%); }
.vx-hero-photo p.lead { opacity: 1; color: var(--ds-text, rgba(20,20,20,.75)); }
@media (max-width: 960px) { .vx-hero-scrim { --haze: 100% 40%; } }
/* heroTone: light, for dark sky images: white copy over a soft dusk shade instead of a white haze */
.vx-hero-light .vx-hero-scrim { background: radial-gradient(ellipse 44% 16% at 50% 45%, rgba(12,22,48,.34) 0%, rgba(12,22,48,0) 100%), radial-gradient(ellipse var(--haze) at 50% 32%, rgba(12,22,48,.56) 0%, rgba(12,22,48,.36) 50%, rgba(12,22,48,0) 80%); }
@media (max-width: 960px) { .vx-hero-light .vx-hero-scrim { background: radial-gradient(ellipse 100% 34% at 50% 30%, rgba(12,22,48,.6) 0%, rgba(12,22,48,.4) 55%, rgba(12,22,48,0) 85%); } }
.vx-hero-light h1 { color: #FFFFFF; text-shadow: 0 2px 24px rgba(8,16,36,.35); }
.vx-hero-light p.lead { color: #FFFFFF; text-shadow: 0 1px 14px rgba(8,16,36,.55); }

/* ---------------- Responsive: tablet ---------------- */
/* Short laptop screens: a more compact console so it stays inside the first screen. */
@media (min-width: 961px) and (max-height: 860px) {
  .vx-console { grid-template-columns: 132px minmax(0, 1fr); column-gap: 30px; padding: 20px 26px 20px 22px; }
  .vx-dial { width: 132px; height: 132px; }
  .vx-dial-readout strong { font-size: 25px; }
  .vx-lead strong { font-size: 22px; }
  .vx-stages { margin: 16px 0 14px; }
}

@media (max-width: 960px) {
  .vx-hero { min-height: 0; padding: 130px 20px 150px; }
  .vx-hero h1 { font-size: var(--ds-h1); }
  .vx-hero p.lead { font-size: 17px; line-height: 26px; }
  .vx-console-wrap { margin-top: 0; padding-top: 48px; }
  .vx-console { grid-template-columns: 128px minmax(0, 1fr); column-gap: 24px; padding: 22px; }
  .vx-dial { width: 128px; height: 128px; }
  .vx-dial-readout strong { font-size: 24px; }

  .vx-reasons { grid-template-columns: 1fr; max-width: 560px; }
  .vx-reveal { height: 190vh; }
  .vx-dusk-text { font-size: 28px; letter-spacing: -1px; }
  .vx-lane { grid-template-columns: 150px minmax(0, 1fr); }
  .vx-race-axis { margin-left: 166px; }

  .vx-journey { grid-template-columns: 1fr; max-width: 640px; }
  .vx-retry { grid-template-columns: 1fr; gap: 28px; }
  .vx-retry-key { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
  .vx-retry-status { min-height: 88px; }
  .vx-why-grid { grid-template-columns: 1fr; gap: 48px; }

  .vx-svc, .vx-svc.is-flip { grid-template-columns: 1fr; gap: 40px; max-width: 620px; }
  .vx-sys-index a { min-height: 44px; }
  .vx-svc.is-flip .vx-svc-stage { order: 0; }
  .vx-svc-copy h3 { font-size: 34px; letter-spacing: -1.3px; }
}

/* ---------------- Responsive: phone ---------------- */
@media (max-width: 600px) {
  .vx-hero { padding: 104px 16px 104px; }
  .vx-hero p.lead { font-size: 16px; line-height: 24px; }
  .vx-console-wrap { padding-top: 36px; }
  .vx-console { grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "dial top" "stages stages" "status status"; column-gap: 16px; padding: 18px; }
  .vx-dial { width: 92px; height: 92px; }
  .vx-dial-readout { gap: 3px; }
  .vx-dial-readout strong { font-size: 17px; letter-spacing: -.6px; }
  .vx-dial-readout span { font-size: 10px; }
  .vx-lead strong { font-size: 20px; }
  .vx-lead-need { font-size: 14px; }
  .vx-stages { margin: 20px 0 14px; }
  .vx-stages li { font-size: 11px; padding-right: 4px; }
  .vx-status { min-height: 92px; align-content: center; font-size: 14px; }
  .vx-console-top { flex-direction: column; justify-content: center; gap: 8px; min-height: 88px; }

  .vx-reason h3 { font-size: 21px; letter-spacing: -.6px; }

  .vx-reveal { height: 170vh; }
  .vx-dusk-text { font-size: 21px; letter-spacing: -.5px; }
  .vx-race { padding: 14px 14px 12px; }
  .vx-race-head { font-size: 10px; margin-bottom: 8px; }
  .vx-lane { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 4px 0; }
  .vx-lane-name { font-size: 11.5px; line-height: 1.25; }
  .vx-lane-track { height: 22px; }
  .vx-lane-result { font-size: 11.5px; }
  .vx-lane-extra { display: none; }
  .vx-race-axis { margin-left: 98px; font-size: 9px; }

  .vx-jstep { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; padding: 12px; }
  .vx-jrule { margin: 0 2px 18px; }
  .vx-jcopy { padding: 0 8px 18px; }
  .vx-subhead { margin: 72px 0 28px; }
  .vx-subhead h3 { font-size: 30px; letter-spacing: -1.1px; }
  .vx-retry { padding: 24px 18px 20px; }

  .vx-rt-axis { font-size: 16px; }
  .vx-rt-att .lbl { font-size: 18px; }

  .vx-demo-cta { flex-direction: column; gap: 14px; text-align: center; }
  .vx-demo-cta p { font-size: 16px; }


  .vx-sys-index a { padding: 8px 12px; gap: 8px; font-size: 13px; }
  .vx-svc-copy h3 { font-size: 30px; letter-spacing: -1.1px; }
  .vx-svc-copy p { font-size: 16px; }
  .vx-svc-copy .system-card-head { flex-wrap: wrap; gap: 6px 12px; }
  .vx-sys-art { height: 250px; padding: 16px 14px; }
  .vx-strip-panel + .vx-sys-art { margin: -72px 10px 0; }
  .vx-in { gap: 18px; }
  .vx-in-src { gap: 14px; }
  .vx-in-src li { padding: 7px 7px; font-size: 9px; letter-spacing: .03em; }
  .vx-in-box { width: 60px; height: 60px; gap: 2px; }
  .vx-in-box span { width: 2px; height: 11px; }
  .vx-in-crm { padding: 10px 9px 6px; }
  .vx-db-head, .vx-db-legend { font-size: 9.5px; letter-spacing: .04em; }
  .vx-db-legend { gap: 6px 14px; }

  .vx-why-lead { font-size: 19px; }
  .vx-focus { padding: 18px 18px 14px; }
  .vx-works-band { padding: 28px 20px; }
  .vx-works { flex-direction: column; align-items: flex-start; gap: 18px; }
  .vx-works-logos { justify-content: flex-start; gap: 20px 32px; }
}

/* ---------------- Reduced motion: show every graphic in its finished state ---------------- */
@media (prefers-reduced-motion: reduce) {
  .vx-page *, .vx-page *::before, .vx-page *::after { animation: none !important; transition: none !important; }
  .vx-js .vx-note, .vx-js .vx-night-badge { opacity: 1; }
  .vx-cool-scan, .vx-rt-head, .vx-db-scan { display: none; }
}