/* ============================================================================
   How It Works band 4 — final CTA.
   Figma 1048:498667 "Frame 2147259241" (1512 x 1597) / mobile 1048:504899
   (393 x 2596).

   SAME COMPONENT as the home page's final band (705:77958). The four ambient
   layers, their offsets, blurs and blend modes are identical, so the technique
   is lifted verbatim from atlas-final.css rather than re-derived. What differs
   is the copy, the content column (713 wide at y 161, vs home's 558 at y 120)
   and the band's own image asset.

   HEIGHT: 1597 INCLUDES the footer (1048:498711, 1488x803 at y 794) as a
   child. The footer ships as its own reusable band, so this file stops at 794.
   Reserving the full 1597 here would leave an 803px hole above the footer —
   which is exactly the bug that hit the home page.
   ========================================================================= */

/* 1048:498667 — two stacked 180deg fills with identical handles; the top one
   wins, so only #303030 -> #0F0F0F is drawn. Re-derived over the 1512x1597
   box, the ramp finishes at 43.89% and everything below is flat #0F0F0F.
   `isolation: isolate` confines SCREEN and HARD_LIGHT to this band. */
.afxhw-final {
  position: relative;
  isolation: isolate;
  min-height: 794px;
  overflow: hidden;
  background: linear-gradient(180deg, #303030 0%, #0F0F0F 43.89%);
  font-family: var(--font-sans);
  color: var(--af-white);
}

/* 1048:498668 "image 1167" — 1516x853 at (0,0), blend SCREEN.
   Full-bleed: pinned at 1512 it leaves a bare strip on wider viewports. */
.afxhw-final__bg {
  position: absolute; left: 0; right: 0; top: 0; width: auto; min-width: 1516px; height: 853px;
  background: url('/assets/figma/hiw-final-bg.webp') center / cover no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 1048:498669 "Ellipse 473" — 1693x956 at (27, -124), #051F1D,
   LAYER_BLUR 516.4 (Figma radius is 2x the CSS blur), HARD_LIGHT.
   DECLARED DEVIATION: the node also carries BACKGROUND_BLUR 315.6, which
   Chrome composites as an opaque frosted plate over the photo. Layer blur plus
   hard-light alone matches the reference export. Same call as the home band. */
.afxhw-final__glow {
  position: absolute; left: 27px; top: -124px; width: 1693px; height: 956px;
  background: var(--af-hero-glow); border-radius: 50%;
  filter: blur(258.2px);
  mix-blend-mode: hard-light;
  pointer-events: none;
}

/* 1048:498670 — 737x41 at (388, 725), black, LAYER_BLUR 74.6.
   A soft dark plate that lifts the proof row off the photo. */
.afxhw-final__plate {
  position: absolute; left: 388px; top: 725px; width: 737px; height: 41px;
  background: var(--af-black);
  filter: blur(37.3px);
  pointer-events: none;
}

/* 1048:498671 -> 1048:498672 "light" — a 4-group white haze at node opacity
   0.3. Exported flat (max alpha in the render is 24/255) rather than rebuilt.
   Drawn 1764.3x1464.1, shipped at 883x733. */
.afxhw-final__light {
  position: absolute; left: -126px; top: -351px; width: 1764.3px; height: 1464.1px;
  background: url('/assets/figma/hiw-final-light.webp') center / 100% 100% no-repeat;
  pointer-events: none;
}

/* 1048:498695 "Mask group" -> 1048:498696 is isMask AND visible:false.
   Not built, same as the home band. */

/* ---- 1048:498685 — content column, 713x392 at (400, 161) ----------------
   400 = (1512 - 713) / 2, a centred fixed column. The 161 is a MARGIN; as
   padding the column grows and the proof row and footer land 161px low.
   .afxhw-final is a BFC (overflow:hidden) so the margin cannot collapse out. */
.afxhw-final__inner {
  position: relative; z-index: 2;
  width: 713px; margin: 161px auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
/* 1048:498686 — 713x209, col gap 16 */
.afxhw-final__head { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
/* 1048:498687 — eyebrow pill, radius 57, backdrop blur. No blend mode on the
   node, so the backdrop-filter is safe to ship. */
.afxhw-final__eyebrow {
  margin: 0;
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 6px 14px; border-radius: 57px; box-sizing: border-box;
  backdrop-filter: blur(8.35px); -webkit-backdrop-filter: blur(8.35px);
  font-family: var(--font-alt);
  font-weight: var(--w-medium); font-size: 14px; line-height: 21px;
  letter-spacing: -.42px;
  color: var(--af-white); white-space: nowrap;
}
.afxhw-final__eyebrow img { width: 16px; height: 16px; display: block; flex: none; }

/* 1048:498691/92 — two 80px lines, 100% leading, ls -2.4, centred */
.afxhw-final__h2 {
  margin: 0;
  display: flex; flex-direction: column; align-items: 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); text-align: center; white-space: nowrap;
}
/* 1048:498691 "The rules are clear." — the top fill is a 162.2deg
   #F8F8F8 -> #636363 ramp; only line two (1048:498692) is flat white. */
.afxhw-final__h2 span:first-child {
  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, per 4cdf511 */
  padding-bottom: .2em; margin-bottom: -.2em;
}
/* 1048:498693 — 559 wide inside the 713 column, 16/21.12, ls -.32, opacity .8 */
.afxhw-final__lead {
  margin: 0; width: 559px;
  font-weight: var(--w-medium); font-size: 16px; line-height: 21.12px;
  letter-spacing: -.32px; text-align: center;
  color: rgba(255,255,255,.8);
}

/* 1048:498697 — proof row, 410x16 at (551, 735), row gap 16 */
.afxhw-final__proof {
  position: absolute; left: 50%; margin-left: -205px; top: 735px; z-index: 2;
  width: 410px;
  display: flex; flex-direction: row; align-items: center; gap: 16px;
}
.afxhw-final__proof span {
  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;
}
.afxhw-final__proof img { width: 16px; height: 16px; display: block; flex: none; }

/* ============================ mobile — 1048:504899, 393x2596 =============
   2596 again INCLUDES the footer (1048:504944, 377x1821 at y 775), so this
   band stops at 775 — not the 660 an eyeballed first pass guessed. */
@media (max-width: 760px) {
  .afxhw-final { min-height: 775px; }
  /* 1048:504900 — 758x779 at (-182, 0), STRETCH */
  .afxhw-final__bg { left: -182px; right: auto; min-width: 0; width: 758px; height: 779px; }
  /* 1048:504901 — 1133.4x1328.4 at (-420, -237), LAYER_BLUR 176.42 -> 88.2 */
  .afxhw-final__glow { left: -420px; top: -237px; width: 1133.4px; height: 1328.4px; filter: blur(88.21px); }
  /* 1048:504902 — 259x79 at (68, 646) */
  .afxhw-final__plate { left: 68px; margin-left: 0; top: 646px; width: 259px; height: 79px; }
  /* 1048:504903 — same 1764.3x1464.1 haze, at (-685, -351) */
  .afxhw-final__light { left: -685px; top: -351px; }

  /* 1048:504917 — 394x462 at y 100, padding 0/24, col gap 24 */
  .afxhw-final__inner { width: 100%; padding: 0 24px; box-sizing: border-box; margin-top: 100px; gap: 24px; }
  /* 1048:504918 — head gap is 12 on mobile, not 16 */
  .afxhw-final__head { gap: 12px; }
  /* 1048:504923/24 — 52/52, ls -1.56 */
  .afxhw-final__h2 { font-size: 52px; line-height: 52px; letter-spacing: -1.56px; white-space: normal; }
  /* 1048:504925 — 338 wide, 5 lines */
  .afxhw-final__lead { width: 338px; max-width: 100%; }

  /* 1048:504930 — 179x80 at (108, 655). The three proof items STACK on mobile:
     a column, gap 16, centred — not a wrapped row. */
  .afxhw-final__proof {
    left: 108px; margin-left: 0; top: 655px; width: 179px; height: 80px;
    flex-direction: column; justify-content: center; gap: 16px;
  }
  .afxhw-final__proof span { height: 16px; }
}