/* ============================================================================
   Community band 2 — "Six reasons traders actually log in every day".
   Figma 774:60521 "Frame 2147259198" (1512 x 1451). Markup:
   fragments/comm-why.html.

   Figma child order is back-to-front, so children[0] is the BOTTOM layer.
   The stack, in paint order:
     774:60522  dots plate 1512x619 @ (0, 0)      — masked by a gradient ramp
     774:80846  dots plate 1512x619 @ (0, 1092)   — same, mirrored down the page
     774:101170 "Mask group" 1512x1111 @ (0, 345) — the teal ribbon
     774:101173 Ellipse 473 1261x712 @ (164, 563) — ambient glow
     774:101174 coin 216x228 @ (525, 971)
     774:101175 "light" haze                       — see DECLARED DEVIATION
     774:101188 shadow 166x53 @ (215, 995)
     774:101189 shadow 144x43 @ (1071, 727)
     774:101190 coin 252x249 @ (991, 498)
     774:101191 coin 201x229 @ (241, 787)
     774:101192 / 774:101193                       — visible:false, NOT built
     774:101207 header 761x289 @ (376, 120)
     774:101223 / 101249 / 101279 three card rows

   DECLARED DEVIATION — 774:101175 "light" is a four-group white haze whose
   maximum alpha in the Figma render is 27/255. Figma's PNG export of the group
   trims to its own content rather than to the node box, so there is no
   reliable offset to place it at; shipping it mispositioned is worse than
   omitting a layer that is barely above the band colour. Not built.

   The two shadow ellipses and both glows are CSS, not exports: they are a flat
   fill plus a blur, and Figma's LAYER_BLUR radius is 2x the CSS blur() value.
   ========================================================================= */

/* 774:60521 — two stacked fills with the same handles; the top one wins. */
.afxw {
  position: relative; isolation: isolate; overflow: hidden;
  box-sizing: border-box;
  min-height: 1451px;
  /* re-derived on the real 1512x1451 box, not fx.py's box-agnostic angle */
  background: linear-gradient(180deg, #303030 0%, #0F0F0F 36.85%);
  font-family: var(--font-sans); color: var(--af-white);
}

/* ---- decorative stage. Fixed 1512 and CENTRED: these layers position content
        relative to the design canvas, so they must not left-align above 1512.
        The two dot plates are the exception — they are band backgrounds and go
        full bleed. ------------------------------------------------------- */
.afxw__dots {
  position: absolute; left: 0; right: 0; width: auto; min-width: 1512px; height: 619px;
  background: url('/assets/figma/comm-why-dots-top.webp') center top / cover no-repeat;
  pointer-events: none;
}
.afxw__dots--a { top: 0; }
.afxw__dots--b { top: 1092px; background-image: url('/assets/figma/comm-why-dots-bot.webp'); }

.afxw__stage {
  position: absolute; left: 50%; margin-left: -756px; top: 0;
  width: 1512px; height: 1451px;
  pointer-events: none;
}

/* 774:101170 — the mask is baked into the export (774:101171 is the alpha
   ramp, 774:101172 the ribbon at LINEAR_DODGE). Over a near-black band the
   dodge and a straight composite are indistinguishable, so no blend mode. */
.afxw__ribbon {
  position: absolute; left: 0; top: 345px; width: 1512px; height: 1111px;
  background: url('/assets/figma/comm-why-mask.webp') center / 100% 100% no-repeat;
}

/* 774:101173 — #051F1D, LAYER_BLUR 516.4 -> blur(258.2px), HARD_LIGHT.
   BACKGROUND_BLUR 315.6 dropped for the reason given in atlas-comm-hero.css. */
.afxw__glow {
  position: absolute; left: 164px; top: 563px; width: 1261px; height: 712px;
  background: var(--af-hero-glow); border-radius: 50%;
  filter: blur(258.2px); mix-blend-mode: hard-light;
}

/* 774:101188 / 774:101189 — rgba(0,0,0,.63), LAYER_BLUR 22 -> blur(11px) */
.afxw__shadow { position: absolute; background: rgba(0,0,0,.63); border-radius: 50%; filter: blur(11px); }
.afxw__shadow--a { left: 215px;  top: 995px; width: 166px; height: 53px; }
.afxw__shadow--b { left: 1071px; top: 727px; width: 144px; height: 43px; }

/* 774:101174 / 101190 / 101191 — three slices of one atlas image, cropped to
   their imageTransform by outputs/mkassets.py so they place 1:1. */
.afxw__coin { position: absolute; background-size: 100% 100%; background-repeat: no-repeat; }
.afxw__coin--a { left: 525px; top: 971px; width: 215.7px; height: 227.5px; background-image: url('/assets/figma/comm-why-coin-a.webp'); }
.afxw__coin--b { left: 991px; top: 498px; width: 252.3px; height: 249.4px; background-image: url('/assets/figma/comm-why-coin-b.webp'); }
.afxw__coin--c { left: 241px; top: 787px; width: 200.5px; height: 229.3px; background-image: url('/assets/figma/comm-why-coin-c.webp'); }

/* ---- content ------------------------------------------------------------ */
.afxw__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--shell); margin: 0 auto;
  padding: 120px var(--gutter) 0; box-sizing: border-box;
}

/* 774:101207 — 761x289 at (376,120), centred on the 1512 canvas, column,
   gap 32. 120 is the band's top padding, not a margin on the header. */
.afxw__head {
  width: 761px; max-width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  text-align: center;
}
/* 774:101208 — column, gap 16 */
.afxw__headtop { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }

/* 774:101209 — 138x33, row, gap 7, padding 6/14. No fill and no stroke. */
.afxw__eyebrow {
  margin: 0; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-white);
}
.afxw__eyebrow img { width: 16px; height: 16px; display: block; flex: none; }

/* 774:101220 / 101221 — SF Pro 510 / 80 / 80px / ls -2.4px. Two TEXT nodes, so
   two gradient boxes: only line one is a ramp (re-derived on its own 613x80
   box), line two is flat white. One gradient across both would be wrong. */
.afxw__title { margin: 0; display: flex; flex-direction: column; width: 100%; }
.afxw__title span {
  display: block;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  color: var(--af-white);
}
.afxw__title .afxw__grad {
  background: linear-gradient(112.2deg, #F8F8F8 50.79%, #636363 93.17%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* 774:101222 — 548x48, SF Pro 510 / 16 / 24px / ls -0.48px */
.afxw__sub {
  margin: 0; width: 548px; max-width: 100%;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px; color: rgba(255,255,255,.6);
}

/* ---- 774:101223 / 101249 / 101279 — three staggered card rows. Absolute on
        the 1512 stage because the design offsets them independently: row 2 is
        pushed 718px right so the ribbon reads between the columns. --------- */
/* the header block occupies 120 + 289 = 409; the first row is drawn at 459,
   so 50 of gap. The stack ends at 1115 + 336 = 1451, the band height, hence
   no bottom padding at the design width. */
.afxw__rows { position: relative; width: 1432px; max-width: 100%; margin: 50px auto 0; height: 992px; }
.afxw__row {
  position: absolute; display: flex; flex-direction: row; gap: 16px; align-items: center;
  filter: drop-shadow(7px 15px 144px rgba(0,0,0,.25));
}
/* y values are band-relative minus the 339px the header block already occupies
   (120 padding + 219 of header) — see .afxw__rows top offset below. */
.afxw__row--a { left: 0;   top: 0;   width: 716px; }
.afxw__row--b { left: 718px; top: 328px; width: 714px; }
.afxw__row--c { left: 0;   top: 656px; width: 716px; }

/* 774:101224 etc — 350x312 (row 3 is 336 tall), radius 32, padding 24,
   column, gap 64, fill #1F1F1F -> #151515, 2px INSIDE gradient stroke at
   node opacity .13. border-color cannot take a gradient, so it is a masked
   pseudo-element; flattening it to a solid is the fastest way to lose the
   card's edge. */
.afxw__card {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 64px;
  padding: 24px; border-radius: var(--r-32);
  background: linear-gradient(180deg, #1F1F1F 0%, #151515 100%);
  overflow: hidden;
}
.afxw__card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: linear-gradient(204.8deg, #FFFFFF 0%, rgba(202,202,202,0) 51.44%, #999999 100%);
  opacity: .13;
  -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;
}

/* 774:101226 "Ellipse 14464" — 80x80. Two fills: a 10% white wash under a
   #323232 -> rgba(34,47,49,.7) ramp starting at 31.57%. 1.6px INSIDE stroke.
   DECLARED DEVIATION: the node's GLASS effect exposes no parameters and has no
   CSS equivalent; the two shadows it ships with are reproduced exactly and the
   glass itself is approximated by the white wash already in the fill stack. */
.afxw__plate {
  position: relative; z-index: 1;
  width: 80px; height: 80px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #323232 31.57%, rgba(34,47,49,.7) 100%),
              rgba(255,255,255,.1);
  border: 1.6px solid rgba(38,63,66,.08); box-sizing: border-box;
  box-shadow: inset 2px -3px 4px 0 rgba(124,177,172,.07),
              7px 19px 15px 0 rgba(0,0,0,.08);
}
/* the first card's glyph is drawn at 24, the other five at 32 */
.afxw__plate img { display: block; width: 32px; height: 32px; }
.afxw__plate--sm img { width: 24px; height: 24px; }

/* 774:101237 etc — SF Pro 400 / 18 / 23.76px / ls -0.54px. The lead sentence
   is a 700 run in white; the remainder drops to 60%. */
.afxw__copy {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: 18px; line-height: 23.76px; letter-spacing: -.54px;
  color: rgba(255,255,255,.6);
}
.afxw__copy b { font-weight: var(--w-bold); color: var(--af-white); }
/* The copy blocks are drawn 120 tall in rows A and B and 144 in row C — five
   and six lines of Whitney-free SF Pro at 23.76. The substituted stack breaks
   the lines differently (row C comes out five lines, not six), so the drawn
   height is held on the block and the text flows inside it. Without this the
   row-C cards render 310.8 instead of 336. */
.afxw__row--a .afxw__copy, .afxw__row--b .afxw__copy { min-height: 120px; }
.afxw__row--c .afxw__copy { min-height: 144px; }

/* ---------------------------------------------------------------- responsive
   774:122100 / 774:121987 are the mobile equivalents: the rows unstack into a
   single 345-wide column and the decorative stage is cut back to the two
   glows the phone frame keeps.                                              */
@media (max-width: 1511px) {
  .afxw__rows { width: 100%; }
  .afxw__row--b { left: auto; right: 0; }
}
@media (max-width: 1180px) {
  .afxw { min-height: 0; }
  .afxw__inner { padding-bottom: 100px; }
  .afxw__rows { height: auto; display: flex; flex-direction: column; gap: 24px; margin-top: 64px; }
  .afxw__row { position: static; width: 100% !important; }
  .afxw__stage { display: none; }
  .afxw__title span { font-size: 56px; line-height: 58px; letter-spacing: -1.68px; }
}
@media (max-width: 720px) {
  .afxw__inner { padding: 100px var(--gutter) 80px; }
  .afxw__row { flex-direction: column; gap: 24px; }
  .afxw__card { width: 100%; }
  .afxw__title span { font-size: 40px; line-height: 42px; letter-spacing: -1.2px; }
  .afxw__sub { width: auto; }
  .afxw__dots--b { top: auto; bottom: 0; }
}


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