/* Compact About reading card and a clear selected service-family filter. */
.mg-about {
	padding-block: clamp(var(--space-8), 7vw, var(--space-16));
}

.mg-about-card {
	width: min(100%, 48rem);
	box-sizing: border-box;
	margin-inline: auto;
	padding: clamp(var(--space-6), 5vw, var(--space-8));
	border: var(--hairline) solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface-raised);
}

.mg-about-card .mg-p7-hero {
	max-width: var(--measure);
	gap: var(--space-3);
	margin: 0 0 var(--space-6);
}

.mg-about-card .mg-p6-display {
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.2;
}

.mg-about-card .mg-p6-lead {
	margin: 0;
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.7;
}

.mg-about-copy {
	max-width: var(--measure);
	padding-block: var(--space-4);
	border-block-start: var(--hairline) solid var(--line);
}

.mg-about-copy h2 {
	margin: 0 0 var(--space-2);
	font-family: var(--font-arabic);
	font-size: clamp(1.125rem, 2vw, 1.35rem);
	line-height: 1.4;
}

.mg-about-copy p {
	margin: 0;
	font-size: var(--mg-type-small, 0.95rem);
	line-height: 1.75;
	white-space: normal;
	overflow-wrap: anywhere;
}

.mg-about-offers .mg-p7-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	margin: 0;
	padding-inline-start: 1.25rem;
	font-size: var(--mg-type-small, 0.95rem);
	line-height: 1.6;
}

.mg-about-cta {
	display: flex;
	justify-content: center;
	margin-block-start: var(--space-6);
}

.mg-service-family-chips {
	align-items: center;
}

.mg-service-family-chips .mg-p6-choice {
	transition: transform 160ms ease, color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.mg-service-family-chips .mg-p6-choice:hover,
.mg-service-family-chips .mg-p6-choice:focus-visible {
	transform: translateY(-2px);
	border-color: var(--accent);
}

.mg-service-family-chips .mg-p6-choice[aria-current="page"] {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 800;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

@media (max-width: 40rem) {
	.mg-about-card {
		padding: var(--space-6);
	}

	.mg-about-copy {
		padding-block: var(--space-3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mg-service-family-chips .mg-p6-choice {
		transition: none;
	}

	.mg-service-family-chips .mg-p6-choice:hover,
	.mg-service-family-chips .mg-p6-choice:focus-visible {
		transform: none;
	}
}
/* Consistent selected filter state, with focus outlines instead of decorative shadows. */
.mg-p7-pills a[aria-current="page"],
.mg-service-family-chips .mg-p6-choice[aria-current="page"],
.mg-p7-kind[aria-pressed="true"],
.mg-store-hero-chip[aria-current="page"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: none; text-decoration: none; }

.mg-p6-family.mg-service-filter-enter { animation: mg-service-filter-in 180ms ease both; }
@keyframes mg-service-filter-in {
	from { opacity: .72; transform: translateY(.35rem); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mg-p6-family.mg-service-filter-enter { animation: none; }
}