/* Landing page, copied from www.pv.com (Figma Sites). Desktop frame 1280px wide, mobile frame
   375px wide; both at least 1080px tall. Positions are the Figma frame's own percentages. */

@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 400;
	font-style: normal;
	font-display: block;
	src: url('../fonts/SourceSansPro-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 600;
	font-style: normal;
	font-display: block;
	src: url('../fonts/SourceSansPro-SemiBold.woff2') format('woff2');
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	font-synthesis: none;
	width: 100%;
}

body {
	margin: 0;
	width: 100%;
	overflow-x: hidden;
	background-color: #fff;
	font-family: 'Source Sans Pro', sans-serif;
}

p {
	margin: 0;
}

.landing {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 100vh;
	overflow: clip;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 375 1080' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.1556e-14 323.4 -112.29 5.4298e-14 187.5 540)'><stop stop-color='rgba(3,38,29,1)' offset='0.14423'/><stop stop-color='rgba(2,19,15,1)' offset='0.57212'/><stop stop-color='rgba(1,10,7,1)' offset='0.78606'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>");
}

/* Fills the space above the legal line and centres the logo and tagline in it. */
.landing-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Fixed size at each breakpoint: the logo never scales or stretches. */
.landing-logo {
	display: block;
	flex: none;
}

.landing-logo img {
	display: block;
	width: 222px;
	height: 155px;
	max-width: none;
}

/* Mobile shows only the "coming soon" line under the logo. */
.landing-tagline {
	margin-top: 24px;
	color: #c6c2b5;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 2.8px;
	line-height: 1.8em;
	text-align: center;
	text-transform: uppercase;
	--letter-spacing: 2.8px;
}

.landing-legal {
	display: block;
	padding-top: 24px;
	padding-bottom: 24px;
	color: rgba(255, 255, 255, 0.3);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 1.2px;
	line-height: normal;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Figma trims the letter spacing after the last character. */
.landing-tagline::after,
.landing-legal::after {
	content: '';
	margin-left: calc(var(--letter-spacing) * -1);
}

.landing-legal {
	--letter-spacing: 1.2px;
}

@media (min-width: 1280px) {
	.landing {
		min-width: 1280px;
		background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1280 1080' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(3.9444e-14 323.4 -383.29 5.4298e-14 640 540)'><stop stop-color='rgba(3,38,29,1)' offset='0.14423'/><stop stop-color='rgba(2,19,15,1)' offset='0.57212'/><stop stop-color='rgba(1,10,7,1)' offset='0.78606'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>");
	}

	.landing-logo img {
		width: 393px;
		height: 275px;
	}

	.landing-tagline {
		width: 863px;
		margin-top: 52px;
		font-size: 28px;
		letter-spacing: 5.6px;
		white-space: normal;
		--letter-spacing: 5.6px;
	}

	.landing-tagline-intro {
		display: inline;
	}

	.landing-legal {
		padding-top: 48px;
		padding-bottom: 48px;
		font-size: 18px;
		letter-spacing: 1.8px;
		--letter-spacing: 1.8px;
	}
}