/* Flyn v22: one balance, one approved run, many recipient currency needs. */
.payout-section{padding-block:112px 116px}
.payout-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.payout-heading h2{max-width:620px;margin:0}
.payout-heading p{max-width:355px;margin:0 0 5px;color:var(--muted);font-size:18px;line-height:1.6}
.payout-scene{margin:48px 0 0;position:relative}
.flow-composition{position:relative;display:grid;grid-template-columns:minmax(210px,1fr) 224px minmax(272px,1.1fr);column-gap:70px;align-items:center;min-height:364px;padding:26px 4px}
.flow-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.flow-route-base{fill:none;stroke:var(--line);stroke-width:1.5}
.flow-route-trail{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:12 88;stroke-dashoffset:-100;opacity:0}
.flow-balance,.flow-run,.flow-recipients{position:relative;z-index:1;min-width:0}
.flow-balance{background:var(--white);padding:20px 0}
.flow-balance-label{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:500;color:var(--muted)}
.flow-flag{width:28px;height:28px;flex:0 0 28px;border-radius:50%;overflow:hidden;display:block;box-shadow:0 0 0 3px #fff,0 2px 8px #10243F18}
.flow-flag svg{display:block;width:100%;height:100%}
.flow-starting{font-size:clamp(34px,3.7vw,48px);font-weight:600;letter-spacing:-.035em;line-height:1.1;white-space:nowrap;margin-top:18px;font-variant-numeric:tabular-nums}
.flow-starting>span{font-size:.45em;letter-spacing:-.015em;font-weight:450;color:var(--muted)}
.flow-balance-bar{display:flex;gap:3px;height:6px;width:100%;margin:24px 0 20px;overflow:hidden;border-radius:3px;background:var(--fog)}
.flow-balance-bar>span{display:block;background:var(--ink);width:98.630137%;border-radius:3px;transform-origin:left}
.flow-balance-bar>i{display:block;flex:1;min-width:4px;background:var(--orange);border-radius:2px}
.flow-remainder{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted)}
.flow-remainder strong{color:var(--ink);font-weight:600;font-size:23px;letter-spacing:-.025em;white-space:nowrap;font-variant-numeric:tabular-nums}
.flow-remainder strong span{font-size:14px;font-weight:450;color:var(--muted)}
.flow-run{background:var(--orange);border-radius:19px;padding:22px 24px 0;box-shadow:0 1px 0 #FFFFFF9E inset,0 -4px 0 #10243F0D inset,0 3px 4px #10243F0C,0 18px 26px -14px #10243F40,0 36px 50px -30px #10243F45}
.flow-run-top{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:550;white-space:nowrap}
.flow-run-top .icon{width:16px;height:16px;stroke-width:2}
.flow-allocated{display:block;font-size:38px;line-height:1.15;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-top:22px}
.flow-run-caption{display:block;font-size:12px;margin-top:4px}
.flow-run-people{margin:22px -24px 0;padding:16px 24px 18px;display:flex;align-items:center;gap:9px;background:#FFFFFF25;border-radius:0 0 19px 19px;font-size:14px}
.flow-run-people strong{font-weight:550}.flow-run-people .icon{width:20px;height:20px}
.flow-recipients{display:grid;gap:22px}
.flow-destination{display:flex;align-items:center;gap:12px;min-width:0;padding:19px 18px;background:var(--white);border-radius:14px;box-shadow:0 1px 3px #10243F09,0 7px 14px -7px #10243F24,0 25px 38px -25px #10243F40}
.flow-destination:nth-child(1){margin-right:24px;transform:translateX(-8px)}
.flow-destination:nth-child(2){margin-left:16px;margin-right:-4px}
.flow-destination:nth-child(3){margin-left:0;margin-right:16px;transform:translateX(-5px)}
.flow-flag-th{background:linear-gradient(#A51931 0 16.666%,#fff 16.666% 33.333%,#2D2A4A 33.333% 66.666%,#fff 66.666% 83.333%,#A51931 83.333%)}
.flow-currency{min-width:0}.flow-currency>strong{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.flow-currency>span{display:block;font-size:11px;color:var(--muted);line-height:1.5;margin-top:3px}
.flow-persons{display:flex;margin-left:auto;padding-left:8px;flex-shrink:0}
.flow-persons>span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--fog);box-shadow:0 0 0 2px #fff;font-size:8px;font-weight:600;margin-left:-8px;position:relative}
.flow-persons>span:nth-child(2){background:#D9E0E5}.flow-persons>span:nth-child(3){background:var(--ink);color:#fff}
/* Static HTML is complete. Motion is an enhancement, never the content gate. */
[data-payout-state="waiting"] .flow-route-trails{opacity:0}
[data-payout-state="running"] .flow-route-trail{animation:flow-travel 900ms cubic-bezier(.34,0,.3,1) both}
[data-payout-state="running"] .flow-route-trail[data-path="in"]{animation-delay:150ms}
[data-payout-state="running"] .flow-route-trail[data-path="thb"]{animation-delay:1100ms}
[data-payout-state="running"] .flow-route-trail[data-path="mxn"]{animation-delay:1380ms}
[data-payout-state="running"] .flow-route-trail[data-path="gtq"]{animation-delay:1660ms}
[data-payout-state="running"] .flow-run{animation:flow-approve 4.3s var(--ease) both}
[data-payout-state="running"] .flow-destination{animation:flow-receive 1.1s var(--ease) both;animation-delay:1900ms}
[data-payout-state="running"] .flow-destination:nth-child(2){animation-delay:2180ms}
[data-payout-state="running"] .flow-destination:nth-child(3){animation-delay:2460ms}
[data-payout-state="running"] .flow-remainder{animation:flow-remainder 4.3s var(--ease) both}
[data-payout-state="running"] .flow-balance-bar>span{animation:flow-allocate 4.3s var(--ease) both}
@keyframes flow-travel{0%{stroke-dashoffset:12;opacity:0}12%{opacity:1}86%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
@keyframes flow-approve{0%,8%{transform:translateY(0)}23%,36%{transform:translateY(-6px)}55%,100%{transform:translateY(0)}}
@keyframes flow-receive{0%{translate:0 0}40%{translate:0 -6px;box-shadow:0 1px 3px #10243F09,0 12px 19px -7px #10243F24,0 28px 40px -25px #10243F40}100%{translate:0 0}}
@keyframes flow-remainder{0%,62%{opacity:.35}82%,100%{opacity:1}}
@keyframes flow-allocate{0%,18%{transform:scaleX(.014)}76%,100%{transform:scaleX(1)}}
@media(max-width:1100px){.flow-composition{column-gap:38px;grid-template-columns:minmax(190px,1fr) 204px minmax(250px,1.1fr)}.flow-run{padding-inline:20px}.flow-run-people{margin-inline:-20px;padding-inline:20px}.flow-allocated{font-size:35px}.flow-destination{padding:17px 14px;gap:10px}.flow-persons>span{width:23px;height:23px}.flow-starting{font-size:38px}.flow-destination:nth-child(2){margin-left:6px}}
@media(max-width:850px){.payout-section{padding-block:78px 88px}.payout-heading{display:block}.payout-heading p{margin-top:22px;max-width:500px}.flow-composition{grid-template-columns:1fr 1fr;column-gap:70px;padding-inline:10px;row-gap:68px}.flow-balance{grid-column:1;grid-row:1}.flow-run{grid-column:2;grid-row:1;max-width:230px;width:100%;justify-self:end}.flow-recipients{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(3,1fr);gap:18px}.flow-destination{display:grid;grid-template-columns:28px 1fr;align-content:start;gap:12px;margin:0!important;transform:none!important;padding:18px 14px}.flow-persons{grid-column:2;margin:0;padding-left:8px}.flow-currency>span{min-height:33px}.flow-currency>strong{font-size:19px}.payout-scene{margin-top:36px}}
@media(max-width:600px){.payout-section{padding-block:64px 72px}.payout-heading h2{font-size:38px}.payout-heading p{font-size:16px;line-height:1.6;max-width:300px;margin-top:20px}.payout-heading p br{display:none}.payout-scene{margin-top:24px}.flow-composition{display:flex;flex-direction:column;align-items:stretch;gap:45px;padding:0 8px}.flow-balance{align-self:flex-start;width:min(100%,280px);padding:14px 0 4px}.flow-starting{font-size:42px}.flow-balance-label{font-size:13px}.flow-balance-bar{margin-top:20px}.flow-run{align-self:flex-end;width:224px;max-width:calc(100% - 28px);margin-right:0}.flow-allocated{font-size:36px}.flow-run-top{font-size:12px}.flow-run-people{margin-top:18px}.flow-recipients{display:grid;grid-template-columns:1fr;gap:18px;margin-left:42px}.flow-destination{display:flex;padding:17px 16px;gap:12px}.flow-currency>span{min-height:0;font-size:11px}.flow-currency>strong{font-size:20px}.flow-persons{margin-left:auto}.flow-persons>span{width:24px;height:24px}.flow-run-caption{font-size:12px}.flow-remainder{font-size:13px}}
@media(prefers-reduced-motion:reduce){.payout-scene *{animation:none!important}.flow-route-trails{display:none}}
.reduce-motion .payout-scene *{animation:none!important}.reduce-motion .flow-route-trails{display:none}

/* Phone composition keeps the full branch within a natural scroll. */
@media(max-width:600px){.flow-composition{gap:24px}.flow-balance-bar{display:none}.flow-starting{margin-top:14px}.flow-remainder{margin-top:12px}.flow-run{padding-top:18px}.flow-allocated{margin-top:14px;font-size:34px}.flow-run-people{margin-top:12px;padding-block:12px 14px}.flow-recipients{gap:12px}.flow-destination{padding-block:14px}}
/* Permit visitor-enlarged text to reflow instead of stretching the page. */
.flow-starting{white-space:normal;overflow-wrap:anywhere}.flow-starting>span{display:inline-block}
.flow-allocated{overflow-wrap:anywhere}.flow-run-top{white-space:normal}.flow-run-top .icon{flex-shrink:0}
.flow-remainder{flex-wrap:wrap}.flow-balance-label>span{min-width:0}
@media(max-width:600px){.flow-balance{width:min(100%,15.56em)}.flow-run{width:min(100%,12.45em);max-width:100%}}