Add /how-pay-works pay-flow diagram page

Visual explainer of the two income streams: entry rewards you keep, and
the depth-matched upgrade ladder (each layer pays you once, at the one
level matching its depth) as an SVG flow diagram. Route + CSS added;
linked from training body and all footers. Educational, on-chain-factual
framing with disclaimer link.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-08-15 10:06:36 -05:00
parent 7b33e28d0c
commit 1929a928d8
8 changed files with 112 additions and 34 deletions
+10
View File
@@ -143,3 +143,13 @@ a.brand{text-decoration:none;color:inherit}
.team-stat .num.ok{color:var(--ok)}
.team-stat small{display:block;color:var(--muted);margin-top:9px;font-size:13px;line-height:1.45}
@media(max-width:720px){.team-stats{grid-template-columns:1fr 1fr}}
/* How-you-get-paid diagram page */
.pay-entry{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px 0}
.pay-node{background:#0d2236;border:1px solid #2a4a66;border-radius:14px;padding:16px 20px;text-align:center;font-weight:800;line-height:1.3}
.pay-you{border-color:var(--gold);color:var(--gold)}
.pay-join{color:var(--teal);border-color:rgba(78,214,203,.4)}
.pay-arrow-up{display:flex;flex-direction:column;align-items:center;color:var(--ok);font-weight:900;font-size:22px;line-height:1}
.pay-arrow-up span{font-size:13px;margin-bottom:2px;white-space:nowrap}
.pay-diagram-wrap{overflow-x:auto;margin-top:8px}
.pay-diagram{width:100%;min-width:640px;height:auto;display:block}