/* ============================================================================
   Payouts / Rewards — band 3, "From Profit to Payout" + "Clear Rules."
   Figma file 2N553Cls5WgWmoHrH1EVVv, node 1136:193380 (1512 x 2095).

   This REPLACES the old atlas-po2-steps.css (2380) + atlas-po2-transp.css
   (1139) pair. The copy is word for word the same set QClay signed off, but
   the layout is not: the four steps were a 550-tall vertical stack with
   connecting line art and are now a 2x2 grid of 299-tall cards, and the two
   bands were merged into one 2095 frame. 3519 -> 2095.

   Two sub-bands, stacked flush:
     1136:193489  1512x1036  steps, white -> #EBEDF2
     1136:193581  1512x1059  transparency, #EBEDF2 -> white
   1036 + 1059 = 2095.

   Not built (visible:false): 1136:193381, 1136:193490.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1136:193489 — steps, 1512x1036, padding 100/40/0/40, col, gap 40, CENTER
   ------------------------------------------------------------------------ */
.po3st {
  position: relative; height: 1036px; box-sizing: border-box;
  padding: 100px 40px 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  background: linear-gradient(180deg, #FFFFFF 52.7%, #EBEDF2 92.5%);
}

/* 1136:193495 — 1432x177, col, gap 16, CENTER */
.po3st__head { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 1432px; }

/* 1136:193496 — 148x33, r 57, padding 6/0, gap 7. No horizontal padding in the
   file: the pill hugs its content exactly. */
.po3st__eyebrow {
  display: flex; align-items: center; gap: 7px; margin: 0;
  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: #0D0D0D;
}
.po3st__eyebrow img { display: block; width: 16px; height: 16px; }

/* 1136:193506 — 1432x128, two 64px lines */
.po3st__h2 {
  margin: 0; width: 1432px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 64px; line-height: 64px; letter-spacing: -1.92px;
  text-align: center; color: #0D0D0D;
}
.po3st__h2 span { display: block; }
/* 1136:193507 — 165.4deg #0D0D0D -> #CECECE */
/* 1136:193507 — 114.7deg, solid #0D0D0D to 66%, #CECECE by 95.6%, and the
   paint box is the 535px text run. Painted across the full 1432 block the
   ramp is sampled 34%..66% and the whole line comes out mid-grey, when the
   frame keeps "From Profit to" pure black and fades only "Payout". */
.po3st__h2 .po3st__grad {
  display: inline-block;
  background: linear-gradient(114.7deg, #0D0D0D 65.3%, #CECECE 93.2%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 1136:193509 — 1432x623, col, gap 25 */
.po3st__grid { position: relative; width: 1432px; display: flex; flex-direction: column; gap: 25px; }
/* 1136:193510 / 193533 — 1432x299, row, gap 25 */
.po3st__row { display: flex; gap: 25px; }

/* 1136:193511 — 703.5x299, r 32, padding 24, row, gap 24 */
.po3st__card {
  position: relative; box-sizing: border-box;
  width: 703.5px; height: 299px; flex: none;
  padding: 24px; border-radius: 32px; overflow: hidden;
  display: flex; gap: 24px;
  background: #FFFFFF linear-gradient(0deg, rgba(235,237,242,.5) 30%, rgba(142,188,185,.32) 100%);
}
/* 1136:193513 — 315.8x251, col, SPACE_BETWEEN */
.po3st__copy { width: 315.8px; flex: none; display: flex; flex-direction: column; justify-content: space-between; }
/* 1136:193514 — 315.8x84 (116 on step 4, whose title runs to two lines), gap 16 */
.po3st__ctop { display: flex; flex-direction: column; gap: 16px; }

/* 1136:193516 — 91x36, r 57, padding 8/12, gap 4, teal wash at node opacity .12 */
.po3st__pill {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  height: 36px; padding: 8px 12px; border-radius: 57px; margin: 0;
  background: linear-gradient(74deg, rgba(5,63,59,.12) 0%, rgba(5,63,59,.095) 59.8%, rgba(255,255,255,.12) 100%);
  -webkit-backdrop-filter: blur(17px); backdrop-filter: blur(17px);
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 16px; letter-spacing: -.96px;
  color: rgba(5,63,59,.8); white-space: nowrap;
}
.po3st__pill img { display: block; width: 20px; height: 20px; }

/* 1136:193519 */
.po3st__ctitle {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 24px; line-height: 31.7px; letter-spacing: -.72px; color: #0D0D0D;
}
/* 1136:193520 */
.po3st__cbody {
  margin: 0; width: 315.8px;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 20px; line-height: 26.4px; letter-spacing: -.6px; color: #3F4547;
}

/* 1136:193521 — 315.8x251 art slot. The illustrations overhang the slot by
   10px at the top, exactly as drawn; the card clips them. */
.po3st__art { position: relative; width: 315.8px; flex: none; }
.po3st__art img { position: absolute; display: block; }
.po3st__art--1 img { left: 22.6px; top: -10px; width: 272px; height: 272px; }
.po3st__art--2 img { left: 23px;   top: -10px; width: 270px; height: 270px; }
.po3st__art--3 img { left: 32.2px; top: 0;     width: 252px; height: 252px; }
.po3st__art--4 img { left: 22.7px; top: -10px; width: 272px; height: 272px; }

/* 1136:193555 / 193565 — the two guarantee pills floating over step 4.
   "24 hours" and "$1,000 if late" are the public form of a commitment that
   carries a $1,000 penalty. Verbatim, never softened. */
.po3st__gpill {
  position: absolute; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 48px; padding: 8px 16px; border-radius: 58px; margin: 0;
  background: var(--w-10);
  box-shadow: 6px 12px 18px 0 rgba(0,0,0,.12), inset 3px -4px 5px 0 rgba(124,177,172,.32);
  -webkit-backdrop-filter: blur(17px); backdrop-filter: blur(17px);
  font-family: var(--font-display); font-weight: var(--w-heavy);
  font-size: 24px; line-height: 32px; letter-spacing: -.72px;
  white-space: nowrap;
}
/* 1136:193564 / 193577 — the ink is a gradient #263F42 -> #6D9E9B, which is why
   "if late" reads green in the frame. It goes on the text span, not the pill:
   background-clip:text on the pill itself would erase the glass fill. */
.po3st__gpill span {
  background: linear-gradient(158deg, #263F42 0%, #6D9E9B 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.po3st__gpill img { display: block; width: 28px; height: 28px; flex: none; }
.po3st__gpill--a { left: 363.5px; top: 24px;  width: 164px; }
.po3st__gpill--b { left: 469.5px; top: 227px; width: 210px; }

/* 1136:193578 / 193579 — 60x60 connectors at x 726 (i.e. dead centre of the
   1432 grid), y 119 and 443 inside the grid */
.po3st__link {
  position: absolute; left: 686px; width: 60px; height: 60px; border-radius: 120px;
  display: flex; align-items: center; justify-content: center;
  background: var(--af-beige); box-shadow: 0 8px 12px 0 rgba(0,0,0,.08);
  z-index: 2; pointer-events: none;
}
.po3st__link img { display: block; width: 28px; height: 28px; }
.po3st__link--a { top: 119px; }
.po3st__link--b { top: 443px; }

/* 1136:193580 — 241x56, r 100, padding 18/32, gap 8, lime.
   Lime takes ink #001D21. Never inherit a link colour onto one. */
.po3st__cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 241px; height: 56px; box-sizing: border-box; padding: 18px 32px;
  border-radius: 100px; background: var(--af-lime); color: var(--af-ink-teal);
  text-decoration: none; box-shadow: 2px 14px 24px 0 rgba(38,63,66,.12);
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 19.1px; letter-spacing: -.48px; white-space: nowrap;
}
.po3st__cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(162deg, rgba(5,63,59,.6) 0%, rgba(5,63,59,.162) 51.4%, rgba(5,63,59,.6) 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;
}
.po3st__cta img { display: block; width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
   1136:193581 — transparency, 1512x1059, #EBEDF2 -> white, clipped
   ------------------------------------------------------------------------ */
.po3tr {
  position: relative; height: 1059px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #EBEDF2 0%, #FFFFFF 31.53%);
}
/* the fixed-1512 stage that positions content — CENTRED */
.po3tr__stage {
  position: absolute; left: 50%; margin-left: -756px; top: 0;
  width: 1512px; height: 1059px; z-index: 1;
}
/* 1136:193588 — the swoosh, 1538.9x1152.8 at x -328, y -186.1, opacity .6 */
.po3tr__swoosh {
  position: absolute; left: 50%; margin-left: -1084px; top: -186.1px;
  width: 1538.9px; height: 1152.8px; opacity: .6; z-index: 0;
  pointer-events: none; user-select: none;
}
/* 1136:193587 — 1373.9x1029.2 at x -269, y -89.2, radial #737373 -> 0, op .8 */
.po3tr__wash {
  position: absolute; left: 50%; margin-left: -1025px; top: -89.2px;
  width: 1373.9px; height: 1029.2px; opacity: .8; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(115,115,115,.35) 0%, rgba(217,217,217,0) 100%);
}

/* 1136:193589 — 1026x289 at x 243, y 120, col, gap 32, CENTER */
.po3tr__head {
  position: absolute; left: 243px; top: 120px; width: 1026px;
  display: flex; flex-direction: column; align-items: center; gap: 32px; z-index: 2;
}
.po3tr__headtop { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* 1136:193591 — 170x33, r 57, padding 6/14, gap 7 */
.po3tr__eyebrow {
  display: flex; align-items: center; gap: 7px; margin: 0;
  height: 33px; padding: 6px 14px; border-radius: 57px;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: rgba(63,69,71,.6);
}
/* 1136:193600 characterStyleOverrides — chars 0-11 are #0D0D0D. Painting the
   whole string at 60% of #3F4547 also failed contrast at 3.12:1. */
.po3tr__eyebrow b { font-weight: inherit; color: #0D0D0D; }
.po3tr__eyebrow img { display: block; width: 16px; height: 16px; }
/* 1136:193601 — 1026x160, two 80px lines */
.po3tr__h2 {
  margin: 0; width: 1026px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  text-align: center; color: #0D0D0D;
}
.po3tr__h2 span { display: block; }
/* 1136:193602 — "Clear Rules." is a 376px run at 129.3deg, a different handle
   from the steps heading. Reusing the steps values kept it black until the
   final "s". */
.po3tr__h2 .po3st__grad {
  display: inline-block;
  background: linear-gradient(129.3deg, #0D0D0D 58.7%, #CECECE 93.2%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 1136:193604 — 408x48 */
.po3tr__sub {
  margin: 0; width: 408px;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px;
  text-align: center; color: rgba(13,13,13,.8);
}

/* 1136:193605 — 1073x480 at x 220, y 459, row, gap 16 */
.po3tr__cards { position: absolute; left: 220px; top: 459px; width: 1073px; display: flex; gap: 16px; z-index: 2; }
/* 1136:193607 / 193619 — 528.5x480, r 32, padding 24, clipped */
.po3tr__card {
  position: relative; box-sizing: border-box;
  width: 528.5px; height: 480px; flex: none;
  padding: 24px; border-radius: 32px; overflow: hidden;
  background: linear-gradient(180deg, #7CB1AC 0%, #053F3B 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.po3tr__art { position: absolute; display: block; pointer-events: none; user-select: none; }
/* image 1168 is a light-ribbon plate on black. REST does not report blend modes
   (HANDOFF-COMMON §2), and dropped in normally it turns both cards into black
   boxes with a neon swoosh. It is a SCREEN layer: the ribbons add light and the
   teal gradient reads through, which is what the frame renders. */
.po3tr__glow { mix-blend-mode: screen; }
/* Figma y is SECTION-local; these images sit inside a card that starts at
   section y 459, so card-local top = drawn y - 459. Reading 96 straight in put
   both ribbon plates 459px too low and left the card tops flat. */
/* 1136:193609 — 900.8x899.8 at x -32 (card-local -252), section y 96 */
.po3tr__card--a .po3tr__glow { left: -252px; top: -363px; width: 900.8px; height: 899.8px; }
/* 1136:193614 — 340x340 at x 314 (card-local 94), y 479 */
.po3tr__card--a .po3tr__hero { left: 94px; top: 20px; width: 340px; height: 340px; }
/* 1136:193621 — 618x676 at x 762 (card-local -2.5), y 96, opacity .83 */
.po3tr__card--b .po3tr__glow { left: -2.5px; top: -363px; width: 618px; height: 676px; }
/* 1136:193623 — 621.8x280 at x 681 (card-local -83.5), y 487 */
.po3tr__card--b .po3tr__hero { left: -83.5px; top: 28px; width: 621.8px; height: 280px; }

/* 1136:193615 / 193630 — 480.5x155 at y 760 (card-local 301), col, gap 16 */
.po3tr__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; width: 480.5px; }
.po3tr__ctitle {
  position: relative; margin: 0;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 32px; line-height: 38.4px; letter-spacing: -.96px; color: var(--af-white);
}
.po3tr__ctitle span { position: relative; display: block; }
/* 1136:193617 / 193632 characterStyleOverrides — "Environment" and "Rewards"
   are #E1FFA0. In white the glass chip behind them reads as a stray grey box. */
.po3tr__ctitle span.po3tr__mark { color: var(--af-lime); }
/* 1136:193616 / 193631 — the pale plate behind the second line */
.po3tr__ctitle span.po3tr__mark::before {
  content: ""; position: absolute; z-index: -1;
  left: -7px; top: -1px; width: var(--po3tr-mark, 184.4px); height: 38.9px;
  border-radius: 12px; background: rgba(255,255,255,.09);
}
.po3tr__cbody {
  margin: 0; width: 420px;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 21.1px; letter-spacing: -.48px;
  color: rgba(255,255,255,.9);
}

/* ---------------------------------------------------------------------------
   Below the design width — derived, not drawn. See PAYOUTS-V3-SPEC.md §3.
   ------------------------------------------------------------------------ */
@media (max-width: 1512px) {
  .po3st { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 1180px) {
  .po3st { height: auto; padding: 72px 20px 80px; }
  .po3st__head, .po3st__h2, .po3st__grid { width: 100%; max-width: 1072px; }
  .po3st__h2 { font-size: clamp(32px, 5vw, 64px); line-height: 1.05; letter-spacing: -.03em; }
  .po3st__row { flex-direction: column; gap: 20px; }
  .po3st__card { width: 100%; height: auto; min-height: 299px; }
  .po3st__link { display: none; }
  .po3st__copy, .po3st__cbody { width: auto; flex: 1 1 auto; min-width: 0; }
  .po3st__art { width: 240px; }
  .po3st__gpill--a { left: auto; right: 12px; top: 16px; }
  .po3st__gpill--b { left: auto; right: 12px; top: 84px; }

  .po3tr { height: auto; padding: 72px 20px 80px; }
  .po3tr__stage { position: static; left: auto; margin: 0 auto; width: min(100%, 1073px); height: auto; }
  .po3tr__swoosh, .po3tr__wash { display: none; }
  .po3tr__head { position: static; width: 100%; margin: 0 auto 48px; }
  .po3tr__h2, .po3tr__sub { width: 100%; }
  .po3tr__h2 { font-size: clamp(34px, 5.6vw, 80px); line-height: 1.04; letter-spacing: -.03em; }
  .po3tr__cards { position: static; width: 100%; flex-direction: column; }
  .po3tr__card { width: 100%; }
  .po3tr__copy, .po3tr__cbody { width: auto; }
}
@media (max-width: 720px) {
  .po3st__card { flex-direction: column-reverse; padding: 20px; }
  .po3st__art { width: 100%; height: 200px; }
  .po3st__art img { left: 50% !important; margin-left: -110px; top: 0 !important; width: 220px !important; height: 220px !important; }
  .po3st__gpill { position: static; width: auto !important; font-size: 18px; height: 40px; }
  .po3st__cbody { font-size: 17px; line-height: 24px; }
  .po3tr__ctitle { font-size: 26px; line-height: 32px; }
  .po3tr__ctitle span.po3tr__mark::before { display: none; }
}

/* the <br class="po3-br"> 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; } }


/* interaction — tokens only, transform and opacity only, see web-motion */
.po3st__cta, .po3st__card { transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .po3st__cta:hover { transform: translateY(-1px); }
  .po3st__card:hover { transform: translateY(-2px); }
}
.po3st__cta:active { transform: scale(.99); }
.po3st__cta:focus-visible { outline: 2px solid #053F3B; outline-offset: 3px; }