/* ============================================================================
   About v2, band "why" — "We exist to give traders a real shot".
   Figma DESKTOP 705:338766 (1512 x 1094) / MOBILE 705:388963 (393 x 940).
   Light band. Every number below is read out of the cached node JSON.
   Prefix .abwhy- only. Deviations are listed in fragments/ab-why.html.
   ========================================================================= */

/* ---- band -----------------------------------------------------------------
   705:338766. Figma fill is a GRADIENT_LINEAR whose handles run
   (0.5, 0) -> (0.5089286, 0.7859541) over a 1512x1094 box. Projected onto the
   CSS gradient line that is 179.1deg / stops at 1.06% and 78.01%. The brief's
   shorthand "179.3deg 0%..100%" leaves the bottom of the band faintly grey;
   the exact projection matches ref/d3-why.png. #EBEDF2 / #FFFFFF are not
   tokens in atlas-tokens.css, so the literal hex from the node JSON is used.
   layoutMode VERTICAL, padding 120 299 120 299, counterAxisAlignItems CENTER.
   clipsContent is FALSE — deliberately no overflow rule here.             */
.abwhy {
  position: relative;
  padding: 120px 0;
  background: linear-gradient(179.1deg, #EBEDF2 1.06%, #FFFFFF 78.01%);
}

/* ---- 705:338767 decorative swoosh -----------------------------------------
   2011.5 x 836.5 at band (-249.8, 19). Its centre (-249.75 + 1005.75 = 756)
   is the band centre, so it stays centred on the 1512 stage at any viewport. */
.abwhy-swoosh {
  position: absolute; z-index: 0;
  top: 19px; left: 50%; margin-left: -1005.75px;
  width: 2011.5px; height: 836.5px;
  pointer-events: none; user-select: none;
}

/* ---- 705:338771 content column --------------------------------------------
   864 x 854 at (324, 120). No layoutMode in Figma, so children are placed
   absolutely at their exact offsets. Fixed width, never max-width.        */
.abwhy-col {
  position: relative; z-index: 1;
  width: 864px; height: 854px; margin: 0 auto;
}

/* ---- 705:338772 illustration ----------------------------------------------
   The frame is 864 x 289 at column-relative (0, 232). children[0] of the
   column, so it sits UNDER the headline and the paragraph.
   ab-why-art.webp is the frame's render bounds: 864 x 698.746 css px, whose
   top edge is 237.305px ABOVE the frame. Not clipped.                     */
.abwhy-art {
  position: absolute; z-index: 1;
  left: 0; top: 232px; width: 864px; height: 289px;
  pointer-events: none;
}
.abwhy-art-img {
  position: absolute; left: 0; top: -237.305px;
  width: 864px; height: 698.746px;
  display: block;
}

/* ---- 705:338779 eyebrow + headline ---------------------------------------- */
.abwhy-head {
  position: absolute; z-index: 2;
  left: 109.5px; top: 0; width: 645px; height: 209px;
}

/* 705:338783 — HUG 135 x 33, radius 57, padding 6/14, gap 7, no fill, no
   stroke. Centred: (645 - 135) / 2 = 255.                                  */
.abwhy-eyebrow {
  position: absolute; left: 255px; top: 0;
  box-sizing: border-box;
  width: 135px; height: 33px;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 57px;
  margin: 0;
}
.abwhy-eyebrow-ico { flex: 0 0 auto; width: 16px; height: 16px; display: block; }
/* 705:338794 — SF Pro 510 / 14 / lh 21 / ls -0.42. "Why " is full #0D0D0D,
   "we exist" carries styleOverrideTable[1] = #0D0D0D at 60%.              */
.abwhy-eyebrow-t {
  flex: 0 0 auto; white-space: nowrap;
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -0.42px;
  color: rgba(13, 13, 13, .6);
}
.abwhy-eyebrow-s { color: #0D0D0D; }

/* 705:338795 — 645 x 160 at (0, 49); gap between chip and stack is 16. */
.abwhy-h {
  position: absolute; left: 0; top: 49px;
  width: 645px; height: 160px; margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  text-align: center;
  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. */
.abwhy-h-l1, .abwhy-h-l2 { display: block; width: 645px; }
.abwhy-h-l1 { min-height: 80px; }
.abwhy-h-l2 { height: 80px; }
/* 705:338796 — two stacked gradient fills; the upper one is opaque and wins.
   Handles (0.688854, 0) -> (0.931520, 0.934344) over the 645x80 box project
   onto 115.5deg with stops at 65% and 93.2%.                              */
.abwhy-h-l1 {
  background-image: linear-gradient(115.5deg, #0D0D0D 65%, #CECECE 93.2%);
  -webkit-background-clip: text; background-clip: text;
  -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;
}
/* 705:338797 — flat #0D0D0D. */
.abwhy-h-l2 { color: #0D0D0D; }

/* ---- 705:338798 paragraph + attribution -----------------------------------
   864 x 273 at column-relative (0, 581). VERTICAL, gap 32, align CENTER. */
.abwhy-foot {
  position: absolute; z-index: 2;
  left: 0; top: 581px; width: 864px; height: 273px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}

/* 705:338799 — 864 x 185, node opacity 0.8. Base style is SF Pro 400 but every
   character carries a Medium 510 override, so the whole run is --w-medium.
   28 / lh 36.96 / ls -0.84 / CENTER.
   Gradient run (styleOverrideTable 63): handles (0.688854, 0) ->
   (0.931520, 0.934344) over the 864x185 box = 129.5deg, stops 58.55% / 93.2%.
   Runs 62 and 64 are flat #0D0D0D at 60% and opt out below.               */
.abwhy-body {
  width: 864px; height: 185px; margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 28px; line-height: 36.96px; letter-spacing: -0.84px;
  text-align: center;
  opacity: .8;
  color: #0D0D0D;
  background-image: linear-gradient(129.5deg, #0D0D0D 58.55%, #CECECE 93.2%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.abwhy-body-flat,
.abwhy-body-q {
  -webkit-text-fill-color: rgba(13, 13, 13, .6);
  color: rgba(13, 13, 13, .6);
}
/* 705:338799 styleOverrideTable 64 — SF Pro Medium Italic 508. */
.abwhy-body-q { font-style: italic; }

/* 705:338800 — HORIZONTAL, gap 12, align CENTER, 189 x 56. */
.abwhy-attr {
  display: flex; align-items: center; gap: 12px;
  width: 189px; height: 56px;
}
/* 705:338801 — 56 x 56, radius 12, fill #C8C8C8 behind the photo. */
.abwhy-attr-av {
  position: relative; flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 12px; overflow: hidden;
  background: #C8C8C8;
}
/* 705:338802 — STRETCH image fill, imageTransform
   [[0.8968024, 0, 0.1025174], [0, 0.8612463, 0.0693768]]; reproduced as an
   over-sized, offset <img> inside the clipping box.                       */
.abwhy-attr-img {
  position: absolute; left: -6.402px; top: -4.511px;
  width: 62.444px; height: 65.023px;
  display: block;
}
/* 705:338803 — VERTICAL, gap 6, 121 x 36. */
.abwhy-attr-txt {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 6px;
  width: 121px;
}
/* 705:338805 — Saans VF-TRIAL 500 / 16 / lh 16 / ls 0 (Saans is trial-licensed,
   --font-alt maps onto the SF stack). */
.abwhy-attr-name {
  font-family: var(--font-alt);
  font-weight: var(--w-medium);
  font-size: 16px; line-height: 16px; letter-spacing: 0;
  color: #0D0D0D;
}
/* 705:338807 — same face at 14/14, node opacity 0.6. */
.abwhy-attr-role {
  font-family: var(--font-alt);
  font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; letter-spacing: 0;
  color: rgba(13, 13, 13, .6);
}


/* ==========================================================================
   MOBILE — Figma 705:388963, FRAME 393 x 940. Separate node ids, separate
   numbers. Nothing above is edited to make this work.
   ======================================================================== */
@media (max-width: 767px) {

  /* 705:388963 — same gradient handles, re-projected onto a 393x940 box.
     padding 100 24 100 24. overflow-x is clipped here and only here: the
     mobile swoosh is 969.1px wide starting at -96.9, and CSS rule 7 requires
     scrollWidth === viewport. overflow-y stays visible; the swoosh has no
     vertical bleed (55 -> 458 inside 0 -> 940) so nothing is lost.        */
  .abwhy {
    padding: 100px 0;
    background: linear-gradient(179.73deg, #EBEDF2 0.1%, #FFFFFF 78.5%);
    overflow-x: clip; overflow-y: visible;
  }

  /* 705:388981 — 969.1 x 403 at (-96.9, 55). Not centred on the frame:
     -96.9 + 484.55 = 387.65 against a 196.5 frame centre.                 */
  .abwhy-swoosh {
    top: 55px; left: 50%; margin-left: -293.4px;
    width: 969.1px; height: 403px;
  }

  /* 705:388964 — 345 x 740 at (24, 100). */
  .abwhy-col { width: 345px; height: 740px; }

  /* 705:388985 — frame 410.9 x 156 at (-9, 302) = column-relative (-33, 202).
     The mobile art is the desktop art scaled 0.47561 and nudged 18.55px down
     inside its frame, giving 410.927 x 332.33 at frame-relative (0, -94.32).
     Cross-checked against the node's absoluteRenderBounds.                */
  .abwhy-art { left: -33px; top: 202px; width: 410.927px; height: 156px; }
  .abwhy-art-img { top: -94.32px; width: 410.927px; height: 332.33px; }

  /* 705:388965 — 345 x 201 at column-relative (0, 0). VERTICAL, gap 12. */
  .abwhy-head { left: 0; width: 345px; height: 201px; }
  /* 705:388966 — 135 x 33 at (129, 100); (345 - 135) / 2 = 105. */
  .abwhy-eyebrow { left: 105px; }

  /* 705:388978 — 345 x 156 at (24, 145) = column-relative (0, 45).
     52 / lh 52 / ls -1.56. Line 2 wraps to two lines (104 tall).          */
  /* min-height: at 345 wide, Inter wraps "We exist to give" onto a second line
     that SF Pro fits on one. The line is gradient-painted, so the wrapped part
     fell outside the paint box and was invisible. There is 191px of clear space
     between this block and .abwhy-foot, so letting it grow costs nothing. */
  .abwhy-h {
    top: 45px; width: 345px; min-height: 156px;
    font-size: 52px; line-height: 52px; letter-spacing: -1.56px;
  }
  .abwhy-h-l1, .abwhy-h-l2 { width: 345px; }
  .abwhy-h-l1 {
    min-height: 52px;
    /* handles re-projected onto the 345x52 box */
    background-image: linear-gradient(120.15deg, #0D0D0D 63.3%, #CECECE 93.2%);
  }
  .abwhy-h-l2 { height: 104px; }

  /* 705:388992 — 345 x 348 at (24, 492) = column-relative (0, 392). */
  .abwhy-foot { top: 392px; width: 345px; height: 348px; }

  /* 705:388993 — 345 x 260, 20 / lh 26.4 / ls -0.6, node opacity 0.8.
     styleOverrideTable 67/66/65 mirror desktop 63/62/64. Gradient handles
     re-projected onto the 345x260 box.
     FILE INCONSISTENCY, not reproduced: style.lineHeightPx says 26.4 but the
     node is 260 tall for 10 lines (= 26.0) and ref/m2-why.png measures a
     26.0px pitch. Contract 4 says use lineHeightPx, so 26.4px is what ships;
     the box stays exactly 260px and the text overruns it by ~4px into the
     32px gap below. Flip to 26px if the reference render is preferred.    */
  .abwhy-body {
    width: 345px; height: 260px;
    font-size: 20px; line-height: 26.4px; letter-spacing: -0.6px;
    background-image: linear-gradient(160.98deg, #0D0D0D 21.6%, #CECECE 93.4%);
  }
}