/*
 * Home B Reviews, variation 3 "Picker" (parts/home-b/reviews-3.php, the default
 * since the owner's pick of 2026-10-12). Printed before its markup by hdc_home_b_rev_assets().
 *
 * Round 4 (owner, 2026-10-12): less text, real platform logos, yellow stars,
 * color and life. On the cool steel ground, two filled shapes butt together:
 * a safety yellow block (the title, the scores printed in ink as one ruled
 * plate with each mark on a round white seat, Call as the ink button; the
 * owner turned down the white chips and ink bars of round 4)
 * and a white stage with one quote at a time, its key words under a yellow
 * marker. Under the quote, the reviewers as initials in four brand tones,
 * each with its platform mark. assets/js/home-b-reviews.js adds .is-live
 * (panels stack in one cell, so the stage never changes height) and swaps
 * them. Phones (under 40rem, owner 2026-10-12) trade the row of initials for
 * Previous and Next, a "1 of 6" count and a dot per review, and the quote
 * swipes sideways (touch-action pan-y keeps vertical scrolling native).
 * Breakpoints 40rem, 64rem. Layout rules are not nested.
 */

/* Caveat (OFL, assets/fonts/caveat/OFL.txt), weight 600 only, Latin, no alternates: 24 KB.
 * The quote is set by hand so it reads as the customer's own words (Raphael, 2026-10-13).
 * Below the fold, so no preload; the fallback is the system cursive. */
@font-face {
	font-family: "Caveat";
	src: url("../../fonts/caveat/caveat-600-latin.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@layer tokens {
	.hdc-home-b .hdc-rv3 {
		--rv-ground: #e4e9ef;
		--rv-blue: #34516d;
		--rv-unlit: #c9d1da;
	}
}

@layer components {
	.hdc-home-b .hdc-rv3 {
		padding-block: var(--space-section);
		overflow-x: clip;
		background: var(--rv-ground);
		color: var(--body);
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-home-b .hdc-rv3 blockquote {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.hdc-home-b .hdc-rv-out {
		display: inline-block;
		width: 0.875em;
		height: 0.875em;
		margin-left: 0.25em;
		vertical-align: -0.1em;
	}

	/* Stars: unlit row under a lit row clipped to the rating. */
	.hdc-home-b .hdc-rv3 .hdc-rv-stars {
		display: inline-flex;
		position: relative;
		justify-self: start;
		line-height: 0;
	}

	.hdc-home-b .hdc-rv-stars__unlit,
	.hdc-home-b .hdc-rv-stars__lit {
		display: flex;
		gap: 0.125em;
	}

	.hdc-home-b .hdc-rv-stars__unlit {
		color: var(--rv-unlit);
	}

	.hdc-home-b .hdc-rv-stars__lit {
		position: absolute;
		inset: 0 auto 0 0;
		width: calc(var(--full) * 1.125em + var(--frac) * 1em);
		overflow: hidden;
		color: var(--accent);
	}

	.hdc-home-b .hdc-rv-stars__star {
		flex: none;
		width: 1em;
		height: 1em;
		fill: currentColor;
	}

	.hdc-home-b .hdc-rv3__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	/* The yellow block. */
	.hdc-home-b .hdc-rv3__block {
		display: grid;
		align-content: start;
		gap: 1.5rem;
		padding: 1.75rem 1.25rem;
		background: var(--accent);
		color: var(--ink);
	}

	.hdc-home-b .hdc-rv3__title {
		color: var(--ink);
		font-size: 1.75rem;
		font-stretch: 78%;
		font-weight: 800;
		line-height: 1;
		text-wrap: balance;
	}

	/*
	 * The two scores, printed in ink on the yellow like a rating plate: a heavy
	 * rule over the pair, a hairline under it and between them. Each half reads
	 * top down as the mark on its round white seat with the name, the figure,
	 * ink stars filled to it and the count.
	 */
	.hdc-home-b .hdc-rv3__scores {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: 0;
		padding: 0;
		border-top: 3px solid var(--ink);
		border-bottom: 1px solid var(--ink);
		list-style: none;
	}

	.hdc-home-b .hdc-rv3__scores > li {
		display: grid;
		padding-right: 1rem;
	}

	.hdc-home-b .hdc-rv3__scores > li + li {
		padding-right: 0;
		padding-left: 1rem;
		border-left: 1px solid var(--ink);
	}

	.hdc-home-b .hdc-rv3__score {
		display: grid;
		align-content: start;
		justify-items: start;
		padding-block: 1rem 1.125rem;
		color: var(--ink);
		text-decoration: none;
	}

	.hdc-home-b .hdc-rv3__score__logo {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-width: 0;
	}

	.hdc-home-b .hdc-rv3__score__seat {
		display: grid;
		flex: none;
		place-items: center;
		width: 1.875rem;
		height: 1.875rem;
		border-radius: 50%;
		background: var(--white);
	}

	.hdc-home-b .hdc-rv3__score__seat .hdc-rv-logo {
		width: 1.125rem;
		height: 1.125rem;
	}

	.hdc-home-b .hdc-rv3__score__seat .hdc-rv-logo--trustpilot {
		margin-top: -0.0625rem;
	}

	.hdc-home-b .hdc-rv3__score__name {
		font-size: 0.9375rem;
		font-stretch: 100%;
		font-weight: 700;
		line-height: 1;
		white-space: nowrap;
	}

	.hdc-home-b .hdc-rv3__score__num {
		margin-top: 0.875rem;
		font-size: 3.5rem;
		font-stretch: 78%;
		font-variant-numeric: tabular-nums lining-nums;
		font-weight: 800;
		letter-spacing: -0.02em;
		line-height: 0.8;
	}

	.hdc-home-b .hdc-rv3__score__stars {
		margin-top: 0.875rem;
		font-size: 1.125rem;
	}

	.hdc-home-b .hdc-rv3__score .hdc-rv-stars__lit {
		color: var(--ink);
	}

	.hdc-home-b .hdc-rv3__score .hdc-rv-stars__unlit {
		color: rgb(22 25 29 / 0.2);
	}

	.hdc-home-b .hdc-rv3__score__count {
		margin-top: 0.5rem;
		font-size: 0.8125rem;
		font-weight: 650;
		line-height: 1.2;
		white-space: nowrap;
	}

	.hdc-home-b .hdc-rv3__score:hover .hdc-rv3__score__count {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.hdc-home-b .hdc-rv3__score:focus-visible {
		outline: 3px solid var(--ink);
		outline-offset: 2px;
	}

	.hdc-home-b .hdc-rv3__call {
		display: grid;
		gap: 0.5rem;
	}

	.hdc-home-b .hdc-rv3__ask {
		margin: 0;
		font-size: 0.9375rem;
		font-weight: 650;
		text-align: center;
	}

	/* The stage. */
	.hdc-home-b .hdc-rv3__stage {
		display: grid;
		grid-template-rows: 1fr auto;
		gap: 1.75rem;
		padding: 1.75rem 1.25rem 1.5rem;
		background: var(--white);
	}

	.hdc-home-b .hdc-rv3__deck {
		display: grid;
		align-self: center;
		touch-action: pan-y;
	}

	.hdc-home-b .hdc-rv3__panel {
		display: grid;
		align-self: center;
		align-content: start;
		gap: 1.25rem;
	}

	.hdc-home-b .hdc-rv3.is-live .hdc-rv3__panel {
		grid-area: 1 / 1;
		visibility: hidden;
		opacity: 0;
	}

	.hdc-home-b .hdc-rv3.is-live .hdc-rv3__panel.is-on {
		visibility: visible;
		opacity: 1;
	}

	.hdc-home-b .hdc-rv3.is-live .hdc-rv3__panel.is-enter {
		animation: hdc-rv3-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	@keyframes hdc-rv3-in {
		from {
			opacity: 0;
			transform: translateX(1.5rem);
		}
	}

	.hdc-home-b .hdc-rv3.is-live .hdc-rv3__panel.is-enter.is-back {
		animation-name: hdc-rv3-back;
	}

	@keyframes hdc-rv3-back {
		from {
			opacity: 0;
			transform: translateX(-1.5rem);
		}
	}

	.hdc-home-b .hdc-rv3.is-live .hdc-rv3__panel.is-drag {
		animation: none;
		user-select: none;
	}

	.hdc-home-b .hdc-rv3__panel > .hdc-rv3__stars {
		font-size: 1.5rem;
	}

	/* The customer's words, handwritten. */
	.hdc-home-b .hdc-rv3__q {
		color: var(--ink);
		font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
		font-size: 2.5rem;
		font-stretch: normal;
		font-weight: 600;
		letter-spacing: 0;
		line-height: 1.1;
	}

	.hdc-home-b .hdc-rv3__q p {
		text-wrap: balance;
	}

	.hdc-home-b .hdc-rv3__key {
		font-weight: 600;
		background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%);
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
	}

	.hdc-home-b .hdc-rv3__by {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		margin: 0;
	}

	.hdc-home-b .hdc-rv3__av,
	.hdc-home-b .hdc-rv3__fav {
		display: grid;
		flex: none;
		place-items: center;
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		font-size: 1rem;
		font-stretch: 100%;
		font-weight: 800;
		line-height: 1;
	}

	.hdc-home-b .hdc-rv3__av--slate,
	.hdc-home-b .hdc-rv3__fav--slate { background: var(--rv-blue); color: var(--white); }
	.hdc-home-b .hdc-rv3__av--yellow,
	.hdc-home-b .hdc-rv3__fav--yellow { background: var(--accent); color: var(--ink); }
	.hdc-home-b .hdc-rv3__av--steel,
	.hdc-home-b .hdc-rv3__fav--steel { background: var(--steel); color: var(--white); }
	.hdc-home-b .hdc-rv3__av--ink,
	.hdc-home-b .hdc-rv3__fav--ink { background: var(--ink); color: var(--white); }

	.hdc-home-b .hdc-rv3__who {
		display: grid;
		gap: 0.125rem;
		line-height: 1.25;
	}

	.hdc-home-b .hdc-rv3__name {
		color: var(--ink);
		font-size: 1.0625rem;
		font-weight: 700;
	}

	.hdc-home-b .hdc-rv3__src {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		color: var(--steel);
		font-size: 0.875rem;
		font-weight: 600;
		text-decoration: none;
	}

	.hdc-home-b .hdc-rv3__src .hdc-rv-logo {
		width: 1rem;
		height: 1rem;
	}

	/* The row of reviewers. */
	.hdc-home-b .hdc-rv3__pick {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding-top: 1.25rem;
		border-top: 1px solid var(--line);
	}

	.hdc-home-b .hdc-rv3__pick[hidden] {
		display: none;
	}

	.hdc-home-b .hdc-rv3__faces {
		display: flex;
		flex-wrap: wrap;
		gap: 0.375rem;
	}

	.hdc-home-b .hdc-rv3__face {
		position: relative;
		padding: 3px;
		border: 0;
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
		transition: transform 0.2s;
	}

	.hdc-home-b .hdc-rv3__face .hdc-rv3__fav {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 0.8125rem;
	}

	.hdc-home-b .hdc-rv3__face:hover {
		transform: translateY(-2px);
	}

	.hdc-home-b .hdc-rv3__face[aria-pressed="true"] {
		box-shadow: inset 0 0 0 3px var(--ink);
		transform: translateY(-2px);
	}

	.hdc-home-b .hdc-rv3__badge {
		display: grid;
		position: absolute;
		right: -2px;
		bottom: -2px;
		place-items: center;
		width: 1.25rem;
		height: 1.25rem;
		border: 2px solid var(--white);
		border-radius: 50%;
		background: var(--white);
	}

	.hdc-home-b .hdc-rv3__badge .hdc-rv-logo {
		width: 0.875rem;
		height: 0.875rem;
	}

	.hdc-home-b .hdc-rv3__steps {
		display: none;
		gap: 0.5rem;
	}

	.hdc-home-b .hdc-rv3__step {
		display: grid;
		place-items: center;
		width: 3rem;
		height: 3rem;
		padding: 0;
		border: 2px solid var(--ink);
		border-radius: 0;
		background: var(--white);
		color: var(--ink);
		cursor: pointer;
	}

	.hdc-home-b .hdc-rv3__step:hover {
		background: var(--accent);
	}

	.hdc-home-b .hdc-rv3__step .hdc-icon {
		width: 1.25rem;
		height: 1.25rem;
	}

	.hdc-home-b .hdc-rv3__step:focus-visible {
		outline: 3px solid var(--ink);
		outline-offset: 3px;
	}

	/*
	 * Phones: Previous, the count over a dot per review, Next, across the full
	 * width under the quote. Next is filled to lead the eye forward.
	 */
	.hdc-home-b .hdc-rv3__where {
		display: grid;
		justify-items: center;
		gap: 0.5rem;
	}

	.hdc-home-b .hdc-rv3__count {
		margin: 0;
		color: var(--ink);
		font-size: 1rem;
		font-variant-numeric: tabular-nums;
		font-weight: 700;
		line-height: 1;
	}

	.hdc-home-b .hdc-rv3__dots {
		display: flex;
		gap: 0.375rem;
	}

	.hdc-home-b .hdc-rv3__dot {
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background: var(--rv-unlit);
		transition: width 0.2s, background-color 0.2s;
	}

	.hdc-home-b .hdc-rv3__dot.is-on {
		width: 1.25rem;
		border-radius: 0.25rem;
		background: var(--ink);
	}

	@media (max-width: 39.99rem) {
		.hdc-home-b .hdc-rv3__faces {
			display: none;
		}

		.hdc-home-b .hdc-rv3__steps {
			display: flex;
			flex: 1 1 100%;
			align-items: center;
			justify-content: space-between;
		}

		.hdc-home-b .hdc-rv3__step {
			width: 3.25rem;
			height: 3.25rem;
		}

		.hdc-home-b .hdc-rv3__step[data-hdc-rv-step="1"] {
			background: var(--ink);
			color: var(--white);
		}

		.hdc-home-b .hdc-rv3__step[data-hdc-rv-step="1"]:hover {
			background: var(--ink);
		}
	}

	@media (min-width: 40rem) {
		.hdc-home-b .hdc-rv3__scores > li {
			padding-right: 1.5rem;
		}

		.hdc-home-b .hdc-rv3__scores > li + li {
			padding-right: 0;
			padding-left: 1.5rem;
		}

		.hdc-home-b .hdc-rv3__score {
			padding-block: 1.25rem 1.375rem;
		}

		.hdc-home-b .hdc-rv3__score__seat {
			width: 2.125rem;
			height: 2.125rem;
		}

		.hdc-home-b .hdc-rv3__score__seat .hdc-rv-logo {
			width: 1.25rem;
			height: 1.25rem;
		}

		.hdc-home-b .hdc-rv3__score__name {
			font-size: 1rem;
		}

		.hdc-home-b .hdc-rv3__score__num {
			font-size: 4.5rem;
		}

		.hdc-home-b .hdc-rv3__score__stars {
			font-size: 1.25rem;
		}

		.hdc-home-b .hdc-rv3__score__count {
			font-size: 0.875rem;
		}

		.hdc-home-b .hdc-rv3__block,
		.hdc-home-b .hdc-rv3__stage {
			padding: 2.5rem;
		}

		.hdc-home-b .hdc-rv3__faces {
			gap: 0.75rem;
		}

		.hdc-home-b .hdc-rv3__face .hdc-rv3__fav {
			width: 3rem;
			height: 3rem;
			font-size: 0.9375rem;
		}

		.hdc-home-b .hdc-rv3__steps {
			display: flex;
		}

		.hdc-home-b .hdc-rv3__where {
			display: none;
		}

		.hdc-home-b .hdc-rv3__q {
			font-size: 3.25rem;
		}

		.hdc-home-b .hdc-rv3__call {
			justify-items: start;
		}
	}

	@media (min-width: 64rem) {
		.hdc-home-b .hdc-rv3__grid {
			grid-template-columns: 31rem minmax(0, 1fr);
		}

		.hdc-home-b .hdc-rv3__block {
			gap: 2rem;
			padding: 3rem;
		}

		.hdc-home-b .hdc-rv3__title {
			font-size: 2.75rem;
		}

		.hdc-home-b .hdc-rv3__score__num {
			margin-top: 1.125rem;
			font-size: 5.5rem;
		}

		.hdc-home-b .hdc-rv3__score__stars {
			margin-top: 1.125rem;
			font-size: 1.375rem;
		}

		.hdc-home-b .hdc-rv3__call {
			justify-items: stretch;
		}

		.hdc-home-b .hdc-rv3__btn {
			min-height: 4rem;
		}

		.hdc-home-b .hdc-rv3__stage {
			gap: 2.5rem;
			padding: 3.5rem 4rem 2.5rem;
		}

		.hdc-home-b .hdc-rv3__panel {
			gap: 1.75rem;
		}

		.hdc-home-b .hdc-rv3__panel > .hdc-rv3__stars {
			font-size: 2rem;
		}

		.hdc-home-b .hdc-rv3__q {
			font-size: 4.375rem;
		}

		.hdc-home-b .hdc-rv3__by .hdc-rv3__av {
			width: 3.5rem;
			height: 3.5rem;
			font-size: 1.125rem;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hdc-home-b .hdc-rv3.is-live .hdc-rv3__panel.is-enter {
			animation: none;
		}

		.hdc-home-b .hdc-rv3__face,
		.hdc-home-b .hdc-rv3__face:hover,
		.hdc-home-b .hdc-rv3__dot {
			transition: none;
		}
	}
}