/* ================================================================== */
/* Instant Quote CTA — ink card with Jon portrait (between webinars    */
/* and FAQs)                                                           */
/* ================================================================== */

.qc {
  background: var(--surface-page, #f6f3ec);
  padding: 0 80px 36px;
  position: relative;
  font-family: var(--font-sans);
}
.qc-card {
  max-width: 1280px; margin: 0 auto; position: relative;
  background: var(--surface-ink, #0d0f0f);
  border-radius: 28px;
  padding: 64px 640px 64px 72px;
  min-height: 380px; box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}
/* warm orange glow bleeding from the portrait edge (DS dark-section treatment) */
.qc-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 80% at 100% 18%, rgba(255,166,62,0.28) 0%, transparent 62%);
}
.qc-copy { position: relative; z-index: 3; max-width: 560px; }
.qc-title {
  margin: 0; font-size: 42px; font-weight: 900; line-height: 1.08;
  letter-spacing: -0.025em; color: #fff; text-wrap: balance;
}
.qc-title mark {
  background: var(--gradient-signature, linear-gradient(90deg, #ff43a4, #ffa63e));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.qc-lead {
  margin: 18px 0 0; font-size: 16px; line-height: 1.6; font-weight: 500;
  color: rgba(255,255,255,0.66); max-width: 540px; text-wrap: pretty;
}

/* tick row ---------------------------------------------------------- */
.qc-ticks {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.qc-ticks li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; color: rgba(255,255,255,0.88);
}
.qc-ticks svg, .qc-ticks [data-lucide] { color: var(--green-500, #28dc9a); flex-shrink: 0; }

.qc-ctas { margin-top: 30px; display: flex; align-items: center; gap: 18px; }
.qc-proof {
  display: flex; align-items: center; gap: 10px; margin-top: 24px;
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.72);
}
.qc-stars { color: var(--green-500, #28dc9a); font-size: 15px; letter-spacing: 2px; }

/* people ------------------------------------------------------------- */
.qc-people { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 660px; pointer-events: none; }
/* single shared bottom veil so per-figure gradients don't leave box edges;
   paint order: back figure → front figure → veil (::after) → captions (z4) */
.qc-people::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 82%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%);
}
.qc-person { position: absolute; bottom: 0; margin: 0; }
.qc-person--back { right: 300px; width: 360px; }
.qc-person--front { right: 0; width: 360px; }
.qc-person img { display: block; width: 100%; height: auto; }
/* Carla is a rectangular photo on black; fade its edges into the card.
   Jon is a transparent cutout, no mask needed. */
.qc-person--front img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%),
                      linear-gradient(180deg, transparent 0%, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%),
              linear-gradient(180deg, transparent 0%, #000 14%);
  mask-composite: intersect;
}

/* lower thirds -------------------------------------------------------- */
.qc-lower {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  margin: 0; padding: 52px 22px 18px;
  color: #fff; text-align: center;
}
.qc-lower b {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
}
.qc-dot {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--fbf-green, #28dc9a);
  box-shadow: 0 0 10px 2px rgba(40,220,154,0.7);
}
.qc-lower span {
  display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.72);
}

/* responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  .qc { padding: 0 40px 36px; }
  .qc-card { padding: 52px 430px 52px 52px; }
  .qc-title { font-size: 34px; }
  .qc-people { width: 440px; }
  .qc-person--back { right: 205px; width: 235px; }
  .qc-person--front { width: 235px; }
  .qc-lower { padding: 40px 16px 14px; }
  .qc-lower b { font-size: 15px; }
}
@media (max-width: 1024px) {
  .qc { padding: 0 24px 32px; }
  .qc-card { padding: 52px 44px 0; min-height: 0; }
  .qc-copy { max-width: none; }
  .qc-people {
    position: static; width: auto; pointer-events: auto;
    display: flex; justify-content: center; align-items: flex-end;
    margin-top: 36px;
  }
  .qc-person { position: relative; }
  .qc-person--back { right: auto; width: 47%; }
  .qc-person--front { right: auto; width: 47%; }
}