/* ============================================================================
   Payouts / Rewards — band 2, "See Who's Leading the Way" + "These payouts".
   Figma file 2N553Cls5WgWmoHrH1EVVv, node 1136:174213 (1512 x 2887).

   Every value below was read out of the node JSON. Do not hand-tune.

   NOT BUILT (visible:false in the file, checked node by node):
     1136:174228  1432x57  promo bar
     1136:174246  1512x81  "As seen on" press strip
     1136:192646  188x49   second table button
     1136:192666  1432x928 the LIGHT variant of the opinions marquee. The dark
                  variant 1136:193021 is the visible one.

   The band is a fixed-1512 STAGE that positions content, so it stays CENTRED
   (left:50%; margin-left:-756px). Only the glow behind it is full-bleed.
   ========================================================================= */

.po3lb {
  position: relative; height: 2887px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #303030 0%, #0F0F0F 43.89%);
}

/* 1136:174214 — the "light" group, 1512x1027 at y 0. Twelve white rectangles
   at 4-32% alpha behind a heavy blur; exported as ONE image rather than
   reconstructed, per HANDOFF-COMMON §3. Full-bleed BACKGROUND. */
.po3lb__glow {
  position: absolute; left: 0; right: 0; top: 0;
  width: auto; min-width: 1512px; height: 1027px;
  object-fit: cover; object-position: center top;
  z-index: 0; pointer-events: none; user-select: none;
}

/* the fixed-1512 stage that positions content — CENTRED */
.po3lb__stage {
  position: absolute; left: 50%; margin-left: -756px; top: 0;
  width: 1512px; height: 2887px; z-index: 1;
}

/* ---------------------------------------------------------------------------
   1136:174302 — leaderboard header, 558x313 at x 477, y 120, col, gap 32
   ------------------------------------------------------------------------ */
.po3lb__head {
  position: absolute; left: 477px; top: 120px; width: 558px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
/* 1136:174303 — 558x241, col, gap 16 */
.po3lb__headtop { display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* 1136:174304 — 133x33, r 57, padding 6/14, gap 7 */
.po3lb__eyebrow {
  display: flex; align-items: center; gap: 7px; margin: 0;
  height: 33px; padding: 6px 14px; border-radius: 57px;
  /* 1136:174304 has fills[0].visible:false AND strokes[0].visible:false — the
     pill shape is switched off in the frame and only the text shows. */
  background: transparent;
  font-family: var(--font-alt); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-white);
}
.po3lb__eyebrow img { display: block; width: 16px; height: 16px; }

/* 1136:174307 — 558x192, two 96px lines, centred */
.po3lb__h2 {
  margin: 0; width: 558px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 96px; line-height: 96px; letter-spacing: -2.88px;
  text-align: center; color: var(--af-white);
}
.po3lb__h2 span { display: block; }
/* 1136:174308 — gradient text, 162.4deg #3F4547 -> #EDEDED over #F8F8F8 -> #636363 */
.po3lb__h2 .po3lb__grad {
  /* 1136:174308 — the paint box is the 421px text run, not the 558px frame, so
     the span must be inline-block or the ramp is sampled across the whole
     block and the glyphs never reach either end colour. Angle and stops are
     this node's own handle reprojected onto CSS's gradient line. */
  display: inline-block;
  background: linear-gradient(125.5deg, #F8F8F8 43.6%, #636363 93.2%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 1136:174309 — "Leading the Way" is 648 wide inside a 558 frame: it overhangs
   by 45px each side. width:auto + nowrap reproduces that without a fixed box. */
.po3lb__h2 .po3lb__wide { white-space: nowrap; }

/* 1136:174310 — 400x40 at x 556 (i.e. 79 inside the header), y 393 */
.po3lb__sub {
  margin: 0; width: 400px;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 20px; letter-spacing: -.48px;
  text-align: center; color: var(--w-80);
}

/* ---------------------------------------------------------------------------
   1136:174311 — board, 1432x997 at x 40, y 473
   ------------------------------------------------------------------------ */

/* 1136:174312 — the three notched podium cards, halftone dot field and the
   three wreath medallions, exported as one 1072x479 image. Rebuilding ~1,600
   dot vectors in CSS is the trap HANDOFF-COMMON §3 exists to prevent. */
.po3lb__podiumart {
  position: absolute; left: 220px; top: 473px;
  width: 1072px; height: 479px; z-index: 1;
  pointer-events: none; user-select: none;
}
/* 1136:192495 — 1072x206 at x 220, y 826. Opaque at the BOTTOM: it sinks the
   feet of the podium cards into the band. */
.po3lb__podiumfade {
  position: absolute; left: 220px; top: 826px; width: 1072px; height: 206px;
  background: linear-gradient(0deg, #161616 0%, #161616 50%, rgba(22,22,22,0) 100%);
  z-index: 2; pointer-events: none;
}

/* 1136:192496 — 1024x310 at x 244, y 622. Absolute per column, because the
   three columns sit at three different heights (0 / 50 / 96). */
.po3lb__top3 {
  position: absolute; left: 244px; top: 622px; width: 1024px; height: 310px;
  margin: 0; padding: 0; list-style: none; z-index: 3;
}
.po3lb__top3 li { position: absolute; display: flex; flex-direction: column; align-items: center; }
/* 1136:192497 — #1, 298x242 at x 363, y 0, gap 40 */
.po3lb__top3 .po3lb-p1 { left: 363px; top: 0; width: 298px; gap: 40px; }
/* 1136:192518 — #2, 299x214 at x 725, y 50, gap 16 */
.po3lb__top3 .po3lb-p2 { left: 725px; top: 50px; width: 299px; gap: 16px; }
/* 1136:192534 — #3, 299x214 at x 0, y 96, gap 16 */
.po3lb__top3 .po3lb-p3 { left: 0; top: 96px; width: 299px; gap: 16px; }

/* 1136:192498 / 192519 / 192535 — 120x120 avatar slots.
   DECLARED DEVIATION: the file fills these with three stock portraits. The
   traders named here are real people whose payouts we publish, so a stock face
   over a real name is a fabrication. They carry the trader's initials instead,
   in the same glass treatment the table monograms use. See PAYOUTS-V3-SPEC.md. */
.po3lb__face {
  display: flex; align-items: center; justify-content: center;
  width: 120px; height: 120px; border-radius: 100px;
  background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 40px; line-height: 40px; letter-spacing: -1.2px; color: var(--af-white);
}
.po3lb-p1 .po3lb__face { border-radius: 96px; }

.po3lb__pname {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 20px; line-height: 30px; letter-spacing: -.6px;
  text-align: center; color: var(--af-white);
}
/* 1136:192499 / 192521 / 192537 — name + pill, gap 12 (#1) / 8 (#2, #3) */
.po3lb__pmeta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.po3lb-p1 .po3lb__pmeta { gap: 12px; }

/* 1136:192501 / 192523 / 192539 — r 58, padding 8/16, gap 6, glass */
.po3lb__ppill {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0;
  height: 40px; padding: 8px 16px; border-radius: 58px;
  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(24px); backdrop-filter: blur(24px);
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 20px; line-height: 24px; letter-spacing: -.6px; color: var(--af-white);
  white-space: nowrap;
}
.po3lb__ppill img { display: block; width: 24px; height: 24px; }
/* 1136:192501 — the winner's pill is lime-tinted and its figure is lime */
.po3lb-p1 .po3lb__ppill { background: rgba(225,255,160,.10); color: var(--af-lime); }

/* ---------------------------------------------------------------------------
   1136:192550 — the table, 1072x494 at x 220, y 976, #222222, r 32, pad 24
   ------------------------------------------------------------------------ */
.po3lb__table {
  position: absolute; left: 220px; top: 976px; width: 1072px;
  padding: 24px; border-radius: 32px; background: var(--af-card);
  display: flex; flex-direction: column; gap: 16px; z-index: 3;
}
/* 1136:192551 — 1024x14, opacity .8, row, gap 40, padding 0/12 */
.po3lb__thead {
  display: flex; align-items: center; gap: 40px; padding: 0 12px; opacity: .8;
  font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: 14px; line-height: 14px; letter-spacing: -.28px; color: var(--af-white);
}
.po3lb__thead span { display: block; }
/* 1136:192552 — rank and user are ONE 728px group with gap 0; the 40px gaps
   are only between that group, the payout cell and the account cell. */
/* .po3lb__thead span{display:block} above is a class+element selector and beats
   a bare .po3lb__cols, which stacked "Rank" over "Trader". Scoped to match. */
.po3lb__thead .po3lb__cols { display: flex; align-items: center; gap: 0; width: 728px; flex: none; }
.po3lb__c-rank { width: 80px; flex: none; }
.po3lb__c-user { width: 648px; flex: none; }
.po3lb__c-amt  { width: 80px;  flex: none; text-align: center; }
.po3lb__c-acct { width: 112px; flex: none; text-align: center; }

/* 1136:192560 — 1024x352, col, gap 8 */
.po3lb__rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* 1136:192589 etc — 1024x64, r 100, padding 12, row, gap 40 */
.po3lb__row {
  display: flex; align-items: center; gap: 40px;
  height: 64px; padding: 12px; border-radius: 100px;
  background: rgba(45,45,45,.99);
  text-decoration: none; color: var(--af-white);
}
/* 1136:192561 — the leading row carries the teal wash and a tighter radius */
.po3lb__row--lead {
  border-radius: 76px;
  background: rgba(45,45,45,.99)
              linear-gradient(173deg, #0B4541 0%, #5D9794 46.6%, #0B4541 100%);
}

/* the rank is a wreath image or a bare numeral, so screen readers get the word */
.po3lb-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* 1136:192563 — rank cell, 80x36, row, gap 12 */
.po3lb__rank { position: relative; width: 80px; flex: none; display: flex; align-items: center; }
/* 1136:192565 — the wreath sits in a 48x48 box that overhangs the 36px slot */
.po3lb__medal { display: block; width: 48px; height: 48px; margin: -6px 0 -6px -6px; }
/* ranks 4+ — 1136:192620 style, plain 36px disc */
.po3lb__num {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 100px;
  background: var(--w-06); box-shadow: inset 0 0 0 1px var(--w-08);
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 16px; letter-spacing: -.32px;
}

/* 1136:192568 — user cell, 648x40, row, gap 12 */
.po3lb__group { display: flex; align-items: center; gap: 0; width: 728px; flex: none; }
.po3lb__user { width: 648px; flex: none; display: flex; align-items: center; gap: 12px; }
/* 1136:192569 — 40x40, r 100, white 0 -> 10% at node opacity .08, 1px inside
   gradient hairline. Flattening that hairline is the fastest way to lose the
   glass look, so it stays a gradient. */
.po3lb__mono {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 100px;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.008) 100%);
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 15.56px; line-height: 15.56px; letter-spacing: -.311px; color: var(--af-white);
}
.po3lb__mono::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 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;
}
/* 1136:192571 */
.po3lb__uname {
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 20px; letter-spacing: -.48px; color: var(--af-white);
}
/* 1136:192572 */
/* 1136:192572 — 80 wide, centred, at row-local 780. Real payouts run wider
   than the comp's "$200.5", so the figure bleeds a few px into the empty 40px
   gutters either side. It is centred on the frame's axis and collides with
   nothing; widening the cell would shift the account pill off the card. */
.po3lb__amt {
  width: 80px; flex: none; text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 18px; line-height: 24px; letter-spacing: 0; color: var(--af-white);
}
/* 1136:192573 — 112x40, r 40, padding 8/24, lime wash at node opacity .16 */
.po3lb__acct {
  width: 112px; flex: none; height: 40px; border-radius: 40px;
  display: flex; align-items: center; justify-content: center; padding: 8px 24px;
  background: linear-gradient(74deg, rgba(225,255,160,.16) 0%,
              rgba(225,255,160,.126) 59.8%, rgba(225,255,160,0) 100%);
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 18px; line-height: 24px; letter-spacing: 0; color: var(--af-lime);
  white-space: nowrap;
}
.po3lb__row--lead .po3lb__acct { background: rgba(225,255,160,.20); }

/* rows 6-9 are folded away behind "View more" */
.po3lb__rows li[hidden] { display: none; }

/* 1136:192643 — 1024x48, r 28, padding 14/16, gap 8, DM Sans 600 */
.po3lb__more {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 1024px; height: 48px; padding: 14px 16px; border-radius: 28px;
  border: 0; cursor: pointer; position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.026) 100%);
  font-family: var(--font-ui); font-weight: 600;
  font-size: 16px; line-height: 20px; letter-spacing: -.48px; color: var(--af-white);
}
.po3lb__more::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.016) 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;
}
.po3lb__more img { display: block; width: 20px; height: 20px; }
.po3lb__more[aria-expanded="true"] img { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------
   1136:192649 — opinions header, 645x209 at x 434, y 1590
   ------------------------------------------------------------------------ */
.po3lb__ohead {
  position: absolute; left: 434px; top: 1590px; width: 645px;
  display: flex; flex-direction: column; align-items: center; gap: 16px; z-index: 3;
}
/* 1136:192663 — 645x160, two 80px lines */
.po3lb__oh2 {
  margin: 0; width: 645px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  text-align: center; color: var(--af-white);
}
.po3lb__oh2 span { display: block; }
/* 1136:192664 — 645px run, its own handle */
.po3lb__oh2 .po3lb__grad {
  display: inline-block;
  background: linear-gradient(111.2deg, #F8F8F8 51.2%, #636363 93.2%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------------------------------------------------------------------
   1136:193021 — the opinions marquee, 1432x928 at x 40, y 1839, clipped.
   Four columns of 346.7 wide cards, 456 tall, 16 apart. Columns 1 and 3 start
   396px above the window, columns 2 and 4 start 236px above it — that offset
   is what staggers them, and it is reproduced exactly so the static build
   measures against the frame. The scroll itself is added in the motion layer.
   ------------------------------------------------------------------------ */
.po3lb__marquee {
  position: absolute; left: 40px; top: 1839px;
  width: 1432px; height: 928px; overflow: hidden; z-index: 3;
  display: flex; gap: 15.07px;
}
.po3lb__col { position: relative; width: 346.7px; flex: none; }
.po3lb__colinner {
  position: absolute; left: 0; top: 0; width: 346.7px;
  display: flex; flex-direction: column; gap: 16px;
}
.po3lb__col--a .po3lb__colinner { transform: translateY(-396px); }
.po3lb__col--b .po3lb__colinner { transform: translateY(-236px); }

/* 1136:193022 — 346.7x456, r 32, pad 24, gap 80, 2px inside gradient hairline */
.po3lb__card {
  position: relative; box-sizing: border-box;
  width: 346.7px; height: 456px; flex: none;
  padding: 24px; border-radius: 32px;
  background: linear-gradient(180deg, #1F1F1F 0%, #151515 100%);
  display: flex; flex-direction: column; gap: 80px; overflow: hidden;
}
.po3lb__card::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;
}
/* 1136:193023 — 258x70, row, gap 16 */
.po3lb__chead { display: flex; align-items: center; gap: 16px; }
.po3lb__cav { display: block; width: 70px; height: 70px; border-radius: 50%; flex: none; object-fit: cover; }
.po3lb__cmeta { display: flex; flex-direction: column; gap: 8px; }
.po3lb__cname {
  display: flex; align-items: center; gap: 4px; margin: 0;
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 20px; line-height: 30px; letter-spacing: -.6px; color: var(--af-white);
}
.po3lb__cname img { display: block; width: 24px; height: 24px; }
/* 1136:193035 — chips row, gap 8 */
.po3lb__cchips { display: flex; gap: 8px; margin: 0; }
/* 1136:193036 — r 57, padding 4/8, gap 7, teal wash at node opacity .16 */
.po3lb__cchip {
  display: flex; align-items: center; gap: 7px;
  height: 32px; padding: 4px 8px; border-radius: 57px;
  background: linear-gradient(74deg, rgba(124,177,172,.16) 0%,
              rgba(124,177,172,.128) 59.8%, rgba(255,255,255,.16) 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: 24px; letter-spacing: -.48px; color: var(--af-white);
  white-space: nowrap;
}
.po3lb__cchip img { display: block; width: 16px; height: 16px; border-radius: 50%; }
/* 1136:193041 */
.po3lb__cquote {
  margin: 0; width: 298.7px;
  font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: 20px; line-height: 26.4px; letter-spacing: -.6px; color: var(--w-80);
}
/* 1136:193042 */
.po3lb__camt {
  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);
}

/* 1136:193106 — the Trustpilot card, 346.7x456, r 32, padding 64/24, gap 36 */
.po3lb__trust {
  position: relative; box-sizing: border-box;
  width: 346.7px; height: 456px; flex: none;
  padding: 64px 24px; border-radius: 32px; overflow: hidden;
  background: linear-gradient(180deg, #396B6A 0%, rgba(34,55,54,.2) 100%);
  display: flex; flex-direction: column; align-items: center; gap: 36px;
}
/* 1136:193108 — 529x311.5 radial face montage, x -105.7, y 162 */
.po3lb__trustfaces {
  position: absolute; left: -105.7px; top: 162px; width: 529px; height: 311.5px;
  background: url('/assets/figma/st-tp-faces.webp') no-repeat 0 0 / 529px 311.5px;
  pointer-events: none; z-index: 0;
}
.po3lb__trusttop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.po3lb__trustlogo { display: block; width: 224px; height: 29px; }
.po3lb__trustrate { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.po3lb__stars { display: flex; gap: 4px; }
.po3lb__stars img { display: block; width: 24px; height: 23px; }
.po3lb__trustnum {
  margin: 0; font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-white);
}
/* 1136:193174 — 191x48, r 28. Lime takes ink #001D21, never a link colour. */
.po3lb__trustcta {
  position: relative; z-index: 1; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 191px; height: 48px; padding: 14px 20px 14px 24px; border-radius: 28px;
  background: var(--af-lime); color: var(--af-ink-teal); text-decoration: none;
  box-shadow: 0 11px 12.2px rgba(0,0,0,.28);
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 19.1px; letter-spacing: -.48px;
}
/* 1136:193174 — 1.5px inside gradient stroke. A gradient cannot be a border. */
.po3lb__trustcta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(162deg, #053F3B 0%, rgba(5,63,59,.27) 51.4%, #053F3B 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;
}
.po3lb__trustcta img { display: block; width: 20px; height: 20px; }

/* 1136:193377 / 193378 — 1432x280 fades at the top and bottom of the window */
.po3lb__mfade {
  position: absolute; left: 0; width: 1432px; height: 280px; z-index: 4; pointer-events: none;
}
.po3lb__mfade--top    { top: 0;    background: linear-gradient(180deg, #0F0F0F 0%, rgba(15,15,15,0) 100%); }
.po3lb__mfade--bottom { bottom: 0; background: linear-gradient(0deg,   #0F0F0F 0%, rgba(15,15,15,0) 100%); }

/* ---------------------------------------------------------------------------
   Below the design width. Derived, not drawn — the 393 mobile frame in this
   file was laid out against the OLD 4638 desktop and has no equivalent of this
   band at all, so there is nothing to measure against. See PAYOUTS-V3-SPEC.md §3.
   ------------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .po3lb { height: auto; padding: 80px 0 100px; }
  .po3lb__stage { position: static; left: auto; margin: 0 auto; width: min(100%, 1072px); height: auto; padding: 0 20px; box-sizing: border-box; }
  .po3lb__head, .po3lb__ohead { position: static; width: 100%; margin: 0 auto 48px; }
  .po3lb__h2, .po3lb__oh2 { width: 100%; font-size: clamp(38px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -.03em; }
  .po3lb__h2 .po3lb__wide { white-space: normal; }
  .po3lb__podiumart, .po3lb__podiumfade, .po3lb__top3 { display: none; }
  .po3lb__table { position: static; width: 100%; box-sizing: border-box; margin: 0 0 80px; }
  .po3lb__thead { display: none; }
  .po3lb__row { height: auto; gap: 12px; padding: 12px 16px; border-radius: 24px; flex-wrap: wrap; }
  .po3lb__row--lead { border-radius: 24px; }
  /* FIXED 18 Sep 2026. `.po3lb__user` was released here but its PARENT was
     not: `.po3lb__group { width: 728px; flex: none }` stayed in force, so
     every leaderboard row was 728px wide inside a 393px screen — about 360px
     of each row off-screen, on all six locales — and /de/payouts tipped the
     document into a real horizontal scroll (scrollWidth 400 > 393). */
  .po3lb__group { width: auto; flex: 1 1 auto; min-width: 0; }
  .po3lb__user { width: auto; flex: 1 1 auto; min-width: 0; }
  /* drawn 400 wide, which is wider than the viewport it now renders in */
  .po3lb__sub { width: 100%; max-width: 400px; }
  .po3lb__uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .po3lb__rank { width: 56px; }
  .po3lb__more { width: 100%; }
  .po3lb__marquee { position: static; width: 100%; height: 928px; }
  .po3lb__col:nth-child(n+3) { display: none; }
  .po3lb__mfade { width: 100%; }
}
@media (max-width: 720px) {
  .po3lb__marquee { height: 640px; gap: 12px; }
  .po3lb__col { width: 260px; }
  .po3lb__colinner { width: 260px; }
  .po3lb__card, .po3lb__trust { width: 260px; height: auto; min-height: 340px; padding: 20px; gap: 24px; }
  .po3lb__cquote { width: auto; font-size: 16px; line-height: 22px; }
  .po3lb__camt { font-size: 24px; line-height: 30px; }
  .po3lb__cav { width: 52px; height: 52px; }
  .po3lb__mfade { height: 160px; }
  .po3lb__amt { width: auto; }
  .po3lb__acct { width: auto; padding: 8px 16px; font-size: 15px; }
}


/* ---------------------------------------------------------------------------
   Interaction. Per the web-motion skill: existing --t-* / --e-* tokens only,
   transform and opacity only, hover behind a fine-pointer query so it does not
   stick after a tap, and a visible focus ring on everything reachable.
   The nine table rows are links to each trader's Discord post and had no
   affordance at all, which is the finding that matters here.
   ------------------------------------------------------------------------ */
.po3lb__row, .po3lb__more, .po3lb__trustcta {
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-fast) var(--e-out),
              opacity var(--t-fast) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .po3lb__row:hover { background-color: rgba(58,58,58,.99); }
  .po3lb__row--lead:hover { background-color: rgba(58,58,58,.99); }
  .po3lb__more:hover { background-color: rgba(255,255,255,.06); }
  .po3lb__trustcta:hover { transform: translateY(-1px); }
}
.po3lb__row:active, .po3lb__more:active, .po3lb__trustcta:active { transform: scale(.99); }
.po3lb__row:focus-visible, .po3lb__more:focus-visible, .po3lb__trustcta:focus-visible {
  outline: 2px solid var(--af-lime); outline-offset: 3px;
}


/* ---------------------------------------------------------------------------
   Expanded state. The band is a fixed 2887 stage, so folding rows 6-9 open
   grows the table 288px (4 rows x 64 + 4 gaps x 8) into whatever is beneath it
   — which was the opinions heading, printed straight over the last two rows
   and the button. Everything below the table moves with it, and the band grows
   to match.
   ------------------------------------------------------------------------ */
.po3lb--open { height: 3175px; }
.po3lb--open .po3lb__stage { height: 3175px; }
.po3lb--open .po3lb__ohead { top: 1878px; }
.po3lb--open .po3lb__marquee { top: 2127px; }

/* ---------------------------------------------------------------------------
   QA 17 — between the fallback breakpoint and the 1512 design width the stage
   is centred and clipped. Everything else on the band fits inside that clip;
   the 1432-wide marquee does not, and column 1's avatar was being sliced in
   half. Below the design width the marquee goes fluid and sheds columns.
   ------------------------------------------------------------------------ */
@media (max-width: 1511px) {
  .po3lb__marquee { left: 50%; margin-left: -716px; }
}
@media (max-width: 1460px) {
  .po3lb__marquee { width: 1070px; margin-left: -535px; }
  .po3lb__col:nth-child(4) { display: none; }
  .po3lb__mfade { width: 1070px; }
}
@media (max-width: 1240px) {
  .po3lb__marquee { width: 708px; margin-left: -354px; }
  .po3lb__col:nth-child(3) { display: none; }
  .po3lb__mfade { width: 708px; }
}