/* ============================================================================
   Pay Later v2 — hero band.  Figma 930:22280 (1512 x 890), page 930:22278.
   Every value read from the node JSON via tools/figma/fx.py. Do not hand-tune.

   Declared deviations from the file:
   - Ellipse 473 carries LAYER_BLUR 258.2 and a BACKGROUND_BLUR. Figma's blur
     radius is ~2x the CSS one, so it ships as blur(129px). The backdrop blur is
     dropped: Chrome renders backdrop-filter on a blended element as an opaque
     frosted plate, nothing like Figma's BACKGROUND_BLUR.
   - The second CTA "Start your challenge" (930:22309) is visible:false in the
     file and is therefore NOT built.
   ========================================================================= */

.pl2-hero { position: relative; height: 890px; overflow: hidden; isolation: isolate; }

/* frame fill — image 40671a0c…, scaleMode FILL */
.pl2-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}

/* Ellipse 473 — x -645, y 91, 1693x956, #051F1D, HARD_LIGHT */
.pl2-hero__glow {
  position: absolute; left: 50%; margin-left: -1401px; top: 91px;
  width: 1693px; height: 956px; border-radius: 50%;
  background: var(--af-hero-glow, #051F1D);
  filter: blur(129px); mix-blend-mode: hard-light;
  pointer-events: none; z-index: 1;
}

/* Overlay — 1512x900, linear 89.8deg */
.pl2-hero__overlay {
  position: absolute; left: 0; right: 0; top: 0; height: 900px;
  background: linear-gradient(89.8deg,
    rgba(5,63,59,0.62) 0%, rgba(194,213,213,0) 21.36%,
    rgba(194,213,213,0) 83.19%, rgba(5,63,59,0.4) 100%);
  pointer-events: none; z-index: 2;
}

/* navbar layer — .afx-nav positions itself with margin:10px auto 0 */
.pl2-hero__inner { position: relative; z-index: 4; }

/* fixed 1512 stage that positions content — must stay centred above 1512 */
.pl2-hero__stage {
  position: absolute; left: 50%; margin-left: -756px; top: 0;
  width: 1512px; height: 890px; z-index: 3;
}

/* ---- copy block — Frame 1707479920, x 46 y 187, 1054 wide, column gap 32 -- */
.pl2-hero__copy {
  position: absolute; left: 46px; top: 187px; width: 1054px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
}

/* badge — 109x28, r9, pad 2/8, gap 7 */
.pl2-hero__badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 2px 8px; border-radius: 9px; position: relative;
  min-width: 109px;                   /* the file fixes the pill at 109 */
  background: linear-gradient(73.7deg,
    rgba(124,177,172,0.1) 0%, rgba(255,255,255,0.1) 47.67%, rgba(124,177,172,0.1) 100%);
  backdrop-filter: blur(16.7px); -webkit-backdrop-filter: blur(16.7px);
  box-shadow: 8px 10px 24px rgba(5,63,59,0.13);
}
/* 1px INSIDE gradient stroke at 41% — a border cannot take a gradient */
.pl2-hero__badge::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(163deg, rgba(255,255,255,0.41) 0%, rgba(255,255,255,0.06) 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;
}
.pl2-hero__badge img { display: block; width: 16px; height: 16px; }
.pl2-hero__badge span {
  font-family: var(--font-sans); font-weight: var(--w-semi);
  font-size: 16px; line-height: 24px; letter-spacing: -0.48px; color: var(--af-white);
}

/* h1 — SF Pro 510, 110px / 99px, ls -3.3 */
.pl2-hero__h1 {
  margin: 0; width: 1054px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 110px; line-height: 99px; letter-spacing: -3.3px; color: var(--af-white);
}

/* lead — DM Sans 500, 18/27, 570 wide */
.pl2-hero__lead {
  margin: 0; width: 570px;
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; color: var(--af-white);
}

/* lime CTA — 181x49, r28, pad 14/36, gap 8, 1.5px INSIDE gradient stroke */
.pl2-hero__cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 49px; padding: 14px 36px; border-radius: 28px;
  background: var(--af-lime);
  color: var(--af-ink-teal);          /* never inherit link colour onto lime */
  text-decoration: none;
  /* --font-display, NOT --font-ui. This was the one button on the site set in
     DM Sans: .pl2-lowrisk__cta, .pl2-steps__cta, .pl2-final__lime and
     .afxp-cta all use the display face, so the hero CTA was the odd one out
     and it read as a different font next to every other button on the page.
     Measured, not guessed - computed fontFamily on all six CTAs, 5 Aug 2026.
     This is a SHARED component, so /pay-later's hero button changes with it;
     that button had the same inconsistency. */
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 20.83px; letter-spacing: -0.48px;
  text-transform: capitalize;         /* Figma textCase: TITLE */
  white-space: nowrap;
}
.pl2-hero__cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(161deg, rgba(5,63,59,0.35) 0%, rgba(255,255,255,0.5) 100%);
  mix-blend-mode: hard-light;
  -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;
}
.pl2-hero__cta img {
  display: block; width: 20px; height: 20px;
  margin: 0 -2px;                     /* 930:22307 is a 16px slot; the 20px
                                         glyph overflows it 2px each side */
}

/* ---- stats — three 449x90 columns at x 46 / 534 / 1022, y 781 ------------ */
.pl2-hero__stats {
  position: absolute; left: 46px; top: 781px;
  display: grid; grid-template-columns: repeat(3, 449px); column-gap: 39px;
}
.pl2-hero__stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 17px; width: 449px;
}
.pl2-hero__stat::before {
  content: ""; display: block; width: 436px; height: 1px;
  margin-bottom: -1px;                /* Vector 3168 is a zero-height stroked
                                         LINE: it paints 1px, occupies none */
  background: rgba(255,255,255,0.25);
}
.pl2-hero__statBody { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pl2-hero__statLabel {
  margin: 0; font-family: var(--font-alt); font-weight: var(--w-regular);
  font-size: 14px; line-height: 21px; color: var(--af-white); opacity: 0.8;
}
.pl2-hero__statValue {
  margin: 0; font-family: var(--font-alt); font-weight: var(--w-semi);
  font-size: 32px; line-height: 48px; color: var(--af-white);
}

/* ---- 393 — Figma 930:23469 (393 x 852), the frame confirmed canonical ---- */
@media (max-width: 1023px) {
  .pl2-hero { height: 852px; }
  .pl2-hero__stage { left: 0; margin-left: 0; width: 100%; height: 852px; }
  .pl2-hero__glow { margin-left: -846px; top: 60px; }
  .pl2-hero__overlay { height: 852px; }
  .pl2-hero__copy { left: 24px; top: 152px; width: calc(100% - 48px); gap: 24px; }
  .pl2-hero__h1 { width: 100%; font-size: 44px; line-height: 46px; letter-spacing: -1.32px; }
  .pl2-hero__lead { width: 100%; font-size: 16px; line-height: 24px; }
  .pl2-hero__stats {
    left: 24px; top: 700px; width: calc(100% - 48px);
    grid-template-columns: repeat(3, 1fr); column-gap: 12px;
  }
  .pl2-hero__stat { width: auto; gap: 12px; }
  .pl2-hero__stat::before { width: 100%; }
  .pl2-hero__statValue { font-size: 22px; line-height: 30px; }
}