/* ============================================================================
   Models Overview — announcement bar + hero.
   Figma file 84J3BYC09NZcH6pAx3IWa5 (the NEWER copy, not rijNBFC24rPaqbSoj29uvJ).
   Desktop  1048:397292 bar   1512x56  at y 0
            1048:397293 hero  1512x890 at y 56
   Mobile   1048:464980       393x856  (bar + navbar + hero in ONE band)

   This page DOES draw the announcement bar, as a sibling above the hero, so
   the hero starts at page y=56. The NAVBAR (1048:397318, 1492x59 at 10,10) is
   a CHILD of the hero, so the shared .afx-nav markup lives inside this
   fragment. Do not also inject one.

   DECLARED DEVIATION — nav contents. The file draws the old five-item nav
   (Challenges / Trader Stories / Community / About / Verify). The live site
   uses the six-item mega-menu owned by outputs/roll_nav.py. Shared furniture
   wins over a stale frame.

   DECLARED DEVIATION — copy. The file reads "Five ways to get funded."
   3-Step was retired site-wide in Aug 2026, so the count is four.
   ========================================================================= */

/* 1048:397293 "3" — 1512x890, image fill f793a536… scaleMode FILL, clips. */
.afxmo-hero {
  position: relative;
  isolation: isolate;
  height: 890px;
  overflow: hidden;
  background: var(--af-black);
  font-family: var(--font-sans);
  color: var(--af-white);
}
.afxmo-hero__bg {
  position: absolute; left: 0; right: 0; top: 0; width: auto; min-width: 1512px; height: 890px;
  background: url('/assets/figma/mo-hero-bg.webp') center / cover no-repeat;
  pointer-events: none;
}

/* 1048:397294 "Ellipse 473" — 1693x956 at (-776, 117), #051F1D,
   LAYER_BLUR 516 (Figma radius is ~2x the CSS blur value).
   DECLARED DEVIATION: the node also carries BACKGROUND_BLUR 316. Chrome
   composites a backdrop-filter on a mix-blend-mode element as an opaque
   frosted plate, which buries the photo. Dropped, as on every other band. */
.afxmo-hero__glow {
  position: absolute; left: 50%; margin-left: -1532px; top: 117px;
  width: 1693px; height: 956px;
  background: var(--af-hero-glow); border-radius: 50%;
  filter: blur(258px);
  mix-blend-mode: hard-light;
  pointer-events: none;
}

/* 1048:397295 "Overlay" — 1512x900 at (0,0), 89.8deg. Drawn 10px taller than
   the band; the band clips it. Full-bleed background, so left/right 0. */
.afxmo-hero__overlay {
  position: absolute; left: 0; right: 0; top: 0; width: auto; min-width: 1512px; 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;
}

/* the 1512 stage. A fixed-width STAGE that positions content stays CENTRED,
   or the whole design left-aligns above 1512. */
.afxmo-hero__stage {
  position: relative; z-index: 2;
  width: 1512px; margin: 0 auto;
  height: 890px;
}

/* 1048:397318 — navbar, 1492x59 at (10,10). Absolute, not a top margin: the
   stage is not a BFC, so a first-child margin collapses out of it. */
.afxmo-hero__stage > .afx-nav {
  position: absolute; left: 10px; top: 10px; width: 1492px; margin: 0;
}

/* ---- 1048:397311 — copy column, 1054x524 at (46,187), col gap 32 -------- */
.afxmo-hero__copy {
  position: absolute; left: 46px; top: 187px;
  width: 1054px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
}
/* 1048:397312 — DM Sans 500 14/21 */
.afxmo-hero__eyebrow {
  margin: 0; width: 118px;
  font-family: var(--font-ui);
  font-weight: var(--w-medium); font-size: 14px; line-height: 21px;
  color: var(--af-white);
}
/* 1048:397313 — SF Pro 510 110/99, ls -3.3px, three lines.
   Fill is a 160.8deg #F8F8F8 -> #FFFFFF ramp over white; at 110px the ramp is
   invisible against the flat white beneath it, so it ships as the flat colour. */
.afxmo-hero__h1 {
  margin: 0; width: 870px;
  font-family: var(--font-display);
  font-weight: var(--w-medium); font-size: 110px; line-height: 99px;
  letter-spacing: -3.3px;
  color: var(--af-white);
}
/* 1048:397314 — SF Pro 510 18/27, ls -.36, opacity .8, 550 wide */
.afxmo-hero__lead {
  margin: 0; width: 550px;
  font-weight: var(--w-medium); font-size: 18px; line-height: 27px;
  letter-spacing: -.36px;
  color: rgba(255,255,255,.8);
}

/* 1048:397315 — button row, gap 12. Both buttons are drawn 215 wide, so the
   width is set rather than left to the label: SF Pro is not served as a
   webfont, and the fallback measures the labels ~11px narrower. */
.afxmo-hero__cta { display: flex; align-items: flex-start; gap: 12px; }
.afxmo-hero__cta .afxmo-btn { width: 215px; }

/* 1048:397316 — lime button, 215x56, radius 50, padding 18/32, gap 8.
   Ink is #001D21, set explicitly: inheriting the link colour here once
   shipped a lime CTA at 1.1:1. */
.afxmo-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 18px 32px; box-sizing: border-box;
  border: 0; border-radius: 50px;
  background: var(--af-lime);
  box-shadow: 2px 14px 24px 0 rgba(38,63,66,.12);
  color: var(--af-ink-teal);
  font-family: var(--font-sans);
  font-weight: var(--w-semi); font-size: 16px; line-height: 19px;
  letter-spacing: -.48px; text-decoration: none; white-space: nowrap;
  cursor: pointer;
}
.afxmo-btn img { display: block; }
/* the 1.5px gradient hairline: border-color cannot take a gradient, so it is
   a masked pseudo-element. Flattening it to a solid loses the glass look. */
.afxmo-btn::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none;
  background: linear-gradient(161.7deg, rgba(5,63,59,.6) 0%, rgba(5,63,59,.162) 51.44%, rgba(5,63,59,.6) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* 1048:397317 — ghost button, 215x55, radius 50, 1px rgba(255,255,255,.08) */
.afxmo-btn--ghost {
  height: 55px; background: rgba(255,255,255,.02);
  color: var(--af-white); font-weight: var(--w-medium);
  box-shadow: none; backdrop-filter: blur(17px);
}
.afxmo-btn--ghost::before { padding: 1px; background: rgba(255,255,255,.08); }

/* ---- 1048:397296 / 301 / 306 — three stat columns at y 781 ------------- */
.afxmo-hero__stats { display: contents; }
.afxmo-stat {
  position: absolute; top: 781px; width: 449px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 17px;
}
.afxmo-stat--a { left: 46px; }
.afxmo-stat--b { left: 534px; }
.afxmo-stat--c { left: 1022px; }
/* 1048:397297 — 436x1 hairline, rgba(255,255,255,.25) */
.afxmo-stat__rule { display: block; width: 436px; height: 1px; background: var(--w-25); }
.afxmo-stat__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* Saans 400 14/21, opacity .8 */
.afxmo-stat__k {
  font-family: var(--font-alt);
  font-weight: var(--w-regular); font-size: 14px; line-height: 21px;
  color: rgba(255,255,255,.8);
}
/* Saans 600 32/48 */
.afxmo-stat__v {
  font-family: var(--font-alt);
  font-weight: var(--w-semi); font-size: 32px; line-height: 48px;
  color: var(--af-white);
}

/* ============================ MOBILE 393 ==================================
   1048:464980 — 393x856. Bar, navbar and hero in one band. The stats row
   drops to a single line of three and the two CTAs stack full width.       */
@media (max-width: 767px) {
  .afxmo-hero { height: auto; }
  .afxmo-hero__bg,
  .afxmo-hero__overlay { height: 100%; min-width: 0; }
  .afxmo-hero__glow { margin-left: -846px; }
  .afxmo-hero__stage { width: 100%; height: auto; padding: 0 24px 40px; box-sizing: border-box; }
  .afxmo-hero__stage > .afx-nav { position: static; width: auto; }
  .afxmo-hero__copy { position: static; width: auto; margin-top: 64px; gap: 24px; }
  .afxmo-hero__eyebrow { width: auto; }
  .afxmo-hero__h1 { width: auto; font-size: 44px; line-height: 46px; letter-spacing: -1.32px; }
  .afxmo-hero__lead { width: auto; font-size: 16px; line-height: 24px; letter-spacing: -.32px; }
  .afxmo-hero__cta { flex-direction: column; align-self: stretch; gap: 12px; }
  .afxmo-btn,
  .afxmo-hero__cta .afxmo-btn { width: 100%; }
  .afxmo-hero__stats { display: flex; gap: 16px; margin-top: 44px; }
  .afxmo-stat { position: static; width: auto; flex: 1 1 0; gap: 12px; min-width: 0; }
  .afxmo-stat__rule { width: 100%; }
  .afxmo-stat__k { font-size: 12px; line-height: 18px; }
  .afxmo-stat__v { font-size: 22px; line-height: 32px; }
}