/* Payout pipeline (Gerb 10-20): Day 0 -> Day 30 -> the 10th. Plays once when scrolled in
 * (js/aff-payflow.js adds .in); the payout badge keeps a soft loop of coins and bills.
 * Phone-first: vertical, goes horizontal from 720px. Used by join, payouts and the portal. */
.pf{--pf-g:#C9A84C;--pf-gl:#E8C97A;--pf-gd:#8a7333;--pf-ink:#F0E8D6;--pf-soft:#cfc7b5;--pf-bg:#0A0A0A;
  position:relative;text-align:left;margin-top:28px}
.pf ol{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:26px}
/* the track + its fill */
.pf ol::before,.pf ol::after{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;border-radius:2px}
.pf ol::before{background:rgba(201,168,76,.18)}
.pf ol::after{background:linear-gradient(180deg,var(--pf-gd),var(--pf-gl));transform-origin:top;transform:scaleY(0);
  transition:transform 1.8s cubic-bezier(.4,0,.2,1)}
.pf.in ol::after{transform:scaleY(1)}
.pf li{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start;align-content:start;
  opacity:.25;transform:translateY(8px);transition:opacity .5s,transform .5s}
.pf.in li{opacity:1;transform:none}
.pf.in li:nth-child(2){transition-delay:.7s}.pf.in li:nth-child(3){transition-delay:1.4s}
.pf .pf-dot{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--pf-bg);
  border:2px solid var(--pf-g);color:var(--pf-gl);font:700 13px/1 'Inter',system-ui,sans-serif;font-style:normal;position:relative;z-index:1}
.pf b{display:block;color:var(--pf-ink);font-size:16px;line-height:1.3;margin-top:2px}
.pf li>span{color:var(--pf-soft);font-size:14px;line-height:1.5}
.pf .pf-bank{display:block;color:var(--pf-gl);font-weight:600;margin-top:4px}
/* the payout step */
.pf .pf-pay .pf-dot{background:linear-gradient(180deg,var(--pf-gl),var(--pf-g));color:#0A0A0A;border-color:var(--pf-gl)}
.pf .pf-stage{position:relative;display:flex;width:max-content;align-items:center;margin:8px 0 6px;padding:24px 44px}
@media (min-width:720px){.pf:not(.compact) .pf-stage{margin-left:auto;margin-right:auto}}
.pf .pf-badge{position:relative;z-index:1;padding:7px 16px;border-radius:99px;font:800 12px/1 'Inter',system-ui,sans-serif;
  letter-spacing:.18em;color:#0A0A0A;background:linear-gradient(180deg,#fff1c7,var(--pf-g));box-shadow:0 0 0 rgba(201,168,76,0)}
.pf.in .pf-badge{animation:pf-glow 2.6s ease-in-out 1.6s infinite}
.pf .pf-fx{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;opacity:0;pointer-events:none}
.pf .pf-fx.c{border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff1c7,var(--pf-g) 60%,var(--pf-gd));
  color:#5b4718;font:800 11px/20px 'Inter',sans-serif;text-align:center}
.pf .pf-fx.c::before{content:"$"}
.pf .pf-fx.b{width:28px;height:15px;margin:-7px 0 0 -14px;border-radius:2px;background:linear-gradient(135deg,#7fcf9b,#3f8f5c);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.pf.in .pf-fx{animation:pf-fly 2.4s ease-out infinite}
.pf .f1{--x:-70px;--y:-30px;--r:-40deg;animation-delay:1.6s!important}
.pf .f2{--x:72px;--y:-26px;--r:30deg;animation-delay:2.0s!important}
.pf .f3{--x:-64px;--y:28px;--r:25deg;animation-delay:2.4s!important}
.pf .f4{--x:66px;--y:30px;--r:-35deg;animation-delay:1.8s!important}
.pf .f5{--x:6px;--y:-40px;--r:15deg;animation-delay:2.2s!important}
.pf .f6{--x:-10px;--y:38px;--r:-20deg;animation-delay:2.6s!important}
@keyframes pf-fly{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}
  15%{opacity:1}
  70%{opacity:.9}
  100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1) rotate(var(--r))}}
@keyframes pf-glow{0%,100%{box-shadow:0 0 0 rgba(201,168,76,0)}50%{box-shadow:0 0 22px rgba(232,201,122,.55)}}
.pf .pf-note{margin:18px 0 0 60px;color:#9A9486;font-size:13px}
@media (min-width:720px){
  .pf ol{grid-template-columns:repeat(3,1fr);gap:18px}
  .pf ol::before,.pf ol::after{left:16.66%;right:16.66%;top:21px;bottom:auto;width:auto;height:2px}
  .pf ol::after{transform-origin:left;transform:scaleX(0)}
  .pf.in ol::after{transform:scaleX(1)}
  .pf li{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:10px}
  .pf .pf-dot{grid-row:auto}
  .pf .pf-note{margin-left:0;text-align:center}
  .pf.compact ol{grid-template-columns:1fr;gap:20px}
  .pf.compact ol::before,.pf.compact ol::after{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto}
  .pf.compact ol::after{transform-origin:top;transform:scaleY(0)}
  .pf.compact.in ol::after{transform:scaleY(1)}
  .pf.compact li{grid-template-columns:44px 1fr;justify-items:start;text-align:left;row-gap:0}
  .pf.compact .pf-dot{grid-row:span 2}
  .pf.compact .pf-note{margin-left:60px;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .pf ol::after{transition:none;transform:none!important}
  .pf li{opacity:1;transform:none;transition:none}
  .pf .pf-badge,.pf .pf-fx{animation:none!important}
  .pf .pf-fx{display:none}
}