/* Animated visual blocks for the gated guides. Pair with visuals.js. */
.vx{margin:26px 0;font-size:15px;line-height:1.5;color:var(--ink)}
.vx *{box-sizing:border-box}
.vx-h{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--navy);margin-bottom:14px}
.vx-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.vx-tint{background:var(--mist)!important;border-color:transparent!important}
.vx-navy{background:var(--navy)!important;border-color:var(--navy)!important;color:#fff}
.vx-ink{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff}
.vx-ico{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--mist);color:var(--navy);font-size:18px}
.vx-navy .vx-ico,.vx-ink .vx-ico{background:rgba(255,255,255,.12);color:#fff}
.vx-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.vx-reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.vx-reveal.is-in{opacity:1;transform:none}

.vx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.vx-stat{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff}
.vx-stat .vx-ico{margin-bottom:10px}
.vx-stat-v{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.vx-stat-l{margin-top:6px;font-size:13px;color:var(--ink-2)}
.vx-navy .vx-stat-l,.vx-ink .vx-stat-l,.vx-navy .vx-tile-b,.vx-ink .vx-tile-b{color:rgba(255,255,255,.75)}

.vx-bars{display:flex;flex-direction:column;gap:10px}
.vx-bar-row{display:grid;grid-template-columns:minmax(90px,32%) 1fr auto;gap:12px;align-items:center}
.vx-bar-l{font-size:13.5px;font-weight:600}
.vx-bar-track{height:14px;border-radius:5px;background:var(--mist);overflow:hidden}
.vx-bar{display:block;height:100%;width:0;border-radius:5px;background:var(--navy);transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.vx-bar.hi{background:var(--claret)}
.is-in .vx-bar{width:var(--w)}
.vx-bar-v{font-size:13px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}

.vx-steps{position:relative;display:flex;flex-direction:column;gap:16px;list-style:none;margin:0!important;padding:0}
.vx-steps:before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:var(--navy-soft);transform-origin:top;transform:scaleY(0);transition:transform 1.2s cubic-bezier(.16,1,.3,1) .2s}
.is-in .vx-steps:before{transform:scaleY(1)}
.vx-steps li{position:relative;display:grid;grid-template-columns:36px 1fr;gap:14px;margin:0!important;font-size:15px}
.vx-steps li::marker{content:none}
.vx-step-n{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:700;box-shadow:0 0 0 4px #fff}
.vx-steps li:last-child .vx-step-n{background:var(--ink)}
.vx-step-t{font-weight:700;padding-top:7px;color:var(--ink)}
.vx-step-b{margin-top:3px;font-size:14px;color:var(--ink-2)}

.vx-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 4px}
.vx-chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:var(--mist);font-size:13.5px;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.vx-chip.end{background:var(--navy);color:#fff}
.is-in .vx-chip{opacity:1;transform:none}
.vx-arrow{color:var(--navy);font-weight:700;animation:vx-nudge 1.6s ease-in-out infinite}
@keyframes vx-nudge{0%,100%{transform:translateX(0);opacity:.45}50%{transform:translateX(3px);opacity:1}}

.vx-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vx-cmp{border-radius:14px;padding:18px;border:1px solid var(--line);background:#fff}
.vx-cmp.good{background:var(--navy);border-color:var(--navy);color:#fff}
.vx-cmp.good .vx-h{color:rgba(255,255,255,.75)}
.vx-cmp ul{list-style:none;margin:0!important;padding:0;display:flex;flex-direction:column;gap:9px}
.vx-cmp li{display:grid;grid-template-columns:22px 1fr;gap:8px;margin:0!important;font-size:14.5px;color:inherit!important}
.vx-cmp li::marker{content:none}
.vx-cmp li:before{content:"✕";display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#f7e7ea;color:var(--claret);font-size:11px;font-weight:800}
.vx-cmp.good li:before{content:"✓";background:rgba(255,255,255,.16);color:#fff}

.vx-rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.vx-ring{position:relative;margin:0;padding:16px;border-radius:14px;background:var(--mist);text-align:center}
.vx-ring svg{width:110px;height:110px;transform:rotate(-90deg)}
.vx-ring .trk{fill:none;stroke:#fff;stroke-width:9}
.vx-ring .fil{fill:none;stroke:var(--navy);stroke-width:9;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1) .2s}
.vx-ring.is-in .fil{stroke-dashoffset:var(--off)}
.vx-ring b{position:absolute;left:0;right:0;top:16px;height:110px;display:grid;place-items:center;font-size:22px;font-weight:800}
.vx-ring span{display:block;margin-top:8px;font-size:13px;color:var(--ink-2)}

.vx-funnel{display:flex;flex-direction:column;align-items:center;gap:6px}
.vx-funnel div{width:var(--fw);display:flex;justify-content:space-between;gap:10px;padding:11px 16px;border-radius:10px;background:var(--navy);color:#fff;font-size:14px;font-weight:600;opacity:var(--o,1);transform:scaleX(.6);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.is-in .vx-funnel div{transform:none}
.vx-funnel small{font-weight:500;opacity:.8}

.vx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.vx-tile{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff}
.vx-tile-t{margin-top:12px;font-weight:700}
.vx-tile-b{margin-top:4px;font-size:14px;color:var(--ink-2)}

.vx-takeaways{border-radius:14px;padding:22px;background:var(--navy);color:#fff}
.vx-takeaways .vx-h{color:rgba(255,255,255,.75)}
.vx-takeaways ul{list-style:none;margin:0!important;padding:0;display:flex;flex-direction:column;gap:10px}
.vx-takeaways li{display:grid;grid-template-columns:22px 1fr;gap:8px;margin:0!important;color:#fff!important;font-size:15px}
.vx-takeaways li::marker{content:none}
.vx-takeaways li:before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.16);font-size:11px;font-weight:800}

.vx-big{text-align:center;padding:30px;border-radius:14px;background:var(--mist)}
.vx-big-v{font-size:64px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.vx-big-l{margin-top:10px;font-size:15px;color:var(--ink-2);max-width:46ch;margin-inline:auto}

@media (max-width:640px){.vx-compare{grid-template-columns:1fr}.vx-bar-row{grid-template-columns:1fr auto}.vx-bar-track{grid-column:1/-1;grid-row:2}}
@media (prefers-reduced-motion:reduce){.vx-reveal,.vx-chip,.vx-funnel div{opacity:1!important;transform:none!important;transition:none}.vx-bar{width:var(--w)!important}.vx-arrow{animation:none}.vx-ring .fil{stroke-dashoffset:var(--off)!important}.vx-steps:before{transform:none}}
@media print{.vx-reveal,.vx-chip,.vx-funnel div{opacity:1!important;transform:none!important}.vx-bar{width:var(--w)!important}.vx-ring .fil{stroke-dashoffset:var(--off)!important}.vx-steps:before{transform:none}.vx{break-inside:avoid}.vx-navy,.vx-ink,.vx-takeaways,.vx-cmp.good,.vx-step-n,.vx-bar,.vx-funnel div{-webkit-print-color-adjust:exact;print-color-adjust:exact}}