/* ============================================================================
   Affiliates band 4 — milestone rewards.
   Figma 959:96217 (1512 x 2402), file rijNBFC24rPaqbSoj29uvJ.

   The band's second light section. Four rows of 550, stacked with a NEGATIVE
   60px gap (-70 in the file, absorbed as described below), art alternating
   left / right, with a serpentine connector drawn behind them.

   THE RING ART: each row's art is a group of three concentric backdrop-blurred
   ellipses over a 168px-layer-blurred angular gradient, with a product shot on
   top — several hundred nodes of glass that Chrome cannot composite the way
   Figma does. Exported as ONE image per row, per the decorative-group rule.
   Its bounding box is 509.1x550 but its RENDER bounds are 789.6x714.3 at
   (-139.7, -164) from that box, because the layer blur spills; the image is
   positioned on the render bounds, not the bounding box, or the rings sit
   140px right and 164px low of where they are drawn.

   COPY: the file's strings, with one normalisation. Rows 2 and 3 write
   "Estimated value $1000" / "$3000" while the reward line directly above them
   writes "$1,000" / "$3,000". Same number, same card, two formats — the
   thousands separator is applied to both.
   ========================================================================= */

.afxam { position: relative; overflow: hidden; min-height: 2402px; }
.afxam *, .afxam *::before, .afxam *::after { box-sizing: border-box; }

/* --- 959:96217 frame fill ---------------------------------------------- */
.afxam { background: linear-gradient(180deg, #FFFFFF 52.7%, #EBEDF2 92.5%); }

/* --- 959:96379 / 959:96382 — the connector line work, exported as SVG
       because it is stroked vector, not raster. 959:96382 carries group
       opacity .7; 959:96379 is full opacity and overflows the frame to the
       right, which the section clips. ------------------------------------- */

/* ---------------------------------------------------------------------------
   ANCHORING. Everything below is drawn at an x on the 1512 canvas, so it is
   positioned from the CENTRE (left 50% + a margin of x - 756), not from the
   section's left edge. Plain `left: <x>px` pins art to the viewport edge, so
   above 1512 it drifts left of everything it belongs to — which is what
   happened here. Backgrounds that should cover the viewport are the other
   case and go full-bleed instead: left 0 / right 0 / width auto with a
   min-width of the drawn box.
   ------------------------------------------------------------------------ */
.afxam-lines { position: absolute; left: 50%; pointer-events: none; max-width: none; }
.afxam-lines--a { margin-left: -756px; top: 1644px; width: 2011.5px; height: 926.5px; }
.afxam-lines--b { margin-left: -536px; top: 396px;  width: 1089.1px; height: 1789px; opacity: .7; }
/* 959:96385 — a 548x195 radial white wash with a 5px background blur, sitting
   over the line work near the last bend. */
.afxam-blur {
  position: absolute; left: 50%; margin-left: 5px; top: 1300px; width: 548.1px; height: 195px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  pointer-events: none;
}

.afxam-stage { position: relative; z-index: 2; display: flow-root; width: 100%; max-width: var(--shell); margin: 0 auto; }

/* --- 959:96219 — heading, 469 wide, centred, at y 120, gap 16 ---------- */
.afxam-head {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 469px; margin: 120px auto 0;
}
/* 959:96220 — pill 141x33, radius 57, padding 6/0, gap 7. The file gives it no
   horizontal padding; the icon and label are inset by the gap alone. */
.afxam-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 6px 0; border-radius: 57px;
  border: 1px solid rgba(0,0,0,.08);
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: #0D0D0D;
  white-space: nowrap;
}
.afxam-eyebrow img { width: 16px; height: 16px; display: block; flex: none; margin-left: 14px; }
.afxam-eyebrow span { margin-right: 14px; }
/* 959:96229 — two 64/64 lines, centred */
.afxam-title { margin: 0; text-align: center; width: 469px; }
.afxam-title span {
  display: block; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 64px; line-height: 64px; letter-spacing: -1.92px; color: #0D0D0D;
}
.afxam-title .t1 {
  background-image: linear-gradient(161.4deg, #0D0D0D 0%, #CECECE 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;
}

/* --- 959:96232 — the row stack, 1073 wide at x 220, y 354, gap -70.
       Each row is 550 tall and the rows overlap by 70, so the stack measures
       4*550 - 3*70 = 1990. Reproduced with margin-top on rows 2..4 rather than
       a negative flex gap, which Chrome will not apply to the first item. -- */
.afxam-rows { width: 1073px; margin: 57px auto 0; }
.afxam-row { position: relative; display: flex; flex-direction: row; align-items: center; gap: 60px; height: 550px; }
.afxam-row + .afxam-row { margin-top: -70px; }
/* rows 2 and 4 put the art on the right */
.afxam-row--right { flex-direction: row-reverse; }

/* the exported ring art, placed on its RENDER bounds */
.afxam-art { position: relative; width: 509.1px; height: 550px; flex: none; }
.afxam-art img {
  position: absolute; left: -139.7px; top: -164px;
  width: 789.6px; height: 714.3px; max-width: none;
}

/* --- 959:96241 — the copy block, 503.9 wide, gap 24 -------------------- */
.afxam-copy { width: 503.9px; flex: none; display: flex; flex-direction: column; gap: 24px; }
/* 959:96243 — pill 126x36, radius 57, padding 8/12, gap 4, glass fill */
.afxam-step {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  height: 36px; padding: 8px 12px; border-radius: 57px;
  background: linear-gradient(87.83deg,
              rgba(5,63,59,.09) -5.86%, rgba(5,63,59,.071) 62.21%, rgba(255,255,255,.09) 107.92%);
  -webkit-backdrop-filter: blur(8.35px); backdrop-filter: blur(8.35px);
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 16px; letter-spacing: -.96px; color: var(--af-deep);
  opacity: .8; white-space: nowrap;
}
.afxam-step img { width: 20px; height: 20px; display: block; flex: none; }
/* 959:96261 — title + list, gap 12 */
.afxam-body { display: flex; flex-direction: column; gap: 12px; }
/* 959:96262 — SF Pro 590 / 32 / 42.2px / ls -3%, #0D0D0D */
.afxam-name {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 32px; line-height: 42.2px; letter-spacing: -.96px; color: #0D0D0D;
}
/* 959:96263 — list, gap 8; rows 26 tall, icon 20, gap 8 */
.afxam-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.afxam-item { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.afxam-item img { width: 20px; height: 20px; flex: none; display: block; }
/* 959:96267 — SF Pro 510 / 20 / 26.4px / ls -3%, #0D0D0D */
.afxam-item span {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 20px; line-height: 26.4px; letter-spacing: -.6px; color: #0D0D0D;
}