:root {
	--mask-fade-bottom: linear-gradient(to bottom,
		black 0%, black 95%, transparent 100%
	);
	--page-background: rgb(0, 54, 28);
	--header-background: rgba(29, 29, 40, 0.5);
	--button-color: #337a2a;
	--button-hover-color: #3c8e31;
	--link-color: #4AAD3C;
	--link-hover-color: #5ad84a;
}

#features, #protools {
	background-color: rgba(255,255,255,0.07);
}

#importing .grid {
	max-width: 48em;
	margin-left: auto;
	margin-right: auto;
}

.screenshot {
	display: inline-flex;
	position: relative;
	flex-direction: column;
	overflow: hidden;
}

.screenshot img {
	border: none;
	border: white 6px solid;
	border-radius: 3vw;
	width: 100%;
}

.screenshot .caption {
	font-size: 90%;
	line-height: 1.3;
	margin-top: 0.75em;
	text-wrap: balance;
}

img.screenclip {
	border-radius: 1em;
	max-height: 18em;
}
img.screenclip + img { margin-left: 1em; }

.hero-copy {
	padding: 0 2em;
}

.hero-image .screenshot {
	max-width: 35vw;
	height: 30em;
	mask-image: var(--mask-fade-bottom);
	overflow: hidden;
}

.animated {
	opacity: 0.5;
	transform: translateY(2em);
	transition: all .5s ease-out .5s;
}
.animated.visible {
	opacity: 1;
	transform: translateY(0);
}

#hero .grid > * {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
#features .grid + .grid { margin-top: 1.5em; }
#features .grid p { margin-bottom: 0.25em; }

@media (max-width: 576px) {
	.hero-image .screenshot {
		max-width: 75vw;
	}
	.screenshot img {
		border-radius: 5vw;
	}
}