/* Success-cases: browser-frame website outcomes (2×2) */

.aia-site-outcomes {
	background:
		radial-gradient(ellipse 70% 45% at 8% 0%, rgba(47, 214, 123, 0.1), transparent 58%),
		radial-gradient(ellipse 50% 40% at 100% 100%, rgba(31, 191, 102, 0.08), transparent 55%),
		#fff;
}

.aia-site-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

.aia-site-card {
	min-width: 0;
	height: 100%;
}

.aia-browser {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 1.05rem;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(18, 48, 31, 0.07);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.aia-browser:hover {
	color: inherit;
	border-color: rgba(47, 214, 123, 0.65);
	transform: translateY(-3px);
	box-shadow: 0 22px 48px rgba(18, 48, 31, 0.12);
}

.aia-browser:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
}

.aia-browser__chrome {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 0.7rem;
	background: linear-gradient(180deg, #f7fdf9 0%, #eef8f2 100%);
	border-bottom: 1px solid var(--line);
}

.aia-browser__dots {
	display: inline-flex;
	gap: 0.32rem;
}

.aia-browser__dots i {
	display: block;
	width: 0.48rem;
	height: 0.48rem;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(18, 48, 31, 0.08);
}

.aia-browser__dots i:nth-child(1) {
	background: #ff8f88;
}

.aia-browser__dots i:nth-child(2) {
	background: #f6d36b;
}

.aia-browser__dots i:nth-child(3) {
	background: var(--green);
}

.aia-browser__url {
	justify-self: center;
	max-width: 100%;
	overflow: hidden;
	padding: 0.18rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--ink-soft);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aia-browser__open {
	color: var(--green-deep);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.aia-browser__viewport {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f4fbf7;
}

.aia-browser__viewport img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.45s ease;
}

.aia-browser:hover .aia-browser__viewport img {
	transform: scale(1.03);
}

.aia-browser__meta {
	display: grid;
	gap: 0.35rem;
	padding: 1rem 1.1rem 1.15rem;
	border-top: 1px solid rgba(216, 240, 226, 0.85);
}

.aia-browser__kicker {
	color: var(--green-deep);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.aia-browser__meta h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
}

.aia-browser__proof {
	color: var(--muted);
	font-size: 0.92rem;
	line-height: 1.7;
}

.aia-browser__go {
	margin-top: 0.2rem;
	color: var(--green-deep);
	font-size: 0.84rem;
	font-weight: 700;
}

.aia-browser__go::after {
	content: " →";
}

.aia-browser:hover .aia-browser__go {
	color: var(--ink);
}

@media (min-width: 768px) {
	.aia-site-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aia-browser,
	.aia-browser__viewport img {
		transition: none;
	}

	.aia-browser:hover,
	.aia-browser:hover .aia-browser__viewport img {
		transform: none;
	}
}

/* Case overview: metric card + matching proof image per column */
#case-overview .aia-case-stats {
	gap: 1.35rem;
}

#case-overview .aia-case-stat-col {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	min-width: 0;
}

#case-overview .aia-case-stat-col .aia-case-stat {
	margin: 0;
	min-height: 100%;
	border: 1px solid var(--line);
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 10px 28px rgba(18, 48, 31, 0.05);
}

#case-overview .aia-case-stat__proof {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 1rem;
	background: #0b0f14;
	box-shadow: 0 10px 28px rgba(18, 48, 31, 0.05);
}

#case-overview .aia-case-stat__zoom {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
	line-height: 0;
}

#case-overview .aia-case-stat__zoom:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
}

#case-overview .aia-case-stat__proof img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center top;
	background: #0b0f14;
}

#case-overview .aia-case-stat__proof figcaption {
	margin: 0;
	padding: 0.7rem 0.9rem 0.85rem;
	border-top: 1px solid rgba(216, 240, 226, 0.35);
	background: #fff;
	color: var(--muted);
	font-size: 0.82rem;
	line-height: 1.55;
}

@media (min-width: 900px) {
	#case-overview .aia-case-stats {
		align-items: start;
		gap: 1.25rem;
	}
}

/* Learner proofs: keep each screenshot at its full height. */
#learner-youtube .aia-case-proof {
	align-items: start;
}

#learner-youtube .aia-case-proof__media,
#learner-youtube .aia-case-proof__zoom {
	height: auto;
	max-height: none;
}

#learner-youtube .aia-case-proof__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	object-position: center center;
}