/* ---------- home: the payoff (between #how and #work). Uses the tokens in site.css. ---------- */
.payoff { --po-ease: cubic-bezier(.2, .7, .2, 1); background: var(--screen); padding-top: 0; }
.payoff__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 72px; align-items: start; }
.payoff__lbl { display: flex; align-items: center; gap: 12px; max-width: 330px; height: calc(var(--t-m) * 1.04); }
.payoff__lbl::after { content: ""; flex: 1; height: 1px; background: var(--rule); transform-origin: left; }
.payoff__lead { margin: 18px 0 0; color: var(--bone); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4; max-width: 34ch; }
.payoff__stats { list-style: none; margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.payoff__stat { min-width: 0; }
.payoff__bar { position: relative; display: block; height: 9px; overflow: hidden; }
.payoff__bar::before, .payoff__bar i::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--rule); }
.payoff__bar i { position: absolute; inset: 0; }
.payoff__bar i::before { background: var(--bone); }
.payoff__bar i::after { content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 9px; background: var(--bone); }
.payoff__num { position: relative; display: block; height: 1em; margin-top: 20px; overflow: hidden; font: 400 var(--t-xl)/1 var(--display); letter-spacing: -.012em; white-space: nowrap; color: var(--bone); }
.payoff__reel { position: absolute; left: 0; top: 0; transform: translateY(calc(-1em * var(--last, 0))); }
.payoff__reel span { display: block; height: 1em; color: var(--ash); }
.payoff__reel span:last-child { color: var(--bone); }
.payoff__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.payoff__txt { display: block; margin-top: 14px; color: var(--ash); max-width: 24ch; }
.payoff__craft { position: relative; margin-top: clamp(48px, 5vw, 72px); padding-top: 20px; }
.payoff__craft::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: left; }
.payoff__craft p { color: var(--bone); }
.payoff__craft span { color: var(--ash); }
@media (max-width: 980px) {
  .payoff__grid { grid-template-columns: 1fr; }
  .payoff__lbl { height: auto; max-width: none; margin-bottom: 24px; }
}
@media (max-width: 760px) {
  .payoff__stats { grid-template-columns: 1fr; gap: 28px; }
  .payoff__stat { display: grid; grid-template-columns: 1.9em minmax(0, 1fr); column-gap: 16px; align-items: end; font-size: clamp(64px, 20vw, 88px); }
  .payoff__bar { grid-column: 1 / -1; }
  .payoff__num { margin-top: 14px; font-size: 1em; }
  .payoff__txt { margin: 0 0 .1em; font-size: var(--t-body); }
}

/* motion: payoff.js adds .is-armed, then .is-on to the section, each stat and the craft line. Without JS or with reduced motion, everything is at rest. */
.payoff.po-instant, .payoff.po-instant *, .payoff.po-instant *::before, .payoff.po-instant *::after { transition: none !important; }
.payoff.is-armed .payoff__lbl { opacity: 0; transition: opacity .6s ease-out; }
.payoff.is-armed .payoff__lbl::after { transform: scaleX(0); transition: transform .9s var(--po-ease); }
.payoff.is-armed .payoff__h, .payoff.is-armed .payoff__lead { opacity: 0; transform: translateY(22px); transition: opacity .8s ease-out .1s, transform .9s var(--po-ease) .1s; }
.payoff.is-armed .payoff__lead { transition-delay: .4s; }
.payoff.is-armed .payoff__bar::before, .payoff.is-armed .payoff__bar i::after { opacity: 0; transition: opacity .3s ease-out; }
.payoff.is-armed .payoff__bar i { transform: translateX(-100%); transition: transform 1.3s var(--po-ease); }
.payoff.is-armed .payoff__reel { opacity: 0; transform: translateY(0); transition: opacity .25s ease-out, transform 1.3s var(--po-ease); }
.payoff.is-armed .payoff__txt { opacity: 0; transform: translateY(12px); transition: opacity .7s ease-out .95s, transform .8s var(--po-ease) .95s; }
.payoff.is-armed .payoff__craft p { opacity: 0; transform: translateY(22px); transition: opacity .8s ease-out .15s, transform .9s var(--po-ease) .15s; }
.payoff.is-armed .payoff__craft::before { transform: scaleX(0); transition: transform .9s var(--po-ease); }
.payoff.is-on .payoff__lbl, .payoff.is-on .payoff__h, .payoff.is-on .payoff__lead,
.payoff__stat.is-on .payoff__bar::before, .payoff__stat.is-on .payoff__bar i::after, .payoff__stat.is-on .payoff__reel, .payoff__stat.is-on .payoff__txt,
.payoff .payoff__craft.is-on p { opacity: 1; }
.payoff.is-on .payoff__lbl::after, .payoff.is-on .payoff__h, .payoff.is-on .payoff__lead,
.payoff__stat.is-on .payoff__bar i, .payoff__stat.is-on .payoff__txt,
.payoff .payoff__craft.is-on p, .payoff .payoff__craft.is-on::before { transform: none; }
.payoff__stat.is-on .payoff__reel { transform: translateY(calc(-1em * var(--last, 0))); }