/* ═══════════════════════════════════════════════════
   SECTION: audit — closing call to action. Source: audit.html #sp-cta

   Its own container rather than .sp-section-inner: this section is centred and
   narrower than the rest of the page, which is what makes it read as an ending
   instead of another band of content.

   The source sets font-size and padding inline on both buttons — 15px and
   14px 28px against the .btn-p the rest of the site uses. Dropped. A button
   that is a different size on one page is how a design stops agreeing with
   itself, and the page has just spent seven sections agreeing.
═══════════════════════════════════════════════════ */

#sp-cta {
  background: var(--c-bg-2);
  padding: var(--sp-section) 0;
  position: relative;
  overflow: hidden;
}

/* Glow rising from the bottom edge, behind everything. */
#sp-cta::before {
  content: '';
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 500px;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(var(--c-accent-rgb), .07) 0%, transparent 65%);
}

.sp-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  text-align: center;
}

/* No scale token reaches this: --fs-700 tops out at 52px and this wants 54,
   with tighter tracking than a section heading because it is a closing line
   rather than a label for what follows. */
.sp-cta-h2 {
  font-family: var(--f-display);
  font-size: clamp(32px, 4.5vw, 54px);
  font-weight: var(--fw-black);
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--c-text-1);
  margin: 0 0 var(--sp-5);
}
.sp-cta-h2 em {
  color: var(--c-accent);
  font-style: normal;
}

.sp-cta-sub {
  max-width: 520px;
  margin: 0 auto var(--sp-12);
  font-size: var(--fs-300);
  color: var(--c-text-3);
  line-height: 1.75;
}

.sp-cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.sp-cta-note {
  font-size: var(--fs-200);
  color: var(--c-text-4);
  line-height: 1.7;
}
.sp-cta-note span {
  color: var(--c-text-3);
  font-weight: var(--fw-medium);
}

/* ── Guarantee strip ── */
.sp-guarantees {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-10);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--c-border);
}

.sp-guarantee {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  color: var(--c-text-4);
  line-height: 1.7;
}

.sp-guarantee-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--c-accent);
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .sp-cta-inner { padding: 0 var(--sp-6) }
  /* Stacked rather than wrapped: four short lines centred at random widths
     read as debris, four left-aligned rows read as a list. */
  .sp-guarantees {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    text-align: left;
  }
  .sp-cta-btns .btn-p,
  .sp-cta-btns .btn-g { flex: 1 1 100%; justify-content: center }
}