/* ============================================================================
   Instant Funding band 5 — "Everything you wish other prop firms actually did".
   Figma 804:88052 (1512 x 1397). Light band.

   The eyebrow, both title lines and the lead carry the SAME copy as the home
   "Why Atlas" band (705:16383), but the card set below is different (one wide
   teal card + two light cards, plus a lime CTA the home band does not have)
   and the band is 1397 tall against home's 1601 — so the type scale is reused
   from atlas-why.css's values, the cards are this page's own.

   Child order is back-to-front:
     804:88053  decorative line group 2011.5x836.5 at (-165,-562)
     804:88057  mask group 1392x1039.5 at (-278,-94), opacity .9 — the same
                exported art the affiliates band already ships
     804:88060  content 1073x1117 at (220,120), column, gap 50, centred
   ========================================================================= */

.afxif-why {
  position: relative;
  isolation: isolate;
  min-height: 1397px;
  overflow: hidden;
  background: linear-gradient(180deg, #EBEDF2 0%, #FFFFFF 100%);
  font-family: var(--font-sans);
  color: #0D0D0D;
}

/* 804:88053 — line group. Fixed-size STAGE art: stays centred on the 1512
   design frame instead of left-aligning above it. */
.afxif-why__lines {
  position: absolute; left: 50%; margin-left: -921px; top: -562px;
  width: 2011.5px; height: 836.5px;
  background: url('/assets/figma/if-why-lines.webp') no-repeat 0 0 / 2011.5px 836.5px;
  pointer-events: none; z-index: 0;
}
/* 804:88057 — soft wash, opacity .9 */
.afxif-why__wash {
  position: absolute; left: 50%; margin-left: -1034px; top: -94px;
  width: 1392px; height: 1039.5px;
  background: url('/assets/figma/6013132-2-c0b789.webp') no-repeat 0 0 / 1392px 1039.5px;
  opacity: .9; pointer-events: none; z-index: 0;
}

/* 804:88060 — 1073x1117 at (220,120): column, gap 50, align CENTER */
.afxif-why__inner {
  position: relative; z-index: 2;
  width: 1073px; max-width: 100%; margin: 0 auto;
  padding: 120px 0 160px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 50px;
}

/* 804:88061 — head 1026x289, column, gap 32 */
.afxif-why__head { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 1026px; max-width: 100%; }
.afxif-why__headstack { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }

/* 804:88063 — pill 116x33, radius 57, padding 6/14, gap 7, ships bare */
.afxif-why__eyebrow {
  margin: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 57px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: #0D0D0D;
}
.afxif-why__eyebrow img { width: 16px; height: 16px; display: block; flex: none; }
/* chars 0-2 of 804:88072 are #3F4547 at 60%, same override as the home band */
.afxif-why__eyebrow i { font-style: normal; color: rgba(63,69,71,.6); }

/* 804:88073 — 1026x160, two 80px lines at 100% leading, gap 0 */
.afxif-why__titles { display: flex; flex-direction: column; align-items: center; width: 100%; }
.afxif-why__t1, .afxif-why__t2 {
  margin: 0; text-align: center; flex: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
}
.afxif-why__t1 {
  background: linear-gradient(165.4deg, #0D0D0D 0%, #CECECE 100%);
  -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;
}
.afxif-why__t2 { color: #0D0D0D; }

/* 804:88076 — 548x48, opacity .8 */
.afxif-why__lead {
  margin: 0; width: 548px; max-width: 100%; text-align: center; opacity: .8;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px; color: #0D0D0D;
}
/* 804:88076 runs on at 1512; 804:118017 breaks after "this list." at 393 */
.afxif-why__br-m { display: none; }
@media (max-width: 768px) { .afxif-why__br-m { display: inline; } }

/* 804:88077 — card stack 1073x672, gap 16 */
.afxif-why__cards { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.afxif-why__row { display: flex; flex-direction: row; gap: 16px; width: 100%; }

/* ---- 804:88079 — card A, 1073x280, radius 32 ---------------------------- */
.afxif-why__a {
  position: relative; overflow: hidden;
  width: 100%; height: 280px; box-sizing: border-box;
  padding: 24px 24px 122px;
  border-radius: var(--r-32);
  background: linear-gradient(180deg, #053F3B 0%, #7CB1AC 100%);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
}
/* 804:88085 — chart layer. The exported asset is the RENDER of the mask
   group, so the gradient mask and the two LINEAR_DODGE chart copies inside it
   are already resolved; only the group's own opacity .7 and its blend against
   the card are left to CSS. LINEAR_DODGE is plus-lighter. */
.afxif-why__a-chart {
  position: absolute; left: 426px; top: -67px; width: 781px; height: 439px;
  opacity: .7; mix-blend-mode: plus-lighter;
  pointer-events: none; z-index: 0;
}
/* 804:88090 — the iPhone, masked to 669.7x669.7 at (466,-31). Figma renders
   the drop shadow outside the mask, so the exported PNG is 797.5x806.5 with
   the bleed all below and split evenly left/right: left = 466 - (797.5-669.7)/2. */
.afxif-why__a-phone {
  position: absolute; left: 402.1px; top: -31px; width: 797.5px; height: 806.5px;
  pointer-events: none; z-index: 1;
}
.afxif-why__a-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; width: 100%; }
/* 804:88082 — SF Pro 590 / 32 / 38.4px / ls -.96, two lines.
   804:88081 is a 136.4x38.4 glass plate behind line 2 ("Day One") — a
   rectangle sibling, drawn as a chip on the second line here. */
.afxif-why__a-h {
  margin: 0; color: var(--af-white);
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 32px; line-height: 38.4px; letter-spacing: -.96px;
}
.afxif-why__a-h span {
  display: inline-block; padding: 0 8px; border-radius: var(--r-12);
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* 804:88083 — SF Pro 510 / 16 / 21.12px / ls -.48, opacity .9 */
.afxif-why__a-p {
  margin: 0; max-width: 420px; color: var(--af-white); opacity: .9;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 21.12px; letter-spacing: -.48px;
}

/* ---- 804:88100 / 804:88112 — the two light cards, 528.5x376 ------------- */
.afxif-why__c {
  position: relative; overflow: hidden;
  flex: 1; height: 376px; box-sizing: border-box;
  padding: 24px; border-radius: var(--r-32);
  background: #FBFBFB;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 16px;
}
/* 804:88103-05 / 804:88113-15 — three 458x458 radial washes per card, node
   opacity .2 over a fill opacity .6. Converted straight from the node's
   gradient rather than fitted against the reference. */
.afxif-why__blob {
  position: absolute; width: 458px; height: 458px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,177,172,.6) 0%, rgba(255,255,255,.18) 50.85%, rgba(245,247,253,0) 75.23%);
  opacity: .2; pointer-events: none; z-index: 0;
}
/* 804:88107 (image 1187) and 804:88119 (image 1188) are both blendMode
   MULTIPLY. The exported renders bake that against white, so shipped
   normally each art sits in a visible white plate against the #FBFBFB card.
   Multiply is a no-op over white and restores the drawn result. */
.afxif-why__c-art { position: absolute; z-index: 1; pointer-events: none; mix-blend-mode: multiply; }
.afxif-why__c-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; }
/* 804:88101 / 804:88116 — SF Pro 590 / 24 / 28.8px / ls -.72 */
.afxif-why__c-h {
  margin: 0; color: #0D0D0D;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 24px; line-height: 28.8px; letter-spacing: -.72px;
}
/* 804:88102 / 804:88117 — SF Pro 400 / 16 / 21.12px / ls -.48, opacity .8 */
.afxif-why__c-p {
  margin: 0; color: #0D0D0D; opacity: .8;
  font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: 16px; line-height: 21.12px; letter-spacing: -.48px;
}

/* card C — 804:88106 art at (24,3) 419x259; blobs at (329,66) (-96,-163) (137,-221) */
.afxif-why__c--devices .afxif-why__c-art { left: 24px; top: 3px; width: 419px; height: 259px; }
.afxif-why__c--devices .afxif-why__blob--1 { left: 329px; top: 66px; }
.afxif-why__c--devices .afxif-why__blob--2 { left: -96px; top: -163px; }
.afxif-why__c--devices .afxif-why__blob--3 { left: 137px; top: -221px; }
.afxif-why__c--devices .afxif-why__c-p { max-width: 415px; }

/* card D — 804:88118 art at (140.5,15) 238x224; blobs at (259.5,-75) (-204.5,-62) (-7.5,-214) */
.afxif-why__c--shield .afxif-why__c-art { left: 140.5px; top: 15px; width: 238px; height: 224px; }
.afxif-why__c--shield .afxif-why__blob--1 { left: 259.5px; top: -75px; }
.afxif-why__c--shield .afxif-why__blob--2 { left: -204.5px; top: -62px; }
.afxif-why__c--shield .afxif-why__blob--3 { left: -7.5px; top: -214px; }

/* 804:88120 — lime CTA 241x56, shared token */
.afxif-why__cta { text-transform: capitalize; }

/* ---- narrower viewports -------------------------------------------------- */
@media (max-width: 1120px) {
  .afxif-why__inner { width: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
  .afxif-why__t1, .afxif-why__t2 { white-space: normal; font-size: 56px; line-height: 58px; letter-spacing: -1.68px; }
  .afxif-why__row { flex-direction: column; }
  .afxif-why__c { height: auto; min-height: 376px; }
}

/* ---- 393 mobile — Figma 804:118001 (393 x 1472 content) -----------------
   Same three cards, stacked, art above copy in each. Titles drop to 42/42. */
@media (max-width: 768px) {
  .afxif-why { min-height: 1747px; }
  .afxif-why__lines { margin-left: -575px; top: -308px; width: 1150px; height: 478px; background-size: 1150px 478px; }
  .afxif-why__wash { margin-left: -696px; }
  /* 804:118001 — content 393x1472 at band y=94, gap 50, bottom 181.
     804:118018 — cards 345x1033 at y=333, gap 8 (not the desktop 16), and
     the three cards are 358 / 369 / 290 tall, not one shared height. */
  .afxif-why__inner { width: auto; padding: 94px 24px 181px; gap: 50px; align-items: flex-start; }
  .afxif-why__head { width: 345px; max-width: 100%; align-items: flex-start; gap: 20px; }
  .afxif-why__headstack { align-items: flex-start; }
  .afxif-why__titles { align-items: flex-start; }
  .afxif-why__t1, .afxif-why__t2 { text-align: left; font-size: 42px; line-height: 42px; letter-spacing: -1.26px; }
  .afxif-why__lead { width: 345px; max-width: 100%; text-align: left; }
  .afxif-why__cards { gap: 8px; }
  .afxif-why__row { gap: 8px; }

  /* 804:118019 — 345x358. Copy sits at the TOP here (y=20), not the bottom,
     and 804:118038 is a single 29px line so the chip only wraps "Day One". */
  .afxif-why__a { height: 358px; padding: 20px; justify-content: flex-start; }
  .afxif-why__a-body { gap: 12px; }
  .afxif-why__a-h { font-size: 24px; line-height: 29px; letter-spacing: -.72px; }
  .afxif-why__a-h br { display: none; }
  .afxif-why__a-p { max-width: 297px; }
  /* 804:118021 is the same art group as desktop's 804:88084, drawn
     632.3x585.3 at (-163,-151) against desktop's 795x736 at (412,-364) —
     a uniform 0.795 scale. Each layer is therefore the desktop placement
     re-anchored to the mobile group origin and scaled by 0.795, rather than
     eyeballed: that put the phone at the card's top edge and left the copy
     sitting unreadably on top of it.
       chart  (426,-67)   -> (-151.9, 85.1)  621x349
       phone  (402.1,-31) -> (-170.9, 113.7) 634x641
     Both start below the 20..124 copy block, which is what keeps it legible. */
  .afxif-why__a-chart { left: -151.9px; top: 85.1px; width: 621px; height: 349px; }
  /* The phone does not scale cleanly with the group: the exported PNG carries
     shadow bleed, so the box and the phone inside it are different rectangles.
     Placed instead from the 804:118018 render, where the handset occupies
     roughly x 110..340, y 150..bottom of the card. The render's own alpha
     bounds put the handset at x .098-.500 and y .238-.913 of the box, which
     back-solves to a 572.7x579.2 box at (53.6, 12.2). */
  .afxif-why__a-phone { left: 53.6px; top: 12.2px; width: 572.7px; height: 579.2px; }

  /* 804:118040 — 345x369, art 304x170.5 at (20,33.5), copy from y=220 */
  /* flex:1 from the base rule means flex-basis:0, which beats `height` on a
     column flex item and collapsed both cards to their content; min-height
     376 from the 1120 block would floor them at the desktop height. Both
     have to go for 804:118040 and 804:118054 to take their drawn 369/290. */
  .afxif-why__c { padding: 20px; justify-content: flex-end; min-height: 0; flex: none; }
  .afxif-why__c--devices { height: 369px; }
  .afxif-why__c--devices .afxif-why__c-art { left: 20px; top: 33.5px; width: 304px; height: 187.5px; }
  .afxif-why__c--devices .afxif-why__c-p { max-width: 305px; }
  /* 804:118054 — 345x290, shield 156x147 at (83,20), copy from y=183 */
  .afxif-why__c--shield { height: 290px; }
  .afxif-why__c--shield .afxif-why__c-art { left: 83px; margin-left: 0; top: 20px; width: 156px; height: 147px; }
  .afxif-why__c-h { font-size: 24px; line-height: 29px; }
  /* 804:118064 — 241x56 at x=76, i.e. centred in the 345 column */
  .afxif-why__cta { align-self: center; }
}