/* ==========================================================================
   Kinetic ACM block: cta  (shared call-to-action, used on EVERY page)
   Self-contained, block-scoped. NOT @imported into the template _all.scss.
   - variant card: THEMED rounded card per .pen component/CTABand (B8mBHa):
       fill = linear $elevated -> $surface + radial $primary glow; border $border;
       radius 20; padding [60,40]; title $heading; sub $text; eyebrow $primary.
       Flips light<->dark (light card on light pages, dark card on dark pages).
       NOTE: body --elevated (dark) is #0F1311 in this build, but the design card
       wants $elevated=#161B18 — so the dark TOP stop is pinned to #161B18 locally.
   - secondary: ghost button (e.g. "Talk to sales") OR a permanent-dark mono code
       chip ("$ kinetic init", home) — chip is a terminal motif, dark in both modes.
   - variant band: bare full-width band that flips with the page theme (--elevated).
   - lime accents route through --primary so they adapt per style/theme.
   ========================================================================== */

.acm-cta .hx-section {
	padding-block: 80px;
}

.acm-cta .hx-container {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 32px;
}

.acm-cta .hx-cta-inner {
	text-align: center;
}

.acm-cta .hx-cta-eyebrow {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 14px;
}

.acm-cta .hx-cta-title {
	font-family: "Space Grotesk", system-ui, sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -1.2px;
	margin: 0 auto;
	max-width: 680px;
}

.acm-cta .hx-cta-sub {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	margin: 14px auto 0;
	max-width: 480px;
}

.acm-cta .hx-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 30px;
}

.acm-cta .hx-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	padding: 14px 26px;
	border-radius: 9px;
	border: 1px solid transparent;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.acm-cta .hx-cta-btn svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.acm-cta .hx-cta-btn-primary {
	background: var(--primary);
	color: var(--primary-ink);
}

.acm-cta .hx-cta-btn-primary:hover,
.acm-cta .hx-cta-btn-primary:focus-visible {
	background: var(--primary-hover);
	color: var(--primary-ink);
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 77, 124, 15), .25);
	outline: none;
}

/* ----------  ghost/secondary button (micro-interactions.md §3b) — generic
   scope so both the card and band variants share the same gesture ---------- */
.acm-cta .hx-cta-btn-ghost {
	background: color-mix(in srgb, var(--heading) 4%, transparent);
	border-color: var(--border);
	color: var(--heading);
}

.acm-cta .hx-cta-btn-ghost:hover,
.acm-cta .hx-cta-btn-ghost:focus-visible {
	background: color-mix(in srgb, var(--primary) 10%, transparent);
	border-color: var(--primary);
	color: var(--primary);
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 77, 124, 15), .18);
	outline: none;
}

/* ----------  secondary: permanent-dark mono code chip ("$ kinetic init")  ---------- */
.acm-cta .hx-cta-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	padding: 13px 20px;
	border-radius: 9px;
	background: #121614;
	border: 1px solid #232A27;
	color: #9AA6A1;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* chip stays permanent-dark across themes (terminal motif); only the border
   reacts on hover/focus so it doesn't read as a dead link */
.acm-cta .hx-cta-chip:hover,
.acm-cta .hx-cta-chip:focus-visible {
	border-color: var(--primary);
	outline: none;
}
.acm-cta .hx-cta-chip:focus-visible {
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 77, 124, 15), .25);
}

.acm-cta .hx-cta-chip .hx-cta-chip-sigil {
	color: var(--sigil-accent, #A3E635);
}
/* dark chip: sigil uses each style's bright accent, fixed across page light/dark */
html[data-style="blueprint"] .acm-cta .hx-cta-chip .hx-cta-chip-sigil { color: #6366F1; }
html[data-style="signal"]    .acm-cta .hx-cta-chip .hx-cta-chip-sigil { color: #22D3EE; }

/* ----------  variant: card  (THEMED — flips with the page theme)  ---------- */
.acm-cta.cta-card .hx-cta-inner {
	background:
		radial-gradient(110% 90% at 72% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 75%),
		linear-gradient(180deg, var(--hx-cta-elevated, var(--elevated)) 0%, var(--surface) 100%);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 60px 40px;
}

/* body --elevated (dark) is #0F1311 in this build; design card top = $elevated #161B18 */
html.t4-dark .acm-cta.cta-card .hx-cta-inner {
	--hx-cta-elevated: #161B18;
}

.acm-cta.cta-card .hx-cta-title {
	color: var(--heading);
}

.acm-cta.cta-card .hx-cta-sub {
	color: var(--text);
}

/* ----------  variant: band  (flips with the page theme)  ---------- */
.acm-cta.cta-band .hx-cta-inner {
	background: transparent;
}

.acm-cta.cta-band .hx-cta-title {
	color: var(--heading);
}

.acm-cta.cta-band .hx-cta-sub {
	color: var(--text);
}

.acm-cta.cta-band .hx-section {
	background: var(--elevated);
}

/* ----------  tablet (<= 991): CTAWrap [56,40], desktop card kept  ---------- */
@media (max-width: 991.98px) {
	.acm-cta .hx-section {
		padding-block: 56px;
	}

	.acm-cta .hx-container {
		padding-inline: 40px;
	}
}

/* ----------  mobile (<= 620): MobileCTA frame (.pen AzMIt, 390)  ---------- */
@media (max-width: 620px) {
	.acm-cta .hx-section {
		padding-block: 48px;
	}

	.acm-cta .hx-container {
		padding-inline: 24px;
	}

	.acm-cta .hx-cta-eyebrow {
		font-size: 11px;
		letter-spacing: 1.5px;
		margin-bottom: 12px;
	}

	.acm-cta .hx-cta-title {
		font-size: 24px;
		letter-spacing: -0.5px;
		line-height: 1.1;
	}

	.acm-cta .hx-cta-sub {
		font-size: 14px;
		margin-top: 12px;
	}

	.acm-cta.cta-card .hx-cta-inner {
		padding: 40px 22px;
	}

	.acm-cta .hx-cta-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-top: 26px;
	}

	.acm-cta .hx-cta-btn,
	.acm-cta .hx-cta-chip {
		width: 100%;
	}

	.acm-cta .hx-cta-chip {
		justify-content: center;
	}
}

/* Reduced motion (micro-interactions.md §4) */
@media (prefers-reduced-motion: reduce) {
	* { transition-duration: .01ms !important; }
}