/* ============================================================================
   Stories — the 393 frame.  Figma 705:524819 "Mobile" (393 x 6996).

   The phone frame is a real artboard, not a reflow of 705:463416: it restates
   the type ramp, stacks the hero card under the copy, turns BOTH the filter
   pill track and the nine-card grid into horizontal rails, and stacks the card
   meta row. Every value below is read out of that frame's nodes, so this file
   is the mobile design, not a set of derived breakpoints. It loads last and
   only bites at <= 720 — the same breakpoint assets/atlas-comm-m.css uses.

   Band map, with each band's drawn height inside the 393 frame:
     705:524897 announcement bar     56   (shared .afx-bar, unchanged)
     705:524820 hero              1307   -> 1251 here: the 56px bar is drawn
                                            INSIDE the mobile hero frame but
                                            ships as its own band, so it is
                                            subtracted. 1307 - 56 = 1251.
     705:524904 payout card grid  1160
     705:545304 trader spotlight  1309
     705:565719 four-number strip  624
     705:565740 final CTA + footer 2596  -> 775 here: 705:565786 (the footer,
                                            377x1821 at frame y 5175) is a
                                            CHILD of this frame and ships as
                                            the shared band. 2596 - 1821 = 775.

   Figma y offsets are MARGINS here, never padding — a padding-top on a wrapper
   inflates its box and drags every child down.

   Every gradient whose Figma handles were re-projected onto a CSS gradient
   line was re-derived against the MOBILE box. An angle is a function of the
   box, so a desktop derivation cannot be copied across. Where the mobile box
   has the same aspect ratio as the desktop one the desktop rule is correct and
   is deliberately left alone (noted at each site).

   DECLARED DEVIATIONS, mobile-only, on top of the ones in STORIES-V2-SPEC.md:
   1. 705:524868 draws a burger button where the shared navbar carries the
      "Get Funded" pill, and the file draws no drawer panel. The pill geometry
      (377x64 at 8,64, r48) is honoured; its contents stay the shared
      .afx-nav component, exactly as assets/atlas-comm-m.css does for
      /community. atlas-chrome-m.css (the drawn burger + a drawer) is opt-in
      per page and needs its own markup and JS; adopting it here is a separate
      decision, not a stylesheet one.
   2. Two background photographs are the SAME imageRef as their 1512 node but
      a DIFFERENT crop, and the brief ships one export per image:
        705:524821 hero  (2428c31f…) — the phone crops a vertical slice,
                                       25.57%-74.44%, of a source the desktop
                                       node takes whole at scaleMode FILL.
        705:565741 CTA   (20869da1…) — the phone crops 60.9% horizontally
                                       where the desktop crops 94.0% x 84.6%.
      Both reuse the desktop export placed `cover`, which is the same call
      assets/atlas-comm-m.css makes on the community hero. Worth revisiting
      with the raw assets. 705:545305 (the spotlight photo) needs no such
      call: both nodes carry a near-identity imageTransform on the same ref.
   3. The two hero ellipses 705:524822 / 705:524823 are the same size, the same
      fill and the same 516.4 blur, so the second ships as ::after on the
      first rather than as new markup. They overlap for 34px inside their own
      blur tails, where Figma blends them separately and CSS blends them once.
   4. Both remaining 250px-class LAYER_BLURs are drawn as radial gradients
      below 768, following the rule already in atlas-hero.css: blur cost is
      O(area x radius) and these sit in the backdrop root.
   5. The shared footer takes only the drawn 8px side margin (377 at x8). Its
      drawn 32/20 padding and 32 gap are NOT applied: atlas-footer.css owns
      the footer for every page and a per-page padding override would make
      /stories the odd one out at 393. Same call atlas-comm-m.css made.
   ========================================================================= */

@media (max-width: 720px) {

  /* =========================================================================
     705:524820 — HERO.  Band height 1251 (1307 drawn, minus the 56px bar).
     Internal ladder, all in FRAME coordinates:
       bar     0 ..   56   (its own band)
       nav    64 ..  128   377x64 at x8, i.e. 8 below the bar
       copy  188 ..  674   345x486 at x24
       card  734 .. 1160   345x426 at x24
       stats1220 .. 1283   345x63  at x24
       band ends 1307, so 24 of clear space under the strip.
     ====================================================================== */
  .afxs-hero { min-height: 1251px; padding-bottom: 24px; }

  /* 705:524821 "Overlay" — one RECTANGLE, 393x1429 at frame y 56, carrying
     BOTH the photograph and the wash. Split across the two elements the
     desktop markup already has. Hero-relative y is 0 for both.
     min-width is released: left:0/right:0 already spans the viewport and a
     fixed 393 would push a 360px phone into horizontal scroll. */
  .afxs-hero__bg {
    top: 0; height: 1429px; min-width: 0;
    background: url('/assets/figma/st2-hero-bg.webp') center / cover no-repeat;
  }
  /* The wash, re-derived on the real 393x1429 box. Handles
     p0(0, .5122) -> p1(.9844, .5096) give a (386.87, -3.72)px direction, so
     89.4deg; the Figma segment is 386.89 against a CSS gradient line of
     406.70, which moves every stop. */
  .afxs-hero__overlay {
    height: 1429px;
    background: linear-gradient(89.4deg,
                  rgba(5,63,59,.62)     1.65%,
                  rgba(194,213,213,0)  21.97%,
                  rgba(194,213,213,0)  80.79%,
                  rgba(5,63,59,.4)     96.77%);
  }

  /* 705:524822 "Ellipse 473" — 1311x740 at frame (-624, 146), #051F1D,
     HARD_LIGHT, LAYER_BLUR 516.4. Hero-relative y = 90.
     Placed art on a 393 stage, so it stays CENTRED: -624 - 196.5 = -820.5.
     Spans x -624 .. 686.5; clipped by .afxs-hero's overflow:hidden.
     705:524823 "Ellipse 474" is the identical ellipse at frame (-588, 852),
     i.e. +36 / +706 from this one, and ships as ::after. */
  .afxs-hero__glow {
    top: 90px; margin-left: -820.5px;
    width: 1311px; height: 740px;
    filter: none;
    background: radial-gradient(closest-side, var(--af-hero-glow) 0%, rgba(5,31,29,0) 100%);
  }
  .afxs-hero__glow::after {
    content: ''; position: absolute; left: 36px; top: 706px;
    width: 1311px; height: 740px; border-radius: 50%;
    background: radial-gradient(closest-side, var(--af-hero-glow) 0%, rgba(5,31,29,0) 100%);
    pointer-events: none;
  }

  /* 705:524868 — the nav pill, 377x64 at (8, 64). The bar ends at 56, so the
     8px top margin is the drawn gap. See deviation 1. */
  .afxs-hero .afx-nav {
    width: calc(100% - 16px); max-width: 377px;
    height: 64px; margin: 8px auto 0;
  }
  /* 705:524869 — the brand frame sits at x16 inside the pill with 14.4348 of
     its own padding, so the wordmark starts at frame x 30.43. The pill's left
     edge is x8: 8 + 8 + 14.43 = 30.43. */
  .afxs-hero .afx-nav__brand { margin-left: 8px; padding: 0 14.43px; }
  /* 705:524871 — 135.3x18 */
  .afxs-hero .afx-nav__logo,
  .afxs-hero .afx-nav__logo img { width: 135.3px; height: 18px; }
  /* 705:524875 — 48x48, r50 (the desktop instance is 43) */
  .afxs-hero .afx-nav__globe { width: 48px; height: 48px; }

  /* the 24px gutter this frame draws, against the desktop 40 */
  .afxs-hero__page { padding: 0 24px; }

  /* 705:524824 at frame y 188: the pill ends at 128, and the nav is out of
     flow, so this is 132 from the hero's own top edge. The copy block ends at
     674 and 705:524834 opens at 734, so 60 of gap. */
  .afxs-hero__row { margin-top: 132px; gap: 60px; }
  /* 705:524824 — column, gap 24. The DOM is flat where the file nests one
     more frame: eyebrow and headline are grouped at gap 16 inside a column
     of 24, so the eyebrow gives 8 back. Vertical only — no overflow risk. */
  .afxs-hero__col { gap: 24px; width: 100%; }
  .afxs-hero__eyebrow { margin-bottom: -8px; }

  /* 705:524829 — 345x116, SF Pro 510 / 64 / 57.6px / ls -1.92px, two lines.
     Fills are [#FFFFFF, gradient]; the gradient is the visible one and is
     re-derived on the real 345x116 box: handles p0(.6382,.0909) ->
     p1(.9315,.9343) give a (101.19, 97.83)px direction => 134.03deg, a Figma
     segment of 140.73 against a CSS line of 328.70, so the stops land at
     50.40% and 93.22%.
     The 600px min-width the desktop rule holds is released: at 345 it would
     force horizontal overflow. */
  .afxs-hero__h1 {
    /* `width: auto` rather than `width: 100%`. 705:524829 draws two lines in
       345, but "Real payouts." sets 346.0px of ink on the -apple-system
       fallback and ~370 on Inter, so a hard 345 wraps the headline to three
       lines and the whole band below it shifts +56.8. Letting the box size to
       its content spends at most ~25px of the 48px gutter and keeps the drawn
       two-line shape on every fallback. The type is untouched. */
    width: max-content; max-width: calc(100vw - 24px); min-width: 0;
    font-size: 64px; line-height: 57.6px; letter-spacing: -1.92px;
    background: linear-gradient(134.03deg, #F8F8F8 50.4%, #FFFFFF 93.22%);
  }
  /* 705:524829 is ONE text node — the desktop two-span break is not drawn
     here, so the ink reflows. (Already inline at <=720 in the desktop sheet;
     restated because this file must not depend on that rule surviving.) */
  .afxs-hero__h1 span { display: inline; white-space: normal; }

  /* 705:524830 — 18/27 / ls -.36, node opacity .8. Same type as 1512; only
     the box changes. */
  .afxs-hero__lead { width: 100%; }
  /* 705:524831 — column, gap 12, both buttons full width */
  .afxs-hero__ctas { gap: 12px; }

  /* 705:524840 — the live-payout card, 345x392 at (24, 734). Same component
     as 1512 (padding 16, gap 24, r20); only the width changes. */
  .afxs-hero__row .afx-payouts { width: 100%; max-width: none; margin-top: 0; }
  /* 705:524835 — the footer strip is 322.7 wide inside the 345 card, i.e.
     11.15 inset each side, and still overlaps by 33 (392 + 67 - 33 = 426). */
  .afxs-hero .afx-payouts__foot { width: calc(100% - 22.3px); }

  /* 705:524881 — 345x63 at frame y 1220. The card group ends at 1160, so 60.
     A ROW of three 107-wide columns at gap 12 (107 x 3 + 12 x 2 = 345) — the
     desktop sheet stacks these below 720 and the phone frame does not. */
  .afxs-hero__stats {
    flex-direction: row; align-items: flex-start;
    width: 100%; gap: 12px; margin: 60px 0 0;
  }
  /* 705:524882 — column, gap 12 (the desktop instance draws 17) */
  .afxs-hero__stat { flex: 1 1 0; width: auto; min-width: 0; gap: 12px; }
  .afxs-hero__rule { width: 100%; }
  /* 705:524884 — column, gap 0: label 21 + value 30 = 51, and 12 + 51 = 63 */
  .afxs-hero__statbody { gap: 0; }
  /* 705:524886 — Saans 600 / 20 / 30px (the desktop instance is 32/48) */
  .afxs-hero__value { font-size: 20px; line-height: 30px; }


  /* =========================================================================
     705:524904 — PAYOUT CARD GRID.  393x1160, column, padding 100/0/100/0,
     gap 40.  100 + 293 + 40 + 48 + 40 + 539 + 100 = 1160.
     Top fill: handles p0(.5076,0) -> p1(.5076,.2184) are exactly vertical, so
     180deg with #0F0F0F landing at 21.84% of the 1160 box.
     ====================================================================== */
  .afxs-grid {
    min-height: 1160px;
    background: linear-gradient(180deg, #303030 0%, #0F0F0F 21.84%);
  }

  /* 705:524982 — the ONLY decorative layer this band draws on the phone.
     896.5x748 at frame (-208, 925); the band opens at 1307, so band-relative
     (-208, -382). st2m-dots.webp is 1794x1496, i.e. 2x, and the .8 node
     opacity is baked into the export.
     Reuses the --a element rather than adding markup; the desktop alpha mask
     (705:463498) is not drawn here, so it is cleared.
     Placed art, so centred: -208 - 196.5 = -404.5. Spans x -208 .. 688.5,
     clipped by .afxs-grid's overflow:hidden. */
  .afxs-grid__dots--a {
    top: -382px; left: 50%; right: auto; margin-left: -404.5px;
    width: 896.5px; height: 748px;
    background: url('/assets/figma/st2m-dots.webp') no-repeat 0 0 / 896.5px 748px;
    -webkit-mask-image: none; mask-image: none;
  }
  /* not drawn in 705:524904 */
  .afxs-grid__dots--b,
  .afxs-grid__glow,
  .afxs-grid__light,
  .afxs-grid__blob { display: none; }

  /* the 100/100 frame padding, carried as margin */
  .afxs-grid__inner { width: auto; margin: 100px 0; gap: 40px; }

  /* 705:524905 — 392x293, column, gap 20, padding 0/24, align CENTER */
  .afxs-grid__head { width: 100%; padding: 0 24px; gap: 20px; }
  /* 705:524906 — 344x201, gap 12 */
  .afxs-grid__headtop { width: 100%; gap: 12px; }
  /* 705:524907 — 161x33, padding 6/0: the phone instance drops the drawn
     14px of horizontal padding the 1512 instance carries. */
  .afxs-grid__eyebrow { padding: 6px 0; }
  /* 705:524917 — 344x156, two blocks of 52/52 / ls -1.56 */
  .afxs-grid__title {
    width: 100%;
    font-size: 52px; line-height: 52px; letter-spacing: -1.56px;
  }
  /* 705:524918 — re-derived on the drawn 344x52 box: handles
     p0(.5488,-.2611) -> p1(.9315,.9343) give (131.65, 62.16)px => 115.28deg,
     a Figma segment of 145.59 against a CSS line of 333.24, so 49.48% and
     93.16%. The 1512 box is 478x80 and gives 117.58deg — a different ratio,
     hence a different rule. */
  .afxs-grid__title-grad {
    background: linear-gradient(115.28deg, #F8F8F8 49.48%, #636363 93.16%);
  }
  /* 705:524920 — 344x72, 16/24 / ls -.48, same type as 1512 */
  .afxs-grid__sub { width: 100%; }

  /* 705:524921 — the pill track's window. 665x48 at x0, padding 0/24, holding
     the 617-wide track 705:524922 at x24: 24 + 617 + 24 = 665, i.e. 272px
     wider than the viewport. That is a horizontal RAIL.
     `calc(100% + 48px)` on a centred flex item whose parent content box is
     345 resolves to exactly 393 and overhangs the head's 24px gutter by
     exactly 24 each side — it lands on the viewport edges and cannot exceed
     them at any width.
     GEOMETRY: the head's own gap is 20 and the file draws 40 between
     705:524905 and 705:524921, so 20 is added back as a margin. The 6px of
     vertical padding is NOT drawn — it exists so a scroll container does not
     clip .afxs-grid__pill:focus-visible (a 2px ring at offset 3). It is paid
     back out of the top margin (20 - 6) and by a -6 bottom margin, so the
     track still sits 40 below the header and the head still measures 381. */
  .afxs-grid__filtwrap {
    width: calc(100% + 48px); flex: none;
    margin: 14px 0 -6px; padding: 6px 24px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Without this the snapport is the scrollport's PADDING box, so a pill
       whose scroll-snap-align is `start` snaps its left edge to x0 and the
       browser pre-scrolls the rail by the whole gutter on first paint
       (measured scrollLeft 27.78, first pill at x 0.2).
       28, not 24: the drawn track 705:524922 sits at x24 and carries its own
       drawn 4px padding (705:504192, padding 4 / fill #222222 / r47), so the
       first pill 705:524923 is drawn at x28. Snapping the PILL to 28 is what
       puts the TRACK on its drawn 24. */
    scroll-padding-left: 28px;
    scrollbar-width: none;
  }
  .afxs-grid__filtwrap::-webkit-scrollbar { display: none; }
  .afxs-grid__filters { width: max-content; flex: none; }
  /* 705:524923..27 — padding 12/16 on the phone, against 12/24 at 1512. The
     active pill keeps its 2px INSIDE stroke, so its padding drops by 2 on
     each axis to hold the drawn 120x40. */
  .afxs-grid__pill { padding: 12px 16px; scroll-snap-align: start; }
  .afxs-grid__pill[aria-pressed='true'] { padding: 10px 14px; }

  /* 705:524928 — 393x539, ROW, gap 16, padding 0/24, align CENTER. The frame
     draws two of the nine cards and runs off the right edge: a rail. */
  .afxs-grid__cards {
    width: 100%; padding: 0 24px; gap: 16px;
    flex-wrap: nowrap; align-items: stretch;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* See .afxs-grid__filtwrap above — same 24px gutter, same reason. Without
       it the rail loads at scrollLeft 24.44 and card 1 sits at x -0.5 against
       the drawn x 24 (705:524929). */
    scroll-padding-left: 24px;
    scrollbar-width: none;
  }
  .afxs-grid__cards::-webkit-scrollbar { display: none; }

  /* 705:524929 — the card COMPONENT, 300x539, column, gap 12, padding 4,
     r32. 4 + 221 + 12 + 298 + 4 = 539. */
  .afxs-gcard {
    width: 300px; flex: 0 0 300px; min-height: 539px; gap: 12px;
    scroll-snap-align: start;
  }
  /* the 2px INSIDE gradient hairline, re-derived on 300x539: handles
     p0(1,-.0817) -> p1(.5,1) give (-150, 583.04)px => 194.42deg, a Figma
     segment of 602.03 against a CSS line of 596.78, so -7.14% / 44.75% /
     93.74%. The 1512 box is 390x468 and gives 201.07deg. */
  .afxs-gcard::after {
    background: linear-gradient(194.42deg, #FFFFFF -7.14%, rgba(202,202,202,0) 44.75%, #999999 93.74%);
  }
  /* 705:524930 — 292x221, r27 (the 1512 instance is 382x207) */
  .afxs-gcard__photo,
  .afxs-gcard__photo > img { width: 292px; height: 221px; }
  /* 705:524932 — the scrim is still the drawn 382x88 and still overhangs the
     photo; the photo's own overflow:hidden clips it. */

  /* 705:524933 — 252x47, COLUMN, gap 12: the amount sits UNDER the name and
     chips on the phone, where 1512 puts it opposite them. */
  .afxs-gcard__metarow {
    flex-direction: column; align-items: flex-start;
    justify-content: flex-start; width: 252px; gap: 12px;
  }
  /* 705:524935 — SF Pro 700 / 14 / 14px / ls -.42 (1512 draws 590 / 16 / 16
     / ls -.48) */
  .afxs-gcard__name {
    font-weight: var(--w-bold);
    font-size: 14px; line-height: 14px; letter-spacing: -0.42px;
  }
  /* 705:524941 — 65x14, the same box the 1512 master draws, so the amount's
     clipped gradient is unchanged. */

  /* 705:524949 — 292x298, column, gap 32, padding 16 (1512: gap 24,
     padding 0/20/20/20) */
  .afxs-gcard__body { gap: 32px; padding: 16px; }
  /* 705:524950 — 260x185, gap 24 (1512: 8) */
  .afxs-gcard__copy { gap: 24px; }
  /* 705:524951 — 260x105, i.e. five lines of 21.12 (1512 draws four) */
  .afxs-gcard__quote { min-height: 105px; }
  /* 705:524952 — 146x56, COLUMN, gap 16, and no padding-top: the 16 the 1512
     card carries as padding on this row is the copy column's 24 gap here. */
  .afxs-gcard__stats { flex-direction: column; width: 146px; gap: 16px; padding-top: 0; }
  /* 705:524953 / 705:524964 — 146x20, row, gap 12 */
  .afxs-gcard__stat { width: 146px; gap: 12px; }
  /* 705:524977 — 260x49, the body's full content width */
  .afxs-gcard__verify { width: 100%; }


  /* =========================================================================
     705:545304 — TRADER SPOTLIGHT.  393x1309, column, gap 80,
     padding 100/24/100/24.  100 + 777 + 80 + 252 + 100 = 1309.
     Fill handles p0(.5, 0) -> p1(.5089, .786) on 393x1309 give 179.81deg with
     the stops projecting to 0.05% and 78.57%. Written as 180deg for the same
     reason the 1512 sheet does: 0.19 degrees is a sub-pixel lateral drift on
     a near-white ramp, and holding it on a full-bleed background makes the
     drift grow with the viewport.
     ====================================================================== */
  .afxs-spot { padding: 100px 24px; background: linear-gradient(180deg, #EBEDF2 0.05%, #FFFFFF 78.57%); }

  /* 705:545305 "image 1174" — 507x284 at frame (-56, 2768), band-relative
     (-56, 301). Same imageRef and the same near-identity imageTransform as
     the 1512 node, so the same export places with no crop. Placed art, so
     centred: -56 - 196.5 = -252.5. Spans x -56 .. 451, clipped by the band.
     The white bottom fade's handles are unchanged (vertical, 75.93%). */
  .afxs-spot__bg {
    top: 301px; left: 50%; right: auto; margin-left: -252.5px;
    width: 507px; height: 284px; min-width: 0;
    background:
      linear-gradient(180deg, rgba(255,255,255,0) 75.93%, #FFFFFF 100%),
      url('/assets/figma/st2-spot-bg.webp') no-repeat center center / cover;
  }
  /* 705:545306 "dots" — 1642x1370 at frame (-130, 2446): band-relative
     (-130, -21), exactly what 705:504264 draws at 1512. Held as the drawn box
     rather than `cover` here, because at 393 a cover would scale the field.
     -130 - 196.5 = -326.5; spans x -130 .. 1512, clipped by the band. */
  .afxs-spot__dots {
    top: -21px; left: 50%; right: auto; margin-left: -326.5px;
    width: 1642px; height: 1370px; min-width: 0;
    background: url('/assets/figma/st2-dots-spot.webp') no-repeat 0 0 / 1642px 1370px;
  }

  /* 705:565627 — 345x777, gap 40 (head 253, card 314, pull 130).
     705:565669 (the stat list) is a sibling of that frame at the band's own
     80 gap, so it carries the missing 40 as a margin. */
  .afxs-spot__inner { gap: 40px; }
  /* 705:565629 — 345x253, gap 12 (1512: 16) */
  .afxs-spot__head { width: 100%; gap: 12px; }
  /* 705:565642 — 345x208, two blocks of 52/52 / ls -1.56 */
  .afxs-spot__title { font-size: 52px; line-height: 52px; letter-spacing: -1.56px; }
  /* 705:565643 — the visible fill re-derived on the 345x104 box this rule
     actually paints: handles p0(.6889,0) -> p1(.9315,.9343) give
     (83.70, 97.17)px => 139.25deg, a Figma segment of 128.24 against a CSS
     line of 303.82, so 51.02% and 93.22%. The 1512 box is 912x80 and gives
     108.7deg. Both lines wrap freely at this width. */
  .afxs-spot__title1 {
    width: 100%; white-space: normal;
    background: linear-gradient(139.25deg, #0D0D0D 51.02%, #CECECE 93.22%);
  }
  .afxs-spot__title2 { width: 100%; }
  .afxs-spot__title2 br { display: none; }

  /* 705:565645 — 345x314, padding 20, gap 24 (1512: 24 / 32) */
  .afxs-spot__card { width: 100%; padding: 20px; gap: 24px; }
  .afxs-spot__quote { width: 100%; }

  /* 705:565668 — 345x130, 20/26.4 / ls -.6, node opacity .8, CENTRED.
     COPY-LEVEL DIFFERENCE FROM 1512: the phone node carries a SECOND paint,
     a #0D0D0D -> #CECECE ramp, over the flat ink the 1512 node draws alone.
     Re-derived on 345x130: handles p0(.6889,0) -> p1(.9315,.9343) give
     (83.70, 121.46)px => 145.43deg, Figma segment 147.5 against a CSS line of
     302.78, so 44.53% and 93.24%. background-clip:text, so the .8 node
     opacity stays on the element and is not folded into the stops. */
  .afxs-spot__pull {
    width: 100%;
    font-size: 20px; line-height: 26.4px; letter-spacing: -.6px;
    background: linear-gradient(145.43deg, #0D0D0D 44.53%, #CECECE 93.24%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

  /* 705:565669 — 345x252 at frame y 3424. The pull ends at 3344, so 80 of
     band gap: 40 of it is .afxs-spot__inner's, 40 is this margin.
     Three 345x68 rows at y 3424 / 3516 / 3608 — a 92 pitch on a 68-tall row,
     so 24 of gap. The 68px badge and the 32/42.24 + 16/21.12 type are the
     same as 1512 and are not restated. */
  .afxs-spot__stats { width: 100%; gap: 24px; margin-top: 40px; }
  .afxs-spot__stat { width: 100%; }


  /* =========================================================================
     705:565719 — FOUR-NUMBER STRIP.  393x624, column, gap 32,
     padding 0/24/100/24.  Four 345x107 rows at y 0 / 139 / 278 / 417, so the
     32 gap, and the band opens flush against the spotlight above it.
     4 x 107 + 3 x 32 + 100 = 624.
     Fill handles are exactly vertical with the stops at 0 and 1, so the 1512
     rule is already correct and is not restated.
     ====================================================================== */
  .afxs-nums { min-height: 624px; padding: 0 24px 100px; }
  /* The 1512 rule sets `align-items: flex-start` on a ROW; atlas-st2-nums.css
     flips the direction to column at <=720 but that align-items survives on
     the new cross axis, so every stat shrank to its own text width and the
     345-wide rules above them came out at 182.4 / 173.0 / 218.1 / 115.1.
     705:565720/25/30/35 are each 345 wide, i.e. the full content column. */
  .afxs-nums__inner { gap: 32px; align-items: stretch; }
  /* 705:565720 — 345x107, column, gap 16 (1512: 32).
     0 (the rule is a zero-height vector) + 16 + 21 + 12 + 58 = 107. */
  .afxs-nums__stat { gap: 16px; align-self: stretch; }
  /* 705:565724 etc — SF Pro 510 / 58 / 58px / ls -1.74px.
     The four value boxes are 183 / 174 / 219 / 92 wide against 58 tall; the
     1512 boxes are 253 / 240 / 302 / 126 against 80. Those are the same four
     aspect ratios to within 0.3%, so the four re-derived gradients in
     atlas-st2-nums.css are correct at this size too and are NOT restated. */
  .afxs-nums__value { font-size: 58px; line-height: 58px; letter-spacing: -1.74px; }


  /* =========================================================================
     705:565740 — FINAL CTA.  Band height 775 (2596 drawn, minus the 1821-tall
     footer 705:565786 that ships as its own band).
     Internal ladder, band-relative:
       content  100 .. 525   394x425 at x0
       trust    655 .. 735   259x80  at x68
       footer   775          377x1821 at x8
     Top fill: handles p0(.5076,0) -> p1(.5076,.0878) are vertical, so #0F0F0F
     lands at 8.78% of the drawn 2596 = 227.9px. Against this 775px box that is
     227.9 / 775 = 29.41%.
     ====================================================================== */
  .afxs-cta {
    min-height: 775px;
    background: linear-gradient(180deg, #303030 0%, #0F0F0F 29.41%);
  }

  /* 705:565741 "image 1167" — 758x779 at frame (-182, 4387), band-relative
     (-182, -13), blendMode SCREEN. Placed art, so centred:
     -182 - 196.5 = -378.5. Spans x -182 .. 576, clipped by the band. */
  .afxs-cta__bg {
    top: -13px; left: 50%; right: auto; margin-left: -378.5px;
    width: 758px; height: 779px; min-width: 0;
  }
  /* 705:565742 "Ellipse 473" — 1133.4x1328.4 at band (-420, -237), #051F1D,
     HARD_LIGHT, LAYER_BLUR 352.831 -> 176.4px CSS. Drawn as a radial gradient
     below 768 (deviation 4). -420 - 196.5 = -616.5; spans x -420 .. 713.4,
     clipped by the band. */
  .afxs-cta__glow {
    top: -237px; margin-left: -616.5px;
    width: 1133.4px; height: 1328.4px;
    filter: none;
    background: radial-gradient(closest-side, var(--af-hero-glow) 0%, rgba(5,31,29,0) 100%);
  }
  /* 705:565743 — 259x79 at band (68, 646), #000000, LAYER_BLUR 74.6 -> 37.3.
     The 1512 sheet hides this below 760; the phone frame draws it, so it comes
     back at the drawn size. 68 - 196.5 = -128.5; spans x 68 .. 327. */
  .afxs-cta__plate {
    display: block;
    top: 646px; margin-left: -128.5px;
    width: 259px; height: 79px;
  }
  /* 705:565744 — the clipped light frame, 1764.3x1464.1 at band (-685, -351).
     st2m-light-cta.webp is 1765x1465, so the frame's own clip is baked into
     the export and it maps 1:1. -685 - 196.5 = -881.5; spans x -685 ..
     1079.3, clipped by the band. */
  .afxs-cta__light {
    display: block;
    top: -351px; margin-left: -881.5px;
    width: 1764.3px; height: 1464.1px;
    background-image: url('/assets/figma/st2m-light-cta.webp');
  }

  /* 705:565758 — 394x425 at band y 100, column, gap 24, padding 0/24.
     The 100 is a MARGIN; .afxs-cta is a BFC (overflow:hidden) so it cannot
     collapse out of the section. The 1512 sheet's <=760 rule carries it as
     padding-top, which is overridden here. */
  .afxs-cta__inner {
    width: 100%; max-width: none; margin: 100px auto 0;
    padding: 0 24px; gap: 24px;
  }
  /* 705:565759 — 346x149, gap 12 (1512: 16) */
  .afxs-cta__head { gap: 12px; }
  /* 705:565763 — 346x104, two lines of 52/52 / ls -1.56 */
  .afxs-cta__h2 {
    width: 100%; flex: none;
    font-size: 52px; line-height: 52px; letter-spacing: -1.56px;
  }
  .afxs-cta__h2a, .afxs-cta__h2b { white-space: normal; }
  /* 705:565764 "Be the next" is 236x52 and HUGS inside the 346 column
     (x79: (346-236)/2 = 55), so fit-content is the drawn box, not a
     deviation from it. That box is 236x52 against the 1512 instance's
     363x80 — the same aspect ratio to within 0.01% — so the
     124.54deg / 44.21% / 93.19% gradient in atlas-st2-cta.css is already
     correct at this size and is deliberately NOT restated. */
  .afxs-cta__h2a { width: fit-content; margin: 0 auto; }
  /* 705:565765 "verified payout" is 346x52, i.e. the full column */
  .afxs-cta__h2b { width: 100%; }
  /* 705:565766 — 338x105, 16/21.12 / ls -.32, same type as 1512 */
  .afxs-cta__body { width: 100%; }
  /* 705:565767 — 293x123, COLUMN, gap 12, centred in the 345 content box */
  .afxs-cta__ctas {
    flex-direction: column; align-items: stretch;
    width: 293px; max-width: 100%; margin: 0 auto; gap: 12px;
  }
  .afxs-cta__ctas .afx-btn-lime,
  .afxs-cta__ctas .afx-btn-ghost { width: 100%; }

  /* 705:565772 — 259x80 at band (68, 655), COLUMN, gap 16, three 16px rows.
     The content column ends at 525, so 130 of margin. The row ends at 735 and
     the footer opens at 775, so the 40 of clear space is held by the 775
     min-height above, not by a margin on the footer. */
  .afxs-cta__trust {
    flex-direction: column; align-items: center;
    width: 259px; max-width: 100%;
    margin: 130px auto 0; padding: 0; gap: 16px;
  }

  /* 705:565786 — the shared footer, 377 wide at x8. Side margin only; see
     deviation 5. */
  .afxs-cta ~ .afxft { margin: 0 8px; }
}