/* ============================================================================
   Instant Funding band 2 — "Everything you need. Available instantly."
   Figma 804:61361 (1512 x 957). A LIGHT band, unlike the hero above and the
   pricing band below.

   Child order is back-to-front:
     804:61362  "dots" 1642x1370 at (-130,-10), group opacity .8
     804:81683  content 920x619 at (296,160)
     804:87769  "image 1174" 1871x1053 at (-179,5), blend DARKEN, with a
                white bottom-fade fill stacked over the photo
   The wave art and the dot field are decorative, so each ships as ONE
   exported image rather than a stack of CSS layers.
   ========================================================================= */

.afxif-specs {
  position: relative;
  isolation: isolate;
  min-height: 957px;
  overflow: hidden;
  /* two stacked fills with identical handles; the second wins */
  background: linear-gradient(180deg, #FFFFFF 0%, #EBEDF2 100%);
  font-family: var(--font-sans);
  color: #0D0D0D;
}

/* 804:61362 — dot field, 1642x1370 at (-130,-10), opacity .8.
   Fixed-size STAGE art, so it stays centred on the 1512 design frame rather
   than left-aligning above it. */
.afxif-specs__dots {
  position: absolute; left: 50%; margin-left: -886px; top: -10px;
  width: 1642px; height: 1370px;
  background: url('/assets/figma/if-specs-dots.webp') no-repeat 0 0 / 1642px 1370px;
  opacity: .8; pointer-events: none; z-index: 0;
}

/* 804:87769 — "image 1174", 1871x1053 at (-179,5), scaleMode FILL,
   blendMode DARKEN, plus a white 0 -> 100% bottom fade stacked on the photo.
   Full-bleed background art: spans the viewport, keeps aspect via cover. */
.afxif-specs__wave {
  position: absolute; left: 0; right: 0; top: 5px; width: auto; min-width: 1871px;
  height: 1053px;
  background: url('/assets/figma/if-specs-wave.webp') center / cover no-repeat;
  mix-blend-mode: darken;
  pointer-events: none; z-index: 1;
}
.afxif-specs__wave::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
}

/* 804:81683 — content column 920x619 at (296,160): column, gap 50, centred */
.afxif-specs__inner {
  position: relative; z-index: 2;
  width: 920px; max-width: 100%; margin: 0 auto;
  padding: 160px 0 178px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 50px;
}

/* 804:81684 — head 535x251, column, gap 32 */
.afxif-specs__head {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  width: 535px; max-width: 100%;
}
/* 804:81687 — column, gap 16 */
.afxif-specs__headstack { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }

/* 804:81688 — pill 194x33, radius 57, padding 6/14, gap 7. Its fill and
   stroke are absent in the file, so it ships bare; padding and radius stay
   so the box still measures 194x33. */
.afxif-specs__eyebrow {
  margin: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 57px;
}
.afxif-specs__eyebrow img { width: 16px; height: 16px; display: block; flex: none; }
.afxif-specs__eyebrow span {
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: #0D0D0D;
}
.afxif-specs__eyebrow b { font-weight: var(--w-medium); opacity: .6; }

/* 804:81691 — title block 535x128, two 64px lines at 100% leading */
.afxif-specs__titles { display: flex; flex-direction: column; align-items: center; width: 100%; }
.afxif-specs__t1, .afxif-specs__t2 {
  margin: 0; text-align: center; flex: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 64px; line-height: 64px; letter-spacing: -1.92px;
}
/* 804:81692 — gradient fill #0D0D0D -> #CECECE clipped to the glyphs */
.afxif-specs__t1 {
  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. 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;
}
.afxif-specs__t2 { color: #0D0D0D; }

/* 804:81694 — 426x42, SF Pro 510 / 16 / 21.12px / ls -.32, opacity .8 */
.afxif-specs__sub {
  margin: 0; width: 426px; max-width: 100%; text-align: center; opacity: .8;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 21.12px; letter-spacing: -.32px; color: #0D0D0D;
}

/* 804:81696 — headline card 531x200, radius 32, padding 42/24, gap 24 */
.afxif-specs__card {
  position: relative; overflow: hidden;
  width: 531px; max-width: 100%; height: 200px; box-sizing: border-box;
  padding: 42px 24px; border-radius: var(--r-32);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  background: linear-gradient(176.5deg, #7CB1AC 0%, #053F3B 100%);
}
/* 804:81697 — glass chip 145x32, radius 57, padding 4/12/4/8, gap 7 */
.afxif-specs__chip {
  margin: 0; position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 8px; border-radius: 57px;
  backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px);
}
.afxif-specs__chip::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(73.7deg, #FFFFFF 0%, rgba(255,255,255,.37) 59.83%, #FFFFFF 100%);
  opacity: .09; pointer-events: none;
}
.afxif-specs__chip img { width: 16px; height: 16px; display: block; flex: none; position: relative; }
.afxif-specs__chip span {
  position: relative;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px; color: var(--af-white);
}
/* 804:81701 — SF Pro 700 / 64 / 64px / ls -3.84, lime -> teal gradient.
   804:81702 ("/month") is visible:false and is not built. */
.afxif-specs__big {
  margin: 0; text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 64px; line-height: 64px; letter-spacing: -3.84px;
  background: linear-gradient(145.8deg, #E1FFA0 0%, #7CB1AC 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; 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;
}
/* 804:81704 — SF Pro 510 / 14 / 14px, opacity .5 */
.afxif-specs__note {
  margin: 0; text-align: center; opacity: .5;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; color: var(--af-white);
}

/* 804:87739 — stat trio 920x68, row, gap 24, each column 280x68 gap 16 */
.afxif-specs__stats {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 24px;
  width: 100%;
}
.afxif-specs__stat {
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  width: 280px; height: 68px; flex: none;
}
/* 804:87742 — 68x68 disc: white base under a #FBFBFB -> #E1F5F3 ramp,
   2px INSIDE rgba(38,63,66,.08), one inner and one drop shadow */
.afxif-specs__ic {
  position: relative; width: 68px; height: 68px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #FBFBFB 31.57%, #E1F5F3 100%), #FFFFFF;
  box-shadow: inset 3px -4px 5px 0 rgba(124,177,172,.14), 9px 24px 19px 0 rgba(66,107,104,.1);
}
.afxif-specs__ic::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(38,63,66,.08); pointer-events: none;
}
.afxif-specs__ic img { width: 28px; height: 28px; display: block; }
.afxif-specs__stat-body { display: flex; flex-direction: column; justify-content: center; }
/* 804:87745 — SF Pro 590 / 32 / 42.24px / ls -.96 */
.afxif-specs__stat-v {
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 32px; line-height: 42.24px; letter-spacing: -.96px; color: #0D0D0D;
  white-space: nowrap;
}
/* 804:87746 — SF Pro 400 / 16 / 21.12px / ls -.48, opacity .6 */
.afxif-specs__stat-l {
  font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: 16px; line-height: 21.12px; letter-spacing: -.48px; color: #0D0D0D; opacity: .6;
  white-space: nowrap;
}

/* ---- narrower viewports -------------------------------------------------- */
@media (max-width: 1000px) {
  .afxif-specs__inner { width: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
  .afxif-specs__stats { flex-wrap: wrap; gap: 24px; }
}

/* ---- 393 mobile — Figma 804:88298 (393 x 956) ----------------------------
   Same band, same order: head, card, then the stat trio stacked into a
   3-row list (804:117687). Titles drop to 42/42. */
@media (max-width: 768px) {
  .afxif-specs { min-height: 956px; }
  .afxif-specs__dots { margin-left: -821px; }
  .afxif-specs__wave { min-width: 0; width: 100%; height: 800px; top: 150px; }
  .afxif-specs__inner {
    width: auto; padding: 100px 24px 84px; gap: 32px; align-items: flex-start;
  }
  .afxif-specs__head { width: 345px; max-width: 100%; align-items: flex-start; gap: 24px; }
  .afxif-specs__headstack { align-items: flex-start; }
  .afxif-specs__titles { align-items: flex-start; }
  .afxif-specs__t1, .afxif-specs__t2 {
    text-align: left; white-space: normal;
    font-size: 42px; line-height: 42px; letter-spacing: -1.26px;
  }
  .afxif-specs__sub { width: 345px; max-width: 100%; text-align: left; line-height: 24px; }
  .afxif-specs__card { width: 345px; height: 274px; padding: 32px 20px; }
  .afxif-specs__big { font-size: 44px; line-height: 44px; letter-spacing: -2.64px; }
  .afxif-specs__stats { flex-direction: column; align-items: flex-start; gap: 16px; width: 345px; max-width: 100%; }
  .afxif-specs__stat { width: 100%; height: auto; gap: 12px; }
  .afxif-specs__ic { width: 44px; height: 44px; }
  .afxif-specs__ic img { width: 18px; height: 18px; }
  .afxif-specs__stat-v { font-size: 20px; line-height: 24px; letter-spacing: -.6px; }
  .afxif-specs__stat-l { font-size: 14px; line-height: 18px; letter-spacing: -.42px; }
}