/* ==========================================================================
   Julie Agency — the five newer calculators
   Buydown · Payoff · Refinance · Rent vs. Buy · Affordability

   Loaded on the Mortgage Calculator page (as suite tabs) and on each
   calculator's own page (template-calc-*.php). Same sizing rule as
   theme.css: fixed px values swapped at the breakpoints, no vw / vh.

   Breakpoints (min-width): 480 · 600 · 768 · 1080 · 1280
   ========================================================================== */

.ct {
	--ct-pad: 18px;
	--ct-gap: 14px;
	--ct-input-h: 42px;
	--ct-title: 21px;
	--ct-field-bg: #f8f4ef;
	--ct-tint: #f8ecdb;
	--ct-on: #fbf1e3;
	--ct-on-line: #e5c595;
	--ct-muted: #6b7178;
	--ct-faint: #8a9098;
	--ct-snap-line: rgba(255, 255, 255, 0.11);
	--ct-snap-fill: rgba(255, 255, 255, 0.06);
	--ct-snap-text: rgba(255, 255, 255, 0.74);
	background: var(--cream);
	padding-block: 24px 44px;
}

@media (min-width: 768px) {
	.ct {
		--ct-pad: 22px;
		--ct-gap: 16px;
	}
}

@media (min-width: 1080px) {
	.ct {
		--ct-pad: 24px;
		--ct-gap: 18px;
		--ct-title: 22px;
		padding-block: 32px 56px;
	}
}

@media (min-width: 1280px) {
	.ct {
		--ct-pad: 26px;
		--ct-title: 24px;
	}
}

/* Inside the suite on the calculator page the stage supplies the frame. */
.calc-page__workspace .ct {
	padding: var(--calc-pad);
	background: transparent;
}

/* ==========================================================================
   Layout — one grid per tool
   ========================================================================== */

.ct__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ct-gap);
}

.ct__full {
	grid-column: 1 / -1;
	min-width: 0;
}

.ct-stack {
	display: grid;
	gap: var(--ct-gap);
	align-content: start;
	min-width: 0;
}

@media (min-width: 768px) {
	.ct__grid--rent,
	.ct__grid--refi,
	.ct__grid--payoff {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ct__grid--rent .ct-snap,
	.ct__grid--refi .ct-snap,
	.ct__grid--refi .ct-card--escrow,
	.ct__grid--payoff .ct-snap {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1080px) {
	.ct__grid--buydown {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	}

	.ct__grid--afford {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	}
}

@media (min-width: 1280px) {
	.ct__grid--rent {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.94fr);
	}

	.ct__grid--rent .ct-snap {
		grid-column: auto;
	}

	.ct__grid--refi {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr);
	}

	.ct__grid--refi .ct-card--current {
		grid-area: 1 / 1;
	}

	.ct__grid--refi .ct-card--new {
		grid-area: 1 / 2;
	}

	.ct__grid--refi .ct-card--escrow {
		grid-area: 2 / 1 / 3 / 3;
	}

	.ct__grid--refi .ct-snap {
		grid-area: 1 / 3 / 3 / 4;
		align-self: start;
	}

	.ct__grid--payoff {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.ct__grid--payoff .ct-snap {
		grid-column: auto;
	}
}

/* ==========================================================================
   Cards
   ========================================================================== */

.ct-card {
	min-width: 0;
	padding: var(--ct-pad);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(1, 34, 67, 0.03);
}

.ct-card__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 18px;
}

.ct-card__icon,
.ct-how__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--ct-tint, #f8ecdb);
	color: var(--gold);
}

.ct-card__icon svg,
.ct-how__icon svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ct-card__heading {
	min-width: 0;
}

/* The rule rides inline after the last word, so a title that wraps keeps
   it on the final line instead of floating it beside both. */
.ct-card__title {
	margin: 4px 0 0;
	font-family: var(--display);
	font-size: var(--ct-title);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.ct-card__title::after,
.ct-compare__title::after {
	content: "";
	flex: none;
	width: 36px;
	height: 1.5px;
	background: var(--gold-fill);
}

.ct-card__title::after {
	display: inline-block;
	margin-left: 14px;
	vertical-align: middle;
}

.ct-card__sub {
	margin-top: 4px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ct-muted);
}

.ct-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.ct-card__reset {
	flex: none;
	margin-top: 6px;
	font-size: 13px;
}

/* ==========================================================================
   Fields
   ========================================================================== */

.ct-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

@media (min-width: 480px) {
	.ct-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ct-fields--1 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 600px) {
	.ct-fields--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ct-field {
	min-width: 0;
}

.ct-field--full {
	grid-column: 1 / -1;
}

.ct-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
}

.ct-input {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: var(--ct-input-h);
	padding-inline: 12px;
	background: var(--ct-field-bg);
	border: 1px solid #e9e1d7;
	border-radius: 4px;
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
		background-color 0.25s var(--ease);
}

.ct-input:focus-within {
	background: var(--white);
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(184, 113, 15, 0.13);
}

.ct-input input,
.ct-input select {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--ink);
	background: none;
	border: 0;
	border-radius: 0;
	outline: none;
}

.ct-input__pre,
.ct-input__suf {
	flex: none;
	font-size: 14px;
	color: var(--ct-faint);
	white-space: nowrap;
}

.ct-input--select {
	background: var(--white);
}

.ct-input--select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 24px;
	cursor: pointer;
}

.ct-input--select .caret {
	position: absolute;
	right: 14px;
	top: 50%;
	width: 12px;
	height: 8px;
	margin-top: -4px;
	fill: none;
	stroke: var(--ink);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.ct-input input[type="date"] {
	cursor: pointer;
}

.ct-field__hint {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ct-faint);
}

.ct-sub {
	margin: 22px 0 12px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}

.ct-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 22px;
}

.ct-actions .btn {
	height: 46px;
	padding-inline: 34px;
	font-size: 15px;
	font-weight: 600;
}

/* --- Switch options (cash-out, roll-in, payoff strategies) ------------- */

.ct-options {
	display: grid;
	gap: 12px;
	margin-block: 16px;
}

.ct-option,
.ct-radio {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.ct-option:hover,
.ct-radio:hover {
	border-color: var(--ct-on-line);
}

.ct-option.is-on,
.ct-radio.is-on {
	background: var(--ct-on);
	border-color: var(--ct-on-line);
}

.ct-switch,
.ct-radio input,
.ct-seg__item input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ct-switch__ui {
	position: relative;
	flex: none;
	width: 38px;
	height: 22px;
	margin-top: 1px;
	border-radius: 11px;
	background: #e4ded6;
	transition: background-color 0.25s var(--ease);
}

.ct-switch__ui::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
	transition: transform 0.25s var(--ease);
}

.ct-switch:checked + .ct-switch__ui {
	background: var(--gold-fill);
}

.ct-switch:checked + .ct-switch__ui::after {
	transform: translateX(16px);
}

.ct-switch:focus-visible + .ct-switch__ui,
.ct-radio input:focus-visible + .ct-radio__dot,
.ct-seg__item input:focus-visible + span {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.ct-option__body {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.ct-option__title {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
}

.ct-option__copy {
	font-size: 13px;
	line-height: 1.45;
	color: var(--ct-muted);
}

.ct-reveal[hidden] {
	display: none;
}

.ct-reveal {
	padding: 2px 2px 4px;
}

/* --- Radio cards (payment frequency) ------------------------------------ */

.ct-choice {
	display: grid;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	border: 0;
}

.ct-choice__legend {
	margin-bottom: 4px;
	padding: 0;
}

.ct-choice__title {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink);
}

.ct-choice__sub {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--ct-muted);
}

.ct-radio__dot {
	display: grid;
	place-items: center;
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border: 1.5px solid #b9b2a8;
	border-radius: 50%;
	background: var(--white);
}

.ct-radio input:checked + .ct-radio__dot {
	border-color: var(--gold);
}

.ct-radio input:checked + .ct-radio__dot::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gold);
}

/* --- Segmented control (buydown type, affordability guideline) --------- */

.ct-type {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line);
}

.ct-type__label {
	font-family: var(--display);
	font-size: var(--ct-title);
	color: var(--ink);
}

.ct-seg {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 8px;
}

.ct-type .ct-seg {
	flex: 1 1 260px;
	max-width: 340px;
}

.ct-seg__item {
	position: relative;
	display: block;
}

.ct-seg__item span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ct-muted);
	white-space: nowrap;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
		border-color 0.25s var(--ease);
}

.ct-seg__item span:hover {
	color: var(--gold);
	border-color: var(--gold);
}

.ct-seg__item input:checked + span {
	background: var(--navy);
	border-color: var(--navy);
	box-shadow: inset 0 0 0 1px var(--gold-fill);
	color: #fff;
}

.ct-mode {
	display: grid;
	justify-items: center;
	gap: 10px;
	margin: 0 0 4px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.ct-seg--wide {
	gap: 0;
	width: 100%;
	max-width: 420px;
}

.ct-seg--wide .ct-seg__item span {
	height: 46px;
	border-radius: 0;
}

.ct-seg--wide .ct-seg__item:first-child span {
	border-radius: 4px 0 0 4px;
}

.ct-seg--wide .ct-seg__item:last-child span {
	border-radius: 0 4px 4px 0;
	border-left: 0;
}

.ct-mode__caption {
	font-size: 13px;
	color: var(--ct-muted);
	text-align: center;
	white-space: pre-wrap;
}

/* --- Collapsible taxes / insurance / HOA ------------------------------- */

.ct-extras {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.ct-extras summary {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	list-style: none;
	cursor: pointer;
}

.ct-extras summary::-webkit-details-marker {
	display: none;
}

.ct-extras summary .caret {
	flex: none;
	width: 12px;
	height: 8px;
	fill: none;
	stroke: var(--ink);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform: rotate(-90deg);
	transition: transform 0.25s var(--ease);
}

.ct-extras[open] summary .caret {
	transform: none;
}

.ct-extras summary:hover {
	color: var(--gold);
}

.ct-extras > .ct-fields {
	margin-top: 16px;
}

/* ==========================================================================
   Snapshot — the navy result panel
   ========================================================================== */

.ct-snap {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: var(--ct-pad);
	color: #fff;
	background: linear-gradient(180deg, #0a2d52 0%, var(--navy) 60%);
	border-radius: 8px;
	box-shadow: var(--shadow-panel);
}

.ct-snap__head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ct-snap__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
}

.ct-snap__icon svg,
.ct-stat__icon svg,
.ct-tip__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ct-snap__title {
	margin: 0;
	font-family: var(--display);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
}

.ct-snap__sub {
	margin-top: 3px;
	font-size: 13px;
	color: var(--ct-snap-text);
}

/* --- Stat tiles ----------------------------------------------------------- */

.ct-stats {
	display: grid;
	gap: 10px;
}

.ct-stats--pair {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 480px) {
	.ct-stats--pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ct-stat {
	min-width: 0;
	padding: 12px 16px;
	background: var(--ct-snap-fill);
	border: 1px solid var(--ct-snap-line);
	border-radius: 6px;
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.ct-stat--icon {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ct-stat__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 30px;
	color: #fff;
}

.ct-stat__icon svg {
	width: 26px;
	height: 26px;
	stroke-width: 1.4;
}

.ct-stat--hero {
	padding: 16px 20px;
}

.ct-stat__label {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ct-snap-text);
}

.ct-stat__value {
	margin-top: 4px;
	font-family: var(--display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.15;
	font-variant-numeric: lining-nums;
	color: #fff;
	overflow-wrap: anywhere;
}

.ct-stat__value--sans {
	font-family: var(--sans);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ct-stat__value--sm {
	font-size: 17px;
}

.ct-stat__value--lg {
	font-size: 30px;
}

.ct-stat__value--xl {
	font-size: 32px;
}

.ct-stat__value--gold {
	color: var(--gold-light);
}

.ct-stat__unit {
	font-size: 0.72em;
}

.ct-stat--good {
	background: rgba(123, 151, 134, 0.22);
	border-color: rgba(150, 192, 158, 0.42);
}

.ct-stat--good .ct-stat__value,
.ct-stat--good .ct-stat__icon {
	color: #c9e6b9;
}

.ct-stat--bad {
	background: rgba(181, 106, 74, 0.2);
	border-color: rgba(222, 150, 118, 0.42);
}

.ct-stat--bad .ct-stat__value,
.ct-stat--bad .ct-stat__icon {
	color: #f3bda2;
}

@media (min-width: 1280px) {
	.ct-stat__value--xl {
		font-size: 36px;
	}
}

/* --- Rent vs. buy: years select and the verdict ---------------------- */

.ct-field--dark label {
	font-weight: 500;
	color: var(--ct-snap-text);
}

.ct-field--dark .ct-input {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.3);
}

.ct-field--dark .ct-input:focus-within {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--gold-light);
	box-shadow: none;
}

.ct-field--dark select {
	color: #fff;
}

.ct-field--dark option {
	color: var(--ink);
}

.ct-field--dark .caret {
	stroke: #fff;
}

.ct-verdict {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	background: var(--ct-snap-fill);
	border: 1px solid var(--ct-snap-line);
	border-radius: 6px;
}

.ct-verdict__main {
	padding: 14px 16px;
	background: rgba(0, 0, 0, 0.16);
}

.ct-verdict__main .ct-stat__label {
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
}

.ct-verdict__main .ct-stat__value {
	color: var(--gold-light);
}

.ct-verdict__copy {
	align-self: center;
	padding: 14px 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

.ct-verdict__copy strong {
	font-weight: 700;
	color: #f2a76b;
}

@media (min-width: 420px) {
	.ct-verdict {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
}

/* --- Two-column figures (refinance interest, payoff totals) ----------- */

.ct-snap__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	font-variant-numeric: lining-nums tabular-nums;
}

.ct-snap__table th,
.ct-snap__table td {
	padding: 8px 0 8px 12px;
	text-align: right;
	white-space: nowrap;
}

.ct-snap__table thead th {
	padding-bottom: 4px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ct-snap-text);
}

.ct-snap__table tbody th {
	padding-left: 0;
	font-weight: 500;
	text-align: left;
	white-space: normal;
	color: rgba(255, 255, 255, 0.88);
}

.ct-snap__table tbody td {
	font-weight: 700;
}

.ct-snap__table tbody tr {
	border-top: 1px solid var(--ct-snap-line);
}

.ct-snap .is-gold {
	color: var(--gold-light);
}

/* --- Payoff: dates, tip and save --------------------------------------- */

.ct-dates {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding-inline: 4px;
}

.ct-dates__value {
	margin-top: 4px;
	font-size: 19px;
	font-weight: 700;
	color: #fff;
}

.ct-tip {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 6px;
}

.ct-tip__icon {
	flex: none;
	color: var(--gold-light);
}

.ct-snap__save {
	width: 100%;
	height: 50px;
	font-size: 16px;
	font-weight: 600;
}

/* --- Buydown: year rows and step-ups ----------------------------------- */

.ct-lines {
	margin: 0;
}

.ct-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ct-snap-line);
}

.ct-line dt,
.ct-line > p:first-child {
	min-width: 0;
	font-size: 15px;
	color: #fff;
}

.ct-line dd,
.ct-line__big {
	margin: 0;
	font-family: var(--display);
	font-size: 25px;
	font-weight: 500;
	line-height: 1.1;
	font-variant-numeric: lining-nums;
	color: #fff;
	text-align: right;
	white-space: nowrap;
}

.ct-line__sub {
	display: block;
	margin-top: 3px;
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
}

.ct-line--gold dd,
.ct-line .is-gold {
	color: var(--gold-light);
}

.ct-steps {
	padding: 10px 16px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--ct-snap-line);
	border-radius: 6px;
}

.ct-steps__title {
	padding-block: 4px 2px;
	font-size: 13.5px;
	color: var(--ct-snap-text);
}

.ct-steps dl {
	margin: 0;
}

.ct-steps .ct-line {
	padding: 10px 0;
}

.ct-steps .ct-line:last-child {
	border-bottom: 0;
}

.ct-steps .ct-line dt {
	font-weight: 600;
}

.ct-steps .ct-line dd {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 700;
}

.ct-line--total {
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	border-bottom: 0;
}

.ct-line--total > p:first-child {
	font-size: 16px;
	font-weight: 600;
}

/* --- Affordability: debt-to-income and breakdown ----------------------- */

.ct-dti,
.ct-breakdown {
	padding-top: 12px;
	border-top: 1px solid var(--ct-snap-line);
}

.ct-dti__title {
	margin-bottom: 8px;
	font-size: 13.5px;
	color: var(--ct-snap-text);
}

.ct-dti__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 14px;
	padding: 9px 14px;
	font-size: 14px;
	background: var(--ct-snap-fill);
	border-radius: 4px;
}

.ct-dti__row + .ct-dti__row {
	margin-top: 6px;
}

.ct-dti__row > span:first-child {
	white-space: nowrap;
}

.ct-badge {
	padding: 3px 9px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
	color: #c9e6b9;
	background: rgba(150, 192, 158, 0.2);
	border-radius: 999px;
}

.ct-badge.is-over {
	color: #f3bda2;
	background: rgba(222, 150, 118, 0.2);
}

@media (max-width: 479px) {
	.ct-dti__row {
		gap: 8px;
		padding-inline: 10px;
	}

	.ct-dti__row > span:first-child {
		font-size: 12px;
	}

	.ct-badge {
		padding-inline: 7px;
		font-size: 10.5px;
	}
}

@media (max-width: 359px) {
	.ct-dti__row {
		gap: 5px;
		padding-inline: 8px;
	}

	.ct-dti__row > span:first-child {
		font-size: 10px;
		letter-spacing: -0.01em;
	}

	.ct-badge {
		padding-inline: 5px;
		font-size: 9px;
	}
}

.ct-breakdown dl {
	margin: 0;
}

.ct-breakdown dl > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 14px;
	font-size: 14px;
}

.ct-breakdown dt {
	color: rgba(255, 255, 255, 0.88);
}

.ct-breakdown dd {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: lining-nums tabular-nums;
}

.ct-breakdown .ct-breakdown__total {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	font-weight: 700;
}

.ct-breakdown__total dd {
	font-size: 18px;
	color: var(--gold-light);
}

/* --- Send / Contact / Share on navy ------------------------------------ */

/* Labels never break. The three share a row, each sized to its label; when
   the panel is too narrow for all three, a whole button moves down a row. */
.ct-snap .calc-tools {
	display: flex;
	flex-wrap: wrap;
	margin-top: 4px;
	padding-top: 0;
	border-top: 0;
}

.ct-snap .calc-tools__btn {
	flex: 1 1 auto;
	width: auto;
	height: 48px;
	padding-inline: 14px;
	white-space: nowrap;
}

/* Narrow panels (three-column layouts, the suite on a phone) tighten the
   buttons first and drop the icons last, so all three keep one row. */
.ct-snap {
	container-type: inline-size;
}

@container (max-width: 370px) {
	.ct-snap .calc-tools {
		gap: 6px;
	}

	.ct-snap .calc-tools__btn {
		gap: 5px;
		padding-inline: 8px;
		font-size: 12px;
	}

	.ct-snap .calc-tools__btn svg {
		width: 14px;
		height: 14px;
	}
}

@container (max-width: 292px) {
	.ct-snap .calc-tools__btn svg {
		display: none;
	}
}

.ct-snap .calc-tools__btn--send {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.72);
	color: #fff;
}

.ct-snap .calc-tools__btn--send:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
}

.ct-snap .calc-tools__btn--share {
	background: #fff;
	border-color: #fff;
	color: var(--navy);
}

.ct-snap .calc-tools__btn--share:hover {
	background: var(--cream);
	color: var(--navy);
}

/* ==========================================================================
   Information note
   ========================================================================== */

.ct-note {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 20px;
	background: #f4eadc;
	border: 1px solid #eadcc7;
	border-radius: 8px;
}

.ct-note__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	font-family: var(--display);
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	background: #d4894a;
	border-radius: 50%;
}

.ct-note__body {
	display: grid;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #5b6067;
}

.ct-note__title {
	font-family: var(--display);
	font-size: 19px;
	line-height: 1.3;
	color: var(--ink);
}

/* ==========================================================================
   Payoff — saved scenario table
   ========================================================================== */

.ct-compare__head {
	margin: 10px 0 12px;
}

.ct-compare__title {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--display);
	font-size: 24px;
	line-height: 1.2;
	color: var(--ink);
}

.ct-compare__sub {
	margin-top: 4px;
	font-size: 13.5px;
	color: var(--ct-muted);
}

.ct-compare__scroll {
	overflow-x: auto;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 6px;
}

.ct-compare__table {
	width: 100%;
	min-width: 880px;
	border-collapse: collapse;
	font-size: 14px;
	font-variant-numeric: lining-nums tabular-nums;
}

.ct-compare__table th,
.ct-compare__table td {
	padding: 12px 14px;
	text-align: center;
	white-space: nowrap;
	color: var(--ink);
}

.ct-compare__table thead th,
.ct-compare__table thead td {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ct-muted);
	background: #fcfbf9;
	border-bottom: 1px solid var(--line);
}

.ct-compare__table thead th:first-child,
.ct-compare__table tbody th {
	text-align: left;
}

.ct-compare__table tbody th {
	font-weight: 600;
}

.ct-compare__table tbody tr + tr {
	border-top: 1px solid var(--line);
}

.ct-compare__table td.is-good {
	font-weight: 600;
	color: #4b7a58;
}

.ct-compare__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 10px;
	vertical-align: middle;
	border-radius: 50%;
	background: #9a948c;
}

.ct-compare__dot.is-gold {
	background: var(--gold-fill);
}

.ct-compare__remove {
	width: 28px;
	height: 28px;
	font-size: 18px;
	line-height: 1;
	color: var(--ct-faint);
	border-radius: 50%;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.ct-compare__remove:hover {
	color: var(--ink);
	background: var(--cream);
}

/* ==========================================================================
   Suite on the calculator page — eight tabs scroll sideways when tight
   ========================================================================== */

.calc-page__suite--all > .calc-page__tabs {
	flex-wrap: nowrap;
	justify-content: safe center;
	overflow-x: auto;
	scrollbar-width: none;
}

.calc-page__suite--all > .calc-page__tabs::-webkit-scrollbar {
	display: none;
}

.calc-page__suite--all .calc-page__tab {
	flex: none;
	padding: 11px 16px;
	white-space: nowrap;
}

@media (max-width: 599px) {
	.calc-page__suite--all > .calc-page__tabs {
		justify-content: flex-start;
	}

	.calc-page__suite--all .calc-page__tab {
		flex: none;
		padding: 11px 14px;
		font-size: 13px;
	}
}

.calc-page__workspace .ct-card__title {
	font-size: 21px;
}

/* ==========================================================================
   Stand-alone page — banner
   ========================================================================== */

.ct-hero {
	position: relative;
	overflow: hidden;
	background: var(--cream);
}

.ct-hero__media {
	position: relative;
	height: 220px;
}

.ct-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ct-hero__inner {
	position: relative;
	padding-block: 28px 32px;
}

.ct-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
}

.ct-hero__eyebrow::after {
	content: "";
	flex: none;
	width: 40px;
	height: 1.5px;
	background: currentColor;
}

.ct-hero__title {
	margin-top: 14px;
	font-family: var(--display);
	font-size: 38px;
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--ink);
}

.ct-hero__accent {
	color: #c47f2c;
}

.ct-hero__lede {
	max-width: 46ch;
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--body);
}

.ct-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 42px;
	margin-top: 22px;
	padding: 0 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid var(--gold);
	border-radius: 3px;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.ct-hero__back svg {
	width: 14px;
	height: 11px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform: rotate(180deg);
}

.ct-hero__back:hover {
	color: #fff;
	background: var(--gold);
}

@media (min-width: 768px) {
	.ct-hero__media {
		height: 300px;
	}

	.ct-hero__title {
		font-size: 46px;
	}
}

@media (min-width: 1080px) {
	.ct-hero {
		display: flex;
		align-items: center;
		min-height: 380px;
	}

	.ct-hero__media {
		position: absolute;
		inset: 0 0 0 34%;
		height: auto;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%);
		mask-image: linear-gradient(to right, transparent 0, #000 30%);
	}

	.ct-hero__inner {
		padding-block: 56px;
	}

	.ct-hero__inner > * {
		max-width: 540px;
	}

	.ct-hero__title {
		font-size: 56px;
	}

	.ct-hero__lede {
		font-size: 17px;
	}
}

@media (min-width: 1280px) {
	.ct-hero {
		min-height: 400px;
	}

	.ct-hero__title {
		font-size: 62px;
	}
}

[data-lang="vi"] .ct-hero__title {
	line-height: 1.18;
}

/* ==========================================================================
   Stand-alone page — how it works
   ========================================================================== */

.ct-how {
	padding-block: 52px;
	text-align: center;
	background: var(--white);
	border-top: 1px solid var(--line);
}

.ct-how__lede {
	max-width: 62ch;
	margin: 12px auto 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--body);
}

.ct-how__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	margin: 36px 0 0;
	padding: 0;
	text-align: left;
	list-style: none;
}

.ct-how__icon {
	width: 52px;
	height: 52px;
}

.ct-how__icon svg {
	width: 26px;
	height: 26px;
}

.ct-how__title {
	margin-top: 14px;
	font-family: var(--display);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink);
}

.ct-how__copy {
	margin-top: 6px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ct-muted, #6b7178);
}

@media (min-width: 600px) {
	.ct-how__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 28px;
	}
}

@media (min-width: 1080px) {
	.ct-how {
		padding-block: 64px;
	}

	.ct-how__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
	}

	.ct-how__item {
		padding-inline: 28px;
	}

	.ct-how__item:first-child {
		padding-left: 0;
	}

	.ct-how__item + .ct-how__item {
		border-left: 1px solid var(--line);
	}
}

/* ==========================================================================
   Stand-alone page — closing band
   ========================================================================== */

.ct-band {
	position: relative;
	padding-block: 40px;
	color: #fff;
	background: var(--navy) url("../images/bg_have-question.avif") center / cover no-repeat;
}

.ct-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(1, 34, 67, 0.94) 0%, rgba(1, 34, 67, 0.8) 50%, rgba(1, 34, 67, 0.35) 100%);
}

.ct-band__inner {
	position: relative;
	display: grid;
	gap: 24px;
}

.ct-band__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold-light);
}

.ct-band__heading {
	margin-top: 8px;
	font-family: var(--display);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
}

.ct-band__lede {
	max-width: 56ch;
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

.ct-band__action {
	display: grid;
	justify-items: start;
	gap: 12px;
}

.ct-band__btn {
	gap: 12px;
	font-weight: 600;
}

.ct-band__btn svg {
	width: 16px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ct-band__note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.86);
}

.ct-band__note svg {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: var(--gold-light);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (min-width: 1080px) {
	.ct-band {
		padding-block: 48px;
	}

	.ct-band__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 48px;
	}

	.ct-band__heading {
		font-size: 34px;
	}

	.ct-band__action {
		justify-items: center;
	}
}

/* ==========================================================================
   Vietnamese layout (see the matching section in theme.css)
   ========================================================================== */

/* Hero: sized from the widest Vietnamese line at each breakpoint. */
[data-lang="vi"] .ct-hero__title {
	font-size: min(38px, 9vw);
}

@media (min-width: 768px) {
	[data-lang="vi"] .ct-hero__title {
		font-size: 46px;
	}
}

@media (min-width: 1080px) {
	[data-lang="vi"] .ct-hero__title {
		font-size: 54px;
	}
}

/* A label that wraps to two lines must not push its input out of line with
   the input beside it. */
[data-lang="vi"] .ct-fields {
	align-items: end;
}