/**
 * MY REALTOR design system
 *
 * One stylesheet behind the Verification Centre, cases, pricing and checkout, so
 * a lister moving from one to the next never feels handed off to a different
 * product.
 *
 * Brand rules (§11), non-negotiable:
 *   - Outfit exclusively
 *   - primary green #0b823e, secondary red #DD003B
 *
 * The red is a signal colour, not a decorative one. It appears on genuine
 * problems -- a rejected document, a lapsed plan, a late case -- and nowhere
 * else, so that seeing it always means something.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

.mr {
	/* Brand — values taken directly from the approved UI design, not eyeballed */
	--mr-green: #0b823e;
	--mr-green-dark: #086631;
	--mr-green-soft: #f1f9f4;
	--mr-green-tint: #e7f3ec;
	--mr-green-line: #d6eddf;
	--mr-red: #dd003b;
	--mr-red-soft: #fdecf0;
	--mr-red-line: #f5bccb;
	--mr-red-deep: #5c2b2e;

	/* Neutrals. The ground is a warm cream, not a cool grey — it is what keeps
	   the green from reading as clinical. */
	--mr-ink: #15201a;
	--mr-ink-soft: #55605a;
	--mr-muted: #55605a;
	--mr-faint: #8a948e;
	--mr-line: #d5dbd7;
	--mr-line-mid: #c9d0cc;
	--mr-line-soft: #e3e7e4;
	--mr-line-faint: #eef1ef;
	--mr-bg: #faf9f5;
	--mr-bg-tint: #f5f7f5;
	--mr-surface: #ffffff;

	/* Signals that are not the brand accent */
	--mr-amber: #a86500;
	--mr-amber-soft: #fff8ec;
	--mr-amber-line: #f0dcbb;

	--mr-radius: 14px;
	--mr-radius-sm: 10px;
	--mr-radius-xs: 8px;
	--mr-shadow: 0 1px 3px rgba(21, 32, 26, .06);
	--mr-shadow-lift: 0 2px 4px rgba(21, 32, 26, .05), 0 14px 30px -18px rgba(21, 32, 26, .28);

		font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	color: var(--mr-ink);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.mr *, .mr *::before, .mr *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- Type */

.mr h1, .mr h2, .mr h3, .mr h4 {
	font-family: inherit;
	color: var(--mr-ink);
	letter-spacing: -.02em;
	text-wrap: balance;
	margin: 0;
}
.mr h1 { font-size: clamp(24px, 3.4vw, 29px); font-weight: 600; line-height: 1.15; }
.mr h2 { font-size: 20px; font-weight: 600; line-height: 1.25; }
.mr h3 { font-size: 15.5px; font-weight: 600; }
.mr p { margin: 0 0 14px; }
.mr p:last-child { margin-bottom: 0; }

.mr-eyebrow {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mr-green);
	margin: 0 0 8px;
}
.mr-lead { font-size: 15.5px; color: var(--mr-ink-soft); font-weight: 300; }
.mr-hint { font-size: 13.5px; color: var(--mr-muted); margin: 0 0 10px; }
.mr-help { font-size: 13px; color: var(--mr-muted); }
.mr-strong { font-weight: 600; }
.mr-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Surfaces */

.mr-section { margin-bottom: 34px; }
.mr-section:last-child { margin-bottom: 0; }

.mr-card {
	background: var(--mr-surface);
	border: 1px solid var(--mr-line);
	border-radius: var(--mr-radius);
	padding: 24px;
}
.mr-card--lift { box-shadow: var(--mr-shadow); border-color: var(--mr-line-soft); }
.mr-card--flush { padding: 0; overflow: hidden; }

.mr-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.mr-head--rule { padding-bottom: 18px; border-bottom: 1px solid var(--mr-line); }

.mr-divider { height: 1px; background: var(--mr-line); border: 0; margin: 26px 0; }

/* --------------------------------------------------------------- Badges */

.mr-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	line-height: 1;
}
.mr-badge--pro { background: var(--mr-green); color: #fff; }
.mr-badge--verified { background: var(--mr-green-soft); color: var(--mr-green); border: 1px solid var(--mr-green-line); }
.mr-badge--none { background: var(--mr-line-soft); color: var(--mr-muted); }

.mr-pill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	background: var(--mr-line-soft);
	color: var(--mr-muted);
	white-space: nowrap;
}
.mr-pill--good, .mr-pill--accepted, .mr-pill--approved, .mr-pill--active,
.mr-pill--awaiting_mr, .mr-pill--paid { background: var(--mr-green-soft); color: var(--mr-green); }
.mr-pill--bad, .mr-pill--rejected, .mr-pill--failed, .mr-pill--expired { background: var(--mr-red-soft); color: var(--mr-red); }
.mr-pill--wait, .mr-pill--pending, .mr-pill--awaiting_user { background: var(--mr-amber-soft); color: var(--mr-amber); }
.mr-pill--resolved { background: var(--mr-line-soft); color: var(--mr-muted); }

/* -------------------------------------------------------------- Buttons */

.mr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--mr-radius-sm);
	background: var(--mr-green);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.mr-btn:hover { background: var(--mr-green-dark); color: #fff; }
.mr-btn:active { transform: translateY(1px); }
.mr-btn:focus-visible { outline: 2px solid var(--mr-green); outline-offset: 3px; }
.mr-btn[disabled] { opacity: .5; cursor: not-allowed; }

.mr-btn--ghost { background: transparent; color: var(--mr-ink); border-color: var(--mr-line); }
.mr-btn--ghost:hover { background: var(--mr-bg); color: var(--mr-ink); border-color: var(--mr-muted); }

/* A paid plan's CTA carries the brand outline; the free plan stays neutral so
   the eye lands on the plans that cost something. */
.mr-btn--outline { background: transparent; color: var(--mr-green); border-color: var(--mr-green); }
.mr-btn--outline:hover { background: var(--mr-green-soft); color: var(--mr-green-dark); border-color: var(--mr-green-dark); }
.mr-btn--small { padding: 8px 15px; font-size: 13.5px; }
.mr-btn--block { width: 100%; }
.mr-btn--danger { background: var(--mr-red); }
.mr-btn--danger:hover { background: #b80031; }

.mr-link { color: var(--mr-green); font-weight: 500; text-decoration: none; }
.mr-link:hover { text-decoration: underline; }
.mr-back { font-size: 13.5px; color: var(--mr-muted); text-decoration: none; }
.mr-back:hover { color: var(--mr-ink); }

/* ---------------------------------------------------------------- Forms */

.mr-field { margin-bottom: 22px; }
.mr-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; color: var(--mr-ink); }
.mr-optional { font-weight: 400; font-size: 13px; color: var(--mr-muted); margin-left: 7px; }

.mr-input, .mr-select, .mr-textarea {
	display: block;
	width: 100%;
	max-width: 460px;
	padding: 11px 13px;
	border: 1px solid var(--mr-line);
	border-radius: var(--mr-radius-sm);
	background: var(--mr-surface);
	color: var(--mr-ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.45;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mr-input:focus, .mr-select:focus, .mr-textarea:focus {
	outline: none;
	border-color: var(--mr-green);
	box-shadow: 0 0 0 3px var(--mr-green-soft);
}
.mr-textarea { min-height: 120px; resize: vertical; }

/* File input: the browser default is the ugliest control on any form */
.mr-file { display: block; margin: 8px 0 0; }
.mr-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mr-file-face {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border: 1px dashed var(--mr-line);
	border-radius: var(--mr-radius-sm);
	background: var(--mr-bg);
	color: var(--mr-ink-soft);
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	width: 100%;
	max-width: 460px;
	transition: border-color .15s ease, background .15s ease;
}
.mr-file-face:hover { border-color: var(--mr-green); background: var(--mr-green-soft); color: var(--mr-green); }
.mr-file input[type="file"]:focus-visible + .mr-file-face { outline: 2px solid var(--mr-green); outline-offset: 2px; }

.mr-choices { display: grid; gap: 12px; margin-bottom: 8px; }
.mr-choice {
	display: block;
	position: relative;
	padding: 16px 18px 16px 46px;
	border: 1px solid var(--mr-line);
	border-radius: var(--mr-radius-sm);
	background: var(--mr-surface);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.mr-choice:hover { border-color: var(--mr-green); background: var(--mr-green-soft); }
.mr-choice input { position: absolute; left: 18px; top: 19px; accent-color: var(--mr-green); }
.mr-choice-label { display: block; font-weight: 600; font-size: 14px; }
.mr-choice-help { display: block; font-size: 13.5px; color: var(--mr-muted); margin-top: 2px; }

/* --------------------------------------------------------------- Alerts */

.mr-alert {
	padding: 14px 18px;
	border-radius: var(--mr-radius-sm);
	border: 1px solid transparent;
	font-size: 14px;
	margin-bottom: 20px;
}
.mr-alert--success { background: var(--mr-green-soft); border-color: var(--mr-green-line); color: var(--mr-green); }
.mr-alert--error { background: var(--mr-red-soft); border-color: var(--mr-red-line); color: var(--mr-red); }
.mr-alert--info { background: var(--mr-bg); border-color: var(--mr-line); color: var(--mr-ink-soft); }
.mr-alert--wait { background: var(--mr-amber-soft); border-color: #f0dcbb; color: var(--mr-amber); }

/* ------------------------------------------------------------- Progress */

.mr-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 3px; padding: 0; margin: 0; }
.mr-step {
	flex: 1 1 108px;
	padding-top: 12px;
	border-top: 3px solid var(--mr-line);
	font-size: 13px;
	color: var(--mr-faint);
	transition: color .2s ease, border-color .2s ease;
}
.mr-step.is-done { color: var(--mr-green); border-top-color: var(--mr-green); }
.mr-step.is-current { color: var(--mr-ink); font-weight: 600; border-top-color: var(--mr-green); }
.mr-step.is-problem { color: var(--mr-red); border-top-color: var(--mr-red); }

/* --------------------------------------------------------------- Tables */

.mr-table-wrap { overflow-x: auto; }
.mr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mr-table th, .mr-table td {
	text-align: left;
	padding: 13px 14px 13px 0;
	border-bottom: 1px solid var(--mr-line-soft);
	vertical-align: top;
}
.mr-table thead th {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mr-muted);
	border-bottom-color: var(--mr-line);
	padding-bottom: 10px;
}
.mr-table tbody tr:last-child td { border-bottom: none; }
.mr-table td:last-child, .mr-table th:last-child { padding-right: 0; }
.mr-table .is-held { color: var(--mr-green); font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- Plans
   Every value below is lifted from design screens 3 and 3b, not approximated. */

/* Every card is the same width whatever the group, so Short-Let with three plans
   looks like Residential with four rather than stretching to fill the row. The
   count comes from the markup (--mr-plan-cols) and the row centres. */
.mr-plans {
	--mr-plan-w: 330px;
	display: grid;
	grid-template-columns: repeat(var(--mr-plan-cols, 4), minmax(0, var(--mr-plan-w)));
	justify-content: center;
	gap: 18px;
	align-items: stretch;
}
@media (max-width: 1100px) { .mr-plans { grid-template-columns: repeat(2, minmax(0, var(--mr-plan-w))); } }

.mr-plan {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px;
	background: var(--mr-surface);
	border: 1px solid var(--mr-line-soft);
	border-radius: 16px;
	min-width: 0;
}
/* The recommended card is the only one with a 2px border. */
.mr-plan--featured { border: 2px solid var(--mr-green); padding: 23px; }
/* Their own plan sits back slightly rather than competing with the upgrade. */
.mr-plan--current { border-color: var(--mr-line-mid); }

.mr-plan-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 26px; }
.mr .mr-plan-name { font-size: 18.5px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.mr-plan-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.mr-flag {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.mr-flag--rec { background: var(--mr-green); color: #fff; }
.mr-flag--current { background: var(--mr-line-soft); color: var(--mr-ink); }
.mr-flag--full { background: var(--mr-red); color: #fff; }

.mr-plan-pricing { display: flex; flex-direction: column; gap: 4px; }
.mr-plan-price { font-size: 29px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mr-plan-sub { font-size: 13.5px; color: var(--mr-muted); min-height: 40px; line-height: 1.4; }

.mr-plan-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
	font-size: 14px;
	line-height: 1.4;
}
.mr-plan-features li { display: flex; gap: 10px; align-items: flex-start; }
.mr-plan-features li svg { flex: none; color: var(--mr-green); margin-top: 1px; }

/* Plan CTAs are 48px tall with a 10px radius — taller than the site's other
   buttons, because they are the decision on this page. */
.mr-plan-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	border-radius: 10px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .15s ease, border-color .15s ease;
}
.mr-plan-cta--primary { background: var(--mr-green); color: #fff; }
.mr-plan-cta--primary:hover { background: var(--mr-green-dark); color: #fff; }
.mr-plan-cta--outline { background: transparent; color: var(--mr-green); border-color: var(--mr-green); }
.mr-plan-cta--outline:hover { background: var(--mr-green-soft); }
/* Free stays neutral — a paid plan's outline is what the eye should find. */
.mr-plan-cta--free { background: transparent; color: var(--mr-ink); border-color: var(--mr-line-mid); }
.mr-plan-cta--free:hover { background: var(--mr-bg-tint); }
/* Inert states: their own plan is filled grey; a spent free allowance is
   dashed, so it never reads as the plan they are on. */
.mr-plan-cta--current { background: var(--mr-line-soft); color: var(--mr-muted); font-size: 14px; cursor: default; }
.mr-plan-cta--spent { background: var(--mr-bg-tint); border: 1px dashed var(--mr-line-mid); color: var(--mr-muted); font-size: 14px; cursor: default; }

/* Group tabs and the billing toggle, per design */
.mr-grouptab {
	height: 44px;
	padding: 0 16px;
	border-radius: 10px;
	border: 1px solid var(--mr-line-mid);
	background: var(--mr-surface);
	color: var(--mr-ink);
	font-size: 14px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
}
.mr-grouptab:hover { border-color: var(--mr-green); color: var(--mr-ink); }
.mr-grouptab.is-on { background: var(--mr-green); border-color: var(--mr-green); color: #fff; }

.mr-toggle { display: inline-flex; padding: 4px; gap: 4px; background: #e6eae7; border-radius: 12px; }
.mr-toggle a {
	height: 40px;
	padding: 0 16px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mr-ink);
	text-decoration: none;
}
.mr-toggle a.is-on { background: var(--mr-surface); }
.mr-save-flag { font-size: 12px; font-weight: 700; color: #fff; background: var(--mr-red); padding: 2px 8px; border-radius: 999px; }

/* The usage meter (screen 3b) */
.mr-meterbox {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 20px 24px;
	background: var(--mr-surface);
	border: 1px solid var(--mr-line-soft);
	border-radius: 14px;
}
.mr-meterbox--full { border-color: #f3c4d1; }
.mr-meterbox-plan { display: flex; flex-direction: column; gap: 4px; flex: none; width: 230px; }
.mr-meterbox-label { font-size: 13px; font-weight: 600; color: var(--mr-muted); text-transform: uppercase; letter-spacing: 0.8px; }
.mr .mr-meterbox-name { margin: 0; font-size: 18.5px; font-weight: 700; letter-spacing: -.01em; }
.mr-meterbox-body { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mr-meterbox-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mr-meterbox-count { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mr-meterbox-state { font-size: 13.5px; font-weight: 600; color: var(--mr-green); }
.mr-meterbox--full .mr-meterbox-state { color: #b8002f; }
.mr-meterbox-bar { height: 10px; border-radius: 999px; background: var(--mr-line-faint); overflow: hidden; }
.mr-meterbox-bar span { display: block; height: 100%; background: var(--mr-green); }
.mr-meterbox--full .mr-meterbox-bar span { background: var(--mr-red); }
.mr-meterbox-note { font-size: 13.5px; color: var(--mr-muted); }
@media (max-width: 720px) {
	.mr-meterbox { flex-direction: column; align-items: stretch; gap: 14px; }
	.mr-meterbox-plan { width: auto; }
}

/* -------------------------------------------------------------- Threads */

.mr-thread { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.mr-msg {
	padding: 16px 18px;
	border: 1px solid var(--mr-line);
	border-radius: var(--mr-radius-sm);
	background: var(--mr-surface);
}
.mr-msg--mr { background: var(--mr-green-soft); border-color: var(--mr-green-line); }
.mr-msg-meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 12.5px;
	color: var(--mr-muted);
	margin-bottom: 8px;
}
.mr-msg-meta strong { color: var(--mr-ink); font-weight: 600; }
.mr-msg-body { font-size: 14px; }
.mr-msg-body p { margin: 0 0 8px; }
.mr-attachments { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13.5px; display: grid; gap: 5px; }

/* --------------------------------------------------------------- Layout */

.mr-cols { display: grid; gap: 20px; }
@media (min-width: 840px) { .mr-cols--2-1 { grid-template-columns: 1.7fr 1fr; align-items: start; } }

.mr-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--mr-line-soft);
	font-size: 14px;
}
.mr-summary-row:last-of-type { border-bottom: 0; }
.mr-summary-row--total {
	border-top: 2px solid var(--mr-ink);
	border-bottom: 0;
	margin-top: 6px;
	padding-top: 14px;
	font-size: 16.5px;
	font-weight: 600;
}
.mr-summary-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; }

.mr-methods {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 560px) { .mr-methods { grid-template-columns: 1fr; } }
.mr-methods--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mr-methods--3 .mr-method { padding: 16px 14px; gap: 10px; }
@media (max-width: 860px) { .mr-methods--3 { grid-template-columns: 1fr; } }
.mr-method {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--mr-line-mid);
	border-radius: 12px;
	cursor: pointer;
	background: var(--mr-surface);
	transition: border-color .15s ease, background .15s ease;
}
.mr-method:hover { border-color: var(--mr-green); }
.mr-method input { width: 20px; height: 20px; accent-color: var(--mr-green); margin: 0; flex: none; }
.mr-method-name { font-weight: 600; font-size: 15.5px; display: block; }
.mr-method-note { display: block; font-size: 13.5px; color: var(--mr-muted); font-weight: 400; margin-top: 2px; }

.mr-empty {
	padding: 26px;
	text-align: center;
	color: var(--mr-muted);
	font-size: 14px;
	background: var(--mr-bg);
	border: 1px dashed var(--mr-line);
	border-radius: var(--mr-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	.mr *, .mr *::before, .mr *::after { transition: none !important; }
}

/* ------------------------------------------------- Journey bar (screens 1-5) */

/* The bar is a white strip across the page with its own bottom border, exactly
   as in the design — not a row floating on the page ground. */
.mr-journeybar {
	background: #fff;
	border-bottom: 1px solid var(--mr-line-soft);
	padding: 18px 40px;
	margin: 0 0 44px;
}
@media (max-width: 782px) { .mr-journeybar { padding: 14px 16px; margin-bottom: 28px; } }

.mr-journey {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 1000px;
	flex-wrap: wrap;
}
.mr-journey li { display: flex; align-items: center; gap: 10px; }
.mr-journey-dot {
	width: 26px; height: 26px;
	box-sizing: border-box;
	border-radius: 999px;
	display: grid; place-items: center;
	font-size: 13px; font-weight: 600;
	border: 2px solid var(--mr-line-mid);
	color: var(--mr-faint);
	background: var(--mr-surface);
	flex: none;
}
.mr-journey-name { font-size: 13.5px; color: var(--mr-faint); font-weight: 500; white-space: nowrap; }
.mr-journey-rule { flex-grow: 1; min-width: 20px; height: 2px; background: var(--mr-line); margin: 0 12px; }
.mr-journey li { flex: 1 1 auto; }
.mr-journey li:last-child { flex: 0 0 auto; }
.mr-journey li.is-done .mr-journey-dot { background: var(--mr-green); border-color: var(--mr-green); color: #fff; }
.mr-journey li.is-done .mr-journey-name { color: var(--mr-ink); }
.mr-journey li.is-done + li .mr-journey-rule,
.mr-journey li.is-done .mr-journey-rule { background: var(--mr-green); }
.mr-journey li.is-current .mr-journey-dot { border-color: var(--mr-green); color: var(--mr-green); border-width: 2px; }
.mr-journey li.is-current .mr-journey-name { color: var(--mr-ink); font-weight: 600; }

.mr-saved-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border-radius: 999px;
	background: var(--mr-green-tint);
	color: var(--mr-green);
	font-size: 13.5px;
	font-weight: 500;
}

/* -------------------------------------------------------- Paybill (screen 9) */

.mr-paybill-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--mr-line-soft);
}
.mr-paybill-row:last-child { border-bottom: 0; }
.mr-paybill-row--key { background: var(--mr-green-soft); }
.mr-paybill-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mr-muted);
	margin-bottom: 4px;
}
.mr-paybill-row--key .mr-paybill-label { color: var(--mr-green); }
.mr-paybill-value { font-size: 20.5px; font-weight: 700; letter-spacing: -.01em; }
/* The reference is read off a screen and typed on a keypad, so it is spaced out
   and never allowed to wrap mid-code. */
.mr-paybill-ref { color: var(--mr-green); letter-spacing: .04em; white-space: nowrap; }

.mr-steps-list { counter-reset: s; list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
@media (min-width: 620px) { .mr-steps-list { grid-template-columns: 1fr 1fr; column-gap: 26px; } }
.mr-steps-list li { counter-increment: s; position: relative; padding-left: 34px; font-size: 14px; }
.mr-steps-list li::before {
	content: counter(s);
	position: absolute; left: 0; top: -1px;
	width: 23px; height: 23px;
	border-radius: 999px;
	background: var(--mr-bg-tint);
	color: var(--mr-muted);
	font-size: 12px; font-weight: 600;
	display: grid; place-items: center;
}

.mr-inline-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.mr-inline-row .mr-input { flex: 1 1 220px; max-width: none; margin: 0; }
.mr-inline-form { margin-top: 14px; }

.mr-order-listing {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--mr-bg-tint);
	border-radius: var(--mr-radius-xs);
	margin-bottom: 16px;
	font-size: 13.5px;
}
.mr-order-thumb {
	width: 52px; height: 52px;
	border-radius: var(--mr-radius-xs);
	background: var(--mr-green-tint);
	overflow: hidden;
	flex: none;
	display: block;
}
.mr-order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr-order-listing strong { display: block; margin-bottom: 4px; }

/* ------------------------------------------------ Multi-file document uploads */

.mr-filelist { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.mr-fileitem {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--mr-line-soft);
	border-radius: var(--mr-radius-xs);
	background: var(--mr-bg-tint);
	font-size: 13.5px;
}
.mr-fileitem-thumb {
	width: 44px; height: 44px;
	border-radius: 6px;
	background: var(--mr-green-tint);
	flex: none;
	overflow: hidden;
	display: grid;
	place-items: center;
}
.mr-fileitem-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Anything that is not an image shows its extension instead. */
.mr-fileitem-thumb--doc {
	background: var(--mr-line-faint);
	color: var(--mr-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
}
.mr-fileitem-meta { flex: 1 1 auto; min-width: 0; }
.mr-fileitem-meta strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-fileitem-meta span { font-size: 12.5px; color: var(--mr-muted); }
.mr-fileitem-ok { color: var(--mr-green); font-weight: 600; font-size: 13px; white-space: nowrap; }

.mr-dropzone {
	display: block;
	padding: 28px 20px;
	border: 1.5px dashed var(--mr-line-mid);
	border-radius: var(--mr-radius-sm);
	text-align: center;
	cursor: pointer;
	background: var(--mr-surface);
	transition: border-color .15s ease, background .15s ease;
}
.mr-dropzone:hover { border-color: var(--mr-green); background: var(--mr-green-soft); }
.mr-dropzone strong { display: block; font-size: 14px; margin-bottom: 3px; }
.mr-dropzone span { font-size: 13px; color: var(--mr-muted); }

.mr-reqchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mr-reqchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--mr-green-soft);
	color: var(--mr-green);
	font-size: 12.5px;
	font-weight: 500;
}

/* "Any one of these works" — radio pills rather than a dropdown, so every
   acceptable document is visible at once instead of hidden behind a click. */
.mr-optionpills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.mr-optionpill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 16px;
	border: 1px solid var(--mr-line);
	border-radius: var(--mr-radius-xs);
	background: var(--mr-surface);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.mr-optionpill:hover { border-color: var(--mr-green); }
.mr-optionpill input { accent-color: var(--mr-green); margin: 0; }
.mr-optionpill.is-on { border-color: var(--mr-green); background: var(--mr-green-soft); color: var(--mr-green); }


/* ------------------------------------------------ Journey screens 1–5 */

.mr-page, .mr-journey-page { max-width: 1080px; margin: 0 auto; padding: 26px 20px 60px; }
@media (max-width: 782px) { .mr-page, .mr-journey-page { padding: 18px 16px 44px; } }
.mr-journey-page > .mr-journey { margin-bottom: 26px; }

.mr-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 26px;
}

.mr-side { display: grid; gap: 14px; align-content: start; }
.mr-side .mr-card { padding: 20px; }
.mr-side h3 { margin-bottom: 8px; display: flex; align-items: center; gap: 9px; }
.mr-side h3 svg { color: var(--mr-green); flex: none; }
.mr-saved-chip svg { flex: none; }
.mr-fileitem-ok svg, .mr-reqchip svg { vertical-align: -3px; }

/* 1 · lister type cards */
.mr-typecards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mr-typecard {
	position: relative;
	display: block;
	padding: 22px;
	border: 1.5px solid var(--mr-line);
	border-radius: var(--mr-radius);
	background: var(--mr-surface);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.mr-typecard:hover { border-color: var(--mr-green-line); }
.mr-typecard:has(input:checked), .mr-typecard.is-on { border-color: var(--mr-green); background: var(--mr-green-soft); }
.mr-typecard input { position: absolute; top: 22px; right: 22px; accent-color: var(--mr-green); }
.mr-typecard-icon {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 10px;
	background: var(--mr-line-faint);
	color: var(--mr-ink);
	margin-bottom: 16px;
}
.mr-typecard:has(input:checked) .mr-typecard-icon,
.mr-typecard.is-on .mr-typecard-icon { background: var(--mr-green-line); color: var(--mr-green); }
.mr-typecard:has(input:checked) .mr-typecard-icon { background: var(--mr-green-line); }
.mr-typecard-name { display: block; font-size: 17.5px; font-weight: 600; margin-bottom: 5px; }
.mr-typecard-help { display: block; font-size: 13.5px; color: var(--mr-muted); line-height: 1.5; }
.mr-typecard-needs { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mr-line-soft); }
.mr-typecard-needs-head {
	display: block;
	font-size: 10.5px; font-weight: 600;
	letter-spacing: .13em; text-transform: uppercase;
	color: var(--mr-muted);
	margin-bottom: 8px;
}
.mr-typecard-need {
	display: block;
	font-size: 13.5px;
	color: var(--mr-ink-soft);
	padding-left: 14px;
	position: relative;
	margin-bottom: 4px;
}
.mr-typecard-need::before {
	content: '';
	position: absolute; left: 0; top: 8px;
	width: 5px; height: 5px; border-radius: 999px;
	background: var(--mr-green);
}

.mr-callout {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 17px 20px;
	border: 1px solid var(--mr-line);
	border-radius: var(--mr-radius-sm);
	background: var(--mr-surface);
	font-size: 13.5px;
	color: var(--mr-ink-soft);
	margin-top: 20px;
	line-height: 1.55;
}
.mr-callout-icon {
	flex: none;
	color: var(--mr-green);
	display: grid; place-items: center;
	margin-top: 1px;
}

/* 2 · requirement cards */
.mr-reqcard {
	border: 1px solid var(--mr-line);
	border-radius: var(--mr-radius);
	background: var(--mr-surface);
	padding: 22px;
	margin-bottom: 14px;
}
.mr-reqcard-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.mr-reqcard-top h3 { font-size: 15.5px; }
.mr-reqcard-level { font-size: 12.5px; color: var(--mr-muted); white-space: nowrap; }
.mr-verify-form .mr-input { max-width: 100%; }

.mr-levellist, .mr-gatelist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.mr-levellist li, .mr-gatelist li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; }
.mr-levellist-dot, .mr-gatelist-dot {
	flex: none;
	width: 21px; height: 21px;
	border-radius: 999px;
	border: 1.5px solid var(--mr-line-mid);
	display: grid; place-items: center;
	font-size: 11px;
	color: #fff;
	margin-top: 1px;
}
.mr-levellist li.is-done .mr-levellist-dot,
.mr-gatelist li.is-done .mr-gatelist-dot { background: var(--mr-green); border-color: var(--mr-green); }
.mr-levellist strong, .mr-gatelist strong { display: block; font-weight: 600; }
.mr-gatelist { margin-top: 22px; }

/* 3 · plan tabs */
/* (plan tabs, group tabs and the save flag live in the Plans section above) */

/* 4 · payment methods */
/* Selected gains a 2px green border; the 1px/2px swap is why padding is set on
   both states, so the card does not shift when you pick it. */
.mr-method.is-on, .mr-method:has(input:checked) {
	border: 2px solid var(--mr-green);
	background: var(--mr-green-soft);
	padding: 17px;
}
.mr-method-icon {
	width: 40px; height: 40px;
	border-radius: 10px;
	background: var(--mr-line-faint);
	color: var(--mr-ink);
	display: grid;
	place-items: center;
	flex: none;
}
.mr-method.is-on .mr-method-icon,
.mr-method:has(input:checked) .mr-method-icon { background: var(--mr-green-line); color: var(--mr-green); }
.mr-method input:disabled ~ .mr-method-icon { opacity: .4; }
.mr-linkbtn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--mr-green);
	text-decoration: underline;
	cursor: pointer;
}

.mr-dropzone-icon { display: block; color: var(--mr-green); margin-bottom: 8px; }
.mr-notelist { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.mr-notelist li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--mr-ink-soft); line-height: 1.5; }
.mr-notelist svg { flex: none; color: var(--mr-muted); margin-top: 1px; }
.mr-btn--small svg { margin-right: -2px; }

/* Named upload slots — an ID's front and back sit side by side. */
.mr-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .mr-slots { grid-template-columns: 1fr; } }
.mr-dropzone--slot { padding: 22px 16px; }
.mr-tip { margin-top: 12px; }

/* A selfie is taken, not filed: explanation left, action right. */
.mr-capture {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.mr-capture-intro { font-size: 14px; color: var(--mr-ink-soft); margin: 0; flex: 1 1 260px; }
.mr-capture-btn { position: relative; cursor: pointer; flex: none; }

/* ------------------------------------------------------------ Selfie camera
 * Design 2b (desktop panel) and M3–M6 (full screen on a phone). Colours are
 * the design's own dark palette; type follows the reduced scale. */

html.mr-camera-open, html.mr-camera-open body { overflow: hidden; }

.mr-camera {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(14, 21, 17, .94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
	color: #fff;
}
.mr-camera *, .mr-camera *::before, .mr-camera *::after { box-sizing: border-box; }

.mr-camera-box {
	width: 100%;
	max-width: 520px;
	max-height: 100%;
	overflow: auto;
	background: #18221c;
	border-radius: 18px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.mr-camera-head {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.mr-camera-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: #7fd3a2;
}
.mr-camera-box[data-state="blocked"] .mr-camera-label { color: #f2a7ba; }
.mr-camera-box[data-state="none"] .mr-camera-label { color: #aeb8b2; }
/* The title is the phone's bar heading; on desktop the label does that job,
   but the title stays for screen readers. */
.mr-camera-title {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.mr-camera-x {
	width: 44px; height: 44px;
	border: 0; border-radius: 50%;
	background: #26322b; color: #fff;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	padding: 0;
	flex: none;
}
.mr-camera-x:hover { background: #33423a; }

.mr-camera-body {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* Live and captured */
.mr-camera-stage {
	width: 300px; height: 300px;
	max-width: 100%;
	border-radius: 16px;
	background: #2b3831;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.mr-camera-face { fill: #44564b; display: block; }
.mr-camera-video, .mr-camera-shot {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: none;
}
.mr-camera-video { transform: scaleX(-1); }
.is-streaming .mr-camera-video { display: block; }
.mr-camera-oval {
	position: absolute;
	left: 50%; top: 28px;
	width: 180px; height: 220px;
	margin-left: -90px;
	border: 3px dashed #fff;
	border-radius: 50%;
	opacity: .85;
	pointer-events: none;
}
.mr-camera-mirror {
	position: absolute;
	top: 10px; left: 10px;
	font-size: 12px; font-weight: 600;
	background: rgba(0, 0, 0, .5);
	padding: 3px 8px;
	border-radius: 999px;
}
.mr-camera-box[data-state="captured"] .mr-camera-stage {
	background: #3a4a40;
	border: 3px solid #2fa85e;
}
.mr-camera-box[data-state="captured"] .mr-camera-face { fill: #5e7366; }
.mr-camera-box[data-state="captured"] .mr-camera-shot { display: block; }
.mr-camera-box[data-state="captured"] .mr-camera-oval,
.mr-camera-box[data-state="captured"] .mr-camera-mirror { display: none; }

/* Blocked and unavailable */
.mr-camera-empty {
	width: 300px; height: 200px;
	max-width: 100%;
	border-radius: 16px;
	background: #232e27;
	color: #aeb8b2;
	display: none;
	align-items: center;
	justify-content: center;
}
.mr-camera-heading { display: none; }
.mr-camera-box[data-state="blocked"] .mr-camera-stage,
.mr-camera-box[data-state="none"] .mr-camera-stage { display: none; }
.mr-camera-box[data-state="blocked"] .mr-camera-empty,
.mr-camera-box[data-state="none"] .mr-camera-empty { display: flex; }
.mr-camera-empty-icon { display: flex; }

.mr-camera-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #d5dcd8;
	text-align: center;
	max-width: 320px;
}
.mr-camera-br { display: none; }
.mr-camera-box[data-state="blocked"] .mr-camera-text,
.mr-camera-box[data-state="none"] .mr-camera-text {
	font-size: 14.5px;
	color: #fff;
	max-width: 360px;
}

.mr-camera-foot {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mr-camera-shutter {
	width: 76px; height: 76px;
	border-radius: 50%;
	border: 4px solid #fff;
	background: transparent;
	padding: 5px;
	cursor: pointer;
	display: none;
}
.mr-camera-shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.mr-camera-shutter:hover span { background: #e7ece9; }
.mr-camera-box[data-state="live"] .mr-camera-shutter { display: block; }
.mr-camera-box[data-state="live"]:not(.is-streaming) .mr-camera-shutter { opacity: .45; cursor: wait; }

.mr-camera-actions {
	display: flex;
	gap: 12px;
	width: 100%;
	max-width: 360px;
}
.mr-camera-box[data-state="live"] .mr-camera-actions { display: none; }
.mr-camera-box[data-state="captured"] .mr-camera-actions { max-width: 340px; }
.mr-camera-btn {
	flex: 1;
	height: 50px;
	border-radius: 10px;
	border: 1px solid #5e7366;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	padding: 0 14px;
}
.mr-camera-btn:hover { border-color: #7f978a; }
.mr-camera-btn[hidden] { display: none; }
.mr-camera-btn--primary { border: 0; background: #0b823e; }
.mr-camera-btn--primary:hover { background: #096f35; }
.mr-camera button:focus-visible { outline: 3px solid #7fd3a2; outline-offset: 2px; }

/* Phone: full screen, close on the left, a title in the middle, the actions
   stacked at the bottom within reach of a thumb (M3–M6). */
@media (max-width: 600px) {
	.mr-camera { padding: 0; background: #0e1511; align-items: stretch; }
	.mr-camera-box {
		max-width: none;
		height: 100%;
		border-radius: 0;
		background: #0e1511;
		padding: 0;
		gap: 0;
		justify-content: space-between;
	}
	.mr-camera-head { padding: 14px 16px; }
	.mr-camera-label { display: none; }
	.mr-camera-title {
		position: static; width: auto; height: auto; overflow: visible; clip: auto;
		font-size: 15.5px; font-weight: 600;
		order: 2;
	}
	.mr-camera-x { order: 1; }
	.mr-camera-head::after { content: ''; width: 44px; order: 3; }

	.mr-camera-body { flex: 1 1 auto; gap: 18px; padding: 8px 16px; }
	.mr-camera-stage { width: 100%; height: 440px; max-height: 58vh; border-radius: 20px; }
	.mr-camera-oval { top: 40px; width: 200px; height: 260px; margin-left: -100px; }
	.mr-camera-mirror { top: 12px; left: 12px; padding: 4px 9px; }
	.mr-camera-text { font-size: 14.5px; max-width: none; }
	.mr-camera-br { display: inline; }

	.mr-camera-box[data-state="blocked"] .mr-camera-body,
	.mr-camera-box[data-state="none"] .mr-camera-body { justify-content: center; gap: 20px; padding: 16px 28px; }
	.mr-camera-empty { width: auto; height: auto; background: none; flex-direction: column; gap: 20px; }
	.mr-camera-empty-icon {
		width: 96px; height: 96px; border-radius: 50%;
		background: #232e27; align-items: center; justify-content: center;
	}
	.mr-camera-empty-icon svg { width: 44px; height: 44px; }
	.mr-camera-heading { display: block; margin: 0; font-size: 20.5px; font-weight: 700; color: #fff; }
	.mr-camera-box[data-state="blocked"] .mr-camera-text,
	.mr-camera-box[data-state="none"] .mr-camera-text { color: #d5dcd8; }

	.mr-camera-foot { padding: 12px 16px 36px; }
	.mr-camera-shutter { width: 84px; height: 84px; padding: 6px; margin-bottom: 4px; }
	.mr-camera-actions,
	.mr-camera-box[data-state="captured"] .mr-camera-actions { flex-direction: column; gap: 10px; max-width: none; }
	.mr-camera-btn { flex: none; height: 52px; border-radius: 12px; font-size: 15.5px; }
}

/* ------------------------------------------------------ Plan page layout */

/* The plan screens run 1200px wide in the design, wider than the rest. */
.mr-page--wide { max-width: calc(4 * 330px + 3 * 18px + 48px); padding: 32px 24px 60px; display: flex; flex-direction: column; gap: 20px; }
.mr-plan-intro { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mr-plan-intro h1 { margin: 0; }
.mr-plan-lede { margin: 0; font-size: 14.5px; color: var(--mr-muted); max-width: 60ch; }
.mr-plantabs { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0; }
.mr-plan-group-sub { margin: 0; font-size: 14px; color: var(--mr-muted); }
.mr-matched { color: var(--mr-green-dark); font-weight: 600; }
.mr-callout--plain { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; margin: 0; border: 1px solid var(--mr-line-soft); border-radius: 12px; background: var(--mr-surface); }
.mr-callout--plain p { margin: 0; font-size: 14px; line-height: 1.5; }

@media (max-width: 782px) {
	.mr-page--wide { padding: 20px 16px 44px; gap: 18px; }
	.mr-plan-intro { align-items: flex-start; text-align: left; }
	.mr-plans { grid-template-columns: 1fr; gap: 16px; }
	/* Plans stay in price order on a phone too, Free first (overrides design M7). */
	/* Group tabs become a 2×2 grid; the toggle spans the width. */
	.mr-plantabs { flex-direction: column; align-items: stretch; gap: 12px; }
	.mr-grouptabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.mr-grouptab { justify-content: center; white-space: normal; text-align: center; height: auto; min-height: 50px; padding: 8px 10px; line-height: 1.25; }
	.mr-toggle { display: grid; grid-template-columns: 1fr 1fr; }
	.mr-toggle a { justify-content: center; }
}

/* ------------------------------------------------ Inline field errors (design 14)
 * An error sits next to the thing that caused it, in plain words, with a way
 * forward. Everything else on the form keeps what was entered. */

.mr .mr-fielderror {
	display: flex;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: #b8002f;
}
.mr .mr-fielderror[hidden] { display: none; }
.mr .mr-fielderror svg { flex-shrink: 0; margin-top: 2px; }

.mr-reqcard.has-error { border-color: var(--mr-red-line); }
.mr-reqcard .mr-input[aria-invalid="true"] {
	border: 2px solid var(--mr-red, #dd003b);
}
.mr-reqcard.has-error .mr-dropzone {
	border: 2px dashed var(--mr-red, #dd003b);
	background: #fff7f9;
}
.mr-reqcard.has-error .mr-dropzone-icon { color: #b8002f; }
.mr-reqcard.has-error .mr-capture-btn { border-color: var(--mr-red, #dd003b); }

.mr-filelist--kept .mr-fileitem { background: var(--mr-green-soft); border-color: #cfe6d7; }
.mr-filelist--kept[hidden] { display: none; }

/* ------------------------------------------------ Payment result states (design 4b)
 * Each replaces the payment panel on Checkout and Paybill; the order summary
 * stays beside it. */

.mr .mr-paystate {
	background: #fff;
	border: 1px solid var(--mr-line-soft, #e3e7e4);
	border-radius: 16px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-self: start;
}
.mr .mr-paystate--awaiting { border-color: #f2dda6; }
.mr .mr-paystate--paid     { border-color: #cfe5d7; }
.mr .mr-paystate--failed   { border-color: #f3c4d1; }

.mr .mr-paystate-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: #55605a;
}
.mr .mr-paystate--awaiting .mr-paystate-label { color: #8a5a00; }
.mr .mr-paystate--paid .mr-paystate-label     { color: #086631; }
.mr .mr-paystate--failed .mr-paystate-label   { color: #b8002f; }

.mr .mr-paystate-head { display: flex; gap: 14px; align-items: center; }
.mr .mr-paystate-head h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.mr .mr-paystate-icon {
	width: 48px; height: 48px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: #eef1ef; color: #55605a;
}
.mr .mr-paystate--awaiting .mr-paystate-icon { background: #fff4db; color: #8a5a00; }
.mr .mr-paystate--prompt { border-color: #cfe5d7; }
.mr .mr-paystate--prompt .mr-paystate-label { color: #086631; }
.mr .mr-paystate--prompt .mr-paystate-icon { background: #e6f3ec; color: #0b823e; }
.mr .mr-payerror {
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px solid #f3c4d1;
	border-radius: 10px;
	background: #fce8ee;
	color: #b8002f;
	font-size: 14px;
	line-height: 1.45;
}
.mr .mr-payerror[hidden] { display: none; }
.mr .mr-paystate--paid .mr-paystate-icon     { background: #0b823e; color: #fff; }
.mr .mr-paystate--failed .mr-paystate-icon   { background: #fce8ee; color: #b8002f; }

.mr .mr-paystate-text { margin: 0; font-size: 14.5px; line-height: 1.55; }
.mr .mr-paystate-text strong { font-weight: 600; }
.mr .mr-paystate-code { font-weight: 700 !important; letter-spacing: 1px; }

.mr .mr-paytrack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mr .mr-paytrack li { display: flex; gap: 12px; align-items: center; font-size: 14px; color: #55605a; margin: 0; }
.mr .mr-paytrack-dot {
	width: 24px; height: 24px;
	border-radius: 50%;
	border: 2px solid #c9d0cc;
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.mr .mr-paytrack li.is-done { color: var(--mr-ink); }
.mr .mr-paytrack li.is-done .mr-paytrack-dot { background: #0b823e; border-color: #0b823e; }
.mr .mr-paytrack li.is-now { color: var(--mr-ink); font-weight: 600; }
.mr .mr-paytrack li.is-now .mr-paytrack-dot { border-color: #c98a00; }

.mr .mr-paystate-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mr .mr-paystate-actions .mr-btn { min-height: 48px; padding: 0 22px; font-size: 14.5px; }
.mr .mr-paystate-actions .mr-btn--ghost { border-color: #c9d0cc; font-weight: 500; }
.mr .mr-paystate-actions .mr-link { font-size: 14px; font-weight: 600; }
.mr .mr-inline-action { margin: 0; display: inline-flex; }

/* Page banners (design 14) */
.mr .mr-banner {
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
	border: 1px solid var(--mr-line-soft, #e3e7e4);
	background: #fff;
}
.mr .mr-banner svg { flex-shrink: 0; margin-top: 2px; }
.mr .mr-banner strong { font-weight: 600; }
.mr .mr-banner--wait  { background: #fff9eb; border-color: #f2dda6; }
.mr .mr-banner--wait svg { color: #8a5a00; }

/* A field error inside the M-PESA code / phone rows */
.mr .mr-input--code { letter-spacing: 1px; text-transform: uppercase; }
.mr .mr-input--code::placeholder { letter-spacing: 0; }
.mr .mr-input[aria-invalid="true"] { border: 2px solid var(--mr-red); }

@media (max-width: 782px) {
	.mr .mr-paystate { padding: 22px 18px; }
	.mr .mr-paystate-actions .mr-btn, .mr .mr-inline-action { width: 100%; }
	.mr .mr-inline-action .mr-btn { width: 100%; }
}

/* ------------------------------------------------ Design 14: more patterns */

/* Banners: the remaining colours (wait is defined with the payment states). */
.mr .mr-banner--error   { background: #fff7f9; border-color: #f3c4d1; }
.mr .mr-banner--error svg { color: #b8002f; }
.mr .mr-banner--success { background: var(--mr-green-soft); border-color: #cfe5d7; }
.mr .mr-banner--success svg { color: #0b823e; }
.mr .mr-banner--info    { background: #f5f7f5; }
.mr .mr-banner--info svg { color: #55605a; }
.mr .mr-banner a { font-weight: 600; color: var(--mr-green); }
.mr > .mr-banner, .mr-journey-page > .mr-banner { margin: 18px 0 20px; }

/* Empty states */
.mr .mr-emptystate {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding: 26px 18px;
	background: #f5f7f5;
	border-radius: 12px;
}
.mr .mr-emptystate-icon {
	width: 48px; height: 48px;
	border-radius: 50%;
	background: #e7f3ec;
	color: #0b823e;
	display: flex; align-items: center; justify-content: center;
}
.mr .mr-emptystate-icon.is-done { background: #0b823e; color: #fff; }
.mr .mr-emptystate-title { font-size: 14.5px; font-weight: 600; }
.mr .mr-emptystate-text { font-size: 13.5px; color: #55605a; line-height: 1.45; max-width: 44ch; }
.mr .mr-emptystate .mr-btn { min-height: 44px; margin-top: 2px; }
.mr .mr-emptystate .mr-btn--ghost { background: #fff; border-color: #c9d0cc; }

/* Busy submit button */
.mr .mr-btn.is-busy,
.mr .mr-btn.is-busy:hover { background: #6fae88; border-color: transparent; color: #fff; cursor: progress; opacity: 1; }
.mr .mr-btn--ghost.is-busy, .mr .mr-btn--outline.is-busy { background: #eef1ef; color: #55605a; }
.mr-spin { animation: mr-spin .8s linear infinite; flex-shrink: 0; }
@keyframes mr-spin { to { transform: rotate(360deg); } }

/* Copied */
.mr .mr-btn.is-copied,
.mr .mr-btn.is-copied:hover { background: #e7f3ec; border-color: transparent; color: #086631; font-weight: 700; }

.mr-sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Section swap: cards become skeletons of their own size while the next
   section loads, and nothing inside can be tapped (the region is inert). */
.mr-swapping .mr-plan,
.mr-swapping .mr-card,
.mr-swapping .mr-reqcard,
.mr-swapping .mr-paystate,
.mr-swapping .mr-meterbox,
.mr-swapping .mr-typecard {
	position: relative;
	border-color: transparent !important;
	background: #eef1ef !important;
	box-shadow: none !important;
}
.mr-swapping .mr-plan > *,
.mr-swapping .mr-card > *,
.mr-swapping .mr-reqcard > *,
.mr-swapping .mr-paystate > *,
.mr-swapping .mr-meterbox > *,
.mr-swapping .mr-typecard > * { visibility: hidden; }
.mr-swapping .mr-plan::after,
.mr-swapping .mr-card::after,
.mr-swapping .mr-reqcard::after,
.mr-swapping .mr-paystate::after,
.mr-swapping .mr-meterbox::after,
.mr-swapping .mr-typecard::after {
	content: '';
	position: absolute;
	inset: 14px;
	background:
		linear-gradient(#dce2de, #dce2de) 0 0 / 60% 14px no-repeat,
		linear-gradient(#dce2de, #dce2de) 0 24px / 80% 24px no-repeat,
		linear-gradient(#e3e8e5, #e3e8e5) 0 58px / 90% 10px no-repeat,
		linear-gradient(#e3e8e5, #e3e8e5) 0 78px / 70% 10px no-repeat;
	animation: mr-pulse 1.2s ease-in-out infinite;
}
@keyframes mr-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
	.mr-spin, .mr-swapping *::after { animation: none !important; }
}

/* =====================================================================
 * Screens 5, 6, 7, 10 — Almost live, Verification Centre, Subscription,
 * Fix a document. Values from the design, on the reduced type scale.
 * ===================================================================== */

.mr .mr-panel {
	background: #fff;
	border: 1px solid #e3e7e4;
	border-radius: 14px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.mr .mr-panel > h2 { margin: 0; font-size: 16.5px; font-weight: 600; }

.mr .mr-crumbs { font-size: 13.5px; color: #55605a; display: flex; gap: 8px; align-items: center; margin: 0 0 18px; }
.mr .mr-crumbs a { font-weight: 600; text-decoration: none; color: var(--mr-green); }

/* Status pills shared by every screen here */
.mr .mr-state {
	display: inline-flex; align-items: center;
	font-size: 12px; font-weight: 600;
	padding: 3px 10px; border-radius: 999px;
	white-space: nowrap;
	background: #eef1ef; color: #55605a;
}
.mr .mr-state--approved     { background: #e7f3ec; color: #086631; }
.mr .mr-state--review       { background: #fff4db; color: #8a5a00; }
.mr .mr-state--needs_info,
.mr .mr-state--not_approved { background: #fce8ee; color: #b8002f; }

/* ---------------------------------------------------------- 6 Centre */
.mr-centre { display: flex; flex-direction: column; gap: 22px; }
.mr .mr-centre-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.mr .mr-centre-head h1 { margin: 0 0 6px; font-size: 27px; font-weight: 700; letter-spacing: -.02em; }
.mr .mr-centre-head .mr-lead { margin: 0; font-size: 14.5px; color: #55605a; font-weight: 400; }

.mr .mr-badgepill {
	display: inline-flex; align-items: center; gap: 8px;
	height: 38px; padding: 0 16px; border-radius: 999px;
	background: #0b823e; color: #fff; font-size: 14px; font-weight: 600;
}
.mr .mr-badgepill--pro { background: #086631; }
.mr .mr-badgepill--none { background: #eef1ef; color: #55605a; }

.mr .mr-levelcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mr .mr-levelcard {
	background: #fff; border: 1px solid #e3e7e4; border-radius: 14px; padding: 20px;
	display: flex; flex-direction: column; gap: 10px; margin: 0;
}
.mr .mr-levelcard.is-needs_info { border: 2px solid #dd003b; padding: 19px; }
.mr .mr-levelcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mr .mr-levelcard-n { font-size: 13px; font-weight: 600; color: #55605a; }
.mr .mr-levelcard-name { font-size: 16.5px; font-weight: 600; }
.mr .mr-levelcard-text { font-size: 13.5px; color: #55605a; line-height: 1.45; }

.mr .mr-attention {
	display: flex; gap: 16px; align-items: flex-start;
	padding: 20px 22px; background: #fff; border: 1px solid #f3c4d1; border-radius: 14px;
}
.mr .mr-attention-icon {
	width: 40px; height: 40px; border-radius: 50%;
	background: #fce8ee; color: #b8002f;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mr .mr-attention-body { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mr .mr-attention-body h2 { margin: 0; font-size: 16.5px; font-weight: 600; }
.mr .mr-attention-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.mr .mr-attention-row p { margin: 0; font-size: 14px; line-height: 1.55; }
.mr .mr-attention-row .mr-btn { flex-shrink: 0; min-height: 46px; }

.mr .mr-startcard {
	display: flex; gap: 20px; align-items: center; justify-content: space-between;
	padding: 20px 22px; background: #fff; border: 1px solid #cfe5d7; border-radius: 14px;
}
.mr .mr-startcard h2 { margin: 0 0 4px; font-size: 16.5px; }
.mr .mr-startcard p { margin: 0; font-size: 14px; color: #55605a; }

.mr .mr-centre-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }

.mr .mr-doclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mr .mr-doclist li {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 13px 0; border-bottom: 1px solid #eef1ef; font-size: 14px; margin: 0;
}
.mr .mr-doclist li:last-child { border-bottom: 0; }
.mr .mr-doclist-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mr .mr-doclist-name svg { color: #55605a; flex-shrink: 0; }
.mr .mr-doclist-count { color: #55605a; font-size: 12.5px; margin-left: 6px; }
.mr .mr-doclist-state { font-size: 13px; font-weight: 600; white-space: nowrap; color: #55605a; text-decoration: none; }
.mr .mr-doclist-state--approved { color: #086631; }
.mr .mr-doclist-state--review { color: #8a5a00; }
.mr .mr-doclist-state--needs_info, .mr .mr-doclist-state--not_approved { color: #b8002f; }
.mr a.mr-doclist-state:hover { text-decoration: underline; }

/* Case conversation */
.mr .mr-casepanel { gap: 16px; }
.mr .mr-casepanel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mr .mr-casepanel-head h2 { margin: 0 0 4px; font-size: 16.5px; font-weight: 600; }
.mr .mr-casepanel-sub { font-size: 13.5px; color: #55605a; }
.mr .mr-casepanel-subject { margin: 0; font-weight: 600; font-size: 14.5px; }
.mr .mr-panel-inner { display: flex; flex-direction: column; gap: 16px; }
.mr .mr-bubbles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mr .mr-bubble {
	max-width: 82%; padding: 12px 14px; margin: 0;
	display: flex; flex-direction: column; gap: 4px;
}
.mr .mr-bubble--you  { align-self: flex-end;  background: #e7f3ec; border-radius: 12px 12px 4px 12px; }
.mr .mr-bubble--team { align-self: flex-start; background: #f5f7f5; border-radius: 12px 12px 12px 4px; }
.mr .mr-bubble-body { font-size: 14px; line-height: 1.5; }
.mr .mr-bubble-body p { margin: 0 0 6px; }
.mr .mr-bubble-body p:last-child { margin: 0; }
.mr .mr-bubble-meta { font-size: 12px; color: #55605a; }
.mr .mr-bubble--you .mr-bubble-meta { align-self: flex-end; }
.mr .mr-bubble-files { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; }
.mr .mr-bubble-files li { display: flex; gap: 6px; align-items: center; margin: 0; }
.mr .mr-bubbles-more { font-size: 13px; }
.mr .mr-replyform { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.mr .mr-replyform .mr-label { font-size: 13.5px; font-weight: 600; margin: 0; }
.mr .mr-replyform .mr-textarea { width: 100%; max-width: none; min-height: 84px; }
.mr .mr-replyform-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mr .mr-attachbtn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
	color: #0b823e; font-size: 13.5px; font-weight: 600; cursor: pointer; border-radius: 10px;
}
.mr .mr-attachbtn:hover { background: #f1f9f4; }
.mr .mr-attachbtn:focus-within { outline: 3px solid #cfe5d7; }

/* ---------------------------------------------------------- 10 Fix */
.mr .mr-fix-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.mr .mr-fix-head h1 { margin: 0; font-size: 29px; font-weight: 700; letter-spacing: -.02em; }
.mr .mr-fix-head .mr-lead { margin: 0; font-size: 15.5px; color: #55605a; font-weight: 400; line-height: 1.5; }
.mr .mr-fix-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.mr .mr-fix-main { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.mr .mr-found { border-color: #f3c4d1; gap: 16px; }
.mr .mr-found-top { display: flex; gap: 14px; align-items: flex-start; }
.mr .mr-found-top h2 { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; }
.mr .mr-found-top p { margin: 0; font-size: 14px; line-height: 1.55; }
.mr .mr-found-note { display: flex; gap: 10px; padding: 12px 14px; background: #f5f7f5; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.mr .mr-found-note svg { flex-shrink: 0; margin-top: 2px; color: #55605a; }
.mr .mr-found-note strong { font-weight: 600; }
.mr .mr-found-prev { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.mr .mr-found-thumb {
	width: 72px; height: 92px; border-radius: 8px; background: #fce8ee; border: 2px solid #dd003b;
	display: flex; align-items: center; justify-content: center; text-align: center;
	font-size: 11px; font-weight: 600; color: #b8002f; flex-shrink: 0; padding: 4px;
}
.mr .mr-found-meta { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: #55605a; }
.mr .mr-found-meta strong { font-size: 14px; color: var(--mr-ink); font-weight: 600; }
.mr .mr-found-bad { font-size: 13px; font-weight: 600; color: #b8002f; }

.mr .mr-reupload { gap: 16px; }
.mr .mr-reupload.has-error { border-color: #f3c4d1; }
.mr .mr-fixtips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mr .mr-fixtips li { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: #f1f9f4; border-radius: 10px; font-size: 13.5px; font-weight: 500; margin: 0; }
.mr .mr-fixtips svg { color: #0b823e; flex-shrink: 0; }
.mr .mr-filelist--fix { margin: 0; }
.mr .mr-filelist--fix:empty { display: none; }
.mr .mr-filelist--fix .mr-fileitem { background: #f1f9f4; border-color: #cfe5d7; border-radius: 12px; }
.mr .mr-fileitem-remove {
	width: 44px; height: 44px; border: 0; background: transparent; color: #55605a;
	display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; flex-shrink: 0;
}
.mr .mr-fileitem-remove:hover { background: #e3efe7; color: var(--mr-ink); }
.mr .mr-addphoto {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	height: 56px; width: 100%; border: 2px dashed #c9d0cc; background: #fafbfa; border-radius: 12px;
	cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: #0b823e;
}
.mr .mr-addphoto:hover { border-color: #0b823e; background: #f1f9f4; }
.mr .mr-reupload.has-error .mr-addphoto { border-color: var(--mr-red); background: #fff7f9; }
.mr .mr-fix-main .mr-field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.mr .mr-fix-main .mr-label { font-size: 14px; font-weight: 600; margin: 0; }
.mr .mr-fix-main .mr-optional { font-weight: 500; color: #55605a; }
.mr .mr-fix-main .mr-textarea { width: 100%; max-width: none; }
.mr .mr-fix-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mr .mr-fix-actions .mr-btn { min-height: 48px; padding: 0 24px; font-size: 14.5px; }
.mr .mr-fix-side { display: flex; flex-direction: column; gap: 18px; }
.mr .mr-fix-side .mr-panel > h2 { font-size: 15.5px; }
.mr .mr-nextsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mr .mr-nextsteps li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.mr .mr-nextsteps li > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: #55605a; }
.mr .mr-nextsteps strong { font-size: 14px; font-weight: 600; color: var(--mr-ink); }
.mr .mr-nextsteps-n {
	width: 26px; height: 26px; border-radius: 50%; border: 2px solid #c9d0cc; color: #55605a;
	font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mr .mr-nextsteps li.is-now .mr-nextsteps-n { border-color: #0b823e; color: #0b823e; font-weight: 700; }
.mr .mr-safe { display: flex; gap: 12px; padding: 18px; background: #e7f3ec; border-radius: 14px; }
.mr .mr-safe svg { color: #0b823e; flex-shrink: 0; }
.mr .mr-safe p { margin: 0; font-size: 14px; line-height: 1.5; }
.mr .mr-safe strong { font-weight: 600; }
.mr .mr-help-card { gap: 8px; padding: 18px; }
.mr .mr-help-card strong { font-size: 14px; }
.mr .mr-help-card span { font-size: 13.5px; color: #55605a; line-height: 1.5; }
.mr .mr-help-card .mr-link { font-size: 13.5px; font-weight: 600; }

/* ---------------------------------------------------------- 5 Almost live */
.mr .mr-live { max-width: 920px; margin: 34px auto 0; display: flex; flex-direction: column; gap: 28px; }
.mr .mr-live-head { display: flex; flex-direction: column; gap: 12px; }
.mr .mr-live-head h1 { margin: 0; font-size: clamp(27px, 3.6vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.mr .mr-live-head .mr-lead { margin: 0; font-size: 16.5px; color: #55605a; font-weight: 400; line-height: 1.5; }
.mr .mr-gates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mr .mr-gate { background: #fff; border: 1px solid #e3e7e4; border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.mr .mr-gate.is-done { border-color: #cfe5d7; }
.mr .mr-gate.is-wait { border-color: #f2dda6; }
.mr .mr-gate.is-fix  { border-color: #f3c4d1; }
.mr .mr-gate-top { display: flex; align-items: center; justify-content: space-between; }
.mr .mr-gate-icon {
	width: 44px; height: 44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #fff4db; color: #8a5a00;
}
.mr .mr-gate.is-done .mr-gate-icon { background: #0b823e; color: #fff; }
.mr .mr-gate.is-fix .mr-gate-icon  { background: #fce8ee; color: #b8002f; }
.mr .mr-gate-top .mr-state { font-size: 13px; padding: 4px 10px; }
.mr .mr-gate h2 { margin: 0; font-size: 18.5px; font-weight: 600; }
.mr .mr-gate p { margin: 0; font-size: 14px; color: #55605a; line-height: 1.5; }
.mr .mr-gate .mr-link { font-weight: 600; }
.mr .mr-live-listing {
	background: #fff; border: 1px solid #e3e7e4; border-radius: 14px; padding: 20px;
	display: flex; gap: 20px; align-items: center;
}
.mr .mr-live-thumb {
	width: 150px; height: 100px; border-radius: 10px; background: #d6eddf; flex-shrink: 0; overflow: hidden;
	display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #086631;
}
.mr .mr-live-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr .mr-live-meta { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.mr .mr-live-eyebrow { font-size: 13px; font-weight: 600; color: #55605a; text-transform: uppercase; letter-spacing: .8px; }
.mr .mr-live-meta strong { font-size: 18.5px; font-weight: 600; }
.mr .mr-live-meta > span:last-child { font-size: 14px; color: #55605a; }
.mr .mr-live-pill { font-size: 13px; padding: 6px 12px; flex-shrink: 0; }
.mr .mr-live-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mr .mr-live-actions .mr-btn { min-height: 48px; padding: 0 22px; font-size: 14.5px; }
.mr .mr-live-actions .mr-btn--ghost { border-color: #c9d0cc; font-weight: 500; background: #fff; }

/* ---------------------------------------------------------- 7 Subscription */
.mr-account { display: flex; flex-direction: column; gap: 22px; }
.mr .mr-account > h1 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -.02em; }
.mr .mr-plancard { border-radius: 16px; padding: 26px; gap: 20px; }
.mr .mr-plancard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.mr .mr-plancard-top > div { display: flex; flex-direction: column; gap: 8px; }
.mr .mr-eyebrow-sm { font-size: 13px; font-weight: 600; color: #55605a; text-transform: uppercase; letter-spacing: .8px; }
.mr .mr-plancard h2 { margin: 0; font-size: 22px; font-weight: 700; }
.mr .mr-plancard-sub { font-size: 14.5px; color: #55605a; }
.mr .mr-plancard-pill { font-size: 13px; padding: 6px 12px; flex-shrink: 0; }
.mr .mr-daysbar { display: flex; flex-direction: column; gap: 8px; }
.mr .mr-daysbar-track { height: 10px; border-radius: 999px; background: #eef1ef; overflow: hidden; }
.mr .mr-daysbar-track span { display: block; height: 100%; background: #0b823e; border-radius: 999px; }
.mr .mr-daysbar-labels { display: flex; justify-content: space-between; font-size: 13.5px; color: #55605a; }
.mr .mr-plancard .mr-banner { font-size: 14px; }
.mr .mr-plancard-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mr .mr-plancard-actions .mr-btn { min-height: 48px; padding: 0 22px; font-size: 14.5px; }
.mr .mr-plancard-actions .mr-btn--ghost { border-color: #c9d0cc; font-weight: 500; background: #fff; }

.mr .mr-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.mr .mr-paymethod { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid #e3e7e4; border-radius: 10px; }
.mr .mr-paymethod.is-default { border-color: #cfe5d7; background: #f1f9f4; }
.mr .mr-paymethod-icon {
	width: 40px; height: 40px; border-radius: 10px; background: #eef1ef; color: var(--mr-ink);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mr .mr-paymethod.is-default .mr-paymethod-icon { background: #d6eddf; color: #0b823e; }
.mr .mr-paymethod-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mr .mr-paymethod-text strong { font-size: 14px; font-weight: 600; }
.mr .mr-paymethod-text span { font-size: 13px; color: #55605a; }
.mr .mr-paymethod-flag { font-size: 12px; font-weight: 600; color: #086631; }

.mr .mr-badgeline { display: flex; align-items: center; gap: 12px; }
.mr .mr-badgeline .mr-badgepill { height: 36px; padding: 0 14px; font-size: 13.5px; }
.mr .mr-probox { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #f5f7f5; border-radius: 10px; }
.mr .mr-probox strong { font-size: 14px; font-weight: 600; }
.mr .mr-probox ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.mr .mr-probox li { display: flex; gap: 10px; align-items: center; margin: 0; }
.mr .mr-probox a { font-weight: 600; color: var(--mr-green); text-decoration: none; }
.mr .mr-probox-dot {
	width: 16px; height: 16px; border-radius: 50%; border: 2px solid #c9d0cc; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.mr .mr-probox li.is-done .mr-probox-dot { border: 0; color: #0b823e; }

.mr .mr-billtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.mr .mr-billtable th {
	text-align: left; color: #55605a; font-size: 13px; font-weight: 600;
	padding: 10px 12px 10px 0; border-bottom: 1px solid #e3e7e4; background: none;
}
.mr .mr-billtable td { padding: 14px 12px 14px 0; border-bottom: 1px solid #eef1ef; vertical-align: middle; }
.mr .mr-billtable tr:last-child td { border-bottom: 0; }
.mr .mr-billtable .mr-num { text-align: right; padding-right: 0; }
.mr .mr-billtable-amt { font-weight: 600; white-space: nowrap; }
.mr .mr-billtable .mr-link { font-weight: 600; }

/* ---------------------------------------------------------- Small screens */
@media (max-width: 900px) {
	.mr .mr-centre-grid, .mr .mr-fix-grid, .mr .mr-account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
	.mr .mr-levelcards, .mr .mr-gates, .mr .mr-fixtips { grid-template-columns: 1fr; }
	.mr .mr-attention { flex-direction: column; }
	.mr .mr-attention-row { flex-direction: column; align-items: stretch; }
	.mr .mr-startcard { flex-direction: column; align-items: stretch; }
	.mr .mr-live-listing { flex-direction: column; align-items: flex-start; }
	.mr .mr-live-thumb { width: 100%; height: 160px; }
	.mr .mr-live-actions .mr-btn, .mr .mr-plancard-actions .mr-btn { width: 100%; }
	.mr .mr-plancard-top { flex-direction: column; }
	.mr .mr-fix-actions { flex-direction: column-reverse; align-items: stretch; }
	.mr .mr-billtable thead { display: none; }
	.mr .mr-billtable tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid #eef1ef; }
	.mr .mr-billtable td { padding: 0; border: 0; }
	.mr .mr-billtable td[data-label="Description"] { grid-column: 1 / -1; font-weight: 600; }
	.mr .mr-bubble { max-width: 92%; }
}

.mr .mr-altline { margin: 0; font-size: 13.5px; color: #55605a; }
.mr .mr-altline .mr-linkbtn { font-weight: 600; font-size: 13.5px; }

/* =====================================================================
 * Phones — designs M1–M14 (≤ 600px). Desktop markup, rearranged: a
 * segmented step bar, one column, full-width controls, and the main action
 * pinned to the bottom of the screen within thumb reach.
 * ===================================================================== */

.mr-mbar, .mr-levelchips, .mr-ordermini, .mr-typecard-count, .mr-phone-only { display: none; }
.mr .mr-card--why > summary { list-style: none; cursor: default; }
.mr .mr-card--why > summary::-webkit-details-marker { display: none; }
.mr-paybar { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.mr-paybar-note { display: none; }

@media (max-width: 600px) {
	.mr-desktop-only { display: none !important; }
	.mr-phone-only { display: inline; }

	.mr-page, .mr-journey-page { padding: 0 0 24px; }
	.mr-journey-page > *:not(.mr-journeybar):not(.mr-actions--sticky),
	.mr-page > *:not(.mr-journeybar):not(.mr-ordermini) { margin-left: 16px; margin-right: 16px; }
	.mr .mr-cols { display: flex; flex-direction: column; gap: 18px; margin-top: 20px !important; }

	.mr h1 { font-size: 23px; letter-spacing: -.02em; line-height: 1.15; }
	.mr .mr-lead { font-size: 14.5px; font-weight: 400; color: #55605a; }

	/* Step bar (M1–M11) */
	.mr-journeybar { padding: 12px 16px; margin: 0; border-bottom: 1px solid #e3e7e4; }
	.mr-journeybar .mr-journey { display: none; }
	.mr-mbar { display: flex; flex-direction: column; gap: 8px; }
	.mr-mbar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
	.mr-mbar-top strong { font-weight: 600; }
	.mr-mbar-top span { color: #55605a; }
	.mr-mbar-segs { display: grid; grid-template-columns: repeat(var(--mr-segs, 6), minmax(0, 1fr)); gap: 4px; }
	.mr-mbar-segs span { height: 4px; border-radius: 2px; background: #d5dbd7; }
	.mr-mbar-segs span.is-on { background: #0b823e; }
	.mr-journey-page > .mr-banner, .mr > .mr-banner { margin: 14px 16px 0; }

	/* Sticky bottom action bar */
	.mr .mr-actions--sticky {
		position: sticky; bottom: 0; z-index: 20;
		display: flex; flex-direction: column-reverse; align-items: stretch; gap: 10px;
		margin: 22px -16px 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
		background: #fff; border-top: 1px solid #e3e7e4; box-shadow: 0 -4px 16px rgba(21,32,26,.06);
	}
	.mr .mr-actions--sticky > span:empty { display: none; }
	.mr .mr-actions--sticky .mr-btn:not(.mr-btn--ghost) { width: 100%; min-height: 52px; font-size: 15.5px; border-radius: 12px; }
	.mr .mr-actions--sticky .mr-btn--ghost {
		background: none; border: 0; min-height: 32px; padding: 0; color: #0b823e; font-weight: 600; font-size: 14px; justify-content: center;
	}
	.mr .mr-live-actions.mr-actions--sticky { flex-direction: column; }
	.mr .mr-live-actions.mr-actions--sticky .mr-btn--ghost + .mr-btn--ghost { display: none; }

	/* M1 · who's listing */
	.mr .mr-saved-chip { font-size: 12.5px; padding: 5px 11px; }
	.mr-typecards { grid-template-columns: 1fr; gap: 12px; }
	.mr-typecard { padding: 16px; display: grid; grid-template-columns: 44px 1fr 22px; column-gap: 14px; align-items: center; border-radius: 14px; }
	.mr-typecard input { position: static; width: 22px; height: 22px; grid-column: 3; grid-row: 1 / span 2; }
	.mr-typecard-icon { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; margin: 0; }
	.mr-typecard-name { grid-column: 2; font-size: 16.5px; margin: 0; }
	.mr-typecard-help { grid-column: 2; font-size: 13.5px; line-height: 1.4; }
	.mr-typecard-count, .mr-typecard-needs { grid-column: 1 / -1; }
	.mr-typecard-count { display: block; margin-top: 12px; font-size: 13.5px; color: #55605a; }
	.mr-typecard:not(.is-on):not(:has(input:checked)) .mr-typecard-needs { display: none; }
	.mr-typecard.is-on .mr-typecard-count, .mr-typecard:has(input:checked) .mr-typecard-count { display: none; }
	.mr-typecard-needs { margin-top: 14px; padding-top: 12px; border-top-color: #cfe5d7; }
	.mr-typecard-need { font-size: 14px; }
	.mr .mr-callout { font-size: 14px; }

	/* M2 · verify */
	.mr-levelchips { display: flex; gap: 6px; margin-top: 16px; }
	.mr-levelchip { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid #e3e7e4; }
	.mr-levelchip strong { font-size: 11.5px; font-weight: 700; color: #55605a; display: flex; align-items: center; gap: 4px; }
	.mr-levelchip span { font-size: 12.5px; }
	.mr-levelchip.is-done { background: #e7f3ec; border-color: #e7f3ec; }
	.mr-levelchip.is-done strong { color: #086631; }
	.mr-levelchip.is-asked { border: 2px solid #0b823e; padding: 9px; }
	.mr-levelchip.is-asked strong { color: #0b823e; }
	.mr .mr-reqcard { padding: 18px; border-radius: 14px; }
	.mr .mr-reqcard-top h3 { font-size: 16.5px; }
	.mr-slots { grid-template-columns: 1fr; gap: 10px; }
	.mr .mr-dropzone--slot {
		display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; text-align: left;
		padding: 14px; border-radius: 12px;
	}
	.mr .mr-dropzone--slot .mr-dropzone-icon { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 10px; background: #eef1ef; display: flex; align-items: center; justify-content: center; margin: 0; }
	.mr .mr-dropzone--slot strong { font-size: 14.5px; margin: 0; }
	.mr .mr-dropzone--slot span:not(.mr-dropzone-icon) { font-size: 13px; }
	.mr .mr-optionpills { flex-direction: column; }
	.mr .mr-optionpill { width: 100%; min-height: 50px; border-radius: 10px; }
	.mr .mr-capture { flex-direction: column; align-items: stretch; }
	.mr .mr-capture-btn { width: 100%; min-height: 52px; justify-content: center; border-radius: 12px; }
	.mr .mr-side { gap: 12px; }
	.mr .mr-card--nowait { background: #e7f3ec; border-color: #e7f3ec; padding: 14px; }
	.mr .mr-card--nowait h3 { font-size: 14.5px; margin-bottom: 4px; }
	.mr .mr-card--nowait p { color: #15201a; }
	.mr .mr-card--why { padding: 0; }
	.mr .mr-card--why > summary { display: flex; align-items: center; min-height: 52px; padding: 0 16px; cursor: pointer; }
	.mr .mr-card--why > summary h3 { margin: 0; font-size: 14.5px; flex: 1; }
	.mr .mr-card--why > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid #55605a; border-bottom: 2px solid #55605a; transform: rotate(45deg); margin: -4px 4px 0 0; }
	.mr .mr-card--why[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
	.mr .mr-card--why > p { padding: 0 16px 16px; margin: 0; }

	/* M7 · plans */
	.mr .mr-plan { padding: 20px; border-radius: 16px; }
	.mr .mr-plan-cta { min-height: 50px; }

	/* M8 / M9 · checkout and Paybill */
	.mr-ordermini { display: block; background: #fff; border-bottom: 1px solid #e3e7e4; }
	.mr-ordermini > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
	.mr-ordermini > summary::-webkit-details-marker { display: none; }
	.mr-ordermini-what { display: flex; flex-direction: column; min-width: 0; }
	.mr-ordermini-what strong { font-weight: 600; font-size: 14px; }
	.mr-ordermini-what span { font-size: 12.5px; color: #55605a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.mr-ordermini-amt { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15.5px; white-space: nowrap; }
	.mr-ordermini[open] .mr-ordermini-amt svg { transform: rotate(180deg); }
	.mr-ordermini-body { padding: 0 16px 14px; }
	.mr-ordermini-body .mr-ordersum { display: block !important; border: 0; padding: 0; box-shadow: none; }
	.mr-ordermini-body .mr-ordersum h3 { display: none; }
	.mr .mr-cols > .mr-ordersum { display: none; }

	.mr .mr-methods { grid-template-columns: 1fr; }
	.mr .mr-method { padding: 16px; border-radius: 14px; }
	.mr .mr-paybar {
		position: sticky; bottom: 0; z-index: 20; margin: 18px -18px -18px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
		background: #fff; border-top: 1px solid #e3e7e4; box-shadow: 0 -4px 16px rgba(21,32,26,.06); border-radius: 0 0 14px 14px;
	}
	.mr .mr-paybar .mr-btn { min-height: 52px; border-radius: 12px; font-size: 15.5px; }
	.mr-paybar-note { display: block; text-align: center; font-size: 12.5px; color: #55605a; }
	.mr input.mr-input[type="tel"], .mr .mr-input--code { height: 54px; font-size: 16px; }
	.mr .mr-inline-row { flex-direction: column; align-items: stretch; }
	.mr .mr-inline-row .mr-btn { min-height: 52px; width: 100%; }

	/* Paybill: the account number is the hero (M9) */
	.mr .mr-paybill { display: flex; flex-direction: column; background: none; border: 0; box-shadow: none; gap: 12px; overflow: visible; }
	.mr .mr-paybill-row { background: #fff; border: 1px solid #e3e7e4; border-radius: 14px; padding: 14px 16px; }
	.mr .mr-paybill-row--key {
		order: -1; flex-direction: column; align-items: stretch; gap: 14px;
		background: #0b823e; border-color: #0b823e; color: #fff; border-radius: 16px; padding: 20px;
	}
	.mr .mr-paybill-row--key .mr-paybill-label { color: #d6eddf; font-size: 12px; }
	.mr .mr-paybill-row--key .mr-paybill-ref { color: #fff; font-size: clamp(26px, 9vw, 38px); letter-spacing: 2px; white-space: normal; word-break: break-all; }
	.mr .mr-paybill-row--key .mr-btn { width: 100%; min-height: 50px; background: #fff; color: #0b823e; border-color: #fff; justify-content: center; border-radius: 12px; }
	.mr .mr-paybill-value { font-size: 20.5px; }
	.mr .mr-steps-list { grid-template-columns: 1fr; }

	/* M10 · checking payment and the other result states */
	.mr .mr-paystate { padding: 20px 16px; }
	.mr .mr-paystate-head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.mr .mr-paystate-icon { width: 64px; height: 64px; }
	.mr .mr-paystate-icon svg { width: 30px; height: 30px; }
	.mr .mr-paystate-head h1 { font-size: 23px; }
	.mr .mr-paystate-actions { flex-direction: column; align-items: stretch; }
	.mr .mr-paystate-actions .mr-link { text-align: center; min-height: 36px; display: flex; align-items: center; justify-content: center; }

	/* M11 · almost live */
	.mr .mr-live { margin-top: 20px; gap: 18px; }
	.mr .mr-live-head h1 { font-size: 23px; }
	.mr .mr-gates { gap: 10px; }
	.mr .mr-gate { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; row-gap: 4px; padding: 16px; }
	.mr .mr-gate-top { grid-row: 1 / span 2; align-items: flex-start; }
	.mr .mr-gate-top .mr-state { display: none; }
	.mr .mr-gate-icon { width: 36px; height: 36px; }
	.mr .mr-gate-icon svg { width: 18px; height: 18px; }
	.mr .mr-gate h2 { font-size: 15.5px; }
	.mr .mr-live-listing { padding: 0; overflow: hidden; gap: 0; }
	.mr .mr-live-thumb { width: 100%; height: 150px; border-radius: 0; }
	.mr .mr-live-meta { padding: 14px 16px 0; }
	.mr .mr-live-eyebrow { display: none; }
	.mr .mr-live-meta strong { font-size: 15.5px; }
	.mr .mr-live-pill { margin: 10px 16px 14px; }

	/* M12 · Verification Centre */
	.mr-centre { gap: 16px; }
	.mr .mr-centre-head { flex-wrap: nowrap; }
	.mr .mr-centre-head h1 { font-size: 23px; margin: 0; }
	.mr .mr-centre-head .mr-lead { display: none; }
	.mr .mr-badgepill { height: 34px; padding: 0 12px; font-size: 13px; flex-shrink: 0; }
	.mr .mr-levelcards { grid-template-columns: 1fr; gap: 0; background: #fff; border: 1px solid #e3e7e4; border-radius: 14px; overflow: hidden; }
	.mr .mr-levelcard { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n pill" "name pill" "text pill"; row-gap: 2px; border: 0; border-bottom: 1px solid #eef1ef; border-radius: 0; padding: 14px 16px; }
	.mr .mr-levelcard:last-child { border-bottom: 0; }
	.mr .mr-levelcard.is-needs_info { border: 0; border-bottom: 1px solid #eef1ef; padding: 14px 16px; }
	.mr .mr-levelcard-top { display: contents; }
	.mr .mr-levelcard-n { grid-area: n; font-size: 11.5px; font-weight: 700; }
	.mr .mr-levelcard-top .mr-state { grid-area: pill; align-self: start; }
	.mr .mr-levelcard-name { grid-area: name; font-size: 15.5px; }
	.mr .mr-levelcard-text { grid-area: text; font-size: 12.5px; }
	.mr .mr-attention { padding: 16px; gap: 12px; }
	.mr .mr-attention-icon { display: none; }
	.mr .mr-attention-row .mr-btn { width: 100%; min-height: 48px; }
	.mr .mr-panel { padding: 16px; border-radius: 14px; }
	.mr .mr-casepanel-head .mr-btn--small { min-height: 44px; }
	.mr .mr-replyform-row .mr-btn { min-height: 44px; }

	/* M13 · fix a document */
	.mr .mr-crumbs { margin-bottom: 12px; }
	.mr .mr-crumbs > span { display: none; }
	.mr .mr-crumbs > a::before { content: '‹ '; }
	.mr .mr-fix-head h1 { font-size: 23px; }
	.mr .mr-fix-head .mr-lead { font-size: 14px; }
	.mr .mr-fix-grid { gap: 18px; }
	.mr .mr-fixtips { grid-template-columns: 1fr; gap: 8px; }
	.mr .mr-fixtips li { background: none; padding: 0; font-size: 14px; }
	.mr .mr-found-thumb { width: 52px; height: 66px; font-size: 0; }
	.mr .mr-found-meta span:not(.mr-found-bad) { display: none; }
	.mr .mr-fix-actions {
		position: sticky; bottom: 0; z-index: 20; margin: 0 -16px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
		flex-direction: column-reverse; align-items: stretch; gap: 10px;
		background: #fff; border-top: 1px solid #e3e7e4; box-shadow: 0 -4px 16px rgba(21,32,26,.06);
	}
	.mr .mr-fix-actions .mr-btn:not(.mr-btn--ghost) { min-height: 52px; border-radius: 12px; }
	.mr .mr-fix-actions .mr-btn--ghost { background: none; border: 0; min-height: 32px; color: #0b823e; font-weight: 600; }
	.mr .mr-fix-side .mr-panel:first-child { display: none; }

	/* M14 · subscription */
	.mr .mr-account > h1 { font-size: 23px; }
	.mr .mr-plancard { padding: 18px 16px; gap: 16px; }
	.mr .mr-plancard-top { flex-direction: row; }
	.mr .mr-plancard h2 { font-size: 19px; }
	.mr .mr-plancard-sub { font-size: 13.5px; }
	.mr .mr-plancard-pill { font-size: 12px; padding: 4px 10px; }
	.mr .mr-plancard-actions { flex-direction: column; }
	.mr .mr-plancard-actions .mr-btn { width: 100%; min-height: 50px; }
	.mr .mr-account-grid { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 16px; }
	.mr .mr-billtable { font-size: 13.5px; }
}

@media (max-width: 600px) { .mr .mr-verify-form { margin-top: 16px; } }

/* ------------------------------------------------ Currency (KES / USD) */

.mr .mr-toggle--cur { flex: none; }
.mr .mr-toggle--cur a { min-width: 68px; justify-content: center; }
.mr .mr-curnote { margin: 12px 0 0; font-size: 13.5px; color: var(--mr-muted); max-width: 70ch; }
.mr .mr-plan-alt { display: block; font-size: 13px; color: var(--mr-muted); margin-top: 2px; }
.mr .mr-curswitch { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; flex-wrap: wrap; }
.mr .mr-curswitch-label { font-size: 14px; font-weight: 600; }
.mr .mr-paypanel[hidden] { display: none; }
.mr .mr-cardbrands { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.mr .mr-cardbrands li {
	font-size: 12.5px; font-weight: 600; color: var(--mr-muted);
	border: 1px solid var(--mr-line); border-radius: 6px; padding: 4px 10px; margin: 0;
}
@media (max-width: 600px) {
	.mr .mr-curswitch { justify-content: space-between; }
	.mr .mr-toggle--cur { width: auto; }
}

.mr .mr-paywait { margin-top: 16px; border-color: #f2dda6; background: #fff9eb; }
.mr .mr-paywait h3 { margin: 0 0 6px; }
.mr .mr-paywait-links { margin: 12px 0 0; font-size: 14px; }

.mr .mr-backrow { margin: 0 0 10px; }
.mr .mr-back { font-size: 14px; font-weight: 600; color: var(--mr-green); text-decoration: none; }
.mr .mr-back:hover { text-decoration: underline; }

/* ------------------------------------------------ Editing while under review */
.mr .mr-doclist-end { display: inline-flex; align-items: center; gap: 12px; }
.mr .mr-doclist-edit { font-size: 13px; font-weight: 600; color: var(--mr-green); text-decoration: none; cursor: pointer; white-space: nowrap; }
.mr .mr-doclist-edit:hover { text-decoration: underline; }
.mr .mr-doclist--details { border-top: 1px solid #eef1ef; }
.mr .mr-doclist--details li { display: block; padding: 0; }
.mr .mr-detailedit > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; cursor: pointer; }
.mr .mr-detailedit > summary::-webkit-details-marker { display: none; }
.mr .mr-detailedit-form { margin: 0 0 14px; }
.mr .mr-detailedit-form .mr-input { max-width: none; }
.mr .mr-found--edit { border-color: #f2dda6; }
.mr .mr-found--edit .mr-attention-icon { background: #fff4db; color: #8a5a00; }
.mr .mr-found--edit .mr-found-thumb { background: #fff4db; border-color: #e8c467; color: #8a5a00; }
.mr .mr-found--edit .mr-found-bad { color: #8a5a00; }

/* Checkout on its own (no step tracker): sit in the middle of the screen
   rather than tight under the site header. */
.mr.mr-page--centred {
	min-height: calc(100vh - 220px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 112px;
	padding-bottom: 96px;
}
@media (max-width: 1100px) { .mr.mr-page--centred { padding-top: 64px; padding-bottom: 64px; } }
.mr.mr-page--centred > .mr-cols { margin-top: 0 !important; }
@media (max-width: 600px) {
	.mr.mr-page--centred { min-height: 0; display: block; padding-top: 20px; padding-bottom: 24px; }
}

/* ------------------------------------------------------------------
 * Listings held back — always name the reason (design 14)
 * --------------------------------------------------------------- */
.mr .mr-held { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.mr .mr-held-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.mr .mr-held-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.mr .mr-heldlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mr .mr-heldrow {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid #eef1ef;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.mr a.mr-heldrow:hover, .mr a.mr-heldrow:focus-visible { border-color: #0b823e; background: #f6fbf8; }
.mr .mr-heldthumb {
	width: 56px;
	height: 40px;
	border-radius: 6px;
	background: #d6eddf;
	flex-shrink: 0;
	overflow: hidden;
}
.mr .mr-heldthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr .mr-heldtitle {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mr .mr-heldpill {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.mr .mr-heldpill--wait  { color: #8a5a00; background: #fff4db; }
.mr .mr-heldpill--bad   { color: #b8002f; background: #fce8ee; }
.mr .mr-heldpill--muted { color: #55605a; background: #eef1ef; }
@media (max-width: 600px) {
	.mr .mr-heldrow { flex-wrap: wrap; }
	.mr .mr-heldtitle { flex-basis: calc(100% - 68px); white-space: normal; }
	.mr .mr-heldpill { margin-left: 68px; }
}

/* ------------------------------------------------------------------
 * Payment method logos
 * --------------------------------------------------------------- */
.mr .mr-method { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.mr .mr-method-logos { display: inline-flex; align-items: center; gap: 8px; grid-column: 3; grid-row: 1; }
.mr .mr-method-text { grid-column: 2; grid-row: 1; min-width: 0; }
.mr .mr-paylogo { display: block; width: auto; max-width: none; height: 24px; }
.mr .mr-paylogo--mpesa { height: 38px; margin: -4px 0; }
.mr .mr-paylogo--airtel { height: 30px; }
.mr .mr-paylogo--visa { height: 16px; }
.mr .mr-paylogo--mastercard { height: 24px; }
/* Three side by side: radio and logo on top, name underneath. */
@media (min-width: 861px) {
	.mr .mr-methods--3 .mr-method { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; }
	.mr .mr-methods--3 .mr-method-logos { grid-column: 2; grid-row: 1; justify-self: end; min-height: 30px; }
	.mr .mr-methods--3 .mr-method-text { grid-column: 1 / -1; grid-row: 2; }
}
.mr .mr-cardbrands .mr-cardbrand-logo { display: inline-flex; align-items: center; background: #fff; }
.mr .mr-cardbrands .mr-paylogo--visa { height: 13px; }
.mr .mr-cardbrands .mr-paylogo--mastercard { height: 18px; }

/* Plan fit and upgrade notes on the plan cards */
.mr .mr-plan-note { margin: 0; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; line-height: 1.45; font-weight: 500; }
.mr .mr-plan-note--bad  { color: #b8002f; background: #fce8ee; }
.mr .mr-plan-note--good { color: #086631; background: #e6f3ec; }

/* ------------------------------------------------------------------
 * Discount codes
 * --------------------------------------------------------------- */
.mr .mr-coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px dashed #b9d9c6;
	border-radius: 12px;
	background: #f6fbf8;
}
.mr .mr-coupon.is-applied { border-style: solid; border-color: #cfe5d7; background: #e6f3ec; }
.mr .mr-coupon-text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: #55605a; }
.mr .mr-coupon-text strong { font-size: 15.5px; font-weight: 600; color: #15201a; }
.mr .mr-coupon.is-applied .mr-coupon-text strong { color: #086631; }
.mr .mr-coupon-tick {
	width: 28px; height: 28px; border-radius: 50%; background: #0b823e; color: #fff;
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mr .mr-coupon-btn { min-height: 44px; padding: 0 18px; font-size: 14.5px; border-color: #0b823e; color: #0b823e; background: #fff; flex-shrink: 0; }
.mr .mr-coupon-label { flex: 1 1 100%; font-size: 14px; font-weight: 600; color: #15201a; }
.mr .mr-coupon-row { flex: 1 1 100%; display: flex; gap: 10px; }
.mr .mr-coupon-row .mr-input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: 1px; }
.mr .mr-coupon .mr-fielderror { flex: 1 1 100%; }
.mr .mr-summary-row--saving span { color: #086631; font-weight: 600; }

.mr .mr-offer {
	display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
	border-color: #cfe5d7; background: #f6fbf8; margin-bottom: 16px;
}
.mr .mr-offer-text { flex: 1 1 320px; min-width: 0; }
.mr .mr-offer-text h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: #086631; }
.mr .mr-offer-text .mr-hint { margin: 0; }
.mr .mr-offer-code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mr .mr-offer-code code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; font-weight: 700; letter-spacing: 2px;
	padding: 10px 14px; border: 1px dashed #0b823e; border-radius: 10px; background: #fff; color: #15201a;
}
.mr .mr-offer-code .mr-btn { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
@media (max-width: 600px) {
	.mr .mr-offer-code { width: 100%; }
	.mr .mr-offer-code code { flex: 1 1 100%; text-align: center; }
	.mr .mr-offer-code .mr-btn { flex: 1 1 0; }
	.mr .mr-coupon-btn { flex: 1 1 100%; }
	.mr .mr-coupon-row { flex-wrap: wrap; }
}

/* A plan's own name, beside its category, in brand green: "Residential · Agency". */
.mr-planword { color: #0b823e; }

/* "Almost live" with subscriptions off: one gate, full width. */
.mr .mr-gates--one { grid-template-columns: 1fr; }

/* ------------------------------------------------------------------
 * Realtors directory and profile
 * --------------------------------------------------------------- */
.mr.mr-dir { max-width: 1180px; margin: 0 auto; padding: 40px 24px 64px; display: flex; flex-direction: column; gap: 22px; }
.mr .mr-dir-head { display: flex; flex-direction: column; gap: 10px; }
.mr .mr-dir-head h1 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.mr .mr-dir-head .mr-lead { margin: 0; max-width: 680px; }
.mr .mr-dir-search { display: flex; gap: 10px; max-width: 560px; margin-top: 6px; }
.mr .mr-dir-search .mr-input { flex: 1 1 auto; min-width: 0; }
.mr .mr-dir-search .mr-btn { flex-shrink: 0; }

.mr .mr-dir-types { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #eef1ef; border-radius: 12px; align-self: flex-start; }
.mr .mr-dir-type { padding: 9px 16px; border-radius: 9px; font-size: 14px; font-weight: 600; color: #55605a; text-decoration: none; }
.mr .mr-dir-type:hover { color: #15201a; }
.mr .mr-dir-type.is-on { background: #fff; color: #15201a; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.mr .mr-dir-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.mr .mr-dir-cat {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #dfe5e1; border-radius: 999px;
	background: #fff; color: #15201a; font-size: 14px; font-weight: 500; text-decoration: none;
}
.mr .mr-dir-cat span { font-size: 12.5px; font-weight: 600; color: #55605a; background: #eef1ef; border-radius: 999px; padding: 1px 8px; }
.mr .mr-dir-cat:hover { border-color: #0b823e; }
.mr .mr-dir-cat.is-on { background: #0b823e; border-color: #0b823e; color: #fff; }
.mr .mr-dir-cat.is-on span { background: rgba(255,255,255,.22); color: #fff; }

.mr .mr-dir-group { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.mr .mr-dir-grouphead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.mr .mr-dir-grouphead h2 { margin: 0; font-size: 21px; font-weight: 700; }
.mr .mr-dir-grouphead .mr-hint { margin: 2px 0 0; display: block; }
.mr .mr-dir-grouphead .mr-link { font-weight: 600; white-space: nowrap; }

.mr .mr-dir-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mr .mr-dir-card {
	display: flex; gap: 14px; align-items: flex-start; height: 100%; box-sizing: border-box; padding: 16px;
	background: #fff; border: 1px solid #e3e7e4; border-radius: 14px; color: inherit; text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mr .mr-dir-card:hover, .mr .mr-dir-card:focus-visible { border-color: #0b823e; box-shadow: 0 6px 18px rgba(11,130,62,.10); transform: translateY(-1px); }
.mr .mr-dir-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #eef1ef; }
.mr .mr-dir-who { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mr .mr-dir-name { font-size: 16px; font-weight: 600; color: #15201a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr .mr-dir-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: #55605a; }
.mr .mr-dir-badge { display: inline-flex; align-items: center; gap: 4px; color: #0b823e; font-weight: 600; }
.mr .mr-dir-badge.is-pro { color: #086631; }
.mr .mr-dir-count { font-size: 13.5px; color: #15201a; }
.mr .mr-dir-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mr .mr-dir-chips span { font-size: 12px; color: #55605a; background: #f2f5f3; border-radius: 6px; padding: 2px 8px; }

.mr .mr-dir-pages { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.mr .mr-dir-pages a { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dfe5e1; border-radius: 10px; color: #15201a; text-decoration: none; font-weight: 600; }
.mr .mr-dir-pages a.is-on { background: #0b823e; border-color: #0b823e; color: #fff; }

@media (max-width: 1000px) { .mr .mr-dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.mr.mr-dir { padding: 24px 16px 44px; gap: 18px; }
	.mr .mr-dir-head h1 { font-size: 26px; }
	.mr .mr-dir-grid { grid-template-columns: 1fr; }
	.mr .mr-dir-types { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; }
	.mr .mr-dir-type { text-align: center; padding: 9px 8px; }
	.mr .mr-dir-cats { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
	.mr .mr-dir-cats::-webkit-scrollbar { display: none; }
	.mr .mr-dir-cat { flex-shrink: 0; }
}

/* Profile */
.mr.mr-profile-wrap { background: #f6f8f6; }
.mr .mr-profile { max-width: 1160px; margin: 0 auto; padding: 32px 10px 8px; display: flex; flex-direction: column; gap: 18px; }
.mr .mr-profile .mr-backrow { margin: 0; }
.mr .mr-profile-card {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center;
	padding: 24px; background: #fff; border: 1px solid #e3e7e4; border-radius: 16px;
}
.mr .mr-profile-avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; background: #eef1ef; border: 3px solid #fff; box-shadow: 0 0 0 1px #e3e7e4; }
.mr .mr-profile-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mr .mr-profile-main h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.mr .mr-profile-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mr .mr-profile-type { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #eef1ef; color: #15201a; font-size: 13.5px; font-weight: 600; }
.mr .mr-profile-stats { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 4px 0 0; }
.mr .mr-profile-stats div { display: flex; flex-direction: column; gap: 2px; }
.mr .mr-profile-stats dt { font-size: 12.5px; color: #55605a; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.mr .mr-profile-stats dd { margin: 0; font-size: 18px; font-weight: 700; color: #15201a; }
.mr .mr-profile-actions .mr-btn { min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; }
.mr .mr-profile-about { padding: 22px 24px; background: #fff; border: 1px solid #e3e7e4; border-radius: 16px; }
.mr .mr-profile-about h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.mr .mr-profile-about p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.65; color: #2a3530; max-width: 820px; }
.mr .mr-profile-about p:last-child { margin-bottom: 0; }
.mr .mr-profile-listhead { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
.mr .mr-profile-listhead h2 { margin: 0; font-size: 21px; font-weight: 700; }
.mr .mr-dir-cats--tight .mr-dir-cat { padding: 6px 12px; font-size: 13.5px; }
.mr-profile-listings { background: #f6f8f6; padding: 18px 0 48px; }
/* Social handles under the profile name */
.mr .mr-profile-socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.mr .mr-profile-socials li { margin: 0; padding: 0; }
.mr .mr-profile-socials a {
	display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 6px;
	border: 1px solid #e3e8e5; border-radius: 18px; background: #fff; color: #1c2420;
	font-size: 13.5px; font-weight: 600; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.mr .mr-profile-socials a:hover { border-color: var(--mr-social, #0b823e); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.mr .mr-profile-socials .mr-social-ic {
	display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
	background: var(--mr-social, #0b823e); color: #fff; font-size: 13px; line-height: 1;
}
.mr .mr-profile-socials .mr-social-ic svg { width: 12px; height: 12px; fill: #fff; }
.mr .mr-profile-socials .mr-social-ic i { color: #fff; font-size: 13px; }

/* Pagination under the profile's listings: one row of round page buttons */
.mr-profile-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 26px 0 0; padding: 0; }
.mr-profile-pages .page-numbers {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
	float: none !important; width: auto !important; min-width: 42px; height: 42px; margin: 0 !important; padding: 0 12px;
	border: 1px solid #e3e8e5; border-radius: 21px; background: #fff; box-shadow: none;
	color: #1c2420 !important; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none !important;
	transition: border-color .15s, background .15s;
}
.mr-profile-pages a.page-numbers:hover { border-color: #0b823e; color: #0b823e !important; }
.mr-profile-pages .page-numbers.current { background: #0b823e; border-color: #0b823e; color: #fff !important; }
.mr-profile-pages .page-numbers.dots { min-width: 24px; padding: 0 2px; border: 0; background: none; }
.mr-profile-pages .prev, .mr-profile-pages .next { padding: 0 18px; }
.mr-profile-pages .prev span[aria-hidden], .mr-profile-pages .next span[aria-hidden] { font-size: 20px; margin-top: -2px; }
@media (max-width: 600px) {
	/* Page numbers on one row, Previous / Next side by side underneath. */
	.mr-profile-pages { gap: 6px; }
	.mr-profile-pages .page-numbers { min-width: 38px; height: 38px; padding: 0 8px; font-size: 13.5px; }
	.mr-profile-pages .prev, .mr-profile-pages .next { order: 2; flex: 1 1 calc(50% - 6px); }
}
@media (max-width: 760px) {
	.mr .mr-profile { padding: 20px 16px 4px; gap: 14px; }
	.mr .mr-profile-card { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; padding: 22px 18px; }
	.mr .mr-profile-tags, .mr .mr-profile-stats, .mr .mr-profile-socials { justify-content: center; }
	.mr .mr-profile-main h1 { font-size: 24px; }
	.mr .mr-profile-actions, .mr .mr-profile-actions .mr-btn { width: 100%; justify-content: center; }
	.mr .mr-profile-about { padding: 18px; }
	.mr .mr-profile-listhead .mr-dir-cats { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
	.mr .mr-profile-listhead .mr-dir-cat { flex-shrink: 0; }
}

/* Gold crown on a paying user's photo, bottom right — as on Property Highlights. */
.mr .mr-dir-photo, .mr .mr-profile-photo { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
.mr .mr-crown {
	position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center;
	border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); pointer-events: none;
}
.mr .mr-crown img.mr-crown-img { display: block; border: 0; border-radius: 0; box-shadow: none; background: none; object-fit: contain; max-width: none; }
.mr .mr-crown--sm { width: 24px; height: 24px; }
.mr .mr-crown--sm img.mr-crown-img { width: 16px; height: 16px; }
.mr .mr-crown--md, .mr .mr-crown--lg { width: 34px; height: 34px; right: 0; bottom: 0; }
.mr .mr-crown--md img.mr-crown-img, .mr .mr-crown--lg img.mr-crown-img { width: 23px; height: 23px; }