.seo-template-page .global-before-after {
	position: relative;
	overflow: hidden;
	border-bottom: var(--fg-space-px) solid var(--fg-color-background-15);
	background-color: var(--fg-color-text);
	color: var(--fg-color-background);
}

.seo-template-page .global-before-after__pattern {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--fg-color-background-08) var(--fg-space-px), transparent var(--fg-space-px)),
		linear-gradient(90deg, var(--fg-color-background-08) var(--fg-space-px), transparent var(--fg-space-px));
	background-size: var(--fg-grid-cell) var(--fg-grid-cell);
	mask-image: radial-gradient(ellipse at center, var(--fg-color-text) 30%, transparent 75%);
}

.seo-template-page .global-before-after__inner {
	position: relative;
	max-width: var(--fg-content-7xl);
	margin-inline: auto;
	padding: var(--fg-space-20) var(--fg-space-4);
}

.seo-template-page .global-before-after__header {
	max-width: var(--fg-content-3xl);
	margin-inline: auto;
	text-align: center;
}

.seo-template-page .global-before-after__kicker-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--fg-space-28);
	margin-bottom: var(--fg-space-8);
}

.seo-template-page .global-before-after__kicker-row span {
	width: var(--fg-space-12);
	height: var(--fg-space-px);
	background-color: var(--fg-color-background-60);
}

.seo-template-page .global-before-after__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--fg-space-2);
	border: var(--fg-space-px) solid var(--fg-color-background-20);
	border-radius: var(--fg-radius-full);
	background-color: var(--fg-color-background-10);
	padding: var(--fg-space-1) var(--fg-space-3);
	color: var(--fg-color-background-80);
	font-size: var(--fg-text-11);
	font-weight: var(--fg-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--fg-tracking-eyebrow);
	backdrop-filter: var(--fg-blur-sm);
}

.seo-template-page .global-before-after__eyebrow-icon,
.seo-template-page .global-before-after__label-icon,
.seo-template-page .global-before-after__active-icon,
.seo-template-page .global-before-after__thumb-svg,
.seo-template-page .global-before-after__button-icon {
	width: var(--fg-icon-sm);
	height: var(--fg-icon-sm);
	flex-shrink: 0;
}

.seo-template-page .global-before-after__title {
	margin: var(--fg-space-5) auto 0;
	max-width: var(--fg-content-4xl);
	font-size: var(--fg-text-5xl);
	line-height: var(--fg-leading-none);
	font-weight: var(--fg-weight-semibold);
	letter-spacing: var(--fg-tracking-tight);
}

.seo-template-page .global-before-after__intro {
	margin: var(--fg-space-5) auto 0;
	max-width: var(--fg-content-2xl);
	color: var(--fg-color-background-75);
	font-size: var(--fg-text-base);
	line-height: var(--fg-leading-base);
}

.seo-template-page .global-before-after__showcase {
	display: grid;
	gap: var(--fg-space-8);
	margin-top: var(--fg-space-14);
}

.seo-template-page .global-before-after__stage {
	position: relative;
	min-width: 0;
	min-height: 0;
}

.seo-template-page .global-before-after__frame {
	position: relative;
	min-width: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: var(--fg-space-px) solid var(--fg-color-background-15);
	border-radius: var(--fg-radius-3xl);
	background-color: var(--fg-color-background-05);
	box-shadow: var(--fg-shadow-before-after);
	cursor: ew-resize;
	touch-action: none;
	user-select: none;
}

.seo-template-page .global-before-after__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.seo-template-page .global-before-after__image--before {
	clip-path: inset(0 50% 0 0);
}

.seo-template-page .global-before-after__label {
	position: absolute;
	z-index: 3;
	top: var(--fg-space-3);
	display: inline-flex;
	align-items: center;
	gap: var(--fg-space-1-5);
	border-radius: var(--fg-radius-full);
	padding: var(--fg-space-1) var(--fg-space-2-5);
	font-size: var(--fg-text-2xs);
	font-weight: var(--fg-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--fg-tracking-eyebrow);
	backdrop-filter: var(--fg-blur-sm);
}

.seo-template-page .global-before-after__label--before {
	left: var(--fg-space-3);
	background-color: var(--fg-color-text);
	color: var(--fg-color-background);
}

.seo-template-page .global-before-after__label--after {
	right: var(--fg-space-3);
	background-color: var(--fg-color-background-95);
	color: var(--fg-color-text);
}

.seo-template-page .global-before-after__divider {
	position: absolute;
	z-index: 4;
	inset-block: 0;
	left: 50%;
	width: var(--fg-space-px);
	background-color: var(--fg-color-background);
	transform: translateX(-50%);
	box-shadow: var(--fg-shadow-outline-subtle);
}

.seo-template-page .global-before-after__handle {
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 50%;
	display: flex;
	width: var(--fg-space-10);
	height: var(--fg-space-10);
	align-items: center;
	justify-content: center;
	border: var(--fg-space-px) solid var(--fg-color-background-60);
	border-radius: var(--fg-radius-full);
	background-color: var(--fg-color-background);
	color: var(--fg-color-text);
	transform: translate(-50%, -50%);
	box-shadow: var(--fg-shadow-lg);
}

.seo-template-page .global-before-after__handle-icon,
.seo-template-page .global-before-after__hint-icon {
	width: var(--fg-space-4);
	height: var(--fg-space-4);
}

.seo-template-page .global-before-after__hint {
	position: absolute;
	z-index: 6;
	left: 50%;
	bottom: var(--fg-space-3);
	display: none;
	align-items: center;
	gap: var(--fg-space-2);
	border: var(--fg-space-px) solid var(--fg-color-background-20);
	border-radius: var(--fg-radius-full);
	background-color: var(--fg-color-text-55);
	padding: var(--fg-space-1-5) var(--fg-space-3);
	color: var(--fg-color-white);
	font-size: var(--fg-text-11);
	font-weight: var(--fg-weight-medium);
	transform: translateX(-50%);
	backdrop-filter: var(--fg-blur-sm);
	transition: opacity var(--fg-transition-fast);
}

.seo-template-page .global-before-after.is-comparing .global-before-after__hint {
	opacity: 0;
}

.seo-template-page .global-before-after__active-meta {
	position: absolute;
	z-index: 7;
	left: var(--fg-space-4);
	right: var(--fg-space-4);
	bottom: var(--fg-space-4);
	display: flex;
	align-items: center;
	gap: var(--fg-space-2);
	max-width: calc(100% - (var(--fg-space-4) * 2));
	pointer-events: none;
}

.seo-template-page .global-before-after__active-label,
.seo-template-page .global-before-after__active-category {
	display: inline-flex;
	min-width: 0;
	max-width: 100%;
	align-items: center;
	gap: var(--fg-space-1-5);
	border-radius: var(--fg-radius-full);
	padding: var(--fg-space-1-5) var(--fg-space-3);
	backdrop-filter: var(--fg-blur-sm);
}

.seo-template-page .global-before-after__active-label {
	background-color: var(--fg-color-background-95);
	color: var(--fg-color-text);
	font-size: var(--fg-text-11);
	font-weight: var(--fg-weight-semibold);
}

.seo-template-page .global-before-after__active-category {
	display: none;
	background-color: var(--fg-color-text-85);
	color: var(--fg-color-background);
	font-size: var(--fg-text-11);
	font-weight: var(--fg-weight-medium);
}

.seo-template-page .global-before-after__thumb-panel {
	display: flex;
	min-width: 0;
	min-height: 0;
	flex-direction: column;
	gap: var(--fg-space-2);
	border: var(--fg-space-px) solid var(--fg-color-background-15);
	border-radius: var(--fg-radius-3xl);
	background-color: var(--fg-color-background-04);
	padding: var(--fg-space-3);
	backdrop-filter: var(--fg-blur-sm);
}

.seo-template-page .global-before-after__thumb-head {
	display: flex;
	justify-content: space-between;
	padding: var(--fg-space-1) var(--fg-space-2) var(--fg-space-2);
	color: var(--fg-color-background-60);
	font-size: var(--fg-text-2xs);
	font-weight: var(--fg-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--fg-tracking-eyebrow);
}

.seo-template-page .global-before-after__thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--fg-space-2);
}

.seo-template-page .global-before-after__thumb {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: var(--fg-space-3);
	width: 100%;
	overflow: hidden;
	border: var(--fg-space-px) solid transparent;
	border-radius: var(--fg-radius-2xl);
	background-color: transparent;
	padding: var(--fg-space-2);
	color: var(--fg-color-background-70);
	text-align: left;
	transition: var(--fg-transition-property-interactive) var(--fg-transition-fast);
}

.seo-template-page .global-before-after__thumb:hover,
.seo-template-page .global-before-after__thumb.is-active {
	border-color: var(--fg-color-background-40);
	background-color: var(--fg-color-background-15);
	color: var(--fg-color-background);
}

.seo-template-page .global-before-after__thumb-media {
	position: relative;
	width: var(--fg-space-16);
	aspect-ratio: 1;
	flex-shrink: 0;
	overflow: hidden;
	border: var(--fg-space-px) solid var(--fg-color-background-15);
	border-radius: var(--fg-radius-lg);
}

.seo-template-page .global-before-after__thumb.is-active .global-before-after__thumb-media {
	border-color: var(--fg-color-background-40);
}

.seo-template-page .global-before-after__thumb-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.seo-template-page .global-before-after__thumb-img--before {
	clip-path: inset(0 50% 0 0);
}

.seo-template-page .global-before-after__thumb-media::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	width: var(--fg-space-px);
	background-color: var(--fg-color-background-70);
	transform: translateX(-50%);
}

.seo-template-page .global-before-after__thumb-copy {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
}

.seo-template-page .global-before-after__thumb-title {
	overflow: hidden;
	font-size: var(--fg-text-sm);
	font-weight: var(--fg-weight-semibold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.seo-template-page .global-before-after__thumb-meta {
	overflow: hidden;
	color: var(--fg-color-background-50);
	font-size: var(--fg-text-11);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.seo-template-page .global-before-after__thumb-icon {
	display: none;
	flex-shrink: 0;
	color: var(--fg-color-background);
}

.seo-template-page .global-before-after__thumb.is-active .global-before-after__thumb-icon {
	display: inline-flex;
}

.seo-template-page .global-before-after__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--fg-space-3);
	margin-top: var(--fg-space-10);
}

.seo-template-page .global-before-after__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fg-space-2);
	border-radius: var(--fg-radius-full);
	padding: var(--fg-space-3) var(--fg-space-6);
	font-size: var(--fg-text-sm);
	line-height: var(--fg-leading-sm);
	font-weight: var(--fg-weight-semibold);
	text-decoration: none;
	transition: transform var(--fg-transition-fast), background-color var(--fg-transition-fast);
}

.seo-template-page .global-before-after__button--primary {
	background-color: var(--fg-color-background);
	color: var(--fg-color-text);
}

.seo-template-page .global-before-after__button--secondary {
	border: var(--fg-space-px) solid var(--fg-color-background-35);
	color: var(--fg-color-background);
}

.seo-template-page .global-before-after__button:hover {
	transform: translateY(calc(var(--fg-space-0-5) * -1));
}

@media (max-width: 639px) {
	.seo-template-page .global-before-after__kicker-row {
		display: none;
	}

	.seo-template-page .global-before-after__title {
		font-size: var(--fg-text-4xl);
		line-height: var(--fg-leading-4xl);
	}
}

@media (min-width: 640px) {
	.seo-template-page .global-before-after__inner {
		padding-inline: var(--fg-space-6);
	}

	.seo-template-page .global-before-after__active-category {
		display: inline-flex;
	}

	.seo-template-page .global-before-after__hint {
		right: var(--fg-space-4);
		left: auto;
		display: inline-flex;
		transform: none;
	}

	.seo-template-page .global-before-after__title {
		font-size: var(--fg-text-6xl);
	}

	.seo-template-page .global-before-after__intro {
		font-size: var(--fg-text-lg);
		line-height: var(--fg-leading-lg);
	}
}

@media (min-width: 1024px) {
	.seo-template-page .global-before-after__inner {
		padding-inline: var(--fg-space-8);
	}

	.seo-template-page .global-before-after__showcase {
		grid-template-columns: minmax(0, 2fr) minmax(var(--fg-content-side-panel), 1fr);
		align-items: stretch;
	}

	.seo-template-page .global-before-after__stage,
	.seo-template-page .global-before-after__thumb-panel {
		min-height: var(--fg-media-min-height-lg);
	}

	.seo-template-page .global-before-after__frame {
		height: 100%;
		min-height: var(--fg-media-min-height-lg);
		aspect-ratio: auto;
	}
}