.bv-calc {
	--bv-ink: #003C64;
	--bv-card-current: #FFDE59;
	--bv-card-joynt: #003C64;
	--bv-card-saving: #FF914D;
	--bv-border: #E2E8EE;
	--bv-radius: 12px;

	width: 100%;
	display: grid;
	gap: 2.5rem;
	font-family: "Poppins", sans-serif;
}

/* Inputs */

.bv-calc__inputs { display: grid; gap: 2.5rem; }
.bv-calc__field { display: grid; gap: .1rem; }
.bv-calc__label { color: #0A141E; font-size: 12px;}

.bv-calc__input {
	width: 100%;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--bv-border);
	border-radius: 10px;
	background: #fff;
	color: var(--bv-ink);
	font: inherit;
	font-size: 1.0625rem;
	font-variant-numeric: tabular-nums;
}
.bv-calc__input::placeholder { color: #8A97A5; }
.bv-calc__input:focus-visible {
	outline: 2px solid var(--bv-ink);
	outline-offset: 1px;
}

/* Result cards */

.bv-calc__results { display: grid; gap: 2.5rem; }

.bv-calc__result {
	display: grid;
	align-content: start;
	padding: 1.75rem 2rem;
	border-radius: var(--bv-radius);
}

.bv-calc__result--current { background: var(--bv-card-current); color: var(--bv-ink); }
.bv-calc__result--joynt   { background: var(--bv-card-joynt);   color: #fff; }
.bv-calc__result--saving  { background: var(--bv-card-saving);  color: #000; }

.bv-calc__result-label {
	font-size: 1.0625rem;
	font-weight: 700;
}

.bv-calc__result-subcopy {
	margin: .375rem 0 1.25rem;
	font-size: .9375rem;
	opacity: .85;
}

.bv-calc__result-output {
	display: block;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

/* "a year" only reads correctly once there's a figure in front of it. */
.bv-calc:not(.is-calculated) .bv-calc__result-period { display: none; }

@media (min-width: 640px) {
	.bv-calc__inputs { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
	.bv-calc__results { grid-template-columns: repeat(3, 1fr); }
}

.bv-calc.is-loading .bv-calc__result-output {
	opacity: .4;
	transition: opacity .15s ease;
}

.bv-calc__error {
	margin: 0;
	font-size: .875rem;
	color: #b00020;
}