.before-after{padding:var(--space-24) 0;background:var(--color-bg-secondary)}.before-after h2{text-align:center;margin-bottom:var(--space-4)}.ba-subtitle{text-align:center;font-size:var(--font-size-xl);color:var(--color-text-secondary);margin-bottom:var(--space-16);max-width:700px;margin-left:auto;margin-right:auto}.ba-grid{gap:var(--space-6);max-width:var(--container-narrow,960px);grid-template-columns:1fr auto 1fr;align-items:start;margin:0 auto;display:grid}.ba-column{background:var(--color-bg-primary);border-radius:var(--radius-2xl);box-shadow:var(--shadow-sm);overflow:hidden}.ba-header{align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-6);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);display:flex}.ba-header-before{color:#dc2626;background:linear-gradient(135deg,#fef2f2 0%,#fff1f2 100%);border-bottom:2px solid #fecaca}.ba-header-after{color:#059669;background:linear-gradient(135deg,#f0fdf4 0%,#f0fdfa 100%);border-bottom:2px solid #a7f3d0}.ba-list{padding:var(--space-6);margin:0;list-style:none}.ba-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-3) 0;font-size:var(--font-size-base);line-height:var(--line-height-relaxed);color:var(--color-text-secondary);display:flex}.ba-item svg{flex-shrink:0;margin-top:3px}.ba-item-before svg{color:#ef4444}.ba-item-after svg{color:#10b981}.ba-divider{padding-top:var(--space-24);justify-content:center;align-items:center;display:flex}.ba-arrow{color:#fff;border-radius:var(--radius-full);width:48px;height:48px;box-shadow:var(--shadow-lg);background:linear-gradient(135deg,#7c3aed 0%,#8b5cf6 100%);justify-content:center;align-items:center;display:flex}.ba-bottom{text-align:center;font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-top:var(--space-12);max-width:600px;margin-left:auto;margin-right:auto}.ba-bottom strong{color:#7c3aed}@media (width<=768px){.ba-grid{grid-template-columns:1fr}.ba-divider{padding:var(--space-4) 0}.ba-arrow{transform:rotate(90deg)}}