/* ============================================================================
   Stories band 3 — PAYOUT CARD GRID.
   Figma 705:463496 (1512 x 2121), child of the desktop frame 705:463416 at
   y = 946. Every offset below is measured from THIS band's own top edge
   (frame y minus 946). Markup: fragments/st2-grid.html.
   Behaviour: assets/atlas-st2-grid.js (the five filter pills, nothing else).

   Requires, in this order:
     assets/atlas-tokens.css   custom properties
     assets/atlas-st2-grid.css this file

   Nothing here is shared with atlas-st2-hero.css. The card is a real Figma
   COMPONENT (705:504200) with eight instances, so it is written ONCE as
   .afxs-gcard and the instances differ only in content and `data-region`.

   Five things this band lives or dies by:

   - Every gradient below was RE-DERIVED from the raw gradientHandlePositions
     against the real box aspect ratio. Figma's handles describe a segment;
     a CSS linear-gradient describes a line through the box centre, so both the
     angle AND every stop position shift. fx.py's own angle is read off the
     normalised handle vector and ignores the box — on the 390x468 card
     hairline it is 6 degrees out, on the 65x14 amount it is 37 degrees out.

   - Figma y offsets are margins or absolute tops, never padding. The band's
     120px head/foot is `margin` on .afxs-grid__inner; the card's 4px and the
     body's 20px ARE padding because the file draws them as padding.

   - Fixed Figma widths are `width`. 1202 / 1218 / 697 / 637 / 548 / 390 / 382
     / 342 / 155 all collapse to their content under `max-width`.

   - The card hairline is a 2px INSIDE gradient stroke, so it is a masked
     pseudo-element. `border-color` cannot hold a gradient and flattening it to
     a solid grey is the single most visible way to lose the card.

   - 705:504161 (Frame 2147259188) and 705:504213 (the 24px badge inside every
     card header) are `visible:false` in the file and are correctly absent.

   Declared deviations are marked DEVIATION and explained where they occur.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   705:463496 — the band shell. 1512x2121, clipped.

   TWO fills in the file. One is a light ramp `#EBEDF2 -> #FFFFFF`, the other
   the dark ramp below; the dark one paints on top and is fully OPAQUE at both
   stops, so the light ramp cannot show through the composite and is not
   reproduced. Only the dark ramp ships.

   Dark ramp handles (0.5076,0)->(0.5076,0.4389) on a 1512x2121 box: the vector
   is exactly vertical => 180deg, and Figma's segment is 0.4389 of the CSS
   gradient line, so #0F0F0F's 83.96% lands at 36.85%.

   `isolation` keeps the HARD_LIGHT glow below off anything the page paints
   above or beneath this band.
   ------------------------------------------------------------------------ */
.afxs-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 2121px;
  background: linear-gradient(180deg, #303030 0%, #0F0F0F 36.85%);
  color: var(--af-white);
}

.afxs-grid *,
.afxs-grid *::before,
.afxs-grid *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   DECORATION. Six layers, all absolutely positioned, all pointer-events:none,
   all painted before the content in DOM order.
   ------------------------------------------------------------------------ */

/* 705:463497 / 705:483821 — two dot fields, each a GROUP of
   { gradient RECTANGLE with isMask:true , "dots" FRAME 1642x1370 rotated 180
   at opacity .8 }. The mask rect is exactly 1512x619 and sits at band y 0 and
   band y 1092. So each field is: a 1512x619 window, alpha-masked by the rect's
   own gradient, holding the dots art at x -98 / y -109 relative to the window.

   The dots art ships as the Figma export of the "dots" layer at 2x
   (3284x2740 -> displayed 1642x1370). The 180deg rotation and the .8 node
   opacity are already baked into the export.

   st2-dots-a and st2-dots-b are two GENUINELY DIFFERENT rotations of the
   field, not one asset reused. Do not substitute one for the other.

   FULL-BLEED: these are band backgrounds, not placed art. Pinned at a fixed
   1512 they leave a bare strip of flat band colour down the right on wider
   viewports. The window spans the viewport; the art stays centred on the
   1512 stage via `calc(50% - 33px)` (the art's centre is 33px left of the
   band's centre: -98 + 821 = 723 against 756). Both masks are near-vertical
   (178.7deg / 130.5deg) so stretching them horizontally is visually nil. */
.afxs-grid__dots {
  position: absolute; left: 0; right: 0;
  height: 619px;
  pointer-events: none;
}

/* 705:463498 — mask rect at band y 0. Handles (0.667,-0.2122)->(0.6782,0.9793)
   on 1512x619 => (16.9, 737.6)px, so 178.69deg, Figma segment 737.8 against a
   CSS line of 653.4 and a start offset of -16.58%. Figma group masks are ALPHA
   masks, and every stop here is rgba(217,217,217,0) or opaque #737373, so the
   fill doubles as the mask channel unchanged. */
.afxs-grid__dots--a {
  top: 0;
  background: url('/assets/figma/st2-dots-a.webp') no-repeat calc(50% - 33px) -109px / 1642px 1370px;
  -webkit-mask-image: linear-gradient(178.69deg, rgba(217,217,217,0) -0.64%, #737373 50.34%, rgba(217,217,217,0) 81.72%, rgba(217,217,217,0) 96.34%);
          mask-image: linear-gradient(178.69deg, rgba(217,217,217,0) -0.64%, #737373 50.34%, rgba(217,217,217,0) 81.72%, rgba(217,217,217,0) 96.34%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

/* 705:483822 — mask rect at band y 2038-946 = 1092. Handles
   (0.5351,0.5178)->(0.712,0.8861) on 1512x619 => (267.4, 228.0)px, so
   130.45deg, segment 351.4 against a CSS line of 1552.1, start offset 53.07%.
   Two stops only: transparent -> #737373. */
.afxs-grid__dots--b {
  top: 1092px;
  background: url('/assets/figma/st2-dots-b.webp') no-repeat calc(50% - 33px) -109px / 1642px 1370px;
  -webkit-mask-image: linear-gradient(130.45deg, rgba(217,217,217,0) 53.07%, #737373 75.71%);
          mask-image: linear-gradient(130.45deg, rgba(217,217,217,0) 53.07%, #737373 75.71%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

/* 705:504145 "Ellipse 473" — 1693x956 at (-52, 481) in band coordinates.
   Fill #051F1D, blendMode HARD_LIGHT, LAYER_BLUR radius 516.4. Figma's blur
   radius is ~2x the CSS blur() value, so 516.4 -> 258.2px. Same node type and
   same treatment as the hero glow 705:463419 in atlas-st2-hero.css.
   A fixed-width stage that POSITIONS art must stay centred, hence left:50%
   with margin-left = -52 - 756.
   DEVIATION: the node also carries BACKGROUND_BLUR 315.6. Chrome renders
   backdrop-filter on a mix-blend-mode element as an opaque frosted plate,
   nothing like Figma's composite, so it is dropped. */
.afxs-grid__glow {
  position: absolute; left: 50%; top: 481px;
  width: 1693px; height: 956px; margin-left: -808px;
  background: var(--af-hero-glow);
  border-radius: 50%;
  filter: blur(258.2px);
  mix-blend-mode: hard-light;
  pointer-events: none;
}

/* 705:504146 "light" — a GROUP of four sub-groups (eight huge rotated
   rectangles at 4% to 32% white), rotated -13.28deg, node opacity .2,
   LAYER_BLUR 36.4. Ships as the Figma export of the whole layer, so the
   rotation, the .2 opacity and the blur are already baked in — do NOT
   re-apply them here.

   PLACEMENT, and the one number in this file that is not exact. The layer's
   absoluteBoundingBox is 2587.2x3574.9 at band (-896, -1872); its
   absoluteRenderBounds, clipped by the band, is 1512x1703 at band (0, 0). The
   export is 1801x3133 — alpha-trimmed on conversion, so 786px came off
   horizontally and 442px vertically. Vertically that is solvable: the clipped
   render bounds reach 1872 + 1703 = 3575 = the exact bottom of the bounding
   box, so nothing was trimmed from the bottom and all 442px came off the top
   => the art spans band y -1430 to +1703. Horizontally it is not: the render
   bounds are clipped on BOTH sides, which only bounds the left edge to the
   interval [-289, -110]. -199 is that interval's midpoint. The layer is a 20%
   opacity blurred wash, so the residual +/-90px of horizontal uncertainty is
   not visible; it is recorded here rather than hidden. */
.afxs-grid__light {
  position: absolute; left: 50%; top: -1430px;
  width: 1801px; height: 3133px; margin-left: -955px;
  pointer-events: none;
}

/* 705:504159 / 705:504160 — two soft dark blobs, fill rgba(0,0,0,.63),
   LAYER_BLUR 21.7309 -> blur(10.87px). Both sit BEHIND the card grid in the
   file's child order, so 1113 is almost entirely occluded by card 3 and 1112
   reads as a shadow under the bottom edge of card 1. Reproduced as drawn. */
.afxs-grid__blob {
  position: absolute;
  background: rgba(0,0,0,.63);
  border-radius: 50%;
  filter: blur(10.87px);
  pointer-events: none;
}
/* 705:504159 "Ellipse 1112" — 166x53.2 at (215, 995) */
.afxs-grid__blob--a { left: 50%; margin-left: -541px; top: 995px; width: 166px; height: 53.2px; }
/* 705:504160 "Ellipse 1113" — 144x43 at (1071, 727) */
.afxs-grid__blob--b { left: 50%; margin-left: 315px;  top: 727px; width: 144px; height: 43px; }

/* ---------------------------------------------------------------------------
   705:504175 — the content column. 1202x1881, VERTICAL, gap 60, align CENTER,
   placed at band (155, 120). 120 + 1881 + 120 = 2121, so the band's height is
   the column plus its two 120px offsets, carried as margin (never padding:
   padding here would inflate the 1202 box).
   ------------------------------------------------------------------------ */
.afxs-grid__inner {
  position: relative;
  width: 1202px;
  margin: 120px auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 60px;
}

/* 705:504176 — 697x369, column, gap 32, align CENTER. 697 is the pills track's
   own hug width, so the head is exactly as wide as its widest child. */
.afxs-grid__head {
  width: 697px;
  display: flex; flex-direction: column; align-items: center;
  gap: 32px;
}

/* 705:504177 — 637x209, column, gap 16, align CENTER */
.afxs-grid__headtop {
  width: 637px;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
}

/* 705:504178 — 189x33, row, gap 7, padding 6/14, radius 57.
   Its fill, its 1px OVERLAY gradient stroke and its BACKGROUND_BLUR 16.7 are
   ALL `visible:false` in the file, so this chip has no plate at all: it is an
   icon and a line of text. The padding stays because it sets the 33px height
   the 209px column depends on. */
.afxs-grid__eyebrow {
  display: flex; align-items: center; gap: 7px;
  margin: 0; padding: 6px 14px;
  font-family: var(--font-sans);
  font-weight: var(--w-medium);       /* Figma 510 */
  font-size: 14px; line-height: 21px; letter-spacing: -0.42px;
  color: var(--af-white);
}
.afxs-grid__eyebrow img { display: block; flex: none; }

/* 705:504188 — 637x160, column, gap 0. Two 80px lines, both CENTER. */
.afxs-grid__title {
  width: 637px; margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-medium);       /* Figma 510 */
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  text-align: center;
  color: var(--af-white);
}
.afxs-grid__title span { display: block; }

/* 705:504189 "These payouts " — the trailing space is IN THE FILE and is part
   of the 478px text box Figma centres, which pushes the visible glyphs ~10px
   left of true centre. A plain trailing space collapses at the end of a line
   box and would re-centre the line, so the markup ships ` `.
   Fill: handles (0.5488,-0.2611)->(0.9315,0.9343) on a 478x80 box =>
   (183.0, 95.6)px, so 117.58deg, segment 206.4 against a CSS line of 460.7,
   start offset 48.38%. #F8F8F8 -> #636363. */
.afxs-grid__title-grad {
  background: linear-gradient(117.58deg, #F8F8F8 48.38%, #636363 93.18%);
  -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:504191 — 548x48, CENTER, node opacity .8 */
.afxs-grid__sub {
  width: 548px; margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--w-medium);       /* Figma 510 */
  font-size: 16px; line-height: 24px; letter-spacing: -0.48px;
  text-align: center;
  color: var(--af-white);
  opacity: .8;
}

/* ---------------------------------------------------------------------------
   705:504192 — the filter track. 697x48, row, gap 8, padding 4, fill #222222,
   radius 47. Hugs its five pills: 4+136+8+104+8+122+8+155+8+140+4 = 697.
   ------------------------------------------------------------------------ */
.afxs-grid__filters {
  display: flex; align-items: center; gap: 8px;
  padding: 4px;
  background: var(--af-card);         /* #222222 */
  border-radius: 47px;
}

/* 705:504193..197 — one Button instance each, 40px tall, padding 12/24.
   Text SF Pro 590 16/16, letter-spacing 0 — the only type node on this band
   with no tracking. Do not inherit -0.48 here. */
.afxs-grid__pill {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 12px 24px;
  border: 0; background: none;
  font-family: var(--font-sans);
  font-weight: var(--w-semi);         /* Figma 590 */
  font-size: 16px; line-height: 16px; letter-spacing: 0;
  color: var(--af-white);
  white-space: nowrap; cursor: pointer;
  /* 705:504194..197 inactive: no fill, radius 100, node opacity .7 */
  border-radius: var(--r-pill);
  opacity: .7;
  transition: opacity var(--t-fast) var(--e-out),
              background-color var(--t-fast) var(--e-out);
}

/* 705:504193 active: fill #223736, radius 53, 2px INSIDE rgba(255,255,255,.14),
   full opacity. An inside SOLID stroke really is a border, so `border` is
   correct here — unlike the card hairline, which is a gradient. The padding
   drops by 2 on each axis so the box stays 136x40. */
.afxs-grid__pill[aria-pressed='true'] {
  opacity: 1;
  padding: 10px 22px;
  border: 2px solid var(--w-14);
  border-radius: 53px;
  background: var(--af-forest);       /* #223736 */
}

.afxs-grid__pill:hover { opacity: 1; }
.afxs-grid__pill:focus-visible {
  outline: 2px solid var(--af-lime);
  outline-offset: 3px;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   705:504198 — the grid. The file draws three FRAMEs of 1218x468 (row, gap 24)
   stacked in a column with gap 24. Shipped as ONE wrap container with the same
   24px row and column gaps: 3 x 390 + 2 x 24 = 1218 puts exactly three cards
   per line, so the layout is identical, and hiding a card during a filter
   reflows the remaining ones instead of leaving a hole in a fixed row.

   1218 is 8px WIDER than the 1202 column above it. That is in the file: the
   column is align CENTER, so the grid overhangs by 8px on each side. Keep it.
   ------------------------------------------------------------------------ */
.afxs-grid__cards {
  width: 1218px;
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 24px;
}

/* ---------------------------------------------------------------------------
   705:504200 — the card COMPONENT. 390x468, column, gap 32, padding 4,
   radius 32, clipped. Fill handles (0.5,0)->(0.5,1) => a plain vertical ramp.
   `min-height` rather than `height`: the quote box is drawn at a fixed four
   lines and every quote fits in four on macOS, but a fallback face that wraps
   to five must push the card, not be clipped by it.
   ------------------------------------------------------------------------ */
.afxs-gcard {
  position: relative;
  width: 390px; min-height: 468px;
  padding: 4px;
  display: flex; flex-direction: column;
  gap: 32px;
  border-radius: var(--r-32);
  background: linear-gradient(180deg, #1F1F1F 0%, #151515 100%);
  overflow: hidden;
}
.afxs-gcard[hidden] { display: none; }

/* The 2px INSIDE gradient stroke. Handles (1,-0.0817)->(0.5,1) on a 390x468
   box => (-195, 506.2)px, so 201.07deg, segment 542.4 against a CSS line of
   576.9, start offset -6.17%. Masked pseudo-element: a border cannot hold a
   gradient, and border-image cannot follow a 32px radius. */
.afxs-gcard::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--r-32);
  padding: 2px;
  background: linear-gradient(201.07deg, #FFFFFF -6.17%, rgba(202,202,202,0) 42.19%, #999999 87.85%);
  -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;
}

/* 705:504201 — 382x207, radius 27, clipped, column, justify END.
   The photo is an IMAGE fill with a scaleMode STRETCH imageTransform; the crop
   is baked into the exported file (764x414 = 2x of 382x207), so the CSS is a
   plain `cover` and the art is not re-zoomed. */
.afxs-gcard__photo {
  position: relative;
  width: 382px; height: 207px;
  border-radius: 27px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  flex: none;
}
.afxs-gcard__photo > img {
  position: absolute; inset: 0;
  width: 382px; height: 207px;
  object-fit: cover;
  display: block;
}

/* 705:504203 — 382x88, absolutely placed inside the 61px bar and anchored to
   its bottom, so it rises 27px above the bar. */
.afxs-gcard__scrim {
  position: absolute; left: 0; bottom: 0;
  width: 382px; height: 88px;
  background: linear-gradient(180deg, rgba(5,63,59,0) 0%, #053F3B 100%);
  pointer-events: none;
}

/* 705:504202 — 382x61, padding 20 => a 342 content row (705:504204),
   SPACE_BETWEEN, align CENTER. */
.afxs-gcard__meta { position: relative; padding: 20px; }
.afxs-gcard__metarow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  width: 342px;
}

/* 705:504205 — row, gap 6, align CENTER. The file gives this group a FIXED
   200.5px width and lets its chips overflow to the right; every card's real
   content runs 186-243px against a 342-minus-amount budget, so hugging lands
   the chips in the same place and cannot collide with the amount. */
.afxs-gcard__who {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}

/* 705:504206 — SF Pro 590 16/16 ls -0.48 */
.afxs-gcard__name {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: 16px; line-height: 16px; letter-spacing: -0.48px;
  color: var(--af-white);
  white-space: nowrap;
}

/* 705:504207 (flag) and 705:504210 (role) — same chip paint, different padding.
   Fill handles (-0.0603,0.7121)->(1.0814,0.3788), re-derived per box:
     flag chip 53x20 => 83.72deg, stops -4.65% / 61.70% / 106.25%
     role chip 98x21 => 86.42deg, stops -5.57% / 62.10% / 107.53%
   Chip widths vary card to card (the country label is 2 or 3 glyphs), so both
   gradients are derived on card 1's boxes and shared; the drift across the
   nine cards is under a degree.
   PAINT OPACITY. Both fills carry `fills[0].opacity = 0.09` on the whole
   gradient, so every stop alpha is multiplied by .09 before it is written:
     #FFFFFF a1.00 -> rgba(255,255,255,.09)
     #FFFFFF a0.32 -> rgba(255,255,255,.0288)
     #FFFFFF a1.00 -> rgba(255,255,255,.09)
   The chip is a WHISPER of white over the photograph, not a lozenge — exactly
   the same treatment .afxs-spot__chip gives 705:524609. (Fixed 3 Aug 2026: the
   gradient shipped at full alpha, which painted the ends solid white and put
   the white "UK" / "Swing trader" labels at 1.00:1 on every card.)
   The 16.7 BACKGROUND_BLUR is KEPT. It is the one backdrop-filter on this band
   that survives rule 8: the chip is a part-transparent plate sitting directly
   on a photograph, and neither the photo nor the card carries a blur or a
   blend mode, so Chrome composites it the way Figma draws it. BACKGROUND_BLUR
   maps 1:1 onto backdrop-filter (the ~2x halving in deviation #4 applies to
   LAYER_BLUR only), so 16.7 -> 16.7px. Perf note for whoever profiles this
   page: that is eighteen backdrop-filters inside a stacking context that also
   holds the 258px HARD_LIGHT glow. If the band ever measures slow to paint,
   these are the first thing to test dropping — at 9% white over a photograph
   the blur is doing very little work. */
.afxs-gcard__chip {
  display: inline-flex; align-items: center; gap: 7px;
  flex: none;
  border-radius: 57px;
  font-family: var(--font-sans);
  font-weight: var(--w-medium);       /* Figma 510 */
  font-size: 14px; line-height: 21px; letter-spacing: -0.42px;
  color: var(--af-white);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(16.7px);
          backdrop-filter: blur(16.7px);
}
.afxs-gcard__chip span { opacity: .8; }   /* 705:504209 / 705:504211, node opacity .8 */

/* 705:504207 — 53x20, padding 2/8/2/2 */
.afxs-gcard__chip--flag {
  height: 20px; padding: 2px 8px 2px 2px;
  background: linear-gradient(83.72deg,
              rgba(255,255,255,.09) -4.65%,
              rgba(255,255,255,.0288) 61.70%,
              rgba(255,255,255,.09) 106.25%);
}
.afxs-gcard__chip--flag img {
  display: block; flex: none;
  width: 16px; height: 16px;
  border-radius: var(--r-pill);
  object-fit: cover;
}

/* 705:504210 — 98x21, padding 2/8 */
.afxs-gcard__chip--role {
  height: 21px; padding: 2px 8px;
  background: linear-gradient(86.42deg,
              rgba(255,255,255,.09) -5.57%,
              rgba(255,255,255,.0288) 62.10%,
              rgba(255,255,255,.09) 107.53%);
}

/* 705:504212 — SF Pro 700 20/20 ls -0.6, gradient FILL, so background-clip.
   Handles (0.6864,0.3333)->(1.1949,1.0) on card 1's 65x14 box => (33.1, 9.3)px,
   so 105.75deg, segment 34.4 against a CSS line of 66.4, start offset 66.4%.
   Derived once on the master and shared: the nine amounts run 62px to 76px
   wide and at that spread the stop drift is under 3%. */
.afxs-gcard__amount {
  margin: 0; flex: none;
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: 20px; line-height: 20px; letter-spacing: -0.6px;
  text-align: right;
  white-space: nowrap;
  background: linear-gradient(105.75deg, #F8F8F8 66.4%, #C4E4E4 118.2%);
  -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:504220 — 382x221, column, gap 24, padding 0/20/20/20 */
.afxs-gcard__body {
  display: flex; flex-direction: column;
  gap: 24px;
  padding: 0 20px 20px;
  flex: 1 1 auto;
}

/* 705:504221 — 342x128, column, gap 8 */
.afxs-gcard__copy { display: flex; flex-direction: column; gap: 8px; }

/* 705:504222 — 342x84, i.e. four lines of 21.12. Node opacity .8. */
.afxs-gcard__quote {
  margin: 0;
  min-height: 84px;
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: 16px; line-height: 21.12px; letter-spacing: -0.48px;
  color: var(--af-white);
  opacity: .8;
}

/* 705:504223 — 342x36, row, gap 32, paddingTop 16. The 16 is drawn as padding
   on the stat row in the file, so it stays padding here. */
.afxs-gcard__stats { display: flex; gap: 32px; padding-top: 16px; }

/* 705:504224 / 705:504235 — 155x20 each, FIXED width, row, gap 12, align
   CENTER. 155 + 32 + 155 = 342. Content hugs left inside the 155. */
.afxs-gcard__stat { width: 155px; display: flex; align-items: center; gap: 12px; }

/* 705:504225 / 705:504236 — row, gap 4, align CENTER */
.afxs-gcard__statlabel { display: flex; align-items: center; gap: 4px; }
.afxs-gcard__statlabel img { display: block; flex: none; }

/* 705:504233 / 705:504246 — Saans VF-TRIAL 400 14/14 ls 0, node opacity .8.
   DEVIATION: Saans exists only under a trial licence and cannot ship, so
   --font-alt maps it onto the primary stack. */
.afxs-gcard__statlabel span {
  font-family: var(--font-alt);
  font-weight: var(--w-regular);
  font-size: 14px; line-height: 14px; letter-spacing: 0;
  color: var(--af-white);
  opacity: .8;
  white-space: nowrap;
}

/* 705:504234 / 705:504247 — SF Pro 510 20/20 ls -0.6 */
.afxs-gcard__statvalue {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 20px; line-height: 20px; letter-spacing: -0.6px;
  color: var(--af-white);
  white-space: nowrap;
}

/* 705:504248 — 342x49, row, gap 8, padding 12/20, CENTER/CENTER, radius 50,
   fill rgba(255,255,255,.05), shadow 0 8px 12px rgba(0,0,0,.08),
   BACKGROUND_BLUR 34 -> backdrop-filter: blur(34px).
   BACKGROUND_BLUR maps 1:1 onto backdrop-filter. Deviation #3 in
   STORIES-V2-SPEC.md drops a backdrop-filter only where it sits under a
   blurred or blended layer and Chrome would composite it differently from
   Figma; this one sits on the card's plain #1F1F1F->#151515 ramp, so it is
   kept. (Restored 3 Aug 2026 — it had been dropped as a no-op.)
   No destination is drawn in the file; all nine point at /verify. */
.afxs-gcard__verify {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 342px; height: 49px;
  padding: 12px 20px;
  border-radius: var(--r-50);
  background: rgba(255,255,255,.05);
  box-shadow: 0 8px 12px 0 rgba(0,0,0,.08);
  -webkit-backdrop-filter: blur(34px);
          backdrop-filter: blur(34px);
  text-decoration: none;
  /* DEVIATION: 705:504249 is drawn in DM Sans 600 16/16 ls -0.48. DM Sans is
     not loaded on this site, so it ships on the primary stack. */
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: 16px; line-height: 16px; letter-spacing: -0.48px;
  color: var(--af-white);
  transition: background-color var(--t-fast) var(--e-out);
}
.afxs-gcard__verify:hover { background: var(--w-08); }
.afxs-gcard__verify:focus-visible {
  outline: 2px solid var(--af-lime);
  outline-offset: 3px;
}

/* 705:504250 — a 16x19 box holding a 20x20 chevron instance at (+0.5, -0.5),
   i.e. the glyph overhangs its own frame. Reproduced rather than snapped to
   20x20, which would push the label 2px left of where the file puts it.
   DEVIATION: the file draws TWO chevrons, white and rgba(255,255,255,.4).
   The exported st2-chev.svg carries only the white one; the export is used
   as-is rather than hand-authoring the second path. */
.afxs-gcard__chev { position: relative; width: 16px; height: 19px; flex: none; }
.afxs-gcard__chev img {
  position: absolute; left: .5px; top: -.5px;
  display: block; width: 20px; height: 20px;
}