/**
 * Components layer
 *
 * Naming: .ms-<block>, .ms-<block>__<element>, .ms-<block>--<modifier>
 * Mobile first. Values come from tokens.css only.
 *
 * Index
 *  1. Site header / navigation / mobile menu
 *  2. Site footer
 *  3. Button
 *  4. Badge
 *  5. Section heading
 *  6. Card (post / service / ranking)
 *  7. Pricing table / comparison table
 *  8. CTA
 *  9. Breadcrumb
 * 10. Search UI / Filter UI
 * 11. Pagination
 * 12. Hero
 * 13. Entry (single / page) & archive header
 * 14. FAQ / related links
 */

/* =====================================================================
 * 1. Site header
 * ================================================================== */

.ms-site-header {
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: var(--z-header);
}

.ms-site-header__inner {
	align-items: center;
	display: flex;
	gap: var(--space-3);
	justify-content: space-between;
	min-height: var(--header-height);
}

.ms-site-branding {
	align-items: center;
	display: flex;
	gap: var(--space-2);
	min-width: 0;
}

.ms-site-branding__logo img,
.ms-site-branding .custom-logo {
	display: block;
	height: auto;
	max-height: 36px;
	width: auto;
}

.ms-site-branding__title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-tight);
	margin: 0;
	white-space: nowrap;
}

.ms-site-branding__title a {
	color: var(--color-text-primary);
	text-decoration: none;
}

.ms-site-branding__description {
	color: var(--color-text-secondary);
	display: none;
	font-size: var(--font-size-xs);
}

.ms-site-header__actions {
	align-items: center;
	display: flex;
	gap: var(--space-2);
}

/* Desktop navigation (hidden on mobile, shown from 1024px) */
.ms-primary-nav {
	display: none;
}

.ms-primary-nav__list {
	align-items: center;
	display: flex;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-primary-nav__list a {
	color: var(--color-text-primary);
	display: inline-block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	padding-block: var(--space-2);
	text-decoration: none;
}

.ms-primary-nav__list a:hover,
.ms-primary-nav__list .current-menu-item > a {
	color: var(--color-primary);
}

.ms-primary-nav__list .sub-menu {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	display: none;
	list-style: none;
	margin: 0;
	min-width: 200px;
	padding: var(--space-2);
	position: absolute;
	z-index: var(--z-header);
}

.ms-primary-nav__list li {
	position: relative;
}

.ms-primary-nav__list li:hover > .sub-menu,
.ms-primary-nav__list li:focus-within > .sub-menu {
	display: block;
}

.ms-primary-nav__list .sub-menu a {
	display: block;
	padding: var(--space-2) var(--space-3);
}

/* Header search link (search entry point) */
.ms-header-search {
	display: none;
}

.ms-header-search__link {
	align-items: center;
	background-color: var(--color-background-muted);
	border-radius: var(--radius-full);
	color: var(--color-text-secondary);
	display: inline-flex;
	font-size: var(--font-size-sm);
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	text-decoration: none;
}

.ms-header-search__link:hover {
	background-color: var(--color-primary-light);
	color: var(--color-primary-hover);
}

.ms-header-search__link .ms-icon {
	flex: none;
}

/* Mobile menu toggle: real <button>, never a clickable div */
.ms-menu-toggle {
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-primary);
	display: inline-flex;
	gap: var(--space-1);
	font-size: var(--font-size-xs);
	line-height: 1;
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
	padding: var(--space-2);
}

.ms-menu-toggle:hover {
	border-color: var(--color-border-strong);
}

.ms-menu-toggle__icon-close {
	display: none;
}

.ms-menu-toggle[aria-expanded="true"] .ms-menu-toggle__icon-open {
	display: none;
}

.ms-menu-toggle[aria-expanded="true"] .ms-menu-toggle__icon-close {
	display: inline-flex;
}

/* Mobile menu panel: no-JS fallback keeps content reachable */
.ms-mobile-menu {
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-border);
	display: none;
	max-height: calc(100vh - var(--header-height));
	overflow-y: auto;
	padding-block: var(--space-4) var(--space-8);
}

.ms-mobile-menu.is-open {
	display: block;
}

/* Group label inside the mobile panel (not a heading: the panel is a nav). */
.ms-mobile-menu__heading {
	color: var(--color-text-secondary);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	margin: var(--space-4) 0 var(--space-1);
}

.ms-mobile-menu__heading:first-child {
	margin-top: 0;
}

.ms-mobile-menu__list {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
}

.ms-mobile-menu__list li + li {
	border-top: 1px solid var(--color-border);
}

.ms-mobile-menu__list a {
	color: var(--color-text-primary);
	display: block;
	font-weight: var(--font-weight-medium);
	padding: var(--space-3) var(--space-1);
	text-decoration: none;
}

.ms-mobile-menu__list .sub-menu {
	list-style: none;
	margin: 0;
	padding-left: var(--space-4);
}

.ms-mobile-menu__list .sub-menu a {
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-sm);
}

@media (min-width: 640px) {
	.ms-header-search {
		display: block;
	}
}

@media (min-width: 768px) {
	.ms-site-branding__title {
		font-size: var(--font-size-xl);
	}

	.ms-site-branding__description {
		display: block;
	}
}

@media (min-width: 1024px) {
	.ms-primary-nav {
		display: block;
	}

	.ms-menu-toggle,
	.ms-mobile-menu {
		display: none;
	}
}

/* =====================================================================
 * 2. Site footer
 * ================================================================== */

.ms-site-footer {
	background-color: var(--color-background-alt);
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-16);
	padding-block: var(--space-12) var(--space-6);
}

.ms-site-footer__grid {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
}

.ms-site-footer__heading {
	font-size: var(--font-size-sm);
	letter-spacing: var(--letter-spacing-base);
	margin-bottom: var(--space-3);
	text-transform: uppercase;
}

.ms-footer-nav__list {
	display: grid;
	gap: var(--space-2);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-footer-nav__list a {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	text-decoration: none;
}

.ms-footer-nav__list a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.ms-site-footer__bottom {
	align-items: center;
	border-top: 1px solid var(--color-border);
	color: var(--color-text-secondary);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--font-size-xs);
	gap: var(--space-2);
	justify-content: space-between;
	margin-top: var(--space-8);
	padding-top: var(--space-4);
}

@media (min-width: 768px) {
	.ms-site-footer__grid {
		grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
		gap: var(--space-12);
	}

	.ms-footer-nav__list {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
 * 3. Button
 * ================================================================== */

.ms-button {
	align-items: center;
	background-color: var(--color-primary);
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	color: var(--color-text-inverse);
	display: inline-flex;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	gap: var(--space-2);
	justify-content: center;
	line-height: 1.4;
	min-height: 48px;
	padding: var(--space-3) var(--space-6);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--transition-fast), color var(--transition-fast),
		border-color var(--transition-fast);
}

.ms-button:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-text-inverse);
}

.ms-button--secondary {
	background-color: var(--color-surface);
	border-color: var(--color-border-strong);
	color: var(--color-text-primary);
}

.ms-button--secondary:hover {
	background-color: var(--color-primary-light);
	border-color: var(--color-primary);
	color: var(--color-primary-hover);
}

.ms-button--ghost {
	background-color: transparent;
	color: var(--color-primary);
}

.ms-button--ghost:hover {
	background-color: var(--color-primary-light);
	color: var(--color-primary-hover);
}

.ms-button--sm {
	font-size: var(--font-size-sm);
	min-height: 40px;
	padding: var(--space-2) var(--space-4);
}

.ms-button--lg {
	font-size: var(--font-size-lg);
	min-height: 56px;
	padding: var(--space-4) var(--space-8);
}

.ms-button--block {
	display: flex;
	width: 100%;
}

.ms-button[aria-disabled="true"],
.ms-button:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* =====================================================================
 * 3b. Hub hero / hub empty state
 *
 * Shared by the service archive and the category list: a heading, one sentence,
 * and the ways on from here. Both pages are entry points, so they read the same.
 * ================================================================== */

.ms-hub-hero__lead {
	color: var(--color-text-secondary);
	margin: var(--space-2) 0 0;
	max-width: 62ch;
}

.ms-hub-hero__actions {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.ms-hub-empty {
	background-color: var(--color-background-alt);
	border-radius: var(--radius-lg);
	display: grid;
	gap: var(--space-3);
	margin-bottom: var(--section-gap);
	padding: var(--space-6) var(--space-4);
	text-align: center;
}

.ms-hub-empty__title {
	font-size: var(--font-size-lg);
	margin: 0;
}

.ms-hub-empty p {
	color: var(--color-text-secondary);
	margin: 0;
}

.ms-hub-empty__actions {
	display: grid;
	gap: var(--space-2);
	justify-items: center;
}

@media (min-width: 600px) {
	.ms-hub-hero__actions,
	.ms-hub-empty__actions {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
	}

	.ms-hub-empty__actions {
		justify-content: center;
	}
}

/* =====================================================================
 * 4. Badge
 * ================================================================== */

.ms-badge {
	align-items: center;
	background-color: var(--color-background-muted);
	border-radius: var(--radius-full);
	color: var(--color-text-secondary);
	display: inline-flex;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	gap: var(--space-1);
	line-height: 1.4;
	padding: var(--space-1) var(--space-3);
	white-space: nowrap;
}

.ms-badge--primary {
	background-color: var(--color-primary-light);
	color: var(--color-primary-hover);
}

.ms-badge--success {
	background-color: var(--color-success-light);
	color: var(--color-success);
}

.ms-badge--warning {
	background-color: var(--color-warning-light);
	color: var(--color-warning);
}

.ms-badge--error {
	background-color: var(--color-error-light);
	color: var(--color-error);
}

.ms-badge--info {
	background-color: var(--color-info-light);
	color: var(--color-info);
}

.ms-badge--rank {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	font-family: var(--font-family-numeric);
	justify-content: center;
	min-width: 32px;
}

/* =====================================================================
 * 5. Section heading
 * ================================================================== */

.ms-section-heading {
	margin-bottom: var(--space-6);
}

.ms-section-heading__eyebrow {
	color: var(--color-primary-hover);
	display: block;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.08em;
	margin-bottom: var(--space-2);
	text-transform: uppercase;
}

.ms-section-heading__title {
	font-size: var(--font-size-2xl);
	margin: 0;
}

.ms-section-heading__lead {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	margin-top: var(--space-2);
}

.ms-section-heading--center {
	text-align: center;
}

@media (min-width: 768px) {
	.ms-section-heading__title {
		font-size: var(--font-size-3xl);
	}

	.ms-section-heading__lead {
		font-size: var(--font-size-base);
	}
}

/* =====================================================================
 * 6. Card
 * ================================================================== */

.ms-card {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.ms-card:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-md);
}

.ms-card__media {
	aspect-ratio: 16 / 9;
	background-color: var(--color-background-muted);
	display: block;
	overflow: hidden;
}

.ms-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.ms-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
}

.ms-card__meta {
	align-items: center;
	color: var(--color-text-secondary);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--font-size-xs);
	gap: var(--space-2);
}

.ms-card__title {
	font-size: var(--font-size-lg);
	margin: 0;
}

.ms-card__title a {
	color: var(--color-text-primary);
	text-decoration: none;
}

.ms-card__title a:hover {
	color: var(--color-primary-hover);
}

.ms-card__excerpt {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	margin: 0;
}

.ms-card__footer {
	margin-top: auto;
	padding-top: var(--space-3);
}

/* Service card */
.ms-service-card__header {
	align-items: flex-start;
	display: flex;
	gap: var(--space-3);
}

.ms-service-card__logo {
	background-color: var(--color-background-muted);
	border-radius: var(--radius-md);
	flex: none;
	height: 56px;
	object-fit: contain;
	width: 56px;
}

.ms-service-card__rating {
	align-items: baseline;
	color: var(--color-text-secondary);
	display: flex;
	font-size: var(--font-size-sm);
	gap: var(--space-1);
}

.ms-service-card__score {
	color: var(--color-primary-hover);
	font-family: var(--font-family-numeric);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.ms-service-card__points {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	margin: 0;
	padding-left: 1.25em;
}

/* Ranking card */
.ms-ranking-card {
	position: relative;
}

.ms-ranking-card__rank {
	left: var(--space-3);
	position: absolute;
	top: var(--space-3);
	z-index: var(--z-base);
}

.ms-ranking-list {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: ms-ranking;
}

/* =====================================================================
 * 7. Pricing table / comparison table
 * ================================================================== */

.ms-pricing-table,
.ms-comparison-table {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.ms-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ms-pricing-table table,
.ms-comparison-table table {
	font-size: var(--font-size-sm);
	min-width: 560px;
}

.ms-pricing-table th,
.ms-pricing-table td,
.ms-comparison-table th,
.ms-comparison-table td {
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-3);
	text-align: left;
	vertical-align: top;
}

.ms-pricing-table thead th,
.ms-comparison-table thead th {
	background-color: var(--color-background-muted);
	white-space: nowrap;
}

.ms-comparison-table tbody th {
	background-color: var(--color-background-alt);
	font-weight: var(--font-weight-medium);
	position: sticky;
	left: 0;
	min-width: 120px;
}

.ms-pricing-table tr:last-child th,
.ms-pricing-table tr:last-child td,
.ms-comparison-table tr:last-child th,
.ms-comparison-table tr:last-child td {
	border-bottom: 0;
}

.ms-table-note {
	color: var(--color-text-secondary);
	font-size: var(--font-size-xs);
	margin-top: var(--space-2);
}

/* =====================================================================
 * 8. CTA
 * ================================================================== */

.ms-cta {
	background-color: var(--color-primary-light);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	text-align: center;
}

.ms-cta__title {
	font-size: var(--font-size-xl);
	margin: 0 0 var(--space-2);
}

.ms-cta__text {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	margin: 0 0 var(--space-6);
}

.ms-cta__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

@media (min-width: 640px) {
	.ms-cta__actions {
		flex-direction: row;
		justify-content: center;
	}
}

@media (min-width: 768px) {
	.ms-cta {
		padding: var(--space-12);
	}

	.ms-cta__title {
		font-size: var(--font-size-2xl);
	}
}

/* =====================================================================
 * 9. Breadcrumb
 * ================================================================== */

.ms-breadcrumb {
	font-size: var(--font-size-xs);
	padding-block: var(--space-3);
}

.ms-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-breadcrumb__item {
	align-items: center;
	color: var(--color-text-secondary);
	display: flex;
	gap: var(--space-2);
	min-width: 0;
}

.ms-breadcrumb__item a {
	color: var(--color-text-secondary);
	text-decoration: none;
}

.ms-breadcrumb__item a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.ms-breadcrumb__separator {
	color: var(--color-border-strong);
}

.ms-breadcrumb__item--current {
	color: var(--color-text-primary);
	max-width: 60vw;
	overflow: hidden;
}

/*
 * The ellipsis has to sit on the text element itself: the list item is a flex
 * container, and text-overflow does not apply to one. Without this a long
 * service name is cut mid-character with no visual hint that it continues.
 */
.ms-breadcrumb__item--current > span,
.ms-breadcrumb__item--current > a {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =====================================================================
 * 10. Search UI / Filter UI
 * ================================================================== */

.ms-search-form {
	display: flex;
	gap: var(--space-2);
	width: 100%;
}

.ms-search-form__field {
	flex: 1 1 auto;
	min-width: 0;
}

.ms-input,
.ms-select,
.ms-textarea {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	color: var(--color-text-primary);
	font-size: var(--font-size-base);
	min-height: 48px;
	padding: var(--space-3);
	width: 100%;
}

.ms-input::placeholder {
	color: var(--color-text-secondary);
}

.ms-input:focus,
.ms-select:focus,
.ms-textarea:focus {
	border-color: var(--color-primary);
}

.ms-filter {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
}

.ms-filter__group + .ms-filter__group {
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-4);
	padding-top: var(--space-4);
}

.ms-filter__legend {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-2);
	padding: 0;
}

.ms-filter__options {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-filter__option label {
	align-items: center;
	display: flex;
	font-size: var(--font-size-sm);
	gap: var(--space-2);
	min-height: 32px;
}

.ms-filter__actions {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

/* =====================================================================
 * 11. Pagination
 * ================================================================== */

.ms-pagination {
	margin-top: var(--space-12);
}

.ms-pagination .nav-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
}

.ms-pagination .page-numbers {
	align-items: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-primary);
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: var(--space-2);
	text-decoration: none;
}

.ms-pagination .page-numbers:hover {
	border-color: var(--color-primary);
	color: var(--color-primary-hover);
}

.ms-pagination .page-numbers.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-inverse);
	font-weight: var(--font-weight-bold);
}

.ms-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: auto;
}

/* Single post prev/next */
.ms-post-nav {
	border-top: 1px solid var(--color-border);
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
	margin-top: var(--space-12);
	padding-top: var(--space-6);
}

.ms-post-nav a {
	color: var(--color-text-primary);
	display: block;
	font-size: var(--font-size-sm);
	text-decoration: none;
}

.ms-post-nav a:hover {
	color: var(--color-primary-hover);
}

.ms-post-nav__label {
	color: var(--color-text-secondary);
	display: block;
	font-size: var(--font-size-xs);
	margin-bottom: var(--space-1);
}

@media (min-width: 768px) {
	.ms-post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =====================================================================
 * 12. Hero
 * ================================================================== */

.ms-hero {
	background-color: var(--color-background-alt);
	padding-block: var(--space-12);
}

.ms-hero__inner {
	max-width: var(--content-width-narrow);
}

.ms-hero__title {
	font-size: var(--font-size-3xl);
	margin: 0 0 var(--space-4);
}

.ms-hero__lead {
	color: var(--color-text-secondary);
	font-size: var(--font-size-base);
	margin: 0 0 var(--space-6);
}

.ms-hero__search {
	max-width: 560px;
}

.ms-hero__meta {
	color: var(--color-text-secondary);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--font-size-xs);
	gap: var(--space-2) var(--space-4);
	margin-top: var(--space-4);
}

@media (min-width: 768px) {
	.ms-hero {
		padding-block: var(--space-16);
	}

	.ms-hero__title {
		font-size: var(--font-size-4xl);
	}

	.ms-hero__lead {
		font-size: var(--font-size-lg);
	}
}

/* =====================================================================
 * 13. Entry / archive header
 * ================================================================== */

.ms-entry {
	padding-block: var(--space-8) var(--space-12);
}

.ms-entry__header {
	margin-bottom: var(--space-6);
}

.ms-entry__title {
	font-size: var(--font-size-2xl);
	margin: 0 0 var(--space-3);
}

.ms-entry__meta {
	align-items: center;
	color: var(--color-text-secondary);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--font-size-xs);
	gap: var(--space-2) var(--space-4);
}

.ms-entry__thumbnail {
	margin-bottom: var(--space-6);
}

.ms-entry__thumbnail img {
	border-radius: var(--radius-lg);
	display: block;
	width: 100%;
}

.ms-entry__footer {
	margin-top: var(--space-8);
}

.ms-taxonomy-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-page-header {
	margin-bottom: var(--space-8);
}

.ms-page-header__title {
	font-size: var(--font-size-2xl);
	margin: 0 0 var(--space-2);
}

.ms-page-header__description {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

.ms-no-results {
	background-color: var(--color-background-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	text-align: center;
}

@media (min-width: 768px) {
	.ms-entry__title,
	.ms-page-header__title {
		font-size: var(--font-size-3xl);
	}
}

/* =====================================================================
 * 14. FAQ / related links
 * ================================================================== */

.ms-faq {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.ms-faq__item + .ms-faq__item {
	border-top: 1px solid var(--color-border);
}

.ms-faq__question {
	align-items: center;
	background-color: var(--color-surface);
	cursor: pointer;
	display: flex;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	gap: var(--space-2);
	list-style: none;
	min-height: 48px;
	padding: var(--space-4);
}

.ms-faq__question::-webkit-details-marker {
	display: none;
}

.ms-faq__question::before {
	color: var(--color-primary);
	content: "Q";
	font-family: var(--font-family-numeric);
	flex: none;
}

.ms-faq__answer {
	background-color: var(--color-background-alt);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	padding: var(--space-4);
}

.ms-related-links__list {
	display: grid;
	gap: var(--space-2);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-related-links__list a {
	border-bottom: 1px solid var(--color-border);
	display: block;
	font-size: var(--font-size-sm);
	padding-block: var(--space-3);
	text-decoration: none;
}

.ms-related-links__list a:hover {
	text-decoration: underline;
}

/* Shared icon sizing */
.ms-icon {
	display: inline-flex;
	height: 1.25em;
	width: 1.25em;
}

.ms-icon svg {
	height: 100%;
	width: 100%;
}

/* =====================================================================
 * 15. Comments (minimal; core markup)
 * ================================================================== */

.ms-comments {
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-12);
	padding-top: var(--space-8);
}

.ms-comments__list {
	list-style: none;
	margin: var(--space-6) 0;
	padding: 0;
}

.ms-comments__list .children {
	list-style: none;
	padding-left: var(--space-4);
}

.ms-comments__list .comment-body {
	border-bottom: 1px solid var(--color-border);
	font-size: var(--font-size-sm);
	padding-block: var(--space-4);
}

.ms-comments .comment-form p {
	margin-bottom: var(--space-4);
}

.ms-comments .comment-form label {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-1);
}

.ms-comments .comment-form input[type="text"],
.ms-comments .comment-form input[type="email"],
.ms-comments .comment-form input[type="url"],
.ms-comments .comment-form textarea {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	min-height: 48px;
	padding: var(--space-3);
	width: 100%;
}