/* =========================================================================
   Section 12 — final CTA "Compliance Shouldn't Stand in the Way of
   Exceptional Care" (node 1:2813). Design height 508.4px, width 1710px.
   Inter loaded globally. .section / .container are global.
   ========================================================================= */

.s12 {
  height: 508.4px;
  background: #fafafa;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.s12-container {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* ---- Logo strip block (node 1:2815) ---- */
.s12-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
}

.s12-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 40px;
}

/* Recovered partner logos — muted to match the trusted-by aesthetic. */
.s12-logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: 124px;
  object-fit: contain;
  opacity: 0.7;
}

/* ---- Heading (node 1:2975) ---- */
.s12-heading-wrap {
  padding: 64px 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.s12-heading {
  margin: 0;
  width: 560px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 38px;
  line-height: 46px;
  letter-spacing: -0.8px;
  color: #000000;
  text-align: center;
  word-break: break-word;
}

/* ---- CTA button (node 1:2976 / 1:2971) ---- */
.s12-cta-wrap {
  position: relative;
  height: 44.391px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.s12-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10.2px 17px;
  background: #000000;
  border: 1px solid #000000;
  border-radius: 12px;
  box-sizing: border-box;
  text-decoration: none;
}

.s12-btn-text {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

/* =========================================================================
   Responsive — APPENDED. Desktop rules above unchanged.
   ========================================================================= */

@media (max-width: 1024px) {
  .s12 {
    height: auto;
    padding: 80px 0;
    background: #fafafa;
  }

  .s12-heading {
    width: 100%;
    max-width: 560px;
  }

  /* Drop the Figma fixed widths so the empty logo rows can't force overflow. */
  .s12-logos-row:nth-child(1),
  .s12-logos-row:nth-child(2) {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .s12 {
    height: auto;
    padding: 80px 0;
    background: #fafafa;
  }

  .s12-heading {
    width: 100%;
    max-width: 560px;
    font-size: 28px;
    line-height: 36px;
  }

  .s12-cta-wrap {
    justify-content: center;
  }
}