.oto-logo {
	height: 30%;
	width: 30%;
	margin: 0 auto;
}

.card h2 {
	margin: 0 0 6px;
	font-size: 18px;
	letter-spacing: -0.01em;
}

.card p {
	margin: 0 0 12px;
	color: var(--muted);
	line-height: 1.55;
}

.bullets {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 6px;
}

.status {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--muted);
	font-size: 13px;
}

.dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: oklch(0.65 0.18 145);
	box-shadow: 0 0 0 4px
		color-mix(in oklch, oklch(0.65 0.18 145) 20%, transparent);
}

.socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: color-mix(in oklch, var(--card) 70%, transparent);
	text-decoration: none;
	color: var(--ink);
	transition:
		transform 120ms ease,
		border-color 120ms ease;
}

.pill:hover {
	transform: translateY(-1px);
	border-color: color-mix(in oklch, var(--border) 55%, var(--link) 45%);
}

.pill span {
	font-size: 14px;
	font-weight: 560;
}

.footer {
	margin-top: 26px;
	color: var(--muted);
	font-size: 12px;
	text-align: center;
}

/* Responsive polish */
@media (min-width: 820px) {
	.grid {
		gap: 20px;
	}
	.card {
		padding: 20px 22px;
	}
}