:root {
	--mana-navy: #00277a;
	--mana-gold: #ffa700;
	--mana-ink: #222222;
	--mana-link-blue: #3193fc;
	--mana-light-grey: #f2f2f2;
	--mana-header-width: 1540px;

	/* Shared page container. Every template uses this width so the content
	   column starts at the same place with or without a right column. */
	--mana-page-width: 1380px;

	/* Left inset for page content. Zero: content runs the full container width
	   and starts near the logo's left edge, as on the live site. Raising this
	   pulls every page in from the left, so change it here rather than
	   per-page — the containers, the two-column main and the wide-element
	   offsets all derive from it. */
	--mana-page-indent: 0px;
}

.mana-interior--full {
	max-width: 1200px;
}

.mana-meeting-intro {
	margin: 2.5rem 0 1.5rem;
}

.mana-meeting-intro h2 {
	color: var(--mana-navy);
	font-size: 1.35rem;
}

.mana-responsive-embed {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--mana-light-grey);
	border-radius: 4px;
}

.mana-responsive-embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Live sizes its Wistia iframes at a fixed 640x360; without a cap ours stretch
   to the full main column. Kept as max-width rather than width so narrow
   screens still shrink it. Pages carrying `.mana-video-embed` (Understanding
   Reps, Start a Rep Agency) set their own 615px width later in this file and
   are unaffected. */
.mana-responsive-embed--video {
	max-width: 640px;
	aspect-ratio: 16 / 9;
	margin: 2rem 0;
}

.mana-responsive-embed--video iframe {
	height: 100%;
}

/* The Libsyn player draws its own chrome at a fixed 192px; it does not scale. */
.mana-responsive-embed--audio {
	margin: 2rem 0;
}

.mana-responsive-embed--audio iframe {
	height: 192px;
}

.mana-responsive-embed--calendar iframe {
	min-height: 860px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* No `scroll-behavior: smooth` here, deliberately. With it set, Chrome
	   silently abandons fragment navigation on these pages: clicking a link to
	   #contribute or landing on /about/#bylaws changed the hash and then never
	   scrolled at all, leaving the reader at the top of the page. Measured both
	   ways on staging -- identical page, identical click, `smooth` ended at
	   scrollY 0 and `auto` landed correctly. The animation loses to the layout
	   still settling (images, the Cedar widgets), and once cancelled it is not
	   retried. Every anchor on the site depends on this: the footer's four
	   governance links, the About jump nav and its Top of Page links, the
	   magazine page's Learn how to contribute, and the two home-page finders. */

	/* Always reserve the scrollbar's width. Without this, short pages have no
	   scrollbar and tall ones do, so centred content shifts sideways by ~8px as
	   you move between them. */
	scrollbar-gutter: stable;
}

/* `.site-header` is sticky at top:0, so an anchor jump parks its target
   underneath it — the footer's About links (#bylaws, #ethics, #mission,
   #antitrust) and the magazine page's #contribute all landed hidden.
   The header measures 176px: a 38px utility bar over a 138px header row.
   200px clears it with a little room to spare.

   Applied to headings carrying an id as well as `:target`, deliberately.
   `:target` alone only ever matches the one element the URL currently points
   at, so it does nothing for `scrollIntoView()` or for a heading that is not
   the live fragment — measured at 0px on three of four anchors while testing.
   scroll-margin has no visual effect, so listing the headings costs nothing. */
:target,
h1[id],
h2[id],
h3[id],
h4[id] {
	scroll-margin-top: 200px;
}

/* The admin bar pushes the sticky header down another 32px for logged-in
   views, exactly as `.admin-bar .site-header` already accounts for. */
.admin-bar :target,
.admin-bar h1[id],
.admin-bar h2[id],
.admin-bar h3[id],
.admin-bar h4[id] {
	scroll-margin-top: 232px;
}

body {
	margin: 0;
	color: var(--mana-ink);
	font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
	font: inherit;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	background: #fff;
	color: var(--mana-navy);
}

.site-header {
	position: sticky;
	z-index: 900;
	top: 0;
	background: #fff;
}

.admin-bar .site-header {
	top: 32px;
}

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

.utility-bar {
	position: relative;
	height: 38px;
	background: var(--mana-light-grey);
}

.utility-bar__inner {
	width: min(calc(100% - 48px), var(--mana-header-width));
	height: 100%;
	margin-inline: auto;
}

.utility-nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
}

.utility-nav a {
	padding: 0 11px;
	border-right: 1px solid var(--mana-gold);
	color: #000;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
}

.utility-nav a:hover,
.utility-nav a:focus-visible {
	color: #757575;
	text-decoration: underline;
}

.search-toggle {
	display: grid;
	place-items: center;
	width: 40px;
	height: 38px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #000;
	cursor: pointer;
}

.search-toggle svg,
.header-search svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.5;
}

.header-search {
	position: absolute;
	top: 38px;
	right: 0;
	z-index: 2;
	padding: 5px;
	background: #e8e8e8;
}

.header-search[hidden] {
	display: none;
}

.header-search form {
	display: flex;
	background: #fff;
}

.header-search input {
	width: 248px;
	height: 36px;
	padding: 6px 11px;
	border: 1px solid #5797e7;
	outline: 0;
	font-size: 16px;
}

.header-search input:focus {
	box-shadow: inset 0 0 0 1px #5797e7;
}

.header-search button {
	width: 25px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #4e4e4e;
	cursor: pointer;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(calc(100% - 80px), var(--mana-header-width));
	min-height: 138px;
	margin-inline: auto;
	gap: 40px;
}

.site-brand {
	flex: 0 1 320px;
}

.site-brand a {
	display: block;
}

.site-brand img,
.custom-logo {
	display: block;
	width: 320px;
	max-width: 100%;
	height: auto;
}

@media (min-width: 991px) {
	.site-header__inner,
	.site-brand,
	.site-brand img,
	.custom-logo {
		transition: min-height 220ms ease, flex-basis 220ms ease, width 220ms ease;
	}

	.site-header--compact {
		box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
	}

	.site-header--compact .site-header__inner {
		min-height: 52px;
	}

	.site-header--compact .site-brand {
		flex-basis: 145px;
	}

	.site-header--compact .site-brand img,
	.site-header--compact .custom-logo {
		width: 145px;
	}
}

.primary-nav .menu {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.25vw, 24px);
	padding: 0;
	margin: 0;
	list-style: none;
}

.primary-nav .menu-item {
	position: relative;
}

.primary-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	display: none;
	width: 285px;
	padding: 10px 0;
	margin: 0;
	border-top: 4px solid var(--mana-gold);
	background: #fff;
	box-shadow: 0 8px 18px rgb(0 0 0 / 16%);
	list-style: none;
}

.primary-nav .menu-item:hover > .sub-menu,
.primary-nav .menu-item:focus-within > .sub-menu {
	display: block;
}

.primary-nav .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 15px;
	white-space: normal;
}

/* Third level — Special Interest Groups' two children. Drawn as an indented
   list inside the already-open panel rather than a hover flyout: the panel is
   a fixed 285px, so a flyout would need off-screen handling, and a nested list
   stays reachable by keyboard without a second hover target. */
.primary-nav .sub-menu .sub-menu {
	position: static;
	display: block;
	width: auto;
	padding: 0;
	border-top: 0;
	box-shadow: none;
}

.primary-nav .sub-menu .sub-menu a {
	padding-left: 34px;
	font-size: 14px;
	color: #3a3a3a;
}

.primary-nav a {
	color: #050505;
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 400;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
	color: var(--mana-navy);
}

.nav-toggle {
	display: none;
	padding: 8px;
	border: 0;
	background: transparent;
	color: #333;
	cursor: pointer;
}

.nav-toggle__bars {
	display: grid;
	gap: 5px;
}

.nav-toggle__bars span {
	display: block;
	width: 28px;
	height: 4px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child {
	transform: translateY(9px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child {
	transform: translateY(-9px) rotate(-45deg);
}

.front-page__content > * {
	margin-block-start: 0;
}

.mana-hero-slider {
	position: relative;
	min-height: 440px;
	overflow: hidden;
	background: var(--mana-navy-dark);
}

.mana-hero-slider > .mana-home-hero__slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 700ms ease, visibility 700ms ease;
}

.mana-hero-slider > .mana-home-hero__slide.is-active {
	z-index: 1;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.mana-home-hero {
	min-height: 440px;
	background-position: center;
	background-size: cover;
	color: #fff;
}

.mana-home-hero .wp-block-cover__image-background {
	object-position: center center;
}

.mana-home-hero__inner {
	width: min(calc(100% - 64px), 1200px);
	margin-inline: auto;
}

.mana-home-hero--panel-right .mana-home-hero__inner {
	display: flex;
	justify-content: flex-end;
}

.mana-home-hero--partnership .wp-block-cover__image-background {
	object-position: center center;
}

.mana-home-hero--growth .wp-block-cover__image-background {
	object-position: left center;
}

.mana-home-hero--growth {
	background-position: left center;
}

.mana-home-hero__panel {
	width: min(700px, 100%);
	padding: 10px 20px 20px;
	margin: 0;
	background: rgb(0 39 122 / 88%);
}

.mana-home-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 0 6px;
	margin: 0 0 10px;
	border-bottom: 1px solid rgb(255 167 0 / 40%);
	font-size: 23px;
	font-weight: 400;
	line-height: 1.45;
}

.mana-home-hero__eyebrow::before {
	content: "";
	flex: 0 0 22px;
	width: 22px;
	height: 30px;
	background: var(--mana-gold);
	clip-path: polygon(0 0, 65% 0, 100% 35%, 100% 100%, 0 100%);
}

.mana-home-hero__title {
	max-width: 620px;
	margin: 0 0 18px;
	color: #fff;
	font-size: 31px;
	font-weight: 600;
	line-height: 1.12;
}

.mana-home-hero__buttons {
	margin: 0;
}

.mana-home-hero__button .wp-block-button__link {
	padding: 9px 18px;
	border-radius: 4px;
	background: #3193fc;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}

.mana-home-hero__button .wp-block-button__link:hover,
.mana-home-hero__button .wp-block-button__link:focus-visible {
	background: var(--mana-gold);
	color: var(--mana-navy);
}

.mana-hero-slider__controls {
	position: absolute;
	z-index: 3;
	inset: 0;
	pointer-events: none;
}

.mana-hero-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 13px;
	border-radius: 999px;
	background: rgb(1 25 77 / 78%);
	pointer-events: auto;
	transform: translateX(-50%);
}

.mana-hero-slider__arrow,
.mana-hero-slider__dot {
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	color: #fff;
	cursor: pointer;
}

.mana-hero-slider__arrow {
	position: absolute;
	top: 50%;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgb(1 25 77 / 82%);
	box-shadow: 0 3px 12px rgb(0 0 0 / 24%);
	font-size: 0;
	line-height: 1;
	pointer-events: auto;
	transform: translateY(-50%);
}

.mana-hero-slider__arrow:first-child {
	left: 22px;
}

.mana-hero-slider__arrow:last-child {
	right: 22px;
}

.mana-hero-slider__arrow svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.75;
}

.mana-hero-slider__dot {
	width: 11px;
	height: 11px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
}

.mana-hero-slider__dot.is-active {
	border-color: var(--mana-gold);
	background: var(--mana-gold);
}

.mana-hero-slider__arrow:hover,
.mana-hero-slider__arrow:focus-visible {
	background: rgb(255 255 255 / 18%);
}

.mana-hero-slider__arrow:focus-visible,
.mana-hero-slider__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 990px) {
	.mana-home-hero__inner {
		width: min(calc(100% - 60px), 690px);
	}

	.mana-home-hero__panel {
		width: min(600px, 100%);
		margin-inline: auto;
	}

	.mana-home-hero__eyebrow {
		justify-content: center;
		font-size: 18px;
		text-align: center;
	}

	.mana-home-hero__title {
		margin-inline: auto;
		font-size: 30px;
		text-align: center;
	}

	.mana-home-hero__buttons {
		justify-content: center;
	}

	.mana-home-hero--panel-right .mana-home-hero__inner {
		display: block;
	}
}

@media (max-width: 600px) {
	.mana-home-hero {
		min-height: 440px;
	}

	.mana-home-hero__inner {
		width: calc(100% - 60px);
	}

	.mana-home-hero__panel {
		padding: 10px 20px 20px;
	}

	.mana-home-hero__eyebrow {
		gap: 8px;
		font-size: clamp(15px, 4vw, 18px);
		white-space: nowrap;
	}

	.mana-home-hero__slide:first-child .mana-home-hero__eyebrow {
		line-height: 1.25;
		white-space: normal;
	}

	.mana-home-hero__eyebrow::before {
		flex-basis: 20px;
		width: 20px;
		height: 27px;
	}

	.mana-home-hero__title {
		font-size: clamp(27px, 7.5vw, 32px);
	}

	.mana-hero-slider__controls {
		inset: 0;
	}

	.mana-hero-slider__dots {
		bottom: 12px;
	}

	.mana-hero-slider__arrow {
		width: 44px;
		height: 44px;
	}

	.mana-hero-slider__arrow:first-child {
		left: 8px;
	}

	.mana-hero-slider__arrow:last-child {
		right: 8px;
	}
}

.mobile-utility-nav {
	display: none;
}

/* Same container as every other page, so search results line up with them. */
.mana-search-results {
	width: min(calc(100% - 60px), var(--mana-page-width));
	margin-inline: auto;
	padding: 72px 0 96px;
}

.mana-search-results__header {
	padding-bottom: 22px;
	border-bottom: 2px solid var(--mana-gold);
}

.mana-search-results__eyebrow {
	margin: 0 0 5px;
	color: var(--mana-link-blue);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mana-search-results__header h1 {
	margin: 0;
	color: var(--mana-navy);
	font-size: clamp(36px, 5vw, 52px);
	line-height: 1.1;
}

.mana-search-results__header p:last-child {
	margin: 10px 0 0;
	color: #424242;
	font-size: 20px;
}

.mana-search-results__form {
	margin: 34px 0;
}

.mana-search-results__form form {
	display: flex;
	max-width: 680px;
}

.mana-search-results__form label {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.mana-search-results__form input {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid #b8b8b8;
	border-radius: 4px 0 0 4px;
	font: inherit;
}

.mana-search-results__form button,
.mana-search-results__form .search-submit {
	flex: 0 0 auto;
	width: auto;
	min-width: 110px;
	padding: 10px 18px;
	border: 1px solid var(--mana-navy);
	border-radius: 0 4px 4px 0;
	background: var(--mana-navy);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.mana-search-results__list {
	display: grid;
	gap: 20px;
}

.mana-search-card,
.mana-search-results__empty {
	padding: 26px 30px;
	border-left: 4px solid var(--mana-link-blue);
	background: #fff;
	box-shadow: 0 5px 20px rgb(0 0 0 / 9%);
}

.mana-search-card__type {
	margin: 0 0 4px;
	color: #6a6a6a;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mana-search-card h2,
.mana-search-results__empty h2 {
	margin: 0 0 8px;
	color: var(--mana-navy);
	font-size: 26px;
	line-height: 1.2;
}

.mana-search-card h2 a {
	color: inherit;
	text-decoration: none;
}

.mana-search-card__excerpt p {
	margin: 0 0 12px;
}

.mana-search-card__link {
	color: var(--mana-link-blue);
	font-weight: 700;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.mana-hero-slider > .mana-home-hero__slide {
		transition: none;
	}
}

.mana-audiences {
	padding: 58px 32px 68px;
	background: #f5f7fa;
}

.mana-audiences__columns {
	gap: clamp(28px, 5vw, 70px);
	margin: 0 auto;
}

.mana-audience {
	position: relative;
	padding: 36px clamp(26px, 4vw, 52px) 38px;
	border: 1px solid #e1e7ef;
	border-radius: 4px;
	background: #fff;
	text-align: center;
	box-shadow: 0 7px 22px rgb(0 39 122 / 9%);
}

.mana-audience::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--mana-gold), #ffca62);
}

.mana-audience__title {
	display: grid;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 18px;
	color: var(--mana-navy);
	font-size: 30px;
}

.mana-audience__title::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin-inline: auto;
	border-radius: 50%;
	background-color: #fff3d8;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 25px;
}

.mana-audience:first-child .mana-audience__title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300277a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V9l7-4v16M12 11l7-3v13M8 12h1M8 16h1M15 12h1M15 16h1'/%3E%3C/svg%3E");
}

.mana-audience:last-child .mana-audience__title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300277a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5c0-1 1-2 2-2h4c1 0 2 1 2 2v2M3 12h18M10 12v2h4v-2'/%3E%3C/svg%3E");
}

.mana-audience p {
	max-width: 510px;
	min-height: 58px;
	margin: 0 auto 28px;
	line-height: 1.6;
}

.mana-button .wp-block-button__link {
	padding: 9px 20px;
	border: 2px solid transparent;
	border-radius: 24px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.mana-button .wp-block-button__link:hover,
.mana-button .wp-block-button__link:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 7px 14px rgb(0 39 122 / 25%);
}

.mana-button--blue .wp-block-button__link {
	background: var(--mana-link-blue);
	color: #fff;
}

.mana-button--navy .wp-block-button__link {
	background: var(--mana-navy);
	color: #fff;
}

.mana-button--muted .wp-block-button__link {
	background: #aab3ba;
	color: var(--mana-navy);
}

.mana-button--outline .wp-block-button__link {
	border-color: var(--mana-navy);
	background: var(--mana-navy);
	color: #fff;
}

.mana-button--outline .wp-block-button__link:hover,
.mana-button--outline .wp-block-button__link:focus-visible {
	background: #fff;
	color: #000;
}

.mana-callout {
	padding: 40px 32px;
	background: #f5f6f7;
}

.mana-callout__columns {
	width: min(100%, 1100px);
	margin: 0 auto;
}

.mana-callout__image {
	margin: 0;
	text-align: center;
}

.mana-callout__image img {
	width: 202px;
	border-radius: 0;
}

.mana-callout h2 {
	margin: 0 0 4px;
	font-size: 32px;
}

.mana-callout p {
	margin: 0 0 22px;
	line-height: 1.45;
}

.mana-callout a {
	color: #3193fc;
	text-decoration: none;
}

.mana-callout p:last-child a {
	color: #333;
}

.mana-video-section {
	padding: 58px 32px 66px;
	background: #fff;
}

.mana-video-section h2 {
	margin: 0 0 30px;
	color: var(--mana-navy);
	font-size: 31px;
}

.mana-video-preview {
	width: min(100%, 617px);
	margin: 0 auto;
}

.mana-video-preview img {
	display: block;
	width: 100%;
	border-radius: 10px;
	box-shadow: 0 3px 8px rgb(0 0 0 / 15%);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.mana-video-preview a:hover img,
.mana-video-preview a:focus-visible img {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgb(0 39 122 / 20%);
}

.mana-spotlight {
	min-height: 550px;
	padding: 32px;
	background-color: var(--mana-navy);
	background-position: top left;
	background-size: cover;
	background-attachment: fixed;
	color: #fff;
}

.mana-spotlight .wp-block-cover__image-background {
	display: none;
}

.mana-spotlight .wp-block-cover__background {
	background: rgb(0 39 122 / 80%);
	opacity: 1;
}

.mana-spotlight > .wp-block-cover__inner-container {
	width: min(calc(100% - 32px), 1200px);
	max-width: none;
	margin-inline: auto;
}

.mana-spotlight h2 {
	margin: 0 0 4px;
	color: #fff;
	font-size: 31px;
}

.mana-spotlight p {
	margin: 0;
}

.mana-spotlight__quote {
	max-width: 1050px;
	padding: 22px 0 38px;
	margin: 0 auto;
	border: 0;
	text-align: center;
}

.mana-spotlight__quote p {
	font-size: 28px;
	font-style: italic;
	line-height: 1.05;
}

.mana-spotlight__quote cite {
	display: block;
	margin-top: 5px;
	font-size: 17px;
}

.mana-profile-section {
	padding: 26px 32px 88px;
	background: #f5f5f5;
}

.mana-profile-cards {
	gap: 30px;
	width: min(100%, 1110px);
	margin: 0 auto;
	align-items: stretch;
}

.mana-profile-cards > .wp-block-column {
	display: flex;
}

.mana-profile-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	padding: 0 24px 24px;
	background: #fff;
}

.mana-profile-card h3 {
	padding: 15px 8px 13px;
	margin: 0 -24px 24px;
	border-bottom: 5px solid var(--mana-gold);
	color: #000;
	font-size: 24px;
	font-weight: 400;
}

.mana-profile-card p {
	margin-top: 0;
	line-height: 1.35;
}

.mana-profile-card__magazine {
	width: 206px;
	margin: 5px auto 22px;
}

.mana-profile-card__reps {
	width: 241px;
	margin: 6px auto 0;
}

.mana-profile-list {
	padding: 0;
	margin: 0 12px 22px;
	list-style: none;
}

.mana-profile-list li {
	position: relative;
	padding-left: 29px;
	margin-bottom: 10px;
}

.mana-profile-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--mana-link-blue);
	font-weight: 700;
}

.mana-profile-card > .wp-block-buttons {
	margin-top: auto;
}

.mana-interior-page > .mana-interior {
	width: min(calc(100% - 60px), var(--mana-page-width)) !important;
	max-width: none !important;
	padding: 52px 0 92px;
	margin-inline: auto;
}

.mana-interior-page > .mana-interior-shell,
.mana-interior-page > .mana-interior--full {
	width: min(calc(100% - 60px), var(--mana-page-width)) !important;
	max-width: none !important;
	padding: 52px 0 92px var(--mana-page-indent);
	margin-inline: auto;
}

.mana-interior-shell > h1,
.mana-interior-shell > .mana-page-heading {
	padding-bottom: 3px;
	margin: 0 0 5px;
	border-bottom: 1px solid var(--mana-gold);
	color: var(--mana-navy);
	font-size: clamp(32px, 3vw, 42px);
	line-height: 1.15;
}

.mana-interior-shell > .mana-page-subtitle {
	margin: 5px 0 34px;
	color: var(--mana-navy);
	font-size: 21px;
}

.mana-board-page > h2 {
	margin-top: 52px;
	color: var(--mana-navy);
	font-size: 31px;
	text-align: center;
}

.mana-board-login {
	gap: 20px;
	padding: 18px 22px;
	border-left: 4px solid var(--mana-gold);
	background: var(--mana-light-grey);
}

.mana-board-login p {
	margin: 0;
}

.mana-leader-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 26px;
	max-width: none !important;
	margin-top: 24px;
}

.mana-leader-grid > * {
	margin-block-start: 0 !important;
}

.mana-leader-card {
	overflow: hidden;
	padding: 0 20px 24px;
	border-top: 4px solid var(--mana-gold);
	background: #fff;
	text-align: center;
	box-shadow: 0 5px 18px rgb(0 39 122 / 12%);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.mana-leader-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgb(0 39 122 / 18%);
}

.mana-leader-card__image,
.mana-leader-card__placeholder {
	width: 150px;
	height: 150px;
	margin: 26px auto 18px;
}

.mana-leader-card__image img {
	display: block;
	width: 150px;
	height: 150px;
	border: 4px solid #edf3fb;
	border-radius: 50%;
	object-fit: cover;
}

.mana-leader-card__placeholder {
	display: grid;
	place-items: center;
	border: 4px solid #edf3fb;
	border-radius: 50%;
	background: var(--mana-navy);
	color: #fff;
	font-size: 42px;
	font-weight: 700;
}

.mana-leader-card__placeholder p,
.mana-leader-card h3,
.mana-leader-card > p {
	margin: 0;
}

.mana-leader-card h3 {
	color: var(--mana-navy);
	font-size: 20px;
	line-height: 1.25;
}

.mana-leader-card .mana-leader-card__role {
	margin: 7px 0;
	color: #996400;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mana-member-profile__card {
	max-width: 720px !important;
	padding: clamp(34px, 6vw, 64px);
	border-top: 4px solid var(--mana-gold);
	background: #fff;
	text-align: center;
	box-shadow: 0 8px 28px rgb(0 39 122 / 12%);
}

.mana-member-profile__logo {
	width: min(100%, 280px);
	margin: 0 auto 30px;
}

.mana-member-profile__logo img {
	display: block;
	width: 100%;
	max-height: 260px;
	object-fit: contain;
}

.mana-member-profile__card h2 {
	color: var(--mana-navy);
}

.mana-member-profile__card p {
	line-height: 1.7;
}

.mana-member-profile-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 24px;
	width: min(calc(100% - 48px), 980px);
	padding: 18px 22px;
	margin: 34px auto 0;
	border-top: 3px solid var(--mana-gold);
	background: #fff;
	box-shadow: 0 5px 18px rgb(0 0 0 / 10%);
}

.mana-member-profile-nav__link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	color: var(--mana-navy);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.mana-member-profile-nav__link--next {
	justify-content: flex-end;
	text-align: right;
}

.mana-member-profile-nav__link svg {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 9px;
	border-radius: 50%;
	background: var(--mana-navy);
	fill: none;
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.5;
	transition: background 160ms ease, transform 160ms ease;
}

.mana-member-profile-nav__link small {
	display: block;
	margin-bottom: 2px;
	color: #6b6b6b;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mana-member-profile-nav__link:hover svg,
.mana-member-profile-nav__link:focus-visible svg {
	background: var(--mana-gold);
	transform: translateY(-2px);
}

@media (max-width: 600px) {
	.mana-member-profile-nav {
		gap: 12px;
		width: min(calc(100% - 28px), 520px);
		padding: 13px;
	}

	.mana-member-profile-nav__link {
		gap: 8px;
		font-size: 12px;
	}

	.mana-member-profile-nav__link svg {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
		padding: 8px;
	}

	.mana-member-profile-nav__link small {
		font-size: 10px;
	}
}

.mana-interior-page > .mana-interior > .mana-interior__columns {
	width: 100% !important;
	max-width: none !important;
	gap: 70px;
	margin: 0;
}

.mana-interior__main {
	min-width: 0;
	padding-left: var(--mana-page-indent);
}

/* Fill the column rather than centring a 760px measure inside it, so the copy
   runs up to the sidebar gutter instead of stopping 136px short of it. The
   extra class outranks the block editor's constrained-layout rule. */
.mana-interior__main.wp-block-column > *,
.mana-interior__main > .mana-page-heading > *,
.mana-interior__main > .mana-article-content > *,
.mana-interior__main > .mana-classifieds-content > * {
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Exception to the rule above: it zeroes the auto margins on every child of the
   content group, which also flattens the video's centring. Both live pages that
   carry a video centre it — Understanding Reps via a centred table, Start a Rep
   Agency via a centred heading — so put the auto margins back. */
.mana-interior__main > .mana-article-content > .mana-video-embed {
	margin-inline: auto !important;
}

/* Same rule, the other half of the damage: `max-width: none !important` also
   strips the 640px cap off a bare `.mana-responsive-embed--video`, so the
   Harvard Wistia embed stretched to the full 1032px column. Live sizes that
   iframe 640x360 and leaves it flush left, so only the cap goes back — not the
   auto margins. The two video pages are unaffected either way: they carry
   `.mana-video-embed`, which sets a `width` rather than a `max-width`. */
.mana-interior__main > .mana-article-content > .mana-responsive-embed--video {
	max-width: 640px !important;
}

/* These groups carry the editor's global padding, which would offset their
   contents from the heading above them. */
.mana-interior__main > .mana-page-heading,
.mana-interior__main > .mana-article-content,
.mana-interior__main > .mana-classifieds-content {
	padding-inline: 0 !important;
}

/* .mana-article-content caps itself at 790px for the one-column case; inside a
   column it should track the column instead. */
.mana-interior__main > .mana-article-content {
	width: 100% !important;
	margin-inline: 0 !important;
}

.mana-interior__main > .mana-page-heading {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	margin-bottom: 58px;
}

.mana-page-heading h1 {
	padding-bottom: 3px;
	margin: 0;
	border-bottom: 1px solid var(--mana-gold);
	color: var(--mana-navy);
	font-size: clamp(32px, 3vw, 42px);
	line-height: 1.15;
}

.mana-page-heading__subtitle {
	margin: 5px 0 0;
	color: var(--mana-navy);
	font-size: 21px;
}

/* Find New Lines — the live site puts this page in the narrow container.
   Measured at a 1677px viewport: most interior pages use `.container.t-default`
   at 1411px, which is what --mana-page-width: 1380px was built against, but
   /find-new-lines uses `.container.t-full-width` at 1170px — 1140px of content
   once Bootstrap's 15px gutters come off. So this is a page-level override, not
   a theme-wide one. Overriding the custom property rather than the width means
   the mobile rules, which hard-code 680px, still win below 782px.

   The class comes from mana_page_slug_class() in inc/setup.php; the page's own
   markup lives in the database and cannot carry a modifier from here. */
.mana-interior-page.mana-page--find-new-lines {
	--mana-page-width: 1140px;
}

/* Live splits that 1140 as col-md-8 / col-md-4: a 750px main column, a 30px
   gutter and a 360px right column, which is what makes the LineFinder image
   render at its natural 350px instead of the 277px it was being squeezed to.
   The percentages sum to 100% with the gap at every width, so nothing shrinks.
   Above the stacking breakpoint only — below it the sidebar goes flex-basis:
   auto and these would hold it in a column. */
@media (min-width: 782px) {
	/* Full parent chain: the shared 70px gutter is set at that specificity too
	   (.mana-interior-page > .mana-interior > .mana-interior__columns). */
	.mana-interior-page.mana-page--find-new-lines > .mana-interior > .mana-interior__columns {
		gap: 30px;
	}

	.mana-page--find-new-lines .mana-interior__main {
		flex-basis: calc(68.4211% - 30px) !important;
	}

	.mana-page--find-new-lines .mana-interior__sidebar {
		flex-basis: 31.5789% !important;
	}
}

/* Live's heading sizes on this page: h1 40px, subtitle 20.8px, and the four
   selling points are one 27.2px h4 whose lines are separated by <br><br>, so
   they sit 54.4px apart. Ours are separate h2 blocks, so that spacing has to
   come from the margin: 27.2 x 1.2 line box + 21.76px = the same 54.4px. */
.mana-page--find-new-lines .mana-page-heading h1 {
	font-size: 40px;
}

.mana-page--find-new-lines .mana-page-heading__subtitle {
	font-size: 20.8px;
}

.mana-page--find-new-lines .mana-interior__main > .mana-page-heading {
	margin-bottom: 44px;
}

/* Live's sidebar copy follows the image inside one <p>, separated by <br><br>,
   which leaves 28px between the image and the first line. Our image is its own
   block with no bottom margin, so the text was sitting 2px under it. */
.mana-page--find-new-lines .mana-interior__sidebar > .wp-block-image {
	margin-bottom: 26px;
}

.mana-page--find-new-lines .mana-interior__main h2 {
	font-size: 27.2px;
	line-height: 1.2;
}

.mana-page--find-new-lines .mana-interior__main h2 + h2 {
	margin-top: 21.76px;
}

.mana-article-content {
	width: min(100%, 790px);
	max-width: none !important;
	margin-inline: auto;
}

/* Some live pages wrap their body copy in a table cell with 20px of padding, so
   the copy sits slightly right of the page heading while the heading stays flush
   left. Opt a page in with this modifier rather than indenting every page.
   !important because the rule above strips the editor's global padding from
   these groups the same way.

   That table also carries `width: 80%` inline, and it is not centred — the
   default table alignment puts it flush left under the heading. Measured on
   /rep-agreements at a 1677px viewport: heading 1013.25px wide starting at
   x=140.5, table 822.59px starting at the same x. Without the 80% our copy
   fills the whole 1032px column and the measure runs ~210px longer than the
   source. `.mana-interior__main > .mana-article-content` sets width and
   margin-inline with !important a few rules above, so both have to be
   re-declared here to win.

   The 20px is on both sides, as it is on the live <td> — with padding-right at
   0 the box matched but the measure ran 23px long, because the source's text
   stops 20px short of the table edge. */
.mana-article-content.mana-article-content--indented {
	width: 80% !important;
	margin-inline: 0 !important;
	padding-right: 20px !important;
	padding-left: 20px !important;
}

/* The live site is not consistent about which edge the 80% box sits against.
   Rep Agreements runs it flush left (margin-left 0, table left edge == h1 left
   edge at x=141), which is what --indented alone gives. How To Attract the Best
   Reps centres the same 822.59px box (margin-inline 102.828px each side), so the
   image starts ~102px in from the h1. Measured on both pages at a 1677px
   viewport. Add this alongside --indented on the pages that centre. */
.mana-article-content.mana-article-content--indented.mana-article-content--indented-center {
	margin-inline: auto !important;
}

/* Understanding Manufacturers' Reps is the same idea at a different measurement.
   Its body sits in a `width: 95%` centred table whose cell has `padding: 0`, so
   the box is wider than the 80% one above and the copy runs to the box edge
   instead of stopping 20px short. Measured at a 1677px viewport: the table is
   977px centred in the 1028px well, 25.7px each side; our column is 1032px, so
   95% lands within 3px of the source.

   Kept as its own class rather than folded into --indented because both the
   width and the padding differ. If a third percentage ever turns up, collapse
   these into one class driven by a custom property rather than adding a fourth. */
.mana-article-content.mana-article-content--inset-95 {
	width: 95% !important;
	margin-inline: auto !important;
}

/* Below the stacking breakpoint the sidebar is gone and the column is already
   the full page, so holding the copy at 80% would just throw away a fifth of a
   narrow screen. The live site keeps its 80% here, but it is a Bootstrap
   layout with different gutters — this is the one place ours deliberately
   parts company with it. */
@media (max-width: 781px) {
	.mana-article-content.mana-article-content--indented,
	.mana-article-content.mana-article-content--inset-95 {
		width: 100% !important;
	}
}

.mana-best-reps-image {
	margin-bottom: 32px;
}

.mana-best-reps-image img {
	display: block;
	width: 100%;
}

.mana-article-content h2 {
	color: var(--mana-navy);
	font-size: 31px;
}

/* Section headings inside body copy — live: normal 1.9em Montserrat, 600, #2277d4. */
.mana-article-content h3 {
	margin-top: 22px;
	margin-bottom: 11px;
	color: #2277d4;
	font-size: 1.9rem;
	font-weight: 600;
	line-height: 1.42857;
}

/* Framed photo with caption — live: figure.image, 2px gold border on #f2f2f2. */
/* A lead CTA sits tighter under the subtitle than the heading group's own
   58px would allow, and the logo strip below it gets room to breathe. */
.mana-article-content > .wp-block-buttons:first-child {
	margin-top: -22px;
	margin-bottom: 0;
}

.mana-elevate-logos {
	margin-top: 62px;
	margin-bottom: 44px;
}

.mana-elevate-logos .wp-block-column {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The Sales Reps cover is a soft 413px scan, so filling the column upscales it
   into a blur. The source page renders it at 167px centred in its cell. */
.mana-elevate-feature img[src$="elevate-book.png"] {
	display: block;
	width: min(100%, 167px);
	height: auto;
	margin-inline: auto;
}

/* Block-image captions set nothing of their own, so they inherit the body size —
   which is `--wp--preset--font-size--medium`, and theme.json has
   `typography.fluid` on, so that preset is
   `clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.682), 20px)`.

   That is why the same caption looks right on a phone and wrong on a desktop:
   it renders around 14.6px at a 415px viewport and the full 20px past ~1100px,
   where it is *larger* than the 17.6px body copy it sits under and reads as
   another paragraph rather than a credit line. Steve asked for the desktop
   caption at the size mobile already shows.

   Pinning it to 14px — the bottom of that clamp — stops it scaling at all and
   lands within a pixel of what a phone renders, so the two now match.

   `.mana-figure figcaption` is deliberately not included: that is a framed
   photo whose caption is part of the frame, and it already sets its own
   1.1rem. */
.mana-interior__main .wp-block-image figcaption,
.mana-interior__sidebar .wp-block-image figcaption {
	font-size: 14px;
}

/* Mobile only, and deliberately generic rather than one rule per image.

   Every interior image hit the same bug. A `wp-block-image` with no alignment
   class is flow-left, which is invisible on desktop because the image either
   fills its column or sits in a narrow one — Jerry Leth's photo fills a 38%
   column, the LineFinder tile fills a 285px sidebar. Once the columns stack,
   both become a fixed-width image (300px and 340px) parked at the left edge of
   the full page width, under centred headings and buttons.

   `margin-inline: auto` is a no-op on an image that already fills its
   container, so this only moves the ones that are actually too narrow, and it
   cannot reach a floated `alignleft`/`alignright` figure — those shrink-wrap,
   leaving no free space for the auto margins to split. That is why it is safe
   to apply to the whole interior column rather than naming each image.

   Scoped to `__main`/`__sidebar` so it stays on interior pages: the homepage
   uses its own section wrappers and is not part of this. */
@media (max-width: 781px) {
	.mana-interior__main .wp-block-image img,
	.mana-interior__sidebar .wp-block-image img {
		display: block;
		margin-inline: auto;
	}

	/* A linked image needs the anchor centred, not the image: the LineFinder
	   tile is wrapped in an `<a>` that computes to inline-block and shrink-wraps
	   to the image, so the image has no free space of its own and its auto
	   margins resolve to zero. `fit-content` keeps the anchor hugging the image
	   while making it a block that auto margins can move. Centring the figure's
	   text instead would work too, but would drag any caption along with it. */
	.mana-interior__main .wp-block-image > a,
	.mana-interior__sidebar .wp-block-image > a {
		display: block;
		width: fit-content;
		margin-inline: auto;
	}
}

.mana-figure {
	display: inline-block;
	margin: 10px 10px 24px;
	border: 2px solid var(--mana-gold);
	background: var(--mana-light-grey);
}

/* The two lines below are what keep the figure inside a phone viewport.
   `.mana-figure` is inline-block so the gold border shrink-wraps the image
   instead of running the full column, as it does on the live site — but that
   made it size to the image's intrinsic width (500px on the Understanding Reps
   photo), so on a phone the box and its caption ran off the right edge.

   Constrain the *image*, not the figure. Shrink-to-fit already clamps an
   inline-block to the space available to it, so once the image can narrow, the
   figure follows it down and no `max-width` on `.mana-figure` is needed. One
   would in fact be ignored here: the `.mana-interior__main > .mana-article-content
   > *` reset further down sets `max-width: none !important` on every child of
   the content group. Putting the limit on the image sidesteps that entirely.

   `height: auto` is not optional — the images carry `width`/`height`
   attributes, so a narrowed image keeps its attribute height and squashes. */
.mana-figure img {
	display: block;
	max-width: 100%;
	height: auto;
	padding: 8px;
	margin: 0 auto;
}

.mana-figure figcaption {
	margin: 0 8px 8px;
	font-size: 1.1rem;
	text-align: center;
}

/* Mobile only. Narrowed to a phone the caption wrapped inside the link —
   "Professional Reps: Hamilton Automation" on one line and a stranded "LLC" on
   the next. Making the link a block moves the break to the colon instead, so
   the label gets one centred line and the firm's name stays whole on the one
   below. Both lines centre from the figcaption's own `text-align`.

   781px is the theme's stacking breakpoint (see the --indented rule above), and
   above it the caption fits on a single line, where a block link would force a
   break that the desktop layout does not need. */
@media (max-width: 781px) {
	.mana-figure figcaption a {
		display: block;
	}
}

.mana-video-embed {
	max-width: 615px;
	margin: 0 auto 8px;
}

/* Collapsible article list — the live site uses a Bootstrap accordion, closed
   by default. <details> gives the same behaviour with no JavaScript.

   Measured against the live panel on /start-rep-agency/: the panel is white
   with a #ddd border, the heading strip is #f5f5f5 at 10px 15px, and the title
   is 18px/500 #333. Only the heading is grey — putting the grey on the whole
   panel made the closed box read much heavier than live.

   Every selector here carries the `.mana-article-content` prefix on purpose.
   The generic `.mana-article-content--prose details` / `... summary` rules
   further down the file are the same specificity and win on source order, and
   `.mana-article-content ul` does the same to the list indent. Two classes
   outrank one class plus an element, so these hold without `!important` — and
   without changing any other `<details>` in body copy. */
.mana-article-content .mana-accordion {
	padding: 0;
	margin: 0 0 22px;
	border: 1px solid #ddd;
	background: #fff;
}

.mana-article-content .mana-accordion summary {
	padding: 10px 15px;
	background: #f5f5f5;
	color: #333;
	font-size: 18px;
	font-weight: 500;
	line-height: 18px;
	list-style: none;
	cursor: pointer;
}

.mana-article-content .mana-accordion[open] summary {
	border-bottom: 1px solid #ddd;
}

.mana-article-content .mana-accordion summary::-webkit-details-marker {
	display: none;
}

/* Live draws this with Glyphicons `plus-sign`/`minus-sign` — a filled dark
   circle with a white bar. The theme loads no icon font, and the bare "⊕"/"⊖"
   characters used before are outline glyphs that render lighter and vary by
   platform font. An inline SVG is the same shape in every browser with no
   extra request. */
.mana-article-content .mana-accordion summary::before {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 5px;
	vertical-align: -2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23333'/%3E%3Crect x='7' y='3.5' width='2' height='9' fill='%23fff'/%3E%3Crect x='3.5' y='7' width='9' height='2' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
	content: "";
}

.mana-article-content .mana-accordion[open] summary::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23333'/%3E%3Crect x='3.5' y='7' width='9' height='2' fill='%23fff'/%3E%3C/svg%3E");
}

/* Live nests the list in a `.panel-body` with 15px all round, and the `ul`
   inside that takes a further 40px indent — 55px from the panel edge. Our
   markup has no body wrapper, so the ul carries both. */
.mana-article-content .mana-accordion ul {
	padding: 15px 15px 5px 55px;
	margin: 0;
	background: #fff;
}

.mana-article-content .mana-accordion ul li {
	margin-bottom: 10px;
}

.mana-podcast-embed {
	margin: 0 0 22px;
}

.mana-podcast-embed iframe {
	display: block;
	width: 100%;
	max-width: 800px;
	height: 192px;
	border: 0;
}

/* MANA's own bullet glyph — the live site calls it "the meatball" and sets it
   with list-style-image on content lists. Lists that carry a different marker
   on the live site (the ✓/× advertising packages) override this below. */
.mana-article-content ul,
.mana-classifieds-content ul,
.mana-interior-shell ul,
.mana-finder ul,
.mana-wide-content ul,
.mana-rep-list {
	padding-left: 40px;
	margin-bottom: 10px;
	list-style-image: url("../images/littleglobe.png");
}

/* Numbered lists keep their numerals but take the same indent and trailing
   space as the bulleted ones — core leaves them with no bottom margin, so the
   next paragraph otherwise butts up against the last item. */
.mana-article-content ol,
.mana-classifieds-content ol,
.mana-interior-shell ol,
.mana-wide-content ol {
	padding-left: 40px;
	margin-bottom: 10px;
}

/* Nothing in this theme sets a top margin on a list, so lists were taking the
   24px `margin-block-start` that the constrained-layout rule puts on every flow
   child — paragraphs escape it because `.mana-article-content p` declares
   `margin: 0 0 11px`. Live has Bootstrap's `ul, ol { margin-top: 0 }`, so a
   paragraph followed by a list sits on the paragraph's own 11px there and on
   24px here. Measured on /shared-market-development-fees at a 1677px viewport:
   live 11px, ours 24px before this rule. */
.mana-article-content :is(ul, ol),
.mana-classifieds-content :is(ul, ol),
.mana-interior-shell :is(ul, ol),
.mana-finder ul,
.mana-wide-content :is(ul, ol) {
	margin-top: 0;
}

/* Live: `.body-content li, .body-content ol, .body-content ul { margin-bottom:
   10px }`. The 10px on the *item* is the one that was missing — our lists ran
   on a 25.28px pitch where the source uses 35.84px, which is what read as the
   items being crammed together. `.mana-rep-list li` below overrides it, as it
   does on the live site. */
.mana-article-content li,
.mana-classifieds-content li,
.mana-interior-shell li,
.mana-finder li,
.mana-wide-content li {
	padding-left: 0;
	margin-bottom: 10px;
	line-height: 1.42857;
}

/* The rep lists render each item as an h6 on the live site: the h6 carries
   5px block margins and the li another 10px below it, so items sit on a 40px
   pitch. Reproduced here with the asymmetric margin, since our items are plain
   list items with no h6 inside. */
.mana-rep-list li {
	padding-left: 6px;
	margin-block: 5px 10px;
	color: var(--mana-navy);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.42857;
}

/* Live: p { margin:0 0 11px; font:normal 1.1em Montserrat; line-height:1.42857 } */
.mana-article-content p {
	margin: 0 0 11px;
	color: #000;
	font-size: 1.1rem;
	line-height: 1.42857;
}

/* Live: blockquote { padding:0 0 0 25px; font-size:20px;
   border-left:5px solid #ffa700 } — upright, not italic.

   The `margin:0 0 22px` on Bootstrap's base blockquote is not what the content
   area actually gets: `.well blockquote { margin:25px 0 }` overrides it, and
   the page body is `.well box inner-content`. So it is 25px top *and* bottom.
   The top margin is the one that shows — without it our quotes sat 11px below
   the preceding paragraph (that paragraph's own bottom margin) where the source
   puts 25px, and 10px below a list where the source puts 25px. */
.mana-article-content blockquote {
	padding: 0 0 0 25px;
	margin: 25px 0;
	border-left: 5px solid var(--mana-gold);
	font-size: 20px;
	font-style: normal;
}

/* Live sets `p { font: normal 1.1em Montserrat }` globally, and inside a
   blockquote that 1.1em resolves against the blockquote's own 20px — so quoted
   text is 22px, not 20px. `font-size: inherit` here was holding it at 20px and
   made every quote on the site read a step small. */
.mana-article-content blockquote p {
	font-size: 1.1em;
}

/* Pull-quote callout. "Surprising Fact" on Understanding Manufacturers' Reps is
   the only heading inside a quote anywhere on the site — live or ours — so this
   is effectively one page today. Opt-in by class all the same, so the six other
   pages carrying quotes keep their current spacing.
   Correction (2026-08-15): there are two, not one. MANA at Harvard carries a
   "Surprising Fact" quote as well, and live renders its heading at a different
   level and size from this one — see the h2 rule below.
   Live leaves 61px above the quote (an empty paragraph plus the quote's own
   margin) and renders the heading as an h4, which takes navy rather than the
   blue our h3s use. Matching the colour without dropping to our h4 size. */
.mana-article-content .mana-callout-quote {
	margin-top: 61px;
}

.mana-article-content .mana-callout-quote :is(h2, h3, h4) {
	color: var(--mana-navy);
}

/* Live sizes headings in `em`, so a heading inside the quote inherits the
   quote's larger font-size and comes out bigger than the same level in body
   copy — its h2 is 2.4em, which is 33.6px in body text and 42px in here. Our
   sizes are fixed rem, so the effect does not reproduce and has to be stated.
   Scoped to h2 deliberately: Harvard's quote heading is an h2 (matching live),
   Understanding Reps' is an h3, and the two render at different sizes on live
   for exactly this reason. */
.mana-article-content .mana-callout-quote h2 {
	margin-bottom: 5px;
	font-size: 2.625rem;
	line-height: 1.42857;
}

/* Live renders this as an h6: 1.3em Montserrat, 600, navy. */
.mana-article-content h4 {
	color: var(--mana-navy);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.42857;
}

/* Live: `h5 { font: normal 1.5em Montserrat; line-height: 1.42857; font-weight:
   600; color: #2277d4 }` with the generic `h1–h6 { margin: 5px 0 }` winning over
   Bootstrap's 11px. Read off /shared-market-development-fees at a 1677px
   viewport: 24px, weight 600, rgb(34,119,212), line-height 34.2857px. That page
   is the only one carrying an h5 today; the rule is global so the next one
   matches without a second measurement. */
.mana-article-content h5 {
	margin-block: 5px;
	color: #2277d4;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.42857;
}

.mana-centered,
.mana-centered p {
	text-align: center;
}

.mana-centered .wp-block-buttons {
	justify-content: center;
}

/* The source page runs the star rating and the "Member Testimonials" label
   together as one centred block of body copy. Keep the h3 so the section still
   has a heading in the outline, but strip it back to look like that line. */
.mana-article-content .mana-testimonials-stars {
	margin-top: 74px;
	margin-bottom: 0;
}

.mana-article-content .mana-testimonials-title {
	margin-top: 0;
	margin-bottom: 26px;
	color: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
}

/* Testimonials: headshot beside the quote, attribution in grey below it. */
.mana-testimonial {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem;
}

.mana-testimonial img {
	flex: 0 0 79px;
	width: 79px;
	height: 111px;
	object-fit: cover;
}

.mana-testimonial blockquote {
	margin: 0;
}

.mana-testimonial cite {
	display: block;
	margin-top: 6px;
	color: #777;
	font-size: 80%;
	font-style: normal;
}

.mana-testimonial cite::before {
	content: "— ";
}

.mana-article-content--prose {
	font-size: 17px;
	line-height: 1.65;
}

.mana-article-content--prose h2,
.mana-article-content--prose h3 {
	margin-top: 38px;
}

.mana-article-content--prose h2 {
	color: var(--mana-navy);
}

.mana-article-content--prose img {
	max-height: 560px;
	width: auto;
}

.mana-video-embed {
	position: relative;
	width: min(100%, 615px);
	aspect-ratio: 615 / 360;
	margin: 0 auto 24px;
}

.mana-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mana-audio-embed iframe {
	width: 100%;
	height: 192px;
	border: 0;
}

.mana-article-content--prose details {
	padding: 12px 16px;
	border: 1px solid #d6d6d6;
	background: #f5f5f5;
}

.mana-feature-pair {
	padding: 26px 0;
}

.mana-feature-pair .wp-block-image {
	width: min(100%, 300px);
	margin-inline: auto;
}

.mana-testimonials {
	gap: 24px;
}

.mana-testimonials blockquote {
	height: 100%;
	margin: 0;
	background: #f4f6f8;
}

.mana-article-content--prose summary {
	color: var(--mana-navy);
	font-weight: 600;
	cursor: pointer;
}

.mana-finder {
	width: min(calc(100% - 60px), var(--mana-page-width)) !important;
	max-width: none !important;
	min-height: 520px;
	padding: 54px 0 90px var(--mana-page-indent);
	margin-inline: auto;
}

/* Both advertising pages are one page on live — /advertise — and it sits in the
   narrow container: `.container.t-full-width` measures 1170px at a 1677px
   viewport, 1140px of content once Bootstrap's 15px gutters come off. Same case
   as /find-new-lines above. Overriding the custom property rather than the width
   leaves the mobile rules, which hard-code 680px, in charge below 782px. */
.mana-wide-page {
	--mana-page-width: 1140px;
}

.mana-wide-page > .mana-wide-content {
	width: min(calc(100% - 60px), var(--mana-page-width)) !important;
	max-width: none !important;
	padding: 54px 0 90px var(--mana-page-indent);
	margin-inline: auto;
}

/* Without a sidebar there is nothing to centre a text measure against, so
   content runs from the shared left edge to the full container width. The extra
   class in each selector outranks the block editor's constrained-layout rule,
   which sets max-width and auto margins with !important. */
.mana-interior-page > .mana-interior-shell.wp-block-group > *,
.mana-interior-page > .mana-interior-shell > .mana-page-heading > *,
.mana-interior-page > .mana-interior-shell > .mana-article-content > *,
.mana-interior-page > .mana-interior--full.wp-block-group > *,
.mana-interior-page > .mana-interior--full > .mana-page-heading > *,
.mana-interior-page > .mana-interior--full > .mana-article-content > *,
.mana-finder-page > .mana-finder.wp-block-group > *,
.mana-finder-page > .mana-finder > .mana-page-heading > *,
.mana-finder-page > .mana-finder > .mana-article-content > *,
.mana-wide-page > .mana-wide-content.wp-block-group > *,
.mana-wide-page > .mana-wide-content > .mana-page-heading > *,
.mana-wide-page > .mana-wide-content > .mana-article-content > * {
	max-width: none !important;
	margin-inline: 0 !important;
}

/* .mana-article-content caps itself at 790px for the standalone case; inside a
   page container it should track the container instead. */
.mana-interior--full > .mana-article-content,
.mana-interior-shell > .mana-article-content,
.mana-finder > .mana-article-content,
.mana-wide-content > .mana-article-content {
	width: 100% !important;
	padding-inline: 0 !important;
	margin-inline: 0 !important;
}

/* Every section title on the advertising pages, matching the live site's blue
   24px heading. No text-transform: the live site's headings are uppercase in
   the copy itself, and "Manufacturers' Representative-Friendly Policies" is
   deliberately not — so the casing has to come from the content. */
.mana-ad-intro-title {
	margin-top: 48px;
	margin-bottom: 18px;
	color: #2d7bdc;
	font-size: 24px;
}

.mana-pricing-cards {
	gap: 24px;
	width: min(100%, 940px) !important;
	margin: 42px 0 54px;
	align-items: stretch;
}

/* Three-package rows fill the content column; two-package rows keep the
   narrower measure so the cards don't stretch out. */
.mana-pricing-cards:has(> .wp-block-column:nth-child(3)) {
	width: 100% !important;
	max-width: none !important;
}

.mana-pricing-cards > .wp-block-column {
	display: flex;
}

.mana-pricing-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	padding: 0 22px 24px;
	border-radius: 7px;
	background: #fff;
	box-shadow: 0 3px 14px rgb(0 0 0 / 18%);
}

.mana-pricing-card h2 {
	width: calc(100% + 44px) !important;
	max-width: none !important;
	padding: 16px 22px;
	margin: 0 -22px 22px !important;
	background: #00aeea;
	color: #fff;
	font-size: 21px;
	text-transform: uppercase;
}

.mana-wide-content .mana-package-features,
.mana-article-content .mana-package-features,
.mana-package-features {
	min-height: 180px;
	padding: 0;
	list-style: none;
	list-style-image: none;
}

.mana-package-features li {
	position: relative;
	padding-left: 23px;
	margin-bottom: 8px;
}

.mana-package-features li::before {
	position: absolute;
	left: 0;
	font-weight: 700;
}

.mana-package-features .is-included::before {
	content: "✓";
	color: green;
}

.mana-package-features .is-excluded::before {
	content: "×";
	color: red;
}

.mana-price-table {
	width: calc(100% + 44px) !important;
	max-width: none !important;
	margin: 0 -22px 22px;
	border-top: 1px solid #ccc;
}

.mana-price-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.mana-price-table th,
.mana-price-table td {
	padding: 8px 7px;
	border: 0;
	text-align: center;
	white-space: nowrap;
}

.mana-price-table td:first-child {
	color: #3193fc;
	text-align: left;
}

.mana-pricing-card .mana-button .wp-block-button__link {
	border-radius: 3px;
}

.mana-pricing-card--gold h2 {
	background: var(--mana-gold);
	color: var(--mana-navy);
}

.mana-pricing-card--platinum h2 {
	background: #6c757d;
}

.mana-pricing-card--dark h2 {
	background: #000;
}

.mana-pricing-card .wp-block-buttons {
	margin-top: auto;
}

/* Cards that carry more than one purchase button stack them — side by side they
   wrap raggedly in a card this narrow. The source page uses <br><br> for this. */
.mana-pricing-card .mana-card-buttons {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.mana-pricing-cards--two {
	max-width: 850px;
	margin-inline: auto;
}

/* Live sets this list at 16px/22.857px — both the bold item title and the copy
   under it — where the rest of the theme inherits the 20px body size. Sizing the
   list, not each part, keeps the <strong> titles in step with the copy. */
.mana-best-practices {
	font-size: 16px;
	line-height: 1.42857;
}

.mana-best-practices li {
	margin-bottom: 16px;
}

.mana-embed-placeholder {
	padding: 28px;
	border: 2px dashed #9da9b8;
	background: #f5f7fa;
}

/* The LineFinder embed is appended after the page's two-column group, so it
   lands as a direct child of the article with no block wrapper to constrain
   it and would otherwise run the full width of the viewport. This puts it in
   the page container like every other top-level section. Scoped as a direct
   child so the RepFinder page is untouched -- there the widget sits inside
   `.mana-finder`, which already constrains it. */
.mana-interior-page > #searchContainer {
	width: min(calc(100% - 60px), var(--mana-page-width));
	margin-inline: auto;
}

/* Cedar's RepFinder embed (/find-manufacturer-reps/) — the buttons it returns.
   Scoped to `#searchContainer`, which is the div their snippet drops on the
   page, so these rules exist only where the widget does.

   Their markup is Bootstrap: `<a role="button" class="... btn btn-default">`.
   On manaonline.org those classes are painted by the Novi theme's
   `mana-v3.css`; this site loads neither Bootstrap nor that stylesheet, so
   `.btn` and `.btn-default` had nothing behind them at all. Find Reps rendered
   as bare text, and Clear Filters — which their own inline `<style>` paints
   `#004596` but gives no colour — inherited our navy link colour and came out
   navy-on-blue.

   Values below are lifted from `mana-v3.css` so the widget looks the way it
   does on live rather than the way the rest of this theme's buttons look: it is
   a vendor embed reproduced from the source site, not one of our own buttons.
   If it should instead match `.mana-button` (24px pill, 9px 20px, #3193fc),
   that is a palette swap here and nothing more.

   `.btn` there is `padding:6px 12px; font-size:16px; line-height:1.42857;
   border-radius:4px; font-weight:600`, and live's last `.btn-default` rule wins
   with `border:2px solid #00277a; color:#fff; background:#00277a`. */
#searchContainer .btn {
	display: inline-block;
	padding: 6px 12px;
	border: 2px solid var(--mana-navy);
	border-radius: 4px;
	background: var(--mana-navy);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.42857;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
}

/* Reinstating Cedar's own colour, not overriding it. Their inline style sets
   `.clearFiltersButton { background:#004596 }`, which wins on live because
   `.btn-default` is class-level there; the rule above is id-scoped and would
   otherwise outrank it and flatten the two buttons to one navy. */
#searchContainer .btn.clearFiltersButton {
	border-color: #004596;
	background: #004596;
}

#searchContainer .btn:hover,
#searchContainer .btn:focus-visible {
	background: #fff;
	color: var(--mana-navy);
}

#searchContainer .btn.clearFiltersButton:hover,
#searchContainer .btn.clearFiltersButton:focus-visible {
	background: #fff;
	color: #004596;
}

.mana-classifieds-content {
	width: 100% !important;
	max-width: none !important;
	min-height: 420px;
	font-size: 17px;
}

.mana-classifieds-content > p {
	line-height: 1.65;
}

/* Shared Market Development Fees — the Fee For Service addendum is set as
   contract copy on the live page, and the blank lines that separate its parts
   are typed into the source as empty paragraphs and runs of <br>. Ours uses
   margins instead, so the block structure stays editable. Every number below is
   the source's rendered spacing at a 1677px viewport.

   Title: the previous paragraph's 11px, an empty <p> of 25.1px and another 11px
   sit above it (47.1px); below it the first clause opens with a <br>, so its
   text starts 5px + one 25.1px line under the title. */
.mana-article-content .mana-specimen-title {
	margin-top: 47px;
	margin-bottom: 30px;
}

/* Each clause opens with `&nbsp; &nbsp;` — 18.5px of first-line indent measured
   against body copy starting at x=263.3 and clause first lines at x=281.8. */
.mana-article-content .mana-specimen-clause {
	text-indent: 18.5px;
}

/* The three service activities are hand-numbered paragraphs on the live page,
   so their numerals sit flush with the measure rather than in a list indent,
   and only the wrapped lines take the 18.5px. `list-style-position: inside`
   plus the negative text-indent reproduces that from a real <ol>. The 36px top
   margin is the `&nbsp;<br>` the source opens the first item with. */
.mana-article-content .mana-specimen-list {
	padding-left: 0;
	margin-top: 36px;
}

.mana-article-content .mana-specimen-list li {
	padding-left: 18.5px;
	text-indent: -18.5px;
	list-style-position: inside;
}

/* Live puts a blank line after every item but the last, as `<br><br>` inside
   the <li>, and another one after the list, as a `<br>` opening the paragraph
   that follows. One line-height on top of the 10px a list and its items already
   get, in both places. */
.mana-spaced-list li:not(:last-child) {
	margin-bottom: calc(10px + 1.42857em);
}

.mana-article-content .mana-spaced-list {
	margin-bottom: calc(10px + 1.42857em);
}

/* The legal note is a plain blockquote on the live page — orange rule, no
   panel — and it sits 75px below the last service activity, which is three
   trailing <br>s (50.3px) plus the quote's own 25px. */
.mana-article-content .mana-legal-note {
	margin-top: 75px;
}

.mana-interior__sidebar {
	align-self: flex-start;
	padding: 22px 20px;
	border-radius: 2px;
	background: #f1f1f1;
	box-shadow: 0 2px 14px rgb(0 0 0 / 15%);

	/* Matches the live site's .sidebar-widget p — normal 1.1em Montserrat. */
	font-size: 1.1rem;
	line-height: 1.42857;
}

/* Join page — membership comparison and pricing tables. */
.mana-article-content .mana-join-section {
	margin: 0 0 10px;
	color: #2277d4;
	font-size: 1.5rem;
	font-weight: 600;
	text-align: center;
}

/* Live: blue pill in the membership-types panel, grey in the table footers. */
.mana-join-types .wp-block-button__link {
	display: inline-block;
	padding: 9px 24px;
	border-radius: 24px;
	background: #2b8cf0;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.mana-join-table .wp-block-button__link {
	display: inline-block;
	min-width: 168px;
	padding: 9px 14px;
	border-radius: 24px;
	background: #b7b7b7;
	color: var(--mana-navy);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
}

.mana-join-types .wp-block-button__link {
	line-height: 1.25;
}

/* Below the mobile breakpoint the button carries just "Join" and the member
   type moves to a caption underneath, so the columns stay readable. */
.mana-btn-short,
.mana-btn-caption {
	display: none;
}

.mana-btn-caption {
	margin-top: 6px;
	color: var(--mana-navy);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.25;
}


/* Icons sit centred beneath their label wherever they are used. */
.mana-cta-icon {
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto 18px;
}

.mana-interior__sidebar img {
	max-width: 100%;
	height: auto;
}

.mana-join-types {
	padding: 22px 18px;
	margin-bottom: 34px;
	background: #d6e9fb;
}

.mana-join-types .mana-cta-label {
	margin: 0 0 4px;
	color: #000;
	font-size: 1.1rem;
	font-weight: 700;
	text-align: center;
}

.mana-join-types p {
	text-align: center;
}

/* Wide tables scroll on narrow screens rather than crushing their columns
   until words break mid-syllable. */
.mana-table-scroll {
	margin-bottom: 34px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mana-join-table {
	width: 100%;
	min-width: 580px;
	margin-bottom: 0;
	border: 1px solid #ddd;
	border-collapse: collapse;
}

.mana-join-table th,
.mana-join-table td {
	padding: 9px 12px;
	border: 1px solid #ddd;
	font-size: 1rem;
	vertical-align: middle;
}

.mana-join-table thead th {
	font-weight: 600;
	text-align: center;
}

/* Give the two comparison columns enough room that the join buttons sit on
   two lines, as they do on the live page, instead of breaking mid-word. */
.mana-join-table th:first-child,
.mana-join-table td:first-child {
	width: 46%;
}

.mana-join-table th:not(:first-child),
.mana-join-table td:not(:first-child) {
	width: 27%;
}

.mana-join-table td:not(:first-child) {
	text-align: center;
}

.mana-join-table .mana-join-group td {
	font-weight: 700;
	text-transform: uppercase;
}

.mana-join-table .mana-was {
	color: #777;
	text-decoration: line-through;
}

/* Connection — "MANA vs. for-profit rep-matchmaking sites". The live comparison
   is a bare <table> with no class, so it inherits nothing but browser defaults:
   no rules, no cell padding, cells top-aligned, and each row's height set by the
   taller of its two columns. That last part is why the right column looks like
   it has paragraph gaps on the live page and the left column does not. Core's
   block-library stylesheet gives .wp-block-table cells a 1px border and .5em of
   padding, so both have to be turned back off here.

   The source carries `width: 757px` inline on the table and pixel widths on the
   cells (389 / 366), which is why it stops well short of the content column.
   Kept as a max-width with percentage columns so the proportions hold and the
   table still reflows on a narrow screen. */
.mana-compare-table {
	margin-bottom: 34px;
}

.mana-compare-table table {
	width: 100%;
	max-width: 757px;
	border-collapse: collapse;
}

/* Core also draws a 3px rule under any .wp-block-table thead. The source has no
   line under its header row. */
.mana-compare-table thead {
	border-bottom: 0;
}

.mana-compare-table th,
.mana-compare-table td {
	padding: 0 26px 0 0;
	border: 0;
	font-size: 1rem;
	vertical-align: top;
}

.mana-compare-table th:last-child,
.mana-compare-table td:last-child {
	padding-right: 0;
}

.mana-compare-table th {
	width: 51.5%;
	font-weight: 700;
	text-align: left;
}

.mana-compare-table th:last-child {
	width: 48.5%;
}

/* Below the stacking breakpoint the two comparison columns are about 180px
   wide and the copy breaks after two or three words, which is what the table
   looked like on a phone. Stack it: one cell per row, full width. Desktop keeps
   the side-by-side comparison, which is how the source page reads.

   The header row cannot simply come along. Once the cells stack it labels the
   first pair and nothing below it, so it is hidden and the two labels are
   repeated above every cell from `::before`. Their text is hard-coded because
   CSS cannot read the `<th>` — this is the only table carrying this class, and
   if its headings are ever reworded these two strings have to be reworded with
   them.

   The last row has an empty partner cell on purpose, so the markup round-trips
   through the block editor unchanged (see patterns/connection.php). `:empty`
   drops it here rather than leaving a "For-profit rep lists" label with nothing
   underneath. */
@media (max-width: 781px) {
	.mana-compare-table table,
	.mana-compare-table tbody,
	.mana-compare-table tr,
	.mana-compare-table td {
		display: block;
		width: 100%;
	}

	.mana-compare-table thead {
		display: none;
	}

	.mana-compare-table td {
		padding: 0;
	}

	.mana-compare-table td:empty {
		display: none;
	}

	.mana-compare-table td + td {
		margin-top: 14px;
	}

	.mana-compare-table tr + tr {
		margin-top: 22px;
	}

	.mana-compare-table td::before {
		display: block;
		font-weight: 700;
	}

	.mana-compare-table td:first-child::before {
		content: "Non-profit MANA";
	}

	.mana-compare-table td:last-child::before {
		content: "For-profit rep lists";
	}
}

@media (max-width: 782px) {
	.mana-btn-full {
		display: none;
	}

	.mana-btn-short {
		display: inline;
	}

	.mana-btn-caption {
		display: block;
	}

	.mana-join-table .wp-block-button__link {
		min-width: 0;
		padding: 8px 16px;
		font-size: 0.9rem;
	}

	/* Fit the whole table on screen rather than scrolling it — with the short
	   button labels there is room for all three columns. */
	.mana-join-table {
		min-width: 0;
	}

	.mana-join-table th,
	.mana-join-table td {
		padding: 7px 6px;
		font-size: 0.85rem;
	}

	.mana-join-table th:first-child,
	.mana-join-table td:first-child {
		width: 52%;
	}

	.mana-join-table th:not(:first-child),
	.mana-join-table td:not(:first-child) {
		width: 24%;
	}

	.mana-btn-caption {
		font-size: 0.75rem;
	}
}

/* Split call-to-action panel — live: background #ecf0f1, bold label, icon,
   then the button, all centred. */
.mana-callout--split {
	padding: 26px 20px;
	background: #ecf0f1;
}

.mana-callout--split .mana-cta-label {
	margin: 0 0 6px;
	color: #000;
	font-size: 1.1rem;
	font-weight: 700;
	text-align: center;
}

.mana-callout--split .mana-cta-icon {
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto 18px;
}

/* Sponsor profile detail lines: icon, then the value, as on the live page. */
.mana-sponsor-line {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 12px;
}

.mana-sponsor-icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	fill: none;
	stroke: #8a8a8a;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.mana-sponsor-social a {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #8a8a8a;
}

.mana-sponsor-social svg {
	width: 17px;
	height: 17px;
	fill: #fff;
}

/* Right column: the logo sits in a bordered box above the contacts. */
.mana-sponsor-aside .mana-sponsor-logo {
	padding: 0;
	margin: 0 0 26px;
	border: 2px solid #000;
}

.mana-sponsor-aside .mana-sponsor-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.mana-sponsor-aside .mana-sponsor-heading {
	padding-bottom: 6px;
	margin: 0 0 12px;
	border-bottom: 1px solid #ddd;
	color: var(--mana-navy);
	font-size: 1.5rem;
	font-weight: 600;
}

.mana-sponsor-aside p {
	margin-bottom: 26px;
	text-align: left;
}

/* Sponsor profiles: Previous/Next sits above the content, and the member logo
   is a mark rather than artwork, so it is capped. */
.mana-profile-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 12px;
	margin-bottom: 26px;
	border-bottom: 1px solid #e2e2e2;
}

.mana-profile-nav a {
	color: var(--mana-link-blue);
	font-size: 1.05rem;
	font-weight: 600;
	text-decoration: none;
}

.mana-profile-nav a:hover,
.mana-profile-nav a:focus-visible {
	color: #000f2e;
	text-decoration: underline;
}

.mana-article-content .mana-sponsor-logo {
	max-width: 300px !important;
	margin-bottom: 22px;
}

.mana-article-content .mana-sponsor-logo img {
	width: 100%;
	height: auto;
}

/* Contact Us runs two equal columns, and its LinkedIn panel is a link target
   rather than artwork — cap it so it does not dominate the page. */
.mana-contact-columns > .wp-block-column {
	flex-basis: 50%;
}

/* !important is needed here: the rule that lets article content fill its
   column sets max-width: none !important on every direct child. */
.mana-article-content .mana-linkedin {
	max-width: 300px !important;
}

.mana-article-content .mana-linkedin img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

@media (max-width: 782px) {
	.mana-linkedin {
		max-width: 100%;
	}
}

/* Body links match the live site: a { color:#3193fc; text-decoration:none }
   with the underline reserved for hover and keyboard focus. */
.mana-article-content a:not(.wp-block-button__link),
.mana-classifieds-content a:not(.wp-block-button__link) {
	color: var(--mana-link-blue);
	font-weight: 400;
	text-decoration: none;
}

.mana-article-content a:not(.wp-block-button__link):hover,
.mana-article-content a:not(.wp-block-button__link):focus-visible,
.mana-classifieds-content a:not(.wp-block-button__link):hover,
.mana-classifieds-content a:not(.wp-block-button__link):focus-visible {
	color: #000f2e;
	text-decoration: underline;
}

/* A call to action sitting in the flow of body copy, aligned with it and given
   equal breathing room above and below. */
.mana-article-content .mana-cta-inline {
	justify-content: flex-start;
	margin: 26px 0;
}

/* Partner rows on Special Interest Groups: logo left, description and link
   right, as on the live page. */
.mana-sig-row {
	margin-bottom: 18px;
}

.mana-sig-row img {
	max-width: 180px;
	height: auto;
}

.mana-sig-row .wp-block-column:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Page-specific right-hand panel (Agency Sales' Quick Facts), centred with a
   gold rule between sections, as on the live page. */
.mana-quick-facts {
	text-align: center;
}

.mana-quick-facts .mana-panel-title {
	margin: 18px 0 4px;
	color: #2277d4;
	font-size: 1.25rem;
	font-weight: 600;
}

.mana-quick-facts p {
	margin: 0 0 10px;
}

.mana-quick-facts .mana-panel-rule {
	height: 0;
	margin: 22px 0 4px;
	border: 0;
	border-top: 1px solid var(--mana-gold);
}

/* Some pages carry a plain right column rather than the Quick Links panel. */
.mana-interior__sidebar--plain {
	padding: 0;
	background: none;
	box-shadow: none;
}

.mana-interior__sidebar h2 {
	margin: 0 0 6px;
	color: #2589ec;
	font-size: 24px;
}

.mana-interior__sidebar h3 {
	margin: 28px 0 4px;
	color: var(--mana-navy);
	font-size: 20px;
}

.mana-interior__sidebar p {
	margin: 0 0 16px;
	font-size: inherit;
	line-height: inherit;
}

.mana-interior__sidebar a {
	color: #3193fc;
	text-decoration: none;
}

.mana-interior__sidebar .wp-block-buttons {
	margin-bottom: 34px;
}


/* ---------------------------------------------------------------------------
   About page — matched to the live page at www.manaonline.org/about/.

   Live keys its colours off heading level: sections are h3 (blue) and the
   by-law articles nested under them are h2 (navy). Ours are the other way up
   so the outline is semantically correct — sections h2, articles h3 — which
   means the two colours have to be restated here rather than inherited from
   `.mana-article-content`. Sizes are lifted from the live page: 30.4px for a
   section, 33.6px for an article. These rules must stay after the
   `.mana-article-content` block above: the selectors tie on specificity, so
   source order is what decides.
   --------------------------------------------------------------------------- */

.mana-about h2 {
	margin-top: 22px;
	margin-bottom: 11px;
	color: #2277d4;
	font-size: 1.9rem;
	font-weight: 600;
}

.mana-about h3 {
	margin-top: 22px;
	margin-bottom: 11px;
	color: var(--mana-navy);
	font-size: 2.1rem;
	font-weight: 600;
}

/* The three jump links live centres under the page heading. */
.mana-about__jump {
	margin-bottom: 26px;
	text-align: center;
}

/* "Top of Page" — the small blue link live repeats under each major heading. */
.mana-about__toplink {
	margin-top: 0;
	margin-bottom: 12px;
}

.mana-about__toplink a {
	color: var(--mana-link-blue);
}

/* The lead paragraph under a section heading. Live marks these up as
   blockquotes: a gold rule down the left and a step up from body copy. Core
   styles a quote as a pull quote, so the italics and centring come back off. */
.mana-about__lead {
	padding-left: 25px;
	margin: 20px 0;
	border-left: 5px solid var(--mana-gold);
	font-size: 1.25rem;
	font-style: normal;
	line-height: 1.43;
	text-align: left;
}

.mana-about__lead p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.mana-about__lead cite {
	display: none;
}

/* The Agency Sales covers sit in a gold-bordered box on a light ground. */
.mana-about__figure {
	padding: 0;
	margin: 24px 0;
	border: 2px solid var(--mana-gold);
	background: #f2f2f2;
}

.mana-about__figure img {
	display: block;
	width: 100%;
	height: auto;
}

.mana-about__figure figcaption {
	padding: 8px 14px 12px;
	margin: 0;
	color: #333;
	font-size: 1rem;
	text-align: center;
}

/* The logo-symbolism question. Live uses a Bootstrap accordion driven by
   jQuery; `details` gives the same open and close with no script at all. */
.mana-about__accordion {
	margin: 20px 0;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
}

.mana-about__accordion > summary {
	padding: 10px 15px;
	background: #f5f5f5;
	color: #333;
	font-size: 1.125rem;
	cursor: pointer;
}

.mana-about__accordion-body {
	padding: 12px 15px 15px;
}

.mana-about__accordion-body img {
	display: block;
	margin-bottom: 8px;
}

.mana-about__accordion-body p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

/* Bulleted lists take the MANA globe, as everywhere else on the site. */
.mana-about ul {
	padding-left: 40px;
	margin-bottom: 10px;
	list-style-image: url("../images/littleglobe.png");
}

.mana-about li {
	margin-bottom: 10px;
}


/* ---------------------------------------------------------------------------
   Home page: the two Cedar test-drive widgets, side by side as on live.
   Each sits in its own container because the two payloads define the same
   global function names and the same element ids -- see the brief. The grid
   gives them equal columns; each widget sizes itself inside its cell.
   --------------------------------------------------------------------------- */
.mana-home-finders {
	width: min(calc(100% - 60px), var(--mana-page-width));
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	margin-inline: auto;
	padding: 8px 0 40px;
}

.mana-home-finder {
	min-width: 0;
	padding-top: 18px;
	/* Both rules gold. Live draws the RepFinder half grey and only the
	   LineFinder half gold; Gerald asked for the pair to match. */
	border-top: 1px solid var(--mana-gold);
}

/* Anchor targets for /#publicrepfinder and /#publiclinefinder. They are empty
   markers, so they need no box of their own -- only somewhere to land. */
.mana-home-finder > a[id] {
	display: block;
	height: 0;
}


/* ---------------------------------------------------------------------------
   Home-page Cedar widgets: typography and buttons.

   Live paints these with Novi's own stylesheet, which this site does not load,
   so the widget arrives unstyled and falls through to our defaults -- headings
   left-aligned and oversized, plain disc bullets, and the navy rectangles that
   `#searchContainer .btn` sets for the RepFinder page. Every value below was
   measured on www.manaonline.org's home page.

   The button rules have to name the container id: `#searchContainer .btn` is
   (1,1,0), so a plain class selector could never win. Scoping through
   `.mana-home-finders` keeps the RepFinder and Find New Lines pages on their
   own styling.
   --------------------------------------------------------------------------- */

.mana-home-finder h3 {
	margin-bottom: 5px;
	color: var(--mana-navy);
	font-size: 1.9rem;
	font-weight: 600;
	line-height: 1.43;
	text-align: center;
}

.mana-home-finder p {
	margin-bottom: 11px;
	color: #000;
	font-size: 1.1rem;
	line-height: 1.43;
}

.mana-home-finder ul {
	padding-left: 40px;
	margin-bottom: 11px;
	list-style-image: url("../images/littleglobe.png");
}

.mana-home-finder li {
	margin-bottom: 10px;
	font-size: 1rem;
}

.mana-home-finders #searchContainer .btn,
.mana-home-finders #searchLFContainer .btn {
	padding: 6px 17px;
	border: 2px solid #9ca1a4;
	border-radius: 50px;
	background: #9ca1a4;
	color: var(--mana-navy);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

.mana-home-finders #searchContainer .btn:hover,
.mana-home-finders #searchContainer .btn:focus-visible,
.mana-home-finders #searchLFContainer .btn:hover,
.mana-home-finders #searchLFContainer .btn:focus-visible {
	border-color: #8b9093;
	background: #8b9093;
	color: var(--mana-navy);
}

/* Novi's icon font is not loaded here, so its glyphs would render as empty
   boxes. Everything stays hidden by default... */
.mana-home-finder .novicon {
	display: none;
}

/* ...except the chevron after "Find Reps" / "Find Manufacturers", which is
   part of the button's read. Drawn from two borders on a rotated box rather
   than pulling in a whole icon font for one glyph. Live renders it 8.5x16px
   with a 5px gap, in the button's own colour; a 6px box with 2px borders
   measures the same across the diagonal. */
.mana-home-finder .novicon-arrow-right {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 5px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-1px) rotate(45deg);
}


/* ---------------------------------------------------------------------------
   Find Manufacturers' Reps — Steve's styling notes against the source page,
   www.manaonline.org/find-manufacturer-reps. Values measured off it.
   --------------------------------------------------------------------------- */

/* The rule above pairs `.mana-interior-shell > h1` with
   `.mana-interior-shell > .mana-page-heading`, on the assumption that the class
   sits ON the heading. Where it is used as a wrapper group instead, the group
   takes a gold rule and the h1 inside takes another — two lines, one under the
   title and one under the subtitle. Only the h1's belongs. */
.mana-interior-shell > div.mana-page-heading {
	border-bottom: 0;
	font-size: inherit;
}

/* Live tints this panel blue, not grey: rgba(93, 169, 252, 0.2). */
.mana-page--find-manufacturer-reps .mana-callout {
	background: rgb(93 169 252 / 20%);
}

/* Live sets the testimonial off with the same 5px gold rule the About page
   uses for its lead paragraphs. */
.mana-page--find-manufacturer-reps .mana-testimonial {
	padding-left: 20px;
	border-left: 5px solid var(--mana-gold);
}

/* "Built to Support Your Success" is an h3 on live — 30.4px, #2277d4. Ours is
   an h2 so the outline stays correct, so the appearance is restated here. */
.mana-page--find-manufacturer-reps .mana-interior-shell h2 {
	color: #2277d4;
	font-size: 1.9rem;
	font-weight: 600;
}

/* Body links take the site's link blue, as they do everywhere else. Scoped to
   paragraphs so the buttons, which are anchors too, keep their own colours. */
/* `:not()` because the panel's buttons are anchors inside paragraphs too, and
   their label is white on a link-blue fill — without the exclusion this rule
   wins on specificity and paints the text the same blue as the pill. */
.mana-page--find-manufacturer-reps .mana-interior-shell p a:not(.mana-fmr-btn) {
	color: var(--mana-link-blue);
}

/* ---------------------------------------------------------------------------
   Find Manufacturers' Reps — matched to www.manaonline.org/find-manufacturer-reps.

   Live lays this page out with floats, not columns: a right-floated wordmark
   the intro wraps around, a tinted two-column panel, a blockquote with a
   left-floated headshot, and a right-floated card the closing section wraps
   around. Every value below was measured on that page.
   --------------------------------------------------------------------------- */

/* Live runs this page's content in a 1140px container, narrower than the
   theme's 1380px page width. Matched here only — font sizes stay as they are,
   which already measure identical to live. The `!important` is needed because
   `.mana-interior-page > .mana-interior-shell` sets the width with one. */
.mana-page--find-manufacturer-reps .mana-interior-shell {
	width: min(calc(100% - 60px), 1140px) !important;
	margin-inline: auto;
}

.mana-fmr-float-right {
	float: right;
	display: block;
	max-width: 100%;
	margin: 0 0 10px 15px;
}

.mana-fmr-float-left {
	float: left;
	display: block;
	max-width: 100%;
	margin: 0 15px 10px 0;
}

.mana-fmr-intro::after,
.mana-fmr-panel::after,
.mana-fmr-support::after,
.mana-fmr-quote::after {
	content: "";
	display: table;
	clear: both;
}

/* The tinted panel: live is `#5da9fc33` on a two-column Bootstrap row. */
.mana-fmr-panel {
	display: flex;
	flex-wrap: wrap;
	margin: 20px 0;
	background: rgb(93 169 252 / 20%);
	text-align: center;
}

.mana-fmr-panel__col {
	flex: 1 1 50%;
	min-width: 0;
	padding: 15px;
}

.mana-fmr-panel__title {
	margin: 5px 0;
	color: var(--mana-navy);
	font-size: 1.3rem;
	font-weight: 600;
	text-align: center;
}

/* Live left-aligns the list items inside the centred column. */
.mana-fmr-panel__list {
	display: inline-block;
	margin: 0 0 10px;
	text-align: left;
	list-style-image: url("../images/littleglobe.png");
}

.mana-fmr-panel__list li {
	margin-bottom: 6px;
}

/* Live's `.btn-primary`: a filled link-blue pill, white label. */
.mana-fmr-btn {
	display: inline-block;
	padding: 6px 17px;
	border: 2px solid var(--mana-link-blue);
	border-radius: 50px;
	background: var(--mana-link-blue);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.mana-fmr-btn:hover,
.mana-fmr-btn:focus-visible {
	border-color: var(--mana-navy);
	background: var(--mana-navy);
	color: #fff;
}

/* The testimonial is a blockquote with a gold rule, 22px copy. */
.mana-fmr-quote {
	padding: 0 0 0 25px;
	margin: 25px 0;
	border-left: 5px solid var(--mana-gold);
	font-size: 20px;
	line-height: 1.43;
}

.mana-fmr-quote p {
	margin: 0 0 11px;
	font-size: 22px;
}

.mana-fmr-support__title {
	margin: 5px 0;
	color: #2277d4;
	font-size: 1.9rem;
	font-weight: 600;
}

/* The closing strip. Live lays the globe graphic over `rgb(0, 53, 166)` at
   `cover`, pulled up 350px so the strip catches the diagonal facets across the
   middle of the artwork rather than the globe itself.

   `background-blend-mode: darken` is the part that matters and is easy to
   miss: the artwork in that band is opaque gold, `rgb(221, 196, 103)`. Blended
   `darken` against the navy it becomes `rgb(0, 53, 103)` — the darker navy
   facets you actually see. Without the blend the strip renders bright gold. */
.mana-fmr-banner {
	padding: 20px;
	margin: 20px 0;
	background-color: rgb(0 53 166);
	background-image: url("../images/banner-globe.png");
	background-position: 0 -350px;
	background-repeat: no-repeat;
	background-size: cover;
	background-blend-mode: darken;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 600;
	text-align: center;
}

.mana-fmr-banner a {
	color: #fff;
	text-decoration: underline;
}

.mana-fmr-banner a:hover,
.mana-fmr-banner a:focus-visible {
	color: var(--mana-gold);
}

/* Below the panel's two columns are unusable side by side. */
@media (max-width: 781px) {
	.mana-fmr-panel__col {
		flex: 1 1 100%;
	}

	.mana-fmr-float-right,
	.mana-fmr-float-left {
		float: none;
		margin: 0 auto 14px;
	}
}

@media (max-width: 900px) {
	.mana-home-finders {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 781px) {
	.mana-audiences__columns {
		gap: 54px;
	}

	.mana-callout {
		text-align: center;
	}

	.mana-callout__columns {
		gap: 24px;
	}

	.mana-spotlight {
		padding-inline: 20px;
		background-attachment: scroll;
	}

	.mana-spotlight__quote p {
		font-size: 22px;
	}

	.mana-profile-cards {
		gap: 24px;
	}

	.mana-interior-page > .mana-interior {
		width: min(calc(100% - 36px), 680px) !important;
		padding-top: 34px;
	}

	.mana-interior-page > .mana-interior-shell {
		width: min(calc(100% - 36px), 680px) !important;
		padding-top: 34px;
	}

	/* Everything stacks to one column at this width, so the left inset would
	   only eat into the available width. */
	.mana-interior-page > .mana-interior-shell,
	.mana-interior-page > .mana-interior--full,
	.mana-finder,
	.mana-wide-page > .mana-wide-content {
		width: min(calc(100% - 36px), 680px) !important;
		padding-left: 0;
	}

	.mana-interior__main {
		padding-left: 0;
	}

	.mana-interior__columns {
		gap: 42px;
	}

	.mana-page-heading {
		margin-bottom: 36px;
	}

	.mana-interior__sidebar {
		flex-basis: auto !important;
	}
}

.site-footer {
	color: #fff;
	font-size: 17px;
	line-height: 1.45;
}

.site-footer__main {
	border-bottom: 3px solid #777;
	background: var(--mana-navy);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 0.8fr 1fr 1fr;
	gap: clamp(60px, 8vw, 130px);
	width: min(calc(100% - 96px), 1110px);
	min-height: 310px;
	padding: 38px 0 36px;
	margin-inline: auto;
}

.footer-col__title {
	margin: 0 0 2px;
	color: #fff;
	font-size: 27px;
	font-weight: 600;
	line-height: 1.25;
}

.footer-col address {
	margin: 0;
	font-style: normal;
}

.footer-logo {
	display: none;
	width: 158px;
	height: auto;
	margin: 8px auto 0;
}

.footer-phone {
	margin: 10px 0 25px;
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	text-decoration: underline;
}

.footer-col .menu {
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer-col .menu-item {
	margin: 0 0 11px;
}

.footer-social {
	display: flex;
	gap: 5px;
}

.footer-social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 2px solid #fff;
	border-radius: 50%;
}

.footer-social svg {
	width: 22px;
	height: 22px;
	fill: #fff;
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.footer-social a:first-child svg {
	stroke: none;
}

.site-footer__legal {
	background: #000;
}

.site-footer__legal-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(calc(100% - 96px), 1110px);
	padding: 25px 0 22px;
	margin-inline: auto;
}

.footer-copyright {
	margin: 0;
	text-align: center;
}

.footer-copyright a {
	color: #ddc467;
}

@media (max-width: 820px) {
	.site-footer__inner {
		display: block;
		width: min(calc(100% - 40px), 620px);
		padding: 60px 0 68px;
		text-align: center;
	}

	.footer-col + .footer-col {
		margin-top: 56px;
	}

	.footer-logo {
		display: block;
	}

	.footer-phone {
		margin-top: 13px;
	}

	.footer-social {
		justify-content: center;
	}

	.site-footer__legal-inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: min(calc(100% - 40px), 700px);
		min-height: 0;
		padding: 32px 0 28px;
	}

	.footer-copyright {
		order: 1;
	}
}

@media (max-width: 990px) {
	.utility-bar {
		display: none;
	}

	/* No utility bar here, so the sticky header is only the 56px header row
	   plus its 5px top border — a 200px offset would strand the heading in
	   the middle of the screen. */
	:target,
	h1[id],
	h2[id],
	h3[id],
	h4[id] {
		scroll-margin-top: 88px;
	}

	.site-header {
		border-top: 5px solid var(--mana-navy);
	}

	.site-header__inner {
		position: relative;
		width: min(calc(100% - 44px), 880px);
		min-height: 56px;
		gap: 20px;
		flex-wrap: wrap;
	}

	.site-brand {
		flex-basis: 98px;
	}

	.site-brand img,
	.custom-logo {
		width: 98px;
	}

	.nav-toggle {
		display: block;
		margin-left: auto;
	}

	.primary-nav {
		flex: 0 0 calc(100% + 44px);
		position: static;
		display: none;
		margin: 0 -22px;
		border-top: 1px solid #ddd;
		border-bottom: 2px solid var(--mana-navy);
		background: #fff;
		box-shadow: 0 8px 16px rgb(0 0 0 / 12%);
	}

	/* The menu always overlays, so it opens where you are rather than at the top
	   of the document. It is taller than the screen, so the panel scrolls on its
	   own — and overscroll-behavior stops that scroll running on into the page
	   underneath once it reaches the end. */
	/* A true overlay: absolute, so opening the menu never shifts the page, and it
	   appears wherever you happen to be rather than at the top of the document.
	   It is taller than the screen, so the panel scrolls on its own, and
	   overscroll-behavior stops that scroll running on into the page beneath. */
	.primary-nav.is-open {
		position: absolute;
		z-index: 10;
		top: 100%;
		right: 0;
		left: 0;
		display: block;
		max-height: calc(100vh - 100%);
		max-height: calc(100dvh - 100%);
		margin: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.primary-nav .menu {
		display: block;
		padding: 10px 22px 16px;
	}

	.primary-nav li + li {
		border-top: 1px solid #eee;
	}

	.primary-nav a {
		display: block;
		padding: 12px 4px;
		font-size: 16px;
		white-space: normal;
	}

	.primary-nav .sub-menu {
		position: static;
		display: block;
		width: auto;
		padding: 0 0 0 18px;
		border-top: 0;
		background: transparent;
		box-shadow: none;
	}

	.primary-nav .sub-menu a {
		font-size: 14px;
	}

	.primary-nav .sub-menu .sub-menu a {
		padding-left: 18px;
	}

	/* Matches the utility bar at the top of the page: light grey, no rule. */
	.mobile-utility-nav {
		position: fixed;
		z-index: 1000;
		right: 0;
		bottom: 0;
		left: 0;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		background: var(--mana-light-grey);
		box-shadow: 0 -4px 14px rgb(0 0 0 / 18%);
	}

	.mobile-utility-nav a {
		padding: 13px 8px;
		color: #000;
		font-size: 15px;
		text-align: center;
		text-decoration: none;
	}

	.mobile-utility-nav a + a {
		border-left: 1px solid var(--mana-gold);
	}

	body {
		padding-bottom: 51px;
	}

	.mana-search-results {
		width: min(calc(100% - 36px), 680px);
		padding: 48px 0 68px;
	}

	.mana-search-card,
	.mana-search-results__empty {
		padding: 22px;
	}
}

/* Events -- upcoming events read from NOVI by inc/events.php. Drawn to match the
   list on NOVI's own events page: a blue date badge, the title and time, and a
   navy Details pill, on light rows. The Events page's full-width container is
   not one of the content lists that take the globe bullet, so only the browser's
   own list styling needs clearing. */
.mana-events {
	margin: 28px 0 0;
	padding: 20px 22px;
	list-style: none;
	background: #f8f9fa;
}

.mana-event {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 18px;
	min-height: 100px;
}

.mana-event + .mana-event {
	border-top: 1px solid #eceef0;
}

.mana-event:nth-child(even) {
	background: #f4f5f6;
}

.mana-event__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	background: var(--mana-link-blue);
	color: #fff;
	font-size: 1.2em;
	font-weight: 500;
	line-height: 1.1;
}

.mana-event__date strong {
	font-weight: inherit;
}

.mana-event__info {
	padding: 15px 0;
}

.mana-events .mana-event__title {
	margin: 0 0 4px;
	color: #000;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.mana-event__title a {
	color: inherit;
	text-decoration: none;
}

.mana-event__title a:hover,
.mana-event__title a:focus-visible {
	text-decoration: underline;
}

.mana-event__virtual {
	width: 18px;
	height: 18px;
	margin-left: 6px;
	vertical-align: -3px;
}

.mana-event__time {
	color: #000;
	font-size: 15px;
}

.mana-event__time small {
	font-size: 75%;
}

.mana-events .mana-event__details {
	margin-right: 16px;
	padding: 8px 18px;
	border-radius: 20px;
	background: var(--mana-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

/* Same lift as the site's other buttons (.mana-button). */
.mana-events .mana-event__details:hover,
.mana-events .mana-event__details:focus-visible {
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 7px 14px rgb(0 39 122 / 25%);
}

.mana-events-empty {
	margin-top: 28px;
}

/* Board of Directors -- the section heading under the page title, drawn as
   live draws it: light grey, lighter weight, a short rule beneath. */
.mana-board-page .mana-board-subhead {
	max-width: 620px;
	margin: 36px 0 24px;
	padding-bottom: 8px;
	border-bottom: 3px solid #f0f0f0;
	color: #555;
	font-size: 30px;
	font-weight: 400;
}

/* Three cards to a row in the main column, as live has them, rather than the
   four the default minimum would fit beside the sidebar. */
.mana-board-page .mana-interior__main .mana-leader-grid {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* ---------------------------------------------------------------------------
   Cedar's classifieds widget (/reps-wanted/, inc/embeds.php) -- its buttons.

   Same story as RepFinder: the markup is Bootstrap (`btn btn-default`,
   `btn btn-secondary`), painted on live by Novi's mana-v3.css, which this site
   does not load. Values are live's: `.btn` is 600 16px/1.42857, 6px 17px, fully
   rounded; `.btn-default` is the grey pill with navy text, and live forces its
   colours with !important, so ours does too (it also has to beat this theme's
   link colour, since "Apply Filters" is an <a>); `.btn-secondary` is navy.

   `:where()` keeps the id out of the specificity, leaving these at (0,1,0) like
   live's own rules. That matters for "View Full Ad": Cedar's inline
   `.adsRow .adBox input { font-size:14px; border-radius:5px }` is (0,2,1) and
   has to keep winning, as it does on live. An id-scoped rule would flatten it
   -- the trap RepFinder's Clear Filters button fell into.
   --------------------------------------------------------------------------- */
:where(#classifiedAds) .btn {
	display: inline-block;
	padding: 6px 17px;
	border: 2px solid transparent;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.42857;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
}

/* Weight too: "Apply Filters" is an <a>, and this theme's content-link rules
   outrank (0,1,0) and set it back to 400. */
:where(#classifiedAds) .btn-default {
	border: 2px solid #9ca1a4 !important;
	background-color: #9ca1a4 !important;
	color: var(--mana-navy) !important;
	font-weight: 600 !important;
}

:where(#classifiedAds) .btn-default:hover,
:where(#classifiedAds) .btn-default:focus-visible {
	background-color: #fff !important;
	color: #000 !important;
}

:where(#classifiedAds) .btn-secondary {
	border-color: var(--mana-navy);
	background: var(--mana-navy);
	color: #fff;
}

:where(#classifiedAds) .btn-secondary:hover,
:where(#classifiedAds) .btn-secondary:focus-visible {
	background: #fff;
	color: var(--mana-navy);
}

:where(#classifiedAds) .o-filter-bar-filters__btn-filter-menu {
	margin-right: 10px;
}

/* Novi's icon font is not loaded, so the chevron after "Apply Filters" is
   drawn the same way as on the home-page widgets; any other glyph stays
   hidden rather than rendering as an empty box. */
:where(#classifiedAds) .novicon {
	display: none;
}

:where(#classifiedAds) .novicon-arrow-right {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 5px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-1px) rotate(45deg);
}

/* Narrow screens: the Details pill drops under the title instead of squeezing
   it. The badge spans both rows so it still runs the full height. */
@media (max-width: 600px) {
	.mana-events {
		padding: 12px;
	}

	.mana-event {
		grid-template-columns: 60px minmax(0, 1fr);
	}

	.mana-event__date {
		grid-row: span 2;
	}

	.mana-event__info {
		padding-bottom: 8px;
	}

	.mana-events .mana-event__details {
		justify-self: start;
		margin: 0 0 15px;
	}
}