/* ============================================================================
   Community band 3 — "Weekly trading streams".
   Figma 774:101305 "Frame 2147259147" (1512 x 1063), fill #0D0E0E, clipped.
   Markup: fragments/comm-streams.html.

   The photograph is 979 tall drawn at y 243, so it runs 159px past the bottom
   of a 1063 band. The frame clips, and so does this section — that overflow is
   the design, not a mistake.

   Stack, in Figma paint order:
     774:101307 photo 1512x979 @ (0, 243), image + a #0F0F0F -> transparent ramp
     774:101308 ellipse 55x70 @ (1141, 552), #010707, blur 5
     774:101309 header 580x241 @ (40, 160)
     774:101323 lime CTA 271x56 @ (1201, 331)
     774:101324 the wordmark sitting on the left monitor, 81.2x24 @ (88, 499)
   ========================================================================= */

.afxs {
  position: relative; isolation: isolate; overflow: hidden;
  box-sizing: border-box; min-height: 1063px;
  background: #0D0E0E;
  font-family: var(--font-sans); color: var(--af-white);
}

/* 774:101307 — image 6a67d76e at scaleMode STRETCH with an imageTransform of
   [[1,0,0],[0,1.1505,-0.0982]]; the slice is baked into comm-streams-shot.webp
   so this is a straight 100%/100% place. The third fill is a top-down ramp
   from the band colour to nothing, which is what sits the headline off the
   photo. FULL-BLEED: band background, so it spans the viewport above 1512. */
.afxs__shot {
  position: absolute; left: 0; right: 0; top: 243px;
  width: auto; min-width: 1512px; height: 979px;
  background: url('/assets/figma/comm-streams-shot.webp') center top / cover no-repeat;
  pointer-events: none;
}
.afxs__shot::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #0F0F0F 0%, rgba(15,15,15,0) 100%);
}

/* the 1512 stage that POSITIONS art must stay centred, or everything drawn
   against the design canvas left-aligns on a wider viewport. */
.afxs__stage {
  position: absolute; left: 50%; margin-left: -756px; top: 0;
  width: 1512px; height: 1063px; pointer-events: none;
}
/* 774:101308 — #010707, LAYER_BLUR 5 -> blur(2.5px) */
.afxs__orb {
  position: absolute; left: 1141px; top: 552px; width: 55px; height: 70px;
  background: #010707; border-radius: 50%; filter: blur(2.5px);
}
/* 774:101326 — the wordmark composited onto the monitor in the photo */
.afxs__mark {
  position: absolute; left: 88px; top: 499px; width: 81.2px; height: 24px;
  background: url('/assets/figma/vector-6928-99854b.webp') center / contain no-repeat;
}

.afxs__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--shell); margin: 0 auto;
  padding: 160px var(--gutter) 0; box-sizing: border-box;
  display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 40px;
}

/* 774:101309 — 580x241, column, gap 16 */
.afxs__head { width: 580px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }

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

/* 774:101321 / 774:101322 — SF Pro 510 / 96 / 96px / ls -2.88px. Line one
   carries the #F8F8F8 -> #636363 ramp at 162.2deg; line two is flat #FFFFFF.
   Two nodes, so two boxes — one gradient across both would be wrong. */
.afxs__title { margin: 0; display: flex; flex-direction: column; }
.afxs__title span {
  display: block;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 96px; line-height: 96px; letter-spacing: -2.88px;
  color: var(--af-white);
}
.afxs__title .afxs__grad {
  /* re-derived on the 580x96 box */
  background: linear-gradient(117.3deg, #F8F8F8 48.49%, #636363 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;
}

/* 774:101323 — the drawn button is at y 331, i.e. 171 below the band's 160
   top padding. .afx-btn-lime already carries every other value. */
.afxs__cta { margin-top: 171px; flex: none; }

@media (max-width: 1511px) {
  .afxs__mark { display: none; }   /* pinned to a monitor that has moved */
}
@media (max-width: 1180px) {
  .afxs { min-height: 0; }
  .afxs__inner { flex-direction: column; padding-top: 120px; }
  .afxs__cta { margin-top: 8px; }
  .afxs__title span { font-size: 64px; line-height: 66px; letter-spacing: -1.92px; }
  .afxs__shot { position: relative; top: 0; margin-top: 48px; height: 620px; }
  .afxs__stage { display: none; }
}
@media (max-width: 720px) {
  /* 774:122100 — headline 40/42, the photo runs full width under it */
  .afxs__inner { padding: 100px var(--gutter) 0; }
  .afxs__title span { font-size: 40px; line-height: 42px; letter-spacing: -1.2px; }
  .afxs__cta { width: 100%; }
  .afxs__cta .afx-btn-lime { width: 100%; }
  .afxs__shot { height: 420px; }
}