:root {
	--green-50: #f1ffeb;
	--green-300: #37ba72;
	--green-600: #177343;
	--green-900: #002911;

	/* light mode */
	--bg: var(--green-50);
	--card-bg: #ffffff;
	--text-main: #000000;
	--text-muted: #1f2933;
	--accent: var(--green-600);
	--border: rgba(23, 115, 67, 0.2);
	--error-text: #cb1313;
	--error-icon: hsl(0, 63%, 41%);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0b120f;
		--card-bg: #e4f5da;
		--text-main: #002911;
		--text-muted: #177343;
		--accent: #177343;
		--border: rgba(23, 115, 67, 0.25);
		--error-icon: hsl(0, 70%, 22%);
		--error-text: #920101;
	}
}

html,
body {
	-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
	background: var(--bg);
	color: var(--text-main);
	font-family: 'sofia-pro-variable', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-kerning: normal;
	font-optical-sizing: auto;
    font-variation-settings: "slnt" 0, "ital" 0;
	font-style: normal;
	margin: 0;
	min-height: 100vh;
	padding: 0;
}

@media (max-width: 600px) {

	html,
	body {
		font-size: 90%;
	}
}

.wrapper {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	box-sizing: border-box;
}

.card {
	width: 100%;
	max-width: 640px;
	background: var(--card-bg);
	border-radius: 36px;
	padding: 36px;
	box-sizing: border-box;
}

.logo {
	height: 28px;
	max-width: 100%;
	display: block;
	margin-bottom: 32px;
}

.status {
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--accent);
	margin-bottom: 8px;
}

h1 {
	margin: 0 0 16px;
	font-size: 32px;
	font-weight: 600;
}

p {
	margin: 0 0 32px;
	line-height: 1.6;
	color: var(--text-muted);
}

.explanation {
	width: 100%;
	margin-left: -36px;
	margin-right: -36px;
	padding: 28px 36px;
	/* tuned green-tinted band: slightly darker than card, lighter than page bg */
	background: rgba(55, 186, 88, 0.12);
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-bottom: 32px;
}

@media (prefers-color-scheme: dark) {
	.explanation {
		background: rgba(23, 115, 67, 0.14);
	}
}

.info {
	margin-left: -36px;
	margin-right: -36px;
	padding: 24px 36px;
	background: rgba(55, 186, 88, 0.12);
	margin-bottom: 32px;
}

@media (prefers-color-scheme: dark) {
	.info {
		background: rgba(23, 115, 67, 0.14);
	}
}

.info strong {
	display: block;
	margin-bottom: 6px;
	color: var(--text-main);
}

.row {
	display: grid;
	grid-template-columns: 48px auto 1fr;
	align-items: center;
	column-gap: 24px;
}

.row .left {
	display: flex;
	align-items: center;
	gap: 20px;
}

.row .right {
	max-width: 420px;
}

.icon {
	width: 48px;
	height: 48px;
	color: var(--text-main);
	flex-shrink: 0;
}

/* force inline SVGs to inherit text color without modifying markup */
.icon * {
	fill: currentColor !important;
}

/* force inline SVGs to inherit color without modifying markup */
.icon * {
	fill: currentColor !important;
}

.arrow {
	font-size: 22px;
	text-align: center;
	color: var(--text-muted);
	width: 24px;
}

.desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-muted);
}

.row.highlight .desc strong {
	color: var(--text-main);
}

.row.highlight .desc strong {
	color: var(--error-icon);
}

.row.highlight .desc {
	color: var(--error-text);
}

.row.highlight .icon,
.row.highlight .arrow {
	color: var(--error-icon);
}

.desc strong {
	display: block;
	color: var(--text-main);
	margin-bottom: 4px;
}

.what-to-do {
	margin-bottom: 24px;
}

.what-to-do strong {
	display: block;
	margin-bottom: 8px;
}

.what-to-do ul {
	margin: 0;
	padding-left: 18px;
	list-style-type: square;
}

.what-to-do li {
	margin-bottom: 6px;
	color: var(--text-muted);
}

.what-to-do li::marker {
	color: var(--text-muted);
}

.meta {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
	font-size: 13px;
	color: var(--accent);
	word-break: break-word;
}

@media (max-width: 480px) {
	.card {
		padding: 32px;
	}

	h1 {
		font-size: 26px;
	}
}