* {
	box-sizing: border-box;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin: 0;
	padding: 1.5rem;
	background-color: #e7f0f3;
	color: #2b3a45;
	font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.875rem;
	line-height: 1.5;
}

.card {
	width: 100%;
	min-width: 0;
	max-width: 28rem;
	overflow: hidden;
	background-color: #fff;
	border: 1.5px solid rgba(43, 58, 69, 0.07);
	border-radius: 22px;
}

.mark {
	padding: 1.75rem 1.75rem 1.5rem;
}

.mark svg {
	display: block;
	width: 64px;
	height: 64px;
}

.stripe {
	display: flex;
	width: 100%;
	height: 4px;
}

.band {
	flex: 1;
}

.band-cyan {
	background-color: #3fbedc;
}

.band-green {
	background-color: #3fb89a;
}

.band-amber {
	background-color: #f5a623;
}

.band-raspberry {
	background-color: #e8417a;
}

.content {
	min-width: 0;
	padding: 1.75rem;
	overflow-wrap: anywhere;
}

.eyebrow {
	margin: 0 0 0.75rem;
	color: #6e8290;
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
	font-size: 0.7875rem;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

.title {
	margin: 0 0 0.75rem;
	color: #2b3a45;
	font-family: "Bricolage Grotesque Variable", system-ui, sans-serif;
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.15;
}

.text {
	margin: 0 0 1.5rem;
	color: #4e6673;
	font-size: 0.875rem;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.875rem 1.5rem;
	background-color: #1f8fa8;
	border-radius: 999px;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.25s;
}

.button[hidden] {
	display: none;
}

.button:hover {
	background-color: #15697d;
}

.button:focus-visible {
	outline: 2px solid #1f8fa8;
	outline-offset: 3px;
}

.note {
	margin: 1.5rem 0 0;
	color: #8a9197;
	font-size: 0.75rem;
}

@media (max-width: 480px) {
	.button {
		display: flex;
		width: 100%;
	}
}