.landing-shaft-database__hero {
	background:
		radial-gradient(circle at 82% 18%, rgba(203, 234, 69, .2), transparent 28rem),
		linear-gradient(135deg, #062f33 0%, #12383a 58%, #0a2528 100%);
}

.landing-design-guide {
	background: #f7f5ef;
	border-bottom: 1px solid rgba(6, 47, 51, .13);
	padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.landing-design-guide__heading {
	display: grid;
	gap: .5rem;
	margin-bottom: 1.5rem;
	max-width: 54rem;
}

.landing-design-guide__heading h2 {
	color: #062f33;
	font-size: clamp(1.7rem, 4vw, 2.8rem);
	line-height: 1.18;
	margin: 0;
}

.landing-design-guide__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-design-guide__grid article {
	background: #fff;
	border: 1px solid rgba(6, 47, 51, .12);
	border-radius: 1rem;
	box-shadow: 0 .8rem 2rem rgba(6, 47, 51, .06);
	padding: 1.25rem;
}

.landing-design-guide__grid span {
	align-items: center;
	background: #cbea45;
	border-radius: 999px;
	color: #062f33;
	display: inline-flex;
	font-size: .75rem;
	font-weight: 800;
	height: 2rem;
	justify-content: center;
	width: 2rem;
}

.landing-design-guide__grid h3 {
	color: #062f33;
	font-size: 1.05rem;
	margin: .9rem 0 .45rem;
}

.landing-design-guide__grid p,
.landing-design-guide__note {
	color: #40595b;
	font-size: .9rem;
	line-height: 1.75;
	margin: 0;
}

.landing-design-guide__note {
	background: rgba(24, 183, 177, .08);
	border-left: .25rem solid #18b7b1;
	margin-top: 1rem;
	padding: .8rem 1rem;
}

.landing-shaft-database .rod-view-nav {
	overflow-x: auto;
	scrollbar-width: thin;
	white-space: nowrap;
}

.landing-shaft-table th,
.landing-shaft-table td {
	white-space: nowrap;
}

.landing-status {
	background: #dff5ef;
	border-radius: 999px;
	color: #075f54;
	display: inline-flex;
	font-size: .72rem;
	font-weight: 800;
	padding: .25rem .55rem;
}

.landing-status--announced {
	background: #fff0c2;
	color: #7b5300;
}

.landing-comparison-notes {
	background: #f7f5ef;
	border: 1px solid rgba(6, 47, 51, .13);
	border-radius: 1rem;
	margin: 1.5rem 0;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.landing-comparison-notes h3 {
	color: #062f33;
	margin: .25rem 0 1rem;
}

.landing-comparison-notes [data-comparison-concepts] {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-comparison-notes article {
	background: #fff;
	border-radius: .8rem;
	padding: 1rem;
}

.landing-comparison-notes article > p {
	color: #16827e;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .08em;
	margin: 0 0 .25rem;
	text-transform: uppercase;
}

.landing-comparison-notes h4 {
	color: #062f33;
	font-size: 1.05rem;
	margin: 0 0 .65rem;
}

.landing-comparison-notes article > div {
	color: #40595b;
	font-size: .9rem;
	line-height: 1.75;
}

.landing-comparison-notes ul {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
	margin: .8rem 0 0;
	padding: 0;
}

.landing-comparison-notes li {
	background: #e7f7f5;
	border-radius: 999px;
	color: #075f54;
	font-size: .72rem;
	font-weight: 700;
	padding: .28rem .55rem;
}

@media (max-width: 900px) {
	.landing-design-guide__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.landing-design-guide__grid,
	.landing-comparison-notes [data-comparison-concepts] {
		grid-template-columns: 1fr;
	}

	.landing-shaft-database .rod-view-nav {
		justify-content: flex-start;
		padding-bottom: .35rem;
	}
}