.bc-promo{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between;background:var(--pg,#FFDDE6);color:var(--ink);border-radius:26px;padding:22px 26px;margin:26px 0}
.bc-promo h2{margin:0 0 4px;font-family:var(--fd);font-weight:600;font-size:clamp(22px,3vw,30px)}
.bc-promo p{margin:0;max-width:38em}
.bc-promo .btn{text-decoration:none;display:inline-flex;align-items:center}

/* homepage promo: a little life */
.bc-promo{position:relative;overflow:hidden;isolation:isolate}
.bc-promo:before{content:"\1F37C  \1F9F8  \2B50  \1F319";position:absolute;right:16px;top:-6px;font-size:26px;letter-spacing:.35em;opacity:.28;z-index:-1;white-space:nowrap}
@keyframes bcp-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,8px)}}
@keyframes bcp-ring{0%{box-shadow:0 0 0 0 rgba(242,107,91,.5)}70%,100%{box-shadow:0 0 0 14px rgba(242,107,91,0)}}
@keyframes bcp-in{from{opacity:0;transform:translateY(20px)}}
@media (prefers-reduced-motion:no-preference){
 .bc-promo{animation:bcp-in .8s cubic-bezier(.2,.7,.2,1) both}
 .bc-promo:before{animation:bcp-drift 7s ease-in-out infinite}
 .bc-promo .btn.go{animation:bcp-ring 2.8s ease-out 1.5s infinite}
 .bc-promo h2{display:inline-block;transform-origin:left}
 .bc-promo:hover h2{animation:dl-wiggle .6s ease}
}
html.calm .bc-promo,html.calm .bc-promo:before,html.calm .bc-promo .btn.go{animation:none!important}