.q-support-page {
	--qsp-rail: var(--q-page-gutter);
}

.qsp-main {
	background: var(--q-paper);
}

.qsp-hero,
.qsp-routes,
.qsp-widget,
.qsp-answers,
.qsp-contact {
	padding-right: var(--qsp-rail);
	padding-left: var(--qsp-rail);
}

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

.qsp-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr);
	gap: clamp(42px, 9vw, 150px);
	align-items: end;
	min-height: min(570px, calc(100svh - 72px));
	padding-top: clamp(72px, 10vw, 144px);
	padding-bottom: clamp(62px, 8vw, 110px);
	background: var(--q-paper);
}

.qsp-hero-copy {
	max-width: 760px;
}

.qsp-hero h1,
.qsp-section-heading h2,
.qsp-widget h2,
.qsp-answers h2,
.qsp-contact h2 {
	margin: 0;
	font-family: var(--q-display);
	font-weight: 760;
	letter-spacing: -0.04em;
	line-height: 0.98;
}

.qsp-hero h1 {
	max-width: 9ch;
	font-size: clamp(52px, 7vw, 108px);
}

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

.qsp-hero-actions {
	display: grid;
	border-top: 1px solid var(--q-ink);
	border-left: 1px solid var(--q-ink);
}

.qsp-action {
	display: flex;
	gap: 18px;
	justify-content: space-between;
	align-items: center;
	min-height: 84px;
	padding: 22px 24px;
	border-right: 1px solid var(--q-ink);
	border-bottom: 1px solid var(--q-ink);
	background: var(--q-cool-white);
	font-weight: 760;
	transition: background-color 180ms var(--q-ease-out), color 180ms var(--q-ease-out);
}

.qsp-action b,
.qsp-route-link b,
.qsp-contact-actions b {
	font-size: 21px;
	font-weight: 500;
}

.qsp-action--primary {
	background: var(--q-blue);
	color: var(--q-cool-white);
}

.qsp-action:hover,
.qsp-action:focus-visible {
	background: var(--q-ink);
	color: var(--q-cool-white);
}

.qsp-routes {
	padding-top: clamp(76px, 9vw, 130px);
	padding-bottom: clamp(76px, 9vw, 130px);
	background: var(--q-cool-white);
}

.qsp-section-heading {
	display: grid;
	grid-template-columns: minmax(190px, 0.43fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	margin-bottom: 40px;
}

.qsp-section-heading h2 {
	max-width: 10ch;
	font-size: clamp(40px, 5vw, 76px);
}

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

.qsp-route {
	display: flex;
	flex-direction: column;
	min-height: 360px;
	padding: 20px;
	border-right: 1px solid var(--q-ink);
	border-bottom: 1px solid var(--q-ink);
	transition: transform 180ms var(--q-ease-out), filter 180ms var(--q-ease-out);
}

.qsp-route:hover,
.qsp-route:focus-visible {
	position: relative;
	z-index: 1;
	filter: saturate(1.1);
	transform: translate(-4px, -4px);
}

.qsp-route--blue {
	background: var(--q-blue);
	color: var(--q-cool-white);
}

.qsp-route--oat {
	background: var(--q-oat);
}

.qsp-route--mint {
	background: var(--q-mint);
}

.qsp-route--ink {
	background: var(--q-ink);
	color: var(--q-cool-white);
}

body.q-support-page .qsp-route--ink h3 { color: var(--q-cool-white); }

.qsp-route-index {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.qsp-route h3 {
	max-width: 11ch;
	margin: auto 0 12px;
	font-size: clamp(23px, 2vw, 31px);
	font-weight: 760;
	letter-spacing: -0.025em;
	line-height: 1.03;
}

.qsp-route p {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
}

.qsp-route-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
	padding-top: 14px;
	border-top: 1px solid currentColor;
	font-size: 14px;
	font-weight: 800;
}

.qsp-widget {
	display: grid;
	grid-template-columns: minmax(18rem, .72fr) minmax(32rem, 1.28fr);
	gap: clamp(3rem, 8vw, 8rem);
	align-items: center;
	padding-top: clamp(5rem, 9vw, 8rem);
	padding-bottom: clamp(5rem, 9vw, 8rem);
	background: var(--q-sky);
}

.qsp-widget h2 { max-width: 9ch; font-size: clamp(42px, 5vw, 76px); }
.qsp-widget-copy > p:last-child { max-width: 38ch; margin: 24px 0 0; color: color-mix(in srgb, var(--q-ink), transparent 18%); font-size: 17px; line-height: 1.55; }
.qsp-widget-frame { min-width: 0; overflow: hidden; border: 1px solid var(--q-ink); background: var(--q-cool-white); }
.qsp-widget-frame iframe { display: block; width: 100%; height: 500px; border: 0; background: var(--q-cool-white); }

.qsp-answers {
	display: grid;
	grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
	gap: clamp(54px, 10vw, 170px);
	padding-top: clamp(80px, 10vw, 146px);
	padding-bottom: clamp(80px, 10vw, 146px);
	background: var(--q-paper);
}

.qsp-answers-intro {
	align-self: start;
}

.qsp-answers h2,
.qsp-contact h2 {
	max-width: 10ch;
	font-size: clamp(42px, 4.7vw, 73px);
}

.qsp-answers-intro > p:not(.qsp-eyebrow) {
	max-width: 38ch;
	margin: 25px 0;
	color: var(--q-muted);
}

.qsp-text-link {
	display: inline-flex;
	gap: 16px;
	align-items: center;
	padding-bottom: 7px;
	border-bottom: 1px solid currentColor;
	font-size: 14px;
	font-weight: 800;
}

.qsp-accordion {
	border-top: 1px solid var(--q-line);
}

.qsp-accordion details {
	border-bottom: 1px solid var(--q-line);
}

.qsp-accordion summary {
	display: flex;
	gap: 22px;
	justify-content: space-between;
	align-items: center;
	padding: 24px 0;
	cursor: pointer;
	font-size: clamp(18px, 1.65vw, 24px);
	font-weight: 730;
	line-height: 1.2;
	list-style: none;
}

.qsp-accordion summary::-webkit-details-marker {
	display: none;
}

.qsp-accordion summary span {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.qsp-accordion summary span::before,
.qsp-accordion summary span::after {
	position: absolute;
	top: 8px;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
	content: "";
	transition: transform 180ms var(--q-ease-out);
}

.qsp-accordion summary span::after {
	transform: rotate(90deg);
}

.qsp-accordion details[open] summary span::after {
	transform: rotate(0deg);
}

.qsp-accordion details > div {
	max-width: 64ch;
	padding: 0 0 26px;
	color: var(--q-muted);
}

.qsp-accordion p {
	margin: 0 0 15px;
}

.qsp-accordion a {
	color: var(--q-ink);
	font-size: 14px;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.qsp-contact {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
	gap: clamp(44px, 8vw, 130px);
	align-items: end;
	padding-top: clamp(72px, 8vw, 118px);
	padding-bottom: clamp(72px, 8vw, 118px);
	background: var(--q-teal);
}

.qsp-contact > div:first-child > p:last-child {
	max-width: 50ch;
	margin: 25px 0 0;
	color: color-mix(in srgb, var(--q-ink) 80%, var(--q-teal));
	font-size: 17px;
}

.qsp-contact-actions {
	display: grid;
	border-top: 1px solid var(--q-ink);
	border-left: 1px solid var(--q-ink);
}

.qsp-contact-actions a {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 20px;
	align-items: center;
	min-height: 94px;
	padding: 19px 22px;
	border-right: 1px solid var(--q-ink);
	border-bottom: 1px solid var(--q-ink);
	background: var(--q-cool-white);
	transition: background-color 180ms var(--q-ease-out), color 180ms var(--q-ease-out);
}

.qsp-contact-actions a:hover,
.qsp-contact-actions a:focus-visible {
	background: var(--q-ink);
	color: var(--q-cool-white);
}

.qsp-contact-actions span {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.qsp-contact-actions strong {
	font-size: clamp(19px, 2vw, 27px);
	letter-spacing: -0.02em;
}

.qsp-contact-actions b {
	grid-row: 1 / span 2;
	grid-column: 2;
}

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

body.q-support-page .q-footer a:hover,
body.q-support-page .q-footer a:focus-visible {
	color: #8ed7ce;
}

.q-support-page a:focus-visible,
.q-support-page summary:focus-visible {
	outline: 3px solid var(--q-cool-white);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--q-blue-deep);
}

@media (max-width: 860px) {
	body.q-support-page .q-wordmark,
	body.q-support-page .q-nav a,
	body.q-support-page .q-cart-link,
	body.q-support-page .q-footer-links a {
		min-height: 44px;
	}

	body.q-support-page .q-wordmark,
	body.q-support-page .q-footer-links a {
		display: inline-flex;
		align-items: center;
	}
}

@media (max-width: 1080px) {
	.qsp-route-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.qsp-route {
		min-height: 285px;
	}
}

@media (max-width: 820px) {
	.qsp-hero,
	.qsp-widget,
	.qsp-answers,
	.qsp-contact {
		grid-template-columns: minmax(0, 1fr);
	}

	.qsp-hero {
		min-height: 0;
		gap: 42px;
		background: var(--q-paper);
	}

	.qsp-hero h1 {
		max-width: 10ch;
	}

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

	.qsp-answers,
	.qsp-contact {
		gap: 52px;
	}
}

@media (max-width: 560px) {
	.qsp-hero,
	.qsp-routes,
	.qsp-answers,
	.qsp-contact {
		padding-right: 20px;
		padding-left: 20px;
	}

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

	.qsp-hero h1 {
		font-size: clamp(48px, 15vw, 68px);
	}

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

	.qsp-route {
		min-height: 250px;
	}

	.qsp-route h3 {
		max-width: 13ch;
	}

	.qsp-answers h2,
	.qsp-contact h2,
	.qsp-section-heading h2 {
		font-size: clamp(39px, 12vw, 57px);
	}

	.qsp-contact-actions a {
		padding: 18px;
	}

	.qsp-contact-actions strong {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qsp-route,
	.qsp-action,
	.qsp-contact-actions a,
	.qsp-accordion summary span::before,
	.qsp-accordion summary span::after {
		transition: none;
	}
}