:root {
	--base-bg: #FFF;
	--base-text: rgb(17, 17, 17);
	--base-border: rgba(17, 17, 17, 0.15);
	
	--wf-yellow: rgb(222.69, 165.69, 0);
	--wf-yellow-bg: rgba(246.12, 236.52, 212.95);
	
	--system-background: rgb(242, 242, 247);
	--app-background: rgb(242, 242, 247);
}

@media (prefers-color-scheme: dark) {
	:root {
		--base-bg: #000;
		--base-text: #FFF;
		--base-border: rgba(255, 255, 255, 0.2);
		
		--wf-yellow: rgba(240.43, 178.48, 0);
		--wf-yellow-bg: #3A3000;
		
		--system-background: rgb(28, 28, 30);
		--app-background: rgb(0, 0, 0);
	}
}

html {
	padding: 0;
	margin: 0;
	background-color: var(--system-background);
	color: var(--base-text);
	
	&.app {
		background-color: var(--app-background);
	}
	
	&.iphone, &.phone {
		--app-background: #F2F2F2;
		
		@media (prefers-color-scheme: dark) {
			--app-background: rgb(0, 0, 0);
		}
	}
	
	&.mac {
		--app-background: rgb(236, 236, 236);
		
		@media (prefers-color-scheme: dark) {
			--app-background: rgb(30, 30, 30);
		}
		
		.tutorial {
			max-width: 450px;
		}
	}
	
	&.onboarding {
		background-color: var(--base-bg);
	}
	
	&.alert {
		transition: background 0.2s linear;
		background-color: rgba(255, 58, 48, 0.25);
		
		@media (prefers-color-scheme: dark) {
			background-color: rgba(71, 37, 36, 1.0);
		}
	}
}

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	padding: 0;
	margin: 0;
}

.hero {
	text-align: center;
	margin: 0 auto;
	padding: 38px 0;
	
	display: flex;
	align-items: center;
	gap: 18px 20px;
	justify-content: center;
	flex-wrap: wrap;
	
	background-color: var(--wf-yellow-bg);
	
	div {
		flex-grow: 1;
		max-width: 420px;
	}
	
	.text {
		padding: 0 28px;
		
		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12px;
			
			img {
				height: 70px;
			}
			
			h1 {
				color: var(--wf-yellow);
				font-size: 60px;
				margin: 0;
				display: inline;
			}
		}
		
		span {
			display: block;
			margin: 24px 0;
			font-size: 24px;
		}
		
		a img {
			height: 60px;
		}
	}
	
	.collage {
		max-width: 476px;
		
		img {
			max-width: 100%;
		}
	}
}

.highlights {
	margin: 0 auto;
	padding: 63px 28px;
	
	display: flex;
	gap: 56px 36px;
	justify-content: space-around;
	flex-wrap: wrap;
	
	max-width: 900px;
	
	div.highlight {
		flex-basis: 370px;
		flex-grow: 1;
		max-width: 600px;
		gap: 10px;
		
		.title {
			display: flex;
			align-items: center;
			gap: 10px;
		}
		
		img {
			height: 32px;
			
			&.badge {
				height: 25px;
				background-color: var(--wf-yellow);
				padding: 5px;
				border-radius: 7px;
			}
		}
		
		h3 {
			color: var(--wf-yellow);
			font-weight: 700;
			margin: 0;
			font-size: 22px;
		}
		
		p {
			opacity: 0.6;
			font-size: 17px;
			line-height: 1.5;
			
			@media (prefers-color-scheme: dark) {
				opacity: 0.8;
			}
		}
	}
}

.download {
	margin: 0 auto 63px;
	text-align: center;
	max-width: 450px;
	
	&.footer {
		background-color: #222;
	}
	
	a img {
		display: block;
		margin: 0 auto 20px;
		height: 70px;
		max-width: 90%;
	}
	
	span {
		display: block;
		padding: 0 24px;
		text-align: center;
		font-size: 17px;
		opacity: 0.6;
		
		strong {
			font-weight: 800;
		}
		
		a {
			font-weight: 800;
			text-decoration: none;
			border-bottom: 1px solid;
			color: inherit;
		}
	}
}

footer {
	padding: 42px 0;
	border-top: 1px solid var(--base-border);
	
	display: flex;
	margin: 0 28px;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 28px 42px;
	
	&.plain {
		justify-content: center;
		border-top: none;
	}
	
	a {
		color: inherit;
		text-decoration: none;
		
		&:hover {
			color: var(--wf-yellow);
			
			span {
				opacity: 1;
			}
			
			svg {
				opacity: 1;
				
				path {
					stroke: var(--wf-yellow);
					
					&.fg {
						fill: var(--wf-yellow);
					}
				}
			}
		}
	}
	
	.signature {
		font-size: 18px;
		
		display: flex;
		align-items: center;
		gap: 10px;
		
		@media (prefers-color-scheme: dark) {
			opacity: 0.9;
		}
		
		span {
			opacity: 0.7;
		}
		
		strong {
			font-weight: 800;
		}
		
		img, svg {
			height: 30px;
			width: 30px;
			opacity: 0.7;
			
			@media (prefers-color-scheme: dark) {
				filter: invert(100%) hue-rotate(180deg);
				opacity: 0.6;
			}
		}
	}
	
	.links {
		display: flex;
		align-items: center;
		gap: 30px;
		flex-wrap: wrap;
		
		a {
			color: var(--base-text);
			opacity: 0.6;
			text-decoration: none;
			
			&:hover {
				opacity: 0.9;
			}
		}
	}
}

/* Disable text selection on images that are links
   https://lapcatsoftware.com/articles/2025/11/2.html */
a > img { pointer-events: none; }
a:has(> img) { display: inline-block; }