.s92-divider-root {
	--s92-divider-top-color: #111411;
	--s92-divider-top-second-color: #8bcf21;
	--s92-divider-top-height: 84px;
	--s92-divider-top-diameter: 260px;
	--s92-divider-top-depth: 58%;
	--s92-divider-top-opacity: 1;
	--s92-divider-top-second-opacity: 0.22;
	--s92-divider-top-offset: 0px;
	--s92-divider-top-layer-gap: 10px;
	--s92-divider-bottom-color: #f3f2ed;
	--s92-divider-bottom-second-color: #8bcf21;
	--s92-divider-bottom-height: 84px;
	--s92-divider-bottom-diameter: 260px;
	--s92-divider-bottom-depth: 58%;
	--s92-divider-bottom-opacity: 1;
	--s92-divider-bottom-second-opacity: 0.22;
	--s92-divider-bottom-offset: 0px;
	--s92-divider-bottom-layer-gap: 10px;
	position: relative;
	isolation: isolate;
}

.s92-divider-host {
	position: relative;
	isolation: isolate;
}

.s92-shape-divider {
	--s92-divider-height: 84px;
	--s92-divider-diameter: 260px;
	--s92-divider-depth: 58%;
	--s92-divider-color: #f3f2ed;
	--s92-divider-second-color: #8bcf21;
	--s92-divider-opacity: 1;
	--s92-divider-second-opacity: 0.22;
	--s92-divider-offset: 0px;
	--s92-divider-layer-gap: 10px;
	position: absolute;
	z-index: -1;
	inset-inline: 0;
	display: block;
	width: 100%;
	height: var(--s92-divider-height);
	overflow: hidden;
	opacity: var(--s92-divider-opacity);
	pointer-events: none;
}

.s92-shape-divider::before,
.s92-shape-divider::after {
	position: absolute;
	right: auto;
	bottom: 0;
	left: -80px;
	width: calc(100% + 160px);
	height: var(--s92-divider-depth);
	background: var(--s92-divider-color);
	content: "";
	transform: translateX(var(--s92-divider-offset));
	transform-origin: center;
}

.s92-shape-divider::before {
	z-index: 0;
	display: none;
	background: var(--s92-divider-second-color);
	opacity: var(--s92-divider-second-opacity);
	transform: translateX(var(--s92-divider-offset)) translateY(calc(-1 * var(--s92-divider-layer-gap)));
}

.s92-shape-divider::after {
	z-index: 1;
}

.s92-shape-divider--layered::before {
	display: block;
}

.s92-shape-divider--top {
	--s92-divider-height: var(--s92-divider-top-height);
	--s92-divider-diameter: var(--s92-divider-top-diameter);
	--s92-divider-depth: var(--s92-divider-top-depth);
	--s92-divider-color: var(--s92-divider-top-color);
	--s92-divider-second-color: var(--s92-divider-top-second-color);
	--s92-divider-opacity: var(--s92-divider-top-opacity);
	--s92-divider-second-opacity: var(--s92-divider-top-second-opacity);
	--s92-divider-offset: var(--s92-divider-top-offset);
	--s92-divider-layer-gap: var(--s92-divider-top-layer-gap);
	top: 0;
	transform: scaleY(-1);
}

.s92-shape-divider--top.s92-shape-divider--flip {
	transform: scale(-1);
}

.s92-shape-divider--bottom {
	--s92-divider-height: var(--s92-divider-bottom-height);
	--s92-divider-diameter: var(--s92-divider-bottom-diameter);
	--s92-divider-depth: var(--s92-divider-bottom-depth);
	--s92-divider-color: var(--s92-divider-bottom-color);
	--s92-divider-second-color: var(--s92-divider-bottom-second-color);
	--s92-divider-opacity: var(--s92-divider-bottom-opacity);
	--s92-divider-second-opacity: var(--s92-divider-bottom-second-opacity);
	--s92-divider-offset: var(--s92-divider-bottom-offset);
	--s92-divider-layer-gap: var(--s92-divider-bottom-layer-gap);
	bottom: 0;
}

.s92-shape-divider--bottom.s92-shape-divider--flip {
	transform: scaleX(-1);
}

/* A seamless dark-to-light transition without a visible hard edge. */
.s92-shape-divider--fade::after {
	background: linear-gradient(to bottom, transparent 0%, var(--s92-divider-color) 100%);
}

.s92-shape-divider--fade::before {
	background: linear-gradient(to bottom, transparent 0%, var(--s92-divider-second-color) 100%);
}

/* Broad architectural forms. */
.s92-shape-divider--slope::before,
.s92-shape-divider--slope::after {
	clip-path: polygon(0 64%, 100% 0, 100% 100%, 0 100%);
}

.s92-shape-divider--arc::before,
.s92-shape-divider--arc::after {
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.s92-shape-divider--chevron::before,
.s92-shape-divider--chevron::after {
	clip-path: polygon(0 58%, 50% 0, 100% 58%, 100% 100%, 0 100%);
}

.s92-shape-divider--notch::before,
.s92-shape-divider--notch::after {
	clip-path: polygon(
		0 62%,
		14% 62%,
		14% 43%,
		39% 43%,
		46% 8%,
		54% 8%,
		61% 43%,
		86% 43%,
		86% 62%,
		100% 62%,
		100% 100%,
		0 100%
	);
}

/* Repeatable shapes. The scale/diameter control changes the rhythm. */
.s92-shape-divider--wave::before,
.s92-shape-divider--wave::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 48C33 7 67 7 100 48s67 41 100 0v52H0z'/%3E%3C/svg%3E");
	-webkit-mask-position: left bottom;
	-webkit-mask-repeat: repeat-x;
	-webkit-mask-size: var(--s92-divider-diameter) 100%;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 48C33 7 67 7 100 48s67 41 100 0v52H0z'/%3E%3C/svg%3E");
	mask-position: left bottom;
	mask-repeat: repeat-x;
	mask-size: var(--s92-divider-diameter) 100%;
}

.s92-shape-divider--scallop::before,
.s92-shape-divider--scallop::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0c0 48 42 72 100 72S200 48 200 0v100H0z'/%3E%3C/svg%3E");
	-webkit-mask-position: left bottom;
	-webkit-mask-repeat: repeat-x;
	-webkit-mask-size: var(--s92-divider-diameter) 100%;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0c0 48 42 72 100 72S200 48 200 0v100H0z'/%3E%3C/svg%3E");
	mask-position: left bottom;
	mask-repeat: repeat-x;
	mask-size: var(--s92-divider-diameter) 100%;
}

.s92-shape-divider--steps::before,
.s92-shape-divider--steps::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 74h38V56h42V32h80v24h42v18h38v26H0z'/%3E%3C/svg%3E");
	-webkit-mask-position: left bottom;
	-webkit-mask-repeat: repeat-x;
	-webkit-mask-size: var(--s92-divider-diameter) 100%;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 74h38V56h42V32h80v24h42v18h38v26H0z'/%3E%3C/svg%3E");
	mask-position: left bottom;
	mask-repeat: repeat-x;
	mask-size: var(--s92-divider-diameter) 100%;
}

@media (prefers-reduced-motion: reduce) {
	.s92-shape-divider {
		transition: none !important;
	}
}