/**
 * Sections: the layout of each pattern in patterns/.
 *
 * Each pattern's outer Group carries one section class (.clients, .method,
 * .plans...). Its layout rules live here, so the pattern works wherever a
 * client inserts it. Looks that could be used anywhere are block styles
 * instead (block-styles.css).
 *
 * Child margins: core's flow layout sets margins between a Group's children
 * outside any layer. Where a section owns that spacing it uses !important,
 * marked "owns spacing", as in block-styles.css.
 */
@layer blocks {
	/* ---------- Shared section heads ---------- */

	/* Heading and intro stacked. */
	.section-head {
		display: grid;
		gap: 1.6rem;
		max-width: 56rem;
	}

	.section-head > * {
		margin: 0 !important; /* owns spacing */
	}

	.section-head > p {
		max-width: 38rem;
		color: var(--text-muted);
		font-size: var(--text-l);
	}

	/* Heading on the left, intro on the right. */
	.split-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 1.4rem 4rem;
		align-items: end;
	}

	.split-head > * {
		margin: 0 !important; /* owns spacing */
	}

	.split-head > :is(h2, .wp-block-heading) {
		max-width: 12ch;
	}

	.split-head p {
		max-width: 36rem;
		color: var(--text-muted);
		font-size: 1.15rem;
	}

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

	/* ---------- Hero ---------- */

	/* Calm topography trial (21 October 2026). Slower, no pulse, fainter
	   lines, and no fade, vignette or gradient overlay. Delete this block to
	   go back to the original animation (also tagged in Git as
	   topo-animated-v1). */
	.home-hero.hero--topo {
		--topo-speed: 0.5;
		--topo-pulse: 0;
		--topo-lines: 0.45;
		--topo-fade: 0;
		--topo-vignette: 0;
		--topo-overlay: 0;
		--topo-size: 1100;
	}

	/* Smaller than the theme's h1 (22 October 2026): the full size crowded
	   the phone image. */
	.home-hero h1 {
		max-width: 12ch;
		font-size: clamp(2.8rem, 1rem + 4.4vw, 5.4rem);
	}

	/* The top padding clears the overlay header and no more. The block's
	   floating layout centres the text in a full-screen-tall row, which left
	   a tall empty band under the header on big screens; here the phone
	   image sets the height instead. */
	.home-hero.hero--topo {
		padding-block: 9.5rem 5.5rem;
	}

	.home-hero.hero--floating.has-image .hero__inner {
		min-height: 0;
	}

	@media (max-width: 960px) {
		.home-hero.hero--topo {
			padding-block: 7.5rem 4rem;
		}
	}

	/* ---------- Clients ---------- */

	.clients__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1.5rem 3.5rem;
		padding-block: 2.6rem;
	}

	.clients__inner > * {
		margin: 0 !important; /* owns spacing */
	}

	.clients__inner > p {
		flex: none;
		color: var(--text-muted);
	}

	/* ---------- Check-up ---------- */

	/* The pinned mock on small screens is backed with the section's colour. */
	.checkup-section {
		--checkup-bg: var(--bg-body);
	}

	.checkup-section.bg--surface-alt {
		--checkup-bg: var(--bg-surface-alt);
	}

	.checkup-section .wp-block-pd-checkup {
		margin-top: clamp(3rem, 6vw, 4rem) !important; /* owns spacing */
	}

	/* ---------- Method ---------- */

	.method {
		--steps-node-bg: var(--base);
	}

	.method .is-style-steps {
		margin-top: clamp(3.5rem, 7vw, 5.5rem) !important; /* owns spacing */
	}

	.method .is-style-steps > *::before {
		background: var(--steps-node-bg);
	}

	.method__foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1.2rem 2rem;
		margin-top: clamp(3.5rem, 6vw, 5rem) !important; /* owns spacing */
		padding-top: 2rem;
		border-top: 1px solid var(--border-color);
	}

	.method__foot > * {
		margin: 0 !important; /* owns spacing */
	}

	.method__foot > p {
		color: var(--text-muted);
		font-size: 1.2rem;
	}

	/* ---------- Care plans ---------- */

	/* The plans stand on a soft floor line that runs the full width, with
	   room either side so they don't sit hard against its ends. */
	.plans {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(0.75rem, 1.4vw, 1.25rem);
		align-items: end;
		margin-top: clamp(3rem, 6vw, 4.5rem) !important; /* owns spacing */
		padding-inline: clamp(1rem, 3vw, 2.5rem);
		border-bottom: 2px solid var(--border-color-strong);
	}

	.plans > * {
		margin: 0 !important; /* owns spacing */
	}

	/* The plans rise up out of the floor line, one after another, once the
	   row is properly on screen (assets/js/reveal.js adds is-revealed).
	   The delays give the visitor time to see it happen. The clip hides
	   anything below the line and nothing else. Without the script, or for
	   visitors who prefer less motion, the plans just sit in place. */
	@media (min-width: 901px) {
		.js-reveal .plans.reveal {
			clip-path: inset(-100vh -100vw 0 -100vw);
		}

		.js-reveal .plans.reveal > * {
			transform: translateY(100%);
			transition: transform 1s var(--ease);
		}

		.js-reveal .plans.reveal > :nth-child(1) {
			transition-delay: 0.3s;
		}

		.js-reveal .plans.reveal > :nth-child(2) {
			transition-delay: 0.55s;
		}

		.js-reveal .plans.reveal > :nth-child(3) {
			transition-delay: 0.8s;
		}

		.js-reveal .plans.reveal.is-revealed > * {
			transform: none;
		}
	}
	}

	@media (max-width: 900px) {
		.plans {
			grid-template-columns: minmax(0, 1fr);
			gap: 0.6rem;
			padding-inline: 0;
			border-bottom: 0;
		}
	}

	.aside-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 1.2rem 4rem;
		align-items: start;
		margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; /* owns spacing */
	}

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

	.aside-row :is(h2, h3) {
		font-size: var(--h4);
		line-height: 1.15;
	}

	.aside-row p {
		color: var(--text-muted);
	}

	.aside-row p + p {
		margin-top: 0.8rem !important; /* owns spacing */
	}

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

	/* ---------- Sectors ---------- */

	.sector-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
		margin-top: clamp(3rem, 6vw, 4rem) !important; /* owns spacing */
	}

	.sector-grid > * {
		margin: 0 !important; /* owns spacing */
	}

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

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

	.includes {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 1.2rem 4rem;
		margin-top: clamp(3rem, 6vw, 4.5rem) !important; /* owns spacing */
		padding-top: 2rem;
		border-top: 1px solid var(--border-color);
	}

	.includes > * {
		margin: 0 !important; /* owns spacing */
	}

	.includes :is(h2, h3) {
		font-size: var(--h4);
		line-height: 1.15;
	}

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

	/* ---------- About ---------- */

	.about__grid {
		display: grid;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: var(--container-gap);
		align-items: center;
	}

	.about__grid > * {
		margin: 0 !important; /* owns spacing */
	}

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

	.about__photo {
		max-width: 30rem;
		overflow: hidden;
		border-radius: var(--radius);
	}

	.about__photo img {
		width: 100%;
		aspect-ratio: 4 / 5;
		object-fit: cover;
		object-position: 50% 30%;
	}

	.about__text > * + * {
		margin-top: 1.3rem !important; /* owns spacing */
	}

	.about__text > p {
		max-width: 38rem;
	}

	.about__text > .is-style-facts {
		margin-top: 2.4rem !important; /* owns spacing */
	}

	/* ---------- Articles ---------- */

	.articles__head {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		justify-content: space-between;
		gap: 2rem;
	}

	.articles__head > * {
		margin: 0 !important; /* owns spacing */
	}

	.articles .wp-block-query {
		margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; /* owns spacing */
	}

	.articles .wp-block-post-template {
		gap: clamp(1.5rem, 3vw, 2.5rem) !important; /* owns spacing */
	}

	@media (max-width: 900px) {
		.articles .wp-block-post-template {
			grid-template-columns: minmax(0, 1fr) !important; /* core override: core keeps 3 columns down to 600px */
			max-width: 34rem;
		}
	}

	/* ---------- Call to action ---------- */

	.cta__grid {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		gap: 2.5rem 4rem;
		align-items: center;
	}

	.cta__grid > * {
		margin: 0 !important; /* owns spacing */
	}

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

	.cta__grid h2 {
		max-width: 12ch;
		font-size: var(--h1);
	}

	.cta__grid > :first-child p {
		max-width: 32rem;
		margin-top: 1.4rem !important; /* owns spacing */
		color: var(--text-muted);
		font-size: 1.2rem;
	}

	/* Two buttons stacked on the right, the same width, lined up with the
	   middle of the heading. The booking button is the big one. */
	.cta__side {
		align-self: center;
		justify-self: end;
		width: min(100%, 24rem);
	}

	.cta__side .wp-block-buttons {
		display: grid !important; /* core override: Buttons is flex outside any layer */
		gap: 0.8rem;
	}

	.cta__side .wp-block-button {
		width: 100%;
	}

	.cta__side .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.cta__book {
		--btn-padding-block: 1.4rem;
		--btn-font-size: 1.2rem;
	}

	@media (max-width: 860px) {
		.cta__side {
			justify-self: start;
		}
	}

	/* ---------- Page hero (inner pages) ----------
	   The dark topographic band at the top of inner pages, under the overlay
	   header. A Group with the Topographic style and .page-hero; this sets
	   the dark colours and the same calm motion as the home hero. */

	.page-hero.is-style-topo {
		--topo-fill-low: #073650;
		--topo-fill-high: #09415c;
		--topo-line-low: #0a5477;
		--topo-line-high: #0e6a94;
		--topo-lines: 0.45;
		--topo-seed: 7;
		padding-block: clamp(9rem, 14vw, 12rem) clamp(4rem, 8vw, 6.5rem);
		color: var(--white);
		color-scheme: dark;
	}

	.page-hero__inner > * {
		margin: 0 !important; /* owns spacing */
	}

	.page-hero__inner > * + * {
		margin-top: 1.4rem !important; /* owns spacing */
	}

	.page-hero h1 {
		max-width: 16ch;
		font-size: var(--h2);
	}

	.page-hero__lede {
		max-width: 38rem;
		color: var(--tertiary);
		font-size: var(--text-l);
	}

	/* The breadcrumb is the page's only label above the h1: small, muted,
	   with the current page in white. */
	.page-hero .wp-block-breadcrumbs {
		color: var(--tertiary);
		font-size: var(--text-s);
	}

	.page-hero .wp-block-breadcrumbs a {
		color: inherit;
		text-decoration: none;
	}

	.page-hero .wp-block-breadcrumbs a:hover {
		color: var(--white);
		text-decoration: underline;
	}

	.page-hero .wp-block-breadcrumbs [aria-current] {
		color: var(--white);
	}

	.page-hero .wp-block-breadcrumbs + h1 {
		margin-top: 1.1rem !important; /* owns spacing */
	}

	.page-hero .wp-block-buttons {
		margin-top: 2.4rem !important; /* owns spacing */
	}

	/* ---------- Case study: single ---------- */

	/* Extra room under the hero for the cover to overlap. Two classes, so it
	   beats the page hero's own padding. */
	.page-hero.case-hero {
		padding-bottom: clamp(9rem, 16vw, 14rem);
	}

	/* The cover sits in a soft panel that overlaps the hero. Works for a
	   desktop screenshot and for a phone cut-out alike. */
	.case-cover {
		margin-top: calc(-1 * clamp(6rem, 12vw, 10rem)) !important; /* owns spacing */
	}

	.case-cover .wp-block-post-featured-image {
		position: relative;
		display: grid;
		place-items: center;
		margin: 0;
		padding: clamp(1.5rem, 4vw, 3.5rem);
		border-radius: var(--radius);
		background: var(--bg-surface-alt);
		box-shadow: var(--shadow-l);
	}

	.case-cover .wp-block-post-featured-image img {
		width: auto;
		max-width: 100%;
		max-height: 38rem;
		border-radius: var(--radius-xs);
		object-fit: contain;
		filter: drop-shadow(0 24px 40px rgb(4 33 47 / 0.18));
	}

	.case-facts-section {
		padding-block: clamp(2.5rem, 5vw, 4rem) 0;
	}

	/* Flex, not grid: hidden empty facts then take no space. */
	.case-facts {
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem 2rem;
		padding-block: 1.6rem;
		border-block: 1px solid var(--border-color);
	}

	.case-facts > * {
		flex: 1 1 10rem;
		margin: 0 !important; /* owns spacing */
	}

	/* A fact with no value isn't shown. */
	.case-facts > :has(> p:last-child:empty) {
		display: none;
	}

	.case-facts p {
		margin: 0 !important; /* owns spacing */
		color: var(--heading-color);
		font-family: var(--font-heading);
		font-weight: 500;
	}

	.case-facts .case-facts__label {
		margin-bottom: 0.3rem !important; /* owns spacing */
		color: var(--text-muted);
		font-size: var(--text-xs);
		font-weight: var(--body-weight);
	}

	.case-body {
		padding-block: clamp(3rem, 6vw, 5rem);
	}

	.case-body > h2 {
		margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; /* owns spacing */
		font-size: var(--h3);
	}

	.case-body > p:first-child {
		font-size: var(--text-l);
	}

	.case-body > .alignwide {
		margin-block: clamp(2.5rem, 5vw, 4rem) !important; /* owns spacing */
	}

	/* Images in a case study: a wide gallery or a single wide image breaks
	   out of the text column, with room above and below. */
	.case-body > :is(.wp-block-gallery, .wp-block-image) {
		margin-block: clamp(2.5rem, 5vw, 4rem) !important; /* owns spacing */
	}

	.case-body .wp-block-gallery {
		--wp--style--unstable-gallery-gap: var(--grid-gap);
		gap: var(--grid-gap) !important; /* core override: core sets the gallery gap outside any layer */
	}

	.case-body :is(.wp-block-gallery, .wp-block-image) img {
		border-radius: var(--radius);
		background: var(--bg-surface-alt);
	}

	/* ---------- Legacy: pages carried over from the old site ----------
	   Converted 23 October 2026 so their content and search rankings move
	   across intact. Text runs in a 46rem column; card grids and image
	   splits run wide. Redesign these page by page, then drop the classes. */
	.legacy > * + * {
		margin-block-start: var(--space-s) !important; /* owns spacing */
	}

	.legacy > .wp-block-heading + * {
		margin-block-start: var(--space-xs) !important; /* owns spacing */
	}

	.legacy > * + .wp-block-heading,
	.legacy > * + .alignwide,
	.legacy > .alignwide + * {
		margin-block-start: var(--space-l) !important; /* owns spacing */
	}

	.legacy > .wp-block-heading:is(h2),
	.legacy .split-media__text > h2 {
		font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.6rem);
	}

	.legacy > .wp-block-heading:is(h3) {
		font-size: var(--h4);
	}

	.legacy > p,
	.legacy > .wp-block-list,
	.legacy .split-media__text > p {
		color: var(--text-muted);
		font-size: var(--text-m);
	}

	.legacy .wp-block-image img {
		border-radius: var(--radius);
	}

	.legacy-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
		gap: clamp(1.25rem, 2.2vw, 2rem);
	}

	.legacy-grid > * {
		margin: 0 !important; /* owns spacing */
	}

	.legacy-card {
		padding: var(--space-m);
		border: 1px solid var(--border-color);
		border-radius: var(--radius);
		background: var(--bg-surface);
	}

	.legacy-card > * {
		margin: 0 !important; /* owns spacing */
	}

	.legacy-card > * + * {
		margin-block-start: var(--space-xs) !important; /* owns spacing */
	}

	.legacy-card > .wp-block-heading {
		font-size: var(--h5);
	}

	.legacy-card > p,
	.legacy-card > .wp-block-list {
		color: var(--text-muted);
		font-size: var(--text-s);
	}

	/* Numbered process cards. */
	.legacy-grid--steps {
		counter-reset: legacy-step;
	}

	.legacy-grid--steps > .legacy-card::before {
		counter-increment: legacy-step;
		content: counter(legacy-step, decimal-leading-zero);
		display: block;
		margin-block-end: var(--space-xs);
		color: var(--primary);
		font-family: var(--font-heading);
		font-weight: var(--heading-weight);
	}

	.legacy .wp-block-accordion {
		margin-block-start: var(--space-m) !important; /* owns spacing */
	}

	/* Article cover: below the hero, never overlapping it, no panel behind it.
	   Long titles make the hero as tall as they need. */
	.post-cover {
		padding-block-start: var(--section-space-s);
	}

	.post-cover:not(:has(img)) {
		display: none;
	}

	.post-cover .wp-block-post-featured-image {
		margin: 0;
	}

	.post-cover .wp-block-post-featured-image img {
		width: 100%;
		height: auto;
		border-radius: var(--radius);
	}

	.case-next {
		padding-block: 2rem clamp(4rem, 8vw, 6rem);
	}

	.case-next .alignwide {
		padding-top: 2rem;
		border-top: 1px solid var(--border-color);
	}

	.case-next .post-navigation-link-previous,
	.case-next .post-navigation-link-next {
		display: grid;
		gap: 0.3rem;
		color: var(--text-muted);
		font-size: var(--text-xs);
	}

	.case-next .post-navigation-link-next {
		text-align: right;
	}

	.case-next a {
		color: var(--heading-color);
		font-family: var(--font-heading);
		font-weight: var(--heading-weight);
		font-size: var(--h5);
		letter-spacing: var(--heading-tracking);
		text-decoration: none;
	}

	.case-next a:hover {
		text-decoration: underline;
	}

	/* ---------- Term filter: a row of category or sector pills ----------
	   A label and a core Categories block (any taxonomy) above a grid of
	   posts. Used on the case studies and articles indexes. */

	.term-filter {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.8rem 1.4rem;
		margin-bottom: clamp(2rem, 4vw, 3rem) !important; /* owns spacing */
	}

	.term-filter > * {
		margin: 0 !important; /* owns spacing */
	}

	.term-filter__label {
		color: var(--text-muted);
		font-size: var(--text-xs);
	}

	.term-filter .wp-block-categories {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.term-filter .wp-block-categories a {
		display: inline-block;
		padding: 0.45rem 0.9rem;
		border: 1px solid var(--border-color-strong);
		border-radius: 999px;
		color: var(--heading-color);
		font-size: 0.95rem;
		text-decoration: none;
	}

	.term-filter .wp-block-categories a:hover,
	.term-filter .current-cat a {
		border-color: var(--heading-color);
		background: var(--heading-color);
		color: var(--bg-body);
	}

	.case-cards {
		gap: clamp(2rem, 4vw, 3.5rem) !important; /* owns spacing */
	}

	@media (max-width: 760px) {
		.case-cards {
			grid-template-columns: minmax(0, 1fr) !important; /* core override: core keeps 2 columns down to 600px */
		}
	}

	.case-cards > li {
		position: relative;
	}

	.case-cards > li > * {
		margin: 0 !important; /* owns spacing */
	}

	.case-cards .wp-block-post-featured-image {
		overflow: hidden;
		border-radius: var(--radius);
		background: var(--bg-surface-alt);
	}

	.case-cards .wp-block-post-featured-image img {
		padding: clamp(1rem, 3vw, 2rem);
		transition: transform 0.7s var(--ease);
	}

	.case-cards > li:hover .wp-block-post-featured-image img {
		transform: scale(1.03);
	}

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

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

	.case-cards .wp-block-post-title {
		margin-top: 0.4rem !important; /* owns spacing */
		font-size: var(--h4);
		line-height: 1.1;
	}

	.case-cards .wp-block-post-title a {
		color: var(--heading-color);
		text-decoration: none;
	}

	.case-cards .wp-block-post-title a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.case-cards > li:hover .wp-block-post-title a {
		text-decoration: underline;
		text-decoration-thickness: 1px;
	}

	.case-cards .wp-block-post-excerpt {
		margin-top: 0.8rem !important; /* owns spacing */
		color: var(--text-muted);
	}

	@media (prefers-reduced-motion: reduce) {
		.case-cards .wp-block-post-featured-image img {
			transition: none;
		}
	}

	/* ---------- Split: media and text side by side ---------- */

	.split-media {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--container-gap);
		align-items: center;
	}

	.split-media > * {
		margin: 0 !important; /* owns spacing */
	}

	.split-media--reverse > :first-child {
		order: 2;
	}

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

		.split-media--reverse > :first-child {
			order: 0;
		}
	}

	.split-media__media img {
		width: 100%;
		border-radius: var(--radius);
	}

	.split-media__media--panel {
		display: grid;
		place-items: center;
		padding: clamp(1.5rem, 4vw, 3rem);
		border-radius: var(--radius);
		background: var(--bg-surface-alt);
	}

	.split-media__media--panel img {
		width: auto;
		max-height: 30rem;
		border-radius: var(--radius-xs);
	}

	/* A Blob backdrop image stays a comfortable size beside the text. */
	.split-media__media > .is-style-blob {
		max-width: 30rem;
		margin-inline: auto !important; /* owns spacing */
	}

	.split-media__text > * + * {
		margin-top: 1.2rem !important; /* owns spacing */
	}

	.split-media__text > p {
		max-width: 36rem;
		color: var(--text-muted);
	}

	/* A half-width column can't carry a full section heading: it stacks
	   into four or five lines. */
	.split-media__text > h2 {
		font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.6rem);
	}

	/* The image sits clear of the text beside or above it. */
	.split-media {
		column-gap: clamp(2rem, 5vw, 5rem);
		row-gap: var(--space-l);
	}

	.split-media__text .wp-block-buttons {
		margin-top: 2rem !important; /* owns spacing */
	}

	/* ---------- Beyond medical: one wide card ----------
	   Heading on the left; text and button on the right from tablet up.
	   sections.css is a later layer than block styles, so these rules win
	   over the Text card style the card uses. */

	.beyond.section--m {
		padding-top: 0;
	}

	@media (min-width: 900px) {
		.beyond .beyond__card {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
			gap: 0 var(--container-gap);
			align-items: start;
			padding: clamp(2rem, 4vw, 3.5rem);
		}

		.beyond .beyond__card > h2 {
			grid-row: span 2;
		}

		/* The card style's own spacing between children still applies, and
		   it lines the text up just under the heading's cap height. */
		.beyond .beyond__card > .wp-block-buttons {
			padding-top: 0.8rem;
		}
	}

	.beyond .beyond__card > h2 {
		font-size: var(--h3);
		line-height: 1.15;
	}

	.beyond .beyond__card > p {
		max-width: 38rem;
		font-size: var(--text-l);
	}

	/* ---------- Post index: a Query Loop of cards ----------
	   The Articles page and its category and tag archives. Each post is a
	   Group with the Image card style; this sets the grid and the date. */

	.card-posts {
		gap: var(--grid-gap) !important; /* owns spacing */
	}

	@media (min-width: 600px) and (max-width: 960px) {
		.card-posts {
			grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* core override: core keeps 3 columns down to 600px */
		}
	}

	.card-posts > li {
		display: flex;
	}

	.card-posts > li > .wp-block-group {
		flex: 1;
	}

	/* Article titles are the point of the card, so they're bigger than a
	   standard card heading. */
	.card-posts .wp-block-post-title {
		font-size: clamp(1.4rem, 1.15rem + 0.7vw, 1.8rem);
		line-height: 1.2;
	}

	/* The date sits at the bottom, so a row of cards lines up. */
	.card-posts .card__date {
		margin-top: auto !important; /* owns spacing */
		padding-top: 1.2rem;
		color: var(--text-muted);
		font-size: 0.85rem;
	}

	.post-index__pages {
		margin-top: clamp(3rem, 6vw, 4rem) !important; /* owns spacing */
		gap: 0.4rem;
	}

	.post-index__pages :is(a, .current) {
		display: inline-grid;
		place-items: center;
		min-width: 2.5rem;
		height: 2.5rem;
		padding-inline: 0.8rem;
		border-radius: 999px;
		color: var(--heading-color);
		text-decoration: none;
	}

	.post-index__pages .current {
		background: var(--heading-color);
		color: var(--bg-body);
	}

	/* ---------- Card grid: cards under a section head ----------
	   Any Group of cards (Text, Icon or Image card styles) with a grid
	   utility. This only sets its distance from the heading above. */

	.section-head + .card-grid {
		margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; /* owns spacing */
	}

	/* ---------- Feature grid: a row of icon cards ----------
	   The look comes from the Icon card style on each child; this only sets
	   the grid and its distance from the heading. */

	/* Three across, so six cards are two even rows; four or eight go four
	   across. Two across on tablets, one on phones. */
	.feature-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(1.25rem, 2.2vw, 2rem);
		margin-top: clamp(3rem, 6vw, 4rem) !important; /* owns spacing */
	}

	.feature-grid:has(> :nth-child(4):last-child),
	.feature-grid:has(> :nth-child(8):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	@media (max-width: 1100px) {
		.feature-grid,
		.feature-grid:has(> :nth-child(4):last-child),
		.feature-grid:has(> :nth-child(8):last-child) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 640px) {
		.feature-grid,
		.feature-grid:has(> :nth-child(4):last-child),
		.feature-grid:has(> :nth-child(8):last-child) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.feature-grid > * {
		margin: 0 !important; /* owns spacing */
	}

	/* ---------- Detail steps: numbered rows, text beside each heading ---------- */

	.detail-steps {
		margin-top: clamp(3rem, 6vw, 4rem) !important; /* owns spacing */
		counter-reset: detail-step;
	}

	.detail-steps > * {
		display: grid;
		grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.4fr);
		gap: 1rem clamp(1.5rem, 4vw, 4rem);
		margin: 0 !important; /* owns spacing */
		padding-block: clamp(1.8rem, 3vw, 2.6rem);
		border-top: 1px solid var(--border-color-strong);
		counter-increment: detail-step;
	}

	.detail-steps > *::before {
		content: counter(detail-step, decimal-leading-zero);
		color: var(--link-color);
		font-family: var(--font-heading);
		font-weight: var(--heading-weight);
		font-size: var(--h4);
		letter-spacing: var(--heading-tracking);
		line-height: 1.1;
	}

	.detail-steps > * > * {
		margin: 0 !important; /* owns spacing */
	}

	.detail-steps :is(h2, h3) {
		font-size: var(--h4);
		line-height: 1.1;
	}

	.detail-steps > * > :last-child > * + * {
		margin-top: 0.8rem !important; /* owns spacing */
	}

	.detail-steps p {
		color: var(--text-muted);
	}

	@media (max-width: 760px) {
		.detail-steps > * {
			grid-template-columns: 3rem minmax(0, 1fr);
		}

		.detail-steps > * > :last-child {
			grid-column: 2;
		}
	}

	/* ---------- FAQ: core Accordion ---------- */

	.faq__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
		gap: 2rem 4rem;
		align-items: start;
	}

	.faq__grid > * {
		margin: 0 !important; /* owns spacing */
	}

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

	/* Each question is a white card with a soft shadow, matching the
	   check-up tiles. The plus is drawn in CSS so it sits dead centre in
	   its circle; core turns it into a cross when the item opens. */
	:is(.faq, .legacy) .wp-block-accordion {
		display: grid;
		gap: 0.75rem;
	}

	:is(.faq, .legacy) .wp-block-accordion-item {
		margin: 0 !important; /* owns spacing */
		border-radius: var(--radius);
		background: var(--bg-surface);
		box-shadow: var(--shadow-xs);
	}

	:is(.faq, .legacy) .wp-block-accordion-heading {
		margin: 0 !important; /* owns spacing */
		font-family: var(--font-heading);
		font-size: 1.1rem;
		font-weight: 500;
		letter-spacing: normal;
		line-height: 1.4;
	}

	:is(.faq, .legacy) .wp-block-accordion-heading__toggle {
		gap: 1.5rem;
		padding: 1.25rem 1.5rem !important; /* core override: core sets the toggle padding outside any layer */
		text-align: start;
	}

	:is(.faq, .legacy) .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
		text-decoration: none !important; /* core override: core underlines the title on hover outside any layer */
	}

	/* Core sizes the icon at 1.2em, so the font size sets the circle:
	   1.875rem x 1.2 = 2.25rem. The "+" character is hidden and redrawn. */
	.faq .wp-block-accordion-heading__toggle-icon {
		--faq-icon: var(--link-color);
		position: relative;
		flex: none;
		border-radius: var(--radius-circle);
		background: light-dark(var(--secondary-l-5), rgb(255 255 255 / 0.08));
		color: transparent;
		font-size: 1.875rem;
		transition: background-color 0.2s, transform 0.2s;
	}

	.faq .wp-block-accordion-heading__toggle-icon::before,
	.faq .wp-block-accordion-heading__toggle-icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0.85rem;
		height: 2px;
		border-radius: 1px;
		background: var(--faq-icon);
		translate: -50% -50%;
	}

	.faq .wp-block-accordion-heading__toggle-icon::after {
		rotate: 90deg;
	}

	.faq .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon,
	.faq .is-open .wp-block-accordion-heading__toggle-icon {
		--faq-icon: var(--white);
		background: var(--primary);
	}

	.faq .wp-block-accordion-panel {
		padding: 0 1.5rem 1.5rem;
	}

	.faq .wp-block-accordion-panel > * {
		max-width: 44rem;
		margin-block: 0 !important; /* owns spacing */
		color: var(--text-muted);
	}

	.faq .wp-block-accordion-panel > * + * {
		margin-top: 0.8rem !important; /* owns spacing */
	}

	/* ---------- Contact panel: form and details ---------- */

	.contact-panel {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: var(--container-gap);
		align-items: start;
	}

	.contact-panel > * {
		margin: 0 !important; /* owns spacing */
	}

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

	.contact-form {
		display: grid;
		gap: 1.2rem;
		padding: clamp(1.5rem, 4vw, 2.5rem);
		border-radius: var(--radius);
		background: var(--bg-surface);
		box-shadow: var(--shadow-l);
	}

	.contact-form__row {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
		gap: 1.2rem;
	}

	.contact-form label {
		display: grid;
		gap: 0.45rem;
		color: var(--heading-color);
		font-size: 0.95rem;
		font-family: var(--font-heading);
		font-weight: 500;
	}

	.contact-form :is(input, select, textarea) {
		width: 100%;
		padding: 0.85rem 1rem;
		border: 1px solid var(--border-color-strong);
		border-radius: var(--radius-xs);
		background: var(--bg-body);
		color: var(--text-color);
		font: inherit;
		font-size: 1rem;
	}

	.contact-form textarea {
		min-height: 9rem;
		resize: vertical;
	}

	.contact-form :is(input, select, textarea):focus-visible {
		border-color: var(--link-color);
	}

	.contact-form button {
		justify-self: start;
		padding: 1.05rem 1.55rem;
		border: 1px solid var(--primary);
		border-radius: var(--radius-xs);
		background: var(--primary);
		color: var(--white);
		font: inherit;
		font-size: 1.05rem;
		font-family: var(--font-heading);
		font-weight: 500;
		cursor: pointer;
	}

	.contact-form button:hover {
		background: var(--primary-hover);
	}

	.contact-form__note {
		color: var(--text-muted);
		font-size: var(--text-xs);
	}

	.contact-details :is(h2, h3) {
		font-size: var(--h4);
		line-height: 1.15;
	}

	.contact-details > * + * {
		margin-top: 1.4rem !important; /* owns spacing */
	}

	.contact-details__list {
		display: grid;
		gap: 1rem;
	}

	.contact-details__list > * {
		margin: 0 !important; /* owns spacing */
	}

	.contact-details__list > * > * {
		margin: 0 !important; /* owns spacing */
	}

	.contact-details__list .wp-block-pd-icon {
		--icon-size: 1.4rem;
		color: var(--link-color);
	}

	/* Pull quote in a case study body. */
	.case-body .wp-block-quote {
		margin-block: clamp(2.5rem, 5vw, 3.5rem) !important; /* owns spacing */
		padding: 0 0 0 1.6rem;
		border-left: 2px solid var(--secondary);
	}

	.case-body .wp-block-quote p {
		color: var(--heading-color);
		font-family: var(--font-heading);
		font-weight: var(--heading-weight);
		font-size: var(--h4);
		letter-spacing: var(--heading-tracking);
		line-height: 1.25;
	}

	.case-body .wp-block-quote cite {
		display: block;
		margin-top: 1rem;
		color: var(--text-muted);
		font-size: var(--text-xs);
		font-style: normal;
	}

	/* Bound contact details (Settings > Business details) */
	.contact-details__list .wp-block-buttons,
	.contact-hours .wp-block-buttons {
		margin: 0;
	}

	.contact-details__list .wp-block-pd-icon {
		flex: none;
	}

	.contact-details .is-style-text {
		--btn-text: var(--link-color);
		--btn-text-hover: var(--link-color-hover);
	}

	.contact-hours {
		display: grid;
		gap: 0.35rem;
		max-width: 22rem;
	}

	.contact-hours > * {
		margin: 0 !important; /* owns spacing */
		padding-bottom: 0.35rem;
		border-bottom: 1px solid var(--border-color);
	}

	.contact-hours > * > * {
		margin: 0 !important; /* owns spacing */
	}

	/* A day left blank in Business details loses its value; hide its label too. */
	.contact-hours > div:has(> p:only-child) {
		display: none !important; /* core override: the Group's flex layout sets display outside any layer */
	}

	.contact-hours > * > :first-child {
		color: var(--heading-color);
		font-family: var(--font-heading);
		font-weight: 500;
	}

	.contact-hours .contact-hours__note {
		padding-top: 0.5rem;
		border-bottom: 0;
		color: var(--text-muted);
		font-size: var(--text-xs);
	}

	/* ---------- Toolkit: the Website Owners Club resource list ----------
	   One Query Loop per category. Each item shows its name twice, once
	   linked to the referral address and once to the plain one; the
	   "hide referral links" switch decides which one shows. */

	.toolkit__intro {
		margin-block-end: var(--space-m) !important; /* owns spacing */
		font-size: var(--text-l);
	}

	.toolkit__columns {
		gap: var(--space-xl) !important; /* core override: columns gap is set outside any layer */
	}

	.toolkit__main {
		max-width: 46rem;
	}

	.toolkit__aside {
		align-self: flex-start; /* a stretched column has no room to stick */
		position: sticky;
		top: var(--space-xl);
		display: grid;
		gap: var(--space-s);
	}

	/* Sidebar panels: the card look without the link card's hover. */
	.toolkit__panel {
		padding: var(--space-m) var(--space-m) var(--space-s);
		border: 1px solid var(--border-color);
		border-radius: var(--radius);
		background: var(--bg-surface);
	}

	.toolkit__panel > * {
		margin-block: 0 !important; /* owns spacing */
	}

	.toolkit__panel > * + * {
		margin-block-start: var(--space-xs) !important; /* owns spacing */
	}

	.toolkit__panel > .wp-block-heading,
	.toolkit__options > .wp-block-heading {
		font-size: var(--text-l);
		letter-spacing: 0;
	}

	.toolkit__panel > p,
	.toolkit__options > p {
		color: var(--text-muted);
		font-size: var(--text-s);
	}

	.toolkit__panel li {
		font-size: var(--text-s);
	}

	.toolkit__panel .wp-block-list {
		padding-inline-start: 1.1em;
	}

	.toolkit__download {
		margin-block: var(--space-xs) !important; /* owns spacing */
	}

	.toolkit__download .wp-block-button__link {
		width: 100%;
	}

	/* Eight bookmark files; the three switches pick the one that shows. */
	.toolkit__download-link {
		display: none;
	}

	.toolkit:not(:has(#toolkit-plain-links:checked)):has(#toolkit-no-pd:checked):not(:has(#toolkit-hide-wordpress:checked)) .toolkit__download-link--referral,
	.toolkit:not(:has(#toolkit-plain-links:checked)):has(#toolkit-no-pd:checked):has(#toolkit-hide-wordpress:checked) .toolkit__download-link--referral-nowp,
	.toolkit:not(:has(#toolkit-plain-links:checked)):not(:has(#toolkit-no-pd:checked)):not(:has(#toolkit-hide-wordpress:checked)) .toolkit__download-link--referral-pd,
	.toolkit:not(:has(#toolkit-plain-links:checked)):not(:has(#toolkit-no-pd:checked)):has(#toolkit-hide-wordpress:checked) .toolkit__download-link--referral-pd-nowp,
	.toolkit:has(#toolkit-plain-links:checked):has(#toolkit-no-pd:checked):not(:has(#toolkit-hide-wordpress:checked)) .toolkit__download-link--plain,
	.toolkit:has(#toolkit-plain-links:checked):has(#toolkit-no-pd:checked):has(#toolkit-hide-wordpress:checked) .toolkit__download-link--plain-nowp,
	.toolkit:has(#toolkit-plain-links:checked):not(:has(#toolkit-no-pd:checked)):not(:has(#toolkit-hide-wordpress:checked)) .toolkit__download-link--plain-pd,
	.toolkit:has(#toolkit-plain-links:checked):not(:has(#toolkit-no-pd:checked)):has(#toolkit-hide-wordpress:checked) .toolkit__download-link--plain-pd-nowp {
		display: block;
	}

	.toolkit__download-note {
		color: var(--text-muted);
		font-size: var(--text-xs);
	}

	.toolkit__download-note span {
		display: none;
	}

	.toolkit:has(#toolkit-plain-links:checked) .toolkit__download-note .is-plain,
	.toolkit:not(:has(#toolkit-plain-links:checked)) .toolkit__download-note .is-referral,
	.toolkit:not(:has(#toolkit-no-pd:checked)) .toolkit__download-note .is-pd,
	.toolkit:has(#toolkit-no-pd:checked) .toolkit__download-note .is-no-pd,
	.toolkit:has(#toolkit-hide-wordpress:checked) .toolkit__download-note .is-no-wp {
		display: inline;
	}

	/* Hide the WordPress-only rows, and any category left with nothing to
	   show. Rows carry their platform as a class (inc/toolkit.php), and each
	   category's heading and loop sit in one .toolkit__section. */
	.toolkit:has(#toolkit-hide-wordpress:checked) .toolkit__items > li.has-term-wordpress {
		display: none;
	}

	.toolkit:has(#toolkit-hide-wordpress:checked) .toolkit__section:not(:has(li:not(.has-term-wordpress))) {
		display: none;
	}

	.toolkit__howto {
		font-size: var(--text-xs) !important;
		color: var(--text-muted);
	}

	/* Changelog: the newest three show, the rest wait behind "Show all". */
	.toolkit__changelog-list li {
		margin-block: 0 0 var(--space-xs) !important; /* owns spacing */
		list-style: none;
	}

	.toolkit__changelog-list {
		padding: 0 !important;
	}

	.toolkit__changelog-list li {
		font-size: var(--text-s);
	}

	.toolkit__changelog-list time,
	.toolkit__changelog-list strong {
		display: block;
		margin-block-end: 0.15rem;
		color: var(--primary);
		font-family: var(--font-heading);
		font-size: var(--text-xs);
		font-weight: 500;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.toolkit__changelog:not(:has(#toolkit-changelog-all:checked)) .toolkit__changelog-list li:nth-child(n + 4) {
		display: none;
	}

	.toolkit__changelog:not(:has(#toolkit-changelog-all:checked)) .toolkit__changelog-list li:nth-child(3) {
		mask-image: linear-gradient(to bottom, #000 40%, transparent);
	}

	.toolkit__changelog:not(:has(.toolkit__changelog-list li:nth-child(4))) .toolkit__changelog-more {
		display: none;
	}

	.toolkit__changelog-more input {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.toolkit__changelog-more label {
		cursor: pointer;
		color: var(--link-color);
		font-size: var(--text-s);
		font-family: var(--font-heading);
		font-weight: 500;
		text-decoration: underline;
	}

	.toolkit__changelog-more label::after {
		content: "Show all changes";
	}

	.toolkit__changelog:has(#toolkit-changelog-all:checked) .toolkit__changelog-more label::after {
		content: "Show fewer";
	}

	/* Customise the links: one block, three switches, each takes something out. */
	.toolkit__options {
		display: grid;
		gap: var(--space-s);
		padding: var(--space-m);
		border: 1px solid var(--border-color);
		border-radius: var(--radius);
		background-color: var(--bg-surface);
	}

	.toolkit__options > * {
		margin: 0 !important; /* owns spacing */
	}

	.toolkit__option {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: var(--space-s);
		row-gap: 0.2rem;
		align-items: start;
		padding-block-start: var(--space-s);
		border-block-start: 1px solid var(--border-color);
	}

	.toolkit__option .toolkit__toggle {
		grid-column: 1;
		margin-top: 0.1rem;
	}

	.toolkit__option label {
		grid-column: 2;
		font-family: var(--font-heading);
		font-weight: 500;
		font-size: var(--text-s);
		cursor: pointer;
	}

	.toolkit__option p {
		grid-column: 2;
		margin: 0 !important; /* owns spacing */
		color: var(--text-muted);
		font-size: var(--text-xs);
	}

	/* The switches: a checkbox drawn as a track and a knob. */
	.toolkit__toggle {
		display: flex;
		align-items: center;
	}

	.toolkit__toggle input {
		appearance: none;
		flex: none;
		width: 2.6rem;
		height: 1.5rem;
		margin: 0;
		border: 1px solid var(--border-color-strong);
		border-radius: 999px;
		background-color: var(--border-color);
		cursor: pointer;
		position: relative;
		transition: background-color 0.15s;
	}

	.toolkit__toggle input::before {
		content: "";
		position: absolute;
		top: 2px;
		left: 2px;
		width: calc(1.5rem - 6px);
		height: calc(1.5rem - 6px);
		border-radius: 50%;
		background-color: var(--bg-body);
		box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
		transition: transform 0.15s;
	}

	.toolkit__toggle input:checked {
		background-color: var(--primary);
		border-color: var(--primary);
	}

	.toolkit__toggle input:checked::before {
		transform: translateX(1.1rem);
	}

	.toolkit__toggle input:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}

	.toolkit__toggle label {
		cursor: pointer;
	}

	.toolkit:has(#toolkit-plain-links:checked) .toolkit__name--referral,
	.toolkit:not(:has(#toolkit-plain-links:checked)) .toolkit__name--plain {
		display: none;
	}

	.toolkit__section {
		margin-block-start: var(--space-l) !important; /* owns spacing */
	}

	.toolkit__category {
		margin: 0 0 var(--space-xs) !important; /* owns spacing */
		font-size: var(--h3);
	}

	.toolkit__items {
		margin: 0 !important; /* owns spacing */
		padding: 0;
		list-style: none;
	}

	.toolkit__items > li {
		margin: 0 !important; /* owns spacing */
		padding-block: var(--space-s);
		border-block-end: 1px solid var(--border-color);
	}

	.toolkit__item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--space-s);
		row-gap: 0.3rem;
		align-items: start;
	}

	.toolkit__item > * {
		margin: 0 !important; /* owns spacing */
	}

	.toolkit__name {
		font-family: var(--font-heading);
		font-weight: var(--heading-weight);
		font-size: var(--text-m);
	}

	.toolkit__name a {
		color: var(--heading-color);
		text-decoration: none;
	}

	.toolkit__name a:hover {
		color: var(--primary);
		text-decoration: underline;
	}

	.toolkit__description,
	.toolkit__why {
		grid-column: 1;
		font-size: var(--text-s);
	}

	.toolkit__why {
		color: var(--text-muted);
		font-style: italic;
	}

	.toolkit__description:empty,
	.toolkit__why:empty {
		display: none;
	}

	.toolkit__tags {
		grid-column: 2;
		grid-row: 1 / span 3;
		justify-content: flex-end;
		gap: 0.35rem !important; /* core override: flex layout gap is set outside any layer */
	}

	.toolkit__tag span {
		display: inline-block;
		padding: 0.1em 0.6em;
		border: 1px solid var(--border-color);
		border-radius: 999px;
		font-size: var(--text-xs);
		color: var(--text-muted);
		white-space: nowrap;
	}

	.toolkit__tag--status span {
		border-color: var(--primary);
		background-color: var(--primary);
		color: var(--on-primary, #fff);
	}

	.toolkit__tag:empty {
		display: none;
	}

	@media (max-width: 781px) {
		.toolkit__aside {
			position: static;
		}
	}

	@media (max-width: 600px) {
		.toolkit__item {
			grid-template-columns: 1fr;
		}

		.toolkit__tags {
			grid-column: 1;
			grid-row: auto;
			justify-content: flex-start;
		}
	}

	/* ---------- Toolkit gate: the password form before the Toolkit ----------
	   Core's constrained layout sizes the form (a direct child of the page
	   content) outside any layer, so the panel inside it carries the width. */

	.toolkit-gate {
		padding-block: var(--space-m) var(--space-xl);
	}

	.toolkit-gate__panel {
		display: grid;
		gap: var(--space-xs);
		max-width: 28rem;
		margin-inline: auto;
		padding: var(--space-l);
		border: 1px solid var(--border-color);
		border-radius: var(--radius);
		background-color: var(--bg-surface);
	}

	.toolkit-gate__title {
		margin: 0;
		font-size: var(--h4);
	}

	.toolkit-gate__text {
		margin: 0 0 var(--space-s);
		color: var(--text-muted);
	}

	.toolkit-gate__label {
		font-family: var(--font-heading);
		font-weight: 500;
	}

	.toolkit-gate__input {
		width: 100%;
		padding: 0.7rem 0.9rem;
		border: 1px solid var(--border-color-strong);
		border-radius: var(--radius-xs);
		background-color: var(--bg-body);
		color: inherit;
		font: inherit;
	}

	.toolkit-gate__input:focus-visible {
		outline: var(--focus-width) solid var(--focus-color);
		outline-offset: var(--focus-offset);
	}

	.toolkit-gate__button {
		width: 100%;
		margin-top: var(--space-xs);
	}

	.toolkit-gate__join {
		margin: var(--space-s) 0 0;
		font-size: var(--text-s);
		color: var(--text-muted);
	}

}