/* Bangers landing v4 - story open, payroll wall, rules console. Loads after wow.css. */
.stage-ink{background:var(--surface-ink)}
.beat{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(30px,3.9vw,54px);color:var(--text-primary)}
.beat em{font-style:normal;color:var(--coral)}
.feedcard{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--r-card);box-shadow:var(--shadow-lift);padding:16px 18px;max-width:400px}
.feedcard+.feedcard{margin-top:12px}
.feedcard .who{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.feedcard .av{width:32px;height:32px;border-radius:50%;background:var(--surface-sunken);border:1px solid var(--border-soft);flex:none}
.feedcard .txt{font-size:13.5px;color:var(--text-body);line-height:1.5}
.feedcard .eng{display:flex;gap:16px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--border-soft);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.feedcard .eng b{font-family:var(--font-ui);font-size:13px;color:var(--text-primary);letter-spacing:0;margin-right:5px}
.feedstack{transform:translateY(calc(var(--p,0)*-70px))}
/* payroll wall */
.wall{margin-top:34px;display:flex;flex-direction:column;gap:12px}
.role{display:grid;grid-template-columns:250px 1fr 130px;align-items:center;gap:18px}
.role .who{display:flex;flex-direction:column;gap:2px}
.role .who span{font-size:15px;font-weight:700;color:var(--text-primary)}
.role .who small{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-faint)}
.role .track{height:38px;border-radius:9px;background:var(--surface-sunken);overflow:hidden}
.role .track i{display:block;height:100%;width:var(--w);border-radius:9px;background:var(--ink);transition:width .9s var(--ease-snap);transition-delay:calc(.1s + var(--i,0)*.08s)}
[data-theme=dark] .role .track i{background:#4A4560}
html.anim .r:not(.in) .role .track i{width:0}
html.anim .r.in .role .track i{width:var(--w)}
.role .amt{font-family:var(--font-display);font-weight:800;font-size:21px;color:var(--text-primary);text-align:right;letter-spacing:-.02em}
.role.us .track i{background:var(--accent);box-shadow:var(--shadow-glow-accent)}
.role.us .who span,.role.us .amt{color:var(--accent)}
.totals{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin-top:34px;align-items:stretch}
.totals .big{background:var(--surface-ink);border-radius:var(--r-card);padding:32px 34px;color:#C9C4D8;position:relative;overflow:hidden}
.totals .big .num{font-family:var(--font-display);font-weight:800;font-size:clamp(46px,6.4vw,88px);line-height:1;letter-spacing:-.035em;color:#fff}
.totals .swap{background:var(--surface-card);border:1.5px solid var(--accent);border-radius:var(--r-card);padding:32px 34px;box-shadow:var(--shadow-lift);display:flex;flex-direction:column;justify-content:center}
.totals .swap .num{font-family:var(--font-display);font-weight:800;font-size:clamp(46px,6.4vw,88px);line-height:1;letter-spacing:-.035em;color:var(--text-primary)}
.mult{display:inline-flex;align-items:center;gap:8px;background:var(--coral);color:#fff;border-radius:var(--r-pill);padding:6px 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:600}
/* rules console */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.rule{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;border-radius:var(--r-card);border:1px solid var(--border-soft);background:var(--surface-card);box-shadow:var(--shadow-card);transition:transform var(--dur-fast) var(--ease-snap)}
.rule:hover{transform:translateY(-2px)}
.rule .sw{width:40px;height:23px;border-radius:12px;background:var(--accent);position:relative;flex:none;margin-top:2px;transition:background .4s var(--ease-snap);transition-delay:calc(var(--i,0)*.1s)}
.rule .sw::after{content:"";position:absolute;top:2.5px;left:20px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,18,31,.3);transition:left .4s var(--ease-spring);transition-delay:calc(var(--i,0)*.1s)}
.rule.off .sw{background:var(--border)}
.rule.off .sw::after{left:2.5px}
html.anim .r:not(.in) .rule .sw{background:var(--border)}
html.anim .r:not(.in) .rule .sw::after{left:2.5px}
.r.in .rule:not(.off) .sw{background:var(--accent)}
.r.in .rule:not(.off) .sw::after{left:20px}
.rule p{margin:0;font-size:14px;color:var(--text-body);line-height:1.45}
.rule small{display:block;margin-top:5px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-faint)}
@media (max-width:1000px){.role{grid-template-columns:170px 1fr 96px;gap:12px}.role .amt{font-size:17px}.rules,.totals{grid-template-columns:1fr}
#story{height:auto}
#story .stage{position:static;height:auto;overflow:visible;grid-template-columns:1fr;padding:64px var(--gutter);gap:32px}
#story .phase{position:static;min-height:0;display:flex;flex-direction:column;gap:34px}
#story .phase>div{position:static;opacity:1;transform:none}
#rules>.wrap{grid-template-columns:1fr!important;gap:36px}}