/* ============================================================================
   Affiliates band 2 — proof quad + tier ladder + creator CTA.
   Figma 959:69654 (1512 x 1529), file rijNBFC24rPaqbSoj29uvJ.

   THREE DECLARED DEVIATIONS FROM THE FILE, all agreed with Lucas, all of which
   change the band's height. Everything else is the node JSON.

   1. FOUR tiers, not three. The file draws Partner 10% / Pro Partner 12.5% /
      Elite Partner 10% against "active referrals". Affiliate Program v3 (July
      2026) supersedes it: Affiliate 12.5% / Partner 17.5% / Elite Partner
      22.5% / Ambassador (invitation), gated on the trailing 3-month average of
      monthly PAID orders. The v3 doc is internal, so only the rates, the
      reach/keep numbers and the perk lines are published — never the MER, the
      30% cap, the override maths or the worst-case economics.
      The row is widened from 1082 to 1432 (the band's own content width, the
      one the proof quad above already uses) so four cards keep the drawn
      350-ish width: (1432 - 3*16) / 4 = 346. Cramming four into 1082 would
      have given 258 and broken the type inside them.

   2. The subhead 959:69726 ("Four choices. Live preview. Same funded simulated
      account at the end — yours.") is home-page pricing copy left in this
      frame. Dropped. That removes 48 of text and the 32 gap above it: -80.

   3. v3 gives three perk bullets per tier where the file draws four, so the
      card is 29 shorter: 3*21 + 2*8 = 79 of list, not 108. Ambassador has only
      two bullets, so its button is pinned to the card bottom and the row still
      measures flat.

   Band height is therefore 1529 - 80 - 29 = 1420. Every other offset — the
   120 padding, the 100 band gap, the 40 stack gap, the proof quad at y 120,
   the card internals — is the file's.

   GRADIENTS re-derived in PIXEL space from gradientHandlePositions. Normalised
   handles read straight off give wrong angles and wrong stops on non-square
   boxes, and every gradient here is on a non-square box.
   ========================================================================= */

.afxat { position: relative; overflow: hidden; }
.afxat *, .afxat *::before, .afxat *::after { box-sizing: border-box; }

/* --- 959:69654 frame fill. NOT --af-shell: the token runs #303030 -> #0F0F0F
       across the full box, but this node's handle stops at 43.89% of the
       1529 height, so the ramp finishes early and the lower 56% is flat
       #0F0F0F. Derived, not tuned. --------------------------------------- */
.afxat {
  background: linear-gradient(180deg, #303030 0%, #0F0F0F 43.89%) no-repeat;
  background-color: #0F0F0F;
}

/* --- 959:69655 "Mask group" — 1512x1111 at y 418, group opacity .06.
       959:69656 is a #D9D9D9 -> transparent ramp masking 959:69657, a
       LINEAR_DODGE photographic texture. Composited here as the texture in
       linear-dodge (CSS `plus-lighter` is the closest match Chrome ships) with
       the ramp applied as a mask. ------------------------------------------ */
.afxat-texture {
  position: absolute; left: 0; top: 418px; width: 100%; height: 1111px;
  opacity: .06; pointer-events: none;
  background: url('/assets/figma/aff-tiers-texture.webp') no-repeat 50% 0 / cover;
  mix-blend-mode: plus-lighter;
  -webkit-mask-image: linear-gradient(180deg, #000 58.9%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 58.9%, transparent 100%);
}

/* --- 959:69673 / 959:69674 / 959:69675 — three copies of one orb image
       (e02b31cc…), placed absolutely. Exported once as a group asset and
       reused, per the "one image per decorative group" rule. --------------- */

/* ---------------------------------------------------------------------------
   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.
   ------------------------------------------------------------------------ */
.afxat-orb { position: absolute; left: 50%; pointer-events: none; }
.afxat-orb--a { margin-left: -108px;   top: 1335.2px; width: 183.1px; height: 193.1px; }
.afxat-orb--b { margin-left: 327.1px;  top: 863.3px;  width: 214.1px; height: 211.7px; }
.afxat-orb--c { margin-left: -675.2px; top: 1107.9px; width: 170.2px; height: 194.6px; }

/* --- fixed 1512 stage, centred. 40px gutter on this band (the hero uses 46;
       959:69676 sits at x 40). ---------------------------------------------- */
.afxat-stage {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--shell); margin: 0 auto; padding: 120px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 100px;
}

/* ===================== 959:69676 — the proof quad ========================
   1432 wide, four 334 columns, gap 32, at y 120. Each column: a 1px rule,
   gap 32, then caption + two-line number, gap 12.                          */
/* 1432 = --shell 1512 minus the stage's 2x40 padding, so at exactly 1512 this
   is unchanged. Below it the pinned width overran the gutter and the band sat
   flush to both edges; 100%/max-width keeps the 40px breathing room. */
.afxat-proof { display: flex; flex-direction: row; gap: 32px; width: 100%; max-width: 1432px; }
.afxat-proofcol { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 0; min-width: 0; }
/* 959:69678 — VECTOR, 1px CENTER stroke rgba(255,255,255,.25). Zero-height in
   Figma, so the 32 gap absorbs the CSS hairline: 1 + 31 = 32. */
.afxat-proofrule { width: 100%; height: 1px; background: var(--w-25); flex: none; margin-bottom: 31px; }
.afxat-proofbody { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* 959:69680 — Saans 400 / 14 / 21px, opacity .8. The break is a Figma U+2028
   line separator, i.e. a hard break inside one paragraph. */
.afxat-proofcap {
  margin: 0; font-family: var(--font-alt); font-weight: var(--w-regular);
  font-size: 14px; line-height: 21px; color: var(--af-white); opacity: .8;
}
/* 959:69682 / 959:69683 — SF Pro 510 / 56 / 56px / ls -3%. Two stacked text
   nodes, hence two spans and no gap between them. */
.afxat-proofnum { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.afxat-proofnum span {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 56px; line-height: 56px; letter-spacing: -1.68px;
  -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;
}
/* per-node gradients: the angle and stops depend on the text box width, so
   each of the eight is derived separately rather than shared. */
.afxat-proofnum .g-cookie-a  { background-image: linear-gradient(135.15deg, #F8F8F8 35.08%, #636363 93.22%); }
.afxat-proofnum .g-cookie-b  { background-image: linear-gradient(118.42deg, #E1FFA0 56.64%, #7CB1AC 102.5%); }
.afxat-proofnum .g-repeat-a  { background-image: linear-gradient(133.86deg, #F8F8F8 36.39%, #636363 93.22%); }
.afxat-proofnum .g-repeat-b  { background-image: linear-gradient(115.43deg, #E1FFA0 57.59%, #7CB1AC 102.8%); }
.afxat-proofnum .g-min-a     { background-image: linear-gradient(150.49deg, #F8F8F8 14.4%,  #636363 93.29%); }
.afxat-proofnum .g-min-b     { background-image: linear-gradient(110.94deg, #E1FFA0 58.83%, #7CB1AC 103.18%); }
.afxat-proofnum .g-24h-a     { background-image: linear-gradient(151.75deg, #F8F8F8 12.3%,  #636363 93.3%); }
.afxat-proofnum .g-24h-b     { background-image: linear-gradient(111.03deg, #E1FFA0 58.81%, #7CB1AC 103.18%); }

/* ===================== 959:69705 — the stack ============================= */
.afxat-stack { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; max-width: 1432px; }

/* --- 959:69709 — eyebrow + title, 558 wide, gap 16 --------------------- */
.afxat-head { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 558px; }
/* 959:69710 — pill 120x33, radius 57, padding 6/14, gap 7 */
.afxat-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 6px 14px; border-radius: 57px;
  border: 1px solid var(--w-08);
  margin: 0; font-family: var(--font-alt); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-white);
  white-space: nowrap;
}
.afxat-eyebrow img { width: 16px; height: 16px; display: block; flex: none; }
/* 959:69723 — two 96/96 lines, centred, 558x192. The file's first line carries
   two stacked gradient fills; the upper one is opaque and is the one that
   renders, so only it is reproduced. "Start at 10%" is v3'd to 12.5%. */
.afxat-title { margin: 0; text-align: center; width: 558px; }
.afxat-title span {
  display: block;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 96px; line-height: 96px; letter-spacing: -2.88px;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.afxat-title .t1 { background-image: linear-gradient(122.26deg, #F8F8F8 45.71%, #636363 93.18%); }
.afxat-title .t2 { background-image: none; -webkit-text-fill-color: var(--af-white); color: var(--af-white); }

/* --- the tier row. File: 1082 wide, 3 cards, gap 16. Here: 1432 wide,
       4 cards of 346, gap 16. align-items stretch so all four match the
       tallest. ------------------------------------------------------------ */
.afxat-tiers { display: flex; flex-direction: row; align-items: stretch; gap: 16px; width: 100%; max-width: 1432px; }

/* 959:69728 — radius 32, padding 24, column, gap 64, 2px INSIDE gradient
   stroke. The fill runs #1F1F1F -> #151515 top to bottom. */
.afxat-card {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 64px;
  padding: 24px; border-radius: var(--r-32);
  background: linear-gradient(180deg, #1F1F1F 0%, #151515 100%);
}
.afxat-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: linear-gradient(201.44deg,
              rgba(255,255,255,.13) -6.13%, rgba(202,202,202,0) 42.03%, rgba(153,153,153,.13) 87.49%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* 959:69729 — head block, gap 12, 128 tall: 27 + 12 + 56 + 12 + 21 */
.afxat-cardhead { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* 959:69730 — SF Pro 510 / 18 / 27px / ls -2% */
.afxat-cardname {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; letter-spacing: -.36px; color: var(--af-white);
}
/* 959:69731 — SF Pro 590 / 80px. The file gives lineHeightPx 120 inside a box
   only 56 tall, i.e. the line box is vertically trimmed; line-height 56 centres
   the glyphs in the same 56 and keeps the following child on its drawn y. */
.afxat-cardrate {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 80px; line-height: 56px; color: var(--af-white);
}
/* 959:69732 — SF Pro 400 / 16 / 21.1px / ls -3%, rgba(255,255,255,.6) at .9 */
.afxat-cardmeta {
  margin: 0; font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: 16px; line-height: 21.1px; letter-spacing: -.48px;
  color: var(--w-56);
}

/* 959:69733 — body, gap 12, pushed to the card bottom so the Ambassador card
   (two bullets, not three) keeps its button on the same line as the rest. */
.afxat-cardbody { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
/* 959:69734 — list, gap 8; each row 21 tall, icon 20, gap 8 */
.afxat-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.afxat-perk { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.afxat-perk img { width: 20px; height: 20px; flex: none; display: block; }
/* 959:69738 — SF Pro 400 / 14 / 21px / ls -2%, opacity .8 */
.afxat-perk span {
  font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: 14px; line-height: 21px; letter-spacing: -.28px;
  color: var(--af-white); opacity: .8;
}
/* 959:69751 — 52 tall, radius 100, fill rgba(255,255,255,.05), padding 16/32,
   gap 8, shadow 2/14/24.1 rgba(38,63,66,.12) */
.afxat-cardbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 16px 32px; border-radius: var(--r-pill);
  background: var(--w-04); box-shadow: 2px 14px 24.1px 0 rgba(38,63,66,.12);
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  color: var(--af-white); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.afxat-cardbtn img { width: 20px; height: 20px; flex: none; display: block;
                     transition: transform var(--t-fast) var(--e-out); }

/* --- 959:69809 — creator CTA, 1082x178, radius 32, padding 24.
       Kept at the file's 1082 (it is not part of the widened tier row). ---- */
.afxat-creator {
  position: relative; width: 1082px;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px; border-radius: var(--r-32);
  background: linear-gradient(260.72deg, #151515 13.81%, #2F2F2F 33.71%, #151515 93.3%);
}
/* the node carries three stroke paints; the first two are identical, the third
   a lime wash. Stacked as one ring plus a lime ring above it. */
.afxat-creator::after,
.afxat-creator::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.afxat-creator::after {
  background: linear-gradient(250.41deg,
              rgba(255,255,255,.13) -.45%, rgba(202,202,202,0) 26.92%, rgba(153,153,153,.13) 52.77%);
}
.afxat-creator::before {
  background: linear-gradient(213.58deg,
              rgba(225,255,160,.16) 0%, rgba(225,255,160,.013) 17.65%, rgba(225,255,160,.16) 42.19%);
  z-index: 1;
}
.afxat-creatorbody { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 723px; }
/* 959:69814 — SF Pro 590 / 32 / 38.4px / ls -3%, with 959:69812 "Skip" set in
   a 68x37 lime-on-glass chip inline on the second line. */
.afxat-creatortitle {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-semi);
  /* 38.4 x 2 is 76.8 where the file's text box is 76; rounded to match, which
     brings the creator card back to its drawn 178. */
  font-size: 32px; line-height: 38px; letter-spacing: -.96px; color: var(--af-white);
}
.afxat-skip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 37px; padding: 0 4px; border-radius: var(--r-12);
  background: rgba(255,255,255,.09); color: var(--af-lime);
  /* inline-flex on a baseline grows the 38.4 line box to 82.1 across two
     lines. Aligned to the line top instead: the 37 box fits inside 38.4, the
     line box keeps its height, and the chip sits where the file draws it. */
  line-height: 36px; vertical-align: top;
}
/* 959:69815 — SF Pro 400 / 16 / 21.1px / ls -3%, rgba(255,255,255,.6) at .9 */
.afxat-creatorlead {
  margin: 0; width: 723px;
  font-family: var(--font-sans); font-weight: var(--w-regular);
  /* 21.1 x 2 lines is 42.2 against the file's 42 — Figma rounds the text box
     down, and the extra .2 pushed the card to 179. Rounded the same way. */
  font-size: 16px; line-height: 21px; letter-spacing: -.48px; color: var(--w-56);
}
/* 959:69817 — 229x48, radius 100, lime, padding 14/32, 1.5px INSIDE stroke */
.afxat-creatorbtn {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 14px 32px; border-radius: var(--r-pill);
  background: var(--af-lime); color: var(--af-ink-teal);
  box-shadow: 2px 14px 24.1px 0 rgba(38,63,66,.12);
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t-instant) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.afxat-creatorbtn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(122.32deg,
              rgba(5,63,59,.6) 41.97%, rgba(5,63,59,.162) 68.82%, rgba(5,63,59,.6) 94.17%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.afxat-creatorbtn img { width: 20px; height: 20px; flex: none; display: block;
                        transition: transform var(--t-fast) var(--e-out); }

/* ------------------------------------------------------------------ motion */
@media (hover: hover) and (pointer: fine) {
  .afxat-cardbtn:hover { background-color: var(--w-08); }
  .afxat-cardbtn:hover img,
  .afxat-creatorbtn:hover img { transform: translateX(2px); }
  .afxat-creatorbtn:hover { box-shadow: 2px 18px 28px 0 rgba(38,63,66,.18); }
}
.afxat-cardbtn:active, .afxat-creatorbtn:active { transform: scale(.98); }
.afxat-cardbtn:focus-visible, .afxat-creatorbtn:focus-visible {
  outline: 2px solid var(--af-lime); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .afxat-cardbtn, .afxat-creatorbtn, .afxat-cardbtn img, .afxat-creatorbtn img { transition: none; }
}