.page-id-209 {
	.page-header::before {
		transform: skewY(1.5deg) translateY(-16px);
		background-image: linear-gradient(#5c9fea, color-mix(in srgb, black 10%, #5c9fea));
		animation: page-id-209-header 16s ease-in-out infinite;
		animation-direction: alternate;
	}

	[src="/apps/alembicue/alembicue-intentions.mp4"] {
		margin: -64px -8px -32px 0;
	}

	.heading-vcs-added {
		border-left: 8px solid #BEE7BE;

		&::before {
			content: "Added heading";
			position: absolute;
			font-size: small;
			font-weight: normal;
			margin-top: -30px;
			margin-left: -105px;
			width: 70px;
			padding: 6px;
			background: #F8F7F9;
			border: 1px solid rgb(212, 212, 212);
			border-radius: 4px;
			box-shadow: 0 2px 3px #e3dfe7;
		}
	}

	.card > h2:first-of-type {
		--from: #1c4b94;
		--to: #071327;
		border-top: none;
		margin-top: 32px;
		margin-bottom: 32px;

		@media (prefers-color-scheme: dark) {
			filter: brightness(5);
		}
	}
}

@keyframes page-id-209-header {
	to {
		transform: skewY(0deg) translateY(-12px);
	}
}

.hero-feature-scroll {
	@media (min-width: 768px) {
		margin: 0 calc((-100vw + var(--width)) / 2);
	}

	overflow: hidden;
	--count: 7;
	--duration: 50;

	.hero-feature-scroll-row {
		overflow: hidden;
		position: relative;
		height: 2.4em;
		font-size: 1.2em;
		color: #54656c;

		> span {
			position: absolute;
			padding: 8px;
			animation-name: hero-feature-scroll;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}

		&:nth-child(0) {
			--i: 0;

			> span:nth-child(0) { --j: 0; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(1) { --j: 1; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(2) { --j: 2; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(3) { --j: 3; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(4) { --j: 4; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(5) { --j: 5; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(6) { --j: 6; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(7) { --j: 7; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(8) { --j: 8; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(9) { --j: 9; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(10) { --j: 10; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
		}

		&:nth-child(1) {
			--i: 1;

			> span:nth-child(0) { --j: 0; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(1) { --j: 1; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(2) { --j: 2; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(3) { --j: 3; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(4) { --j: 4; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(5) { --j: 5; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(6) { --j: 6; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(7) { --j: 7; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(8) { --j: 8; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(9) { --j: 9; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(10) { --j: 10; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
		}

		&:nth-child(2) {
			--i: 2;

			> span:nth-child(0) { --j: 0; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(1) { --j: 1; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(2) { --j: 2; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(3) { --j: 3; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(4) { --j: 4; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(5) { --j: 5; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(6) { --j: 6; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(7) { --j: 7; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(8) { --j: 8; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(9) { --j: 9; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
			> span:nth-child(10) { --j: 10; animation-delay: calc(-1s * var(--j) * var(--duration) / var(--count)); animation-duration: calc(1s * (var(--duration) + (var(--i) - 1) * 4)); }
		}
	}
}

@keyframes hero-feature-scroll {
	from {
		transform: translateX(2000px);
	}
	to {
		transform: translateX(-2000px);
	}
}

.review-stars {
	width: 320px;
	margin: 32px auto;
	padding: 16px;
	display: flex;

	.review-stars--summary {
		width: 80px;
		font-size: 0.8em;
		text-align: center;

		[itemprop="ratingValue"] {
			font-size: 2.2em;
			color: var(--fg);
			display: block;
			font-weight: 500;
		}
	}

	.review-stars--bars {
		flex-grow: 1;
		font-size: 0.5em;

		> div {
			display: flex;
			width: 100%;
			align-items: center;
		}
	}

	.unicode-stars {
		font-size: 0.5em;
		color: var(--temperature);
		text-align: right;
		width: 80px;
	}

	.rating-count {
		width: 40px;
		text-align: right;
	}
}

.bargraph-container {
	width: 100%;
	margin: 0 8px;

	.bargraph {
		border-radius: 4px;
		background: #d8d8d8;
	}

	.bar {
		height: 3px;
		background: #929292;
		border-radius: 4px 0 0 4px;
	}
}

.testimonials {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	height: 320px;
	overflow: scroll;
}

.testimonial {
	background: var(--lg);
	padding: 8px;
	margin: 8px;
	width: 24%;
	min-width: 200px;

	.testimonial--name, .unicode-stars {
		font-size: 0.8em;
		color: #3c3c3c;
		margin-bottom: 4px;
	}

	.testimonial--content {
		font-size: 0.9em;
	}
}