/* ============================================================================
   Models Overview band 3 — "From sign-up to payout", the four steps.
   Figma 1048:438407 "Models Overview page new" (1512 x 1210).

   ⚠ THREE alternate bands are stacked at y=2693 in the desktop frame:
     1048:438235 (2553) visible:false
     1048:438320 (1417) visible:false
     1048:438407 (1210) visible:true   <- this one
   Two of the three carry near-identical copy, so they cannot be told apart by
   reading text. Only the `visible` flag distinguishes them. The arithmetic
   confirms it: 56+890+1747+1210+1087+1597 = 6587, the frame height.

   DECLARED DEVIATION — step 3 copy. The file draws step 3 as the 3-Step
   pitch ("Lower entry, more progression. Ease in."). 3-Step was retired, so
   the slot becomes the Instant step — which the drawn body copy already
   anticipates ("or, on Instant, you're already funded"). Signed off by Lucas.

   DECLARED DEVIATION — "MTS" in step 2 is a typo for MT5 and ships as MT5,
   the same call the How It Works page made.
   ========================================================================= */

/* 1048:438407 — 1512x1210, column, gap 40, padding 100/40, centred.
   Fill 180deg #FFFFFF 52.74% -> #EBEDF2. */
.afxmo-steps {
  position: relative;
  isolation: isolate;
  height: 1210px;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 52.74%, #EBEDF2 100%);
  font-family: var(--font-sans);
  color: #0D0D0D;
}

/* 1048:438408 "vector" — the two hairline swooshes plus a soft plate,
   2011x836 at y 420, overflowing the band to the right; the band clips.
   Exported as one image rather than rebuilt from paths. */
.afxmo-steps__vector {
  position: absolute; left: 50%; margin-left: -744px; top: 420px;
  width: 2012px; height: 837px;
  background: url('/assets/figma/mo-steps-vector.webp') left top / 2012px 837px no-repeat;
  opacity: .55;
  pointer-events: none;
}

.afxmo-steps__stage {
  position: relative; z-index: 2;
  width: 1512px; margin: 0 auto; height: 1210px;
}

/* ---- 1048:438412 — header, 469x251 at (521.5,100), column gap 32 ------- */
.afxmo-steps__head {
  position: absolute; left: 50%; margin-left: -234.5px; top: 100px;
  width: 469px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.afxmo-steps__title { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* 1048:438414 — light eyebrow, 106x33, radius 57, padding 6/0, gap 7.
   The node carries no fill, so there is no chip plate here; only the models
   and final-CTA eyebrows are filled. */
.afxmo-eyebrow--light {
  background: none; backdrop-filter: none;
  color: #0D0D0D; padding: 6px 0;
}
/* 1048:438425 / 438426 — SF Pro 510 64/64, ls -1.92, centred.
   Line one carries a 165.4deg #0D0D0D -> #CECECE ramp; line two is flat. */
.afxmo-steps__h2 {
  margin: 0; width: 469px; text-align: center;
  font-family: var(--font-display);
  font-weight: var(--w-medium); font-size: 64px; line-height: 64px;
  letter-spacing: -1.92px; color: #0D0D0D;
  white-space: nowrap;
}
.afxmo-steps__h2 .g {
  display: block;
  background: linear-gradient(165.4deg, #0D0D0D 0%, #CECECE 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 1048:438427 — SF Pro 510 16/21.12, ls -.48, opacity .8, 377 wide */
.afxmo-steps__lead {
  margin: 0; width: 377px; text-align: center;
  font-weight: var(--w-medium); font-size: 16px; line-height: 21.12px;
  letter-spacing: -.48px; color: rgba(13,13,13,.8);
}

/* ---- 1048:438428 — the 2x2 grid, 1432x623 at (40,391), row gap 25 ------ */
.afxmo-steps__grid {
  position: absolute; left: 50%; margin-left: -716px; top: 391px;
  width: 1432px; height: 623px;
  /* TWO BY TWO. Figma 1048:438407 puts the four cards at x 40 / 768.5 on rows
     y 391 / 715 — 704 + 25 + 704 = 1432 and 299 + 25 + 299 = 623, which is
     exactly this box. It shipped as `flex-direction: column`, so all four
     stacked in a single left-hand column and the right half of the band was
     empty; that is what "hard on the left" was. An explicit grid rather than
     wrap, so the pairing does not depend on the arithmetic landing perfectly. */
  display: grid;
  grid-template-columns: repeat(2, 703.49px);
  grid-auto-rows: 299px;
  gap: 25px;
}
/* the progress bar belongs to the mobile carousel only */
.afxmo-steps__prog { display: none; }

/* 1048:438430 — card, 703.5x299, radius 32, padding 24, white over a
   0deg rgba(235,237,242,.5) wash, 1px hairline. */
.afxmo-step {
  position: relative; box-sizing: border-box;
  width: 703.5px; height: 299px; padding: 24px;
  display: flex; gap: 24px; overflow: hidden;
  border-radius: 32px;
  /* two fills: #FFFFFF under a 0deg (bottom-to-top) ramp that goes grey at
     30% to a teal wash at the top. Flattening it to the grey alone is what
     made the cards read as plain panels. */
  background: linear-gradient(0deg, rgba(235,237,242,.5) 30%, rgba(142,188,185,.32) 100%), #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(13,13,13,.05);
}
/* 1048:438431 / 438442 — copy column, 315.8 wide, space-between */
.afxmo-step__copy {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 315.8px; flex: none;
}
.afxmo-step__top { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
/* 1048:438434 — "Step n" chip, radius 57, SF Pro 510 16/16, ls -.96.
   Fill is a #053F3B gradient at 12% over a BACKGROUND_BLUR 16.7 (CSS 8.35). */
.afxmo-step__n {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 6px 12px; box-sizing: border-box;
  border-radius: 57px; background: rgba(5,63,59,.12);
  backdrop-filter: blur(8.35px);
  font-weight: var(--w-medium); font-size: 16px; line-height: 16px;
  letter-spacing: -.96px; color: #0D0D0D;
}
.afxmo-step__n img { display: block; }
/* 1048:438437 — SF Pro 590 24/31.68, ls -.72 */
.afxmo-step__h3 {
  margin: 0; font-weight: var(--w-semi); font-size: 24px; line-height: 31.68px;
  letter-spacing: -.72px; color: #0D0D0D;
}
/* 1048:438438 — SF Pro 510 20/26.4, ls -.6 */
.afxmo-step__p {
  margin: 0; font-weight: var(--w-medium); font-size: 20px; line-height: 26.4px;
  letter-spacing: -.6px; color: rgba(13,13,13,.72);
}
/* 1048:438470 — the art column, 315.8x251, the same box as the copy column.
   Fixed rather than flexed, because the two pills on step 4 are positioned
   against it and are drawn to land exactly on its edges. */
.afxmo-step__art {
  position: relative; width: 315.8px; height: 251px; flex: none;
}
.afxmo-step__art img {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: block;
}

/* 1048:438495 / 438496 — the 60x60 chevron pucks that straddle each row seam,
   radius 120, #F9F9F7, drop shadow. Centred on the 25px gap. */
.afxmo-steps__seam {
  position: absolute; left: 50%; margin-left: -30px;
  width: 60px; height: 60px; border-radius: 120px;
  display: flex; align-items: center; justify-content: center;
  background: var(--af-beige);
  box-shadow: 0 8px 12px 0 rgba(0,0,0,.06);
  z-index: 3;
}
.afxmo-steps__seam--a { top: 510px; }
.afxmo-steps__seam--b { top: 834px; }
.afxmo-steps__seam img { display: block; width: 28px; height: 28px; }

/* 1048:438472 / 438482 — the two glass pills on step 4, 48 tall, radius 58,
   padding 8/16, gap 6, rgba(255,255,255,.1) with a GLASS effect, a
   6/12/17.6 shadow at 12% and an inner highlight. Positioned against the art
   column: A sits on its top-left corner, B on its bottom-right.
   The label is SF Pro 860 24/32 on a 157.8deg #263F42 -> #6D9E9B ramp. */
.afxmo-step__pill {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  height: 48px; padding: 8px 16px; box-sizing: border-box;
  border-radius: 58px;
  /* DECLARED DEVIATION: the node is rgba(255,255,255,.1) plus Figma's GLASS
     effect, which lightens and refracts what is behind it. CSS has no
     equivalent, and .1 alone over the light artwork leaves the pill
     invisible. Ships at .72 with a backdrop blur, which is what the Figma
     render actually looks like. */
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  box-shadow: 6px 12px 17.6px 0 rgba(0,0,0,.12),
              inset 0 1px 1px 0 rgba(255,255,255,.5);
  font-weight: var(--w-heavy); font-size: 24px; line-height: 32px;
  letter-spacing: -.72px; white-space: nowrap;
  background-clip: padding-box;
}
.afxmo-step__pill span {
  background: linear-gradient(157.8deg, #263F42 0%, #6D9E9B 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.afxmo-step__pill img { display: block; width: 28px; height: 28px; }
/* both are drawn at a fixed width; left to the label the fallback for SF Pro
   860 sets them 36px narrow. */
.afxmo-step__pill--a { left: 0; top: 0; width: 164px; }
.afxmo-step__pill--b { left: 105.8px; top: 203px; width: 210px; }

/* 1048:438497 — "Start your challenge", 241x56 lime, at (635.5,1054) */
.afxmo-steps__cta {
  position: absolute; left: 50%; margin-left: -120.5px; top: 1054px;
  width: 241px; text-transform: capitalize;
}

/* ============================ MOBILE 393 ==================================
   1048:485603 — 393x985. The grid becomes one column, the art shrinks and
   the seam pucks are dropped (they straddle a two-column seam that no
   longer exists).                                                          */
@media (max-width: 767px) {
  .afxmo-steps { height: auto; padding: 64px 0 72px; }
  .afxmo-steps__stage { width: 100%; height: auto; padding: 0 24px; box-sizing: border-box; }
  .afxmo-steps__vector { display: none; }
  .afxmo-steps__head { position: static; width: auto; margin: 0 auto; gap: 24px; }
  .afxmo-steps__h2 { width: auto; font-size: 36px; line-height: 40px; letter-spacing: -1.08px; white-space: normal; }
  .afxmo-steps__lead { width: auto; }
  /* 1048:485603 — a horizontal carousel, one card at a time with the next
     peeking, and a progress bar underneath. The stage padding is dropped so
     the rail can bleed to both edges and still start flush with the copy. */
  .afxmo-steps__stage { padding: 0; }
  .afxmo-steps__head { padding: 0 24px; }
  .afxmo-steps__grid {
    position: static; width: auto; height: auto; margin: 32px 0 0;
    flex-wrap: nowrap; gap: 16px;
    padding: 0 24px; box-sizing: border-box;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .afxmo-steps__grid::-webkit-scrollbar { display: none; }
  .afxmo-step {
    width: 345px; flex: none; height: auto;
    flex-direction: column; gap: 16px;
    scroll-snap-align: center;
  }
  /* the file stacks chip+heading, then the art, then the body copy. The copy
     wrapper is dissolved so the paragraph can sit below the art without
     moving it out of the copy column on desktop. */
  .afxmo-step__copy { display: contents; }
  .afxmo-step__top { order: 0; }
  .afxmo-step__art { width: 100%; height: 220px; order: 1; }
  .afxmo-step__p { order: 2; }
  .afxmo-step__art img { right: 50%; transform: translate(50%,-50%); max-width: 200px; height: auto; }
  .afxmo-steps__seam { display: none; }
  .afxmo-step__pill--a { left: 0; top: 0; width: auto; }
  .afxmo-step__pill--b { left: auto; right: 0; top: auto; bottom: 0; width: auto; }
  .afxmo-step__pill { font-size: 18px; height: 40px; padding: 8px 12px; }
  .afxmo-step__pill img { width: 22px; height: 22px; }

  .afxmo-steps__prog {
    display: block; width: 200px; height: 4px; margin: 24px auto 0;
    border-radius: 39px; background: rgba(13,13,13,.08); overflow: hidden;
  }
  .afxmo-steps__prog span {
    display: block; height: 100%; width: 25%;
    border-radius: 39px; background: var(--af-teal);
    transform-origin: left center;
    transition: transform var(--t-base) var(--e-out);
  }
  .afxmo-steps__cta { position: static; width: calc(100% - 48px); margin: 28px 24px 0; }
}