.q-reviews-page {
	--qr-gutter: var(--q-page-gutter);
}

.qr-main {
	overflow: hidden;
	background: var(--q-paper);
}

.qr-eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.qr-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.22fr) minmax(340px, 0.78fr);
	gap: clamp(52px, 9vw, 170px);
	align-items: end;
	min-height: min(620px, calc(100svh - 72px));
	padding: clamp(78px, 10vw, 146px) var(--qr-gutter) clamp(68px, 8vw, 112px);
	background:
		linear-gradient(90deg, transparent 0 62%, color-mix(in srgb, var(--q-sky) 70%, transparent) 62% 62.16%, transparent 62.16%),
		var(--q-paper);
}

.qr-hero-copy {
	max-width: 805px;
}

.qr-hero h1,
.qr-section-heading h2,
.qr-independent h2,
.qr-close h2 {
	margin: 0;
	font-family: var(--q-display);
	font-weight: 760;
	letter-spacing: -0.04em;
	line-height: 0.96;
	text-wrap: balance;
}

.qr-hero h1 {
	max-width: 10.5ch;
	font-size: clamp(52px, 7vw, 96px);
}

.qr-hero-copy > p:last-child {
	max-width: 56ch;
	margin: 26px 0 0;
	color: var(--q-muted);
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.5;
}

.qr-score {
	display: grid;
	align-content: start;
	padding: 24px;
	border: 1px solid var(--q-ink);
	background: var(--q-blue);
	color: var(--q-cool-white);
}

.qr-score-topline {
	display: flex;
	justify-content: space-between;
	padding-bottom: 54px;
	border-bottom: 1px solid color-mix(in srgb, currentColor 70%, transparent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.qr-score-topline span:last-child {
	font-size: 18px;
	letter-spacing: 0;
}

.qr-score-number {
	margin-top: clamp(48px, 7vw, 100px);
	font-family: var(--q-display);
	font-size: clamp(70px, 9vw, 126px);
	font-weight: 780;
	letter-spacing: -0.04em;
	line-height: 0.78;
}

.qr-score-number span {
	margin-left: 7px;
	font-size: clamp(22px, 2.2vw, 31px);
	letter-spacing: -0.04em;
}

.qr-score p {
	max-width: 23ch;
	margin: 25px 0 36px;
	color: #e4f4f4;
	font-size: 15px;
	line-height: 1.35;
}

.qr-score a,
.qr-button {
	display: flex;
	gap: 20px;
	justify-content: space-between;
	align-items: center;
	min-height: 62px;
	padding: 14px 17px;
	background: var(--q-cool-white);
	color: var(--q-ink);
	font-size: 14px;
	font-weight: 800;
	transition: transform 180ms var(--q-ease-out), background-color 180ms var(--q-ease-out), color 180ms var(--q-ease-out);
}

.qr-score a:hover,
.qr-score a:focus-visible,
.qr-button:hover,
.qr-button:focus-visible {
	background: var(--q-ink);
	color: var(--q-cool-white);
	transform: translate(3px, -3px);
}

.qr-proof-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--q-ink);
	border-left: 1px solid var(--q-ink);
	background: var(--q-cool-white);
}

.qr-proof-strip p,
.qr-proof-strip a {
	display: flex;
	min-height: 166px;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: 22px var(--qr-gutter);
	border-right: 1px solid var(--q-ink);
	border-bottom: 1px solid var(--q-ink);
}

.qr-proof-strip p:nth-child(1) {
	background: var(--q-mint);
}

.qr-proof-strip p:nth-child(2) {
	background: var(--q-oat);
}

.qr-proof-strip p:nth-child(3) {
	background: var(--q-sky);
}

body.q-reviews-page .qr-proof-strip a,
body.q-reviews-page .qr-proof-strip a:is(:visited, :hover, :focus, :active) {
	background: var(--q-ink);
	color: var(--q-cool-white);
	font-weight: 800;
	transition: background-color 180ms var(--q-ease-out), color 180ms var(--q-ease-out);
}

body.q-reviews-page .qr-proof-strip a:hover,
body.q-reviews-page .qr-proof-strip a:focus-visible {
	background: var(--q-blue);
}

.qr-proof-strip strong {
	font-family: var(--q-display);
	font-size: clamp(39px, 4.5vw, 68px);
	letter-spacing: -0.04em;
	line-height: 0.9;
}

.qr-proof-strip span {
	max-width: 14ch;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.25;
}

.qr-proof-strip b {
	align-self: end;
	font-size: 23px;
	font-weight: 500;
}

.qr-excerpts {
	padding: clamp(86px, 10vw, 152px) var(--qr-gutter);
	background: var(--q-cool-white);
}

.qr-section-heading {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.55fr);
	gap: clamp(44px, 10vw, 170px);
	align-items: end;
	margin-bottom: clamp(42px, 5vw, 74px);
}

.qr-section-heading h2,
.qr-independent h2 {
	max-width: 11ch;
	font-size: clamp(42px, 5vw, 78px);
}

.qr-section-heading > p {
	max-width: 36ch;
	margin: 0 0 5px;
	color: var(--q-muted);
	font-size: 16px;
	line-height: 1.5;
}

.qr-quote-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--q-ink);
	border-left: 1px solid var(--q-ink);
}

.qr-quote {
	display: flex;
	min-height: clamp(290px, 28vw, 450px);
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: clamp(26px, 4vw, 58px);
	border-right: 1px solid var(--q-ink);
	border-bottom: 1px solid var(--q-ink);
}

.qr-quote--blue {
	background: var(--q-blue);
	color: var(--q-cool-white);
}

.qr-quote--oat {
	background: var(--q-oat);
}

.qr-quote--mint {
	background: var(--q-mint);
}

.qr-quote--ink {
	background: var(--q-ink);
	color: var(--q-cool-white);
}

.qr-quote blockquote {
	max-width: 16ch;
	margin: 0;
	font-family: var(--q-display);
	font-size: clamp(28px, 3.15vw, 52px);
	font-weight: 680;
	letter-spacing: -0.04em;
	line-height: 1.03;
	text-wrap: balance;
}

.qr-quote figcaption {
	display: flex;
	gap: 14px;
	align-items: center;
	padding-top: 20px;
	border-top: 1px solid currentColor;
	font-size: 13px;
	font-weight: 800;
}

.qr-quote figcaption span {
	font-size: 11px;
	letter-spacing: 0.07em;
}

.qr-independent {
	display: grid;
	grid-template-columns: minmax(0, 0.89fr) minmax(380px, 1.11fr);
	gap: clamp(58px, 10vw, 176px);
	align-items: start;
	padding: clamp(86px, 10vw, 150px) var(--qr-gutter);
	background: var(--q-paper);
}

.qr-independent-copy > p:not(.qr-eyebrow) {
	max-width: 47ch;
	margin: 27px 0 32px;
	color: var(--q-muted);
	font-size: 17px;
	line-height: 1.5;
}

.qr-independent .qr-button {
	width: min(100%, 310px);
	background: var(--q-blue);
	color: var(--q-cool-white);
}

.qr-independent .qr-button:hover,
.qr-independent .qr-button:focus-visible {
	background: var(--q-ink);
}

.qr-process {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--q-ink);
	list-style: none;
}

.qr-process li {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 20px;
	padding: 25px 0;
	border-bottom: 1px solid var(--q-line);
}

.qr-process > li > span {
	padding-top: 4px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.qr-process p {
	display: grid;
	gap: 5px;
	margin: 0;
	color: var(--q-muted);
	font-size: 15px;
	line-height: 1.45;
}

.qr-process strong {
	color: var(--q-ink);
	font-size: clamp(19px, 2vw, 27px);
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.qr-close {
	padding: clamp(80px, 11vw, 170px) var(--qr-gutter);
	background: var(--q-teal);
}

.qr-close h2 {
	max-width: 10ch;
	font-size: clamp(48px, 6.5vw, 96px);
}

.qr-close > div {
	display: flex;
	gap: 26px;
	align-items: center;
	margin-top: 42px;
}

.qr-close .qr-button {
	width: min(100%, 240px);
}

.qr-button--light {
	background: var(--q-cool-white);
}

.qr-text-link {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	padding: 7px 0;
	border-bottom: 1px solid currentColor;
	font-size: 14px;
	font-weight: 800;
}

.q-reviews-page a:focus-visible {
	outline: 3px solid var(--q-orange);
	outline-offset: 3px;
}

.q-reviews-page .q-wordmark,
.q-reviews-page .q-nav a,
.q-reviews-page .q-cart-link,
.q-reviews-page .q-footer-links a {
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

.q-reviews-page .q-footer-links a {
	color: var(--q-cool-white);
}

.q-reviews-page .q-skip-link {
	min-height: 44px;
}

@media (max-width: 920px) {
	.qr-hero,
	.qr-independent {
		grid-template-columns: minmax(0, 1fr);
	}

	.qr-hero {
		min-height: 0;
		background: var(--q-paper);
	}

	.qr-score {
		max-width: 540px;
	}

	.qr-score-number {
		margin-top: 64px;
	}

	.qr-proof-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.qr-section-heading {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.qr-independent {
		gap: 54px;
	}
}

@media (max-width: 560px) {
	.qr-hero,
	.qr-excerpts,
	.qr-independent,
	.qr-close {
		padding-right: 20px;
		padding-left: 20px;
	}

	.qr-hero {
		padding-top: 65px;
		padding-bottom: 62px;
	}

	.qr-hero h1 {
		font-size: clamp(47px, 14vw, 68px);
	}

	.qr-score {
		padding: 19px;
	}

	.qr-score-topline {
		padding-bottom: 42px;
	}

	.qr-proof-strip p,
	.qr-proof-strip a {
		min-height: 146px;
		padding: 18px 20px;
	}

	.qr-proof-strip strong {
		font-size: 42px;
	}

	.qr-section-heading h2,
	.qr-independent h2 {
		font-size: clamp(39px, 12vw, 58px);
	}

	.qr-quote-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.qr-quote {
		min-height: 290px;
		padding: 30px 22px;
	}

	.qr-quote blockquote {
		font-size: clamp(29px, 9.4vw, 45px);
	}

	.qr-process li {
		grid-template-columns: 42px 1fr;
		gap: 13px;
	}

	.qr-close h2 {
		font-size: clamp(48px, 14vw, 69px);
	}

	.qr-close > div {
		align-items: flex-start;
		flex-direction: column;
		margin-top: 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qr-score a,
	.qr-button,
	.qr-proof-strip a {
		transition: none;
	}
}
