/* The automatic split scene: one payday divided across the seven buckets.
   One stylesheet for every page that shows it (the Personal home page's
   "Payday. Already planned." section and the Features hero), so the two
   cannot drift. Script: split-machine.js.
   Moved unchanged from vivid.css, sleek-finish.css and flow-scenes.css on
   2 October 2026 (owner request); see docs/LIVE_BASELINE.md. */
.split-machine{background:#fff;color:var(--v-ink);padding:30px;border-radius:28px;box-shadow:0 26px 0 -12px #00A2C8}
.machine-source{display:flex;align-items:center;gap:14px;background:#eef8ff;border-radius:16px;padding:18px}
.source-glyph{width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:#00A2C8;color:white;font-size:25px}
.machine-source small{font-size:11px;display:block;color:#34474f}
.machine-source strong{display:block;font-size:30px;letter-spacing:-.025em;margin-top:3px}
.machine-status{font-size:9px;color:#006e52;margin-left:auto;font-weight:700;background:#dcf5e9;padding:6px 8px;border-radius:99px}
.machine-track{height:30px;width:2px;background:#cce6fb;margin-left:39px;overflow:hidden}
.machine-track span{display:block;width:100%;height:12px;background:#00A2C8;border-radius:4px}
.split-destinations{display:flex;flex-direction:column;gap:8px}
.split-destination{position:relative;display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid #e4edf2;border-radius:12px;isolation:isolate;overflow:hidden;transition:border-color .3s}
.split-destination:before{content:'';position:absolute;inset:0 auto 0 0;width:var(--portion);background:var(--category);opacity:.08;z-index:-1}
.split-destination>i{font-style:normal;width:28px;height:28px;display:grid;place-items:center;background:var(--category);color:white;border-radius:9px;font-size:15px;font-weight:700}
.split-destination>span{font-size:12px;font-weight:500}
.split-destination small{font-size:9px;color:#34474f;margin-left:6px}
.split-destination>strong{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.split-destination.routing{border-color:var(--category)}
.split-destination.routing:before{opacity:.19}
.machine-foot{display:flex;justify-content:space-between;gap:20px;padding:22px 0 0;font-size:12px}
.machine-foot strong{font-size:20px}
.split-machine .scene-note{color:#34474f;margin-top:14px;font-size:9px}
.machine-track>span{animation:money-travel 1.3s linear infinite}
@media(max-width:1100px){.split-machine{padding:24px}.machine-status{display:none}.split-destination{gap:8px;padding:10px}.split-destination>strong{font-size:13px}.split-destination>span{font-size:11px}.split-destination small{font-size:8px}}
@media(max-width:800px){.split-machine{max-width:620px;width:100%;justify-self:center;padding:30px}.split-destination{padding:12px}.split-destination>span{font-size:13px}.split-destination>strong{font-size:17px}.split-destination small{font-size:10px}.machine-status{display:block}}
@media(max-width:540px){.split-machine{padding:20px 16px;border-radius:23px;box-shadow:0 20px 0 -10px #00A2C8}.machine-source{padding:15px 12px;gap:10px}.machine-source strong{font-size:27px}.machine-source small{font-size:10px}.machine-status{font-size:8px;padding:5px 7px}.source-glyph{width:34px;height:34px;font-size:21px}.machine-track{margin-left:29px;height:24px}.split-destination{grid-template-columns:27px 1fr auto;gap:8px;padding:10px 8px}.split-destination>i{width:26px;height:26px;font-size:13px;border-radius:8px}.split-destination>span{font-size:11px}.split-destination small{font-size:8px;margin-left:4px}.split-destination>strong{font-size:13px}.machine-foot{font-size:10px;padding-top:18px}.machine-foot strong{font-size:18px}.split-machine .scene-note{font-size:8px}}
@media(max-width:360px){.split-machine{padding:18px 12px}.machine-status{display:none}.split-destination small{display:none}.split-destination>strong{font-size:12px}.split-destination>span{font-size:10px}}
.split-destination>span{font-size:15px}
.split-destination small{font-size:12px}
.split-destination>strong{font-size:18px}
@media(max-width:540px){.split-destination>span{font-size:12px}.split-destination>strong{font-size:15px}}
/* The river from the payday to the buckets. The home hero card's small
   ribbon (.payday-flow, drawn by flow-scenes.js) uses the same current. */
.flow-river{height:126px;position:relative;margin:0 12px 12px}.flow-river svg{width:100%;height:100%;overflow:visible}
.flow-current{stroke-dasharray:12 88;animation:river-flow 3.4s cubic-bezier(.35,.05,.2,1) infinite;animation-delay:var(--delay)}
@keyframes river-flow{0%{stroke-dashoffset:18;opacity:0}15%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
@media(max-width:700px){.flow-river{height:90px}}
@media(prefers-reduced-motion:reduce){.flow-current{animation:none!important;stroke-dasharray:none}}
/* On a page with other base styles (the Features hero), the scene keeps the
   home page's type and colours. */
.fj-art>.split-machine{min-width:0;font-family:"Wealtho Sans",Arial,sans-serif;font-weight:500;line-height:normal;font-variant-numeric:normal;-webkit-font-smoothing:antialiased}
.fj-art .split-machine strong{font-weight:700}