/* Home-specific release asset. Avoids mixed HTML/global-CSS cache versions.
   Replaces home-v3.css, which defined the prediction demo twice — a boxed
   treatment at the top and an editorial one at the bottom that overrode it.
   Only the resolved result is kept here, and the unused .route-cards block
   from the retired routes section is gone. */

/* ---- Primary call to action -------------------------------------------- */
/* One action leads on this page: installing. It is a filled accent button with
   the qualifier set beneath the label rather than in a sentence beside it, so
   the thing you click and the thing that reassures you are one target. */
.btn-lead {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 13px 24px;
	border-color: var(--accent);
	background: var(--accent);
	color: #14100a;
}
.btn-lead:hover {
	background: #eccb8d;
}
.btn-main {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.012em;
}
.btn-sub {
	color: rgba(20, 16, 10, 0.72);
	font: 11px/1 var(--font-mono);
	letter-spacing: 0.04em;
}
.night .btn-lead {
	border-color: var(--accent);
}

/* ---- Before/after figures ---------------------------------------------- */
/* The comparison is the point, so both values sit on one row with the old one
   struck through. Reading order stays left-to-right for screen readers. */
.ledger.compare dd {
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.ledger.compare .was {
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	opacity: 0.72;
}
.ledger.compare .now {
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}
.ledger.compare .now::before {
	content: "→";
	margin-right: 10px;
	color: var(--ink-2);
	text-decoration: none;
}

@media (max-width: 560px) {
	.btn-lead {
		width: 100%;
	}
	.ledger.compare dd {
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.btn-lead {
		transition: none;
	}
	.btn-lead:hover {
		transform: none;
	}
}