.kc-calculator__grid {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 26px;
	align-items: stretch;
	font-family: "Plus Jakarta Sans", sans-serif;
	color: #1B2027;
}

.kc-calculator__grid *,
.kc-calculator__grid *::before,
.kc-calculator__grid *::after {
	box-sizing: border-box;
}


/* ========================================
   LEFT / INPUT PANEL
======================================== */

.kc-calculator__inputs {
	background: #FFFFFF;
	border: 1px solid #E3E6EB;
	border-radius: 16px;
	padding: 40px;
	box-shadow: 0 2px 6px rgba(13, 29, 65, .06);
}

.kc-calculator__field + .kc-calculator__field {
	margin-top: 30px;
}

.kc-calculator__label {
	margin-bottom: 10px;
	color: #0D1D41;
	font: 600 13.5px/1.5 "Plus Jakarta Sans", sans-serif;
}


/* ========================================
   RANGE SLIDER
======================================== */

.kc-calculator__range-row {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 36px;
}

.kc-calculator__range {
	--range-progress: 0%;

	-webkit-appearance: none;
	appearance: none;

	flex: 1;
	width: 100%;
	height: 6px;
	margin: 0;

	background: linear-gradient(
		to right,
		#D95F36 0%,
		#D95F36 var(--range-progress),
		#E3E6EB var(--range-progress),
		#E3E6EB 100%
	);

	border: 0;
	border-radius: 999px;
	outline: none;

	cursor: pointer;
}


/* Chrome / Edge / Safari - Track */

.kc-calculator__range::-webkit-slider-runnable-track {
	width: 100%;
	height: 6px;

	background: transparent;
	border: 0;
	border-radius: 999px;
}


/* Chrome / Edge / Safari - Thumb */

.kc-calculator__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;

	width: 20px;
	height: 20px;

	margin-top: -7px;

	background: #D95F36;

	border: 3px solid #FFFFFF;
	border-radius: 50%;

	box-shadow: 0 2px 6px rgba(13, 29, 65, .20);

	cursor: grab;
}

.kc-calculator__range::-webkit-slider-thumb:active {
	cursor: grabbing;
}


/* Firefox - Track */

.kc-calculator__range::-moz-range-track {
	width: 100%;
	height: 6px;

	background: #E3E6EB;
	border: 0;
	border-radius: 999px;
}


/* Firefox - Filled Track */

.kc-calculator__range::-moz-range-progress {
	height: 6px;

	background: #D95F36;
	border-radius: 999px;
}


/* Firefox - Thumb */

.kc-calculator__range::-moz-range-thumb {
	width: 20px;
	height: 20px;

	background: #D95F36;

	border: 3px solid #FFFFFF;
	border-radius: 50%;

	box-shadow: 0 2px 6px rgba(13, 29, 65, .20);

	cursor: grab;
}

.kc-calculator__range::-moz-range-thumb:active {
	cursor: grabbing;
}


/* Keyboard focus */

.kc-calculator__range:focus-visible {
	outline: 2px solid rgba(217, 95, 54, .35);
	outline-offset: 4px;
}


/* Slider value */

.kc-calculator__value {
	min-width: 96px;

	color: #0D1D41;

	text-align: right;

	font: 700 28px/1.2 "Plus Jakarta Sans", sans-serif;

	font-variant-numeric: tabular-nums;
}


/* ========================================
   BREAKDOWN
======================================== */

.kc-calculator__breakdown {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;

	border-top: 1px solid #E3E6EB;

	padding-top: 26px;
}

.kc-calculator__metric-label {
	margin-bottom: 6px;

	color: #6E7784;

	font: 400 12px/1.42 "Plus Jakarta Sans", sans-serif;
}

.kc-calculator__metric-value {
	color: #1B2027;

	font: 600 22px/1.26 "Plus Jakarta Sans", sans-serif;

	font-variant-numeric: tabular-nums;
}


/* ========================================
   NOTE
======================================== */

.kc-calculator__note {
	margin: 26px 0 0;

	color: #6E7784;

	font: 400 12.5px/1.5 "Plus Jakarta Sans", sans-serif;
}


/* ========================================
   RIGHT / RESULT PANEL
======================================== */

.kc-calculator__result {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	background: #0D1D41;

	border-radius: 16px;

	padding: 40px;
}

.kc-calculator__result-eyebrow {
	margin-bottom: 20px;

	color: #F9AB55;

	font: 600 12px/1.42 "Plus Jakarta Sans", sans-serif;

	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kc-calculator__total {
	color: #FFFFFF;

	font: 800 56px/1.02 "Plus Jakarta Sans", sans-serif;

	letter-spacing: -0.03em;

	font-variant-numeric: tabular-nums;
}

.kc-calculator__hours {
	margin: 18px 0 0;

	color: #E2F3F9;

	opacity: .8;

	font: 400 15px/1.55 "Plus Jakarta Sans", sans-serif;
}


/* ========================================
   BUTTONS
======================================== */

.kc-calculator__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;

	margin-top: 36px;
}

.kc-calculator__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 48px;

	border-radius: 8px;

	padding: 0 18px;

	font: 700 15px/1 "Plus Jakarta Sans", sans-serif;

	text-decoration: none;

	cursor: pointer;

	transition:
		background .14s,
		box-shadow .22s,
		border-color .14s,
		transform .08s;
}


/* Primary button */

.kc-calculator__button--primary {
	border: 0;

	background: #D95F36;

	color: #FFFFFF;
}

.kc-calculator__button--primary:hover {
	background: #C25026;

	color: #FFFFFF;

	text-decoration: none;

	box-shadow: 0 10px 26px rgba(217, 95, 54, .4);
}


/* Secondary button */

.kc-calculator__button--secondary {
	border: 1px solid rgba(255, 255, 255, .28);

	background: transparent;

	color: #FFFFFF;

	font-weight: 600;
}

.kc-calculator__button--secondary:hover {
	background: rgba(255, 255, 255, .08);

	border-color: rgba(255, 255, 255, .6);
}

.kc-calculator__button:active {
	transform: translateY(1px);
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 900px) {

	.kc-calculator__grid {
		grid-template-columns: 1fr;
	}

}


@media (max-width: 600px) {

	.kc-calculator__inputs,
	.kc-calculator__result {
		padding: 28px 24px;
	}

	.kc-calculator__breakdown {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.kc-calculator__total {
		font-size: 44px;
	}

	.kc-calculator__range-row {
		gap: 12px;
	}

	.kc-calculator__value {
		min-width: 72px;
		font-size: 24px;
	}

}