/* ==========================================================================
   We buy cars for cash (/we-buy-cars-for-cash/). Ported from the approved
   design canvas; builds on main.css tokens and shared sections.
   ========================================================================== */

.wbc .section h2.display-l {
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	line-height: 1.08;
}

.page-we-buy-cars-for-cash .hero__h {
	font-size: clamp(2.5rem, 5.2vw, 4.75rem);
	line-height: 1.02;
}

.page-we-buy-cars-for-cash .hero__h .line:last-child {
	color: rgb(244 241 234 / 72%);
	font-weight: 500;
}

@media (min-width: 64rem) {
	.page-we-buy-cars-for-cash .hero__copy .hero__h {
		max-width: 16ch;
	}
}

.page-we-buy-cars-for-cash .hero__bg img {
	object-position: center 25%;
}

.wbc-center {
	max-width: 54rem;
	margin-inline: auto;
	text-align: center;
}

.wbc-center .display-l {
	margin-inline: auto;
}

.wbc-lede {
	margin-top: 1.25rem;
	color: var(--muted);
}

.wbc-center .wbc-lede {
	margin-inline: auto;
}

.wbc-more {
	margin-top: 3rem;
	max-width: none;
}

.wbc-more .btn + .btn {
	margin-left: 0.75rem;
}

.wbc-eb-light {
	color: rgb(244 241 234 / 75%);
}

.wbc-tile {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border-radius: 0.875rem;
	background: var(--oxblood);
	color: var(--paper);
	box-shadow: 0 10px 24px -10px rgb(236 26 79 / 70%);
}

/* Story band */
.wbc-story {
	position: relative;
	background: #000;
	color: #fff;
	padding: 6.5rem 0 9.5rem;
	overflow: hidden;
}

.wbc-story__g {
	display: grid;
	gap: 3rem;
	align-items: center;
}

.wbc-story__eb {
	color: rgb(255 255 255 / 70%);
}

.wbc-story__h {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: 0.04em;
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	line-height: 1.15;
	text-wrap: balance;
}

.wbc-story p:not(.eyebrow) {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: #fff;
	max-width: none;
}

.wbc-story p + p {
	margin-top: 1rem;
}

.wbc-story__hills {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 5rem;
	display: block;
}

@media (min-width: 64rem) {
	.wbc-story__g {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 5rem;
	}
}

/* Stats strip */
.wbc-stats {
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}

.wbc-stats dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 auto;
}

.wbc-stats dl > div {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 0.375rem;
	padding: 1.375rem 1rem;
	text-align: center;
	border-left: 1px solid var(--rule);
	border-top: 1px solid var(--rule);
}

.wbc-stats dl > div:nth-child(odd) {
	border-left: 0;
}

.wbc-stats dl > div:nth-child(-n + 2) {
	border-top: 0;
}

.wbc-stats dl > div:last-child {
	grid-column: 1 / -1;
}

.wbc-stats dt {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.wbc-stats dd {
	margin: 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	line-height: 1;
	font-variant-numeric: tabular-nums lining-nums;
}

.wbc-stats sup {
	font-size: 0.5em;
	vertical-align: 0.6em;
	color: var(--oxblood);
}

@media (min-width: 48rem) {
	.wbc-stats dl {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.wbc-stats dl > div,
	.wbc-stats dl > div:nth-child(odd) {
		border-left: 1px solid var(--rule);
		border-top: 0;
	}

	.wbc-stats dl > div:first-child {
		border-left: 0;
	}

	.wbc-stats dl > div:last-child {
		grid-column: auto;
	}
}

/* Steps rail */
.wbc-rail {
	position: relative;
	display: grid;
	gap: 1.25rem;
	margin-top: 2.5rem;
	padding-left: 3.75rem;
}

.wbc-rail::before {
	content: "";
	position: absolute;
	left: 1.4375rem;
	top: 1.5rem;
	bottom: 1.5rem;
	width: 2px;
	background: linear-gradient(to bottom, var(--oxblood), rgb(236 26 79 / 25%));
}

.wbc-stop {
	position: relative;
}

.wbc-dot {
	position: absolute;
	top: 1rem;
	left: -3.75rem;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--paper);
	border: 2px solid var(--oxblood);
	font: 700 0.9375rem var(--display);
	color: var(--oxblood);
}

.wbc-card {
	height: 100%;
	padding: 1.75rem;
	border: 1px solid var(--rule);
	border-radius: 1.25rem;
	background: #fff;
	text-align: left;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.wbc-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 40px -28px rgb(26 22 20 / 35%);
}

.wbc-card .wbc-tile {
	margin-bottom: 1.5rem;
}

.wbc-card h3 {
	font: 600 1.375rem/1.2 var(--display);
	letter-spacing: -0.01em;
}

.wbc-card p {
	margin-top: 0.625rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--muted);
}

@media (min-width: 64rem) {
	.wbc-rail {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
		margin-top: 4rem;
		padding: 4.25rem 0 0;
	}

	.wbc-rail::before {
		left: 1.5rem;
		right: 1.5rem;
		top: 1.5rem;
		bottom: auto;
		width: auto;
		height: 2px;
		background: linear-gradient(to right, var(--oxblood), rgb(236 26 79 / 25%));
	}

	.wbc-dot {
		top: -4.25rem;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Why grid, four across */
.wbc-why {
	background: #fff;
}

.wbc-why__cta .whyr__cardh {
	margin-top: 0;
	color: var(--oxblood);
}

.wbc-why__cta .btn {
	margin-top: 1.25rem;
}

@media (min-width: 68rem) {
	.wbc-why .whyr__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.wbc-why .whyr__card {
		border-left: 1px solid var(--rule);
		padding-left: 1.75rem;
	}

	.wbc-why .whyr__card:nth-child(4n + 1) {
		border-left: 0;
		padding-left: 0;
	}
}

/* Split with photo */
.wbc-split {
	display: grid;
	gap: 3rem;
	align-items: center;
}

.wbc-photo {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 1.25rem;
	background: #e6e0d6;
	box-shadow: 0 18px 40px rgb(26 22 20 / 10%);
	aspect-ratio: 16 / 10;
}

.wbc-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wbc .wbc-badge {
	left: 1.25rem;
	bottom: 1.25rem;
}

.wbc-split .getknow__list {
	margin-top: 1.5rem;
}

.wbc-ctas {
	margin-top: 2rem;
}

@media (min-width: 64rem) {
	.wbc-split {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: 5rem;
	}

	.wbc-photo--sq {
		aspect-ratio: 1 / 1;
	}
}

/* Comparison */
.wbc-cmp {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-top: 0;
	background: var(--ink);
	color: var(--paper);
}

.wbc-cmp::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(50% 70% at 100% 0%, rgb(236 26 79 / 22%), rgb(236 26 79 / 0%) 70%),
		radial-gradient(40% 55% at 0% 100%, rgb(236 26 79 / 12%), rgb(236 26 79 / 0%) 70%);
}

.wbc-cmp .display-l {
	color: var(--paper);
}

.wbc-cmp .eyebrow {
	color: rgb(244 241 234 / 75%);
}

.wbc-cmp .wbc-lede {
	color: rgb(244 241 234 / 72%);
}

.wbc-tblbox {
	margin-top: 3.5rem;
	overflow-x: auto;
	border: 1px solid rgb(244 241 234 / 14%);
	border-radius: 1.25rem;
}

.wbc-tbl {
	min-width: 44rem;
	text-align: left;
}

.wbc-tbl th,
.wbc-tbl td {
	padding: 1.125rem 1.375rem;
	border-top: 1px solid rgb(244 241 234 / 10%);
	font-size: 0.9375rem;
	line-height: 1.45;
	color: rgb(244 241 234 / 72%);
	vertical-align: top;
	text-align: left;
}

.wbc-tbl thead th,
.wbc-tbl thead td {
	border-top: 0;
	padding-block: 1.5rem;
	font: 600 1.25rem/1.15 var(--display);
	color: var(--paper);
}

.wbc-tbl tbody th {
	width: 20%;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(244 241 234 / 55%);
}

.wbc-tbl .us {
	background: rgb(236 26 79 / 14%);
	color: #fff;
	font-weight: 600;
}

.wbc-tbl thead .us {
	background: var(--oxblood);
}

.wbc-ck {
	display: inline-grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 0.625rem;
	vertical-align: -0.25rem;
	border-radius: 50%;
	background: var(--oxblood);
	color: #fff;
}

.wbc-note {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.25rem;
	align-items: center;
	max-width: none;
	margin-top: 1.5rem;
	padding: 1.5rem 1.75rem;
	border: 1px solid rgb(244 241 234 / 14%);
	border-radius: 1rem;
	background: rgb(244 241 234 / 4%);
	color: rgb(244 241 234 / 80%);
}

/* Who pays */
.wbc-duel {
	position: relative;
	display: grid;
	gap: 2.5rem;
	margin-top: 3.5rem;
}

.wbc-side {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem;
	border-radius: 1.5rem;
	text-align: left;
}

.wbc-side--win {
	background: radial-gradient(70% 80% at 100% 0%, rgb(255 255 255 / 20%), rgb(255 255 255 / 0%) 60%), var(--oxblood);
	color: #fff;
	box-shadow: 0 30px 60px -30px rgb(236 26 79 / 65%);
}

.wbc-side--lose {
	border: 1.5px dashed #c9c0b1;
}

.wbc-tag {
	align-self: flex-start;
	padding: 0.375rem 0.875rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wbc-side--win .wbc-tag {
	background: #fff;
	color: var(--oxblood);
}

.wbc-side--lose .wbc-tag {
	background: #ece7de;
	color: var(--muted);
}

.wbc-big {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 1.125rem;
}

.wbc-side--win .wbc-big {
	background: rgb(255 255 255 / 16%);
}

.wbc-side--lose .wbc-big {
	border: 1px solid #c9c0b1;
	color: var(--muted);
}

.wbc-side h3 {
	font: 600 1.75rem/1.15 var(--display);
	letter-spacing: -0.015em;
}

.wbc-side--win p {
	color: rgb(255 255 255 / 88%);
}

.wbc-side--lose p {
	color: var(--muted);
}

.wbc-vs {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper);
	font: 600 1rem var(--display);
	box-shadow: 0 0 0 0.5rem var(--paper);
}

.wbc-quote {
	position: relative;
	max-width: 52rem;
	margin: 3.5rem auto 0;
	padding-top: 2.5rem;
	text-align: center;
	font: 500 clamp(1.25rem, 2.2vw, 1.625rem)/1.4 var(--display);
	letter-spacing: -0.01em;
}

.wbc-quote span {
	position: absolute;
	left: 50%;
	top: -1rem;
	transform: translateX(-50%);
	font: 700 5rem/1 var(--display);
	color: var(--oxblood);
}

@media (min-width: 64rem) {
	.wbc-duel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 2rem;
	}

	.wbc-side {
		padding: 2.5rem;
	}
}

/* How we decide */
.wbc-rows {
	margin-top: 2.25rem;
	border-top: 1px solid rgb(244 241 234 / 16%);
}

.wbc-rows li {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 1.25rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid rgb(244 241 234 / 12%);
	text-align: left;
}

.wbc-rows__n {
	font: 700 1.75rem/1 var(--display);
	color: var(--oxblood);
}

.wbc-rows h3 {
	font: 600 1.125rem/1.3 var(--display);
	color: var(--paper);
}

.wbc-rows p {
	margin-top: 0.25rem;
	font-size: 0.9375rem;
	color: rgb(244 241 234 / 70%);
}

.wbc-dec__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 2.25rem;
	max-width: none;
	color: rgb(244 241 234 / 75%);
}

/* The photograph fills the row instead of setting its height. */
@media (min-width: 64rem) {
	.wbc-dec .buy__media {
		position: relative;
		min-height: 34rem;
	}

	.wbc-dec .buy__media img {
		position: absolute;
		inset: 0;
		height: 100%;
		min-height: 0;
	}
}

/* Typographic index */
.wbc-idx {
	background: #fff;
}

.wbc-idx__head {
	display: grid;
	gap: 1.5rem;
	padding-bottom: 3rem;
}

.wbc-idx__lede {
	color: var(--muted);
	max-width: 26rem;
}

.wbc-idx__list {
	border-top: 1px solid var(--rule);
}

.wbc-idx__row {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 3rem;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 1rem;
	border-bottom: 1px solid var(--rule);
	color: var(--ink);
	text-decoration: none;
	text-align: left;
	overflow: hidden;
}

.wbc-idx__row::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--oxblood);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.45s var(--ease);
}

.wbc-idx__row:hover::before {
	transform: scaleY(1);
}

.wbc-idx__row:hover {
	color: #fff;
}

.wbc-idx__n {
	font: 600 0.875rem var(--display);
	color: var(--oxblood);
}

.wbc-idx__name {
	font: 600 clamp(1.75rem, 4.4vw, 3.75rem)/1 var(--display);
	letter-spacing: -0.025em;
	transition: transform 0.45s var(--ease);
}

.wbc-idx__desc {
	grid-column: 2;
	font-size: 0.9375rem;
	color: var(--muted);
}

.wbc-idx__go {
	grid-row: 1;
	grid-column: 3;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1px solid var(--rule);
	color: var(--oxblood);
	transition: background-color 0.3s, transform 0.45s var(--ease);
}

.wbc-idx__row:hover .wbc-idx__n,
.wbc-idx__row:hover .wbc-idx__desc {
	color: #fff;
}

.wbc-idx__row:hover .wbc-idx__name {
	transform: translateX(0.75rem);
}

.wbc-idx__row:hover .wbc-idx__go {
	background: #fff;
	border-color: #fff;
	transform: rotate(45deg);
}

.wbc-idx__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 2.5rem;
	color: var(--muted);
}

.wbc-idx__foot a:not(.btn) {
	color: var(--oxblood);
	font-weight: 600;
}

@media (min-width: 64rem) {
	.wbc-idx__head {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		align-items: end;
	}

	.wbc-idx__lede {
		justify-self: end;
	}

	.wbc-idx__row {
		grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 20rem) 3.5rem;
		gap: 2rem;
		padding: 1.75rem 1.25rem;
	}

	.wbc-idx__desc {
		grid-column: auto;
	}

	.wbc-idx__go {
		grid-row: auto;
		grid-column: auto;
		width: 3.5rem;
		height: 3.5rem;
	}
}

/* Stores */
.page-we-buy-cars-for-cash .where .display-l {
	color: var(--paper);
}

.wbc-remote {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: none;
	margin-top: 1.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px dashed rgb(236 26 79 / 55%);
	border-radius: 1rem;
	background: rgb(236 26 79 / 8%);
	color: rgb(244 241 234 / 85%);
	text-align: center;
}

.wbc-remote svg {
	color: var(--oxblood);
}

.wbc-remote a {
	color: #fff;
	font-weight: 600;
}

/* Paperwork */
.wbc-plates {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: none;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
	text-align: left;
}

.wbc-plates .whyr__icon {
	flex: 0 0 auto;
}

.wbc-nt {
	margin-top: 4.5rem;
	padding: 2rem 1.5rem;
	border-radius: 1.5rem;
	background: radial-gradient(60% 90% at 100% 0%, rgb(236 26 79 / 22%), rgb(236 26 79 / 0%) 70%), var(--ink);
	color: var(--paper);
	text-align: left;
}

.wbc-nt__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid rgb(244 241 234 / 14%);
}

.wbc-nt__head h3 {
	font: 600 1.75rem/1.15 var(--display);
}

.wbc-nt__head p {
	color: rgb(244 241 234 / 65%);
}

.wbc-nt__g {
	display: grid;
	gap: 1.75rem;
	margin-top: 2rem;
}

.wbc-nn {
	display: block;
	margin-bottom: 1rem;
	font: 700 2.25rem/1 var(--display);
	color: var(--oxblood);
}

.wbc-nt__g h4 {
	margin: 0 0 0.5rem;
	font: 600 1.125rem/1.3 var(--display);
	color: #fff;
}

.wbc-nt__g p {
	font-size: 0.9375rem;
	color: rgb(244 241 234 / 72%);
}

@media (min-width: 64rem) {
	.wbc-nt {
		padding: 3rem;
	}

	.wbc-nt__g {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2.5rem;
	}
}

/* When to sell */
.wbc-when {
	background: #fff;
}

.wbc-when__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}

.wbc-sig {
	display: grid;
	gap: 1rem;
	margin-top: 3rem;
}

.wbc-sig li {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.5rem;
	border: 1px solid var(--rule);
	border-radius: 1.25rem;
	background: var(--paper-lift);
	font: 600 1.0625rem/1.3 var(--display);
	text-align: left;
}

@media (min-width: 40rem) {
	.wbc-sig {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.wbc-sig {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Local buyer */
.wbc-local {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-top: 0;
	background: #12100f;
	color: var(--paper);
}

.wbc-local__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.wbc-local__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wbc-local__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(50% 70% at 100% 0%, rgb(236 26 79 / 35%), rgb(236 26 79 / 0%) 70%),
		linear-gradient(to bottom, rgb(10 8 7 / 86%), rgb(10 8 7 / 78%) 50%, rgb(10 8 7 / 92%));
}

.wbc-local .display-l {
	color: var(--paper);
}

.wbc-local__cols {
	display: grid;
	gap: 1.25rem;
	margin-top: 3rem;
}

.wbc-local__cols p {
	max-width: none;
	padding: 2rem;
	border: 1px solid rgb(244 241 234 / 16%);
	border-radius: 1.25rem;
	background: rgb(10 8 7 / 50%);
	backdrop-filter: blur(8px);
	color: rgb(244 241 234 / 78%);
	text-align: left;
}

.wbc-local__t {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.wbc-local__t strong {
	font: 600 1.25rem/1.2 var(--display);
	color: var(--paper);
}

@media (min-width: 48rem) {
	.wbc-local__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* FAQ media fills the split height without stretching it */
@media (min-width: 64rem) {
	.wbc-faq .faq__split {
		align-items: start;
	}

	.wbc-faq {
		overflow: clip;
	}

	.wbc-faq .faq__media {
		position: sticky;
		top: 0;
		height: 100vh;
	}

	.wbc-faq .faq__media img {
		height: 100%;
		min-height: 0;
	}
}

/* Close facts as pills */
.close__facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem;
	margin-top: clamp(1.5rem, 3vw, 2rem);
	max-width: 62rem;
}

.close__facts li {
	padding: 0.5rem 1rem;
	border: 1px solid rgb(244 241 234 / 26%);
	border-radius: 999px;
	font-size: 0.8125rem;
	color: rgb(244 241 234 / 80%);
}

@media (max-width: 47.9375rem) {
	.wbc .eyebrow {
		justify-content: center;
	}

	.wbc-when__head,
	.wbc-idx__foot {
		justify-content: center;
		text-align: center;
	}

	.wbc-more .btn + .btn {
		margin: 0.75rem 0 0;
	}
}

/* Banner, as designed. */
.wbc-hero {
	padding-bottom: 5.5rem;
}

.wbc-hero .hero__bg::after {
	background:
		radial-gradient(60% 55% at 0% 100%, rgb(236 26 79 / 28%), rgb(236 26 79 / 0%) 70%),
		linear-gradient(to right, rgb(12 10 9 / 88%) 0%, rgb(12 10 9 / 55%) 45%, rgb(12 10 9 / 15%) 100%),
		linear-gradient(to bottom, rgb(12 10 9 / 55%), rgb(12 10 9 / 5%) 35%, rgb(12 10 9 / 70%));
}

.wbc-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	max-width: none;
	margin-bottom: 1.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid rgb(244 241 234 / 22%);
	border-radius: 999px;
	background: rgb(244 241 234 / 6%);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgb(244 241 234 / 82%);
}

.wbc-pill__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--oxblood);
	box-shadow: 0 0 0 4px rgb(236 26 79 / 25%);
}

.wbc-hero .wbc-hero__h {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: -0.025em;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	line-height: 1.02;
	max-width: none;
}

.wbc-hero__sub {
	color: rgb(244 241 234 / 72%);
	font-weight: 500;
}

.wbc-hero__ctas {
	margin-top: 2rem;
}

.wbc-hero__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--paper);
	text-decoration: none;
}

.wbc-hero__tel span {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--oxblood);
	color: var(--paper);
}

@media (min-width: 64rem) {
	.wbc-hero .hero__inner {
		grid-template-columns: minmax(0, 1fr) 27rem;
	}

	.wbc-hero .hero__copy .hero__h {
		max-width: none;
	}

	.wbc-hero .hero__h .line {
		white-space: nowrap;
	}

	.wbc-hero .hero__h .wbc-hero__sub {
		white-space: normal;
	}
}

@media (max-width: 63.9375rem) {
	.wbc-hero .hero__copy {
		text-align: center;
	}

	.wbc-hero__ctas {
		justify-content: center;
	}
}

/* FAQ marks: Lucide plus and minus instead of the drawn lines. */
.wbc-mark {
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--oxblood);
}

.wbc-mark::before,
.wbc-mark::after {
	display: none;
}

.wbc-mark svg + svg,
.faq__btn[aria-expanded="true"] .wbc-mark svg:first-child {
	display: none;
}

.faq__btn[aria-expanded="true"] .wbc-mark svg + svg {
	display: block;
}

/* Step cards: content centred under each numbered dot. */
.wbc-card {
	text-align: center;
}

.wbc-card .wbc-tile {
	margin-inline: auto;
}

.wbc-card p {
	margin-inline: auto;
}

/* Who pays: the description runs wide enough to sit on three lines. */
.wbc-pays .wbc-center {
	max-width: 66rem;
}

.wbc-pays .wbc-center .wbc-lede {
	max-width: 64rem;
}

/* Phones: the comparison note stacks, icon on top, all centred. */
@media (max-width: 47.9375rem) {
	.wbc-note {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
		gap: 1rem;
	}
}

/* Phones: the two who-pays cards centre their content. */
@media (max-width: 47.9375rem) {
	.wbc-side {
		align-items: center;
		text-align: center;
	}

	.wbc-side .wbc-tag {
		align-self: center;
	}

	/* Room for the vs disc between the cards. */
	.wbc-duel {
		gap: 3.5rem;
	}

	.wbc-side--lose {
		padding-top: 2.75rem;
	}
}

/* Phones: How we decide photo shows the whole vehicle. */
@media (max-width: 63.9375rem) {
	.wbc-dec .buy__media img {
		aspect-ratio: 4 / 3;
		object-position: center 75%;
	}
}

/* Phones: the appraisal prompt and button centre. */
@media (max-width: 47.9375rem) {
	.wbc-dec__more {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
}

/* Phones: the no-title panel centres. */
@media (max-width: 47.9375rem) {
	.wbc-nt,
	.wbc-nt__head {
		text-align: center;
	}

	.wbc-nt__head {
		flex-direction: column;
		align-items: center;
	}

	.wbc-nt__head p,
	.wbc-nt__g p {
		margin-inline: auto;
	}
}

/* Phones: when-to-sell cards and the local glass cards centre. */
@media (max-width: 47.9375rem) {
	.wbc-sig li {
		align-items: center;
		text-align: center;
	}

	.wbc-local__cols p {
		text-align: center;
	}

	.wbc-local__t {
		flex-direction: column;
		justify-content: center;
		gap: 0.875rem;
	}
}

/* Mobile: everything under the banner reads from the left. */
@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash main .section:not(.hero) * {
		text-align: left;
	}

	body.page-we-buy-cars-for-cash main .section:not(.hero) :is(h2, h3, p) {
		margin-left: 0;
		margin-right: 0;
	}

	body.page-we-buy-cars-for-cash main .section:not(.hero) :is(.eyebrow, [class*="ctas"], [class*="__cta"], .about__link) {
		justify-content: flex-start;
	}

	body.page-we-buy-cars-for-cash main .section:not(.hero) :is([class*="__head"], [class*="__copy"], [class*="__intro"], [class*="ctas"], [class*="__cta"], [class*="__step"], [class*="__card"], [class*="__item"]) {
		align-items: flex-start;
		justify-items: start;
	}
}

/* Mobile: buttons, icons and centred blocks start from the left too. */
@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash main .section:not(.hero) :is(h2, h3) {
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: left !important;
	}

	body.page-we-buy-cars-for-cash main .section:not(.hero) :is(a.btn, [class*="__ic"], [class*="-ic"], [class*="__icon"], [class*="__badge"]) {
		margin-left: 0 !important;
		margin-right: auto !important;
		align-self: flex-start !important;
		justify-self: start !important;
	}

	body.page-we-buy-cars-for-cash main .section:not(.hero) :is(div, p, section, article, li) {
		justify-content: flex-start;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash main .section:not(.hero) * {
		text-align: left !important;
	}
}

/* Mobile: full-width buttons. */
@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash main .section:not(.hero) .btn {
		display: flex !important;
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
		margin-right: 0 !important;
	}

	body.page-we-buy-cars-for-cash main .section:not(.hero) :is([class*="ctas"], [class*="__cta"], .section__more) {
		align-items: stretch !important;
		width: 100%;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash main .section:not(.hero) :has(> a.btn) {
		width: 100% !important;
		align-self: stretch !important;
		max-width: none !important;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash main section:not(.hero) * {
		text-align: left !important;
	}

	body.page-we-buy-cars-for-cash .wbc-story :is(h2, p, .eyebrow) {
		margin-left: 0 !important;
		margin-right: 0 !important;
		justify-content: flex-start !important;
	}

	body.page-we-buy-cars-for-cash .wbc-story * {
		align-items: flex-start;
	}
}

/* Mobile: icons start from the left. */
@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash main section:not(.hero) :is([class*="icon"], [class*="__ic"], [class*="-ic"], [class*="__badge"], [class*="__mark"], [class*="__num"]) {
		margin-left: 0 !important;
		margin-right: auto !important;
		align-self: flex-start !important;
		justify-self: start !important;
	}

	body.page-we-buy-cars-for-cash main section:not(.hero) :is([class*="__card"], [class*="__step"], [class*="__item"], [class*="__c"], li) {
		align-items: flex-start !important;
		justify-items: start !important;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash main section:not(.hero) :is([class*="icon"], [class*="__ic"], [class*="-ic"], [class*="__badge"]) > svg {
		margin: auto !important;
		align-self: center !important;
		justify-self: center !important;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash .wbc-card {
		align-items: flex-start !important;
		justify-items: start !important;
		text-align: left !important;
	}

	body.page-we-buy-cars-for-cash .wbc-card .wbc-tile {
		margin-left: 0 !important;
		margin-right: auto !important;
		align-self: flex-start !important;
		justify-self: start !important;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash .wbc-note {
		align-items: flex-start !important;
		justify-items: start !important;
	}

	body.page-we-buy-cars-for-cash .wbc-note .wbc-tile {
		margin-left: 0 !important;
		margin-right: auto !important;
		align-self: flex-start !important;
		justify-self: start !important;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash .wbc-side {
		align-items: flex-start !important;
		justify-items: start !important;
		text-align: left !important;
	}

	body.page-we-buy-cars-for-cash .wbc-side > * {
		margin-left: 0 !important;
		margin-right: auto !important;
		align-self: flex-start !important;
		justify-self: start !important;
		text-align: left !important;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash .wbc-vs {
		left: 2.25rem !important;
		transform: translate(0, -50%) !important;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash .wbc-quote {
		align-items: flex-start !important;
		justify-items: start !important;
		text-align: left !important;
	}

	body.page-we-buy-cars-for-cash .wbc-quote > *, body.page-we-buy-cars-for-cash .wbc-quote svg {
		margin-left: 0 !important;
		margin-right: auto !important;
		align-self: flex-start !important;
		justify-self: start !important;
	}

	body.page-we-buy-cars-for-cash .wbc-quote::before {
		left: 0 !important;
		margin-left: 0 !important;
		transform: none !important;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash .wbc-quote span {
		left: 0 !important;
		transform: none !important;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash .wbc-idx__row:hover .wbc-idx__name {
		transform: none !important;
	}
}

/* Mobile: banner bottom padding. */
@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash main section.hero {
		padding-bottom: 50px !important;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash .wbc-local__t {
		align-items: flex-start !important;
		justify-items: start !important;
		text-align: left !important;
	}

	body.page-we-buy-cars-for-cash .wbc-local__t > * {
		margin-left: 0 !important;
		margin-right: auto !important;
		align-self: flex-start !important;
		justify-self: start !important;
	}
}

/* Mobile: FAQ question on the left, plus sign at the far right. */
@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash .faq__btn {
		display: flex !important;
		justify-content: space-between !important;
		align-items: flex-start !important;
		width: 100%;
	}

	body.page-we-buy-cars-for-cash .faq__btn > span:first-child {
		flex: 1 1 auto;
		text-align: left !important;
	}

	body.page-we-buy-cars-for-cash .faq__mark {
		flex: none;
		margin-left: 1rem !important;
		margin-right: 0 !important;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash main section:not(.hero) .faq__btn > .faq__mark {
		margin-left: auto !important;
		margin-right: 0 !important;
		align-self: flex-start !important;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash main section:not(.hero) :is(.faq__item, .faq__q, .faq__btn) {
		width: 100% !important;
		align-self: stretch !important;
		justify-self: stretch !important;
		margin-right: 0 !important;
	}
}

/* Mobile: the "When should you sell" button comes after the signs. */
@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash .wbc-when .section__inner {
		display: flex;
		flex-direction: column;
	}

	body.page-we-buy-cars-for-cash .wbc-when__head {
		display: contents;
	}

	body.page-we-buy-cars-for-cash .wbc-when .wbc-sig {
		order: 1;
		width: 100%;
	}

	body.page-we-buy-cars-for-cash .wbc-when__head > .btn {
		order: 2;
		margin-top: 2rem;
	}
}

@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash .wbc-dec__more {
		justify-content: flex-start !important;
		align-items: flex-start !important;
		text-align: left !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Mobile: the H1 runs as one sentence, no forced break between the two lines. */
@media (max-width: 63.9375rem) {
	body.page-we-buy-cars-for-cash .wbc-hero .hero__h .line {
		display: inline !important;
	}
}