:root {
	--tintColour: #007AFF;
    --inset-section-max-width: 1024px;
    --inset-section-horizontal-padding: 32px;

    --header-filter: saturate(180%) blur(20px);
    --header-filter-background-colour: rgba(29, 29, 31, 0.7);

    --icon-size: 15em;
    --icon-size-small: 10em;

    --icon-title-top-margin: -1em;
    --icon-title-top-margin-small: -0.8em;

    --feature-font-size: 1.7em;
    --feature-line-height: 1.5em;
    --feature-font-size-small: 1.2em;
    --feature-border-radius: 20px;
    --feature-border-radius-small: 12px;
}

html {
	background-color: #000;
}

body {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;
	margin: 0;
	padding-bottom: env(safe-area-inset-bottom);
	color: white;
}

/* Headings */
h2 {
	font-size: 4em;
	font-weight: 600;
	letter-spacing: -.015em;
	margin: 0 0 0.2em 0;
}
h3.copy-block-subhead {
	font-size: var(--feature-font-size);
	line-height: var(--feature-line-height);
	font-weight: inherit;
	letter-spacing: inherit;
}

/* Typography */
p {
	color: white;
	opacity: 0.55;
}
.icon-title {
	font-size: 3.5em;
	font-weight: 650;
    color: white;
    opacity: 1;
    margin: var(--icon-title-top-margin) 0 0 0;
}
.hero-tagline {
	opacity: 1;
	font-size: 3em;
	font-weight: 600;
	letter-spacing: .01em;
    max-width: var(--inset-section-max-width);
    margin: 1em auto 1.5em auto;
	text-align: center;
}
@supports ((-webkit-backdrop-filter: var(--header-filter)) or (backdrop-filter: var(--header-filter))) {
	.hero-tagline {
		background: linear-gradient(75deg, #24DE71, #0BFEBB);
		background-clip: text;
	    color: transparent;
	}
	.highlight-one {
		background: linear-gradient(45deg, #D433FF, #AF50FF, #9960FF);
		background-clip: text;
	    color: transparent;
	}
	.highlight-two {
		background: linear-gradient(45deg, rgb(255, 69, 58), rgb(255, 159, 10), rgb(255, 214, 10));
		background-clip: text;
	    color: transparent;
	}
	.highlight-three {
		background: linear-gradient(45deg, #0055FF, #008AFF, #00EFFF);
		background-clip: text;
	    color: transparent;
	}
}
.copy-block-subhead {
    display: inline
}
.copy-block-body {
	font-size: var(--feature-font-size);
	line-height: var(--feature-line-height);
    display: inline;
}

/* Fixed Header */
.fixed-header {
	position: fixed;
	z-index: 1000;
	top: 0;
	width: 100%;
	padding: none;
	margin: none;
	border: none;
	border-bottom: 1px solid;
	border-color: #333;
	color: white;
	background-color: black;
	overflow: hidden;
}
.header-wrapper {
	max-width: var(--inset-section-max-width);
	margin: auto;
	padding: 1.1em 24px;
}
.header-wrapper h1 {
	font-size: 1.3em;
	font-weight: 600;
	display: inline;
	vertical-align: bottom;
}
.header-wrapper .header-download {
	font-size: 0.8em;
	border-radius: 500px;
	background-color: var(--tintColour);
	float: right;
	padding: 0.5em 1em;
}
@supports ((-webkit-backdrop-filter: var(--header-filter)) or (backdrop-filter: var(--header-filter))) {
	.fixed-header {
		-webkit-backdrop-filter: var(--header-filter);
		backdrop-filter: var(--header-filter);
		background-color: var(--header-filter-background-colour);
	}
}

/* Hero Section */
#hero-container {
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5em;
    text-align: center;
    max-width: var(--inset-section-max-width);
	padding: 0px var(--inset-section-horizontal-padding);
}
#hero-container img {
	width: var(--icon-size);
    height: var(--icon-size);
	padding: 3.5em;
	background: radial-gradient(closest-side, #3061D9, #3061D900);
}

/* Intro Section */
#intro-container {
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5em;
    max-width: var(--inset-section-max-width);
	padding: 0px var(--inset-section-horizontal-padding);
}
#intro-container p {
	font-size: 2em;
	font-weight: 600;
	line-height: 1.4em;
	color: white;
	opacity: 1;
}

/* Features */
.features {
	max-width: var(--inset-section-max-width);
	padding: 0px var(--inset-section-horizontal-padding);
	margin: auto;
}
.feature-section {
	background-color: #ffffff24;
	border-radius: var(--feature-border-radius);
	margin: 0 0 3em 0;
	overflow: hidden;
}
.feature-section-text {
	padding: 2em;
}
#feature-media-container {
	aspect-ratio: 16 / 9;
}
#feature-media-container video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#feature-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.download {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Footer */
.footer {
	text-align: center;
	font-size: 0.8em;
	margin: 4em 0;
}

/* Links */
a:link, a:visited, a:hover, a:active {
	color: inherit;
	text-decoration: none;
}

@media only screen and (max-width: 734px) {
	h2 {
		font-size: 2.5em;
	}
	h3.copy-block-subhead {
		font-size: var(--feature-font-size-small);
		font-weight: inherit;
		letter-spacing: inherit;
	}
	p.copy-block-body {
		font-size: var(--feature-font-size-small);
		display: inline;
	}
	.icon-title {
		margin-top: var(--icon-title-top-margin-small);
	}
	#hero-container img {
		width: var(--icon-size-small);
    	height: var(--icon-size-small);
	}
	.feature-section {
		border-radius: var(--feature-border-radius-small);
	}
	.feature-section-text {
		padding: 1.2em 1.4em;
	}
}