/* ============================================================================
   Instant Funding band 4 — "Start Trading With Professional Tools".
   Figma 804:88028 (1512 x 800). Base fill #0F0F0F.

   DESKTOP ONLY. The 393 frame has no counterpart for this band and the
   arithmetic confirms it is dropped rather than restyled: the six band
   deltas between the two frames sum to exactly the 2153px height difference
   only when this 800px band is removed. Hidden below 768 rather than
   rebuilt — see fragments/if-platform.html.

   Child order is back-to-front:
     804:88029  photo 1512x840 at y=100, scaleMode FILL, + a #0F0F0F top fade
     804:88030  photo 1512x979 at y=0,  scaleMode STRETCH, + the same fade
     804:88031  visible:false — NOT built
     804:88034  bottom scrim 1512x248 at y=552
     804:88035  top scrim 1512x324 at y=0
     804:88036  content row 1432x177 at (40,40), space-between
   ========================================================================= */

.afxif-plat {
  position: relative;
  isolation: isolate;
  min-height: 800px;
  overflow: hidden;
  background: #0F0F0F;
  font-family: var(--font-sans);
  color: var(--af-white);
}

/* 804:88030 — the visible photo, 1512x979 at y=0, scaleMode STRETCH, with a
   #0F0F0F -> transparent top fade stacked over it (fills[1] paints on top).

   804:88029 (1512x840 at y=100) is NOT built: it sits entirely inside
   804:88030's box and that layer's photo is fully opaque, so it can never be
   seen. Building it painted a second copy of the same top fade over the same
   pixels and visibly crushed the photo — the band came out far darker than
   the reference. One layer, one fade. */
/* `100% 100%` stretched the photo to whatever the viewport was: this layer is
   full-bleed, so at 2400px it was drawn 59% wider than its natural ratio and
   the two traders came out visibly distended. `cover` fills the same box and
   crops instead, which is what .afxif-hero__bg already does for the same
   reason. The content column beside it was never the problem — it caps at
   --page and centres correctly. */
.afxif-plat__b {
  position: absolute; left: 0; right: 0; top: 0; width: auto; min-width: 1512px;
  height: 979px;
  background: url('/assets/figma/if-plat-b.webp') center / cover no-repeat;
  pointer-events: none; z-index: 0;
}
.afxif-plat__b::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #0F0F0F 0%, rgba(15,15,15,0) 100%);
}

/* 804:88035 — top scrim 1512x324 at y=0.
   DECLARED DEVIATION on direction. The node's handles run (0.509,1) ->
   (0.509,0), which reads as opaque #0F0F0F at the BOTTOM of the box fading up
   to clear at the band's top edge. Built that way it lands fully opaque at
   y=324 and then simply stops, drawing a hard horizontal seam across the
   whole band — and the frame's own render has no such seam. Reconstructing
   the full layer stack against that render scores the two directions within
   0.04/255 of each other, so the pixels do not decide it and the seam does.
   Shipped opaque at the top, fading down into the photo, which is also what
   the heading needs to sit on. */
.afxif-plat__scrim-t {
  position: absolute; left: 0; right: 0; top: 0; width: auto; height: 324px; z-index: 2;
  background: linear-gradient(180deg, #0F0F0F 0%, rgba(15,15,15,0) 100%);
  pointer-events: none;
}
/* 804:88034 — bottom scrim 1512x248 at y=552, so it ends flush at 800 */
.afxif-plat__scrim-b {
  position: absolute; left: 0; right: 0; top: 552px; width: auto; height: 248px; z-index: 2;
  background: linear-gradient(0deg, #0F0F0F 0%, rgba(15,15,15,.8) 50%, rgba(15,15,15,0) 100%);
  pointer-events: none;
}

/* 804:88036 — 1432x177 at (40,40): row, SPACE_BETWEEN, align CENTER */
.afxif-plat__inner {
  position: relative; z-index: 3;
  width: var(--page); max-width: 100%; margin: 0 auto;
  padding: 40px 0 0; box-sizing: border-box;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 40px;
}

/* 804:88037 — 596x177, column, gap 16 */
.afxif-plat__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 596px; }

/* 804:88038 — pill 153x33, radius 57, padding 6/14, gap 7, backdrop-blur 17 */
.afxif-plat__eyebrow {
  margin: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 57px;
  backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px);
}
.afxif-plat__eyebrow img { width: 16px; height: 16px; display: block; flex: none; }
.afxif-plat__eyebrow span {
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-white);
}

/* 804:88048 — 596x128, two 64px lines at 100% leading, gap 0 */
.afxif-plat__titles { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.afxif-plat__t1, .afxif-plat__t2 {
  margin: 0; flex: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 64px; line-height: 64px; letter-spacing: -1.92px;
}
/* 804:88049 — the top fill (#F8F8F8 -> #636363) is opaque and covers the one
   below it, so only it renders */
.afxif-plat__t1 {
  background: linear-gradient(162.2deg, #F8F8F8 0%, #636363 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-plat__t2 { color: var(--af-white); }

/* 804:88051 — lime button 244x56, reuses the shared .afx-btn-lime token.
   The instance's DEFAULT text is "Start your challenge"; the override on
   this page is "Explore the Platform", with textCase TITLE. */
.afxif-plat__cta { flex: none; text-transform: capitalize; }

@media (max-width: 1512px) {
  .afxif-plat__inner { padding-left: var(--gutter); padding-right: var(--gutter); }
}
@media (max-width: 1120px) {
  .afxif-plat__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .afxif-plat__head { width: auto; max-width: 100%; }
  .afxif-plat__t1, .afxif-plat__t2 { white-space: normal; font-size: 48px; line-height: 50px; letter-spacing: -1.44px; }
}

/* not drawn in the 393 frame */
@media (max-width: 768px) { .afxif-plat { display: none; } }