:root {
	--border-default: 2px solid var(--color-ink);
	--border-light: 2px solid var(--color-line);
	--color-accent: #ff5c35;
	--color-accent-dark: #d83b17;
	--color-accent-light: #ff7959;
	--color-accent-soft: #ff9c84;
	--color-canvas: #f4f1e9;
	--color-card: #fffdf8;
	--color-ink: #17211d;
	--color-line: #d7d2c7;
	--color-muted: #5c6861;
	--color-positive: #207c56;
	--color-positive-soft: #d7f1e4;
	--color-soft: #e5dfd2;
	--font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-heading: Georgia, "Times New Roman", serif;
	--font-weight-bold: 700;
	--radius-large: 24px;
	--radius-medium: 16px;
	--radius-round: 999px;
	--shadow-card: 12px 12px 0 var(--color-ink);
	--space-2: 2px;
	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-24: 24px;
	--space-32: 32px;
	--space-40: 40px;
	--space-48: 48px;
	--space-64: 64px;
	--space-80: 80px;
	--space-96: 96px;
	--size-chart: 144px;
	--size-shell: 1120px;
	--text-body: 16px;
	--text-display: 48px;
	--text-heading: 36px;
	--text-lead: 18px;
	--text-meta: 14px;
	--text-micro: 10px;
	--text-small: 12px;
	--text-title: 24px;
	--transition-default: 160ms ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-canvas);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: 1.6;
}

a { color: inherit; }

.shell {
	width: min(var(--size-shell), calc(100% - var(--space-32)));
	margin-inline: auto;
}

.row { display: flex; }
.row--between { justify-content: space-between; }
.row--center { align-items: center; }
.row--wrap { flex-wrap: wrap; }
.grid { display: grid; }

.skip-link {
	position: fixed;
	top: var(--space-16);
	left: var(--space-16);
	z-index: 10;
	padding: var(--space-12) var(--space-16);
	background: var(--color-ink);
	color: var(--color-card);
	transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
	padding-block: var(--space-24);
	border-bottom: var(--border-light);
}

.brand {
	gap: var(--space-12);
	font-family: var(--font-heading);
	font-size: var(--text-title);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
}

.brand__mark {
	display: grid;
	width: var(--space-40);
	height: var(--space-40);
	place-items: center;
	border-radius: var(--radius-round);
	background: var(--color-accent);
	color: var(--color-card);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
	min-height: var(--space-48);
	padding: var(--space-12) var(--space-24);
	border: var(--border-default);
	border-radius: var(--radius-round);
	background: var(--color-accent);
	box-shadow: 4px 4px 0 var(--color-ink);
	color: var(--color-ink);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	transition: transform var(--transition-default), box-shadow var(--transition-default), background var(--transition-default);
}

.button:hover { background: var(--color-accent-light); }
.button:hover, .button:focus-visible { box-shadow: 2px 2px 0 var(--color-ink); transform: translate(2px, 2px); }
.button:focus-visible, .text-link:focus-visible, .brand:focus-visible { outline: 4px solid var(--color-accent-dark); outline-offset: var(--space-4); }
.button--small { min-height: var(--space-40); padding: var(--space-8) var(--space-16); font-size: var(--text-meta); }
.button--light { background: var(--color-card); }
.button__icon { font-size: var(--text-title); line-height: 1; }

.hero { padding-block: var(--space-64) var(--space-80); overflow: hidden; }
.hero__layout { gap: var(--space-64); }
.hero__content { align-self: center; }

.eyebrow {
	margin: 0 0 var(--space-16);
	color: var(--color-accent-dark);
	font-size: var(--text-small);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--space-2);
	text-transform: uppercase;
}

h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.08; }
h1 { margin: 0; font-size: var(--text-display); letter-spacing: -2px; }
h1 span { color: var(--color-accent-dark); font-style: italic; }
h2 { margin: 0; font-size: var(--text-heading); }
h3 { margin: 0 0 var(--space-12); font-size: var(--text-title); }

.hero__lead { max-width: 640px; margin: var(--space-24) 0; color: var(--color-muted); font-size: var(--text-lead); }
.hero__actions { align-items: center; gap: var(--space-24); }
.hero__note { margin: var(--space-24) 0 0; color: var(--color-muted); font-size: var(--text-meta); }
.text-link { font-weight: var(--font-weight-bold); text-underline-offset: var(--space-4); }

.report-card {
	align-self: center;
	border: var(--border-default);
	border-radius: var(--radius-large);
	background: var(--color-card);
	box-shadow: var(--shadow-card);
	transform: rotate(2deg);
}

.report-card__top { padding: var(--space-12) var(--space-16); border-bottom: var(--border-light); font-size: var(--text-small); }
.window-dots { gap: var(--space-8); }
.window-dots i { width: var(--space-8); height: var(--space-8); border-radius: var(--radius-round); background: var(--color-soft); }
.window-dots i:first-child { background: var(--color-accent); }
.report-card__body { padding: var(--space-24); }
.report-card__heading small, .report-card__heading strong { display: block; }
.report-card__heading small { color: var(--color-muted); font-size: var(--text-micro); letter-spacing: var(--space-2); }
.report-card__heading strong { margin-top: var(--space-4); font-family: var(--font-heading); font-size: var(--text-title); }
.status { padding: var(--space-4) var(--space-12); border-radius: var(--radius-round); background: var(--color-positive-soft); color: var(--color-positive); font-size: var(--text-small); font-weight: var(--font-weight-bold); }
.metric-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); margin-block: var(--space-24); }
.metric-grid div { padding: var(--space-16); border-radius: var(--radius-medium); background: var(--color-canvas); }
.metric-grid span, .metric-grid strong { display: block; }
.metric-grid span { color: var(--color-muted); font-size: var(--text-small); }
.metric-grid strong { font-family: var(--font-heading); font-size: var(--text-heading); }

.chart { display: flex; align-items: end; gap: var(--space-12); height: var(--size-chart); padding: var(--space-16); border-bottom: var(--border-light); background-image: linear-gradient(var(--color-soft) var(--space-2), transparent var(--space-2)); background-size: 100% var(--space-48); }
.chart__bar { flex: 1; border: var(--border-default); border-bottom: 0; border-radius: var(--space-8) var(--space-8) 0 0; background: var(--color-accent); }
.chart__bar--one { height: 48%; }
.chart__bar--two { height: 72%; }
.chart__bar--three { height: 58%; }
.chart__bar--four { height: 88%; }
.chart__bar--five { height: 68%; }
.export-row { padding-top: var(--space-16); color: var(--color-muted); font-size: var(--text-meta); }
.file-types { gap: var(--space-8); }
.file-types b { display: grid; width: var(--space-32); height: var(--space-32); place-items: center; border-radius: var(--space-8); background: var(--color-ink); color: var(--color-card); font-size: var(--text-small); }

.features { padding-block: var(--space-80); background: var(--color-card); border-block: var(--border-light); }
.features__grid { gap: var(--space-16); margin-top: var(--space-40); }
.feature-card { padding: var(--space-24); border: var(--border-light); border-radius: var(--radius-medium); background: var(--color-card); }
.feature-card__number { display: block; margin-bottom: var(--space-40); color: var(--color-accent-dark); font-size: var(--text-small); font-weight: var(--font-weight-bold); letter-spacing: var(--space-2); }
.feature-card p { margin: 0; color: var(--color-muted); }

.download { padding-block: var(--space-80); }
.download__panel { gap: var(--space-32); padding: var(--space-40); border-radius: var(--radius-large); background: var(--color-ink); color: var(--color-card); }
.download__panel .eyebrow { color: var(--color-accent-soft); }
.download__panel p:last-child { margin-bottom: 0; color: var(--color-soft); }
.site-footer { padding-block: var(--space-32); border-top: var(--border-light); color: var(--color-muted); font-size: var(--text-meta); }
.site-footer p { margin: 0; }

@media (min-width: 768px) {
	:root { --text-display: 64px; --text-heading: 48px; }
	.hero__layout { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); }
	.features__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.button { transition: none; }
}