/* ============================================================================
   Home band — the 24-hour payout guarantee.  Figma 705:16529 (1512 x 1146),
   child of the mega-container 705:16528.
   Every dimension below is the value in the node JSON. The band has no
   auto-layout: all seven children carry explicit x/y, so the whole thing is
   an absolutely-positioned stage 1512 wide, centred in the viewport.
   ========================================================================= */

/* 705:16529 fill — two paints. fills[0] is a light #CFE6E4 -> #FFF gradient
   that is completely covered by fills[1], the opaque shell gradient, so only
   fills[1] is drawn. Its handle stops at 43.89% of the frame, NOT 100%: below
   503px it is flat #0F0F0F. --af-shell runs to 100% and is therefore wrong here. */
.afxg {
  position: relative;
  height: 1146px;
  overflow: hidden;
  background: linear-gradient(180deg, #303030 0%, #0F0F0F 43.89%);
  isolation: isolate;              /* keeps the LIGHTEN/EXCLUSION art off the page */
}
/* The stage repeats the band gradient. It is the same paint over the same box,
   so it is invisible at 1512 — but at the scaled breakpoints `transform` makes
   the stage a stacking context, and without a backdrop of its own the LIGHTEN
   photo would composite against transparency and blow out. */
/* CENTRED, deliberately. An earlier pass made this full-bleed to kill a bare
   strip on the right, but the stage is NOT a background — it is the fixed 1512
   composition that positions every element in the band, so widening it
   left-aligned the whole design above 1512. The bare strip is the section's
   job: .afxg already carries the same gradient edge to edge. */
.afxg__stage {
  position: absolute; left: 50%; top: 0;
  width: 1512px; height: 1146px; margin-left: -756px;
  transform-origin: top center;
  background: linear-gradient(180deg, #303030 0%, #0F0F0F 43.89%);
}

/* ---- art layers. children[0] is the BOTTOM-most layer in Figma, so the
        order here is photo -> black shade -> teal wash. ------------------- */

/* 705:16530 "image 1159" — image 48fe3970…, scaleMode FILL, blend LIGHTEN,
   opacity .42, rotation -0.2536719 rad. The reported 2235.1x1603.5 is the
   axis-aligned bounding box of the rotated rect; the rect itself is
   2015 x 1134 (solved from the AABB and the angle) centred at 781.65 / 552.73.
   Figma rotation is counter-clockwise-positive and CSS is clockwise-positive,
   so the radian value converts straight to a NEGATIVE CSS angle. Verified by
   rendering the node alone and diffing both candidate rotations in PIL.
   The rect is 1.7769:1 and the source art is 1672x941 = 1.7768:1, so `cover`
   crops nothing — it is an exact fit. */
.afxg__photo {
  position: absolute; left: 781.65px; top: 552.73px;
  width: 2015px; height: 1134px; margin-left: -1007.5px; margin-top: -567px;
  transform: rotate(-14.534deg);
  background: url('/assets/figma/guar-bg.webp') center / cover no-repeat;
  opacity: .42;
  mix-blend-mode: lighten;
  pointer-events: none;
}
/* 705:16531 "Ellipse 14344" — #000 at .4, LAYER_BLUR 150.6 (fx already halves
   that to the CSS 75.3), rotation -0.3654524 rad. AABB 784.05x669.80 resolves
   to a 662 x 463.8 ellipse centred at 761.02 / 662.90. */
.afxg__shade {
  position: absolute; left: 761.02px; top: 662.9px;
  width: 662px; height: 463.8px; margin-left: -331px; margin-top: -231.9px;
  transform: rotate(-20.94deg);
  background: #000; border-radius: 50%;
  opacity: .4; filter: blur(75.3px);
  pointer-events: none;
}
/* 705:16532 "Ellipse 14345" — #00ADB5 at .36, LAYER_BLUR 204.8 -> blur(102.4),
   blend EXCLUSION. Rotation is 0.0056 rad (0.3deg) and is dropped. */
.afxg__wash {
  position: absolute; left: 501.71px; top: 442px;
  width: 548.84px; height: 137.33px;
  background: #00ADB5; border-radius: 50%;
  opacity: .36; filter: blur(102.4px);
  mix-blend-mode: exclusion;
  pointer-events: none;
}

/* ---- 705:16533 — header column, 758x241 at 376.5 / 120, gap 16, align CENTER */
.afxg__head {
  position: absolute; left: 376.5px; top: 120px; width: 758px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  z-index: 2;
}

/* 705:16534 — 248x33 row, padding 6/14, gap 7, radius 57.
   DECLARED DEVIATION: the node carries BACKGROUND_BLUR 16.7 but both its fill
   and its stroke are visible:false, so Figma paints nothing and blurs nothing.
   No backdrop-filter is emitted — adding one would put a visible frosted
   plate over the artwork that is not in the design. */
.afxg__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 6px 14px; border-radius: 57px;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  color: var(--af-white);
}
.afxg__eyebrow-icon { display: block; width: 16px; height: 16px; flex: none; }
/* 705:16536 styleOverrideTable[1] — second run is white at .6 paint opacity */
.afxg__dim { color: var(--w-60); }

/* 705:16537 — 758x192 column, gap 0, two 96px lines.
   705:16538 is HUG at 614 wide, 705:16539 FILLs the 758. */
.afxg__title {
  margin: 0; width: 758px;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 96px; line-height: 96px; letter-spacing: -2.88px;
  text-align: center; color: var(--af-white);
}
/* 705:16538 fills[1] (fills[0] is a teal pair buried under it).
   fx.py reports "162.2deg 0%/100%", which is the raw handle and is wrong:
   Figma resolves the three handles as an AFFINE BASIS in the unit square and
   then stretches by the box, so the direction is not the handle direction.
   Re-derived from h0/h1/h2 against the 614x96 box, then checked by plane-
   fitting the glyph interiors of the 1:1 reference export in PIL:
     measured  v = -0.29773x - 0.67895y + 329.4  (rms 0.33)
     analytic  156.33deg, #F8F8F8 33.58%, #636363 93.23%
     measured  156.32deg,          32.82%,          92.91%
   The 614px width is pinned so the gradient box cannot drift with the font. */
.afxg__title-a {
  display: block; width: 614px;
  background: linear-gradient(156.33deg, #F8F8F8 33.58%, #636363 93.23%);
  -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;
}
.afxg__title-b { display: block; width: 758px; }

/* ---- 705:16540 "mockup" — 439x542 at 517 / 392. 705:16541 carries a
   14px -1px 52.3px rgba(0,0,0,.42) drop shadow and 705:16542 is an ALPHA mask
   that fades the phone out over its bottom 20%; 705:16544 "Notifications"
   stacks three glass cards on top of it. All of that is baked into one raster
   at 3x and resized to 2x drawn size. The element is placed on the node's
   absoluteRenderBounds (478.7 / 338.7, 526.54x646.60), not on the 439x542
   bounding box, because the export includes the shadow bleed. */
.afxg__mockup {
  position: absolute; left: 478.7px; top: 338.7px;
  width: 526.55px; height: 646.6px;
  z-index: 2; pointer-events: none;
}

/* ---- 705:16552 / 705:16562 — the two glass chips, radius 58,
   fill #FFF at .10, padding 8/24, gap 6.
   705:16552  195x58 at 392.5 / 556
   705:16562  247x58 at 939   / 652
   DECLARED DEVIATION: the nodes carry Figma's GLASS effect plus an INNER_SHADOW
   in LINEAR_DODGE. CSS has no additive inset shadow, so the rim light is
   approximated with a plain inset rgba(124,177,172,.32) and the glass with a
   backdrop blur. Fitted against the reference; the chips read slightly flatter
   than Figma but do not glow the wrong colour. */
/* the wrapper exists only so the two chips can become a wrapping row on
   mobile; on desktop it is transparent to layout. */
.afxg__chips { display: contents; }
.afxg__chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 58px; padding: 8px 24px; box-sizing: border-box;
  border-radius: 58px;
  background: var(--w-10);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  box-shadow: 6px 12px 17.6px 0 rgba(0,0,0,.35),
              inset 3px -4px 4.8px 0 rgba(124,177,172,.32);
  transition: transform var(--t-base) var(--e-out);
}
.afxg__chip--time  { left: 392.5px; top: 556px; width: 195px; }
.afxg__chip--money { left: 939px;   top: 652px; width: 247px; }
/* 705:16553 / 705:16563 — 28x28 clipped icon frames */
.afxg__chip-icon { display: block; width: 28px; height: 28px; flex: none; }
/* 705:16561 / 705:16574 — 28/860, lh 42, ls -.84. fills[0] is flat white and
   is covered by the gradient in fills[1]. Same affine derivation as the
   headline; the angle differs between the two chips only because the boxes
   are 113x42 and 165x42. */
.afxg__chip-label {
  font-family: var(--font-display); font-weight: var(--w-heavy);
  font-size: 28px; line-height: 42px; letter-spacing: -.84px;
  white-space: nowrap;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.afxg__chip--time  .afxg__chip-label { background-image: linear-gradient(126.92deg, #FFFFFF 37.20%, #7E9A98 105.00%); }
.afxg__chip--money .afxg__chip-label { background-image: linear-gradient(137.65deg, #FFFFFF 37.20%, #7E9A98 105.00%); }

/* ---- 705:16545 / 705:16546 — closing column, 875x206 at 318 / 940, gap 24.
   Figma stacks 84 + 24 + 56 + 24 + 18 = 206, so the gaps are margins on the
   flex children, never padding on this box. */
.afxg__foot {
  position: absolute; left: 318px; top: 940px; width: 875px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  z-index: 3;
}
/* 705:16547 — 623x84, 16/510, lh 21.12, ls -.32, centre.
   styleOverrideTable: run 8 is 700 weight solid white, run 6 is white at .8. */
.afxg__body {
  margin: 0; width: 623px; text-align: center;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 21.12px; letter-spacing: -.32px;
  color: var(--w-80);
}
.afxg__body b { font-weight: var(--w-bold); color: var(--af-white); }

/* 705:16548 — 474x56 row, gap 12. The two buttons are the shared 632:11345 /
   632:11349 components, so .afx-btn-lime / .afx-btn-ghost from atlas-hero.css
   are reused rather than redeclared. */
.afxg__ctas { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; }
/* Both button labels carry textCase TITLE in Figma. The HTML keeps the source
   strings ("Start your challenge", "See a verified payout"); the title-casing
   is a render transform, exactly as in the file. Delete this rule to ship
   sentence case. */
.afxg__ctas .afx-btn-lime,
.afxg__ctas .afx-btn-ghost { text-transform: capitalize; }
.afxg__ctas .afx-btn-lime { color: var(--af-ink-teal); }   /* #001D21, never inherited */

/* 705:16551 — 515x18, 12/510, lh 18, node opacity .2 */
.afxg__legal {
  margin: 0; width: 515px; text-align: center;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 12px; line-height: 18px;
  color: var(--af-white); opacity: .2;
}

/* ---- motion ------------------------------------------------------------
   Only transform and opacity. The buttons already carry press + hover from
   atlas-hero.css; everything added here is a focus ring plus one 2px chip
   lift, which answers "is this surface live?" without drawing attention. */
@media (hover: hover) and (pointer: fine) {
  .afxg__chip:hover { transform: translateY(-2px); }
}
.afxg .afx-btn-lime:focus-visible,
.afxg .afx-btn-ghost:focus-visible {
  outline: 2px solid var(--af-mint); outline-offset: 3px;
}

/* ---- narrower viewports -------------------------------------------------
   The stage is a fixed 1512 composition, so it is scaled rather than reflowed
   down to 900px. Section height tracks the scale so the next band does not
   collide. Below 900px it becomes a normal stacked column. */
@media (max-width: 1439px) { .afxg { height: 1032px; } .afxg__stage { transform: scale(.90); } }
@media (max-width: 1279px) { .afxg { height:  909px; } .afxg__stage { transform: scale(.79); } }
@media (max-width: 1079px) { .afxg { height:  757px; } .afxg__stage { transform: scale(.66); } }

@media (max-width: 899px) {
  .afxg { height: auto; padding: 72px 0 80px; }
  .afxg__stage {
    position: static; width: 100%; height: auto; margin: 0; transform: none;
    background: none;
    display: flex; flex-direction: column; align-items: center; gap: 32px;
    padding: 0 20px; box-sizing: border-box;
  }
  .afxg__photo, .afxg__shade, .afxg__wash { position: absolute; }
  .afxg__head { position: static; width: 100%; }
  .afxg__title { width: 100%; font-size: 40px; line-height: 44px; letter-spacing: -1.2px; }
  .afxg__title-a, .afxg__title-b { width: 100%; }
  .afxg__mockup { position: static; width: 320px; height: 393px; }
  .afxg__chip { position: static; width: auto; }
  .afxg__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .afxg__foot { position: static; width: 100%; }
  .afxg__body, .afxg__legal { width: 100%; }
  .afxg__ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .afxg__ctas .afx-btn-lime, .afxg__ctas .afx-btn-ghost { width: 100%; box-sizing: border-box; }
}

/* ============================================================================
   MOBILE — Figma 705:79084 "Frame 2147259147", 393 x 1085.
   Like 1512 this band has no auto-layout: every child carries an explicit
   x/y, so the stage stays an absolutely-positioned composition, now 393 wide.
   Desktop rules above are untouched.

   DECLARED DEVIATION — band height. The frame is 1085 but its own content
   ends at 1103: 705:79100 sits at y 749 and is 354 tall, so the frame clips
   the second line of the legal note. Text may not be clipped, so the band
   ships 1103 tall and everything below it moves down 18px.
   ========================================================================= */
@media (max-width: 767px) {
  /* fills[1] again covers fills[0]; on mobile its ramp ends at 21.84%,
     not the 43.89% it uses at 1512. */
  .afxg { height: 1103px; padding: 0; background: linear-gradient(180deg, #303030 0%, #0F0F0F 21.84%); }
  .afxg__stage {
    position: absolute; left: 0; top: 0; margin: 0;
    width: 100%; height: 1103px; padding: 0; transform: none; display: block;
    background: linear-gradient(180deg, #303030 0%, #0F0F0F 21.84%);
  }

  /* 705:79085 — same rect, same -14.534deg, scaled 0.80759: AABB
     1805.05x1294.91 at (-702,-228) resolves to 1627.3 x 915.8 centred on
     (200.53, 419.46). */
  .afxg__photo {
    left: 200.53px; top: 419.46px; width: 1627.3px; height: 915.8px;
    margin-left: -813.65px; margin-top: -457.9px;
  }
  /* 705:79086 — the AABB is identical to 1512, only y moves: 662 x 463.8 at
     -20.94deg, centred on (761.03, 702.9). LAYER_BLUR 151 -> blur(75.5). */
  .afxg__shade { left: 761.03px; top: 702.9px; filter: blur(75.5px); }
  /* 705:79087 — same box, y 482. LAYER_BLUR 205 -> blur(102.5). */
  .afxg__wash  { top: 482px; filter: blur(102.5px); }

  /* --- 705:79088 head, 392 x 201 at (1,100), padding 0 24, gap 12 -------- */
  .afxg__head { position: absolute; left: 1px; top: 100px; width: 392px; padding: 0 24px; gap: 12px; box-sizing: border-box; }
  /* 705:79092 — three 52px lines: 705:79093 fills the 344 column,
     705:79094 is 294 wide and takes two. */
  .afxg__title { width: 344px; font-size: 52px; line-height: 52px; letter-spacing: -1.56px; }
  /* Both lines are pinned. 705:79093 is one 52px line in the 344 column and
     705:79094 is two in 294 under SF Pro Display; the Roboto / Inter fallback
     used off Apple devices is wider and would take three, so the break after
     "payout" is forced by a span rather than left to the metrics. MARKUP:
     .afxg__l2 was added to index.html for this; it is inline (a no-op) at
     1512 and only becomes a line on mobile. */
  .afxg__title-a { width: 344px; white-space: nowrap; }
  .afxg__title-b { width: 294px; white-space: nowrap; }
  .afxg__l2 { display: block; }

  /* --- 705:79095 "mockup" — the raster is placed on absoluteRenderBounds,
     as at 1512. The 439x542 node scales 0.7915 to 347.47x429, so the export
     box is 416.7 x 511.8 with its top-left at (-29.31, 277.81). ----------- */
  .afxg__mockup { position: absolute; left: -29.31px; top: 277.81px; width: 416.7px; height: 511.8px; }

  /* --- 705:79107 / 705:79117 — the chips halve: 36 tall, padding 6/16,
     20px icons, label SF Pro 860 / 16 / 24 / ls -0.48. --------------------- */
  .afxg__chips { display: contents; }
  .afxg__chip {
    position: absolute; height: 36px; padding: 6px 16px;
    box-shadow: 6px 12px 18px 0 rgba(0,0,0,.35),
                inset 3px -4px 5px 0 rgba(124,177,172,.32);
  }
  .afxg__chip--time  { left: 36px;  top: 401px; width: 129px; }
  .afxg__chip--money { left: 205px; top: 471px; width: 162px; }
  .afxg__chip-icon { width: 20px; height: 20px; }
  .afxg__chip-label { font-size: 16px; line-height: 24px; letter-spacing: -.48px; }

  /* --- 705:79100 / 705:79101 — closing column, 345 wide at (24,749),
     gap 24: body 147, CTA stack 123, legal 36. --------------------------- */
  .afxg__foot { position: absolute; left: 0; top: 749px; width: 100%; padding: 0 24px; gap: 24px; box-sizing: border-box; }
  /* 705:79102 — 345 wide, seven 21px lines (Figma rounds lineHeightPx 21.12) */
  .afxg__body { width: 345px; line-height: 21px; }
  /* 705:79103 — the two buttons stack on mobile, 241 wide, gap 12 */
  .afxg__ctas { flex-direction: column; align-items: center; gap: 12px; width: 241px; max-width: none; }
  .afxg__ctas .afx-btn-lime, .afxg__ctas .afx-btn-ghost { width: 241px; box-sizing: border-box; }
  /* 705:79106 — 307 wide, two 18px lines */
  .afxg__legal { width: 307px; }
}