/* ============================================================================
   Payouts / Rewards — hero band.  Figma 706:228484 (1512 x 890), inside the
   hero group 706:228482 (946 tall = 56px announcement bar + this).
   Every value read from the node JSON via tools/figma/fx.py. Do not hand-tune.

   Declared deviations (see PAYOUTS-V2-SPEC.md §5):
   - Ellipse 473 (706:228485) carries LAYER_BLUR 258.2 and a BACKGROUND_BLUR.
     The backdrop blur is dropped; Chrome renders backdrop-filter on a blended
     element as an opaque frosted plate, nothing like Figma's BACKGROUND_BLUR.
   - The frame carries FOUR opaque IMAGE fills at 100%/NORMAL. fills[3]
     (a33c422f…) is topmost and fully covers the other three, so only it ships.
   - The second CTA 706:228511 is visible:false and is NOT built.
   ========================================================================= */

.po2-hero { position: relative; height: 890px; overflow: hidden; isolation: isolate; }

/* frame fill — image a33c422f…, scaleMode FILL */
.po2-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}

/* 706:228485 Ellipse 473 — x -776, y 117, 1693x956, #051F1D */
.po2-hero__glow {
  position: absolute; left: 50%; margin-left: -1532px; top: 117px;
  width: 1693px; height: 956px; border-radius: 50%;
  background: var(--af-hero-glow, #051F1D);
  filter: blur(258.2px); mix-blend-mode: hard-light;
  pointer-events: none; z-index: 1;
}

/* 706:228486 Overlay — 1512x900 at y 0, linear 89.8deg. Full-bleed BACKGROUND,
   so left/right 0 — not the fixed 1512 stage. */
.po2-hero__overlay {
  position: absolute; left: 0; right: 0; top: 0; height: 900px;
  background: linear-gradient(89.8deg,
    rgba(5,63,59,0.62) 0%, rgba(194,213,213,0) 21.36%,
    rgba(194,213,213,0) 83.19%, rgba(5,63,59,0.4) 100%);
  pointer-events: none; z-index: 2;
}

/* navbar layer — .afx-nav positions itself with margin:10px auto 0 */
.po2-hero__inner { position: relative; z-index: 4; }

/* the fixed-1512 STAGE that positions content. Stays CENTRED above 1512 —
   widening it to full-bleed left-aligns the whole composition. */
.po2-hero__stage {
  position: absolute; left: 50%; margin-left: -756px; top: 0;
  width: 1512px; height: 890px; z-index: 3;
}

/* ---- 706:228502 copy block — x 46, y 187, 1054 wide, column gap 32 -------- */
.po2-hero__copy {
  position: absolute; left: 46px; top: 187px; width: 1054px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
}

/* 706:228503 — plain text eyebrow, not a pill */
.po2-hero__eyebrow {
  margin: 0;
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; color: var(--af-white);
}

/* 706:228504 — SF Pro 510, 110/99, ls -3.3. Two fills: #FFF with a
   160.8deg #F8F8F8 -> #FFFFFF gradient over it. The gradient is what shows. */
.po2-hero__h1 {
  margin: 0; width: 1054px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 110px; line-height: 99px; letter-spacing: -3.3px;
  color: var(--af-white);
  background: linear-gradient(160.8deg, #F8F8F8 0%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* ink guard. background-clip:text paints the gradient only inside this
     element's border box, so the descender that hangs below the last line
     box gets no paint at all and is sliced off flat. Push the paint box
     down and take the same space straight back, so the glyphs are whole
     and nothing below this element moves. */
  padding-bottom: .2em; margin-bottom: -.2em;
}

/* 706:228505 — DM Sans 500, 18/27, 480 wide, node opacity .8 */
.po2-hero__lead {
  margin: 0; width: 480px;
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px;
  color: rgba(255,255,255,0.8);
}

/* 706:228507 lime CTA — 212x49, r28, pad 14/20, gap 8,
   1.5px INSIDE gradient stroke = --af-card-g */
.po2-hero__cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 49px; padding: 14px 20px; border-radius: 28px;
  background: var(--af-lime);
  color: var(--af-ink-teal);          /* never inherit link colour onto lime */
  text-decoration: none;
  font-family: var(--font-ui); font-weight: var(--w-semi);
  font-size: 16px; line-height: 20.83px; letter-spacing: -0.48px;
  text-transform: capitalize;         /* Figma textCase: TITLE */
  white-space: nowrap;
}
.po2-hero__cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--af-card-g);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
}
.po2-hero__cta img { display: block; width: 20px; height: 20px; margin: 0 -2px; }

/* ---- 706:228487 / 492 / 497 stat columns — y 781, x 46 / 534 / 1022 ------- */
.po2-hero__stats {
  position: absolute; left: 46px; top: 781px; width: 1425px;
  display: flex; gap: 39px;           /* 534 - 46 - 449 = 39 */
}
.po2-hero__stat {
  width: 449px; display: flex; flex-direction: column; align-items: flex-start; gap: 17px;
}
/* Vector 3168 — a 436-wide 1px rule at 25% white, sitting above each column */
.po2-hero__stat::before {
  content: ""; display: block; width: 436px; height: 1px;
  margin-bottom: -1px;                /* Vector 3168 is a LINE: h 0, 1px stroke.
                                         it draws but takes no space, so the
                                         column stays 90 tall, not 91. */
  background: rgba(255,255,255,0.25);
}
.po2-hero__stat-body { display: flex; flex-direction: column; gap: 4px; }
.po2-hero__stat-label {
  margin: 0; font-family: var(--font-alt); font-weight: var(--w-regular);
  font-size: 14px; line-height: 21px; color: rgba(255,255,255,0.8);
}
.po2-hero__stat-value {
  margin: 0; font-family: var(--font-alt); font-weight: var(--w-semi);
  font-size: 32px; line-height: 48px; color: var(--af-white);
}

/* ---- mobile — Figma 706:228832 (393 x 856) ------------------------------- */
@media (max-width: 900px) {
  .po2-hero { height: 800px; }        /* 856 frame - 56 bar */
  .po2-hero__stage {
    left: 0; margin-left: 0; width: 100%; height: 800px;
  }
  .po2-hero__overlay { height: 800px; }
  /* 706:228835 Ellipse 473 — x 0, y 90 within the 800, 1311x740 */
  .po2-hero__glow {
    left: 50%; margin-left: -655px; top: 90px; width: 1311px; height: 740px;
    filter: blur(160px);
  }
  /* 706:228872 — x 24, y 132 (188 abs - 56 bar), 345 wide, 509 tall.
     Inner gaps: eyebrow->h1 16 (706:228873), h1 block -> lead 24, lead -> CTA 27 */
  .po2-hero__copy {
    left: 24px; right: 24px; top: 132px; width: auto; max-width: 345px; gap: 24px;
  }
  /* 706:228875 — 510 64/57.6, ls -1.92 */
  .po2-hero__h1 {
    width: 100%; font-size: 64px; line-height: 57.6px; letter-spacing: -1.92px;
  }
  /* 706:228876 — SF Pro on mobile, not DM Sans. 510 18/27, ls -0.36 */
  .po2-hero__lead {
    width: 100%; font-family: var(--font-sans);
    font-size: 18px; line-height: 27px; letter-spacing: -0.36px;
  }
  /* 706:228877 — full-width 345x57 button */
  .po2-hero__cta { width: 100%; height: 57px; padding: 14px 20px; }
  /* 706:228856 — x 24, y 713 (769 abs - 56), three 107-wide columns, gap 12 */
  .po2-hero__stats {
    left: 24px; right: 24px; top: 713px; width: auto; gap: 12px;
  }
  .po2-hero__stat { width: auto; flex: 1; gap: 12px; }
  .po2-hero__stat::before { width: 100%; }
  /* 706:228860 / 706:228861 — 400 14/21 and 600 20/30 */
  .po2-hero__stat-value { font-size: 20px; line-height: 30px; }
}