/* ============================================================================
   Payouts / Rewards — closing band, "Get Paid Fast. Trade With Confidence."
   Figma 706:228701 (1512 x 1668).

   The band is 1668 tall ONLY because 706:228721 (1488 x 874 at y 794) is the
   site footer drawn inside it. The footer is shared furniture, so this band
   stops at 794 and the page splices fragments/footer.html into the marker
   below. Honouring 1668 here AND appending the footer is what left a 555px
   hole on the home page.

   Declared deviation: Ellipse 473 (706:228703) drops its BACKGROUND_BLUR for
   the same reason as the hero — see PAYOUTS-V2-SPEC.md §5.
   Not built (visible:false): 706:228720.
   ========================================================================= */

.po2-close {
  position: relative; height: 794px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #303030 0%, #151515 100%);
}

/* 706:228702 image 1167 — full-bleed BACKGROUND, x 0, y 0.7, 1512x851 */
.po2-close__bg {
  position: absolute; left: 0; right: 0; top: 0.7px; height: 851px;
  width: auto; min-width: 1512px;
  object-fit: cover; object-position: center top; z-index: 0;
}
/* 706:228705 -> 706:228706 "light" group, opacity .3 */
.po2-close__light {
  position: absolute; left: 50%; margin-left: -882px; top: -351.3px;
  width: 1764.3px; height: 1464.1px; opacity: 0.3; z-index: 1;
  pointer-events: none; user-select: none;
}
/* 706:228703 Ellipse 473 — x 27, y -124.3, 1693x956, #051F1D */
.po2-close__glow {
  position: absolute; left: 50%; margin-left: -729px; top: -124.3px;
  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: 2;
}
/* 706:228704 — the soft black bar under the chips, x 388, y 724.7, 737x41 */
.po2-close__shade {
  position: absolute; left: 50%; margin-left: -368px; top: 724.7px;
  width: 737px; height: 41px; background: #000; filter: blur(37.3px);
  pointer-events: none; z-index: 2;
}

/* the fixed-1512 STAGE that positions content — CENTRED */
.po2-close__stage {
  position: absolute; left: 50%; margin-left: -756px; top: 0;
  width: 1512px; height: 794px; z-index: 3;
}

/* ---- 706:228803 — x 377, y 160, 759x384, column gap 32 ----------------- */
.po2-close__head {
  position: absolute; left: 377px; top: 160px; width: 759px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.po2-close__headinner {
  display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%;
}
/* 706:228805 — pill 212x33, r57, pad 6/14, gap 7, backdrop-blur 8.35 */
.po2-close__eyebrow {
  margin: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 57px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8.35px); -webkit-backdrop-filter: blur(8.35px);
  font-family: var(--font-alt); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -0.42px; color: var(--af-white);
}
.po2-close__eyebrow img { display: block; width: 16px; height: 16px; }

/* 706:228809 / 706:228810 — 510 80/80, ls -2.4, centred.
   Line 1 carries a 162.2deg #F8F8F8 -> #636363 gradient over a #3F4547 ->
   #EDEDED base; the top paint is the one that shows. Line 2 is flat white. */
.po2-close__h2 {
  margin: 0; width: 100%; text-align: center;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px; color: var(--af-white);
}
.po2-close__h2 span { display: block; }
.po2-close__h2 .po2-grad {
  background: linear-gradient(162.2deg, #F8F8F8 0%, #636363 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:228811 — 510 16/21.12, ls -0.32, 480 wide, node opacity .8 */
.po2-close__lead {
  margin: 0; width: 480px; text-align: center;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 21.12px; letter-spacing: -0.32px;
  color: rgba(255,255,255,0.8);
}
/* 706:228813 lime CTA — 219x48, r28, pad 14/24/14/20, gap 8 */
.po2-close__cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 48px; padding: 14px 20px 14px 24px; border-radius: 28px;
  background: var(--af-lime); color: var(--af-ink-teal); text-decoration: none;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 19.09px; letter-spacing: -0.48px;
  text-transform: capitalize; white-space: nowrap;
}
.po2-close__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-close__cta img { display: block; width: 20px; height: 20px; margin: 0 -2px; }

/* ---- 706:228817 chips row — x 490, y 738, 532x16, gap 16 --------------- */
.po2-close__chips {
  position: absolute; left: 490px; top: 738px; width: 532px;
  display: flex; align-items: center; gap: 16px;
}
.po2-close__chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; color: var(--af-white);
  white-space: nowrap;
}
.po2-close__chip img { display: block; width: 16px; height: 16px; }

/* ---- footer marker — 706:228721 sits at y 794, i.e. immediately after --- */
.po2-close__footer { position: relative; z-index: 1; }

/* ---- mobile — Figma 706:229014 (393 x 2596, footer included) ------------
        head 706:229032 at y 100: 394 wide, padding 0 24, column gap 24 —
        706:229033 (346x201, gap 12) then the lead (346x84) then the CTA
        706:229041 (294x56). Everything CENTRED. Chips 706:229129 stack at
        y 655 (179x80, centred). Band content = 775. ---------------------- */
@media (max-width: 900px) {
  .po2-close { height: auto; }
  .po2-close__stage {
    position: static; left: auto; margin-left: 0; width: 100%; height: 775px;
    padding-top: 100px;
  }
  .po2-close__bg { height: 779px; min-width: 0; width: 100%; top: -13px; }
  .po2-close__light { left: -685px; margin-left: 0; top: -351px; width: 1764.3px; height: 1464.1px; }
  .po2-close__glow {
    left: -420px; margin-left: 0; top: -237px;
    width: 1133.4px; height: 1328.4px; filter: blur(180px);
  }
  .po2-close__shade { display: none; }

  .po2-close__head { position: static; width: auto; margin: 0 24px; gap: 24px; }
  .po2-close__headinner { gap: 12px; }
  /* 706:229038 / 706:229039 — 510 52/52, ls -1.56, centred */
  .po2-close__h2 { font-size: 52px; line-height: 52px; letter-spacing: -1.56px; }
  .po2-close__h2 .po2-grad {
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  /* 706:229040 — 346x84 */
  .po2-close__lead { width: 100%; }
  /* 706:229041 — 294x56, padding 18/32 like every other mobile button */
  .po2-close__cta { width: 294px; height: 56px; padding: 18px 32px; }

  /* 706:229129 — the three chips stack, 179 wide, gap 16, centred */
  .po2-close__chips {
    position: static; width: 179px; margin: 66px auto 0;
    flex-direction: column; align-items: flex-start; gap: 16px;
  }
}