/* ============================================================================ Payouts / Rewards — "See Exactly How Payouts Work". Figma file 2N553Cls5WgWmoHrH1EVVv, the top of band 1136:193634 (1512x2434). That band holds THREE things: this section, the closing CTA, and the shared footer instance 1136:193681 (1488x803 at y 1631). So: 2434 - 803 footer = 1631 of real band content 1631 - 794 closing band (already built, atlas-po2-close.css) = 837 This section is therefore 837 tall. Honouring 2434 here and also appending the footer is what left a 555px hole on the home page. Not built (visible:false): 1136:234330, 1136:234331, 1136:234397, 1136:234409. ========================================================================= */ .po3pr { position: relative; height: 837px; overflow: hidden; isolation: isolate; /* the parent band runs #303030 -> #0F0F0F over its first 27% (657px), so across an 837px section that stop lands at 78.5% */ /* the parent band's gradient handle spans 43.89% of its 2434, and #0F0F0F lands 27% along that axis = 288px, which is 34.46% of this 837 section. 78.5% came from reading the stop as a fraction of the band. */ background: linear-gradient(180deg, #303030 0%, #0F0F0F 34.46%); } /* 1136:193683 — 1512x619 at y -35, 179deg wash */ .po3pr__wash { position: absolute; left: 0; right: 0; top: -35px; height: 619px; width: auto; min-width: 1512px; z-index: 0; pointer-events: none; background: linear-gradient(179deg, rgba(217,217,217,0) 14.1%, rgba(115,115,115,.5) 59.3%, rgba(217,217,217,0) 87.1%, rgba(217,217,217,0) 100%); } /* 1136:193685 "dots" — 1642x1370 at x -98, y -144. Same shared dot-field export the home and stories bands use; do not re-export it per page. */ .po3pr__dots { position: absolute; left: 50%; margin-left: -854px; top: -144px; width: 1642px; height: 1370px; z-index: 0; pointer-events: none; background: url('/assets/figma/st-dots.webp') no-repeat 0 0 / 1642px 1370px; } /* 1136:234345 image 1175 — 651x1157 at x 861, y -96. Teal light streaks bleeding in from the right; decorative, exported whole. */ .po3pr__streaks { position: absolute; left: 50%; margin-left: 105px; top: -96px; width: 651px; height: 1157px; z-index: 1; pointer-events: none; user-select: none; /* light streaks on a black plate. REST does not report blend modes (HANDOFF-COMMON §2); dropped in normally this is a hard black rectangle with a neon edge down the middle of the band. It is a SCREEN layer. */ mix-blend-mode: screen; } /* 1136:234346 — 3404x221 at x -616, y 692, #0F0F0F. It masks the foot of the streaks. Sits on #0F0F0F either way, so it reads as nothing on its own. */ .po3pr__mask { position: absolute; left: 50%; margin-left: -1702px; top: 692px; width: 3404px; height: 221px; background: #0F0F0F; z-index: 2; pointer-events: none; } /* the fixed-1512 stage that positions content — CENTRED */ .po3pr__stage { position: absolute; left: 50%; margin-left: -756px; top: 0; width: 1512px; height: 837px; z-index: 3; } /* --------------------------------------------------------------------------- 1136:234347 — copy column, 491x617 at x 220, y 126, col, gap 60 ------------------------------------------------------------------------ */ .po3pr__copy { position: absolute; left: 220px; top: 126px; width: 491px; display: flex; flex-direction: column; gap: 60px; } /* 1136:234349 — 491x281, col, gap 32 */ .po3pr__head { display: flex; flex-direction: column; gap: 32px; } .po3pr__headtop { display: flex; flex-direction: column; gap: 16px; } /* 1136:234351 — 122x33, r 57, padding 6/0, gap 7 */ .po3pr__eyebrow { display: flex; align-items: center; gap: 7px; margin: 0; align-self: flex-start; height: 33px; padding: 6px 0; border-radius: 57px; font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-white); } .po3pr__eyebrow img { display: block; width: 16px; height: 16px; } /* 1136:234362 — 491x128, two 64px lines, left aligned */ .po3pr__h2 { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 64px; line-height: 64px; letter-spacing: -1.92px; color: var(--af-white); } .po3pr__h2 span { display: block; white-space: nowrap; } /* 1136:234363 — 162.4deg #F8F8F8 -> #636363 */ /* 1136:234363 — 114.7deg over the 301px text run, not 162deg over the block */ .po3pr__h2 .po3pr__grad { display: inline-block; background: linear-gradient(123.6deg, #F8F8F8 44.9%, #636363 93.2%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 1136:234365 — 479x72 */ .po3pr__lead { margin: 0; width: 479px; font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 16px; line-height: 24px; letter-spacing: -.48px; color: var(--w-80); } /* 1136:234366 — 360x276, col, gap 16 */ .po3pr__steps { margin: 0; padding: 0; list-style: none; width: 360px; display: flex; flex-direction: column; gap: 16px; } /* 1136:234367 — 360x60, row, gap 8 */ .po3pr__step { display: flex; gap: 8px; } .po3pr__n { width: 40px; flex: none; margin: 0; font-family: var(--font-display); font-weight: var(--w-semi); font-size: 16px; line-height: 20px; letter-spacing: -.48px; color: var(--af-white); } /* 1136:234368 — the first number is 36px and teal; the rest are 16px white */ .po3pr__step--lead .po3pr__n { font-size: 36px; line-height: 40px; letter-spacing: -1.08px; color: var(--af-teal); } .po3pr__sbody { display: flex; flex-direction: column; gap: 4px; width: 312px; } .po3pr__stitle { margin: 0; font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 14px; line-height: 20px; letter-spacing: -.42px; color: var(--w-60); } .po3pr__step--lead .po3pr__stitle { font-size: 16px; letter-spacing: -.48px; color: var(--af-white); } .po3pr__stext { margin: 0; font-family: var(--font-sans); font-weight: var(--w-regular); font-size: 12px; line-height: 16px; letter-spacing: -.36px; color: var(--w-60); } .po3pr__step--lead .po3pr__stext { font-size: 14px; line-height: 18px; letter-spacing: -.42px; } /* --------------------------------------------------------------------------- 1136:234387 — the dashboard card, 533x557 at x 759, y 156, r 32, #1F1F1F -> #151515 under a 2px inside gradient hairline ------------------------------------------------------------------------ */ .po3pr__shot { position: absolute; left: 759px; top: 156px; width: 533px; height: 557px; box-sizing: border-box; padding: 12px; border-radius: 32px; overflow: hidden; background: linear-gradient(180deg, #1F1F1F 0%, #151515 100%); } .po3pr__shot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient(205deg, rgba(255,255,255,.13) 0%, rgba(202,202,202,0) 51.4%, rgba(153,153,153,.13) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 3; } /* 1136:234391 — the blurred glow behind the screen, 629x314.5 at x -108.5, y -49 */ .po3pr__shotglow { position: absolute; left: -108.5px; top: -49px; width: 629px; height: 314.5px; z-index: 0; pointer-events: none; user-select: none; } /* 1136:234473 "bg" — the browser chrome the screenshot sits in. The drawn frame is 741.7 wide and overhangs the 533 card on the right, exactly as in the file. */ .po3pr__frame { position: absolute; left: 48px; top: 48px; width: 741.7px; height: 810.4px; border-radius: 17.83px 0 0 17.83px; z-index: 1; overflow: hidden; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 .89px rgba(255,255,255,.10); } /* 1136:234477 "btn" — the three window dots, 41x8.9 at x 25, y 25 inside it */ .po3pr__dots3 { position: absolute; left: 25px; top: 25px; display: flex; gap: 7.13px; opacity: .2; z-index: 2; } .po3pr__dots3 i { display: block; width: 8.9px; height: 8.9px; border-radius: 50%; background: #FFF; } .po3pr__dots3 i:nth-child(2) { background: rgba(255,255,255,.5); } .po3pr__dots3 i:nth-child(3) { background: rgba(255,255,255,.2); } /* 1136:234476 — the screenshot itself, 1115.2x635 at x 15.4, y 46.6 inside the frame. DECLARED DEVIATION: the file's screenshot is a generic crypto-exchange screen — Buy Crypto / Spot / Futures over a BTC/USDT order book. The copy beside it says "the exact interface you'll use to request and manage every payout", which that image is not. It carries the real Atlas payouts dashboard instead, the same asset /how-it-works already ships. Lucas's call, 6 Aug 2026. See PAYOUTS-V3-SPEC.md §5. */ .po3pr__img { position: absolute; left: 15.4px; top: 46.6px; width: 1115.2px; height: 635px; object-fit: cover; object-position: left top; z-index: 1; } /* 1136:234492 — 533x148 at y 409, fades the screen out into the card */ .po3pr__shotfade { position: absolute; left: 0; bottom: 0; width: 533px; height: 148px; z-index: 2; background: linear-gradient(0deg, #151515 0%, rgba(21,21,21,0) 100%); pointer-events: none; } /* --------------------------------------------------------------------------- Below the design width — derived, not drawn. See PAYOUTS-V3-SPEC.md §3. ------------------------------------------------------------------------ */ @media (max-width: 1180px) { .po3pr { height: auto; padding: 72px 20px 80px; } .po3pr__stage { position: static; left: auto; margin: 0 auto; width: min(100%, 1072px); height: auto; display: flex; flex-direction: column; gap: 48px; } .po3pr__copy, .po3pr__shot { position: static; left: auto; top: auto; } .po3pr__copy { width: 100%; gap: 40px; } .po3pr__h2 { font-size: clamp(32px, 5vw, 64px); line-height: 1.05; letter-spacing: -.03em; } .po3pr__h2 span { white-space: normal; } .po3pr__lead, .po3pr__steps { width: 100%; } .po3pr__sbody { width: auto; flex: 1 1 auto; min-width: 0; } .po3pr__shot { width: 100%; max-width: 533px; } .po3pr__streaks { display: none; } } /* the
breaks reproduce the line endings the frame draws at 1512. Below that width the text should wrap on its own. */ @media (max-width: 1180px) { .po3-br { display: none; } }