/* =========================================================================
   Component: fm-lead-banner
   Rounded rectangle CTA banner with diagonal gradient background.
   Used as a mid-page lead-gen prompt.
   ========================================================================= */

.fm-lead-banner {
  border-radius: 20px;
  padding: var(--fm-sp-7) var(--fm-sp-6);
  /* Diagonal gradient: #124266 at bottom-left → black at top-right. */
  background: linear-gradient(45deg, #124266 0%, #000000 100%);
  color: var(--fm-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fm-sp-5);
  text-align: center;
}

/* Full-width usage: banner sits as a direct child of .fm-section (not
   wrapped in .fm-container). In that case rounded corners at the very
   edges of the viewport look off, so drop them. */
.fm-section > .fm-lead-banner {
  border-radius: 0;
}

/* Also collapse the section's bottom padding so the next section can
   dock flush against the full-width banner (no white gap). */
.fm-section:has(> .fm-lead-banner) {
  padding-bottom: 0;
}

@media (min-width: 720px) {
  .fm-lead-banner {
    padding: var(--fm-sp-8) var(--fm-sp-7);
  }
}

.fm-lead-banner__title {
  color: var(--fm-white);
  margin: 0;
  font-size: var(--fm-fs-xl);
  line-height: var(--fm-lh-tight);
}

@media (min-width: 992px) {
  .fm-lead-banner__title {
    font-size: var(--fm-fs-2xl);
  }
}

.fm-lead-banner__desc {
  color: var(--fm-gray-200);
  margin: 0;
  font-size: var(--fm-fs-md);
  max-width: 640px;
}

.fm-lead-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fm-sp-3);
  justify-content: center;
  align-items: center;
}

/* Phone glyph rendered inline via SVG; sits before the sales number. */
.fm-lead-banner__phone-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}