.he-module {
	--he-accent: #1d4ed8;
	--he-border: rgba(127, 127, 127, 0.25);
	--he-muted: rgba(127, 127, 127, 0.95);
	margin: 2rem 0;
	display: grid;
	gap: 1.25rem;
	color: inherit;
}

.he-module.alignwide,
.he-module.alignfull {
	max-width: none;
}

.he-card {
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--he-border);
	border-radius: 12px;
	background: transparent;
	min-width: 0;
}

.he-title {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	line-height: 1.3;
}

/* Scorecard */
.he-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1rem;
}

.he-head .he-title {
	margin: 0;
}

.he-overall {
	white-space: nowrap;
}

.he-overall-num {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--he-accent);
	font-variant-numeric: tabular-nums;
}

.he-overall-of {
	margin-left: 0.25rem;
	color: var(--he-muted);
}

.he-criteria {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.he-criteria li {
	margin-bottom: 0.9rem;
}

.he-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.35rem;
}

.he-num {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.he-bar {
	height: 8px;
	border-radius: 999px;
	background: var(--he-border);
	overflow: hidden;
}

.he-bar > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--he-accent);
}

.he-note {
	margin: 0.35rem 0 0;
	font-size: 0.9rem;
	color: var(--he-muted);
}

.he-verdict {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--he-border);
}

/* Pros and cons */
.he-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.he-proscons ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.he-proscons li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.5rem;
}

.he-proscons li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--he-accent);
}

.he-pros li::before {
	content: "+";
}

.he-cons li::before {
	content: "-";
}

/* Comparison table */
.he-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.he-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.he-table th,
.he-table td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--he-border);
}

.he-table thead th {
	font-weight: 600;
}

.he-table tbody th {
	font-weight: 500;
	color: var(--he-muted);
	white-space: nowrap;
}

/* Charts */
.he-chart .he-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.he-svg .he-bar-fill {
	fill: var(--he-accent);
}

.he-svg .he-grid {
	fill: none;
	stroke: currentColor;
	stroke-opacity: 0.2;
}

.he-svg .he-line-path {
	fill: none;
	stroke: var(--he-accent);
	stroke-width: 3;
	stroke-linejoin: round;
}

.he-svg .he-dot {
	fill: var(--he-accent);
}

.he-svg .he-series {
	fill: var(--he-accent);
	fill-opacity: 0.22;
	stroke: var(--he-accent);
	stroke-width: 2.5;
}

.he-svg .he-tick {
	fill: currentColor;
	font-size: 14px;
}

.he-svg .he-val {
	fill: currentColor;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.he-head {
		flex-direction: column;
		align-items: flex-start;
	}
	.he-proscons {
		grid-template-columns: 1fr;
	}
	.he-svg .he-tick {
		font-size: 22px;
	}
	.he-svg .he-val {
		font-size: 22px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.he-bar > span {
		transition: width 0.6s ease-out;
	}
}

@media (prefers-color-scheme: dark) {
	.he-module {
		--he-border: rgba(255, 255, 255, 0.14);
		--he-muted: rgba(255, 255, 255, 0.7);
	}
}