@font-face {
	font-family: system-fallback;
	src: local("Arial");
}

:root {
	--paper: #f6f8fc;
	--ink: #283a59;
	--muted: #5b6d88;
	--glass: #dae9f6;
	--accent: #4d6386;
	--line: #c5d7eb;
	--white: #fff;
	--focus: #405576;
	color-scheme: light;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-fallback, sans-serif;
	font-synthesis: none;
	color: var(--ink);
	background: var(--paper);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background:
		linear-gradient(180deg, #fcfdff 0, var(--paper) 540px),
		var(--paper);
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	cursor: pointer;
}

a:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 5px;
}

::selection {
	color: var(--white);
	background: var(--accent);
}

.site-header,
footer,
main > section {
	width: min(1180px, calc(100% - 64px));
	margin-inline: auto;
}

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 27px;
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 19px;
	font-weight: 650;
	letter-spacing: -0.045em;
	white-space: nowrap;
}

.wordmark img {
	border-radius: 9px;
}

.site-header nav {
	display: flex;
	gap: 28px;
	font-size: 14px;
	color: var(--muted);
}

.site-header nav a:hover,
footer > a:last-child:hover {
	color: var(--accent);
}

.hero {
	display: grid;
	grid-template-columns: minmax(340px, 0.82fr) minmax(520px, 1.18fr);
	align-items: center;
	gap: clamp(48px, 7vw, 96px);
	padding-block: 82px 106px;
}

.hero-copy {
	padding-bottom: 13px;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1 {
	max-width: 620px;
	margin-bottom: 25px;
	font-size: clamp(3.7rem, 6.3vw, 6rem);
	font-weight: 620;
	line-height: 0.96;
	letter-spacing: -0.075em;
}

.intro {
	max-width: 530px;
	margin-bottom: 30px;
	font-size: clamp(1.03rem, 1.45vw, 1.22rem);
	line-height: 1.58;
	letter-spacing: -0.022em;
	color: var(--muted);
}

.purchase {
	display: flex;
	align-items: center;
	gap: 18px;
}

.buy-button {
	display: inline-flex;
	align-items: center;
	gap: 22px;
	padding: 14px 17px 14px 21px;
	border-radius: 13px;
	font-size: 15px;
	font-weight: 620;
	color: var(--white);
	background: var(--ink);
	box-shadow: 0 9px 22px rgb(40 58 89 / 15%);
	transition: transform 160ms ease, background 160ms ease;
}

.buy-button:hover {
	background: var(--accent);
	transform: translateY(-1px);
}

.buy-button span {
	padding-left: 16px;
	border-left: 1px solid rgb(255 255 255 / 30%);
	font-weight: 450;
}

.purchase p {
	max-width: 125px;
	margin-bottom: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--muted);
}

.hero-notes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 29px 0 0;
	padding: 0;
	font-size: 12px;
	color: var(--muted);
	list-style: none;
}

.hero-notes li {
	position: relative;
	padding-left: 14px;
}

.hero-notes li::before {
	position: absolute;
	top: 0.46em;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #738cae;
	content: "";
}

.product-film {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border: 1px solid #b7c9df;
	border-radius: 24px;
	background: #dbe6f1 url("/shyglass-poster.jpg") center / contain no-repeat;
	box-shadow:
		0 36px 75px rgb(40 58 89 / 15%),
		0 2px 8px rgb(40 58 89 / 9%);
}

.product-film::after {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 24%);
	content: "";
	pointer-events: none;
}

.product-video {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.compatibility {
	display: grid;
	grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
	align-items: start;
	gap: clamp(50px, 9vw, 130px);
	padding-block: 64px 68px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.compatibility h2 {
	max-width: 390px;
	margin-bottom: 14px;
	font-size: clamp(1.9rem, 3vw, 2.7rem);
	font-weight: 590;
	line-height: 1.05;
	letter-spacing: -0.055em;
}

.compatibility-copy p {
	max-width: 390px;
	margin-bottom: 0;
	font-size: 16px;
	line-height: 1.62;
	color: var(--muted);
}

.model-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	list-style: none;
}

.model-list li {
	min-height: 94px;
	padding: 19px 22px;
	border-left: 1px solid var(--line);
}

.model-list li:first-child {
	padding-left: 0;
	border-left: 0;
}

.model-list strong,
.model-list span {
	display: block;
}

.model-list strong {
	margin-bottom: 7px;
	font-size: 18px;
	font-weight: 620;
	letter-spacing: -0.035em;
}

.model-list span {
	font-size: 14px;
	line-height: 1.45;
	color: var(--muted);
}

.compatibility-note {
	margin: 15px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--muted);
}

.compatibility-note a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-color: rgb(77 99 134 / 38%);
	text-underline-offset: 3px;
}

.compatibility-note a:hover {
	color: var(--ink);
}

.how,
.questions {
	display: grid;
	grid-template-columns: 0.75fr 1.25fr;
	gap: clamp(50px, 9vw, 130px);
	padding-block: 112px;
}

.section-heading h2,
.comfort h2 {
	margin-bottom: 18px;
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	font-weight: 590;
	line-height: 1.06;
	letter-spacing: -0.06em;
}

.section-heading > p,
.comfort-copy > p {
	max-width: 410px;
	font-size: 16px;
	line-height: 1.62;
	color: var(--muted);
}

.steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.steps li {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 21px;
	padding: 2px 0 29px;
	border-bottom: 1px solid var(--line);
}

.steps li + li {
	padding-top: 29px;
}

.steps li > span {
	display: grid;
	place-items: center;
	width: 31px;
	height: 31px;
	border: 1px solid #a7b7ce;
	border-radius: 50%;
	font-size: 12px;
	color: var(--accent);
}

.steps h3 {
	margin: 3px 0 7px;
	font-size: 18px;
	font-weight: 620;
	letter-spacing: -0.03em;
}

.steps p {
	max-width: 570px;
	margin: 0;
	font-size: 15px;
	line-height: 1.62;
	color: var(--muted);
}

.comfort {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	align-items: end;
	gap: clamp(50px, 9vw, 130px);
	padding-block: 92px 104px;
	border-top: 1px solid var(--line);
}

.degree-scale {
	padding-bottom: 12px;
}

.scale-track {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 6px;
	margin-bottom: 21px;
	border-radius: 8px;
	background: linear-gradient(90deg, #dae9f6 0 33%, #8aa0be 55%, var(--accent) 100%);
}

.scale-track i {
	width: 1px;
	height: 15px;
	background: #738cae;
}

.scale-labels {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	font-size: 11px;
	line-height: 1.5;
	color: var(--muted);
}

.scale-labels span:nth-child(2) {
	text-align: center;
}

.scale-labels span:last-child {
	text-align: right;
}

.scale-labels b {
	font-size: 16px;
	font-weight: 580;
	color: var(--ink);
}

.questions {
	border-top: 1px solid var(--line);
}

.faq-list details {
	padding: 21px 0;
	border-bottom: 1px solid var(--line);
}

.faq-list details:first-child {
	padding-top: 2px;
}

.faq-list details:last-child {
	border-bottom: 0;
}

summary {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-size: 16px;
	font-weight: 570;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}

summary::-webkit-details-marker {
	display: none;
}

summary::after {
	font-size: 20px;
	font-weight: 350;
	line-height: 1;
	color: #657d9f;
	content: "+";
}

details[open] summary::after {
	content: "−";
}

details p {
	max-width: 610px;
	margin: 13px 34px 0 0;
	font-size: 15px;
	line-height: 1.68;
	color: var(--muted);
}

footer {
	display: flex;
	align-items: center;
	gap: 26px;
	padding-block: 28px 34px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	color: var(--muted);
}

footer .wordmark {
	font-size: 15px;
	color: var(--ink);
}

footer > span {
	margin-left: auto;
}

@media (max-width: 980px) {
	.hero {
		grid-template-columns: 1fr;
		gap: 58px;
		padding-top: 64px;
	}

	.hero-copy {
		max-width: 700px;
	}
}

@media (max-width: 700px) {
	.site-header,
	footer,
	main > section {
		width: min(100% - 40px, 1180px);
	}

	.site-header nav {
		gap: 17px;
	}

	.site-header nav a:first-child {
		display: none;
	}

	.hero {
		padding-block: 53px 76px;
	}

	h1 {
		font-size: clamp(3rem, 14vw, 4.8rem);
	}

	.purchase {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	.purchase p {
		max-width: none;
	}

	.product-film {
		border-radius: 17px;
	}

	.how,
	.questions,
	.comfort,
	.compatibility {
		grid-template-columns: 1fr;
		gap: 43px;
		padding-block: 76px;
	}

	.compatibility {
		gap: 34px;
		padding-block: 58px 62px;
	}

	.model-list {
		grid-template-columns: 1fr;
	}

	.model-list li,
	.model-list li:first-child {
		min-height: 0;
		padding: 17px 0;
		border-bottom: 1px solid var(--line);
		border-left: 0;
	}

	.model-list li:last-child {
		border-bottom: 0;
	}

	footer {
		flex-wrap: wrap;
		gap: 17px;
	}

	footer > span {
		order: 3;
		width: 100%;
		margin-left: 0;
	}

	footer > a:last-child {
		margin-left: auto;
	}
}

@media (max-width: 430px) {
	.hero-notes {
		display: grid;
	}

	.scale-labels span:nth-child(2) {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.buy-button {
		transition: none;
	}

	.product-video {
		display: none;
	}
}