/* ============================================================================
   Futures page (/futures) — hero.  Figma 959:164541 (announcement bar,
   1512x56) + 959:164542 "3" (1512x890), file rijNBFC24rPaqbSoj29uvJ.

   REWRITTEN 2 Aug 2026 (third pass). Every number below is read out of the
   node JSON, not inferred from a render. The second pass declared this band
   "already correct"; a computed-style diff showed it was not — the H1 shipped
   at 72/76/-2.16 against a design value of 110/99/-3.3, the eyebrow was
   uppercase mint against a white sentence-case DM Sans node, the feature-badge
   row sat ABOVE the eyebrow instead of below the CTAs, its check icons were
   replaced by 3px dots, and the whole content column sat at the shared 40px
   gutter where this frame uses 46.

   Geometry, page-absolute (bar top = 0):
     bar            0     1512x56    #061F1C
     nav           66     1492x59  @x10   glass, r48
     content frame 229     1054x452 @x46  column, gap 32
       eyebrow     229       87x21        DM Sans 500 14/21 #FFF
       h1          282      760x198       SF Pro 510 110/99 ls -3.3
       lead        512      410x81        DM Sans 500 18/27 #FFF @.8
       ctas        625      368x56        row, gap 12
     badges        734      605x16 @x46   row, gap 16; item row gap 8
     stats         837     1425x90 @x46   row, gap 39; col gap 17; body gap 4
   ========================================================================= */

.afxfth { position: relative; min-height: 946px; overflow: hidden; background: var(--af-black); }
.afxfth *, .afxfth *::before, .afxfth *::after { box-sizing: border-box; }

/* this frame's own gutter is 46, not the site-wide 40 (959:164598 x=46). */
.afxfth { --ft-gutter: 46px; }

/* 959:164541 overrides the shared announcement-bar component's fill: the
   COMPONENT (705:16099, used on /) is #0B2A27 = --af-bar, this page's
   INSTANCE is #061F1C. Local override, shared token left alone. */
.afxfth .afx-bar { background: #061F1C; }

/* 959:164542 frame fill — image 8bbf8767…, scaleMode STRETCH. */
.afxfth-bg {
  position: absolute; left: 0; right: 0; top: 56px; width: auto; min-width: 1512px; height: 890px;
  /* imageTransform [[1,0,0],[0,0.7848,0.1474]]: Figma draws only the middle
     78.48% of the source, starting 14.74% down. `100% 100%` stretched the
     WHOLE image into the box, squashing every disc ~21% vertically. */
  background: url('/assets/figma/ft2-hero-bg.webp') no-repeat 0 -167.1px / 100% 1133.9px;
  pointer-events: none;
}

/* 959:164543 "Ellipse 473" — 1693x956 at x -710 y 86 relative to the 890
   frame, i.e. y 142 from the page top once the 56px bar is added. */
.afxfth-glow {
  position: absolute; left: 0; top: 142px;
  width: 1693px; height: 956px; margin-left: -710px;
  background: var(--af-hero-glow); border-radius: 50%;
  filter: blur(258.2px);
  mix-blend-mode: hard-light;
  pointer-events: none;
}

/* 959:164544 "Overlay" — 89.8deg linear gradient. */
.afxfth-overlay {
  position: absolute; left: 0; top: 56px; width: 100%; height: 890px;
  background: linear-gradient(89.9deg,
              rgba(0,39,37,.62) 0%,
              rgba(0,39,37,0) 21.1%,
              rgba(0,39,37,0) 81.9%,
              rgba(0,39,37,.4) 98.4%);
  pointer-events: none;
}

.afxfth-inner { position: relative; z-index: 2; }
.afxfth-stage { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--ft-gutter); }

/* --- 959:164598 "Frame 1707479920" — 1054x452, column, gap 32, top 173
   (page 229). The nav bottom is 125, so the offset is 104. ---------------- */
.afxfth-body { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 1054px; margin-top: 104px; }

/* 959:164599 — DM Sans 500 / 14 / 21, #FFFFFF, no case transform, ls 0. */
.afxfth-eyebrow {
  margin: 0; display: block;
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: 0;
  color: var(--af-white); text-transform: none;
}

/* 959:164600 — SF Pro 510 / 110 / 99 / -3.3, box 760 wide, two lines.
   Fill is #FFFFFF with a 160.8deg #F8F8F8 -> #FFFFFF gradient over it. */
.afxfth-h1 {
  width: 760px; margin: 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 110px; line-height: 99px; letter-spacing: -3.3px;
  color: var(--af-white);
  /* stop offsets solved from the Figma handle positions, not assumed 0/100 */
  background: linear-gradient(126.8deg, #F8F8F8 54.9%, #FFFFFF 93.2%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-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;
}

/* 959:164601 — DM Sans 500 / 18 / 27, ls 0, #FFFFFF at node opacity .8,
   box 410 wide (three lines). */
.afxfth-lead {
  width: 410px; margin: 0;
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; letter-spacing: 0;
  color: var(--af-white); opacity: .8;
}

/* 959:164602 — row, gap 12 */
.afxfth-ctas { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; }

/* 959:164603 — 175x56, r100, padding 18/32, gap 8, fill #E1FFA0,
   1.5px inside gradient stroke, shadow 2 14 24 rgba(38,63,66,.12). */
.afxfth-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 18px 32px; border-radius: var(--r-pill);
  background: var(--af-lime); color: var(--af-ink-teal);
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 2px 14px 24px 0 rgba(38,63,66,.12);
  transition: box-shadow var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out);
}
.afxfth-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--af-card-g);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
}
.afxfth-chev { width: 20px; height: 20px; flex: none; display: block; transition: transform var(--t-fast) var(--e-out); }

/* 959:164604 — 181x55, r50, padding 18/32, 1px rgba(255,255,255,.08) inside,
   backdrop blur 13.9. */
.afxfth-btn-ghost {
  text-transform: capitalize; /* 959:164604 textCase TITLE */
  display: inline-flex; align-items: center; justify-content: center;
  height: 55px; padding: 18px 32px; border-radius: var(--r-50);
  border: 1px solid var(--w-08); background: transparent;
  backdrop-filter: blur(13.9px); -webkit-backdrop-filter: blur(13.9px);
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  color: var(--af-white); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out);
}

/* --- 959:164564/164565 feature-badge row: 605x16 at y 678 (page 734).
   Row, gap 16. Each item: row, gap 8, 16x16 icon + SF Pro 510 14/14 #FFF.
   Sits 53px under the CTA row bottom (625+56=681 -> 734). --------------- */
.afxfth-badges {
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  margin: 53px 0 0; height: 16px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; letter-spacing: 0; color: var(--af-white);
}
.afxfth-badge { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; white-space: nowrap; }
.afxfth-badge img { width: 16px; height: 16px; flex: none; display: block; }

/* --- 959:164582 stat trio: 1425x90 at y 781 (page 837), row gap 39.
   Column 449x90, gap 17: 436x1 rule then body (gap 4). ------------------- */
.afxfth-stats { display: flex; flex-direction: row; align-items: center; gap: 39px; width: 1425px; margin-top: 87px; }
.afxfth-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 17px; width: 449px; flex: none; }
.afxfth-rule { width: 436px; max-width: 100%; height: 1px; background: var(--w-25); }
.afxfth-stat-body { display: flex; flex-direction: column; gap: 4px; }
.afxfth-stat-label { font-family: var(--font-alt); font-weight: var(--w-regular); font-size: 14px; line-height: 21px; color: var(--af-white); opacity: .8; }
.afxfth-stat-value { font-family: var(--font-alt); font-weight: var(--w-semi); font-size: 32px; line-height: 48px; color: var(--af-white); }

@media (hover: hover) and (pointer: fine) {
  .afxfth-btn:hover { box-shadow: 2px 18px 30px 0 rgba(38,63,66,.18); }
  .afxfth-btn:hover .afxfth-chev { transform: translateX(2px); }
  .afxfth-btn-ghost:hover { background-color: var(--w-06); }
}
.afxfth-btn:active, .afxfth-btn-ghost:active { transform: scale(.97); }
.afxfth a:focus-visible, .afxfth button:focus-visible {
  outline: 2px solid var(--af-lime); outline-offset: 3px; border-radius: var(--r-pill);
}

/* ---- responsive. 1512 is the design width and is never scaled. --------- */
@media (max-width: 1511px) {
  .afxfth-stats { width: 100%; }
  .afxfth-stat { width: auto; flex: 1 1 0; min-width: 0; }
  .afxfth-rule { width: 100%; }
  .afxfth-body { width: 100%; }
  .afxfth-h1 { width: auto; max-width: 760px; font-size: 92px; line-height: 84px; letter-spacing: -2.76px; }
}
@media (max-width: 1180px) {
  .afxfth-h1 { max-width: 640px; font-size: 72px; line-height: 66px; letter-spacing: -2.16px; }
  .afxfth-badges { flex-wrap: wrap; height: auto; row-gap: 12px; }
}
@media (max-width: 860px) {
  .afxfth { min-height: 0; padding-bottom: 64px; }
  .afxfth-h1 { font-size: 52px; line-height: 50px; letter-spacing: -1.56px; }
  .afxfth-lead { width: auto; max-width: 480px; }
  .afxfth-stats { flex-direction: column; align-items: stretch; gap: 24px; margin-top: 56px; }
  .afxfth-body { margin-top: 72px; gap: 24px; }
}
@media (max-width: 560px) {
  .afxfth { --ft-gutter: 20px; }
  .afxfth-h1 { font-size: 40px; line-height: 40px; letter-spacing: -1.2px; }
  .afxfth-ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .afxfth-btn, .afxfth-btn-ghost { width: 100%; }
  .afxfth-badges { margin-top: 32px; }
}


/* ---------------------------------------------------------------------------
   MOBILE PERFORMANCE, 3 Aug 2026
   This decorative glow carries filter: blur(258px) over a box ~1693x956. Blur
   cost is O(area x radius), so on a phone GPU it is one of the most expensive
   things on the page — and because it sits in the backdrop root, anything that
   samples the backdrop (the mobile menu's overlay) had to resolve it first,
   which took ~15s. A 258px-blurred solid ellipse is, visually, a radial
   gradient; below 768 it is drawn as one, for nothing.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .afxfth-glow {
    filter: none;
    background: radial-gradient(closest-side, var(--af-hero-glow) 0%, rgba(5,31,29,0) 100%);
  }
}