/* Blog → services (owner's pick D, 2026-10-10): the yellow offer card under a post (partials/service-cta) and the
   mid-article "Pro tip" (App\\Support\\BlogServiceCta::withTip). Its own file: post.css has a size budget. */
.mm-svc-cta { margin: var(--mm-sp-6) 0; overflow: hidden; border: 1.5px solid #E6E2F7; border-radius: var(--mm-r-card); background: #FFFFFF; }
.mm-svc-cta-top { margin: 0; padding: 16px 20px; background: var(--mm-gold); color: var(--mm-ink); font-size: clamp(17px, 2.2vw, 21px); line-height: 1.3; }
.mm-svc-cta-body { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: center; padding: 18px 20px 20px; }
.mm-svc-cta ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mm-svc-cta li { display: flex; gap: 8px; align-items: flex-start; color: #3E3870; }
.mm-svc-cta li svg { flex: none; margin-top: 3px; color: #1F9D55; }
.mm-svc-cta-acts { display: grid; gap: 8px; }
.mm-svc-cta-acts .mm-btn { margin: 0; justify-content: center; white-space: nowrap; }
@media (max-width: 640px) { .mm-svc-cta-body { grid-template-columns: 1fr; } }
.mm-pro-tip { display: flex; gap: 10px; align-items: flex-start; margin: var(--mm-sp-4) 0; padding: 14px 16px; border: 1.5px dashed #CFC8F2; border-radius: 14px; background: #FFFFFF; }
.mm-pro-tip svg { flex: none; margin-top: 2px; color: #4338CA; }
.mm-pro-tip p { margin: 0; font-size: 15px; }
.mm-pro-tip b { color: #4338CA; }
.mm-pro-tip a { font-weight: 800; color: var(--mm-ink); }
.mm-svc-cta .mm-btn--soft, .mm-svc-cta .mm-btn--soft:hover { background: #FFFFFF; color: var(--mm-ink); box-shadow: inset 0 0 0 1.5px #DCD7F5; }
.mm-svc-cta .mm-btn--soft:hover { box-shadow: inset 0 0 0 1.5px var(--mm-ink); }