/* ============================================================================
   Instant Zero band 3 — "Why Instant Zero". Figma 934:24991 (1512 x 1581).
   Light band, gradient #ebedf2 -> #ffffff, unlike the dark hero/pricing above.
   ========================================================================= */

.afxiz-why {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #ebedf2 0%, #ffffff 60%);
  padding: 120px 0 96px;
}
.afxiz-why__wave {
  position: absolute; left: 50%; top: -562px; width: 2011px; margin-left: -1006px;
  opacity: .5; pointer-events: none;
}
.afxiz-why__bgphoto {
  position: absolute; left: 50%; top: -94px; width: 1392px; margin-left: -1150px;
  opacity: .12; pointer-events: none; border-radius: 24px;
}

.afxiz-why__body {
  position: relative; z-index: 2;
  width: 1073px; max-width: calc(100% - 40px); margin: 0 auto;
}

.afxiz-why__head { text-align: center; }
.afxiz-why__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 12px; border-radius: var(--r-pill);
  background: #ffffff; box-shadow: 0 1px 2px rgba(13,13,13,.08);
  font-family: var(--font-alt); font-weight: var(--w-medium); font-size: 14px;
  color: #0d0d0d;
}
.afxiz-why__pill-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--af-lime); display: inline-block; }

.afxiz-why__h1 {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -1.6px;
  color: #0d0d0d; margin: 20px 0 0;
}
.afxiz-why__lead {
  font-family: var(--font-alt); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; color: #0d0d0d;
  max-width: 539px; margin: 32px auto 0;
}

.afxiz-why__card {
  border-radius: 32px; background: #fbfbfb;
}
.afxiz-why__hl { padding: 2px 8px; border-radius: 8px; }
.afxiz-why__hl--lime { background: var(--af-lime); color: var(--af-ink-teal); }

/* explainer card — dark teal gradient, matches the exported reference render */
.afxiz-why__card--explain {
  /* Figma: lead ends at rel-y 436, card starts at 483 -> 47px gap.
     Measured live at 122px margin before this fix (a transcription error),
     which alone accounted for ~75px of a 184px total band-height overshoot. */
  position: relative; overflow: hidden; margin-top: 47px;
  min-height: 376px; display: flex; align-items: center;
  background: linear-gradient(115deg, #051f1d 0%, #16403c 55%, #2f6e64 100%);
  padding: 40px 44px;
}
.afxiz-why__card-text { position: relative; z-index: 2; max-width: 440px; }
.afxiz-why__card-h {
  font-family: var(--font-alt); font-weight: 590; font-size: 32px; line-height: 38px;
  color: #ffffff; margin: 0;
}
.afxiz-why__card-h .afxiz-why__hl { font-size: 32px; line-height: 44px; display: inline-block; margin-top: 4px; }
.afxiz-why__card-p {
  font-family: var(--font-alt); font-weight: var(--w-medium); font-size: 16px; line-height: 21px;
  color: #ffffff; opacity: .92; margin: 16px 0 0;
}
.afxiz-why__note {
  display: flex; align-items: center; gap: 16px; margin-top: 24px;
  background: #ffffff; border-radius: 16px; padding: 8px 16px;
  font-family: var(--font-alt); font-weight: var(--w-medium); font-size: 16px; line-height: 21px;
  color: #0d0d0d;
}
.afxiz-why__note-ic {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px;
  background: rgba(225,255,160,.35);
}
.afxiz-why__note-ic--bad { background: rgba(220,38,38,.12); color: #dc2626; }
.afxiz-why__note-ic--good { background: rgba(22,163,74,.12); color: #16a34a; }
.afxiz-why__card-img {
  position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
  width: 620px; max-width: 55%; pointer-events: none; opacity: .96;
}

/* two-up comparison row */
.afxiz-why__compare { display: flex; gap: 16px; margin-top: 32px; }
.afxiz-why__card--cmp { flex: 1; padding: 32px; }
.afxiz-why__cmp-h {
  font-family: var(--font-alt); font-weight: 590; font-size: 32px; line-height: 38px;
  color: #0d0d0d; margin: 0;
}
.afxiz-why__cmp-h .afxiz-why__hl { font-size: 30px; }
/* Figma: each comparison card is 480 tall. width:100%/height:auto on a
   1536x1024 source image blew that budget by ~100px on its own — height is
   now fixed and cover-cropped to fit the card's real vertical budget. */
.afxiz-why__cmp-img { width: 100%; height: 196px; object-fit: cover; display: block; margin: 16px 0; border-radius: 16px; }

.afxiz-why__cta {
  display: flex; margin: 64px auto 0; width: max-content;
}

@media (max-width: 1180px) {
  .afxiz-why__body { width: 100%; }
  .afxiz-why__h1 { font-size: 56px; line-height: 58px; }
  .afxiz-why__card--explain { flex-direction: column; align-items: flex-start; }
  .afxiz-why__card-img { position: static; transform: none; width: 100%; max-width: 100%; margin-top: 24px; }
  .afxiz-why__compare { flex-direction: column; }
}


/* ---- motion -------------------------------------------------------------
   This band is a light surface, so the lime focus ring used on the dark bands
   would be close to invisible - it takes the ink colour instead. The CTA is an
   .afx-btn-lime and already presses and hovers; the explainer and comparison
   cards are static content and get nothing, on purpose. */
.afxiz-why a:focus-visible {
  outline: 2px solid #0D0D0D; outline-offset: 4px; border-radius: var(--r-pill);
}