/* ============================================================================
   Models Overview band 4 — the Pay Later art-led band.
   Figma 1048:438498 (1512 x 1087) / mobile 1048:485693 (393 x 1281).

   DECLARED DEVIATION — account sizes. The card is drawn "$5K-$200K" with
   chips $10K/$25K/$50K/$100K/$200K. There is no $5K account, and LAB
   (assets/pricing-table.js, which mirrors live checkout) sells Pay Later from
   $10K to $400K. Real data wins: the headline reads $10K-$400K and a $400K
   chip is added. Signed off by Lucas.

   The chips and the profit-rate slider are drawn with no computed output in
   the file, so they ship as real controls with no invented figures: the chip
   row is a radio group and the slider reports its own value. Nothing here
   quotes a price.
   ========================================================================= */

/* 1048:438498 — 1512x1087, 180deg #CFE6E4 7.48% -> #FFFFFF 70.33% over a
   179.3deg #EBEDF2 -> #FFFFFF base. Clips. */
.afxmo-pl {
  position: relative;
  isolation: isolate;
  height: 1087px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #CFE6E4 7.48%, rgba(255,255,255,0) 70.33%),
    linear-gradient(179.3deg, #EBEDF2 0%, #FFFFFF 100%);
  font-family: var(--font-sans);
  color: #0D0D0D;
}

/* 1048:438499 "image 1174" — 1513x851 at y 72, image fill under a
   180deg transparent -> #FFFFFF wash. Full-bleed. */
.afxmo-pl__art {
  position: absolute; left: 0; right: 0; top: 72px;
  width: auto; min-width: 1512px; height: 851px;
  background: url('/assets/figma/mo-pl-art.webp') center / cover no-repeat;
  pointer-events: none;
}
.afxmo-pl__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
}

/* 1048:438500 "dots" — the halftone field, exported as one image. */
.afxmo-pl__dots {
  position: absolute; left: 50%; margin-left: -821px; top: -114px;
  width: 1642px; height: 1370px;
  background: url('/assets/figma/mo-pl-dots.webp') center / cover no-repeat;
  opacity: .5;
  pointer-events: none;
}

.afxmo-pl__stage {
  position: relative; z-index: 2;
  width: 1512px; margin: 0 auto; height: 1087px;
}

/* ---- 1048:458821 — header, 517x217 at (498,-6). Drawn 6px above the band
   top; the band clips it. Column gap 32, centred. --------------------- */
.afxmo-pl__head {
  position: absolute; left: 50%; margin-left: -258.5px; top: -6px;
  width: 517px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
/* 1048:458822 — chip + headline, gap 16. 33 + 16 + 168 = 217, the head height. */
.afxmo-pl__title {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 517px;
}
/* 1048:458827 — SF Pro 510 14/21, ls -.42, inside a 33-tall row so the text
   itself lands on the band's y=0 while the row starts at -6. */
.afxmo-pl__eyebrow {
  margin: 0; display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 6px 0; box-sizing: border-box;
  font-weight: var(--w-medium); font-size: 14px; line-height: 21px;
  letter-spacing: -.42px; color: #0D0D0D;
}
.afxmo-pl__eyebrow img { display: block; width: 16px; height: 16px; }
/* 1048:458829 / 458830 — SF Pro 510 56/56, ls -1.68, centred.
   Line one carries a 165.4deg #0D0D0D -> #CECECE ramp; the rest is flat. */
.afxmo-pl__h2 {
  margin: 0; width: 517px; text-align: center;
  font-family: var(--font-display);
  font-weight: var(--w-medium); font-size: 56px; line-height: 56px;
  letter-spacing: -1.68px; color: #0D0D0D;
  white-space: nowrap;
}
.afxmo-pl__h2 .g {
  display: block;
  background: linear-gradient(165.4deg, #0D0D0D 0%, #CECECE 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- 1048:458874 — the stacked pair, 608x518 at (452.5,261), gap 16 ---- */
.afxmo-pl__panel {
  position: absolute; left: 50%; margin-left: -304px; top: 261px;
  width: 608px;
  display: flex; flex-direction: column; gap: 16px;
}

/* 1048:458875 — the teal card, 608x234, radius 32, padding 42/24, gap 24,
   176.5deg #7CB1AC -> #053F3B. */
.afxmo-pl__card {
  position: relative; box-sizing: border-box;
  height: 234px; padding: 42px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  border-radius: 32px; overflow: hidden;
  background: linear-gradient(176.5deg, #7CB1AC 0%, #053F3B 100%);
}
/* 1048:458876 — chip, 145x32, radius 57, padding 4/12/4/8, gap 7 */
.afxmo-pl__chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 4px 12px 4px 8px; box-sizing: border-box;
  border-radius: 57px;
  background: linear-gradient(73.7deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.18) 100%);
  font-weight: var(--w-medium); font-size: 16px; line-height: 24px;
  letter-spacing: -.48px; color: var(--af-white);
}
.afxmo-pl__chip img { display: block; width: 16px; height: 16px; }
/* 1048:458880 — SF Pro 700 80/80 (drawn box 56 tall), ls -4.8,
   145.8deg #E1FFA0 -> #7CB1AC */
.afxmo-pl__range {
  margin: 0; text-align: center;
  font-family: var(--font-display);
  font-weight: var(--w-bold); font-size: 80px; line-height: 56px;
  letter-spacing: -4.8px;
  background: linear-gradient(145.8deg, #E1FFA0 0%, #7CB1AC 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 1048:458883 — SF Pro 510 14/14, opacity .5 */
.afxmo-pl__note {
  margin: 0; font-weight: var(--w-medium); font-size: 14px; line-height: 14px;
  color: rgba(255,255,255,.5);
}

/* 1048:464918 — the white control card, 608x268, radius 32, padding 24,
   column gap 48, shadow 13/35/41. */
.afxmo-pl__ctrl {
  box-sizing: border-box; padding: 24px;
  display: flex; flex-direction: column; gap: 48px;
  border-radius: 32px; background: #FFFFFF;
  box-shadow: 13px 35px 41px 0 rgba(13,13,13,.06);
}
.afxmo-pl__field { display: flex; flex-direction: column; gap: 16px; }
/* 1048:464920 / 464928 — SF Pro 590 24/28.8, ls -.72 */
.afxmo-pl__label {
  margin: 0; font-weight: var(--w-semi); font-size: 24px; line-height: 28.8px;
  letter-spacing: -.72px; color: #0D0D0D;
}
/* 1048:464921 — chip row, gap 4. Six chips now, so they flex to fit. */
.afxmo-pl__sizes { display: flex; gap: 4px; }
/* 1048:464922 — chip, 50 tall, radius 100, #F2F4F7; selected is lime with a
   2px rgba(0,0,0,.06) inside stroke. SF Pro 590 18/18. */
.afxmo-pl__size {
  flex: 1 1 0; min-width: 0;
  height: 50px; padding: 16px 8px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 100px; background: #F2F4F7;
  font-family: var(--font-sans);
  font-weight: var(--w-semi); font-size: 18px; line-height: 18px;
  color: #0D0D0D; cursor: pointer;
}
.afxmo-pl__size[aria-checked="true"] {
  background: var(--af-lime);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
}

/* 1048:464929 — the slider, 560x32. Track 8 tall radius 39 #F2F4F7, fill
   #7CB1AC, thumb is a lime 82x36 pill carrying the value. */
.afxmo-pl__slider { position: relative; height: 32px; }
.afxmo-pl__track {
  position: absolute; left: 0; right: 0; top: 12px; height: 8px;
  border-radius: 39px; background: #F2F4F7;
}
.afxmo-pl__fill {
  position: absolute; left: 0; top: 12px; height: 8px;
  border-radius: 39px; background: var(--af-teal);
}
.afxmo-pl__bubble {
  position: absolute; top: -4px; transform: translateX(-50%);
  height: 36px; padding: 4px 12px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 100px; background: var(--af-lime);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
  font-weight: var(--w-bold); font-size: 18px; line-height: 18px;
  letter-spacing: -1.8px; color: #000000;
  pointer-events: none; white-space: nowrap;
}
.afxmo-pl__bubble i { font-style: normal; opacity: .5; }
/* the real input sits over the track, invisible but operable */
.afxmo-pl__range-input {
  position: absolute; left: 0; top: 0; width: 100%; height: 32px;
  margin: 0; opacity: 0; cursor: pointer;
}

/* ---- 1048:458831 — the four stats, 1258x68 at (127,899), gap 56 ------- */
.afxmo-pl__stats {
  position: absolute; left: 50%; margin-left: -629px; top: 899px;
  width: 1258px; height: 68px;
  display: flex; align-items: center; justify-content: center; gap: 56px;
}
.afxmo-pl__stat { display: flex; align-items: center; gap: 16px; }
.afxmo-pl__stat-ic {
  width: 68px; height: 68px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,177,172,.14);
  box-shadow: inset 0 0 0 1px rgba(124,177,172,.24);
}
.afxmo-pl__stat-ic img { display: block; width: 28px; height: 28px; }
.afxmo-pl__stat-tx { display: flex; flex-direction: column; }
/* 1048:458837 — SF Pro 590 32/42.24, ls -.96 */
.afxmo-pl__stat-v {
  font-weight: var(--w-semi); font-size: 32px; line-height: 42.24px;
  letter-spacing: -.96px; color: #0D0D0D; white-space: nowrap;
}
/* 1048:458838 — SF Pro 400 16/21.12, ls -.48, opacity .6 */
.afxmo-pl__stat-k {
  font-weight: var(--w-regular); font-size: 16px; line-height: 21.12px;
  letter-spacing: -.48px; color: rgba(13,13,13,.6); white-space: nowrap;
}

/* ============================ MOBILE 393 ==================================
   1048:485693 — 393x1281. The stat row becomes a 2x2 grid.               */
@media (max-width: 767px) {
  .afxmo-pl { height: auto; padding: 56px 0 64px; }
  .afxmo-pl__stage { width: 100%; height: auto; padding: 0 24px; box-sizing: border-box; }
  .afxmo-pl__art { top: 0; height: 100%; min-width: 0; }
  .afxmo-pl__dots { margin-left: -821px; opacity: .35; }
  .afxmo-pl__head { position: static; width: auto; margin: 0 auto; gap: 20px; }
  .afxmo-pl__title { width: auto; gap: 12px; }
  .afxmo-pl__h2 { width: auto; font-size: 34px; line-height: 38px; letter-spacing: -1.02px; white-space: normal; }
  .afxmo-pl__panel { position: static; width: auto; margin: 32px 0 0; }
  .afxmo-pl__card { height: auto; padding: 32px 20px; }
  .afxmo-pl__range { font-size: 46px; line-height: 52px; letter-spacing: -2.4px; }
  .afxmo-pl__ctrl { gap: 32px; }
  .afxmo-pl__sizes { flex-wrap: wrap; }
  .afxmo-pl__size { flex: 1 1 28%; font-size: 15px; }
  .afxmo-pl__stats {
    position: static; width: auto; height: auto; margin: 40px 0 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px;
  }
  .afxmo-pl__stat-ic { width: 52px; height: 52px; }
  .afxmo-pl__stat-ic img { width: 22px; height: 22px; }
  .afxmo-pl__stat-v { font-size: 20px; line-height: 28px; letter-spacing: -.6px; white-space: normal; }
  .afxmo-pl__stat-k { font-size: 13px; line-height: 18px; white-space: normal; }
}

/* ---- the card is a live figure, not a static range -----------------------
   Figma draws this card as "Account sizes / $5K-$200K" but leaves a "/month"
   text node in it, inherited from the how-it-works calculator this component
   was copied from. The chips and the slider underneath are interactive, so a
   static card meant you could change both inputs and watch nothing happen —
   which is exactly how it was reported. The card now shows what the controls
   are for. Same formula as /how-it-works, so the two pages cannot disagree.  */
.afxmo-pl__per {
  font-family: var(--font-sans); font-weight: var(--w-semi);
  font-size: 18px; line-height: 18px; letter-spacing: normal;
  color: rgba(255,255,255,.5);
  -webkit-text-fill-color: rgba(255,255,255,.5);
  padding-left: 6px; padding-bottom: 4px;
}
/* a money figure on this site is a promise, so it carries the same caveat the
   how-it-works calculator does rather than implying 100% is the default */
.afxmo-pl__foot {
  margin: 10px 0 0; text-align: center;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 11px; line-height: 15px; color: rgba(255,255,255,.45);
}