/* ============================================================================
   About band 2 — founder + headline stats.
   REBUILT 18 Sep 2026 from Figma 2N553Cls5WgWmoHrH1EVVv:
     desktop  3146:219047   1512 x 1185
     mobile   3146:275253 (team, 345 x 863) + 3146:275347 (stats, 345 x 524),
              both inside the mobile section 3146:275252 (393 x 2592,
              pad 100/24/100/24, gap 120).
   Prefix: .abt-

   WHAT CHANGED against the previous build (705:332652, 1512 x 1378):
   the four-person card rail (Lucas / Trisse / Samir / Josh) is GONE. In its
   place: a left column carrying the eyebrow, a two-line 80px headline, the
   founder's quote and his name / role pills / socials, with a single 616x640
   portrait card on the right. The headline lost its third line ("DMs that get
   read.") and the 488-wide lede. The stats row is UNCHANGED — same four
   items, same 334 columns, same 80px gradient numerals — it only moves up
   from y 1113 to y 920 because the band is 193px shorter.

   DECLARED DEVIATIONS
   - The portrait is `background-size: cover`. The node's fill is
     scaleMode FILL, which is cover; it also carries an imageTransform
     ([[1,0,0],[0,0.877,0.061]]) but Figma only honours that on CROP, so it
     is not applied. The teal wash over it (#223736 0% -> 100%,
     gradientTransform [[0,1,0],[-1,0,1]] = straight down) is kept in CSS
     rather than baked into the WebP, because the desktop card is 616x640 and
     the mobile card 345x320 — one baked vertical fade cannot serve both
     crops.
   - The headline gradient is declared at 113.6deg/42%/96%, the value already
     measured for this file, not the 122deg the new node's gradientTransform
     projects for its 393x80 box. The stat numerals directly below carry the
     113.6deg paint and shipped that way; an 8-degree disagreement between
     the heading and the numbers under it would read as a bug. Consistency
     wins here, deliberately.
   - The two social buttons have no href in the file. They point at the
     company accounts, as they did in the previous build. Per-person handles
     still need confirming.
   - The quote block (3591:31491 / 3591:31556) carries cornerRadius 24 with
     no fill and no stroke, so the radius has nothing to paint and is not
     reproduced.
   ========================================================================= */

/* 3146:219047 — column, gap 160, padding 120 40, align CENTER, clipsContent.
   fills[0] is the bottom paint; fills[1] (#303030 -> #0F0F0F at 83.96%,
   gradientTransform [[0,2.279,0],[-2.279,0,1.657]] = straight down) is
   opaque and covers it, so only the dark one is drawn. */
.abt {
  position: relative;
  height: 1185px;
  overflow: hidden;                       /* clipsContent: true */
  background: linear-gradient(180deg, #303030 0%, #0F0F0F 83.96%);
}
.abt-stage {
  position: absolute; left: 50%; margin-left: -756px;
  top: 0; width: 1512px; height: 1185px;
}

/* 3146:219048 — 40,120, 1432x640, row, gap 200, justify CENTER, align MIN.
   616 + 200 + 616 = 1432. */
.abt-top {
  position: absolute; left: 40px; top: 120px; width: 1432px; height: 640px;
  display: flex; flex-direction: row; gap: 200px;
  justify-content: center; align-items: flex-start;
}

/* 3146:219049 — 616x640, column, SPACE_BETWEEN, gap 32 */
.abt-col {
  width: 616px; height: 640px; flex: none;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 32px;
}

/* 3146:219050 — 616x209, column, gap 16, align MIN (left, not centred) */
.abt-head { width: 616px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* 3146:219051 — 294x33, row, gap 7, padding 6 14, radius 57. Fill, stroke and
   background blur are all visible:false, so the pill ships with no plate;
   the padding and radius stay so the box still measures 294x33. */
.abt-eyebrow {
  margin: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 6px 14px; border-radius: 57px;
}
.abt-eyebrow img { width: 16px; height: 16px; display: block; flex: none; }
/* 3146:219060 — SF Pro 510 / 14 / 21 / ls -0.42. TWO runs: "The team behind "
   at full white, "your funded account" at white .6. */
.abt-eyebrow span {
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  color: var(--af-white);
}
.abt-eyebrow i { font-style: normal; color: rgba(255,255,255,.6); }

/* 3146:219061 — 616x160, column, gap 0. Two 80/80 lines, ls -2.4, so the pair
   is a solid 160 block with nothing between them. */
.abt-h2 {
  margin: 0; width: 616px;
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  text-align: left;
}
/* 3146:219062 — gradient #F8F8F8 -> #636363 */
.abt-h2__a {
  display: block;
  background: linear-gradient(113.6deg, #F8F8F8 42%, #636363 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* NO ink guard here: assets/atlas-ink-guard.css already carries
     `.abt-h2__a { padding-bottom:.2em; margin-bottom:-.2em }` and loads after
     this file. Declaring a second one just fights it. */
}
/* 3146:219063 — flat #FFFFFF */
.abt-h2__b { display: block; color: var(--af-white); }

/* ----------------------------------------------------------------- quote
   3591:31491 — 616x252, column, gap 32. */
/* <figure> carries a 40px UA margin — zero it, or the whole block sits 40px
   right of the 616 column and 40px short of its 252 height. */
.abt-quote { margin: 0; width: 616px; display: flex; flex-direction: column; gap: 32px; }

/* 3591:31502 — 616x150, SF Pro 510 / 20 / 30 (150%) / ls -0.6, node
   opacity .8, textAutoResize HEIGHT. */
.abt-q {
  margin: 0; width: 100%;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 20px; line-height: 30px; letter-spacing: -.6px;
  color: var(--af-white); opacity: .8;
}

/* 3591:31510 — 616x70, row, SPACE_BETWEEN, align MAX (bottom) */
.abt-who {
  display: flex; flex-direction: row; justify-content: space-between;
  align-items: flex-end; gap: 24px; width: 100%;
}
/* 3591:31511 — 162x70, column, gap 8 */
.abt-whoin { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* 3591:31513 — SF Pro BOLD 700 / 20 / 30 / ls -0.6, flat white */
.abt-name {
  margin: 0;
  font-family: var(--font-sans); font-weight: var(--w-bold);
  font-size: 20px; line-height: 30px; letter-spacing: -.6px;
  color: var(--af-white);
}
/* 3591:31514 — 162x32, row, gap 8 */
.abt-roles { margin: 0; display: flex; flex-direction: row; gap: 8px; }
/* 3591:31515 / 3591:31517 — radius 57, padding 4 8, white gradient at 9%,
   BACKGROUND_BLUR 17 -> blur(8.5px). Label at node opacity .8.
   gradientTransform [[0.875,-0.003,0.055],[0.255,0.875,-0.108]] projects to
   ~80deg on these boxes; the 73.7deg already measured for this file is kept
   so both pills agree with the rest of the page. */
.abt-pill {
  box-sizing: border-box;
  display: inline-flex; align-items: center;
  height: 32px; padding: 4px 8px;
  border-radius: 57px;
  background: linear-gradient(73.7deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.071) 59.83%, rgba(255,255,255,.09) 100%);
  backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px);
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px;
  color: rgba(255,255,255,.8); white-space: nowrap;
}

/* 3591:31519 — 104x48, row, gap 8. Two 48x48 buttons, radius 50,
   fill rgba(255,255,255,.06), 1px INSIDE rgba(255,255,255,.17).
   48 + 8 + 48 = 104. Glyphs are #E1FFA0 and are exported assets. */
.abt-soclist { display: flex; flex-direction: row; gap: 8px; flex: none; }
.abt-soc {
  box-sizing: border-box;          /* the 1px stroke is INSIDE: 48 is the TOTAL */
  width: 48px; height: 48px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-50);
  background: var(--w-06);
  border: 1px solid var(--w-17);
  transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out);
}
.abt-soc img { width: 16px; height: 16px; display: block; }

/* ----------------------------------------------------------------- portrait
   3590:72211 — 616x640, radius 32, clipsContent. Three stacked fills:
   #FBFBFB base, the photograph (scaleMode FILL), then the teal wash. CSS
   layers paint TOP-FIRST, which is the reverse of the Figma fill array. */
.abt-photo {
  width: 616px; height: 640px; flex: none;
  border-radius: var(--r-32); overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(34,55,54,0) 0%, #223736 100%),
    url('/assets/figma/ab-founder.webp');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  background-color: #FBFBFB;
}

/* ------------------------------------------------------------------- stats
   3146:225124 — 40,920, 1432x145, row, gap 32, four 334 items.
   334*4 + 32*3 = 1432. Each item: a 1px hairline (rgba(255,255,255,.25)),
   32px gap, label + value. Values carry the #F8F8F8 -> #636363 gradient.
   UNCHANGED from the previous build apart from `top`. */
.abt-stats {
  position: absolute; left: 40px; top: 920px; width: 1432px; height: 145px;
  margin: 0;
  display: flex; flex-direction: row; gap: 32px; align-items: center;
}
.abt-stat {
  position: relative;
  width: 334px; flex: none;
  padding-top: 32px;
  display: flex; flex-direction: column; align-items: flex-start;
}
/* 3146:225126 "Vector 3168" is a ZERO-height vector with a 1px CENTER stroke —
   absolute so it takes no layout space, exactly as in the file. */
.abt-stat::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  background: var(--w-25); border-radius: 4px;
}
.abt-stat__in {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.abt-stat dt {
  margin: 0;
  font-family: var(--font-alt); font-weight: var(--w-regular);
  font-size: 14px; line-height: 21px;
  color: var(--af-white); opacity: .8;
}
.abt-stat dd {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  color: #F8F8F8;
  background: linear-gradient(113.6deg, #F8F8F8 42%, #636363 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  white-space: nowrap;
  padding-bottom: .2em; margin-bottom: -.2em;
}

/* --------------------------------------------------------------- interaction */
@media (hover: hover) and (pointer: fine) {
  .abt-soc:hover { background: var(--w-17); }
}
.abt-soc:active { transform: scale(.94); }
.abt :focus-visible { outline: 2px solid var(--af-lime); outline-offset: 3px; border-radius: 6px; }

/* ============================================================================
   Below 1512 the 1512 stage no longer fits. The two columns keep their
   proportions down to the point where 616 + 200 + 616 stops working.
   ========================================================================= */
@media (max-width: 1440px) {
  .abt { height: auto; overflow: visible; }
  .abt-stage {
    position: static; left: auto; margin-left: 0; width: 100%; height: auto;
    padding: 120px 0;
  }
  .abt-top {
    position: static; left: auto; top: auto;
    width: 100%; max-width: 1432px; height: auto; margin: 0 auto;
    padding: 0 var(--gutter); box-sizing: border-box;
    gap: 80px;
  }
  .abt-col { width: auto; flex: 1 1 0; min-width: 0; height: auto; gap: 48px; }
  .abt-head, .abt-h2, .abt-quote { width: 100%; }
  .abt-photo { width: 45%; max-width: 616px; height: 640px; }
  .abt-stats {
    position: static; left: auto; top: auto;
    width: 100%; max-width: 1432px; height: auto;
    margin: 160px auto 0; padding: 0 var(--gutter); box-sizing: border-box;
  }
  .abt-stat { width: auto; flex: 1 1 0; min-width: 0; }
}
@media (max-width: 1100px) {
  .abt-h2 { font-size: 64px; line-height: 64px; letter-spacing: -1.92px; }
  .abt-top { gap: 48px; }
  .abt-photo { height: 560px; }
  .abt-stat dd { font-size: 64px; line-height: 64px; letter-spacing: -1.92px; }
}
@media (max-width: 900px) {
  /* the two columns can no longer sit side by side */
  .abt-top { flex-direction: column; align-items: stretch; gap: 50px; }
  .abt-col { width: 100%; flex: 0 0 auto; }
  .abt-photo { width: 100%; max-width: none; height: 420px; }
  .abt-stats { flex-wrap: wrap; }
  .abt-stat { flex: 1 1 40%; min-width: 260px; }
}

/* ============================================================================
   MOBILE — 3146:275253 (team, 345x863) + 3146:275347 (stats, 345x524) inside
   3146:275252 (393x2592, padding 100/24/100/24, gap 120).
   The mobile frame differs from desktop in three ways, all reproduced:
     1. the header block is CENTRED (counterAxisAlignItems CENTER) and the
        headline drops to 52/52;
     2. the portrait sits BETWEEN the header and the quote, at 345x320;
     3. inside the quote block the attribution row comes FIRST and the quote
        text second — the reverse of desktop.
   ========================================================================= */
@media (max-width: 767px) {
  .abt-stage { padding: 100px 0 120px; }

  /* 3146:275253 — column, gap 50 */
  .abt-top { flex-direction: column; width: 345px; margin: 0 auto; padding: 0; gap: 50px; align-items: stretch; }
  /* the left column is no longer a column: its three parts become siblings of
     the portrait so the portrait can sit between them. */
  .abt-col { display: contents; }

  /* 3146:275255 — 345x149, column, gap 12, align CENTER */
  .abt-head { width: 100%; gap: 12px; align-items: center; order: 1; }
  /* 3146:275267 / 68 — 52/52, ls -1.56, both FILL width, text-align CENTER */
  .abt-h2 { width: 100%; font-size: 52px; line-height: 52px; letter-spacing: -1.56px; text-align: center; align-items: stretch; }
  .abt-h2__a, .abt-h2__b { width: 100%; text-align: center; }

  /* 3591:31534 — 345x320, same three fills */
  .abt-photo { width: 100%; max-width: none; height: 320px; order: 2; }

  /* 3591:31556 — 345x294, column, gap 32, attribution row FIRST */
  .abt-quote { width: 100%; order: 3; flex-direction: column-reverse; }
  /* 3591:31557 — 345x192, 16/24, ls -0.48 */
  .abt-q { font-size: 16px; line-height: 24px; letter-spacing: -.48px; }
  /* 3591:31568 / 71 — 43x43 on mobile, not 48 */
  .abt-soc { width: 43px; height: 43px; }

  .abt-stats {
    width: 345px; height: auto;
    margin: 120px auto 0; padding: 0;
    flex-direction: column; gap: 32px; align-items: stretch; flex-wrap: nowrap;
  }
  /* 3146:275348 — column, gap 16 (desktop is 32) */
  .abt-stat { width: 100%; flex: 0 0 auto; min-width: 0; padding-top: 16px; }
  /* 3146:275352 — 58/58, ls -1.74 */
  .abt-stat dd { font-size: 58px; line-height: 58px; letter-spacing: -1.74px; }
}

@media (max-width: 380px) {
  .abt-top { width: auto; margin: 0 16px; }
  .abt-h2 { font-size: 44px; line-height: 44px; letter-spacing: -1.32px; }
  .abt-stats { width: auto; margin: 120px 16px 0; }
  .abt-stat dd { font-size: 50px; line-height: 50px; letter-spacing: -1.5px; }
}