/* ============================================================================
   About v2, band "timeline" — "From zero to 60,000 funded traders".
   Figma DESKTOP 705:385594 (1512 x 924) / MOBILE 705:395258 (393 x 959).
   Light band. Every number below is read out of the cached node JSON.
   Prefix .abtl- only. Deviations are listed in fragments/ab-timeline.html.

   HEIGHT PROOF (desktop): layoutMode VERTICAL, padding 120/40/120/40, gap 50.
     120 (pad) + 209 (705:385599) + 50 (gap) + 425 (705:385618) + 120 = 924.
   HEIGHT PROOF (mobile): padding 100/24/100/24, gap 50.
     100 + 284 (705:395259) + 50 + 425 (705:395281) + 100 = 959.
   ========================================================================= */

/* ---- band -----------------------------------------------------------------
   705:385594. Figma fill is a GRADIENT_LINEAR whose handles run
   (0.5, 0.0007) -> (0.4964, 0.9989) over a 1512x924 box; projected onto the
   CSS gradient line that is 180.7deg with stops at 0.91% and 99.10%.
   #EBEDF2 / #FFFFFF are not tokens in atlas-tokens.css, so the literal hex
   from the node JSON is used.
   DEVIATION 4: clipsContent is FALSE and the swoosh bleeds 249px left and
   250.5px right of the 1512 stage. `overflow-x: clip` kills the horizontal
   scrollbar; `overflow-y: visible` keeps the deliberate 441px bleed ABOVE the
   band. Per CSS Overflow 3 the pair stays as specified (Chrome 90+).      */
.abtl {
  position: relative;
  padding: 120px 0;
  background: linear-gradient(180.7deg, #EBEDF2 0.91%, #FFFFFF 99.10%);
  overflow-x: clip;
  overflow-y: visible;
}

/* ---- 705:385595 decorative swoosh -----------------------------------------
   2011.5 x 836.5 at band (-249, -441). Anchored to the centred 1512 stage:
   left:50% puts us at the viewport centre, margin-left -756 backs up to the
   stage origin, -249 more reaches the node. Exported SVG is 2013x838 (0.75px
   of stroke bleed per side); it is scaled back to the node box so the measured
   rect equals the declared data-fig exactly.                              */
.abtl-swoosh {
  position: absolute; z-index: 0;
  top: -441px; left: 50%; margin-left: -1005px;
  width: 2011.5px; height: 836.5px;
  pointer-events: none; user-select: none;
}

/* ---- 705:385598 "blur" ----------------------------------------------------
   1088 x 310 at band (-79, 71). RADIAL white 0% -> transparent 100%, node
   opacity 0.1.
   DEVIATION 5: the node also carries a 5px BACKGROUND_BLUR. It sits on a flat
   light gradient, so the blur is visually a no-op; backdrop-filter is dropped.
   left: -756 - 79 = -835.                                                 */
.abtl-blur {
  position: absolute; z-index: 0;
  top: 71px; left: 50%; margin-left: -835px;
  width: 1088px; height: 310px;
  background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, rgba(255,255,255,0) 100%);
  opacity: .1;
  pointer-events: none;
}

/* ---- the 1432 content stage ----------------------------------------------
   1512 - 40 - 40. Fixed width, centred, never max-width.                  */
.abtl-stage {
  position: relative; z-index: 1;
  width: 1432px; margin: 0 auto;
}

/* ---- 705:385599 heading row ----------------------------------------------
   layoutMode HORIZONTAL, itemSpacing 32, primaryAxisAlignItems SPACE_BETWEEN,
   counterAxisAlignItems MAX -> bottom aligned.                            */
.abtl-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; height: 209px;
}

/* 705:385600 + 705:385601 have the identical box (706 x 209), so they
   collapse into one element. */
/* WIDTH DEVIATION (text-clipping fix). Drawn 706, but Inter needs 732.1px for
   "From zero to 60,000" where SF Pro fits it in 706. At 706 the line wrapped
   and, being gradient-painted, the wrapped "60,000" fell outside the paint box
   and was invisible. 740 restores the drawn two-line headline. The row is
   space-between inside a 1432 stage (740 + 32 + 437 = 1209), so the lede on
   the right does not move. */
.abtl-head-l { width: 740px; }

/* ---- 705:385602 eyebrow ---------------------------------------------------
   fills [] and strokes [] in Figma: no pill background, only the radius.
   padding 6 14, itemSpacing 7, cornerRadius 57 -> 14+16+7+108+14 = 159 wide,
   6+21+6 = 33 tall.                                                       */
.abtl-eyebrow {
  display: flex; width: -moz-fit-content; width: fit-content;
  align-items: center; gap: 7px;
  margin: 0; padding: 6px 14px;
  border-radius: 57px;
}
.abtl-eyebrow-ico { display: block; flex: none; width: 16px; height: 16px; }
/* 705:385613. characterStyleOverrides: chars 0-9 solid #0D0D0D, chars 10-14
   (" here") the same #0D0D0D at 60%. */
.abtl-eyebrow-t {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);          /* Figma 510 */
  font-size: 14px; line-height: 21px; letter-spacing: -0.42px;
  color: #0D0D0D;
  white-space: nowrap;
}
.abtl-eyebrow-dim { color: rgba(13, 13, 13, .6); }

/* ---- 705:385614 headline --------------------------------------------------
   itemSpacing 16 from the eyebrow. Two 706x80 lines, SF Pro 510 at 80/80/-2.4. */
.abtl-h {
  width: 740px; margin: 16px 0 0;   /* drawn 706 — see the width note above */
  font-family: var(--font-display);
  font-weight: var(--w-medium);          /* Figma 510 */
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  color: #0D0D0D;
}
/* min-height, not height: this line carries the ink guard and the global
   border-box sizing makes a fixed height swallow the guard's padding, so the
   paint box would never grow. min-height keeps the drawn box when the ink
   fits and lets it grow when it does not. */
/* Only the FIRST line is gradient-painted and carries the ink guard, so only
   it needs min-height (a fixed height plus the global border-box sizing would
   swallow the guard's padding and the paint box would never grow). The second
   line is flat-coloured and keeps its drawn fixed height. */
.abtl-h-1, .abtl-h-2 { display: block; }
.abtl-h-1 { min-height: 80px; }
.abtl-h-2 { height: 80px; }
/* DEVIATION 6: 705:385615 has two stacked opaque GRADIENT_LINEAR fills. Only
   the upper one is visible. Its handles (0.6889, 0) -> (0.9315, 0.9343) over
   a 706x80 box project onto a 113.6deg CSS line with stops at 65.64%/93.17%. */
.abtl-h-1 {
  color: #0D0D0D;                        /* fallback before the clip */
  background: linear-gradient(113.6deg, #0D0D0D 65.64%, #CECECE 93.17%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-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;
}
.abtl-h-2 { color: #0D0D0D; }

/* ---- 705:385617 lede ------------------------------------------------------
   437 x 42, node opacity 0.8, SF Pro 510 at 16/21.12/-0.48. Bottom-aligned by
   the flex row, so its top lands at 329 - 42.24 = 286.76 (Figma 287).     */
.abtl-lede {
  width: 437px; margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 16px; line-height: 21.12px; letter-spacing: -0.48px;
  color: #0D0D0D; opacity: .8;
}

/* ---- 705:385618 the five columns ------------------------------------------
   layoutMode HORIZONTAL, itemSpacing 16. 5 x 273.6 + 4 x 16 = 1432 exactly. */
.abtl-cols {
  display: flex; gap: 16px;
  margin-top: 50px;                      /* Figma gap becomes a margin */
  height: 425px;
}

/* ---- a column — 705:385619 / 385633 / 385652 / 385672 / 388710 ------------
   273.6 x 425, clipsContent TRUE, individualStrokeWeights left 1 / right 1.
   --abtl-bx / --abtl-bw / --abtl-by are the bar box; --abtl-tw the title width. */
.abtl-col {
  position: relative; flex: 0 0 273.6px; width: 273.6px; height: 425px;
  overflow: hidden;
}
.abtl-col--1 { --abtl-bx: 0px;   --abtl-bw: 274px; --abtl-by: 223px; --abtl-tw: 140px; }
.abtl-col--2 { --abtl-bx: 0.4px; --abtl-bw: 272px; --abtl-by: 173px; --abtl-tw: 164px; }
.abtl-col--3 { --abtl-bx: 0.4px; --abtl-bw: 273px; --abtl-by: 123px; --abtl-tw: 161px; }
.abtl-col--4 { --abtl-bx: 0.2px; --abtl-bw: 273px; --abtl-by:  73px; --abtl-tw: 158px; }
.abtl-col--5 { --abtl-bx: 0.8px; --abtl-bw: 273px; --abtl-by:  23px; --abtl-tw: 149px; }

/* DEVIATION 7 (edges): the left/right 1px strokes are a vertical gradient at
   17% opacity, not a border colour. One pseudo paints both 1px strips.    */
.abtl-col::before {
  content: ''; position: absolute; inset: 0; z-index: 5;
  pointer-events: none; opacity: .17;
  background-image:
    linear-gradient(180deg, rgba(88,147,142,.49) 0%, #629C96 100%),
    linear-gradient(180deg, rgba(88,147,142,.49) 0%, #629C96 100%);
  background-size: 1px 100%, 1px 100%;
  background-position: left top, right top;
  background-repeat: no-repeat;
}
.abtl-col:focus-visible { outline: 2px solid #2F4947; outline-offset: -2px; }

/* ---- HOVER LAYERS (column 4 is the one drawn in this state) ---------------
   705:385672 fill, 180deg #F3F4F7 0% / #CAD9D9 40.87% / #FCFCFD 100%.     */
.abtl-plate {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #F3F4F7 0%, #CAD9D9 40.87%, #FCFCFD 100%);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--e-out);
}
/* 705:385673 "Layer_1", 727 x 397 at column-relative (-71.8, -127). The
   column clips it, exactly as Figma does. */
.abtl-halftone {
  position: absolute; z-index: 1;
  left: -71.8px; top: -127px; width: 727px; height: 397px;
  opacity: 0; pointer-events: none; user-select: none;
  transition: opacity var(--t-base) var(--e-out);
}

/* ---- the gradient bar — Rectangle 161133128 -------------------------------
   Fill: SOLID #D9D9D9 underneath a 270deg #7CB1AC -> #2F4947 gradient which is
   opaque, so only the gradient is painted. cornerRadius 11.
   DEVIATION 7 (shadow): Figma's DROP_SHADOW is blendMode OVERLAY; CSS cannot
   blend a box-shadow, so 0 6px 14px -3px at 30% black stands in.          */
.abtl-bar {
  position: absolute; z-index: 2;
  left: var(--abtl-bx); top: var(--abtl-by);
  width: var(--abtl-bw); height: 20px;
  border-radius: 11px;
  background: linear-gradient(270deg, var(--af-teal) 0%, #2F4947 100%);
  box-shadow: 0 6px 14px -3px rgba(0, 0, 0, .30);
}
/* DEVIATION 7 (stroke): a 1px INSIDE gradient stroke, SOFT_LIGHT at 54%.
   Handles project onto a 77.5deg line with stops at -6.38 / 58.10 / 115.55%.
   Masked pseudo-element pattern, as in atlas-chrome.css.                  */
.abtl-bar::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; opacity: .54; mix-blend-mode: soft-light; pointer-events: none;
  background: linear-gradient(77.5deg, rgba(0,0,0,.22) -6.38%, #FFFFFF 58.10%, #000000 115.55%);
  -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;
}

/* ---- 705:388709 the reveal paragraph (column 4 only) ----------------------
   241 x 72 at column-relative (16.2, 130). Node opacity 0.8, fill #000000.
   styleOverrideTable: chars 0-52 are SF Pro Semibold (590); the remainder is
   #000000 at 60%. Both runs carry letterSpacing -0.84.
   DEVIATION 3: this copy exists ONLY on column 4 in the Figma file.       */
.abtl-reveal {
  position: absolute; z-index: 3;
  left: 16.2px; top: 130px; width: 241px; margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 14px; line-height: 18.48px; letter-spacing: -0.84px;
  color: #000000;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--e-out);
}
.abtl-reveal b { font-weight: var(--w-semi); }   /* Figma 590 */
.abtl-reveal span { color: rgba(0, 0, 0, .6); }

/* ---- 705:385621 the bottom block -----------------------------------------
   242 wide, bottom edge pinned at column y 409 (16 up from the 425 bottom).
   Figma centres it: (273.6 - 242) / 2 = 15.8 on both sides.               */
.abtl-block {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 16px;
  width: 242px; margin: 0 auto;
}

/* 705:385622 etc — icon + title, itemSpacing 12, counterAxisAlignItems
   CENTER. Column 5 (705:388713) is MIN, i.e. top aligned. */
.abtl-row { display: flex; align-items: center; gap: 12px; }
.abtl-col--5 .abtl-row { align-items: flex-start; }

/* 705:385623 etc — 58x58. The exported SVG is the node's RENDER bounds
   (91 x 95): the circle plate is 58.25 across with cx 37.6057, so the artwork
   is pulled left by 8.48px and the drop shadow bleeds right/below, which the
   column clips exactly as Figma does. */
.abtl-icon { position: relative; flex: none; width: 58px; height: 58px; }
.abtl-icon img {
  position: absolute; left: -8.48px; top: 0;
  width: 91px; height: 95px; max-width: none; display: block;
}

/* 705:385627 etc — SF Pro 590 at 20/24/-0.6. Widths are FIXED in Figma and
   are what forces the line breaks, so they are set explicitly. */
.abtl-title {
  width: var(--abtl-tw); margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--w-semi);            /* Figma 590 */
  font-size: 20px; line-height: 24px; letter-spacing: -0.6px;
  color: #0D0D0D;
}

/* 705:385628 etc — year chip + label, itemSpacing 24 (23 on column 1). */
.abtl-chiprow { display: flex; align-items: center; gap: 24px; margin-top: 16px; height: 29px; }
.abtl-col--1 .abtl-chiprow { gap: 23px; }

/* 705:385629 — padding 4 8, itemSpacing 7, cornerRadius 57. The fill is a
   80.6deg gradient at 9% node opacity, folded into the stop alphas.       */
.abtl-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 8px; border-radius: 57px;
  background: linear-gradient(80.6deg,
      rgba(5,63,59,.09) -3.02%, rgba(5,63,59,.0711) 61.11%, rgba(255,255,255,.09) 104.17%);
  -webkit-backdrop-filter: blur(17px); backdrop-filter: blur(17px);
}
/* DEVIATION 7 (chip stroke): 1px OVERLAY gradient ring, 6.7deg. */
.abtl-chip::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; mix-blend-mode: overlay; pointer-events: none;
  background: linear-gradient(6.7deg, #FFFFFF -308.45%, rgba(255,255,255,0) -127.95%,
      #FFFFFF 23.43%, rgba(255,255,255,0) 297.10%);
  -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;
}
.abtl-year {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);            /* Figma 590 */
  font-size: 14px; line-height: 21px; letter-spacing: -0.42px;
  color: #344F4D;
}

/* 705:385631 etc — label, node opacity 0.6 (column 4 is at 1 because it is
   drawn hovered; that is wired to :hover below). itemSpacing 4. */
.abtl-label { display: flex; align-items: center; gap: 4px; opacity: .6;
  transition: opacity var(--t-base) var(--e-out); }
/* DEVIATION 9: the 18x18 mobile-only label glyph was not exported. This box
   holds its space so every downstream x still measures correctly. Desktop
   Figma has no glyph at all, so it is display:none here. */
.abtl-label-ico { display: none; flex: none; width: 18px; height: 18px; }
.abtl-label-t {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);          /* Figma 510 */
  font-size: 14px; line-height: 14px; letter-spacing: -0.42px;
  color: #0D0D0D;
  white-space: nowrap;
}

/* ---- HOVER / FOCUS -------------------------------------------------------
   DEVIATION 2. Keyboard first (always live), pointer second (gated).
   The title's gradient fill is a colour swap, not a transform/opacity change,
   so it is not transitioned — it snaps with the rest of the plate.
   The gradient is the projection for column 4's 158x48 title box; the other
   four titles reuse it, so their angle is nominally off by a few degrees.  */
.abtl-col:focus-within .abtl-plate,
.abtl-col:focus-within .abtl-halftone { opacity: 1; }
.abtl-col:focus-within .abtl-reveal { opacity: .8; }
.abtl-col:focus-within .abtl-label { opacity: 1; }
.abtl-col:focus-within .abtl-title {
  background: linear-gradient(139.5deg, #0D0D0D 50.82%, #C3D8D6 93.23%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .abtl-col:hover .abtl-plate,
  .abtl-col:hover .abtl-halftone { opacity: 1; }
  .abtl-col:hover .abtl-reveal { opacity: .8; }
  .abtl-col:hover .abtl-label { opacity: 1; }
  .abtl-col:hover .abtl-title {
    background: linear-gradient(139.5deg, #0D0D0D 50.82%, #C3D8D6 93.23%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* ===========================================================================
   MOBILE — Figma 705:395258, FRAME 393 x 959.
   padding 100 / 24, itemSpacing 50.
   ========================================================================= */
@media (max-width: 767px) {
  /* mandatory scroll-snap otherwise snaps the first card past the rail's
     own padding, so it renders flush at x=0 instead of x=24. */
  [class$='-cards'], [class$='-grid'], [class$='-rail'] { scroll-padding-left: 24px; }


  .abtl { padding: 100px 0; }

  /* 705:395277 — the same swoosh at 0.5722 scale: 1151 x 478.6 at (-189,-322).
     left: -196.5 (half of 393) - 189 = -385.5. */
  .abtl-swoosh {
    top: -322px; margin-left: -385.5px;
    width: 1151px; height: 478.6px;
  }
  /* 705:395280 — 400.5 x 154.5 at (182.1, -99.4). -196.5 + 182.1 = -14.4. */
  .abtl-blur {
    top: -99.4px; margin-left: -14.4px;
    width: 400.5px; height: 154.5px;
  }

  .abtl-stage { width: 345px; }

  /* 705:395259 — a COLUMN on mobile: eyebrow, headline, then the lede below.
     33 + 12 + 156 + 20 + 63 = 284. */
  .abtl-head { display: block; height: auto; }
  .abtl-head-l { width: 345px; }
  .abtl-h {
    width: 345px; margin-top: 12px;
    font-size: 52px; line-height: 52px; letter-spacing: -1.56px;
  }
  .abtl-h-1 { min-height: 104px; }         /* wraps to two lines at 345px */
  .abtl-h-2 { height: 52px; }
  /* 705:395274, same two stacked fills; projected for a 345x104 box. */
  .abtl-h-1 { background: linear-gradient(139.3deg, #0D0D0D 51.03%, #CECECE 93.23%); }
  .abtl-lede { width: 345px; margin-top: 20px; }

  /* 705:395281 — the rail. DEVIATION 8: the RAIL scrolls, never the page.
     Figma draws it mid-scroll (child parked at x=-844); it is built resting at
     scrollLeft 0. Figma does not clip it; a scroll container must. */
  .abtl-cols {
    width: 345px; height: 425px; margin-top: 50px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .abtl-cols::-webkit-scrollbar { display: none; }
  .abtl-col { scroll-snap-align: start; }

  /* Bar staircase on mobile is 223 / 213 / 153 / 93 / 33 (see deviation 10 —
     column 1 is an un-overridden instance, so its step is 10px, not 60px). */
  .abtl-col--2 { --abtl-by: 213px; --abtl-tw: 188px; }
  .abtl-col--3 { --abtl-by: 153px; --abtl-tw: 198px; }
  .abtl-col--4 { --abtl-by:  93px; --abtl-tw: 158px; }
  .abtl-col--5 { --abtl-by:  33px; --abtl-tw: 172px; }

  /* Columns 2-5 use a 24/28.8/-0.72 title; column 1 keeps the 20px instance. */
  .abtl-col--2 .abtl-title, .abtl-col--3 .abtl-title,
  .abtl-col--4 .abtl-title, .abtl-col--5 .abtl-title {
    font-size: 24px; line-height: 28.8px; letter-spacing: -0.72px;
  }
  /* DEVIATION 10: columns 2 and 3 carry NO 58px icon on mobile. */
  .abtl-col--2 .abtl-icon, .abtl-col--3 .abtl-icon { display: none; }
  .abtl-col--4 .abtl-row { align-items: flex-start; }

  /* itemSpacing on the chip row drops to 12 for columns 2-5. */
  .abtl-col--2 .abtl-chiprow, .abtl-col--3 .abtl-chiprow,
  .abtl-col--4 .abtl-chiprow, .abtl-col--5 .abtl-chiprow { gap: 12px; }

  /* DEVIATION 9: the 18x18 label glyph slot, columns 2-5 only. */
  .abtl-col--2 .abtl-label-ico, .abtl-col--3 .abtl-label-ico,
  .abtl-col--4 .abtl-label-ico, .abtl-col--5 .abtl-label-ico { display: block; }
}

/* ==========================================================================
   FIX 2026-08-03 — the mobile override rewrote `background` on the gradient
   headline with a plain shorthand, which reset background-clip to border-box
   while -webkit-text-fill-color stayed transparent. "From zero to 60,000"
   rendered as a solid 345x104 black-to-grey rectangle at every width below
   768. Re-asserting the clip after every media query fixes it without
   touching the desktop rule.
   ========================================================================= */
.abtl-h-1, .abtl-h-2 {
  -webkit-background-clip: text;
          background-clip: text;
}
/* No ink guard here. Only .abtl-h-1 carries a gradient and it already has the
   guard on its own rule above; .abtl-h-2 is flat #0D0D0D, is painted by `color`
   rather than by a background, and so has no ink to lose. Guarding it here as
   well grew the mobile heading by 28px for no reason. */

/* FIX 2026-08-03 — the mobile column rail sat 24px inset and clipped at 369,
   leaving a dead strip. The design (mobile frame 705:395281) bleeds the
   neighbouring columns past both frame edges, like the team and pillar rails. */
@media (max-width: 767px) {
  .abtl-rail {
    width: 100%; max-width: none;
    margin-inline: 0; padding: 0 0 0 24px;
    scroll-padding-left: 24px;
  }
}