/* ============================================================================
   Home band 1 — hero.  Figma 705:16015 (1512 x 946).
   Every dimension is the value in the node JSON.
   ========================================================================= */

.afx-hero { position: relative; min-height: 946px; overflow: hidden; background: var(--af-black); }

/* Figma 705:16015 fill — image 8cbbc2d6…, scaleMode CROP with
   imageTransform [[1,0,0],[0,1.0473,-0.0546]]: full width, scaled 104.73% on Y
   and offset up by 5.46% of the frame. `cover` is NOT equivalent — it zooms the
   art and darkens the centre. */
.afx-hero__bg {
  position: absolute; inset: 0;
  background: url('/assets/figma/3-8cbbc2.webp') no-repeat;
  background-size: 100% 104.73%;
  background-position: 0 -5.46%;
  pointer-events: none;
}
/* Figma 705:16016 "Ellipse 473" — 1693x956 at x -609 y 68, #051F1D,
   filter blur 258px, backdrop-blur 158px, mix-blend-mode HARD_LIGHT.
   Left edge sits at x=-609 of the 1512 frame, so from a 50% origin that is
   -609 - 756 = -1365, not -1455. */
/* DECLARED DEVIATION: the node also carries BACKGROUND_BLUR 315.6. Chrome
   composites backdrop-filter on a mix-blend-mode element as an opaque frosted
   plate over the whole ellipse, which buries the glass artwork — nothing like
   Figma's result. Layer blur + hard-light alone matches the reference render,
   so the background blur is dropped deliberately. Verified side by side. */
.afx-hero__glow {
  position: absolute; left: 50%; top: 68px;
  width: 1693px; height: 956px; margin-left: -1365px;
  background: var(--af-hero-glow); border-radius: 50%;
  filter: blur(258.2px);
  mix-blend-mode: hard-light;
  pointer-events: none;
}
/* Figma 705:16017 "Overlay" — 1512x900 at y 56 */
.afx-hero__overlay {
  position: absolute; left: 0; top: 56px; width: 100%; 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;
}
.afx-hero__inner { position: relative; z-index: 2; }

/* the 1432 content column, 40px gutters inside the 1512 shell */
.afx-page { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 0; }
@media (max-width: 1512px) { .afx-page { padding: 0 var(--gutter); box-sizing: border-box; } }

/* ---- Figma 705:16034 — hero row, 1432x584 at y 186.5,
        row / SPACE_BETWEEN / align MAX (bottom-aligned) ---------------------- */
/* The bar is 56 and the nav is 10 + 59, so the row's own top edge is at 125.
   Figma puts it at 186.5, hence a 61.5 MARGIN. Using padding here instead
   inflates the box to 714 and drags every child down 69px. */
.afx-hero__row {
  display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-top: 61.5px;
  height: 584px;
}

/* ---- Figma 705:16035 — left column 650x584, column, gap 32.
        Fixed width, not max-width: the column hugs its 536-wide heading
        otherwise and the CTA row reflows. */
.afx-hero__left { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; width: 650px; flex: none; }

/* 705:16036 — SF Pro Display 500 / 14 / 21px (150%) */
.afx-hero__eyebrow {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; color: var(--af-white); margin: 0;
}
/* 705:16037 — column, gap 12 */
.afx-hero__headings { display: flex; flex-direction: column; gap: 12px; max-width: 536px; }

/* 705:16039 — SF Pro 510 / 110 / 99px (90%) / ls -3% ; white with a subtle
   top-light gradient (#F8F8F8 -> #FFFFFF at 160.8deg) */
.afx-hero__h1 {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 110px; line-height: 99px; letter-spacing: -3.3px;
  margin: 0; color: var(--af-white);
  background: linear-gradient(160.8deg, #F8F8F8 0%, #FFFFFF 100%);
  -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;
}
/* 705:16040 — SF Pro 510 / 32 / 48px / ls -2% */
.afx-hero__h2 {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 32px; line-height: 48px; letter-spacing: -.64px;
  margin: 0; color: var(--af-white);
}
/* 705:16041 — SF Pro 510 / 18 / 27px / ls -2%, opacity .8, max 368 wide */
.afx-hero__lead {
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; letter-spacing: -.36px;
  color: var(--af-white); opacity: .8; margin: 0; max-width: 368px;
}

/* ---- 705:16042 — CTA row, gap 12 ----------------------------------------- */
.afx-hero__ctas { display: flex; flex-direction: row; gap: 12px; align-items: center; }

/* 705:16043 — 175x56, radius 100, fill #E1FFA0, 1.5px INSIDE gradient stroke,
   shadow 2px 14px 24px rgba(38,63,66,.12). Ink #001D21 — set, never inherited. */
.afx-btn-lime {
  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);
  box-shadow: 2px 14px 24px 0 rgba(38,63,66,.12);
  font-family: var(--font-sans); font-weight: var(--w-semi);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  text-decoration: none; white-space: nowrap; border: 0;
  transition: transform var(--t-instant) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.afx-btn-lime::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;
}
@media (hover: hover) and (pointer: fine) {
  .afx-btn-lime:hover { box-shadow: 2px 18px 30px 0 rgba(38,63,66,.18); }
}
.afx-btn-lime:active { transform: scale(.97); }
/* I705:16043;194:75575 — 20x20 double chevron, second stroke at .4 opacity,
   ink #001D21. Both strokes are in the exported file, not drawn here. */
.afx-btn__chev { width: 20px; height: 20px; display: block; flex: none; }
/* the nudge on hover reads as "forward", and costs one composited property */
@media (hover: hover) and (pointer: fine) {
  .afx-btn-lime:hover .afx-btn__chev,
  .afx-payouts__verifiable:hover .afx-btn__chev { transform: translateX(2px); }
}
.afx-btn__chev { transition: transform var(--t-fast) var(--e-out); }

/* 705:16044 — 168x55, radius 50, 1px INSIDE rgba(255,255,255,.08),
   backdrop-blur 28, no fill */
.afx-btn-ghost {
  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-sans); 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);
}
@media (hover: hover) and (pointer: fine) { .afx-btn-ghost:hover { background-color: var(--w-06); } }
.afx-btn-ghost:active { transform: scale(.97); }

/* ---- 705:16046 — live payout card, 309x426 ------------------------------- */
.afx-payouts { width: 309px; flex: none; position: relative; }

/* 705:16052 — 309x392, fill rgba(89,118,116,.6), radius 20,
   1px INSIDE gradient hairline, backdrop-blur 146 */
/* z-order: in Figma the group's children run back-to-front as
   [705:16047 foot, 705:16052 card] — so the footer strip sits BEHIND the card
   and only its bottom 34px show. DOM order puts it in front, hence the z-index. */
.afx-payouts__card {
  display: flex; flex-direction: column; gap: 24px; align-items: center;
  padding: 16px; border-radius: var(--r-20);
  background: rgba(89,118,116,.6);
  backdrop-filter: blur(72.95px); -webkit-backdrop-filter: blur(72.95px);
  position: relative; z-index: 2;
}
.afx-payouts__card::after, .afx-payouts__foot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--af-hair);
  -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;
}
/* 705:16053 — header row, SPACE_BETWEEN */
.afx-payouts__head { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 4px; }
.afx-payouts__live { display: flex; align-items: center; gap: 4px; }
/* 705:16056 — 6px lime dot inside a 16px box */
.afx-payouts__dot {
  width: 16px; height: 16px; display: grid; place-items: center; flex: none;
}
.afx-payouts__dot i { width: 6px; height: 6px; border-radius: 50%; background: var(--af-lime); display: block; }
/* 705:16057 — DM Sans 600 / 16 / 24px / ls -2% */
.afx-payouts__title {
  font-family: var(--font-ui); font-weight: var(--w-semi);
  font-size: 16px; line-height: 24px; letter-spacing: -.32px; color: var(--af-white);
}
/* 705:16058 — opacity .8, DM Sans 500 / 14, preceded by a 14x14 globe */
.afx-payouts__meta img { width: 14px; height: 14px; flex: none; display: block; }
.afx-payouts__meta {
  display: flex; align-items: center; gap: 8px; opacity: .8;
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; color: var(--af-white);
}

/* 705:16074 — rows column, gap 8 */
.afx-payouts__list { display: flex; flex-direction: column; gap: 8px; width: 100%; }

/* 705:16075… — 277x56, radius 14, fill rgba(255,255,255,.1),
   padding 4 12 4 4, SPACE_BETWEEN */
.afx-payout {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 56px; padding: 4px 12px 4px 4px; border-radius: 14px;
  background: var(--w-10);
}
.afx-payout__who { display: flex; align-items: center; gap: 12px; }
/* I…;18:15453 — 48x48, radius 10.29, placeholder fill #C8C8C8 behind the image */
.afx-payout__avatar {
  width: 48px; height: 48px; border-radius: 10.29px; background: #C8C8C8;
  object-fit: cover; display: block; flex: none;
}
.afx-payout__lines { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
/* Saans 500 / 14 / 14px */
.afx-payout__name {
  font-family: var(--font-alt); font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; color: var(--af-white);
}
/* 705:16074… — the sub line is [flag 12 + 4 + code] then 6 then the timestamp
   (Figma: inner frame 35x14, outer 100x14). One flex row with a 6 gap, so the
   flag-to-code pair is pulled back 2px to land on 4. Never wraps: the two-line
   fallback breaks the 56px row height. */
.afx-payout__sub { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.afx-payout__flag + span { margin-left: -2px; }
/* I…;705:16105 — 12x12 country flag, radius 6, sits before the country code.
   Missing from the first build; caught only by looking at the render. */
.afx-payout__flag { width: 12px; height: 12px; flex: none; border-radius: 50%; display: block; }
.afx-payout__sub span {
  font-family: var(--font-alt); font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; color: var(--af-white); opacity: .6;
}
/* I…;57:194 — Saans 700 / 20 / 22.7px */
.afx-payout__amount {
  font-family: var(--font-alt); font-weight: var(--w-bold);
  font-size: 20px; line-height: 22.7px; color: var(--af-white); white-space: nowrap;
}

/* 705:16047 — footer strip 289x67 at y 359 (overlaps the card by 33px),
   fill rgba(34,54,52,.63), radius 20, backdrop-blur 61 */
.afx-payouts__foot {
  position: relative; z-index: 1; width: 289px; margin: -33px auto 0;
  min-height: 67px; padding: 8px 10px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px;
  border-radius: var(--r-20); background: rgba(34,54,52,.63);
  backdrop-filter: blur(30.65px); -webkit-backdrop-filter: blur(30.65px);
}
.afx-payouts__verifiable {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; letter-spacing: -.42px; color: var(--af-white);
  text-decoration: none;
}

/* ---- 705:16018 — stat strip, 1432x90 at y 837, row gap 40 ---------------- */
/* margin, not padding — 837 minus the row's bottom edge at 770.5 */
.afx-stats {
  display: flex; flex-direction: row; gap: 40px; align-items: center;
  margin-top: 66.5px;
  height: 90px;
}
.afx-stat { display: flex; flex-direction: column; gap: 17px; align-items: flex-start; flex: 1; }
/* 705:16020 — 1px rule at rgba(255,255,255,.25) spanning the column */
.afx-stat__rule { width: 100%; height: 1px; background: var(--w-25); }
.afx-stat__body { display: flex; flex-direction: column; gap: 4px; }
/* Saans 400 / 14 / 21px, opacity .8 */
.afx-stat__label {
  font-family: var(--font-alt); font-weight: var(--w-regular);
  font-size: 14px; line-height: 21px; color: var(--af-white); opacity: .8;
}
/* Saans 600 / 32 / 48px */
.afx-stat__value {
  font-family: var(--font-alt); font-weight: var(--w-semi);
  font-size: 32px; line-height: 48px; color: var(--af-white);
}

/* ---------------------------------------------------------------- responsive
   The file has no frames below 1512 for this page, so these breakpoints are
   derived, not matched. Flagged in HOME-REBUILD-SPEC.md.                     */
@media (max-width: 1180px) {
  .afx-hero__row { flex-direction: column; align-items: flex-start; gap: 48px; }
  .afx-hero__h1 { font-size: 80px; line-height: 72px; letter-spacing: -2.4px; }
  .afx-payouts { width: 100%; max-width: 380px; }
}
@media (max-width: 760px) {
  .afx-hero { min-height: 0; padding-bottom: 64px; }
  .afx-hero__row { padding-top: 72px; }
  .afx-hero__h1 { font-size: 48px; line-height: 46px; letter-spacing: -1.44px; }
  .afx-hero__h2 { font-size: 24px; line-height: 34px; }
  .afx-hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .afx-btn-lime, .afx-btn-ghost { width: 100%; }
  .afx-stats { flex-direction: column; align-items: stretch; gap: 24px; }
}


/* ---------------------------------------------------------------------------
   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) {
  .afx-hero__glow {
    filter: none;
    background: radial-gradient(closest-side, var(--af-hero-glow) 0%, rgba(5,31,29,0) 100%);
  }
}

/* ============================================================================
   MOBILE — Figma 705:78552 "Mobile" / band 1 "iPhone 16 - 1" (705:78553),
   393 x 1255. Every number below is the value in that node tree.
   Desktop rules above are untouched.
   ========================================================================= */
@media (max-width: 767px) {
  /* band height: content ends at 1217, frame is 1255. 705:78553 fill is
     #FFFFFF — nothing shows it directly, but it is the base the two
     HARD_LIGHT ellipses blend against, which is what makes the band teal. */
  .afx-hero { min-height: 0; padding-bottom: 38px; background: #FFFFFF; isolation: isolate; }

  /* 24px gutters -> a 345 content column (Figma frames all sit at x=24, w=345) */
  .afx-page { padding: 0 24px; }

  /* --- 705:78554 "Overlay" ------------------------------------------------
     The node carries rotation = 1.5708 rad, so its OWN box is 1429 x 393 and
     the 393 x 1429 in absoluteBoundingBox is just the AABB. Everything on it
     has to be resolved in local space and then turned 90deg CCW.
     fills[0] = image 8cbbc2d6, CROP (serialised STRETCH + imageTransform).
     imageTransform [[0,-.33588,.66794],[2.04435,0,-.38371]] maps normalised
     IMAGE space to normalised LOCAL space; run through the node rotation the
     two rotations cancel and the art lands upright at 803.4 x 480 — exactly
     the file's own 1622x969 aspect — with its top-left at (-150.8, 530.5)
     inside the rect. So it covers y 586.5..1066.5 of the band and nothing
     else: above and below it you are looking at the frame fill through the
     ellipses. */
  .afx-hero__bg {
    inset: auto; left: 0; top: 56px; width: 100%; height: 1429px;
    background: none; overflow: hidden; z-index: 0;
  }
  .afx-hero__bg::before {
    content: ''; position: absolute;
    left: -150.8px; top: 530.5px; width: 803.4px; height: 480px;
    background: url('/assets/figma/3-8cbbc2.webp') no-repeat;
    background-size: 100% 100%;
  }
  /* fills[1] of the same rect — 89.8deg in LOCAL space, and local +x maps to
     container "up", so on screen it runs top-to-bottom with the stops
     reversed: local 100% is the top edge, local 0% the bottom. */
  .afx-hero__overlay {
    top: 56px; height: 1429px; z-index: 1;
    background: linear-gradient(180deg,
      rgba(5,63,59,.4) 0%, rgba(194,213,213,0) 16.81%,
      rgba(194,213,213,0) 78.64%, rgba(5,63,59,.62) 100%);
  }

  /* --- 705:78555 / 705:78556 "Ellipse 473 / 474" --------------------------
     1311 x 740 at (-624,146) and (-588,852), #051F1D, HARD_LIGHT,
     LAYER_BLUR 516 (+ BACKGROUND_BLUR 316, dropped for the same reason the
     desktop one is). Centres therefore fall at (31.5,516) and (67.5,1222).
     DECLARED DEVIATION: a 516px layer blur over 1311x740 is, visually, a
     radial falloff, and on a phone GPU it is the most expensive thing on the
     page — the same call the 767px perf rule above already makes. Drawn as two
     radial gradients, falloff fitted against the Figma render of 705:78553. */
  .afx-hero__glow {
    left: 0; top: 0; margin-left: 0; width: 100%; height: 100%;
    border-radius: 0; filter: none;
    mix-blend-mode: hard-light; z-index: 2;
    background:
      radial-gradient(ellipse 1050px 760px at 31.5px 516px,
        rgba(5,31,29,.85) 0%, rgba(5,31,29,.74) 30%, rgba(5,31,29,0) 100%),
      radial-gradient(ellipse 1050px 760px at 67.5px 1222px,
        rgba(5,31,29,.85) 0%, rgba(5,31,29,.74) 30%, rgba(5,31,29,0) 100%);
  }
  .afx-hero__inner { z-index: 3; }

  /* --- 705:78557 hero column, 345 x 417 at (24,188), col / gap 24 ---------
     bar 56 + nav (64 + 64) = 128, so 188 - 128 = a 60px margin. */
  .afx-hero__row {
    flex-direction: column; align-items: flex-start;
    gap: 63px;                     /* 668 - 605 */
    margin-top: 60px; padding-top: 0; height: auto;
  }
  .afx-hero__left { width: 100%; gap: 24px; }
  /* 705:78558 groups the eyebrow + headings at gap 16 inside a gap-24 column */
  .afx-hero__eyebrow { margin-bottom: -8px; }
  /* 705:78562 — SF Pro 510 / 64 / 57.6px / ls -1.92. Figma reports 174 for the
     three lines (3 x 57.6 = 172.8); min-height, never height, so a longer
     translation grows instead of clipping. */
  /* 705:78562 — SF Pro 510 / 64 / ls -1.92. Figma's lineHeightPx is 57.6 but
     it lays text out on whole-pixel line boxes, which is why the node is 174
     tall and not 172.8; 58 is what reproduces the file. */
  .afx-hero__h1 { font-size: 64px; line-height: 58px; letter-spacing: -1.92px; }
  /* 705:78563 — 24 / 36 / ls -0.48 */
  .afx-hero__h2 { font-size: 24px; line-height: 36px; letter-spacing: -.48px; }
  .afx-hero__headings { max-width: none; gap: 12px; }
  /* 705:78564 — 368 wide at x 24: it deliberately overhangs the 345 column by
     23px and stops at 392, one pixel inside the frame. */
  .afx-hero__lead { width: 368px; max-width: none; }

  /* 705:78565 — CTA row 345 x 56, gap 12, both buttons FILL -> 166.5 each */
  .afx-hero__ctas { flex-direction: row; align-items: flex-start; width: 100%; gap: 12px; }
  .afx-hero__ctas .afx-btn-lime,
  .afx-hero__ctas .afx-btn-ghost {
    flex: none; width: calc((100% - 12px) / 2); min-width: 0;
    padding-left: 0; padding-right: 0;
  }
  /* I705:78566;194:75574 — the chevron slot is 16x20 on mobile, not 20x20 */
  .afx-hero__ctas .afx-btn__chev { width: 16px; height: 20px; }

  /* --- 705:78569 live payouts, 345 x 426 at (24,668) ---------------------- */
  .afx-payouts { width: 100%; }
  .afx-payouts__card { width: 100%; }
  /* 705:78570 — 322.7 x 67, still overlapping the card by 33 */
  .afx-payouts__foot { width: 322.7px; }

  /* --- 705:78616 stat strip, 345 x 63 at (24,1154), row / gap 12 ---------- */
  .afx-stats {
    flex-direction: row; align-items: flex-start;
    gap: 12px; margin-top: 60px; height: 63px;
  }
  .afx-stat { flex: none; width: calc((100% - 24px) / 3); gap: 12px; min-width: 0; }
  /* 705:78618 is a zero-height VECTOR with a 1px CENTER stroke, so it adds
     nothing to the 63px column: the hairline is pulled back out of the flow. */
  .afx-stat__rule { margin-bottom: -1px; }
  .afx-stat__body { gap: 0; }
  /* 705:78621 — Saans 600 / 20 / 30px */
  .afx-stat__value { font-size: 20px; line-height: 30px; }
}

/* Tap targets. The Figma boxes for these links are their ink boxes, so at 393
   several land under 44px. The visual box is left exactly as drawn and the
   HIT area is grown with a pseudo-element, which costs no layout. */
@media (max-width: 767px) {
  .afx-payouts__verifiable { position: relative; }
  .afx-payouts__verifiable::after { content: ''; position: absolute; left: -12px; right: -12px; top: -12px; bottom: -12px; }
  .afx-bar__pill { position: relative; }
  .afx-bar__pill::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
}