/* Windows 95 look, same tokens as the app (apps/web/src/index.css). Text pairs keep WCAG AA contrast. */
:root {
	--desktop: #008080;
	--face: #c0c0c0;
	--light: #dfdfdf;
	--highlight: #ffffff;
	--shadow: #808080;
	--dark: #000000;
	--title: #000080;
	--title-end: #1084d0;
	--raised:
		inset -2px -2px 0 var(--dark), inset 2px 2px 0 var(--light),
		inset -4px -4px 0 var(--shadow), inset 4px 4px 0 var(--highlight);
	--sunken:
		inset 2px 2px 0 var(--shadow), inset -2px -2px 0 var(--highlight),
		inset 4px 4px 0 var(--dark), inset -4px -4px 0 var(--light);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--desktop);
	color: #000000;
	font:
		1rem / 1.5 Tahoma,
		"Segoe UI",
		Arial,
		sans-serif;
}

main {
	flex: 1;
	width: 100%;
	max-width: 68rem;
	margin: 0 auto;
	padding: 1rem;
	display: grid;
	gap: 1.25rem;
}

h1,
h2,
h3,
p,
figure,
ul {
	margin: 0;
}

.window {
	padding: 6px;
	background: var(--face);
	box-shadow:
		var(--raised),
		3px 3px 0 var(--dark);
}

.titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 2px 3px 2px 6px;
	background: linear-gradient(90deg, var(--title), var(--title-end));
	color: #ffffff;
	font-weight: 700;
	font-size: 0.9375rem;
}

.controls {
	display: flex;
	gap: 2px;
}

.controls b {
	width: 1.25rem;
	height: 1.125rem;
	display: grid;
	place-items: center;
	background: var(--face);
	color: #000000;
	font-size: 0.75rem;
	line-height: 1;
	box-shadow:
		inset -1px -1px 0 var(--dark),
		inset 1px 1px 0 var(--highlight),
		inset -2px -2px 0 var(--shadow);
}

.body {
	padding: 1rem;
	display: grid;
	gap: 0.75rem;
}

.hero h1 {
	font-size: clamp(2.5rem, 8vw, 4rem);
	line-height: 1.1;
}

.pitch {
	font-size: clamp(1.25rem, 3.5vw, 1.625rem);
	font-weight: 700;
	max-width: 36rem;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-top: 0.25rem;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	background: var(--face);
	color: #000000;
	font-size: 1.0625rem;
	text-decoration: none;
	box-shadow: var(--raised);
}

.button:active {
	box-shadow: var(--sunken);
}

.button.primary {
	background: var(--title);
	color: #ffffff;
	font-weight: 700;
	outline: 2px solid var(--dark);
}

a:focus-visible {
	outline: 2px dotted currentColor;
	outline-offset: -7px;
}

.button.primary:focus-visible {
	outline: 2px dotted #ffffff;
}

.shots {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 48rem) {
	/* Equal image heights: 1280x800 next to 600x1000 is 8:3 in width. */
	.shots {
		grid-template-columns: 8fr 3fr;
	}
}

.shots .body {
	padding: 0.5rem;
}

.well {
	display: block;
	width: 100%;
	height: auto;
	padding: 4px;
	background: var(--face);
	box-shadow: var(--sunken);
}

figcaption {
	font-size: 0.9375rem;
	padding: 0 0.25rem;
}

.features {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.panel {
	padding: 0.875rem 1rem 1rem;
	background: #ffffff;
	box-shadow: var(--sunken);
	display: grid;
	gap: 0.375rem;
	align-content: start;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.125rem;
}

.doc {
	max-width: 46rem;
}

.doc h2 {
	font-size: 1.25rem;
	padding-top: 0.5rem;
}

.taskbar {
	padding: 0.625rem 1rem;
	background: var(--face);
	box-shadow:
		inset 0 2px 0 var(--highlight),
		inset 0 1px 0 var(--light);
	font-size: 0.9375rem;
	text-align: center;
}