/* Hero sample visual: payout. Source: src/styles/vis-payout.css (edit there, then run scripts/vis-css.mjs). Linked by templates/Landing.astro only on a page with hero.visual: payout. */
.vp-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-3)}.vp-mark{height:var(--s-7);width:auto}.vp-title{display:grid;gap:2px;min-width:0}.vp-title span{color:var(--panel-muted)}.vp-amt{font-size:var(--fs-card-h3);font-weight:700;letter-spacing:var(--track-num);font-variant-numeric:tabular-nums;color:var(--accent-on-panel)}.vp-lines{display:grid;border-top:1px solid var(--panel-line)}.vp-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:var(--s-3);padding-block:2px;min-height:var(--s-6);border-bottom:1px solid var(--panel-line)}.vp-l{color:var(--panel-muted)}.vp-tag{font-size:var(--fs-tag);line-height:1;padding:3px var(--s-2);border:1px solid var(--panel-line);border-radius:var(--r-pill);color:var(--panel-muted);white-space:nowrap}.vp-tag.t-in{color:var(--accent-on-panel);border-color:var(--accent-on-panel)}.vp-v{min-width:9ch;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}.vp-net{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-3)}.vp-net .vis-tick{box-sizing:content-box;width:var(--s-4);height:var(--s-4);padding:var(--s-1);border-radius:var(--r-pill);background:var(--accent-on-panel);color:var(--panel);stroke-width:2.5}.vp-net span{display:grid;gap:1px}.vp-net b{font-size:var(--fs-pill);font-variant-numeric:tabular-nums}.vp-net i{color:var(--accent-on-panel)}@media (max-width:560px){.vp-lines li{column-gap:var(--s-2)}.vp-tag,.vp-tag.t-in{padding-inline:0;border-color:transparent}.vp-lines{font-size:calc(var(--fs-small) * 0.94)}.vp-v{min-width:0}}@media (prefers-reduced-motion:no-preference){html.js .vis.run .vp-head{animation:vis-fade var(--dur-hero-step) var(--ease-out) var(--dur-fade) backwards}html.js .vis.run .vp-lines li{animation:vis-drop var(--dur-hero-step) var(--ease-out) calc(var(--at) + var(--step) * var(--i,0)) backwards}html.js .vis.run .vp-net{animation:vis-fade var(--dur-hero-step) var(--ease-out) calc(var(--at) + var(--step) * 6) backwards}html.js .vis.run .vp-net .vis-tick{animation:vis-pop var(--dur-hero-step) var(--ease-out) calc(var(--at) + var(--step) * 6 + var(--dur-std)) backwards}.vp-lines li:nth-child(2){--i:1}.vp-lines li:nth-child(3){--i:2}.vp-lines li:nth-child(4){--i:3}.vp-lines li:nth-child(5){--i:4}.vp-lines li:nth-child(6){--i:5}}