/* ==========================================================================
   Trade-in landing page (/trade-in/).

   The page is built from sections main.css already styles, so this file
   only does what those sections were not built for: a longer headline in
   the hero, four steps instead of three, a header row on the difference
   list, and a few small additions in the same idiom. Scoped to the page
   by the body class swr_body_slug() adds.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero. The headline is two long lines rather than three short words, so
   it steps down a size and takes a wider measure.
   -------------------------------------------------------------------------- */

.page-trade-in .hero__h {
	font-size: clamp(2.5rem, 5.4vw, 5rem);
	line-height: 1.02;
}

.page-trade-in .hero__h .line:last-child {
	color: rgb(244 241 234 / 78%);
}

@media (min-width: 64rem) {
	.page-trade-in .hero__copy .hero__h {
		max-width: 15ch;
	}
}

/* The counter band runs light here: paper, ink figures, the rule colour
   for the dividers. Every divider selector main.css sets is restated, so
   no dark rule survives at any breakpoint. */
.page-trade-in .hero__stats {
	background: var(--paper);
	backdrop-filter: none;
	border-top: 0;
	border-bottom: 1px solid var(--rule);
}

.page-trade-in .statbar__item,
.page-trade-in .statbar__item:nth-child(2n + 1),
.page-trade-in .statbar__item:nth-child(3n + 1) {
	border-color: var(--rule);
}

.page-trade-in .statbar__num {
	color: var(--ink);
}

.page-trade-in .statbar__prefix {
	color: var(--oxblood);
}

.page-trade-in .statbar__label {
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   Section headings. Every h2 on the page at one size, the site's display-l
   at its desktop cap, so no section reads louder than the next.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Where. Heading and line centred over the store cards.
   -------------------------------------------------------------------------- */

.page-trade-in .where__intro {
	display: block;
	max-width: 52rem;
	margin-inline: auto;
	text-align: center;
}

.page-trade-in .where__intro .display-l {
	margin-inline: auto;
	max-width: 24ch;
}

.page-trade-in .where__lede {
	margin: 1.25rem auto 0;
}

/* --------------------------------------------------------------------------
   Introduction. The location page neighbourhood split, with the About
   page tick list and the home page button row in the copy, and one
   photograph on the right carrying the About page badge.
   -------------------------------------------------------------------------- */

.tihood {
	border-top: 0;
}

.tihood .hood__lede + .hood__lede {
	margin-top: 1rem;
}

.tihood__list {
	margin-top: 1.25rem;
	gap: 0.625rem;
}

.tihood__ctas {
	margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.tihood__photo {
	margin: 0;
	aspect-ratio: 4 / 3;
}

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

.tihood .tihood__badge {
	left: 1.25rem;
	bottom: 1.25rem;
}

/* The photograph is small on a phone, so the badge scales down with it. */
@media (max-width: 47.9375rem) {
	.tihood .tihood__badge {
		left: 0.75rem;
		bottom: 0.75rem;
		padding: 0.5rem 0.875rem;
		gap: 0.5rem;
		border-radius: 0.75rem;
	}

	.tihood .tihood__badge .getknow__badge-num {
		font-size: 1.5rem;
	}

	.tihood .tihood__badge .getknow__badge-txt {
		font-size: 0.5625rem;
	}
}

@media (min-width: 64rem) {
	.tihood .hood__grid {
		align-items: center;
	}

	/* Tall enough to stand level with the copy beside it. */
	.tihood__photo {
		aspect-ratio: 1 / 1;
	}
}

/* --------------------------------------------------------------------------
   Why. The Why Sell to Reineke grid, four to a row on desktop: seven
   reasons and the call to action make two full rows of four.
   -------------------------------------------------------------------------- */

.tiwhy {
	background: #fff;
}

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

.tiwhy__cta .btn {
	margin-top: 1.25rem;
}

/* main.css draws the dividers for three columns, so they are restated
   for four: every cell carries the upright rule except the first in a row. */
@media (min-width: 68rem) {
	.tiwhy .whyr__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

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

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

/* --------------------------------------------------------------------------
   Process. The home page curve with four points instead of three. The
   wave peaks and dips at the centre of each quarter (150, 450, 750 and
   1050 in a 1200 wide box), so each badge sits at the centre of its
   column and --yy, the point's height as a fraction of the band, puts it
   on the line. The copy all starts on one line just under the lowest
   point of the wave, so the curve never runs through a heading. Below 1024px main.css stacks it as on the home
   page.
   -------------------------------------------------------------------------- */

/* Heading and lede centred over the curve, at every width. */
.tiproc #tiproc-h,
.tiproc .how__lede {
	text-align: center;
	margin-inline: auto;
}

.tiproc #tiproc-h {
	max-width: 22ch;
}

.tiproc .how__lede {
	max-width: 40rem;
}

@media (min-width: 64rem) {
	.tiproc .process {
		--band: 11rem;
		position: relative;
		height: auto;
	}

	.tiproc .process__curve {
		inset: 0 0 auto;
		height: var(--band);
	}

	.tiproc .process__steps {
		position: relative;
		inset: auto;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tiproc .process__step {
		position: relative;
		padding: calc(var(--band) * 0.7 + 2.75rem) 1.25rem 0;
		text-align: center;
	}

	.tiproc .process__badge {
		left: 50%;
		top: calc(var(--band) * var(--yy));
	}

	.tiproc .process__text {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
	}

	.tiproc .process__text p {
		max-width: 30ch;
		margin-inline: auto;
	}

	.tiproc .process__num {
		left: auto;
		right: 0;
		top: calc(var(--band) * 0.7 - 0.25rem);
		font-size: 8.5rem;
	}
}

/* --------------------------------------------------------------------------
   Trade-in value. The difference list gains a header row, and its values
   run longer than the home page ones, so they drop to body weight.
   -------------------------------------------------------------------------- */

.tival__factors .buy__promise dd {
	font-family: var(--sans);
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.55;
	letter-spacing: 0;
	color: rgb(244 241 234 / 82%);
}

.tival__factors .buy__promise dt {
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--paper);
}

.tival__factors .tival__head dt,
.tival__factors .tival__head dd {
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(244 241 234 / 50%);
}

.tival__note {
	margin-top: 2rem;
}

/* Desktop: the six factors run two to a row and the panel tightens up,
   which roughly halves the height the single list gave it. The column
   headings only describe a two column table, so they go. */
@media (min-width: 64rem) {
	.page-trade-in .buy__copy {
		padding-block: clamp(3rem, 4.5vw, 4rem);
	}

	.page-trade-in .buy__copy > * {
		max-width: 48rem;
	}

	.page-trade-in .buy__lede {
		margin-top: 1.25rem;
	}

	/* The photograph fills the row instead of setting it, so the panel
	   copy decides the height. */
	.page-trade-in .buy__media {
		position: relative;
		min-height: 26rem;
	}

	.page-trade-in .buy__media img {
		position: absolute;
		inset: 0;
		height: 100%;
		min-height: 0;
		object-position: center 60%;
	}

	.tival__factors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2.5rem;
		margin-top: 1.75rem;
	}

	.tival__factors .tival__head {
		display: none;
	}

	.tival__factors .buy__promise {
		flex-direction: column;
		gap: 0.25rem;
		padding-block: 0.875rem;
	}

	.tival__factors .buy__promise dt,
	.tival__factors .buy__promise dd {
		flex: 0 0 auto;
	}

	/* Two columns, so the last two rows both drop the rule. */
	.tival__factors .buy__promise:nth-last-child(2) {
		border-bottom: 0;
	}

	.tival__note {
		margin-top: 1.5rem;
		font-size: 0.9375rem;
	}

	.page-trade-in .buy .section__more {
		margin-top: 1.75rem;
	}
}

/* --------------------------------------------------------------------------
   Trade or cash. The fork cards carry a short ruled list, then the tax
   note sits under both.
   -------------------------------------------------------------------------- */

.tifork__rows {
	margin: 1.5rem 0 0;
	border-top: 1px solid var(--rule);
}

.tifork__rows > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	padding-block: 0.8125rem;
	border-bottom: 1px solid var(--rule);
}

.tifork__rows dt {
	flex: 0 0 7.5rem;
	padding-top: 0.1875rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.tifork__rows dd {
	flex: 1 1 12rem;
	margin: 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: -0.01em;
}

.fork__card--alt .tifork__rows,
.fork__card--alt .tifork__rows > div {
	border-color: rgb(244 241 234 / 14%);
}

.fork__card--alt .tifork__rows dt {
	color: rgb(244 241 234 / 55%);
}

.fork__card--alt .tifork__rows dd {
	color: var(--paper);
}

.tifork__tax {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--oxblood);
	border-radius: 1rem;
	background: var(--paper-lift);
}

.tifork__tax .body-l {
	max-width: 52rem;
}

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

/* --------------------------------------------------------------------------
   Still owe money. Copy left; two contrasting cards and a lease strip right.
   -------------------------------------------------------------------------- */

.tiowe {
	background: var(--paper-lift);
}

.tiowe__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
}

.tiowe__lede {
	margin-top: 1.25rem;
}

.tiowe__ctas {
	margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.tiowe__cases {
	display: grid;
	gap: 1rem;
}

.tiowe__case {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-radius: 1.25rem;
	overflow: hidden;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), opacity 0.7s var(--ease);
}

.tiowe__case.is-in:hover {
	transform: translateY(-4px);
}

.tiowe__case--plus {
	background: #fff;
	border: 1px solid var(--rule);
	border-top: 3px solid var(--oxblood);
	box-shadow: 0 24px 48px -32px rgb(26 22 20 / 30%);
}

.tiowe__case--minus {
	background:
		radial-gradient(70% 60% at 100% 0%, rgb(236 26 79 / 26%) 0%, rgb(236 26 79 / 0%) 70%),
		var(--ink);
	color: var(--paper);
}

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

.tiowe__case--minus .tiowe__sign {
	background: rgb(244 241 234 / 10%);
	color: var(--paper);
	box-shadow: inset 0 0 0 1px rgb(244 241 234 / 22%);
}

.tiowe__h {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.tiowe__p {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--muted);
}

.tiowe__case--minus .tiowe__p {
	color: rgb(244 241 234 / 72%);
}

.tiowe__lease {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: none;
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	border: 1px dashed color-mix(in srgb, var(--oxblood) 45%, transparent);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--oxblood) 5%, transparent);
	font-size: 0.9375rem;
	color: var(--muted);
	text-align: left;
}

.tiowe__lease strong {
	font-family: var(--display);
	font-weight: 600;
	color: var(--ink);
	margin-right: 0.25rem;
}

.tiowe__leaseicon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1px solid var(--oxblood);
	color: var(--oxblood);
}

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

@media (min-width: 64rem) {
	.tiowe__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: 4.5rem;
		align-items: center;
	}
}

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

	.tiowe__case {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   Trading down. A light split mirrored from the introduction: photograph
   left with the About page badge, copy and a ruled 2 by 2 list right.
   -------------------------------------------------------------------------- */

/* Dark: ink with the closing section's crimson rising from one corner. */
.tidown {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-top: 0;
	background:
		radial-gradient(55% 70% at 100% 0%, rgb(236 26 79 / 22%) 0%, rgb(236 26 79 / 0%) 70%),
		radial-gradient(40% 55% at 0% 100%, rgb(236 26 79 / 12%) 0%, rgb(236 26 79 / 0%) 70%),
		var(--ink);
	color: var(--paper);
}

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

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

.tidown .tidown__label {
	color: rgb(244 241 234 / 55%);
}

.tidown .tidown__lede {
	color: rgb(244 241 234 / 72%);
}

.tidown .tidown__item {
	color: var(--paper);
	border-bottom-color: rgb(244 241 234 / 14%);
}

.tidown .tidown__photo {
	background: #2a2421;
	box-shadow: 0 30px 60px -30px rgb(0 0 0 / 70%);
}

.tidown__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

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

.tidown__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease);
}

.tidown__photo:hover img {
	transform: scale(1.04);
}

.tidown .tidown__badge {
	left: 1.25rem;
	bottom: 1.25rem;
	align-items: center;
}

.tidown__badgeicon {
	display: grid;
	place-items: center;
}

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

.tidown__label {
	margin: 2rem 0 0.25rem;
}

.tidown__list {
	display: grid;
}

.tidown__item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--rule);
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-align: left;
}

.tidown__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	border: 1px solid var(--oxblood);
	color: var(--oxblood);
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.tidown__item:hover .tidown__icon {
	background: var(--oxblood);
	color: var(--paper);
}

.tidown__cta {
	margin-top: clamp(1.75rem, 3vw, 2.25rem);
	max-width: none;
}

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

@media (min-width: 64rem) {
	.tidown__grid {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		align-items: center;
	}

	/* The photograph is landscape, so the frame is too: the whole vehicle
	   shows instead of a close crop of its grille. */
	.tidown__photo {
		aspect-ratio: 16 / 11;
	}

	.tidown__photo img {
		object-position: center 60%;
	}
}

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

	.tidown__photo {
		order: -1;
	}

	.tidown .tidown__badge {
		left: 0.75rem;
		bottom: 0.75rem;
		padding: 0.5rem 0.875rem;
		border-radius: 0.75rem;
	}
}

/* --------------------------------------------------------------------------
   Timing. Heading beside a crimson call to action, then the five signals
   along one rail: numbered dots, a white card under each. Upright rail on
   phones.
   -------------------------------------------------------------------------- */

.titime__top {
	display: grid;
	gap: 2rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.titime__head .display-l {
	max-width: 18ch;
}

.titime__lede {
	margin-top: 1rem;
	color: var(--muted);
}

.titime__cta {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: 1.25rem;
	background:
		radial-gradient(80% 90% at 100% 0%, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 0%) 60%),
		var(--oxblood);
	color: var(--paper);
	box-shadow: 0 24px 48px -24px rgb(236 26 79 / 60%);
}

.titime__ctaicon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.875rem;
	background: rgb(255 255 255 / 16%);
}

.titime__ctah {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.2;
}

.titime__ctap {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	color: rgb(255 255 255 / 85%);
}

.titime__cta .btn {
	justify-self: start;
}

/* The rail. */
.titime__rail {
	position: relative;
	display: grid;
	gap: 1.25rem;
	padding-left: 3.25rem;
}

.titime__rail::before {
	content: "";
	position: absolute;
	left: 1.1875rem;
	top: 1.25rem;
	bottom: 1.25rem;
	width: 2px;
	background: linear-gradient(to bottom, var(--oxblood), color-mix(in srgb, var(--oxblood) 25%, transparent));
}

.titime__stop {
	position: relative;
}

.titime__dot {
	position: absolute;
	left: -3.25rem;
	top: 0.75rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--paper);
	border: 2px solid var(--oxblood);
	font-family: var(--display);
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--oxblood);
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.titime__stop:hover .titime__dot {
	background: var(--oxblood);
	color: var(--paper);
}

.titime__card {
	height: 100%;
	padding: 1.5rem;
	border: 1px solid var(--rule);
	border-radius: 1.25rem;
	background: #fff;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.titime__stop:hover .titime__card {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--oxblood) 40%, var(--rule));
	box-shadow: 0 24px 40px -28px rgb(26 22 20 / 35%);
}

.titime__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1.25rem;
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--oxblood) 10%, transparent);
	color: var(--oxblood);
}

.titime__h {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.titime__p {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--muted);
}

@media (min-width: 64rem) {
	.titime__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
		align-items: end;
		gap: 4rem;
	}

	/* Horizontal: the rail runs through the dots across the top. */
	.titime__rail {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1rem;
		padding-left: 0;
		padding-top: 4rem;
	}

	.titime__rail::before {
		left: 1.25rem;
		right: 1.25rem;
		top: 1.25rem;
		bottom: auto;
		width: auto;
		height: 2px;
		background: linear-gradient(to right, var(--oxblood), color-mix(in srgb, var(--oxblood) 25%, transparent));
	}

	.titime__dot {
		left: 0;
		top: -4rem;
	}
}

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

	.titime__head .display-l,
	.titime__lede {
		margin-inline: auto;
	}

	.titime__rail,
	.titime__cta {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   Where. Two notes under the store cards, in the same glass as the cards.
   -------------------------------------------------------------------------- */

.tiwhere__notes {
	display: grid;
	gap: 1rem;
	margin-top: 1rem;
}

.tiwhere__note {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	max-width: none;
	padding: 1.25rem 1.5rem;
	border: 1px solid rgb(244 241 234 / 16%);
	border-radius: 1rem;
	background: rgb(10 8 7 / 42%);
	backdrop-filter: blur(8px);
	color: rgb(244 241 234 / 78%);
	font-size: 0.9375rem;
	text-align: left;
}

.tiwhere__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	border: 1px solid var(--oxblood);
	color: var(--oxblood);
}

.tiwhere__note a {
	white-space: nowrap;
	color: var(--paper);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgb(244 241 234 / 40%);
}

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

/* --------------------------------------------------------------------------
   What to bring.
   -------------------------------------------------------------------------- */

.tibring__states {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   Questions. The home page accordion without its photograph: one centred
   column, heading centred above it.
   -------------------------------------------------------------------------- */

.page-trade-in .faq {
	padding-block: var(--pad-y);
	background: #fff;
}

.page-trade-in .faq__split {
	display: block;
}

.page-trade-in .faq__copy {
	display: block;
	max-width: 52rem;
	margin-inline: auto;
	padding: 0 var(--gutter);
}

.page-trade-in .faq__copy > * {
	max-width: none;
}

.page-trade-in #tifaq-h {
	text-align: center;
}

/* --------------------------------------------------------------------------
   Close. The facts in place of the lede, 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%);
}

/* --------------------------------------------------------------------------
   Phones.
   -------------------------------------------------------------------------- */

@media (max-width: 47.9375rem) {
	.tifork__rows,
	.tifork__tax,
	.tiwhere__note {
		text-align: left;
	}

	.tifork__tax .eyebrow {
		justify-content: flex-start;
	}

	/* The column headings only make sense side by side. */
	.tival__factors .tival__head {
		display: none;
	}
}

/* Mobile: intro photo above the copy. */
@media (max-width: 63.9375rem) {
	.tihood .tihood__photo {
		order: -1;
	}
}

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

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

	body.page-trade-in main .section:not(.hero) :is([class*="__head"], [class*="__copy"], [class*="__intro"], [class*="ctas"], [class*="__cta"]) {
		align-items: flex-start;
		margin-left: 0;
	}

	body.page-trade-in .tival__factors .buy__promise {
		align-items: flex-start;
	}

	body.page-trade-in .tival__factors .buy__promise :is(dt, dd) {
		align-self: stretch;
		text-align: left;
	}
	body.page-trade-in main .section:not(.hero) :is(h2, h3, .how__lede, .process__text) {
		margin-left: 0;
		margin-right: 0;
	}

	body.page-trade-in .tiproc .process__step {
		align-items: flex-start;
		justify-items: start;
	}

	body.page-trade-in .tiproc .process__badge {
		margin-left: 0;
		margin-right: 0;
		align-self: flex-start;
		justify-self: start;
	}
	body.page-trade-in .where .where__link {
		justify-content: flex-start;
		align-self: flex-start;
		margin-left: 0;
		margin-right: auto;
	}
	body.page-trade-in main .section:not(.hero) .btn {
		display: flex;
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	body.page-trade-in main .section:not(.hero) :is([class*="ctas"], [class*="__cta"], .section__more) {
		align-items: stretch;
		width: 100%;
	}
}

/* Mobile: icons start from the left. */
@media (max-width: 63.9375rem) {
	body.page-trade-in 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-trade-in 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-trade-in 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;
	}
}

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

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

	body.page-trade-in .faq__btn > span:first-child {
		flex: 1 1 auto;
		text-align: left !important;
	}

	body.page-trade-in .faq__mark {
		flex: none;
		margin-left: 1rem !important;
		margin-right: 0 !important;
	}
}

@media (max-width: 63.9375rem) {
	body.page-trade-in 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-trade-in 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;
	}
}