/* ============================================================================
   Pay Later v2 — band 5, "Start Today, Pay Later" / "From sign-up to paid in
   three steps".  Figma 930:22677 "Frame 2147259211" (1512 x 1894), page
   930:22278, file rijNBFC24rPaqbSoj29uvJ.
   Every dimension, colour, gradient and blur below was read out of the node
   JSON via tools/figma/fx.py. Do not hand-tune: re-extract instead.

   RELATIONSHIP TO assets/atlas-steps.css (home band 705:16456)
   -----------------------------------------------------------
   This band is the same drawn component at the same 1512 x 1894, so the art
   stack (conic bloom, three glass discs, the "Step n" pill, the glass badge)
   resolves to byte-identical numbers. Those were re-derived from 930:22677's
   own JSON rather than copied on faith, and they matched. What genuinely
   DIFFERS from the home band, and is therefore the reason this file exists
   rather than a class alias:
     - the header sits at y 24, not y 0, so the trailing pad is 100 not 124;
     - the CTA sits at y 1738, not 1714;
     - step 2's render is a different image fill (5c872ef6..., not 025ae8...)
       and carries node opacity 0.8;
     - steps 2 and 3 have their own pill icons (hourglass / trend-up), where
       the home band repeats the coin;
     - the S-curve is a different path — 1072.34 wide here, 1089 on home —
       drawn as TWO stacked vectors, and it sits 24px lower.
   Everything the two bands share is served from the same asset files; nothing
   was re-exported that already existed.

   GRADIENTS: re-derived from gradientHandlePositions in pixel space, not taken
   from fx.py's printout — fx.py projects the handle in normalised box space and
   drops the aspect ratio. The band fill is 180deg so it survives that, but the
   heading ramp is 120.95deg (not 165.4), the pill 83.41deg (not 73.7) and the
   badge text 117.09deg (not 157.8).

   PAINT OPACITY: the REST `spec` view omits per-paint opacity. Several fills
   here carry one (the Step pill gradient is 9%, the glass discs 10/15/40%, the
   two white "blur" plates 10%), so those were read straight off the raw fill
   JSON and folded into the rgba() alphas or given a dedicated layer.

   DECLARED DEVIATIONS
   -------------------
   1. The Figma frame is NOT clipped (clipsContent:false), so the hairline
      sweep 930:22747 (2011.5 wide) and the S-curve bleed past the 1512 edge.
      On a real page band that pushes a horizontal scrollbar, so the section
      clips.
   2. 930:22752 and 930:22753 are the SAME path stroked twice — node opacity
      .45 over node opacity .21, adjacent siblings with nothing between them.
      They are pre-composited into one WebP (pl2-steps-scurve.webp) rather than
      shipped as two stacked images: identical result, half the bytes. The
      export covers absoluteRenderBounds, which is 1px larger than the bounding
      box on every side, hence the (218.1, 268.8) / 1074.34 x 1450.88 placement
      against a (219.1, 269.8) / 1072.34 x 1448.88 node.
   3. 930:22742 — a second, duplicate icon inside step 3's pill — is
      visible:false in the file and is NOT built.
   4. The three discs and the two white plates carry Figma BACKGROUND_BLUR.
      Those are kept as backdrop-filter (none of them also carries a blend
      mode, so the frosted-plate failure does not apply here).
   5. The badge's INNER_SHADOW is blendMode LINEAR_DODGE. CSS cannot blend an
      inset shadow, so it ships as a plain inset shadow at the drawn colour.
   6. The 1073 column is centred with `auto`, which lands it at x 219.5 against
      the drawn 220. Half a pixel, and it is what keeps the band centred at
      widths other than exactly 1512.
   7. The CTA ink is #001D21 (--af-ink-teal), stated explicitly on the anchor so
      it can never inherit a link colour. That is the file's value; it is NOT
      --af-lime-ink.
   ========================================================================= */

/* --- 930:22677, the frame itself. 1894 = 1794 content bottom + 100. ------- */
.pl2-steps {
  position: relative;
  overflow: hidden;
  padding: 0 0 100px;
  background: linear-gradient(180deg, #FFFFFF 52.74%, #EBEDF2 92.52%);
  isolation: isolate;
}

/* --- 930:22678 / 930:22679 — header 469 wide at frame x 522 (centred),
       column, gap 16, top edge at y 24. The 930:22678 wrapper is a single-child
       auto-layout (gap 64 with nothing to space), so it collapses away. ----- */
.pl2-steps__head {
  position: relative; z-index: 2;
  width: 469px; margin: 24px auto 0; text-align: center;
}

/* 930:22680 — eyebrow row 163x33, gap 7, padding 6 0. SF Pro 510/14/21 ls -3%.
   Characters 13..21 carry a fills override at 60% — same colour, lower alpha —
   which is why "Pay Later" reads grey. This IS the Pay Later page, so the
   drawn string ships verbatim. */
.pl2-steps__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0; padding: 6px 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  color: #0D0D0D;
}
.pl2-steps__eyebrow img { display: block; width: 16px; height: 16px; }
.pl2-steps__eyebrow i { font-style: normal; color: rgba(13,13,13,.6); }

/* 930:22690 — heading 469x128 at y 73, gap 0, two 64/64 lines, ls -3%.
   930:22691 line 1 is gradient-filled, 930:22692 line 2 is flat #0D0D0D. */
.pl2-steps__title {
  margin: 16px 0 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 64px; line-height: 64px; letter-spacing: -1.92px;
  color: #0D0D0D;
}
.pl2-steps__title span { display: block; }
.pl2-steps__titleFade {
  background: linear-gradient(120.95deg, #0D0D0D 63%, #CECECE 93.18%);
  -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;
}

/* --- 930:22693 — the three rows, 1073 wide at frame x 220, column, gap -70
       (they deliberately overlap). Header ends at 201, rows start at 228, so
       27 of clear air. 550 * 3 - 70 * 2 = 1510. ---------------------------- */
.pl2-steps__steps { position: relative; z-index: 1; width: 1073px; margin: 27px auto 0; }

/* 930:22694 / 930:22715 / 930:22724 — row 1073x550, gap 60, align CENTER.
   509.1 art + 60 + 503.9 card = 1073. Rows 1 and 3 put the art on the left.
   The card is first in the DOM in every row so the reading order is always
   badge -> heading -> body; row-reverse does the visual swap without touching
   source order. */
.pl2-steps__row {
  position: relative;
  display: flex; flex-direction: row; align-items: center; gap: 60px;
  height: 550px;
}
.pl2-steps__row--artLeft { flex-direction: row-reverse; }
.pl2-steps__row + .pl2-steps__row { margin-top: -70px; }

/* 930:22714 / 930:22716 / 930:22732 — the step card, 503.9x176, column, gap 24.
   Card top is 415 / 895 / 1375, i.e. (550 - 176) / 2 inside its row. */
.pl2-steps__card { position: relative; z-index: 2; width: 503.9px; flex: none; }

/* Frame 2147259209 — the 503.9x36 row the pill lives in. A flex wrapper, not a
   bare inline-flex, so no baseline descender slack creeps into the 24px gap. */
.pl2-steps__pillrow { display: flex; align-items: flex-start; height: 36px; }

/* Frame 2147259177 — "Step n" pill, 36 tall, row, gap 4, padding 8/12,
   radius 57. Width is hug: 91 for "Step 1", 94 for steps 2 and 3, which is
   exactly what 12 + 20 + 4 + textWidth + 12 produces, so it is left to hug.
   Fill is linear-gradient(83.41deg, #053F3B -4.5%, rgba(5,63,59,.79) 61.69%,
   #FFF 106.13%) at PAINT OPACITY .09 — that 9% is why it reads as a pale mint
   wash rather than a dark green pill. It is applied on its own layer so the
   ramp stays readable. Backdrop blur 16.7 (Figma) -> 8.35 (CSS).
   The pill's own 1px INSIDE gradient stroke is visible:false — not built. */
.pl2-steps__pill {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 4px;
  height: 36px; padding: 8px 12px; box-sizing: border-box;
  border-radius: 57px;
  -webkit-backdrop-filter: blur(8.35px); backdrop-filter: blur(8.35px);
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 16px; letter-spacing: -.96px;
  color: var(--af-deep);
}
.pl2-steps__pill::before {
  content: ''; position: absolute; inset: 0; opacity: .09; pointer-events: none;
  background: linear-gradient(83.41deg, #053F3B -4.5%, rgba(5,63,59,.79) 61.69%, #FFFFFF 106.13%);
}
.pl2-steps__pill img { position: relative; display: block; width: 20px; height: 20px; }
.pl2-steps__pill span { position: relative; opacity: .8; }

/* Frame 2147259811 — copy block, 24 below the pill, column, gap 12.
   heading  SF Pro 590/24/31.68 ls -3% #0D0D0D
   body     SF Pro 510/20/26.4  ls -3% #3F4547
   The heading node is layoutSizingVertical:FIXED at 26 — the designer pulled
   the box in tighter than its own 31.68 line box, which is why the copy frame
   hugs to 116 (26 + 12 + 78) and not 122.9. Reproduced with an explicit 26px
   height: the line box still renders from the top edge, exactly as Figma
   draws it, and the 5.7px of leading simply overhangs. Without this the card
   measures 182.9 instead of 176 and centres ~3.4px high in its 550 row.
   Released back to auto below 1152, where the type ramp changes. */
.pl2-steps__h3 {
  margin: 24px 0 0; height: 26px;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 24px; line-height: 31.68px; letter-spacing: -.72px;
  color: #0D0D0D;
}
.pl2-steps__p {
  margin: 12px 0 0;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 20px; line-height: 26.4px; letter-spacing: -.6px;
  color: #3F4547;
}

/* --- the art: 509.1 x 550 — three concentric glass discs over a blurred
       conic bloom, with the render on top. --------------------------------- */
.pl2-steps__art { position: relative; width: 509.1px; height: 550px; flex: none; }

/* 930:22697 / 22719 / 22727 — GRADIENT_ANGULAR (conic), 447.2x361.5 at
   (31.5, 0), node opacity .2, LAYER_BLUR 168.44. Figma's blur radius is ~2x
   the CSS one, so it ships as blur(84.22px). The handle resolves to a start
   angle of 224.8deg once the 447.2 x 361.5 aspect is put back. */
.pl2-steps__bloom {
  position: absolute; left: 31.5px; top: 0; width: 447.2px; height: 361.5px;
  opacity: .2; filter: blur(84.22px); border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 224.8deg at 50% 50%,
              #053F3B 27.58%, #7CB1AC 58.86%, #053F3B 75.48%, #F4F7FF 96.21%);
}

/* Ellipse 14478 / 14477 / 14476 — the discs. Stroke is .696 wide and CENTER
   aligned, drawn as a 1px gradient ring via the padding/mask recipe because a
   border cannot take a gradient. BACKGROUND_BLUR 34.82 -> backdrop blur 17.41
   on all three. */
.pl2-steps__disc {
  position: absolute; border-radius: 50%; pointer-events: none;
  -webkit-backdrop-filter: blur(17.41px); backdrop-filter: blur(17.41px);
}
.pl2-steps__disc::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* fill paint opacity .10, so .18 x .10 = .018 */
.pl2-steps__disc--1 {
  left: 0; top: 40.9px; width: 509.096px; height: 509.096px;
  background: linear-gradient(180deg, rgba(5,63,59,.018) 0%, rgba(5,63,59,0) 100%);
}
.pl2-steps__disc--1::before { background: linear-gradient(115.75deg, #D4F6F1 16.2%, rgba(255,255,255,0) 29.91%); }
/* fill paint opacity .15 */
.pl2-steps__disc--2 {
  left: 57.3px; top: 98.2px; width: 394.565px; height: 394.565px;
  background: linear-gradient(180deg, rgba(98,156,150,.15) 0%, rgba(88,147,142,0) 100%);
}
.pl2-steps__disc--2::before { background: linear-gradient(115.75deg, #FFFFFF 16.2%, rgba(255,255,255,0) 29.91%); }
/* fill paint opacity .40, stroke paint opacity .50 */
.pl2-steps__disc--3 {
  left: 115.8px; top: 156.7px; width: 277.517px; height: 277.517px;
  background: linear-gradient(115.18deg, rgba(255,255,255,.16) 17.39%, rgba(255,255,255,.004) 50.85%);
}
.pl2-steps__disc--3::before { background: linear-gradient(117.02deg, rgba(255,255,255,.5) 16.92%, rgba(255,255,255,0) 41.98%); }

/* 930:22701 / 22723 / 22731 — the renders. Every fill is STRETCH or FILL, never
   COVER, so width and height do the scaling and the intrinsic ratio is
   deliberately ignored (image 1183 is a 1:1 source drawn 453x330).
   930:22723 additionally carries node opacity 0.8. */
.pl2-steps__render { position: absolute; z-index: 1; display: block; pointer-events: none; }
.pl2-steps__render--1 { left: 67px; top: 106px; width: 375px; height: 375px; }
.pl2-steps__render--2 { left: 54px; top: 74px;  width: 402px; height: 402px; opacity: .8; }
.pl2-steps__render--3 { left: 28px; top: 114px; width: 453px; height: 330px; }

/* 930:22702 — the badge that overlaps step 1's render. 283x58 at (31,218),
   row, gap 6, padding 8/24, radius 58, fill rgba(255,255,255,.2), GLASS,
   drop shadow 6/12/17.6 rgba(0,0,0,.35),
   inner shadow 3/-4/4.8 rgba(108,178,171,.26).
   930:22713 — SF Pro 860/28/42 ls -3%, gradient text 117.09deg. The node also
   carries a solid #FFF fill UNDER the gradient; the gradient is opaque, so the
   white never shows and is not built. */
.pl2-steps__badge {
  position: absolute; z-index: 2; left: 31px; top: 218px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 283px; height: 58px; padding: 8px 24px; box-sizing: border-box;
  border-radius: 58px;
  background: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 6px 12px 17.6px rgba(0,0,0,.35),
              inset 3px -4px 4.8px rgba(108,178,171,.26);
  pointer-events: none;
}
.pl2-steps__badge img { display: block; width: 28px; height: 28px; }
.pl2-steps__badge span {
  font-family: var(--font-display); font-weight: var(--w-heavy);
  font-size: 28px; line-height: 42px; letter-spacing: -.84px;
  white-space: nowrap;
  background: linear-gradient(117.09deg, #263F42 47.06%, #6D9E9B 105.78%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- 930:22747 — the hairline sweep. It is the LAST child of row 3, at row
       (-220, 41), i.e. frame x 0 / y 1229. Two 21%-opacity stroked vectors plus
       the white radial plate 930:22750 that fades their right end; all three
       are already inside band-curve-lines.svg, the same group the home and Why
       bands use (gradient stops verified stop-for-stop against 930:22748 and
       930:22749). It is a full-bleed BACKGROUND, so it is anchored to the
       viewport centre rather than to the 1073 column. ---------------------- */
.pl2-steps__lines {
  position: absolute; z-index: 3; left: 50%; top: 41px;
  width: 2011.5px; height: 836.5px; margin-left: -756px;
  background: url('/assets/figma/band-curve-lines.svg') no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

/* --- 930:22751 — the lime CTA, 241x56 at (636,1738). Rows end at 1738, so it
       is flush. Radius 100. 1.5 INSIDE gradient stroke at paint opacity .6.
       Ink is the file's #001D21, stated, never inherited. ------------------ */
.pl2-steps__cta {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 241px; height: 56px; margin: 0 auto;
  padding: 18px 32px; box-sizing: border-box;
  border-radius: var(--r-pill);
  background: var(--af-lime);
  box-shadow: 2px 14px 24.1px rgba(38,63,66,.12);
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  text-transform: capitalize;          /* Figma textCase: TITLE */
  text-decoration: none;
  color: var(--af-ink-teal);
}
.pl2-steps__cta::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(125.04deg,
              rgba(5,63,59,.6) 40.72%, rgba(5,63,59,.162) 68.58%, rgba(5,63,59,.6) 94.89%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.pl2-steps__cta img {
  display: block; width: 20px; height: 20px;
  margin: 0 -2px;                      /* the chevron slot is a 16px frame; the
                                          20px glyph overflows it 2px each side */
}

/* --- 930:22752 + 930:22753 — the S-curve that threads the three steps
       together. Both sit after the CTA in child order, so they draw over the
       cards AND the button. Pre-composited (see deviation 2); placed on
       absoluteRenderBounds, not the bounding box. -------------------------- */
.pl2-steps__scurve {
  position: absolute; z-index: 3; left: 50%; top: 268.8px;
  width: 1074.34px; height: 1450.88px; margin-left: -537.9px;
  background: url('/assets/figma/pl2-steps-scurve.webp') no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

/* --- 930:22754 — the last child of the frame: a 548.08 x 195.02 white radial
       plate at (760,1174) that softens the S-curve where it crosses between
       rows 2 and 3. Fill paint opacity .10; BACKGROUND_BLUR 5 -> blur(2.5px).
       Handles are centre / (0.5,1) / (0,0.5), i.e. an ellipse exactly filling
       the box. Fixed 1512 STAGE geometry, so anchored to the viewport centre. */
.pl2-steps__sheen {
  position: absolute; z-index: 4; left: 50%; top: 1174px;
  width: 548.081px; height: 195.018px; margin-left: 4px;   /* 760 - 756 */
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
              rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  pointer-events: none;
}

/* ============================================================================
   Motion. Existing tokens only, transform and opacity only. Nothing drifts on
   its own — the discs, the sweep and the S-curve are static, as drawn.
   ========================================================================= */
.pl2-steps__cta { transition: transform var(--t-instant) var(--e-out),
                              box-shadow var(--t-fast) var(--e-out); }
.pl2-steps__cta img { transition: transform var(--t-fast) var(--e-out); }
.pl2-steps__cta:active { transform: scale(.97); }
.pl2-steps__render { transition: transform var(--t-slow) var(--e-out); }

@media (hover: hover) and (pointer: fine) {
  .pl2-steps__cta:hover { box-shadow: 2px 18px 30px rgba(38,63,66,.18); }
  .pl2-steps__cta:hover img { transform: translateX(2px); }
  .pl2-steps__row:hover .pl2-steps__render { transform: translateY(-4px); }
}
.pl2-steps__cta:focus-visible {
  outline: 2px solid var(--af-deep); outline-offset: 3px;
  transition: outline-offset var(--t-fast) var(--e-out);
}

/* ============================================================================
   Below 1512 the 1073 column no longer fits. The rows stack, the negative gap
   goes away, and the three decorative sweeps are dropped rather than left to
   float over a layout they were never drawn for.
   ========================================================================= */
@media (max-width: 1152px) {
  .pl2-steps { padding-bottom: 80px; }
  .pl2-steps__head { width: 100%; max-width: 469px; padding: 0 var(--gutter); box-sizing: border-box; }
  .pl2-steps__title { font-size: 48px; line-height: 50px; letter-spacing: -1.44px; }
  .pl2-steps__steps { width: 100%; max-width: 1073px; padding: 0 var(--gutter); box-sizing: border-box; }
  .pl2-steps__row { gap: 32px; }
  .pl2-steps__card { width: auto; flex: 1 1 auto; min-width: 0; }
  .pl2-steps__h3 { height: auto; }
  .pl2-steps__lines, .pl2-steps__scurve, .pl2-steps__sheen { display: none; }
}
@media (max-width: 860px) {
  .pl2-steps__title { font-size: 36px; line-height: 38px; letter-spacing: -1.08px; }
  .pl2-steps__row, .pl2-steps__row--artLeft { flex-direction: column; height: auto; gap: 8px; }
  .pl2-steps__row + .pl2-steps__row { margin-top: 32px; }
  .pl2-steps__art { transform: scale(.78); transform-origin: top center; margin-bottom: -120px; }
  .pl2-steps__card { width: 100%; }
  .pl2-steps__p { font-size: 18px; line-height: 24px; }
}