/* Animated illustrations and value components for inner pages (build/visuals.py).
   Uses the --pg-* tokens from pages.css, so it follows variation A light, A dark and B.
   All motion is scoped under .vx-on (added by visuals.js when a block scrolls into view);
   at rest, without JS and with reduced motion, every element is visible in its final state. */

.theme-a { --vx-ok: #0f7a55; --vx-on: #15150f; --vx-shadow: 0 12px 28px rgba(21, 21, 15, .09); }
.theme-b { --vx-ok: var(--mint, #33c893); --vx-on: #15150f; --vx-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
[data-theme="dark"] .theme-a { --vx-ok: #4fd6a2; --vx-shadow: 0 12px 28px rgba(0, 0, 0, .4); }

.vx { --vx-ease: cubic-bezier(.22, 1, .36, 1); }
.vx p, .vx ul, .vx ol { margin: 0; }
.vx ul, .vx ol { list-style: none; padding: 0; }
.vx em { font-style: normal; color: var(--pg-muted); }
.vx code { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

/* ------------------------------------------------------------------ keyframes (slow and calm) */
@keyframes vx-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes vx-pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes vx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes vx-float-s { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes vx-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes vx-grow { from { transform: scaleY(.06); } to { transform: none; } }
@keyframes vx-growx { from { transform: scaleX(0); } to { transform: none; } }
@keyframes vx-flow { to { stroke-dashoffset: -24; } }
@keyframes vx-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vx-live { 0% { box-shadow: 0 0 0 0 rgba(51, 200, 147, .5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(51, 200, 147, 0); } }
@keyframes vx-ripple { from { transform: scale(1); opacity: .65; } to { transform: scale(1.7); opacity: 0; } }
@keyframes vx-spin { to { transform: rotate(360deg); } }
@keyframes vx-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ------------------------------------------------------------------ hero panel */
.vx-hero {
  position: relative; width: 100%; max-width: 500px; height: 390px; box-sizing: border-box; padding: 18px;
  display: flex; flex-direction: column; gap: 12px; border-radius: 26px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--pg-line); background-color: var(--pg-panel);
  background-image: linear-gradient(var(--pg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pg-grid) 1px, transparent 1px);
  background-size: 28px 28px; color: var(--pg-text); font-size: .8rem; line-height: 1.3; text-align: left;
}
.vx-hero.vx-sm { height: 340px; max-width: 450px; }
.vx-sm .vx-venn { height: 150px; }
.vx-sm .vx-cir { width: 138px; height: 138px; padding: 0 16px; }
.vx-sm .vx-cir.a { left: calc(50% - 122px); padding-right: 50px; } .vx-sm .vx-cir.b { left: calc(50% - 16px); padding-left: 50px; }
.vx-card { position: relative; box-sizing: border-box; background: var(--pg-surface); border: 1px solid var(--pg-line); border-radius: 14px; padding: 10px 12px; box-shadow: var(--vx-shadow); }
.vx-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.vx-k { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pg-muted); }
.vx-sample { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pg-muted); border: 1px dashed var(--pg-line); border-radius: 999px; padding: .1rem .45rem; white-space: nowrap; }
.vx-foot { margin-top: auto !important; text-align: center; font-size: .72rem; font-weight: 700; color: var(--pg-muted); }
.vx-float { position: absolute; z-index: 3; white-space: nowrap; font-weight: 700; font-size: .72rem; border-radius: 999px; padding: .42rem .8rem; }
.vx-pill { font-size: .66rem; font-weight: 700; border-radius: 999px; padding: .2rem .55rem; background: var(--pg-alt); border: 1px solid var(--pg-line); white-space: nowrap; }
.vx-av { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pg-c1); color: var(--vx-on); font-size: .62rem; font-weight: 800; }
.vx-ln { display: block; height: 7px; border-radius: 4px; background: var(--pg-line); }
.vx-ln.soft { opacity: .55; } .vx-ln.strong { background: var(--pg-muted); opacity: .5; height: 9px; }
.vx-ln.w50 { width: 50%; } .vx-ln.w60 { width: 60%; } .vx-ln.w70 { width: 70%; } .vx-ln.w80 { width: 80%; } .vx-ln.w90 { width: 90%; }
.vx-draw { fill: none; stroke-dasharray: 100; stroke-dashoffset: 0; }
.vx-on .vx-draw { animation: vx-draw 2.6s ease-out both .6s; }
.vx-on .vx-float { animation: vx-pop .8s var(--vx-ease) both 1.6s, vx-float 6s ease-in-out infinite 2.4s; }
.vx-on .vx-float.vx-f2 { animation-delay: 2.2s, 3.4s; }

/* bids: agent moving bids inside a cap rail, with an approval */
.vx-bids .vx-head { display: flex; align-items: center; gap: 8px; }
.vx-bids .vx-head b { flex: 1; font-size: .86rem; }
.vx-live { width: 9px; height: 9px; border-radius: 50%; background: var(--pg-c3); flex: none; }
.vx-on .vx-live { animation: vx-live 2.4s ease-out infinite; }
.vx-capl { font-size: .68rem; font-weight: 700; color: var(--pg-hl); }
.vx-rail { position: relative; height: 12px; margin: 12px 0 4px; border-radius: 99px; background: var(--pg-alt); border: 1px solid var(--pg-line); }
.vx-rail .vx-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 58%; border-radius: 99px; background: var(--pg-c3); opacity: .8; }
.vx-rail .vx-capline { position: absolute; left: 78%; top: -9px; width: 2px; height: 28px; background: var(--pg-hl); border-radius: 2px; }
.vx-rail .vx-knob { position: absolute; left: 58%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--pg-surface); border: 3px solid var(--pg-c3); box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }
@keyframes vx-knob { 0%, 100% { left: 34%; } 45%, 55% { left: 72%; } }
@keyframes vx-knobfill { 0%, 100% { width: 34%; } 45%, 55% { width: 72%; } }
.vx-on .vx-rail .vx-knob { animation: vx-knob 9s ease-in-out infinite; }
.vx-on .vx-rail .vx-fill { animation: vx-knobfill 9s ease-in-out infinite; }
.vx-acts { display: grid; gap: 8px; }
.vx-act { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.vx-ic { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--pg-alt); font-weight: 800; font-size: .72rem; }
.vx-tx { flex: 1; display: grid; min-width: 0; }
.vx-tx b, .vx-tx em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-tx em { font-size: .7rem; }
.vx-ok { color: var(--vx-ok); font-weight: 800; }
.vx-approve { font-size: .68rem; font-weight: 800; border-radius: 8px; padding: .3rem .55rem; background: var(--pg-c2); color: #fff; }
.vx-on .vx-act { animation: vx-in .9s var(--vx-ease) both var(--d); }
.vx-on .vx-approve { animation: vx-live 2.6s ease-out infinite 3s; }

/* reporting: a white-label report assembling itself, client logo swapping */
.vx-reporting { justify-content: center; }
.vx-doc { display: grid; gap: 10px; padding: 14px; }
.vx-doc-h { display: flex; align-items: center; gap: 10px; }
.vx-lgs, .vx-nms { position: relative; display: block; }
.vx-lgs { width: 30px; height: 30px; flex: none; }
.vx-nms { flex: 1; height: 1.2em; min-width: 0; }
.vx-lg { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 9px; font-style: normal; font-weight: 800; color: var(--vx-on); background: var(--pg-c1); }
.vx-lg2 { background: var(--pg-c2); color: #fff; } .vx-lg3 { background: var(--pg-c3); }
.vx-nm { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .84rem; }
.vx-lg2, .vx-lg3, .vx-nm2, .vx-nm3 { opacity: 0; }
@keyframes vx-swap { 0% { opacity: 0; transform: translateY(6px); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-6px); } }
.vx-on .vx-lg, .vx-on .vx-nm { animation: vx-swap 10.5s ease-in-out infinite; }
.vx-on .vx-lg1, .vx-on .vx-nm1 { animation-delay: -.4s; }
.vx-on .vx-lg2, .vx-on .vx-nm2 { animation-delay: 3.1s; }
.vx-on .vx-lg3, .vx-on .vx-nm3 { animation-delay: 6.6s; }
.vx-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vx-kpis span { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--pg-alt); }
.vx-kpis em { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.vx-kpis b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.vx-kpis span:last-child { background: var(--pg-text); } .vx-kpis span:last-child em, .vx-kpis span:last-child b { color: var(--pg-surface); }
.vx-chart { position: relative; height: 130px; }
.vx-bars { position: absolute; inset: 10px 0 0; display: flex; align-items: flex-end; gap: 7px; }
.vx-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: var(--pg-c1); opacity: .85; transform-origin: bottom; }
.vx-bars i:nth-child(3n) { background: #f5b23d; }
.vx-chart svg { position: absolute; inset: 10px 0 0; width: 100%; height: calc(100% - 10px); }
.vx-chart path { stroke: var(--pg-c2); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.vx-on .vx-bars i { animation: vx-grow 1.2s var(--vx-ease) both var(--d); }
.vx-reporting .vx-f1 { right: 12px; top: 12px; color: var(--vx-ok); }
.vx-reporting .vx-f2 { left: 14px; bottom: 12px; }

/* warehouse: layered dbt models */
.vx-wh-top { padding: 0 2px; }
.vx-eng { display: flex; gap: 4px; }
.vx-eng i { font-style: normal; font-size: .66rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--pg-line); background: var(--pg-surface); color: var(--pg-muted); }
.vx-slabs { position: relative; flex: 1; display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; padding-left: 22px; min-height: 0; }
.vx-slab { display: grid; gap: 7px; align-content: center; min-width: 0; }
.vx-slab .vx-row b { font-size: .84rem; white-space: nowrap; }
.vx-slab code { font-size: .66rem; color: var(--pg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-slab ul { display: flex; gap: 5px; flex-wrap: nowrap; overflow: hidden; }
.vx-slab li { font-size: .66rem; font-weight: 700; padding: .14rem .5rem; border-radius: 6px; background: var(--pg-alt); white-space: nowrap; }
.vx-slab.s1 { margin-right: 0; border-left: 4px solid #dcae4a; }
.vx-slab.s2 { margin-right: 18px; border-left: 4px solid var(--pg-c2); }
.vx-slab.s3 { margin-right: 36px; border-left: 4px solid var(--pg-c1); }
.vx-slab.s3 li { font-family: var(--mono, ui-monospace, monospace); font-weight: 600; }
.vx-pipe { position: absolute; left: 6px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--pg-line); overflow: hidden; }
.vx-pipe i { position: absolute; left: -1.5px; width: 6px; height: 14px; border-radius: 3px; background: var(--pg-c1); bottom: -14px; opacity: 0; }
@keyframes vx-rise { 0% { bottom: -14px; opacity: 0; } 15%, 85% { opacity: 1; } 100% { bottom: 100%; opacity: 0; } }
.vx-on .vx-pipe i { animation: vx-rise 3.6s linear infinite; }
.vx-on .vx-pipe i:nth-child(2) { animation-delay: 1.2s; } .vx-on .vx-pipe i:nth-child(3) { animation-delay: 2.4s; }
.vx-on .vx-slab { animation: vx-in 1s var(--vx-ease) both var(--d); }
.vx-warehouse .vx-f1 { right: 14px; bottom: 14px; color: var(--vx-ok); }

/* amc: clean-room overlap + query card */
.vx-venn { position: relative; height: 170px; flex: none; }
.vx-cir { position: absolute; top: 6px; width: 158px; height: 158px; border-radius: 50%; display: grid; align-content: center; gap: 2px; padding: 0 22px; box-sizing: border-box; font-size: .74rem; }
.vx-cir b { font-size: .8rem; line-height: 1.2; }
.vx-cir em { font-size: .66rem; }
.vx-cir.a { left: calc(50% - 138px); background: color-mix(in srgb, var(--pg-c1) 30%, transparent); border: 2px solid var(--pg-c1); text-align: left; padding-right: 60px; }
.vx-cir.b { left: calc(50% - 20px); background: color-mix(in srgb, var(--pg-c2) 28%, transparent); border: 2px solid var(--pg-c2); text-align: right; padding-left: 60px; }
.vx-ov { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: .68rem; font-weight: 800; background: var(--pg-surface); border: 1px solid var(--pg-line); border-radius: 999px; padding: .2rem .55rem; z-index: 2; }
@keyframes vx-cir-a { from { transform: translateX(-26px); } to { transform: none; } }
@keyframes vx-cir-b { from { transform: translateX(26px); } to { transform: none; } }
.vx-on .vx-cir.a { animation: vx-cir-a 2.2s var(--vx-ease) both .2s, vx-float-s 7s ease-in-out infinite 2.4s; }
.vx-on .vx-cir.b { animation: vx-cir-b 2.2s var(--vx-ease) both .2s, vx-float-s 7s ease-in-out infinite 3.4s; }
.vx-on .vx-ov { animation: vx-pop .8s var(--vx-ease) both 1.6s; }
.vx-query { display: grid; gap: 4px; }
.vx-query code { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-query code i { font-style: normal; font-weight: 700; color: var(--pg-c2); }
.vx-on .vx-query code { animation: vx-type 1.1s steps(24, end) both var(--d); }
.vx-amc .vx-f1 { left: 14px; bottom: 14px; color: var(--vx-ok); }
.vx-amc .vx-f2 { right: 14px; top: 14px; }

/* capi: browser + server -> dedupe -> Meta / Google / TikTok */
.vx-capi { display: block; }
.vx-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.vx-wires path { fill: none; stroke: var(--pg-muted); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; opacity: .6; }
.vx-on .vx-wires path { animation: vx-flow 1.6s linear infinite; }
.vx-src { position: absolute; left: 4%; width: 34%; display: grid; gap: 2px; padding: 9px 10px; }
.vx-src.s1 { top: 14%; } .vx-src.s2 { top: 55%; }
.vx-src code { font-size: .64rem; color: var(--pg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-dedupe { position: absolute; left: 54%; top: 48%; translate: -50% -50%; width: 92px; height: 92px; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px; background: var(--pg-c3); color: var(--vx-on); box-shadow: 0 14px 30px rgba(0, 0, 0, .14); z-index: 2; }
.vx-dedupe b { font-size: .86rem; } .vx-dedupe span { font-size: .68rem; font-weight: 700; }
.vx-dst { position: absolute; left: 79%; width: 50px; height: 50px; margin-top: -25px; border-radius: 14px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 22px rgba(0, 0, 0, .14); border: 1px solid var(--pg-line); }
.vx-dst.d1 { top: 18%; } .vx-dst.d2 { top: 48%; } .vx-dst.d3 { top: 78%; }
.vx-capi .vx-foot { position: absolute; left: 0; right: 0; bottom: 12px; }
.vx-on .vx-src { animation: vx-in .9s var(--vx-ease) both var(--d); }
.vx-on .vx-dedupe { animation: vx-pop .9s var(--vx-ease) both var(--d), vx-float-s 6s ease-in-out infinite 2s; }
.vx-on .vx-dst { animation: vx-pop .8s var(--vx-ease) both var(--d), vx-float 6s ease-in-out infinite calc(var(--d) + 1s); }

/* mmm: contribution bars + response curve */
.vx-contrib { display: grid; gap: 7px; }
.vx-hb { display: grid; grid-template-columns: 86px 1fr 34px; align-items: center; gap: 8px; font-size: .72rem; }
.vx-hb span { white-space: nowrap; }
.vx-hb i { display: block; height: 11px; width: var(--w); border-radius: 6px; background: var(--pg-c1); transform-origin: left; }
.vx-hb:nth-child(3) i { background: var(--pg-c2); } .vx-hb:nth-child(4) i { background: #f5b23d; } .vx-hb:nth-child(5) i { background: var(--pg-c3); }
.vx-hb:last-child i { background: var(--pg-line); }
.vx-hb em { text-align: right; font-weight: 700; color: var(--pg-text); font-variant-numeric: tabular-nums; }
.vx-on .vx-hb i { animation: vx-growx 1.4s var(--vx-ease) both var(--d); }
.vx-curve { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.vx-curve svg { flex: 1; min-height: 0; width: 100%; }
.vx-axis { fill: none; stroke: var(--pg-line); stroke-width: 2; }
.vx-curve .vx-draw { stroke: var(--pg-c2); stroke-width: 3.5; stroke-linecap: round; }
.vx-sat { stroke: var(--pg-hl); stroke-width: 1.5; stroke-dasharray: 4 4; }
.vx-curve text { font-size: 6.5px; fill: var(--pg-muted); font-weight: 700; }
.vx-dot { fill: var(--pg-c1); }

/* about: four offices, local clocks, since 2013 */
.vx-about-top { gap: 10px; }
.vx-since, .vx-team { flex: 1; display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; }
.vx-since b, .vx-team b { font-size: 1.6rem; letter-spacing: -.03em; line-height: 1; color: var(--pg-hl); font-variant-numeric: tabular-nums; }
.vx-since em, .vx-team em { font-size: .72rem; font-weight: 700; }
.vx-map { flex: 1; min-height: 0; overflow: hidden; background-color: var(--pg-surface); background-image: radial-gradient(var(--pg-line) 1.4px, transparent 1.6px); background-size: 12px 12px; }
.vx-arc { position: absolute; inset: 14% 0 30%; width: 100%; height: 56%; }
.vx-arc path { fill: none; stroke: var(--pg-c1); stroke-width: 1.6; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; opacity: .8; }
.vx-on .vx-arc path { animation: vx-flow 2s linear infinite; }
.vx-pin { position: absolute; top: 60%; translate: -50% -50%; display: grid; justify-items: center; gap: 6px; }
.vx-pin i { width: 14px; height: 14px; border-radius: 50%; background: var(--pg-c1); border: 3px solid var(--pg-surface); box-shadow: 0 0 0 1px var(--pg-line); }
.vx-pin b { font-size: .68rem; background: var(--pg-surface); border: 1px solid var(--pg-line); border-radius: 999px; padding: .1rem .45rem; white-space: nowrap; }
.vx-on .vx-pin { animation: vx-pop .8s var(--vx-ease) both var(--d); }
.vx-on .vx-pin i { animation: vx-live 3s ease-out infinite var(--d); }
.vx-clocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vx-clock { display: grid; gap: 2px; padding: 8px 10px; text-align: center; }
.vx-clock em { font-size: .66rem; font-weight: 700; }
.vx-clock b { font-size: .95rem; font-variant-numeric: tabular-nums; }

/* contact: message -> engineer reply */
.vx-contact { justify-content: center; gap: 14px; }
.vx-bub { position: relative; max-width: 84%; padding: 12px 14px; border-radius: 18px; font-size: .82rem; line-height: 1.4; box-shadow: var(--vx-shadow); box-sizing: border-box; }
.vx-bub .vx-k { margin-bottom: 4px; }
.vx-me { align-self: flex-end; background: var(--pg-surface); border: 1px solid var(--pg-line); border-bottom-right-radius: 6px; }
.vx-reply { align-self: flex-start; display: flex; gap: 10px; align-items: flex-start; background: var(--pg-c1); color: var(--vx-on); border-bottom-left-radius: 6px; }
.vx-reply .vx-k { color: inherit; opacity: .75; }
.vx-reply .vx-av { background: var(--pg-surface); color: var(--pg-text); }
.vx-typing { align-self: flex-start; display: flex; align-items: center; gap: 5px; height: 0; opacity: 0; overflow: hidden; }
.vx-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--pg-muted); }
@keyframes vx-typing { 0% { opacity: 0; height: 0; } 12%, 85% { opacity: 1; height: 28px; } 100% { opacity: 0; height: 0; } }
.vx-on .vx-typing { animation: vx-typing 2s ease both 1s; }
.vx-on .vx-typing i { animation: vx-blink 1s ease-in-out infinite; }
.vx-on .vx-typing i:nth-child(3) { animation-delay: .2s; } .vx-on .vx-typing i:nth-child(4) { animation-delay: .4s; }
.vx-on .vx-bub { animation: vx-in 1s var(--vx-ease) both var(--d); }
.vx-contact .vx-foot { margin-top: 4px !important; }

/* plan: checklist plan card being filled */
.vx-plancard { display: grid; gap: 12px; padding: 16px; margin-top: 8px; }
.vx-plancard b { font-size: .92rem; }
.vx-icons { display: flex; gap: 4px; }
.vx-icons img { width: 22px; height: 22px; border-radius: 6px; background: #fff; padding: 2px; border: 1px solid var(--pg-line); }
.vx-prog { height: 8px; border-radius: 99px; background: var(--pg-alt); overflow: hidden; }
.vx-prog i { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--pg-c3); transform-origin: left; }
.vx-on .vx-prog i { animation: vx-growx 3.2s ease-in-out both .6s; }
.vx-checks { display: grid; gap: 9px; }
.vx-checks li { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 600; }
.vx-tick { position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--pg-c3); }
.vx-tick::after { content: ""; position: absolute; left: 7px; top: 4px; width: 4px; height: 8px; border: solid var(--vx-on); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vx-on .vx-checks li { animation: vx-in .8s var(--vx-ease) both var(--d); }
.vx-on .vx-tick { animation: vx-pop .6s var(--vx-ease) both calc(var(--d) + 300ms); }
.vx-hero.vx-plan { justify-content: center; padding-bottom: 70px; }
.vx-hero.vx-plan .vx-f1 { left: 16px; bottom: 16px; display: grid; gap: 1px; border-radius: 14px; padding: .5rem .8rem; }
.vx-hero.vx-plan .vx-f1 em { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }
.vx-hero.vx-plan .vx-f1 b { font-size: .95rem; color: var(--pg-hl); }
.vx-hero.vx-plan .vx-f2 { right: 14px; bottom: 24px; }

/* pricing: scope -> fixed quote */
.vx-price { flex: 1; display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; gap: 6px; min-height: 0; }
.vx-scope { display: grid; gap: 8px; }
.vx-scope ul { display: grid; gap: 6px; }
.vx-scope li { font-size: .72rem; font-weight: 700; padding: .4rem .55rem; border-radius: 9px; background: var(--pg-alt); border-left: 3px solid var(--pg-c1); }
.vx-scope li:nth-child(2) { border-left-color: var(--pg-c2); } .vx-scope li:nth-child(3) { border-left-color: #f5b23d; } .vx-scope li:nth-child(4) { border-left-color: var(--pg-c3); }
.vx-dots { display: flex; justify-content: center; gap: 4px; }
.vx-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--pg-c1); opacity: .35; }
.vx-on .vx-dots i { animation: vx-blink 1.8s ease-in-out infinite; }
.vx-on .vx-dots i:nth-child(2) { animation-delay: .3s; } .vx-on .vx-dots i:nth-child(3) { animation-delay: .6s; }
.vx-quote { display: grid; gap: 8px; padding: 14px 12px 34px; overflow: visible; }
.vx-qt { font-size: 1rem; }
.vx-qrow { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1px dashed var(--pg-line); font-size: .74rem; }
.vx-qrow b { color: var(--pg-hl); }
.vx-stamp { position: absolute; left: 50%; bottom: -12px; translate: -50% 0; rotate: -4deg; white-space: nowrap; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--pg-hl); background: var(--pg-surface); border: 2px solid var(--pg-hl); border-radius: 8px; padding: .3rem .5rem; }
.vx-on .vx-scope li { animation: vx-in .8s var(--vx-ease) both var(--d); }
.vx-on .vx-quote { animation: vx-in 1s var(--vx-ease) both 1.4s; }
.vx-on .vx-stamp { animation: vx-pop .7s cubic-bezier(.34, 1.56, .64, 1) both 2.6s; }

/* security: your-cloud boundary, named access, access log */
.vx-security { gap: 10px; }
.vx-eng-chip { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; }
.vx-gate { position: absolute; left: 50%; top: 22px; font-size: .68rem; font-weight: 700; color: var(--pg-muted); }
.vx-cloud { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 2px dashed var(--pg-c3); border-radius: 18px; background: color-mix(in srgb, var(--pg-c3) 8%, transparent); }
.vx-inner { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.vx-db { display: grid; justify-items: center; gap: 6px; text-align: center; font-weight: 700; font-size: .74rem; padding: 10px 8px; }
.vx-db i { width: 30px; height: 26px; border-radius: 50% / 30%; background: var(--pg-c3); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12); }
.vx-db i.k { border-radius: 8px; background: var(--pg-c2); }
.vx-lock { width: 46px; height: 52px; }
.vx-lock path { fill: none; stroke: var(--pg-text); stroke-width: 4; stroke-linecap: round; }
.vx-lock rect { fill: var(--pg-c1); }
.vx-lock circle { fill: var(--pg-surface); }
.vx-log { display: grid; gap: 4px; padding: 10px 12px; }
.vx-log code { font-size: .72rem; display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.vx-log code i { font-style: normal; font-weight: 700; min-width: 48px; color: var(--pg-c2); }
.vx-log code b { margin-left: auto; color: var(--vx-ok); }
.vx-on .vx-eng-chip { animation: vx-in .9s var(--vx-ease) both var(--d), vx-float-s 6s ease-in-out infinite 1.4s; }
.vx-on .vx-lock { animation: vx-float 5s ease-in-out infinite; }
.vx-on .vx-log code { animation: vx-type 1s steps(26, end) both var(--d); }

/* work: engagement timeline */
.vx-work { justify-content: center; }
.vx-steps { position: relative; display: grid; gap: 12px; padding-left: 30px !important; }
.vx-track { position: absolute; left: 9px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--pg-line); }
.vx-track span { position: absolute; inset: 0; border-radius: 3px; background: var(--pg-c1); transform-origin: top; }
.vx-steps li { position: relative; display: grid; gap: 1px; background: var(--pg-surface); border: 1px solid var(--pg-line); border-radius: 12px; padding: 8px 12px; box-shadow: var(--vx-shadow); }
.vx-steps li i { position: absolute; left: -27px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--pg-c1); border: 3px solid var(--pg-panel); }
.vx-steps li b { font-size: .84rem; } .vx-steps li em { font-size: .7rem; }
.vx-on .vx-track span { animation: vx-grow 3s ease-in-out both .3s; }
.vx-on .vx-steps li { animation: vx-in .9s var(--vx-ease) both var(--d); }
.vx-work .vx-f1 { right: 14px; top: 14px; }

/* faq: Q and A bubbles */
.vx-faq { justify-content: center; gap: 10px; }
.vx-faq .vx-bub { display: flex; gap: 10px; align-items: flex-start; max-width: 88%; }
.vx-qm { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: .72rem; background: var(--pg-text); color: var(--pg-surface); }
.vx-q { align-self: flex-start; background: var(--pg-surface); border: 1px solid var(--pg-line); border-top-left-radius: 6px; font-weight: 700; }
.vx-a { align-self: flex-end; background: var(--pg-c3); color: var(--vx-on); border-top-right-radius: 6px; }
.vx-a .vx-qm { background: var(--pg-surface); color: var(--pg-text); }
.vx-faq .vx-foot { margin-top: 6px !important; }

/* resources / blog: stacked guide cards */
.vx-resources { justify-content: center; align-items: center; }
.vx-fan { position: relative; width: 300px; max-width: 100%; height: 250px; }
.vx-guide { position: absolute; top: 20px; width: 170px; height: 210px; display: grid; align-content: start; gap: 9px; padding: 14px; }
.vx-guide.g1 { left: 0; rotate: -9deg; } .vx-guide.g2 { left: calc(50% - 85px); top: 4px; z-index: 2; } .vx-guide.g3 { right: 0; rotate: 9deg; }
.vx-tag { justify-self: start; font-size: .62rem; font-weight: 800; padding: .2rem .5rem; border-radius: 999px; background: var(--pg-c1); color: var(--vx-on); white-space: nowrap; }
.vx-guide.g1 .vx-tag { background: var(--pg-c2); color: #fff; } .vx-guide.g3 .vx-tag { background: var(--pg-c3); }
.vx-mini { display: flex; align-items: flex-end; gap: 5px; height: 54px; margin-top: 6px; }
.vx-mini i { flex: 1; border-radius: 4px 4px 1px 1px; background: var(--pg-line); }
.vx-mini i:nth-child(1) { height: 40%; } .vx-mini i:nth-child(2) { height: 70%; } .vx-mini i:nth-child(3) { height: 55%; } .vx-mini i:nth-child(4) { height: 90%; background: var(--pg-c1); }
.vx-spark { position: absolute; right: 16%; top: 12%; color: var(--pg-c1); font-size: 1.4rem; }
.vx-on .vx-guide { animation: vx-float 7s ease-in-out infinite; }
.vx-on .vx-guide.g2 { animation-delay: -2.3s; } .vx-on .vx-guide.g3 { animation-delay: -4.6s; }
.vx-on .vx-spark { animation: vx-blink 3s ease-in-out infinite; }
.vx-resources .vx-f1 { left: 50%; translate: -50% 0; bottom: 14px; }
.vx-on.vx-resources .vx-f1 { animation: vx-pop .8s var(--vx-ease) both 1.2s; }

/* legal: a modest document */
.vx-legal { align-items: center; justify-content: center; }
.vx-paper { width: 62%; display: grid; gap: 10px; padding: 22px 20px; }
.vx-shield { position: absolute; right: 22%; bottom: 20%; width: 52px; height: 58px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: var(--vx-on); background: var(--pg-c3); border-radius: 14px 14px 26px 26px; box-shadow: var(--vx-shadow); }
.vx-on .vx-paper .vx-ln { animation: vx-growx 1.2s var(--vx-ease) both; transform-origin: left; }
.vx-on .vx-shield { animation: vx-pop .8s var(--vx-ease) both 1s, vx-float 6s ease-in-out infinite 2s; }

/* insight + ops (article art) */
.vx-insight { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; gap: 16px; }
.vx-ai { position: relative; width: 84px; height: 84px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--pg-c2); color: #fff; font-weight: 800; font-size: 1.1rem; }
.vx-ai::before, .vx-ai::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pg-c2); opacity: 0; }
.vx-on .vx-ai::before { animation: vx-ripple 3s ease-out infinite; } .vx-on .vx-ai::after { animation: vx-ripple 3s ease-out infinite 1.5s; }
.vx-alerts { flex: 1; min-width: 0; display: grid; gap: 8px; }
.vx-alert { display: flex; align-items: center; gap: 8px; font-size: .76rem; padding: 9px 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-dotc { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--pg-c1); }
.vx-dotc.v { background: var(--pg-c2); }
.vx-insight .vx-foot { flex-basis: 100%; margin-top: 10px !important; }
.vx-on .vx-alert { animation: vx-in .9s var(--vx-ease) both var(--d); }
.vx-inv { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.vx-inv svg { flex: 1; min-height: 0; width: 100%; }
.vx-inv .vx-draw { stroke: var(--pg-c2); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.vx-thr { stroke: var(--pg-hl); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.vx-thr-l { position: absolute; right: 12px; bottom: 10px; font-size: .64rem; font-weight: 700; color: var(--pg-hl); }

/* reused homepage illustration */
.vx-home { width: 100%; max-width: 500px; }
.vx-home .hx-art { height: 360px; border: 1px solid var(--pg-line); }

/* ------------------------------------------------------------------ value strip */
.vx-strip-sec { padding-block: clamp(36px, 5vw, 64px); }
.vx-head-sm { margin-bottom: 26px; }
.vx-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vx-strip.vx-n3 { grid-template-columns: repeat(3, 1fr); }
.vx-vcard { display: flex; flex-direction: column; gap: 6px; background: var(--pg-surface); border: 1px solid var(--pg-line); border-radius: 22px; padding: 12px 12px 20px; box-shadow: var(--pg-shadow); transition: transform .5s var(--vx-ease), border-color .5s; }
.vx-vcard:hover { transform: translateY(-4px); border-color: var(--pg-accent); }
.vx-vcard h3 { margin: 10px 8px 0; font-size: 1.08rem; line-height: 1.25; }
.vx-vcard p { margin: 0 8px; color: var(--pg-muted); font-size: .92rem; line-height: 1.5; }
.vx-on .vx-vcard { animation: vx-in 1.1s var(--vx-ease) both var(--d); }
.vx-tile { height: 118px; border-radius: 16px; background-color: var(--pg-panel); background-image: linear-gradient(var(--pg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pg-grid) 1px, transparent 1px); background-size: 20px 20px; display: grid; place-items: center; overflow: hidden; }
.vx-tile svg { width: 100%; height: 100%; display: block; }

/* svg paint helpers */
.vx svg text { font-family: inherit; font-size: 11px; font-weight: 700; fill: var(--pg-text); }
.vx svg text.sm { font-size: 9.5px; }
.vx svg text.big { font-size: 17px; font-weight: 800; }
.vx svg text.hl { fill: var(--pg-hl); } .vx svg text.ok { fill: var(--vx-ok); } .vx svg text.on { fill: var(--vx-on); }
.vx .f-s { fill: var(--pg-surface); } .vx .f-l { fill: var(--pg-line); }
.vx .f-1 { fill: var(--pg-c1); } .vx .f-2 { fill: var(--pg-c2); } .vx .f-3 { fill: var(--pg-c3); }
.vx .o5 { opacity: .5; } .vx .o6 { opacity: .6; } .vx .o8 { opacity: .85; }
.vx .s-l { stroke: var(--pg-line); stroke-width: 1.5; }
.vx .s-m { stroke: var(--pg-muted); stroke-width: 1.5; fill: none; opacity: .6; }
.vx .s-t { stroke: var(--pg-text); stroke-width: 3.5; stroke-linecap: round; }
.vx .s-1 { stroke: var(--pg-c1); stroke-width: 3.5; stroke-linecap: round; }
.vx .s-2 { stroke: var(--pg-c2); stroke-width: 3.5; stroke-linecap: round; fill: none; }
.vx .s-3 { stroke: var(--pg-c3); stroke-width: 3; }
.vx .s-hl { stroke: var(--pg-hl); stroke-width: 2; }
.vx .s-w { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.vx .s-s { stroke: var(--pg-surface); stroke-width: 3; }
.vx .thick { stroke-width: 4; }
.vx .dash { stroke-dasharray: 4 5; }
.vx-tile * { transform-box: fill-box; transform-origin: center; }

/* tile motion */
.vx-on .vx-hm { animation: vx-spin 14s linear infinite; transform-box: view-box; transform-origin: 66px 55px; }
.vx-on .vx-hh { animation: vx-spin 90s linear infinite; transform-box: view-box; transform-origin: 66px 55px; }
@keyframes vx-gknob { 0%, 100% { transform: translateX(-46px); } 50% { transform: translateX(20px); } }
@keyframes vx-gfill { 0%, 100% { transform: scaleX(.54); } 50% { transform: scaleX(1.2); } }
.vx-gfill { transform-origin: left center !important; }
.vx-on .vx-gknob { animation: vx-gknob 8s ease-in-out infinite; }
.vx-on .vx-gfill { animation: vx-gfill 8s ease-in-out infinite; }
.vx-on .vx-tin { animation: vx-in .9s var(--vx-ease) both var(--d); }
.vx-on .vx-tp { animation: vx-blink 2.4s ease-in-out infinite var(--d); }
.vx-tk { stroke-dasharray: 10; stroke-dashoffset: 0; }
@keyframes vx-tk { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
.vx-on .vx-tk { animation: vx-tk .7s ease-out both var(--d); }
@keyframes vx-scroll { to { transform: translateY(-64px); } }
.vx-scroll { transform-box: view-box !important; }
.vx-on .vx-scroll { animation: vx-scroll 9s linear infinite; }
.vx-tbar { transform-origin: bottom center !important; }
.vx-on .vx-tbar { animation: vx-grow 1.1s var(--vx-ease) both var(--d); }
@keyframes vx-logo { 0%, 30% { fill: var(--pg-c1); } 36%, 63% { fill: var(--pg-c2); } 69%, 94% { fill: var(--pg-c3); } 100% { fill: var(--pg-c1); } }
.vx-on .vx-logo { animation: vx-logo 9s ease-in-out infinite; }
@keyframes vx-lay { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.vx-on .vx-lay.l2 { animation: vx-lay 6s ease-in-out infinite; }
.vx-on .vx-lay.l3 { animation: vx-lay 6s ease-in-out infinite -.8s; translate: 0 -2px; }
@keyframes vx-ma { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(0); } }
@keyframes vx-mb { 0%, 100% { transform: translateX(10px); } 50% { transform: translateX(0); } }
.vx-on .vx-ma { animation: vx-ma 7s ease-in-out infinite; }
.vx-on .vx-mb { animation: vx-mb 7s ease-in-out infinite; }
.vx-on .vx-flow { animation: vx-flow 1.6s linear infinite; }
@keyframes vx-ev { 0%, 20% { transform: translateX(0); opacity: 1; } 55% { transform: translateX(14px); opacity: .45; } 80%, 100% { transform: translateX(0); opacity: 1; } }
.vx-on .vx-ev { animation: vx-ev 6s ease-in-out infinite; }
.vx-on .vx-ev.e2 { animation-delay: .4s; }
.vx-on .vx-one { animation: vx-lay 6s ease-in-out infinite 1.2s; }
@keyframes vx-trav { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(84px); opacity: 0; } }
.vx-trav { opacity: 0; }
.vx-on .vx-trav { animation: vx-trav 3s linear infinite var(--d); }
@keyframes vx-sa { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.62); } }
@keyframes vx-sb { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.6); } }
.vx-sa, .vx-sb { transform-origin: left center !important; }
.vx-on .vx-sa { animation: vx-sa 8s ease-in-out infinite; }
.vx-on .vx-sb { animation: vx-sb 8s ease-in-out infinite; }
@keyframes vx-key { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
.vx-on .vx-key { animation: vx-key 5s ease-in-out infinite; }
.vx-ring { opacity: 0; }
.vx-on .vx-ring { animation: vx-ripple 3.2s ease-out infinite var(--d, 0s); }
.vx-on .vx-ring.r2 { animation-delay: 1.6s; }
.vx-on .vx-bob { animation: vx-lay 6s ease-in-out infinite var(--d); }
.vx-on .vx-stampg { animation: vx-pop .8s cubic-bezier(.34, 1.56, .64, 1) both .9s; }
.vx-cfill { transform-origin: left center !important; }
.vx-on .vx-cfill { animation: vx-growx 3s ease-in-out both .4s; }

/* ------------------------------------------------------------------ before / after */
.vx-ba-sec .pg-head { margin-bottom: 26px; }
.vx-ba { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: stretch; gap: 0; }
.vx-ba-col { border-radius: 24px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--pg-line); }
.vx-ba-before { background: var(--pg-panel); background-image: linear-gradient(var(--pg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pg-grid) 1px, transparent 1px); background-size: 24px 24px; }
.vx-ba-after { background: var(--pg-surface); box-shadow: var(--pg-shadow); border-color: color-mix(in srgb, var(--pg-c3) 55%, var(--pg-line)); }
.vx-ba-h { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin: 0 0 16px; }
.vx-ba-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pg-c1); }
.vx-ba-after .vx-ba-dot { background: var(--pg-c3); }
.vx-ba ul { display: grid; gap: 10px; }
.vx-ba li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; font-size: .97rem; padding: 10px 12px; border-radius: 14px; }
.vx-ba-before li { color: var(--pg-muted); background: var(--pg-surface); border: 1px dashed var(--pg-line); }
.vx-ba-before li:nth-child(odd) { rotate: -.6deg; } .vx-ba-before li:nth-child(even) { rotate: .5deg; }
.vx-ba-after li { background: var(--pg-alt); }
.vx-x, .vx-y { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; margin-top: 1px; }
.vx-x { color: #c43d3d; border: 1.5px solid currentColor; }
[data-theme="dark"] .theme-a .vx-x, .theme-b .vx-x { color: #ff7a7a; }
.vx-y { background: var(--pg-c3); color: var(--vx-on); }
.vx-ba-mid { display: grid; place-items: center; }
.vx-ba-mid span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; font-weight: 800; background: var(--pg-c1); color: var(--vx-on); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); }
@keyframes vx-wobble { 0% { opacity: 0; transform: translateY(10px) rotate(-2deg); } 70% { opacity: 1; transform: rotate(1deg); } 100% { opacity: 1; transform: none; } }
@keyframes vx-nudge { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
.vx-on .vx-ba-before li { animation: vx-wobble 1s ease-out both var(--d); }
.vx-on .vx-ba-after li { animation: vx-in 1s var(--vx-ease) both var(--d); }
.vx-on .vx-ba-after .vx-y { animation: vx-pop .6s cubic-bezier(.34, 1.56, .64, 1) both calc(var(--d) + 250ms); }
.vx-on .vx-ba-mid span { animation: vx-nudge 2.6s ease-in-out infinite; }

/* ------------------------------------------------------------------ article takeaways */
.vx-take { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start; margin: 0 0 2.2rem; padding: 14px 20px 14px 14px; border-radius: 22px; background: var(--pg-surface); border: 1px solid var(--pg-line); box-shadow: var(--pg-shadow); }
.vx-take .vx-tile { height: 130px; }
.vx-take-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px !important; font-size: 1rem; opacity: 1 !important; color: var(--pg-text) !important; }
.vx-take-meta { font-size: .8rem; color: var(--pg-muted); font-weight: 600; }
.vx-take ol { counter-reset: tk; display: grid; gap: 6px; }
.vx-take li { counter-increment: tk; display: flex; gap: 10px; font-size: .94rem !important; line-height: 1.4; opacity: 1 !important; }
.vx-take li::before { content: counter(tk, decimal-leading-zero); font-size: .74rem; font-weight: 800; color: var(--pg-hl); padding-top: .15em; }
.vx-take a { color: var(--pg-text); text-decoration: none; border-bottom: 1px solid var(--pg-line); }
.vx-take a:hover { color: var(--pg-accent); border-color: currentColor; }
.vx-on.vx-take li { animation: vx-in .8s var(--vx-ease) both var(--d); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .vx-strip { grid-template-columns: repeat(2, 1fr); }
  .vx-strip.vx-n3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .vx-hero, .vx-home { max-width: 560px; }
  .vx-strip.vx-n3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .vx-ba { grid-template-columns: 1fr; gap: 10px; }
  .vx-ba-mid span { transform: rotate(90deg); }
  .vx-on .vx-ba-mid span { animation: none; }
}
@media (max-width: 600px) {
  .vx-hero { height: 350px; padding: 14px; gap: 10px; border-radius: 22px; }
  .vx-hero.vx-sm { height: 330px; }
  .vx-strip, .vx-strip.vx-n3 { grid-template-columns: 1fr; }
  .vx-float { font-size: .66rem; padding: .35rem .65rem; }
  .vx-reporting .vx-f2, .vx-warehouse .vx-f1 { display: none; }
  .vx-chart { height: 110px; }
  .vx-kpis b { font-size: .88rem; }
  .vx-slab code, .vx-slab li:nth-child(n+4) { display: none; }
  .vx-slab.s2 { margin-right: 10px; } .vx-slab.s3 { margin-right: 20px; }
  .vx-venn { height: 150px; }
  .vx-cir { width: 138px; height: 138px; padding: 0 16px; }
  .vx-cir.a { left: calc(50% - 122px); padding-right: 50px; } .vx-cir.b { left: calc(50% - 16px); padding-left: 50px; }
  .vx-amc .vx-f2 { display: none; }
  .vx-src { width: 36%; left: 3%; padding: 7px 8px; }
  .vx-src b { font-size: .74rem; }
  .vx-dedupe { width: 76px; height: 76px; }
  .vx-dst { width: 42px; height: 42px; margin-top: -21px; left: 81%; }
  .vx-dst img { width: 24px; height: 24px; }
  .vx-hb { grid-template-columns: 74px 1fr 30px; font-size: .68rem; }
  .vx-clocks { gap: 6px; } .vx-clock { padding: 6px 4px; } .vx-clock b { font-size: .82rem; } .vx-clock em { font-size: .6rem; }
  .vx-pin b { font-size: .6rem; padding: .1rem .3rem; }
  .vx-since b, .vx-team b { font-size: 1.3rem; }
  .vx-price { grid-template-columns: 1fr 18px 1fr; gap: 4px; }
  .vx-scope li { font-size: .64rem; padding: .35rem .4rem; }
  .vx-stamp { font-size: .56rem; }
  .vx-gate { display: none; }
  .vx-hero.vx-plan .vx-f2 { display: none; }
  .vx-work .vx-f1 { display: none; }
  .vx-fan { transform: scale(.86); }
  .vx-take { grid-template-columns: 1fr; padding: 12px; }
  .vx-take .vx-tile { height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .vx *, .vx *::before, .vx *::after, .vx.vx-take li { animation: none !important; transition: none !important; }
  .vx-vcard:hover { transform: none; }
}

/* Mobile overflow fixes on pages that use these components (ad data plan form, long code words in articles) */
.contact-grid > * { min-width: 0; }
.pg-form select { width: 100%; min-width: 0; }
.post-body strong, .post-body code { overflow-wrap: anywhere; }

/* ================================================================== audiences, case studies, reviews
   (hero kinds agencies / brands / adtech / reviews, case_wall, case_hero, metric_cards, arch_strip,
   stat_row, filter_bar, review_wall in build/visuals.py) */
.vx-lgd { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--pg-c1); flex: none; }
.vx-lgd.c2 { background: var(--pg-c2); } .vx-lgd.c3 { background: var(--pg-c3); } .vx-lgd.c4 { background: #f5b23d; }
.vx-gly { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box; border-radius: 6px; background: var(--pg-text); color: var(--pg-surface); font-size: .56rem; font-weight: 800; letter-spacing: .02em; flex: none; }
.vx-logo-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 10px; box-sizing: border-box; border-radius: 10px; background: #fff; border: 1px solid var(--pg-line); flex: none; }
.vx-logo-chip img { display: block; height: 20px; width: auto; max-width: 112px; object-fit: contain; }
.vx-logo-txt { font-weight: 800; font-size: .78rem; color: #15150f; white-space: nowrap; }
.vx-wz path, .vx-cw path, .vx-bw path { fill: none; stroke: var(--pg-muted); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; opacity: .6; }
.vx-on .vx-wz path, .vx-on .vx-cw path, .vx-on .vx-bw path { animation: vx-flow 1.6s linear infinite; }

/* agencies: client accounts -> one pipeline -> a white-label report per client */
.vx-hero.vx-agencies { gap: 0; }
.vx-accts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vx-acct { display: grid; justify-items: center; gap: 5px; padding: 8px 4px; text-align: center; min-width: 0; }
.vx-acct .vx-icons img { width: 18px; height: 18px; padding: 1px; }
.vx-acct b { display: flex; align-items: center; gap: 5px; font-size: .72rem; white-space: nowrap; }
.vx-wz { display: block; width: 100%; height: 40px; flex: none; }
.vx-wz.short { height: 30px; }
.vx-pipe1 { display: flex; align-items: center; gap: 8px; overflow: hidden; padding: 10px 12px; }
.vx-pipe1 b { flex: 1; min-width: 0; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-pulse { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pg-c3) 26%, transparent), transparent); opacity: 0; pointer-events: none; }
@keyframes vx-sweep { 0% { transform: translateX(-100%); opacity: 1; } 100% { transform: translateX(340%); opacity: 1; } }
.vx-on .vx-pulse { animation: vx-sweep 3.6s ease-in-out infinite 1.4s; }
.vx-reps { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vx-rep { display: flex; flex-direction: column; gap: 6px; padding: 10px; min-width: 0; }
.vx-rep .vx-row { justify-content: flex-start; gap: 6px; }
.vx-rep b { font-size: .74rem; white-space: nowrap; }
.vx-rep .vx-ln { height: 5px; }
.vx-minib { flex: 1; min-height: 22px; display: flex; align-items: flex-end; gap: 4px; }
.vx-minib i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: var(--pg-c1); opacity: .85; transform-origin: bottom; }
.vx-rep:nth-child(2) .vx-minib i { background: var(--pg-c2); } .vx-rep:nth-child(3) .vx-minib i { background: var(--pg-c3); }
.vx-sent { align-self: flex-start; font-size: .64rem; font-weight: 800; color: var(--vx-ok); border: 1px solid currentColor; border-radius: 999px; padding: .1rem .45rem; white-space: nowrap; }
.vx-agencies .vx-foot { margin-top: 10px !important; }
.vx-on .vx-acct, .vx-on .vx-rep { animation: vx-in .9s var(--vx-ease) both var(--d); }
.vx-on .vx-pipe1 { animation: vx-pop .9s var(--vx-ease) both var(--d); }
.vx-on .vx-minib i { animation: vx-grow 1.1s var(--vx-ease) both calc(var(--d, 0ms) + 400ms); }
.vx-on .vx-sent { animation: vx-pop .6s cubic-bezier(.34, 1.56, .64, 1) both var(--d); }

/* brands: Shopify + Amazon + Walmart sales and every platform's spend -> one ROAS */
.vx-bgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 44px 1fr; align-items: stretch; }
.vx-bsrcs { display: grid; grid-template-rows: repeat(4, 1fr); gap: 10px; }
.vx-bsrc { display: flex; align-items: center; gap: 9px; padding: 8px 10px; min-width: 0; }
.vx-bsrc > img, .vx-chsrc li > img, .vx-arch-src li > img { box-sizing: border-box; flex: none; border-radius: 7px; background: #fff; padding: 2px; border: 1px solid var(--pg-line); }
.vx-bsrc .vx-tx b { font-size: .8rem; } .vx-bsrc .vx-tx em { font-size: .66rem; }
.vx-spend { border-left: 4px solid var(--pg-c2); }
.vx-spend .vx-icons { flex: none; }
.vx-spend .vx-icons img + img { margin-left: -9px; }
.vx-mk { margin-left: auto; font-size: .82rem; }
.vx-bw { width: 100%; height: 100%; }
.vx-roas { align-self: center; display: grid; gap: 8px; padding: 14px; }
.vx-big { font-size: 2.3rem; line-height: 1; letter-spacing: -.04em; color: var(--pg-hl); font-variant-numeric: tabular-nums; }
.vx-rrow { display: flex; align-items: center; gap: 7px; font-size: .7rem; font-weight: 700; color: var(--pg-muted); }
.vx-rrow i { width: 9px; height: 9px; border-radius: 50%; background: var(--pg-c3); flex: none; }
.vx-rrow i.c2 { background: var(--pg-c2); }
.vx-agree { justify-self: start; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--vx-on); background: var(--pg-c3); border-radius: 8px; padding: .3rem .5rem; }
.vx-on .vx-bsrc { animation: vx-in .9s var(--vx-ease) both var(--d); }
.vx-on .vx-mk { animation: vx-pop .6s cubic-bezier(.34, 1.56, .64, 1) both var(--d); }
.vx-on .vx-roas { animation: vx-pop 1s var(--vx-ease) both 1.2s, vx-float-s 6s ease-in-out infinite 2.4s; }
.vx-on .vx-agree { animation: vx-pop .7s cubic-bezier(.34, 1.56, .64, 1) both 2.8s; }

/* adtech: tenants -> rate-limit queue -> APIs, with token refresh */
.vx-hero.vx-adtech { gap: 10px; }
.vx-prod { display: grid; gap: 8px; padding: 10px 12px; }
.vx-prod b { font-size: .86rem; }
.vx-tens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.vx-tens li { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: .68rem; font-weight: 700; padding: .3rem .25rem; border-radius: 8px; background: var(--pg-alt); white-space: nowrap; min-width: 0; }
.vx-queue { display: grid; gap: 8px; }
.vx-lane { position: relative; height: 30px; border-radius: 10px; background: var(--pg-alt); border: 1px dashed var(--pg-line); overflow: hidden; }
.vx-blocks { position: absolute; top: 0; bottom: 0; left: 0; right: 64px; }
.vx-blocks i { position: absolute; top: 7px; left: var(--x); width: 22px; height: 14px; border-radius: 4px; background: var(--pg-c1); }
.vx-blocks i.c2 { background: var(--pg-c2); } .vx-blocks i.c3 { background: var(--pg-c3); } .vx-blocks i.c4 { background: #f5b23d; }
@keyframes vx-queue { 0% { left: -8%; opacity: 0; } 10%, 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.vx-on .vx-blocks i { animation: vx-queue 6s linear infinite; animation-delay: calc(var(--d) * -1); }
.vx-qgate { position: absolute; right: 0; top: 0; bottom: 0; width: 60px; display: grid; place-items: center; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--vx-on); background: var(--pg-c3); }
.vx-adt-row { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vx-token { display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 8px; }
.vx-token .vx-tx { flex: 1; min-width: 0; }
.vx-token .vx-tx b { font-size: .8rem; } .vx-token .vx-tx em { font-size: .66rem; white-space: normal; }
.vx-refresh { width: 26px; height: 26px; flex: none; }
.vx-refresh path { fill: none; stroke: var(--pg-c2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vx-exp { flex-basis: 100%; height: 6px; border-radius: 99px; background: var(--pg-alt); overflow: hidden; }
.vx-exp i { display: block; height: 100%; border-radius: 99px; background: var(--pg-c3); transform-origin: left; }
@keyframes vx-exp { 0% { transform: scaleX(1); } 88% { transform: scaleX(.08); } 92%, 100% { transform: scaleX(1); } }
.vx-apis { display: grid; gap: 8px; align-content: center; }
.vx-apil { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-apil span { position: relative; display: inline-grid; }
.vx-apil img { width: 28px; height: 28px; box-sizing: border-box; border-radius: 8px; background: #fff; padding: 3px; border: 1px solid var(--pg-line); }
.vx-apil span i { position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--vx-ok); border: 2px solid var(--pg-surface); }
.vx-on .vx-prod, .vx-on .vx-queue, .vx-on .vx-token, .vx-on .vx-apis { animation: vx-in .9s var(--vx-ease) both var(--d); }
.vx-on .vx-refresh { animation: vx-spin 4s linear infinite; }
.vx-on .vx-exp i { animation: vx-exp 8s linear infinite 1s; }
.vx-on .vx-apil span i { animation: vx-blink 2.4s ease-in-out infinite; }
.vx-on .vx-apil span:nth-child(2) i { animation-delay: .5s; } .vx-on .vx-apil span:nth-child(3) i { animation-delay: 1s; }
.vx-on .vx-apil span:nth-child(4) i { animation-delay: 1.5s; } .vx-on .vx-apil span:nth-child(5) i { animation-delay: 2s; }

/* reviews: floating review bubbles */
.vx-hero.vx-reviews { display: block; }
.vx-rv { position: absolute; width: 62%; display: grid; gap: 7px; padding: 14px 14px 12px; border-radius: 18px; }
.vx-rv.r1 { left: 6%; top: 6%; } .vx-rv.r2 { right: 5%; top: 34%; z-index: 2; } .vx-rv.r3 { left: 9%; top: 62%; }
.vx-qmk { display: block; height: 16px; font-family: Georgia, "Times New Roman", serif; font-size: 2.2rem; line-height: .9; font-weight: 700; color: var(--pg-c1); }
.vx-rv.r2 .vx-qmk { color: var(--pg-c2); } .vx-rv.r3 .vx-qmk { color: var(--pg-c3); }
.vx-rvw { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; }
.vx-rvw .vx-tx b { font-size: .74rem; } .vx-rvw .vx-tx em { font-size: .66rem; }
.vx-rv.r2 .vx-av { background: var(--pg-c2); color: #fff; } .vx-rv.r3 .vx-av { background: var(--pg-c3); }
.vx-star { position: absolute; color: var(--pg-c1); font-size: 1.1rem; line-height: 1; }
.vx-star.s1 { right: 12%; top: 9%; } .vx-star.s2 { right: 6%; top: 21%; font-size: .8rem; color: var(--pg-c2); }
.vx-star.s3 { left: 3%; top: 50%; font-size: .9rem; color: var(--pg-c3); } .vx-star.s4 { right: 30%; bottom: 7%; font-size: .8rem; }
.vx-star.s5 { left: 72%; top: 64%; color: var(--pg-c2); }
.vx-reviews .vx-f1 { right: 14px; bottom: 14px; }
.vx-on .vx-rv { animation: vx-in 1s var(--vx-ease) both var(--d), vx-float 7s ease-in-out infinite calc(var(--d) + 1.2s); }
.vx-on .vx-star { animation: vx-blink 3s ease-in-out infinite; }
.vx-on .vx-star.s2 { animation-delay: .6s; } .vx-on .vx-star.s3 { animation-delay: 1.2s; } .vx-on .vx-star.s4 { animation-delay: 1.8s; } .vx-on .vx-star.s5 { animation-delay: 2.4s; }

/* case studies hub: a wall of result cards drifting slowly */
.vx-hero.vx-cases { padding: 0; }
.vx-wall { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent); }
.vx-wcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vx-wcol.c1 { margin-top: 16px; } .vx-wcol.c2 { margin-top: -44px; }
.vx-wt { display: grid; gap: 12px; }
.vx-wc { display: grid; justify-items: start; gap: 7px; padding: 12px; }
.vx-wm { font-size: .92rem; line-height: 1.25; }
.vx-wc em { font-size: .68rem; font-weight: 700; }
@keyframes vx-wup { to { transform: translateY(calc(-100% - 12px)); } }
@keyframes vx-wdown { from { transform: translateY(calc(-100% - 12px)); } to { transform: none; } }
.vx-on .vx-wcol.c1 .vx-wt { animation: vx-wup 38s linear infinite; }
.vx-on .vx-wcol.c2 .vx-wt { animation: vx-wdown 42s linear infinite; }
.vx-cases .vx-f1 { right: 14px; bottom: 14px; }

/* one case: platforms -> what we built */
.vx-hero.vx-case { padding-bottom: 60px; }
.vx-ch-top { gap: 10px; }
.vx-client { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; min-width: 0; }
.vx-client:not(:has(b)) { padding: 5px; }
.vx-client b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-chflow { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 40px 1.05fr; align-items: stretch; }
.vx-chsrc { display: grid; grid-auto-rows: 1fr; gap: 8px; }
.vx-chsrc li { align-self: center; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 9px; border-radius: 12px; font-size: .74rem; font-weight: 700; }
.vx-chsrc li > img { width: 24px; height: 24px; border-radius: 6px; }
.vx-chsrc li > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-cw { width: 100%; height: 100%; }
.vx-chbuilt { align-self: center; display: grid; gap: 10px; padding: 14px; }
.vx-chbuilt .vx-checks { gap: 8px; }
.vx-chbuilt .vx-checks li { font-size: .76rem; line-height: 1.3; }
.vx-case .vx-f1 { left: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.vx-on .vx-chsrc li { animation: vx-in .9s var(--vx-ease) both var(--d); }
.vx-on .vx-chbuilt { animation: vx-pop 1s var(--vx-ease) both 1s; }

/* metric cards (real case results) */
.vx-metrics-sec { padding-block: clamp(36px, 5vw, 64px); }
.vx-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vx-metrics.vx-n1 { grid-template-columns: minmax(0, 560px); }
.vx-metrics.vx-n2 { grid-template-columns: repeat(2, 1fr); }
.vx-metrics.vx-n4 { grid-template-columns: repeat(4, 1fr); }
.vx-mcard { position: relative; display: grid; gap: 12px; align-content: start; padding: 24px 24px 26px; border-radius: 22px; background: var(--pg-surface); border: 1px solid var(--pg-line); box-shadow: var(--pg-shadow); }
.vx-mcard b { font-family: var(--pg-head); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.04em; color: var(--pg-accent); font-variant-numeric: tabular-nums; }
.vx-mbar { display: block; width: 48px; height: 4px; border-radius: 4px; background: var(--pg-c3); transform-origin: left; }
.vx-mcard:nth-child(2) .vx-mbar { background: var(--pg-c2); } .vx-mcard:nth-child(3) .vx-mbar { background: var(--pg-c1); }
.vx-mcard p { color: var(--pg-muted); font-size: .98rem; line-height: 1.5; }
.vx-on .vx-mcard { animation: vx-in 1s var(--vx-ease) both var(--d); }
.vx-on .vx-mbar { animation: vx-growx 1.2s var(--vx-ease) both calc(var(--d) + 500ms); }

/* architecture strip: sources -> stack chips joined by animated lines */
.vx-arch-sec { padding-block: clamp(36px, 5vw, 64px); }
.vx-arch { display: grid; grid-template-columns: minmax(190px, 240px) 48px minmax(0, 1fr); align-items: center; }
.vx-arch.no-src { grid-template-columns: minmax(0, 1fr); }
.vx-arch-src { padding: 16px; border-radius: 22px; border: 1px solid var(--pg-line); background-color: var(--pg-panel);
  background-image: linear-gradient(var(--pg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pg-grid) 1px, transparent 1px); background-size: 20px 20px; }
.vx-arch-src .vx-k { margin-bottom: 10px; }
.vx-arch-src ul { display: grid; gap: 8px; }
.vx-arch-src li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px; border-radius: 12px; background: var(--pg-surface); border: 1px solid var(--pg-line); font-size: .86rem; font-weight: 700; }
.vx-arch-src li > img { width: 26px; height: 26px; border-radius: 7px; }
.vx-arch-join { display: block; height: 3px; background: repeating-linear-gradient(90deg, var(--pg-c1) 0 6px, transparent 6px 12px); background-size: 24px 3px; }
@keyframes vx-dash { to { background-position: 24px 0; } }
@keyframes vx-dashy { to { background-position: 0 24px; } }
.vx-on .vx-arch-join { animation: vx-dash 1s linear infinite; }
.vx-arch-nodes { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 18px 34px; }
.vx-arch-node { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; box-sizing: border-box; padding: 12px 14px; border-radius: 16px; background: var(--pg-surface); border: 1px solid var(--pg-line); box-shadow: var(--pg-shadow); font-weight: 700; font-size: .94rem; line-height: 1.3; }
.vx-arch-n { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: var(--pg-c1); color: var(--vx-on); }
.vx-arch-node:nth-child(3n+2) .vx-arch-n { background: var(--pg-c2); color: #fff; } .vx-arch-node:nth-child(3n) .vx-arch-n { background: var(--pg-c3); }
.vx-arch-node::after { content: ""; position: absolute; left: 100%; top: 50%; width: 34px; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, var(--pg-muted) 0 5px, transparent 5px 10px); background-size: 20px 3px; opacity: .6; }
.vx-arch-node.re::after { display: none; }
.vx-on .vx-arch-node { animation: vx-pop .8s var(--vx-ease) both var(--d); }
.vx-on .vx-arch-node::after { animation: vx-dash 1s linear infinite; }
.vx-on .vx-arch-src li { animation: vx-in .8s var(--vx-ease) both var(--d); }

/* hero stat row */
.vx-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.6rem !important; padding: 0; list-style: none; }
.vx-stats li { display: grid; gap: 2px; min-width: 0; max-width: 220px; padding: 10px 14px; border-radius: 14px; background: var(--pg-surface); border: 1px solid var(--pg-line); box-shadow: var(--pg-shadow); }
.vx-stats b { font-family: var(--pg-head); font-size: 1.35rem; line-height: 1.1; letter-spacing: -.03em; color: var(--pg-accent); font-variant-numeric: tabular-nums; }
.vx-stats span { font-size: .8rem; line-height: 1.35; color: var(--pg-muted); }
.vx-on.vx-stats li { animation: vx-in .9s var(--vx-ease) both var(--d); }

/* filter buttons (case studies hub) */
.vx-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.vx-filter[hidden] { display: none; }
.vx-fbtn, .vx-mq-btn { font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--pg-line); background: var(--pg-surface); color: var(--pg-text); transition: background-color .3s, color .3s, border-color .3s; }
.vx-fbtn span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 99px; font-size: .72rem; background: var(--pg-alt); color: var(--pg-muted); }
.vx-fbtn:hover, .vx-mq-btn:hover { border-color: var(--pg-accent); }
.vx-fbtn[aria-pressed="true"] { background: var(--pg-chip); color: var(--pg-on-chip); border-color: var(--pg-chip); }
.vx-fbtn[aria-pressed="true"] span { background: rgba(255, 255, 255, .22); color: inherit; }
.vx-fbtn:focus-visible, .vx-mq-btn:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 2px; }
.pg-cards > [hidden] { display: none !important; }
@keyframes vx-fin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vx-filtered > :not([hidden]) { animation: vx-fin .5s cubic-bezier(.22, 1, .36, 1) both; }

/* testimonial wall: static grid at rest, a slow scroll when motion is allowed */
.vx-mq { position: relative; }
.vx-mq:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 6px; border-radius: 24px; }
.vx-mq-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.vx-mq-bar:has(> [hidden]) { display: none; }
.vx-mq-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.vx-mq-dup { display: none; }
.vx-rq { box-sizing: border-box; height: 100%; margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 22px; background: var(--pg-surface); border: 1px solid var(--pg-line); box-shadow: var(--pg-shadow); }
.vx-rq .vx-qmk { font-size: 3rem; height: 22px; }
.vx-rq blockquote { flex: 1; margin: 0; font-size: 1.06rem; line-height: 1.5; }
.vx-rq figcaption { color: var(--pg-muted); font-size: .88rem; }
.vx-rq figcaption b { display: block; color: var(--pg-text); }
.vx-mq li:nth-child(3n+2) .vx-qmk { color: var(--pg-c2); } .vx-mq li:nth-child(3n) .vx-qmk { color: var(--pg-c3); }
@keyframes vx-mq { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: no-preference) {
  .vx-mq.vx-on .vx-mq-view { display: flex; overflow: hidden; padding: 8px 0 30px; margin-bottom: -22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .vx-mq.vx-on .vx-mq-track { display: flex; flex: none; gap: 18px; padding-right: 18px; animation: vx-mq 80s linear infinite; }
  .vx-mq.vx-on .vx-mq-track > li { flex: none; width: 380px; }
  .vx-mq.vx-on .vx-mq-view:hover .vx-mq-track, .vx-mq.vx-on:focus-visible .vx-mq-track, .vx-mq.is-paused .vx-mq-track { animation-play-state: paused; }
}

@media (max-width: 960px) {
  .vx-arch { grid-template-columns: minmax(0, 1fr); }
  .vx-arch-join { justify-self: center; width: 3px; height: 30px; background: repeating-linear-gradient(180deg, var(--pg-c1) 0 6px, transparent 6px 12px); background-size: 3px 24px; }
  .vx-on .vx-arch-join { animation-name: vx-dashy; }
  .vx-arch-src ul { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .vx-metrics.vx-n4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .vx-arch-nodes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vx-arch-node::after, .vx-arch-node.re::after { display: block; left: 27px; top: 100%; width: 3px; height: 16px; margin: 0; background: repeating-linear-gradient(180deg, var(--pg-muted) 0 4px, transparent 4px 8px); background-size: 3px 16px; }
  .vx-arch-node:last-child::after { display: none; }
  .vx-on .vx-arch-node::after { animation-name: vx-dashy; }
  .vx-metrics, .vx-metrics.vx-n2, .vx-metrics.vx-n4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .vx-acct b { font-size: .62rem; gap: 3px; } .vx-acct .vx-lgd { width: 7px; height: 7px; }
  .vx-pipe1 .vx-pill { display: none; }
  .vx-wz { height: 32px; } .vx-wz.short { height: 24px; }
  .vx-rep { padding: 8px; } .vx-rep b { font-size: .64rem; } .vx-rep .vx-lgd { display: none; }
  .vx-bgrid { grid-template-columns: 1.2fr 26px 1fr; }
  .vx-bsrc { gap: 7px; padding: 6px 8px; } .vx-bsrc > img { width: 22px; height: 22px; }
  .vx-bsrc .vx-tx b { font-size: .72rem; } .vx-bsrc .vx-tx em { font-size: .6rem; }
  .vx-spend .vx-icons img { width: 18px; height: 18px; }
  .vx-roas { padding: 10px; gap: 6px; } .vx-big { font-size: 1.8rem; } .vx-rrow { font-size: .62rem; } .vx-agree { font-size: .56rem; }
  .vx-tens li { font-size: .6rem; } .vx-tens .vx-lgd { display: none; }
  .vx-token { gap: 6px; padding: 8px; } .vx-apis { padding: 8px; } .vx-apil { gap: 6px; } .vx-apil img { width: 24px; height: 24px; }
  .vx-rv { width: 74%; padding: 10px 12px; } .vx-rv .vx-ln:nth-of-type(3) { display: none; }
  .vx-wall { padding: 0 12px; gap: 10px; } .vx-wm { font-size: .8rem; }
  .vx-hero.vx-case { padding-bottom: 54px; }
  .vx-chflow { grid-template-columns: 1fr 22px 1fr; }
  .vx-chsrc li { padding: 5px 7px; gap: 6px; font-size: .66rem; } .vx-chsrc li > img { width: 20px; height: 20px; }
  .vx-chbuilt { padding: 10px; } .vx-chbuilt .vx-checks li { font-size: .66rem; gap: 7px; } .vx-chbuilt .vx-tick { width: 16px; height: 16px; }
  .vx-chbuilt .vx-tick::after { left: 5px; top: 2px; }
  .vx-client b { font-size: .84rem; } .vx-ch-top .vx-pill { display: none; }
  .vx-mq.vx-on .vx-mq-track > li { width: 290px; }
  .vx-stats li { max-width: none; flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-filtered > * { animation: none !important; }
  .vx-fbtn, .vx-mq-btn { transition: none; }
}

/* Solution pages: four "How we run it" steps sit in one row (2x2 on tablets) instead of 3 + an orphan */
.pg-steps.pg-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .pg-steps.pg-steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pg-steps.pg-steps-4 { grid-template-columns: minmax(0, 1fr); } }

/* Case studies hub, reduced motion: the static wall starts below the panel edge (no clipped top tile),
   drops the duplicate loop list and stops above the "builds" badge so the badge never covers a tile */
@media (prefers-reduced-motion: reduce) {
  .vx-wall { inset: 0 0 54px; padding-top: 16px;
    -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .vx-wcol.c1, .vx-wcol.c2 { margin-top: 0; }
  .vx-wcol.c2 { padding-top: 28px; }
  .vx-wt + .vx-wt { display: none; }
}

/* Audience pages: a single client quote gets one readable column instead of half of a two-up grid */
.pg-cards.pg-one { grid-template-columns: minmax(0, 760px); }

/* ------------------------------------------------------------------ service pages (build/content/services.py) */
/* findings: security test cycle with example findings */
.vx-findings { justify-content: center; }
.vx-cyc { display: grid; gap: 10px; }
.vx-cyc .vx-row b { font-size: .86rem; }
.vx-stg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.vx-stg li { text-align: center; font-size: .6rem; font-weight: 800; padding: .3rem 0; border-radius: 7px; background: var(--pg-c3); color: var(--vx-on); white-space: nowrap; overflow: hidden; }
@keyframes vx-stg { from { background: var(--pg-alt); color: var(--pg-muted); } to { background: var(--pg-c3); color: var(--vx-on); } }
.vx-on .vx-stg li { animation: vx-stg .6s ease both var(--d); }
.vx-fds { display: grid; gap: 8px; }
.vx-fd { display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
.vx-fd .vx-tx b { font-size: .74rem; font-family: var(--mono, ui-monospace, monospace); }
.vx-sev { flex: none; width: 54px; text-align: center; font-size: .6rem; font-weight: 800; border-radius: 6px; padding: .2rem 0; }
.vx-sev.hi { background: var(--pg-c2); color: #fff; } .vx-sev.md { background: #f5b23d; color: #15150f; } .vx-sev.lo { background: var(--pg-alt); border: 1px solid var(--pg-line); }
.vx-st { flex: none; font-size: .62rem; font-weight: 800; color: var(--vx-ok); white-space: nowrap; }
.vx-on .vx-fd { animation: vx-in .9s var(--vx-ease) both var(--d); }
.vx-on .vx-st { animation: vx-pop .6s var(--vx-ease) both calc(var(--d) + 900ms); }

/* readiness: controls to 100%, partner handoff */
.vx-readiness { justify-content: center; }
.vx-ctl { display: grid; gap: 8px; }
.vx-pct { font-size: 1.15rem; color: var(--pg-hl); font-variant-numeric: tabular-nums; }
.vx-fw { display: flex; gap: 6px; }
.vx-rd { padding: 12px 14px; }
.vx-hand { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.vx-hand > i { font-style: normal; font-weight: 800; color: var(--pg-muted); }
.vx-hand .vx-card { display: grid; gap: 2px; padding: 8px 10px; }
.vx-hand b { font-size: .82rem; }
.vx-partner { border-color: var(--pg-c3); }
.vx-on .vx-hand .vx-card { animation: vx-in .9s var(--vx-ease) both var(--d); }

/* code: product modules assembling, first release */
.vx-code { justify-content: center; padding-bottom: 56px; }
.vx-app { display: grid; gap: 10px; padding: 12px 14px; }
.vx-wdots { display: flex; gap: 5px; } .vx-wdots i { width: 9px; height: 9px; border-radius: 50%; background: var(--pg-line); }
.vx-wdots i:first-child { background: var(--pg-c2); } .vx-wdots i:nth-child(2) { background: #f5b23d; } .vx-wdots i:last-child { background: var(--pg-c3); }
.vx-app .vx-k { flex: 1; }
.vx-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.vx-mod { font-size: .72rem; font-weight: 700; padding: 12px 8px; border-radius: 10px; text-align: center; border-left: 4px solid var(--pg-c1); background: var(--pg-alt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-mod.m2 { border-left-color: var(--pg-c2); } .vx-mod.m3 { border-left-color: var(--pg-c3); }
.vx-on .vx-mod { animation: vx-pop .7s var(--vx-ease) both var(--d); }
.vx-rel { display: flex; align-items: center; gap: 10px; }
.vx-on .vx-rel { animation: vx-in .9s var(--vx-ease) both var(--d); }
.vx-code .vx-f1 { left: 16px; bottom: 14px; }

/* deploy: CI/CD stages and monitors */
.vx-deploy { justify-content: center; }
.vx-cicd { display: grid; gap: 12px; }
.vx-cicd .vx-row b { font-size: .86rem; }
.vx-cflow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.vx-cflow li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 5px; font-size: .64rem; font-weight: 700; }
.vx-cflow li i { width: 18px; height: 18px; border-radius: 50%; background: var(--pg-c3); border: 3px solid var(--pg-surface); box-shadow: 0 0 0 1px var(--pg-line); }
.vx-flowline { position: absolute; left: 10%; right: 10%; top: 8px; height: 3px; border-radius: 3px; background: var(--pg-line); }
.vx-flowline span { position: absolute; inset: 0; border-radius: 3px; background: var(--pg-c3); transform-origin: left; }
.vx-on .vx-flowline span { animation: vx-growx 2s ease-in-out both .3s; }
.vx-on .vx-cflow li { animation: vx-pop .6s var(--vx-ease) both var(--d); }
.vx-tf { font-size: .7rem; color: var(--pg-muted); }
.vx-on .vx-tf { animation: vx-type 1.1s steps(28, end) both var(--d); }
.vx-mons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vx-mon1 { display: grid; gap: 3px; padding: 9px 10px; min-width: 0; }
.vx-mon1 b { font-size: .9rem; white-space: nowrap; }
.vx-mon1 .vx-minib { min-height: 26px; height: 26px; }
.vx-mon1:nth-child(2) .vx-minib i { background: var(--pg-c2); } .vx-mon1:nth-child(3) .vx-minib i { background: var(--pg-c3); }
.vx-on .vx-mon1 { animation: vx-in .9s var(--vx-ease) both var(--d); }

/* train, workshop, bootcamp, delivery: header card + vertical steps */
.vx-train, .vx-workshop, .vx-bootcamp { justify-content: center; }
.vx-shead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vx-shead b { font-size: .88rem; }
.vx-train .vx-f1, .vx-bootcamp .vx-f1 { right: 14px; bottom: 12px; }
.vx-train .vx-steps, .vx-bootcamp .vx-steps { margin-bottom: 26px; }

/* squad (team) and copy: header + rows */
.vx-squad, .vx-copy { justify-content: center; }
.vx-squad .vx-head, .vx-copy .vx-head { display: flex; align-items: center; gap: 8px; }
.vx-squad .vx-head b, .vx-copy .vx-head b { flex: 1; font-size: .86rem; }
.vx-squad .vx-av.n { background: var(--pg-c2); color: #fff; }
.vx-copy .vx-act.no { border-color: var(--pg-c2); }
.vx-flag { font-size: .62rem; font-weight: 800; border-radius: 8px; padding: .25rem .5rem; background: var(--pg-c2); color: #fff; }

/* delivery: plan vs shipped, status flags */
.vx-delivery { justify-content: center; }
.vx-dl { display: grid; gap: 8px; }
.vx-delivery .vx-alerts { flex: none; }
.vx-dl .vx-hb i { background: var(--pg-c3); } .vx-dl .vx-hb:last-child i { background: var(--pg-c2); }

/* memo: written recommendation */
.vx-hero.vx-memo { justify-content: center; padding-bottom: 56px; }
.vx-card.vx-memo { display: grid; gap: 9px; padding: 14px; }
.vx-card.vx-memo .vx-row b { font-size: .88rem; }
.vx-recs { display: grid; gap: 7px; margin-top: 4px !important; }
.vx-recs li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; font-size: .76rem; font-weight: 600; padding: 7px 8px; border-radius: 10px; background: var(--pg-alt); }
.vx-recs li > b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; background: var(--pg-text); color: var(--pg-surface); }
.vx-rtag { font-style: normal; font-size: .62rem; font-weight: 800; padding: .2rem .5rem; border-radius: 999px; white-space: nowrap; }
.vx-rtag.a { background: var(--pg-c3); color: var(--vx-on); } .vx-rtag.b { background: var(--pg-c1); color: var(--vx-on); } .vx-rtag.c { background: var(--pg-surface); border: 1px solid var(--pg-line); color: var(--pg-text); }
.vx-memo-f { justify-content: flex-start; flex-wrap: wrap; }
.vx-on .vx-recs li { animation: vx-in .9s var(--vx-ease) both var(--d); }
.vx-hero.vx-memo .vx-f1 { right: 16px; bottom: 14px; }

/* triage: ranked AI use cases */
.vx-triage { justify-content: center; }
.vx-tri { display: grid; gap: 10px; padding: 14px; }
.vx-tri .vx-row b { font-size: .86rem; }
.vx-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .64rem; font-weight: 700; color: var(--pg-muted); }
.vx-legend span { display: inline-flex; align-items: center; gap: 5px; }
.vx-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--pg-c3); }
.vx-legend i.v, .vx-legend i.b { background: var(--pg-c2); } .vx-legend i.a { background: var(--pg-c1); } .vx-legend i.c { background: var(--pg-muted); } .vx-legend i.d { background: #f5b23d; }
.vx-ucs { display: grid; gap: 9px; }
.vx-ucs li { display: grid; grid-template-columns: 124px 1fr 48px; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; }
.vx-uc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-ubar { display: grid; gap: 3px; }
.vx-ubar i { display: block; height: 7px; width: var(--w); border-radius: 4px; background: var(--pg-c3); transform-origin: left; }
.vx-ubar i.v { background: var(--pg-c2); }
.vx-ucs .vx-rtag { justify-self: end; }
.vx-on .vx-ucs li { animation: vx-in .9s var(--vx-ease) both var(--d); }
.vx-on .vx-ubar i { animation: vx-growx 1.3s var(--vx-ease) both calc(var(--d) + 300ms); }

/* tco: three-year cost bars */
.vx-tco { justify-content: center; padding-bottom: 56px; }
.vx-tcoc { display: grid; gap: 11px; padding: 14px; }
.vx-tcoc .vx-row b { font-size: .86rem; }
.vx-tr { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; }
.vx-stack { display: flex; height: 16px; }
.vx-stack i { display: block; height: 100%; width: var(--w); background: var(--pg-c1); transform-origin: left; }
.vx-stack i:first-child { border-radius: 6px 0 0 6px; } .vx-stack i:last-child { border-radius: 0 6px 6px 0; }
.vx-stack i.b { background: var(--pg-c2); } .vx-stack i.c { background: var(--pg-muted); } .vx-stack i.d { background: #f5b23d; }
.vx-on .vx-stack i { animation: vx-growx 1.1s var(--vx-ease) both var(--d); }
.vx-tco .vx-alert { flex: none; }
.vx-tco .vx-f1 { right: 16px; bottom: 14px; }

/* rag: question, permission-checked sources, cited answer */
.vx-rag { justify-content: center; }
.vx-rag .vx-me { align-self: flex-end; }
.vx-srcs { display: grid; gap: 5px; padding: 10px 12px; }
.vx-src1 { display: flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-src1 b { flex: none; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-size: .6rem; background: var(--pg-c1); color: var(--vx-on); }
.vx-src1.off { color: var(--pg-muted); text-decoration: line-through; } .vx-src1.off b { background: var(--pg-alt); }
.vx-ans { align-self: flex-start; background: var(--pg-c3); color: var(--vx-on); border-bottom-left-radius: 6px; }
.vx-ans .vx-k { color: var(--vx-on); opacity: .7; }
.vx-ans sup { font-weight: 800; }
.vx-on .vx-srcs { animation: vx-in .9s var(--vx-ease) both var(--d); }

/* voice: meeting tiles, agent speaking, captured actions */
.vx-voice { justify-content: center; }
.vx-meet { display: grid; gap: 9px; }
.vx-recd { font-size: .64rem; font-weight: 800; color: var(--pg-c2); }
.vx-recd::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: currentColor; }
.vx-vts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.vx-vt { display: grid; justify-items: center; align-content: center; gap: 6px; height: 74px; border-radius: 10px; background: var(--pg-alt); }
.vx-vt em { font-size: .62rem; font-weight: 700; }
.vx-vt .vx-av { width: 32px; height: 32px; } .vx-vt .vx-av.c { background: var(--pg-c2); color: #fff; }
.vx-agent { background: color-mix(in srgb, var(--pg-c3) 22%, var(--pg-alt)); box-shadow: inset 0 0 0 2px var(--pg-c3); }
.vx-wave { display: flex; align-items: center; gap: 3px; height: 32px; }
.vx-wave i { width: 4px; height: 40%; border-radius: 2px; background: var(--pg-text); }
@keyframes vx-wave { 0%, 100% { height: 25%; } 50% { height: 95%; } }
.vx-on .vx-wave i { animation: vx-wave 1.1s ease-in-out infinite; }
.vx-on .vx-wave i:nth-child(2) { animation-delay: .15s; } .vx-on .vx-wave i:nth-child(3) { animation-delay: .3s; } .vx-on .vx-wave i:nth-child(4) { animation-delay: .45s; } .vx-on .vx-wave i:nth-child(5) { animation-delay: .6s; }
.vx-cc { font-size: .72rem; font-style: italic; color: var(--pg-muted); }
.vx-on .vx-cc { animation: vx-fade 1s ease both var(--d); }
.vx-capd { display: grid; gap: 6px; padding: 10px 12px; }
.vx-capd ul { display: grid; gap: 6px; }
.vx-capd li { display: flex; align-items: center; gap: 8px; font-size: .74rem; }
.vx-on .vx-capd li { animation: vx-in .9s var(--vx-ease) both var(--d); }

/* lakehouse: reuses the warehouse slabs */
.vx-lakehouse .vx-f1 { right: 14px; bottom: 14px; color: var(--vx-ok); }

/* pipeline: Airflow DAG */
.vx-pipeline { justify-content: center; padding-bottom: 56px; }
.vx-dag { display: grid; gap: 10px; padding: 12px 14px; }
.vx-dag .vx-row b { font-size: .84rem; font-family: var(--mono, ui-monospace, monospace); }
.vx-dagg { position: relative; display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 26px; height: 150px; }
.vx-dagw { position: absolute; inset: 0; width: 100%; height: 100%; }
.vx-dagw path { fill: none; stroke: var(--pg-muted); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; opacity: .6; }
.vx-on .vx-dagw path { animation: vx-flow 1.6s linear infinite; }
.vx-dc { position: relative; z-index: 1; display: grid; align-content: space-around; gap: 6px; }
.vx-node { display: flex; align-items: center; gap: 6px; font-family: var(--mono, ui-monospace, monospace); font-size: .64rem; font-weight: 600; padding: 6px 7px; border-radius: 8px; background: var(--pg-surface); border: 1px solid var(--pg-line); white-space: nowrap; overflow: hidden; }
.vx-node i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--vx-ok); }
@keyframes vx-node { from { background: var(--pg-line); } to { background: var(--vx-ok); } }
.vx-on .vx-node { animation: vx-pop .6s var(--vx-ease) both var(--d); }
.vx-on .vx-node i { animation: vx-node .4s ease both calc(var(--d) + 900ms); }
.vx-dagf { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.vx-pipeline .vx-f1 { right: 16px; bottom: 14px; color: var(--vx-ok); }

/* monitor: source health table, alerts */
.vx-monitor { justify-content: center; }
.vx-health { display: grid; gap: 8px; }
.vx-health .vx-row b { font-size: .86rem; }
.vx-ht { display: grid; gap: 4px; }
.vx-ht li { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: center; gap: 6px; font-size: .72rem; padding: 4px 6px; border-radius: 8px; }
.vx-ht li:nth-child(even) { background: var(--pg-alt); }
.vx-ht li > span, .vx-ht li > code { text-align: center; } .vx-ht li > code { text-align: left; font-size: .68rem; }
.vx-hth { font-size: .6rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--pg-muted); }
.vx-hth span:first-child { text-align: left !important; }
.vx-warn { font-weight: 800; color: #b9770e; } .vx-bad { font-weight: 800; color: var(--pg-c2); }
[data-theme="dark"] .vx-warn, .theme-b .vx-warn { color: #f5b23d; }
.vx-on .vx-ht li { animation: vx-in .8s var(--vx-ease) both var(--d); }
.vx-monitor .vx-alerts { flex: none; }

/* identity: records resolved into one profile */
.vx-identity { justify-content: center; }
.vx-idg { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; gap: 4px; }
.vx-recs4 { display: grid; gap: 8px; }
.vx-recs4 li { display: grid; gap: 1px; padding: 7px 10px; }
.vx-recs4 b { font-size: .76rem; } .vx-recs4 em { font-size: .64rem; }
.vx-idg .vx-bw { width: 100%; height: 100%; }
.vx-prof { display: grid; gap: 5px; justify-items: start; padding: 12px; border-color: var(--pg-c3); }
.vx-prof > b { font-size: 1.05rem; }
.vx-prof em { font-size: .68rem; }
.vx-on .vx-recs4 li, .vx-on .vx-prof { animation: vx-in .9s var(--vx-ease) both var(--d); }

@media (max-width: 600px) {
  .vx-stg li { font-size: .52rem; }
  .vx-fd .vx-tx b { font-size: .66rem; } .vx-fd .vx-tx em { display: none; } .vx-sev { width: 46px; }
  .vx-mod { font-size: .64rem; padding: 9px 4px; }
  .vx-code .vx-f1, .vx-hero.vx-memo .vx-f1, .vx-tco .vx-f1, .vx-train .vx-f1, .vx-bootcamp .vx-f1 { display: none; }
  .vx-hero.vx-memo, .vx-code, .vx-tco, .vx-pipeline { padding-bottom: 14px; }
  .vx-train .vx-steps, .vx-bootcamp .vx-steps { margin-bottom: 0; }
  .vx-mon1 b { font-size: .76rem; }
  .vx-ucs li { grid-template-columns: 92px 1fr 42px; font-size: .66rem; }
  .vx-tr { grid-template-columns: 74px 1fr; font-size: .64rem; }
  .vx-legend { font-size: .58rem; }
  .vx-vt { height: 58px; } .vx-vt .vx-av { width: 26px; height: 26px; }
  .vx-dagg { height: 128px; gap: 18px; } .vx-node { font-size: .56rem; padding: 4px 5px; }
  .vx-pipeline .vx-f1 { display: none; }
  .vx-ht li { font-size: .64rem; } .vx-ht li > code { font-size: .6rem; }
  .vx-idg { grid-template-columns: 1fr 26px 1fr; }
  .vx-recs4 li { padding: 5px 7px; } .vx-recs4 b { font-size: .68rem; }
  .vx-rag .vx-bub { font-size: .74rem; padding: 9px 11px; }
}

/* Service pages: "Not the right fit if" list next to the good-fit checklist */
.svc-not { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.svc-not li { position: relative; padding-left: 1.6rem; color: var(--pg-muted); line-height: 1.55; }
.svc-not li::before { content: "\00d7"; position: absolute; left: 0; top: -.05rem; width: 1.1rem; height: 1.1rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--pg-line); font-weight: 800; font-size: .8rem; color: var(--pg-text); }
.svc-not a { color: var(--pg-accent); font-weight: 700; white-space: nowrap; }
.svc-fit .pg-card h3 { margin-bottom: .8rem; }

/* Contrast: the lilac token is too light for small code text on light cards */
.theme-a .vx-query code i, .theme-a .vx-log code i { color: #5b4bc4; }
[data-theme="dark"] .theme-a .vx-query code i, [data-theme="dark"] .theme-a .vx-log code i { color: #b3a8ff; }