/* apiscrapy.com — in-article CTA banner ([apiscrapy_cta] / [blog_cta]).
 *
 * A clean, compact centred panel sized to the article measure (fits the narrow
 * content column between the TOC and sidebar CTA). Soft brand-tinted background,
 * hairline border, centred eyebrow + heading + text + trust badges, and a centred
 * button row. Brand: #9b51e0 (purple accents) / #ff0066 (button).
 * In-article => raised specificity + !important. */

.apx-cta {
	--apx-purple: #9b51e0;
	--apx-red: #ff0066;
	--apx-ink: #171226;
	--apx-muted: #5b5570;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: block;
	text-align: center;
	max-width: 720px;
	margin: 40px auto !important;
	padding: 40px 38px;
	border: 1px solid #ece9f4;
	border-radius: 20px;
	background: linear-gradient(135deg, #faf8ff 0%, #fdf6fb 58%, #fef8f7 100%);
	box-shadow: 0 20px 40px -30px rgba(23, 18, 38, .3);
}

/* very soft, symmetric brand glow behind the panel (subtle — no harsh smudge) */
.apx-cta::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -40% 30% auto 30%;
	height: 120%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(155, 81, 224, .10), rgba(255, 0, 102, 0) 72%);
	pointer-events: none;
}

.apx-cta .apx-cta-main { text-align: center; }

.apx-cta .apx-cta-eyebrow {
	display: inline-block;
	margin: 0 0 16px !important;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(155, 81, 224, .12);
	font-size: 11.5px !important;
	font-weight: 800 !important;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--apx-purple) !important;
	white-space: nowrap;
}

.apx-cta h3.apx-cta-heading,
.apx-cta .apx-cta-heading {
	margin: 0 auto 12px !important;
	padding: 0 !important;
	max-width: 20ch;
	font-size: 28px !important;
	line-height: 1.15 !important;
	font-weight: 800 !important;
	letter-spacing: -.025em;
	color: var(--apx-ink) !important;
	text-wrap: balance;
}

.apx-cta .apx-cta-text {
	margin: 0 auto !important;
	max-width: 52ch;
	font-size: 16.5px !important;
	line-height: 1.6 !important;
	color: var(--apx-muted) !important;
}
.apx-cta .apx-cta-text a { color: var(--apx-purple) !important; text-decoration: underline; font-weight: 600; }
.apx-cta .apx-cta-text strong { color: var(--apx-ink) !important; }
.apx-cta .apx-cta-text :last-child { margin-bottom: 0 !important; }

/* trust badges — centred row with a thin divider between items */
.apx-cta .apx-cta-badges {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 18px 0 0 !important;
}
.apx-cta .apx-cta-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #4b4560;
}
.apx-cta .apx-cta-badge svg { color: var(--apx-purple); flex: 0 0 auto; }
.apx-cta .apx-cta-badge + .apx-cta-badge::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 15px;
	background: #dcd7e6;
}

/* buttons — centred row (wraps on small screens), not a fixed side column */
.apx-cta .apx-cta-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	width: auto;
	margin: 26px 0 0 !important;
}

.apx-cta a.apx-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-width: 200px;
	padding: 15px 26px;
	border-radius: 12px;
	border: 2px solid transparent;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

/* primary — single brand colour (pink) + arrow */
.apx-cta a.apx-cta-btn-primary {
	background: var(--apx-red) !important;
	color: #fff !important;
	box-shadow: 0 14px 26px -12px rgba(255, 0, 102, .5);
}
.apx-cta a.apx-cta-btn-primary::after { content: "\2192"; font-size: 17px; line-height: 1; margin-top: -1px; }
.apx-cta a.apx-cta-btn-primary:hover {
	background: #e6005c !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 18px 30px -12px rgba(255, 0, 102, .58);
}

/* secondary — clean outline */
.apx-cta a.apx-cta-btn-secondary {
	background: #fff !important;
	color: var(--apx-ink) !important;
	border-color: #e3dded !important;
}
.apx-cta a.apx-cta-btn-secondary:hover {
	background: #fff !important;
	color: var(--apx-purple) !important;
	border-color: var(--apx-purple) !important;
}

@media (max-width: 600px) {
	.apx-cta { padding: 30px 22px; }
	.apx-cta .apx-cta-heading { font-size: 24px !important; }
	.apx-cta .apx-cta-actions { flex-direction: column; }
	.apx-cta a.apx-cta-btn { width: 100%; min-width: 0; }
}