/* ==========================================================================
   Mortgage Guides page — template-mortgage-guides.php
   Built from the Mortgage Guides reference. Loaded after theme.css on this
   template, and on the front page for its shared common-questions section
   (inc/section-guide-faq.php). Follows the theme's sizing rule: fixed px
   tokens on the body class, swapped at the theme's breakpoints
   (600 · 768 · 1080 · 1280 · 1536), no vw / vh.

   The reference swaps the site's bronze for a warmer rust accent; it lives
   in --mg-accent so the whole page can be pulled back to --gold in one line.
   ========================================================================== */

.page-template-template-mortgage-guides,
.home {
	--mg-accent: #c2571a;
	--mg-accent-strong: #a64814;
	--mg-accent-soft: #fbeee6;
	--mg-ink: var(--ink);
	--mg-text: #4a5261;
	--mg-muted: #6b7280;
	--mg-line: #e3ddd6;
	--mg-cream: #f8f4f0;
	--mg-stone: #f3efea;

	--mg-eyebrow: 11px;
	--mg-hero-title: 36px;
	--mg-hero-lede: 16px;
	--mg-hero-pad: 44px;
	--mg-hero-media-h: 260px;

	--mg-chip-h: 42px;
	--mg-chip-px: 20px;
	--mg-chip-size: 14px;

	--mg-sec-gap: 40px;
	--mg-lead-title: 24px;
	--mg-card-title: 18px;
	--mg-card-copy: 14px;
	--mg-card-pad: 18px;
	--mg-thumb-w: 120px;

	--mg-faq-heading: 32px;
	--mg-faq-q: 16px;
	--mg-help-title: 28px;
	--mg-news-title: 24px;
}

/* --- Shared eyebrow ------------------------------------------------------- */

.mg-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-family: var(--sans);
	font-size: var(--mg-eyebrow);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mg-accent);
}

.mg-eyebrow--trail::after,
.mg-eyebrow--lead::before,
.mg-eyebrow--both::before,
.mg-eyebrow--both::after {
	content: "";
	flex: none;
	width: 48px;
	height: 1.5px;
	background: currentColor;
}

.mg-eyebrow--lead::before,
.mg-eyebrow--both::before {
	width: 30px;
}

/* --- Banner --------------------------------------------------------------- */

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

.mg-hero__inner {
	padding-block: var(--mg-hero-pad);
}

.mg-hero__copy {
	max-width: 560px;
}

.mg-hero__title {
	margin: 20px 0 0;
	font-family: var(--display);
	font-size: var(--mg-hero-title);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--mg-ink);
}

.mg-hero__accent {
	color: var(--mg-accent);
}

.mg-hero__lede {
	max-width: 500px;
	margin: 22px 0 0;
	font-size: var(--mg-hero-lede);
	line-height: 1.65;
	color: var(--mg-text);
	text-wrap: pretty;
}

.mg-hero__media {
	position: relative;
	height: var(--mg-hero-media-h);
}

.mg-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 45%;
}

[data-lang="vi"] .mg-hero__title {
	font-size: calc(var(--mg-hero-title) * 0.86);
}

/* --- Topic filter --------------------------------------------------------- */

.mg-guides {
	padding-block: 28px 56px;
	background: var(--white);
}

.mg-topics {
	margin-inline: calc(var(--gutter) * -1);
}

/* One scrolling strip on phones; wraps and centres once there is room. */
.mg-topics__list {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 2px var(--gutter) 8px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.mg-topics__list::-webkit-scrollbar {
	display: none;
}

.mg-topic {
	display: inline-flex;
	align-items: center;
	height: var(--mg-chip-h);
	padding-inline: var(--mg-chip-px);
	border: 1px solid #cfc8c1;
	border-radius: 999px;
	background: var(--white);
	font-size: var(--mg-chip-size);
	font-weight: 600;
	color: #3b4250;
	white-space: nowrap;
	text-decoration: none;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.mg-topic:hover {
	border-color: var(--mg-accent);
	color: var(--mg-accent);
}

.mg-topic[aria-current="page"] {
	border-color: var(--mg-accent);
	background: var(--mg-accent-soft);
	color: var(--mg-accent);
}

.mg-topic:focus-visible,
.mg-pager__item:focus-visible {
	outline: 2px solid var(--mg-accent);
	outline-offset: 2px;
}

/* --- Cards ------------------------------------------------------------------ */

.mg-featured,
.mg-more {
	margin-top: var(--mg-sec-gap);
}

.mg-featured__grid,
.mg-more__grid {
	display: grid;
	gap: 16px;
	margin-top: 18px;
}

.mg-featured__side {
	display: grid;
	gap: 16px;
}

.mg-card {
	position: relative;
	display: grid;
	background: var(--white);
	border: 1px solid var(--mg-line);
	border-radius: var(--radius);
	transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}

.mg-card:hover {
	border-color: #d4ccc3;
	box-shadow: 0 14px 32px -18px rgba(1, 34, 67, 0.28);
}

.mg-card__media {
	display: block;
	overflow: hidden;
	background: var(--mg-stone);
}

.mg-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.mg-card:hover .mg-card__media img {
	transform: scale(1.04);
}

.mg-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: var(--mg-card-pad);
}

.mg-card__topic {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mg-accent);
}

.mg-card__title {
	margin: 8px 0 0;
	font-family: var(--display);
	font-size: var(--mg-card-title);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: var(--mg-ink);
	text-wrap: balance;
}

.mg-card__title a {
	color: inherit;
	text-decoration: none;
}

.mg-card__title a:hover {
	color: var(--mg-accent-strong);
}

.mg-card__excerpt {
	margin: 8px 0 0;
	font-size: var(--mg-card-copy);
	line-height: 1.55;
	color: var(--mg-muted);
	text-wrap: pretty;
}

/* "Read Article" on the left, the article's views and likes on the right. */
.mg-card__foot {
	display: flex;
	align-self: stretch;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.mg-card__counts {
	font-size: 12.5px;
}

/* The title's link covers the whole card: a click anywhere opens it. */
.mg-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mg-card:hover .mg-card__link {
	color: var(--mg-accent-strong);
}

.mg-card:hover .mg-card__link svg {
	transform: translateX(4px);
}

.mg-card__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mg-accent);
	text-decoration: none;
}

.mg-card__link svg {
	width: 18px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s var(--ease);
}

.mg-card__link:hover {
	color: var(--mg-accent-strong);
}

.mg-card__link:hover svg {
	transform: translateX(4px);
}

/* Lead card: photo on top, copy beneath and taking whatever height is left. */
.mg-card--lead {
	grid-template-rows: auto 1fr;
}

.mg-card--lead .mg-card__media {
	aspect-ratio: 16 / 9;
}

.mg-card--lead .mg-card__title {
	font-size: var(--mg-lead-title);
}

/* Side + row cards: thumbnail beside the copy, inset like the reference. */
.mg-card--side,
.mg-card--row {
	grid-template-columns: var(--mg-thumb-w) minmax(0, 1fr);
	align-items: stretch;
}

.mg-card--side .mg-card__media,
.mg-card--row .mg-card__media {
	margin: 10px 0 10px 10px;
	min-height: 100px;
}

.mg-card--side .mg-card__body,
.mg-card--row .mg-card__body {
	padding: 12px 14px;
}

.mg-more__empty {
	margin: 18px 0 0;
	padding: 28px;
	border: 1px dashed var(--mg-line);
	font-size: 16px;
	color: var(--mg-muted);
	text-align: center;
}

/* --- Pagination ------------------------------------------------------------ */

.mg-pager {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 26px;
}

.mg-pager__item {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--mg-line);
	border-radius: var(--radius);
	background: var(--white);
	font-size: 14px;
	font-weight: 600;
	color: #3b4250;
	text-decoration: none;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.mg-pager__item:hover,
.mg-pager__item[aria-current="page"] {
	border-color: var(--mg-accent);
	color: var(--mg-accent);
}

.mg-pager__item svg {
	width: 14px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mg-pager__item--prev svg {
	transform: scaleX(-1);
}

/* --- Common questions ------------------------------------------------------ */

.mg-faq {
	padding-block: 12px 56px;
	background: var(--white);
}

.mg-faq__grid {
	display: grid;
	gap: 32px;
}

.mg-faq__heading {
	margin: 14px 0 0;
	font-family: var(--display);
	font-size: var(--mg-faq-heading);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--mg-ink);
}

.mg-faq__list {
	display: grid;
	gap: 10px;
	margin-top: 24px;
}

.mg-faq__item {
	border: 1px solid var(--mg-line);
	border-radius: var(--radius);
	background: var(--white);
	transition: border-color 0.2s var(--ease);
}

.mg-faq__item[open] {
	border-color: #d8cfc6;
}

.mg-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 52px;
	padding: 12px 20px;
	font-family: var(--display);
	font-size: var(--mg-faq-q);
	line-height: 1.35;
	color: var(--mg-ink);
	cursor: pointer;
	list-style: none;
}

.mg-faq__question::-webkit-details-marker {
	display: none;
}

.mg-faq__question:hover {
	color: var(--mg-accent-strong);
}

.mg-faq__question:focus-visible {
	outline: 2px solid var(--mg-accent);
	outline-offset: -2px;
}

/* A drawn plus that folds into a minus when the answer is open. */
.mg-faq__marker {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
}

.mg-faq__marker::before,
.mg-faq__marker::after {
	content: "";
	position: absolute;
	inset: 6px 0 auto;
	height: 2px;
	background: var(--mg-accent);
	transition: transform 0.25s var(--ease);
}

.mg-faq__marker::after {
	transform: rotate(90deg);
}

.mg-faq__item[open] .mg-faq__marker::after {
	transform: rotate(0deg);
}

.mg-faq__answer {
	margin: 0;
	padding: 0 20px 18px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--mg-text);
}

/* "Still Have Questions?" panel. */
.mg-help {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 24px;
	background: var(--mg-stone);
	text-align: center;
}

/* The illustration is drawn on white; multiply lets the stone show through. */
.mg-help__art {
	width: 100%;
	max-width: 260px;
	height: auto;
	mix-blend-mode: multiply;
}

.mg-help__title {
	margin: 18px 0 0;
	font-family: var(--display);
	font-size: var(--mg-help-title);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--mg-ink);
}

.mg-help__lede {
	max-width: 320px;
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--mg-text);
}

.mg-help__btn {
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 340px;
	min-height: 48px;
	margin-top: 22px;
	padding: 10px 20px;
	border-radius: var(--radius);
	background: var(--navy);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s var(--ease);
}

.mg-help__btn:hover {
	background: var(--navy-lift);
}

/* --- Newsletter band ------------------------------------------------------ */

.mg-news {
	padding-block: 36px;
	background: #f6f2ee;
	border-top: 1px solid #ebe5de;
}

.mg-news__inner {
	display: grid;
	gap: 24px;
}

.mg-news__intro {
	display: flex;
	align-items: center;
	gap: 20px;
}

.mg-news__icon {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
}

.mg-news__title {
	margin: 8px 0 0;
	font-family: var(--display);
	font-size: var(--mg-news-title);
	font-weight: 500;
	line-height: 1.2;
	color: var(--mg-ink);
}

.mg-news__lede {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--mg-text);
}

.mg-news__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mg-news__input {
	flex: 1 1 220px;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #d9d1c9;
	border-radius: var(--radius);
	background: var(--white);
	font: inherit;
	font-size: 15px;
	color: var(--mg-ink);
}

.mg-news__input::placeholder {
	color: #8a909b;
}

.mg-news__input:focus {
	border-color: var(--mg-accent);
	outline: 2px solid rgba(194, 87, 26, 0.18);
	outline-offset: 0;
}

.mg-news__btn {
	flex: 1 1 auto;
	min-width: 140px;
	height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--radius);
	background: var(--mg-accent);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s var(--ease);
}

.mg-news__btn:hover {
	background: var(--mg-accent-strong);
}

.mg-news__btn:focus-visible {
	outline: 2px solid var(--mg-ink);
	outline-offset: 2px;
}

.mg-news__note {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--mg-muted);
}

.mg-news__notice {
	margin: 0 0 12px;
	padding: 12px 16px;
	border-radius: var(--radius);
	font-size: 14px;
	line-height: 1.5;
}

.mg-news__notice--ok {
	background: #e8f1ec;
	color: #2f5d45;
}

.mg-news__notice--bad {
	background: #fbeae6;
	color: #9a3412;
}

/* --- Breakpoints ------------------------------------------------------------ */

@media (min-width: 600px) {
	.page-template-template-mortgage-guides,
	.home {
		--mg-thumb-w: 180px;
		--mg-card-title: 19px;
	}

	/* Email box and button share a row; only the Turnstile widget wraps under them. */
	.mg-news__form {
		flex-wrap: wrap;
	}

	.mg-news__input {
		flex-basis: 0;
	}

	.mg-news__btn {
		flex: 0 0 auto;
	}
}

@media (min-width: 768px) {
	.page-template-template-mortgage-guides,
	.home {
		--mg-hero-title: 44px;
		--mg-hero-lede: 17px;
		--mg-lead-title: 28px;
		--mg-faq-heading: 40px;
		--mg-hero-media-h: 340px;
	}

	.mg-topics {
		margin-inline: 0;
	}

	.mg-topics__list {
		flex-wrap: wrap;
		justify-content: center;
		padding-inline: 0;
		overflow: visible;
	}
}

@media (min-width: 900px) {
	.mg-featured__grid {
		grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
		gap: 18px;
	}

	/* A wide, shallow photo, so the two companions beside it stay compact. */
	.mg-card--lead .mg-card__media {
		aspect-ratio: 2.4 / 1;
	}

	.mg-more__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 18px;
	}
}

/* Split banner: copy on the cream, photograph from the centre to the edge. */
@media (min-width: 1080px) {
	.page-template-template-mortgage-guides,
	.home {
		--mg-hero-title: 44px;
		--mg-hero-pad: 56px;
		--mg-chip-h: 42px;
		--mg-chip-px: 17px;
		--mg-sec-gap: 44px;
		--mg-card-title: 18px;
		--mg-thumb-w: 170px;
		--mg-card-pad: 22px;
		--mg-faq-heading: 38px;
		--mg-help-title: 32px;
	}

	.mg-topics__list {
		gap: 8px;
	}

	.mg-hero__inner {
		display: flex;
		align-items: center;
		min-height: 400px;
	}

	.mg-hero__copy {
		width: 46%;
		max-width: none;
	}

	.mg-hero__media {
		position: absolute;
		inset: 0 0 0 50%;
		height: auto;
	}

	/* Feather the photo's left edge into the cream. */
	.mg-hero__media::before {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		z-index: 1;
		width: 64px;
		background: linear-gradient(90deg, var(--mg-cream), rgba(248, 244, 240, 0));
	}

	.mg-faq__grid {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}

	.mg-help {
		padding: 40px 36px 36px;
		margin-top: 0;
	}

	.mg-news__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
		align-items: center;
		gap: 48px;
	}

	.mg-news__icon {
		width: 76px;
		height: 76px;
	}
}

/* ==========================================================================
   Desktop: the reference, to the pixel
   --------------------------------------------------------------------------
   From 1200px the page is laid out in reference pixels. The design's page is
   1080px wide, so 1u = one pixel of the reference, and every size below is
   calc(var(--u) * n) with n read straight off the design. The breakpoints
   only change --u (fixed px per step, no vw), so the layout, image crops and
   line breaks stay identical at every desktop width: 1600px is the design at
   ×1.4815, 1200px at ×1.1111.

   Line breaks come from the English copy (see julie_agency_guides_lines());
   .mg-br shows only here.
   ========================================================================== */

@media (max-width: 1199px) {
	.mg-br {
		display: none;
	}
}

@media (min-width: 1200px) {
	.page-template-template-mortgage-guides,
	.home {
		--u: 1.1111px;
		--mg-accent: #c75214;
		--mg-accent-strong: #a8440f;
		--mg-ink: #101d5b;
		--mg-text: #4a5a78;
		--mg-muted: #505f7c;
		--mg-line: #dddcd8;
		--mg-page: #fcfcfc;
		--mg-display-track: -0.027em;
	}

	/* English breaks exactly where the reference does, and nowhere else.
	   Vietnamese has no set breaks, so it keeps wrapping to its column. */
	html:not([data-lang="vi"]) :is(.mg-hero__title, .mg-hero__lede, .mg-card__title, .mg-card__excerpt, .mg-faq__question span, .mg-help__title, .mg-help__lede, .mg-news__title, .mg-news__lede) {
		white-space: nowrap;
	}

	.mg-hero .container,
	.mg-guides .container,
	.mg-faq .container,
	.mg-news .container {
		max-width: calc(var(--u) * 950);
		padding-inline: 0;
	}

	.mg-eyebrow {
		font-weight: 800;
		line-height: calc(var(--u) * 10);
		letter-spacing: 0.2em;
		gap: 0;
	}

	.mg-eyebrow::before,
	.mg-eyebrow::after {
		height: max(1px, calc(var(--u) * 1.2));
	}

	/* --- Banner: 280u tall, photo from x = 532u (49.26%) to the edge ----- */

	.mg-hero {
		min-height: calc(var(--u) * 280);
	}

	.mg-hero__inner {
		display: block;
		min-height: 0;
		padding-block: calc(var(--u) * 25) calc(var(--u) * 16);
	}

	.mg-hero__copy {
		position: relative;
		z-index: 2;
		width: auto;
		max-width: calc(var(--u) * 440);
	}

	.mg-hero .mg-eyebrow {
		font-size: calc(var(--u) * 9.73);
	}

	.mg-hero .mg-eyebrow::after {
		width: calc(var(--u) * 50);
		margin-left: calc(var(--u) * 9);
	}

	.mg-hero__title {
		margin-top: calc(var(--u) * 12.1);
		font-size: calc(var(--u) * 39.75);
		font-weight: 400;
		line-height: calc(var(--u) * 42.5);
		letter-spacing: var(--mg-display-track);
		color: var(--mg-ink);
	}

	[data-lang="vi"] .mg-hero__title {
		font-size: calc(var(--u) * 32);
	}

	.mg-hero__lede {
		max-width: none;
		margin-top: calc(var(--u) * 12.1);
		font-size: calc(var(--u) * 12.76);
		line-height: calc(var(--u) * 18.7);
		color: var(--mg-text);
	}

	.mg-hero__media {
		position: absolute;
		inset: 0 0 0 49.26%;
		height: auto;
	}

	/* The reference frames the photo smaller than a cover crop: top edge on
	   the lantern, the whole bench in view, the wall's sunlit left edge given
	   to the cream. */
	.mg-hero__media img {
		position: absolute;
		top: 0;
		left: calc(var(--u) * 38.7);
		width: calc(100% - var(--u) * 38.7);
		height: auto;
		object-fit: fill;
	}

	.mg-hero__media::before {
		left: calc(var(--u) * 38.7);
		width: calc(var(--u) * 40);
	}

	/* --- Topic chips ------------------------------------------------------ */

	.mg-guides,
	.mg-faq {
		background: var(--mg-page);
	}

	.mg-guides {
		padding-block: calc(var(--u) * 16) 0;
	}

	.mg-topics__list {
		flex-wrap: nowrap;
		justify-content: center;
		gap: calc(var(--u) * 4.5);
		padding: 0;
		overflow: visible;
	}

	.mg-topic {
		justify-content: center;
		min-width: calc(var(--u) * 104);
		height: calc(var(--u) * 35.5);
		padding-inline: calc(var(--u) * 20);
		border: max(1px, calc(var(--u) * 1)) solid #a9ada9;
		background: #f6f6f5;
		font-size: calc(var(--u) * 10.7);
		font-weight: 500;
		color: #414544;
	}

	/* The reference sets each English chip to its own width; the row starts
	   at x = 97u. Other languages size to their labels. */
	html:not([data-lang="vi"]) .mg-topics__list {
		justify-content: flex-start;
		gap: 0;
		margin-left: calc(var(--u) * 30);
	}

	html:not([data-lang="vi"]) .mg-topics__list li + li {
		margin-left: calc(var(--u) * 5);
	}

	html:not([data-lang="vi"]) .mg-topics__list li:nth-child(2) {
		margin-left: calc(var(--u) * 4);
	}

	html:not([data-lang="vi"]) .mg-topic {
		min-width: 0;
		padding: 0;
	}

	html:not([data-lang="vi"]) li:nth-child(1) > .mg-topic { width: calc(var(--u) * 104); }
	html:not([data-lang="vi"]) li:nth-child(2) > .mg-topic { width: calc(var(--u) * 104); }
	html:not([data-lang="vi"]) li:nth-child(3) > .mg-topic { width: calc(var(--u) * 145); }
	html:not([data-lang="vi"]) li:nth-child(4) > .mg-topic { width: calc(var(--u) * 122); }
	html:not([data-lang="vi"]) li:nth-child(5) > .mg-topic { width: calc(var(--u) * 112); }
	html:not([data-lang="vi"]) li:nth-child(6) > .mg-topic { width: calc(var(--u) * 110); }
	html:not([data-lang="vi"]) li:nth-child(7) > .mg-topic { width: calc(var(--u) * 159); }

	.mg-topic[aria-current="page"] {
		border-color: #df7a4a;
		background: #fcf3eb;
		color: var(--mg-accent);
	}

	/* --- Cards: shared ------------------------------------------------------ */

	.mg-card {
		background: #fdfdfd;
		border-color: var(--mg-line);
		border-radius: calc(var(--u) * 3);
	}

	.mg-card__topic {
		font-weight: 800;
		font-size: calc(var(--u) * 8.2);
		line-height: calc(var(--u) * 8);
		letter-spacing: 0.15em;
	}

	.mg-card__title {
		font-weight: 400;
		letter-spacing: var(--mg-display-track);
		text-wrap: wrap;
		color: var(--mg-ink);
	}

	.mg-card__excerpt {
		color: var(--mg-muted);
		text-wrap: wrap;
	}

	.mg-card__link {
		gap: calc(var(--u) * 15);
		padding-top: 0;
		font-size: calc(var(--u) * 10.66);
		font-weight: 600;
		line-height: calc(var(--u) * 11);
	}

	.mg-card__link svg {
		width: calc(var(--u) * 16);
		height: calc(var(--u) * 12);
		stroke-width: 1.3;
	}

	.mg-card__counts {
		font-size: calc(var(--u) * 9.6);
	}

	.mg-card__media img {
		border-radius: inherit;
	}

	/* --- Featured editorial --------------------------------------------- */

	.mg-featured,
	.mg-more {
		margin-top: 0;
	}

	.mg-featured {
		padding-top: calc(var(--u) * 21.5);
	}

	.mg-featured > .mg-eyebrow {
		font-size: calc(var(--u) * 9);
	}

	.mg-featured > .mg-eyebrow::after {
		width: calc(var(--u) * 73);
		margin-left: calc(var(--u) * 10);
	}

	.mg-featured__grid {
		grid-template-columns: calc(var(--u) * 550) calc(var(--u) * 385);
		gap: calc(var(--u) * 15);
		align-items: start;
		margin-top: calc(var(--u) * 11);
	}

	.mg-card--lead {
		overflow: hidden;
	}

	.mg-card--lead .mg-card__media {
		aspect-ratio: auto;
		height: calc(var(--u) * 209);
	}

	.mg-card--lead .mg-card__body {
		padding: calc(var(--u) * 7) calc(var(--u) * 19) calc(var(--u) * 10.2);
	}

	.mg-card--lead .mg-card__title {
		margin-top: calc(var(--u) * 2.4);
		font-size: calc(var(--u) * 25.48);
		line-height: calc(var(--u) * 30);
	}

	.mg-card--lead .mg-card__excerpt {
		margin-top: calc(var(--u) * 6.7);
		font-size: calc(var(--u) * 11.07);
		line-height: calc(var(--u) * 14.1);
	}

	.mg-card--lead .mg-card__link {
		margin-top: calc(var(--u) * 8.2);
	}

	.mg-featured__side {
		gap: calc(var(--u) * 10.4);
		margin-top: calc(var(--u) * 1);
	}

	.mg-featured__side .mg-card--side:nth-child(1) {
		padding-bottom: calc(var(--u) * 8.3);
	}

	.mg-card--side {
		grid-template-columns: calc(var(--u) * 131) minmax(0, 1fr);
		column-gap: calc(var(--u) * 16);
		padding: calc(var(--u) * 7) calc(var(--u) * 12) calc(var(--u) * 7) calc(var(--u) * 11);
	}

	.mg-card--side .mg-card__media {
		margin: 0;
		min-height: 0;
		height: calc(var(--u) * 122);
		border-radius: calc(var(--u) * 3);
	}

	.mg-featured__side .mg-card--side:nth-child(2) .mg-card__media {
		height: calc(var(--u) * 142);
	}

	.mg-card--side .mg-card__body {
		padding: calc(var(--u) * 3) 0 0;
	}

	/* The taller second card spreads its copy a little further apart. */
	.mg-featured__side .mg-card--side:nth-child(2) .mg-card__body {
		padding: calc(var(--u) * 4.3) 0 calc(var(--u) * 13.3);
	}

	.mg-featured__side .mg-card--side:nth-child(2) .mg-card__title {
		margin-top: calc(var(--u) * 6.8);
	}

	.mg-featured__side .mg-card--side:nth-child(2) .mg-card__excerpt {
		margin-top: calc(var(--u) * 9.8);
		line-height: calc(var(--u) * 14.6);
	}

	.mg-card--side .mg-card__title {
		margin-top: calc(var(--u) * 4.8);
		font-size: calc(var(--u) * 16.06);
		line-height: calc(var(--u) * 19);
	}

	.mg-card--side .mg-card__excerpt {
		margin-top: calc(var(--u) * 8.3);
		font-size: calc(var(--u) * 8.78);
		line-height: calc(var(--u) * 12.7);
	}

	.mg-card--side .mg-card__link {
		margin-top: auto;
		padding-top: calc(var(--u) * 11.6);
	}

	/* --- More from the guide -------------------------------------------- */

	.mg-more {
		padding-top: calc(var(--u) * 18);
	}

	.mg-more > .mg-eyebrow {
		font-size: calc(var(--u) * 8.88);
	}

	.mg-more > .mg-eyebrow::before {
		width: calc(var(--u) * 30);
		margin-right: calc(var(--u) * 13);
	}

	.mg-more__grid {
		grid-template-columns: calc(var(--u) * 465) calc(var(--u) * 474);
		gap: calc(var(--u) * 10.5) calc(var(--u) * 11);
		margin-top: calc(var(--u) * 12);
	}

	.mg-card--row {
		grid-template-columns: calc(var(--u) * 164) minmax(0, 1fr);
		column-gap: calc(var(--u) * 19);
		padding-left: calc(var(--u) * 8);
	}

	.mg-more__grid .mg-card--row:nth-child(even) {
		grid-template-columns: calc(var(--u) * 176) minmax(0, 1fr);
		column-gap: calc(var(--u) * 18);
	}

	.mg-card--row .mg-card__media {
		margin: calc(var(--u) * 7 - 1px) 0 calc(var(--u) * 8 - 1px);
		min-height: calc(var(--u) * 100);
		border-radius: calc(var(--u) * 3);
	}

	.mg-card--row .mg-card__body {
		padding: calc(var(--u) * 9) calc(var(--u) * 12) calc(var(--u) * 6.1) 0;
	}

	.mg-card--row .mg-card__title {
		margin-top: calc(var(--u) * 4.6);
		font-size: calc(var(--u) * 15.45);
		line-height: calc(var(--u) * 18);
	}

	.mg-card--row .mg-card__excerpt {
		margin-top: calc(var(--u) * 2.5);
		font-size: calc(var(--u) * 10.7);
		line-height: calc(var(--u) * 14.2);
	}

	.mg-card--row .mg-card__link {
		margin-top: auto;
		padding-top: calc(var(--u) * 6.3);
	}

	/* Pager: overlays the gap above the questions, so they sit at the same
	   height whether or not there is a second page. */
	.mg-pager {
		gap: calc(var(--u) * 7);
		margin: calc(var(--u) * 10) 0 calc(var(--u) * -42);
		padding-left: calc(var(--u) * 12);
	}

	.mg-pager__item {
		width: calc(var(--u) * 33);
		height: calc(var(--u) * 32);
		border: max(1px, calc(var(--u) * 1)) solid #e4e1de;
		border-radius: calc(var(--u) * 3);
		background: #fdfdfd;
		box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(16, 29, 91, 0.06);
		font-size: calc(var(--u) * 10);
		font-weight: 600;
		color: #5d6d8a;
	}

	.mg-pager__item[aria-current="page"] {
		border: calc(var(--u) * 1.5) solid #e0885c;
		background: #fffaf6;
		color: var(--mg-accent);
	}

	.mg-pager__item svg {
		width: calc(var(--u) * 10);
		height: calc(var(--u) * 8);
		stroke-width: 1.8;
	}

	/* --- Common questions + help panel ---------------------------------- */

	.mg-faq {
		padding-block: calc(var(--u) * 45) calc(var(--u) * 9.5);
	}

	.mg-faq__grid {
		grid-template-columns: calc(var(--u) * 564) calc(var(--u) * 363);
		gap: calc(var(--u) * 23);
		align-items: start;
	}

	.mg-faq__main {
		padding: calc(var(--u) * 3) 0 0 calc(var(--u) * 1);
	}

	.mg-faq .mg-eyebrow {
		font-size: calc(var(--u) * 8.89);
	}

	.mg-faq .mg-eyebrow::before {
		width: calc(var(--u) * 27);
		margin-right: calc(var(--u) * 15);
	}

	.mg-faq .mg-eyebrow::after {
		width: calc(var(--u) * 65);
		margin-left: calc(var(--u) * 12);
	}

	.mg-faq__heading {
		margin-top: calc(var(--u) * 5.2);
		font-size: calc(var(--u) * 35.7);
		font-weight: 400;
		line-height: calc(var(--u) * 40);
		letter-spacing: var(--mg-display-track);
		text-indent: calc(var(--u) * 3);
		color: var(--mg-ink);
	}

	.mg-faq__list {
		gap: calc(var(--u) * 5);
		margin-top: calc(var(--u) * 8.3);
	}

	.mg-faq__item {
		border-color: #e8e4e2;
		border-radius: calc(var(--u) * 3);
		background: #fdfdfd;
	}

	.mg-faq__question {
		min-height: calc(var(--u) * 33 - 2px);
		padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 17);
		font-size: calc(var(--u) * 13.66);
		line-height: calc(var(--u) * 17);
		letter-spacing: var(--mg-display-track);
		color: var(--mg-ink);
	}

	.mg-faq__marker {
		margin-top: calc(var(--u) * -2);
		width: calc(var(--u) * 12);
		height: calc(var(--u) * 12);
	}

	.mg-faq__marker::before,
	.mg-faq__marker::after {
		top: calc(var(--u) * 5.3);
		height: max(1.5px, calc(var(--u) * 1.4));
	}

	.mg-faq__answer {
		padding: 0 calc(var(--u) * 17) calc(var(--u) * 12);
		font-size: calc(var(--u) * 10.5);
		line-height: calc(var(--u) * 15.5);
	}

	.mg-help {
		display: block;
		height: calc(var(--u) * 275.5);
		padding: calc(var(--u) * 10.8) 0 0;
		background: #f1ede9;
		border-radius: calc(var(--u) * 2);
	}

	/* The soft disc behind the house, cut flat along its ground line. */
	.mg-help {
		position: relative;
		isolation: isolate;
	}

	.mg-help::before {
		content: "";
		position: absolute;
		top: calc(var(--u) * 21);
		left: calc(var(--u) * 90);
		z-index: -1;
		width: calc(var(--u) * 178);
		height: calc(var(--u) * 178);
		border-radius: 50%;
		background: #ebe7e0;
		clip-path: inset(0 0 calc(var(--u) * 76) 0);
	}

	.mg-help__art {
		display: block;
		width: calc(var(--u) * 199);
		max-width: none;
		margin-left: calc(var(--u) * 80.4);
	}

	.mg-help__title,
	.mg-help__lede,
	.mg-help__btn {
		width: calc(var(--u) * 244);
		max-width: none;
		margin-left: calc(var(--u) * 61);
		margin-right: 0;
		text-align: left;
	}

	.mg-help__title {
		margin-top: calc(var(--u) * 1.8);
		font-size: calc(var(--u) * 27.22);
		font-weight: 400;
		line-height: calc(var(--u) * 30);
		letter-spacing: var(--mg-display-track);
		color: var(--mg-ink);
	}

	.mg-help__lede {
		margin-top: calc(var(--u) * 2);
		font-size: calc(var(--u) * 14.4);
		line-height: calc(var(--u) * 16.5);
		color: var(--mg-text);
	}

	.mg-help__btn {
		min-height: 0;
		height: calc(var(--u) * 32);
		margin-top: calc(var(--u) * 12.3);
		padding: 0;
		border-radius: calc(var(--u) * 3);
		background: #012a4c;
		font-size: calc(var(--u) * 12.44);
		font-weight: 500;
		text-align: center;
	}

	/* --- Newsletter band: 90u tall -------------------------------------- */

	.mg-news {
		min-height: calc(var(--u) * 90);
		padding: 0;
		border-top: 0;
		background: #f2eeea;
	}

	.mg-news__inner {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0;
		height: 100%;
	}

	.mg-news__intro {
		position: relative;
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		max-width: calc(var(--u) * 540);
		padding-bottom: calc(var(--u) * 12);
		padding: calc(var(--u) * 10) 0 0 calc(var(--u) * 69);
	}

	.mg-news__icon {
		position: absolute;
		top: calc(var(--u) * 21.5);
		left: calc(var(--u) * -5.5);
		width: calc(var(--u) * 49);
		height: calc(var(--u) * 49);
	}

	.mg-news .mg-eyebrow {
		margin-left: calc(var(--u) * -27);
		font-size: calc(var(--u) * 8.5);
	}

	.mg-news .mg-eyebrow::before {
		width: calc(var(--u) * 18);
		margin-right: calc(var(--u) * 9);
	}

	.mg-news__title {
		margin-top: calc(var(--u) * 5.85);
		font-size: calc(var(--u) * 19.58);
		line-height: calc(var(--u) * 22);
		letter-spacing: var(--mg-display-track);
		color: var(--mg-ink);
	}

	.mg-news__lede {
		margin-top: calc(var(--u) * 3.7);
		font-size: calc(var(--u) * 10.65);
		line-height: calc(var(--u) * 14);
		color: #525e79;
	}

	.mg-news__form-wrap {
		flex: none;
		width: calc(var(--u) * 382);
		padding-top: calc(var(--u) * 29.5);
	}

	.mg-news__form {
		gap: calc(var(--u) * 6);
	}

	.mg-news__input {
		flex: 0 0 calc(var(--u) * 270);
		height: calc(var(--u) * 30);
		padding: 0 calc(var(--u) * 13);
		border-color: #dbdde0;
		border-radius: calc(var(--u) * 2);
		font-size: calc(var(--u) * 10.46);
	}

	.mg-news__input::placeholder {
		color: #7b88a1;
	}

	.mg-news__btn {
		flex: 0 0 calc(var(--u) * 106);
		min-width: 0;
		height: calc(var(--u) * 30);
		padding: 0;
		border-radius: calc(var(--u) * 2);
		background: var(--mg-accent);
		font-size: calc(var(--u) * 10.21);
		font-weight: 600;
	}

	.mg-news__note {
		margin-top: calc(var(--u) * 8.5);
		font-size: calc(var(--u) * 9.05);
		line-height: calc(var(--u) * 10);
		color: #6c768e;
	}

	.mg-news__notice {
		margin: 0 0 calc(var(--u) * 6);
		padding: calc(var(--u) * 6) calc(var(--u) * 10);
		font-size: calc(var(--u) * 10);
	}
}

@media (min-width: 1280px) {
	.page-template-template-mortgage-guides,
	.home {
		--u: 1.1852px;
	}
}

@media (min-width: 1440px) {
	.page-template-template-mortgage-guides,
	.home {
		--u: 1.3333px;
	}
}

@media (min-width: 1536px) {
	.page-template-template-mortgage-guides,
	.home {
		--u: 1.4222px;
	}
}

/* The reference's own scale: 1080 → 1600. */
@media (min-width: 1600px) {
	.page-template-template-mortgage-guides,
	.home {
		--u: 1.4815px;
	}
}

@media (min-width: 1920px) {
	.page-template-template-mortgage-guides,
	.home {
		--u: 1.6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mg-card__media img,
	.mg-card__link svg,
	.mg-faq__marker::before,
	.mg-faq__marker::after {
		transition: none;
	}
}