/* ============================================================================
   Instant Funding band 1 — announcement bar + hero.
   Figma 804:61305 (1512 x 56, the bar) + 804:61311 (1512 x 890, the hero),
   two SIBLING frames, so the section is 946 tall in total. This page DOES
   carry the announcement bar, confirmed in the frame — unlike Free Trial.
   Navbar sits at y=10 inside the hero, i.e. y=66 on the page, the same
   pattern as home and Instant Zero.

   Figma child order is back-to-front. The hero frame itself carries the photo
   as an IMAGE fill with scaleMode FILL, so it is the section background
   rather than a placed <img>.
   ========================================================================= */

.afxif-hero {
  position: relative;
  isolation: isolate;
  min-height: 946px;
  overflow: hidden;
  background: #051F1D;
  font-family: var(--font-sans);
  color: var(--af-white);
}

/* 804:61311 — the hero's own IMAGE fill, scaleMode FILL, 1512x890 at y=56.
   Full-bleed: this is a band background, not placed art, so it spans the
   viewport and keeps its aspect via `cover`. Pinned at 1512 it would leave a
   bare strip down the right on wider viewports. */
.afxif-hero__bg {
  position: absolute; left: 0; right: 0; top: 56px; width: auto; min-width: 1512px;
  height: 890px;
  background: url('/assets/figma/if-hero-bg.webp') center / cover no-repeat;
  pointer-events: none; z-index: 0;
}

/* 804:61312 "Ellipse 473" — 1693x956 at (-561, 80) relative to the hero,
   #051F1D, LAYER_BLUR 516 (Figma radius is ~2x the CSS blur() value),
   blendMode HARD_LIGHT.
   DECLARED DEVIATION: the node also carries BACKGROUND_BLUR 316. Chrome
   composites backdrop-filter on a mix-blend-mode element as an opaque frosted
   plate, nothing like Figma's result — the same call already taken on the home
   final band. Layer blur + hard-light alone matches the reference export. */
.afxif-hero__glow {
  position: absolute; left: 50%; margin-left: -1317px; top: 136px;
  width: 1693px; height: 956px;
  background: #051F1D; border-radius: 50%;
  filter: blur(258px);
  mix-blend-mode: hard-light;
  pointer-events: none; z-index: 1;
}

/* 804:61313 "Overlay" — 1512x900 at (0,0) relative to the hero: a horizontal
   teal wash that darkens both edges. Full-bleed for the same reason as __bg. */
.afxif-hero__overlay {
  position: absolute; left: 0; right: 0; top: 56px; width: auto; height: 900px;
  background: linear-gradient(89.8deg,
    rgba(5,63,59,.62) 0%,
    rgba(194,213,213,0) 21.36%,
    rgba(194,213,213,0) 83.19%,
    rgba(5,63,59,.4) 100%);
  pointer-events: none; z-index: 2;
}

.afxif-hero__inner { position: relative; z-index: 3; }

/* 804:61305 — this frame's bar is NOT the centred two-pill component every
   other page ships. The Forex/Futures group stays at x=10 and 804:61310
   ("Instant Zero / No Consistency Rules") is pinned right, ending at x=1502.
   Modifier only: the shared .afx-bar is untouched for every other page. */
.afx-bar--split { justify-content: space-between; }
.afx-bar__group { display: flex; flex-direction: row; align-items: center; gap: 12px; }
/* the mobile frame 804:88253 drops the right-hand pill and re-centres */
@media (max-width: 768px) {
  .afx-bar--split { justify-content: center; }
  .afxif-hero__barend { display: none; }
}

/* content column: the hero content sits at x=46 on the 1512 frame, NOT at the
   40px page gutter, so the column is 1420 wide. Centred, so it holds above
   1512 instead of left-aligning. */
.afxif-hero__body {
  width: 100%; max-width: 1420px; margin: 0 auto; box-sizing: border-box;
}
@media (max-width: 1512px) { .afxif-hero__body { padding: 0 var(--gutter); } }

/* 804:61329 — content block 1054x452 at (46, 187) relative to the hero.
   The navbar occupies 10+59=69 of the hero, so the block's top margin off the
   navbar is 187 - 69 = 118. Figma y offsets are margins, never padding. */
.afxif-hero__block { margin-top: 118px; max-width: 1054px; }

/* 804:61330 — glass pill 155x28, radius 9, padding 2/8, gap 7.
   Fill is a 10% gradient and the 1px INSIDE stroke is itself a gradient at
   41%, so both are painted as pseudo-elements: border-color cannot take a
   gradient, and flattening it to a solid is how a glass surface loses its
   look. */
.afxif-hero__eyebrow {
  margin: 0; position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 2px 8px; border-radius: 9px;
  box-shadow: 8px 10px 19px 0 rgba(5,63,59,.13);
  backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px);
}
.afxif-hero__eyebrow::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(73.7deg, #7CB1AC 0%, #FFFFFF 47.67%, #7CB1AC 100%);
  opacity: .1; pointer-events: none;
}
.afxif-hero__eyebrow::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(3.8deg, #FFFFFF 0%, rgba(255,255,255,0) 29.81%, #FFFFFF 54.81%, rgba(255,255,255,0) 100%);
  opacity: .41;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
}
.afxif-hero__eyebrow img { width: 16px; height: 16px; display: block; flex: none; position: relative; }
.afxif-hero__eyebrow span {
  position: relative;
  font-family: var(--font-sans); font-weight: var(--w-semi);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px; color: var(--af-white);
}

/* 804:61333 — SF Pro 510 / 110 / 99px / ls -3.3, two lines, 1054 wide.
   Gap 32 from the eyebrow in the auto-layout column. */
.afxif-hero__h1 {
  margin: 32px 0 0; max-width: 1054px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 110px; line-height: 99px; letter-spacing: -3.3px;
  color: var(--af-white);
}

/* 804:61334 — DM Sans 500 / 18 / 27px, 480 wide, opacity .8 */
.afxif-hero__lead {
  margin: 32px 0 0; max-width: 480px;
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; color: var(--af-white); opacity: .8;
}

/* 804:61335 — CTA row. 804:61340, the "Start your challenge" ghost button, is
   visible:false in the file and is deliberately NOT built. */
.afxif-hero__ctas { display: flex; flex-direction: row; gap: 12px; align-items: center; margin-top: 32px; }

/* 804:61336 — 218x49, radius 28, padding 14/20, gap 8, ink #001D21.
   Ink is set explicitly: a lime button must never inherit link colour. */
.afxif-hero__cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 49px; padding: 14px 20px; border-radius: 28px; box-sizing: border-box;
  background: var(--af-lime); color: var(--af-ink-teal);
  font-family: var(--font-ui); font-weight: var(--w-semi);
  font-size: 16px; line-height: 20.83px; letter-spacing: -.48px;
  text-transform: capitalize;   /* Figma style.textCase = TITLE */
  text-decoration: none; white-space: nowrap; border: 0;
  transition: transform var(--t-instant) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.afxif-hero__cta::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--af-card-g);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
}
.afxif-hero__cta img { width: 20px; height: 20px; display: block; flex: none; transition: transform var(--t-fast) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .afxif-hero__cta:hover { box-shadow: 2px 18px 30px 0 rgba(38,63,66,.18); }
  .afxif-hero__cta:hover img { transform: translateX(2px); }
}
.afxif-hero__cta:active { transform: scale(.97); }

/* 804:61314/19/24 — three stat columns 449x90 at x=46/534/1022, i.e. a
   1425-wide row with gap 39. The rule is 436 wide inside its 449 column, not
   full width, so .afx-stat__rule is overridden here.
   Top: the block ends at 187+452=639 on the hero; the strip starts at 781. */
/* The strip spans x=46..1471, so it is 1425 wide and overhangs the content
   column's 1420 by 5px on the right — the frame's right margin is 41 here,
   not the 46 the content block uses. A max-width alone let the 1420 column
   clamp it 5px narrow. */
.afxif-hero__stats {
  display: flex; flex-direction: row; gap: 39px; align-items: flex-start;
  width: 1425px; max-width: none; height: 90px; margin-top: 142px;
}
@media (max-width: 1512px) { .afxif-hero__stats { width: 100%; } }
.afxif-hero__stats .afx-stat { gap: 17px; }
.afxif-hero__stats .afx-stat__rule { width: 436px; max-width: 100%; }

/* ---- narrower viewports -------------------------------------------------- */
@media (max-width: 1512px) {
  .afxif-hero__bg, .afxif-hero__overlay { left: 0; width: 100%; }
  .afxif-hero__glow { left: 50%; margin-left: -846px; }
}
@media (max-width: 1120px) {
  .afxif-hero__h1 { font-size: 76px; line-height: 72px; letter-spacing: -2.28px; }
  .afxif-hero__stats { flex-wrap: wrap; height: auto; gap: 24px 39px; }
}

/* ---- 393 mobile — Figma 804:88250 (393 x 852) ----------------------------
   The mobile frame is its own art (804:88250 carries a different IMAGE fill),
   the h1 drops to 64/57.6 and the stat values to 20/30, and the ghost CTA
   stays absent. */
@media (max-width: 768px) {
  .afxif-hero { min-height: 852px; }
  .afxif-hero__bg {
    top: 0; height: 852px; min-width: 0;
    background-image: url('/assets/figma/if-hero-bg-m.webp');
  }
  .afxif-hero__overlay { top: 0; height: 852px; }
  .afxif-hero__glow { width: 1311px; height: 740px; margin-left: -655px; top: 146px; filter: blur(160px); }
  /* 804:88289 — content 345x515 at (24,188); 804:88273 — stats 345x63 at
     y=765. Every offset below is that frame's, measured, not scaled down
     from the desktop values. */
  .afxif-hero__body { padding: 0 24px; }
  .afxif-hero__block { margin-top: 62px; max-width: 345px; }
  /* 804:88294 — 345x232 at y=44 inside the 276-tall stack, so 44 - 28 */
  .afxif-hero__h1 { font-size: 64px; line-height: 57.6px; letter-spacing: -1.92px; margin-top: 16px; }
  /* 804:88295 — 345x135 at y=300 */
  .afxif-hero__lead { font-size: 18px; line-height: 27px; letter-spacing: -.36px; margin-top: 24px; max-width: 345px; }
  /* 804:88296 — 243x56 at y=459, the standard button box, not the hero's
     desktop 218x49 */
  .afxif-hero__ctas { margin-top: 24px; }
  .afxif-hero__cta { height: 56px; padding: 18px 32px; border-radius: var(--r-pill); }
  .afxif-hero__stats {
    gap: 0; height: 63px; margin-top: 62px; width: 345px; max-width: 100%;
    justify-content: space-between;
  }
  .afxif-hero__stats .afx-stat { gap: 12px; flex: 1; }
  .afxif-hero__stats .afx-stat__rule { width: 100%; }
  .afxif-hero__stats .afx-stat__value { font-size: 20px; line-height: 30px; }
}


/* ---------------------------------------------------------------------------
   MOBILE PERFORMANCE, 3 Aug 2026
   This decorative glow carries filter: blur(258px) over a box ~1693x956. Blur
   cost is O(area x radius), so on a phone GPU it is one of the most expensive
   things on the page — and because it sits in the backdrop root, anything that
   samples the backdrop (the mobile menu's overlay) had to resolve it first,
   which took ~15s. A 258px-blurred solid ellipse is, visually, a radial
   gradient; below 768 it is drawn as one, for nothing.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .afxif-hero__glow {
    filter: none;
    background: radial-gradient(closest-side, #051F1D 0%, rgba(5,31,29,0) 100%);
  }
}