/* ============================================================================
   Home band — "Why Atlas / Everything you wish other prop firms actually did".
   Figma 705:16383 (1512 x 1601), file rijNBFC24rPaqbSoj29uvJ.
   Every dimension below is the value in the node JSON. Re-extract, do not
   hand-tune. Tokens come from atlas-tokens.css.

   GRADIENTS: fx.py's gradient output is not usable as-is — it prints the raw
   Figma stop positions as CSS percentages, which is only correct when the ramp
   happens to span the whole box. Every gradient below was re-derived from
   gradientHandlePositions:

     P0,P1,P2 = handle * (W,H)            ; P1 ends the ramp, P2 sets its width
     n        = rot90(P2 - P0)            ; ISO-COLOUR LINES ARE PARALLEL TO P2-P0
     angle    = atan2(n.x, -n.y)          ; a Figma gradient can be skewed, so
     g        = n / (n . (P1 - P0))       ; the ramp is NOT parallel to P1-P0
     t(P)     = g . (P - P0)              ; then re-project the stops onto the
                                            CSS gradient line (length
                                            |W sin a| + |H cos a|).

   Naively rotating (P1-P0) gives 115.5deg for the heading; the aspect-corrected
   normal gives 165.2deg with the ramp squeezed into 47%-93% of the box. The
   second one was checked pixel by pixel against the 2x Figma export and lands
   within 1/255 of the render at every sample. The band fill is 0 -> 31.53%,
   not 0 -> 100%. Do not paste fx.py's numbers back in.
   ========================================================================= */

/* --- 705:16383, the frame itself ----------------------------------------- */
.afxw {
  position: relative;
  overflow: hidden;
  padding: 120px 0 164px;                /* 120 + 1317 content + 164 = 1601 */
  background: linear-gradient(180deg, #EBEDF2 0%, #FFFFFF 31.53%);
  isolation: isolate;                    /* keep the SCREEN layer off the page */
}

/* --- 705:16384 "vector" — the two hairline curves that sweep across the top.
       Group box 2011.5 x 836.5 at frame x -165 / y -562, so from a 50% origin
       that is -165 - 756 = -921px. SVG carries both strokes and the soft white
       "blur" plate that sits over their crossing point.                      */
.afxw-lines {
  position: absolute; left: 50%; top: -562px;
  width: 2011.5px; height: 836.5px; margin-left: -921px;
  background: url('/assets/figma/band-curve-lines.svg') no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

/* --- 705:16388 "Mask group" — a soft photographic texture, SCREEN blended,
       clipped by a radial alpha mask.
       Group opacity .9; mask rect 1373.9x1029.2 at (-269.1,-89.2) opacity .8;
       image 1538.9x1152.8 at (-328,-186.1) opacity .6.
       The mask and the blend MUST live on the same element: a masked wrapper
       creates a stacking context, which would isolate mix-blend-mode and turn
       the SCREEN into a plain paste. So the box is the image box, the mask is
       positioned inside it, and the .8 mask opacity is folded into the mask
       gradient's alpha (.9 x .6 = .54 stays on the element).                 */
.afxw-texture {
  position: absolute; left: 50%; top: -186.1px;
  width: 1538.9px; height: 1152.8px; margin-left: -1084px;   /* -328 - 756 */
  background: url('/assets/figma/6013132-2-c0b789.webp') no-repeat 0 0 / 100% 100%;
  opacity: .54;
  mix-blend-mode: screen;
  /* 705:16389 — the mask ellipse is NOT centred and NOT closest-side: radii
     1177.7 x 888.5 at (52.4%, -2.1%) of a 1373.88x1029.21 rect that itself sits
     at (58.9, 96.9) inside this box, i.e. 778.8 / 75.3 in element pixels. */
  -webkit-mask-image: radial-gradient(1177.7px 888.5px at 778.8px 75.3px, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(1177.7px 888.5px at 778.8px 75.3px, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;        mask-repeat: no-repeat;
  pointer-events: none;
}

/* --- 705:16391 — content column 1073 wide at frame x 220, column, gap 50 --- */
.afxw-inner { position: relative; z-index: 1; width: 1073px; margin: 0 auto; }

/* --- 705:16392 — header 1026x289, column, gap 32, centred --------------- */
.afxw-head { width: 1026px; margin: 0 auto; text-align: center; }

/* 705:16394 — eyebrow row 116x33, gap 7, radius 57, NO fill (it is not a pill,
   it only carries the corner radius in Figma). 705:16403 SF Pro 510/14/21,
   ls -3%: "Why" is rgba(63,69,71,.6) and "Atlas" is #0D0D0D — a character
   range override, not two nodes. */
.afxw-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0; padding: 6px 14px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  color: #0D0D0D;
}
.afxw-eyebrow img { display: block; width: 16px; height: 16px; }
.afxw-eyebrow i { font-style: normal; color: rgba(63,69,71,.6); }

/* 705:16404 — heading block 1026x160, gap 0. Two 80/80 lines, ls -3%.
   Line 1 (705:16405) is gradient-filled; line 2 (705:16406) is flat #0D0D0D.
   Figma gap between the header rows is 16 (705:16393), 32 to the lead. */
.afxw-title {
  margin: 16px 0 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  color: #0D0D0D;
}
.afxw-title span { display: block; }
/* re-derived and pixel-verified against the 2x export: 165.20deg, ramp 46.9%
   to 93.24%. fx.py prints "165.4deg 0% -> 100%", which spreads the fade over
   the whole line and leaves "Everything" visibly washed out. */
.afxw-title-fade {
  background: linear-gradient(165.20deg, #0D0D0D 46.90%, #CECECE 93.24%);
  -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:16407 — lead 548 wide, SF Pro 510/16/24, ls -3%, opacity .8 */
.afxw-lead {
  width: 548px; margin: 32px auto 0;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px;
  color: #0D0D0D; opacity: .8;
}

/* --- 705:16408 — the card block. 50 below the header, two rows, gap 16 ---- */
.afxw-grid {
  display: grid; grid-template-columns: 528.5px 528.5px; gap: 16px;
  margin-top: 50px;
}

/* 705:16410 / 705:16423 — the two teal cards, 528.5x480, radius 32, clipped,
   fill linear-gradient(180deg, #053F3B, #7CB1AC), padding 24.
   705:16435 / 705:16447 — the two light cards, 528.5x376, #FBFBFB. */
.afxw-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-32);
  padding: 24px;
  box-sizing: border-box;
}
.afxw-card--teal { height: 480px; background: linear-gradient(180deg, #053F3B 0%, #7CB1AC 100%); }
.afxw-card--lite { height: 376px; background: #FBFBFB; }

/* copy sits above every art layer */
.afxw-copy { position: relative; z-index: 3; }

/* 705:16421 / 705:16432 — SF Pro 590/32/38.4 (120%), ls -3%, #FFF.
   The Figma text box is 221 / 235 wide, which is what forces the break after
   the lime run; an explicit <br> is used so a font substitution cannot move
   it. 705:16422 / 705:16433 — SF Pro 510/16/21.12 (132%), ls -3%, opacity .9,
   box 420 / 425 wide, 16 below the heading. */
.afxw-h3--dark {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 32px; line-height: 38.4px; letter-spacing: -.96px;
  color: var(--af-white);
}
.afxw-p--dark {
  margin: 16px 0 0; width: 420px;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 21.12px; letter-spacing: -.48px;
  color: var(--af-white); opacity: .9;
}
.afxw-card--b .afxw-p--dark { width: 425px; }

/* 705:16420 / 705:16424 "Rectangle 161133311" — a 12-radius plate behind the
   lime character run, fill rgba(255,255,255,.09), Figma GLASS effect. Its box
   is exactly the run's advance box (138.8x38.4 / 92.3x39.2 at the line-box
   height), so it is built as an inline-block on the run itself rather than an
   absolutely placed rectangle that would drift with any metric change.
   DECLARED DEVIATION: Chrome has no equivalent of Figma's GLASS refraction.
   backdrop-filter over the card's smooth gradient is a visual no-op and only
   costs a compositor layer, so the plate is the flat translucent fill plus the
   1px light edge that GLASS produces. */
.afxw-chip {
  display: inline-block;
  padding: 0 6px; margin: 0 -3px;
  border-radius: var(--r-12);
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  color: var(--af-lime);
  line-height: 38.4px;
}

/* 705:16436 / 705:16448 — SF Pro 590/24/28.8, ls -3%, #0D0D0D.
   705:16437 / 705:16449 — SF Pro 400/16/21.12, ls -3%, opacity .8.
   Both light cards bottom-align their copy (Figma justify MAX), so the copy is
   pinned to the 24px padding box rather than flowed from the top. */
.afxw-card--lite .afxw-copy { position: absolute; left: 24px; right: 24px; bottom: 24px; }
.afxw-h3--lite {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 24px; line-height: 28.8px; letter-spacing: -.72px;
  color: #0D0D0D;
}
.afxw-p--lite {
  margin: 16px 0 0;
  font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: 16px; line-height: 21.12px; letter-spacing: -.48px;
  color: #0D0D0D; opacity: .8;
}
.afxw-card--c .afxw-p--lite { width: 415px; }
.afxw-card--d .afxw-p--lite { width: 481px; }

/* ---- art layers ---------------------------------------------------------- */
.afxw-art { position: absolute; z-index: 2; display: block; pointer-events: none; }

/* 705:16414 / 705:16428 "image 1168" — the swirl, SCREEN, clipped by the
   sibling gradient rectangle that Figma uses as an alpha mask. Same rule as
   the band texture: mask and blend on one element or the blend is isolated.
   Card A: 900.8x899.8 at (-245,-84), opacity .64, mask 150.09deg 49.38%->70.09%.
   Card B: 618x676   at (-2.5,-179), opacity .83, mask 355.18deg 20.80%->46.25%. */
.afxw-swirl {
  position: absolute; z-index: 1;
  background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%;
  background-image: url('/assets/figma/image-1168-bd2aaa.webp');
  mix-blend-mode: screen;
  pointer-events: none;
}
.afxw-swirl--a {
  left: -245px; top: -84px; width: 900.8px; height: 899.8px; opacity: .64;
  -webkit-mask-image: linear-gradient(150.09deg, #000 49.38%, transparent 70.09%);
          mask-image: linear-gradient(150.09deg, #000 49.38%, transparent 70.09%);
}
.afxw-swirl--b {
  left: -2.5px; top: -179px; width: 618px; height: 676px; opacity: .83;
  -webkit-mask-image: linear-gradient(355.18deg, #000 20.80%, transparent 46.25%);
          mask-image: linear-gradient(355.18deg, #000 20.80%, transparent 46.25%);
}

/* 705:16415-17 / 705:16429 — contact shadows under the props.
   rgba(5,37,35,.64); fx.py already halves Figma's LAYER_BLUR radius, so the
   px values below go straight into filter: blur(). */
.afxw-blob {
  position: absolute; z-index: 1;
  border-radius: 50%;
  background: rgba(5,37,35,.64);
  pointer-events: none;
}
.afxw-blob--a1 { left: 198px; top: 384px; width: 96px; height: 80px; filter: blur(16.85px); }
.afxw-blob--a2 { left: 259px; top: 366px; width: 88px; height: 70px; filter: blur(16.85px); }
.afxw-blob--a3 { left: 182px; top: 354px; width: 88px; height: 70px; filter: blur(16.85px); }
.afxw-blob--b1 { left: 45.5px; top: 342px; width: 436px; height: 135px; filter: blur(53.35px); }

/* the four product renders. Every fill is scaleMode STRETCH, not COVER, so the
   intrinsic ratio is deliberately ignored — width/height do the stretching. */
.afxw-art--coins  { left: 96px;    top: 207px; width: 299px;   height: 266px; }    /* 705:16418 */
.afxw-art--card   { left: 28.5px;  top: 203px; width: 461px;   height: 232px; }    /* 705:16430 */
.afxw-art--calc   { left: 75px;    top: 3px;   width: 369.5px; height: 259px;
                    mix-blend-mode: multiply; }                                    /* 705:16442 */
.afxw-art--chains { left: -154.5px; top: -107px; width: 682.8px; height: 466.6px;
                    mix-blend-mode: darken; }                                      /* 705:16454 */

/* 705:16431 / 705:16438-40 / 705:16450-52 "Vector" — the soft teal bloom.
   DECLARED DEVIATION: the Figma node is a vector blob with a RADIAL fill; its
   SVG export is 1.5 MB of path data for a shape that is 20% opaque and pure
   gradient. It is rebuilt as a CSS radial-gradient. The handles resolve to an
   ellipse of 273.9 x 324.5 inside the 458 box. The fill also carries a 60%
   PAINT opacity that the REST `spec` view does not print — it is folded into
   the stop alphas below, so the node's own .2 is all that stays on `opacity`. */
.afxw-bloom {
  position: absolute; z-index: 1;
  width: 458px; height: 458px; opacity: .2; pointer-events: none;
  background: radial-gradient(273.9px 324.5px at 50% 50%,
              rgba(124,177,172,.6) 0%, rgba(255,255,255,.18) 50.85%, rgba(245,247,253,0) 75.23%);
}
.afxw-bloom--b1 { left: 408px;    top: -241px; }
.afxw-bloom--c1 { left: 329px;    top: 66px;   }
.afxw-bloom--c2 { left: -96px;    top: -163px; }
.afxw-bloom--c3 { left: 137px;    top: -221px; }
.afxw-bloom--d1 { left: 259.5px;  top: -75px;  }
.afxw-bloom--d2 { left: -204.5px; top: -62px;  }
.afxw-bloom--d3 { left: -7.5px;   top: -214px; }

/* 705:16443 — the platform strip, 235x52 at (24,167), row, gap 15, padding
   8/16, radius 12, fill rgba(38,63,66,.06), GLASS. It sits over the render, so
   the backdrop blur is real here and is kept. */
.afxw-plats {
  position: absolute; z-index: 2; left: 24px; top: 167px;
  display: flex; align-items: center; justify-content: center; gap: 15px;
  width: 235px; height: 52px; padding: 8px 16px;
  box-sizing: border-box;
  border-radius: var(--r-12);
  background: rgba(38,63,66,.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events: none;
}
.afxw-plats img { display: block; }

/* --- 705:16455 — the lime CTA, 241x56, radius 100, fill #E1FFA0, 1.5px INSIDE
       gradient stroke, shadow 2px 14px 24px rgba(38,63,66,.12).
       DECIDED: the stroke re-derives to 147.04deg / rgba(5,63,59,.6) 34.01% /
       .162 67.30% / .6 98.73%, which is not quite the --af-card-g token
       (161.7deg, full-alpha ends). This is the same shared button component
       (632:11345) that every other shipped band draws with --af-card-g, so the
       token wins: one CTA rendering a 1.5px hairline differently from the four
       above it is a worse bug than a 14deg stroke rotation. Flagged in handover.
       Label SF Pro 590/16/19.09 ls -3%, textCase TITLE. Ink is --af-lime-ink,
       set explicitly — a lime button must never inherit a link colour. ------ */
.afxw-cta {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 241px; height: 56px; margin: 50px auto 0;
  padding: 18px 32px; box-sizing: border-box;
  border-radius: var(--r-pill);
  background: var(--af-lime);
  box-shadow: 2px 14px 24px rgba(38,63,66,.12);
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  text-transform: capitalize; text-decoration: none;
  color: var(--af-lime-ink);
}
.afxw-cta::before {
  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);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.afxw-cta img { display: block; width: 20px; height: 20px; }

/* ============================================================================
   Motion. Existing --t-* / --e-* tokens only, transform and opacity only.
   Reduced motion is already killed globally in atlas-tokens.css.
   ========================================================================= */
.afxw-cta { transition: transform var(--t-instant) var(--e-out),
                        box-shadow var(--t-fast) var(--e-out); }
.afxw-cta img { transition: transform var(--t-fast) var(--e-out); }
.afxw-cta:active { transform: scale(.97); }

.afxw-card { transition: transform var(--t-base) var(--e-out); }
.afxw-art, .afxw-plats { transition: transform var(--t-slow) var(--e-out); }

@media (hover: hover) and (pointer: fine) {
  .afxw-cta:hover { box-shadow: 2px 18px 30px rgba(38,63,66,.18); }
  .afxw-cta:hover img { transform: translateX(2px); }
  .afxw-card:hover { transform: translateY(-3px); }
  /* the render drifts a touch further than the card, so the card reads as a
     window onto the object rather than a flat picture. 4px, not 40. */
  .afxw-card:hover .afxw-art { transform: translateY(-4px); }
}

.afxw-cta:focus-visible {
  outline: 2px solid var(--af-deep); outline-offset: 3px;
  transition: outline-offset var(--t-fast) var(--e-out);
}

/* ============================================================================
   Below 1512 the frame no longer fits. The column and the cards shrink; the
   Figma numbers above stay the source of truth for the 1512 render.
   ========================================================================= */
@media (max-width: 1152px) {
  .afxw { padding: 88px 0 104px; }
  .afxw-inner { width: 100%; max-width: 1073px; padding: 0 var(--gutter); box-sizing: border-box; }
  .afxw-head { width: 100%; }
  .afxw-title { font-size: 56px; line-height: 58px; letter-spacing: -1.68px; }
  .afxw-lead { width: 100%; max-width: 548px; }
  .afxw-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .afxw-p--dark, .afxw-card--b .afxw-p--dark,
  .afxw-card--c .afxw-p--lite, .afxw-card--d .afxw-p--lite { width: auto; }
}
@media (max-width: 860px) {
  .afxw-title { font-size: 40px; line-height: 42px; letter-spacing: -1.2px; }
  .afxw-grid { grid-template-columns: minmax(0, 1fr); }
  .afxw-card--teal { height: 440px; }
  .afxw-h3--dark { font-size: 28px; line-height: 33.6px; letter-spacing: -.84px; }
  .afxw-chip { line-height: 33.6px; }
}

/* ============================================================================
   MOBILE — Figma 705:78942 "Frame 2147259198", 393 x 1001, inside the 393
   mobile frame 705:78552. Desktop rules above are untouched.
   ========================================================================= */
@media (max-width: 767px) {
  /* content frame 705:78950 sits at y 94 and is 807 tall: 94 + 807 + 100 = 1001 */
  .afxw { padding: 94px 0 100px; background: linear-gradient(180deg, #EBEDF2 0%, #FFFFFF 100%); }

  /* 705:78943 "vector" — same artwork, 1151 x 478.6 at (-218.6,-308) */
  .afxw-lines { left: -218.6px; top: -308px; width: 1151px; height: 478.6px; margin-left: 0; }
  /* 705:78947 "Mask group" — image box and mask box are the SAME sizes as
     1512; only the x moves (image at -513 instead of -328), so the mask
     geometry inside the element is unchanged. */
  .afxw-texture { left: -513px; margin-left: 0; }

  .afxw-inner { width: 100%; padding: 0 24px; box-sizing: border-box; }

  /* --- 705:78951 header, 345 x 283 --------------------------------------- */
  .afxw-head { width: 100%; }
  /* 705:78952: eyebrow 33 -> gap 8 -> title 126 ; then gap 20 to the lead */
  .afxw-title { margin-top: 8px; font-size: 42px; line-height: 42px; letter-spacing: -1.26px; }
  /* 705:78964 is one 42px line inside the 345 column and 705:78965 is two, for
     126 total. SF Pro Display — which every device this page is measured on
     has — fits line 1 exactly; the Inter fallback used when SF Pro is absent
     is ~4% wider and would wrap it to two, moving everything below it by 42px.
     Pinned, and .afxw clips, so the fallback overhangs rather than reflows.
     DECLARED DEVIATION. */
  .afxw-title-fade { white-space: nowrap; }
  /* 705:78966 — 285 wide, 4 lines of 24 */
  .afxw-lead { width: 285px; max-width: 100%; margin-top: 20px; }

  /* --- 705:78968 — the four cards become a snap rail: 300-wide cards, gap 16,
     inside the 345 column, exactly as the frame draws them (x 24 / 340 / 656 /
     972). The RAIL scrolls, never the page.                                 */
  .afxw-grid {
    display: flex; grid-template-columns: none; gap: 16px;
    margin-top: 50px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .afxw-grid::-webkit-scrollbar { display: none; }
  /* every card is 300 x 386 on mobile, radius 32, padding 20 */
  .afxw-card { flex: 0 0 300px; width: 300px; padding: 20px; scroll-snap-align: start; }
  .afxw-card--teal, .afxw-card--lite { height: 386px; }
  .afxw-card--lite .afxw-copy { left: 20px; right: 20px; bottom: 20px; }

  /* 705:78972 / 78985 / 78993 / 79010 — SF Pro 590 / 24 / 28.8 / ls -0.72 */
  /* Figma lays text out on whole-pixel line boxes (28.8 -> 29, 21.12 -> 21),
     which is where its own 58 / 105 node heights come from. */
  .afxw-h3--dark, .afxw-h3--lite { font-size: 24px; line-height: 29px; letter-spacing: -.72px; }
  .afxw-chip { line-height: 29px; }
  .afxw-p--dark, .afxw-p--lite { line-height: 21px; }
  .afxw-card--a .afxw-h3--dark { width: 180px; }
  .afxw-card--b .afxw-h3--dark { width: 186px; }
  .afxw-card--c .afxw-h3--lite { width: 224px; }
  .afxw-card--d .afxw-h3--lite { width: 208px; }
  /* 705:78970 puts card A's copy on a 12 gap; B, C and D are on 16 */
  .afxw-card--a .afxw-p--dark { margin-top: 12px; width: 222px; }
  .afxw-card--b .afxw-p--dark { width: auto; }
  .afxw-card--c .afxw-p--lite { width: 208px; }
  .afxw-card--d .afxw-p--lite { width: auto; }

  /* ---- art, re-read from the mobile card nodes -------------------------- */
  /* 705:78977 swirl, 442.5x449.9 at (-71.2,-112.4), opacity .64, SCREEN */
  .afxw-swirl--a { left: -71.2px; top: -112.4px; width: 442.5px; height: 449.9px; }
  /* 705:78989 swirl, 353.2x386.6 at (-1.5,-209.2), opacity .83, SCREEN */
  .afxw-swirl--b { left: -1.5px; top: -209.2px; width: 353.2px; height: 386.6px; }
  /* 705:78978-80 — LAYER_BLUR 18.98 -> blur(9.49) */
  .afxw-blob--a1 { left: 137.9px; top: 116.8px; width: 54.1px; height: 45.1px; filter: blur(9.49px); }
  .afxw-blob--a2 { left: 172.2px; top: 106.6px; width: 49.6px; height: 39.4px; filter: blur(9.49px); }
  .afxw-blob--a3 { left: 128.9px; top:  99.9px; width: 49.6px; height: 39.4px; filter: blur(9.49px); }
  /* 705:78990 — LAYER_BLUR 61.03 -> blur(30.51) */
  .afxw-blob--b1 { left: 25.7px; top: 88.8px; width: 249.4px; height: 77.2px; filter: blur(30.51px); }
  /* 705:78981 / 78991 / 79000 / 79012 */
  .afxw-art--coins  { left: 68.9px;   top: 31.7px;  width: 145.7px; height: 129.7px; }
  .afxw-art--card   { left: 16.2px;   top:  9.3px;  width: 263.5px; height: 132.7px; }
  .afxw-art--calc   { left: 53.8px;   top: 15px;    width: 245px;   height: 171.7px; }
  .afxw-art--chains { left: -130.7px; top: -67.6px; width: 458.1px; height: 313px; }
  /* 705:79001 — the platform strip scales with card C's art (x0.663) */
  .afxw-plats {
    left: 20px; top: 123.7px; width: 155.8px; height: 34.5px;
    gap: 9.94px; padding: 5.3px 10.61px; border-radius: 7.96px;
  }
  .afxw-plats img:nth-child(1) { width: 33.2px; height: 23.9px; }
  .afxw-plats img:nth-child(2) { width: 40.4px; height: 20.6px; }
  .afxw-plats img:nth-child(3) { width: 41.1px; height: 20.6px; }
  /* 705:78984 / 78996-98 / 79007-09 — the blooms keep their 458px box; the
     mobile file gives card D the same three positions as card C. */
  .afxw-bloom--d1 { left: 329px;  top: 66px;   }
  .afxw-bloom--d2 { left: -96px;  top: -163px; }
  .afxw-bloom--d3 { left: 137px;  top: -221px; }

  /* 705:79013 — 241 x 56, 32 below the rail */
  .afxw-cta { margin-top: 32px; }
}