/* ============================================================================
   Futures page (/futures) — mid-page bands.  File rijNBFC24rPaqbSoj29uvJ.

   REWRITTEN 2 Aug 2026 (third pass). Every size, colour, radius, gap and
   offset below is read out of the node JSON via tools/figma/fx.py, not
   inferred from a screenshot. The two prior passes carried a hand-tuned type
   scale (44/48px headings against the file's 64/80/96, 15px body against 20)
   and several pieces of art that were never exported.

   Band map (page-absolute y, height):
     959:164605  steps      946   1036
     959:164902  guarantee 3462    889
     959:164948  refund    4351    900
     959:164967  why       5251   1019
     959:173738  marquee   6270     70
     959:214567  giveaway  9121    900
     959:214611  discord  10021    839

   TYPE SCALE (the whole page uses exactly four heading steps)
     h1  110/99  -3.3    hero only
     h2   96/96  -2.88   pricing, final CTA
     h2   80/80  -2.4    guarantee, refund, why, stories, giveaway, discord
     h2   64/64  -1.92   steps, FAQ
     eyebrow      14/21  -0.42
     body-lg      20/26.4 -0.6
     body         16/21.12 -0.32 | -0.48
   ========================================================================= */

.aff2 { position: relative; }
.aff2 *, .aff2 *::before, .aff2 *::after { box-sizing: border-box; }
/* visually-hidden label helper (was referenced by the giveaway form but never
   defined anywhere, so the label rendered as visible stray text). */
.afx-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; }

/* ---------------------------------------------------------------------------
   Shared eyebrow. Figma draws it as a row frame, gap 7, height 33, holding a
   16x16 exported icon and one 14/21 -0.42 text node whose FIRST word group is
   the base colour and whose remainder carries a 60%-opacity override
   (characterStyleOverrides -> styleOverrideTable). No border and no visible
   fill on any instance on this page — the frames that have a fill or stroke
   have it set `visible: false`. ------------------------------------------ */
.aff2-eyebrow {
  display: inline-flex; align-items: center; gap: 0;
  margin: 0; padding: 6px 0; height: 33px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  color: var(--af-white); border: 0; background: none; text-transform: none;
}
.aff2-eyebrow img { width: 16px; height: 16px; flex: none; display: block; margin-right: 7px; }
.aff2-eyebrow span { opacity: .6; }
.aff2-eyebrow--dark { color: #0D0D0D; }
/* 959:164910 / 959:164952 / 959:214571 carry padding 6 14 */
.aff2-eyebrow--inset { padding-left: 14px; padding-right: 14px; border-radius: 57px; }

/* Shared headline steps. Line one is a gradient fill, line two is solid. */
.aff2-h2 { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); color: var(--af-white); }
/* Each line is its own text node in the file, and the gradient stop offsets
   below are solved against THAT node's box. A full-width <b> makes the
   background box wider than the design's and pushes the ramp late, so every
   line shrink-wraps to its own text. */
.aff2-h2 b { font-weight: inherit; display: block; width: fit-content; }
.aff2-steps__h2 b, .aff2-why__h2 b, .aff2-discord__h2 b, .afxf--ft .afxf__h2 span { margin-left: auto; margin-right: auto; }
.aff2-h2--80 { font-size: 80px; line-height: 80px; letter-spacing: -2.4px; }
.aff2-h2--64 { font-size: 64px; line-height: 64px; letter-spacing: -1.92px; }
.aff2-grad {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; 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;
}

/* ============================== STEPS  959:164605 ======================== */
/* 1512x1036, padding 120/40, column gap 10; inner 1432x796 column gap 40. */
.aff2-steps {
  padding: 120px var(--gutter);
  background: linear-gradient(180deg, #F5FBFB 0%, #8EBCB9 92.52%);
}
.aff2-steps__in { max-width: var(--page); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; }
/* 959:164607 — 1432x177, column gap 16, align CENTER */
.aff2-steps__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; width: 100%; }
.aff2-steps__h2 { color: #0D0D0D; }
.aff2-steps__h2 b:first-child { background-image: linear-gradient(110.9deg, #0D0D0D 64.4%, #B3CFCC 110.5%); }

/* 959:164621 — cards row 1432x483, gap 25, align CENTER. Relative so the two
   60x60 chevron pucks (959:164649 / 959:164651) can sit on the seams. */
.aff2-steps__row { position: relative; display: flex; flex-direction: row; align-items: center; gap: 25px; width: 100%; }
/* 959:164622 — 460.7x483, r32, fill rgba(255,255,255,.56), padding 24, gap 24.
   No border and no shadow: the file has neither. */
.aff2-step {
  flex: 1 1 0; min-width: 0; height: 483px;
  display: flex; flex-direction: column; gap: 24px;
  padding: 24px; border-radius: var(--r-32);
  background: rgba(255,255,255,.56); border: 0; box-shadow: none;
}
/* 959:164623 — 412.7x84, column gap 16 */
.aff2-step__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
/* 959:164624 — 91x36, r57, padding 8/12, gap 4, 73.7deg glass gradient at 9%,
   background blur 16.7 (CSS 8.35). Text 16/16 -0.96 #053F3B. */
.aff2-step__badge {
  display: inline-flex; align-items: center; gap: 4px; height: 36px;
  padding: 8px 12px; border-radius: 57px;
  background: linear-gradient(83.4deg, rgba(5,63,59,.09) -4.5%, rgba(5,63,59,.071) 61.7%, rgba(255,255,255,.09) 106.1%);
  backdrop-filter: blur(8.35px); -webkit-backdrop-filter: blur(8.35px);
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 16px; letter-spacing: -.96px; color: #053F3B;
}
.aff2-step__badge img { width: 20px; height: 20px; flex: none; display: block; }
/* 959:164627 — 24/31.68 -0.72, weight 590, #0D0D0D */
.aff2-step h3 {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 24px; line-height: 31.68px; letter-spacing: -.72px; color: #0D0D0D;
}
/* 959:164628 — art frame 412.7x251 (cards 1-2) / x225 (card 3); the image
   inside overflows it by design (image 1191 is 351x269 at -30/-8). */
.aff2-step__art { position: relative; height: 251px; margin: 0; overflow: visible; }
.aff2-step--3 .aff2-step__art { height: 225px; }
.aff2-step__art img { position: absolute; display: block; mix-blend-mode: darken; }
.aff2-step--1 .aff2-step__art img { left: 30px; top: -8px; width: 351px; height: 269px; object-fit: cover; }
.aff2-step--2 .aff2-step__art img { left: 30px; top: -8px; width: 351px; height: 269px; object-fit: fill; }
.aff2-step--3 .aff2-step__art img { left: 69px; top: -13px; width: 274px; height: 246px; object-fit: fill; }
/* 959:164630 — 20/26.4 -0.6 #3F4547, sits last in the column */
.aff2-step p { margin: 0; margin-top: auto; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 20px; line-height: 26.4px; letter-spacing: -.6px; color: #3F4547; }

/* 959:164649 / 959:164651 — 60x60 pucks, r120, #F9F9F7,
   shadow 0 8 12 rgba(0,0,0,.08), holding a 28x28 chevron. They sit on the two
   card seams: x 484 and 969 in a 1512 frame, i.e. 444 and 929 into the 1432
   content column, vertically centred on the 483 row. */
.aff2-step__link {
  position: absolute; top: 50%; margin-top: -30px;
  width: 60px; height: 60px; border-radius: var(--r-round);
  display: flex; align-items: center; justify-content: center;
  background: #F9F9F7; box-shadow: 0 8px 12px 0 rgba(0,0,0,.08);
  pointer-events: none; z-index: 2;
}
.aff2-step__link:nth-of-type(1) { left: 444px; }
.aff2-step__link:nth-of-type(2) { left: 929px; }
.aff2-step__link img { width: 28px; height: 28px; display: block; }
.aff2-steps__cta { display: flex; justify-content: center; }

/* ====================== GUARANTEE  959:164902 (889) ====================== */
/* Frame fills are [gradient, #0F0F0F] — the solid paints last, so the band is
   flat #0F0F0F. Content column 614 wide at x40 y273, column gap 32. */
.aff2-promise { position: relative; overflow: hidden; height: 889px; background: #0F0F0F; }
.aff2-promise__stage { position: relative; width: 1512px; height: 100%; margin: 0 auto; }
/* Scene pieces, at their node coordinates on the 1512 stage. Paint order is
   the file's own child order: trails -> coin a -> coin b -> text column ->
   shade ellipse -> phone -> coin c -> chips. */
.aff2-promise__trails { position: absolute; left: 532px; top: 60px; width: 980px; height: 711px; pointer-events: none; mix-blend-mode: lighten; }
.aff2-promise__phone  { position: absolute; left: 832px; top: 155px; width: 650.7px; height: 663px; pointer-events: none; }
.aff2-promise__coin   { position: absolute; pointer-events: none; }
.aff2-promise__coin--a { left: 1090px; top: 72px;  width: 104.8px; height: 119.8px; }
.aff2-promise__coin--b { left: 792px;  top: 514px; width: 140.8px; height: 148.5px; }
.aff2-promise__coin--c { left: 1179px; top: 207px; width: 153.1px; height: 151.3px; }
/* 959:164920 "Ellipse 14344" — 431.3x532.3 at (790,192), #000 at .6, blur 31.1
   (CSS 15.55). It is what sinks the phone into the background. */
.aff2-promise__shade { position: absolute; left: 790px; top: 192px; width: 431.3px; height: 532.3px; border-radius: 50%; background: #000; opacity: .6; filter: blur(15.55px); pointer-events: none; }
.aff2-promise__col { position: absolute; left: 40px; top: 273px; width: 716px; display: flex; flex-direction: column; gap: 32px; }
/* 959:164914 — the two topmost fills are gradients; the LAST one paints. */
.aff2-promise__h2 b:first-child { background-image: linear-gradient(116deg, #F8F8F8 49.1%, #636363 93.2%); }
.aff2-promise__head { display: flex; flex-direction: column; gap: 16px; }
.aff2-promise__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* 959:164917 — 16/21.12 -0.32, first sentence weight 700, rest #FFF @.8 */
.aff2-promise__body {
  margin: 0; width: 396px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 21.12px; letter-spacing: -.32px; color: var(--af-white);
}
.aff2-promise__body b { font-weight: var(--w-bold); }
.aff2-promise__body span { opacity: .8; }
/* 959:164919 — 12/18, #FFF at node opacity .2 */
.aff2-promise__legal { margin: 0; width: 515px; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 12px; line-height: 18px; color: var(--af-white); opacity: .2; }

/* 959:164938 / 959:164925 — two glass chips over the photo.
   195x58 at (800,296) and 247x58 at (1127,392); r58, padding 8/24, gap 6,
   fill rgba(255,255,255,.1), inner shadow, 28x28 icon,
   text SF Pro 860 28/42 -0.84 with a 157.8deg #FFF -> #7E9A98 gradient. */
.aff2-chip {
  position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 58px; padding: 8px 24px; border-radius: 58px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 3px -4px 6px 0 rgba(255,255,255,.12);
  font-family: var(--font-display); font-weight: var(--w-heavy);
  font-size: 28px; line-height: 42px; letter-spacing: -.84px; color: var(--af-white);
  white-space: nowrap;
}
.aff2-chip img { width: 28px; height: 28px; flex: none; display: block; }
/* 959:164947 / 959:164937 — the label is #FFFFFF with a white -> #7E9A98
   gradient painted over it; it was shipping flat white. */
.aff2-chip span {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.aff2-chip--a span { background-image: linear-gradient(132.3deg, #FFFFFF 34.4%, #7E9A98 104.8%); }
.aff2-chip--b span { background-image: linear-gradient(121.9deg, #FFFFFF 43.8%, #7E9A98 105.5%); }
.aff2-chip--a { left: 800px; top: 296px; }
.aff2-chip--b { left: 1127px; top: 392px; }

/* ======================== REFUND  959:164948 (900) ======================= */
/* 181.8deg #8EBCB9 -> #F5FBFB, one FILL-fit photo at (-225,-39) 1737x977,
   content column 629 wide at x772 y120, column gap 32. */
.aff2-refund { position: relative; overflow: hidden; height: 900px; background: linear-gradient(183deg, #8EBCB9 11.5%, #F5FBFB 82.5%); }
.aff2-refund__stage { position: relative; width: 1512px; height: 100%; margin: 0 auto; }
/* 959:164949 "image 1192" — scaleMode FILL, blendMode DARKEN. The darken is
   what lets the band's mint gradient show through the photo's bright sky;
   without it the raw photo just covers the band. */
.aff2-refund__art { position: absolute; left: -225px; top: -39px; width: 1737px; height: 977px; object-fit: cover; mix-blend-mode: darken; pointer-events: none; }
.aff2-refund__col { position: absolute; left: 772px; top: 120px; width: 640px; display: flex; flex-direction: column; gap: 32px; }
/* the file's box is 629 and the string fits it exactly there; the browser's
   own advance widths are ~3px wider, so the box is 640 to keep the same
   two-line break. */
.aff2-refund .aff2-h2 { width: 640px; }
.aff2-refund__head { display: flex; flex-direction: column; gap: 16px; }
.aff2-refund .aff2-h2 { color: #0D0D0D; }
.aff2-refund .aff2-h2 b:first-child { background-image: linear-gradient(104.7deg, #0D0D0D 66.7%, #81BAB7 111.2%); }
/* 959:164966 — 20/26.4 -0.6 #0D0D0D, lead sentence weight 700, rest @.6 */
.aff2-refund__body {
  margin: 0; width: 484px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 20px; line-height: 26.4px; letter-spacing: -.6px; color: #0D0D0D;
}
.aff2-refund__body b { font-weight: var(--w-bold); }
.aff2-refund__body span { opacity: .6; }

/* ========================== WHY  959:164967 (1019) ======================= */
/* 179.7deg #396866 -> #08312E, padding 120/40, column gap 24, align CENTER.
   Stack: head 209, illustration+ticker 342, benefits 180. */
.aff2-why { position: relative; overflow: hidden; padding: 120px var(--gutter); background: linear-gradient(179.5deg, #396866 19.9%, #08312E 99.4%); }
/* 959:173732 / 959:173735 — two light-trail groups (image 1168 under a
   gradient mask, SCREEN at .64). The imageTransform on those rects makes a
   hand-built CSS version guess-work, so each group is Figma's own render.
   The renders are trimmed to their opaque bounds, so the offsets below were
   solved by cross-correlating the composite (screen over the band gradient)
   against the reference page render: mean abs error 6.45 and 5.28 / 255 at
   left(-728,-191) and right(+912,-163). ------------------------------- */
.aff2-why__trail { position: absolute; pointer-events: none; mix-blend-mode: screen; background-repeat: no-repeat; background-size: 100% 100%; }
.aff2-why__trail--l { left: calc(50% - 756px - 728px); top: -191px; width: 1319px; height: 965px; background-image: url('/assets/figma/ft2-why-trail-l.webp'); }
.aff2-why__trail--r { left: calc(50% - 756px + 912px); top: -163px; width: 1313px; height: 935px; background-image: url('/assets/figma/ft2-why-trail-r.webp'); }

.aff2-why__in { position: relative; z-index: 2; max-width: var(--page); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
/* 959:164968 — 652x209, column, align CENTER */
.aff2-why__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.aff2-why__h2 b:first-child { background-image: linear-gradient(105.5deg, #FFFFFF 66.6%, #396966 112.8%); }

/* 959:164984 — 878x342 stage holding the illustration (behind) and the
   five-row payout ticker (in front). The illustration is one exported PNG:
   Figma's own render bounds for 959:164985 are (305.7, 5448.7) 902.1x747.6
   page-absolute, i.e. (305.7, 197.7) from this band's top, and the export is
   exactly that box, so it needs no guesswork to place. */
.aff2-why__globe { position: relative; width: 878px; height: 342px; }
.aff2-why__globe::before {
  content: ''; position: absolute; left: -11.3px; top: -155.3px;
  width: 902.1px; height: 747.6px; pointer-events: none;
  background: url('/assets/figma/ft2-why-globe.webp') no-repeat 50% 50% / 100% 100%;
}
/* 959:173672 — 232.4x234.7 at (323,54) inside that stage, column, gap 6.71,
   align CENTER. The five rows are scaled instances of one component
   (232.4x47 at scale 1): 0.7978 / 0.9135 / 1 / 0.9135 / 0.7978. Everything
   inside scales with them, so the whole row is expressed once against a --s
   factor rather than three times by hand. Fill alpha is .06 / .12 / .21 —
   that, not a node opacity, is what fades the outer rows. */
.aff2-ticker { position: absolute; left: 323px; top: 54px; width: 232.4px; display: flex; flex-direction: column; align-items: center; gap: 6.71px; z-index: 2; }
.aff2-ticker__row {
  --s: 1; --fill: .21;
  display: flex; align-items: center; gap: calc(10.069px * var(--s));
  width: calc(232.4px * var(--s)); height: calc(47px * var(--s));
  padding: calc(3.356px * var(--s)) calc(10.069px * var(--s)) calc(3.356px * var(--s)) calc(3.356px * var(--s));
  border-radius: calc(11.747px * var(--s));
  background: rgba(255,255,255,var(--fill));
  backdrop-filter: blur(calc(8.14px * var(--s))); -webkit-backdrop-filter: blur(calc(8.14px * var(--s)));
  font-family: var(--font-alt); color: var(--af-white); white-space: nowrap;
}
.aff2-ticker__row--1, .aff2-ticker__row--5 { --s: .7978; --fill: .06; opacity: .36; }
.aff2-ticker__row--2, .aff2-ticker__row--4 { --s: .9135; --fill: .12; opacity: .75; }
.aff2-ticker__row--3 { --s: 1; --fill: .21; }
/* 40.3 square, radius 8.63 — a rounded square, not a circle. */
.aff2-ticker__av { width: calc(40.3px * var(--s)); height: calc(40.3px * var(--s)); border-radius: calc(8.63px * var(--s)); object-fit: cover; flex: none; }
.aff2-ticker__who { display: flex; flex-direction: column; gap: calc(3.356px * var(--s)); min-width: 0; font-weight: var(--w-medium); font-size: calc(11.747px * var(--s)); line-height: calc(11.747px * var(--s)); }
.aff2-ticker__meta { display: flex; align-items: center; gap: calc(5.03px * var(--s)); opacity: .6; }
.aff2-ticker__cc { display: inline-flex; align-items: center; gap: calc(3.356px * var(--s)); }
.aff2-ticker__meta img { width: calc(10.1px * var(--s)); height: calc(10.1px * var(--s)); border-radius: 50%; object-fit: cover; flex: none; display: block; }
.aff2-ticker__meta i { font-style: normal; }
.aff2-ticker__amt { margin-left: auto; font-weight: var(--w-bold); font-size: calc(16.78px * var(--s)); line-height: calc(19.05px * var(--s)); }

/* 959:173678 — benefits row 1202x180 at x155, row gap 32, justify CENTER,
   align MIN; each column 276.5 wide, column gap 16.
   959:173681 "Ellipse 14463" — 68x68, 180deg #2D5E5C -> #479992,
   2px rgba(38,63,66,.08), drop shadow 9/24/44 rgba(66,107,104,.10),
   holding a 28x28 icon. Copy is 18/23.76 -0.54, lead phrase weight 590,
   remainder #FFF @.6. */
.aff2-benefits { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 32px; width: 1202px; max-width: 100%; }
.aff2-benefit { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 276.5px; flex: none; }
.aff2-benefit__ic {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%; flex: none;
  background: linear-gradient(180deg, #2D5E5C 31.57%, #479992 100%);
  border: 2px solid rgba(38,63,66,.08);
  box-shadow: inset 3px -4px 6px 0 rgba(124,177,172,.28), 9px 24px 44px 0 rgba(66,107,104,.10);
}
.aff2-benefit__ic img { width: 28px; height: 28px; display: block; }
.aff2-benefit p {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 18px; line-height: 23.76px; letter-spacing: -.54px; color: var(--af-white);
}
.aff2-benefit b { font-weight: var(--w-semi); }
.aff2-benefit span { opacity: .6; }

/* ======================= PAYOUT MARQUEE  959:173738 (70) ================= */
/* Row, gap 37, padding 24/404, clipped. The band paints #F0F5F5 then a
   172.8deg dark teal gradient on top of it, so the strip reads dark.
   The items have NO pill background — only the 61x22 "2m ago" chip does. */
.aff2-marquee {
  overflow: hidden; height: 70px; padding: 24px 0; border: 0;
  background: linear-gradient(110deg, #081816 21.8%, #0B4541 55.1%, #081816 93.1%);
}
.aff2-marquee__track { display: flex; align-items: center; gap: 37px; width: max-content; animation: aff2-scroll 34s linear infinite; }
.aff2-marquee:hover .aff2-marquee__track { animation-play-state: paused; }
/* 959:173741 — row, gap 12, height 22 */
.aff2-pill {
  display: inline-flex; align-items: center; gap: 12px; height: 22px;
  padding: 0; border-radius: 0; background: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 16px; letter-spacing: -.48px; color: var(--af-white);
}
.aff2-pill__who { display: inline-flex; align-items: center; gap: 4px; }
.aff2-pill .flag { width: 12px; height: 12px; border-radius: 100px; display: block; object-fit: cover; }
.aff2-pill b { font-weight: var(--w-semi); opacity: .9; }
.aff2-pill b em { font-style: normal; opacity: .6; }
.aff2-pill .ago {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 4px 6px; border-radius: 7px;
  background: rgba(255,255,255,.14); color: var(--af-white); opacity: 1;
  font-size: 14px; line-height: 14px; letter-spacing: -.42px;
}
.aff2-pill .ago i { font-style: normal; opacity: .7; }
@keyframes aff2-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ======================= GIVEAWAY  959:214567 (900) ====================== */
/* Fills stack to linear-gradient(180deg, #123231 0%, #081516 100%).
   Padding 120/40; content column 568 wide at x40 y220.5, column gap 32. */
.aff2-give { position: relative; overflow: hidden; height: 900px; background: linear-gradient(180deg, #123231 -15%, #081516 100%); }
.aff2-give__stage { position: relative; width: 1512px; height: 100%; margin: 0 auto; }
/* 959:214593 / 959:214594 — the two dodge glows behind the coin */
.aff2-give__glow { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: plus-lighter; }
.aff2-give__glow--a { left: 1002px; top: 238px; width: 226px; height: 226px; background: #7CB1AC; filter: blur(50px); }
.aff2-give__glow--b { left: 1019px; top: 255px; width: 192px; height: 192px; background: #94E5DE; opacity: .6; filter: blur(25.45px); }
/* 959:214596 — hand 505x787 at (860,36), masked by a 180.1deg white ->
   transparent rectangle covering (833,17) 545x806. */
.aff2-give__hand {
  position: absolute; left: 860px; top: 36px; width: 505px; height: 787px; object-fit: fill; pointer-events: none;
  mask-image: linear-gradient(180.1deg, #fff 0%, rgba(255,255,255,0) 100%);
  -webkit-mask-image: linear-gradient(180.1deg, #fff 0%, rgba(255,255,255,0) 100%);
}
/* 959:214590 / 214591 / 214592 — three coins, shadow -32 47 57 #001C1A */
.aff2-give__coin { position: absolute; object-fit: fill; pointer-events: none; }
.aff2-give__coin--1 { left: 707px;   top: 312px;  width: 300.3px; height: 309px; }
.aff2-give__coin--2 { left: 1114.9px; top: 45.7px; width: 283.3px; height: 289.1px; }
.aff2-give__coin--3 { left: 769px;   top: 102px;  width: 275.1px; height: 256.9px; }

.aff2-give__col { position: absolute; left: 40px; top: 220.5px; width: 568px; display: flex; flex-direction: column; gap: 32px; z-index: 2; }
.aff2-give__head { display: flex; flex-direction: column; gap: 16px; }
.aff2-give__h2 { position: relative; width: 640px; }
/* DECLARED DEVIATION: the file's box is 568 and its dummy string is
   "$200K giveaway"; the real, already-live figure is $10,000, which needs
   640 to keep the same three-line break. The glass plate widens with it. */
.aff2-give__h2 .aff2-grad { background-image: linear-gradient(113.3deg, #FFFFFF 63.6%, #396966 112.3%); }
/* 959:214584 — line 2 is one text node whose "$200K giveaway" run is #E1FFA0 */
.aff2-give__h2 em { font-style: normal; color: var(--af-lime); }
/* 959:214582 — 588.6x96.6 glass plate at (26.7, 425.2), r24,
   rgba(255,255,255,.09), sitting behind the third headline line. */
.aff2-give__plate { position: absolute; left: -13.3px; top: 155.7px; width: 660px; height: 96.6px; border-radius: var(--r-24); background: rgba(255,255,255,.09); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: -1; }
.aff2-give__sub { margin: 0; width: 330px; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 16px; line-height: 21.12px; letter-spacing: -.48px; color: var(--af-white); opacity: .8; }
/* 959:214586 — 520x64, r49, #FFF, padding 4 4 4 24, SPACE_BETWEEN */
.aff2-give__form { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 520px; height: 64px; padding: 4px 4px 4px 24px; border-radius: 49px; background: #FFFFFF; overflow: hidden; }
.aff2-give__input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: none;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px; color: var(--af-ink-teal);
}
.aff2-give__input::placeholder { color: var(--af-ink-teal); opacity: .4; }
/* keep the shared .afx :focus-visible ring; only suppress the mouse-focus one */
.aff2-give__input:focus:not(:focus-visible) { outline: none; }
.aff2-give__form .afx-btn-lime { flex: none; white-space: nowrap; }

/* ======================== DISCORD  959:214611 (839) ====================== */
/* 180deg #081516 -> #0F3332, clipped. Behind: a 1512x1185 dot field at .7
   masked top and bottom; a mosaic of ten COLOR_DODGE avatar tiles; and the
   3D glyph (image 1193, 752x465 at (392,8)) under a radial white mask. */
.aff2-discord { position: relative; overflow: hidden; height: 839px; background: linear-gradient(180deg, #081516 46.5%, #0F3332 93.2%); }
.aff2-discord__stage { position: relative; width: 1512px; height: 100%; margin: 0 auto; }
.aff2-discord__dots {
  position: absolute; left: 0; top: 0; width: 1512px; height: 1185px; opacity: .7; pointer-events: none;
  background: url('/assets/figma/ft2-dc-dots.webp') no-repeat 0 0 / 100% 100%;
}
/* the ten tiles + the glyph share one 1512-wide positioning box so their node
   coordinates can be written verbatim as inline left/top. */
.aff2-discord__mosaic { position: absolute; left: 0; top: 0; width: 1512px; height: 100%; pointer-events: none; }
.aff2-discord__tile { position: absolute; border-radius: 26px; mix-blend-mode: color-dodge; object-fit: cover; pointer-events: none; }
.aff2-discord__glyph {
  position: absolute; left: 392px; top: 8px; width: 752px; height: 465px; object-fit: fill; pointer-events: none;
  mask-image: radial-gradient(50% 50% at 50% 53.4%, #fff 0%, rgba(255,255,255,0) 100%);
  -webkit-mask-image: radial-gradient(50% 50% at 50% 53.4%, #fff 0%, rgba(255,255,255,0) 100%);
}
/* 959:234939 — 434x314 at (539,405), column gap 32, align CENTER */
.aff2-discord__col { position: absolute; left: 539px; top: 405px; width: 434px; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; z-index: 3; }
.aff2-discord__h2 b:first-child { background-image: linear-gradient(112.6deg, #FFFFFF 64%, #396966 112.3%); }
.aff2-discord__foot { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 420px; }
.aff2-discord__sub { margin: 0; width: 420px; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 16px; line-height: 21.12px; letter-spacing: -.32px; color: var(--af-white); }
.aff2-discord__sub b { font-weight: var(--w-bold); }
.aff2-discord__sub span { opacity: .8; }

/* ============================ RESPONSIVE ================================
   1512 is the design width and is never scaled. Below it the fixed-height,
   absolutely-positioned bands fall back to flow layout. ================== */
@media (max-width: 1511px) {
  .aff2-h2--80 { font-size: 64px; line-height: 64px; letter-spacing: -1.92px; }
  .aff2-h2--64 { font-size: 56px; line-height: 56px; letter-spacing: -1.68px; }
  .aff2-benefits { width: 100%; }
  .aff2-benefit { width: auto; flex: 1 1 0; min-width: 0; }
  .aff2-promise__stage, .aff2-refund__stage, .aff2-give__stage, .aff2-discord__stage { width: 100%; }
  .aff2-promise__col { left: var(--gutter); }
  .aff2-refund__col { left: auto; right: var(--gutter); }
  .aff2-give__col { left: var(--gutter); }
  .aff2-give__hand { left: auto; right: 40px; }
  .aff2-give__coin--1 { left: auto; right: 545px; }
  .aff2-give__coin--2 { left: auto; right: 138px; }
  .aff2-give__coin--3 { left: auto; right: 493px; }
  .aff2-give__glow--a { left: auto; right: 284px; }
  .aff2-give__glow--b { left: auto; right: 301px; }
  .aff2-discord__col, .aff2-discord__glyph, .aff2-discord__tile, .aff2-discord__dots { left: 50%; transform: translateX(-50%); }
  .aff2-discord__tile { transform: none; }
  .aff2-discord__mosaic { position: absolute; left: 50%; top: 0; width: 1512px; height: 100%; margin-left: -756px; }
  .aff2-why__globe { transform-origin: 50% 0; }
}
@media (max-width: 1280px) {
  .aff2-steps__row { flex-wrap: wrap; }
  .aff2-step { flex: 1 1 320px; height: auto; }
  .aff2-step__link { display: none; }
  .aff2-step__art { height: 240px; overflow: hidden; }
  /* the per-card rules below 1512 are (0,2,1); this has to out-specify them or
     the 351px art stays absolutely sized and gets cropped by the narrower card. */
  .aff2-step--1 .aff2-step__art img,
  .aff2-step--2 .aff2-step__art img,
  .aff2-step--3 .aff2-step__art img {
    position: static; left: auto; top: auto;
    width: 100%; height: 100%; object-fit: contain;
  }
  .aff2-promise, .aff2-refund, .aff2-give, .aff2-discord { height: auto; }
  .aff2-promise__stage, .aff2-refund__stage, .aff2-give__stage, .aff2-discord__stage { height: auto; padding: 96px 0; }
  .aff2-promise__col, .aff2-refund__col, .aff2-give__col, .aff2-discord__col { position: relative; left: auto; right: auto; top: auto; width: auto; max-width: 640px; margin: 0 var(--gutter); }
  .aff2-discord__col { margin: 0 auto; transform: none; }
  .aff2-promise__trails, .aff2-promise__phone, .aff2-promise__coin, .aff2-promise__shade, .aff2-chip { opacity: .35; }
  .aff2-refund__art { opacity: .5; }
  .aff2-refund .aff2-h2, .aff2-give__h2 { width: auto; max-width: 100%; }
  .aff2-why__globe { width: 100%; max-width: 878px; }
}
@media (max-width: 1180px) {
  .aff2-benefits { flex-wrap: wrap; }
  .aff2-benefit { flex: 1 1 260px; }
}
@media (max-width: 1024px) {
  .aff2-h2--80 { font-size: 52px; line-height: 54px; letter-spacing: -1.56px; }
  .aff2-h2--64 { font-size: 46px; line-height: 48px; letter-spacing: -1.38px; }
  .aff2-step p { font-size: 17px; line-height: 23px; }
  .aff2-chip { display: none; }
  .aff2-why__globe { height: 300px; }
  .aff2-why__globe::before { left: 50%; margin-left: -451px; top: -140px; }
  .aff2-ticker { left: 50%; margin-left: -116.2px; }
}
@media (max-width: 760px) {
  .aff2-steps { padding: 72px var(--gutter); }
  .aff2-why { padding: 72px var(--gutter); }
  .aff2-h2--80 { font-size: 38px; line-height: 40px; letter-spacing: -1.14px; }
  .aff2-h2--64 { font-size: 34px; line-height: 36px; letter-spacing: -1.02px; }
  .aff2-benefits { flex-direction: column; align-items: stretch; }
  .aff2-benefit { width: auto; }
  .aff2-give__form { width: 100%; max-width: 100%; }
  .aff2-give__sub, .aff2-promise__body, .aff2-promise__legal, .aff2-refund__body { width: auto; max-width: 100%; }
  .aff2-give__plate { display: none; }
  .aff2-give__hand, .aff2-give__coin, .aff2-give__glow { display: none; }
  .aff2-promise__trails, .aff2-promise__phone, .aff2-promise__coin, .aff2-promise__shade { display: none; }
  .aff2-discord__sub { width: auto; }
  .aff2-why__globe { height: 220px; }
  .aff2-why__globe::before { transform: scale(.62); transform-origin: 50% 0; }
  .aff2-ticker { transform: scale(.9); transform-origin: 50% 0; }
  .aff2-discord__col { width: auto; max-width: 100%; margin: 0 var(--gutter); }
  .aff2-discord__foot { width: auto; }
}
@media (max-width: 560px) {
  .aff2-h2--80, .aff2-h2--64 { font-size: 32px; line-height: 34px; letter-spacing: -.96px; }
  .aff2-step p { font-size: 16px; line-height: 22px; }
  /* the base row is align-items:center; once it turns into a column that
     centres each card at its CONTENT width, which at 375 is 399px and blows
     64px out of the viewport. Stretch instead and pin the card to 100%. */
  .aff2-steps__row { flex-direction: column; align-items: stretch; }
  .aff2-step { width: 100%; flex: none; height: auto; }
  .aff2-steps, .aff2-why { padding-left: 20px; padding-right: 20px; }
  .aff2-promise__stage, .aff2-refund__stage, .aff2-give__stage, .aff2-discord__stage { padding-left: 0; padding-right: 0; }
  .aff2-promise__col, .aff2-refund__col, .aff2-give__col, .aff2-discord__col { margin-left: 20px; margin-right: 20px; }
  .aff2-step__art { height: 200px; }
}

/* ================= PRICING BAND HEAD  959:164653 / 959:164668 ===========
   The pricing table itself is the signed-off shared component (declared
   deviation, see the page comment). Its HEAD, though, is drawn on THIS frame
   and differs from home's: the futures frame puts the head 120 below the band
   top where home puts it 200, the sub is a 316-wide two-line box rather than
   558 with a hard <br>, and the gap between the titles and the sub is 32, not
   the stack's 16. Scoped to this page by the market attribute so / is
   untouched. ============================================================= */
.afxp[data-afxp-market="futures"] .afxp__flow { padding-top: 120px; }
.afxp[data-afxp-market="futures"] .afxp-head__sub { width: 316px; margin-top: 16px; }

/* ================= FINAL CTA BAND  959:234960 =========================
   .afxf / atlas-final.css is built from the HOME frame (705:77958) and is
   correct there. The futures frame differs in four measured places, so they
   are overridden here rather than in the shared file:
     content column   home (477,120) 558x392   futures (477,175) 558x403
     dark plate       home 737x41 @388,725     futures 933x41 @290,725
     footnote row     home 706x16 @403,735     futures 476x28 @518,735 @.4
     footer offset    home +43 below the row   futures +31
   ===================================================================== */
.afxf--ft .afxf__inner { margin-top: 175px; }
/* 959:234984 / 959:234985 — the futures final headline is 96/96/-2.88 over a
   451 and a 712 box. The shared rule is 80px because HOME's final headline
   ("$5 today.") really is 80. Shipping 80 here made the whole band 32px short
   and every offset below it wrong. */
.afxf--ft .afxf__h2 { font-size: 96px; line-height: 96px; letter-spacing: -2.88px; }
/* background-IMAGE, not the shorthand: `background:` resets background-clip
   back to border-box and paints the whole box as a solid white bar. */
.afxf--ft .afxf__h2 .afxf__h2a { background-image: linear-gradient(123.6deg, #F8F8F8 44.8%, #636363 93.2%); }
.afxf--ft .afxf__plate { left: 290px; width: 933px; }
.afxf--ft .afxf__note {
  position: relative; z-index: 2;
  width: 476px; margin: 157px auto 0; text-align: center; opacity: .4;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; letter-spacing: 0; color: var(--af-white);
}
.afxf--ft .afxf__footer { margin-top: 31px; }
@media (max-width: 1280px) {
  .afxf--ft .afxf__inner { margin-top: 96px; }
  .afxf--ft .afxf__note { width: auto; max-width: 476px; margin: 96px var(--gutter) 0; line-height: 20px; }
  .afxf--ft .afxf__plate { display: none; }
}

/* 959:164675 — "futures account" is a 610-wide text node; the shared rule
   leaves t2 to the 558 head width, which wraps it onto three lines. t1 is
   already given its own 586 in the shared file for the same reason. */
.afxp[data-afxp-market="futures"] .afxp-head__t2 { width: 610px; flex: none; }

/* 959:214587 — the placeholder text node carries textCase TITLE */
.aff2-give__input::placeholder { text-transform: capitalize; }

/* ============ FAQ puzzle art, 959:214564/5/6 ==========================
   atlas-faq.css positions these from the HOME frame, where the single piece
   is on the LEFT and the pair on the RIGHT. The futures frame mirrors it:
   image 1156 sits at the left edge, 1154 + 1155 on the right. Sizes are the
   unrotated square (AABB / (|cos r| + |sin r|)); left/top are the centre.
   ==================================================================== */
.afxq .afxq__puzzle--a { width: 303.3px; height: 303.3px; left: 1451.4px; top: 656.4px; margin: -151.65px 0 0 -151.65px; transform: rotate(-9.86deg); filter: none; }
.afxq .afxq__puzzle--b { width: 382.3px; height: 382.3px; left: 1298.35px; top: 817.35px; margin: -191.15px 0 0 -191.15px; transform: rotate(35.14deg); filter: blur(3.5px); }
.afxq .afxq__puzzle--c { width: 302.1px; height: 302.1px; left: -6.2px; top: 590.8px; margin: -151.05px 0 0 -151.05px; transform: rotate(-21.42deg); filter: blur(2.45px); }

/* 959:194089 — on THIS frame the stories sub-headline is a 330-wide text node
   that wraps to two lines (42 tall), which is what makes the head frame 283.
   The shared 614 fits it on one line. Scoped here because /'s own
   sub-headline string is longer and 330 would wrap it to four lines, i.e. the
   shared value is right for home and wrong only for this page. */
.afxt[data-afxt] .afxt__sub { width: 330px; }