/* ============================================================================
   How It Works band 3a — the four steps.
   Figma 1048:492523 "Frame 2147259937" (1512 x 1136), the FIRST child of the
   content band 1048:492522. Mobile 1048:498761 "new" (393 x 905).

   1048:492522 is one of THREE alternates stacked at y=946 in the file. The
   other two (1048:492349, 1048:492435) are visible:false and are not built.
   1048:492522 draws its own page background; this band is transparent over it.

   NOT built: 1048:492543, the "No login. No fee. No «contact us.» …" line
   under the heading, which is visible:false in the file.

   This is a LIGHT band. Ink is #0D0D0D, cards are white.
   ========================================================================= */

/* the page background for the whole content band 1048:492522 (1512x2279) */
.afxhw-light {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 52.74%, #EBEDF2 92.52%);
  font-family: var(--font-sans);
  color: #0D0D0D;
}

/* 1048:492523 — 1512x1136, col, gap 40, padding 100/40 */
.afxhw-steps {
  position: relative;
  isolation: isolate;
  height: 1136px;
  padding: 100px 40px;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  overflow: hidden;
}

/* 1048:492524 "vector" — a 2011.5x836.5 group of two 0.21-opacity hairline
   arcs plus a soft radial. Exported as ONE image; rebuilding two gradient-
   stroked bezier paths in CSS is not possible and not worth it. Drawn from
   x 0.5 y 400, i.e. it overhangs the 1512 frame by ~500px to the right. */
.afxhw-steps__art {
  position: absolute; left: 50%; margin-left: -755.5px; top: 400px;
  width: 2012px; height: 837px;
  background: url('/assets/figma/hiw-steps-art.webp') 0 0 / 2012px 837px no-repeat;
  pointer-events: none;
}

/* ---- 1048:492528 — heading block, 469x177 at (521.5, 100), col gap 32 ---- */
.afxhw-steps__head {
  position: relative; z-index: 1;
  width: 469px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* 1048:492530 — 106x33, radius 57, row gap 7, padding 6/0 */
.afxhw-steps__eyebrow {
  margin: 0;
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 6px 0; box-sizing: border-box;
  border-radius: 57px;
  font-weight: var(--w-medium); font-size: 14px; line-height: 21px;
  letter-spacing: -.42px;
  color: #0D0D0D; white-space: nowrap;
}
.afxhw-steps__eyebrow img { width: 16px; height: 16px; display: block; flex: none; }

/* 1048:492540 — two 64px lines, gap 0, centred.
   1048:492541 "From sign-up" carries a 165.4deg #0D0D0D -> #CECECE ramp;
   1048:492542 "to payout" is flat #0D0D0D. */
.afxhw-steps__h2 {
  margin: 0; width: 469px;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-display);
  font-weight: var(--w-medium); font-size: 64px; line-height: 64px;
  letter-spacing: -1.92px;
  color: #0D0D0D;
}
.afxhw-steps__h2 span:first-child {
  background: linear-gradient(165.4deg, #0D0D0D 0%, #CECECE 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* ink guard, per 4cdf511: background-clip:text paints only inside the border
     box, so at 100% leading the "g" and "p" descenders get no paint at all. */
  padding-bottom: .2em; margin-bottom: -.2em;
}

/* ---- 1048:492544 — the grid, 1432x623 at (40, 317), col gap 25 ---------- */
.afxhw-steps__grid {
  position: relative; z-index: 1;
  width: 1432px;
}
/* the track is the mobile carousel's scroll container; on desktop it is just
   the two rows, and it has to carry the 25px gap itself — as a plain block it
   collapsed 1048:492544 from 623 to 598 and put row 2 25px high. */
.afxhw-steps__track { display: flex; flex-direction: column; gap: 25px; }
/* 1048:492545 / 1048:492567 — rows, 1432x299, row gap 25 */
.afxhw-steps__row { position: relative; display: flex; flex-direction: row; gap: 25px; }

/* 1048:492546 etc — card, 703.5x299, radius 32, padding 24, row gap 24.
   Two stacked fills: flat #FFFFFF under a 0deg rgba(235,237,242,.5) 30% ->
   rgba(142,188,185,.32) 100% ramp. */
.afxhw-card {
  width: 703.5px; height: 299px; box-sizing: border-box;
  padding: 24px;
  border-radius: var(--r-32);
  background:
    linear-gradient(0deg, rgba(235,237,242,.5) 30%, rgba(142,188,185,.32) 100%),
    var(--af-white);
  display: flex; flex-direction: row; gap: 24px;
}
/* 1048:492548 — text column, 315.8x251, SPACE_BETWEEN */
.afxhw-card__text {
  width: 315.8px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.afxhw-card__top { display: flex; flex-direction: column; gap: 16px; }
/* 1048:492550 — badge, 36 tall, radius 57, padding 8/12, gap 4 */
.afxhw-card__badge {
  margin: 0;
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  height: 36px; padding: 8px 12px; box-sizing: border-box;
  border-radius: 57px;
  background: linear-gradient(73.7deg,
    rgba(5,63,59,.12) 0%, rgba(5,63,59,.0948) 59.83%, rgba(255,255,255,.12) 100%);
  backdrop-filter: blur(8.35px); -webkit-backdrop-filter: blur(8.35px);
  font-weight: var(--w-medium); font-size: 16px; line-height: 16px;
  letter-spacing: -.96px;
  color: rgba(5,63,59,.8);
}
.afxhw-card__badge img { width: 20px; height: 20px; display: block; flex: none; }
/* 1048:492553 — SF Pro 590 24/31.68, ls -.72 */
.afxhw-card__h3 {
  margin: 0;
  font-weight: var(--w-semi); font-size: 24px; line-height: 31.68px;
  letter-spacing: -.72px;
  color: #0D0D0D;
}
/* 1048:492554 — SF Pro 510 20/26.4, ls -.6, #3F4547 */
.afxhw-card__p {
  margin: 0;
  font-weight: var(--w-medium); font-size: 20px; line-height: 26.4px;
  letter-spacing: -.6px;
  color: #3F4547;
}
/* 1048:492555 etc — art frame 315.8x251. Each card places a DIFFERENT size at
   a different offset inside it; there is no shared rule, so all four are set
   explicitly from their nodes (offsets relative to the art frame's own box):
     1048:492556  252x252 at ( 32, -1)   FILL
     1048:492566  288x288 at ( 13.9, -19) STRETCH
     1048:492577  232x232 at ( 42.6,  10) STRETCH
     1048:492587  252x252 at ( 32.6,   0) FILL */
.afxhw-card__art { width: 315.8px; height: 251px; position: relative; flex: none; }
.afxhw-card__art img { position: absolute; display: block; }
.afxhw-card--1 .afxhw-card__art img { left: 32px;   top: -1px;  width: 252px; height: 252px; }
.afxhw-card--2 .afxhw-card__art img { left: 13.9px; top: -19px; width: 288px; height: 288px; }
.afxhw-card--3 .afxhw-card__art img { left: 42.6px; top: 10px;  width: 232px; height: 232px; }
.afxhw-card--4 .afxhw-card__art img { left: 32.6px; top: 0;     width: 252px; height: 252px; }

/* 1048:492588 / 1048:492589 — 60x60 connector discs at x 726, straddling the
   gap between the two cards of each row. Radius 120, #F9F9F7, shadow. */
.afxhw-steps__link {
  position: absolute; left: 686px; top: 119.5px;
  width: 60px; height: 60px; box-sizing: border-box;
  border-radius: var(--r-round);
  background: var(--af-beige);
  box-shadow: 0 8px 12px 0 rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center;
  z-index: 2; pointer-events: none;
}
.afxhw-steps__link img { width: 28px; height: 28px; display: block; }

/* 1048:492590 — lime CTA, 241x56 at (635.5, 980) */
.afxhw-steps__cta { position: relative; z-index: 1; }

/* ------------------------------------------------------------- responsive
   The 1432 grid is fixed and the band clips, so between the mobile breakpoint
   and 1512 both cards were cut off at the edges with no way to scroll to
   them — at 1120 the headings read "model" and "et". 393 is the only frame
   below 1512, so everything between is derived. */
@media (max-width: 1511px) {
  .afxhw-steps { height: auto; }
  .afxhw-steps__grid { width: 100%; max-width: 1432px; }
  .afxhw-card { width: auto; flex: 1 1 0; min-width: 0; }
  .afxhw-card__text { flex: 1 1 auto; min-width: 0; }
  .afxhw-card__art { flex: 0 0 auto; }
  /* the connector disc is pinned to the 1432 row's centre gap */
  .afxhw-steps__link { left: 50%; margin-left: -30px; }
}
@media (max-width: 1240px) and (min-width: 761px) {
  /* below this the 252px art plus a readable text column no longer fits two
     cards to a row, so the four steps run one per row */
  .afxhw-steps__row { flex-direction: column; gap: 25px; }
  .afxhw-steps__link { display: none; }
  .afxhw-card { width: 100%; flex: none; }
}

/* ============================ mobile — 1048:498761, 393x905 ==============
   Same four cards, but a horizontal swipe carousel: a 1404x388 row of 342-wide
   cards, gap 12, clipped to a 345 window at x 24, with a 200px progress rail
   at y 709. Cards here are radius 24 and column-flow (art ABOVE text). */
@media (max-width: 760px) {
  .afxhw-steps {
    height: 905px;
    padding: 100px 0;
    gap: 40px;
  }
  /* 1048:498762 — the same art group, scaled to 1151x479 at (-189.5, 476) */
  .afxhw-steps__art {
    left: -189.5px; margin-left: 0; top: 476px;
    width: 1151px; height: 479px;
    background-size: 1151px 479px;
  }

  .afxhw-steps__head { width: 345px; gap: 8px; }
  /* 1048:498780/81 — 42/42, ls -1.26 */
  .afxhw-steps__h2 { width: 345px; font-size: 42px; line-height: 42px; letter-spacing: -1.26px; }

  /* 1048:498782 — the carousel, 345x444 at x 24. A 345 box centred in the 393
     frame, NOT a full-width box with 24px padding: the padded version measured
     393 wide at x 0 and the whole band's x chain was off by 24. The track then
     overflows it deliberately so cards can scroll past the edge. */
  .afxhw-steps__grid { width: 100%; margin: 0; padding: 0; display: block; }
  /* The scroller runs the full 393 and carries the 24px gutter as padding, so
     card 1 lands on the drawn x=24 and 15px of card 2 peeks past the right
     edge exactly as 1048:498795 is drawn. Clipping to a 345 window instead
     loses that peek, which is the only affordance saying there is more. */
  .afxhw-steps__track {
    display: flex; flex-direction: row; gap: 12px;
    padding: 0 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .afxhw-steps__track::-webkit-scrollbar { display: none; }
  .afxhw-steps__row { display: contents; }

  /* 1048:498786 "01" — 342x388, radius 24, padding 16, col gap 16 */
  .afxhw-card {
    width: 342px; height: 388px; flex: none;
    padding: 16px;
    border-radius: var(--r-24);
    /* Reading order on mobile is badge -> heading -> ART -> body, so the art
       sits BETWEEN the two halves of the text column. `display: contents` on
       the text column lifts its two children into the card's own flex box so
       the art can be ordered between them; column-reverse put the art on top
       and read badge/heading/body underneath it, which is not the design. */
    flex-direction: column; gap: 16px;
    scroll-snap-align: start;
    background:
      linear-gradient(0deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.1) 100%),
      linear-gradient(0deg, #FFFFFF 30%, rgba(142,188,185,.32) 100%),
      var(--af-white);
    position: relative;
  }
  .afxhw-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 100%);
    -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;
  }
  .afxhw-card__text { display: contents; }
  .afxhw-card__top { order: 1; }
  .afxhw-card__p {
    order: 3; margin-top: auto;
    font-size: 16px; line-height: 21.12px; letter-spacing: -.48px;
  }
  .afxhw-card__art { order: 2; width: 100%; height: 190px; flex: 0 0 auto; }
  .afxhw-card--1 .afxhw-card__art img,
  .afxhw-card--2 .afxhw-card__art img,
  .afxhw-card--3 .afxhw-card__art img,
  .afxhw-card--4 .afxhw-card__art img {
    left: 50%; top: 0; margin-left: -95px; width: 190px; height: 190px;
  }

  /* 1048:492588/89 discs are desktop-only */
  .afxhw-steps__link { display: none; }

  /* 1048:498822 — progress rail, 200x4 at x 73 of the 345 window, thumb 80.
     The drawn line sits at y 444 of a 388-tall card row, so 52 + 4 lands the
     group on the drawn 444 total. */
  .afxhw-steps__rail {
    width: 200px; height: 4px; margin: 52px auto 0;
    border-radius: 2px;
    background: rgba(5,63,59,.16);
    position: relative;
  }
  .afxhw-steps__rail i {
    position: absolute; left: 0; top: 0; width: 80px; height: 4px;
    border-radius: 2px; background: var(--af-teal);
    transform: translateX(0);
  }
}
@media (min-width: 761px) { .afxhw-steps__rail { display: none; } }