Before / After Testimonial

<article class="nuda-ba-testi">
  <div class="nuda-ba-testi__col nuda-ba-testi__col--before">
    <div class="nuda-ba-testi__label">Before</div>
    <p>&ldquo;Three spreadsheets, two dashboards, weekly fire drills.&rdquo;</p>
  </div>
  <div class="nuda-ba-testi__col nuda-ba-testi__col--after">
    <div class="nuda-ba-testi__label">After</div>
    <p>&ldquo;One pane of glass. Reviews ship on Mondays now.&rdquo;</p>
  </div>
  <footer class="nuda-ba-testi__cite">Renee Park &middot; Ops, Helix</footer>
</article>

/* Before / After Testimonial
   Split-card framing of the customer's transformation. */

.nuda-ba-testi {
  position: relative;
  max-width: 480px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  color: #fafafa;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.nuda-ba-testi__col { padding: 1.25rem; background: #0c0c10; }
.nuda-ba-testi__col--after { background: #111114; }

.nuda-ba-testi__label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.625rem;
}

.nuda-ba-testi__col--before .nuda-ba-testi__label {
  color: #ff5e7a;
  background: rgba(255, 94, 122, 0.12);
}

.nuda-ba-testi__col--after .nuda-ba-testi__label {
  color: #6ee7b7;
  background: rgba(110, 231, 183, 0.12);
}

.nuda-ba-testi__col p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.nuda-ba-testi__col--before p { color: #a0a0a8; }

.nuda-ba-testi__cite {
  grid-column: 1 / -1;
  padding: 0.75rem 1.25rem;
  background: #09090b;
  font-size: 0.75rem;
  color: #a0a0a8;
}