/**
 * Caregiving+™ model (theme 0.13.0). Loaded on Caregiving+ V2 and Home V2
 * only (inc/v2-pages.php), so theme.css and every other page stay as they are.
 *
 * 1. Caregiving+ V2 (blocks/cpv2-pillars): a raised Caregiving+™ hub with
 *    three substantial panels, each holding the full content of one pillar
 *    and joined to the hub by its own coloured branch. From 1280px (0.13.0):
 *    the hub on top and the three equal panels side by side beneath it, so
 *    the hub, branches and all three headings fit one desktop window. Below 1280px: the hub, then the panels stacked, with three rails
 *    leaving the hub side by side down the left edge, each turning into its
 *    own panel. The panels open together, once (.cpm-folded → .cpm-open, set
 *    by the script in render.php). Only transforms, opacity and clipping
 *    move, so the layout never shifts. Without that script, or with reduced
 *    motion, the model is simply open.
 * 2. Home V2 (blocks/hv2-difference): the round Caregiving+™ badge, with the
 *    "Discover" cue inside it, is one link to the model. The pillar circles
 *    and detail cards carry the same three colours.
 */

/* ---------- Pillar colours, shared by both pages ---------- */

.cpm-nurse,
.cpm-rail-nurse,
.cpm-branch-nurse,
.hv2-tone-nurse {
	--cpm-tone: #4a0e56;
	--cpm-edge: #2c0634;
	--cpm-tint: #f4ecf6;
	--cpm-soft: #e2d3e8;
}

.cpm-training,
.cpm-rail-training,
.cpm-branch-training,
.hv2-tone-training {
	--cpm-tone: #c2187a;
	--cpm-edge: #860d53;
	--cpm-tint: #fdeef6;
	--cpm-soft: #f6c9df;
}

.cpm-support,
.cpm-rail-support,
.cpm-branch-support,
.hv2-tone-support {
	--cpm-tone: #0e6b73;
	--cpm-edge: #07454b;
	--cpm-tint: #e8f4f4;
	--cpm-soft: #bfe0e2;
}

/* ---------- 1. Caregiving+ V2: the model ---------- */

.cpm {
	--cpm-hub: 11rem;
	--cpm-gap: 2.75rem;
	--cpm-rail: 1.875rem;
	--cpm-lw: 0.1875rem;
	--cpm-entry: 2.5rem;
	background: #fff8fa;
}

.cpm-stage {
	position: relative;
	margin-top: 2.5rem;
}

/* Hub: a raised purple disc in a white and pink ring on a lavender halo. */
.cpm-hub {
	position: relative;
	z-index: 2;
	width: var(--cpm-hub);
	aspect-ratio: 1;
	margin-inline: auto;
}

.cpm-hub-face {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	background-color: var(--color-brand);
	background-image: radial-gradient(circle at 34% 26%, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 58%);
	color: #fff;
	box-shadow:
		inset 0 -0.5rem 0 rgb(30 4 36 / 0.32),
		inset 0 0.125rem 0 rgb(255 255 255 / 0.18),
		0 0 0 0.3125rem #fff,
		0 0 0 0.5rem var(--color-accent),
		0 0 0 1.125rem #f1e8f4,
		0 1.75rem 2.5rem -0.5rem rgb(74 14 86 / 0.42);
}

.cpm-hub-label {
	/* The brand grows with the hub. */
	font-size: calc(var(--cpm-hub) * 0.14);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.025em;
	white-space: nowrap;
}

/* Branches (desktop) and rails (phones, tablets): one colour per pillar. */
.cpm-branch {
	display: none;
}

.cpm-rail {
	position: absolute;
	z-index: 1;
	border: 0 solid var(--cpm-tone);
}

/* Rails run down the left edge, outermost first: 24/7 Support, Caregiver
   Training, Nurse Oversight (innermost, as it turns off first). */
.cpm-rail-support {
	--cpm-x: 0rem;
	--cpm-dy: -0.5rem;
	--cpm-r: 1.75rem;
}

.cpm-rail-training {
	--cpm-x: 0.5rem;
	--cpm-dy: 0rem;
	--cpm-r: 1.25rem;
}

.cpm-rail-nurse {
	--cpm-x: 1rem;
	--cpm-dy: 0.5rem;
	--cpm-r: 0.75rem;
}

/* Leaving the hub: from its left side, round a corner, down to the panels. */
.cpm-rail-start {
	top: calc(var(--cpm-hub) / 2 + var(--cpm-dy));
	right: calc(50% + var(--cpm-hub) / 2 - 1.5rem);
	left: var(--cpm-x);
	height: calc(var(--cpm-hub) / 2 - var(--cpm-dy));
	border-top-width: var(--cpm-lw);
	border-left-width: var(--cpm-lw);
	border-top-left-radius: var(--cpm-r);
}

/* Beside a panel: a later panel's rail passing by. */
.cpm-rail-pass {
	top: calc(-1 * var(--cpm-gap));
	bottom: 0;
	left: var(--cpm-x);
	width: var(--cpm-lw);
	background: var(--cpm-tone);
}

/* Beside a panel: its own rail, turning into it and ending in a dot. */
.cpm-rail-end {
	top: calc(-1 * var(--cpm-gap));
	left: var(--cpm-x);
	width: calc(var(--cpm-rail) - var(--cpm-x));
	height: calc(var(--cpm-gap) + var(--cpm-entry));
	border-bottom-width: var(--cpm-lw);
	border-left-width: var(--cpm-lw);
	border-bottom-left-radius: 0.625rem;
}

.cpm-rail-end::after,
.cpm-branch::after {
	content: "";
	position: absolute;
	width: 1rem;
	height: 1rem;
	border-radius: 9999px;
	background: var(--cpm-tone);
	box-shadow: 0 0 0 0.1875rem #fff;
}

.cpm-rail-end::after {
	right: -0.5rem;
	bottom: calc(-0.5rem - var(--cpm-lw) / 2);
}

/* Panels. */
.cpm-panel {
	position: relative;
	scroll-margin-top: 0.75rem;
	margin-top: var(--cpm-gap);
	padding-left: var(--cpm-rail);
}

.cpm-card {
	position: relative;
	overflow: hidden;
	border-radius: 1.25rem;
	background: #fff;
	box-shadow:
		0 0 0 1px rgb(74 14 86 / 0.1),
		0 0.4375rem 0 var(--cpm-edge),
		0 1.75rem 2.75rem -1.25rem rgb(31 26 36 / 0.42);
}

/* Head band: the pillar's colour, icon, name and the panel's headline. */
.cpm-card-head {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	align-items: center;
	gap: 0.875rem;
	padding: 1rem 1.125rem 1.125rem;
	background-color: var(--cpm-tone);
	background-image: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0) 70%);
	color: #fff;
	box-shadow: inset 0 -0.1875rem 0 rgb(0 0 0 / 0.14);
}

.cpm-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.875rem;
	background: #fff;
	color: var(--cpm-tone);
	box-shadow: 0 0.1875rem 0 var(--cpm-edge), 0 0.5rem 1rem -0.375rem rgb(0 0 0 / 0.35);
}

/* Pillar name = the bold primary heading; the headline under it is the
   regular-weight secondary line (Seth 2026-11-04, theme 0.15.1). */
.cpm-card-title {
	font-size: 1.25rem;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: #fff;
	text-wrap: balance;
}

.cpm-card-headline {
	margin-top: 0.3125rem;
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 400;
	color: rgb(255 255 255 / 0.9);
	text-wrap: balance;
}

/* The pillar's full content. */
.cpm-body {
	padding: 1.25rem 1.125rem 1.5rem;
}

.cpm-lead {
	font-size: 1.125rem;
	line-height: 1.4;
	color: #4b4453;
}

.cpm-points {
	display: grid;
	gap: 1rem 1.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.cpm-body > .cpm-points:first-child {
	margin-top: 0;
}

.cpm-point,
.cpm-extra {
	display: grid;
	align-content: start;
	grid-template-columns: 3rem minmax(0, 1fr);
	column-gap: 0.875rem;
}

.cpm-point-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.5rem;
	background: var(--cpm-tint);
	color: var(--cpm-tone);
}

.cpm-point-icon-solid {
	background: var(--cpm-tone);
	color: #fff;
}

.cpm-point-title {
	font-size: 1.125rem;
	line-height: 1.375;
	font-weight: 700;
	color: var(--color-ink);
}

.cpm-point-body {
	margin-top: 0.125rem;
	font-size: 1rem;
	line-height: 1.375;
	color: #4b4453;
}

.cpm-note {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid #e4dfe9;
	font-size: 1rem;
	line-height: 1.375;
	color: #4b4453;
}

.cpm-extra {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0.75rem;
	margin-top: 1rem;
	padding: 1rem;
	border: 1px solid var(--cpm-soft);
	border-radius: 0.75rem;
	background: var(--cpm-tint);
}

.cpm-extra-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
}

.cpm-tag {
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	background: var(--color-accent-700);
	font-size: 0.875rem;
	line-height: 1.25;
	font-weight: 700;
	color: #fff;
}

.cpm-extra-body {
	color: var(--color-ink);
}

.cpm-more {
	display: inline-block;
	margin-top: 0.25rem;
	padding-block: 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-brand);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.cpm-more svg {
	display: inline-block;
	margin-left: 0.25rem;
	vertical-align: -0.25em;
}

.cpm-more:hover {
	text-decoration-color: var(--color-brand);
}

.cpm-more:focus-visible {
	border-radius: 0.25rem;
	outline: 3px solid var(--color-accent-700);
	outline-offset: 2px;
}

/* Caregiver Training: the approved 8 courses / 80% card. */
.cpm-stats-card {
	margin-top: 1.5rem;
	padding: 1rem;
	border: 1px solid #e4dfe9;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 18px 40px -28px rgb(50 8 59 / 0.45);
}

.cpm-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
}

.cpm-stat {
	padding: 1rem;
	border-radius: 0.75rem;
	background: #f1e8f4;
	color: var(--color-brand);
}

.cpm-stat dd {
	margin: 0;
}

.cpm-stat-solid {
	background: var(--color-brand);
	color: #fff;
}

.cpm-stat-figure {
	display: block;
	font-size: 3.25rem;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.04em;
}

.cpm-stat-label {
	display: block;
	margin-top: 0.5rem;
	font-size: 1rem;
	line-height: 1.375;
	font-weight: 700;
	color: var(--color-ink);
}

.cpm-stat-solid .cpm-stat-label {
	color: rgb(255 255 255 / 0.9);
}

.cpm-courses-title {
	margin-top: 1.25rem;
}

.cpm-courses {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.cpm-courses li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--color-lilac);
	border-radius: 9999px;
	background: #fff8fa;
	font-size: 1rem;
	line-height: 1.25;
	font-weight: 600;
	white-space: nowrap;
	color: var(--color-brand);
}

.cpm-courses svg {
	color: var(--color-accent-700);
}

.cpm-family {
	margin-top: 1.5rem;
}

@media (min-width: 640px) {
	.cpm {
		--cpm-hub: 15rem;
		--cpm-gap: 3.5rem;
		--cpm-rail: 2.25rem;
		--cpm-lw: 0.25rem;
		--cpm-entry: 2.75rem;
	}

	/* Stacked panels keep a comfortable line length on wide tablets. */
	.cpm-stage {
		max-width: 52rem;
		margin-inline: auto;
	}

	.cpm-rail-support {
		--cpm-x: 0.125rem;
	}

	.cpm-rail-training {
		--cpm-x: 0.625rem;
	}

	.cpm-rail-nurse {
		--cpm-x: 1.125rem;
	}

	.cpm-card {
		border-radius: 1.5rem;
	}

	.cpm-card-head {
		padding: 1.25rem 1.75rem 1.375rem;
		column-gap: 1rem;
	}

	.cpm-card-title {
		font-size: 1.5rem;
	}

	.cpm-card-headline {
		font-size: 1.0625rem;
	}

	.cpm-body {
		padding: 1.75rem 1.75rem 2rem;
	}

	.cpm-lead {
		font-size: 1.25rem;
	}

	.cpm-point-title {
		font-size: 1.25rem;
	}

	.cpm-point-body {
		font-size: 1.0625rem;
	}

	.cpm-extra {
		grid-template-columns: 3rem minmax(0, 1fr);
		padding: 1.25rem;
	}

	.cpm-stats-card {
		padding: 1.5rem;
	}

	.cpm-stats {
		gap: 1rem;
	}

	.cpm-stat {
		padding: 1.25rem 1.5rem;
	}

	.cpm-stat-figure {
		font-size: 4rem;
	}

	.cpm-stat-label {
		font-size: 1.125rem;
	}
}

/* Two columns of points where a panel is wide enough. */
@media (min-width: 768px) {
	.cpm-points-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* From 1280px (0.13.0, approved Nov 2, 2026): the Caregiving+™ hub on top,
   centred, and the three panels side by side beneath it (Nurse Oversight,
   Caregiver Training, 24/7 Support), each joined to the hub by its own
   coloured branch: the pink branch drops straight down from the hub into the
   middle panel; the purple and teal branches leave the hub's sides, run out
   above the outer panels and turn down into them. This keeps the hub, every
   branch and all three panel headings in one desktop window (1280×720 and
   up, below the sticky header); the panels' detailed content continues
   below. The three panels share one height (one grid row). Text stays at
   16px or larger. Narrower screens use the stacked layout above. */
@media (min-width: 1280px) {
	.cpm {
		--cpm-hub: clamp(15rem, 17.5vw, 17rem);
		--cpm-ring: 1.125rem;
		--cpm-stem: 3.75rem;
		--cpm-cg: 1.75rem;
		--cpm-lw: 0.5rem;
		--cpm-dot: 1.375rem;
		/* Height of the hub with its rings, and the hub's centre line. */
		--cpm-top: calc(var(--cpm-hub) + 2 * var(--cpm-ring));
		--cpm-mid: calc(var(--cpm-ring) + var(--cpm-hub) / 2);
		/* Centre of an outer panel, from the stage's edge. */
		--cpm-col: calc((100% - 2 * var(--cpm-cg)) / 6);
		padding-block: 2rem 2.75rem;
		/* Arriving at #caregiving-plus-model (Home V2's badge) skips most of
		   the top padding, so the hub and headings are in view. */
		scroll-margin-top: -1rem;
	}

	.cpm h2 {
		font-size: 1.625rem;
		line-height: 1.1;
		text-align: center;
		color: var(--color-brand);
	}

	.cpm-stage {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: var(--cpm-top) var(--cpm-stem) auto;
		column-gap: var(--cpm-cg);
		max-width: none;
		margin: 1rem 0 0;
	}

	.cpm-hub {
		grid-area: 1 / 1 / 2 / 4;
		align-self: center;
		justify-self: center;
		margin: 0;
	}

	/* The rings scale with the hub; the lavender halo is the outer ring. */
	.cpm-hub-face {
		box-shadow:
			inset 0 -0.875rem 0 rgb(30 4 36 / 0.32),
			inset 0 0.1875rem 0 rgb(255 255 255 / 0.18),
			0 0 0 0.5rem #fff,
			0 0 0 0.8125rem var(--color-accent),
			0 0 0 var(--cpm-ring) #f1e8f4,
			0 2.75rem 4rem -0.75rem rgb(74 14 86 / 0.45);
	}

	.cpm-rail {
		display: none;
	}

	.cpm-panel {
		display: flex;
		grid-row: 3;
		margin: 0;
		padding: 0;
		scroll-margin-top: 1rem;
	}

	.cpm-nurse {
		grid-column: 1;
	}

	.cpm-training {
		grid-column: 2;
	}

	.cpm-support {
		grid-column: 3;
	}

	.cpm-card {
		display: flex;
		flex: 1;
		flex-direction: column;
		border-radius: 1.125rem;
	}

	/* Branches, ending in a dot on the panel's top edge. */
	.cpm-branch {
		display: block;
		position: absolute;
		z-index: 1;
		grid-area: auto;
		border: 0 solid var(--cpm-tone);
	}

	.cpm-branch-training {
		top: calc(var(--cpm-top) - var(--cpm-ring));
		left: calc(50% - var(--cpm-lw) / 2);
		width: var(--cpm-lw);
		height: calc(var(--cpm-stem) + var(--cpm-ring));
		border-radius: 9999px;
		background: var(--cpm-tone);
	}

	.cpm-branch-nurse,
	.cpm-branch-support {
		top: calc(var(--cpm-mid) - var(--cpm-lw) / 2);
		height: calc(var(--cpm-top) - var(--cpm-mid) + var(--cpm-stem) + var(--cpm-lw) / 2);
		border-top-width: var(--cpm-lw);
	}

	.cpm-branch-nurse {
		left: calc(var(--cpm-col) - var(--cpm-lw) / 2);
		right: calc(50% + var(--cpm-hub) / 2);
		border-left-width: var(--cpm-lw);
		border-top-left-radius: 1.5rem;
	}

	.cpm-branch-support {
		left: calc(50% + var(--cpm-hub) / 2);
		right: calc(var(--cpm-col) - var(--cpm-lw) / 2);
		border-right-width: var(--cpm-lw);
		border-top-right-radius: 1.5rem;
	}

	.cpm-branch::after {
		bottom: calc(-1 * var(--cpm-dot) / 2);
		width: var(--cpm-dot);
		height: var(--cpm-dot);
		box-shadow: 0 0 0 0.25rem #fff;
	}

	.cpm-branch-training::after {
		left: calc(50% - var(--cpm-dot) / 2);
	}

	.cpm-branch-nurse::after {
		left: calc(-1 * var(--cpm-dot) / 2 - var(--cpm-lw) / 2);
	}

	.cpm-branch-support::after {
		right: calc(-1 * var(--cpm-dot) / 2 - var(--cpm-lw) / 2);
	}

	/* Head band: pillar name and headline, first thing under each branch. */
	.cpm-card-head {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		column-gap: 0.875rem;
		min-height: 5.5rem;
		padding: 0.75rem 1.25rem 0.875rem;
	}

	.cpm-card-icon {
		width: 2.75rem;
		height: 2.75rem;
		border-radius: 0.75rem;
	}

	.cpm-card-icon svg {
		width: 1.5rem;
		height: 1.5rem;
	}

	.cpm-card-title {
		font-size: 1.25rem;
		line-height: 1.15;
	}

	.cpm-card-headline {
		margin-top: 0.25rem;
		font-size: 1rem;
		text-wrap: pretty;
	}

	/* Content: one column per panel, the same rhythm in all three. Extra
	   height in the shorter panels collects at the bottom. */
	.cpm-body {
		flex: 1;
		padding: 1.125rem 1.25rem 1.375rem;
	}

	.cpm-lead {
		margin-bottom: 0.875rem;
		font-size: 1.0625rem;
		line-height: 1.45;
	}

	.cpm-points,
	.cpm-points-2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.875rem;
		margin-top: 0;
	}

	.cpm-point {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		column-gap: 0.75rem;
	}

	.cpm-point-icon {
		width: 2.5rem;
		height: 2.5rem;
	}

	.cpm-point-icon svg {
		width: 1.375rem;
		height: 1.375rem;
	}

	.cpm-point-title {
		font-size: 1.0625rem;
		line-height: 1.3;
	}

	.cpm-point-body {
		font-size: 1rem;
		line-height: 1.45;
	}

	.cpm-note {
		margin-top: 1rem;
		padding-top: 0.875rem;
		line-height: 1.45;
	}

	/* RN Medication Management and Families Stay Informed. */
	.cpm-extra {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		column-gap: 0.75rem;
		margin-top: 0.875rem;
		padding: 0.875rem 1rem;
	}

	.cpm-extra .cpm-point-icon {
		width: 2.5rem;
		height: 2.5rem;
	}

	.cpm-extra-head {
		gap: 0.375rem 0.625rem;
	}

	.cpm-tag {
		padding: 0.125rem 0.5rem;
	}

	.cpm-more {
		font-size: 1rem;
		text-underline-offset: 5px;
	}

	.cpm-family {
		margin-top: 1rem;
	}

	/* Caregiver Training: the two figures side by side, then the courses. */
	.cpm-stats-card {
		margin-top: 1rem;
		padding: 0.875rem;
		border-radius: 0.875rem;
	}

	.cpm-stats {
		gap: 0.625rem;
	}

	.cpm-stat {
		padding: 0.75rem 0.875rem;
		border-radius: 0.625rem;
	}

	.cpm-stat-figure {
		font-size: 2.5rem;
	}

	.cpm-stat-label {
		margin-top: 0.25rem;
		font-size: 1rem;
		line-height: 1.25;
	}

	.cpm-courses-title {
		margin-top: 0.875rem;
		line-height: 1.3;
	}

	.cpm-courses {
		gap: 0.375rem;
		margin-top: 0.5rem;
	}

	.cpm-courses li {
		gap: 0.25rem;
		padding: 0.25rem 0.625rem;
	}

	.cpm-courses svg {
		width: 1rem;
		height: 1rem;
	}
}

/* RN Medication Management stays prominent (0.13.0): a stronger frame and a
   pink edge, so the separately billed service is never small print. */
.cpm-med {
	border-color: var(--color-accent);
	border-left-width: 0.3125rem;
	background: #fff;
	box-shadow: 0 0.75rem 1.75rem -1.25rem rgb(194 24 122 / 0.55);
}

.cpm-med .cpm-point-title {
	font-size: 1.1875rem;
	color: var(--color-brand);
}

/* The opening (0.14.0): once, about 3 seconds in all (Seth, Nov 3, 2026).
   0–0.6s the Caregiving+™ badge appears; 0.6–2.1s the three branches draw
   outward at a deliberate pace (the side branches run out, then turn down);
   2.1–3.0s all three panels, with their headings, fade and rise together.
   Phones and tablets: the same rhythm with the rails (badge, rails, panels).
   The script in blocks/cpv2-pillars/render.php starts it only when the hub
   is on screen and scrolling has settled. Reduced motion, no JavaScript or a
   script error: shown complete. */
@media (prefers-reduced-motion: no-preference) {
	.cpm-folded .cpm-hub-face {
		transition:
			opacity 0.5s ease,
			scale 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
	}

	.cpm-folded .cpm-panel {
		transition:
			opacity 0.8s ease 1.8s,
			transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.8s;
	}

	.cpm-folded .cpm-rail {
		clip-path: inset(-1rem);
		transition: clip-path 1.2s cubic-bezier(0.45, 0, 0.25, 1) 0.6s;
	}

	.cpm-folded:not(.cpm-open) .cpm-hub-face {
		opacity: 0;
		scale: 0.9;
	}

	.cpm-folded:not(.cpm-open) .cpm-panel {
		opacity: 0;
		transform: translateY(1rem);
	}

	.cpm-folded:not(.cpm-open) .cpm-rail {
		clip-path: inset(-1rem -1rem 100% -1rem);
	}

	.cpm-folded:not(.cpm-open) .cpm-rail-start {
		clip-path: inset(-1rem -1rem -1rem 100%);
	}

	@media (min-width: 1280px) {
		.cpm-folded .cpm-panel {
			transition:
				opacity 0.8s ease 2.1s,
				transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.1s;
		}

		.cpm-folded:not(.cpm-open) .cpm-panel {
			transform: translateY(0.875rem);
		}

		.cpm-folded .cpm-branch {
			clip-path: inset(-2rem);
		}

		.cpm-folded:not(.cpm-open) .cpm-branch-training {
			clip-path: inset(-2rem -2rem 100% -2rem);
		}

		.cpm-folded:not(.cpm-open) .cpm-branch-nurse {
			clip-path: inset(-2rem -2rem calc(100% - 2rem) 100%);
		}

		.cpm-folded:not(.cpm-open) .cpm-branch-support {
			clip-path: inset(-2rem 100% calc(100% - 2rem) -2rem);
		}

		.cpm-folded.cpm-open .cpm-branch-training {
			animation: cpm-drop 1s cubic-bezier(0.45, 0, 0.25, 1) 1.1s both;
		}

		.cpm-folded.cpm-open .cpm-branch-nurse {
			animation: cpm-out-left 1.5s cubic-bezier(0.45, 0, 0.35, 1) 0.6s both;
		}

		.cpm-folded.cpm-open .cpm-branch-support {
			animation: cpm-out-right 1.5s cubic-bezier(0.45, 0, 0.35, 1) 0.6s both;
		}
	}
}

@keyframes cpm-drop {
	from { clip-path: inset(-2rem -2rem 100% -2rem); }
	to { clip-path: inset(-2rem); }
}

/* Side branches: out of the hub along the top, then down into the panel. */
@keyframes cpm-out-left {
	0% { clip-path: inset(-2rem -2rem calc(100% - 2rem) 100%); }
	50% { clip-path: inset(-2rem -2rem calc(100% - 2rem) -2rem); }
	100% { clip-path: inset(-2rem); }
}

@keyframes cpm-out-right {
	0% { clip-path: inset(-2rem 100% calc(100% - 2rem) -2rem); }
	50% { clip-path: inset(-2rem -2rem calc(100% - 2rem) -2rem); }
	100% { clip-path: inset(-2rem); }
}

@media print {
	.cpm-panel,
	.cpm-rail,
	.cpm-branch,
	.cpm-hub-face {
		opacity: 1 !important;
		transform: none !important;
		scale: none !important;
		clip-path: none !important;
		animation: none !important;
	}
}

/* ---------- 2. Home V2: the badge link and the pillar colours ---------- */

/* The pillar circles are pictures; the badge is the only link. */
.hv2-node {
	pointer-events: none;
	scale: none;
}

/* Each circle in its pillar's colour, the same values as the Caregiving+ V2
   panels: the ring, icon and name in the colour on a light tint of it (all
   at least 5:1 contrast). */
.hv2-node[class*="hv2-tone-"] {
	border-width: 3px;
	border-color: var(--cpm-tone);
	background-color: var(--cpm-tint);
	color: var(--cpm-tone);
	box-shadow: 0 0 0 0.3rem #fff, 0 0 0 calc(0.3rem + 1px) var(--cpm-soft);
}

.hv2-node[class*="hv2-tone-"] .hv2-node-icon {
	color: var(--cpm-tone);
}

/* Each detail card: a top accent, icon tile and ticks in its colour, on the
   same light background. */
.hv2-panel[class*="hv2-tone-"] {
	border-top: 0.3125rem solid var(--cpm-tone);
}

.hv2-panel-icon {
	background-color: var(--cpm-tone);
}

.hv2-panel-check {
	color: var(--cpm-tone);
}

/* One link: the round badge on the model's core, with the cue inside it
   beneath the brand. */
.cpm-badge-link {
	position: absolute;
	left: 50%;
	z-index: 2;
	display: block;
	aspect-ratio: 1;
	border-radius: 9999px;
	translate: -50% 0;
	color: #fff;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.cpm-badge-link:focus-visible {
	outline: none;
}

.cpm-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.9cqw;
	width: 100%;
	height: 100%;
	padding-top: 2.2cqw;
	border-radius: 9999px;
	background: var(--color-brand);
	cursor: pointer;
	box-shadow:
		0 0 0 1.33cqw #fff,
		0 0 0 1.8cqw var(--color-accent),
		0 2.8cqw 4cqw -0.6cqw rgb(74 14 86 / 0.4);
	transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.cpm-badge-cue {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2rem 0.5rem 0.2rem 0.6875rem;
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: 9999px;
	background: rgb(255 255 255 / 0.1);
	font-size: clamp(0.8125rem, 2.75cqw, 1.0625rem);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: #fff;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Narrow phones: the cue without its pill, so it sits well inside the circle. */
@container (max-width: 330px) {
	.cpm-badge-cue {
		padding-inline: 0.125rem;
		border-color: transparent;
		background: transparent;
	}

	.cpm-badge .hv2-core-label {
		font-size: 1rem;
	}
}

.cpm-badge-arrow {
	width: clamp(0.875rem, 3cqw, 1.125rem);
	height: clamp(0.875rem, 3cqw, 1.125rem);
	color: #ff8cc8;
	transition: translate 0.25s ease;
}

@media (hover: hover) {
	.cpm-badge-link:hover .cpm-badge {
		translate: 0 -0.3cqw;
		box-shadow:
			0 0 0 1.33cqw #fff,
			0 0 0 1.8cqw var(--color-accent),
			0 0 0 3.6cqw rgb(236 45 151 / 0.14),
			0 4cqw 5cqw -0.6cqw rgb(74 14 86 / 0.5);
	}

	.cpm-badge-link:hover .cpm-badge-cue {
		border-color: rgb(255 255 255 / 0.7);
		background: rgb(255 255 255 / 0.2);
	}

	.cpm-badge-link:hover .cpm-badge-arrow {
		translate: 0.2rem 0;
	}
}

.cpm-badge-link:focus-visible .cpm-badge {
	outline: 3px solid var(--color-accent-700);
	outline-offset: calc(1.8cqw + 7px);
}

.cpm-badge-link:focus-visible .cpm-badge-cue {
	border-color: #fff;
	background: rgb(255 255 255 / 0.2);
}

/* The entrance (home-v2.js): the badge arrives with the core. */
@media (prefers-reduced-motion: no-preference) {
	.hv2-animate .cpm-badge {
		opacity: 0;
		scale: 0.82;
	}

	.hv2-animate.hv2-joined .cpm-badge {
		opacity: 1;
		scale: 1;
		transition:
			opacity 0.6s 0.35s,
			scale 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
			translate 0.3s cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 0.3s ease;
	}
}

/* Every pillar's details, always shown; three columns on wide screens. */
@media (min-width: 1024px) {
	.hv2-pillars {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
		max-width: none;
	}

	.hv2-pillars .hv2-panel-body {
		padding-left: 0;
	}

	.hv2-pillars .hv2-panel-details {
		grid-template-columns: minmax(0, 1fr);
		margin-left: 0;
	}
}

/* ---------- Final refinement pass (theme 0.15.0, Seth, Nov 4, 2026) ----------
   Tighter, better balanced pillar panels. Every panel keeps its full
   content, the three desktop panels keep one shared size, and the badge,
   branches and the ~3 s opening are unchanged. Only spacing and
   arrangement move:
   - RN Medication Management: the icon sits beside its title and tag, and
     the description and link use the callout's full width (from 640px);
   - points, lead text and callouts sit a little closer together;
   - desktop: the Nurse Oversight scope note ("Caregivers provide nonmedical
     care; …") is shown once, centred under the three panels, where it
     reads as the note for the whole model, instead of lengthening the
     first panel (blocks/cpv2-pillars prints it; same saved field);
   - desktop: in the shorter panels the points share any extra height
     evenly, so there is no empty strip at the bottom of a panel. */
@media (min-width: 640px) {
	.cpm-med {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 0.75rem;
		row-gap: 0;
		align-items: center;
	}

	.cpm-med > div,
	.cpm-med .cpm-extra-head {
		display: contents;
	}

	.cpm-med > .cpm-point-icon {
		grid-row: 1 / span 2;
		width: 2.5rem;
		height: 2.5rem;
	}

	.cpm-med .cpm-point-title {
		grid-column: 2;
		line-height: 1.25;
	}

	.cpm-med .cpm-tag {
		grid-column: 2;
		justify-self: start;
		margin-top: 0.25rem;
	}

	.cpm-med .cpm-extra-body {
		grid-column: 1 / -1;
		margin-top: 0.625rem;
	}

	.cpm-med .cpm-more {
		grid-column: 1 / -1;
		justify-self: start;
		margin-top: 0.125rem;
		padding-block: 0.25rem;
	}
}

/* The model-wide copy of the scope note: desktop only. */
.cpm-scope {
	display: none;
}

@media (min-width: 1280px) {
	.cpm-body {
		display: flex;
		flex-direction: column;
		padding: 1rem 1.25rem 1.25rem;
	}

	.cpm-lead {
		margin-bottom: 0.75rem;
		line-height: 1.4;
	}

	.cpm-points,
	.cpm-points-2 {
		flex: 1 0 auto;
		align-content: space-evenly;
		gap: 0.75rem;
	}

	.cpm-point {
		grid-template-columns: 2.25rem minmax(0, 1fr);
		column-gap: 0.6875rem;
	}

	.cpm-point-icon,
	.cpm-extra .cpm-point-icon,
	.cpm-med > .cpm-point-icon {
		width: 2.25rem;
		height: 2.25rem;
	}

	.cpm-point-icon svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.cpm-point-body {
		line-height: 1.4;
	}

	.cpm-foot .cpm-note {
		display: none;
	}

	.cpm-scope {
		display: block;
		max-width: 48rem;
		margin: 1.5rem auto 0;
		font-size: 1rem;
		line-height: 1.45;
		text-align: center;
		color: #4b4453;
	}

	.cpm-extra {
		grid-template-columns: 2.25rem minmax(0, 1fr);
		margin-top: 0.75rem;
		padding: 0.75rem 0.875rem;
	}

	.cpm-med {
		grid-template-columns: 2.25rem minmax(0, 1fr);
		column-gap: 0.625rem;
		padding: 0.75rem 0.875rem 0.625rem;
	}

	.cpm-med .cpm-point-title {
		font-size: 1.125rem;
	}

	.cpm-stats-card {
		margin-top: 0.75rem;
		padding: 0.75rem;
	}

	.cpm-family {
		margin-top: 0.75rem;
	}

	.cpm-courses-title {
		margin-top: 0.75rem;
	}
}

/* The desktop scope note arrives with the panels (same timing). */
@media (prefers-reduced-motion: no-preference) and (min-width: 1280px) {
	.cpm-folded ~ .cpm-scope {
		transition: opacity 0.8s ease 2.1s;
	}

	.cpm-folded:not(.cpm-open) ~ .cpm-scope {
		opacity: 0;
	}
}