/* mm-faq: vertical-tab FAQ block for case study + about pages.
   Desktop (>=992px): left column is question list (tabs), right column is single active answer.
   Mobile (<992px): native accordion. Tap a question, its answer expands below it. */


/* ============================================================
   Base container. JS injects .is-ready once wired up.
   Before JS runs, we render as a plain stacked list (no FOUC).
   ============================================================ */

.mm-faq {
	max-width: none;
	margin: 0;
}


/* ============================================================
   Pre-JS / no-JS fallback: everything visible, stacked.
   ============================================================ */

.mm-faq-item {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 28px 0;
}

.mm-faq-item:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mm-faq-question {
	color: #fff;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
}

.mm-faq-answer {
	color: rgba(255, 255, 255, 0.85);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	margin: 0;
}

.mm-faq-answer + .mm-faq-answer {
	margin-top: 12px;
}


/* ============================================================
   DESKTOP (>=992px): vertical tabs layout after JS wires up.
   ============================================================ */

@media (min-width: 992px) {

	.mm-faq.is-ready {
		display: grid;
		grid-template-columns: 5fr 7fr;
		gap: 0 60px;
		align-items: start;
	}

	/* Left rail: stacked tab buttons. */
	.mm-faq.is-ready .mm-faq-tabs {
		display: flex;
		flex-direction: column;
		border-right: 1px solid rgba(255, 255, 255, 0.12);
	}

	.mm-faq.is-ready .mm-faq-tab {
		appearance: none;
		background: transparent;
		border: 0;
		border-left: 3px solid transparent;
		padding: 18px 24px 18px 20px;
		margin: 0;
		text-align: left;
		font-family: inherit;
		font-size: 19px;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: -0.01em;
		color: rgba(255, 255, 255, 0.4);
		cursor: pointer;
		transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
	}

	.mm-faq.is-ready .mm-faq-tab:hover {
		color: rgba(255, 255, 255, 0.75);
		background: rgba(255, 255, 255, 0.02);
	}

	.mm-faq.is-ready .mm-faq-tab.is-active {
		color: #fff;
		border-left-color: var(--mm-accent, #00B4FF);
		background: rgba(255, 255, 255, 0.03);
	}

	.mm-faq.is-ready .mm-faq-tab:focus-visible {
		outline: 2px solid var(--mm-accent, #00B4FF);
		outline-offset: -2px;
	}

	/* Right panel: single active answer. */
	.mm-faq.is-ready .mm-faq-panels {
		padding: 8px 0 0;
	}

	.mm-faq.is-ready .mm-faq-panel {
		display: none;
	}

	.mm-faq.is-ready .mm-faq-panel.is-active {
		display: block;
	}

	.mm-faq.is-ready .mm-faq-panel-title {
		color: #fff;
		font-size: 32px;
		font-weight: 700;
		line-height: 1.1;
		letter-spacing: -0.01em;
		margin: 0 0 20px;
	}

	.mm-faq.is-ready .mm-faq-panel-body {
		color: rgba(255, 255, 255, 0.85);
		font-size: 19px;
		font-weight: 300;
		line-height: 1.55;
		margin: 0;
	}

	.mm-faq.is-ready .mm-faq-panel-body + .mm-faq-panel-body {
		margin-top: 14px;
	}

	/* On desktop after JS, hide the pre-JS stacked items. */
	.mm-faq.is-ready > .mm-faq-item {
		display: none;
	}
}


/* ============================================================
   MOBILE (<992px): accordion. Question stays a button, answer
   collapses below. First open by default.
   ============================================================ */

@media (max-width: 991px) {

	.mm-faq.is-ready > .mm-faq-tabs,
	.mm-faq.is-ready > .mm-faq-panels {
		display: none;
	}

	.mm-faq.is-ready .mm-faq-item {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		padding: 0;
	}

	.mm-faq.is-ready .mm-faq-item:last-child {
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.mm-faq.is-ready .mm-faq-item-toggle {
		appearance: none;
		background: transparent;
		border: 0;
		width: 100%;
		text-align: left;
		padding: 22px 40px 22px 0;
		margin: 0;
		font-family: inherit;
		font-size: 22px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.01em;
		color: #fff;
		cursor: pointer;
		position: relative;
	}

	.mm-faq.is-ready .mm-faq-item-toggle::after {
		content: '+';
		position: absolute;
		right: 8px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 28px;
		font-weight: 300;
		line-height: 1;
		color: rgba(255, 255, 255, 0.6);
		transition: transform 0.2s ease;
	}

	.mm-faq.is-ready .mm-faq-item.is-open .mm-faq-item-toggle::after {
		content: '\2212';
	}

	.mm-faq.is-ready .mm-faq-item-body {
		display: none;
		padding: 0 0 24px;
	}

	.mm-faq.is-ready .mm-faq-item.is-open .mm-faq-item-body {
		display: block;
	}

	.mm-faq.is-ready .mm-faq-answer {
		font-size: 17px;
	}
}