/* TomHow visual system components, 19 October 2026.
   Uses the Design OS tokens already defined on :root by the site stylesheet.
   Every selector is scoped under .vx so it cannot collide with existing page styles. */
/* 19 October 2026 roll-out: spacing set on single classes for p, ul and ol never applied because ".vx p, .vx ul, .vx ol" (0,1,1) outranks them. Each affected rule now also carries a ".vx TAG.class" selector (0,2,1). */
.vx{--vx-ease:cubic-bezier(.2,.7,.2,1);--vx-indexed-fill:#E7F3EC;--vx-indexed-text:#176B3C;--vx-coral-06:rgba(209,63,18,.06);--vx-coral-14:rgba(209,63,18,.14);--vx-coral-25:rgba(209,63,18,.25);--vx-muted-dark:#A9AAB0;display:block;overflow-x:clip}
.vx *{box-sizing:border-box}
.vx img{max-width:100%;height:auto}
.vx-wrap{max-width:calc(var(--container-max) + var(--container-pad)*2);margin:0 auto;padding:0 var(--container-pad)}
.vx-mono{font-family:var(--font-mono);font-size:var(--text-mono-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--smoke);line-height:1.5}
.vx-accent{color:var(--citation)}
.vx h1,.vx h2,.vx h3,.vx h4{font-weight:700;letter-spacing:-.035em;line-height:1.02;color:inherit}
.vx h2{font-size:var(--text-display)}
.vx h3{font-size:var(--text-2xl);letter-spacing:-.02em;line-height:1.15}
.vx p{margin:0}
.vx ul,.vx ol{list-style:none;margin:0;padding:0}
.vx-sub{font-size:var(--text-lg);color:var(--smoke);line-height:1.5;max-width:36ch}
.vx-lede{font-size:var(--text-lg);line-height:1.5;color:var(--smoke);max-width:31ch}
.vx-section{padding:var(--space-10) 0}
.vx-section.vx-flush{padding-top:0}
.vx-eyebrow,.vx p.vx-eyebrow{margin-bottom:var(--space-4)}
.vx-head{margin-bottom:var(--space-8)}
.vx-head h2{margin-bottom:var(--space-4)}
.vx-head-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:end}

/* Buttons and links */
.vx-btn{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:15px;padding:14px 22px;border:1px solid transparent;cursor:pointer;white-space:nowrap;line-height:1.2}
.vx-btn-primary{background:var(--citation);color:var(--paper)}
.vx-btn-primary:hover{background:var(--citation-hot);color:var(--paper)}
.vx-btn-secondary{background:var(--paper);border-color:var(--ecru);color:var(--coal)}
.vx-btn-secondary:hover{border-color:var(--coal)}
.vx-btn .vx-arr{display:inline-block;transition:transform .2s var(--vx-ease)}
.vx-btn:hover .vx-arr{transform:translate(2px,-2px)}
.vx-link{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15px;border-bottom:1px solid var(--coal);padding-bottom:2px;color:var(--coal)}
.vx-link:hover{color:var(--citation);border-color:var(--citation)}
.vx-cta-row{display:flex;align-items:center;gap:var(--space-6);margin-top:var(--space-6);flex-wrap:wrap}
.vx-cap,.vx p.vx-cap{margin-top:var(--space-3);font-size:12px;color:var(--smoke);line-height:1.5}
.vx-cap a{border-bottom:1px solid currentColor}
.vx-cap a:hover{color:var(--citation)}

/* Reveal on scroll (only hidden once the script has marked the page ready) */
.vx-ready .vx-rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--vx-ease),transform .8s var(--vx-ease)}
.vx-ready .vx-rv.vx-in{opacity:1;transform:none}

/* Browser frame */
.vx-browser{border:1px solid var(--ecru);background:var(--paper);box-shadow:0 30px 60px -30px rgba(10,10,11,.28)}
.vx-bbar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:1px solid var(--ecru);background:var(--bone)}
.vx-bbar i{width:9px;height:9px;border-radius:50%;background:var(--ecru)}
.vx-burl{margin-left:12px;text-transform:none;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Home: hero ---------- */
.vx-hero{padding:var(--space-9) 0 var(--space-8)}
.vx-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-8);align-items:center}
.vx-hero h1{font-size:var(--text-display-lg);letter-spacing:-.045em;margin:var(--space-5) 0}
.vx-proofrow,.vx ul.vx-proofrow{display:flex;gap:var(--space-5);margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--ecru);flex-wrap:wrap}
.vx-proofrow li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.vx-proofrow svg{width:16px;height:16px;stroke:var(--citation);fill:none;stroke-width:1.6;display:inline-block}

/* AI answer illustration */
.vx-demo{background:var(--bone);border:1px solid var(--ecru);padding:var(--space-5);display:flex;flex-direction:column;min-height:500px;position:relative}
.vx-demo-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding-bottom:var(--space-4);border-bottom:1px solid var(--ecru)}
.vx-engines{display:flex;gap:2px}
.vx-engines button{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;background:none;border:1px solid transparent;padding:5px 9px;color:var(--smoke);cursor:pointer}
.vx-engines button:hover{color:var(--coal)}
.vx-engines button[aria-selected="true"]{color:var(--coal);border-color:var(--ecru);background:var(--paper)}
.vx-engines button:focus-visible{outline:2px solid var(--citation);outline-offset:2px}
.vx-query{display:flex;gap:var(--space-3);padding:var(--space-5) 0;border-bottom:1px solid var(--ecru);min-height:104px}
.vx-who{flex:none;width:52px;padding-top:6px}
.vx-q{font-size:21px;font-weight:500;letter-spacing:-.015em;line-height:1.3}
.vx-caret{display:inline-block;width:2px;height:1.05em;background:var(--citation);vertical-align:-3px;margin-left:2px;animation:vx-blink 1s steps(1) infinite}
@keyframes vx-blink{50%{opacity:0}}
.vx-answer{padding:var(--space-4) 0 var(--space-2);flex:1}
.vx-intro{color:var(--smoke);font-size:15px;line-height:1.5;min-height:46px}
.vx-list,.vx ol.vx-list{margin-top:var(--space-3)}
.vx-list li{display:grid;grid-template-columns:22px 1fr auto;gap:var(--space-2);padding:10px 0;border-top:1px solid var(--ecru);transition:opacity .45s var(--vx-ease),transform .45s var(--vx-ease)}
.vx-anim .vx-list li{opacity:0;transform:translateY(6px)}
.vx-anim .vx-list li.vx-show{opacity:1;transform:none}
.vx-list .vx-n{font-family:var(--font-mono);font-size:12px;color:var(--smoke);padding-top:2px}
.vx-list b{font-weight:500;display:block;font-size:15px}
.vx-list .vx-why{display:block;color:var(--smoke);font-size:13px;line-height:1.45}
.vx-cite{font-family:var(--font-mono);font-size:10px;color:var(--smoke);border:1px solid var(--ecru);background:var(--paper);height:18px;min-width:18px;padding:0 5px;display:grid;place-items:center;align-self:start;margin-top:2px}
.vx-list li.vx-you b{color:var(--citation)}
.vx-list li.vx-you .vx-cite{background:var(--citation);border-color:var(--citation);color:var(--paper)}
.vx-sources{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:var(--space-3) 0;border-top:1px solid var(--ecru);min-height:50px}
.vx-sources .vx-mono{margin-right:6px}
.vx-src{font-family:var(--font-mono);font-size:11px;padding:3px 8px;border:1px solid var(--ecru);background:var(--paper);color:var(--smoke);transition:opacity .35s var(--vx-ease),transform .35s var(--vx-ease)}
.vx-anim .vx-src{opacity:0;transform:scale(.96)}
.vx-anim .vx-src.vx-show{opacity:1;transform:none}
.vx-src.vx-you{border-color:var(--citation);color:var(--citation)}
.vx-steps,.vx ol.vx-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ecru);padding-top:var(--space-3);gap:var(--space-2)}
.vx-steps li{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--smoke);display:flex;align-items:center;gap:8px;transition:color .3s}
.vx-steps li::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--smoke);flex:none;transition:.3s}
.vx-steps li.vx-on{color:var(--coal)}
.vx-steps li.vx-on::before{background:var(--citation);border-color:var(--citation)}
.vx-steps li.vx-win{color:var(--vx-indexed-text)}
.vx-steps li.vx-win::before{background:var(--live-green-light);border-color:var(--live-green-light);box-shadow:0 0 0 4px rgba(31,157,85,.15)}
.vx-demo-foot{position:absolute;right:var(--space-5);bottom:-26px;font-size:10px}

/* Ticker */
.vx-ticker{border-top:1px solid var(--ecru);border-bottom:1px solid var(--ecru);overflow:hidden;display:flex;align-items:center;background:var(--paper)}
.vx-ticker-label{flex:none;padding:16px var(--space-5) 16px var(--container-pad);background:var(--paper);position:relative;z-index:1;border-right:1px solid var(--ecru)}
.vx-ticker-view{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.vx-ticker-track{display:flex;gap:56px;width:max-content;animation:vx-tick 38s linear infinite;padding-left:56px}
.vx-ticker-track span{font-size:17px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:56px;color:var(--coal)}
.vx-ticker-track span::after{content:"";width:5px;height:5px;background:var(--citation)}
@keyframes vx-tick{to{transform:translateX(-50%)}}

/* Journey selector */
.vx-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:var(--space-6)}
.vx-track-line{position:absolute;left:0;right:0;top:15px;height:2px;background:repeating-linear-gradient(90deg,var(--ecru) 0 6px,transparent 6px 12px)}
.vx-track-fill{position:absolute;left:0;top:0;height:2px;background:var(--coal);width:12.5%;transition:width .7s var(--vx-ease)}
.vx-buyer{position:absolute;top:6px;left:12.5%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--citation);box-shadow:0 0 0 6px var(--vx-coral-14);transition:left .7s var(--vx-ease);z-index:2;pointer-events:none}
.vx-buyer::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--citation);animation:vx-ping 1.8s var(--vx-ease) infinite}
@keyframes vx-ping{from{transform:scale(.6);opacity:.9}to{transform:scale(1.9);opacity:0}}
.vx-stage{background:none;border:0;text-align:center;cursor:pointer;padding:0 var(--space-3) var(--space-3);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);position:relative;color:var(--coal);font:inherit}
.vx-node{width:32px;height:32px;border-radius:50%;background:var(--paper);border:1px solid var(--ecru);display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;color:var(--smoke);position:relative;z-index:1;transition:.3s}
.vx-stage:hover .vx-node{border-color:var(--coal);color:var(--coal)}
.vx-sym{font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.3;max-width:16ch;transition:color .2s}
.vx-stop{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--citation);opacity:0;transition:opacity .3s}
.vx-stage[aria-selected="true"] .vx-sym{color:var(--citation)}
.vx-stage[aria-selected="true"] .vx-stop{opacity:1}
.vx-stage[aria-selected="true"] .vx-node{opacity:0}
.vx-stage.vx-passed .vx-node{background:var(--coal);border-color:var(--coal);color:var(--paper)}
.vx-stage:focus-visible{outline:2px solid var(--citation);outline-offset:4px}
.vx-panel{display:none;grid-template-columns:1fr 1fr;background:var(--bone);border:1px solid var(--ecru)}
.vx-panel.vx-active{display:grid;animation:vx-fadeup .5s var(--vx-ease)}
@keyframes vx-fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.vx-panel-vis{padding:var(--space-7);display:grid;place-items:center;border-right:1px solid var(--ecru)}
.vx-panel-vis svg{width:100%;max-width:400px;height:auto}
.vx-panel-copy{padding:var(--space-7)}
.vx-panel-copy .vx-mono{margin-bottom:var(--space-3)}
.vx-panel-copy h3{font-size:var(--text-3xl);letter-spacing:-.03em;margin-bottom:var(--space-3)}
.vx-panel-copy .vx-lead{color:var(--smoke);font-size:var(--text-md);line-height:1.5;margin-bottom:var(--space-6)}
.vx-look,.vx ul.vx-look{margin-bottom:var(--space-6)}
.vx-look li{display:flex;gap:var(--space-3);padding:12px 0;border-top:1px solid var(--ecru);font-size:15px}
.vx-look li:last-child{border-bottom:1px solid var(--ecru)}
.vx-look li span{font-family:var(--font-mono);font-size:11px;color:var(--citation);padding-top:3px}

/* Small illustrations */
.vx-v-ink{fill:var(--coal)}
.vx-v-mute{fill:var(--ecru)}
.vx-v-paper{fill:var(--paper);stroke:var(--ecru)}
.vx-v-coral{fill:var(--citation)}
.vx-v-stroke{fill:none;stroke:var(--smoke);stroke-width:1.5}
.vx-v-dash{fill:none;stroke:var(--citation);stroke-width:1.5;stroke-dasharray:5 4;animation:vx-dash 1.2s linear infinite}
@keyframes vx-dash{to{stroke-dashoffset:-18}}
.vx-v-txt{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;fill:var(--smoke)}
.vx-v-txt.vx-dark{fill:var(--coal)}
.vx-v-txt.vx-coral{fill:var(--citation)}
.vx-v-pulse{animation:vx-vpulse 1.6s ease-in-out infinite}
@keyframes vx-vpulse{50%{opacity:.35}}
.vx-v-travel{animation:vx-travel 2.8s var(--vx-ease) infinite}
@keyframes vx-travel{0%{transform:translate(0,0);opacity:0}10%{opacity:1}70%{transform:translate(188px,0);opacity:1}85%,100%{transform:translate(188px,0);opacity:0}}
.vx-v-cursor{animation:vx-cursor 3s var(--vx-ease) infinite}
@keyframes vx-cursor{0%,15%{transform:translate(160px,130px)}55%,100%{transform:translate(250px,62px)}}

/* How it works */
.vx-steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.vx-step-vis{display:block;background:var(--bone);border:1px solid var(--ecru);aspect-ratio:4/3;padding:var(--space-5);margin-bottom:var(--space-5);transition:border-color .25s}
.vx-step-vis:hover{border-color:var(--coal)}
.vx-step-vis svg{width:100%;height:100%}
.vx-step .vx-num{color:var(--citation);margin-bottom:var(--space-2)}
.vx-step h3{margin-bottom:var(--space-2)}
.vx-step .vx-d{color:var(--smoke);font-size:15px;line-height:1.5;margin-bottom:var(--space-4)}
.vx-step .vx-tag{padding-top:var(--space-3);border-top:1px solid var(--ecru)}
.vx-bar{transform-box:fill-box;transform-origin:left center}
.vx-ready .vx-bar{transform:scaleX(0);transition:transform 1.1s var(--vx-ease)}
.vx-ready .vx-in .vx-bar{transform:scaleX(1)}
.vx-in .vx-bar.vx-b2{transition-delay:.12s}.vx-in .vx-bar.vx-b3{transition-delay:.24s}.vx-in .vx-bar.vx-b4{transition-delay:.36s}
.vx-in .vx-blk.vx-k1{animation:vx-blkon 4.5s infinite 0s}
.vx-in .vx-blk.vx-k2{animation:vx-blkon 4.5s infinite 1.5s}
.vx-in .vx-blk.vx-k3{animation:vx-blkon 4.5s infinite 3s}
@keyframes vx-blkon{0%,30%{stroke:var(--citation);fill:var(--vx-coral-06)}34%,100%{stroke:var(--ecru);fill:var(--paper)}}
.vx-in .vx-tagk{opacity:.25}
.vx-in .vx-tagk.vx-k1{animation:vx-tagon 4.5s infinite 0s}
.vx-in .vx-tagk.vx-k2{animation:vx-tagon 4.5s infinite 1.5s}
.vx-in .vx-tagk.vx-k3{animation:vx-tagon 4.5s infinite 3s}
@keyframes vx-tagon{0%,30%{opacity:1}34%,100%{opacity:.25}}
.vx-ready .vx-draw{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.8s var(--vx-ease)}
.vx-ready .vx-in .vx-draw{stroke-dashoffset:0}
.vx-ready .vx-enddot{opacity:0;transition:opacity .3s 1.6s}
.vx-ready .vx-in .vx-enddot{opacity:1}

/* Proof console */
.vx-console{background:var(--pitch);color:var(--off-white);position:relative;overflow:hidden;padding:var(--space-10) 0}
.vx-aurora{position:absolute;inset:-20%;pointer-events:none;background:radial-gradient(40% 50% at 12% 18%,var(--aurora-coral),transparent 70%),radial-gradient(35% 45% at 88% 12%,var(--aurora-blue),transparent 70%),radial-gradient(40% 50% at 70% 95%,var(--aurora-purple),transparent 70%),radial-gradient(30% 40% at 30% 90%,var(--aurora-green),transparent 70%);filter:blur(20px);animation:vx-drift 22s ease-in-out infinite alternate}
@keyframes vx-drift{to{transform:translate(3%,-2%) scale(1.05)}}
.vx-console .vx-wrap{position:relative}
.vx-c-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:end;margin-bottom:var(--space-7)}
.vx-c-eyebrow,.vx p.vx-c-eyebrow{color:var(--off-white);display:flex;align-items:center;gap:10px;margin-bottom:var(--space-4)}
.vx-live{width:8px;height:8px;border-radius:50%;background:var(--signal-green);animation:vx-live 2s infinite}
@keyframes vx-live{0%{box-shadow:0 0 0 0 rgba(61,220,151,.6)}70%{box-shadow:0 0 0 10px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.vx-console h2{color:var(--paper)}
.vx-c-sub{color:var(--vx-muted-dark);font-size:var(--text-md);line-height:1.5;max-width:36ch}
.vx-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-bottom:2px}
.vx-metric{background:var(--carbon-2);padding:var(--space-5)}
.vx-m-label,.vx p.vx-m-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-bottom:var(--space-2)}
.vx-m-value{font-family:var(--font-mono);font-size:48px;font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--paper)}
.vx-m-change,.vx p.vx-m-change{margin-top:var(--space-3);font-size:14px;color:var(--signal-green);display:flex;gap:8px;align-items:center}
.vx-compare-chart{background:var(--carbon);padding:var(--space-6)}
.vx-cc-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}
.vx-cc-head h3{color:var(--paper);font-size:var(--text-xl)}
.vx-cc-row{display:grid;grid-template-columns:170px 1fr 64px;gap:var(--space-4);align-items:center;padding:var(--space-3) 0}
.vx-cc-row + .vx-cc-row{border-top:1px solid rgba(232,232,234,.08)}
.vx-cc-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-muted-dark);line-height:1.4}
.vx-cc-label b{display:block;color:var(--off-white);font-weight:500;letter-spacing:.02em}
.vx-cc-bar{height:28px;background:rgba(232,232,234,.06);position:relative;overflow:hidden}
.vx-cc-fill{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--steel);transform-origin:left;transition:transform 1.4s var(--vx-ease)}
.vx-cc-row.vx-now .vx-cc-fill{background:linear-gradient(90deg,var(--citation-hot),var(--citation))}
.vx-ready .vx-cc-fill{transform:scaleX(0)}
.vx-ready .vx-in .vx-cc-fill{transform:scaleX(1)}
.vx-ready .vx-in .vx-cc-row.vx-now .vx-cc-fill{transition-delay:.25s}
.vx-cc-val{font-family:var(--font-mono);font-size:24px;font-weight:500;color:var(--paper);text-align:right;letter-spacing:-.03em}
.vx-c-foot,.vx p.vx-c-foot{margin-top:var(--space-6);color:var(--steel);font-size:11.5px;line-height:1.6;border-top:1px solid rgba(232,232,234,.08);padding-top:var(--space-4);max-width:none}
.vx-c-foot a{color:var(--off-white);border-bottom:1px solid var(--steel)}
.vx-c-foot a:hover{border-color:var(--off-white)}

/* Case teaser */
.vx-ct-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-8);align-items:center}
.vx-ct-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ecru)}
.vx-ct-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--vx-ease)}
.vx-ct-media:hover img{transform:scale(1.03)}
.vx-ct-media .vx-grey{animation:vx-xfade 7s ease-in-out infinite}
@keyframes vx-xfade{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@keyframes vx-xfadeinv{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.vx-ct-tags{position:absolute;left:var(--space-4);bottom:var(--space-4);display:grid}
.vx-ct-tags span{grid-area:1/1;background:var(--paper);color:var(--coal);padding:5px 9px}
.vx-ct-tags .vx-g{animation:vx-xfade 7s ease-in-out infinite}
.vx-ct-tags .vx-f{animation:vx-xfadeinv 7s ease-in-out infinite}
.vx-ct-copy h2{font-size:44px;margin-bottom:var(--space-4)}
.vx-ct-copy .vx-d{color:var(--smoke);font-size:var(--text-md);line-height:1.5;margin-bottom:var(--space-6)}
.vx-facts-list,.vx ul.vx-facts-list{margin-bottom:var(--space-6)}
.vx-facts-list li{display:grid;grid-template-columns:110px 1fr;padding:11px 0;border-top:1px solid var(--ecru);font-size:15px;font-weight:500}
.vx-facts-list li:last-child{border-bottom:1px solid var(--ecru)}

/* Tom */
.vx-tom-grid{display:grid;grid-template-columns:auto 1fr 360px;gap:var(--space-7);align-items:center}
.vx-portrait{width:220px;height:220px;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.vx-tom-copy h2{margin-bottom:var(--space-4)}
.vx-local{background:var(--bone);border:1px solid var(--ecru);padding:var(--space-6)}
.vx-price,.vx p.vx-price{font-family:var(--font-mono);font-size:56px;letter-spacing:-.05em;line-height:1;margin:var(--space-3) 0}
.vx-local .vx-d{color:var(--smoke);font-size:15px;line-height:1.5;margin-bottom:var(--space-5)}

/* FAQ */
.vx-faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-8)}
.vx details{border-top:1px solid var(--ecru)}
.vx details:last-child{border-bottom:1px solid var(--ecru)}
.vx summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--space-4);padding:20px 0;font-size:var(--text-lg);font-weight:500;letter-spacing:-.01em}
.vx summary::-webkit-details-marker{display:none}
.vx summary:focus-visible{outline:2px solid var(--citation);outline-offset:4px}
.vx-pm{font-family:var(--font-mono);color:var(--citation);transition:transform .25s;flex:none}
.vx details[open] .vx-pm{transform:rotate(45deg)}
.vx details p{color:var(--smoke);font-size:16px;line-height:1.65;padding:0 0 var(--space-5);max-width:62ch}
.vx details p a{color:var(--coal);border-bottom:1px solid var(--citation)}
.vx details p a:hover{color:var(--citation)}

/* ---------- Case study ---------- */
.vx-case-hero{padding:var(--space-8) 0}
.vx-crumb,.vx p.vx-crumb{margin-bottom:var(--space-6)}
.vx-crumb a:hover{color:var(--citation)}
.vx-case-top{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-8);align-items:end;margin-bottom:var(--space-7)}
.vx-case-hero h1{font-size:88px;letter-spacing:-.045em;line-height:.98;margin:var(--space-4) 0 var(--space-5)}
.vx-meta li{display:grid;grid-template-columns:96px 1fr;gap:var(--space-3);padding:12px 0;border-top:1px solid var(--ecru);font-size:15px;font-weight:500}
.vx-meta li:last-child{border-bottom:1px solid var(--ecru)}
.vx-disclose,.vx p.vx-disclose{margin-top:var(--space-3);font-size:13px;color:var(--smoke);line-height:1.5}
.vx-anno-shot{position:relative;aspect-ratio:1174/760;overflow:hidden;background:var(--pitch)}
.vx-anno-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.vx-hot{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--citation);color:var(--paper);border:0;font-family:var(--font-mono);font-size:12px;font-weight:500;cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 6px var(--vx-coral-25);transition:transform .2s var(--vx-ease),box-shadow .2s}
.vx-hot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--citation);animation:vx-ping 2.2s var(--vx-ease) infinite}
.vx-hot:hover,.vx-hot.vx-on{transform:scale(1.12)}
.vx-hot:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.vx-ring{position:absolute;border:1.5px solid var(--citation);pointer-events:none;opacity:0;transition:opacity .3s,left .45s var(--vx-ease),top .45s var(--vx-ease),width .45s var(--vx-ease),height .45s var(--vx-ease)}
.vx-ring.vx-on{opacity:1}
.vx-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-6)}
.vx-note{border-top:2px solid var(--ecru);padding-top:var(--space-4);transition:border-color .3s}
.vx-note.vx-on{border-color:var(--citation)}
.vx-note .vx-mono{color:var(--citation);margin-bottom:var(--space-2)}
.vx-note b{display:block;font-size:var(--text-md);font-weight:500;letter-spacing:-.01em;margin-bottom:4px}
.vx-note p{color:var(--smoke);font-size:14px;line-height:1.5}
.vx-factstrip{border-top:1px solid var(--ecru);border-bottom:1px solid var(--ecru);background:var(--bone)}
.vx-factstrip .vx-wrap{display:grid;grid-template-columns:auto repeat(4,1fr);align-items:stretch}
.vx-factstrip .vx-lab{padding:var(--space-6) var(--space-6) var(--space-6) 0;display:flex;align-items:center;max-width:180px}
.vx-fact{padding:var(--space-6);border-left:1px solid var(--ecru)}
.vx-fact .vx-v{font-family:var(--font-mono);font-size:56px;font-weight:500;letter-spacing:-.05em;line-height:1}
.vx-fact .vx-v small{font-size:22px;letter-spacing:-.02em;margin-left:4px;color:var(--smoke)}
.vx-fact p{font-size:14px;color:var(--smoke);margin-top:var(--space-2)}
.vx-decide{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-8);align-items:start}
.vx-quote,.vx p.vx-quote{font-size:34px;font-weight:500;letter-spacing:-.025em;line-height:1.2;border-left:3px solid var(--citation);padding-left:var(--space-5);margin:var(--space-6) 0 var(--space-4)}
.vx-quote-by{padding-left:calc(var(--space-5) + 3px);font-size:14px;font-weight:500}
.vx-quote-by span{display:block;font-weight:400;color:var(--smoke);font-size:13px}
.vx-decide .vx-d{color:var(--smoke);font-size:var(--text-md);line-height:1.55;max-width:42ch;margin-bottom:var(--space-5)}
.vx-pattern{background:var(--bone);border:1px solid var(--ecru);padding:var(--space-6);display:grid;grid-template-columns:1fr 40px 1.25fr;gap:var(--space-4);align-items:center}
.vx-pat .vx-mono{margin-bottom:var(--space-3)}
.vx-pat-img{aspect-ratio:4/3;background:var(--ecru)}
.vx-pat-l{height:8px;background:var(--coal);opacity:.75;width:60%;margin-top:12px}
.vx-pat-l2{height:6px;background:var(--ecru);width:85%;margin-top:8px}
.vx-pat-l3{height:6px;background:var(--ecru);width:55%;margin-top:6px}
.vx-pat-arrow{font-family:var(--font-mono);color:var(--citation);font-size:22px;text-align:center}
.vx-pat-new li{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:var(--space-3);padding:7px 0;border-top:1px solid var(--ecru);transition:opacity .45s var(--vx-ease),transform .45s var(--vx-ease)}
.vx-pat-new li:last-child{border-bottom:1px solid var(--ecru)}
.vx-ready .vx-pat-new li{opacity:0;transform:translateX(-8px)}
.vx-ready .vx-in .vx-pat-new li{opacity:1;transform:none}
.vx-pat-new li .vx-mono{margin:0;color:var(--coal)}
.vx-pat-new li i{display:block;height:6px;background:var(--ecru);position:relative;overflow:hidden}
.vx-pat-new li i::after{content:"";position:absolute;inset:0;background:var(--citation);transform-origin:left;transition:transform .8s var(--vx-ease)}
.vx-ready .vx-pat-new li i::after{transform:scaleX(0)}
.vx-ready .vx-in .vx-pat-new li i::after{transform:scaleX(1)}
.vx-pat-new li.vx-tall i{height:22px}
.vx-pat-cap,.vx p.vx-pat-cap{grid-column:1/-1;margin-top:var(--space-2)}
.vx-story{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-8);position:relative}
.vx-st{min-height:82vh;display:flex;flex-direction:column;justify-content:center;transition:opacity .5s var(--vx-ease)}
.vx-ready .vx-st{opacity:.28}
.vx-ready .vx-st.vx-active{opacity:1}
.vx-st .vx-k{color:var(--citation);margin-bottom:var(--space-3)}
.vx-st h3{font-size:28px;letter-spacing:-.025em;line-height:1.1;margin-bottom:var(--space-4)}
.vx-st .vx-d{color:var(--smoke);font-size:var(--text-md);line-height:1.55;max-width:38ch;margin-bottom:var(--space-4)}
.vx-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-2)}
.vx-tools span{font-family:var(--font-mono);font-size:11px;border:1px solid var(--ecru);background:var(--bone);padding:4px 9px;color:var(--coal)}
.vx-st-media{display:none}
.vx-story-media{position:sticky;top:90px;height:calc(100vh - 120px);display:flex;align-items:center}
.vx-sm-stage{position:relative;width:100%;aspect-ratio:16/11}
.vx-sm-item{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .55s var(--vx-ease),transform .55s var(--vx-ease);pointer-events:none}
.vx-sm-item.vx-active{opacity:1;transform:none;pointer-events:auto}
.vx-photo{display:block;border:1px solid var(--ecru)}
.vx-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.vx-sm-item .vx-photo img{aspect-ratio:16/10}
.vx-cmp{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ecru);--pos:50%;-webkit-user-select:none;user-select:none;touch-action:pan-y;border:1px solid var(--ecru)}
.vx-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx-cmp .vx-grey{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.vx-cmp-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--paper)}
.vx-cmp-knob{position:absolute;top:50%;left:var(--pos);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--paper);display:grid;place-items:center;box-shadow:0 6px 18px rgba(10,10,11,.25);font-family:var(--font-mono);font-size:14px;color:var(--coal)}
.vx-cmp-lab{position:absolute;bottom:12px;background:var(--paper);color:var(--coal);padding:4px 8px}
.vx-cmp-lab.vx-l{left:12px}.vx-cmp-lab.vx-r{right:12px}
.vx-cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.vx-cmp:focus-within{outline:2px solid var(--citation);outline-offset:3px}
.vx-pm-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-8);align-items:start}
.vx-seg{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--ecru);margin-top:var(--space-6);background:var(--bone)}
.vx-seg button{background:none;border:0;padding:12px 18px;font-weight:500;font-size:14px;cursor:pointer;display:flex;gap:8px;align-items:center;color:var(--coal)}
.vx-seg button[aria-pressed="true"]{background:var(--coal);color:var(--paper)}
.vx-seg button:focus-visible{outline:2px solid var(--citation);outline-offset:2px}
.vx-seg svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;display:inline-block}
.vx-pm-stage{display:grid}
.vx-pm-view{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s var(--vx-ease),transform .45s var(--vx-ease),visibility 0s .45s}
.vx-pm-view.vx-active{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--vx-ease),transform .45s var(--vx-ease)}
.vx-people{background:var(--bone);border:1px solid var(--ecru);padding:var(--space-6);height:100%}
.vx-people h3{margin-bottom:var(--space-5)}
.vx-people li{display:grid;grid-template-columns:200px 1fr;gap:var(--space-3);align-items:baseline;padding:13px 0;border-top:1px solid var(--ecru);font-size:var(--text-md);font-weight:500}
.vx-people li:last-child{border-bottom:1px solid var(--ecru)}
.vx-people li .vx-mono{font-size:10.5px}
.vx-code{background:var(--pitch);color:var(--off-white);padding:var(--space-6);font-family:var(--font-mono);font-size:12.5px;line-height:1.75;overflow:auto;position:relative;height:100%}
.vx-code::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 90% 0%,var(--aurora-blue),transparent 70%),radial-gradient(50% 60% at 0% 100%,var(--aurora-coral),transparent 70%);pointer-events:none;opacity:.6}
.vx-code pre{position:relative;white-space:pre-wrap;word-break:break-word;font:inherit;margin:0}
.vx-code .vx-ck{color:var(--vx-muted-dark)}.vx-code .vx-cs{color:var(--signal-green)}.vx-code .vx-cp{color:var(--steel)}
.vx-code mark{background:rgba(209,63,18,.28);color:var(--paper);padding:0 2px}
.vx-ctag{position:relative;display:flex;justify-content:space-between;margin-bottom:var(--space-4);color:var(--steel);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.vx-match,.vx p.vx-match{margin-top:var(--space-5);display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--smoke);max-width:44ch}
.vx-match b{color:var(--coal);font-weight:500}
.vx-match .vx-dot{width:10px;height:10px;background:var(--citation);flex:none;margin-top:5px}
.vx-cover{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-8);align-items:center}
.vx-press{display:grid;grid-template-columns:200px 1fr;border:1px solid var(--ecru);background:var(--paper);transition:border-color .25s,transform .25s var(--vx-ease);color:var(--coal)}
.vx-press:hover{border-color:var(--coal);transform:translateY(-2px)}
.vx-press img{width:100%;height:100%;object-fit:cover}
.vx-press-body{padding:var(--space-6)}
.vx-press-body .vx-mono{margin-bottom:var(--space-3)}
.vx-press-body h3{font-size:26px;letter-spacing:-.025em;line-height:1.15;margin-bottom:var(--space-5)}
.vx-measure{background:var(--bone);border-top:1px solid var(--ecru);border-bottom:1px solid var(--ecru)}
.vx-measure-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:end}
.vx-tl{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--space-8)}
.vx-tl-line{position:absolute;left:0;right:0;top:11px;height:2px;background:repeating-linear-gradient(90deg,var(--ecru) 0 6px,transparent 6px 12px)}
.vx-tl-fill{position:absolute;left:0;top:0;height:2px;background:var(--coal);width:var(--to,3%);transition:width 1.6s var(--vx-ease)}
.vx-ready .vx-tl-fill{width:0}
.vx-ready .vx-in .vx-tl-fill{width:var(--to,3%)}
.vx-tl-now{position:absolute;top:-26px;left:var(--to,3%);transform:translateX(-50%);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--citation);white-space:nowrap}
.vx-tl-item{position:relative;padding-right:var(--space-6)}
.vx-tl-dot{width:24px;height:24px;border-radius:50%;background:var(--paper);border:1px solid var(--ecru);display:grid;place-items:center;position:relative;z-index:1;margin-bottom:var(--space-4);font-size:12px;color:var(--paper)}
.vx-tl-item.vx-done .vx-tl-dot{background:var(--coal);border-color:var(--coal)}
.vx-tl-item .vx-mono{margin-bottom:var(--space-2)}
.vx-tl-item b{display:block;font-size:var(--text-lg);font-weight:500;letter-spacing:-.01em;margin-bottom:4px}
.vx-tl-item p{color:var(--smoke);font-size:14px;line-height:1.5;max-width:30ch}
.vx-pill{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;margin-left:6px;vertical-align:2px}
.vx-pill.vx-ok{background:var(--vx-indexed-fill);color:var(--vx-indexed-text)}
.vx-pill.vx-q{background:var(--paper);border:1px solid var(--ecru);color:var(--smoke)}
.vx-cta{padding:var(--space-10) 0}
.vx-cta-in{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-8);align-items:end}
.vx-cta h2{font-size:var(--text-display-lg);letter-spacing:-.045em}
.vx-cta .vx-d{color:var(--smoke);font-size:var(--text-md);line-height:1.55;margin-bottom:var(--space-6);max-width:40ch}

/* Responsive */
@media (max-width:1060px){
  .vx-hero-grid,.vx-c-head,.vx-ct-grid,.vx-faq-grid,.vx-case-top,.vx-decide,.vx-pm-grid,.vx-cover,.vx-cta-in,.vx-measure-head{grid-template-columns:1fr;gap:var(--space-7)}
  .vx-hero h1{font-size:60px}
  .vx-case-hero h1{font-size:68px}
  .vx-tom-grid{grid-template-columns:auto 1fr}
  .vx-local{grid-column:1/-1}
  .vx-factstrip .vx-wrap{grid-template-columns:repeat(2,1fr)}
  .vx-factstrip .vx-lab{grid-column:1/-1;max-width:none;padding:var(--space-5) 0 0}
  .vx-fact{border-left:0;border-top:1px solid var(--ecru);padding:var(--space-5) 0}
  .vx-fact:nth-child(odd){padding-left:var(--space-5);border-left:1px solid var(--ecru)}
}
@media (max-width:860px){
  .vx-steps3{grid-template-columns:1fr;gap:var(--space-7)}
  .vx-head-two{grid-template-columns:1fr;gap:var(--space-4)}
  .vx-panel{grid-template-columns:1fr}
  .vx-panel-vis{border-right:0;border-bottom:1px solid var(--ecru);padding:var(--space-5)}
  .vx-panel-copy{padding:var(--space-5)}
  .vx-track{grid-template-columns:repeat(2,1fr);row-gap:var(--space-5);column-gap:0}
  .vx-track-line,.vx-buyer{display:none}
  .vx-stage{border:1px solid var(--ecru);padding:var(--space-4);align-items:flex-start;text-align:left;gap:var(--space-2)}
  .vx-stage .vx-node{opacity:1!important;width:26px;height:26px}
  .vx-stage[aria-selected="true"]{border-color:var(--citation);background:var(--bone)}
  .vx-stage[aria-selected="true"] .vx-node{background:var(--citation);border-color:var(--citation);color:var(--paper)}
  .vx-sym{font-size:15px}
  .vx-story{grid-template-columns:1fr}
  .vx-story-media{display:none}
  .vx-st,.vx-ready .vx-st{min-height:0;opacity:1;padding:var(--space-6) 0;border-top:1px solid var(--ecru)}
  .vx-st-media{display:block;margin-top:var(--space-4)}
  .vx-notes{grid-template-columns:1fr;gap:var(--space-4)}
  .vx-pattern{grid-template-columns:1fr;gap:var(--space-5)}
  .vx-pat-arrow{transform:rotate(90deg)}
  .vx-people li{grid-template-columns:1fr}
  .vx-press{grid-template-columns:1fr}
  .vx-press img{aspect-ratio:16/9}
  .vx-tl{grid-template-columns:1fr;gap:var(--space-6)}
  .vx-tl-line,.vx-tl-now{display:none}
  .vx-cc-row{grid-template-columns:1fr 64px;row-gap:var(--space-2)}
  .vx-cc-label{grid-column:1/-1}
}
@media (max-width:720px){
  .vx h2{font-size:36px}
  .vx-section,.vx-console,.vx-cta{padding:var(--space-9) 0}
  .vx-hero{padding:var(--space-8) 0 var(--space-7)}
  .vx-hero h1,.vx-case-hero h1{font-size:44px}
  .vx-demo{padding:var(--space-4);min-height:520px}
  .vx-q{font-size:18px}
  .vx-who{display:none}
  .vx-engines button{padding:4px 6px;font-size:10px}
  .vx-steps li{font-size:10px;letter-spacing:.03em}
  .vx-c-head{gap:var(--space-4)}
  .vx-metrics{grid-template-columns:1fr}
  .vx-m-value{font-size:40px}
  .vx-compare-chart{padding:var(--space-4)}
  .vx-ct-copy h2{font-size:34px}
  .vx-tom-grid{grid-template-columns:1fr}
  .vx-portrait{width:140px;height:140px}
  .vx-ticker-label{display:none}
  .vx-quote{font-size:24px}
  .vx-fact .vx-v{font-size:40px}
  .vx-hot{width:28px;height:28px;margin:-14px 0 0 -14px;font-size:11px}
  .vx-people,.vx-code,.vx-press-body,.vx-pattern,.vx-local{padding:var(--space-4)}
  .vx-cta h2{font-size:44px}
  .vx-seg button{padding:10px 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .vx *,.vx *::before,.vx *::after{animation:none!important;transition:none!important}
  .vx-ready .vx-rv,.vx-ready .vx-st{opacity:1;transform:none}
  .vx-ready .vx-bar,.vx-ready .vx-cc-fill,.vx-ready .vx-pat-new li i::after{transform:none}
  .vx-ready .vx-draw{stroke-dashoffset:0}
  .vx-ready .vx-enddot,.vx-ready .vx-pat-new li{opacity:1;transform:none}
  .vx-ready .vx-tl-fill{width:var(--to,3%)}
  .vx-ticker-track{animation:none}
}