/* SP Video Showpiece v2 — hero cover doubles as the click-to-play video element */

/* --- overlay layer (inside the cover; clicks pass through except pill/play) --- */
.sp-hero-facade {
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.sp-hf-pill {
	position: absolute; top: 18px; left: 18px; pointer-events: auto; cursor: pointer;
	background: #ffc907; color: #153e8e; font-weight: 700;
	font-size: clamp(.85rem, 1.6vw, 1.05rem);
	padding: 8px 16px; border-radius: 999px; box-shadow: 0 3px 12px rgba(0,0,0,.35);
	transition: opacity .5s ease;
}
.sp-hf-play {
	position: absolute; top: 50%; left: 50%; margin: -46px 0 0 -46px;
	width: 92px; height: 92px; pointer-events: auto; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	background: rgba(21, 62, 142, .5); color: #fff; border: 0; border-radius: 50%;
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	box-shadow: 0 6px 24px rgba(0,0,0,.45);
	animation: sp-hf-breathe 3.2s ease-in-out infinite;
	transition: transform .25s ease, background .25s ease, opacity .5s ease;
}
.sp-hf-play svg { margin-left: 6px; }
.sp-hf-play:hover, .sp-hf-play:focus-visible { transform: scale(1.1); background: rgba(224, 58, 58, .85); animation-play-state: paused; opacity: 1; }
@keyframes sp-hf-breathe { 0%, 100% { opacity: .38; } 50% { opacity: 1; } }
.sp-hf-play::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 3px solid #ffc907; animation: sp-hf-ping 2.6s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes sp-hf-ping { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(1.7); opacity: 0; } }

/* --- playing state: pill, play, Shop CTA fade out; iframe fills cover above ticker --- */
.sp-hf-playing .sp-hf-pill, .sp-hf-playing .sp-hf-play { opacity: 0; pointer-events: none; }
.sp-hf-playing .wb-hero-cta { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.sp-hf-iframe {
	position: absolute; left: 0; right: 0; top: 0; z-index: 2;
	width: 100%; height: 100%; border: 0; background: #02061f;
}

/* --- ticker: taller + ~35% larger text, "Trusted by" now an item --- */
.wb-hero-checks-list li {
	font-size: clamp(.97rem, 2vw, 1.16rem) !important;
}
.wb-hero-checks-list {
	padding-top: .9rem !important;
	padding-bottom: .9rem !important;
}
.wb-hero-checks-list li::before {
	width: 1.55rem !important; height: 1.55rem !important; font-size: .92rem !important;
}
.wb-hero .wp-block-cover__inner-container {
	padding-bottom: calc(clamp(.9rem, 3.5%, 2rem) + 3.9rem) !important;
}

/* --- section divider: floating headphone graphic under the H1 --- */
.sp-divider-phones { text-align: center; }
.sp-divider-phones img {
	display: inline-block; width: min(22vw, 240px); height: auto;
	animation: sp-dp-float 5s ease-in-out infinite;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18));
}
@keyframes sp-dp-float {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50% { transform: translateY(-10px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
	.sp-divider-phones img { animation: none; }
}

@media (max-width: 767px) {
	.sp-hf-pill { top: 12px; left: 12px; font-size: .8rem; padding: 6px 12px; }
	.sp-hf-play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
	.wb-hero-checks-list { padding-top: .7rem !important; padding-bottom: .7rem !important; }
}
@media (prefers-reduced-motion: reduce) {
	.sp-hf-play, .sp-hf-play::before { animation: none; opacity: 1; }
	.sp-hf-pill, .sp-hf-play, .sp-hf-playing .wb-hero-cta { transition: none; }
}