/* ============================================================================
   Models Overview band 5 — the final CTA.
   Figma 1048:464934 (1512 x 1597).

   ⚠ A Figma band's height INCLUDES its children. 1048:464978 "footer desktop"
   (1488x803) is a CHILD of this band at y=794, so the CTA content is 794 tall
   and the footer accounts for the rest. Honouring 1597 here AND appending the
   shared footer would leave an 803px hole.

   DECLARED DEVIATION — footer height. The shared footer
   (fragments/footer.html, drawn 1488x874 in the older file) is 71px taller
   than the 803 this file draws. Shared furniture wins; the page total is
   therefore 5784 + the shared footer rather than the frame's 6587.

   DECLARED DEVIATION — copy. "Five funding paths." and the "5 Funding Models"
   chip both become four: 3-Step was retired site-wide in Aug 2026.
   ========================================================================= */

/* 1048:464934 — 1512x1597 (content 794 here), 180deg #303030 -> #0F0F0F. */
.afxmo-final {
  position: relative;
  isolation: isolate;
  height: 794px;
  overflow: hidden;
  background: linear-gradient(180deg, #303030 0%, #0F0F0F 100%);
  font-family: var(--font-sans);
  color: var(--af-white);
}

/* 1048:464935 "image 1167" — 1516x853 at (0,0), two STRETCH image fills
   stacked. Exported as two layers and composited in the same order. */
.afxmo-final__art {
  position: absolute; left: 0; right: 0; top: 0;
  width: auto; min-width: 1512px; height: 853px;
  background:
    url('/assets/figma/mo-cta-b.webp') center top / cover no-repeat,
    url('/assets/figma/mo-cta-a.webp') center top / cover no-repeat;
  pointer-events: none;
}

/* 1048:464936 "Ellipse 473" — 1693x956 at (27,-124), #051F1D, LAYER_BLUR 516.
   BACKGROUND_BLUR dropped, same call as the hero. */
.afxmo-final__glow {
  position: absolute; left: 50%; margin-left: -729px; top: -124px;
  width: 1693px; height: 956px;
  background: var(--af-hero-glow); border-radius: 50%;
  filter: blur(258px); mix-blend-mode: hard-light;
  pointer-events: none;
}

/* 1048:464938 "light" — decorative sweep, exported as one image. */
.afxmo-final__light {
  position: absolute; left: 50%; margin-left: -600px; top: 0;
  width: 1200px; height: 996px;
  background: url('/assets/figma/mo-cta-light.webp') center / cover no-repeat;
  opacity: .55;
  pointer-events: none;
}

/* 1048:464937 — a 737x41 black plate at y 725 under the chip row, blur 75. */
.afxmo-final__plate {
  position: absolute; left: 50%; margin-left: -368.5px; top: 725px;
  width: 737px; height: 41px; background: #000; filter: blur(37px);
  pointer-events: none;
}

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

/* ---- 1048:464952 — copy block, 609x392 at (452,120), column gap 32 ----- */
.afxmo-final__copy {
  position: absolute; left: 50%; margin-left: -304.5px; top: 120px;
  width: 609px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.afxmo-final__title { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* 1048:464954 — chip, 119x33, radius 57, padding 6/14, gap 7 */
.afxmo-final__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 6px 14px; box-sizing: border-box;
  border-radius: 57px; background: rgba(255,255,255,.08);
  backdrop-filter: blur(17px);
  font-family: var(--font-alt);
  font-weight: var(--w-medium); font-size: 14px; line-height: 21px;
  letter-spacing: -.42px; color: var(--af-white);
}
.afxmo-final__eyebrow img { display: block; width: 16px; height: 16px; }
/* 1048:464958 / 464959 — SF Pro 510 80/80, ls -2.4, centred.
   Line one carries a 162.2deg #F8F8F8 -> #636363 ramp; line two is flat. */
/* The drawn box is 609. "Four funding paths." measures wider than that in the
   SF Pro fallback, and with nowrap the trailing full stop was being clipped
   by the background-clip:text box. Widened to 720; the text is centred, so
   the visual centre line is unchanged. */
.afxmo-final__h2 {
  margin: 0; width: 720px; text-align: center;
  font-family: var(--font-display);
  font-weight: var(--w-medium); font-size: 80px; line-height: 80px;
  letter-spacing: -2.4px; color: var(--af-white);
  white-space: nowrap;
}
.afxmo-final__h2 .g {
  display: block;
  background: linear-gradient(162.2deg, #F8F8F8 0%, #636363 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 1048:464960 — SF Pro 510 16/21.12, ls -.32, opacity .8, 449 wide */
.afxmo-final__lead {
  margin: 0; width: 449px; text-align: center;
  font-weight: var(--w-medium); font-size: 16px; line-height: 21.12px;
  letter-spacing: -.32px; color: rgba(255,255,255,.8);
}
/* 1048:464961 — lime CTA, 293x56 */
.afxmo-final__cta { text-transform: capitalize; }

/* ---- 1048:464964 — the three ticked chips, 396x16 at (558,735), gap 16 -- */
.afxmo-final__chips {
  position: absolute; left: 50%; margin-left: -198px; top: 735px;
  width: 396px; height: 16px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.afxmo-final__chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: var(--w-medium); font-size: 14px; line-height: 14px;
  color: var(--af-white); white-space: nowrap;
}
.afxmo-final__chip img { display: block; width: 16px; height: 16px; }

/* ============================ MOBILE 393 ==================================
   1048:491806 — 393x2596, final CTA plus the footer.                      */
@media (max-width: 767px) {
  .afxmo-final { height: auto; padding: 56px 0 64px; }
  .afxmo-final__stage { width: 100%; height: auto; padding: 0 24px; box-sizing: border-box; }
  .afxmo-final__art { height: 100%; min-width: 0; }
  .afxmo-final__glow { margin-left: -846px; }
  .afxmo-final__light { margin-left: -600px; }
  .afxmo-final__plate { display: none; }
  .afxmo-final__copy { position: static; width: auto; margin: 0 auto; gap: 24px; }
  .afxmo-final__h2 { width: auto; font-size: 40px; line-height: 44px; letter-spacing: -1.2px; white-space: normal; }
  .afxmo-final__lead { width: auto; }
  .afxmo-final__chips {
    position: static; width: auto; height: auto; margin: 36px 0 0;
    flex-wrap: wrap; gap: 12px 16px;
  }
  .afxmo-final__chip { font-size: 13px; }
}
