/* ===========================================================================
   about-v2 — band "pillars"
   Figma DESKTOP 705:338808 (1512 x 1431) · MOBILE 705:389118 (345 x 765)
   Prefix: .abp-   ·  every value read out of the cached node JSON.

   Deviations are listed in fragments/ab-pillars.html and repeated inline below.
   ======================================================================== */

.abp *,.abp *::before,.abp *::after{box-sizing:border-box;}

.abp{
  position:relative;
  width:100%;
  height:1431px;                                   /* 705:338808 */
  overflow:hidden;                                 /* clipsContent: true */
  background:linear-gradient(180deg,#0F0F0F 0%,#222222 100%);
  isolation:isolate;
}

/* --- dot plates -----------------------------------------------------------
   705:338809 / 705:359133. In Figma each plate is a GROUP whose bottom child
   is a RECTANGLE with isMask:true carrying a vertical grey gradient, masking
   an 1642x1370 render of the "dots" frame (705:338812, opacity .8).
   DEVIATION 7: the plate box is full-bleed per the build conventions; the dot
   artwork keeps its Figma offset from the 1512 stage centre, so very wide
   viewports show plain gradient at the extreme edges. Plate B's Figma x=12 is
   dropped for the full-bleed box (kept in the artwork offset).            */
.abp-bg{position:absolute;inset:0;pointer-events:none;z-index:0;}
.abp-plate{position:absolute;left:0;right:0;width:auto;min-width:1512px;overflow:hidden;}
.abp-plate--a{
  top:122px;height:619px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 14.12%,#000 59.26%,rgba(0,0,0,0) 87.05%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,0) 14.12%,#000 59.26%,rgba(0,0,0,0) 87.05%);
}
.abp-plate--b{
  top:691px;height:782px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 100%);
}
.abp-dots{
  position:absolute;left:50%;
  width:1642px;height:1370px;                      /* 705:338812, exported @900w */
  opacity:.8;
}
.abp-dots--a{margin-left:-854px;top:-109px;}       /* band x=-98  y=13  */
.abp-dots--b{margin-left:-842px;top:-90px;}        /* band x=-86  y=601 */

/* --- 1512 stage ---------------------------------------------------------- */
.abp-stage{
  position:absolute;top:0;left:50%;margin-left:-756px;
  width:1512px;height:1431px;z-index:1;
}

/* --- heading block 705:379457 -------------------------------------------- */
.abp-head{
  position:absolute;left:243px;top:120px;
  width:1026px;height:289px;
  display:flex;flex-direction:column;align-items:center;gap:32px;
}
.abp-head-top{                                     /* 705:379458 */
  flex:none;width:1026px;height:209px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}

/* eyebrow 705:379459 — DEVIATION 2: fills, strokes and the 16.7px background
   blur are all visible:false in the file, so no pill is drawn.             */
.abp-eyebrow{
  flex:none;display:flex;align-items:center;gap:7px;
  width:168px;height:33px;padding:6px 14px;
  border-radius:57px;margin:0;
}
.abp-eyebrow-ico{display:block;width:16px;height:16px;flex:0 0 16px;}
.abp-eyebrow-txt{
  display:block;width:117px;
  font-family:var(--font-sans);font-weight:var(--w-medium);
  font-size:14px;line-height:21px;letter-spacing:-.42px;
  color:var(--af-white);white-space:nowrap;
}
.abp-eyebrow-dim{opacity:.6;}                      /* styleOverrideTable 6 */

/* headline 705:379469 */
.abp-h{
  flex:none;width:1026px;height:160px;margin:0;
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--font-display);font-weight:var(--w-medium);
  font-size:80px;line-height:80px;letter-spacing:-2.4px;
  color:var(--af-white);text-align:center;
}
/* 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. */
.abp-h-l1,.abp-h-l2{flex:none;display:block;}
.abp-h-l1{min-height:80px;}
.abp-h-l2{height:80px;}
/* WIDTH DEVIATION (text-clipping fix). The drawn node is 839 wide because
   Figma sets it in SF Pro; the site ships Inter, which needs 961.6px for the
   same string. At 839 the line wrapped, and because this element is painted
   by a background-clip:text gradient the wrapped second line fell outside the
   paint box and the word "decision" was invisible on the live page. Widened
   to the parent's 1026 so the line fits exactly as drawn. The text is centred,
   so nothing moves. */
.abp-h-l1{
  width:1026px;                                    /* 705:379470, drawn 839 */
  color:#F8F8F8;                                   /* fallback */
  /* two stacked NORMAL gradient fills; the upper one is fully opaque so only
     it is visible. Angle + stop positions re-projected onto the CSS gradient
     line for the 839x80 box. */
  background-image:linear-gradient(106.6deg,#F8F8F8 52.64%,#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;
}
.abp-h-l2{width:1026px;}                           /* 705:379471, solid #FFF */

.abp-lede{                                         /* 705:379472 */
  flex:none;width:474px;height:48px;margin:0;
  font-family:var(--font-sans);font-weight:var(--w-medium);
  font-size:16px;line-height:24px;letter-spacing:-.48px;
  text-align:center;color:var(--af-white);opacity:.8;
}

/* --- card grid 705:379473 ------------------------------------------------ */
.abp-grid{position:absolute;left:220px;top:459px;width:1073px;height:852px;}
.abp-row{position:absolute;left:0;width:1073px;display:flex;gap:16px;}
.abp-row--1{top:0;height:460px;}                   /* 705:379474 */
.abp-row--2{top:476px;height:376px;}               /* 705:379549 */

.abp-card{
  position:relative;flex:0 0 528.5px;
  border-radius:32px;overflow:hidden;isolation:isolate;
  margin:0;
}
.abp-row--1 .abp-card{height:460px;}
.abp-row--2 .abp-card{height:376px;}
/* 705:379475 / 705:379534 */
.abp-card--people,.abp-card--path{background:linear-gradient(180deg,#13524E 0%,#223736 100%);}
/* 705:379550 / 705:382572 — the #FFFFFF fill underneath is fully covered */
.abp-card--growth,.abp-card--proof{background:linear-gradient(180deg,#1F1F1F 0%,#151515 100%);}

/* card copy */
.abp-c-txt{
  position:absolute;left:24px;top:319px;z-index:4;
  display:flex;flex-direction:column;gap:16px;
}
.abp-c-txt--sm{top:244px;}
.abp-card--people .abp-c-txt{width:480.5px;}       /* 705:379476 */
.abp-card--path   .abp-c-txt{width:363px;}         /* 705:379546 */
.abp-card--growth .abp-c-txt{width:415px;}
.abp-card--proof  .abp-c-txt{width:481px;}

.abp-c-title{
  flex:none;margin:0;height:29px;                  /* Figma box height, so the
     body below lands on its exact Figma y even though lh is 28.8 */
  font-family:var(--font-sans);font-weight:var(--w-semi);
  font-size:24px;line-height:28.8px;letter-spacing:-.72px;color:var(--af-white);
}
.abp-c-title--lg{
  height:38px;font-family:var(--font-display);
  font-size:32px;line-height:38.4px;letter-spacing:-.96px;
}
.abp-card--people .abp-c-title{width:235px;}
.abp-card--path   .abp-c-title{width:138px;}
.abp-card--growth .abp-c-title{width:143px;}
.abp-card--proof  .abp-c-title{width:481px;}

.abp-c-body{
  flex:none;margin:0;font-family:var(--font-sans);font-weight:var(--w-regular);
  font-size:16px;line-height:21.12px;letter-spacing:-.48px;
  color:var(--af-white);opacity:.8;
}
.abp-card--people .abp-c-body{width:443px;}
.abp-card--path   .abp-c-body{width:363px;}
.abp-card--growth .abp-c-body{width:415px;}
.abp-card--proof  .abp-c-body{width:384px;}

/* --- card 1 art 705:379479 (whole hex cluster exported as one image) ----- */
.abp-hex{
  position:absolute;left:0;top:0;
  width:529px;height:311.5px;display:block;z-index:1;
}

/* --- card 2 art ---------------------------------------------------------- */
/* 705:379536 "image 1168". scaleMode STRETCH + imageTransform, so the 1100x1100
   source is cropped: visible region x .1244->.9954, y 0->.9535 of the source.
   blendMode SCREEN, opacity .83.
   DEVIATION 5: the PROGRESSIVE layer blur (radius 38.4 -> 19.2 CSS) is faked
   with a sharp copy plus a blurred copy masked to fade in downwards.       */
.abp-swirl{
  position:absolute;left:.5px;top:-230px;
  width:610px;height:557px;overflow:hidden;
  opacity:.83;mix-blend-mode:screen;z-index:1;pointer-events:none;
}
.abp-swirl-img{position:absolute;left:-87.1px;top:0;width:700.3px;height:584.2px;display:block;}
.abp-swirl-img--blur{
  filter:blur(19.2px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 46%,#000 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,0) 46%,#000 100%);
}
/* 705:379545 — 458x458 radial glow, paint opacity .6 x node opacity .2 */
.abp-glow{
  position:absolute;left:408px;top:-241px;width:458px;height:458px;
  border-radius:50%;opacity:.12;z-index:3;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,#7CB1AC 0%,rgba(255,255,255,.3) 50.85%,rgba(245,247,253,0) 75.23%);
}

/* --- model chips 705:379537 ---------------------------------------------- */
.abp-chips{position:absolute;left:-119.5px;top:48px;width:772px;height:220px;z-index:2;}
.abp-chiprow{position:absolute;display:flex;gap:24px;height:98px;}
.abp-chiprow--1{left:138px;top:0;width:496px;}     /* 705:379538 */
.abp-chiprow--2{left:0;top:122px;width:772px;justify-content:flex-end;} /* 705:379541 — 756 of content sits flush right, 16 inset left */

.abp-chip{
  position:relative;flex:0 0 236px;height:98px;
  padding:16px;border-radius:20px;
  background:rgba(45,45,45,.15);
  /* DEVIATION 6: Figma GLASS effect -> backdrop blur */
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  overflow:hidden;
}
/* second fill: white linear gradient, blend SOFT_LIGHT, opacity .62 */
.abp-chip::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(198.4deg,rgba(255,255,255,0) 20.96%,#FFFFFF 54.88%,rgba(255,255,255,0) 87.04%);
  mix-blend-mode:soft-light;opacity:.62;
}
/* 705:379539 only: 2px INSIDE gradient stroke, opacity .16 */
.abp-chip--lime::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;
  background:linear-gradient(194.7deg,#E1FFA0 0%,rgba(225,255,160,.08) 40.39%,#E1FFA0 96.55%);
  opacity:.16;
  -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;
}
.abp-chip-hd{position:relative;display:flex;align-items:center;gap:4px;width:204px;height:22px;}
.abp-chip-name{
  font-family:var(--font-sans);font-weight:var(--w-semi);
  font-size:18px;line-height:18px;color:var(--af-white);white-space:nowrap;
}
.abp-chip-tag{
  display:flex;align-items:center;gap:7px;height:22px;padding:4px 8px;
  border-radius:57px;background:rgba(0,0,0,.31);
  /* Figma BACKGROUND_BLUR 16.7 -> half for CSS, per the build conventions */
  -webkit-backdrop-filter:blur(8.35px);backdrop-filter:blur(8.35px);
  box-sizing:border-box;
}
.abp-chip-ico{display:block;width:14px;height:14px;flex:0 0 14px;}
.abp-chip-tagtxt{
  font-family:var(--font-sans);font-weight:var(--w-medium);
  font-size:14px;line-height:14px;letter-spacing:-.14px;text-align:center;
  white-space:nowrap;
}
.abp-chip-desc{
  position:relative;margin:8px 0 0;width:204px;height:36px;
  font-family:var(--font-sans);font-weight:var(--w-medium);
  font-size:14px;line-height:18.48px;letter-spacing:-.28px;
  color:var(--af-white);opacity:.6;
}

/* --- cards 3 + 4 art ----------------------------------------------------- */
/* DEVIATION 4: 705:379555 / 705:382576 are 3013-node sub-pixel white halftones
   at a ~10.12px pitch; reproduced as a CSS dot grid and moved behind the copy. */
.abp-halftone{
  position:absolute;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.22) .55px,rgba(255,255,255,0) .6px);
  background-size:10.12px 10.12px;
  -webkit-mask-image:radial-gradient(58% 58% at 50% 42%,#000 0%,rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(58% 58% at 50% 42%,#000 0%,rgba(0,0,0,0) 100%);
}
.abp-halftone--3{left:-81px;top:-86px;width:679px;height:371px;}
.abp-halftone--4{left:-55.5px;top:-167px;width:790.8px;height:658px;}

.abp-shadow{
  position:absolute;z-index:2;border-radius:50%;background:#000;pointer-events:none;
}
.abp-shadow--3{left:200px;top:182px;width:114px;height:27px;opacity:.4;filter:blur(9.2px);}
.abp-shadow--4{left:148.5px;top:208px;width:227px;height:18px;opacity:.7;filter:blur(9.2px);}

.abp-art{position:absolute;z-index:3;display:block;}
.abp-art--chart{left:133px;top:-12px;width:262px;height:262px;}
.abp-art--folder{left:64.8px;top:-12px;width:365.3px;height:274px;}

/* --- motion — tokens only, transform/opacity only ------------------------ */
.abp-card{transition:transform var(--t-base) var(--e-out);}
@media (hover:hover) and (pointer:fine){
  .abp-card:hover{transform:translateY(-4px);}
}

/* ==========================================================================
   MOBILE — Figma 705:389118, 345 x 765 inside the 393 frame (x=24, y=1693)
   ======================================================================= */
@media (max-width:767px){

  .abp{height:auto;}
  .abp-bg{display:none;}                 /* the mobile frame draws no plates here */
  .abp-stage{
    position:static;margin:0;width:100%;height:auto;
    display:flex;flex-direction:column;align-items:center;gap:40px;
  }

  .abp-head{
    position:static;width:345px;height:345px;gap:20px;   /* 705:389119 */
  }
  .abp-head-top{width:345px;height:253px;gap:12px;}      /* 705:389120 */

  .abp-h{width:345px;height:208px;font-size:52px;line-height:52px;letter-spacing:-1.56px;}
  .abp-h-l1{width:345px;min-height:104px;
    background-image:linear-gradient(133.3deg,#F8F8F8 36.94%,#636363 93.21%);}
  .abp-h-l2{width:345px;height:104px;}
  .abp-lede{width:345px;height:72px;}

  /* card rail — the RAIL scrolls, never the page (705:389135) */
  .abp-grid{
    position:static;width:100%;height:380px;
    display:flex;gap:16px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 0 0 24px;
  }
  .abp-grid::-webkit-scrollbar{display:none;}
  /* padding-right is unreliable on flex scroll containers — use a spacer */
  .abp-grid::after{content:'';flex:0 0 24px;height:1px;}
  .abp-row{display:contents;}
  .abp-card{
    flex:0 0 300px;scroll-snap-align:start;border-radius:32px;
  }
  .abp-row--1 .abp-card,.abp-row--2 .abp-card{height:380px;}

  .abp-c-txt{left:20px;top:214px;gap:12px;width:260px;}
  .abp-card--path .abp-c-txt{top:210px;gap:16px;}
  .abp-card--people .abp-c-txt,.abp-card--path .abp-c-txt,
  .abp-card--growth .abp-c-txt,.abp-card--proof .abp-c-txt{width:260px;}

  /* every mobile card title is 24px (desktop cards 1+2 are 32px) */
  .abp-c-title,.abp-c-title--lg{
    height:29px;font-family:var(--font-sans);
    font-size:24px;line-height:28.8px;letter-spacing:-.72px;
  }
  .abp-card--people .abp-c-title{width:235px;}
  .abp-card--path   .abp-c-title{width:106px;}
  .abp-card--growth .abp-c-title{width:143px;}
  .abp-card--proof  .abp-c-title{width:203px;}
  .abp-card--people .abp-c-body{width:224px;}
  .abp-card--path   .abp-c-body{width:239px;}
  .abp-card--growth .abp-c-body{width:260px;}
  .abp-card--proof  .abp-c-body{width:260px;}

  .abp-hex{left:-35.5px;top:-18px;width:371.9px;height:219px;}   /* 705:389140 */

  .abp-swirl{left:.1px;top:-149.1px;width:394.9px;height:360.8px;} /* 705:389197 */
  .abp-swirl-img{left:-56.4px;top:0;width:453.4px;height:378.4px;}
  .abp-glow{left:408px;top:-241px;}                               /* 705:389206 */

  /* 705:389198 — the whole 772x220 chip block drawn at 499.9x143.8 */
  .abp-chips{left:-77.7px;top:31px;transform:scale(.6476);transform-origin:0 0;}

  .abp-halftone--3{left:-81px;top:-86px;width:679px;height:371px;}   /* 705:389217 */
  .abp-halftone--4{left:-81px;top:-86px;width:679px;height:371px;}   /* 705:392238 */

  .abp-art--chart{left:52.5px;top:0;width:171px;height:171px;}       /* 705:389216 */
  .abp-art--folder{left:18.5px;top:9px;width:230px;height:172px;}    /* 705:395257 */
  .abp-shadow--3{left:128.3px;top:129px;width:78.8px;height:18.7px;} /* 705:389215 */
  .abp-shadow--4{left:188.3px;top:136.6px;width:83.2px;height:19.7px;opacity:.4;}
}


/* ==========================================================================
   FIX 2026-08-03 — the card titles carried the Figma-measured text width and a
   fixed one-line height. Rendered SF Pro is a shade wider, so "Clear path",
   "Trader growth" and "Proof over promises" wrapped to two lines and the
   second line landed on top of the paragraph below. The reference (d4) shows
   all four on one line, so the titles hug their text and never wrap.
   ========================================================================= */
.abp-c-title {
  width: auto; min-width: max-content; height: auto;
  white-space: nowrap;
}
/* keyboard parity with the team cards and timeline columns */
.abp-card:focus-within { outline: 2px solid var(--af-lime); outline-offset: 3px; }