/* ============================================================================
   Home - the trust band, directly above the pricing table.
   Figma 3216:78916 (redesigned Sep 2026).

   REPLACES the seamless grid that used to live here. That build's whole idea
   was that the grid had no outside: transparent cells, hairline seams fading
   out before they reached any edge. The file has moved to the opposite
   treatment - two solid, explicitly-bounded objects - so the seam rule and its
   fading hairlines are gone rather than half-kept.

   What is deliberately NOT here is unchanged: no payout total and no processing
   time. Atlas's real figures there are $466,720 and a 72-hour median, which
   would read small next to the competitors' $26M / 1-4 hours. The headline
   slots carry reach instead - all queried, none rounded up.

   Generated by tools/build_trustband.py, which carries the provenance of every
   figure. Never hand-edit the numbers.
   ========================================================================= */

/* --- THE PLATE, and why it is not on .afxp ------------------------------
   In the file the trust band and the pricing table are NOT two sections. They
   are siblings inside one Section, 3065:188055, 1512 x 3570:

     3216:78916   Container    y0     1512 x 477    <- this band
     3065:188078  Social proof y477   1512 x 81     "AS SEEN ON"
     3065:188133  Container    y558   1512 x 1542   <- the pricing table

   The #303030 -> #0F0F0F ramp is THAT SECTION'S FILL. Its origin is this
   band's top edge and it runs 43.9% of 3570 = 1567px, straight through the
   social-proof row and down into the pricing table.

   IT WAS SHIPPED ON .afxp INSTEAD, which lost both the origin and the scale:
   0.439 was applied to .afxp's own 1527 box (670px) rather than the Section's
   3570 (1567px), and the ramp restarted at the pricing table's top edge. The
   band was left transparent over body black, so there was a 48-level step from
   #000000 to #303030 across one pixel row at the boundary - the visible line
   Lucas reported on 3 Sep 2026.

   Checked before changing anything: rendering 3065:188078 shows the plate at
   ~#262626 where the corrected ramp predicts 48 - (477/1567)*33 = 38 = #262626.
   The shipped build painted #303030 there.

   ONE ELEMENT, ONE PAINT, so a seam is impossible by construction. Slicing the
   gradient across the two sections with a negative background-position also
   works at 1512, but the offset is this band's height and that changes at every
   breakpoint. The ramp is anchored in PX, not %, for the same reason: the
   plate's height depends on the pricing table's content.

   Scoped as a CHILD selector so /access, /forex and every other page carrying
   .afxp without this band keep their own background untouched. This file only
   loads on the six home pages. */
.afx-plate {
  background: linear-gradient(180deg, #303030 0px, #0F0F0F 1567px) no-repeat, #0F0F0F;
}
.afx-plate > .afxp { background: none; }

.afxtb {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 32px;
  padding: 80px 40px;
}
.afxtb__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 40%, rgba(124,177,172,.10) 0%, rgba(124,177,172,0) 70%);
}

/* --- the stats pill, 3216:122510 ---------------------------------------- */
/* THE HIGHLIGHT RUNS DOWN THE PILL, NOT ACROSS IT. This shipped as
   `90deg, #151515 0%, #2F2F2F 25%, #151515 100%` - horizontal, with the light
   band smeared over the whole width. The node is 184.25deg (essentially top to
   bottom) and holds the light between 15.185% and 35.008%. Getting the axis
   wrong is most of why the pill read flat rather than lit.
   align-items is flex-start per the node; the dividers carry their own
   self-stretch, so they still span the row. */
.afxtb__stats {
  position: relative; z-index: 0;
  display: flex; align-items: flex-start; gap: 32px;
  max-width: 1432px; margin: 0 auto; width: 100%;
  padding: 32px; box-sizing: border-box; border-radius: 32px;
  background: linear-gradient(184.25deg, #151515 15.185%, #2F2F2F 35.008%, #151515 94.363%);
}
/* Three 2px INSIDE strokes in the file: two white/grey ramps at 13% and a lime
   one at 16%. border-color cannot take a gradient, so they are composited into
   one masked pseudo-element rather than flattened to a solid hairline - the
   lime edge is most of what makes this read as a lit object. */
.afxtb__stats::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 2px; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(225,255,160,.16) 0%, rgba(225,255,160,.013) 42%, rgba(225,255,160,.16) 100%),
    linear-gradient(90deg, rgba(255,255,255,.26) 0%, rgba(202,202,202,0) 51%, rgba(153,153,153,.26) 100%);
  -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;
}
/* The file lays this out as SEVEN flex items - four 294x85 cards and three
   zero-width divider vectors - all sharing the same 32px gap. Reproducing that
   literally puts the rules where Figma draws them (x 398 / 756 / 1114); a
   four-column grid with rules positioned into the gaps lands them ~8px off. */
.afxtb__stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.afxtb__rule { flex: none; align-self: stretch; width: 1px; background: rgba(255,255,255,.12); }
.afxtb__lbl {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-regular);
  font-size: 14px; line-height: 21px; letter-spacing: -.28px; color: #FFFFFF;
}
.afxtb__fig {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 56px; line-height: 56px; letter-spacing: -1.68px;
  /* THE FIGURES WERE HALF TEAL. Shipped as `90deg, #E1FFA0 0%, #7CB1AC 100%`,
     which ramps across every glyph. The node holds lime until 57.047% and only
     reaches #7CB1AC at 102.63% - past the end of the box - so the teal is
     barely arrived at. */
  background: linear-gradient(133.31deg, #E1FFA0 57.047%, #7CB1AC 102.63%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* ink guard: background-clip:text leaves descenders unpainted and slices
     them flat. "24/7" has one. */
  padding-bottom: .1em; margin-bottom: -.1em;
}

/* --- the two feature cards, 3216:78917 ---------------------------------- */
.afxtb__cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
  max-width: 1432px; margin: 0 auto; width: 100%;
}
.afxtb__card {
  display: flex; align-items: center; gap: 64px;
  min-height: 136px; padding: 24px 32px; box-sizing: border-box;
  background: #222222;
  /* rectangleCornerRadii [32, 999, 999, 32] - squared on the left, pill on the
     right. Not a uniform radius. */
  border-radius: 32px 999px 999px 32px;
}
.afxtb__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.afxtb__h3 {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 24px; line-height: 36px; letter-spacing: -.48px; color: #FFFFFF;
}
/* white at NODE opacity .8 in the file, not a dimmer fill */
.afxtb__copy {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; letter-spacing: -.32px; color: rgba(255,255,255,.8);
}
/* Two separate things in the node and only one of them shipped: a 2px border
   at rgba(38,63,66,.08) AND an inner shadow `inset 3px -4px 4.8px
   rgba(124,177,172,.14)`. The border was being faked with box-shadow, which
   left no room for the real shadow, so the disc had no interior modelling. */
.afxtb__disc {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; flex: none; border-radius: 58px;
  box-sizing: border-box; border: 2px solid rgba(38,63,66,.08);
  background: #E1FFA0; color: #263F42;
  box-shadow: inset 3px -4px 4.8px 0 rgba(124,177,172,.14);
}
.afxtb__svg { width: 44px; height: 44px; display: block; }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  .afxtb__fig { font-size: 44px; line-height: 44px; letter-spacing: -1.32px; }
  .afxtb__card { gap: 24px; }
}
@media (max-width: 900px) {
  .afxtb { padding: 56px 24px; gap: 24px; }
  .afxtb__stats { flex-wrap: wrap; gap: 28px 32px; }
  .afxtb__stat { flex: 1 1 calc(50% - 16px); }
  /* the vertical rules only make sense against a single unwrapped row */
  .afxtb__rule { display: none; }
  .afxtb__cards { grid-template-columns: 1fr; gap: 16px; }
  .afxtb__card { border-radius: 24px; gap: 20px; padding: 20px 24px; }
  .afxtb__fig { font-size: 40px; line-height: 40px; letter-spacing: -1.2px; }
}
@media (max-width: 560px) {
  .afxtb__stats { padding: 24px; }
  .afxtb__fig { font-size: 32px; line-height: 34px; letter-spacing: -.96px; }
  .afxtb__h3 { font-size: 20px; line-height: 28px; }
  .afxtb__disc { width: 56px; height: 56px; }
  .afxtb__svg { width: 34px; height: 34px; }
}