/* ============================================================================
   Home final CTA — "$5 today. Funded by next week".
   Figma 705:77958 "Frame 2147259241" (1512 x 1668).

   The band ENDS in the site footer (705:77988) but does not own it: the
   footer is shared furniture and lives in atlas-footer.css / fragments/footer.html.
   This file stops at the footer's outer margin.

   Figma child order is back-to-front, so children[0] is the BOTTOM layer.
   The stack, in paint order:
     705:77959  bg photo 1516x853 @ (-4, 5), mix-blend-mode SCREEN
     705:77960  Ellipse 473 1693x956 @ (27, -124), #051F1D, blur, HARD_LIGHT
     705:77961  black plate 737x41 @ (388, 725), blur
     705:77962  "light" haze 1764.3x1464.1 @ (-126, -351), 0.3 opacity
     705:77976  content column 558x392 @ (477, 120)
     705:77988  footer 1488x874 @ (12, 794)
     705:78070  Mask group — child 705:78071 is isMask AND visible:false. Not built.
     705:78072  proof row 706x16 @ (403, 735)

   Every y offset below is a margin or an absolute top, never padding.
   ========================================================================= */

/* 705:77958 — 1512x1668. Two stacked linear fills with identical handles; the
   top one wins, so only it is drawn. Re-derived over the 1512x1668 box: the
   ramp finishes at 43.89% (732px) and everything below that is flat #0F0F0F.
   `isolation: isolate` confines the SCREEN and HARD_LIGHT layers to this band
   instead of letting them blend against whatever section precedes it. */
.afxf {
  position: relative;
  isolation: isolate;
  /* Figma 705:77958 is 1668 tall, but that INCLUDES the footer (705:77988,
     874 tall) as a child. The footer ships as its own reusable band, so
     reserving the full 1668 here left a 555px hole above it. 1668 - 874. */
  min-height: 794px;
  overflow: hidden;
  background: linear-gradient(180deg, #303030 0%, #0F0F0F 43.89%);
  font-family: var(--font-sans);
  color: var(--af-white);
}

/* 705:77959 "image 1167" — 1516x853 at (-4, 5), scaleMode FILL (centre crop,
   no imageTransform, so `cover` IS equivalent here), blendMode SCREEN. */
/* FULL-BLEED FIX: the design is drawn on a 1512 canvas, but this layer is a
   band background, not placed art. Pinned at 1512 it stopped short on wider
   viewports and left a bare strip of flat band colour down the right.
   Spans the viewport now; cover keeps the artwork's aspect. */
.afxf__bg {
  position: absolute; left: 0; right: 0; top: 5px; width: auto; min-width: 1516px; height: 853px;
  background: url('/assets/figma/final-bg-314c87.webp') center / cover no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 705:77960 "Ellipse 473" — 1693x956 at (27, -124), #051F1D,
   LAYER_BLUR 516.4 (Figma radius is 2x the CSS blur() value), HARD_LIGHT.
   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 photo behind it — nothing
   like Figma's result. Layer blur + hard-light alone matches the reference
   export, so the background blur is dropped deliberately. Same call as the
   identical node in the hero (atlas-hero.css .afx-hero__glow). */
.afxf__glow {
  position: absolute; left: 27px; top: -124px; width: 1693px; height: 956px;
  background: #051F1D; border-radius: 50%;
  filter: blur(258.2px);
  mix-blend-mode: hard-light;
  pointer-events: none;
}

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

/* 705:77962 -> 705:77963 "light" — a 4-group white haze at node opacity 0.3.
   Exported flat (max alpha in the render is 24/255) rather than rebuilt:
   it is four overlapping blurred vector groups and nothing about it is
   reproducible in CSS. Drawn 1764.3x1464.1, shipped at 882x732 (2x is
   pointless for a gradient this soft). */
.afxf__light {
  position: absolute; left: -126px; top: -351px; width: 1764.3px; height: 1464.1px;
  background: url('/assets/figma/final-light.webp') center / 100% 100% no-repeat;
  pointer-events: none;
}

/* ---- 705:77976 — content column, 558x392 at (477, 120) ------------------- */
/* 477 = (1512 - 558) / 2, so it is a centred fixed column, not a padding box.
   The 120 is a MARGIN. As padding the column becomes 512 tall and every
   absolute offset below it (the proof row, the footer) lands 120px low.
   .afxf is a BFC (overflow: hidden), so the margin cannot collapse out. */
.afxf__inner {
  position: relative; z-index: 2;
  width: 558px; margin: 120px auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
/* 705:77977 — column, gap 16 */
.afxf__head { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }

/* 705:77978 — 119x33, radius 57, padding 6/14, gap 7, no fill,
   BACKGROUND_BLUR 16.7 -> backdrop-filter blur(8.35px). No blend mode on this
   node, so the backdrop-filter is safe to ship. */
.afxf__eyebrow {
  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;
}
.afxf__eyebrow img { width: 16px; height: 16px; display: block; flex: none; }

/* 705:77981 — headings column, gap 0, centred */
/* 705:77983 "Funded by next week" is drawn 712 wide inside a 558 column, so
   the heading deliberately overhangs by 77px each side. The 712 is a `width`,
   not a max-width, and nowrap holds the line: at 558 it wraps and the band
   gains 80px. align-items: center on the parent keeps the overhang symmetric. */
.afxf__h2 {
  margin: 0; width: 712px; flex: none;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  text-align: center; color: var(--af-white);
}
/* CHILD combinator, not descendant: .afxf__l2 is a nested span that must stay
   inline at 1512 (it only becomes a line on mobile). Before it existed this
   was `.afxf__h2 span` and the two rules are identical for the two lines. */
.afxf__h2 > span { display: block; white-space: nowrap; }
/* 705:77982 "$5 today. " — 297x80. Two stacked gradient fills with identical
   handles; children[0] is the bottom one, so fills[1] is what you see.
   Re-derived over the 297x80 box (fx.py's angle ignores the aspect ratio). */
.afxf__h2 .afxf__h2a {
  background: linear-gradient(130.1deg, #F8F8F8 39.92%, #636363 93.20%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; 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:77984 — 558x63, SF Pro 510 / 16 / 21.12px / ls -.32, node opacity .8 */
.afxf__body {
  margin: 0; width: 100%;
  font-size: 16px; line-height: 21.12px; font-weight: var(--w-medium);
  letter-spacing: -.32px; text-align: center; color: var(--af-white); opacity: .8;
}

/* 705:77985 — button row, 519x56, gap 12, align MIN */
.afxf__ctas { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; }

/* 705:77986 — 293x56, radius 100, padding 18/32, gap 8, fill lime,
   1.5px HARD_LIGHT gradient stroke at .6 opacity, shadow 2/14/24.1
   rgba(38,63,66,.12). Label textCase TITLE. Ink is --af-lime-ink, set and
   never inherited.
   DECLARED DEVIATION on the stroke: Chrome blends hard-light in sRGB and
   Figma does not. The stroke is pre-composited to its NORMAL equivalent,
   which at these alphas is visually identical over lime. */
.afxf__lime {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 18px 32px; box-sizing: border-box;
  border-radius: var(--r-pill); border: 0;
  background: var(--af-lime); color: var(--af-lime-ink);
  box-shadow: 2px 14px 24.1px 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-transform: capitalize; text-decoration: none; white-space: nowrap;
  transition: box-shadow var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out);
}
.afxf__lime::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(120deg,
      rgba(5,63,59,.6) 42.93%, rgba(5,63,59,.162) 69.01%, rgba(5,63,59,.6) 93.62%);
  -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;
}
.afxf__chev { width: 20px; height: 20px; display: block; flex: none;
  transition: transform var(--t-fast) var(--e-out); }

/* 705:77987 — 214x55, radius 50, padding 18/32, 1px INSIDE rgba(255,255,255,.08),
   BACKGROUND_BLUR 27.8 -> blur(13.9px). No fill. Its DROP_SHADOW is
   visible:false (the hover state in the file) and is not shipped. */
.afxf__ghost {
  display: inline-flex; align-items: center; justify-content: center;
  height: 55px; padding: 18px 32px; box-sizing: border-box;
  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;
  text-transform: capitalize; 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);
}

/* ---- 705:78072 — proof row, 706x16 at (403, 735) ------------------------- */
/* 403 = (1512 - 706) / 2. The row sits 735 - (120 + 392) = 223px below the
   content column's bottom edge, so that is a margin, not padding. */
.afxf__proof {
  position: relative; z-index: 2;
  width: 706px; margin: 223px auto 0;
  display: flex; flex-direction: row; align-items: center; gap: 16px;
}
/* 705:78074 / 78078 / 78082 — gap 8, icon 16x16 (#7CB1AC), SF Pro 510 / 14 / 14px */
.afxf__proof span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 14px; font-weight: var(--w-medium);
  color: var(--af-white); white-space: nowrap;
}
.afxf__proof img { width: 16px; height: 16px; display: block; flex: none; }

/* ---- 705:77988 — the footer slot ----------------------------------------
   The footer is 1488 wide at (12, 794). 794 - (735 + 16) = 43px below the
   proof row. Margin, not padding; the footer's own 64px padding is its. */
.afxf__footer { position: relative; z-index: 2; margin-top: 43px; }

/* ---- motion ------------------------------------------------------------
   Transform and opacity only, hover behind a real pointer, reduced motion
   already neutralised globally in atlas-tokens.css.                        */
@media (hover: hover) and (pointer: fine) {
  .afxf__lime:hover  { box-shadow: 2px 18px 30px 0 rgba(38,63,66,.18); }
  .afxf__lime:hover .afxf__chev { transform: translateX(2px); }
  .afxf__ghost:hover { background-color: var(--w-06); }
}
.afxf__lime:active, .afxf__ghost:active { transform: scale(.97); }
.afxf a:focus-visible {
  outline: 2px solid var(--af-lime); outline-offset: 4px; border-radius: var(--r-pill);
}

/* ---- narrow viewports ---------------------------------------------------
   The frame is only drawn at 1512. Below it the fixed boxes are released so
   the band still reads; nothing here changes the 1512 rendering. */
@media (max-width: 1512px) {
  .afxf__bg { left: 0; width: 100%; }
  .afxf__glow { left: 50%; margin-left: -819.5px; }
  .afxf__plate { left: 50%; margin-left: -368.5px; }
  .afxf__light { left: 50%; margin-left: -882.15px; }
}
@media (max-width: 760px) {
  .afxf { min-height: 0; }
  .afxf__inner { width: auto; max-width: 100%; padding: 96px var(--gutter) 0; }
  .afxf__h2 { width: 100%; font-size: 48px; line-height: 48px; letter-spacing: -1.44px; }
  .afxf__h2 span { white-space: normal; }
  .afxf__ctas { flex-wrap: wrap; justify-content: center; }
  .afxf__proof { width: auto; margin: 96px 0 0; padding: 0 var(--gutter);
    flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
  .afxf__plate, .afxf__light { display: none; }
}


/* ---------------------------------------------------------------------------
   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) {
  .afxf__glow {
    filter: none;
    background: radial-gradient(closest-side, #051F1D 0%, rgba(5,31,29,0) 100%);
  }
}

/* ============================================================================
   MOBILE — Figma 705:140626 "Frame 2147259241", 393 x 2596 (the footer,
   705:140672 at (8,775), is 1821 of that and ships as its own band, so this
   band is 775 tall — same split as 1512).
   SHARED FILE: everything below is inside @media (max-width:767px) and every
   selector is .afxf*, so no other page's desktop rendering can be reached.
   Desktop rules above are untouched.
   ========================================================================= */
@media (max-width: 767px) {
  /* fills[1] wins, as at 1512, but on mobile the ramp runs the full 2596 of
     the frame — of which this band shows the top 775. */
  .afxf {
    min-height: 0;
    background: linear-gradient(180deg, #303030 0%, #0F0F0F 100%);
    background-size: 100% 2596px; background-repeat: no-repeat;
  }

  /* 705:140627 — 758 x 779 at (-182,-13), SCREEN. Placed art on mobile, not a
     full-bleed plate, so the 1512 min-width trick is dropped. */
  .afxf__bg {
    left: -182px; right: auto; top: -13px; width: 758px; min-width: 0; height: 779px;
    background-size: 100% 100%;
  }
  /* 705:140628 — 1133.4 x 1328.4 at (-420,-237). The blur(516)-to-gradient
     swap made by the 767px perf rule above still applies. */
  .afxf__glow { left: -420px; top: -237px; width: 1133.4px; height: 1328.4px; }
  /* 705:140629 — 259 x 79 at (68,646), LAYER_BLUR 75 -> blur(37.5) */
  .afxf__plate { left: 68px; top: 646px; width: 259px; height: 79px; filter: blur(37.5px); }
  /* 705:140630 — same 1764.3 x 1464.1 haze, moved to (-685,-351) */
  .afxf__light { left: -685px; top: -351px; }

  /* --- 705:140644 content column, 394 x 477 at y 100, padding 0 24, gap 24 */
  .afxf__inner { width: 100%; margin: 100px 0 0; padding: 0 24px; box-sizing: border-box; gap: 24px; }
  .afxf__head { gap: 12px; }
  /* 705:140649 — three 52px lines: 705:140650 is one, 705:140651 two. The
     1512 file keeps "Funded by next week" on one line, so the break is forced
     by a span rather than the metrics. MARKUP: .afxf__l2 was added to
     index.html; it is inline (a no-op) at 1512. */
  .afxf__h2 { width: 346px; font-size: 52px; line-height: 52px; letter-spacing: -1.56px; }
  .afxf__l2 { display: block; }
  /* 705:140652 — 346 wide, five 21px lines (Figma rounds lineHeightPx 21.12) */
  .afxf__body { width: 346px; line-height: 21px; }
  /* 705:140653 — the buttons stack, 293 wide, gap 12 */
  .afxf__ctas { flex-direction: column; align-items: center; gap: 12px; width: 293px; }
  .afxf__lime, .afxf__ghost { width: 293px; }
  /* I705:140654;194:75574 — 16x20 chevron slot on mobile */
  .afxf__chev { width: 16px; height: 20px; }

  /* --- 705:140658 proof, 259 x 80 at (68,655): three 16px rows, gap 16 --- */
  /* FIXED 18 Sep 2026. Was `width: 259px` with the base rule's
     `.afxf__proof span { white-space: nowrap }` still in force. English fits
     259; nothing else does — German runs 396px, French 346, Spanish 344,
     Italian 315, every one of them painted past the right edge of a 360-430
     screen on every locale home page. The column now yields and the lines
     wrap. (Note the `max-width: 760px` block above already sets
     `width: auto; flex-wrap: wrap` here and this later block was overriding it
     straight back to 259 — the same ordering trap as `.afxp__strip`.) */
  .afxf__proof { width: 100%; max-width: 259px; margin: 78px auto 0; flex-direction: column; align-items: center; gap: 16px; }
  .afxf__proof span {
    height: auto; min-height: 16px;
    white-space: normal; text-align: center; justify-content: center;
    align-items: flex-start;
  }

  /* 705:140672 — the footer sits at y 775, 40 below the proof row */
  .afxf__footer { margin-top: 40px; }
}