/* ============================================================================
   Affiliates band 3 — the earnings calculator.
   Figma 959:69821 (1512 x 970), file rijNBFC24rPaqbSoj29uvJ.

   This is the page's one LIGHT band. Everything above and below it is on
   black, so it carries its own colour scope and must not inherit the page's
   white type colour.

   TWO DECLARED DEVIATIONS, both driven by Affiliate Program v3 and both
   affecting slider VALUES, not slider geometry — the track, fill, thumb and
   type all measure to the file.

   1. Average order value defaults to $65, not the file's $278. v3 states the
      programme's average order is ~$65, and LAB in pricing-table.js agrees:
      at OFF .50 the real paid tickets run $39 (3-Step 10K) to about $1,074,
      with the entry plans clustered well under $150. Defaulting a public
      earnings calculator to an order value four times the real one would
      overstate every number on the card.

   2. The referrals slider runs 0-250, not the file's ~0-60. v3 sets the tier
      bars at 100 and 200 orders a month, and the card's own caption promises
      "Tier applied automatically from your monthly referral volume". On a
      60-stop slider that sentence could never come true — the rate would be
      pinned at 12.5% forever.

   The result is computed live from the two inputs, so no figure on this card
   is hardcoded: $417 and "≈ $5,004 per year at 10% (Partner tier)" in the
   file are a placeholder render of the same formula.

   GRADIENTS re-derived in pixel space from gradientHandlePositions.
   ========================================================================= */

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

/* --- 959:69821 frame fills. Two stacked ramps; fills[1] is on top and is
       opaque at its lower stop, so the pale-grey ramp is what reads at the
       top and the mint one shows through the middle. ---------------------- */
.afxac {
  background:
    linear-gradient(178.99deg, #EBEDF2 1.34%, #FFFFFF 77.85%),
    linear-gradient(180deg, #CFE6E4 7.48%, #FFFFFF 70.33%);
}

/* --- 959:69822 — 1513x851 at (-1, 63), image caec9aa8… in DARKEN with a
       transparent-to-white ramp over it. ---------------------------------- */
.afxac-photo {
  /* full-bleed: this is a background plate, not placed art, so it covers the
     viewport with the drawn 1513 as its floor rather than stopping at 1512. */
  position: absolute; left: 0; right: 0; width: auto; min-width: 1513px;
  top: 63px; height: 851px;
  background: url('/assets/figma/aff-calc-bg.webp') no-repeat 50% 50% / cover;
  mix-blend-mode: darken; pointer-events: none;
}
.afxac-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
}

/* --- 959:69823 "dots" — 1642x1370 at (-130, -114), opacity .8. Eight
       repeated vector Pattern groups of several thousand nodes each; exported
       as ONE image rather than as ~20k paths. ------------------------------ */
.afxac-dots {
  position: absolute; left: 50%; top: -114px; margin-left: -886px;
  width: 1642px; height: 1370px; opacity: .8; pointer-events: none;
}

/* --- fixed 1512 stage, centred. ---------------------------------------- */
.afxac-stage { position: relative; z-index: 2; display: flow-root; width: 100%; max-width: var(--shell); margin: 0 auto; }

/* --- 959:90146 — heading, 285 wide, centred, at y 68.9, gap 16 --------- */
.afxac-head {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 285px; margin: 68.9px auto 0;
}
/* 959:90148 — pill 130x33, radius 57, padding 6/14, gap 7, ink #0D0D0D */
.afxac-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;
}
.afxac-eyebrow img { width: 16px; height: 16px; display: block; flex: none; }
/* 959:90151 — two lines, 56/56 then 42/42, centred. Note the second line is
   SMALLER than the first, which is the file's, not a mistake. */
/* both lines are single lines in the file. Without nowrap the 42px line
   wraps inside the 285 box and the head grows 42. */
.afxac-title { margin: 0; text-align: center; width: 285px; }
.afxac-title span { white-space: nowrap; }
.afxac-title .t1 {
  display: block; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 56px; line-height: 56px; letter-spacing: -1.68px;
  background-image: linear-gradient(128.2deg, #0D0D0D 59.34%, #CECECE 93.19%);
  -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;
}
.afxac-title .t2 {
  display: block; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 42px; line-height: 42px; letter-spacing: -1.26px; color: #0D0D0D;
}

/* --- 959:90154 — the card stack, 608 wide at (452, 280), gap 16 -------- */
.afxac-cards { display: flex; flex-direction: column; gap: 16px; width: 608px; margin: 64.1px auto 0; }

/* --- 959:90155 — result card, 608x234, radius 32, padding 42/24, gap 24 - */
.afxac-result {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  height: 234px; padding: 42px 24px; border-radius: var(--r-32);
  background: linear-gradient(170.95deg, #7CB1AC -18.27%, #053F3B 98.4%);
}
/* 959:90164 / 959:93181 — two copies of one 727x397 swirl in SOFT_LIGHT.
   DECLARED DEVIATION: Chrome blends soft-light in sRGB where Figma does not,
   so a soft-light layer at the file's full opacity renders noticeably lighter
   than the reference. Held at .55 to land on the reference value. */
.afxac-swirl {
  position: absolute; width: 727px; height: 397px;
  mix-blend-mode: soft-light; opacity: .55; pointer-events: none;
}
.afxac-swirl--a { left: 0;    top: -271px; }
.afxac-swirl--b { left: -118px; top: 101px; }

/* 959:90156 — glass pill 247x32, radius 57, padding 4/12/4/8, gap 7 */
.afxac-chip {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 4px 12px 4px 8px; border-radius: 57px;
  background: linear-gradient(87.83deg,
              rgba(255,255,255,.09) -5.86%, rgba(255,255,255,.033) 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: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-white);
  white-space: nowrap;
}
.afxac-chip img { width: 16px; height: 16px; display: block; flex: none; }
/* 959:90160 — SF Pro 700 / 80 / 80px / ls -6%, lime-to-teal ramp.
   959:90161 ("/month") is visible:false in the file and is not rendered. */
.afxac-amount {
  position: relative; z-index: 2; margin: 0;
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 80px; line-height: 80px; letter-spacing: -4.8px;
  background-image: linear-gradient(115.3deg, #E1FFA0 57.63%, #7CB1AC 102.81%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 959:90163 — SF Pro 510 / 14 / 14px, white */
.afxac-note {
  position: relative; z-index: 2; margin: 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; color: var(--af-white);
}

/* --- 959:96198 — input card, 608x320, radius 32, white, padding 24,
       gap 32, shadow 13/35/41.1 rgba(0,31,24,.07) ------------------------ */
.afxac-inputs {
  display: flex; flex-direction: column; gap: 32px;
  padding: 24px; border-radius: var(--r-32);
  background: var(--af-white);
  box-shadow: 13px 35px 41.1px 0 rgba(0,31,24,.07);
}
/* 959:96199 / 959:96206 — field, 560 wide, gap 16 */
.afxac-field { display: flex; flex-direction: column; gap: 16px; }
/* 959:96200 — SF Pro 590 / 24 / 28.8px / ls -3%, #0D0D0D */
.afxac-label {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 24px; line-height: 28.8px; letter-spacing: -.72px; color: #0D0D0D;
}

/* the slider. 959:96201 is a 560x32 box holding a 560x8 track at y 9, an
   8-tall fill, and an 82x36 thumb that overhangs the track by 2 top and
   bottom. Built as a real <input type=range> so it is keyboard-operable;
   the track and fill are painted on the wrapper, the native track and thumb
   are hidden, and the visible thumb is a sibling positioned from the value. */
.afxac-slider { position: relative; height: 32px; }
/* 959:96202 — 560x8, radius 39, #F2F4F7 */
.afxac-track {
  position: absolute; left: 0; top: 9px; width: 100%; height: 8px;
  border-radius: 39px; background: #F2F4F7; pointer-events: none;
}
/* 959:96203 — same box, #7CB1AC, width driven by the value */
.afxac-fill {
  position: absolute; left: 0; top: 9px; height: 8px;
  border-radius: 39px; background: var(--af-teal); pointer-events: none;
}
/* 959:96204 — 82x36, radius 28, #E1FFA0, 2px INSIDE rgba(0,0,0,.06),
   shadow -3/4/8 rgba(0,0,0,.11), padding 4/12 */
.afxac-thumb {
  position: absolute; top: -2px; width: 82px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 28px; background: var(--af-lime);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06), -3px 4px 8px 0 rgba(0,0,0,.11);
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 18px; line-height: 18px; letter-spacing: -1.8px; color: #000;
  pointer-events: none; transform: translateX(-50%);
}
.afxac-range {
  position: absolute; inset: 0; width: 100%; height: 32px;
  margin: 0; padding: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.afxac-range:focus-visible ~ .afxac-thumb { outline: 2px solid var(--af-deep); outline-offset: 3px; }

/* 959:96213 — footnote block, gap 12, with a 1px rule above it.
   959:96215 is a zero-height VECTOR, so the 12 gap absorbs the CSS hairline. */
.afxac-foot { display: flex; flex-direction: column; gap: 11px; }
.afxac-footrule { width: 100%; height: 1px; background: rgba(0,0,0,.25); }
/* 959:96216 — SF Pro 400 / 16 / 21.1px / ls -3%, #0D0D0D at .6 */
.afxac-footnote {
  margin: 0; font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: 16px; line-height: 21.1px; letter-spacing: -.48px;
  color: #0D0D0D; opacity: .6;
}