/* CoupenYaari AI Automation — article media (infographic, video, screenshots). Uses the theme's colours when present. */
.cyai-info {
	--ci-navy: var(--navy-900, #0b1230);
	--ci-violet: var(--violet, #6c47ff);
	--ci-blue: var(--blue, #2e7bff);
	--ci-lime: var(--lime, #b8f53a);
	margin: 1.75em 0;
	padding: clamp(18px, 3.5vw, 30px);
	border-radius: var(--r-lg, 22px);
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(108, 71, 255, .45), transparent 60%),
		radial-gradient(80% 80% at 0% 100%, rgba(46, 123, 255, .35), transparent 60%),
		var(--ci-navy);
	color: #fff;
	box-shadow: var(--shadow-lg, 0 30px 70px -24px rgba(52, 36, 160, .38));
	overflow: hidden;
}
.cyai-info__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin-bottom: 18px;
}
.cyai-info__badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--ci-lime);
	color: var(--ci-navy);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.cyai-info__brand {
	font-family: var(--font-display, inherit);
	font-size: clamp(20px, 3vw, 26px);
	line-height: 1.1;
	color: #fff;
}
.cyai-info__glance {
	margin-left: auto;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}
.cyai-info__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 12px;
}
.cyai-info__stat {
	min-width: 0;
	padding: 14px 16px;
	border-radius: var(--r-sm, 12px);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
}
.cyai-info__stat span,
.cyai-info__how > span {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, .65);
}
.cyai-info__stat strong {
	display: block;
	font-size: 16px;
	line-height: 1.35;
	color: #fff;
	overflow-wrap: anywhere;
}
.cyai-info__stat--code strong {
	font-family: var(--font-mono, ui-monospace, monospace);
	color: var(--ci-lime);
	letter-spacing: .04em;
}
.cyai-info__how {
	margin-top: 18px;
}
.cyai-info__steps {
	list-style: none;
	counter-reset: cyai;
	margin: 6px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.cyai-info__steps li {
	counter-increment: cyai;
	position: relative;
	margin: 0;
	padding: 2px 0 2px 40px;
	min-height: 28px;
	line-height: 1.45;
	color: #fff;
}
.cyai-info__steps li::before {
	content: counter(cyai);
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--ci-violet), var(--ci-blue));
	font-size: 13px;
	font-weight: 800;
}
.cyai-info figcaption {
	margin-top: 18px;
	font-size: 12px;
	color: rgba(255, 255, 255, .55);
}
.cyai-video,
.cyai-shots {
	margin: 1.75em 0;
}
.cyai-video figcaption,
.cyai-shots figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--muted, #646c8f);
	text-align: center;
}
.cyai-shots {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(var(--cyai-cols, 1), minmax(0, 1fr));
	align-items: start;
}
.cyai-shots--2 { --cyai-cols: 2; }
.cyai-shots--3 { --cyai-cols: 3; }
.cyai-shots img {
	width: 100%;
	height: auto;
	border-radius: var(--r-sm, 12px);
	border: 1px solid var(--line, #e3e6f2);
	background: #fff;
}
.cyai-shots figcaption {
	grid-column: 1 / -1;
}
@media (max-width: 560px) {
	.cyai-shots--3 { --cyai-cols: 2; }
	.cyai-info__glance { display: none; }
}