/**
 * MRMVR Elements — FAQ.
 *
 * Questions on one side, a way to reach a person on the other. The contact
 * card holds its place while the questions scroll past it, so the moment a
 * reader gives up on finding their answer the address, the number and the
 * button are already beside them.
 *
 * The questions are a numbered index on the cream ground, divided by clay
 * hairlines. The one that is open lifts into a white card — the same lift by
 * contrast the Ask CTA uses — so the reader always knows which answer they
 * are in, and the hairlines either side of it step out of the way.
 *
 * Every answer is in the page and readable without JavaScript; the script
 * only folds them away. Sizes itself against its own container.
 *
 * @package MRMVR\Elements
 * @since   1.46.0
 */

.mrx-faq-wrap {
	container-type: inline-size;
	container-name: mrxf;
	min-height: 0;
}

.mrx-faq-wrap,
.mrx-faq-wrap *,
.mrx-faq-wrap *::before,
.mrx-faq-wrap *::after {
	box-sizing: border-box;
}

.mrx-faq {
	/* Layout */
	--mrx-f-max: 1240px;
	--mrx-f-aside: 340px;
	--mrx-f-gap: clamp(36px, 6cqi, 96px);
	--mrx-f-sticky-top: 120px;

	/* Section */
	--mrx-f-bg: var(--mrmvr-cream, #fdf8f5);
	--mrx-f-glow: rgba(249, 233, 224, .95);

	/* Contact card */
	--mrx-f-card-bg: var(--mrmvr-white, #ffffff);
	--mrx-f-card-border: rgba(207, 161, 144, .4);
	--mrx-f-card-radius: 18px;
	--mrx-f-card-pad: clamp(26px, 3cqi, 36px);
	--mrx-f-frame: rgba(207, 161, 144, .5);
	--mrx-f-eyebrow: var(--mrmvr-amber, #f57528);
	--mrx-f-title: var(--mrmvr-navy, #1a2142);
	--mrx-f-accent: var(--mrmvr-amber, #f57528);
	--mrx-f-body: var(--mrmvr-navy, #1a2142);
	--mrx-f-label: rgba(26, 33, 66, .55);
	--mrx-f-icon: var(--mrmvr-amber, #f57528);
	--mrx-f-icon-bg: var(--mrmvr-blush-soft, #f9e9e0);
	--mrx-f-status: var(--mrmvr-teal, #6db5aa);

	/* Card button */
	--mrx-f-btn-bg: var(--mrmvr-navy, #1a2142);
	--mrx-f-btn-text: var(--mrmvr-white, #ffffff);
	--mrx-f-btn-bg-hover: var(--mrmvr-amber, #f57528);
	--mrx-f-btn-text-hover: var(--mrmvr-white, #ffffff);

	/* Questions */
	--mrx-f-rule: rgba(207, 161, 144, .45);
	--mrx-f-num: var(--mrmvr-amber, #f57528);
	--mrx-f-q: var(--mrmvr-navy, #1a2142);
	--mrx-f-q-size: clamp(21px, 2.5cqi, 27px);
	--mrx-f-toggle: var(--mrmvr-navy, #1a2142);
	--mrx-f-toggle-border: rgba(26, 33, 66, .2);
	--mrx-f-toggle-open-bg: var(--mrmvr-navy, #1a2142);
	--mrx-f-toggle-open: var(--mrmvr-white, #ffffff);
	--mrx-f-open-bg: var(--mrmvr-white, #ffffff);
	--mrx-f-item-pad: clamp(16px, 2.4cqi, 28px);
	--mrx-f-num-col: 48px;

	/* Answers */
	--mrx-f-a: #3a3f55;
	--mrx-f-a-size: 16.5px;
	--mrx-f-link: var(--mrmvr-navy, #1a2142);
	--mrx-f-link-line: var(--mrmvr-amber, #f57528);

	--mrx-f-speed: 480ms;

	position: relative;
	padding: clamp(56px, 7cqi, 110px) clamp(16px, 3cqi, 40px);
	background-color: var(--mrx-f-bg);
	font-family: var(--mrmvr-font-body);
	color: var(--mrx-f-body);
}

/* A soft wash behind the contact card, under everything. Clipped by its own
   layer so the section never needs overflow:hidden, which would stop the
   card from sticking. */
.mrx-faq__wash {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.mrx-faq__wash::before {
	content: "";
	position: absolute;
	top: -180px;
	left: -160px;
	width: 620px;
	height: 620px;
	background-image: radial-gradient(circle, var(--mrx-f-glow) 0%, rgba(255, 255, 255, 0) 68%);
}

:where(.mrx-faq--aside-right) .mrx-faq__wash::before {
	left: auto;
	right: -160px;
}

:where(.mrx-faq--nowash) .mrx-faq__wash {
	display: none;
}

.mrx-faq__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, var(--mrx-f-aside)) minmax(0, 1fr);
	grid-template-areas: "aside list";
	align-items: start;
	gap: var(--mrx-f-gap);
	max-width: var(--mrx-f-max);
	margin-inline: auto;
}

.mrx-faq--aside-right .mrx-faq__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--mrx-f-aside));
	grid-template-areas: "list aside";
}

.mrx-faq--noaside .mrx-faq__inner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "list";
	max-width: min(var(--mrx-f-max), 900px);
}

/* -------------------------------------------------------------------------
 * Contact card
 * ---------------------------------------------------------------------- */

.mrx-faq__aside {
	grid-area: aside;
	position: relative;
	min-width: 0;
}

.mrx-faq--sticky .mrx-faq__aside {
	position: sticky;
	top: var(--mrx-f-sticky-top);
}

/* The offset hairline frame the arched blocks use: depth without a shadow. */
:where(.mrx-faq--framed) .mrx-faq__aside::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--mrx-f-frame);
	border-radius: var(--mrx-f-card-radius);
	transform: translate(10px, 10px);
	pointer-events: none;
}

:where(.mrx-faq--framed.mrx-faq--aside-right) .mrx-faq__aside::before {
	transform: translate(-10px, 10px);
}

.mrx-faq__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: var(--mrx-f-card-pad);
	background-color: var(--mrx-f-card-bg);
	border: 1px solid var(--mrx-f-card-border);
	border-radius: var(--mrx-f-card-radius);
	box-shadow: 0 22px 44px -32px rgba(26, 33, 66, .35);
}

.mrx-faq__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.9px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--mrx-f-eyebrow);
}

.mrx-faq__eyebrow::before {
	content: "";
	flex: 0 0 22px;
	height: 1px;
	background-color: currentColor;
}

.mrx-faq__title {
	margin: 0;
	font-family: var(--mrmvr-font-display);
	font-size: clamp(28px, 3.1cqi, 36px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.3px;
	text-wrap: balance;
	color: var(--mrx-f-title);
}

.mrx-faq__title em {
	font-style: italic;
	color: var(--mrx-f-accent);
}

.mrx-faq__lede {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.6;
	text-wrap: pretty;
	color: var(--mrx-f-body);
	opacity: .74;
}

/* Contact lines */
.mrx-faq__contacts {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mrx-f-rule);
}

.mrx-faq__contact {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--mrx-f-rule);
}

.mrx-faq__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 14px;
	line-height: 1;
	color: var(--mrx-f-icon);
	background-color: var(--mrx-f-icon-bg);
	border-radius: 50%;
	transition:
		color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		background-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-faq__contact-icon svg,
.mrx-faq__contact-icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

.mrx-faq__contact--noicon {
	grid-template-columns: minmax(0, 1fr);
}

.mrx-faq__contact-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mrx-faq__contact-label {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 1.5px;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--mrx-f-label);
}

.mrx-faq__contact-value {
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.45;
	overflow-wrap: anywhere;
	color: var(--mrx-f-body);
	text-decoration: none;
}

a.mrx-faq__contact-value {
	background-image: linear-gradient(var(--mrx-f-accent), var(--mrx-f-accent));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

a.mrx-faq__contact-value:hover,
a.mrx-faq__contact-value:focus-visible {
	background-size: 100% 1px;
}

.mrx-faq__contact:hover .mrx-faq__contact-icon {
	color: var(--mrmvr-white, #ffffff);
	background-color: var(--mrx-f-icon);
}

a.mrx-faq__contact-value:focus-visible,
.mrx-faq__btn:focus-visible,
.mrx-faq__q:focus-visible,
.mrx-faq__search-input:focus-visible {
	outline: 2px solid var(--mrx-f-accent);
	outline-offset: 3px;
}

/* Card button */
.mrx-faq__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px 24px;
	font-family: var(--mrmvr-font-body);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mrx-f-btn-text);
	background-color: var(--mrx-f-btn-bg);
	border: 1px solid var(--mrx-f-btn-bg);
	border-radius: 999px;
	transition:
		color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		background-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		border-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-faq__btn:hover,
.mrx-faq__btn:focus-visible {
	color: var(--mrx-f-btn-text-hover);
	background-color: var(--mrx-f-btn-bg-hover);
	border-color: var(--mrx-f-btn-bg-hover);
}

.mrx-faq__btn-icon {
	display: inline-flex;
	font-size: 13px;
	transition: transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-faq__btn-icon svg,
.mrx-faq__btn-icon i {
	width: .9em;
	height: .9em;
	font-size: inherit;
	fill: currentColor;
}

.mrx-faq__btn:hover .mrx-faq__btn-icon {
	transform: translateX(4px);
}

/* Availability, with a slow pulse: someone is there. */
.mrx-faq__status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: -8px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	text-align: center;
	color: var(--mrx-f-body);
	opacity: .7;
}

.mrx-faq__status::before {
	content: "";
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	background-color: var(--mrx-f-status);
	border-radius: 50%;
	box-shadow: 0 0 0 0 var(--mrx-f-status);
	animation: mrx-faq-pulse 2.4s var(--mrmvr-ease, ease) infinite;
}

@keyframes mrx-faq-pulse {
	0% { box-shadow: 0 0 0 0 rgba(109, 181, 170, .55); }
	70%, 100% { box-shadow: 0 0 0 8px rgba(109, 181, 170, 0); }
}

/* -------------------------------------------------------------------------
 * Questions
 * ---------------------------------------------------------------------- */

.mrx-faq__main {
	grid-area: list;
	min-width: 0;
}

.mrx-faq__head {
	margin: 0 0 clamp(22px, 3cqi, 34px);
}

.mrx-faq__heading {
	margin: 0;
	font-family: var(--mrmvr-font-display);
	font-size: clamp(32px, 4.4cqi, 48px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.45px;
	text-wrap: balance;
	color: var(--mrx-f-title);
}

.mrx-faq__heading em {
	font-style: italic;
	color: var(--mrx-f-accent);
}

/* Search */
.mrx-faq__search {
	position: relative;
	margin: 0 0 clamp(18px, 2.4cqi, 26px);
}

.mrx-faq__search-icon {
	position: absolute;
	top: 50%;
	left: 20px;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	color: var(--mrx-f-label);
	pointer-events: none;
}

.mrx-faq__search-input {
	display: block;
	width: 100%;
	height: 52px;
	padding: 0 20px 0 48px;
	font-family: var(--mrmvr-font-body);
	font-size: 15.5px;
	color: var(--mrx-f-q);
	background-color: var(--mrx-f-open-bg);
	border: 1px solid var(--mrx-f-card-border);
	border-radius: 999px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-faq__search-input::placeholder {
	color: var(--mrx-f-label);
	opacity: 1;
}

.mrx-faq__search-input:hover,
.mrx-faq__search-input:focus {
	border-color: rgba(207, 161, 144, .9);
}

.mrx-faq__empty {
	margin: 18px 0 0;
	padding: 18px var(--mrx-f-item-pad);
	font-size: 15px;
	color: var(--mrx-f-a);
	border: 1px dashed var(--mrx-f-rule);
	border-radius: 14px;
}

/* The list */
.mrx-faq__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrx-faq__item {
	position: relative;
	margin: 0;
	padding: 0 var(--mrx-f-item-pad);
	background-color: transparent;
	border-radius: 16px;
	transition:
		background-color var(--mrx-f-speed) var(--mrmvr-ease, ease),
		box-shadow var(--mrx-f-speed) var(--mrmvr-ease, ease);
}

.mrx-faq__item[hidden] {
	display: none;
}

/* Hairlines sit inside the item's padding, so they line up with the words
   rather than running to the edge of the open card. */
.mrx-faq__item::after {
	content: "";
	position: absolute;
	right: var(--mrx-f-item-pad);
	bottom: 0;
	left: var(--mrx-f-item-pad);
	height: 1px;
	background-color: var(--mrx-f-rule);
	transition: opacity var(--mrx-f-speed) var(--mrmvr-ease, ease);
}

.mrx-faq__list > .mrx-faq__item:first-child::before {
	content: "";
	position: absolute;
	top: 0;
	right: var(--mrx-f-item-pad);
	left: var(--mrx-f-item-pad);
	height: 1px;
	background-color: var(--mrx-f-rule);
	transition: opacity var(--mrx-f-speed) var(--mrmvr-ease, ease);
}

.mrx-faq--js .mrx-faq__item.is-open {
	background-color: var(--mrx-f-open-bg);
	box-shadow: 0 24px 48px -34px rgba(26, 33, 66, .38);
}

.mrx-faq--js .mrx-faq__item.is-open::after,
.mrx-faq--js .mrx-faq__item.is-open::before,
.mrx-faq--js .mrx-faq__item:has(+ .mrx-faq__item.is-open)::after {
	opacity: 0;
}

.mrx-faq__q-wrap {
	margin: 0;
	font: inherit;
}

.mrx-faq__q {
	display: grid;
	grid-template-columns: var(--mrx-f-num-col) minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 14px;
	width: 100%;
	margin: 0;
	padding: clamp(20px, 2.6cqi, 28px) 0;
	font: inherit;
	text-align: left;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Themes style every <button>; none of it belongs here. */
.mrx-faq__q:hover,
.mrx-faq__q:focus {
	color: inherit;
	background: none;
	border: 0;
}

.mrx-faq--nonum .mrx-faq__q {
	grid-template-columns: minmax(0, 1fr) auto;
}

.mrx-faq__num {
	align-self: start;
	padding-top: .28em;
	font-family: var(--mrmvr-font-display);
	font-size: 19px;
	font-style: italic;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--mrx-f-num);
	transition: transform var(--mrx-f-speed) var(--mrmvr-ease, ease);
}

.mrx-faq__q-text {
	font-family: var(--mrmvr-font-display);
	font-size: var(--mrx-f-q-size);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.2px;
	text-wrap: pretty;
	color: var(--mrx-f-q);
}

/* Plus that turns into a minus: the vertical bar folds flat. */
.mrx-faq__toggle {
	position: relative;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	color: var(--mrx-f-toggle);
	border: 1px solid var(--mrx-f-toggle-border);
	border-radius: 50%;
	transition:
		color var(--mrx-f-speed) var(--mrmvr-ease, ease),
		background-color var(--mrx-f-speed) var(--mrmvr-ease, ease),
		border-color var(--mrx-f-speed) var(--mrmvr-ease, ease),
		transform var(--mrx-f-speed) var(--mrmvr-ease, ease);
}

.mrx-faq__toggle::before,
.mrx-faq__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1.5px;
	margin: -0.75px 0 0 -7px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform var(--mrx-f-speed) var(--mrmvr-ease, ease);
}

.mrx-faq__toggle::after {
	transform: rotate(90deg);
}

.mrx-faq__q:hover .mrx-faq__toggle {
	border-color: var(--mrx-f-accent);
}

.mrx-faq__q:hover .mrx-faq__num {
	transform: translateX(3px);
}

.mrx-faq--js .is-open .mrx-faq__toggle {
	color: var(--mrx-f-toggle-open);
	background-color: var(--mrx-f-toggle-open-bg);
	border-color: var(--mrx-f-toggle-open-bg);
	transform: rotate(180deg);
}

.mrx-faq--js .is-open .mrx-faq__toggle::after {
	transform: rotate(0deg);
}

/* Without the script nothing is folded, so the toggle has nothing to say. */
.mrx-faq:not(.mrx-faq--js) .mrx-faq__toggle {
	display: none;
}

/* -------------------------------------------------------------------------
 * Answers
 *
 * Folded by animating a one-row grid from 0fr to 1fr, which eases to the
 * answer's real height without measuring it. Only once the script has run:
 * before that, and without it, every answer is simply open.
 * ---------------------------------------------------------------------- */

.mrx-faq--js .mrx-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--mrx-f-speed) var(--mrmvr-ease, ease);
}

.mrx-faq--js .is-open .mrx-faq__panel {
	grid-template-rows: 1fr;
}

.mrx-faq__panel-inner {
	min-height: 0;
	overflow: hidden;
}

/* A folded answer is also out of the tab order and away from screen
   readers; it goes only once the fold has finished closing. */
.mrx-faq--js .mrx-faq__panel-inner {
	visibility: hidden;
	transition: visibility 0s linear var(--mrx-f-speed);
}

.mrx-faq--js .is-open .mrx-faq__panel-inner {
	visibility: visible;
	transition-delay: 0s;
}

.mrx-faq__a {
	max-width: 68ch;
	padding: 0 0 clamp(22px, 2.8cqi, 30px) calc(var(--mrx-f-num-col) + 14px);
	font-size: var(--mrx-f-a-size);
	line-height: 1.72;
	text-wrap: pretty;
	color: var(--mrx-f-a);
}

.mrx-faq--nonum .mrx-faq__a {
	padding-left: 0;
}

.mrx-faq--js .mrx-faq__a {
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity var(--mrx-f-speed) var(--mrmvr-ease, ease),
		transform var(--mrx-f-speed) var(--mrmvr-ease, ease);
}

.mrx-faq--js .is-open .mrx-faq__a {
	opacity: 1;
	transform: none;
	transition-delay: 80ms;
}

.mrx-faq__a > :first-child { margin-top: 0; }
.mrx-faq__a > :last-child { margin-bottom: 0; }

.mrx-faq__a p {
	margin: 0 0 14px;
}

.mrx-faq__a ul,
.mrx-faq__a ol {
	margin: 0 0 14px;
	padding-left: 1.2em;
}

.mrx-faq__a li {
	margin: 0 0 6px;
}

.mrx-faq__a strong {
	font-weight: 600;
	color: var(--mrx-f-q);
}

/* Links in an answer: an amber underline that thickens on hover. */
.mrx-faq__a a {
	font-weight: 500;
	color: var(--mrx-f-link);
	text-decoration: underline;
	text-decoration-color: var(--mrx-f-link-line);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition:
		color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		text-decoration-thickness var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-faq__a a:hover,
.mrx-faq__a a:focus-visible {
	color: var(--mrx-f-link-line);
	text-decoration-thickness: 2px;
}

/*
 * The text call to action at the foot of an answer: give a link the class
 * `mrx-faq__cta` and it is set as a small-caps line with an arrow, so it
 * reads as the next step rather than as one more link in the paragraph.
 */
.mrx-faq__a a.mrx-faq__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
	padding: 4px 0 6px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mrx-f-link);
	border-bottom: 1px solid var(--mrx-f-link-line);
}

.mrx-faq__a a.mrx-faq__cta::after {
	content: "\2192";
	font-size: 15px;
	letter-spacing: 0;
	color: var(--mrx-f-link-line);
	transition: transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-faq__a a.mrx-faq__cta:hover::after,
.mrx-faq__a a.mrx-faq__cta:focus-visible::after {
	transform: translateX(4px);
}

.mrx-faq__a a.mrx-faq__cta:hover,
.mrx-faq__a a.mrx-faq__cta:focus-visible {
	color: var(--mrx-f-link-line);
}

/* -------------------------------------------------------------------------
 * Container guardrails
 * ---------------------------------------------------------------------- */

@container mrxf (max-width: 900px) {
	/* One column: the contact card goes under the questions, where a reader
	   who did not find their answer arrives. It no longer sticks — on a
	   narrow screen it would cover the very answers being read. */
	.mrx-faq-wrap.mrx-faq-wrap .mrx-faq__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "list" "aside";
		gap: 48px;
	}

	.mrx-faq-wrap.mrx-faq-wrap .mrx-faq--aside-first .mrx-faq__inner {
		grid-template-areas: "aside" "list";
	}

	.mrx-faq-wrap.mrx-faq-wrap .mrx-faq__aside {
		position: relative;
		top: auto;
		max-width: 560px;
	}

	.mrx-faq-wrap.mrx-faq-wrap .mrx-faq__aside::before {
		display: none;
	}
}

@container mrxf (max-width: 560px) {
	.mrx-faq-wrap.mrx-faq-wrap .mrx-faq {
		--mrx-f-num-col: 30px;
		--mrx-f-item-pad: 14px;
		--mrx-f-a-size: 15.5px;
	}

	.mrx-faq-wrap.mrx-faq-wrap .mrx-faq__num {
		font-size: 16px;
	}

	/* The answer takes the full width under the question; an indent this
	   narrow screen cannot spare. */
	.mrx-faq-wrap.mrx-faq-wrap .mrx-faq__a {
		padding-left: 0;
	}

	.mrx-faq-wrap.mrx-faq-wrap .mrx-faq__toggle {
		width: 36px;
		height: 36px;
	}

	.mrx-faq-wrap.mrx-faq-wrap .mrx-faq__q {
		gap: 0 10px;
	}
}

/* -------------------------------------------------------------------------
 * Accessibility & print
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mrx-faq {
		--mrx-f-speed: 1ms;
	}

	.mrx-faq__status::before {
		animation: none;
	}

	.mrx-faq__q:hover .mrx-faq__num,
	.mrx-faq__btn:hover .mrx-faq__btn-icon {
		transform: none;
	}
}

@media print {
	.mrx-faq--js .mrx-faq__panel {
		grid-template-rows: 1fr;
	}

	.mrx-faq--js .mrx-faq__panel-inner,
	.mrx-faq--js .mrx-faq__a {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	.mrx-faq__aside {
		position: static;
	}

	.mrx-faq__search,
	.mrx-faq__toggle {
		display: none;
	}
}