/*
 * miniOrange site header (Manual theme, FAQ site), as on www.miniorange.com.
 * Loaded by faq-site-header/site-header.php. The footer styles are in the
 * mo-faq-homepage plugin (assets/css/site-footer.css).
 *
 * Header: logo ·
 * Products / Services / Plugins / Pricing / Resources / Company mega menus ·
 * Sign Up (filled) · Contact Us (outline). Footer: dark, with the
 * miniOrange link directory.
 *
 * Colours come from mo-tokens.css (var(--mo-*)), so the header follows the
 * light/dark theme on pages that support it. Header type uses the page
 * scale (var(--mo-fs-*), weight 500 for items, 600 for group titles, no
 * letter-spacing) so it matches the FAQ pages. Every selector is scoped to
 * .mo-sh / .mo-ft, and the Bootstrap 3 / theme defaults for ul, a, p,
 * button and img are reset inside them. Breakpoint: 1200px (same as
 * site-header.js); below it the menus move into the menu panel.
 */

/* ==================================================================
 * Header
 * ================================================================== */

.mo-sh {
	position: sticky;
	top: 0;
	z-index: 1100;
	background: var(--mo-surface);
	box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.08);
	font-family: var(--mo-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--mo-text);
}

html[data-mo-theme="dark"] .mo-sh {
	box-shadow: 0 1px 0 var(--mo-border);
}

/* Keep the sticky header below the WordPress admin bar for logged-in users. */
.admin-bar .mo-sh {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .mo-sh {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .mo-sh {
		top: 0; /* the admin bar is not fixed at this width */
	}
}

/* ---- resets inside header and footer (theme/Bootstrap defaults) ---- */
.mo-sh *,
.mo-sh *::before,
.mo-sh *::after,
.mo-ft *,
.mo-ft *::before,
.mo-ft *::after {
	box-sizing: border-box;
}

/* Class-level specificity: the theme/Bootstrap style bare ul, p, h2, a. */
.mo-sh ul,
.mo-sh ol,
.mo-sh p,
.mo-ft ul,
.mo-ft ol,
.mo-ft p,
.mo-ft h2 {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mo-sh a,
.mo-sh a:hover,
.mo-sh a:focus,
.mo-ft a,
.mo-ft a:hover,
.mo-ft a:focus {
	text-decoration: none;
}

.mo-sh img {
	max-width: none;
}

:where(.mo-sh) button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}

.mo-sh a:focus-visible,
.mo-sh button:focus-visible,
.mo-ft a:focus-visible {
	outline: 0.18rem solid var(--mo-focus);
	outline-offset: 0.25rem;
	border-radius: var(--mo-radius-sm);
}

.mo-sh a:focus:not(:focus-visible),
.mo-sh button:focus:not(:focus-visible) {
	outline: none;
}

/* ---- skip link ---- */
.mo-sh a.mo-sh__skip {
	position: absolute;
	top: -12.5rem;
	left: 1rem;
	z-index: 2;
	padding: 1.5rem 2rem;
	border-radius: var(--mo-radius-md);
	background: var(--mo-black);
	color: #ffffff;
	font-size: var(--mo-fs-md);
	font-weight: 500;
}

.mo-sh a.mo-sh__skip:focus {
	top: 1rem;
}

#mo-sh-after {
	outline: none;
}

/* ---- main bar ---- */
.mo-sh__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.6rem;
	max-width: 144rem;
	height: 6.4rem;
	margin: 0 auto;
	padding: 0 2rem 0.4rem;
}

.mo-sh a.mo-sh__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: auto;
	color: var(--mo-logo-text);
}

.mo-sh__logo .mo-logo {
	display: block;
	width: auto;
	height: 4.5rem;
}

@media (max-width: 599.98px) {
	.mo-sh__logo .mo-logo {
		height: 3.6rem;
	}
}

/* ---- buttons: Sign Up (filled) and Contact Us (outline) ---- */
.mo-sh a.mo-sh__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 12.6rem;
	min-height: 3.2rem;
	padding: 0.4rem 1.6rem;
	border: 1px solid var(--mo-accent);
	border-radius: 0.3rem;
	background: transparent;
	color: var(--mo-text);
	font-size: var(--mo-fs-sm);
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	transition: background-color var(--mo-speed) var(--mo-ease), color var(--mo-speed) var(--mo-ease);
}

.mo-sh a.mo-sh__btn:hover {
	background: var(--mo-accent);
	color: var(--mo-on-accent);
}

.mo-sh a.mo-sh__btn--primary {
	background: var(--mo-accent);
	color: var(--mo-on-accent);
}

.mo-sh a.mo-sh__btn--primary:hover {
	border-color: var(--mo-accent-hover);
	background: var(--mo-accent-hover);
}

.mo-sh__actions,
.mo-sh__btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.8rem;
}

/* ---- menu button (mobile) ---- */
.mo-sh button.mo-sh__burger {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: var(--mo-control-h);
	height: var(--mo-control-h);
	border-radius: var(--mo-radius-md);
	color: var(--mo-text);
}

.mo-sh button.mo-sh__burger:hover {
	background: var(--mo-surface-subtle);
}

@media (pointer: coarse) {
	.mo-sh button.mo-sh__burger {
		width: 5.5rem;
		height: 5.5rem;
	}
}

.mo-sh__burger-close,
.mo-sh__burger[aria-expanded="true"] .mo-sh__burger-open {
	display: none;
}

.mo-sh__burger[aria-expanded="true"] .mo-sh__burger-close {
	display: block;
}

/* ---- top-level menu buttons ---- */
.mo-sh button.mo-sh__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 4.4rem;
	padding: 0 1.2rem;
	color: #3d3d3d; /* as on miniorange.com */
	font-size: var(--mo-fs-md);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.5;
	white-space: nowrap;
	transition: color var(--mo-speed) var(--mo-ease);
}

.mo-sh button.mo-sh__toggle:hover {
	color: var(--mo-accent);
}

.mo-sh__chevron {
	flex-shrink: 0;
	transition: transform var(--mo-speed) var(--mo-ease);
}

.mo-sh__toggle[aria-expanded="true"] .mo-sh__chevron,
.mo-sh__tab[aria-expanded="true"] .mo-sh__chevron {
	transform: rotate(180deg);
}

.mo-sh__arrow {
	flex-shrink: 0;
	vertical-align: -0.15em;
}

/* ==================================================================
 * Panel content (shared by desktop and mobile)
 * ================================================================== */

.mo-sh__panel {
	color: var(--mo-text);
	font-size: var(--mo-fs-sm);
	line-height: 1.5;
}

/* "Single Sign-On →" heading + description + "View Pricing →". */
.mo-sh__sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--mo-border);
}

.mo-sh a.mo-sh__sec-title,
.mo-sh p.mo-sh__sec-title {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--mo-text);
	font-size: var(--mo-fs-lg);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
}

.mo-sh a.mo-sh__sec-title:hover {
	color: var(--mo-accent);
}

.mo-sh p.mo-sh__sec-text {
	margin-top: 0.8rem;
	color: var(--mo-text-muted);
	font-size: var(--mo-fs-xs);
}

.mo-sh a.mo-sh__more,
.mo-sh span.mo-sh__more {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
	color: var(--mo-accent);
	font-size: var(--mo-fs-sm);
	font-weight: 500;
}

.mo-sh a.mo-sh__more:hover {
	color: var(--mo-text);
	text-decoration: underline;
}

.mo-sh__sec-body {
	display: grid;
	gap: 2.4rem;
	padding-top: 2rem;
}

.mo-sh p.mo-sh__group-title {
	margin: 1.6rem 0 0.4rem 0.6rem;
	color: var(--mo-text);
	font-size: var(--mo-fs-md);
	font-weight: 600;
}

.mo-sh p.mo-sh__group-title:first-child {
	margin-top: 0;
}

/* Icon items: icon · title · description. */
.mo-sh__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
	gap: 0.4rem 2.4rem;
}

.mo-sh a.mo-sh__mi {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	height: 100%;
	padding: 1rem 0.8rem;
	border-radius: 0.8rem;
	color: var(--mo-text);
	transition: background-color var(--mo-speed) var(--mo-ease);
}

.mo-sh a.mo-sh__mi:hover {
	background: var(--mo-surface-subtle);
}

.mo-sh__mi-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.4rem;
	height: 2.4rem;
	margin-top: 0.2rem;
}

.mo-sh__mi-icon img {
	display: block;
	width: 2.2rem;
	height: 2.2rem;
	object-fit: contain;
}

/* Product / platform logos (Pricing menu) sit in a bordered tile. */
.mo-sh__items--logos .mo-sh__mi-icon {
	width: 4rem;
	height: 4rem;
	margin-top: 0;
	border: 1px solid #e3e3e3;
	border-radius: 1rem;
	background: #ffffff;
}

.mo-sh__items--logos .mo-sh__mi-icon img {
	width: 2.8rem;
	height: 2.8rem;
}

.mo-sh__mi-body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.mo-sh__mi-title {
	font-size: var(--mo-fs-md);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.4;
}

.mo-sh a.mo-sh__mi:hover .mo-sh__mi-title {
	color: var(--mo-accent);
}

.mo-sh__mi-text {
	color: var(--mo-text-muted);
	font-size: var(--mo-fs-xs);
	line-height: 1.55;
}

/* Section list: label with optional platform logo or arrow. */
.mo-sh__tab-label {
	display: inline-flex;
	align-items: center;
	gap: 1.4rem;
}

.mo-sh__tab-label .mo-sh__chip-icon {
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 0.8rem;
}

.mo-sh__tab-label .mo-sh__chip-icon img {
	width: 2.2rem;
	height: 2.2rem;
}

.mo-sh__tab-label .mo-sh__arrow {
	color: var(--mo-accent);
}

/* Side column: "Popular Integrations" / "Industries" chips, buttons. */
.mo-sh p.mo-sh__side-title {
	margin-bottom: 1.2rem;
	color: var(--mo-text);
	font-size: var(--mo-fs-md);
	font-weight: 500;
}

.mo-sh__chips {
	display: grid;
	gap: 0.8rem;
	margin-bottom: 1.6rem !important;
}

.mo-sh a.mo-sh__chip {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	padding: 0.4rem;
	border-radius: 0.8rem;
	color: var(--mo-text);
	font-size: var(--mo-fs-sm);
	font-weight: 500;
	letter-spacing: 0;
}

.mo-sh a.mo-sh__chip:hover {
	color: var(--mo-accent);
}

.mo-sh__chip-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 4rem;
	height: 4rem;
	border: 1px solid #e3e3e3;
	border-radius: 1rem;
	background: #ffffff;
}

.mo-sh__chip-icon img {
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	object-fit: contain;
}

.mo-sh__side .mo-sh__btns {
	margin-top: 2rem;
}

/* Services cards. */
.mo-sh__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
	gap: 2.4rem;
}

.mo-sh a.mo-sh__card {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	height: 100%;
	padding: 1.8rem;
	border: 1px solid var(--mo-border);
	border-radius: 1rem;
	background: var(--mo-surface-subtle);
	color: var(--mo-text);
	transition: border-color var(--mo-speed) var(--mo-ease);
}

.mo-sh a.mo-sh__card:hover {
	border-color: var(--mo-accent);
}

.mo-sh__card-title {
	font-size: var(--mo-fs-md);
	font-weight: 600;
	letter-spacing: 0;
}

.mo-sh__card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	border-radius: 0.6rem;
	object-fit: cover;
}

.mo-sh__card-text {
	flex: 1;
	color: var(--mo-text-muted);
	font-size: var(--mo-fs-xs);
}

/* Resources / Company: intro + link columns. */
.mo-sh p.mo-sh__intro-title {
	color: var(--mo-text);
	font-size: var(--mo-fs-xl);
	font-weight: 600;
	line-height: 1.3;
}

.mo-sh p.mo-sh__intro-text {
	margin: 1.6rem 0 2.4rem;
	color: var(--mo-text-muted);
	font-size: var(--mo-fs-sm);
	line-height: 1.6;
}

.mo-sh__cols {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 2.4rem;
}

.mo-sh p.mo-sh__col-title {
	margin-bottom: 1.2rem;
	color: var(--mo-text);
	font-size: var(--mo-fs-md);
	font-weight: 600;
}

.mo-sh__col li + li {
	margin-top: 0.4rem;
}

.mo-sh a.mo-sh__link {
	display: inline-block;
	padding: 0.4rem 0;
	color: var(--mo-text-muted);
	font-size: var(--mo-fs-sm);
}

.mo-sh a.mo-sh__link:hover {
	color: var(--mo-accent);
}

/* Dark Help & Support box (dark in both themes). */
.mo-sh__help {
	align-self: start;
	padding: 2.8rem 2rem;
	border-radius: 0.8rem;
	background: #272727;
	color: #ffffff;
}

html[data-mo-theme="dark"] .mo-sh__help {
	box-shadow: 0 0 0 1px var(--mo-border);
}

.mo-sh p.mo-sh__help-title {
	font-size: var(--mo-fs-md);
	font-weight: 600;
}

.mo-sh p.mo-sh__help-text {
	margin: 2rem 0 3.2rem;
	color: #d0d0d0;
	font-size: var(--mo-fs-xs);
	line-height: 1.7;
}

.mo-sh p.mo-sh__help-line {
	display: flex;
	align-items: flex-start;
	gap: 1.4rem;
	margin-top: 1rem;
}

.mo-sh__help-line .mo-icon {
	flex-shrink: 0;
	margin-top: 0.3rem;
	color: #ffffff;
}

.mo-sh__help-line span {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.mo-sh__help a,
.mo-sh__help a:hover {
	color: #ffffff;
	font-size: var(--mo-fs-sm);
	letter-spacing: 0;
}

.mo-sh__help a:hover {
	text-decoration: underline;
}

/* ==================================================================
 * Mobile and tablet (< 1200px): menus in a panel under the bar
 * ================================================================== */
@media (max-width: 1199.98px) {
	.mo-sh__actions {
		display: none;
	}

	.mo-sh__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		max-height: calc(100vh - 10rem);
		padding: 1rem 2rem 2.4rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-top: 1px solid var(--mo-border);
		background: var(--mo-surface);
		box-shadow: 0 1.6rem 2.4rem -1.6rem rgba(0, 0, 0, 0.25);
	}

	.mo-sh--open .mo-sh__nav {
		display: block;
	}

	/* Without JS there is nothing to open the menu: show it inline instead. */
	.mo-sh:not(.mo-sh--js) .mo-sh__bar {
		flex-wrap: wrap;
		height: auto;
		min-height: 6.4rem;
	}

	.mo-sh:not(.mo-sh--js) .mo-sh__nav {
		position: static;
		display: block;
		order: 9;
		flex-basis: 100%;
		max-height: none;
		box-shadow: none;
	}

	.mo-sh:not(.mo-sh--js) .mo-sh__burger {
		display: none;
	}

	.mo-sh__item {
		border-bottom: 1px solid var(--mo-border);
	}

	.mo-sh button.mo-sh__toggle {
		justify-content: space-between;
		width: 100%;
		min-height: 5.2rem;
		padding: 0 0.4rem;
		font-size: var(--mo-fs-md);
	}

	.mo-sh--js .mo-sh__toggle[aria-expanded="false"] + .mo-sh__panel {
		display: none;
	}

	.mo-sh__panel {
		padding: 0 0 2rem 0.4rem;
	}

	/* Tabs become an accordion: each section opens under its button. */
	.mo-sh button.mo-sh__tab,
	.mo-sh a.mo-sh__tab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 4.8rem;
		padding: 0 1.2rem;
		border-radius: 0.6rem;
		color: var(--mo-text);
		font-size: var(--mo-fs-sm);
		font-weight: 500;
		letter-spacing: 0;
	}

	.mo-sh button.mo-sh__tab[aria-expanded="true"] {
		background: var(--mo-surface-subtle);
		color: var(--mo-accent);
	}

	.mo-sh--js .mo-sh__tab[aria-expanded="false"] + .mo-sh__sec {
		display: none;
	}

	.mo-sh__sec {
		padding: 1.6rem 0.4rem 2rem;
	}

	.mo-sh__sec-head {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.mo-sh__flat {
		display: grid;
		gap: 2.4rem;
		padding-top: 0.8rem;
	}

	.mo-sh__flat .mo-sh__help {
		display: none; /* contact details are on the Contact Us page and in the footer */
	}

	.mo-sh__cols {
		margin-top: 2.4rem;
	}

	.mo-sh p.mo-sh__intro-title {
		font-size: var(--mo-fs-xl);
	}

	.mo-sh__mobile-extra {
		padding-top: 2rem;
	}

	.mo-sh__mobile-extra .mo-sh__btn {
		flex: 1;
		min-height: 4.4rem;
	}
}

/* ==================================================================
 * Desktop (>= 1200px): mega menus under the bar
 * ================================================================== */
@media (min-width: 1200px) {
	.mo-sh button.mo-sh__burger,
	.mo-sh__mobile-extra {
		display: none;
	}

	.mo-sh__nav {
		margin-right: auto;
	}

	.mo-sh__menu {
		display: flex;
		align-items: center;
		gap: 0.4rem;
	}

	/* Panels are positioned against the bar, so they span the page. */
	.mo-sh__item {
		position: static;
	}

	.mo-sh__panel {
		position: absolute;
		top: 100%;
		left: 4rem;
		right: 4rem;
		z-index: 10;
		display: none;
		max-height: calc(100vh - 12rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 0 0 1.6rem 1.6rem;
		background: var(--mo-surface);
		box-shadow: 0 1.6rem 3.2rem -0.8rem rgba(0, 0, 0, 0.2), 0 0 0 1px var(--mo-border);
		animation: mo-sh-drop var(--mo-speed) var(--mo-ease);
	}

	/* Invisible bridge so the pointer can travel from button to panel. */
	.mo-sh__panel::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -1.2rem;
		height: 1.2rem;
	}

	.mo-sh--js .mo-sh__toggle[aria-expanded="true"] + .mo-sh__panel {
		display: block;
	}

	/* Without JS: open on hover or keyboard focus. */
	.mo-sh:not(.mo-sh--js) .mo-sh__item:hover > .mo-sh__panel,
	.mo-sh:not(.mo-sh--js) .mo-sh__item:focus-within > .mo-sh__panel {
		display: block;
	}

	/* Tabs: section list on the left (one row per button, then a filler
	 * row), the active section on the right spanning every row. */
	.mo-sh__tabs {
		display: grid;
		grid-template-columns: 30rem minmax(0, 1fr);
		grid-template-rows: repeat(var(--mo-sh-tabs, 6), auto) 1fr;
		column-gap: 3.2rem;
		padding: 2.4rem 3.2rem 3.2rem 2.4rem;
	}

	.mo-sh button.mo-sh__tab,
	.mo-sh a.mo-sh__tab {
		grid-column: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 5rem;
		padding: 0.8rem 1.6rem;
		border-radius: 0.6rem;
		color: var(--mo-text);
		font-size: var(--mo-fs-sm);
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.4;
		transition: background-color var(--mo-speed) var(--mo-ease), color var(--mo-speed) var(--mo-ease);
	}

	.mo-sh button.mo-sh__tab:hover,
	.mo-sh a.mo-sh__tab:hover,
	.mo-sh button.mo-sh__tab[aria-expanded="true"] {
		background: var(--mo-surface-subtle);
		color: var(--mo-accent);
	}

	.mo-sh button.mo-sh__tab .mo-sh__chevron {
		display: none;
	}

	/* Open menu: orange line under its name, at the bottom of the bar. */
	.mo-sh button.mo-sh__toggle {
		position: relative;
	}

	.mo-sh button.mo-sh__toggle[aria-expanded="true"]::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1rem;
		height: 0.3rem;
		background: var(--mo-accent);
	}

	/* Section buttons without a side column (Plugins): bottom right, larger. */
	.mo-sh__sec-body:not(.mo-sh__sec-body--side) .mo-sh__side {
		display: flex;
		justify-content: flex-end;
	}

	.mo-sh__sec-body:not(.mo-sh__sec-body--side) .mo-sh__btns {
		margin-top: 0;
		gap: 2rem;
	}

	.mo-sh__sec-body:not(.mo-sh__sec-body--side) .mo-sh__btn {
		min-height: 4.4rem;
		padding: 0.8rem 1.8rem;
		border-radius: 0.4rem;
		font-size: var(--mo-fs-md);
		letter-spacing: 0;
	}

	.mo-sh__sec {
		grid-column: 2;
		grid-row: 1 / -1;
		padding-left: 3.2rem;
		border-left: 1px solid var(--mo-border);
	}

	.mo-sh--js .mo-sh__tab[aria-expanded="false"] + .mo-sh__sec {
		display: none;
	}

	/* Without JS only the first section is shown. */
	.mo-sh:not(.mo-sh--js) .mo-sh__sec ~ .mo-sh__sec {
		display: none;
	}

	.mo-sh__sec-body--side {
		grid-template-columns: minmax(0, 1fr) 24rem;
		gap: 3.2rem;
	}

	.mo-sh__sec-body--side .mo-sh__side {
		padding-left: 2.4rem;
		border-left: 1px solid var(--mo-border);
	}

	.mo-sh__sec-body:not(.mo-sh__sec-body--side) .mo-sh__side {
		padding-top: 0.8rem;
	}

	/* Items fill each column top to bottom, as on miniorange.com. */
	.mo-sh__groups .mo-sh__items {
		display: block;
		column-count: 2;
		column-gap: 2.4rem;
	}

	.mo-sh__sec-body:not(.mo-sh__sec-body--side) .mo-sh__groups .mo-sh__items {
		column-count: 3;
	}

	.mo-sh__groups .mo-sh__items > li {
		break-inside: avoid;
		padding-bottom: 0.4rem;
	}

	/* Services / Pricing / Resources / Company. */
	.mo-sh__flat {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 28rem;
		gap: 4rem;
		padding: 3.2rem 3.2rem 3.6rem;
	}

	.mo-sh__panel--columns .mo-sh__flat-main {
		display: grid;
		grid-template-columns: 28rem minmax(0, 1fr);
		gap: 4rem;
	}

	.mo-sh__panel--columns .mo-sh__cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mo-sh__panel--grid .mo-sh__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-top: 2rem;
	}

	.mo-sh__panel--cards .mo-sh__cards {
		grid-template-columns: repeat(2, minmax(0, 34rem));
	}

	.mo-sh__flat .mo-sh__help {
		padding-left: 2rem;
	}
}

/* 1200–1399px: six menus and two buttons only just fit. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.mo-sh__bar {
		gap: 1rem;
	}

	.mo-sh button.mo-sh__toggle {
		padding: 0 0.8rem;
		letter-spacing: 0;
	}

	.mo-sh__actions {
		flex-wrap: nowrap;
		gap: 1rem;
	}

	.mo-sh a.mo-sh__btn {
		min-width: 0;
		padding: 0.4rem 1.4rem;
	}
}

/* Large screens: room between the menus, as on miniorange.com. */
@media (min-width: 1400px) {
	.mo-sh__menu {
		gap: 1.6rem;
	}

	.mo-sh__panel {
		left: 50%;
		right: auto;
		width: 100%;
		max-width: 150rem;
		transform: translateX(-50%);
		animation: none;
	}
}

@keyframes mo-sh-drop {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---- theme spacing that existed only to clear the old transparent nav ---- */
body.mo-sh-on .jumbotron_new .inner-margin-top {
	padding-top: 0 !important;
}

@media print {
	.mo-sh {
		position: static;
		box-shadow: none;
	}

	.mo-sh__nav,
	.mo-sh__actions,
	.mo-sh__burger,
	.mo-sh__skip,
	.mo-ft {
		display: none !important;
	}
}

/* ==================================================================
 * White logo (image) on dark surfaces: dark-theme header and footer.
 * The image is 397×110 with transparent padding (artwork 385×72 at
 * 6,23). Scaled so its artwork has exactly the size and position of the
 * inline SVG logo at 45px height (the header logo, as on miniorange.com).
 * ================================================================== */
.mo-logo-white {
	display: block;
	flex-shrink: 0;
	width: 23.258rem !important;
	max-width: none !important;
	height: 6.447rem !important;
	margin: -0.578rem 0 -0.244rem 0.17rem;
}

.mo-sh__logo .mo-logo-white,
html[data-mo-theme="dark"] .mo-sh__logo .mo-logo {
	display: none;
}

html[data-mo-theme="dark"] .mo-sh__logo .mo-logo-white {
	display: block;
}

@media (max-width: 599.98px) {
	.mo-logo-white {
		width: 18.606rem !important;
		height: 5.158rem !important;
		margin: -0.462rem 0 -0.195rem 0.14rem;
	}
}