/* Styles for the content.js parts (people, research, contact, footer, annotation stages, map). Same palette as the pages. */
.vx-sec{color:#2A1F2D;border-top:1px solid #E7DCDA}
.vx-wrap{max-width:1200px;margin:0 auto;padding:clamp(48px,6.1vw,88px) clamp(20px,5vw,32px);display:flex;flex-direction:column;gap:36px}
.vx-eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#722A63}
.vx-head{display:flex;flex-direction:column;gap:14px;max-width:760px}
.vx-head h2{margin:0;font-size:clamp(30px,5.2vw,44px);line-height:1.12;font-weight:600;letter-spacing:-0.015em;text-wrap:balance}
.vx-head p{margin:0;font-size:19px;line-height:1.65;color:#5E5262;text-wrap:pretty}
.vx-meta{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#722A63}

/* Research */
.vx-pubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:20px}
.vx-pub{background:#FFFFFF;border:1.5px solid #E7DCDA;border-top:3px solid #722A63;border-radius:10px;padding:24px 28px;display:flex;flex-direction:column;gap:8px}
.vx-pub h3{margin:0;font-size:22px;line-height:1.3;font-weight:600}
.vx-pub h3 a{color:#2A1F2D;text-decoration:none}.vx-pub h3 a:hover{color:#722A63}
.vx-pub p{margin:0;font-size:16px;line-height:1.6;color:#5E5262}
.vx-authors{font-style:italic}
.vx-empty{margin:0;padding:24px 28px;border:1.5px dashed #D6CACC;border-radius:10px;font-size:17px;line-height:1.6;color:#5E5262;max-width:760px}

/* People */
.vx-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:36px 24px}
@media (max-width:560px){.vx-team{grid-template-columns:1fr 1fr;gap:28px 14px}.vx-initials{font-size:40px}}
.vx-person{display:flex;flex-direction:column;gap:4px;min-width:0;height:100%}
.vx-portrait{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#F6ECF2,#FFE1A6 60%,#E6C3DB);margin-bottom:10px;display:flex;align-items:center;justify-content:center}
.vx-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx-initials{font-family:'Source Serif 4',Georgia,serif;font-size:56px;font-weight:600;color:#57204C;opacity:.85}
.vx-person h3{margin:0;font-size:19px;line-height:1.3;font-weight:600}
.vx-role{margin:0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#722A63}
.vx-bio{flex:1 1 auto;margin:6px 0 4px;font-size:14.5px;line-height:1.55;color:#5E5262}
.vx-portrait img{object-position:50% 30%}
.vx-mail{align-self:flex-start;margin-top:auto;display:inline-block;padding:4px 0;font-size:14px;color:#5E5262;overflow-wrap:anywhere}.vx-mail:hover{color:#722A63}

/* Partners and funding */
/* Stay connected band (end of Home) */
.vx-contact{background:#4A1B40;color:#FFFFFF}
.vx-contact .vx-wrap{padding-top:clamp(40px,5vw,60px);padding-bottom:clamp(40px,5vw,60px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px 72px;align-items:center}
.vx-cintro{display:flex;flex-direction:column;gap:12px}
.vx-cintro .vx-eyebrow{color:#E6C3DB}
.vx-cintro h2{margin:0;font-size:clamp(28px,4.2vw,40px);line-height:1.12;font-weight:600;letter-spacing:-0.015em;text-wrap:balance}
.vx-clead{margin:0;font-size:17px;line-height:1.6;color:#EED8E6;max-width:520px}
.vx-mark{width:72px;height:auto;margin-bottom:4px}
.vx-clinks{display:flex;flex-direction:column}
.vx-clink{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.22);color:#FFFFFF;text-decoration:none;font-weight:600;font-size:17px}
.vx-clink:first-child{border-top:1px solid rgba(255,255,255,.22)}
.vx-clink span:last-child{transition:transform .2s}
.vx-clink:hover{color:#FFE1A6}.vx-clink:hover span:last-child{transform:translateX(6px)}
@media (max-width:820px){.vx-contact .vx-wrap{grid-template-columns:1fr}}

/* Header (all pages, rendered by content.js) */
.vx-header{background:#FFFFFF;border-bottom:1px solid #E7DCDA}
.vx-hwrap{max-width:1200px;margin:0 auto;padding:10px clamp(20px,5vw,32px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;box-sizing:border-box}
.vx-hbrand{display:flex;align-items:center;gap:12px;text-decoration:none}
.vx-nav{display:flex;align-items:center;gap:6px}
.vx-word.dark{color:#2A1F2D}.vx-word.dark span{color:#722A63}

/* Footer (all pages, rendered by content.js): dark, like the MediaFutures sites */
.vx-footer{background:linear-gradient(160deg,#2E1229 0%,#3B1634 55%,#4A1B40 100%);color:#D9C6D4}
.vx-fwrap{max-width:1200px;margin:0 auto;padding:clamp(40px,5vw,64px) clamp(20px,5vw,32px) 0;box-sizing:border-box}
.vx-ftop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:36px 72px;align-items:start}
.vx-brand{display:flex;flex-direction:column;gap:12px;max-width:380px}
.vx-brand p{margin:0;font-size:15px;line-height:1.6;color:#D9C6D4}
.vx-brandrow{display:inline-flex;align-items:center;gap:10px;text-decoration:none;width:max-content}
.vx-word{font-family:'Inter',system-ui,sans-serif;font-size:19px;font-weight:700;letter-spacing:.14em;line-height:1;color:#FFFFFF}
.vx-word span{color:#F0A23B}
.vx-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px}
.vx-fcol{display:flex;flex-direction:column;gap:8px;min-width:0}
.vx-fcol a{color:#EAD9E5;text-decoration:none;font-size:15px}.vx-fcol a:hover{color:#FFE1A6;text-decoration:underline}
.vx-ftitle{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#E6C3DB;margin-bottom:2px}
.vx-ffund{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px;padding:28px 0;border-top:1px solid rgba(255,255,255,.16)}
.vx-fund{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:#FFFFFF}
.vx-fund img{height:46px;width:auto;align-self:flex-start;opacity:.92;transition:opacity .2s}
.vx-fname{font-family:'Source Serif 4',Georgia,serif;font-size:21px;font-weight:600;line-height:46px;opacity:.92;transition:opacity .2s}
.vx-fund:hover img,.vx-fund:hover .vx-fname{opacity:1}.vx-fund:hover .vx-fname{color:#FFE1A6}
.vx-footbar{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px 24px;padding:18px 0 24px;border-top:1px solid rgba(255,255,255,.16);font-size:13.5px;color:#BFA8B9}
.vx-footbar a{color:#EAD9E5}.vx-footbar a:hover{color:#FFE1A6}
@media (max-width:820px){.vx-ftop{grid-template-columns:1fr}.vx-ffund{grid-template-columns:1fr}}
@media (max-width:560px){.vx-foot{grid-template-columns:1fr 1fr}.vx-foot .vx-fcol:last-child{grid-column:1/-1}}

/* Demo: annotation stages */
.vx-aintro{margin:0;font-size:17px;line-height:1.6;color:#5E5262;max-width:760px}
.vx-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px;counter-reset:none}
.vx-stage{position:relative;display:flex;gap:14px;align-items:flex-start;background:#FFFFFF;border:1.5px solid #2A1F2D;border-radius:10px;padding:18px 20px;box-shadow:3px 3px 0 #FFE1A6;outline:none}
.vx-stage:hover,.vx-stage:focus-visible{border-color:#722A63;box-shadow:3px 3px 0 #E6C3DB}
.vx-stage:focus-visible{outline:3px solid #722A63;outline-offset:3px}
.vx-snum{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:2px solid #2A1F2D;background:#FFE1A6;display:flex;align-items:center;justify-content:center;font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:17px}
.vx-sbody{display:flex;flex-direction:column;gap:1px;min-width:0}
.vx-sbody b{font-size:15px;line-height:1.2}
.vx-sval{font-family:'Source Serif 4',Georgia,serif;font-size:24px;line-height:1.1;font-weight:600;font-variant-numeric:tabular-nums}
.vx-sunit{font-size:13px;color:#5E5262}
.vx-snote{margin-top:6px;font-size:12.5px;font-weight:600;color:#722A63}
.vx-stip{position:absolute;left:12px;right:12px;bottom:calc(100% + 8px);background:#2A1F2D;color:#FFFFFF;font-size:13.5px;line-height:1.5;padding:10px 12px;border-radius:8px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s;z-index:5;pointer-events:none}
.vx-stage:hover .vx-stip,.vx-stage:focus .vx-stip{opacity:1;visibility:visible;transform:none}
.vx-disclaimer{margin:0;font-size:14px;color:#5E5262;font-style:italic}
@media (min-width:900px){.vx-stage:not(:last-child)::after{content:"→";position:absolute;right:-17px;top:50%;transform:translateY(-50%);font-size:18px;color:#722A63}}

/* Demo: US map of articles by political lean */
.vm-intro{margin:0;font-size:17px;line-height:1.6;color:#5E5262;max-width:760px}
.vm-filters{display:flex;flex-wrap:wrap;gap:8px}
.vm-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid #E7DCDA;background:#FFFFFF;color:#2A1F2D;font-size:14px;font-weight:500}
.vm-chip b{font-variant-numeric:tabular-nums;color:#5E5262;font-weight:600}
.vm-chip:hover{border-color:#722A63}
.vm-chip[aria-pressed="true"]{background:#2A1F2D;border-color:#2A1F2D;color:#FFFFFF}.vm-chip[aria-pressed="true"] b{color:#F8D58E}
.vm-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.vm-dot.l,.vm-bar .l{background:#2D63B8}.vm-dot.r,.vm-bar .r{background:#CC3344}.vm-dot.n,.vm-bar .n{background:#B9AFB7}
.vm-grid{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(240px,1fr);gap:20px;align-items:start}
@media (max-width:900px){.vm-grid{grid-template-columns:1fr}}
.vm-figure{margin:0;background:#FFFCF8;border:1px solid #E7DCDA;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.vm-figure figcaption{font-size:13.5px;line-height:1.5;color:#5E5262}
.vm-stage{position:relative}
.vm-svg{display:block;width:100%;height:auto}
.vm-land path{fill:#EFE6EC;stroke:none}
.vm-land path:hover{fill:#E6D3DE}
.vm-borders{fill:none;stroke:#FFFFFF;stroke-width:1;stroke-linejoin:round}
.vm-pt{cursor:pointer;transition:opacity .2s}
.vm-pt.left{fill:#2D63B8}.vm-pt.right{fill:#CC3344}.vm-pt.none{fill:#A99EA7;opacity:.6}
.vm-pt:hover{stroke:#2A1F2D;stroke-width:1.2;opacity:1}
.vm-svg[data-f="left"] .vm-pt:not(.left),.vm-svg[data-f="right"] .vm-pt:not(.right),.vm-svg[data-f="none"] .vm-pt:not(.none){opacity:.07;pointer-events:none}
.vm-svg[data-f="none"] .vm-pt.none{opacity:1}
.vm-tip{position:absolute;transform:translate(-50%,calc(-100% - 10px));width:240px;background:#2A1F2D;color:#FFFFFF;border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.4;display:flex;flex-direction:column;gap:3px;pointer-events:none;z-index:3;box-shadow:0 8px 24px rgba(42,31,45,.25)}
.vm-tip[hidden]{display:none}
.vm-tip.below{transform:translate(-50%,16px)}
.vm-tip b{font-size:14px;font-weight:600}
.vm-tip span{color:#E7DCDA}
.vm-tlean{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:4px;color:#FFFFFF!important}
.vm-tlean.left{background:#2D63B8}.vm-tlean.right{background:#CC3344}.vm-tlean.none{background:#7D717B}
.vm-side{background:#FFFFFF;border:1px solid #E7DCDA;border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.vm-side h3{margin:0;font-size:17px;font-weight:600}
.vm-states{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.vm-states li{display:grid;grid-template-columns:1fr auto;gap:3px 8px;font-size:14px}
.vm-sn{font-variant-numeric:tabular-nums;color:#5E5262}
.vm-bar{grid-column:1/-1;display:flex;height:8px;border-radius:4px;overflow:hidden;background:#F7F1EC}
.vm-bar i{display:block;height:100%}
.vm-nat{border-top:1px solid #E7DCDA;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.vm-nat p{margin:0;font-size:13.5px;line-height:1.5;color:#5E5262}
.vm-natkey{display:flex;gap:14px}.vm-natkey>span{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.vm-note{margin:0;font-size:14px;line-height:1.6;color:#5E5262;max-width:860px;font-style:italic}
.vm-loading{margin:0;color:#5E5262}

/* Vial logo: bubbles rise, the vial wiggles on hover */
.vx-logo-svg .vx-b{transform-box:fill-box;transform-origin:center;animation:vxBub 2.8s ease-in infinite}
.vx-logo-svg .vx-b.b2{animation-delay:-.9s}.vx-logo-svg .vx-b.b3{animation-delay:-1.8s}
@keyframes vxBub{0%{transform:translateY(4px);opacity:0}25%{opacity:.9}100%{transform:translateY(-12px);opacity:0}}
.vx-logo-svg .vx-tilt{transform-box:view-box;transform-origin:32px 58px;transition:transform .3s}
.vx-logo-svg .vx-spark{transform-box:fill-box;transform-origin:center;animation:vxSpark 3.6s ease-in-out infinite}
@keyframes vxSpark{0%,70%,100%{transform:scale(1) rotate(0)}80%{transform:scale(1.25) rotate(20deg)}}
a:hover>.vx-logo-svg .vx-tilt{animation:vxWiggle .6s ease-in-out}
@keyframes vxWiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-10deg)}65%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.vx-logo-svg .vx-b,.vx-logo-svg .vx-spark{animation:none}a:hover>.vx-logo-svg .vx-tilt{animation:none}}

/* Scroll motion (motion.js) */
html,body{overflow-x:clip}
.vx-rv{opacity:0;transform:translateY(var(--dy,36px));transition:opacity .8s ease var(--d,0s),transform .9s cubic-bezier(.2,.75,.2,1) var(--d,0s)}
.vx-rv.vx-in{opacity:1;transform:none}
@media (max-width:700px){.vx-rv{transform:translateY(calc(var(--dy,36px) * .5));transition-duration:.5s,.55s;transition-delay:0s!important}}
.vx-on .vx-rv{opacity:1;transform:none}
.vx-fly{position:absolute;width:52px;height:52px;z-index:0;pointer-events:none;opacity:0;transition:transform 1.3s cubic-bezier(.17,.84,.24,1) .15s,opacity .6s ease .15s}
.vx-fly.from-right{transform:translate(70vw,-40px) rotate(160deg)}
.vx-fly.from-left{transform:translate(-70vw,40px) rotate(-160deg)}
.vx-on>.vx-fly{opacity:1;transform:none}
.vx-fly svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 10px rgba(42,31,45,.15));animation:vxFloat 5s ease-in-out infinite}
.vx-fly.from-left svg{animation-delay:-2.5s}
@keyframes vxFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(5deg)}}
.vx-fly[hidden]{display:none}

/* Demo hero: the four headline numbers, each linking to its step */
.vx-dsteps{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:10px}
.vx-dsteps a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:#FFFFFF;border:1.5px solid #E7DCDA;border-radius:10px;text-decoration:none;color:#2A1F2D;transition:border-color .15s,transform .15s}
.vx-dsteps a:hover{border-color:#722A63;transform:translateY(-2px)}
.vx-dsteps b{font-family:'Source Serif 4',Georgia,serif;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.vx-dsteps span{font-size:13px;color:#5E5262}
.vx-dsteps li:not(:last-child) a{position:relative}
@media (max-width:640px){.vx-dsteps{grid-template-columns:1fr 1fr}}
.vx-dhero svg{flex:0 1 auto;max-width:100%}

/* Papers and demos lists */
.vx-plinks{display:flex;flex-wrap:wrap;gap:6px 18px}
.vx-plinks a{font-weight:600;color:#722A63}
.vx-demos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:20px}
.vx-demo{display:flex;gap:20px;align-items:flex-start;padding:24px;background:#FFFFFF;border:1.5px solid #E7DCDA;border-radius:14px;text-decoration:none;color:#2A1F2D;transition:border-color .15s,box-shadow .15s,transform .15s}
.vx-demo:hover{border-color:#722A63;box-shadow:0 10px 28px rgba(42,31,45,.1);transform:translateY(-2px)}
.vx-dicon{flex:0 0 auto;width:72px;height:72px;border-radius:16px;background:#F4EEFA;display:flex;align-items:center;justify-content:center}
.vx-dicon svg{width:48px;height:48px}
.vx-dbody{display:flex;flex-direction:column;gap:6px;min-width:0}
.vx-dbody b{font-family:'Source Serif 4',Georgia,serif;font-size:24px;line-height:1.2;font-weight:600}
.vx-dsum{font-size:16px;line-height:1.6;color:#5E5262}
.vx-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.vx-tags i{font-style:normal;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:#FCF8F3;border:1px solid #E7DCDA;color:#5E5262}
.vx-dgo{margin-top:6px;font-weight:600;color:#722A63}
.vx-demos .vx-empty,.vx-pubs .vx-empty{align-self:stretch;display:flex;align-items:center}
a.vx-back{display:inline-block;padding:6px 0;text-decoration:none}a.vx-back:hover{color:#57204C;text-decoration:underline}

/* Page banners: each list page has its own, built from VaccAI's own material */
.vx-banner{position:relative;overflow:hidden}
.vx-bwrap{position:relative;max-width:1200px;margin:0 auto;padding:clamp(40px,6vw,88px) clamp(20px,5vw,32px);box-sizing:border-box}
.vx-banner h1{margin:0;font-size:clamp(34px,5.6vw,56px);line-height:1.06;font-weight:600;letter-spacing:-0.02em;text-wrap:balance}

/* Papers: a wall of real headlines behind a white title card */
.vx-b-papers{background:#FCF8F3;border-bottom:1px solid #E7DCDA}
.vx-wall{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:18px;transform:rotate(-3deg) scale(1.08);opacity:.75;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.vx-wall-row{overflow:hidden;white-space:nowrap}
.vx-wall-row>div{display:inline-flex;gap:42px;animation:vxWall var(--dur,140s) linear infinite}
.vx-wall-row.r0>div{--dur:150s}.vx-wall-row.r1>div{--dur:120s;animation-direction:reverse}.vx-wall-row.r2>div{--dur:170s}
.vx-wall-row span{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(20px,2.4vw,30px);font-weight:600;color:#C9B9C4}

@keyframes vxWall{to{transform:translateX(-50%)}}
.vx-bcard{position:relative;max-width:620px;background:#FFFFFF;border:1.5px solid #2A1F2D;border-radius:18px;padding:clamp(24px,3.4vw,40px);box-shadow:8px 8px 0 #E6C3DB;display:flex;flex-direction:column;gap:14px}
.vx-bcard p{margin:0;font-size:18px;line-height:1.6;color:#5E5262}

/* Demos: the article dots on a dark field */
.vx-b-demos{background:radial-gradient(120% 140% at 85% 30%,#4A1B40 0%,#2E1229 55%,#1F0C1C 100%);color:#FFFFFF}
.vx-bsplit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:24px 48px;align-items:center}
.vx-btext{display:flex;flex-direction:column;gap:16px}
.vx-btext .vx-eyebrow{color:#E6C3DB}
.vx-btext p{margin:0;font-size:18px;line-height:1.6;color:#EAD9E5}
.vx-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px!important}
.vx-legend span{display:inline-flex;align-items:center;gap:7px}
.vx-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.vx-legend i.left,.vx-dots .left{background:#5B8DEF;fill:#5B8DEF}
.vx-legend i.right,.vx-dots .right{background:#F0566A;fill:#F0566A}
.vx-legend i.none,.vx-dots .none{background:#8C7A88;fill:#8C7A88}
.vx-dotbox{min-width:0}
.vx-dots{display:block;width:100%;height:auto}
.vx-dots .land{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.18);stroke-width:1}
.vx-dots circle{opacity:0;transform-box:fill-box;transform-origin:center}
.vx-dotbox.ready .vx-dots circle{animation:vxDot .6s ease-out var(--d,0s) forwards}
.vx-dotbox.ready .vx-dots circle.left,.vx-dotbox.ready .vx-dots circle.right{animation:vxDot .6s ease-out var(--d,0s) forwards,vxTwinkle 4s ease-in-out calc(var(--d,0s) + 1s) infinite}
@keyframes vxDot{from{opacity:0;transform:scale(2.4)}to{opacity:.95;transform:scale(1)}}
@keyframes vxTwinkle{0%,100%{opacity:.95}50%{opacity:.45}}
@media (max-width:860px){.vx-bsplit{grid-template-columns:1fr}}

/* Pipeline demo: lavender band with the screening funnel */
.vx-b-pipe{background:linear-gradient(135deg,#F4EEFA 0%,#FCF8F3 70%)}
.vx-funnelbox{flex:1 1 420px;max-width:560px;min-width:0}
.vx-funnel{display:block;width:100%;height:auto;overflow:visible}
.vx-funnel .neck{fill:#E6C3DB;opacity:.55}
.vx-funnel .bar rect{fill:#722A63;stroke:#2A1F2D;stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:vxBar .9s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.vx-funnel .bar:nth-of-type(2) rect{fill:#A8478F}.vx-funnel .bar:nth-of-type(3) rect{fill:#F0A23B}
.vx-funnel .num{font-family:'Source Serif 4',Georgia,serif;font-size:24px;font-weight:600;fill:#FFFFFF}
.vx-funnel .bar:nth-of-type(3) .num{fill:#2A1F2D}
.vx-funnel .lab{font-family:'Inter',system-ui,sans-serif;font-size:19px;font-weight:500;fill:#4A3D4C}
.vx-funnel .drop{fill:#A8478F;animation:vxDrop 1.6s ease-in var(--d,0s) infinite}
@keyframes vxBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vxDrop{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(40px);opacity:0}}

@media (prefers-reduced-motion:reduce){.vx-wall-row>div,.vx-dotbox.ready .vx-dots circle,.vx-funnel .bar rect,.vx-funnel .drop{animation:none!important;opacity:1}.vx-funnel .drop{display:none}}

/* Home hero: a clean sheet unfolds, three vials drop onto it, then the name and copy appear */
.vx-op-hero{background:radial-gradient(80% 120% at 80% 10%,#F4EEFA 0%,#FCF8F3 55%,#FCF8F3 100%);padding:clamp(24px,4vw,56px) clamp(12px,4vw,32px) clamp(36px,5vw,72px);overflow:hidden}
.vx-op-stage{max-width:1180px;margin:0 auto;perspective:2200px}
.vx-op-sheet{background:#FFFFFF;border:1px solid #EADFE6;border-radius:24px;box-shadow:0 30px 70px rgba(42,31,45,.13),0 6px 18px rgba(42,31,45,.06);transform-origin:50% 100%;animation:vxOpIn 0.4s cubic-bezier(.2,.8,.2,1) both}
.vx-op-top{display:flex;gap:10px;align-items:center;padding:20px clamp(20px,4vw,48px) 16px;border-bottom:1px solid #F0E6EC}
.vx-op-top i{display:block;height:8px;border-radius:8px;background:#F1E7EE}
.vx-op-top .w1{width:22%;background:#E6C3DB}.vx-op-top .w2{width:9%}.vx-op-top .w3{width:14%;margin-left:auto}
.vx-op-fold{transform-origin:50% 0;animation:vxOpUnfold 0.55s cubic-bezier(.22,.9,.24,1) 0.15s both;position:relative;border-radius:0 0 24px 24px}
.vx-op-fold::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(114,42,99,.16),rgba(114,42,99,0) 30%);animation:vxNpShade 0.65s ease 0.175s both}
.vx-op-grid{display:flex;flex-direction:column;align-items:center;gap:8px;padding:clamp(18px,2.6vw,32px) clamp(20px,4vw,48px) clamp(32px,4.4vw,56px);text-align:center}
.vx-op-copy{display:flex;flex-direction:column;align-items:center;gap:22px;max-width:860px}
.vx-op-name{display:flex;align-items:center;gap:14px;animation:vxPop .3s cubic-bezier(.3,1.5,.5,1) .55s both}
.vx-op-name .vx-word{font-size:clamp(30px,4.4vw,48px);letter-spacing:.12em}
.vx-op-copy h1{margin:0;font-size:clamp(36px,6vw,72px);line-height:1.02;font-weight:600;letter-spacing:-0.025em;text-wrap:balance;animation:vxRise .35s ease-out .65s both}
.vx-op-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;animation:vxRise .35s ease-out .75s both}
.vx-op-actions .btn{min-width:0}
.vx-op-drop{position:relative;order:-1;width:min(520px,100%);height:clamp(200px,22vw,280px)}
.vx-op-blob{position:absolute;left:8%;right:4%;top:14%;bottom:8%;border-radius:48% 52% 46% 54%/55% 45% 55% 45%;background:linear-gradient(135deg,#F6ECF2,#EDE3F8);animation:vxPop .3s ease-out .05s both}
.vx-op-ground{position:absolute;left:4%;right:2%;bottom:6%;width:94%;height:20px;animation:vxRise .25s ease-out .1s both}
.vx-op-vial{position:absolute;bottom:calc(6% + 6px);width:22%;height:auto;transform-origin:50% 100%}
.vx-op-vial.v1{left:16%;animation:vxFall .8s cubic-bezier(.5,0,.75,0) .2s both,vxLand .45s ease-out 1s forwards}
.vx-op-vial.v2{left:41%;width:19%;animation:vxFall .8s cubic-bezier(.5,0,.75,0) .45s both,vxLand .45s ease-out 1.25s forwards}
.vx-op-vial.v3{left:63%;width:21%;animation:vxFall .8s cubic-bezier(.5,0,.75,0) .7s both,vxLand .45s ease-out 1.5s forwards}
.vx-op-spark{position:absolute;width:30px;height:30px;color:#F0A23B;opacity:0}
.vx-op-spark.k1{left:12%;top:16%;animation:vxSpark .9s ease-out 1s both}
.vx-op-spark.k2{right:10%;top:8%;width:38px;animation:vxSpark .9s ease-out 1.25s both}
.vx-op-spark.k3{left:47%;top:2%;width:22px;animation:vxSpark .9s ease-out 1.5s both}
@keyframes vxOpIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
@keyframes vxOpUnfold{0%{transform:rotateX(-170deg);opacity:.1}50%{opacity:1}100%{transform:rotateX(0)}}
@keyframes vxNpShade{from{opacity:1}to{opacity:0}}
@keyframes vxFall{0%{transform:translateY(-130%) rotate(-28deg);opacity:0}15%{opacity:1}100%{transform:translateY(0) rotate(0);opacity:1}}
@keyframes vxLand{0%{transform:scale(1.12,.86)}45%{transform:scale(.95,1.06) translateY(-10px)}100%{transform:none}}
@keyframes vxSpark{0%{opacity:0;transform:scale(.2) rotate(-40deg)}35%{opacity:1;transform:scale(1.15) rotate(10deg)}100%{opacity:.9;transform:scale(1) rotate(0)}}
@keyframes vxPop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
@keyframes vxRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:860px){.vx-op-drop{height:200px}.vx-op-top .w3{display:none}}
@media (prefers-reduced-motion:reduce){.vx-op-sheet,.vx-op-fold,.vx-op-fold::before,.vx-op-name,.vx-op-copy h1,.vx-op-actions,.vx-op-blob,.vx-op-ground,.vx-op-vial,.vx-op-spark{animation:none!important}.vx-op-fold::before{opacity:0}.vx-op-spark{opacity:.9}}
@media (max-width:600px){.vx-funnel .lab{font-size:30px}.vx-funnel .num{font-size:30px}.vx-funnelbox{flex-basis:100%}}
@media (max-width:560px){.vx-mail{min-height:calc(2.8em + 8px);box-sizing:border-box}}

/* Phones: compact one-row header, list-style team cards, stacked demo cards */
@media (max-width:560px){
  .vx-hwrap{flex-wrap:nowrap;gap:8px;padding:8px 14px}
  .vx-hbrand{gap:8px;min-width:0}
  .vx-hbrand svg{width:30px;height:30px}
  .vx-hbrand .vx-word{font-size:15px;letter-spacing:.1em}
  .vx-nav{gap:2px;flex:0 0 auto}
  .vx-nav .nl{padding:0 8px;font-size:14px;min-height:40px}
  .vx-nav .cta{padding:0 12px;font-size:14px;min-height:36px}
  .vx-team{grid-template-columns:1fr;gap:14px}
  .vx-person{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:start;height:auto;padding:12px;background:#FFFFFF;border:1px solid #EEE5E3;border-radius:14px}
  .vx-portrait{grid-row:1 / span 5;margin:0;aspect-ratio:4/5;border-radius:10px}
  .vx-initials{font-size:30px}
  .vx-person h3{font-size:18px}
  .vx-bio{margin:4px 0 2px;font-size:14px}
  .vx-mail{min-height:0;margin-top:2px;overflow-wrap:anywhere;word-break:normal}
  .vx-demo{flex-direction:column;gap:14px;padding:20px}
  .vx-dicon{width:56px;height:56px;border-radius:14px}
  .vx-dicon svg{width:38px;height:38px}
}

/* Map: click a state for its details */
.vm-land path{cursor:pointer;outline:none;transition:fill .15s}
.vm-land path:focus-visible{fill:#E6D3DE;stroke:#722A63;stroke-width:1.5}
.vm-land path.sel{fill:#E6C3DB;stroke:#722A63;stroke-width:1.6}
.vm-svg[data-state] .vm-pt.out{opacity:.12}
.vm-hint{margin:0;font-size:13.5px;line-height:1.5;color:#5E5262}
.vm-srow{all:unset;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;gap:3px 8px;width:100%;font-size:14px;cursor:pointer;padding:3px 4px;margin:-3px -4px;border-radius:6px}
.vm-srow:hover,.vm-srow:focus-visible{background:#FCF8F3}
.vm-srow:focus-visible{outline:2px solid #722A63}
.vm-states li{display:block}
.vm-state{display:flex;flex-direction:column;gap:10px}
.vm-state[hidden],.vm-overview[hidden]{display:none}
.vm-overview{display:flex;flex-direction:column;gap:12px}
.vm-back{all:unset;cursor:pointer;align-self:flex-start;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#722A63;padding:4px 0}
.vm-back:hover{text-decoration:underline}.vm-back:focus-visible{outline:2px solid #722A63}
.vm-state h3{margin:0;font-size:24px}
.vm-state h4{margin:6px 0 0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#722A63}
.vm-big{margin:0;font-size:14px;color:#5E5262}.vm-big b{font-family:'Source Serif 4',Georgia,serif;font-size:26px;color:#2A1F2D;margin-right:2px}
.vm-state .vm-natkey{flex-wrap:wrap;gap:4px 12px;font-size:13px;margin:0}
.vm-mini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.vm-mini li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted #E7DCDA;padding-bottom:3px}
.vm-mini b{font-variant-numeric:tabular-nums;color:#5E5262;font-weight:600}
.vm-heads{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.vm-heads li{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.4}
.vm-heads a{color:#2A1F2D;font-weight:600;text-decoration:none}.vm-heads a:hover{color:#722A63;text-decoration:underline}
.vm-heads span{font-size:12.5px;color:#5E5262}
.vm-heads i{font-style:normal;font-weight:600}.vm-heads i.left{color:#2D63B8}.vm-heads i.right{color:#CC3344}

/* Hero = one screen. Tall/portrait screens: centred stack. Short wide screens (laptops): vials
   left, name + headline right, so nothing has to shrink to fit. */
.vx-op-hero{box-sizing:border-box;min-height:calc(100svh - 65px);display:flex;padding:clamp(14px,2.4vh,28px) clamp(12px,4vw,32px)}
.vx-op-stage{flex:1;display:flex;width:100%}
.vx-op-sheet{flex:1;display:flex;flex-direction:column;width:100%}
.vx-op-fold{flex:1;display:flex}
.vx-op-grid{flex:1;justify-content:center;gap:clamp(10px,2.2vh,24px);padding:clamp(20px,4vh,48px) clamp(20px,4vw,56px)}
.vx-op-drop{height:clamp(200px,30vh,330px)}
.vx-op-copy h1{font-size:clamp(36px,6vw,76px)}
@media (min-width:900px) and (max-height:900px){
  .vx-op-grid{flex-direction:row;justify-content:space-between;align-items:center;text-align:left;gap:clamp(24px,4vw,64px)}
  .vx-op-drop{order:0;flex:0 0 46%;width:auto;height:min(58vh,440px)}
  .vx-op-copy{align-items:flex-start;flex:1 1 0;max-width:600px}
  .vx-op-actions{justify-content:flex-start}
  .vx-op-copy h1{font-size:clamp(40px,4.8vw,72px)}
}
@media (max-width:560px){.vx-op-hero{min-height:0}.vx-op-grid{gap:16px;padding:24px 20px 32px}.vx-op-drop{height:230px}.vx-op-copy h1{font-size:clamp(34px,10vw,48px)}}
/* Hero: text and card are there at once; only the vials (and their sparkles) animate */
.vx-op-sheet,.vx-op-fold,.vx-op-fold::before,.vx-op-name,.vx-op-copy h1,.vx-op-actions,.vx-op-blob,.vx-op-ground{animation:none!important}
.vx-op-fold::before{opacity:0}
@media (max-width:560px){.vx-nav{gap:10px}.vx-nav .nl{padding:0 6px}.vx-nav .cta{margin-left:4px}}
@media (max-width:340px){.vx-nav{gap:4px}.vx-hbrand .vx-word{font-size:14px}}

/* MediaFutures lockup: next to VaccAI in the header and under the hero buttons. */
.vx-hbrands{display:flex;align-items:center;gap:16px;min-width:0}
.vx-hsep{width:1.5px;height:34px;background:#E7DCDA}
.vx-hmf{display:flex;align-items:center}
.vx-hmf img{display:block;height:36px;width:auto}
.vx-op-mf{display:inline-flex;align-items:center;gap:14px;margin-top:6px;color:#5E5262;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.vx-op-mf img{display:block;height:64px;width:auto}
.vx-op-mf:hover img,.vx-hmf:hover img{opacity:.8}
/* Phones: the header has no room, so MediaFutures sits in the hero (and footer) only. */
@media (max-width:700px){.vx-hsep,.vx-hmf{display:none}.vx-op-mf{gap:12px;margin-top:2px;font-size:11px}.vx-op-mf img{height:44px}}