/* GN PropTx Sync - mortgage calculator (1.37.0): the "Mortgage" section on listing pages and
   [gn_mortgage_calculator]. Same design as the rest of the site (tokens.css): a grouped input panel
   next to a double-bezel result card, serif figure, pill button with the arrow. Self-contained
   tokens so the shortcode also works on pages that don't load frontend.css. */
.gn-mc {
	--mc-accent: var(--gnh-tint, var(--gnt-tint, #0071e3));
	--mc-ink: var(--gnt-label, #1c1a17);
	--mc-ink2: var(--gnt-label-2, #6b665d);
	--mc-ink3: var(--gnt-label-3, #8b857a);
	--mc-soft: var(--gnt-bg-alt, #f5f2ec);
	--mc-fill: var(--gnt-fill, #ece7de);
	--mc-sep: var(--gnt-sep, rgba(60, 45, 20, .1));
	--mc-tax: #c4b59d;
	--mc-condo: #8fb8ec;
	--mc-ease: var(--gnt-ease-out, cubic-bezier(.32, .72, 0, 1));
	container-type: inline-size;
	margin-top: 18px;
	font-family: var(--gnt-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
	color: var(--mc-ink);
	letter-spacing: -.016em;
	-webkit-font-smoothing: antialiased;
}
.gn-mc *, .gn-mc *::before, .gn-mc *::after { box-sizing: border-box; }
.gn-mc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(14px, 2cqi, 26px); align-items: start; }
@container (max-width: 720px) { .gn-mc-grid { grid-template-columns: minmax(0, 1fr); } }

/* Inputs: a grouped panel, like the search filters */
.gn-mc .gn-mc-form { display: grid; gap: 16px; margin: 0; padding: clamp(18px, 3cqi, 26px); border-radius: 22px; background: var(--mc-soft); }
.gn-mc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container (max-width: 360px) { .gn-mc-row { grid-template-columns: minmax(0, 1fr); } }
.gn-mc-field { min-width: 0; }
.gn-mc .gn-mc-field label, .gn-mc .gn-mc-label { display: block; margin: 0 0 6px 4px; font-size: .8125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.008em; color: var(--mc-ink2); text-transform: none; }
.gn-mc-affix { position: relative; display: flex; align-items: center; }
.gn-mc-affix > span { position: absolute; left: 14px; font-size: 1rem; font-weight: 600; color: var(--mc-ink3); pointer-events: none; }
.gn-mc-affix--end > span { left: auto; right: 14px; }
.gn-mc .gn-mc-affix input, .gn-mc .gn-mc-field select {
	width: 100%; min-height: 48px; margin: 0; padding: 10px 14px 10px 28px; border: 0; border-radius: 12px; background: #fff;
	box-shadow: inset 0 0 0 1px rgba(60, 45, 20, .08); font-family: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; letter-spacing: -.016em;
	color: var(--mc-ink); font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none;
	transition: box-shadow .15s var(--mc-ease);
}
.gn-mc .gn-mc-affix--end input { padding: 10px 32px 10px 14px; }
.gn-mc .gn-mc-field select {
	padding: 10px 40px 10px 14px; cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b857a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
}
.gn-mc .gn-mc-affix input:focus, .gn-mc .gn-mc-field select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--mc-accent); }
.gn-mc-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 6.5rem); gap: 8px; }
.gn-mc .gn-mc-range { display: block; width: 100%; margin: 14px 0 0; accent-color: var(--mc-accent); cursor: pointer; }
.gn-mc .gn-mc-hint { margin: 6px 4px 0; font-size: .8125rem; line-height: 1.4; color: var(--mc-ink3); }

/* Amortization: iOS segmented control */
.gn-mc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-height: 48px; padding: 2px; border-radius: 12px; background: var(--mc-fill); }
.gn-mc .gn-mc-seg button {
	-webkit-appearance: none; appearance: none; margin: 0; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; box-shadow: none;
	font-family: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1; letter-spacing: -.016em; text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--mc-ink); cursor: pointer;
	transition: background-color .2s var(--mc-ease), box-shadow .2s var(--mc-ease), transform var(--gnt-spring-dur, 445ms) var(--gnt-spring, ease);
}
.gn-mc .gn-mc-seg button.is-active { background: #fff; color: var(--mc-ink); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
.gn-mc .gn-mc-seg button:active { transform: scale(.97); transition: transform 100ms var(--mc-ease); }
@media (hover: hover) and (pointer: fine) { .gn-mc .gn-mc-seg button:not(.is-active):hover { background: rgba(255, 255, 255, .5); } }

.gn-mc .gn-mc-check { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .9375rem; font-weight: 500; cursor: pointer; }
.gn-mc .gn-mc-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--mc-accent); cursor: pointer; }

/* Line under the input panel (left column), e.g. the starting price on the Mortgage calculator page (1.47.1) */
.gn-mc-side { display: grid; gap: 14px; min-width: 0; }
.gn-mc .gn-mc-sidenote { margin: 0; padding: 0 clamp(18px, 3cqi, 26px); font-size: .875rem; line-height: 1.5; color: var(--mc-ink3); }

/* Result: double-bezel card */
.gn-mc-result {
	padding: clamp(20px, 3.2cqi, 30px); border-radius: 22px; background: #fff;
	box-shadow: var(--gnt-bezel, 0 0 0 1px rgba(60, 45, 20, .08)), var(--gnt-highlight, 0 0 0 transparent), var(--gnt-ambient, 0 24px 48px -28px rgba(60, 45, 20, .18));
}
.gn-mc .gn-mc-eyebrow { margin: 0 0 8px; font-size: .6875rem; font-weight: 700; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--mc-accent); }
.gn-mc .gn-mc-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; }
.gn-mc .gn-mc-big [data-gn-mc-out="payment"] {
	font-family: var(--gnt-font-serif, "Iowan Old Style", Georgia, serif); font-weight: 400; font-size: clamp(2.75rem, 9cqi, 3.75rem); line-height: 1;
	letter-spacing: -.01em; font-variant-numeric: tabular-nums; font-synthesis: none;
}
.gn-mc .gn-mc-per { font-size: 1rem; font-weight: 500; color: var(--mc-ink2); }
.gn-mc .gn-mc-alert { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: #fdecea; color: #b42318; font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.gn-mc.is-invalid .gn-mc-big, .gn-mc.is-invalid .gn-mc-bar, .gn-mc.is-invalid .gn-mc-list, .gn-mc.is-invalid .gn-mc-groups { opacity: .38; transition: opacity .2s var(--mc-ease); }

.gn-mc-bar { display: flex; gap: 4px; height: 12px; margin: 20px 0 6px; }
.gn-mc-bar > span { flex-basis: 0; min-width: 6px; border-radius: 6px; transition: flex-grow .45s var(--mc-ease); }
.gn-mc-bar > span[hidden] { display: none; }
.gn-mc-bar-pi { background: var(--mc-accent); }
.gn-mc-bar-tax { background: var(--mc-tax); }
.gn-mc-bar-condo { background: var(--mc-condo); }

.gn-mc .gn-mc-list { display: grid; margin: 0; padding: 0; }
.gn-mc .gn-mc-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 0; border-top: 1px solid var(--mc-sep); }
.gn-mc .gn-mc-list > div:first-child { border-top: 0; }
.gn-mc .gn-mc-list > div[hidden] { display: none; }
.gn-mc .gn-mc-list dt { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .9375rem; font-weight: 500; line-height: 1.35; color: var(--mc-ink2); }
.gn-mc .gn-mc-list dd { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--mc-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gn-mc .gn-mc-list .gn-mc-total { border-top-color: rgba(60, 45, 20, .22); }
.gn-mc .gn-mc-list .gn-mc-total dt, .gn-mc .gn-mc-list .gn-mc-total dd { color: var(--mc-ink); font-weight: 700; }
.gn-mc-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.gn-mc-dot--pi { background: var(--mc-accent); }
.gn-mc-dot--tax { background: var(--mc-tax); }
.gn-mc-dot--condo { background: var(--mc-condo); }

.gn-mc-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mc-sep); }
@container (max-width: 1040px) { .gn-mc-groups { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 720px) and (min-width: 520px) { .gn-mc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gn-mc .gn-mc-group h3 {
	margin: 0 0 2px; font-family: inherit !important; font-size: .75rem !important; font-weight: 700 !important; line-height: 1.3;
	letter-spacing: .12em !important; text-transform: uppercase; color: var(--mc-ink3);
}
.gn-mc .gn-mc-list--plain dt { font-size: .875rem; }
.gn-mc .gn-mc-list--plain dd { font-size: .875rem; }

.gn-mc .gn-mc-note { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--mc-soft); font-size: .875rem; line-height: 1.45; color: var(--mc-ink2); }

/* Pill button with the arrow in its own circle, like every primary button on the site */
.gn-mc .gn-mc-cta {
	display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; margin-top: 18px; padding: 0 24px;
	border-radius: 980px; background: var(--mc-accent); color: #fff !important; font-size: 1.0625rem; font-weight: 600; line-height: 1;
	text-decoration: none !important; box-shadow: none;
	transition: filter .2s var(--mc-ease), transform var(--gnt-spring-dur, 445ms) var(--gnt-spring, ease);
}
.gn-mc .gn-mc-cta::after {
	content: ""; flex: none; width: 30px; height: 30px; margin: 0 -14px 0 4px; border-radius: 50%;
	background: rgba(255, 255, 255, .18) var(--gnt-arrow, none) center / 15px no-repeat;
	transition: transform var(--gnt-spring-dur, 445ms) var(--gnt-spring, ease), background-color .2s var(--mc-ease);
}
.gn-mc .gn-mc-cta:active { transform: scale(.98); transition: transform 100ms var(--mc-ease); }
@media (hover: hover) and (pointer: fine) {
	.gn-mc .gn-mc-cta:hover { filter: brightness(1.06); }
	.gn-mc .gn-mc-cta:hover::after { transform: translateX(3px) scale(1.06); background-color: rgba(255, 255, 255, .26); }
}
.gn-mc .gn-mc-disc { margin: 14px 0 0; font-size: .75rem; line-height: 1.5; color: var(--mc-ink3); }

/* "Est. payment $2,825/mo" under the listing price */
.gn-sl-est { margin: 8px 0 0; font-size: .9375rem; line-height: 1.3; color: var(--gn-muted, #6b665d); letter-spacing: -.016em; }
.gn-sl-est a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: inherit; text-decoration: none; }
.gn-sl-est strong { font-weight: 600; color: var(--gn-text, #1c1a17); font-variant-numeric: tabular-nums; }
/* "Calculate yours" nudge (1.50.0): a small accent pill with a down arrow, pointing to the calculator below */
.gn-sl-est-nudge {
	display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 11px; border-radius: 980px;
	background: color-mix(in srgb, var(--gn-accent, #0071e3) 10%, transparent); color: var(--gn-accent, #0071e3);
	font-size: .8125rem; font-weight: 600; letter-spacing: -.008em; white-space: nowrap;
	transition: background-color .2s var(--gnt-ease-out, ease);
}
.gn-sl-est-nudge svg { transition: transform .35s var(--gnt-ease-out, ease); }
@media (hover: hover) and (pointer: fine) {
	.gn-sl-est a:hover strong { color: var(--gn-link, #0066cc); }
	.gn-sl-est a:hover .gn-sl-est-nudge { background: color-mix(in srgb, var(--gn-accent, #0071e3) 16%, transparent); }
	.gn-sl-est a:hover .gn-sl-est-nudge svg { transform: translateY(2px); }
}
.gn-sl-est a:active .gn-sl-est-nudge { transform: scale(.97); }
/* The calculator's brief highlight after the jump */
.gn-mc.is-flash .gn-mc-result { animation: gn-mc-flash 1.4s var(--gnt-ease-out, ease); }
@keyframes gn-mc-flash {
	0%, 100% { box-shadow: var(--gnt-bezel, 0 0 0 1px rgba(60, 45, 20, .08)), var(--gnt-highlight, 0 0 0 transparent), var(--gnt-ambient, 0 24px 48px -28px rgba(60, 45, 20, .18)); }
	30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-accent) 45%, transparent), var(--gnt-ambient, 0 24px 48px -28px rgba(60, 45, 20, .18)); }
}
@media (prefers-reduced-motion: reduce) { .gn-sl-est-nudge svg { transition: none; } .gn-mc.is-flash .gn-mc-result { animation: none; } }

/* [gn_mortgage_calculator] on ordinary pages and posts */
.gn-mc-wrap { max-width: 64rem; margin: 2em auto; }
.gnb-prose .gn-mc-wrap { margin: 2em 0; }

@media (prefers-reduced-motion: reduce) {
	.gn-mc-bar > span, .gn-mc .gn-mc-cta, .gn-mc .gn-mc-cta::after, .gn-mc .gn-mc-seg button { transition: none; }
}