/*
 * Testimonial marquee (spec §4.13). Plan fix 6: pause on hover (and on keyboard focus) actually works here, because the
 * pause rule comes after the animation shorthand and has higher specificity. Keep that order.
 */
.marquee { position: relative; overflow: hidden; padding-block: calc(var(--spacing) * 2); }
.marquee__fade { position: absolute; top: 0; bottom: 0; z-index: 10; width: calc(var(--spacing) * 8); pointer-events: none; }
.marquee__fade--start { inset-inline-start: 0; background-image: linear-gradient(to right, var(--color-white), transparent); }
.marquee__fade--end { inset-inline-end: 0; background-image: linear-gradient(to left, var(--color-white), transparent); }
@media (min-width: 48rem) { .marquee__fade { width: calc(var(--spacing) * 16); } }
.marquee__track {
	display: flex;
	gap: calc(var(--spacing) * 6);
	padding-block: calc(var(--spacing) * 2);
	width: max-content;
	animation: tc-scroll-left 30s linear infinite;
}
@media (max-width: 768px) { .marquee__track { animation-duration: 18s; } }
.marquee__track:hover, .marquee__track:focus-within, .marquee__track:focus { animation-play-state: paused; }
.marquee__track:focus-visible { outline: 2px solid var(--color-brand-orange); outline-offset: 2px; }
[dir="rtl"] .marquee__track { animation-name: tc-scroll-right; }
@keyframes tc-scroll-left { 0% { transform: translate(0); } 100% { transform: translate(-50%); } }
@keyframes tc-scroll-right { 0% { transform: translate(0); } 100% { transform: translate(50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

.testimonial-card {
	position: relative;
	flex-shrink: 0;
	width: 300px;
	padding: calc(var(--spacing) * 6);
	border-radius: var(--radius-4xl);
	border: 1px solid;
}
@media (min-width: 40rem) { .testimonial-card { width: 340px; } }
.testimonial-card--v0, .testimonial-card--v3 { border-color: var(--color-orange-20a); background-color: var(--color-orange-05a); }
.testimonial-card--v1 { border-color: var(--color-gray-100); background-color: var(--color-white); box-shadow: var(--shadow-sm); }
.testimonial-card--v2 { border-color: var(--color-gray-100); background-color: var(--color-gray-50); }
.testimonial-card__quote {
	position: absolute;
	top: calc(var(--spacing) * 4);
	inset-inline-end: calc(var(--spacing) * 4);
	font-family: var(--font-serif);
	font-size: var(--text-4xl);
	line-height: var(--text-4xl-lh);
	color: var(--color-orange-20a);
}
.testimonial-card__text {
	position: relative;
	z-index: 10;
	margin-bottom: calc(var(--spacing) * 6);
	font-size: var(--text-sm);
	line-height: var(--text-sm-lh);
	color: var(--color-gray-600);
}
@media (min-width: 40rem) { .testimonial-card__text { font-size: var(--text-base); line-height: var(--text-base-lh); } }
.testimonial-card__person { display: flex; align-items: center; gap: calc(var(--spacing) * 3); }
.testimonial-card__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: calc(var(--spacing) * 10);
	height: calc(var(--spacing) * 10);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	line-height: var(--text-sm-lh);
	font-weight: var(--font-weight-bold);
}
.testimonial-card__avatar--v0 { background-color: var(--color-brand-orange); color: var(--color-white); }
.testimonial-card__avatar--v1 { background-color: var(--color-blue-20a); color: var(--color-bar-blue); }
.testimonial-card__avatar--v2 { background-color: var(--color-green-20a); color: var(--color-bar-green); }
.testimonial-card__avatar--v3 { background-color: var(--color-red-20a); color: var(--color-bar-red); }
.testimonial-card__name { display: block; font-size: var(--text-sm); line-height: var(--text-sm-lh); font-weight: var(--font-weight-semibold); color: var(--color-brand-dark); }
.testimonial-card__role { display: block; font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--color-gray-500); }