/* 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 {
	position: relative;
	display: block;
	width: 100%;
	min-width: 375px;
	height: max(100vh, 1080px);
	height: max(100dvh, 1080px);
	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>");
}

.landing-logo {
	position: absolute;
	display: block;
	left: 20.53%;
	right: 20.27%;
	top: 42.78%;
	bottom: 42.83%;
}

.landing-logo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.landing-tagline {
	display: none;
}

.landing-legal {
	position: absolute;
	display: block;
	width: 286px;
	height: 45px;
	left: calc(50% - 142.5px);
	bottom: 67px;
	transform: translateY(100%);
	color: rgba(255, 255, 255, 0.3);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 1.2px;
	line-height: normal;
	text-transform: uppercase;
	word-break: break-word;
}

/* 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 {
		left: 34.61%;
		right: 34.69%;
		top: 31.09%;
		bottom: 43.43%;
	}

	.landing-tagline {
		position: absolute;
		display: block;
		width: 863px;
		left: calc(50% + 0.5px);
		top: 61.39%;
		bottom: 35%;
		transform: translateX(-50%);
		color: #c6c2b5;
		font-weight: 600;
		font-size: 28px;
		letter-spacing: 5.6px;
		line-height: normal;
		text-align: center;
		text-transform: uppercase;
		word-break: break-word;
		--letter-spacing: 5.6px;
	}

	.landing-legal {
		width: 323px;
		height: 69px;
		left: calc(50% - 161px);
		bottom: 90px;
		font-size: 18px;
		letter-spacing: 1.8px;
		--letter-spacing: 1.8px;
	}
}