.ju-feature {
	display: none !important;
}

.sp-hero {
	height: 480px;
	width: 100%;
	position: relative;
}

.sp-hero-landing {
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
	height: 100%;
}

.sp-hero-video-landing {
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
	height: 100%;
	z-index: 100;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	pointer-events: none;

	& > * {
		pointer-events: auto;
	}
}

.sp-hero-video-button {
	--background-color: oklch(0% 0 0deg/15%);
	--foreground-color: white;
	color: var(--foreground-color);
	position: absolute;
	top: .5em;
	left: .5em;
	z-index: 9;
	width: 1.5em;
	height: 1.5em;
	font-size: 1.8em;
	border-radius: 50%;
	border: none;
	background: var(--background-color);
	cursor: pointer;
}

.sp-hero-video-button:hover, .sp-hero-video-button:focus-visible {
	--background-color: oklch(0% 0 0deg/90%);
	--foreground-color: white;
}

.sp-hero-video-button .play {
	display: none;
}

.sp-hero-video-button .play:after {
	content: "";
	position: absolute;
	display: block;
	top: 50%;
	left: calc(50% + 0.1em);
	transform: translateX(-50%) translateY(-50%);
	width: .6em;
	height: .6em;
	border-style: solid;
	border-width: 0.4em 0 0.4em .6em;
	border-color: transparent transparent transparent var(--foreground-color);
	box-sizing: border-box;
}

.sp-hero-video-button .pause {
	display: inline;

}

.sp-hero-video-button .pause:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	border-left: .23em solid var(--foreground-color);
	border-right: .23em solid var(--foreground-color);
	width: .15em;
	height: .7em;
	transform: translateX(-50%) translateY(-50%);
}

.sp-hero-video {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	object-fit: cover;
}

.sp-hero-video[data-playing=false] ~ .sp-hero-video-button .play {
	display: inline;
}

.sp-hero-video[data-playing=false] ~ .sp-hero-video-button .pause {
	display: none;
}

.sp-hero-card-wrapper {
	margin-top: 3rem;
	margin-bottom: 3rem;
	display: flex;
	justify-content: space-around;
	max-width: 1000px;
	width: 100%;
}

.sp-hero-landing--card {
	display: flex;
	/*border-radius: 8px; */
	padding: 1rem 2rem;
	background-color: #961b81;
	color: white;
	text-decoration: none;
}

.sp-hero-landing--card:hover {
	background-color: #80176e;
	text-decoration: underline;
}

.sp-hero-landing h1, .sp-hero-video-landing h1 {
	font-size: 6rem;
	font-weight: 700 !important;
	color: white;
}

@media screen and (max-width: 700px) {
	.sp-hero {
		height: 280px;
	}
}

@media screen and (max-width: 580px) {
	.sp-hero-card-wrapper {
		flex-direction: column;
		gap: 1rem;
		align-items: center;
		margin-top: 0rem;
		margin-bottom: 1rem;
	}

	.sp-hero-landing--card {
		width: 60%;
		padding: 0.5rem;
		justify-content: center;
	}
}

.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}