/**
 * RL What Coming — matches React: py-20, border-t slate-100, blue card borders, badges
 */





.rwc-head {
	text-align: center;
	margin-bottom: 3.5rem;
}

.rwc-title {
	font-size: 38px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin: 0;
}

.rwc-lead {
	font-size: 17px;
	line-height: 1.6;
	color: #64748b;
	margin: 1rem auto 0;
	max-width: 46rem;
}

/* Grid: 1 / 2 / 3 cols */
.rwc-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.rwc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.rwc-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rwc-card {
	background: #fff;
	border: 1px solid #dbeafe;
	border-radius: 1rem;
	padding: 1.5rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rwc-card:hover {
	border-color: #93c5fd;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Badges — Blue (COMING NEXT) */
.rwc-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.5rem;
	border-radius: 0.375rem;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rwc-badge--blue {
	background: #eff6ff;
	color: #1d4ed8;
	border: 1px solid #bfdbfe;
}

/* Horizon (ON THE HORIZON) — gradient-adjacent violet / sky */
.rwc-badge--horizon {
	background: linear-gradient(135deg, #faf5ff 0%, #eff6ff 100%);
	color: #6d28d9;
	border: 1px solid #e9d5ff;
}

.rwc-card-title {
	font-size: 17px;
	font-weight: 700;
	color: #0f172a;
	margin: 1rem 0 0.75rem;
	line-height: 1.35;
}

.rwc-card-desc {
	font-size: 14px;
	line-height: 1.625;
	color: #64748b;
	margin: 0;
}

/* Scroll-in (Framer-style whileInView) */
.rwc-head[data-rwc-animate],
.rwc-card[data-rwc-animate] {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.5s ease,
		transform 0.5s ease;
	transition-delay: var(--rwc-delay, 0s);
}

.rwc-head[data-rwc-animate].rwc--inview,
.rwc-card[data-rwc-animate].rwc--inview {
	opacity: 1;
	transform: translateY(0);
}

.rwc-head[data-rwc-animate] {
	transition-duration: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
	.rwc-head[data-rwc-animate],
	.rwc-card[data-rwc-animate] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	html:not(.theme-light) .rwc-section {
		background: #020617;
		border-top-color: #1e293b;
	}

	html:not(.theme-light) .rwc-title {
		color: #f8fafc;
	}

	html:not(.theme-light) .rwc-lead {
		color: #94a3b8;
	}

	html:not(.theme-light) .rwc-card {
		background: #0f172a;
		border-color: #1e3a8a;
	}

	html:not(.theme-light) .rwc-card:hover {
		border-color: #3b82f6;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	}

	html:not(.theme-light) .rwc-badge--blue {
		background: rgba(37, 99, 235, 0.2);
		color: #93c5fd;
		border-color: #1e40af;
	}

	html:not(.theme-light) .rwc-badge--horizon {
		background: linear-gradient(135deg, rgba(109, 40, 217, 0.25) 0%, rgba(37, 99, 235, 0.2) 100%);
		color: #c4b5fd;
		border-color: #5b21b6;
	}

	html:not(.theme-light) .rwc-card-title {
		color: #f8fafc;
	}

	html:not(.theme-light) .rwc-card-desc {
		color: #94a3b8;
	}
}


html.theme-dark .rwc-title,
.salient .dark .rwc-title {
	color: #f8fafc;
}

html.theme-dark .rwc-lead,
.salient .dark .rwc-lead {
	color: #94a3b8;
}

html.theme-dark .rwc-card,
.salient .dark .rwc-card {
	background: #0f172a;
	border-color: #1e3a8a;
}

html.theme-dark .rwc-card:hover,
.salient .dark .rwc-card:hover {
	border-color: #3b82f6;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html.theme-dark .rwc-badge--blue,
.salient .dark .rwc-badge--blue {
	background: rgba(37, 99, 235, 0.2);
	color: #93c5fd;
	border-color: #1e40af;
}

html.theme-dark .rwc-badge--horizon,
.salient .dark .rwc-badge--horizon {
	background: linear-gradient(135deg, rgba(109, 40, 217, 0.25) 0%, rgba(37, 99, 235, 0.2) 100%);
	color: #c4b5fd;
	border-color: #5b21b6;
}

html.theme-dark .rwc-card-title,
.salient .dark .rwc-card-title {
	color: #f8fafc;
}

html.theme-dark .rwc-card-desc,
.salient .dark .rwc-card-desc {
	color: #94a3b8;
}