/* Round 7 data visuals, group "svc" (service and HubSpot service pages).
   Every class is prefixed vsvc-. Colours from :root tokens only, square corners, one red highlight per visual.
   All motion starts on [data-io].play (site.js) and shows its final state under reduced motion. No values are drawn. */

.vsvc-lbl{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}

/* 0. Revenue Engine funnel variants: five and six stage versions of .vz-funnel */
.vz-funnel.vsvc-n5{grid-template-columns:repeat(10,minmax(0,1fr))}
.vz-funnel.vsvc-n6{grid-template-columns:repeat(12,minmax(0,1fr))}

/* 1. Readiness radar: six dimensions on five maturity rings, no scores plotted */
.vsvc-rd{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.vsvc-radar{width:100%;height:auto;display:block;max-width:640px}
.vsvc-radar text{font-family:var(--font)}
.vsvc-radar .rg{fill:none;stroke:rgba(237,231,228,.22);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease) calc(var(--i,0)*.14s)}
.vsvc-radar .rg.out{stroke:rgba(237,231,228,.5)}
.vsvc-radar .ax{transform-origin:380px 300px;transform:scale(0);transition:transform 1s var(--ease) .3s}
.vsvc-radar .lab{opacity:0;transition:opacity .7s var(--ease) calc(.7s + var(--i,0)*.1s)}
.vsvc-radar .sw{transform-origin:380px 300px;opacity:0;transition:opacity .6s var(--ease) 1.2s}
.vsvc-radar .ctr{fill:var(--red)}
.vsvc-rd.play .rg{stroke-dashoffset:0}
.vsvc-rd.play .ax{transform:none}
.vsvc-rd.play .lab{opacity:1}
.vsvc-rd.play .sw{opacity:1;animation:vsvc-spin 7s linear 1.2s infinite}
@keyframes vsvc-spin{to{transform:rotate(360deg)}}
.vsvc-dims{list-style:none;border-top:1px solid var(--line-strong)}
.vsvc-dims li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:16px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease) calc(.4s + var(--i,0)*.1s),transform .6s var(--ease) calc(.4s + var(--i,0)*.1s)}
.vsvc-dims .n{grid-row:1/3;font-size:12px;color:var(--ash);letter-spacing:.14em;padding-top:3px}
.vsvc-dims b{font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.vsvc-dims span{font-size:14px;color:var(--mist);line-height:1.45}
.vsvc-rd.play .vsvc-dims li{opacity:1;transform:none}
.vsvc-rings{margin-top:16px;font-size:12px;color:var(--ash);letter-spacing:.06em}

/* 2. Two by two matrix: value against readiness */
.vsvc-mx{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr) 40px;gap:8px}
.vsvc-mx .yl{grid-column:1;grid-row:1/3;position:relative;display:flex;align-items:center;justify-content:center}
.vsvc-mx .yl span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.vsvc-mx .yl::before{content:"";position:absolute;right:4px;top:0;bottom:0;width:1px;background:var(--line-strong);transform:scaleY(0);transform-origin:bottom;transition:transform 1.1s var(--ease)}
.vsvc-mx .yl::after{content:"";position:absolute;right:1px;top:-2px;width:7px;height:7px;border-top:1px solid var(--mist);border-left:1px solid var(--mist);transform:rotate(45deg);opacity:0;transition:opacity .4s 1s}
.vsvc-mx .xl{grid-column:2/4;grid-row:3;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px}
.vsvc-mx .xl span{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.vsvc-mx .xl::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.vsvc-mx .xl::after{content:"";position:absolute;right:-2px;top:1px;width:7px;height:7px;border-top:1px solid var(--mist);border-right:1px solid var(--mist);transform:rotate(45deg);opacity:0;transition:opacity .4s 1s}
.vsvc-mx .q{border:1px solid var(--line);background:var(--ink-raise);padding:clamp(18px,2.2vw,30px);min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;opacity:0;transform:scale(.96);transition:opacity .7s var(--ease) calc(.5s + var(--i,0)*.15s),transform .7s var(--ease) calc(.5s + var(--i,0)*.15s)}
.vsvc-mx .q .vsvc-lbl{margin-bottom:auto}
.vsvc-mx .q h3{font-size:clamp(20px,2vw,28px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.vsvc-mx .q p{font-size:14px;color:var(--mist);max-width:34ch}
.vsvc-mx .q.hi{border-color:var(--red);background:var(--ink-raise2)}
.vsvc-mx .q.hi .vsvc-lbl{color:var(--red)}
.vsvc-mx.play .yl::before,.vsvc-mx.play .xl::before{transform:none}
.vsvc-mx.play .yl::after,.vsvc-mx.play .xl::after{opacity:1}
.vsvc-mx.play .q{opacity:1;transform:none}

/* 3. System sync architecture: objects move between ERP, the integration layer and HubSpot */
.vsvc-arch{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,.7fr) minmax(0,1.15fr) minmax(70px,.7fr) minmax(0,1fr);align-items:stretch}
.vsvc-arch .sys{border:1px solid var(--line-strong);background:var(--ink-raise);padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease) calc(var(--i,0)*.2s),transform .7s var(--ease) calc(var(--i,0)*.2s)}
.vsvc-arch .sys h3{font-size:clamp(20px,1.8vw,26px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.vsvc-arch .sys ul{list-style:none;border-top:1px solid var(--line)}
.vsvc-arch .sys li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--mist);line-height:1.35}
.vsvc-arch .sys.mid{border-color:var(--red);background:var(--ink-deep)}
.vsvc-arch .sys.mid .vsvc-lbl{color:var(--red)}
.vsvc-arch .lanes{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:0 6px}
.vsvc-arch .ln{position:relative;height:22px;overflow:hidden}
.vsvc-arch .ln::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .5s}
.vsvc-arch .pk{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease) 1.1s}
.vsvc-arch .pk b{position:absolute;left:0;top:2px;padding:2px 7px;background:var(--bone);color:var(--ink-deep);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:14px;white-space:nowrap}
.vsvc-arch .ln.two .pk b{background:var(--white)}
.vsvc-arch.play .sys{opacity:1;transform:none}
.vsvc-arch.play .ln::before{transform:none}
.vsvc-arch.play .pk{opacity:1;animation:vsvc-flow 3.6s linear calc(1.1s + var(--d,0s)) infinite}
.vsvc-arch.play .ln.rev .pk{animation-direction:reverse}
@keyframes vsvc-flow{from{transform:translateX(-45%)}to{transform:translateX(100%)}}

/* 4. Operating cadence: one quarter of managed operations */
.vsvc-cad{border:1px solid var(--line);background:var(--ink-deep);padding:clamp(20px,2.6vw,36px)}
.vsvc-cad .r{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:18px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.vsvc-cad .r.hd{padding-top:0}
.vsvc-cad .lb b{display:block;font-size:15px;font-weight:700;line-height:1.25}
.vsvc-cad .lb span{display:block;margin-top:2px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.vsvc-cad .tl{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));height:30px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/12));border-right:1px solid var(--line)}
.vsvc-cad .hd .tl{height:auto;background:none;border-right:0}
.vsvc-cad .hd .tl span{grid-column:span 4;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);padding:0 0 8px 8px;border-left:1px solid var(--line-strong)}
.vsvc-cad .bar{grid-row:1;grid-column:1/-1;align-self:center;height:12px;background:var(--bone);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) calc(var(--i,0)*.15s)}
.vsvc-cad .bar.soft{background:rgba(237,231,228,.32)}
.vsvc-cad .bar.dash{background:repeating-linear-gradient(90deg,rgba(237,231,228,.45) 0 10px,transparent 10px 18px)}
.vsvc-cad .mk{grid-row:1;align-self:center;justify-self:center;width:14px;height:14px;background:var(--white);transform:rotate(45deg) scale(0);transition:transform .5s var(--ease) calc(.4s + var(--i,0)*.15s + var(--j,0)*.12s)}
.vsvc-cad .mk.hi{background:var(--red);width:18px;height:18px}
.vsvc-cad.play .bar{transform:none}
.vsvc-cad.play .mk{transform:rotate(45deg) scale(1)}
.vsvc-cad .ft{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:18px}
.vsvc-cad .ft span{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.vsvc-cad .ft i{display:inline-block;width:10px;height:10px;background:var(--white);transform:rotate(45deg)}
.vsvc-cad .ft i.b{width:22px;height:8px;transform:none;background:var(--bone)}
.vsvc-cad .ft i.h{background:var(--red)}

/* 5. Phase timeline with gates: five phases on row 1, the gate between each pair on row 2 */
.vsvc-gates{list-style:none;position:relative;display:grid;grid-template-columns:repeat(10,minmax(0,1fr))}
.vsvc-gates > li{min-width:0}
.vsvc-gates::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease)}
.vsvc-gates .ph{grid-row:1;position:relative;margin-right:1px;padding:26px clamp(14px,1.6vw,24px) 26px;background:var(--ink-raise);border-top:2px solid var(--line-strong);opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease) calc(var(--i,0)*.16s),transform .7s var(--ease) calc(var(--i,0)*.16s)}
.vsvc-gates .ph .n{display:block;font-size:12px;color:var(--ash);letter-spacing:.14em;margin-bottom:10px}
.vsvc-gates .ph h3{font-size:clamp(18px,1.7vw,24px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.vsvc-gates .ph p{margin-top:10px;font-size:14px;color:var(--mist);line-height:1.45}
.vsvc-gates .gt{grid-row:2;position:relative;text-align:center;padding:52px 8px 0;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) calc(.7s + var(--i,0)*.16s),transform .7s var(--ease) calc(.7s + var(--i,0)*.16s)}
.vsvc-gates .gt::before{content:"";position:absolute;left:50%;top:0;width:1px;height:30px;background:var(--line-strong)}
.vsvc-gates .gt::after{content:"";position:absolute;left:calc(50% - 8px);top:26px;width:16px;height:16px;background:var(--ink);border:1px solid var(--white);transform:rotate(45deg)}
.vsvc-gates .gt.hi::after{background:var(--red);border-color:var(--red)}
.vsvc-gates .gt .vsvc-lbl{display:block;margin-bottom:6px}
.vsvc-gates .gt.hi .vsvc-lbl{color:var(--red)}
.vsvc-gates .gt b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.vsvc-gates > :nth-child(1){grid-column:1/3}.vsvc-gates > :nth-child(3){grid-column:3/5}.vsvc-gates > :nth-child(5){grid-column:5/7}.vsvc-gates > :nth-child(7){grid-column:7/9}.vsvc-gates > :nth-child(9){grid-column:9/11}
.vsvc-gates > :nth-child(2){grid-column:2/4}.vsvc-gates > :nth-child(4){grid-column:4/6}.vsvc-gates > :nth-child(6){grid-column:6/8}.vsvc-gates > :nth-child(8){grid-column:8/10}
.vsvc-gates.play::before{transform:none}
.vsvc-gates.play .ph,.vsvc-gates.play .gt{opacity:1;transform:none}
.vsvc-gates.play .ph{border-top-color:var(--white);transition-property:opacity,transform,border-color}

/* 6. One core, local by market: shared HubSpot core with market layers on top */
.vsvc-core{display:grid;gap:0}
.vsvc-core .top{border:1px solid var(--line-strong);padding:16px 20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;align-items:baseline;opacity:0;transition:opacity .8s var(--ease) 1.3s}
.vsvc-core .top b{font-size:clamp(16px,1.4vw,19px);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.vsvc-core .top span{font-size:14px;color:var(--mist)}
.vsvc-core .mks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:28px 0}
.vsvc-core .mk{position:relative;border:1px solid var(--line);background:var(--ink-raise);padding:clamp(16px,1.8vw,24px);opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease) calc(.4s + var(--i,0)*.15s),transform .7s var(--ease) calc(.4s + var(--i,0)*.15s)}
.vsvc-core .mk::before,.vsvc-core .mk::after{content:"";position:absolute;left:50%;width:1px;height:28px;background:var(--line-strong)}
.vsvc-core .mk::before{top:-29px}.vsvc-core .mk::after{bottom:-29px}
.vsvc-core .mk h3{font-size:clamp(18px,1.6vw,22px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.1;margin-bottom:12px}
.vsvc-core .mk ul{list-style:none;border-top:1px solid var(--line)}
.vsvc-core .mk li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--mist);line-height:1.35}
.vsvc-core .mk li i{font-style:normal;color:var(--ash);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.vsvc-core .mk.nx{border-style:dashed;border-color:var(--line-strong);background:transparent;display:flex;flex-direction:column;justify-content:flex-end}
.vsvc-core .mk.nx p{font-size:14px;color:var(--ash)}
.vsvc-core .base{border:1px solid var(--red);background:var(--ink-deep);padding:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;align-items:baseline;transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.vsvc-core .base b{font-size:clamp(18px,1.6vw,22px);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.vsvc-core .base span{font-size:14px;color:var(--mist)}
.vsvc-core.play .top{opacity:1}
.vsvc-core.play .mk{opacity:1;transform:none}
.vsvc-core.play .base{transform:none}

/* 7. Adoption curve: four stages, the metric tracked at each, no values */
.vsvc-ad{position:relative}
.vsvc-ad .plot{position:relative;border-left:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:28px 0 0}
.vsvc-ad .yl,.vsvc-ad .xl{position:absolute;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.vsvc-ad .yl{left:12px;top:0}
.vsvc-ad .xl{right:0;bottom:-26px}
.vsvc-ad svg{display:block;width:100%;height:auto}
.vsvc-ad .bands line{stroke:rgba(237,231,228,.13);stroke-width:1;vector-effect:non-scaling-stroke}
.vsvc-ad .cv{fill:none;stroke:var(--white);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .2s}
.vsvc-ad .area{fill:rgba(237,231,228,.06);opacity:0;transition:opacity 1s var(--ease) 1s}
.vsvc-ad .dt{fill:var(--ink);stroke:var(--white);stroke-width:2;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s var(--ease) calc(.5s + var(--i,0)*.3s)}
.vsvc-ad .dt.hi{fill:var(--red);stroke:var(--red)}
.vsvc-ad .stg{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px}
.vsvc-ad .stg li{padding:0 clamp(12px,1.6vw,24px) 0 0;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease) calc(.6s + var(--i,0)*.3s),transform .6s var(--ease) calc(.6s + var(--i,0)*.3s)}
.vsvc-ad .stg li + li{padding-left:clamp(12px,1.6vw,24px);border-left:1px solid var(--line)}
.vsvc-ad .stg .vsvc-lbl{display:block;margin-bottom:8px}
.vsvc-ad .stg h3{font-size:clamp(18px,1.7vw,24px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.vsvc-ad .stg .kp{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-strong)}
.vsvc-ad .stg .kp i{display:block;font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.vsvc-ad .stg .kp b{display:block;margin-top:4px;font-size:15px;font-weight:700;line-height:1.3}
.vsvc-ad .stg .kp span{display:block;margin-top:4px;font-size:13px;color:var(--ash);line-height:1.4}
.vsvc-ad.play .cv{stroke-dashoffset:0}
.vsvc-ad.play .area{opacity:1}
.vsvc-ad.play .dt{transform:none}
.vsvc-ad.play .stg li{opacity:1;transform:none}

/* 8. Audit heat grid: six areas by team, cells rated in the audit, no values shown */
.vsvc-heat{position:relative}
.vsvc-heat .gr{position:relative;display:grid;grid-template-columns:minmax(0,13rem) repeat(4,minmax(0,1fr));gap:6px}
.vsvc-heat .ch{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);padding:0 4px 8px;align-self:end}
.vsvc-heat .rh{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;line-height:1.2;padding-right:8px}
.vsvc-heat .rh i{font-style:normal;font-size:12px;font-weight:400;color:var(--ash);letter-spacing:.12em}
.vsvc-heat .c{position:relative;height:58px;border:1px solid var(--line);background:var(--ink-raise) repeating-linear-gradient(135deg,rgba(237,231,228,.07) 0 1px,transparent 1px 9px);opacity:0;transform:scale(.85);transition:opacity .5s var(--ease) calc(.2s + var(--i,0)*.09s),transform .5s var(--ease) calc(.2s + var(--i,0)*.09s)}
.vsvc-heat .c::after{content:"";position:absolute;left:10px;bottom:10px;width:18px;height:2px;background:var(--line-strong)}
.vsvc-heat .scan{position:absolute;left:calc(13rem + 6px);right:0;top:30px;bottom:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .6s 1.6s}
.vsvc-heat .scan i{position:absolute;inset:0}
.vsvc-heat .scan i::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--bone);box-shadow:0 0 18px rgba(237,231,228,.35)}
.vsvc-heat.play .c{opacity:1;transform:none}
.vsvc-heat.play .scan{opacity:.8}
.vsvc-heat.play .scan i{animation:vsvc-scan 4.8s var(--ease) 1.6s infinite}
@keyframes vsvc-scan{from{transform:translateY(0)}to{transform:translateY(100%)}}
.vsvc-heat .lg{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px}
.vsvc-heat .lg span{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.vsvc-heat .lg i{display:inline-block;width:22px;height:14px;border:1px solid var(--line-strong)}
.vsvc-heat .lg .s1{background:rgba(237,231,228,.12)}.vsvc-heat .lg .s2{background:rgba(237,231,228,.45)}.vsvc-heat .lg .s3{background:var(--red);border-color:var(--red)}

/* 9. Who pays what: licences, Azend fees, consumption */
.vsvc-pay .bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.vsvc-pay .bar span{display:flex;align-items:center;justify-content:space-between;gap:10px;height:76px;padding:0 20px;background:var(--ink-raise2);border:1px solid var(--line-strong);font-size:clamp(14px,1.3vw,18px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) calc(var(--i,0)*.3s)}
.vsvc-pay .bar span i{font-style:normal;font-size:12px;font-weight:400;color:var(--ash);letter-spacing:.14em}
.vsvc-pay .bar span.hi{background:var(--red);border-color:var(--red)}
.vsvc-pay .bar span.hi i{color:var(--white)}
.vsvc-pay .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
.vsvc-pay .col{border:1px solid var(--line);background:var(--ink-raise);padding:clamp(18px,2vw,28px);opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease) calc(.6s + var(--i,0)*.3s),transform .7s var(--ease) calc(.6s + var(--i,0)*.3s)}
.vsvc-pay dl{display:grid;gap:0}
.vsvc-pay dt{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);padding-top:12px}
.vsvc-pay dd{font-size:15px;color:var(--white);line-height:1.4;padding:4px 0 12px;border-bottom:1px solid var(--line)}
.vsvc-pay dl > dt:first-child{padding-top:0}
.vsvc-pay.play .bar span{transform:none}
.vsvc-pay.play .col{opacity:1;transform:none}

/* 10. One platform against a stitched stack */
.vsvc-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vsvc-vs .pn{border:1px solid var(--line);background:var(--ink-deep);padding:clamp(20px,2.6vw,36px);display:flex;flex-direction:column;gap:22px}
.vsvc-vs .pn > .vsvc-lbl{margin:0}
.vsvc-vs .pn h3{font-size:clamp(22px,2.2vw,32px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1}
.vsvc-vs .pn > p{font-size:14px;color:var(--ash);margin-top:auto}
.vsvc-vs .mesh{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,96px);gap:48px 36px;padding:6px 0}
.vsvc-vs .mesh svg{position:absolute;inset:6px 0;width:100%;height:calc(100% - 12px);overflow:visible}
.vsvc-vs .mesh path{fill:none;stroke:rgba(237,231,228,.42);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease) calc(.5s + var(--i,0)*.08s)}
.vsvc-vs .mesh .tl{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;border:1px solid var(--line-strong);background:var(--ink-raise);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;overflow-wrap:anywhere;opacity:0;transform:scale(.9);transition:opacity .6s var(--ease) calc(var(--i,0)*.08s),transform .6s var(--ease) calc(var(--i,0)*.08s)}
.vsvc-vs .lay{list-style:none;display:grid;gap:8px}
.vsvc-vs .lay li{border:1px solid var(--line-strong);background:var(--ink-raise);padding:16px 18px;opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease) calc(.3s + var(--i,0)*.22s),transform .7s var(--ease) calc(.3s + var(--i,0)*.22s)}
.vsvc-vs .lay li b{display:block;font-size:clamp(16px,1.4vw,19px);font-weight:800;text-transform:uppercase;letter-spacing:.04em;line-height:1.15}
.vsvc-vs .lay li span{display:block;margin-top:4px;font-size:13px;color:var(--mist);line-height:1.4}
.vsvc-vs .lay li.base{border-color:var(--red);background:var(--ink-raise2)}
.vsvc-vs .lay li.base b::before{content:"";display:inline-block;width:9px;height:9px;background:var(--red);transform:rotate(45deg);margin-right:12px;vertical-align:2px}
.vsvc-vs.play .mesh path{stroke-dashoffset:0}
.vsvc-vs.play .mesh .tl{opacity:1;transform:none}
.vsvc-vs.play .lay li{opacity:1;transform:none}
.vsvc-vs.play .mesh svg{animation:vsvc-hum 3.2s ease-in-out 2s infinite}
@keyframes vsvc-hum{50%{opacity:.45}}

/* Tablet */
@media (max-width:1100px){
  .vsvc-gates .ph p{display:none}
  .vsvc-gates .gt b{font-size:13px}
  .vsvc-core .mks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vsvc-core .mk::before{display:none}
  .vsvc-core .mk::after{display:none}
  .vsvc-arch .sys li{font-size:13px}
}

/* Mobile */
@media (max-width:820px){
  .vsvc-rd{grid-template-columns:minmax(0,1fr);gap:28px}
  .vsvc-radar{overflow:visible;margin-top:24px}
  .vsvc-radar .lab text + text,.vsvc-radar .rn{display:none}
  .vsvc-radar .lab text:first-child{font-size:34px;font-weight:800;fill:#FAF8F7;letter-spacing:1px}
  .vsvc-ad .dt{r:22px;stroke-width:2}
  .vsvc-mx{grid-template-columns:26px minmax(0,1fr) minmax(0,1fr);gap:6px}
  .vsvc-mx .q{min-height:200px;padding:14px}
  .vsvc-mx .q h3{font-size:17px}
  .vsvc-mx .q p{font-size:13px}
  .vsvc-mx .q .vsvc-lbl{font-size:10px;letter-spacing:.1em}
  .vsvc-mx .yl span,.vsvc-mx .xl span{font-size:10px;letter-spacing:.12em}

  .vsvc-arch{grid-template-columns:minmax(0,1fr)}
  .vsvc-arch .lanes{flex-direction:row;justify-content:space-between;gap:8px;height:96px;padding:0}
  .vsvc-arch .ln{flex:1;height:100%}
  .vsvc-arch .ln::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto;transform:scaleY(0);transform-origin:top}
  .vsvc-arch.play .ln::before{transform:none}
  .vsvc-arch .pk b{left:50%;top:0;transform:translateX(-50%)}
  .vsvc-arch.play .pk{animation-name:vsvc-flowy}

  .vsvc-cad{padding:18px 14px}
  .vsvc-cad .r{grid-template-columns:minmax(0,1fr);gap:8px}
  .vsvc-cad .r.hd .lb{display:none}
  .vsvc-cad .hd .tl span{font-size:10px;letter-spacing:.1em;padding-left:5px}
  .vsvc-cad .mk{width:11px;height:11px}
  .vsvc-cad .mk.hi{width:14px;height:14px}

  .vsvc-gates{grid-template-columns:minmax(0,1fr)}
  .vsvc-gates::before{left:15px;right:auto;top:0;bottom:0;width:1px;height:auto;transform:scaleY(0);transform-origin:top}
  .vsvc-gates > li{grid-column:auto!important;grid-row:auto!important}
  .vsvc-gates .ph{margin:0 0 0 34px;padding:18px 16px}
  .vsvc-gates .ph p{display:block}
  .vsvc-gates .gt{text-align:left;padding:16px 0 16px 34px}
  .vsvc-gates .gt::before{display:none}
  .vsvc-gates .gt::after{left:8px;top:calc(50% - 8px)}
  .vsvc-gates .gt b{font-size:14px}

  .vsvc-core .mks{grid-template-columns:minmax(0,1fr);gap:8px;padding:8px 0}
  .vsvc-core .top,.vsvc-core .base{padding:14px 16px}

  .vsvc-ad .stg{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .vsvc-ad .stg li:nth-child(3){padding-left:0;border-left:0}
  .vsvc-ad .stg h3{font-size:17px}

  .vsvc-heat .gr{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .vsvc-heat .gr > .ch:first-child{display:none}
  .vsvc-heat .ch{font-size:10px;letter-spacing:.06em;padding:0 0 4px}
  .vsvc-heat .rh{grid-column:1/-1;font-size:14px;padding:10px 0 2px}
  .vsvc-heat .c{height:38px}
  .vsvc-heat .scan{display:none}

  .vsvc-pay .bar{grid-template-columns:minmax(0,1fr)}
  .vsvc-pay .bar span{height:56px}
  .vsvc-pay .cols{grid-template-columns:minmax(0,1fr)}

  .vsvc-vs{grid-template-columns:minmax(0,1fr)}
  .vsvc-vs .mesh{grid-template-rows:repeat(2,78px);gap:36px 22px}
  .vsvc-vs .mesh .tl{font-size:10px;letter-spacing:.06em;padding:4px}
}
@keyframes vsvc-flowy{from{transform:translateY(-35%)}to{transform:translateY(100%)}}

/* Reduced motion: final state, no loops */
@media (prefers-reduced-motion:reduce){
  .vsvc-radar .rg{stroke-dashoffset:0!important;transition:none}
  .vsvc-radar .ax{transform:none!important;transition:none}
  .vsvc-radar .lab,.vsvc-radar .sw{opacity:1!important;transition:none}
  .vsvc-radar .sw,.vsvc-arch .pk,.vsvc-heat .scan i,.vsvc-vs .mesh svg{animation:none!important}
  .vsvc-dims li,.vsvc-mx .q,.vsvc-arch .sys,.vsvc-gates .ph,.vsvc-gates .gt,.vsvc-core .mk,.vsvc-core .top,.vsvc-ad .stg li,.vsvc-heat .c,.vsvc-pay .col,.vsvc-vs .mesh .tl,.vsvc-vs .lay li{opacity:1!important;transform:none!important;transition:none!important}
  .vsvc-mx .yl::before,.vsvc-mx .xl::before,.vsvc-arch .ln::before,.vsvc-cad .bar,.vsvc-gates::before,.vsvc-core .base,.vsvc-pay .bar span{transform:none!important;transition:none!important}
  .vsvc-mx .yl::after,.vsvc-mx .xl::after,.vsvc-ad .area{opacity:1!important;transition:none}
  .vsvc-cad .mk{transform:rotate(45deg) scale(1)!important;transition:none}
  .vsvc-ad .cv,.vsvc-vs .mesh path{stroke-dashoffset:0!important;transition:none}
  .vsvc-ad .dt{transform:none!important;transition:none}
  .vsvc-arch .pk{opacity:1!important;transition:none}
  .vsvc-arch .pk b{left:50%;transform:translateX(-50%)}
  .vsvc-heat .scan{display:none}
}