/* Mortgage Pipeline forms — brand-aligned to the supplied mockups. */
.mpf {
	--mpf-blue: #0064FF;
	--mpf-blue-strong: #1a5fff;
	--mpf-navy: #2C0050;
	--mpf-green: #14B91E;
	--mpf-green-dark: #14B91E;
	--mpf-slider: #14B91E;
	--mpf-well: #f3f4f6;
	--mpf-border: #e5e7eb;
	--mpf-text: #2C0050;
	--mpf-muted: #6b7280;
	--mpf-radius: 16px;

	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	column-gap: 100px;
	row-gap: 0;
	max-width: 1440px;
	margin: 0 auto;
	color: var(--mpf-text);
	font-family: "Figtree", arial;
	line-height: 1.4;
}

/* ---- column top bars ---- */
/* Left column top: brand + secure on the left, Trustpilot on the right. */
.mpf__colbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 30px; flex-wrap: nowrap; }
.mpf__bar-left { display: inline-flex; align-items: center; width: 50% }
.mpf__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--mpf-navy); }
.mpf__brand-badge { width: 50px; height: 50px; background: #f0f0f0; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mpf__brand-icon { width: 20px; height: auto; object-fit: contain; }
.mpf__brand-name { font-size: 17px; line-height: 1em; color: #2C0050; font-weight: 800; }
.mpf__brand-light { font-weight: 500; }
.mpf__divider { width: 1px; height: 20px; background: #0064FF; margin: 0 15px; flex: 0 0 auto; }
.mpf__secure { display: inline-flex; align-items: center; color: var(--mpf-navy); font-size: 12px; font-weight: 500; }
.mpf__lock { width: 10px; height: auto; margin-right: 5px; object-fit: contain; }
.mpf__bar-reviews { flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: flex-end; width: 50% }

/* Right column top: progress. */
.mpf__aside-top { margin-bottom: 24px; }
.mpf__progress { color: var(--mpf-navy); font-weight: 500; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.mpf__progress-track { flex: 1 1 auto; display: inline-block; height: 6px; background: var(--mpf-border); border-radius: 999px; overflow: hidden; }
.mpf__progress-fill { display: block; height: 100%; width: 0; background: var(--mpf-blue); border-radius: 999px; transition: width .35s ease; }

.mpf__aside{position: relative; z-index:0;}
.mpf__main{z-index: 1;}
.mpf__aside .mpr__house-trees{
	position: absolute;
	bottom: -30px;
	right: 0;
	width: 489px;
}

.mpr__house-trees .house-img{
	width: 100%;
	height: auto;
	position: relative;
}

.mpr__house-trees .tree-1-img, .mpr__house-trees .tree-2-img, .mpr__house-trees .tree-3-img{
	position: absolute;
}

.mpr__house-trees .tree-1-img{
	width: 11%;
	height: auto;
	left: 28%;
	bottom: -7px;
}

.mpr__house-trees .tree-2-img{
	width: 11%;
	height: auto;
	left: 52.5%;
	bottom: -7px;
}

.mpr__house-trees .tree-3-img{
	width: 18.4%;
	height: auto;
	right: 6%;
	bottom: -7px;
}

.mpr__mort-house-trees{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 507px;
		text-align: right;
}

.mpr__mort-house-trees .mort{
	width: 177px;
	height: auto;
	position: relative;

	margin-right: 139px;
}

.mpr__mort-house-trees .house-img{
	width: 507px !important;
	height: auto;
	position: absolute;
	bottom: 68px;
	right: -50px;
}

.mpr__mort-house-trees .tree-1-img{
	position: absolute;
	bottom: 68px;
	width: 14%;
	height: auto;
	right: 50px;
}

/* Aside artwork swaps on the confirmation (review) slide. `is-review` is toggled
   on the root .mpf by the stepper, same hook the aside-info/panel swap uses.
   - .mpr__house-trees:      every slide EXCEPT the confirmation slide
   - .mpr__mort-house-trees: ONLY the confirmation slide */
.mpr__mort-house-trees { display: none; }
.mpf.is-review .mpr__house-trees { display: none; }
.mpf.is-review .mpr__mort-house-trees { display: block; }

/* mobile scroll bars (hidden on desktop) */
.mpf__more, .mpf__back-top { display: none; }

/* ---- titles ---- */
.mpf__title { font-size: clamp(26px, 4vw, 33px) !important; line-height: 1.1; font-weight: 800; color: var(--mpf-navy); margin-bottom: 30px; }
.mpf__sub { color: var(--mpf-muted); margin-bottom: 30px; }
.mpf__req { color: var(--mpf-blue); font-weight: 600; float: right; }
.mpf__title-accent { color: var(--mpf-blue); }

/* ---- steps ---- */
.mpf__step { display: none; }
.mpf__step.is-active { display: block; animation: mpf-fade .25s ease; }
@keyframes mpf-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- radio cards ---- */
.mpf__cards { background: var(--mpf-well); border-radius: 25px; padding: 10px; }
.mpf__cards--grid .mpf__card:hover, .mpf__card--icon:hover{
	background: #0064FF;
	color: #fff;
}
.mpf__cards--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mpf__cards--icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mpf__cards--shake { animation: mpf-shake .4s; }
@keyframes mpf-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.mpf__card {
	position: relative; display: flex; align-items: center; justify-content: space-between;
	gap: 10px; background: #fff; padding: 50px 30px; cursor: pointer;
	font-weight: 700; color: var(--mpf-navy); transition: background .15s, color .15s;
}
.mpf__card:nth-child(1) { border-top-left-radius: 15px; }
.mpf__card:nth-child(3) { border-top-right-radius: 15px; }
.mpf__card:nth-child(4) { border-bottom-left-radius: 15px; }
.mpf__card:nth-child(6) { border-bottom-right-radius: 15px; }
.mpf__card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mpf__radio { width: 22px; height: 22px; border: 2px solid var(--mpf-border); border-radius: 50%; flex: 0 0 auto; position: relative; }
.mpf__card.is-selected { background: var(--mpf-blue-strong); color: #fff; }
.mpf__card.is-selected .mpf__radio { border-color: #fff; }
.mpf__card.is-selected .mpf__radio::after { content: ""; position: absolute; inset: 4px; background: #fff; border-radius: 50%; }
.mpf__card:focus-within { outline: 3px solid rgba(46,107,245,.35); outline-offset: 2px; }

/* icon cards */
.mpf__card--icon { flex-direction: column; text-align: center; gap: 14px; padding: 26px 12px; }
.mpf__icon { display: block; }
.mpf__icon img { width: 64px; height: 64px; object-fit: contain; display: block; }
/* Keep the radio anchored to itself so its dot can't escape to the card (was position:static). */
.mpf__card--icon .mpf__radio { position: relative; }
/* On property cards, selecting should ONLY turn the card blue + text white. */
.mpf__card--icon.is-selected .mpf__radio { border-color: var(--mpf-border); }
.mpf__card--icon.is-selected .mpf__radio::after { content: none; }
.mpf__card--icon:nth-child(1) { border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
.mpf__card--icon:nth-child(2), .mpf__card--icon:nth-child(3) { border-radius: 0; }
.mpf__card--icon:nth-child(4) { border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 0; }

/* ---- sliders ---- */
.mpf__sliders-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.mpf__ltv { color: var(--mpf-navy); font-weight: 500; font-size: 14px;}
.mpf__ltv strong { color: var(--mpf-blue); }
.mpf__sliders { background: var(--mpf-well); border-radius: 25px; padding: 10px;  }
.mpf__slider { padding: 15px; background: #ffffff; margin-bottom: 10px}
.mpf__slider:first-child{ border-top-left-radius: 15px; border-top-right-radius: 15px;}
.mpf__slider:last-child { margin-bottom: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
.mpf__slider-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mpf__slider-label { font-weight: 500; color: #2C0050; }
.mpf__slider-out { font-size: 30px; font-weight: 800; color: var(--mpf-blue); }
.mpf__slider-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--mpf-muted); margin-top: 8px; }

.mpf__slider input[type="range"] {
	-webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 999px;
	background: linear-gradient(to right, var(--mpf-slider) var(--mpf-fill, 0%), var(--mpf-border) var(--mpf-fill, 0%));
	outline: none; box-shadow: none;
}
/* Explicit 3px track gives Chrome a fixed reference so the thumb centers via margin-top;
   transparent lets the input's gradient fill show through; no theme shadow can reach it. */
.mpf__slider input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: transparent; box-shadow: none; border: none; }
.mpf__slider input[type="range"]::-moz-range-track { height: 3px; border-radius: 999px; background: transparent; box-shadow: none; border: none; }
.mpf__slider input[type="range"]::-moz-range-progress { background: var(--mpf-slider); height: 3px; border-radius: 999px; }
.mpf__slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; box-sizing: border-box;
	width: 11px; height: 11px; margin-top: -4px; border-radius: 50%;
	background: #fff; border: 2px solid #2C0050; box-shadow: none; cursor: pointer;
}
.mpf__slider input[type="range"]::-moz-range-thumb {
	box-sizing: border-box; width: 11px; height: 11px; border-radius: 50%;
	background: #fff; border: 2px solid #2C0050; box-shadow: none; cursor: pointer;
}
.mpf__slider input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(46,107,245,.35); }

/* ---- contact fields ---- */
.mpf__fields { background: var(--mpf-well); border-radius: 25px; padding: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mpf__field--full { grid-column: span 4; }
.mpf__field--half { grid-column: span 2; }
.mpf__field--quarter { grid-column: span 1; }

.mpf__field-inner { position: relative; }
.mpf__field-label {
	position: absolute; left: 20px; top: 20px; z-index: 1; pointer-events: none;
	font-size: 14px; font-weight: 500; line-height: 1em; color: var(--mpf-navy);
	line-height: 10px;
}
.mpf__field-label span { color: var(--mpf-blue); }

.mpf__input {
	width: 100%; box-sizing: border-box;
	padding: 40px 20px 20px 20px !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.1em !important; height: unset;
	border: 2px solid #ffffff !important; border-radius: 0px !important; background: #fff; color: var(--mpf-navy);
	transition: background .15s, border-color .15s;
	max-height: 70px;
}
select.mpf__input { -webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%232e6bf5' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 20px center;
}
.mpf__field{
	overflow: hidden;
}
.mpf__field:nth-child(1) .mpf__input{
	border-top-left-radius: 15px !important;
}

.mpf__field:nth-child(2) .mpf__input{
	border-top-right-radius: 15px !important;
}

.mpf__field:nth-child(7) .mpf__input{
	border-bottom-left-radius: 15px !important;
}

.mpf__field:nth-child(8) .mpf__input{
	border-bottom-right-radius: 15px !important;
}
/* Focus: blue border + light-blue fill (always wins over the valid state). */
.mpf__input:focus { border-color: #0064FF !important; background: #E3EEFF; outline: none; }
/* Valid (unfocused): green fill. */
.mpf__field.is-valid .mpf__input:not(:focus) { background: #E6FFE7; border-color: #E6FFE7 !important; }
/* Validation checkmark, shown only when valid and not currently focused. */
.mpf__valid-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: none; }
.mpf__field.is-valid .mpf__valid-icon { display: block; }
.mpf__field.is-valid .mpf__input:focus ~ .mpf__valid-icon { display: none; }

/* Invalid (unfocused): pink border + fill, no message. Focus still wins (blue). */
.mpf__field.has-error .mpf__input:not(:focus) { border-color: #F00050 !important; background: #fcccdc; }

.mpf__consent { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 600; color: var(--mpf-navy); }
.mpf__consent a { color: var(--mpf-blue); }
.mpf__consent input { width: 20px; height: 20px; accent-color: var(--mpf-blue); }
.mpf__consent--review { margin-top: 0; margin-bottom: 20px; }

/* ---- review ---- */
.mpf__review { background: var(--mpf-well); border-radius: 25px; padding: 10px; margin-bottom: 20px; display: grid; grid-template-columns: calc(40% - 10px) 60%; gap: 10px; }
.mpf__review-col { display: grid; gap: 10px; align-content: start; }
.mpf__review-row { background: #fff; padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; border-radius: 0px; }

.mpf__review-col:nth-child(1) .mpf__review-row:nth-child(1){
	border-top-left-radius: 15px;
}

.mpf__review-col:nth-child(1) .mpf__review-row:nth-child(8){
	border-bottom-left-radius: 15px;
}

.mpf__review-col:nth-child(2) .mpf__review-row:nth-child(1){
	border-top-right-radius: 15px;
}

.mpf__review-col:nth-child(2) .mpf__review-row:nth-child(8){
	border-bottom-right-radius: 15px;
}
.mpf__review-row span { color: var(--mpf-navy); font-weight: 700; font-size: 14px; line-height: 1em; }
.mpf__review-row strong { color: var(--mpf-text); font-weight: 500; text-align: left; word-break: break-word; }

/* ---- review right-column panel (confirm + Let's Go + Edit Information) ---- */
.mpf__review-panel { display: none; }
.mpf__review-confirm { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; font-weight: 500; line-height: 1.4; color: var(--mpf-navy); cursor: pointer; }
.mpf__review-confirm input { width: 20px; height: 20px; accent-color: var(--mpf-blue); flex: 0 0 auto; margin-top: 1px; }
.mpf__review-panel .mpf__btn { width: 100%; justify-content: space-between; margin-bottom: 14px; }
.mpf__review-panel .mpf__btn:last-child { margin-bottom: 0; }
.mpf__review-panel .mpf__arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.25); font-size: 16px; }
.mpf__review-edit .mpf__arrow { background: rgba(255,255,255,.15); }

/* On the review step, swap the sidebar list for the panel and hide the bottom nav. */
.mpf.is-review .mpf__aside-info { display: none; }
.mpf.is-review .mpf__review-panel { display: block; }
.mpf.is-review .mpf__nav { display: none; }

/* ---- nav / buttons ---- */
.mpf__nav { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.mpf__btn {
	border: 0; border-radius: 999px; padding: 18px 30px; font-size: 16px; font-weight: 700; cursor: pointer;
	display: inline-flex; align-items: center; gap: 150px; transition: background .3s ease-in-out, transform .05s;
}
.mpf__btn--next, .mpf__btn--submit { background: var(--mpf-green); color: #fff; }

.mpf__btn--next, .mpf__btn--submit{
	padding: 5px 5px 5px 30px;
}

.mpf__btn--submit .mpf__arrow, .mpf__btn--back .mpf__arrow, .mpf__btn--next .mpf__arrow{
	height: 40px;
	width: 54px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-radius: 111px;
}
.mpf__btn--next .mpf__arrow img, .mpf__btn--submit .mpf__arrow img{
	width: 14px;
	height: auto;
}
.mpf__btn--next:hover, .mpf__btn--submit:hover { background: #0064FF; }
.mpf__btn--back { background: #2C0050; color: #ffffff; padding: 5px 30px 5px 5px; gap: 10px !important;}

.mpf__btn--back:hover{
	background: #0064FF;
}
.mpf__btn:active { transform: translateY(1px); }
.mpf__btn:disabled { opacity: .6; cursor: not-allowed; }
.mpf__btn:focus-visible { outline: 3px solid rgba(46,107,245,.4); outline-offset: 2px; }
.mpf__btn[hidden] { display: none; }
.mpf__arrow { font-size: 18px; }

/* ---- foot: Mort + speech bubble + Continue ---- */
.mpf__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
.mpf.is-review .mpf__foot { display: none; }
.mpf.is-review .mpf__mort { display: none; }
.mpf__mort { display: flex; align-items: flex-start; gap: 8px; flex: 0 1 auto; min-width: 0; }
.mpf__mort-fig { position: relative; width: 210px; height: 182px; flex: 0 0 auto; }
.mpf__grass { position: absolute; bottom: 26px; right: 10px; width: 307px; max-width: 307px !important; height: auto; z-index: 0; }
.mpf__mort-img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 168px; width: auto; z-index: 1; }
.mpf__bubble {
	position: relative; flex: 0 1 448px; width: 448px; max-width: 100%; min-width: 0; aspect-ratio: 448 / 110;
	background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
	display: flex; align-items: center; box-sizing: border-box; padding: 18px 26px 18px 48px; margin-bottom: 26px;
}
.mpf__bubble-text { margin: 0; font-style: italic; font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--mpf-navy); }
.mpf__foot .mpf__nav { flex: 0 0 auto; margin: 0; margin-bottom: 26px; }

/* ---- footer links ---- */
.mpf__footer-links { margin-top: 8px; display: flex; align-items: center; gap: 5px; font-size: 12px; }
.mpf__footer-links a { color: var(--mpf-navy); text-decoration: none; }
.mpf__footer-links a:hover { text-decoration: underline; }
.mpf__footer-sep { color: var(--mpf-blue); }

/* ---- honeypot ---- */
.mpf__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- thank you ---- */
.mpf__thanks { background: var(--mpf-well); border-radius: var(--mpf-radius); padding: 60px 40px; text-align: center; }
.mpf__thanks h2 { color: var(--mpf-navy); font-size: 32px; margin: 0 0 12px; }

/* ---- sidebar ---- */
.mpf__aside { padding-top: 0; }
.mpf__aside-h { color: var(--mpf-navy); font-size: 24px; font-weight: 800; margin: 0 0 20px; line-height: 1.2; }
.mpf__aside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.mpf__aside-list li { display: flex; align-items: center; gap: 15px; color: var(--mpf-navy); }
.mpf__aside-ico { flex: 0 0 auto; padding: 10px; border-radius: 7px; background: #F0F0F0; display: inline-flex; align-items: center; justify-content: center; }
.mpf__aside-ico img { width: 20px; height: auto; object-fit: contain; }
.mpf__aside-txt { font-size: 14px; font-weight: 500; line-height: 20px; }

/* Mobile slider paging: one slider per screen, so the visible card gets full
   rounding (DOM :first/:last-child radii don't apply to the lone shown slider). */
.mpf--slider-paging .mpf__slider { border-radius: 15px; margin-bottom: 0; }

/* Mobile contact paging: fields are shown one group per screen, so round every
   visible field (the desktop nth-child corner radii no longer line up). */
.mpf--contact-paging .mpf__fields .mpf__input { border-radius: 15px !important; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
	.mpf__cards--grid{
		grid-template-columns: repeat(2, 1fr);
	}
	
	.mpf__cards--grid .mpf__card:nth-child(2){
		border-top-right-radius: 15px;
	}
	
	.mpf__cards--grid .mpf__card:nth-child(3), 	.mpf__cards--grid .mpf__card:nth-child(4){
		border-radius: 0;
	}
	
	.mpf__cards--icons{
		grid-template-columns: repeat(2, 1fr);
	}
	.mpf__card--icon:nth-child(1){
		border-bottom-left-radius: 0;
	}
	.mpf__card--icon:nth-child(2){
		border-top-right-radius: 15px;
	}
	.mpf__card--icon:nth-child(3){
		border-bottom-left-radius: 15px;
	}
	.mpf__card--icon:nth-child(4){
		border-top-right-radius: 0px;
	}
}

@media (max-width: 900px) {
	
	/* Global */
	.mpf__bar-left{
		width: 100%;
		justify-content: space-between
	}
	/* Single column: form (section 1) then info (section 2). */
	.mpf { grid-template-columns: 1fr; column-gap: 0; row-gap: 0; }

	/* Section 1 fills the viewport; the "More about" bar sticks to the bottom. */
	.mpf__main { min-height: 100dvh; display: flex; flex-direction: column; }
	.mpf__aside { display: block; padding-top: 0; }

	.mpf__cards--grid { grid-template-columns: 1fr 1fr; }
	.mpf__cards--icons { grid-template-columns: 1fr 1fr; }
	.mpf__fields { grid-template-columns: 1fr 1fr; }
	.mpf__review { grid-template-columns: 1fr; }
	.mpf__field--full, .mpf__field--half { grid-column: span 2; }
	.mpf__field--quarter { grid-column: span 1; }

	/* colbar: brand left, secure right (Trustpilot has moved to section 2). */
	.mpf__colbar { justify-content: space-between; margin-bottom: 20px;}
	.mpf__divider { display: none; }

	/* Title	 */
	.mpf__title, .mpf__sub{
		margin-bottom: 20px;
	}

	/* Mort's row becomes just the full-width Continue (Mort moved to section 2). */
	.mpf__foot { margin: 20px 0;}
	.mpf__foot .mpf__nav { flex: 1 1 100%; width: 100%; margin-bottom: 0; }
	.mpf__foot .mpf__btn--next { width: 100%; justify-content: space-between;}
	.mpf__footer-links { margin-top: 16px; }

	/* Progress relocated into section 1, above the footer links. */
	.mpf__main .mpf__progress { margin-bottom: 8px; }
	.mpf__progress-track { width: auto; }

	/* Empty progress slot in the aside collapses on mobile. */
	.mpf__aside .mpf__aside-top { display: none; }

	/* Mort in section 2: bubble sits above him (pointer-down art). */
	.mpf__aside .mpf__mort { flex-direction: column-reverse; align-items: center; gap: 0; margin: 10px auto 24px; }
	.mpf__aside .mpf__bubble { max-width: 100%; width: 320px; margin-bottom: 8px; padding: 22px 26px 34px; }
	.mpf__aside .mpf__bubble-text { text-align: center; }

	/* Considerations: icon above text, 10px between. */
	.mpf__aside-list li { flex-direction: column; align-items: flex-start; gap: 10px; }

	/* Sticky scroll bars. */
	.mpf__more, .mpf__back-top {
		display: flex; align-items: center; justify-content: center; gap: 12px;
		width: 100%; box-sizing: border-box; border: 0; cursor: pointer;
		background: var(--mpf-blue); color: #fff; font-weight: 700; font-size: 17px; padding: 22px 20px;
	}
	.mpf__more { position: sticky; bottom: 0; margin-top: auto; z-index: 4; }
	.mpf__back-top { position: sticky; top: 0; margin-bottom: 24px; z-index: 6; }

	/* Review step: no viewport-lock or scroll bars (it's the final screen). */
	.mpf.is-review .mpf__main { min-height: 0; }
	.mpf.is-review .mpf__more, .mpf.is-review .mpf__back-top { display: none; }

	/* --- Mobile shows the form only ---
	   Hide the "More about ___ Loans" section-2 content (considerations, the
	   relocated Mort + Trustpilot) and the sticky scroll bars that jump to it, plus
	   the desktop-only aside artwork. The aside itself stays in the DOM because the
	   review panel (confirm + Let's Go / Edit) lives inside it and is still needed
	   on the confirmation slide — only the "more about" pieces are hidden. */
	.mpf__aside-info { display: none; }
	.mpf__aside .mpf__mort { display: none; }
	.mpf__aside .mpf__bar-reviews { display: none; }
	.mpf__more, .mpf__back-top { display: none; }
	/* house-trees stays hidden on mobile; mort-house-trees still shows on the
	   confirmation slide (it keeps the global .mpf.is-review show rule). */
	.mpr__house-trees { display: none; }
	
	/* progress + footer-links are wrapped by JS into .mpf__meta so they share one row */
	.mpf__meta { display: flex; align-items: center; flex-wrap: nowrap; justify-content: space-between; gap: 5px; }
	.mpf__meta .mpf__progress { margin: 0; }
	.mpf__meta .mpf__footer-links { margin: 0; justify-content:flex-end; }
	.mpf__progress{
		width: 54%
	}
	.mpf__footer-links{
		width: 46%;
	}
	
	.mpf__field:nth-child(1) .mpf__input{
		border-top-right-radius: 15px !important;
	}
	.mpf__field:nth-child(2) .mpf__input{
		border-top-right-radius: 0px !important;
	}
	.mpf__field:nth-child(7) .mpf__input{
		border-bottom-left-radius: 0px !important;
	}
	.mpf__field:nth-child(8) .mpf__input{
		border-bottom-left-radius: 15px !important;
	}
	.mpr__mort-house-trees{
		position: relative;
		bottom: unset;
		right: unset;
		margin-top: 40px;
		width: 100%;
		text-align: center;
	}
	.mpr__mort-house-trees .house-img{
		right: unset;
		max-width: 507px;
		left: 50%;
		transform: translateX(-50%);
		
	}
	.mpr__mort-house-trees .tree-1-img{
		max-width: 72px;
		right: 20%;
	}
	
	.mpf__review-confirm{
		margin: 30px 0;
	}
}
@media (max-width: 767px) {
	.mpf__cards--grid { grid-template-columns: 1fr; margin-bottom: 20px; }
	.mpf__slider-out { font-size: 24px; }
	.mpf__cards{
		padding: 5px;
		gap: 5px !important;
		border-radius: 20px;
	}
	.mpf__card{
		padding: 15px 25px;
	}
	.mpf__cards--grid .mpf__card:nth-child(1){
		border-top-right-radius: 15px;
	}
	
	.mpf__cards--grid .mpf__card:nth-child(2){
		border-top-right-radius: 0;
	}
	
	.mpf__cards--grid .mpf__card:nth-child(6){
		border-bottom-left-radius: 15px;
	}
	
	.mpf__title{
		font-size: 23px !important;
		line-height: 27px !important;
	}
	.mpf__sub{
		font-size: 12px;
	}
	.mpf__brand-badge{
		width: 35px;
		height: 35px;
	}
	.mpf__brand-badge img{
		width: 13px;
		height: auto;
	}
	.mpf__brand-name{
		font-size: 12px;
	}
	
	.mpf__main .mpf__progress{
		font-size: 12px;
		font-weight: 500;
	}
	.mpf__card--icon{
		gap: 10px;
	}
	
	.mpf__field:nth-child(1) .mpf__input{
		border-bottom-right-radius: 0 !important;
		border-bottom-left-radius: 0 !important;		
	}
	
	.mpf__field:nth-child(2) .mpf__input{
		border-radius: 0 !important;		
	}
	
	.mpf__field:nth-child(8) .mpf__input, .mpf__field:nth-child(4) .mpf__input{
        border-radius: 0px !important;
    }
	
	.mpf__field:nth-child(7) .mpf__input{
		border-bottom-left-radius: 15px !important;		
		border-top-right-radius: 0 !important;
		border-top-left-radius: 0 !important;
	}
	
	.mpf__field:nth-child(3) .mpf__input{
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}
	.mpf__field:nth-child(5) .mpf__input{
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
	}
	.mpf__field:nth-child(5) .mpf__input, 	.mpf__field:nth-child(6) .mpf__input{
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
	}
	.mpr__mort-house-trees .mort{
		margin-right: 80px;
	}	
	.mpr__mort-house-trees .house-img{
		right: unset;
		max-width: 432px;
		
	}
	.mpr__mort-house-trees .tree-1-img{
		max-width: 58px;
		right: 20%;
	}

}
@media (prefers-reduced-motion: reduce) {
	.mpf__step.is-active, .mpf__cards--shake { animation: none; }
	.mpf__progress-fill { transition: none; }
}

/* ---- Trustpilot review widget (reviewkit) ---- */
.mpf .gutensuite-reviewkit_fpln_common { border: none; padding: 0; }
.mpf__bar-reviews { display: inline-flex; align-items: center; }
@media (max-width: 900px) {
	.mpf__aside .mpf__bar-reviews { width: 100%; justify-content: center; margin-bottom: 8px; }
}