* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: #eff3f6;
	color: #333;
	font: 16px/1.65 Inter,Arial,sans-serif;

}
a { color: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
h1,h2,h3 {
	font-family: Jost,Futura,"Century Gothic",sans-serif;
	font-weight: 500;
	line-height: 1.1;
	color: #2f516d;
	margin: 0;

}
p { margin: 0 0 16px; }
.review-bar {
	max-width: 1200px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 0;
	color: #496477;
	font-size: 12px;

}
.review-bar strong { font-weight: 600; }
.review-bar a {
	text-decoration: none;
	padding: 6px 14px;
	background: #fff;
	border: 1px solid #d6e1e9;
	border-radius: 4px;

}
.listing {
	max-width: 1200px;
	margin: auto;
	background: #fff;
	box-shadow: 0 10px 50px #2f516d0d;

}
.masthead {
	padding: 24px 42px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;

}
.logo {
	width: 278px;
	height: auto;
	display: block;

}
.masthead-copy {
	font-size: 13px;
	color: #587185;
	text-align: right;

}
.masthead-copy strong {
	display: block;
	font-size: 14px;
	color: #2f516d;

}
.trust {
	background: #2f516d;
	color: #fff;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	padding: 13px 32px;
	gap: 12px;
	font-size: 13px;
	text-align: center;
	letter-spacing: .01em;

}
.trust div+div { border-left: 1px solid #7ba5c766; }
.trust b {
	color: #a4ddfa;
	margin-right: 8px;

}
.jump {
	display: flex;
	gap: 32px;
	padding: 17px 42px;
	border-bottom: 1px solid #e4edf3;
	font-size: 13px;
	font-weight: 600;

}
.jump a {
	text-decoration: none;
	border-bottom: 2px solid transparent;

}
.jump a:hover { border-color: #3eb6f4; }
.hero {
	display: grid;
	grid-template-columns: 1.12fr 1fr;
	min-height: 580px;

}
.visual {
	background: #ebf6fd;
	padding: 44px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;

}
.visual:before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border: 1px solid #83d1f94d;
	border-radius: 50%;
	left: -160px;
	top: 60px;

}
.visual .image-frame {
	position: relative;
	background: white;
	border-radius: 4px;
	padding: 22px 0;
	box-shadow: 0 16px 30px #2f516d08;

}
.visual img {
	width: 100%;
	height: 355px;
	object-fit: contain;
	display: block;

}
.image-note {
	position: relative;
	display: flex;
	justify-content: space-between;
	color: #2f516d;
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
	margin-top: 22px;

}
.hero-copy {
	padding: 53px 44px 38px;
	display: flex;
	flex-direction: column;
	justify-content: center;

}
.eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #426783;
	margin-bottom: 17px;
	display: flex;
	align-items: center;
	gap: 9px;

}
.eyebrow:before {
	content: "";
	display: block;
	width: 22px;
	height: 3px;
	background: #3eb6f4;

}
h1 {
	font-size: 48px;
	letter-spacing: -1.6px;
	margin-bottom: 20px;

}
.subhead {
	font-size: 18px;
	color: #2f516d;
	font-weight: 500;
	margin-bottom: 15px;

}
.intro {
	font-size: 15px;
	line-height: 1.8;
	color: #536776;
	max-width: 390px;

}
.warranty {
	margin-top: 16px;
	background: #2f516d;
	color: white;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	gap: 15px;
	border-radius: 4px;

}
.warranty svg {
	width: 37px;
	flex-shrink: 0;
	stroke: #83d1f9;
	fill: none;
	stroke-width: 1.5;

}
.warranty strong {
	display: block;
	font: 500 23px/1.15 Jost,Arial,sans-serif;

}
.warranty span {
	display: block;
	font-size: 12px;
	color: #d4e8f5;
	margin-top: 5px;

}
.metrics {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	padding: 27px 42px;
	border-top: 1px solid #ddebf4;
	border-bottom: 1px solid #ddebf4;

}
.metric {
	padding: 0 22px;
	text-align: center;
	border-right: 1px solid #dce7ef;

}
.metric:last-child { border: 0; }
.metric strong {
	display: block;
	color: #2f516d;
	font: 500 29px/1.15 Jost,Arial,sans-serif;

}
.metric span {
	font-size: 12px;
	color: #617789;
	display: block;
	margin-top: 5px;

}
.section { padding: 55px 52px; }
.section-title {
	font-size: 34px;
	letter-spacing: -.65px;
	margin-bottom: 15px;

}
.section-intro {
	max-width: 620px;
	font-size: 15px;
	color: #5c6f7d;
	margin-bottom: 29px;

}
.colour-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 16px;

}
.colour-card {
	border: 1px solid #d9e5ed;
	border-radius: 4px;
	overflow: hidden;

}
.colour-top {
	height: 8px;
	background: #f2dfc6;

}
.colour-card:nth-child(2) .colour-top { background: #e5eef0; }
.colour-card:nth-child(3) .colour-top { background: #bddffa; }
.colour-body { padding: 24px; }
.colour-body strong {
	display: block;
	font: 500 23px Jost,sans-serif;
	color: #2f516d;
	margin-bottom: 8px;

}
.colour-body p {
	font-size: 13px;
	color: #5e7281;
	margin: 0;

}
.caption {
	font-size: 12px;
	color: #667b8b;
	margin-top: 14px;

}
.scene {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	background: #2f516d;
	color: #dcecf7;

}
.scene img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	display: block;

}
.scene-copy {
	padding: 48px 40px;
	display: flex;
	justify-content: center;
	flex-direction: column;

}
.scene h2 {
	color: #fff;
	font-size: 35px;
	letter-spacing: -.7px;
	margin: 0 0 20px;

}
.scene p {
	font-size: 14px;
	line-height: 1.9;
	margin: 0;

}
.scene .label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .15em;
	color: #a4ddfa;
	margin-bottom: 16px;

}
.spec-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 27px;

}
.spec-head .section-title { margin: 0; }
.tag {
	font-size: 11px;
	border: 1px solid #c9dce9;
	background: #f4faff;
	color: #41627b;
	padding: 7px 12px;
	border-radius: 4px;
	white-space: nowrap;

}
.spec-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 38px;

}
.spec-row {
	display: grid;
	grid-template-columns: 42% 58%;
	padding: 14px 0;
	border-bottom: 1px solid #e3edf3;
	gap: 14px;
	font-size: 13px;

}
.spec-row dt { color: #607789; }
.spec-row dd {
	font-weight: 500;
	color: #2f516d;
	margin: 0;

}
.included {
	margin-top: 34px;
	background: #ebf6fd;
	padding: 24px 27px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	border-radius: 4px;
	font-size: 13px;
	color: #4b6679;

}
.included h3 {
	font-size: 20px;
	margin-bottom: 8px;

}
.included p { margin: 0; }
.info {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	border-top: 1px solid #dfebf3;
	gap: 30px;
	padding: 35px 52px;

}
.info h3 {
	font-size: 21px;
	margin-bottom: 13px;

}
.info p {
	font-size: 12px;
	line-height: 1.85;
	color: #5d7383;
	margin: 0;

}
.footer {
	padding: 30px 42px;
	background: #ebf6fd;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #48677d;

}
.footer .logo { width: 208px; }
.footer div {
	text-align: right;
	font-size: 12px;

}
.integration {
	font-size: 10px;
	color: #748692;
	padding: 14px 42px;
	text-align: right;

}
.store-review {
	max-width: 1200px;
	margin: 45px auto;
	background: white;

}
.store-note {
	padding: 23px 35px;
	border-bottom: 1px solid #dce7ef;
	font-size: 13px;
	color: #547087;

}
.store-hero {
	background: #2f516d;
	padding: 48px;
	display: flex;
	justify-content: space-between;
	gap: 30px;

}
.store-hero h2 {
	font-size: 40px;
	color: white;
	max-width: 520px;
	margin-bottom: 15px;

}
.store-hero p {
	color: #cee7f7;
	max-width: 600px;
	font-size: 14px;
	margin: 0;

}
.store-hero .accent { color: #83d1f9; }
.store-hero .logo-tile {
	display: flex;
	align-items: center;
	background: white;
	padding: 22px;
	border-radius: 4px;
	align-self: center;

}
.store-hero .logo { width: 260px; }
.collections {
	padding: 38px;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 16px;

}
.collection {
	padding: 25px 20px;
	background: #ebf6fd;
	border-radius: 4px;
	min-height: 128px;
	border-bottom: 3px solid #83d1f9;

}
.collection span {
	display: block;
	font-size: 11px;
	color: #587b93;
	margin-bottom: 16px;

}
.collection h3 {
	font-size: 21px;
	line-height: 1.25;

}
.store-detail {
	padding: 0 38px 35px;
	font-size: 13px;
	color: #546e81;

}
.store-detail h3 {
	font-size: 22px;
	margin: 20px 0 10px;

}
.store-detail p { margin-bottom: 8px; }
.swatches {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;

}
.swatches span {
	padding: 7px 12px;
	border: 1px solid #d5e4ed;
	border-left: 15px solid var(-swatch);
	border-radius: 4px;
	font-size: 11px;

}
a:focus-visible {
	outline: 3px solid #3eb6f4;
	outline-offset: 4px;

}
font-size:10px.listing { margin: 0; }
.masthead { padding: 23px; }
.logo { width: 230px; }
.masthead-copy { display: none; }
.trust {
	font-size: 10px;
	padding: 12px 10px;
	gap: 5px;

}
.trust b {
	display: block;
	margin: 0;

}
.jump {
	padding: 16px 23px;
	gap: 22px;
	font-size: 12px;

}
.hero {
	grid-template-columns: 1fr;
	min-height: 0;

}
.visual { padding: 26px; }
.visual img { height: 265px; }
.image-note { margin-top: 15px; }
.hero-copy { padding: 35px 26px; }
.hero h1 { font-size: 43px; }
.intro { max-width: none; }
.metrics {
	grid-template-columns: repeat(2,1fr);
	padding: 13px 16px;
	row-gap: 0;

}
.metric { padding: 15px 5px; }
.metric:nth-child(2) { border-right: 0; }
.metric strong { font-size: 25px; }
.section { padding: 36px 26px; }
.section-title { font-size: 29px; }
.colour-grid { grid-template-columns: 1fr; }
.colour-body { padding: 18px 22px; }
.scene { grid-template-columns: 1fr; }
.scene img { height: 260px; }
.scene-copy { padding: 32px 26px; }
.spec-head { display: block; }
.tag {
	display: inline-block;
	margin-top: 14px;

}
.spec-grid { grid-template-columns: 1fr; }
.spec-row {
	grid-template-columns: 40% 60%;
	font-size: 12px;
	gap: 8px;

}
.included {
	grid-template-columns: 1fr;
	padding: 23px;

}
.info {
	grid-template-columns: 1fr;
	padding: 30px 26px;
	gap: 25px;

}
.info p { font-size: 13px; }
.footer {
	display: block;
	padding: 28px 26px;

}
.footer div {
	text-align: left;
	margin-top: 20px;

}
.integration {
	padding: 14px 26px;
	text-align: left;

}
.store-review { margin: 25px 0; }
.store-hero {
	padding: 30px 26px;
	display: block;

}
.store-hero h2 { font-size: 33px; }
.store-hero .logo-tile {
	margin-top: 25px;
	display: inline-flex;

}
.store-hero .logo { width: 235px; }
.collections {
	padding: 26px;
	grid-template-columns: 1fr 1fr;
	gap: 12px;

}
.collection {
	padding: 19px 15px;
	min-height: 120px;

}
.collection h3 { font-size: 19px; }
.store-detail { padding: 0 26px 30px; }
.store-note { padding: 20px 26px; }
.warranty-mark {
	font-size: 30px;
	color: #83d1f9;
	line-height: 1;

}
.integration img {
	width: 150px;
	vertical-align: middle;
	margin-left: 5px;

}
.spec-row { grid-template-columns: minmax(0,42%) minmax(0,1fr); }