/*
 * BBU V2 — theme pages.
 *
 * The chrome (header, footer, buttons, type scale, colour tokens) comes from the
 * approved V2 stylesheet the landing pages already use, so this file only adds
 * what the landing pages never needed: long-form content, the audience hubs,
 * class and post cards, breadcrumbs, the desktop dropdowns and the forms.
 *
 * Every value here is drawn from the design's own tokens:
 *   --blue #6da0db  --slate #6b6f79  --ink #18354c  --text #39424f
 *   --cloud #edf3f9 --line #c9d4df   --cta #3975b8  --cta-hover #285a90
 *   body Proxima Nova 18px/1.55      headings League Spartan 600
 */

/* ------------------------------------------------------------- navigation */

.gh-item {
	position: relative;
	display: flex;
}

.gh-item > a {
	display: flex;
	align-items: center;
	gap: 6px;
}

.gh-caret {
	transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
}

.gh-sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 260px;
	padding: 10px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(24, 53, 76, .12);
	display: none;
	flex-direction: column;
}

/*
 * The submenu is positioned absolutely against its own parent item, so the item
 * has to be the containing block. Without this it resolves against the nearest
 * positioned ancestor - which is the page - and a submenu opens somewhere down
 * the document instead of under the link that opened it. The parent is a flex
 * row so its link and caret line up with the flat items beside it.
 */
.gh-item-has-children {
	position: relative;
	display: flex;
	align-items: center;
}

.gh-item-has-children:hover .gh-sub,
.gh-item-has-children:focus-within .gh-sub {
	display: flex;
}

.gh-item-has-children:hover .gh-caret,
.gh-item-has-children:focus-within .gh-caret {
	transform: rotate(180deg);
}

.gh-sub a {
	display: block;
	padding: 11px 14px;
	border-radius: 8px;
	font-size: 16px;
	text-decoration: none;
	color: var(--text);
	white-space: normal;
}

.gh-sub a:hover,
.gh-sub a[aria-current=page] {
	background: var(--cloud);
	color: var(--ink);
}

.gh-mobile-acc {
	border-bottom: 1px solid var(--line);
}

.gh-mobile-acc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	padding: 12px 0;
	font-family: 'League Spartan', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
}

.gh-mobile-acc summary::-webkit-details-marker {
	display: none;
}

.gh-mobile-acc[open] .gh-mobile-icon path:last-child {
	display: none;
}

.gh-mobile-acc a {
	display: block;
	min-height: 46px;
	padding: 11px 0 11px 16px;
	border-left: 2px solid var(--line);
	margin-left: 2px;
	text-decoration: none;
	color: var(--text);
}

.gh-mobile-acc a:hover {
	color: var(--ink);
}

.gh-mobile-parent {
	font-weight: 600;
	color: var(--ink);
}

.gh-mobile-login {
	display: flex;
	align-items: center;
	min-height: 50px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

/* ------------------------------------------------------------ page shells */

.bbu-page .site-header {
	border-bottom: 1px solid var(--line);
}

.page-hero {
	padding-block: 64px 40px;
	background: var(--white);
}

.page-hero.tone-cloud {
	background: var(--cloud);
}

.page-hero .wrap {
	max-width: 900px;
}

/* The class overview uses the full page shell, like its opening split and directory. */
main:has(.cx-state-directory) > .page-hero .wrap {
	max-width: none;
}

.page-hero h1 {
	font-size: clamp(38px, 4.4vw, 60px);
	margin-bottom: 18px;
}

.page-hero .lede {
	font-size: 21px;
	line-height: 1.5;
	color: var(--text);
	max-width: 62ch;
	margin: 0 0 26px;
}

/* A composed page whose opening section is `.cx-intro-centered` (the Agency Owner Package) opens like the audience heroes: the breadcrumb and
 * title sit on the same centred axis, and in the same 900px container, as the label and opening questions under them. */
.page-hero.page-hero-centered {
	padding-block-end: 8px;
	text-align: center;
}

.breadcrumbs {
	font-size: 15px;
	color: var(--slate);
	margin-bottom: 18px;
}

.breadcrumbs a {
	color: var(--slate);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.breadcrumbs span[aria-hidden] {
	margin-inline: 8px;
	color: var(--line);
}

/* -------------------------------------------------------------- sections */

.section {
	padding-block: 64px;
}

.section.tight {
	padding-block: 44px;
}

.section.tone-cloud {
	background: var(--cloud);
}

.section > .wrap > h2,
.section-head h2 {
	font-size: clamp(30px, 3.2vw, 44px);
	margin-bottom: 16px;
}

.section-head {
	max-width: 780px;
	margin-bottom: 40px;
}

.section-head p {
	font-size: 19px;
	margin: 0;
}

/* ------------------------------------------------------------ long form */

.prose {
	max-width: 74ch;
}

.prose > * + * {
	margin-top: 20px;
}

.prose h2 {
	font-size: clamp(28px, 2.8vw, 38px);
	margin-top: 46px;
	margin-bottom: 14px;
}

.prose h3 {
	font-size: 26px;
	margin-top: 36px;
	margin-bottom: 12px;
}

.prose h4 {
	font-size: 21px;
	margin-top: 28px;
	margin-bottom: 10px;
}

.prose p,
.prose li {
	font-size: 18px;
	line-height: 1.62;
}

.prose ul,
.prose ol {
	padding-left: 24px;
}

.prose li + li {
	margin-top: 8px;
}

.prose a {
	color: var(--ink);
	text-underline-offset: 5px;
}

.prose blockquote {
	margin: 30px 0;
	padding: 22px 26px;
	background: var(--cloud);
	border-left: 4px solid var(--blue);
	border-radius: 0 12px 12px 0;
}

.prose blockquote p {
	margin: 0;
	font-size: 20px;
	color: var(--ink);
}

.prose img,
.prose iframe,
.prose video {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* SST-783 round 8 (browser review): the shared homepage stylesheet carries a bare
   `table { min-width: 1000px }`, which was written for the one deliberately wide comparison table
   on /doula-training/birth/ (six columns, inside `.comparison-scroll`). It leaked into every page,
   so an article's ordinary two-column table was forced to 1000px inside a 350px reading column and
   pushed the document to 1020px at a 390px window (630px of the page off screen). The minimum is now
   scoped to its scroller at the source; this states the reading column's own rule as well, so a
   table in an article can never widen the page even if that bare rule returns. The text wraps, which
   is what a two-column reading table wants; nothing is clipped or hidden. */
.prose table {
	width: 100%;
	min-width: 0;
	border-collapse: collapse;
	font-size: 17px;
}

.prose th,
.prose td {
	border-bottom: 1px solid var(--line);
	padding: 12px 14px;
	text-align: left;
}

.prose th {
	font-family: 'League Spartan', sans-serif;
	color: var(--ink);
}

.prose hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 40px 0;
}

/* A call-to-action button written into a reading column (a repaired post, the blog
   index, the FAQ page): the link rule above would otherwise paint it ink on blue. */
.prose a.button {
	color: var(--white);
	text-decoration: none;
}

.prose a.button:hover {
	color: var(--white);
}

.prose .cx-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0;
}

.blog-intro > :first-child {
	margin-top: 0;
}

/* WordPress block output that would otherwise stick out. */
.prose .wp-block-button__link,
.prose .wp-block-file__button {
	background: var(--cta);
	color: var(--white);
	border-radius: 10px;
	padding: 14px 24px;
	font-size: 18px;
	text-decoration: none;
}

.prose .wp-block-button__link:hover,
.prose .wp-block-file__button:hover {
	background: var(--cta-hover);
}

.prose .wp-block-group,
.prose .wp-block-columns {
	margin-top: 24px;
}

/* ---------------------------------------------------------------- cards */

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 30px;
}

.card-grid.cols-2 {
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--text);
	transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.card:hover {
	border-color: var(--blue);
	box-shadow: 0 16px 34px rgba(24, 53, 76, .10);
}

.card-media {
	aspect-ratio: 16 / 10;
	background: var(--cloud);
	/* SST-783 (row 12: "make the images and font more equal"): min-height:0 removes the flex item's automatic minimum
	   size, which is the intrinsic height of the file inside it. Without it a picture taller than the box's aspect
	   ratio (a portrait file, 389x394 in a 3:2 box) forced the box taller and the card grid went ragged. */
	min-height: 0;
	overflow: hidden;
}

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

.card-body {
	padding: 24px 26px 28px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.card-tag {
	align-self: flex-start;
	font-size: 15px;
	color: var(--ink);
	background: var(--cloud);
	padding: 6px 13px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.card h3 {
	font-size: 24px;
	margin-bottom: 10px;
}

.card p {
	font-size: 17px;
	margin: 0 0 18px;
}

.card-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ink);
	font-size: 17px;
	text-decoration: underline;
	text-underline-offset: 5px;
}

.card:hover .card-cta svg {
	transform: translateX(3px);
}

.card-cta svg {
	transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
}

.card.no-media .card-body {
	padding-top: 30px;
}

/* ------------------------------------------------------------- audience */

.hub-paths {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 28px;
}

.hub-path {
	display: flex;
	flex-direction: column;
	padding: 32px 30px 34px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	text-decoration: none;
	color: var(--text);
}

.hub-path:hover {
	border-color: var(--blue);
}

.hub-path .audience {
	font-size: 15px;
	color: var(--slate);
	margin-bottom: 10px;
}

.hub-path h3 {
	font-size: 26px;
	margin-bottom: 12px;
}

.hub-path p {
	font-size: 17px;
	margin-bottom: 20px;
}

.hub-path .cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 5px;
}

.prose .hub-path ul,
.hub-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hub-list li {
	border-bottom: 1px solid var(--line);
}

.hub-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding: 14px 4px;
	text-decoration: none;
	color: var(--text);
	font-size: 18px;
}

.hub-list a:hover {
	color: var(--ink);
}

.hub-list .hint {
	font-size: 15px;
	color: var(--slate);
}

/* State destinations use the adjacent class list's links, rules and arrows. */
.cx-state-directory.cx-section {
	padding-top: 0;
}

.cx-state-directory .cx-state-links {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 32px;
	margin-top: 24px;
}

@media (max-width: 900px) {
	.cx-state-directory .cx-state-links {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.cx-state-directory .cx-state-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20px;
	}

	.cx-state-directory .hub-list a {
		font-size: 17px;
	}
}

/* ---------------------------------------------------------------- posts */

.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 34px;
}

.post-meta {
	font-size: 15px;
	color: var(--slate);
	margin-bottom: 10px;
}

.post-single .entry-header {
	padding-block: 56px 30px;
}

.post-single .entry-header .wrap {
	max-width: 820px;
}

.post-single h1 {
	font-size: clamp(34px, 4vw, 52px);
	margin-bottom: 16px;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 48px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	min-height: 46px;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	text-decoration: none;
	color: var(--ink);
}

.pagination .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}

/* ----------------------------------------------------------------- faq */

.faq {
	max-width: 900px;
}

.faq details {
	border-bottom: 1px solid var(--line);
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 58px;
	padding: 16px 0;
	font-family: 'League Spartan', sans-serif;
	font-weight: 600;
	font-size: 21px;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq details[open] summary .faq-icon path:last-child {
	display: none;
}

.faq .faq-answer {
	padding-bottom: 24px;
	max-width: 72ch;
}

.faq .faq-answer p {
	margin: 0 0 14px;
}

/* ----------------------------------------------------------- cta bands */

.cta-band {
	background: var(--ink);
	color: var(--white);
	padding-block: 64px;
}

.cta-band h2 {
	color: var(--white);
	font-size: clamp(30px, 3.2vw, 44px);
	margin-bottom: 14px;
}

.cta-band p {
	font-size: 19px;
	max-width: 62ch;
	margin: 0 0 28px;
	color: var(--cloud);
}

.cta-band .button {
	background: var(--white);
	color: var(--ink);
}

.cta-band .button:hover {
	background: var(--cloud);
}

.cta-band .button-outline {
	background: transparent;
	color: var(--white);
	border-color: var(--white);
}

/* ---------------------------------------------------------------- forms */

.bbu-form {
	max-width: 640px;
}

.bbu-form .field {
	margin-bottom: 20px;
}

.bbu-form label {
	display: block;
	font-size: 16px;
	color: var(--ink);
	margin-bottom: 8px;
}

.bbu-form input[type=text],
.bbu-form input[type=email],
.bbu-form input[type=tel],
.bbu-form select,
.bbu-form textarea {
	width: 100%;
	min-height: 52px;
	padding: 13px 16px;
	font: inherit;
	font-size: 17px;
	color: var(--text);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 10px;
}

.bbu-form textarea {
	min-height: 150px;
	resize: vertical;
}

.bbu-form input:focus,
.bbu-form select:focus,
.bbu-form textarea:focus {
	outline: 2px solid var(--cta);
	outline-offset: 2px;
}

.bbu-form .field.has-error input,
.bbu-form .field.has-error textarea {
	border-color: #b23b3b;
}

.bbu-form .error {
	color: #b23b3b;
	font-size: 15px;
	margin-top: 6px;
}

.bbu-form .notice {
	padding: 16px 20px;
	border-radius: 10px;
	margin-bottom: 24px;
	font-size: 17px;
}

.bbu-form .notice.ok {
	background: var(--cloud);
	color: var(--ink);
	border: 1px solid var(--line);
}

.bbu-form .notice.bad {
	background: #fdf0f0;
	color: #7d2020;
	border: 1px solid #e6bcbc;
}

.bbu-form .hint {
	font-size: 15px;
	color: var(--slate);
	margin-top: 8px;
}

.bbu-form .wpcf7-list-item {
	display: block;
	margin: 0 0 8px;
}

/* -------------------------------------------------- webinar registration */
/* The registration block sits in the page body, not inside the form, so the
   notices it shows on success or failure are siblings of `.bbu-form` and need
   the same treatment the contact form's get from `.bbu-form .notice`. */

.bbu-register {
	max-width: 720px;
	margin-top: 40px;
	padding: 28px 32px;
	background: var(--cloud);
	border: 1px solid var(--line);
	border-radius: 20px;
}

.bbu-register h2 {
	font-size: 30px;
	margin-bottom: 10px;
}

.bbu-register > p {
	font-size: 17px;
	max-width: 60ch;
}

.bbu-register .notice {
	padding: 16px 20px;
	border-radius: 10px;
	margin-bottom: 24px;
	font-size: 17px;
}

.bbu-register .notice.ok {
	background: var(--white);
	color: var(--ink);
	border: 1px solid var(--line);
}

.bbu-register .notice.bad {
	background: #fdf0f0;
	color: #7d2020;
	border: 1px solid #e6bcbc;
}

.bbu-register .notice .hint {
	display: block;
	font-size: 15px;
	color: var(--slate);
	margin-top: 8px;
}

.bbu-register .bbu-form {
	max-width: none;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 24px 28px;
}

.bbu-register .field.consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.bbu-register .field.consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 16px;
	margin: 0;
	cursor: pointer;
}

.bbu-register .field.consent input[type=checkbox] {
	margin-top: 4px;
	width: 20px;
	height: 20px;
	flex: none;
}

.bbu-register .form-submit {
	margin: 0;
}

.bbu-register .status {
	margin-bottom: 0;
}

.bbu-register-already {
	margin: 16px 0 0;
	font-size: 16px;
}

@media (max-width: 760px) {
	.bbu-register {
		padding: 22px 20px;
		border-radius: 16px;
	}

	.bbu-register .bbu-form {
		padding: 20px 16px;
	}
}

/* --------------------------------------------------------- comments */
/* WordPress prints the comment form with fixed `size` and `cols`, so the
   textarea asks for 45 columns whatever the screen is. At 390px that is wider
   than the column and the whole page scrolls sideways. The controls take the
   same shape as the form component above instead of their own intrinsic one. */

.comment-form {
	max-width: 640px;
}

.comment-form p {
	margin-bottom: 20px;
}

.comment-form label {
	display: block;
	font-size: 16px;
	color: var(--ink);
	margin-bottom: 8px;
}

.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	padding: 13px 16px;
	font: inherit;
	font-size: 17px;
	color: var(--text);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 10px;
}

.comment-form textarea {
	min-height: 150px;
	resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: 2px solid var(--cta);
	outline-offset: 2px;
}

.comment-form .form-submit input[type=submit] {
	min-height: 52px;
	padding: 13px 26px;
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	color: var(--white);
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 10px;
	cursor: pointer;
}

.comment-form .form-submit input[type=submit]:hover {
	background: var(--cta);
	border-color: var(--cta);
}

.comment-form .comment-notes,
.comment-form .logged-in-as,
.comment-form .comment-form-cookies-consent {
	font-size: 15px;
	color: var(--slate);
}

.comment-form .comment-form-cookies-consent label {
	display: inline;
	margin-left: 8px;
}

.comment-form .comment-form-cookies-consent input {
	min-height: 0;
	width: auto;
}

.comment-list,
.comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .children {
	margin-left: 24px;
}

.comment-body {
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}

/* ----------------------------------------------------------- utilities */

.staging-note {
	background: var(--ink);
	color: var(--white);
	font-size: 15px;
	text-align: center;
	padding: 9px 16px;
}

.staging-note strong {
	color: var(--white);
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--ink);
	color: var(--white);
	padding: 12px 20px;
	border-radius: 0 0 10px 0;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

/* --------------------------------------------------------- responsive */

@media (max-width: 1050px) {
	.gh-nav {
		display: none;
	}

	.gh-menu-btn {
		display: inline-flex;
	}

	.breadcrumbs {
		font-size: 14px;
	}
}

@media (max-width: 760px) {
	.page-hero {
		padding-block: 40px 28px;
	}

	.section {
		padding-block: 44px;
	}

	.card-grid,
	.post-list,
	.hub-paths {
		gap: 22px;
	}

	.cta-band {
		padding-block: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.card,
	.card-cta svg,
	.gh-caret {
		transition: none;
	}
}

/* ------------------------------------------------- offer qualification */
/* The agency webinar offer's three-step journey. Built on the same block
   treatment as `.bbu-register` so an offer page and a session page read as the
   same site: the same card, the same field styling, the same notice colours. */

.bbu-offer {
	max-width: 720px;
	margin-top: 40px;
	padding: 28px 32px;
	background: var(--cloud);
	border: 1px solid var(--line);
	border-radius: 20px;
}

.bbu-offer h2 {
	font-size: 30px;
	margin-bottom: 10px;
}

.bbu-offer > p {
	font-size: 17px;
	max-width: 60ch;
}

.bbu-offer .notice {
	padding: 16px 20px;
	border-radius: 10px;
	margin-bottom: 24px;
	font-size: 17px;
}

.bbu-offer .notice.ok {
	background: var(--white);
	color: var(--ink);
	border: 1px solid var(--line);
}

.bbu-offer .notice.bad {
	background: #fdf0f0;
	color: #7d2020;
	border: 1px solid #e6bcbc;
}

.bbu-offer .notice .hint {
	display: block;
	font-size: 15px;
	color: var(--slate);
	margin-top: 8px;
}

.bbu-offer .bbu-form {
	max-width: none;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 24px 28px;
}

.bbu-offer-step {
	border: 0;
	padding: 0;
	margin: 0 0 32px;
}

.bbu-offer-step legend {
	display: block;
	width: 100%;
	font-size: 21px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 6px;
	padding: 0;
}

.bbu-offer-stepno {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--slate);
	margin-bottom: 4px;
}

.bbu-offer-sub {
	font-size: 16px;
	color: var(--slate);
	margin: 0 0 16px;
}

.bbu-offer-options {
	display: grid;
	gap: 10px;
}

.bbu-offer-option {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 12px;
	align-items: start;
	padding: 16px 18px;
	background: var(--cloud);
	border: 1px solid var(--line);
	border-radius: 12px;
	cursor: pointer;
}

.bbu-offer-option input {
	grid-row: 1 / span 2;
	margin-top: 4px;
}

.bbu-offer-option-label {
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
}

.bbu-offer-option-sub {
	font-size: 15px;
	color: var(--slate);
}

.bbu-offer-step.has-error .bbu-offer-options {
	outline: 1px solid #e6bcbc;
	outline-offset: 6px;
	border-radius: 12px;
}

.bbu-offer-fields {
	display: grid;
	gap: 4px;
}

.bbu-offer-note {
	font-size: 15px;
	color: var(--slate);
	margin-top: 12px;
}

/* The honeypot is a field for scripts, not for people: it must be reachable by
   an automated form filler and invisible to a reader. `display: none` is the
   usual trick and it is the wrong one - several scripts skip hidden fields, and
   the field stops doing its job. Off-screen keeps it in the layout. */
.bbu-offer-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bbu-offer-route {
	font-size: 17px;
}

.bbu-offer-route .button {
	margin-top: 12px;
}

/* ----------------------------------------------------- staff guide index */

.bbu-staff-guides .hint {
	display: inline;
	margin-left: 8px;
}

/* ------------------------------------------------------ workbook ordering */
/* The order block on a workbook page, and the staging labels on the cart and
   checkout. WooCommerce brings its own markup and its own stylesheet; these
   rules only put its form inside the V2 card treatment the rest of the site
   uses, and make the staging notice read as part of the page rather than as a
   plugin's default notice. */

.bbu-order {
	max-width: 640px;
	margin-top: 40px;
	padding: 28px 32px;
	background: var(--cloud);
	border: 1px solid var(--line);
	border-radius: 20px;
}

.bbu-order h2 {
	font-size: 30px;
	margin-bottom: 8px;
}

.bbu-order-price {
	font-size: 22px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 18px;
}

/* SST-938: the Learn order list (a name, a price and a button per offering). */
.bbu-order-offers {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.bbu-order-offers li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	padding: 12px 0;
	border-top: 1px solid var(--line);
}

.bbu-order-offers li:first-child {
	border-top: 0;
}

.bbu-order-name {
	flex: 1 1 200px;
	font-weight: 600;
	color: var(--ink);
}

.bbu-order-offers .bbu-order-price {
	margin: 0;
}

.bbu-order-closed {
	color: var(--slate);
	font-size: 16px;
}

.bbu-order-form .quantity {
	margin: 0 0 16px;
}

.bbu-order-form .quantity label {
	display: block;
	font-size: 16px;
	color: var(--ink);
	margin-bottom: 8px;
}

.bbu-order-form input.qty,
.bbu-order-form select {
	min-height: 52px;
	padding: 13px 16px;
	font: inherit;
	font-size: 17px;
	color: var(--text);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 10px;
	min-width: 220px;
}

.bbu-order-form .single_add_to_cart_button {
	min-height: 52px;
	padding: 14px 28px;
	font-size: 17px;
	font-weight: 600;
	color: var(--white);
	background: var(--cta);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}

.bbu-order-form .single_add_to_cart_button:hover {
	filter: brightness(1.08);
}

.bbu-order-cart {
	margin-top: 14px;
}

.bbu-storefront-note {
	font-size: 15px;
	color: var(--slate);
}

.bbu-storefront-preview {
	padding: 18px 22px;
	margin-bottom: 28px;
	background: var(--cloud);
	border: 1px solid var(--line);
	border-radius: 14px;
	font-size: 16px;
	color: var(--ink);
}

.bbu-storefront-preview strong {
	display: block;
	margin-bottom: 4px;
}

/* ------------------------------- workbook storefront: WooCommerce, in V2 --

   WooCommerce brings its own stylesheet and its own palette. Left alone it
   paints the storefront in its own colours - purple primary buttons
   rgb(127,84,179), grey secondary ones, olive prices rgb(149,142,9) - and
   rounds its corners to 3px against a design whose radius is 8, 10 and 20. A
   storefront wearing another product's colours reads as a different site, so
   the plugin's components are repainted here in the approved V2 tokens:
   --cta #3975b8 for the action, --ink #18354c for prices and text, --line
   #c9d4df for edges, radius 10px on controls. The fonts are already right:
   WooCommerce inherits the theme's body font, so nothing here restates it.

   These are overrides, not a replacement, and they are written to win on
   specificity: the plugin's button rules are
   `.woocommerce:where(body:not(...)) button.button.alt` at (0,3,1), so every
   rule below is scoped with `body.bbu-v2`, which is a class on the body of
   every page this theme renders. States are covered one at a time rather than
   by a blanket `all: unset`, because the failure this replaces was exactly
   that: a single button rule that left hover, focus, disabled and the
   secondary control wearing the old palette.

   Nothing here is `overflow: hidden`. The storefront's width problem was not
   an overflowing child to clip but a wrong constraint, fixed below.
   ------------------------------------------------------------------------ */

body.bbu-v2 .woocommerce .button,
body.bbu-v2 .woocommerce button.button,
body.bbu-v2 .woocommerce input.button,
body.bbu-v2 .woocommerce a.button,
body.bbu-v2 .woocommerce #respond input#submit {
	color: var(--ink);
	background-color: var(--cloud);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 13px 22px;
	font-weight: 600;
	line-height: 1.2;
}

body.bbu-v2 .woocommerce .button:hover,
body.bbu-v2 .woocommerce button.button:hover,
body.bbu-v2 .woocommerce input.button:hover,
body.bbu-v2 .woocommerce a.button:hover,
body.bbu-v2 .woocommerce #respond input#submit:hover {
	color: var(--ink);
	background-color: #e2ecf6;
	border-color: var(--cta);
}

body.bbu-v2 .woocommerce .button.alt,
body.bbu-v2 .woocommerce button.button.alt,
body.bbu-v2 .woocommerce input.button.alt,
body.bbu-v2 .woocommerce a.button.alt,
body.bbu-v2 .woocommerce #respond input#submit.alt,
body.bbu-v2 .woocommerce button.single_add_to_cart_button,
body.bbu-v2 .woocommerce a.checkout-button,
body.bbu-v2 .woocommerce button[name="update_cart"],
body.bbu-v2 .woocommerce #place_order {
	color: var(--white);
	background-color: var(--cta);
	border: 1px solid var(--cta);
	border-radius: 10px;
	padding: 14px 28px;
	font-weight: 600;
	text-decoration: none;
}

body.bbu-v2 .woocommerce .button.alt:hover,
body.bbu-v2 .woocommerce button.button.alt:hover,
body.bbu-v2 .woocommerce input.button.alt:hover,
body.bbu-v2 .woocommerce a.button.alt:hover,
body.bbu-v2 .woocommerce #respond input#submit.alt:hover,
body.bbu-v2 .woocommerce button.single_add_to_cart_button:hover,
body.bbu-v2 .woocommerce a.checkout-button:hover,
body.bbu-v2 .woocommerce button[name="update_cart"]:hover,
body.bbu-v2 .woocommerce #place_order:hover {
	color: var(--white);
	background-color: var(--cta-hover);
	border-color: var(--cta-hover);
}

body.bbu-v2 .woocommerce .button:focus,
body.bbu-v2 .woocommerce .button:focus-visible,
body.bbu-v2 .woocommerce button.button:focus,
body.bbu-v2 .woocommerce input.button:focus,
body.bbu-v2 .woocommerce a.button:focus,
body.bbu-v2 .woocommerce .button.alt:focus,
body.bbu-v2 .woocommerce button.button.alt:focus,
body.bbu-v2 .woocommerce a.button.alt:focus,
body.bbu-v2 .woocommerce #respond input#submit:focus {
	outline: 2px solid var(--cta);
	outline-offset: 2px;
}

body.bbu-v2 .woocommerce .button:disabled,
body.bbu-v2 .woocommerce .button[disabled],
body.bbu-v2 .woocommerce button.button:disabled,
body.bbu-v2 .woocommerce button.button[disabled],
body.bbu-v2 .woocommerce button.button.alt:disabled,
body.bbu-v2 .woocommerce button.button.alt[disabled] {
	color: var(--slate);
	background-color: var(--cloud);
	border-color: var(--line);
	opacity: .7;
	cursor: not-allowed;
}

/* Prices. WooCommerce paints them with its highlight token; the V2 pages state
   a price in ink and leave the accent to the action. */
body.bbu-v2 .woocommerce div.product p.price,
body.bbu-v2 .woocommerce div.product span.price,
body.bbu-v2 .woocommerce ul.products li.product .price,
body.bbu-v2 .woocommerce .woocommerce-Price-amount,
body.bbu-v2 .woocommerce .cart_totals .amount,
body.bbu-v2 .woocommerce .order-total .amount,
body.bbu-v2 .woocommerce .cart-subtotal .amount {
	color: var(--ink);
	font-weight: 700;
}

body.bbu-v2 .woocommerce del .woocommerce-Price-amount,
body.bbu-v2 .woocommerce del {
	color: var(--slate);
	font-weight: 400;
}

/* Fields, in every state the plugin styles. The checkout's country and state
   selects are replaced by select2 at runtime, so its control is styled too -
   otherwise the one field a person must use is the one that keeps the old
   border, radius and height. */
body.bbu-v2 .woocommerce form .form-row input.input-text,
body.bbu-v2 .woocommerce form .form-row textarea,
body.bbu-v2 .woocommerce form .form-row select,
body.bbu-v2 .woocommerce .select2-container .select2-selection--single,
body.bbu-v2 .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	color: var(--text);
	background-color: var(--white);
	border: 1px solid var(--line);
	border-radius: 10px;
	font: inherit;
	font-size: 17px;
}

body.bbu-v2 .woocommerce form .form-row input.input-text,
body.bbu-v2 .woocommerce form .form-row textarea,
body.bbu-v2 .woocommerce form .form-row select {
	min-height: 52px;
	padding: 13px 16px;
}

body.bbu-v2 .woocommerce .select2-container .select2-selection--single {
	height: auto;
	padding: 12px 16px;
}

body.bbu-v2 .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	border: 0;
	line-height: 1.5;
}

body.bbu-v2 .woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	transform: translateY(-50%);
}

body.bbu-v2 .woocommerce form .form-row input.input-text:focus,
body.bbu-v2 .woocommerce form .form-row textarea:focus,
body.bbu-v2 .woocommerce form .form-row select:focus,
body.bbu-v2 .woocommerce .select2-container--focus .select2-selection--single {
	border-color: var(--cta);
	outline: 2px solid var(--cta);
	outline-offset: 2px;
}

body.bbu-v2 .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.bbu-v2 .woocommerce form .form-row.woocommerce-invalid select {
	border-color: #cc1818;
}

body.bbu-v2 .woocommerce form .form-row.woocommerce-validated input.input-text,
body.bbu-v2 .woocommerce form .form-row.woocommerce-validated select {
	border-color: var(--cta);
}

/* Notices and the quantity field. */
body.bbu-v2 .woocommerce-message,
body.bbu-v2 .woocommerce-info,
body.bbu-v2 .woocommerce-error,
body.bbu-v2 .woocommerce-noreviews,
body.bbu-v2 .woocommerce p.no-comments {
	color: var(--ink);
	background-color: var(--cloud);
	border-top-color: var(--cta);
}

body.bbu-v2 .woocommerce-message::before,
body.bbu-v2 .woocommerce-info::before {
	color: var(--cta);
}

body.bbu-v2 .woocommerce-error {
	border-top-color: #cc1818;
}

body.bbu-v2 .woocommerce .quantity input.qty {
	min-height: 52px;
	padding: 13px 8px;
	color: var(--text);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 10px;
}

/* Cart, checkout and totals surfaces. */
body.bbu-v2 .woocommerce table.shop_table,
body.bbu-v2 .woocommerce-page table.shop_table {
	color: var(--text);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 16px;
	border-collapse: separate;
}

body.bbu-v2 .woocommerce table.shop_table th,
body.bbu-v2 .woocommerce table.shop_table td {
	border-top: 1px solid var(--line);
}

body.bbu-v2 .woocommerce table.shop_table thead th {
	color: var(--ink);
	font-weight: 700;
}

body.bbu-v2 .woocommerce .cart_totals h2,
body.bbu-v2 .woocommerce .woocommerce-checkout-review-order h3,
body.bbu-v2 .woocommerce #order_review_heading {
	color: var(--ink);
}

body.bbu-v2 .woocommerce ul#shipping_method li,
body.bbu-v2 .woocommerce .woocommerce-shipping-totals {
	color: var(--ink);
}

/* ------------------------------------------- the storefront's own layout --
   A table on this site arrives 1000px wide whatever the window is, because the
   shared homepage stylesheet - which every page loads - carries a bare
   `table { min-width: 1000px }`. That is a reasonable rule for the homepage's
   own wide comparison tables and a wrong one for a plugin's tables, and it is
   what put the workbook pages at 1519px inside a 1440px window and 1023px
   inside a 390px one: the pack-size chooser, the cart rows and the order
   totals were all laid out 1000px wide and the reader saw the left third.

   Clipping the overflow would have hidden the symptom and kept the layout
   broken, so instead the constraint is lifted where it does not belong and the
   plugin's own responsive rules are allowed to run. Those rules are already
   there and already correct: WooCommerce's own small-screen stylesheet breaks
   the cart and the totals out of their table columns and into label/value
   stacks below 768px. They had never had a chance to apply to a table that was
   being held at 1000px.

   The rest is what a 350px column needs once the table is allowed to be 350px
   wide: the pack-size chooser loses its fixed 220px control width so the
   select can fill the column, and below 600px its label and control stack
   instead of sitting side by side.
   ------------------------------------------------------------------------ */

body.bbu-v2 .woocommerce table,
body.bbu-v2 .woocommerce-page table {
	min-width: 0;
}

body.bbu-v2 .woocommerce table.variations {
	width: 100%;
	margin: 0 0 16px;
	border: 0;
	background: transparent;
}

body.bbu-v2 .woocommerce table.variations select {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

body.bbu-v2 .woocommerce table.variations .reset_variations {
	display: inline-block;
	margin-top: 6px;
	color: var(--cta);
}

body.bbu-v2 .woocommerce .woocommerce-variation-price {
	margin: 0 0 14px;
}

body.bbu-v2 .woocommerce .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

body.bbu-v2 .woocommerce .woocommerce-variation-add-to-cart .quantity input.qty {
	width: 5em;
	min-width: 0;
}

body.bbu-v2 .woocommerce .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 600px) {
	body.bbu-v2 .woocommerce table.variations th.label,
	body.bbu-v2 .woocommerce table.variations td.value {
		display: block;
		width: auto;
		padding: 0 0 8px;
		text-align: left;
	}

	body.bbu-v2 .woocommerce table.variations th.label {
		padding-bottom: 4px;
	}

	body.bbu-v2 .woocommerce .woocommerce-variation-add-to-cart,
	body.bbu-v2 .woocommerce .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		width: 100%;
	}

	body.bbu-v2 .woocommerce .woocommerce-variation-add-to-cart .quantity {
		width: 100%;
	}
}

/* ------------------------------------------------- campaign testimonial band
   The source campaign pages put their three testimonials in a three-column
   grid inside the "Real Voices" band: 24px gutters over a 960px measure, and a
   single column below 800px. Those numbers are the source's own; a portrait
   phone testimonial is 9:16 and a landscape family testimonial is 16:9, and the
   ratio is carried per video because the two families differ. */
.vid-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 960px;
	margin: 44px auto 0;
}

@media (max-width: 800px) {
	.vid-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
	}
}

.vid-grid .vid-item {
	margin: 0;
}

.vid-grid video {
	display: block;
	width: 100%;
	border-radius: 20px;
	background: #113d5d;
	object-fit: cover;
	box-shadow: 0 8px 24px rgba(17, 61, 93, 0.12);
	border: 0;
}

.vid-grid .vid-portrait video { aspect-ratio: 9 / 16; }
.vid-grid .vid-landscape video { aspect-ratio: 16 / 9; }

.vid-grid figcaption {
	margin-top: 12px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--ink, #113d5d);
	opacity: 0.85;
}

/* ------------------------------------------------------- section bars ----
 * The approved design's second header row (`.section-bar`, styled by the source stylesheet in home.css) sits
 * UNDER the main bar: a label, the audience's own links and its call to action. This file adds only what a
 * server-rendered page needs beyond the source rules: the landing headers (course, mentorship) have no
 * hamburger, so their bar stays visible on a phone and scrolls sideways instead of being hidden, and the
 * mobile accordions keep their own class (`gh-mobile-acc`) so the design's `gh-mobile-group` rules apply only
 * to the section group.
 */
.section-bar-inner > .button {
	color: var(--white);
}

/* Six links and a button can be wider than a tablet's content width: wrap onto a second line rather than run off the edge. */
@media (min-width: 761px) {
	.section-bar-inner {
		flex-wrap: wrap;
	}
}

@media (max-width: 760px) {
	.section-bar.section-bar-landing {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.section-bar-landing .section-bar-inner {
		width: max-content;
		min-width: calc(100% - 40px);
		gap: 4px;
	}

	.section-bar-landing .section-bar-label {
		margin-right: 8px;
		font-size: 17px;
	}
}

.gh-mobile .gh-mobile-group .button {
	color: var(--white);
}

/* ------------------------------------------- section dropdowns (SST-355) ----
 * The families row carries two dropdowns (Classes, Family types). Each is a real button; site.js owns aria-expanded and the
 * panel's hidden state, so nothing here depends on hover. The panel opens under its own button, wide enough for the
 * English and Spanish class groups side by side, and scrolls inside itself rather than running off a short screen.
 */
.sb-drop {
	position: relative;
	display: flex;
	align-items: center;
}

.sb-drop-toggle,
.sb-drop-link {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 16px;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.sb-drop-toggle:hover span,
.sb-drop-link:hover {
	text-decoration: underline;
}

.sb-drop-caret {
	padding: 0 8px 0 4px;
}

.sb-caret {
	transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
}

.sb-drop.is-open .sb-caret {
	transform: rotate(180deg);
}

.sb-drop.is-open > .sb-drop-toggle:not(.sb-drop-caret) {
	background: var(--white);
}

.sb-drop.has-current > .sb-drop-toggle span,
.section-bar-inner a[aria-current=page] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.sb-drop-toggle:focus-visible,
.sb-drop-link:focus-visible,
.sb-drop-panel a:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}

.sb-drop-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 60;
	display: flex;
	align-items: flex-start;
	gap: 8px 28px;
	min-width: 280px;
	max-height: min(72vh, 640px);
	overflow-y: auto;
	padding: 12px 14px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(24, 53, 76, .12);
}

.sb-drop-panel[hidden] {
	display: none;
}

.sb-drop.align-right .sb-drop-panel {
	left: auto;
	right: 0;
}

.sb-drop-group {
	min-width: 250px;
}

.sb-drop-group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-drop-heading {
	margin: 6px 12px 4px;
	font-family: 'League Spartan', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
}

.section-bar-inner .sb-drop-panel a:not(.button) {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--text);
	font-size: 16px;
	line-height: 1.3;
	white-space: normal;
}

.section-bar-inner .sb-drop-panel a:not(.button):hover,
.section-bar-inner .sb-drop-panel a[aria-current=page] {
	background: var(--cloud);
	color: var(--ink);
	text-decoration: none;
}

.section-bar-inner .sb-drop-panel a[aria-current=page] {
	font-weight: 600;
}

/* Under 900px the panel is one column wide enough for the longest class name, so two groups stack. */
@media (max-width: 900px) {
	.sb-drop-panel {
		flex-direction: column;
		min-width: 270px;
		max-width: calc(100vw - 32px);
	}
}

/* The landing headers (course, mentorship) have no hamburger, so on a phone their row stays visible. A row with dropdowns
   wraps instead of scrolling sideways, and an open panel sits in the row's own flow, so nothing can be clipped. */
@media (max-width: 760px) {
	.section-bar.section-bar-landing.section-bar-has-drops {
		overflow: visible;
	}

	.section-bar-landing.section-bar-has-drops .section-bar-inner {
		width: auto;
		min-width: 0;
		flex-wrap: wrap;
		padding-block: 8px;
	}

	.section-bar-landing.section-bar-has-drops .sb-drop {
		flex-wrap: wrap;
	}

	.section-bar-landing.section-bar-has-drops .sb-drop.is-open {
		flex: 1 0 100%;
	}

	.section-bar-landing.section-bar-has-drops .sb-drop-panel {
		position: static;
		flex: 1 0 100%;
		max-width: none;
		max-height: none;
		margin: 2px 0 8px;
		box-shadow: none;
	}

	.section-bar-landing.section-bar-has-drops .section-bar-inner .button {
		margin-left: 0;
	}
}

/* The same two dropdowns inside the phone menu are native disclosures. */
.gh-mobile-sub {
	border-bottom: 1px solid var(--line);
}

.gh-mobile .gh-mobile-sub summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	padding: 0 12px;
	border-radius: 8px;
	color: var(--ink);
	font-size: 18px;
	cursor: pointer;
	list-style: none;
}

.gh-mobile-sub summary::-webkit-details-marker {
	display: none;
}

.gh-mobile-sub[open] .gh-mobile-icon path:last-child {
	display: none;
}

.gh-mobile .gh-mobile-sub a {
	min-height: 48px;
	padding-left: 28px;
	white-space: normal;
}

.gh-mobile .gh-mobile-sub .gh-mobile-parent {
	font-weight: 600;
	color: var(--ink);
}

.gh-mobile-sub-heading {
	margin: 12px 12px 2px 28px;
	font-family: 'League Spartan', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
}

.gh-mobile-sub summary:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}

/* ----------------------------------------------------- composed pages ----
 * A composed page is a legacy page rebuilt from its source layout into the V2
 * composition: full-width sections (alternating white and cloud), column rows,
 * step rows, checklists, FAQ toggles, program cards, the testimonial video and
 * the three-row review wall. The markup is plain HTML in the page body (see
 * build/pack/compose.py), so every word and every button stays editable in the
 * ordinary editor. Nothing here is page specific.
 */
.composed {
	display: block;
}

.cx-section {
	padding-block: 72px;
}

.cx-section.tone-cloud {
	background: var(--cloud);
}

.cx-section.cx-intro {
	padding-block: 24px 56px;
}

.cx-eyebrow {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--slate);
}

.cx-section h2 {
	margin: 0 0 20px;
	font-size: clamp(30px, 3vw, 44px);
}

.cx-section h3 {
	margin: 0 0 14px;
	font-size: clamp(24px, 2.2vw, 32px);
}

/* The opening section is a short run of headline lines, not a stack of section titles. */
.cx-intro h2 {
	margin-bottom: 12px;
	font-size: clamp(28px, 3vw, 40px);
}

.cx-intro .cx-cols + .cx-cols {
	margin-top: 8px;
}

/* Centred opening (page.php marks the hero above it with `.page-hero-centered`): the label and the opening questions share the title's axis and
 * 900px width; the cards below keep the full container and their own left-aligned text. */
.cx-section.cx-intro.cx-intro-centered {
	padding-top: 0;
}

.cx-intro-centered .cx-eyebrow,
.cx-intro-centered .cx-c1 > .cx-col {
	text-align: center;
}

/* The label is a `.cx-section p` (max-width 68ch, left-anchored in the wrap): it takes the same 900px block, centred, as the questions, so
 * its text shares their axis rather than centring inside a narrower left-anchored box. */
.cx-intro-centered .cx-eyebrow,
.cx-intro-centered .cx-c1 > .cx-col {
	max-width: 900px;
	margin-inline: auto;
}

.cx-section h4,
.cx-section h5 {
	margin: 0 0 10px;
}

.cx-section p,
.cx-section li {
	font-size: 18px;
	line-height: 1.55;
}

.cx-section p {
	max-width: 68ch;
	margin: 0 0 16px;
}

.cx-section a:not(.button) {
	color: var(--ink);
	text-underline-offset: 4px;
}

.cx-cols {
	display: grid;
	gap: 40px;
	align-items: start;
}

.cx-cols + .cx-cols,
.cx-cols + .cx-steps,
.cx-steps + .cx-cols {
	margin-top: 32px;
}

.cx-c1 { grid-template-columns: minmax(0, 1fr); }
.cx-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cx-c13-23 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.cx-c23-13 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cx-c35-25 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.cx-c25-35 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.cx-c14-34 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.cx-c34-14 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }

.cx-col > :last-child {
	margin-bottom: 0;
}

.cx-img {
	margin: 0 0 20px;
}

.cx-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.cx-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
}

/* A picture in a single column is not stretched past its own size. */
.cx-c1 > .cx-col > .cx-img img {
	width: auto;
	max-width: 100%;
	max-height: 560px;
}

.cx-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 0;
}

.cx-card .cx-actions {
	margin-top: 20px;
}

.cx-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.cx-steps li {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cx-step-no {
	margin-bottom: 14px;
	font-family: 'League Spartan', sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.1;
	color: var(--ink);
}

.cx-steps .cx-img {
	margin-bottom: 16px;
}

.cx-steps .cx-img img {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 50%;
}

.cx-step-body p {
	margin: 0 auto;
	max-width: 24ch;
}

.cx-checks {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.cx-checks li {
	position: relative;
	padding: 8px 0 8px 38px;
}

.cx-checks li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 16px;
	width: 18px;
	height: 9px;
	border-left: 3px solid var(--cta);
	border-bottom: 3px solid var(--cta);
	transform: rotate(-45deg);
}

.cx-toggle {
	margin: 0 0 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--white);
}

.cx-toggle summary {
	position: relative;
	padding: 18px 60px 18px 22px;
	cursor: pointer;
	list-style: none;
	font-family: 'League Spartan', sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.25;
	color: var(--ink);
}

.cx-toggle summary::-webkit-details-marker {
	display: none;
}

.cx-toggle summary::after {
	content: "+";
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 28px;
	line-height: 1;
}

.cx-toggle[open] summary::after {
	content: "\2013";
}

.cx-toggle summary:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
	border-radius: 10px;
}

.cx-toggle-body {
	padding: 0 22px 20px;
}

.cx-toggle-body > :last-child {
	margin-bottom: 0;
}

.cx-video {
	max-width: 880px;
	margin: 0 auto 36px;
}

.cx-video video {
	display: block;
	width: 100%;
	border-radius: 16px;
	background: #000;
}

.cx-reviews {
	overflow: hidden;
	background: linear-gradient(180deg, var(--cloud), var(--white));
	border-block: 1px solid var(--line);
}

.cx-reviews .lp-review-wall {
	margin-top: 28px;
}

.cx-blurb {
	text-align: left;
}

.cx-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The block as stored, before the wall replaces it (editor view, no theme code). */
.bbu-reviews {
	display: grid;
	gap: 16px;
}

.bbu-review {
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--white);
}

@media (max-width: 900px) {
	.cx-c2,
	.cx-c3,
	.cx-c13-23,
	.cx-c23-13,
	.cx-c35-25,
	.cx-c25-35,
	.cx-c14-34,
	.cx-c34-14 {
		grid-template-columns: minmax(0, 1fr);
	}

	.cx-c4,
	.cx-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	/* SST-783 (Start here r25: the phone view had "a large gap after the affordability text"): two section gaps meet there, so the gap is smaller. */
	.cx-section {
		padding-block: 36px;
	}

	.cx-section.cx-intro {
		padding-block: 16px 40px;
	}

	.cx-cols {
		gap: 28px;
	}

	.cx-c4,
	.cx-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.cx-card {
		padding: 20px;
	}

	.cx-section p,
	.cx-section li {
		font-size: 17px;
	}

	.cx-actions .button {
		width: 100%;
	}
}

/* The page's own feature claims (self-paced, evidence-based, ...): chips, not reviews. */
.cx-features {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cx-features li {
	position: relative;
	padding: 10px 18px 10px 40px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	font-family: 'League Spartan', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	color: var(--ink);
}

.cx-features li::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 14px;
	width: 14px;
	height: 7px;
	border-left: 3px solid var(--cta);
	border-bottom: 3px solid var(--cta);
	transform: rotate(-45deg);
}

.cx-section.cx-strip {
	padding-block: 28px;
}

/* The embedded order form (a workbook page's `[bbu_workbook_order]` block). It carries the
   `woocommerce` class itself (inc/workbook-order.php), so every storefront containment rule applies;
   these are the same rules stated for the card that holds it, so the form cannot spill out of the card
   at 1440 or 390 even if the wrapper class is ever lost: no 1000px table minimum, the pack-size
   chooser fills the card, and the card never exceeds its column. */
.bbu-order {
	box-sizing: border-box;
	max-width: min(640px, 100%);
}

.bbu-order-form table {
	min-width: 0;
	width: 100%;
	border: 0;
	background: transparent;
}

.bbu-order-form select,
.bbu-order-form input.qty {
	max-width: 100%;
	min-width: 0;
}

.bbu-order-form table.variations select {
	width: 100%;
}

@media (max-width: 600px) {
	.bbu-order {
		padding: 22px 18px;
	}

	.bbu-order-form table.variations th.label,
	.bbu-order-form table.variations td.value {
		display: block;
		width: auto;
		padding: 0 0 8px;
		text-align: left;
	}
}

/* A plain status note on a page whose advertised onward action no longer exists (an offer whose enrolment page
   answers 404): the offer's facts stay, the note says what is unavailable and how to reach the team. */
.cx-section.cx-notice-band {
	padding-block: 20px;
}

.cx-notice {
	margin: 0;
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-left: 4px solid var(--cta);
	border-radius: 6px;
	background: var(--cloud);
	line-height: 1.55;
}

.cx-notice a {
	text-decoration: underline;
}

/* Source article layout (R2-V9). The original posts carry their own inline stylesheet, and at 1100px and wider it
   makes the "In this article" panel `position: sticky`. Inside the article box that follows the reader down the whole
   article and lies over the paragraphs, headings and the closing training action. The panel is ordinary article
   content here: it sits in the flow above the text at every width, its long link texts wrap, and a link that jumps
   to a heading leaves the heading readable with a visible focus ring. (Higher specificity than the inline rule.) */
.prose .cfd-post-box .cfd-toc {
	position: static !important;
	top: auto !important;
	max-width: 100%;
	box-sizing: border-box;
}

.prose .cfd-toc a {
	overflow-wrap: anywhere;
}

.prose .cfd-toc a:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

.prose .cfd-post-box [id] {
	scroll-margin-top: 24px;
}

/* A campaign page's FAQ (R2-V5): the source's own <details>/<summary> questions, native controls. */
.faq-accordion {
	margin: 0 0 28px;
}

.faq-accordion .cx-toggle summary {
	font-size: 18px;
}

/* Outline buttons inside a reading column (R3-V12). `.prose a.button` paints a call-to-action white on blue; an
   outline button has a white face, so the same rule made its label white on white (the qualification receipts on
   the agency campaign page, and any outline CTA written into a page or post). The outline button keeps its ink
   label and its own hover colour; the primary button above is unchanged. */
.prose a.button.button-outline {
	color: var(--ink);
}

.prose a.button.button-outline:hover,
.prose a.button.button-outline:focus-visible {
	color: var(--ink);
	background: var(--cloud);
}

/* Archive headings (R3-V10): a long word in a plain-text archive title wraps instead of widening the phone viewport. */
.page-hero h1 {
	overflow-wrap: anywhere;
}

/* ------------------------------------------------ audience landing pages ----
 * The design's class filter, class cards and professional-offer selector are buttons in the source (React
 * state). Server side they are links, so they carry the same look: the rules below repeat the source's
 * `button` rules for the link forms. Everything else on these pages is the source stylesheet (home.css).
 */
.class-filter a {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line);
	background: white;
	border-radius: 30px;
	min-height: 46px;
	padding: 9px 22px;
	font-size: 17px;
	color: var(--text);
	text-decoration: none;
}

.class-filter a.active {
	border-color: var(--ink);
	background: var(--ink);
	color: white;
}

.class-filter a:hover {
	border-color: var(--ink);
}

.offer-selector a {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 10px 18px;
	border: 1px solid var(--line);
	background: white;
	border-radius: 7px;
	font-size: 16px;
	text-align: left;
	color: var(--text);
	text-decoration: none;
}

.offer-selector a.selected {
	border-color: var(--ink);
	background: var(--ink);
	color: white;
}

.offer-selector a:hover {
	border-color: var(--ink);
}

.src-page .waitlist-form label {
	display: block;
}

.src-page .hub-retained .prose {
	max-width: 880px;
}

/* Bottom class guidance (#more) on /families/, /doulas/ and /agencies/. The retained guidance sits at the page's own
 * width as a ruled grid of topic groups (two columns on desktop, one on tablet and phone), followed by the two link
 * lists side by side. The .prose rule above stays for a body an editor has reshaped. */
.src-page .hub-retained .section-heading {
	margin-bottom: 36px;
}

.guide-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 72px;
}

.guide-item {
	padding-block: 28px 36px;
	border-top: 1px solid var(--line);
}

.guide-item h3 {
	font-size: clamp(25px, 2.3vw, 30px);
	margin-bottom: 14px;
}

.guide-item p {
	max-width: 62ch;
	margin: 0;
}

.guide-item p + p {
	margin-top: 14px;
}

.guide-paths {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin-top: 20px;
}

.guide-path {
	padding: 32px 36px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}

.guide-path h3 {
	font-size: clamp(25px, 2.3vw, 30px);
	margin-bottom: 10px;
}

.guide-path .hub-list li:last-child {
	border-bottom: 0;
}

.guide-path .hub-list a {
	flex-wrap: wrap;
	row-gap: 2px;
}

.guide-path .hub-list a > span:first-child {
	flex: 1 1 auto;
	color: var(--ink);
	font-weight: 600;
}

.guide-path .hub-list a:hover > span:first-child {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.guide-path .hub-list-detail a {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-block: 16px;
}

@media (max-width: 900px) {
	.guide-grid,
	.guide-paths {
		grid-template-columns: minmax(0, 1fr);
	}

	.guide-paths {
		gap: 20px;
	}
}

@media (max-width: 760px) {
	.src-page .hub-retained .section-heading {
		margin-bottom: 24px;
	}

	.guide-item {
		padding-block: 22px 26px;
	}

	.guide-path {
		padding: 24px 20px 10px;
	}
}

@media (max-width: 760px) {
	.class-filter a {
		padding: 9px 13px;
		font-size: 15px;
	}

	.offer-selector a {
		font-size: 15px;
		padding: 10px 12px;
		flex: 1 1 40%;
	}
}

/* ----------------------------------------------------- footer resources ----
 * The fourth footer column (Resources) from the shared native menu: the grid gains a column on desktop and stays the
 * source's single column on phones; a long list flows into two columns inside its own cell.
 */
@media (min-width: 761px) {
	.footer-grid.footer-grid-resources {
		grid-template-columns: 1.1fr .9fr 1.5fr 1.1fr;
		gap: 40px;
		align-items: start;
	}

	.footer-grid-resources > div:last-child {
		align-self: start;
	}

	.footer-resources nav {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 28px;
	}
}

@media (min-width: 761px) and (max-width: 1050px) {
	.footer-grid.footer-grid-resources {
		grid-template-columns: 1fr 1fr;
	}

	.footer-grid-resources > div:first-child {
		grid-column: 1 / -1;
	}
}


/* ------------------------------------- contextual CTA, isolated from commerce ----
 * The section bar's call to action is the design's primary button (--cta #3975b8, white text) at the right of the row. On the
 * WooCommerce pages (workbook products, shop, cart, checkout) the body carries `woocommerce`, and WooCommerce's own
 * `.woocommerce a.button` rules (grey, bold, 3px) beat the one-class source rule, which put a grey button next to the
 * links. These rules restate the source's button + `.section-bar-inner .button` + `.gh-mobile a.button` declarations at a
 * specificity above every WooCommerce/storefront button rule, and touch nothing else: the storefront's own buttons keep
 * the storefront styling.
 */
body.bbu-v2 .section-bar .section-bar-inner a.button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-left: auto;
	min-height: 44px;
	padding: 9px 18px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--cta);
	color: var(--white);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

body.bbu-v2 .section-bar .section-bar-inner a.button.button:hover,
body.bbu-v2 .section-bar .section-bar-inner a.button.button:focus-visible {
	background: var(--cta-hover);
	color: var(--white);
}

body.bbu-v2 .gh-mobile .gh-mobile-group a.button.button {
	justify-content: center;
	margin-top: 12px;
	padding: 13px 25px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--cta);
	color: var(--white);
	font-weight: 400;
	line-height: 1.25;
	text-decoration: none;
}

body.bbu-v2 .gh-mobile .gh-mobile-group a.button.button:hover {
	background: var(--cta-hover);
	color: var(--white);
}

/* ----------------------------------------- course and audience pages (SST-355 course-audience) ----
 * Audience pages under /families/, /doulas/ and /agencies/, the three families routes on /families/ and the doula
 * paths on /doulas/, and the "every program" lists. They reuse the approved design's own section classes (collection-hero,
 * section-heading, plain-benefits, contact-panel, educator, questions-layout); only what that design never needed is
 * defined here. Tokens only (League Spartan headings, --ink, --line, --cloud, 12-16px radius).
 */
.src-page .audience-hero { padding-top: 12px; }
.src-page .audience-kicker { margin: 0 auto 14px; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.src-page .audience-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-bottom: 4px; }
.src-page .audience-hero .hero-actions .button { margin: 0; }

.src-page .fit-section { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; padding-block: 56px; }
.src-page .fit-section h2 { margin-bottom: 16px; }
.src-page .fit-section .lede { max-width: 52ch; margin: 0; font-size: 20px; }
.src-page .fit-aside { padding: 30px 34px; background: var(--cloud); border-radius: 16px; }
.src-page .fit-aside h3 { margin: 0 0 12px; font-size: 26px; }
.src-page .fit-aside p { margin: 0 0 14px; }

.src-page .take-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.src-page .take-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 28px 30px; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 12px; background: var(--white); }
.src-page .take-card h3 { margin: 0; font-size: 26px; }
.src-page .take-card h3 a { text-decoration: none; color: var(--ink); }
.src-page .take-card h3 a:hover { text-decoration: underline; }
.src-page .take-meta { margin: 0 0 6px; font-size: 16px; color: var(--slate); }
.src-page .take-card p { margin: 0 0 8px; }
.src-page .take-card .text-link { margin-top: auto; }
.src-page .also-note { margin-top: 20px; }

.src-page .route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.src-page .route-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.src-page .route-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.src-page .route-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px 30px; border-radius: 16px; background: var(--cloud); scroll-margin-top: 150px; }
.src-page .route-card h2, .src-page .route-card h3 { margin: 0; font-size: 28px; }
.src-page .route-card p { margin: 0; }
/* The audience entries on the hub and the pregnancy overview link their heading as well as the button: same look as the class cards. */
.src-page .route-card h2 a, .src-page .route-card h3 a { text-decoration: none; color: var(--ink); }
.src-page .route-card h2 a:hover, .src-page .route-card h3 a:hover { text-decoration: underline; }
.src-page .route-kicker { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.src-page .route-card .text-link { margin-top: auto; }
.src-page .route-links { list-style: none; margin: 10px 0 14px; padding: 0; width: 100%; border-top: 1px solid var(--line); }
.src-page .route-links li { border-bottom: 1px solid var(--line); }
.src-page .route-links a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; text-decoration: none; color: var(--ink); }
.src-page .route-links a:hover span:first-child { text-decoration: underline; }
.src-page .route-links .hint { font-size: 15px; color: var(--slate); text-align: right; }
.src-page .route-detail { padding-block: 0 24px; }
.src-page .route-wide { gap: 12px; padding: 34px 38px; }
.src-page .route-wide p { max-width: 70ch; }
.src-page .route-wide .route-links { max-width: 760px; }

/* SST-1420, /find-a-certified-doula/: the lookup is the hub's own route cards. Two forms are a route-grid-2 pair of cards (equal height, the
 * button pinned to the bottom of each); a result or notice is one route-wide card above them; the records date sits centered underneath.
 * The plugin ships no stylesheet of its own. */
.src-page .bbu-cert-lookup { display: grid; gap: 24px; text-align: left; }
/* The lookup sits inside the hero, under the subtitle: the same 30px (phone 44px) the /doulas/ course cards sit below their subtitle. */
.src-page .audience-hero > .bbu-cert-lookup { margin-top: 30px; }
@media (max-width: 760px) {
	.src-page .audience-hero > .bbu-cert-lookup { margin-top: 22px; }
}
.src-page .bbu-cert-lookup .route-card form { display: flex; flex: 1; flex-direction: column; width: 100%; max-width: none; }
.src-page .bbu-cert-lookup .route-card .form-submit { margin: auto 0 0; padding-top: 4px; }
.src-page .bbu-cert-lookup .route-card .bbu-form .field { margin-bottom: 16px; }
.src-page .bbu-cert-lookup .route-wide p { max-width: 70ch; }
.src-page .bbu-cert-lookup .route-card form.cert-recheck { width: auto; flex: none; margin-top: 6px; }
.src-page .cert-facts { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 8px 20px; width: 100%; margin: 8px 0; }
.src-page .cert-facts dt { color: var(--slate); }
.src-page .cert-facts dd { margin: 0; color: var(--ink); font-weight: 600; }
.src-page .cert-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.src-page .cert-list { margin: 0; padding-left: 20px; }
.src-page #questions h2 { margin: 0; }
.src-page .cert-note { margin: 0 auto; text-align: center; font-size: 16px; color: var(--slate); }
@media (max-width: 760px) {
	.src-page .cert-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.src-page .cert-facts dd { margin-bottom: 10px; }
}

.src-page .step-list { list-style: none; counter-reset: step; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.src-page .step-list li { counter-increment: step; padding-top: 18px; border-top: 2px solid var(--ink); }
.src-page .step-list li:before { content: counter(step); display: block; margin-bottom: 8px; font-family: inherit; font-size: 15px; color: var(--slate); }
.src-page .step-list h3 { margin: 0 0 8px; font-size: 24px; }
.src-page .step-list p { margin: 0; }
.src-page .plain-columns { columns: 2; column-gap: 48px; }
.src-page .plain-columns li { break-inside: avoid; }
.src-page .agency-topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.src-page .agency-topic-grid article { padding: 24px 26px; background: var(--cloud); border-radius: 12px; }
.src-page .agency-topic-grid h3 { margin: 0 0 8px; font-size: 24px; }
.src-page .agency-topic-grid p { margin: 0; }
.src-page .other-paths { padding-block: 40px 8px; }
.src-page .other-paths h2 { margin-bottom: 18px; }
.src-page .hub-programs .guide-paths { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.src-page .agency-fit article .text-link { margin-top: 8px; }
.src-page .class-page-link { margin-left: 18px; }

@media (max-width: 1100px) {
	.src-page .route-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.src-page .fit-section { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 36px; }
	.src-page .route-grid, .src-page .route-grid-2, .src-page .route-grid-4 { grid-template-columns: minmax(0, 1fr); }
	.src-page .plain-columns { columns: 1; }
}

@media (max-width: 760px) {
	.src-page .fit-aside { padding: 24px 22px; }
	.src-page .take-card { padding: 24px 22px; }
	.src-page .route-card, .src-page .route-wide { padding: 24px 22px; }
	.src-page .take-grid { grid-template-columns: minmax(0, 1fr); }
	.src-page .class-page-link { margin-left: 0; }
}

/* Professional course pages list the source's learning points as titles only; a point with no body renders no empty paragraph. */
.lp-outcome-list li p:empty { display: none; }

/* ------------------------------ family audience headers and the All-Access Pass (SST-355) ----
 * A header with a photograph (first-time, second-time, adoption and surrogacy, and the pass page) is the same hero in two columns:
 * the heading, lede and actions on the left, one photograph on the right, the educator note full width beneath. The photograph is a
 * real BBU file, cropped by `object-fit: cover` to a 4:3 frame; the `focus-*` class on the figure keeps the faces in the frame.
 * Under 900px the photograph sits under the actions at 3:2 and the educator note follows it.
 */
.src-page .audience-hero.has-photo {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 20px 56px;
	align-items: center;
	text-align: left;
	padding-top: 24px;
	padding-bottom: 28px;
}

.src-page .audience-hero.has-photo > .hero-heading {
	order: 0;
	max-width: none;
	margin: 0;
}

.src-page .audience-hero.has-photo .hero-heading > p {
	max-width: 56ch;
	margin-inline: 0;
}

.src-page .audience-hero.has-photo .audience-kicker {
	margin-inline: 0;
}

.src-page .audience-hero.has-photo .hero-actions {
	justify-content: flex-start;
}

.src-page .audience-hero.has-photo > .audience-photo {
	order: 1;
	margin: 0;
}

.src-page .audience-hero.has-photo > .teaching-proof {
	order: 2;
	grid-column: 1 / -1;
	max-width: none;
	margin: 12px 0 0;
}

/* No audience page prints a return link ("For families", "For doulas", "For agencies", "Clases en español") above its header (the main bar and
 * the section row already name it), so the header is the first thing under the section row and takes the gap that link used to make. */
.src-page > .audience-hero:first-child {
	padding-top: 40px;
}

@media (max-width: 760px) {
	.src-page > .audience-hero:first-child {
		padding-top: 28px;
	}
}

.src-page .audience-photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--cloud);
}

.src-page .audience-photo .photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.src-page .audience-photo.focus-first .photo { object-position: 50% 48%; }
.src-page .audience-photo.focus-second .photo { object-position: 50% 22%; }
.src-page .audience-photo.focus-adoption .photo { object-position: 50% 42%; }
.src-page .audience-photo.focus-pass .photo { object-position: 50% 50%; }

.src-page .pass-hero-note {
	font-size: 17px;
	color: var(--slate);
}

.src-page .pass-hero .hero-heading > p strong {
	color: var(--ink);
}

/* The five classes: one ruled row each, a round photograph, the source's own description, the class's own price. */
.src-page .pass-class-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.src-page .pass-class {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr) auto;
	gap: 20px 32px;
	align-items: center;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
}

.src-page .pass-class-photo {
	display: block;
	width: 132px;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	background: var(--cloud);
}

.src-page .pass-class-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.src-page .pass-class-copy h3 {
	margin: 0 0 4px;
	font-size: 26px;
}

.src-page .pass-class-copy h3 a {
	color: var(--ink);
	text-decoration: none;
}

.src-page .pass-class-copy h3 a:hover {
	text-decoration: underline;
}

.src-page .pass-class-copy p {
	margin: 0 0 8px;
	max-width: 62ch;
}

.src-page .pass-class-price {
	margin: 0;
	min-width: 120px;
	text-align: right;
	font-size: 15px;
	color: var(--slate);
}

.src-page .pass-class-price strong {
	display: block;
	font-family: 'League Spartan', sans-serif;
	font-size: 26px;
	font-weight: 600;
	color: var(--ink);
}

.src-page .pass-price .button {
	margin-top: 8px;
}

/* B1 (browser review 2026-10-07): the shared homepage stylesheet, which every page loads, carries a bare `table { min-width: 1000px }`. The comparison
   inherited it, so the table was 1000px wide in a 390px window and pushed the page to 1020 / 1024 / 1205px at 390 / 820 / 1024, with the price column off
   screen. The pass table is a two-column list of a class and its price: it takes the width of its column and its text wraps. Nothing is clipped or hidden. */
.src-page .pass-table {
	width: 100%;
	min-width: 0;
	table-layout: auto;
	border-collapse: collapse;
	font-size: 17px;
}

/* A grid column may not be wider than the space it is given because of its content (a grid item's automatic minimum is its content's width). */
.src-page .pass-price > *,
.src-page .pass-included,
.src-page .pass-class-copy {
	min-width: 0;
}

.src-page .pass-table th a {
	overflow-wrap: anywhere;
}

.src-page .pass-table caption {
	padding-bottom: 10px;
	text-align: left;
	font-family: 'League Spartan', sans-serif;
	font-size: 22px;
	font-weight: 600;
	color: var(--ink);
}

.src-page .pass-table th,
.src-page .pass-table td {
	padding: 12px 8px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-weight: 400;
	vertical-align: baseline;
}

.src-page .pass-table thead th {
	font-size: 15px;
	color: var(--slate);
}

.src-page .pass-table td,
.src-page .pass-table thead th:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.src-page .pass-table th a {
	color: var(--ink);
}

.src-page .pass-table tfoot th,
.src-page .pass-table tfoot td {
	font-weight: 600;
	color: var(--ink);
}

.src-page .pass-table .pass-table-pass th,
.src-page .pass-table .pass-table-pass td {
	background: var(--cloud);
	border-bottom: 0;
}

.src-page .pass-workbooks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 28px;
}

.src-page .pass-workbook {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
	object-position: top;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--white);
}

@media (max-width: 900px) {
	.src-page .audience-hero.has-photo {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.src-page .audience-hero.has-photo > .audience-photo {
		aspect-ratio: 3 / 2;
	}

	.src-page .pass-class {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 16px 20px;
	}

	.src-page .pass-class-photo {
		width: 96px;
	}

	.src-page .pass-class-price {
		grid-column: 2;
		min-width: 0;
		text-align: left;
	}

	.src-page .pass-class-price strong {
		display: inline;
		margin-left: 6px;
		font-size: 22px;
	}
}

@media (max-width: 560px) {
	.src-page .pass-table {
		font-size: 16px;
	}

	.src-page .pass-table th,
	.src-page .pass-table td {
		padding: 10px 6px;
	}

	.src-page .pass-table caption {
		font-size: 20px;
	}

	.src-page .pass-class {
		grid-template-columns: 72px minmax(0, 1fr);
	}

	.src-page .pass-class-photo {
		width: 72px;
	}

	.src-page .pass-workbooks {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ------------------------------ audience events pages (SST-355) ----
 * /families/events/, /doulas/events/, /agencies/events/: the header is the same two-column photograph hero as the other audience pages; the
 * listing is a column of event rows, each with a date block, the title, the real date and time, a status pill and its actions. Status
 * (Upcoming / Happening now / Past) is decided by inc/events.php when the page is shown. Tokens only; no accent stripes.
 */
.src-page .audience-photo.focus-events-families .photo { object-position: 86% 50%; }
.src-page .audience-photo.focus-events-doulas .photo { object-position: 50% 50%; }
.src-page .audience-photo.focus-events-agencies .photo { object-position: 50% 36%; }

.src-page .events-section { padding-block: 44px 8px; }
.src-page .events-section .section-heading { margin-bottom: 22px; }
.src-page .event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.src-page .event-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px 32px; align-items: start; padding: 28px 32px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.src-page .event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px 8px 12px; background: var(--cloud); border-radius: 12px; color: var(--ink); text-align: center; }
.src-page .event-month { font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.src-page .event-day { font-size: 46px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.src-page .event-year { font-size: 15px; color: var(--slate); font-variant-numeric: tabular-nums; }
.src-page .event-body { min-width: 0; }
.src-page .event-title { margin: 0 0 6px; font-size: 26px; text-wrap: balance; }
.src-page .event-title a { color: var(--ink); text-decoration: none; }
.src-page .event-title a:hover { text-decoration: underline; }
.src-page .event-when { margin: 0 0 8px; font-size: 19px; font-weight: 600; color: var(--ink); }
.src-page .event-sep { margin-inline: 4px; color: var(--slate); }
.src-page .event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; font-size: 16px; color: var(--slate); }
.src-page .event-state { display: inline-block; padding: 2px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--cloud); font-size: 15px; font-weight: 600; color: var(--ink); }
.src-page .event-card.is-live .event-state { border-color: var(--cta); background: var(--cta); color: var(--white); }
.src-page .event-card.is-past .event-state { background: transparent; color: var(--slate); }
.src-page .event-card.is-past .event-day { color: var(--slate); }
.src-page .event-summary { max-width: 62ch; margin: 0 0 14px; }
.src-page .event-sessions { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 12px; padding: 0; }
.src-page .event-sessions li { padding: 3px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.src-page .event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.src-page .event-actions .button { margin: 0; }
.src-page .events-empty { padding: 28px 32px; background: var(--cloud); border-radius: 16px; }
.src-page .events-empty p { max-width: 62ch; margin: 0 0 8px; }
.src-page .events-empty .events-empty-title { font-size: 24px; font-weight: 600; color: var(--ink); }
.src-page .events-empty p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
	.src-page .event-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 20px; }
	.src-page .event-date { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px 14px; width: fit-content; }
	.src-page .event-day { font-size: 28px; }
	.src-page .event-title { font-size: 24px; }
	.src-page .events-empty { padding: 22px 20px; }
}

/* ------------------------------ archived webinar details pages (SST-355) ----
 * A webinar details page whose date has passed is shown as an archive (inc/events.php): a notice at the top with the real date and the audience Events link, no registration. */
.prose .event-archive { margin: 0 0 32px; padding: 28px 32px; background: var(--cloud); border-radius: 16px; }
.prose .event-archive h2 { margin: 0 0 10px; font-size: 28px; color: var(--ink); }
.prose .event-archive p { max-width: 62ch; margin: 0 0 12px; }
.prose .event-archive p:last-child { margin-bottom: 0; }
.prose p.event-archive-next { margin: 40px 0 0; }
.prose p.event-when { margin: 0 0 12px; font-size: 20px; font-weight: 600; color: var(--ink); }
@media (max-width: 760px) {
	.prose .event-archive { padding: 22px 20px; }
	.prose .event-archive h2 { font-size: 24px; }
}


/* ------------------------------ professional audience pages and the rest of the public pages (SST-355) ----
 * The five professional audience pages, the pregnancy overview, the professional-programs hub and the public pages (Meet Anna, webinars, eBooks, workbooks,
 * FAQ, support, contact, ...) carry the same photograph header as the family pages: `.audience-hero.has-photo` above, one real BBU file cropped by
 * `object-fit: cover` to 4:3 (3:2 under 900px). The `focus-*` class on the figure keeps the faces in the frame (positions checked on cropped renders at both ratios).
 * The body of these pages uses the same few parts as the family pages (split text/photo rows, cards, notice, FAQ); tokens only, no accent stripes.
 */
.src-page .audience-photo.focus-become-doula .photo { object-position: 50% 50%; }
.src-page .audience-photo.focus-recertify .photo { object-position: 50% 50%; }
.src-page .audience-photo.focus-mentorship .photo { object-position: 50% 62%; }
.src-page .audience-photo.focus-become-agency .photo { object-position: 50% 40%; }
.src-page .audience-photo.focus-thrive-agency .photo { object-position: 50% 20%; }
.src-page .audience-photo.focus-pregnant .photo { object-position: 60% 50%; }
.src-page .audience-photo.focus-programs .photo { object-position: 50% 50%; }
.src-page .audience-photo.focus-meet-anna .photo { object-position: 45% 50%; }
.src-page .audience-photo.focus-webinars .photo { object-position: 50% 50%; }
.src-page .audience-photo.focus-ebooks .photo { object-position: 50% 50%; }
.src-page .audience-photo.focus-freebie .photo { object-position: 50% 40%; }
.src-page .audience-photo.focus-workbooks .photo { object-position: 50% 50%; }
.src-page .audience-photo.focus-books .photo { object-position: 50% 35%; }
.src-page .audience-photo.focus-build-grow .photo { object-position: 50% 45%; }
.src-page .audience-photo.focus-birth-boss .photo { object-position: 50% 50%; }
.src-page .audience-photo.focus-live-in .photo { object-position: 50% 40%; }
.src-page .audience-photo.focus-map .photo { object-position: 50% 40%; }
.src-page .audience-photo.focus-faq .photo { object-position: 50% 22%; }
.src-page .audience-photo.focus-support .photo { object-position: 50% 50%; }
.src-page .audience-photo.focus-contact .photo { object-position: 50% 12%; }   /* SST-1061: a portrait photograph, faces at the top of the file */
.src-page .audience-photo.focus-affiliate .photo { object-position: 86% 50%; }
.src-page .audience-photo.focus-cradle .photo { object-position: 50% 50%; }
.src-page .audience-photo.focus-educator .photo { object-position: 50% 50%; }
.src-page .audience-photo.focus-blog .photo { object-position: 50% 50%; }
.src-page .audience-photo.focus-spanish-pass .photo { object-position: 50% 50%; }
/* A product mock-up (white background, device frames) is shown whole inside the frame instead of being cropped. */
.src-page .audience-photo.fit-contain { background: var(--white); border: 1px solid var(--line); }
.src-page .audience-photo.fit-contain .photo { object-fit: contain; }

/* The programs hub's chosen offer title sits under the page header, so it is an h2 sized like the offer's former h1. */
.src-page .training-intro > h2 { margin: 0 0 12px; font-size: 40px; line-height: 1.1; }

/* Text beside one photograph. */
.src-page .pp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: start; padding-block: 44px; }
.src-page .pp-split.is-reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.src-page .pp-split.is-reverse .pp-figure { order: 2; }
.src-page .pp-figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--cloud); }
.src-page .pp-figure .photo { display: block; width: 100%; height: auto; }
.src-page .pp-copy h2, .src-page .pp-copy h3 { margin: 0 0 14px; }
.src-page .pp-copy p, .src-page .pp-prose p { max-width: 68ch; }
.src-page .pp-copy-section { padding-block: 36px 8px; }
.src-page .pp-copy-section h2 { margin: 0 0 12px; }
.src-page .pp-copy-section p { max-width: 68ch; }

/* Cards: a plain bordered tile, with an optional photograph above the text. */
.src-page .pp-section .section-heading { margin-bottom: 26px; }
.src-page .pp-grid { display: grid; gap: 24px; }
.src-page .pp-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.src-page .pp-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.src-page .pp-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.src-page .pp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.src-page .pp-card h2, .src-page .pp-card h3 { margin: 0; font-size: 26px; text-wrap: balance; }
.src-page .pp-card h3 a { color: var(--ink); text-decoration: none; }
.src-page .pp-card h3 a:hover { text-decoration: underline; }
.src-page .pp-card p { margin: 0; }
.src-page .pp-card .text-link { margin-top: auto; }
.src-page .pp-card-media { display: block; width: 100%; margin: 0 0 6px; border-radius: 12px; overflow: hidden; background: var(--cloud); }
.src-page .pp-card-media .photo { display: block; width: 100%; height: auto; }
.src-page .pp-card-media .photo.contain { height: 240px; object-fit: contain; background: var(--white); }
.src-page .pp-round { width: 160px; border-radius: 50%; }
.src-page .pp-price { font-size: 20px; font-weight: 600; color: var(--ink); }
.src-page .pp-after { margin: 28px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.src-page .pp-person .pp-card-media { aspect-ratio: 1 / 1; }
.src-page .pp-person .pp-card-media .photo { height: 100%; object-fit: cover; }
.src-page .pp-role { font-size: 18px; color: var(--slate); }
.src-page .pp-tier .text-link { margin-top: 0; }
.src-page .pp-care-card .plain-benefits { margin: 0; }

/* A notice (an offer that is not open right now). */
.src-page .pp-notice-wrap { padding-block: 8px 0; }
.src-page .pp-notice { margin: 0; padding: 22px 28px; background: var(--cloud); border-radius: 16px; max-width: none; }

/* A product (the two eBooks). */
.src-page .pp-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.src-page .pp-product { display: flex; flex-direction: column; gap: 8px; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.src-page .pp-product h2 { margin: 0; font-size: 32px; }
.src-page .pp-product-meta { margin: 0; font-size: 17px; color: var(--slate); }
.src-page .pp-fineprint { margin: 6px 0 0; font-size: 16px; color: var(--slate); }
.src-page .pp-product-action { margin: auto 0 0; padding-top: 14px; }

.src-page .pp-offer { padding-block: 32px; }
.src-page .pp-offer h2, .src-page .pp-offer p { max-width: 68ch; }
.src-page .pp-shop-head, .src-page .pp-blog-head { padding-block: 36px 0; }
.src-page .pp-shop-head h2, .src-page .pp-blog-head h2 { margin: 0; }
.src-page .pp-social, .src-page .pp-earlier { list-style: none; margin: 0; padding: 0; }
.src-page .pp-social li, .src-page .pp-earlier li { padding: 6px 0; }
.src-page .pp-contact { padding-block: 36px 8px; }
.src-page .pp-form { padding-block: 24px 56px; }
.src-page .pp-form h2 { margin: 0 0 18px; }
.src-page .pp-hero-plain { text-align: left; }
.src-page .pp-hero-plain .hero-heading { margin-inline: 0; }

/* The Spanish pass shows each class's photograph above its card text. */
.src-page .take-photo { display: block; width: 100%; aspect-ratio: 3 / 2; margin: 0 0 8px; border-radius: 8px; overflow: hidden; background: var(--cloud); }
.src-page .take-photo .photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The WooCommerce workbook list and the blog list sit directly under their header. */
.src-page + .woocommerce, .src-page ~ .woocommerce { max-width: min(1240px, calc(100% - 80px)); margin-inline: auto; padding-bottom: 56px; }

@media (max-width: 900px) {
	.src-page .pp-split, .src-page .pp-split.is-reverse { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 28px; }
	.src-page .pp-split.is-reverse .pp-figure { order: 0; }
	.src-page .pp-cols-3, .src-page .pp-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.src-page .pp-products { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.src-page .pp-cols-2, .src-page .pp-cols-3, .src-page .pp-cols-4 { grid-template-columns: minmax(0, 1fr); }
	.src-page .pp-card, .src-page .pp-product { padding: 22px 20px; }
	.src-page .training-intro > h2 { font-size: 34px; }
	.src-page .pp-notice { padding: 18px 20px; }
}

/* ------------------------------------------------------------------ blog */

/*
 * The blog index and the article page. Same tokens and the same card language as the audience pages; the additions are the wide lead card, the
 * three-up grid, the reading-width article column and the paths onward from an article.
 */

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

.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
}

.post-meta-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--slate);
	opacity: .55;
}

.blog-list {
	display: grid;
	gap: 34px;
}

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

.post-card .card-media {
	aspect-ratio: 3 / 2;
}

.post-card h3 {
	font-size: 23px;
	line-height: 1.2;
	text-wrap: balance;
}

.post-card h3 a {
	color: var(--ink);
	text-decoration: none;
}

.post-card h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.post-card .post-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-card .card-media img {
	transition: transform 420ms cubic-bezier(.23, 1, .32, 1);
}

.post-card:hover .card-media img {
	transform: scale(1.03);
}

.post-card-lead {
	flex-direction: row;
}

.post-card-lead .card-media {
	flex: 0 0 55%;
	aspect-ratio: auto;
	min-height: 360px;
}

.post-card-lead .card-body {
	justify-content: center;
	padding: 44px 48px;
}

.post-card-lead h3 {
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	margin-bottom: 16px;
}

.post-card-lead .post-excerpt {
	font-size: 19px;
	-webkit-line-clamp: 4;
}

.pagination {
	justify-content: center;
	align-items: center;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
	padding-inline: 18px;
}

.pagination a.page-numbers:hover {
	border-color: var(--blue);
	background: var(--cloud);
}

.pagination-status {
	max-width: none;
	margin: 14px 0 0;
	text-align: center;
	font-size: 15px;
	color: var(--slate);
}

.blog-paths h2 {
	font-size: clamp(26px, 2.6vw, 34px);
	margin-bottom: 22px;
}

.blog-paths-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.blog-path {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 6px 20px;
	padding: 26px 30px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
	text-decoration: none;
	transition: border-color 160ms ease-out;
}

.blog-path:hover {
	border-color: var(--blue);
}

.blog-path-title {
	font-family: 'League Spartan', sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--ink);
	grid-column: 1;
}

.blog-path > span:nth-of-type(2) {
	grid-column: 1;
}

.blog-path svg {
	grid-column: 2;
	grid-row: 1 / span 2;
	color: var(--ink);
}

/* The /blog/ chooser: one door per audience blog (SST-625), in the same card language as the article cards. */

.blog-doors-section h2 {
	font-size: clamp(26px, 2.6vw, 34px);
	margin-bottom: 22px;
}

.blog-doors {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 34px;
}

.blog-door .card-media {
	aspect-ratio: 3 / 2;
}

.blog-door h3 {
	font-size: 28px;
	line-height: 1.15;
	text-wrap: balance;
}

/* The audience blog pages: the article list sits directly under the photograph header's "latest articles" heading. */
.audience-blog {
	padding-top: 24px;
}

/* The article */

.post-single .entry-header {
	padding-block: 52px 26px;
}

.post-single .entry-header .wrap,
.post-single .entry-body .wrap {
	max-width: 840px;
}

.post-single h1 {
	line-height: 1.08;
	text-wrap: balance;
}

.post-single .post-meta {
	font-size: 16px;
	margin: 0;
}

.post-single .entry-media-wrap {
	max-width: 1120px;
	margin-bottom: 8px;
}

.entry-media {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--cloud);
}

.entry-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.post-single .entry-body {
	padding-block: 36px 56px;
}

.post-single .prose {
	max-width: 70ch;
}

.post-single .prose p,
.post-single .prose li {
	font-size: 19px;
	line-height: 1.7;
	overflow-wrap: break-word;
}

.post-single .prose h2 {
	margin-top: 54px;
	text-wrap: balance;
}

.post-single .prose figure {
	margin: 34px 0;
}

.post-single .prose figure img,
.post-single .prose p > img {
	display: block;
	margin-inline: auto;
}

.post-single .prose figcaption {
	margin-top: 10px;
	font-size: 15px;
	color: var(--slate);
	text-align: center;
}

.post-single .prose table {
	display: block;
	overflow-x: auto;
}

.entry-footer {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 56px;
	padding-top: 34px;
	border-top: 1px solid var(--line);
}

.entry-step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px;
	border: 1px solid var(--line);
	border-radius: 12px;
	text-decoration: none;
	color: var(--ink);
	transition: border-color 160ms ease-out;
}

.entry-step:hover {
	border-color: var(--blue);
}

.entry-step-next {
	grid-column: 2;
	text-align: right;
	align-items: flex-end;
}

.entry-step-prev {
	grid-column: 1;
}

.entry-step-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--slate);
}

.entry-step-title {
	font-family: 'League Spartan', sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.entry-all {
	margin: 26px 0 0;
}

.keep-reading .section-head h2 {
	margin-bottom: 0;
}

@media (max-width: 1100px) {
	.blog-grid,
	.keep-reading .post-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.post-card-lead {
		flex-direction: column;
	}

	.post-card-lead .card-media {
		flex: none;
		aspect-ratio: 3 / 2;
		min-height: 0;
	}

	.post-card-lead .card-body {
		padding: 26px 24px 30px;
	}
}

@media (max-width: 700px) {
	.blog-grid,
	.keep-reading .post-list,
	.blog-paths-list,
	.blog-doors,
	.entry-footer {
		grid-template-columns: minmax(0, 1fr);
	}

	.entry-step-next,
	.entry-step-prev {
		grid-column: 1;
	}

	.post-single .entry-header {
		padding-block: 36px 20px;
	}

	.post-single .prose p,
	.post-single .prose li {
		font-size: 18px;
	}

	.entry-media {
		aspect-ratio: 3 / 2;
		border-radius: 12px;
	}

	.blog-path {
		padding: 22px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.post-card .card-media img {
		transition: none;
	}

	.post-card:hover .card-media img {
		transform: none;
	}
}

.card-media-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-media-fallback img {
	width: 28%;
	height: auto;
	max-width: 120px;
	object-fit: contain;
	opacity: .9;
}

.post-card-lead .card-cta {
	margin-top: 26px;
}

/* Links inside an article's text are told apart from the text around them by an underline (some authored articles switch it off), and the authored
   "learn more" button keeps its white label readable on the brand blue. Authored copy and markup are not touched. */
.post-single .prose p a,
.post-single .prose li a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.post-single .prose .cfd-cta a.cfd-cta-button {
	background: var(--cta);
	text-decoration: none;
}

.post-single .prose .cfd-cta a.cfd-cta-button:hover {
	background: var(--cta-hover);
}

/* SST-783 (owner, 2026-10-15): the way back to the blog under an article is a large button, not a small text link. */
.entry-back {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	margin: 44px 0 0;
}

.entry-back .button {
	min-height: 60px;
	padding: 16px 32px;
	font-size: 20px;
	gap: 10px;
}

.entry-back .button-outline {
	background: var(--white);
	color: var(--ink);
	border-color: var(--ink);
}

.entry-back .button-outline:hover {
	background: var(--cloud);
	color: var(--ink);
}

/* Article text beside a picture: a picture never floats the reading column into a narrow strip; it sits above its paragraph at full width. */
.post-single .prose .alignleft,
.post-single .prose .alignright,
.post-single .prose figure.wp-block-image {
	float: none;
	display: block;
	max-width: 100%;
	margin-inline: auto;
}

.post-single .prose figure.wp-block-image img {
	width: 100%;
	height: auto;
}

/* SST-783: video bands. Each video sits in a frame of its own shape; every frame in a band has the same size, so a landscape and a vertical video read as the same size. */
.video-grid {
	display: grid;
	gap: 28px;
	justify-content: center;
	align-items: start;
	margin-top: 8px;
}

.video-grid-square,
.video-grid-landscape {
	grid-template-columns: repeat(auto-fit, minmax(280px, 460px));
}

.video-grid-portrait {
	grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
}

.video-frame {
	margin: 0;
}

.video-frame video,
.video-frame iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 16px;
	background: #12202b;
	object-fit: contain;
}

.video-square video { aspect-ratio: 1 / 1; }

.video-landscape video,
.video-landscape iframe { aspect-ratio: 16 / 9; }

.video-portrait video { aspect-ratio: 9 / 16; }

.video-frame figcaption {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--slate);
}

.learn-bbu .hero-actions,
.becoming-a-doula .hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
}

/* SST-783 (owner, row 46: "Intro to Childbirth is Underlined can we remove that"): a class card's title is not underlined in any state; the card as a whole
   is the link, and the title keeps the ink colour. */
.course-library .library-course .course-image-link,
.course-library .library-course .course-image-link:hover,
.course-library .library-course .course-image-link:focus-visible,
.course-library .library-course .course-image-link[aria-current] {
	text-decoration: none;
	color: var(--ink);
}

.course-library .library-course h3 {
	text-decoration: none;
}

/* Centred section copy (class pages that open with a short centred heading, and the cross-certification hub). */
.cx-centered .cx-col,
.cx-centered .cx-eyebrow,
.cx-centered .cx-actions,
.cx-centered .cx-features {
	text-align: center;
	justify-content: center;
}

.cx-centered .cx-col > p,
.cx-centered .cx-col > h2,
.cx-centered .cx-col > h3 {
	margin-inline: auto;
}

.cx-centered .cx-card {
	text-align: center;
}

/* The Agency Owner Package opens tighter: one line of questions, the button under it, and three smaller cards (Anna, row 69). */
.cx-intro-centered .cx-c1 h2 {
	font-size: clamp(24px, 2.4vw, 32px);
	margin-bottom: 8px;
}

.cx-intro-centered .cx-c3 {
	margin-top: 20px;
	gap: 20px;
}

.cx-intro-centered .cx-card {
	padding: 16px;
}

.cx-intro-centered .cx-card .cx-img img {
	aspect-ratio: 3 / 2;
	max-height: 170px;
	object-fit: cover;
}

.cx-intro-centered .cx-card h3 {
	font-size: 22px;
	margin-bottom: 8px;
}

.cx-intro-centered .cx-card p {
	font-size: 16px;
}

/* On the family class page the "why choose" picture lines up with the copy beside it (Start here r25). */
.cx-section .cx-c13-23 {
	align-items: center;
}

/* SST-783 (Start here r25: "The picture next to why choose birth and baby university should line up with the font"): the picture and the heading of
   that section start on the same line, instead of the shorter column being centred against the taller one. */
.cx-section .cx-cols.cx-tops {
	align-items: start;
}

/* SST-783 (Start here r25: "There is a lot of white area ... too much white space around the font"): a section that leads a page under its heading
   takes a compact top rather than a full section gap. */
.cx-section.cx-top {
	padding-top: 8px;
}

/* SST-783 (Start here r25: the phone view had "a large gap after the affordability text") is handled by the section gap in the 600px block above,
   which is now 36px rather than 48px. */

.cx-section .cx-c13-23 > .cx-col > .cx-img {
	margin-bottom: 0;
}

/* A page's first block of reading text starts at the top of its column (privacy policy: "Spacing is off at the top"). */
.prose > :first-child {
	margin-top: 0;
}

.page-hero + .section.tight {
	padding-top: 24px;
}

/* SST-783 round 10 (Anna, 2026-10-16, item 8 and row 41: "do you think people will be able to tell that the classes, all access class pass and workbooks are
   links? I don't think this looks like links can we make it more obvious on this page and any other page that looks like this?"): the plain lists of links
   that close a page (a hub-list in an .other-paths section, in a composed .cx page or in a .prose page) were set as plain text rows. Each title is now
   underlined in the link blue and ends in an arrow, the same way on every page that uses the list. SST-939 (Anna, 2026-10-16): the same
   rows inside the .guide-path cards on /families/, /doulas/ and /agencies/ take the same treatment. Copy, order and destinations are untouched. */
.other-paths .hub-list a,
.cx .hub-list a,
.prose .hub-list a,
.guide-path .hub-list a {
	gap: 12px;
}

.other-paths .hub-list a > span:first-child,
.cx .hub-list a > span:first-child,
.prose .hub-list a > span:first-child,
.guide-path .hub-list a > span:first-child {
	flex: 1 1 auto;
	color: var(--cta);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.other-paths .hub-list a::after,
.cx .hub-list a::after,
.prose .hub-list a::after,
.guide-path .hub-list a::after {
	content: "\2192";
	flex: 0 0 auto;
	color: var(--cta);
	font-size: 22px;
	line-height: 1;
	transition: transform 0.15s ease;
}

.other-paths .hub-list a:hover > span:first-child,
.cx .hub-list a:hover > span:first-child,
.prose .hub-list a:hover > span:first-child,
.guide-path .hub-list a:hover > span:first-child,
.other-paths .hub-list a:focus-visible > span:first-child,
.cx .hub-list a:focus-visible > span:first-child,
.prose .hub-list a:focus-visible > span:first-child,
.guide-path .hub-list a:focus-visible > span:first-child {
	color: var(--cta-hover);
	text-decoration-thickness: 2px;
}

.other-paths .hub-list a:hover::after,
.cx .hub-list a:hover::after,
.prose .hub-list a:hover::after,
.guide-path .hub-list a:hover::after {
	color: var(--cta-hover);
	transform: translateX(3px);
}

/* On a phone the hint drops under the title (a long title such as "All Access Class Pass" no longer wraps beside it) and the arrow stays at the end of the title line. */
@media (max-width: 600px) {
	.other-paths .hub-list a,
	.cx .hub-list a,
	.prose .hub-list a,
	.guide-path .hub-list a {
		flex-wrap: wrap;
		row-gap: 2px;
	}

	.other-paths .hub-list a > span:first-child,
	.cx .hub-list a > span:first-child,
	.prose .hub-list a > span:first-child,
	.guide-path .hub-list a > span:first-child {
		order: 1;
	}

	.other-paths .hub-list a::after,
	.cx .hub-list a::after,
	.prose .hub-list a::after,
	.guide-path .hub-list a::after {
		order: 2;
	}

	.other-paths .hub-list a .hint,
	.cx .hub-list a .hint,
	.prose .hub-list a .hint,
	.guide-path .hub-list a .hint {
		order: 3;
		flex: 0 0 100%;
	}
}

/* SST-939: the detail rows in the .guide-path cards stack a title over a description, so the arrow sits at the end of the title line (first row) and the description runs full width beneath. */
.guide-path .hub-list-detail a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	column-gap: 12px;
	row-gap: 2px;
}

.guide-path .hub-list-detail a > span:first-child {
	grid-column: 1;
	grid-row: 1;
	order: 0;
}

.guide-path .hub-list-detail a::after {
	grid-column: 2;
	grid-row: 1;
	order: 0;
}

.guide-path .hub-list-detail a .hint {
	grid-column: 1 / -1;
	grid-row: 2;
	order: 0;
}

/* SST-939: on a phone the plain rows in the .guide-path cards use the same layout, so a long title wraps beside its arrow and the price line sits beneath. */
@media (max-width: 600px) {
	.guide-path .hub-list a {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		column-gap: 12px;
	}

	.guide-path .hub-list a > span:first-child {
		grid-column: 1;
		grid-row: 1;
		order: 0;
	}

	.guide-path .hub-list a::after {
		grid-column: 2;
		grid-row: 1;
		order: 0;
	}

	.guide-path .hub-list a .hint {
		grid-column: 1 / -1;
		grid-row: 2;
		order: 0;
	}
}

/* SST-783 round 10 (Anna, row 79: "The pictures are different sizes."): the two training cards on /certified-doula-trainings/ hold one landscape and one
   portrait photograph; both draw in the same 4:3 frame. The postpartum file is a tall portrait, so its frame is centred on the doula, the baby and the parent. */
.cx-img-uniform img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cx-img-uniform img[src*="postpartum"] {
	object-position: 50% 51%;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------
 * SST-1061: the client's completed answers in her photo workbook (20 Oct 2026). Every rule is scoped to the page or component she named.
 * ------------------------------------------------------------------------------------------------------------------------------------------------ */

/* Contact: the chosen photograph is a portrait; the frame keeps the parent's face and the baby (the file's faces sit in its upper half). */
.src-page .audience-photo.focus-contact .photo { object-position: 50% 28%; }

/* For Agency Owners ("Guidance from an agency founder box separated from box under it", "Read Anna's full bio more bold", the heading paragraph lined up
   with the blue box, "Hear from agency owners" centred over the videos, the enroll button separated from the program link). */
.src-page .agency-hero { padding-bottom: 40px; }
.src-page .agency-hero > .teaching-proof a { font-weight: 700; font-synthesis: weight; }   /* Proxima Nova has one weight and the site turns synthetic bold off; this one link may use it */
@media (min-width: 761px) {
	.src-page .agency-program .section-heading { display: grid; grid-template-columns: 1.35fr 1fr; gap: 55px; align-items: end; }
	.src-page .agency-program .section-heading p { max-width: none; }
}
.src-page #hear-from-owners .section-heading { display: block; text-align: center; }
.src-page #hear-from-owners .section-heading p { max-width: 640px; margin: 0 auto; }
.src-page .waitlist-section .hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }

/* A second hero button next to the first (For Doulas "Hear from doulas who took the training", For Families "Unlock ALL Classes & Save!"). */
.collection-hero > .hero-cta-row { order: 1; align-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-bottom: 4px; }
.collection-hero > .hero-cta-row > .button { margin: 0; }

/* The testimonial rows that show each review once ([bbu_review_wall once="1"]): the rows sweep from one end to the other and back, never a repeated copy. */
.lp-review-wall.lp-review-wall-once .lp-review-marquee { animation-name: bbuReviewSweep; animation-duration: 90s; animation-timing-function: ease-in-out; animation-direction: alternate; }
.lp-review-wall.lp-review-wall-once .lp-review-lane-2 { animation-direction: alternate-reverse; animation-duration: 100s; }
@keyframes bbuReviewSweep { from { transform: translateX(0); } to { transform: translateX(min(0px, calc(100vw - 100%))); } }
.lp-reviews-action { margin: 22px 0 6px; }

/* The photographs she chose sit in frames cropped by the page (covers, cards): the focus keeps every face in the frame. */
.two-courses .course-cover:first-child > .photo[src*="sst1061-labor-bedroom"] { object-position: 50% 15%; }
.two-courses .course-cover:last-child > .photo[src*="sst1061-postpartum-bedroom"] { object-position: 50% 45%; }
/* SST-1118 (client, 22 Oct: "make all the top picture cards the same size"; Baby care: "you can't see the baby in the bathtub ... zoom it out"): the three picture
   cards of For Families (Birth, Baby care, Feeding) are one size at every width, three equal columns and one 4:3 picture box each (on a phone the three stack,
   each as wide as the screen allows), so no card is taller or wider than the others. The Baby care photograph is nearly square, so its focus keeps the father's
   face and the baby in the tub both inside the box. The For Doulas pair (.two-courses) is not touched. */
.hero-courses:not(.two-courses) { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.hero-courses:not(.two-courses) .course-cover > .photo,
.hero-courses:not(.two-courses) .course-cover:first-child > .photo,
.hero-courses:not(.two-courses) .course-cover:nth-child(2) > .photo { height: auto; aspect-ratio: 4 / 3; }
.hero-courses:not(.two-courses) .course-cover:nth-child(2) > .photo[src*="sst1061-father-bath"] { object-position: 50% 6%; }
@media (max-width: 760px) {
	.hero-courses:not(.two-courses) { grid-template-columns: minmax(0, 1fr); }
	.hero-courses:not(.two-courses) .course-cover:first-child { grid-column: auto; }
	.hero-courses:not(.two-courses) .course-cover:not(:first-child) .cover-action { display: block; }
}
.offer-photo > .photo[src*="sst1061-leaving-hospital"] { object-position: 50% 30%; }
.story-photo > .photo[src*="sst1061-hospital-prep"] { object-position: 15% 50%; }

/* The four class pictures of the childbirth and family class pages are drawn in one frame (the files are landscape, a square and a tall portrait). */
.cx-img-uniform img[src*="sst1061-birth-ball"] { object-position: 50% 40%; }
.cx-img-uniform img[src*="sst1061-vbac-ball"] { object-position: 50% 40%; }
.cx-img-uniform img[src*="sst1061-father-bath"] { object-position: 50% 0%; }

/* Childbirth Classes: "Left align video at top": the video starts at the same left edge as the words under it. */
body.page-id-2018 .cx-video { margin-left: 0; }

/* Workbooks list ("all the work books are cut off"): the whole cover is shown in each card, not a square crop of it. */
body.bbu-v2 .woocommerce ul.products li.product a img.bbu-whole-cover { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--cloud); border-radius: 8px; }

/* The four workbook pages ("the image of the workbook is good for this page but things are unaligned"): the title column starts where the picture and the text
   start, the link list is not indented under its heading, and the larger Prenatal Visit picture is drawn at the size of the one above it. */
body.page-id-2062 .page-hero .wrap, body.page-id-2064 .page-hero .wrap, body.page-id-2063 .page-hero .wrap, body.page-id-2057 .page-hero .wrap { max-width: none; }
body.page-id-2062 .prose .hub-list, body.page-id-2064 .prose .hub-list, body.page-id-2063 .prose .hub-list, body.page-id-2057 .prose .hub-list { padding-left: 0; }
body.page-id-2062 .prose .hub-list a, body.page-id-2064 .prose .hub-list a, body.page-id-2063 .prose .hub-list a, body.page-id-2057 .prose .hub-list a { padding-left: 0; padding-right: 0; }
body.page-id-2057 .prose figure.wp-block-image img { width: 384px; max-width: 100%; height: auto; }

/* SST-1061 (row 33, Live-In Newborn Care): the round pictures are drawn as a square from the middle of the photograph; the chosen "1st circle" photograph is a
   wide one, framed on the three faces. (The earlier square files draw exactly as before.) */
.src-page .pp-round .photo { aspect-ratio: 425 / 431; height: auto; object-fit: cover; }
.src-page .pp-round .photo[src*="sst1061-newborn-bedside"] { object-position: 64% 50%; }

/* SST-1104 (client photo workbook, 22 Oct 2026). Row 33, Live-In Newborn Care: the "2nd circle" is a wide photograph, framed on the two women. */
.src-page .pp-round .photo[src*="sst1104-guidance-bed"] { object-position: 35% 50%; }
/* Row 43, Jumpstart Your Doula Career: "two sections of checkmarks ... could just use some more differentiation": each checkmark list is its own panel. */
.offer-checks { margin: 24px 0; padding: 20px 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--cloud); }
.offer-checks ul { margin: 0; }

/* SST-1104 (client photo workbook row 40, Scale Your Doula Agency): the top block is a heading, a supporting line and the intro, starting where the page title starts.
   The page title sits in a centred 900 px column and the article text starts at the left of the wider content area, so the block moves right by the difference
   (170 px at 1320 px and wider, less on narrower windows, none on a phone). */
.prose .offer-top { --offer-shift: clamp(0px, calc((100vw - 980px) / 2), 170px); margin-left: var(--offer-shift); width: calc(100% + var(--offer-shift)); max-width: 900px; }
@media (max-width: 1050px) { .prose .offer-top { --offer-shift: clamp(0px, calc((100vw - 948px) / 2), 170px); } }
.prose .offer-top h2 { margin-bottom: 8px; }
.prose .offer-top .offer-top-sub { margin: 0 0 20px; font-size: 20px; line-height: 1.4; }
.prose .offer-top .offer-top-sub strong { display: block; margin-bottom: 4px; font-weight: 600; }
.prose .offer-top .offer-top-sub br { display: none; }

/* SST-1119 ("a large doubled picture ... show each picture once at the normal size"): the picture rows on the doula and agency pages (.photo-row-grid) had no style, so
   every picture drew at the full 1240 px width, one touching the next. Same sizing as the card grid above: two columns with a 24 px gap (608 px each at 1240 px), the
   three-picture gallery on /agencies/events/ in three, one picture in the width of one column, and one column on a phone; each picture at its own shape, none cropped. */
.src-page .photo-row-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.src-page .photo-row-grid:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.src-page .photo-row-grid:has(> :only-child) { grid-template-columns: minmax(0, calc((100% - 24px) / 2)); }
.src-page .photo-row-item { margin: 0; border-radius: 12px; overflow: hidden; background: var(--cloud); }
.src-page .photo-row-item .photo { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
	.src-page .photo-row-grid, .src-page .photo-row-grid:has(> :nth-child(3)), .src-page .photo-row-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
}

/* SST-1120 (the client's updated workbook photograph, "Anywhere on the website swap out for this updated version"): the photograph is 3:2 with both workbooks in the
   left half. The boxes that held the old picture (a fixed 440 to 600 px tall box that cropped it to a tall band, a 1.3 box on a phone) would cut a workbook off, so
   in the Anna section of the doula and agency pages and in the instructor picture of the course pages it is drawn whole at its own shape. */
.educator > .photo[src*="bbu-sst1061-workbooks-kitchen-2-"],
.lp-anna-photo[src*="bbu-sst1061-workbooks-kitchen-2-"] { height: auto; aspect-ratio: 3 / 2; object-position: 50% 50%; }

/* ------------------------------------------------------------------------------------------------------------------------------------------------
 * SST-1061 red corrections (client, 22 Oct 2026, photo workbook tab 6). Each rule is scoped to the page she named.
 * ------------------------------------------------------------------------------------------------------------------------------------------------ */

/* Affiliate & Educator Program, "Who it is for" (J15: "too spread out and small it gets lost on the page"): the heading and its sentence sit together in one panel and the
   sentence is read at body-copy size and above, instead of a small line far to the right of the heading. */
body.page-id-1960 .src-page #who { padding-block: 8px 0; }
body.page-id-1960 .src-page #who .section-heading { display: block; margin: 0; padding: 32px 36px; background: var(--cloud); border-radius: var(--radius); }
body.page-id-1960 .src-page #who .section-heading h2 { margin: 0 0 12px; }
body.page-id-1960 .src-page #who .section-heading p { max-width: 62ch; margin: 0; font-size: 22px; line-height: 1.5; color: var(--ink); }
body.page-id-1960 .src-page #enrollment { margin-top: 8px; }
@media (max-width: 760px) {
	body.page-id-1960 .src-page #who .section-heading { padding: 24px 22px; }
	body.page-id-1960 .src-page #who .section-heading p { font-size: 19px; }
}

/* Childbirth Classes top (K21): the heading, the words and the buttons on one side, a smaller video on the other, and no empty band above. On a phone they stack:
   heading, video, words, buttons. */
.cx-top-split { padding-block: 24px 48px; }
.cx-top-split .cx-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "title video" "words video" "links video"; grid-template-rows: auto auto 1fr; column-gap: 56px; align-items: start; }
.cx-top-split .cx-split > h2 { grid-area: title; margin: 0 0 16px; font-size: clamp(28px, 3vw, 40px); }
.cx-top-split .cx-split > .cx-video { grid-area: video; max-width: none; margin: 0; }
.cx-top-split .cx-split > p:not(.cx-actions) { grid-area: words; margin: 0; max-width: 56ch; }
.cx-top-split .cx-split > .cx-actions { grid-area: links; margin: 24px 0 0; }
@media (max-width: 860px) {
	.cx-top-split .cx-split { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "video" "words" "links"; grid-template-rows: none; }
	.cx-top-split .cx-split > h2 { margin-bottom: 20px; }
	.cx-top-split .cx-split > .cx-video { margin-bottom: 20px; }
}

/* How to Scale a Doula Agency webinar pages (J48/J49): the nine agenda photographs are small cards, three rows of three, as on the original page (cards of a 4:3 photograph,
   a heading and a line; 24px gaps). The grid is the one part of the page wider than the reading column. */
body.page-id-2045 .prose, body.page-id-2046 .prose { max-width: none; }
body.page-id-2045 .prose > :not(.exp-grid), body.page-id-2046 .prose > :not(.exp-grid) { max-width: 74ch; }
.prose .exp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 32px 0; }
.prose .exp-card { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.prose .exp-card .exp-image { margin: 0; aspect-ratio: 4 / 3; background: var(--cloud); }
.prose .exp-card .exp-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; margin: 0; }
.prose .exp-card:first-child .exp-image img { object-position: center top; }
.prose .exp-card .exp-body { padding: 18px 20px 22px; }
.prose .exp-card h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.25; }
.prose .exp-card p { margin: 0; font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) { .prose .exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.prose .exp-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.prose .exp-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; }
	.prose .exp-card .exp-image { aspect-ratio: auto; height: 100%; min-height: 112px; }
	.prose .exp-card .exp-body { padding: 12px 14px 14px; }
	.prose .exp-card h3 { font-size: 17px; }
}

/* SST-1150 (the client: "it should have the workbook picture and 2 pages of the workbook ... with mention of the workbook"): the class and training pages
 * that talk about a workbook show it the way the landing pages' "Inside your workbook" panel does: the cover on a white card, the two reviewed pages
 * open in a new tab at full size. The panel is one centred column. */
.cx-section.cx-workbook {
	padding-block: 48px;
}

.cx-workbook-panel {
	background: var(--cloud);
	border-radius: 28px;
	padding: 40px 32px;
	text-align: center;
}

.cx-workbook-panel h2 {
	margin: 0 0 12px;
}

.cx-workbook-panel > p {
	max-width: 68ch;
	margin: 0 auto 28px;
}

.cx-workbook-covers,
.cx-workbook-pages {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cx-workbook-covers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.cx-workbook-covers li {
	flex: 0 1 190px;
	min-width: 0;
	padding: 18px;
	background: var(--white);
	border-radius: 20px;
}

.cx-workbook-covers-one li {
	flex-basis: 320px;
	padding: 28px;
}

.cx-workbook-covers figure {
	margin: 0;
}

.cx-workbook-covers img {
	display: block;
	width: 100%;
	max-height: 260px;
	object-fit: contain;
	margin-inline: auto;
	box-shadow: 0 12px 28px #18354c2e;
	border-radius: 4px;
}

.cx-workbook-covers-one img {
	max-height: 300px;
}

.cx-workbook-covers figcaption {
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--ink);
}

.cx-workbook-pages {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 300px));
	justify-content: center;
	gap: 20px;
	margin-top: 28px;
}

.cx-workbook-pages a {
	display: block;
	background: var(--white);
	border-radius: 14px;
	padding: 8px;
	color: var(--ink);
	text-decoration: none;
}

.cx-workbook-pages img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--white);
}

.cx-workbook-page-link {
	display: block;
	padding: 8px 2px 2px;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 600;
}

.cx-workbook-pages a:hover .cx-workbook-page-link {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cx-workbook-pages a:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

@media (max-width: 760px) {
	.cx-workbook-panel {
		padding: 28px 18px;
		border-radius: 22px;
	}

	.cx-workbook-covers li {
		flex-basis: 140px;
		padding: 12px;
	}

	.cx-workbook-covers-one li {
		flex-basis: 240px;
		padding: 18px;
	}

	.cx-workbook-pages {
		grid-template-columns: minmax(0, 340px);
	}
}

/* SST-783 (the client, 23 Oct 2026): the agency and mentorship pages. build/pack/sst783_anna.py names each page that carries a class below. */
/* C41: a video section whose heading, line and captions sit on the page's centre line. */
.src-page .video-band-centered .section-heading { display: block; text-align: center; }
.src-page .video-band-centered .section-heading h2 { margin-inline: auto; }
.src-page .video-band-centered .section-heading p { max-width: 640px; margin: 12px auto 0; }
.src-page .video-band-centered .video-frame figcaption { text-align: center; }
/* A row of videos whose last one would sit alone on the left (three in a two-wide row) is centred instead. */
.src-page .video-band-centered .video-grid, .video-grid-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.src-page .video-band-centered .video-frame, .video-grid-center .video-frame { flex: 0 1 380px; min-width: min(280px, 100%); }
.src-page .video-band-centered .video-frame:only-child, .video-grid-center .video-frame:only-child { flex-basis: 460px; }
/* C7: the three pictures at the bottom of Agency events are the same size (the portrait one was twice as tall as the other two). */
.src-page .photo-row-even .photo-row-item { aspect-ratio: 3 / 2; }
.src-page .photo-row-even .photo-row-item .photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
/* C9: the three cards at the top of the Agency Owner Package are the same height whatever the words under each picture. */
.cx-intro-centered .cx-c3 { align-items: stretch; }
/* C9: the four reviews on one row, smaller (the wall prints a set of six or fewer once, as a plain row of cards). */
.cx-reviews-inline .lp-review-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cx-reviews-inline .lp-review-card { padding: 14px 15px; }
.cx-reviews-inline .lp-review-card figcaption { margin-bottom: 8px; }
.cx-reviews-inline .lp-review-card figcaption strong { font-size: 16px; }
.cx-reviews-inline .lp-review-title { font-size: 15px; margin-bottom: 6px; }
.cx-reviews-inline .lp-review-card blockquote { font-size: 14px; line-height: 1.45; }
.cx-reviews-inline .lp-review-card blockquote.lp-review-long { max-height: 21em; }
@media (max-width: 900px) {
	.cx-reviews-inline .lp-review-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.cx-reviews-inline .lp-review-row { grid-template-columns: minmax(0, 1fr); }
}
/* C79 (Certified Doula Trainings): the two buttons under the opening line sit together on the centre line; the two training boxes are the same height with
   their buttons level; each box's list is centred as a block under its centred heading. */
.cx-intro-actions .cx-c2 { grid-template-columns: repeat(2, max-content); justify-content: center; gap: 16px 24px; margin-top: 4px; }
.cx-intro-actions .cx-c2 .cx-actions { margin: 0; }
.cx-cards-even { align-items: stretch; }
.cx-cards-even > .cx-card { display: flex; flex-direction: column; }
.cx-cards-even > .cx-card > .cx-actions { margin-top: auto; padding-top: 20px; }
.cx-cards-even .cx-checks { width: fit-content; max-width: 100%; margin-inline: auto; }
@media (max-width: 640px) {
	.cx-intro-actions .cx-c2 { grid-template-columns: minmax(0, max-content); }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------
 * SST-783, the client's 23 Oct 2026 column "Anna final- feedback" (navigation, family and service pages).
 * ------------------------------------------------------------------------------------------------------------------------------------------ */

/* C3 (home): "move up Newborn care 101 to be directly under Bringing Home Baby, there is a gap". The class lists sit in equal-height columns and the list was
 * pushed to the foot of its column (`.h-compact { margin: auto 0 0 }`), so the shorter Newborn Care column showed a gap between its feature and its list. */
.h-class-group > .h-compact { margin-top: 0; }
.h-class-group > .h-compact:not(:has(li)) { display: none; }

/* C39 (Professional programs): the program options read as buttons, and the comparison is an open section with its own heading, not a closed toggle. */
.offer-selector a {
	padding: 9px 17px;
	border: 2px solid var(--ink);
	font-weight: 700;
	color: var(--ink);
}

.offer-selector a:hover {
	background: var(--cloud);
}

@media (max-width: 760px) {
	.offer-selector a { padding: 9px 11px; }
}

.offer-selector a.selected:hover {
	background: var(--ink);
}

.compare-section > h2 {
	margin: 0;
	font-family: 'League Spartan', sans-serif;
	font-size: 28px;
}

/* C32 (Cross Certification Doula Trainings): the page opens like the Agency Owner Package (the label on the title's axis and 900px width, no extra gap above the
 * questions), the two choice boxes are one size with their buttons on one line, and the closing line sits on the same centred axis. */
.cx-cross-hub .cx-section.cx-intro { padding-top: 0; }

.cx-cross-hub .cx-eyebrow {
	max-width: 900px;
	margin-inline: auto;
}

.cx-cross-hub .cx-c2 { align-items: stretch; }

.cx-cross-hub .cx-c2 > .cx-card {
	display: flex;
	flex-direction: column;
}

.cx-cross-hub .cx-c2 > .cx-card .cx-actions {
	margin-top: auto;
	padding-top: 20px;
	justify-content: center;
}

.cx-cross-hub .cx-hub-note {
	max-width: none;
	margin: 24px auto 0;
	text-align: center;
}

@media (min-width: 761px) {
	.cx-cross-hub .cx-c2 > .cx-card h3 {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2.5em;
	}
}

/* C40 (For Doulas): the five program groups sit in one row on a wide screen (they wrapped four and one). */
@media (min-width: 1200px) {
	.src-page .hub-programs.hub-programs-one-row .guide-paths {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 16px;
	}

	.src-page .hub-programs-one-row .guide-path {
		padding: 22px 16px 10px;
	}

	.src-page .hub-programs-one-row .guide-path h3 {
		font-size: 20px;
		line-height: 1.2;
	}

	.src-page .hub-programs-one-row .guide-path .hub-list a {
		gap: 6px;
	}

	.src-page .hub-programs-one-row .guide-path .hub-list a > span:first-child {
		min-width: 0;
		font-size: 15px;
		overflow-wrap: break-word;
	}

	.src-page .hub-programs-one-row .guide-path .hub-list a::after {
		font-size: 18px;
	}
}

/* C49 and C51 (family pages): each class card opens with its picture, in one 3:2 box. */
.src-page .take-card .take-photo {
	align-self: stretch;
	margin: 0 0 12px;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--cloud);
}

.src-page .take-card .take-photo .photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------
 * SST-1121 (release readiness): the column-C requests of 23 Oct 2026 that the four lanes left open. Each rule is scoped to the marker its page carries.
 * ------------------------------------------------------------------------------------------------------------------------------------------- */

/* C21 and C79 (Certified Doula Trainings: "the spacing is off at the top and other sections"): the opening line sits close under the title like the other
 * class pages, its two buttons sit a clear step below it (they were 12px under the line, with 100px above it), the video band and the strip under it
 * (both pale blue) read as one band instead of two with a double gap, and the chips sit a clear step under their heading. */
.cx-trainings-spaced .cx-section.cx-intro { padding-top: 0; }
.cx-trainings-spaced .cx-intro-actions .cx-c1 + .cx-c2 { margin-top: 20px; }
.cx-trainings-spaced .cx-section.tone-cloud + .cx-section.tone-cloud { padding-top: 0; }
.cx-trainings-spaced .cx-c1 + .cx-features { margin-top: 24px; }

/* C25 (Classes for Perinatal Professionals: "the images ... brought to the top of each box ... the bold wording needs to be centered in all boxes"): the
 * picture starts at the top of its box beside the text instead of floating in the middle of a long column, and the bold line of each box is centred. */
.cx-pro-hub .cx-section .cx-c13-23 { align-items: start; }
.cx-pro-hub .cx-toggle summary { justify-content: center; padding-inline: 60px; text-align: center; }

/* C31 and C33 (the two Cross Certification pages: "a picture at the top"): the page opens with its picture on the title's axis, then the label, the line and the
 * button on the same axis (the Agency Owner Package opening). */
.cx-intro-picture .cx-top-picture { max-width: 760px; margin: 0 auto 28px; }
.cx-intro-picture .cx-c1 > .cx-col > .cx-actions { margin-inline: auto; }
.cx-intro-picture .cx-top-picture img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }

/* SST-1121 recheck (client photo workbook, 22 Oct 2026). I19, Breastfeeding Classes: "Photo in circle should be the one that looks like real baby": her whole photograph is
 * drawn as a circle by the page (the middle two thirds of the width, centred on the three people); no pre-cut picture. */
.cx-c1 > .cx-col > .cx-img.cx-img-circle img {
	margin-inline: auto;
	width: min(520px, 100%);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 62% 50%;
	border-radius: 50%;
}
/* J35, Newborn Care Classes: "the top of this one seems to have weird blank space": the title and its opening line sit a normal step apart, and the opening line is
 * followed by the next band at the same step instead of two section gaps. */
.cx-top-tight .cx-section.cx-intro { padding-top: 0; padding-bottom: 28px; }

/* SST-783 (the client, 28 Oct 2026, requests 6 to 8, 12): the doula pages. build/pack/sst783_christine_doula.py names each page that carries a class below. */
/* Request 6, Become a doula: two buttons side by side, the events link under them. */
.src-page .audience-hero .hero-actions-stacked { flex-direction: column; align-items: flex-start; gap: 16px; }
.src-page .audience-hero .hero-button-row { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.src-page .audience-hero .hero-button-row .button { margin: 0; }
/* Request 7, Become a doula: "Doing both?" is a deal box, not a quiet note. */
.src-page .fit-aside.fit-aside-deal { background: var(--ink); color: var(--white); padding: 34px 38px; box-shadow: 0 14px 34px rgba(24, 53, 76, .28); }
.src-page .fit-aside.fit-aside-deal h3 { color: var(--white); font-size: 34px; margin-bottom: 12px; }
.src-page .fit-aside.fit-aside-deal p { color: var(--white); font-size: 20px; }
.src-page .fit-aside.fit-aside-deal .deal-badge { display: inline-block; margin: 0 0 14px; padding: 5px 14px; border-radius: 999px; background: var(--blue); color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.src-page .fit-aside.fit-aside-deal .button { background: var(--white); color: var(--ink); margin-top: 6px; }
.src-page .fit-aside.fit-aside-deal .button:hover { background: var(--cloud); color: var(--ink); }
/* Request 8 (EXPERIMENT), Become a doula: the list and the hoops box on the left, the Learn-about video in the blank space on the right. */
.src-page .fit-section-experiment .who-main { display: grid; gap: 28px; align-content: start; }
.src-page .fit-section-experiment .who-video h3 { margin: 0 0 12px; font-size: 26px; }
.src-page .fit-section-experiment .who-video .video-frame { margin: 0; }
/* Request 12, Recertify: the three doulas' videos, smaller, in one row. */
.src-page .video-band-three .video-grid { grid-template-columns: repeat(3, minmax(0, 340px)); }
@media (max-width: 900px) {
	.src-page .video-band-three .video-grid { grid-template-columns: minmax(0, 460px); }
	.src-page .fit-aside.fit-aside-deal { padding: 26px 24px; }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------
 * SST-783 (the client, 28 Oct 2026): build/pack/sst783_christine1028.py names each page that carries a marker below.
 * --------------------------------------------------------------------------------------------------------------------------------------------- */

/* R17, Certified Doula Trainings ("a way to make the video a bit bigger"): the opening video is drawn at 760px (the band's other videos stay at 460px). */
.video-grid-landscape.video-grid-large {
	grid-template-columns: minmax(0, 760px);
}

/* R16: the opening line and the two buttons now sit under the check marks (the page's spacing rules above kept the line tight under the page title). */
.cx-trainings-spaced .cx-section.cx-intro-actions {
	padding-top: 56px;
	padding-bottom: 56px;
}

.cx-trainings-spaced .video-frame figcaption {
	text-align: center;
}

/* R19 ("the bundle and save section could have bigger font to take up more space in the blue box"). */
.cx-blurb-bundle h3 {
	font-size: clamp(36px, 4.4vw, 56px);
	line-height: 1.1;
	margin-bottom: 8px;
}

.cx-blurb-bundle p {
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.5;
}

.cx-blurb-bundle > p:first-of-type {
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 600;
	color: var(--ink);
}

.cx-blurb-bundle .button {
	min-height: 60px;
	padding-inline: 32px;
	font-size: 20px;
}

.cx-blurb-bundle .text-link {
	font-size: 19px;
}

/* R18 ("crop the birth doula training photo so that it has less empty space at the top and more of their bodies on the bottom"): the photograph is drawn
 * about 14% larger from its bottom edge, so the bare wall above the two people is cropped and they fill the frame down to the bottom of the file. */
.cx-img-uniform:has(img[src*="card-labor-doula-training"]) {
	overflow: hidden;
	border-radius: 16px;
}

.cx-img-uniform img[src*="card-labor-doula-training"] {
	transform: scale(1.14);
	transform-origin: 50% 100%;
}

/* The Labor and Postpartum covers on /certified-doula-trainings/ ("the Birth and postpartum workbooks the same size"): two cards of one width and one height, a cover
 * drawn in the same frame in each, and a caption of the same height under it (the Postpartum caption wraps on a phone). */
.cx-workbook-covers-pair li {
	flex: 0 1 300px;
	display: flex;
	flex-direction: column;
	padding: 22px;
}

.cx-workbook-covers-pair figure {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.cx-workbook-covers-pair img {
	width: 100%;
	height: 260px;
	max-height: none;
	object-fit: contain;
	box-shadow: none;
}

.cx-workbook-covers-pair figcaption {
	margin-top: 16px;
	min-height: 2.6em;
}

@media (max-width: 760px) {
	.cx-workbook-covers-pair {
		flex-wrap: nowrap;
		gap: 12px;
	}

	.cx-workbook-covers-pair li {
		flex: 1 1 0;
		max-width: 170px;
		padding: 10px;
	}

	.cx-workbook-covers-pair img {
		height: 150px;
	}

	.cx-workbook-covers-pair figcaption {
		font-size: 14px;
	}
}

/* /doulas/ "Considering a doula career?": the button and the link under it are two items of one row with a clear gap (they touched), and wrap on a phone. */
.webinar-panel.wrap > div:last-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
}

.webinar-panel.wrap > div:last-child > p {
	flex: 1 1 100%;
	margin: 0;
}

/* SST-783 whole-site pass (28 Oct 2026): consistency rules that hold on every page.
 * A row made only of boxed cards has cards of one height, whatever the words in each (Breastfeeding Classes, Birth Doula Trainings, Clases en español, Cross Certification). */
.cx-cols:not(:has(> :not(.cx-card))) { align-items: stretch; }
/* A product picture in a storefront list keeps its own shape inside its square (the portrait workbook cover was squeezed square). */
body.bbu-v2 .woocommerce ul.products li.product a img { object-fit: contain; background: var(--cloud); border-radius: 8px; }

/* SST-355 composition revision (29 Oct 2026): the two recomposed pages. Source of truth: composition-revision/design/composition.css (same rules). */
/*
 * SST-355 composition revision: Certified Doula Trainings + How to Become a Doula webinar.
 *
 * Every rule is scoped to content that carries data-bbu-layout="cr" (the two named pages),
 * plus one opt-in review-wall modifier (.lp-review-wall-columns). Nothing here restyles
 * another page. Tokens are the existing BBU V2 ones from home.css (:root):
 *   --ink #18354c  --text #39424f  --cloud #edf3f9  --line #c9d4df  --cta #3975b8  --radius 16px
 *   League Spartan 600 headings, Proxima Nova 18px/1.55 body.
 *
 * The layout system (one rule, not "all left" or "all centred"):
 *   1. One shell: .wrap = min(1240px, 100% - 80px). Title, section headings, splits and grids
 *      all sit on that shell, so the left edge of the H1 is the left edge of every split.
 *   2. Split bands (text + media, heading + list): two shell columns, text left-aligned,
 *      paragraphs held to a reading measure, media fills the other column. Sides alternate.
 *   3. Showcase bands (promise + actions, testimonial clips, written reviews, offer, workbooks):
 *      centred heading block over a centred group on the same shell centre line.
 *      A showcase never pairs a left heading with a centred row.
 *   4. Bands alternate white / cloud for pacing.
 */

/* ---------------------------------------------------------------- page title */

main:has([data-bbu-layout="cr"]) > .page-hero { padding-block: 56px 36px; }
main:has([data-bbu-layout="cr"]) > .page-hero .wrap { max-width: none; }
main:has([data-bbu-layout="cr"]) > .page-hero h1 { max-width: 1120px; margin-bottom: 0; }
@media (max-width: 600px) {
	main:has([data-bbu-layout="cr"]) > .page-hero { padding-block: 32px 24px; }
	main:has([data-bbu-layout="cr"]) > .page-hero h1 { font-size: clamp(31px, 8.4vw, 38px); line-height: 1.08; }
}

/* ---------------------------------------------------------------- bands */

[data-bbu-layout="cr"] .cr-band { padding-block: 80px; }
[data-bbu-layout="cr"] .cr-band.tone-cloud { background: var(--cloud); }
[data-bbu-layout="cr"] .cr-band.cr-band-tight { padding-block: 56px; }
@media (max-width: 600px) {
	[data-bbu-layout="cr"] .cr-band { padding-block: 44px; }
	[data-bbu-layout="cr"] .cr-band.cr-band-tight { padding-block: 36px; }
}

/* Centred heading block for showcase bands. */
[data-bbu-layout="cr"] .cr-head { max-width: 820px; margin: 0 auto 36px; text-align: center; }
[data-bbu-layout="cr"] .cr-head h2 { margin: 0 0 12px; font-size: clamp(32px, 3.2vw, 46px); }
[data-bbu-layout="cr"] .cr-head p { max-width: 60ch; margin: 0 auto; font-size: 19px; }
[data-bbu-layout="cr"] .cr-head > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
	[data-bbu-layout="cr"] .cr-head { margin-bottom: 26px; }
	[data-bbu-layout="cr"] .cr-head h2 { font-size: 30px; }
	[data-bbu-layout="cr"] .cr-head p { font-size: 17px; }
}

/* ---------------------------------------------------------------- splits */

[data-bbu-layout="cr"] .cr-split { display: grid; gap: 56px; align-items: center; }
[data-bbu-layout="cr"] .cr-split-6-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-bbu-layout="cr"] .cr-split-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
[data-bbu-layout="cr"] .cr-split-4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
[data-bbu-layout="cr"] .cr-split-text > :first-child { margin-top: 0; }
[data-bbu-layout="cr"] .cr-split-text > :last-child { margin-bottom: 0; }
[data-bbu-layout="cr"] .cr-split-text h2 { margin: 0 0 16px; font-size: clamp(30px, 2.8vw, 42px); }
[data-bbu-layout="cr"] .cr-split-text p { max-width: 58ch; }
[data-bbu-layout="cr"] .cr-split-media img,
[data-bbu-layout="cr"] .cr-split-media video { display: block; width: 100%; height: auto; border-radius: var(--radius); }
[data-bbu-layout="cr"] .cr-split-media figure { margin: 0; }
/* Media on the left on desktop while the reading order stays text-first. */
[data-bbu-layout="cr"] .cr-media-left > .cr-split-media { order: -1; }
@media (max-width: 900px) {
	[data-bbu-layout="cr"] .cr-split,
	[data-bbu-layout="cr"] .cr-split-6-6,
	[data-bbu-layout="cr"] .cr-split-5-7,
	[data-bbu-layout="cr"] .cr-split-4-8 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	[data-bbu-layout="cr"] .cr-media-left > .cr-split-media { order: 0; }
}
@media (max-width: 600px) {
	[data-bbu-layout="cr"] .cr-split-text h2 { font-size: 28px; }
}

/* ================================================================ WEBINAR */

/* Archive notice: one full-shell strip, message left, action right. */
[data-bbu-layout="cr"] .cr-open .event-archive {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center;
	margin: 0 0 56px; padding: 26px 32px; background: var(--cloud); border: 1px solid var(--line);
	border-left: 4px solid var(--cta); border-radius: 16px;
}
[data-bbu-layout="cr"] .cr-open .event-archive h2 { grid-column: 1; margin: 0 0 6px; font-size: 26px; }
[data-bbu-layout="cr"] .cr-open .event-archive p { grid-column: 1; max-width: 70ch; margin: 0; }
[data-bbu-layout="cr"] .cr-open .event-archive p:has(> .button) { grid-column: 2; grid-row: 1 / span 2; }
[data-bbu-layout="cr"] .cr-open .event-archive .button { color: var(--white); text-decoration: none; white-space: nowrap; }

[data-bbu-layout="cr"] .cr-open .cr-split-text h2 { font-size: clamp(30px, 2.7vw, 40px); line-height: 1.1; }
[data-bbu-layout="cr"] .cr-open .cr-split-text p { font-size: 19px; line-height: 1.6; margin: 0 0 18px; }
[data-bbu-layout="cr"] .cr-open p.event-when {
	display: inline-block; margin: 6px 0 0; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px;
	background: var(--white); font-size: 18px; font-weight: 600; color: var(--ink);
}
[data-bbu-layout="cr"] .cr-open .cr-split-media img { aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 18px 40px rgba(24, 53, 76, .12); }
@media (max-width: 900px) {
	[data-bbu-layout="cr"] .cr-open .event-archive { grid-template-columns: minmax(0, 1fr); row-gap: 14px; margin-bottom: 36px; padding: 22px 20px; }
	[data-bbu-layout="cr"] .cr-open .event-archive p:has(> .button) { grid-column: 1; grid-row: auto; }
	[data-bbu-layout="cr"] .cr-open .event-archive h2 { font-size: 23px; }
}
@media (max-width: 600px) {
	[data-bbu-layout="cr"] .cr-open .cr-split-text h2 { font-size: 26px; }
	[data-bbu-layout="cr"] .cr-open .cr-split-text p { font-size: 17px; }
	[data-bbu-layout="cr"] .cr-open p.event-when { font-size: 16px; }
}

/* Agenda: eight numbered topic cards, photo + topic + line, 4 x 2 on desktop. */
[data-bbu-layout="cr"] .cr-agenda-grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
	margin: 0; padding: 0; list-style: none; counter-reset: cr-topic;
}
[data-bbu-layout="cr"] .cr-agenda-grid > li {
	position: relative; display: flex; flex-direction: column; margin: 0; overflow: hidden;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
	counter-increment: cr-topic;
}
[data-bbu-layout="cr"] .cr-agenda-grid > li::before {
	content: counter(cr-topic, decimal-leading-zero); position: absolute; top: 12px; left: 12px; z-index: 1;
	min-width: 40px; height: 40px; padding: 0 8px; display: flex; align-items: center; justify-content: center;
	border-radius: 999px; background: var(--white); color: var(--ink);
	font-family: 'League Spartan', sans-serif; font-weight: 600; font-size: 17px; line-height: 1;
	box-shadow: 0 4px 12px rgba(24, 53, 76, .16);
}
[data-bbu-layout="cr"] .cr-agenda-grid figure { margin: 0; }
[data-bbu-layout="cr"] .cr-agenda-grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
[data-bbu-layout="cr"] .cr-agenda-grid h3 { margin: 18px 20px 8px; font-size: 22px; line-height: 1.15; }
[data-bbu-layout="cr"] .cr-agenda-grid p { margin: 0 20px 22px; font-size: 16px; line-height: 1.5; }
@media (max-width: 1100px) {
	[data-bbu-layout="cr"] .cr-agenda-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phone: compact media rows so eight topics read as one list, not eight full-width photos. */
@media (max-width: 600px) {
	[data-bbu-layout="cr"] .cr-agenda-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	[data-bbu-layout="cr"] .cr-agenda-grid > li {
		display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr;
		column-gap: 14px; padding: 12px; align-items: start;
	}
	[data-bbu-layout="cr"] .cr-agenda-grid > li::before { top: 6px; left: 6px; min-width: 30px; height: 30px; font-size: 14px; }
	[data-bbu-layout="cr"] .cr-agenda-grid figure { grid-row: 1 / span 2; }
	[data-bbu-layout="cr"] .cr-agenda-grid img { aspect-ratio: 1 / 1; border-radius: 10px; }
	[data-bbu-layout="cr"] .cr-agenda-grid h3 { margin: 2px 0 4px; font-size: 19px; }
	[data-bbu-layout="cr"] .cr-agenda-grid p { margin: 0; font-size: 15.5px; }
}

/* About the session + Meet Anna: photo left with its label, session text right. */
[data-bbu-layout="cr"] .cr-anna { position: relative; margin: 0; }
[data-bbu-layout="cr"] .cr-anna h2 {
	position: absolute; left: 20px; bottom: 20px; z-index: 1; margin: 0; padding: 10px 20px 8px;
	background: var(--white); border-radius: 999px; font-size: 24px; line-height: 1.1;
	box-shadow: 0 6px 18px rgba(24, 53, 76, .18);
}
[data-bbu-layout="cr"] .cr-anna img { aspect-ratio: 3 / 2; object-fit: cover; }
[data-bbu-layout="cr"] .cr-session .cr-split-text p { font-size: 20px; line-height: 1.6; }
@media (max-width: 600px) {
	[data-bbu-layout="cr"] .cr-anna h2 { left: 12px; bottom: 12px; font-size: 20px; padding: 8px 16px 6px; }
	[data-bbu-layout="cr"] .cr-session .cr-split-text p { font-size: 17px; }
}

/* ================================================================ TESTIMONIALS (both pages) */

/* The testimonial band: centred heading, the three portrait clips in one row, written reviews below. */
[data-bbu-layout="cr"] .cr-voices { padding-block: 80px; }
[data-bbu-layout="cr"] .cr-voices .cr-head { margin-bottom: 36px; }
[data-bbu-layout="cr"] .cr-clips,
[data-bbu-layout="cr"] .cr-clips.vid-grid,
[data-bbu-layout="cr"] .cr-clips.video-grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; gap: 28px;
	max-width: none; margin: 0 auto;
}
[data-bbu-layout="cr"] .cr-clips > figure { margin: 0; min-width: 0; }
[data-bbu-layout="cr"] .cr-clips video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; }
[data-bbu-layout="cr"] .cr-clips figcaption { margin-top: 10px; text-align: center; font-size: 15px; line-height: 1.4; color: var(--slate); }
[data-bbu-layout="cr"] .cr-clips br { display: none; }
[data-bbu-layout="cr"] .cr-voices .lp-review-wall { margin-top: 56px; }
@media (max-width: 760px) {
	/* Phone: two clips side by side, the third centred under them; all three visible with their own controls. */
	[data-bbu-layout="cr"] .cr-clips,
	[data-bbu-layout="cr"] .cr-clips.vid-grid,
	[data-bbu-layout="cr"] .cr-clips.video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 460px; }
	[data-bbu-layout="cr"] .cr-clips > figure:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
	[data-bbu-layout="cr"] .cr-clips video { border-radius: 14px; }
	[data-bbu-layout="cr"] .cr-clips figcaption { font-size: 13.5px; }
	[data-bbu-layout="cr"] .cr-voices { padding-block: 48px; }
	[data-bbu-layout="cr"] .cr-voices .lp-review-wall { margin-top: 36px; }
}

/* Written reviews, opt-in "columns" layout of the existing static wall:
 * every review shown once, at full length, no marquee, no fade mask, no inner scrollbar.
 * Balanced masonry columns: 3 on desktop, 2 on tablet, 1 on phone. */
.lp-review-wall-columns .lp-review-row { display: block; columns: 3 300px; column-gap: 16px; }
.wrap .lp-review-wall-columns .lp-review-row { width: 100%; }
.lp-review-wall-columns .lp-review-card { display: flex; width: auto; margin: 0 0 16px; break-inside: avoid; }
.lp-review-wall-columns .lp-review-card blockquote.lp-review-long { max-height: none; overflow: visible; padding-right: 0; }
@media (max-width: 760px) {
	.lp-review-wall-columns .lp-review-row { columns: 1; width: calc(100% - 40px); }
	.wrap .lp-review-wall-columns .lp-review-row { width: 100%; }
	.lp-review-wall-columns .lp-review-card { padding: 16px 18px; }
}

/* ================================================================ TRAININGS */

/* Opening split: heading left, Anna's introduction video right. */
[data-bbu-layout="cr"] .cr-intro .video-grid { display: block; margin: 0; }
[data-bbu-layout="cr"] .cr-intro .video-frame figcaption { text-align: left; }
[data-bbu-layout="cr"] .cr-intro .cr-split-text h2 { font-size: clamp(34px, 3.4vw, 50px); }
[data-bbu-layout="cr"] .cr-intro .cr-split-text p { font-size: 20px; }
[data-bbu-layout="cr"] .cr-intro .video-frame video { box-shadow: 0 18px 40px rgba(24, 53, 76, .14); }

/* Promise + the two career buttons as one centred band. */
[data-bbu-layout="cr"] .cr-promise .cx-features { max-width: 1040px; margin-inline: auto; }
[data-bbu-layout="cr"] .cr-launch { max-width: 820px; margin: 48px auto 0; padding-top: 40px; border-top: 1px solid var(--line); text-align: center; }
[data-bbu-layout="cr"] .cr-launch h2 { margin: 0 0 22px; font-size: clamp(26px, 2.4vw, 34px); }
[data-bbu-layout="cr"] .cr-launch-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
[data-bbu-layout="cr"] .cr-launch-actions .cx-actions { margin: 0; }
[data-bbu-layout="cr"] .cr-launch-actions .button { min-width: 280px; }
@media (max-width: 600px) {
	[data-bbu-layout="cr"] .cr-launch { margin-top: 32px; padding-top: 28px; }
	[data-bbu-layout="cr"] .cr-launch h2 { font-size: 26px; }
	[data-bbu-layout="cr"] .cr-launch-actions { flex-direction: column; align-items: stretch; }
	[data-bbu-layout="cr"] .cr-launch-actions .button { min-width: 0; width: 100%; }
}

/* Two training cards keep their existing equal-card rules; the band only sets the pace. */
[data-bbu-layout="cr"] .cr-cards .cx-cards-even { gap: 32px; }

/* Bundle offer: one centred offer card on the cloud band, the workbooks follow on the same centre line. */
[data-bbu-layout="cr"] .cr-offer.cx-blurb {
	max-width: 900px; margin-inline: auto; padding: 48px 56px; text-align: center;
	background: var(--white); border: 1px solid var(--line); border-radius: 24px;
	box-shadow: 0 18px 40px rgba(24, 53, 76, .08);
}
[data-bbu-layout="cr"] .cr-offer.cx-blurb p { max-width: 58ch; margin-inline: auto; }
/* Primary button on its own line, the two "See the ..." links paired beneath it. */
[data-bbu-layout="cr"] .cr-offer.cx-blurb .cx-actions {
	display: grid; grid-template-columns: repeat(2, auto); justify-content: center; align-items: center;
	gap: 8px 28px; margin-top: 28px;
}
[data-bbu-layout="cr"] .cr-offer.cx-blurb .cx-actions .button { grid-column: 1 / -1; justify-self: center; margin-bottom: 4px; }
@media (max-width: 600px) {
	[data-bbu-layout="cr"] .cr-offer.cx-blurb { padding: 30px 20px; border-radius: 18px; }
	[data-bbu-layout="cr"] .cr-offer.cx-blurb .cx-actions { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	[data-bbu-layout="cr"] .cr-offer.cx-blurb .cx-actions .button { justify-self: stretch; }
	[data-bbu-layout="cr"] .cr-offer.cx-blurb .cx-actions .text-link { justify-self: center; }
}
[data-bbu-layout="cr"] .cr-workbook.cx-section.cx-workbook { padding-block: 72px; }

/* Reviews band on the training page: centred heading over the full-length columns. */
[data-bbu-layout="cr"] .cx-reviews.cr-reviews .lp-review-wall { margin-top: 0; }

/* Trainer: larger photo, centred against the three credential groups. */
[data-bbu-layout="cr"] .cr-trainer .cx-c13-23 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
@media (max-width: 900px) {
	[data-bbu-layout="cr"] .cr-trainer .cx-c13-23 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* FAQ split (webinar) and offerings split (trainings): heading column left, list right. */
[data-bbu-layout="cr"] .cr-faq .prose { max-width: none; }
[data-bbu-layout="cr"] .cr-faq .faq-accordion { margin: 0; }
[data-bbu-layout="cr"] .cr-faq .event-archive-next { margin: 8px 0 0; }
[data-bbu-layout="cr"] .cr-offerings .hub-list { border-top: 1px solid var(--line); }

/* Webinar closing band: the registration journey ("Your doula journey starts here" and the form). An archived webinar has none of it, so the empty band is not drawn. */
[data-bbu-layout="cr"] .cr-close { padding-block: 64px; }
[data-bbu-layout="cr"] .cr-close .wrap { max-width: 820px; }
[data-bbu-layout="cr"] .cr-close:has(> .wrap:empty) { display: none; }

/* SST-1420 (3 Nov 2026 meeting): the Team training view of the professional programs page says how an agency owner trains their team (affiliate, discount). */
.team-offer {
	padding-block: 8px 24px;
}

.team-offer-box {
	padding: 30px 34px;
	background: var(--cloud);
	border-radius: 16px;
}

.team-offer-box h2 {
	margin: 0 0 12px;
	font-size: clamp(26px, 2.6vw, 34px);
}

.team-offer-box p {
	max-width: 68ch;
	margin: 0 0 14px;
}

.team-offer-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin: 18px 0 0;
}

/* SST-1420: the "Grow my agency now" button under the centred package questions on Thrive sits on the same axis as them (only on that page: its section is #package). */
#package .cx-actions {
	justify-content: center;
}