/**
 * Block styles (is-style-*) registered in inc/block-styles.php, plus the
 * icons and button details they share.
 *
 * Every colour here is a token or scheme colour, so each style works on a
 * light page, a dark page and a forced-scheme section without extra CSS.
 *
 * Spacing inside a style: core's flow layout puts margins between a Group's
 * children in CSS outside any layer, which beats this file. A style that
 * owns the spacing between its children sets those margins with !important.
 * That's the only use of !important here, and it's marked "owns spacing".
 */
@layer components {
	/* ---------- Icons (inc/icons.php, pd/icon) ---------- */

	.icon {
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	.icon-fill {
		fill: var(--icon-fill, var(--secondary));
		opacity: var(--icon-fill-opacity, 0.55);
	}

	.icon-ink,
	.icon-line {
		fill: none;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.icon-ink {
		stroke-width: 2;
	}

	.icon-line {
		stroke-width: 1.7;
	}

	.icon-dot,
	.icon-solid {
		fill: currentColor;
		stroke: none;
	}

	.icon-block {
		display: inline-block;
		width: var(--icon-size, 3.5rem);
		height: var(--icon-size, 3.5rem);
		color: var(--heading-color);
		line-height: 0;
	}

	.icon-block--s {
		--icon-size: 1rem;
	}

	.icon-block--m {
		--icon-size: 1.5rem;
	}

	.icon-block--xl {
		--icon-size: 5rem;
	}

	/* ---------- Buttons ---------- */

	/* The concept's button: square-ish corners, a 2px border (1px read as too
	   faint, 22 October 2026), medium weight. theme.json reads these variables. */
	:root {
		--btn-radius: var(--radius-xs);
		--btn-border-width: 2px;
		--btn-padding-block: 1.05rem;
		--btn-padding-inline: 1.55rem;
		--btn-font-size: 1.05rem;
	}

	/* Every button gets the arrow except in the header. The arrow slides out
	   to the right and back in from the left on hover. */
	.wp-block-button__link::after {
		content: "";
		display: inline-block;
		width: 0.9rem;
		height: 0.9rem;
		margin-inline-start: 0.7rem;
		vertical-align: -0.08em;
		background-color: currentColor;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.wp-block-button__link:is(:hover, :focus-visible)::after {
		animation: btn-arrow 0.55s var(--ease);
	}

	@keyframes btn-arrow {
		0% { transform: none; opacity: 1; }
		38% { transform: translateX(120%); opacity: 0; }
		39% { transform: translateX(-120%); opacity: 0; }
		100% { transform: none; opacity: 1; }
	}

	@media (prefers-reduced-motion: reduce) {
		.wp-block-button__link:is(:hover, :focus-visible)::after {
			animation: none;
		}
	}

	.site-header .wp-block-button__link::after {
		content: none;
	}

	/* Solid light: white button for dark sections. */
	.wp-block-button.is-style-solid {
		--btn-color: var(--white);
		--btn-text: var(--base);
		--btn-color-hover: var(--tertiary);
		--btn-text-hover: var(--base);
	}

	/* Line light: outline for dark sections. */
	.wp-block-button.is-style-line {
		--btn-bg: transparent;
		--btn-text: var(--white);
		--btn-border-color: rgb(255 255 255 / 0.6);
		--btn-bg-hover: rgb(255 255 255 / 0.07);
		--btn-border-color-hover: var(--white);
		--btn-text-hover: var(--white);
	}

	/* Ghost: outline in the heading colour, so it flips with the scheme. */
	.wp-block-button.is-style-ghost {
		--btn-bg: transparent;
		--btn-text: var(--heading-color);
		--btn-border-color: var(--heading-color);
		--btn-bg-hover: var(--heading-color);
		--btn-border-color-hover: var(--heading-color);
		--btn-text-hover: var(--bg-body);
	}

	/* Text link: a Button that looks like an ordinary link, in the colour of
	   the text around it. Used for bound contact details (phone, email,
	   booking), because only a Button can bind both its text and its link. */
	.wp-block-button.is-style-text {
		--btn-bg: transparent;
		--btn-bg-hover: transparent;
		--btn-border-color: transparent;
		--btn-border-color-hover: transparent;
		--btn-text: currentColor;
		--btn-text-hover: currentColor;
		--btn-padding-block: 0;
		--btn-padding-inline: 0;
		--btn-font-size: inherit;
		--btn-radius: 0;
	}

	.wp-block-button.is-style-text .wp-block-button__link {
		font-weight: inherit;
		line-height: inherit;
		text-align: left;
		text-underline-offset: 0.18em;
		text-decoration-thickness: 1px;
	}

	.wp-block-button.is-style-text .wp-block-button__link:hover {
		text-decoration: underline;
	}

	.wp-block-button.is-style-text .wp-block-button__link::after {
		content: none;
	}

	/* ---------- Lists ---------- */

	.wp-block-list:is(.is-style-checks, .is-style-checks-columns) {
		margin: 0 !important; /* owns spacing */
		padding: 0;
		list-style: none;
	}

	.wp-block-list:is(.is-style-checks, .is-style-checks-columns) > li {
		position: relative;
		padding: 0.75rem 0 0.75rem 1.6rem;
		border-bottom: 1px solid var(--border-color);
	}

	.wp-block-list:is(.is-style-checks, .is-style-checks-columns) > li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 1.2em;
		width: 0.7rem;
		height: 0.38rem;
		border-left: 2px solid var(--tick-color, var(--link-color));
		border-bottom: 2px solid var(--tick-color, var(--link-color));
		transform: rotate(-45deg);
	}

	@media (min-width: 560px) {
		.wp-block-list.is-style-checks-columns {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			column-gap: 2.5rem;
		}
	}

	/* Name strip: names in a row, in the heading face. */
	.wp-block-list.is-style-names {
		display: flex;
		flex-wrap: wrap;
		gap: 0.8rem 2.4rem;
		margin: 0 !important; /* owns spacing */
		padding: 0;
		list-style: none;
	}

	.wp-block-list.is-style-names > li {
		color: light-dark(var(--primary-d-2), var(--tertiary));
		font-family: var(--font-heading);
		font-weight: var(--heading-weight);
		font-size: var(--text-xl);
		letter-spacing: var(--heading-tracking);
	}

	/* ---------- Paragraphs ---------- */

	/* Star rating: five stars before the text. The yellow is the Google star
	   colour, kept exact because people recognise it. */
	.is-style-rating {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.8rem;
	}

	.is-style-rating::before {
		content: "";
		width: calc(5 * 1.05rem + 4 * 2px);
		height: 1.05rem;
		background-color: #f2c14e;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.8l2.5 5.2 5.7.8-4.1 4 1 5.6L10 14.7l-5.1 2.7 1-5.6-4.1-4 5.7-.8z'/%3E%3C/svg%3E") left center / calc(1.05rem + 2px) 1.05rem repeat-x;
	}

	.is-style-rating strong {
		color: var(--heading-color);
		font-family: var(--font-heading);
		font-weight: 500;
	}

	/* Tag: a small label. */
	/* inline-block, not fit-content: core centres fit-content blocks in
	   constrained layouts with auto margins. */
	.is-style-tag {
		display: inline-block;
		padding: 0.3rem 0.6rem;
		border-radius: var(--radius-xs);
		background: var(--secondary);
		color: var(--base);
		font-size: 0.8rem;
		line-height: 1.3;
	}

	/* ---------- Images ---------- */

	/* Blob backdrop: the site's image treatment. A soft organic blob sits
	   behind the photo, offset down and to one side, with a small outlined
	   ring at the opposite corner. The blob drifts slowly between shapes.
	   The colours are scheme colours, so it works on light and dark
	   sections. Leave room around the image: the blob reaches about 8%
	   past its edges. */
	/* "Blob": the shapes behind the image are switched off until the
	   treatment is redesigned (Austin, 23 October 2026). The style stays so
	   pages that use it keep a rounded image with a soft shadow. */
	.wp-block-image.is-style-blob {
		position: relative;
		margin: 0 !important; /* owns spacing */
	}

	.wp-block-image.is-style-blob img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: calc(var(--radius) * 2);
		box-shadow: var(--shadow-l);
	}

	.wp-block-image.is-style-blob::before {
		display: none;
		content: "";
		position: absolute;
		inset: 12% -8% -9% 14%;
		z-index: -1;
		border-radius: 58% 42% 55% 45% / 46% 56% 44% 54%;
		background: light-dark(var(--secondary-l-4), var(--primary-d-2));
		animation: blob-drift 18s ease-in-out infinite alternate;
	}

	.wp-block-image.is-style-blob::after {
		display: none;
		content: "";
		position: absolute;
		top: -1.4rem;
		left: -1.4rem;
		z-index: -1;
		width: clamp(3.5rem, 8vw, 5.5rem);
		aspect-ratio: 1;
		border: 2px solid var(--secondary);
		border-radius: var(--radius-circle);
	}

	@keyframes blob-drift {
		0% { border-radius: 58% 42% 55% 45% / 46% 56% 44% 54%; }
		50% { border-radius: 44% 56% 41% 59% / 57% 43% 57% 43%; }
		100% { border-radius: 52% 48% 63% 37% / 41% 52% 48% 59%; }
	}

	@media (prefers-reduced-motion: reduce) {
		.wp-block-image.is-style-blob::before {
			animation: none;
		}
	}

	/* ---------- Groups ---------- */

	/* Link card: the whole card is clickable through its one link, which
	   gets an arrow. Keep one link per card. */
	.wp-block-group.is-style-card {
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 2rem 1.8rem 1.7rem;
		border-radius: var(--radius);
		background: var(--bg-surface);
		box-shadow: var(--shadow-xs);
		transition: box-shadow 0.25s, transform 0.25s var(--ease);
	}

	/* A card lifts on hover only when there's a link to follow. */
	.wp-block-group.is-style-card:has(a):hover {
		box-shadow: var(--shadow-m);
		transform: translateY(-2px);
	}

	.wp-block-group.is-style-card > * {
		margin-block: 0 !important; /* owns spacing */
	}

	.wp-block-group.is-style-card > :is(h2, h3, h4) {
		margin-top: 1.4rem !important; /* owns spacing */
		font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem);
		line-height: 1.12;
	}

	.wp-block-group.is-style-card > p {
		margin-top: 0.8rem !important; /* owns spacing */
		color: var(--text-muted);
		font-size: 1rem;
	}

	.wp-block-group.is-style-card > p:last-child {
		flex: 1;
		display: flex;
		align-items: flex-end;
		gap: 0.5rem;
		margin-top: 1.4rem !important; /* owns spacing */
		color: var(--link-color);
		font-size: 0.95rem;
		font-family: var(--font-heading);
		font-weight: 500;
	}

	.wp-block-group.is-style-card > p:last-child a {
		color: inherit;
		text-decoration: none;
	}

	.wp-block-group.is-style-card a::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	.wp-block-group.is-style-card > p:last-child::after {
		content: "";
		width: 0.85rem;
		height: 1.3em;
		background-color: currentColor;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
		transition: transform 0.3s var(--ease);
	}

	.wp-block-group.is-style-card:hover > p:last-child::after {
		transform: translateX(3px);
	}

	.wp-block-group.is-style-card:has(a:focus-visible) {
		outline: var(--focus-width) solid var(--focus-color);
		outline-offset: var(--focus-offset);
	}

	.wp-block-group.is-style-card a:focus-visible {
		outline: none;
	}

	.wp-block-group.is-style-card:hover .icon-fill {
		--icon-fill-opacity: 0.85;
	}

	/* ---------- Cards: text, icon and image ----------
	   One card system for the whole site. Put the cards in a Group with a
	   grid utility (grid--auto-3, grid--auto-4) and give each card one of
	   these styles. They share a white panel, a light shadow and the same
	   spacing; the icon card adds an icon in a soft circle, and the image
	   card runs its first image edge to edge across the top.
	   If the card's heading holds a link, the whole card is clickable. */
	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) {
		--card-pad: clamp(1.5rem, 1.2rem + 1vw, 2rem);
		position: relative;
		display: flex;
		flex-direction: column;
		padding: var(--card-pad);
		border-radius: var(--radius);
		background: var(--bg-surface);
		box-shadow: var(--shadow-xs);
		transition: box-shadow 0.25s, transform 0.25s var(--ease);
	}

	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) > * {
		margin-block: 0 !important; /* owns spacing */
	}

	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) > * + * {
		margin-top: 0.7rem !important; /* owns spacing */
	}

	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) > :where(h2, h3, h4, .wp-block-post-title) {
		font-size: var(--h5);
		line-height: 1.25;
	}

	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) > :where(p, .wp-block-post-excerpt) {
		color: var(--text-muted);
		font-size: 1rem;
	}

	/* A small label above the heading: a date, a category, a sector. */
	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) > :where(.wp-block-post-terms, .wp-block-post-date, .is-style-tag) {
		color: var(--link-color);
		font-size: 0.85rem;
		font-family: var(--font-heading);
		font-weight: 500;
	}

	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) > :where(.wp-block-post-terms, .wp-block-post-date) + :where(h2, h3, h4, .wp-block-post-title) {
		margin-top: 0.8rem !important; /* owns spacing */
	}

	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) :where(.wp-block-post-terms, .wp-block-post-date) a {
		position: relative;
		z-index: 1;
		color: inherit;
		text-decoration: none;
	}

	/* Categories and sectors on a card are pills. The comma core puts
	   between two terms is hidden; the gap separates them instead. */
	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) > .wp-block-post-terms {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		font-size: 0;
	}

	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) > .wp-block-post-terms a {
		padding: 0.3rem 0.8rem;
		border-radius: 999px;
		background: light-dark(var(--secondary-l-5), rgb(255 255 255 / 0.08));
		color: var(--link-color);
		font-size: 0.8rem;
		font-family: var(--font-heading);
		font-weight: 500;
		line-height: 1.3;
		transition: background-color 0.2s, color 0.2s;
	}

	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) > .wp-block-post-terms a:hover {
		background: var(--primary);
		color: var(--white);
	}

	/* Clickable card: the heading's link stretches over the whole card. */
	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) > :where(h2, h3, h4, .wp-block-post-title) a {
		color: var(--heading-color);
		text-decoration: none;
	}

	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) > :where(h2, h3, h4, .wp-block-post-title) a::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image):has(> :where(h2, h3, h4, .wp-block-post-title) a):hover {
		box-shadow: var(--shadow-m);
		transform: translateY(-2px);
	}

	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image):has(> :where(h2, h3, h4, .wp-block-post-title) a):hover > :where(h2, h3, h4, .wp-block-post-title) a {
		color: var(--link-color);
	}

	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image):has(a:focus-visible) {
		outline: var(--focus-width) solid var(--focus-color);
		outline-offset: var(--focus-offset);
	}

	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) a:focus-visible {
		outline: none;
	}

	/* A "Read more" style last line sits at the bottom, so a row of cards
	   lines up whatever the text length. */
	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) > .wp-block-buttons:last-child,
	.wp-block-group:is(.is-style-card-text, .is-style-card-icon, .is-style-card-image) > .wp-block-read-more:last-child {
		margin-top: auto !important; /* owns spacing */
		padding-top: 1.2rem;
	}

	/* Icon card: the icon sits in a soft circle above the heading. */
	.wp-block-group.is-style-card-icon > .icon-block:first-child {
		--icon-size: 1.75rem;
		box-sizing: content-box;
		padding: 0.85rem;
		border-radius: var(--radius-circle);
		background: light-dark(var(--secondary-l-5), rgb(255 255 255 / 0.08));
	}

	.wp-block-group.is-style-card-icon > .icon-block:first-child + * {
		margin-top: 1.4rem !important; /* owns spacing */
	}

	/* Image card: the first image (or featured image) runs to the card's
	   edges and keeps a fixed shape, so a row of cards lines up. */
	.wp-block-group.is-style-card-image {
		overflow: hidden;
	}

	.wp-block-group.is-style-card-image > :is(.wp-block-image, .wp-block-post-featured-image):first-child {
		margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0 !important; /* owns spacing */
		overflow: hidden;
		aspect-ratio: 3 / 2;
		background: var(--bg-surface-alt);
	}

	.wp-block-group.is-style-card-image > :is(.wp-block-image, .wp-block-post-featured-image):first-child img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.7s var(--ease);
	}

	.wp-block-group.is-style-card-image:hover > :is(.wp-block-image, .wp-block-post-featured-image):first-child img {
		transform: scale(1.035);
	}

	.wp-block-group.is-style-card-image > :is(.wp-block-image, .wp-block-post-featured-image):first-child + * {
		margin-top: var(--card-pad) !important; /* owns spacing */
	}

	@media (prefers-reduced-motion: reduce) {
		.wp-block-group:is(.is-style-card, .is-style-card-text, .is-style-card-icon, .is-style-card-image),
		.wp-block-group.is-style-card-image img {
			transition: none;
		}
	}

	/* Plans: three levels that rise like contours on a map. "Raised" and
	   "Highest" sit taller in a row of plans. */
	.wp-block-group:is(.is-style-plan, .is-style-plan-raised, .is-style-plan-highest) {
		--plan-pad: clamp(1.6rem, 2.6vw, 2.4rem);
		position: relative;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		padding: var(--plan-pad);
		overflow: hidden;
		border-radius: var(--radius) var(--radius) 0 0;
		background-repeat: no-repeat;
		background-size: cover;
		color: var(--text-color);
	}

	.wp-block-group.is-style-plan {
		color-scheme: light;
		background-color: var(--secondary-l-4);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='rgb(10 84 119 / .14)'%3E%3Cpath d='M-40 520 C 80 470, 200 560, 440 500'/%3E%3Cpath d='M-40 560 C 90 515, 210 600, 440 545'/%3E%3C/g%3E%3C/svg%3E");
	}

	.wp-block-group.is-style-plan-raised {
		color-scheme: dark;
		padding-top: calc(var(--plan-pad) + 3rem);
		background-color: var(--primary);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 700' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='rgb(255 255 255 / .12)'%3E%3Cpath d='M-40 140 C 90 90, 230 190, 440 120'/%3E%3Cpath d='M-40 380 C 80 330, 210 430, 440 360'/%3E%3Cpath d='M-40 420 C 90 375, 220 470, 440 405'/%3E%3Cpath d='M-40 620 C 80 570, 200 660, 440 600'/%3E%3Cpath d='M-40 660 C 90 615, 210 700, 440 645'/%3E%3C/g%3E%3C/svg%3E");
	}

	.wp-block-group.is-style-plan-highest {
		color-scheme: dark;
		padding-top: calc(var(--plan-pad) + 6rem);
		background-color: var(--base);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='rgb(110 170 185 / .16)'%3E%3Cpath d='M-40 60 C 90 10, 230 110, 440 40'/%3E%3Cpath d='M-40 100 C 80 55, 220 150, 440 85'/%3E%3Cpath d='M-40 300 C 90 250, 230 350, 440 280'/%3E%3Cpath d='M-40 340 C 80 295, 220 390, 440 325'/%3E%3Cpath d='M-40 560 C 90 510, 230 610, 440 540'/%3E%3Cpath d='M-40 600 C 80 555, 220 650, 440 585'/%3E%3Cpath d='M-40 760 C 90 710, 230 810, 440 740'/%3E%3C/g%3E%3C/svg%3E");
	}

	.wp-block-group:is(.is-style-plan, .is-style-plan-raised, .is-style-plan-highest) > * {
		margin-block: 0 !important; /* owns spacing */
	}

	.wp-block-group:is(.is-style-plan, .is-style-plan-raised, .is-style-plan-highest) :is(h2, h3) {
		color: var(--heading-color);
		font-family: var(--font-heading);
		font-size: 1.25rem;
		font-weight: 500;
		letter-spacing: normal;
	}

	.plan__price-row {
		margin-top: 1.4rem !important; /* owns spacing */
		align-items: baseline !important; /* core override: flex alignment is set outside any layer */
	}

	.plan__price-row > * {
		margin: 0 !important; /* owns spacing */
	}

	.plan__price {
		font-family: var(--font-heading);
		font-weight: var(--heading-weight);
		font-size: clamp(3rem, 2.2rem + 2.4vw, 4.6rem);
		letter-spacing: var(--heading-tracking);
		line-height: 0.9;
	}

	.plan__per {
		font-size: 1rem;
		opacity: 0.8;
	}

	.plan__who {
		margin-top: 1rem !important; /* owns spacing */
		max-width: 22rem;
		font-size: 1rem;
		opacity: 0.85;
	}

	.wp-block-group:is(.is-style-plan, .is-style-plan-raised, .is-style-plan-highest) .wp-block-list {
		display: grid;
		gap: 0.5rem;
		margin: 1.6rem 0 0 !important; /* owns spacing */
		padding: 1.4rem 0 0;
		border-top: 1px solid rgb(127 127 127 / 0.3);
		font-size: 1rem;
		list-style: none;
	}

	.wp-block-group:is(.is-style-plan, .is-style-plan-raised, .is-style-plan-highest) li {
		position: relative;
		padding-left: 1.4rem;
	}

	.wp-block-group:is(.is-style-plan, .is-style-plan-raised, .is-style-plan-highest) li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.5em;
		width: 0.65rem;
		height: 0.35rem;
		border-left: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		opacity: 0.7;
		transform: rotate(-45deg);
	}

	/* A first item like "Everything in Protect, plus" has no tick. */
	.wp-block-group:is(.is-style-plan, .is-style-plan-raised, .is-style-plan-highest) li:first-child:has(em) {
		padding-left: 0;
		opacity: 0.75;
	}

	.wp-block-group:is(.is-style-plan, .is-style-plan-raised, .is-style-plan-highest) li:first-child:has(em)::before {
		display: none;
	}

	.wp-block-group:is(.is-style-plan, .is-style-plan-raised, .is-style-plan-highest) li em {
		font-style: normal;
	}

	@media (max-width: 900px) {
		.wp-block-group:is(.is-style-plan, .is-style-plan-raised, .is-style-plan-highest) {
			padding-top: var(--plan-pad);
			border-radius: var(--radius);
		}
	}

	/* Numbered steps: each child Group is a step. CSS counts them and draws
	   one line through the numbers, which draws itself in as it scrolls
	   into view where the browser supports scroll-driven animation. */
	.wp-block-group.is-style-steps {
		--node: 3.25rem;
		--gap: clamp(1.5rem, 4vw, 4rem);
		position: relative;
		display: grid;
		/* One equal column per child, however many there are. */
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: var(--gap);
		counter-reset: step;
	}

	.wp-block-group.is-style-steps > * {
		position: relative;
		margin: 0 !important; /* owns spacing */
		counter-increment: step;
	}

	.wp-block-group.is-style-steps > *::before {
		content: counter(step);
		position: relative;
		z-index: 1;
		display: grid;
		place-items: center;
		width: var(--node);
		height: var(--node);
		border: 2px solid var(--secondary);
		border-radius: var(--radius-circle);
		background: var(--bg-body);
		color: var(--heading-color);
		font-family: var(--font-heading);
		font-weight: var(--heading-weight);
		font-size: 1.45rem;
	}

	.wp-block-group.is-style-steps::before {
		content: "";
		position: absolute;
		top: calc(var(--node) / 2 - 1px);
		left: calc(var(--node) / 2);
		/* Ends at the centre of the last number. Three steps: the last column
		   starts two columns and two gaps in. */
		right: calc((100% - 2 * var(--gap)) / 3 - var(--node) / 2);
		height: 2px;
		background: var(--secondary);
		transform-origin: 0 50%;
	}

	.wp-block-group.is-style-steps > * > :is(h2, h3) {
		margin-top: 2rem !important; /* owns spacing */
		font-size: var(--h3);
		line-height: 1.15;
	}

	.wp-block-group.is-style-steps > * > p {
		max-width: 24rem;
		margin-top: 1rem !important; /* owns spacing */
		color: var(--text-muted);
	}

	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			.wp-block-group.is-style-steps::before {
				animation: steps-draw linear both;
				animation-timeline: view();
				animation-range: entry 40% cover 45%;
			}
		}
	}

	@keyframes steps-draw {
		from { transform: scaleX(0); }
		to { transform: scaleX(1); }
	}

	@media (max-width: 900px) {
		.wp-block-group.is-style-steps {
			grid-template-columns: minmax(0, 1fr);
			grid-auto-flow: row;
			gap: 2.8rem;
			padding-left: calc(var(--node) + 1.4rem);
		}

		.wp-block-group.is-style-steps::before {
			top: calc(var(--node) / 2);
			bottom: calc(var(--node) / 2);
			left: calc(var(--node) / 2 - 1px);
			right: auto;
			width: 2px;
			height: auto;
			transform-origin: 50% 0;
		}

		@keyframes steps-draw {
			from { transform: scaleY(0); }
			to { transform: scaleY(1); }
		}

		.wp-block-group.is-style-steps > *::before {
			position: absolute;
			top: 0;
			left: calc(-1 * (var(--node) + 1.4rem));
		}

		.wp-block-group.is-style-steps > * > :is(h2, h3) {
			margin-top: 0.35rem !important; /* owns spacing */
		}
	}

	/* Facts row: each child Group is a fact; its first paragraph is the
	   big figure. */
	.wp-block-group.is-style-facts {
		display: grid;
		/* One equal column per child, however many there are. */
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		padding-block: 1.6rem;
		border-radius: var(--radius);
		background: var(--bg-surface);
		box-shadow: var(--shadow-xs);
	}

	/* One white band, with a thin rule between the figures. */
	.wp-block-group.is-style-facts > * {
		margin: 0 !important; /* owns spacing */
		padding: 0.2rem clamp(1.2rem, 2.5vw, 2rem);
	}

	.wp-block-group.is-style-facts > * + * {
		border-left: 1px solid var(--border-color);
	}

	.wp-block-group.is-style-facts > * > p {
		margin: 0 !important; /* owns spacing */
	}

	.wp-block-group.is-style-facts > * > p:first-child {
		color: light-dark(var(--primary-d-2), var(--white));
		font-family: var(--font-heading);
		font-weight: var(--heading-weight);
		font-size: 2rem;
		letter-spacing: var(--heading-tracking);
		line-height: 1;
	}

	.wp-block-group.is-style-facts > * > p + p {
		margin-top: 0.5rem !important; /* owns spacing */
		color: var(--text-muted);
		font-size: 0.95rem;
		line-height: 1.4;
	}

	@media (max-width: 520px) {
		.wp-block-group.is-style-facts {
			grid-auto-flow: row;
			grid-template-columns: minmax(0, 1fr);
		}

		.wp-block-group.is-style-facts {
			padding-block: 0.4rem;
		}

		.wp-block-group.is-style-facts > * {
			padding-block: 1.1rem;
		}

		.wp-block-group.is-style-facts > * + * {
			border-left: 0;
			border-top: 1px solid var(--border-color);
		}
	}

	/* Contour lines: rings drawn on the right of a dark section. */
	.wp-block-group.is-style-contours {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%230a5477' stroke-width='1.2' opacity='.7'%3E%3Cpath d='M700 300 c 120 -160 420 -140 470 20 s -150 260 -330 230 s -240 -120 -140 -250z'/%3E%3Cpath d='M760 310 c 90 -110 300 -100 340 15 s -110 180 -235 160 s -170 -85 -105 -175z'/%3E%3Cpath d='M820 318 c 55 -65 180 -60 205 10 s -65 105 -140 95 s -100 -50 -65 -105z'/%3E%3Cpath d='M875 325 c 25 -28 80 -26 92 4 s -30 46 -62 42 s -45 -22 -30 -46z'/%3E%3C/g%3E%3C/svg%3E");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	/* Topographic (animated): the hero's contour animation behind a light
	   section, in pale tan. inc/topo.php adds the canvas on the front end; in
	   the editor the section shows the flat fill colour. Colours must be
	   6-digit hex because the WebGL script reads them. */
	.wp-block-group.is-style-topo {
		--topo-fill-low: #f4f2ec;
		--topo-fill-high: #f6f4ef;
		--topo-line-low: #e6e0d4;
		--topo-line-high: #ddd5c6;
		--topo-speed: 0.5;
		--topo-pulse: 0;
		--topo-lines: 0.5;
		--topo-size: 1100;
		--topo-seed: 3;
		--topo-fade: 0;
		--topo-vignette: 0;
		position: relative;
		isolation: isolate;
		overflow: hidden;
		background-color: var(--topo-fill-high);
		/* The section is always light, so it sets its own text colour too.
		   Without it, text inherits the page's colour, which is white when
		   the visitor has switched to dark. */
		color: var(--text-color);
		color-scheme: light;
	}

	.wp-block-group.is-style-topo > canvas.topo {
		position: absolute;
		inset: 0;
		z-index: -1;
		display: block;
		width: 100%;
		max-width: none !important; /* core override: constrained layout caps every child's width */
		height: 100%;
		margin: 0 !important; /* owns spacing */
	}

	.wp-block-group.is-style-topo > canvas.topo + * {
		margin-block-start: 0 !important; /* owns spacing: the canvas isn't content */
	}

	/* ---------- Query loop ---------- */

	/* Article cards: image-led, no excerpt. The title underlines on hover. */
	.wp-block-post-template.is-style-article-cards > li {
		position: relative;
	}

	.wp-block-post-template.is-style-article-cards .wp-block-post-featured-image {
		overflow: hidden;
		margin: 0;
		border-radius: var(--radius-xs);
		background: var(--bg-surface-alt);
	}

	.wp-block-post-template.is-style-article-cards .wp-block-post-featured-image img {
		transition: transform 0.7s var(--ease);
	}

	.wp-block-post-template.is-style-article-cards > li:hover .wp-block-post-featured-image img {
		transform: scale(1.035);
	}

	.wp-block-post-template.is-style-article-cards .wp-block-post-terms {
		margin-top: 1.2rem !important; /* owns spacing */
		color: var(--link-color);
		font-size: 0.9rem;
		font-family: var(--font-heading);
		font-weight: 500;
	}

	.wp-block-post-template.is-style-article-cards .wp-block-post-terms a {
		position: relative;
		z-index: 1;
		color: inherit;
		text-decoration: none;
	}

	.wp-block-post-template.is-style-article-cards .wp-block-post-title {
		margin-top: 0.35rem !important; /* owns spacing */
		font-size: clamp(1.5rem, 1.2rem + 0.7vw, 1.9rem);
		line-height: 1.12;
	}

	.wp-block-post-template.is-style-article-cards .wp-block-post-title a {
		color: var(--heading-color);
		text-decoration: none;
		background-image: linear-gradient(currentColor, currentColor);
		background-position: 0 100%;
		background-repeat: no-repeat;
		background-size: 0% 1px;
		transition: background-size 0.45s var(--ease);
	}

	/* The title link covers the whole card. */
	.wp-block-post-template.is-style-article-cards .wp-block-post-title a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.wp-block-post-template.is-style-article-cards > li:hover .wp-block-post-title a {
		background-size: 100% 1px;
	}

	@media (prefers-reduced-motion: reduce) {
		.wp-block-post-template.is-style-article-cards img,
		.wp-block-post-template.is-style-article-cards .wp-block-post-title a {
			transition: none;
		}
	}
}