/* cta-pro-20261020 · shared CTA card. Per-skin variables set by .xcta--<slug> */
.xcta,.xcta-prep,.xsum,.xnote,.xfaq{--x-acc:#1f2937;--x-soft:#f3f4f6;--x-r:12px;--x-font:inherit;font-family:var(--x-font)}
.xcta{border:1px solid color-mix(in srgb,var(--x-acc) 22%,#fff);border-radius:min(var(--x-r),18px);background:linear-gradient(180deg,var(--x-soft),#fff 70%);padding:20px;margin:24px 0;box-shadow:0 6px 24px rgba(15,23,42,.06)}
.xcta-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.xcta-kicker{display:block;font-size:11px;letter-spacing:.12em;color:var(--x-acc);font-weight:700}
.xcta-title{margin:2px 0 0;font-size:18px;color:#0f172a}
.xcta-chips{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.xcta-chips li{font-size:12px;padding:3px 9px;border-radius:999px;background:#fff;border:1px solid color-mix(in srgb,var(--x-acc) 30%,#fff);color:#334155}
.xcta-chips li::before{content:"✓ ";color:var(--x-acc);font-weight:700}
.xcta-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.xcta-brand{background:#fff;border:1px solid #e5e7eb;border-radius:min(var(--x-r),18px);padding:16px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s,box-shadow .2s,transform .2s}
.xcta-brand:hover{border-color:var(--x-acc);box-shadow:0 8px 22px rgba(15,23,42,.10);transform:translateY(-2px)}
.xcta-brand-top{display:flex;align-items:center;justify-content:space-between}
.xcta-logo{height:36px;width:auto;border-radius:6px}
.xcta-tag{font-size:12px;color:#64748b}
.xcta-sub{margin:4px 0 0;font-size:14px;font-weight:600;color:#0f172a}
.xcta-sub2{margin:0;font-size:13px;color:#64748b;line-height:1.5}
.xcta-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.xcta-actions--inline{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.xcta-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:min(var(--x-r),999px);font-size:15px;font-weight:700;text-decoration:none!important;border-radius:var(--x-r);transition:background .2s,color .2s,box-shadow .2s,transform .1s}
.xcta-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--x-acc) 55%,#fff);outline-offset:2px}
.xcta-btn:active{transform:translateY(1px)}
.xcta-primary{background:var(--x-acc);color:#fff!important;box-shadow:0 4px 12px color-mix(in srgb,var(--x-acc) 35%,transparent)}
.xcta-primary::after{content:"→";transition:transform .2s}
.xcta-primary:hover{background:color-mix(in srgb,var(--x-acc) 85%,#000)}
.xcta-primary:hover::after{transform:translateX(3px)}
.xcta-secondary{background:#fff;color:var(--x-acc)!important;border:1.5px solid var(--x-acc)}
.xcta-secondary::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat}
.xcta-secondary:hover{background:var(--x-soft)}
.xcta-alt{filter:saturate(.85) brightness(.92)}
.xcta-foot{margin:12px 0 0;font-size:12px;color:#64748b;line-height:1.6}
.xcta-prep{border-left:4px solid var(--x-acc);background:var(--x-soft);border-radius:0 min(var(--x-r),18px) min(var(--x-r),18px) 0;padding:16px 18px;margin:0 0 22px}
.xcta-prep-title{font-size:16px!important;margin:0 0 8px!important;color:#0f172a}
.xcta-prep ol{margin:0;padding-left:20px;line-height:1.8}
.xsum{background:#fff;border:1px dashed color-mix(in srgb,var(--x-acc) 40%,#fff);border-radius:min(var(--x-r),18px);padding:12px 16px;margin:0 0 16px}
.xsum p{margin:4px 0 0}
.xnote{background:#fff8eb;border:1px solid #f5d38a;border-radius:min(var(--x-r),18px);padding:12px 16px}
.xnote ul{margin:0;padding-left:20px;line-height:1.8}
.xfaq{border-bottom:1px solid #e5e7eb;padding:10px 0}.xfaq summary{cursor:pointer;font-weight:600}.xfaq p{margin:8px 0 0;color:#475569}
.xcta-next-wrap{margin-top:28px}
@media (max-width:640px){.xcta-grid{grid-template-columns:1fr}.xcta{padding:14px}.xcta-chips{width:100%}.xcta-actions--inline .xcta-btn{flex:1}}
@media (prefers-reduced-motion:reduce){.xcta-brand,.xcta-btn{transition:none}.xcta-brand:hover{transform:none}}

.xcta--paleo{--x-acc:#2f6b5a;--x-soft:#c8f0dc;--x-r:14px;--x-font:inherit}
