.em-note {
	--em-ink: #182629;
	--em-muted: #5c6b6e;
	--em-accent: #315f5b;
	--em-wash: #f2f5f1;
	--em-line: #d8e1dc;
	color: var(--em-ink);
}

.em-note .em-note-kicker {
	margin: 0 0 1rem;
	color: var(--em-accent);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.em-note .em-note-lead {
	max-width: 42rem;
	margin: 0 0 2rem;
	font-size: clamp(1.22rem, 2vw, 1.55rem);
	font-weight: 550;
	line-height: 1.45;
}

.em-note h2 {
	margin-top: 2.5rem;
}

.em-note blockquote {
	margin: 2.25rem 0;
	padding: 1.2rem 1.5rem;
	border-left: 4px solid var(--em-accent);
	background: var(--em-wash);
	font-size: 1.08em;
}

.em-note blockquote p:last-child {
	margin-bottom: 0;
}

.em-note-framework {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: .65rem;
	margin: 2rem 0;
	padding: 1.2rem;
	border: 1px solid var(--em-line);
	border-radius: 12px;
	background: var(--em-wash);
}

.em-note-framework > div {
	display: flex;
	min-width: 0;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: center;
	padding: .85rem;
	border-radius: 8px;
	background: #fff;
	text-align: center;
}

.em-note-framework > b {
	display: flex;
	align-items: center;
	color: var(--em-accent);
}

.em-note-framework strong {
	display: block;
	margin-bottom: .25rem;
}

.em-note-framework span {
	color: var(--em-muted);
	font-size: .82rem;
	line-height: 1.35;
}

.em-note-framework .em-note-result {
	background: var(--em-accent);
	color: #fff;
}

.em-note-framework .em-note-result span {
	color: rgba(255, 255, 255, .78);
}

.em-note-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .85rem;
	margin: 2rem 0;
}

.em-note-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.em-note-grid > div {
	padding: 1.05rem;
	border: 1px solid var(--em-line);
	border-radius: 10px;
	background: #fff;
}

.em-note-grid p {
	margin: .3rem 0 0;
	color: var(--em-muted);
	font-size: .92rem;
}

@media (max-width: 700px) {
	.em-note-framework {
		flex-direction: column;
	}

	.em-note-framework > b {
		justify-content: center;
	}

	.em-note-grid,
	.em-note-grid-3 {
		grid-template-columns: 1fr;
	}
}