/* ── Trust marquee ───────────────────────────────────────────────────────────
   Thin scrolling bar above the header. The track holds the promises twice and
   travels -50%, so the second copy is on screen while the first is scrolling
   out and the loop never shows a seam. */

.sp-marquee {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	height: 34px;
	overflow: hidden;
	background: #0d0d0d;
	color: #fff;
	border-bottom: 1px solid #222;
}

.sp-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	white-space: nowrap;
	animation: sp-marquee 28s linear infinite;
}

.sp-marquee__run {
	display: flex;
	align-items: center;
	gap: 58px;
	padding-left: 58px;
}

.sp-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
}

.sp-marquee__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #7f7f7f;
}

/* Hovering lets someone actually read a promise before it leaves. */
.sp-marquee:hover .sp-marquee__track {
	animation-play-state: paused;
}

@keyframes sp-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ── Trustpilot ──────────────────────────────────────────────────────────── */

.sp-marquee__tp {
	gap: 7px;
}

.sp-marquee__tp-mark {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
}

.sp-marquee__tp-logo {
	margin-right: 4px;
	color: #00b67a;
	font-size: 16px;
	line-height: 1;
}

.sp-marquee__stars {
	display: inline-flex;
	gap: 2px;
}

.sp-marquee__star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	background: #00b67a;
	color: #fff;
	font-size: 10px;
	line-height: 1;
}

/* Trustpilot draws a fractional score as a part-filled tile, not a part-filled
   star — the glyph stays white, the tile behind it is split. */
.sp-marquee__star.is-half {
	background: linear-gradient(90deg, #00b67a 50%, #d9d9d9 50%);
}

.sp-marquee__star.is-empty {
	background: #d9d9d9;
}

/* ── smaller screens ─────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.sp-marquee {
		height: 30px;
	}

	.sp-marquee__run {
		gap: 38px;
		padding-left: 38px;
	}

	.sp-marquee__item,
	.sp-marquee__tp-mark {
		font-size: 11px;
	}
}

/* A bar that never stops moving is a problem for motion sensitivity; stop it
   and let the row sit still, readable from its first item. */
@media (prefers-reduced-motion: reduce) {
	.sp-marquee__track {
		animation: none;
	}
}