/* ============================================================================
   Home band — trader stories.  Figma 705:37104 (1512 x 1935), file
   rijNBFC24rPaqbSoj29uvJ. Markup: fragments/stories.html.

   This is the one LIGHT band on the page: the frame paints a near-white
   vertical ramp and every text node is #0D0D0D, not white. Do not inherit the
   dark-shell assumptions from atlas-hero.css / atlas-markets.css here.

   Five things this band lives or dies by:

   - Every gradient below was RE-DERIVED from the raw gradientHandlePositions
     against the real box aspect ratio, then checked against the Figma export.
     fx.py's own angles are read straight off the handle vector and ignore the
     box, which on the 1432x68 promo bar is ~70 degrees wrong.

   - Figma y offsets are gaps or absolute positions, never padding. The 24px
     card padding IS padding; the 80 / 32 / 60 / 50 numbers are gaps.

   - Fixed Figma widths are `width`. 390 / 645 / 1432 / 342 all collapse to
     their content under `max-width`.

   - The carousels are real horizontal scrollers with scroll-snap. Nothing
     animates `left` or `margin`; the arrows call scrollBy(). The design draws
     the LEFT arrow at 40% opacity in both rails, which is the disabled state
     at scrollLeft 0 -- so that is what 40% means here, not a decoration.

   - No element in this band carries both `backdrop-filter` and
     `mix-blend-mode`. Chrome composites that pair as an opaque frosted plate.
     The two OVERLAY gradient strokes on the country chips are visible:false in
     the file and are correctly absent.

   The promo bar's discount is written from LAB.OFF (assets/pricing-table.js)
   at runtime by atlas-stories.js; the comp draws "40% OFF / Code: WC40", both
   of which are stale. The live code is WC50. Neither is ever a literal here.
   ========================================================================= */

/* 705:37104 — 1512x1935, column, padding 120/40/100/40, gap 50, align CENTER.
   Fill: linear gradient, handles (0.5,0)->(0.5089,0.7860) on a 1512x1935 box
   => 180.5deg, #EBEDF2 at 0.34% and #FFFFFF at 78.5% of the CSS gradient line.
   `isolation` keeps the band off anything blending from the section above. */
.afxt {
  position: relative; isolation: isolate; overflow: hidden;
  box-sizing: border-box;
  padding: 120px var(--gutter) 100px;
  background: linear-gradient(180.5deg, #EBEDF2 0.34%, #FFFFFF 78.5%);
  color: #0D0D0D;
}

/* 705:37105 "dots" — 1642x1370 at x -130 y -21, rotated 180deg, node opacity
   .8, 2538 ellipses of 1.7x2.1. Shipped as the Figma export of the layer,
   cropped to the frame's own visible bounds (1512x1349 from the top-left) so
   the offsets are baked in. The node opacity is already in the export. */
/* FULL-BLEED FIX: the design is drawn on a 1512 canvas, but this layer is a
   band background, not placed art. Pinned at 1512 it stopped short on wider
   viewports and left a bare strip of flat band colour down the right.
   Spans the viewport now; cover keeps the artwork's aspect. */
.afxt__dots {
  position: absolute; top: 0; left: 0; right: 0; margin-left: 0;
  width: auto; min-width: 1512px; height: 1349px;
  background: url('/assets/figma/st-dots.webp') no-repeat center top / cover;
  pointer-events: none; z-index: 0;
}

.afxt__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--page); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 50px;
}

/* ---- 705:57426 — header, 645x283, column, gap 32, align CENTER ---------- */
.afxt__head {
  width: 645px; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  text-align: center;
}
/* 705:57427 — column, gap 16 */
.afxt__headtop { display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* 705:57428 — 140x33, row, gap 7, padding 6/14, radius 57. It has NO fill and
   NO stroke in the file: the radius is left over from a pill that was cleared,
   so drawing a chip here would be inventing one. */
.afxt__eyebrow {
  margin: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 57px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: #0D0D0D;
}
.afxt__eyebrow img { display: block; width: 16px; height: 16px; flex: none; }

/* 705:57440 — 645x160, column, gap 0. Two TEXT nodes, 80/80px, ls -3%. */
.afxt__title {
  margin: 0; display: flex; flex-direction: column;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
}
/* 705:57441 — TWO stacked gradient paints. The upper one is fully opaque and
   covers the box, so the lower (#3F4547 -> #CECECE) never renders and is not
   reproduced. Upper handles (0.6889,0)->(0.9315,0.9343) on 645x80 give
   115.5deg with the black stop running to 65% and #CECECE landing at 93.2%:
   "These pay" is solid ink and "outs" is what fades. */
.afxt__title1 {
  background: linear-gradient(115.5deg, #0D0D0D 65.04%, #CECECE 93.17%);
  -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:57442 — 600 wide, solid #0D0D0D */
.afxt__title2 { color: #0D0D0D; }

/* 705:57443 — 614x42, 16/21.12 (132%), ls -3%, node opacity .8.
   The comp punctuates this with an em dash; house style replaces it with a
   full stop and keeps the wording. */
.afxt__sub {
  width: 614px; max-width: 100%; margin: 0;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 21.12px; letter-spacing: -.48px;
  color: #0D0D0D; opacity: .8;
}

/* ---- 705:57444 — body, 1432 wide, column, gap 60 ------------------------ */
.afxt__body {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 60px;
}

/* ============================================================================
   Carousels.  705:57445 (1432x537) and 705:57565 (1432x657) are both a
   column with gap 32: [clipped 1432-wide row of 390 cards] then [111x49 nav].
   ========================================================================= */
.afxt__rail { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.afxt__viewport { position: relative; width: 100%; }

/* 705:57446 / 705:57567 — row, gap 16, clipsContent. Four 390 cards plus three
   16 gaps is 1608 in a 1432 viewport, so the fourth card is cut off exactly as
   drawn and the overflow is what the arrows drive. */
.afxt__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: row; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  /* the track is the keyboard target for the carousel */
  outline-offset: 4px;
}
.afxt__track::-webkit-scrollbar { display: none; }
.afxt__slide { flex: none; scroll-snap-align: start; }

/* 705:57541 (312x456, #F4F5F8) and 705:57596 (312x576, #FFFFFF). Both are
   270deg, i.e. the SOLID stop sits on the RIGHT edge and fades out leftward.
   Sits above the track and must not eat the scroll gesture. */
.afxt__fade {
  position: absolute; top: 0; right: 0; width: 312px; height: 100%;
  background: linear-gradient(270deg, #F4F5F8 0%, rgba(255,255,255,0) 100%);
  pointer-events: none; z-index: 2;
}
.afxt__fade--white { background: linear-gradient(270deg, #FFFFFF 0%, rgba(255,255,255,0) 100%); }

/* 705:57542 / 705:57597 — 111x49, row, gap 13.
   705:57543 carries node opacity .4 and 705:57545 does not: the design is
   drawing the start-of-rail state, so 40% is [disabled]. */
.afxt__nav { display: flex; flex-direction: row; align-items: center; gap: 13px; }
.afxt__arrow {
  box-sizing: border-box; -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 49px; height: 49px; padding: 12px 20px; margin: 0;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50px;
  background: rgba(38,63,66,.08); color: #0D0D0D; cursor: pointer;
  /* BACKGROUND_BLUR 27.8 -> Figma's radius is ~2x the CSS value */
  -webkit-backdrop-filter: blur(13.9px); backdrop-filter: blur(13.9px);
  transition: transform var(--t-instant) var(--e-out),
              background-color var(--t-fast) var(--e-out),
              opacity var(--t-fast) var(--e-out);
}
.afxt__arrow img { display: block; width: 10px; height: 15px; }
.afxt__arrow[disabled] { opacity: .4; cursor: default; }

/* ---- 705:57447 — Trustpilot card, 390x456, r32 -------------------------- */
/* Fill handles resolve to 181.08deg with #FBFBFB at 19.18% and #D4EBE9 at
   99.17%: the mint only arrives in the last fifth of the card. */
.afxt__trust {
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 390px; height: 456px; border-radius: var(--r-32);
  padding: 64px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: linear-gradient(181.08deg, #FBFBFB 19.18%, #D4EBE9 99.17%);
}
/* 705:57449 "Mask group" — 529x311.5 at card-relative x -70, y 169. The
   radial mask that fades the hex grid at its edges is baked into the export;
   re-creating it as a CSS mask would only re-derive it worse. */
.afxt__trustfaces {
  position: absolute; left: -70px; top: 169px; width: 529px; height: 311.5px;
  background: url('/assets/figma/st-tp-faces.webp') no-repeat 0 0 / 529px 311.5px;
  pointer-events: none; z-index: 0;
}
/* 705:57504 — 224x119, column, gap 32, align CENTER */
.afxt__trusttop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 32px; }
/* 705:57505 — 224x29, image fill, STRETCH. The source is 270x36, so the
   drawn box squashes it very slightly; the img box carries that. */
.afxt__trustlogo { display: block; width: 224px; height: 29px; }
/* 705:57506 — 140x58, column, gap 9 */
.afxt__trustrate { display: flex; flex-direction: column; align-items: center; gap: 9px; }
/* 705:57507 — 140x28: five 28x28 star slots, gap 0. The exported glyph is the
   star's tight bounds (24x23), so it is centred in its 28 slot. Fill #053F3B. */
.afxt__stars { display: flex; flex-direction: row; }
.afxt__stars img { display: block; width: 24px; height: 23px; margin: 2.5px 2px; }
/* 705:57513 — 14/21, #0D0D0D */
.afxt__trustscore {
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; color: #0D0D0D;
}

/* 705:57514 — 191x48, r28, #E1FFA0, 1.5px INSIDE gradient stroke, drop shadow
   0/11/12.2 rgba(0,0,0,.28), padding 14/20/14/24, gap 8.
   Ink is #0D0D0D-free: the file says #001D21, which is --af-ink-teal. NOTE the
   token named --af-lime-ink is #17301F in assets/atlas-tokens.css and is NOT
   the value this button uses -- the design's ink on lime here is #001D21.
   Either way it never inherits the link colour. */
.afxt__cta {
  position: relative; z-index: 1; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 191px; height: 48px; padding: 14px 20px 14px 24px;
  border-radius: var(--r-28); background: var(--af-lime);
  color: var(--af-ink-teal); text-decoration: none;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  box-shadow: 0 11px 12.2px rgba(0,0,0,.28);
  transition: transform var(--t-instant) var(--e-out), filter var(--t-fast) var(--e-out);
}
/* the 1.5px INSIDE gradient stroke, drawn with the padding-box/content-box
   mask-composite technique so no extra element is needed */
.afxt__cta::after,
.afxt__code::after {
  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);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
}
/* 705:57516 — a 16x20 slot holding a 20x21 chevron that overhangs it. Both are
   centred on the same point, so centring reproduces it. */
.afxt__ctachev { position: relative; display: block; width: 16px; height: 20px; flex: none; }
.afxt__ctachev img { position: absolute; left: 50%; top: 50%; width: 20px; height: 21px; margin: -10.5px 0 0 -10px; display: block; }

/* ---- 705:57518 — payout quote card, 390x456, column, gap 80, padding 24 -- */
.afxt__quote {
  box-sizing: border-box; overflow: hidden;
  width: 390px; height: 456px; border-radius: var(--r-32);
  padding: 24px; background: #FBFBFB;
  display: flex; flex-direction: column; align-items: flex-start; gap: 80px;
}
/* 705:57519 — 258x70, row, gap 16, align CENTER */
.afxt__qhead { display: flex; flex-direction: row; align-items: center; gap: 16px; }
/* 705:57520 — 70x70 ellipse, image fill scaleMode FILL (cover) */
.afxt__avatar { display: block; width: 70px; height: 70px; border-radius: 50%; object-fit: cover; flex: none; }
/* 705:57521 — column, gap 8 */
.afxt__qmeta { display: flex; flex-direction: column; gap: 8px; }
/* 705:57522 — row, gap 4. 705:57523 is 20/30 weight 700, ls -3%. */
.afxt__qname {
  margin: 0; display: flex; flex-direction: row; align-items: center; gap: 4px;
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 20px; line-height: 30px; letter-spacing: -.6px; color: #0D0D0D;
}
/* 705:57524 — 24x24 verified badge, #7CB1AC on the light cards */
.afxt__badge { display: block; width: 24px; height: 24px; flex: none; }

/* 705:57531 — row, gap 8. Chips 705:57532 / 705:57535: 32 tall, padding 4/8,
   gap 7, radius 57, and a gradient fill at paint opacity .09 -- REST reports
   the stops but not that opacity, which is the whole reason the chip reads as
   a pale tint and not as a dark green slab. Handles
   (-0.0603,0.7121)->(1.0814,0.3788) on a 71x32 box give 82.5deg with the stops
   landing at -4.1% / 61.5% / 105.5%. The OVERLAY gradient stroke on these
   nodes is visible:false and is deliberately not drawn. */
.afxt__chips { margin: 0; display: flex; flex-direction: row; gap: 8px; }
.afxt__chip {
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 4px 8px; border-radius: 57px;
  background: linear-gradient(82.5deg, rgba(5,63,59,.09) -4.1%, rgba(5,63,59,.071) 61.5%, rgba(255,255,255,.09) 105.5%);
  -webkit-backdrop-filter: blur(8.35px); backdrop-filter: blur(8.35px);
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px;
  color: #0D0D0D; white-space: nowrap;
}
.afxt__chip img { display: block; width: 16px; height: 16px; flex: none; }

/* 705:57537 — 342 wide, 20/26.4 (132%), weight 400, ls -3%, node opacity .8 */
.afxt__qtext {
  width: 342px; margin: 0;
  font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: 20px; line-height: 26.4px; letter-spacing: -.6px;
  color: #0D0D0D; opacity: .8;
}
/* 705:57538 — 32/38.4 (120%), weight 590, ls -3% */
.afxt__qamount {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 32px; line-height: 38.4px; letter-spacing: -.96px; color: #0D0D0D;
}

/* ---- 705:57568 — video story card, 390x576, r32, padding 24 ------------- */
/* Three stacked paints: #FBFBFB, then the photo, then a 180deg scrim from
   transparent to #223736 at 81.27%. Each photo is a STRETCH fill with its own
   imageTransform; the crop rect [tx, ty, tx+a, ty+d] is applied at export
   time, so the shipped WebP is already the visible rectangle and needs no
   background-position gymnastics. Verified against the Figma render of
   705:57568 at 3.0 mean abs error over the un-scrimmed top strip. */
.afxt__vid {
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 390px; height: 576px; border-radius: var(--r-32);
  padding: 24px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 32px;
  background:
    linear-gradient(180deg, rgba(34,55,54,0) 0%, #223736 81.27%),
    var(--afxt-shot) center / cover no-repeat,
    #FBFBFB;
}
/* 705:57590 — 80x80 group centred on the card (x 155, y 248 of 390x576).
   705:57591: rgba(255,255,255,.16), 1px inside rgba(255,255,255,.08),
   BACKGROUND_BLUR 34 -> blur(17px), shadow 0/8/12 rgba(0,0,0,.08).
   705:57592 is a 32x32 REGULAR_POLYGON in #E1FFA0; exported as its tight
   22x25 glyph and centred, which lands on the same point. */
.afxt__play {
  position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px;
  box-sizing: border-box; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(17px); backdrop-filter: blur(17px);
  box-shadow: 0 8px 12px rgba(0,0,0,.08);
  transition: transform var(--t-instant) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.afxt__play img { display: block; width: 22px; height: 25px; }

/* 705:57569 "Line 421" — 342 wide, node opacity .1 over a black stroke at
   alpha .8, so rgba(0,0,0,.08) flat. */
.afxt__vidrule { display: block; width: 342px; height: 1px; background: rgba(0,0,0,.08); flex: none; }

/* 705:57570 — 342x158, column, gap 24 */
.afxt__vidbody { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; width: 342px; }
/* 705:57571 — column, gap 12 */
.afxt__vidtop { display: flex; flex-direction: column; gap: 12px; }
/* 705:57573 — 20/30, weight 700, ls -3%, white */
.afxt__vidname {
  margin: 0; display: flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 20px; line-height: 30px; letter-spacing: -.6px; color: var(--af-white);
}
/* 705:57581 — 14/18.48 (132%), weight 510, ls -3%, node opacity .8 */
.afxt__vidtext {
  margin: 0; font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 14px; line-height: 18.48px; letter-spacing: -.42px;
  color: var(--af-white); opacity: .8;
}
/* 705:57582 — 342x38, row, align CENTER. The chips box is a fixed 233 with the
   amount hard against it at x 257; space-between reproduces that and survives
   the wider "$ 12,561" strings. */
.afxt__vidfoot { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
/* 705:57584 / 705:57587 — same chip geometry, white stops at paint opacity .09 */
.afxt__chips--dark .afxt__chip {
  background: linear-gradient(82.5deg, rgba(255,255,255,.09) -4.1%, rgba(255,255,255,.071) 61.5%, rgba(255,255,255,.09) 105.5%);
  color: var(--af-white);
}
/* 705:57589 — 32/38.4, weight 590, white */
.afxt__vidamount {
  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);
}

/* ============================================================================
   705:57547 — promo bar, 1432x68, r32, row, CENTER, padding 16/404, gap 37.
   Fill 0 is a solid #F0F5F5 that the opaque gradient above it hides entirely.
   Fill 1 handles resolve to 110.51deg with #0B4541 at 21.52%, #5D9794 at
   54.96% and #0B4541 at 93.24% -- a near-horizontal sweep, NOT the 172.8deg
   fx.py reports off the raw handle vector.
   ========================================================================= */
.afxt__promo {
  position: relative; box-sizing: border-box;
  width: 100%; height: 68px; border-radius: var(--r-32);
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 37px;
  padding: 16px 40px;
  background: linear-gradient(110.51deg, #0B4541 21.52%, #5D9794 54.96%, #0B4541 93.24%);
}
/* 1px INSIDE gradient stroke — the standard --af-hair hairline */
.afxt__promo::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--af-hair);
  -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;
}
/* 705:57548 — 390x24, row, gap 24 */
.afxt__promorow {
  margin: 0; display: flex; flex-direction: row; align-items: center; gap: 24px;
  font-family: var(--font-sans); font-weight: var(--w-semi);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px;
}
/* 705:57549 / 705:57552 — white at node opacity .9; 57549 is textCase UPPER */
.afxt__promokey { color: var(--af-white); opacity: .9; text-transform: uppercase; }
.afxt__promooff { color: var(--af-white); opacity: .9; white-space: nowrap; }
/* 705:57550 / 705:57553 — a 16x20 slot holding a 21x21 chevron that overhangs */
.afxt__promochev { position: relative; display: block; width: 16px; height: 20px; flex: none; }
.afxt__promochev img { position: absolute; left: 50%; top: 50%; width: 21px; height: 21px; margin: -10.5px 0 0 -10.5px; display: block; }
/* 705:57555 — #E1FFA0, underlined */
.afxt__promolink {
  color: var(--af-lime); text-decoration: underline; text-underline-offset: 2px;
  transition: opacity var(--t-fast) var(--e-out);
}

/* 705:57556 — 142x36, r28, #E1FFA0, 1.5px INSIDE gradient stroke, gap 8,
   padding 6/12. The copy glyph 705:57558 is the only evidence of behaviour in
   the whole frame, so the chip is a button. */
.afxt__code {
  position: relative; box-sizing: border-box; -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 6px 12px; margin: 0; border: 0;
  border-radius: var(--r-28); background: var(--af-lime); cursor: pointer;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px; color: var(--af-deep);
  transition: transform var(--t-instant) var(--e-out), filter var(--t-fast) var(--e-out);
}
.afxt__codelabel { white-space: nowrap; }
.afxt__code img { display: block; width: 16px; height: 16px; }
.afxt__code[data-copied] { filter: brightness(1.06); }

.afxt-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================================
   Motion. Transform and opacity only; every duration is a token.
   ========================================================================= */
.afxt__arrow:active:not([disabled]) { transform: scale(.94); }
.afxt__cta:active { transform: scale(.97); }
.afxt__code:active { transform: scale(.97); }
.afxt__play:active { transform: scale(.94); }

@media (hover: hover) and (pointer: fine) {
  .afxt__arrow:hover:not([disabled]) { background: rgba(38,63,66,.16); }
  .afxt__cta:hover { filter: brightness(1.04); }
  .afxt__code:hover { filter: brightness(1.04); }
  .afxt__promolink:hover { opacity: .8; }
  .afxt__play:hover { background: rgba(255,255,255,.24); transform: scale(1.04); }
}

/* Chrome follows the element's own border-radius for the outline, so the ring
   must not restate one -- doing so reshapes the pill buttons on focus. */
.afxt :focus-visible { outline: 2px solid var(--af-deep); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .afxt__track { scroll-behavior: auto; }
  .afxt__play:hover { transform: none; }
}

/* ============================================================================
   Below the 1512 frame. The design has no narrow artboard for this band, so
   the cards keep their drawn 390 and the rails simply scroll further; only the
   headline ramp and the promo bar are allowed to reflow.
   ========================================================================= */
@media (max-width: 1024px) {
  .afxt { padding: 80px var(--gutter) 72px; }
  .afxt__title { font-size: 56px; line-height: 58px; letter-spacing: -1.68px; }
  .afxt__promo { height: auto; flex-wrap: wrap; gap: 16px; padding: 16px 24px; }
  .afxt__fade { width: 120px; }
}
@media (max-width: 640px) {
  .afxt { padding: 64px 20px 56px; }
  .afxt__title { font-size: 40px; line-height: 42px; letter-spacing: -1.2px; }
  .afxt__promorow { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .afxt__fade { display: none; }
}

/* ============================================================================
   MOBILE — Figma 705:99658 "Frame 2147259239", 393 x 2086.
   Desktop rules above are untouched.

   DECLARED DEVIATION — the Trustpilot panel. At 393 the file lifts it out of
   the payout rail and stacks it above (705:120000 is a 345-wide column of
   [trust card] then [rail of three quote cards]). index.html is hand-kept and
   atlas-stories.js drives the rail by slide index, so rather than move the
   <li> the first slide is taken out of the track's flow and pinned above the
   viewport. Its containing block is .afxt__viewport, which is an ANCESTOR of
   the overflow box, so the track's clip does not apply to it.
   ========================================================================= */
@media (max-width: 767px) {
  .afxt { padding: 100px 24px; }

  /* 705:99659 — 1642 x 1370 at (-130,-21); placed art on mobile, not a
     full-bleed plate. */
  .afxt__dots {
    left: -130px; right: auto; top: -21px;
    width: 1642px; min-width: 0; height: 1370px;
    background: url('/assets/figma/st-dots.webp') no-repeat 0 0 / 100% 100%;
  }

  /* --- 705:119980 head, 345 x 237 --------------------------------------- */
  .afxt__inner { gap: 50px; }
  .afxt__head { width: 345px; gap: 24px; }
  .afxt__headtop { gap: 12px; }
  /* 705:119994 — two 42px lines, ls -1.26; pinned against the fallback font */
  .afxt__title { width: 345px; font-size: 42px; line-height: 42px; letter-spacing: -1.26px; }
  .afxt__title1, .afxt__title2 { white-space: nowrap; }
  /* 705:119997 — 345 wide, four 21px lines */
  .afxt__sub { width: 345px; line-height: 21px; }

  /* --- 705:119998 body, gap 60 ------------------------------------------ */
  .afxt__body { gap: 60px; }
  /* 705:119999 / 705:120136 — column gap 24 to the nav, not 32 */
  .afxt__rail { gap: 24px; }

  /* 705:120000 — trust card 415 + gap 16 above the quote rail */
  .afxt__body > .afxt__rail:first-child .afxt__viewport { padding-top: 431px; }
  .afxt__body > .afxt__rail:first-child .afxt__slide:first-child {
    position: absolute; left: 0; top: 0; width: 345px;
  }

  /* 705:120001 — 345 x 415, radius 32, padding 48 0, gap 36 */
  .afxt__trust { width: 345px; height: 415px; padding: 48px 0; gap: 36px; }
  /* 705:120003 "Mask group" — 483 x 284.4 at (-69,161) */
  .afxt__trustfaces { left: -69px; top: 161px; width: 483px; height: 284.4px; background-size: 483px 284.4px; }
  /* 705:120068 — 191 x 48, padding 14/20/14/24, radius 28 */
  .afxt__cta { width: 191px; height: 48px; padding: 14px 20px 14px 24px; }

  /* 705:120073 — quote card 290 wide, padding 20, gap 24 (not 80) */
  .afxt__quote { width: 290px; height: auto; padding: 20px; gap: 24px; }
  /* I705:120073;705:57523 — 18/27/700 on mobile */
  .afxt__qname { font-size: 18px; line-height: 27px; letter-spacing: -.54px; }
  /* I705:120073;705:57537 — 250 wide, five 21px lines */
  .afxt__qtext { width: 250px; font-size: 16px; line-height: 21px; }
  /* I705:120073;705:57538 — 24/28.8 -> 29 line box, ls -0.72 */
  .afxt__qamount { font-size: 24px; line-height: 29px; letter-spacing: -.72px; }

  /* 705:120112 / 705:120238 — the right-edge fade is 71 wide on mobile */
  .afxt__fade { width: 71px; }

  /* --- 705:120118 promo, 345 x 90: radius 16, padding 12/20, column gap 12 */
  .afxt__promo {
    height: 90px; border-radius: var(--r-16); padding: 12px 20px;
    flex-direction: column; flex-wrap: nowrap; gap: 12px;
    background: linear-gradient(172.8deg, #0B4541 0%, #5D9794 46.63%, #0B4541 100%);
  }
  /* 705:120119 — 305 x 21, SPACE_BETWEEN, 14/21 */
  .afxt__promorow {
    width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 24px;
    font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  }
  /* min-width:0 or the flex items refuse to shrink below their longest word
     and the row breaks out of the 305 column on a wider fallback font. */
  .afxt__promorow > * { min-width: 0; }
  .afxt__promokey, .afxt__promooff, .afxt__promolink { white-space: nowrap; }
  /* 705:120127 — 130 x 33, padding 6/12, 14/21 */
  .afxt__code { height: 33px; padding: 6px 12px; font-size: 14px; line-height: 21px; letter-spacing: -.42px; }

  /* --- 705:120138 video card, 290 x 520, padding 20, gap 32 -------------- */
  .afxt__vid { width: 290px; height: 520px; padding: 20px; gap: 32px; }
  .afxt__vidrule { width: 250px; }
  /* 705:120140 — 250 x 188, gap 16; 705:120141 gap 4 */
  .afxt__vidbody { width: 250px; gap: 16px; }
  .afxt__vidtop { gap: 4px; }
  /* 705:120143 — 20/30/700 */
  .afxt__vidname { font-size: 20px; line-height: 30px; letter-spacing: -.6px; }
  /* 705:120151 — 14/18.48 -> 18 line box, ls -0.42, four lines */
  .afxt__vidtext { font-size: 14px; line-height: 18px; letter-spacing: -.42px; }
  /* 705:120152 — the foot stacks on mobile: chips 29, gap 8, amount 29 */
  .afxt__vidfoot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .afxt__vidamount { font-size: 24px; line-height: 29px; letter-spacing: -.72px; }
  /* 705:120160 — 64 x 64 at (106,220), NOT centred on the card */
  .afxt__play { left: 106px; top: 220px; margin: 0; width: 64px; height: 64px; }
  .afxt__play img { width: 17.6px; height: 20px; }
}

/* Tap targets — visual box as drawn, hit area grown with a pseudo-element. */
@media (max-width: 767px) {
  .afxt__promolink { position: relative; }
  .afxt__promolink::before { content: ''; position: absolute; left: -8px; right: -8px; top: -12px; bottom: -12px; }
  .afxt__code::before { content: ''; position: absolute; left: -6px; right: -6px; top: -6px; bottom: -6px; }
}

/* --- trader testimonial video: lightbox + unavailable notice --------------
   The play control used to be <a href="/stories">, so "play" navigated away.
   It is a <button> now and opens this dialog. Cards with no video get the
   notice instead - the control is never dead, it always answers. */
.afxt__vidamt {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 22px; line-height: 28px; letter-spacing: -.44px; color: #FFFFFF;
  white-space: nowrap;
}
.afxt__play { border: 0; padding: 0; cursor: pointer; }

.afxt-lb[hidden] { display: none; }
.afxt-lb {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(4,12,12,.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.afxt-lb__panel {
  position: relative; width: min(calc(88vh * 9 / 16), 460px, 100%); max-height: 88vh;
  /* the note variant has no video, so it must not inherit the portrait box */
  border-radius: 24px; overflow: hidden; background: #0B1211;
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
}
/* The clip is Reels format now - 540x960, 9:16 - so the panel is portrait and
   sized off the viewport height rather than its width. Capping the width stops
   it ballooning on a wide desktop.

   aspect-ratio is set explicitly rather than left to height:auto. Until the
   metadata arrives a video has no intrinsic size, so the panel collapsed to the
   height of its close button and snapped open a moment later. */
.afxt-lb__video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  max-height: 88vh; background: #000; object-fit: contain;
}
.afxt-lb__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.55); color: #FFFFFF; font-size: 22px; line-height: 1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.afxt-lb__close:focus-visible { outline: 2px solid #E1FFA0; outline-offset: 2px; }
/* the no-video answer, shown in the same dialog so one control, one behaviour */
.afxt-lb__note {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 56px 32px; text-align: center;
  font-family: var(--font-display); color: #FFFFFF;
}
.afxt-lb__note b { font-weight: var(--w-semi); font-size: 20px; line-height: 28px; letter-spacing: -.4px; }
.afxt-lb__note span { font-weight: var(--w-medium); font-size: 15px; line-height: 22px; color: rgba(255,255,255,.7); }
@media (prefers-reduced-motion: reduce) { .afxt-lb { backdrop-filter: none; } }

/* A card whose portrait has not landed yet must not render as a blank white
   tile. --afxt-shot is layered OVER this brand gradient, so a missing or
   still-uploading image degrades to a dark card that the scrim and text still
   read against. */
.afxt__vid {
  background-color: #0E1A19;
  background-image: var(--afxt-shot, none), linear-gradient(180deg, #17302E 0%, #0B1615 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* The foot is chips + payout on one row. Dan carries two flags and a style
   chip, which squeezed the figure until "$ 1,201.41" rendered as "$ 1,". The
   payout is the whole point of the card, so it never shrinks and never wraps;
   the chips give way instead. */
.afxt__vidfoot { flex-wrap: wrap; row-gap: 10px; }
.afxt__vidfoot .afxt__chips { flex: 1 1 auto; min-width: 0; }
.afxt__vidamt { flex: 0 0 auto; margin-left: auto; }