/*
 * CPH Mortgage Calculator on Gracewater: the plugin's --cphmc-* properties set
 * from the --gw-* tokens (inc/mortgage-calc.php loads this only where the
 * plugin's CSS is). Layout and states stay in the plugin.
 */
.cphmc {
	--cphmc-ink: var(--gw-text-primary);
	--cphmc-muted: var(--gw-green-600);
	--cphmc-accent: var(--gw-green-700);
	--cphmc-on-accent: var(--gw-cream-100);
	--cphmc-field: var(--gw-white, #fff);
	--cphmc-rule: rgba(0, 85, 79, 0.25);
	--cphmc-alert: var(--gw-orange-700);
	--cphmc-radius: 0;
	--cphmc-font-body: var(--gw-font-body);
	--cphmc-font-display: var(--gw-font-display);
	--cphmc-total-size: clamp(48px, 7cqi, 96px);
	--cphmc-part-1: var(--gw-green-700);
	--cphmc-part-2: var(--gw-teal-500);
	--cphmc-part-3: var(--gw-citron-500);
	--cphmc-part-4: var(--gw-orange-500);
	--cphmc-part-5: var(--gw-pink-500);
	--cphmc-sticky-top: calc(var(--gw-header-h-compact, 70px) + 24px);
}

/* The calculator column on its page: the content measure, centred. */
.gw-mortgage-calc-row .cphmc {
	max-width: 1332px;
	margin: 0 auto;
	padding: 0 0 clamp(72px, 8vw, 158px);
}

/* Calculator page: the header lockup (assets/css/header.css) sits over the top of the intro,
   so the intro starts below it. Lockup height = width × 0.55; on phones it hangs under the pills. */
body.gw-mortgage-calc-page .gw-section-intro {
	padding-top: calc(var(--gw-header-top) + clamp(96px, 17.6vw, 338px) * 0.55 + clamp(16px, 1.7vw, 40px)); /* + Salient's 40px above the content */
}
@media (max-width: 599px) {
	body.gw-mortgage-calc-page .gw-section-intro {
		padding-top: calc(var(--gw-header-top) + var(--gw-header-pill) + 12px + 110px * 0.55);
	}
}