block once,in the <head> of every page that uses a CTA (or into your main stylesheet). 2) Paste each variant where its comment says. All classes start with "abq-" so they won't clash with your existing styles.
--> <style> .abq-band,.abq-card,.abq-chip,.abq-nav,.abq-note{--abq-rasp:#B31A47;--abq-rasp-dk:#8C1437;--abq-pink:#E0396C;--abq-blush:#F3DAE2;--abq-choc:#302022;--abq-cream:#FDF8EF;font-family:Inter,system-ui,sans-serif;box-sizing:border-box}.abq-band *,.abq-card *{box-sizing:border-box}.abq-grad{background:radial-gradient(45% 70% at 95% 8%,#f8eaeebf,#f8eaee00 60%),radial-gradient(55% 80% at 82% 95%,#e0396c,#e0396c00 62%),radial-gradient(50% 70% at 55% 40%,#c9244fd9,#c9244f00 65%),radial-gradient(60% 90% at 0% 100%,#302022d9,#30202200 60%),linear-gradient(115deg,#5e1029,#8c1437 30%,#b31a47 58%,#e0396c 85%,#f3dae2 110%);background-size:150% 150%;animation:abq-drift 14s ease-in-out infinite alternate}@keyframes abq-drift{0%{background-position:0% 30%}to{background-position:100% 70%}}.abq-band{position:relative;overflow:hidden;border-radius:24px;padding:44px 28px;color:#fff;max-width:1120px;margin:0 auto;isolation:isolate;box-shadow:0 24px 60px -24px #8c14378c}.abq-band:after{content:"";position:absolute;inset:auto -10% -60% auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#fdf8ef59,#fdf8ef00 65%);filter:blur(10px);z-index:-1}.abq-band .abq-inner{display:grid;gap:22px;align-items:center}@media(min-width:820px){.abq-band{padding:56px}.abq-band .abq-inner{grid-template-columns:1.5fr 1fr}}.abq-eyebrow{display:flex;width:fit-content;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;white-space:nowrap;text-transform:uppercase;background:#fdf8ef29;border:1px solid rgba(253,248,239,.35);border-radius:999px;padding:6px 12px;margin:0 0 16px;backdrop-filter:blur(6px)}.abq-band h2{font:600 clamp(30px,5vw,44px)/1.1 Fraunces,Georgia,serif;color:#fff;margin:0 0 12px}.abq-band p{margin:0;font-size:17px;line-height:1.6;color:#fffffff0}.abq-perks{list-style:none;margin:0;padding:22px;border-radius:18px;background:#30202247;border:1px solid rgba(253,248,239,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;gap:8px;font-size:15px}.abq-perks li{display:flex;gap:10px;align-items:flex-start;color:#fff}.abq-perks li:before{content:"\2713";flex:0 0 22px;height:22px;border-radius:50%;background:#fdf8ef38;display:grid;place-items:center;font-size:12px;font-weight:700}.abq-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}.abq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fdf8ef;color:#302022!important;font:700 16px Inter,sans-serif;text-decoration:none;border-radius:999px;padding:15px 28px;box-shadow:0 10px 24px -10px #30202299;transition:transform .15s,box-shadow .15s}.abq-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px #302022b3}.abq-btn span{transition:transform .15s}.abq-btn:hover span{transform:translate(3px)}.abq-meta{font-size:13px;color:#ffffffd9}@media(max-width:480px){.abq-btn{width:100%}}.abq-chip{display:inline-flex;align-items:center;gap:10px;position:relative;padding:9px 16px 9px 10px;border-radius:999px;background:#fff;color:var(--abq-choc);font-size:14px;font-weight:600;text-decoration:none;isolation:isolate}.abq-chip:before{content:"";position:absolute;inset:-2px;border-radius:999px;z-index:-1;background:conic-gradient(from var(--abq-a,0deg),#B31A47,#E0396C,#F3DAE2,#E0396C,#B31A47);animation:abq-spin 6s linear infinite}.abq-chip:after{content:"";position:absolute;inset:0;border-radius:999px;background:#fff;z-index:-1}.abq-chip .abq-dot{background:linear-gradient(135deg,#b31a47,#e0396c);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 9px}.abq-chip:hover{color:var(--abq-rasp)}@property --abq-a{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes abq-spin{to{--abq-a:360deg}}.abq-nav{display:inline-flex;align-items:center;gap:6px;color:#fff!important;text-decoration:none;font-weight:600;font-size:14px;border-radius:999px;padding:8px 14px;white-space:nowrap}.abq-nav:hover{filter:brightness(1.08)}.abq-card{position:relative;overflow:hidden;border-radius:18px;padding:26px 24px;color:#fff;display:grid;gap:16px;align-items:center;margin:40px 0;box-shadow:0 18px 40px -22px #8c143799}@media(min-width:720px){.abq-card{grid-template-columns:1fr auto;padding:28px 32px}}.abq-card h3{font:600 22px/1.25 Fraunces,Georgia,serif;color:#fff;margin:0 0 6px}.abq-card p{margin:0;font-size:15px;line-height:1.55;color:#fffffff0}.abq-note{font-size:15px;color:#5a4048;margin:14px 0 0}.abq-note a{color:var(--abq-rasp);font-weight:600;text-decoration:none;background:linear-gradient(90deg,#b31a47,#e0396c) left bottom/100% 2px no-repeat;padding-bottom:2px}.abq-note a:hover{color:var(--abq-rasp-dk)}@media(prefers-reduced-motion:reduce){.abq-grad,.abq-chip:before{animation:none}}header .links a.abq-nav{color:#fff!important}@media(max-width:1100px){header .links a.abq-nav{justify-content:center;padding:12px 16px!important;border-bottom:0!important;margin-top:12px;font-size:15px}}.abq-section{padding:24px 0 8px}.abq-chip{margin-bottom:18px}@media(min-width:1101px){header .links a.abq-nav,header .links a.btn{width:184px;min-width:184px;height:48px;min-height:48px;padding:0 16px!important;font-size:15px!important;font-weight:700!important;justify-content:center;white-space:nowrap;box-sizing:border-box}}@media(min-width:1101px){header nav .brand{margin-right:clamp(28px,3vw,48px)}header .links{gap:20px}}header .links a.abq-nav{min-height:48px;padding:11px 20px;font-size:15px;font-weight:700;line-height:1.25;justify-content:center;box-sizing:border-box}@media(max-width:1100px){header .links a.abq-nav{padding:11px 20px!important;margin-top:12px}}main h2:not(.toc-h){font-family:var(--display,Fraunces,Georgia,serif);font-weight:600;letter-spacing:0}.toc h2{font-family:var(--sans)!important;font-weight:800!important}.dek{font-family:var(--sans)!important}.abq-band .abq-eyebrow{font-size:10.5px!important;letter-spacing:.12em!important;padding:4px 10px!important;gap:6px!important}.abq-get-h{font:700 11px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fdf8ef;opacity:.85;margin:0 0 10px 4px}.abq-perks li span{display:block}.abq-perks li b{color:#fff;font-weight:700}header .links a.abq-nav{background:#fff!important;color:#8c1437!important;border:1.5px solid #e7b3c3!important;box-shadow:0 6px 16px -12px #8c143799!important;animation:none!important}header .links a.abq-nav:hover{background:#f8eaee!important;border-color:#b31a47!important;filter:none!important}
