/* ============================================================================
   Affiliates band 5 — how it works.
   Figma 959:96386 (1512 x 699), file rijNBFC24rPaqbSoj29uvJ.

   COPY: the eyebrow reads "How it work" in the file. Shipped as "How it works"
   — reproducing a missing 's' faithfully helps nobody.

   Each card is a clipped 347x376 frame holding three 458x458 radial blobs and
   a product shot, all positioned from the card's own top-left. The blobs sit
   at identical offsets in all three cards; only the shot differs.

   The three cards are BOTTOM-aligned (primaryAxisAlignItems MAX), so the step
   pill, title and body sit against the card's lower edge with the art above.
   ========================================================================= */

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

/* --- 959:96386 frame fill ---------------------------------------------- */
.afxas { background: linear-gradient(180deg, #EBEDF2 0%, #FFFFFF 100%); }

/* --- 959:96387 — the connector line work, continuing the milestone band's.
       Its box is 2278.5x968.5 at (-432, -615): almost all of it is above this
       frame and only the last 354 of it is visible. 959:96390 inside it is
       visible:false and is not rendered. ---------------------------------- */

/* ---------------------------------------------------------------------------
   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.
   ------------------------------------------------------------------------ */
.afxas-lines {
  position: absolute; left: 50%; margin-left: -1188px; top: -615px;
  width: 2278.5px; height: 968.5px; pointer-events: none; max-width: none;
}
/* --- 959:96391 — masked SCREEN texture, group opacity .9. The radial mask
       (959:96392) and the screen image (959:96393) are baked into one export.
       DECLARED DEVIATION: the export lands at 1374x1030 against the group's
       1392x1039.5 box — Figma trims a group export to its visible content —
       so it is stretched the ~1% back to the drawn box rather than left
       1.3% small and 9px high. ------------------------------------------- */
.afxas-tex {
  position: absolute; left: 50%; margin-left: -1034.1px; top: -94.4px;
  width: 1392px; height: 1039.5px; opacity: .9; pointer-events: none;
}

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

/* --- 959:96394 — 1073 wide at (220, 120), column, gap 50 --------------- */
.afxas-inner {
  display: flex; flex-direction: column; align-items: center; gap: 50px;
  width: 1073px; margin: 120px auto 0;
}
/* 959:96395 — pill 127x33, radius 57, padding 6/14, gap 7 */
.afxas-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 6px 14px; 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;
}
.afxas-eyebrow img { width: 16px; height: 16px; display: block; flex: none; }

/* --- 959:96406 — three 347x376 cards, gap 16 --------------------------- */
.afxas-cards { display: flex; flex-direction: row; align-items: center; gap: 16px; width: 1073px; }

/* 959:96407 — radius 32, #FBFBFB, padding 24, gap 16, content bottom-aligned */
.afxas-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 16px;
  width: 347px; height: 376px; flex: none;
  padding: 24px; border-radius: var(--r-32); background: #FBFBFB;
}
/* 959:96412 / 96413 / 96414 — three 458x458 radial washes at opacity .2, at
   the same three offsets in every card. */
.afxas-blob {
  position: absolute; width: 458px; height: 458px; opacity: .2; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(124,177,172,.6) 0%, rgba(255,255,255,.18) 50.9%, rgba(245,247,253,0) 75.2%);
}
.afxas-blob--1 { left: 329px;  top: 66px; }
.afxas-blob--2 { left: -96px;  top: -163px; }
.afxas-blob--3 { left: 137px;  top: -221px; }

/* the product shot. Position and size differ per card; the shadow does not. */
.afxas-shot { position: absolute; display: block; max-width: none; pointer-events: none; }
.afxas-shot--1 { left: 147px; top: 4px;   width: 216px; height: 216px;
                 filter: drop-shadow(2px 6px 29.7px rgba(51,51,51,.14)); }
.afxas-shot--2 { left: 89px;  top: -11px; width: 316px; height: 211px;
                 filter: drop-shadow(2px 6px 29.7px rgba(51,51,51,.1)); }
.afxas-shot--3 { left: 137px; top: 8px;   width: 238px; height: 210.9px;
                 filter: drop-shadow(2px 6px 29.7px rgba(51,51,51,.2)); }

/* 959:96408 — 32x32 glass pill, radius 57 */
.afxas-step {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  width: 32px; height: 32px; 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;
}
/* 959:96410 — SF Pro 590 / 24 / 28.8px / ls -3% */
.afxas-name {
  position: relative; z-index: 2; margin: 0;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 24px; line-height: 28.8px; letter-spacing: -.72px; color: #0D0D0D;
}
/* 959:96411 — SF Pro 400 / 16 / 21.1px / ls -3%, opacity .8, 299 wide */
.afxas-copy {
  position: relative; z-index: 2; margin: 0; width: 299px;
  font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: 16px; line-height: 21.1px; letter-spacing: -.48px;
  color: #0D0D0D; opacity: .8;
}