/* ============================================================================
   Stories band 4 — TRADER SPOTLIGHT.
   Figma 705:504262 "Frame 2147259239" (1512 x 1088), child of the desktop
   frame 705:463416 at y = 3067. Markup: fragments/st2-spot.html.

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

   This is a LIGHT band on a dark page — the second one in the project after
   atlas-stories.css, whose conventions it follows:

   - `isolation: isolate` on the section. Without it, anything blending from
     the band above composites onto a near-white surface and greys it out.

   - Every gradient below was RE-DERIVED from the raw gradientHandlePositions
     against the real box aspect ratio (angle, then both stop positions
     projected onto the CSS gradient line). The angle read straight off the
     handle vector is a different number on every box, so none of these can be
     copied between elements.

   - Where a node carries two stacked paints, Figma paints the array in order
     and the LAST one is on top. 705:524599 and the band-5 numbers each stack
     two fully opaque ramps; only the upper one renders and only that one is
     reproduced.

   - The frame's own auto-layout padding (120/40/60/40) IS padding. Every
     other offset in the band is a gap or an absolute top; padding on a
     wrapper inflates the box and drags the whole column down.

   - Fixed Figma widths are `width`. 912 / 558 / 509 / 461 / 616 / 794 all
     collapse to their content under `max-width`.

   705:524804 is visible:false in the file and is not built.

   HEIGHT: 120 + 289 + 50 + 290 + 50 + 111 + 50 + 68 + 60 = 1088, exactly the
   drawn frame height. Nothing here sets an explicit height; if the band does
   not measure 1088 in Chrome, a line has wrapped that should not have.
   ========================================================================= */

/* 705:504262 — 1512x1088, column, padding 120/40/60/40, gap 50, align CENTER.
   Fill: linear gradient, handles p0(0.5, 0) -> p1(0.5089, 0.7860) on a
   1512x1088 box => 179.1deg with #EBEDF2 at 1.07% and #FFFFFF at 78.0%.
   DECLARED DEVIATION — written as 180deg, not 179.1deg. The 0.9 degrees is a
   13.5px lateral drift over 1088px of height on a near-white-to-white ramp,
   i.e. invisible, and holding the literal angle on a background that has to
   stretch past 1512 would make that drift grow with the viewport. The stop
   percentages are the derived ones and are unchanged. */
.afxs-spot {
  position: relative; isolation: isolate; overflow: hidden;
  box-sizing: border-box;
  padding: 120px var(--gutter) 60px;
  background: linear-gradient(180deg, #EBEDF2 1.07%, #FFFFFF 78%);
  color: #0D0D0D;
  font-family: var(--font-sans);
}

/* 705:504263 "image 1174" — 1515x850 at band y 223, x 0. Two paints: the
   photograph (STRETCH) and, over it, a white bottom fade whose handles
   (0.5003, 0.7593) -> (0.5003, 1.0) resolve to a straight 180deg with the
   transparent stop at 75.93%. The crop is baked into the export, so the image
   places as a plain `cover`.
   FULL-BLEED: this is a band background, not placed art. Pinned at a fixed
   1512 it leaves a bare strip of flat band colour down the right on wider
   viewports. */
.afxs-spot__bg {
  position: absolute; top: 223px; left: 0; right: 0;
  width: auto; min-width: 1512px; height: 850px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 75.93%, #FFFFFF 100%),
    url('/assets/figma/st2-spot-bg.webp') no-repeat center center / cover;
  pointer-events: none; z-index: 0;
}

/* 705:504264 "dots" — 1642x1370 at band (-130, -21), node opacity .8, drawn
   rotated 180deg. The export is the full 3284x2740 layer (2x), so no offset
   is baked in and the node opacity is NOT baked in either — both are carried
   here.
   FULL-BLEED, same reasoning as the photograph above and the same treatment
   atlas-stories.css gives the identical layer on the home band.
   DECLARED DEVIATION x2 — (a) `cover` centres the field, which at 1512 puts
   its left edge at -65 rather than the drawn -130; the layer is a uniform
   field of 1.7x2.1 ellipses, so a 65px shift in it is not observable, whereas
   a hard 1642 box is. (b) the drawn 180deg rotation is not re-applied: a half
   turn of a uniform dot field is the same field, and the Figma export is
   already in rendered orientation. */
.afxs-spot__dots {
  position: absolute; top: -21px; left: 0; right: 0;
  width: auto; min-width: 1512px; height: 1370px;
  background: url('/assets/figma/st2-dots-spot.webp') no-repeat center top / cover;
  opacity: .8;
  pointer-events: none; z-index: 0;
}

/* the 1432 content column the 40px frame padding leaves */
.afxs-spot__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:524585 — 912x289, column, gap 16, align CENTER ---------------- */
.afxs-spot__head {
  width: 912px; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}

/* 705:524586 — 153x33, row, gap 7, padding 6/14, radius 57. The frame 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. */
.afxs-spot__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;
}
.afxs-spot__eyebrow img { display: block; width: 16px; height: 16px; flex: none; }

/* 705:524598 — 912x240, column, gap 0, align CENTER. SF Pro 510 / 80 / 80px /
   ls -2.4px on both lines. */
.afxs-spot__title {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  width: 912px; max-width: 100%;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
}
/* 705:524599 — 912x80. 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 p0(0.6889, 0) -> p1(0.9315, 0.9343)
   on the real 912x80 box give 108.7deg with the black stop running to 66.9%
   and #CECECE landing at 93.16%: "João went from" is solid ink and only the
   price fades.
   The box is the drawn 912 and the ink measures 605, so background-clip:text
   has box to spare on either side even on the Inter fallback — a fit-content
   box here would move the fade. */
.afxs-spot__title1 {
  display: block; width: 912px; max-width: 100%; white-space: nowrap;
  background: linear-gradient(108.7deg, #0D0D0D 66.9%, #CECECE 93.16%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* The "$5" in 705:524599 ships as a plain literal inside .afxs-spot__title1,
   so it picks up the clipped gradient with the rest of the line and needs no
   rule of its own. The former .afxs-spot__price hook was removed with the
   markup it styled — no script ever wrote to it. */

/* 705:524600 — 558x160, flat #0D0D0D, two lines of 80.
   DECLARED DEVIATION — the break after "payouts" is forced with <br> rather
   than left to the 558px box. The drawn box is an SF Pro measurement: the
   first line renders at 518.4 of 558 in SF Pro, which the ~7% wider Inter
   fallback would push past 558 and reflow into three lines. The forced break
   is the file's own break on every platform. */
.afxs-spot__title2 { display: block; width: 558px; max-width: 100%; color: #0D0D0D; }

/* ---- 705:524601 — the quote card, 509x290 ------------------------------ */
/* column, gap 32, padding 24 all round, radius 32, fill #FBFBFB,
   DROP_SHADOW 13px 35px 41.1px 0 rgba(0,31,24,.07). 24 + 60 + 32 + 48 + 32 +
   70 + 24 = 290. */
.afxs-spot__card {
  box-sizing: border-box; margin: 0;
  width: 509px; max-width: 100%;
  display: flex; flex-direction: column; gap: 32px;
  padding: 24px; border-radius: var(--r-32);
  background: #FBFBFB;
  box-shadow: 13px 35px 41.1px 0 rgba(0,31,24,.07);
}

/* 705:524602 — 461x60, row, gap 12, align CENTER */
.afxs-spot__id { display: flex; flex-direction: row; align-items: center; gap: 12px; }

/* 705:524603 — 60x60, fill #E6EBEA, radius 14.1176, clipsContent.
   705:524604 is a 62x52.7 image inset at card-relative (-2.8, 2.8); the
   export is 124x106, i.e. 2x, so it places at half size. */
.afxs-spot__av {
  position: relative; flex: none; overflow: hidden;
  width: 60px; height: 60px; border-radius: 14.1176px; background: #E6EBEA;
}
.afxs-spot__av img {
  display: block; position: absolute; left: -2.8px; top: 2.8px;
  width: 62px; height: 52.7px;
}

/* 705:524605 — 389x55, column, gap 6 */
.afxs-spot__idcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* 705:524607 — Saans 500 / 20 / 20px, ls 0. Saans ships only under a trial
   licence, so --font-alt maps onto the primary stack until it is bought. */
.afxs-spot__name {
  font-family: var(--font-alt); font-weight: var(--w-medium);
  font-size: 20px; line-height: 20px; letter-spacing: 0; color: #0D0D0D;
}

/* 705:524608 — 216x29, row, gap 8 */
.afxs-spot__chips { display: flex; flex-direction: row; gap: 8px; }

/* 705:524609 (143x29) and 705:524612 (65x29) — row, gap 7, padding 4/8,
   radius 57. The fill is a three-stop ramp at PAINT opacity .09, which is why
   the chips read as a whisper and not as a teal pill: #053F3B -> 79% #053F3B
   -> #FFFFFF, each multiplied by .09. Handles p0(-0.0603, 0.7121) ->
   p1(1.0814, 0.3788) resolve to 86.6deg on the 143 box and 82.6deg on the 65
   box — the same handles, two different angles, so they cannot share a rule.
   BACKGROUND_BLUR 16.7 -> Figma's radius is ~2x the CSS value. Neither chip
   is blurred or blended itself, so the backdrop-filter is kept. */
.afxs-spot__chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 8px; border-radius: 57px;
  background: linear-gradient(86.6deg,
              rgba(5,63,59,.09) -5.61%,
              rgba(5,63,59,.0711) 62.12%,
              rgba(255,255,255,.09) 107.6%);
  -webkit-backdrop-filter: blur(8.35px); backdrop-filter: blur(8.35px);
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: #0D0D0D;
  white-space: nowrap;
}
.afxs-spot__chip--role {
  background: linear-gradient(82.6deg,
              rgba(5,63,59,.09) -4.11%,
              rgba(5,63,59,.0711) 61.54%,
              rgba(255,255,255,.09) 105.62%);
}
/* 705:524610 — the flag instance is 14x14 with radius 100, i.e. clipped round.
   The export is the square 16x16 flag, so the size and the clip are set here. */
.afxs-spot__chip img {
  display: block; flex: none; width: 14px; height: 14px;
  border-radius: 50%; object-fit: cover;
}

/* 705:524614 — 461x48, SF Pro 510 / 18 / 23.76px / ls -.54px, node opacity .8 */
.afxs-spot__quote {
  width: 461px; max-width: 100%; margin: 0;
  font-weight: var(--w-medium);
  font-size: 18px; line-height: 23.76px; letter-spacing: -.54px;
  color: #0D0D0D; opacity: .8;
}

/* 705:524615 — 461x70, row, SPACE_BETWEEN, align CENTER, gap 10,
   padding 12/16, radius 16, fill #FFFFFF */
.afxs-spot__verif {
  box-sizing: border-box;
  display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-16); background: #FFFFFF;
}
/* 705:524616 — 87x46, column, gap 8 */
.afxs-spot__vcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* 705:524617 — SF Pro 510 / 14 / 14px / ls -.42px, #000000 at node opacity .4 */
.afxs-spot__vlab {
  font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; letter-spacing: -.42px;
  color: var(--af-black); opacity: .4;
}
/* 705:524618 — 87x24, SF Pro 590 / 24 / 24px / ls -.72px. Single gradient
   paint, handles p0(0.5798, -0.1484) -> p1(0.9564, 1.0) on the 87x24 box =>
   130.1deg, #0D0D0D to 44.27% and #CECECE at 96.46%. fit-content keeps the
   background box on the ink; a wider box would slide the fade off the number. */
.afxs-spot__vval {
  width: fit-content;
  font-weight: var(--w-semi);
  font-size: 24px; line-height: 24px; letter-spacing: -.72px;
  background: linear-gradient(130.1deg, #0D0D0D 44.27%, #CECECE 96.46%);
  -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:524619 — 68x19, row, gap 8. DM Sans 600 / 16 / 16px / ls -.48px,
   #053F3B. The comp draws no certificate ID, so this is the plain /verify
   route. It is a real link, so it is tab-reachable; the focus ring is added
   because the file draws no focus state and shipping without one is not an
   option. */
.afxs-spot__verify {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: var(--w-semi);
  font-size: 16px; line-height: 16px; letter-spacing: -.48px;
  color: var(--af-deep); text-decoration: none; border-radius: 6px;
  transition: opacity var(--t-fast) var(--e-out);
}
.afxs-spot__verify:hover { opacity: .75; }
.afxs-spot__verify:focus-visible {
  outline: 2px solid var(--af-deep); outline-offset: 3px;
}
/* 705:524621 — a 16x19 box holding the 20x20 chevron instance 705:524622 at
   (0.5, -0.5). The instance draws TWO chevrons, at instance x 5 and x 11, the
   second at 40% — the export st2-chev.svg is only the first of the pair, so
   it is placed twice rather than an SVG being authored by hand. It exports
   with a white stroke and the file draws #053F3B, so it is used as a mask and
   painted here. */
.afxs-spot__chev { position: relative; flex: none; width: 16px; height: 19px; }
.afxs-spot__chev::before,
.afxs-spot__chev::after {
  content: ''; position: absolute; top: -.5px; width: 20px; height: 20px;
  background-color: var(--af-deep);
  -webkit-mask: url('/assets/figma/st2-chev.svg') no-repeat 0 0 / 20px 20px;
          mask: url('/assets/figma/st2-chev.svg') no-repeat 0 0 / 20px 20px;
}
.afxs-spot__chev::before { left: .5px; }
.afxs-spot__chev::after  { left: 6.5px; opacity: .4; }

/* ---- 705:524623 — the pull quote, 616x111 ------------------------------ */
/* SF Pro 400 / 28 / 36.96px / ls -.84px, centred, node opacity .8, three
   lines of 36.96.
   DECLARED DEVIATION — the drawn 616 box is an SF Pro measurement and the ink
   fills 613.24 of it, so there is under 3px of slack. On macOS -apple-system
   is genuine SF Pro and the three drawn lines hold exactly; on the Inter
   fallback the paragraph takes a fourth line and the band grows by 36.96px.
   The alternative is hard-coding two <br>s the file does not specify, which
   would be worse on the platform the design was measured on. */
.afxs-spot__pull {
  width: 616px; max-width: 100%; margin: 0; text-align: center;
  font-weight: var(--w-regular);
  font-size: 28px; line-height: 36.96px; letter-spacing: -.84px;
  color: #0D0D0D; opacity: .8;
}

/* ---- 705:524624 — the three-stat row, 794x68 --------------------------- */
/* row, gap 56, justify CENTER, align CENTER. The three items are 227.33 each
   (227.33 x 3 + 56 x 2 = 794), which is the row width shared out, so they are
   written as equal flex children rather than as three hard 227.33 boxes. */
.afxs-spot__stats {
  list-style: none; margin: 0; padding: 0;
  width: 794px; max-width: 100%;
  display: flex; flex-direction: row; justify-content: center;
  align-items: center; gap: 56px;
}
/* 705:524625 / 705:524644 / 705:524659 — row, gap 16, align CENTER */
.afxs-spot__stat {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: row; align-items: center; gap: 16px;
}

/* 705:524627 etc "Ellipse 14463" — 68x68. Fills #FFFFFF then, on top, a ramp
   whose handles (0.5534, 0) -> (0.5534, 1) are exactly vertical: 180deg,
   #FBFBFB at 31.57% and #E1F5F3 at 100%. Stroke 2px INSIDE rgba(38,63,66,.08)
   — border plus border-box, never outset. Two effects: an INNER_SHADOW
   3/-4/4.8 rgba(124,177,172,.14) and a DROP_SHADOW 9/24/18.9
   rgba(66,107,104,.1). */
.afxs-spot__badge {
  box-sizing: border-box; flex: none;
  width: 68px; height: 68px; border-radius: 50%;
  border: 2px solid rgba(38,63,66,.08);
  background: linear-gradient(180deg, #FBFBFB 31.57%, #E1F5F3 100%), #FFFFFF;
  box-shadow: inset 3px -4px 4.8px 0 rgba(124,177,172,.14),
                    9px 24px 18.9px 0 rgba(66,107,104,.1);
  display: flex; align-items: center; justify-content: center;
}

/* The 28x28 glyph frames 705:524628 / 705:524647 / 705:524662. Every vector
   in all three is painted #FFFFFF with a vertical #E1FFA0 -> #263F42 ramp on
   top, the base shape at node opacity .4.
   DECLARED DEVIATION x2:
   (a) THE THREE GLYPHS ARE NOT IN THIS BAND'S EXPORT SET. The brief ships
       st2-ic-spot.svg and st2-chev.svg only. Rather than author an SVG by
       hand, each glyph is served from an existing export whose path geometry
       was verified to be bit-identical to the drawn vectors after normalising
       for viewBox — calendar 705:524632 == art-cal-w.svg, banknote
       705:524651 == ft2-why-i2.svg, speed 705:524666 == st2-ic-speed.svg.
       Bounding boxes agree to within 0.001 of the viewBox on every path. If
       these three ever get their own export, only the three mask URLs below
       change.
   (b) those exports carry their own source band's colours, so they are used
       as MASKS and repainted here. The mask preserves each path's alpha, so
       the .4 on the base shape survives. The ramp is applied once across the
       28x28 box rather than per path as Figma draws it — at 28px the
       difference is confined to the two 1.8x7.6 ticks on the banknote. */
.afxs-spot__ic {
  display: block; width: 28px; height: 28px;
  background: linear-gradient(180deg, #E1FFA0 0%, #263F42 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 28px 28px; mask-size: 28px 28px;
}
.afxs-spot__ic--cal {
  -webkit-mask-image: url('/assets/figma/art-cal-w.svg');
          mask-image: url('/assets/figma/art-cal-w.svg');
}
.afxs-spot__ic--note {
  -webkit-mask-image: url('/assets/figma/ft2-why-i2.svg');
          mask-image: url('/assets/figma/ft2-why-i2.svg');
}
.afxs-spot__ic--speed {
  -webkit-mask-image: url('/assets/figma/st2-ic-speed.svg');
          mask-image: url('/assets/figma/st2-ic-speed.svg');
}

/* 705:524641 etc — column, gap 0, justify CENTER, align MIN, 63 tall */
.afxs-spot__scol {
  display: flex; flex-direction: column; justify-content: center; min-width: 0;
}
/* SF Pro 590 / 32 / 42.24px / ls -.96px */
.afxs-spot__snum {
  font-weight: var(--w-semi);
  font-size: 32px; line-height: 42.24px; letter-spacing: -.96px; color: #0D0D0D;
}
/* SF Pro 400 / 16 / 21.12px / ls -.48px, node opacity .6. The widest label is
   134 in a 143 slot, so it does not wrap in SF Pro; nowrap holds it on one
   line on the wider fallback too. */
.afxs-spot__slab {
  white-space: nowrap;
  font-weight: var(--w-regular);
  font-size: 16px; line-height: 21.12px; letter-spacing: -.48px;
  color: #0D0D0D; opacity: .6;
}

/* ============================================================================
   Narrow viewports. The file draws no desktop-narrow state for this band, so
   these only keep the fixed widths from overflowing; nothing is re-designed.
   ========================================================================= */
@media (max-width: 1000px) {
  .afxs-spot { padding: 96px var(--gutter) 56px; }
  .afxs-spot__title { font-size: 64px; line-height: 64px; letter-spacing: -1.92px; }
  .afxs-spot__title1, .afxs-spot__title2 { width: 100%; }
  .afxs-spot__title1 { white-space: normal; }
  .afxs-spot__pull { font-size: 24px; line-height: 31.68px; letter-spacing: -.72px; }
  .afxs-spot__stats { width: 100%; gap: 32px; }
}
@media (max-width: 720px) {
  .afxs-spot { padding: 72px var(--gutter) 48px; }
  .afxs-spot__inner { gap: 40px; }
  .afxs-spot__title { font-size: 44px; line-height: 46px; letter-spacing: -1.32px; }
  .afxs-spot__title2 br { display: none; }
  .afxs-spot__pull { font-size: 20px; line-height: 26.4px; letter-spacing: -.6px; }
  .afxs-spot__stats { flex-direction: column; align-items: flex-start; gap: 24px; }
  .afxs-spot__stat { flex: none; width: 100%; }
  .afxs-spot__chips { flex-wrap: wrap; }
}