/* ==========================================================================
   PAN child theme — the pages around the services (v0.5, 14 Sep 2026)
   --------------------------------------------------------------------------
   Loaded after pan-services.css. Built by scripts/setup-pages.php and the homepage teasers:
     1. shared pieces: page heroes, section links, cards on navy (glass), CTA band
     2. the framework: the four-ring drawing, the layer stack, the protocol dial, the scale rings,
        the self-reliance hub, the examples
     3. the homepage teasers: framework and free resources
     4. resources · about · how it works · contact · privacy policy
     5. the footer and the 404 page
   Everything that moves starts from its finished drawing and sits behind prefers-reduced-motion,
   as in the rest of the theme. The framework's choosers use the no-JavaScript chooser from
   pan-services.css; anything carrying data-n gets --lit: 1 when its chip is chosen, and styles itself
   from that number (color-mix and calc), so one generated rule serves every explainer.
   ========================================================================== */

/* ---------- 1. Shared pieces ------------------------------------------------ */

.pan-page-hero-text { max-width: 44rem; }
.pan-page-hero-text > * { margin-block: 0; }

/* Where a container zeroes its children's margins, the eyebrow and the lead get theirs back. */
.pan-fw-teaser-text > p.pan-eyebrow,
.pan-hub-coming > p.pan-eyebrow,
.pan-about-fw-text > p.pan-eyebrow,
.pan-contact-text > p.pan-eyebrow,
.pan-about-story > p.pan-eyebrow { margin-bottom: 0.875rem; }
.pan-hub-coming > p.pan-lead,
.pan-about-fw-text > p.pan-lead { margin-top: 1rem; }

/* A plain "more" link at the end of a section, with the theme's arrow. */
.pan-section p.pan-section-link { margin-top: 2.25rem; font-weight: 600; }

.pan-section-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--wp--preset--color--seal-mid);
	text-decoration: none;
}

.pan-section-link a::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--pan-icon-arrow) center / contain no-repeat;
	mask: var(--pan-icon-arrow) center / contain no-repeat;
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-section-link a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.pan-section-link a:hover::after { transform: translateX(3px); }

/* Doors, four across (the framework's questions, the hub's ways in). */
@media (min-width: 640px) {
	.pan-doors.pan-doors--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.pan-doors.pan-doors--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pan-doors--four .pan-door h3 { font-size: 1.4rem; }

/* Glass cards on a navy room (Seal DNA on-seal tokens): three across, never an orphan on a row. */
.pan-glass-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin-top: 2.25rem;
}

@media (min-width: 640px) {
	.pan-glass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
	.pan-glass-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pan-glass-grid > * { margin: 0; }

/* Four cards (the Members page's ways to pay): two by two on a wide screen too. */
@media (min-width: 960px) {
	.pan-glass-grid.pan-glass-grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pan-glass {
	padding: 1.5rem 1.5rem 1.4rem;
	background: var(--wp--custom--depth--on-seal-fill);
	border: 1px solid var(--wp--custom--depth--on-seal-edge);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--depth--on-seal-lift);
}

.pan-glass > * { margin-block: 0; }
.pan-glass h3.wp-block-heading { font-size: 1.3rem; color: var(--wp--preset--color--bone); }
.pan-room .pan-glass p { margin-top: 0.55rem; color: var(--wp--preset--color--seal-label); }

/* A closing band: one question, one or two buttons. */
.pan-cta-band { padding-top: clamp(3.25rem, 7vw, 5rem); padding-bottom: clamp(3.25rem, 7vw, 5rem); text-align: center; }
.pan-cta-band h2.wp-block-heading { max-width: 20ch; margin-inline: auto; font-size: clamp(2rem, 4vw, 3rem); text-wrap: balance; }
.pan-cta-band .pan-lead { max-width: 34rem; margin-inline: auto; }
.pan-cta-band .wp-block-buttons { gap: 0.75rem 1rem; margin-top: 1.75rem; }

/* 🔴 Rooms that hold glass sit on night, not the room's usual deep navy: a glass fill lightens the ground,
   and brass text on glass over deep measured 3.94:1 (pan-services.css, the options section). */
.pan-room.pan-fw-room { background-color: var(--wp--preset--color--night); }

/* ---------- 2. The framework ---------------------------------------------- */

/* The four-ring drawing: layers, protocols, scales and self-reliance around "You". Each ring turns
   slowly, alternate ways; the first frame is the whole drawing. */
.pan-motif-framework { max-width: 26rem; }
.pan-motif-framework .pm-halo { fill: rgba(7, 168, 173, 0.07); }
.pan-motif-framework .pm-ring { transform-box: view-box; transform-origin: 180px 180px; }
.pan-motif-framework .pm-ring > circle:first-child { fill: none; }
.pan-motif-framework .pm-ring-layers > circle:first-child { stroke: rgba(7, 168, 173, 0.92); stroke-width: 9; stroke-dasharray: 36 4; }
.pan-motif-framework .pm-ring-protocols > circle:first-child { stroke: var(--wp--preset--color--brass); stroke-width: 7; stroke-dasharray: 47.43 4; }
.pan-motif-framework .pm-ring-scales > circle:first-child { stroke: rgba(188, 211, 232, 0.72); stroke-width: 6; stroke-dasharray: 68 4; }
.pan-motif-framework .pm-ring-self > circle:first-child { stroke: rgba(244, 236, 216, 0.88); stroke-width: 7; stroke-dasharray: 47.43 4; }
.pan-motif-framework .pm-ring-layers .pm-node { fill: #6FD6D9; }
.pan-motif-framework .pm-ring-protocols .pm-node { fill: var(--wp--preset--color--bone); }
.pan-motif-framework .pm-ring-scales .pm-node { fill: var(--wp--preset--color--brass); }
.pan-motif-framework .pm-ring-self .pm-node { fill: #6FD6D9; }
.pan-motif-framework .pm-core-disc { fill: var(--wp--preset--color--seal-deep); }
.pan-motif-framework .pm-core-ring { fill: none; stroke: var(--wp--preset--color--brass); stroke-width: 1.5; }
.pan-motif-framework .pm-core-inner { fill: none; stroke: rgba(244, 236, 216, 0.32); stroke-width: 1; }
.pan-motif-framework .pm-core-text { fill: var(--wp--preset--color--bone); font-family: var(--wp--preset--font-family--newsreader); font-size: 17px; }

@keyframes pm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
	.pan-motif-framework .pm-ring-layers { animation: pm-spin 90s linear infinite; }
	.pan-motif-framework .pm-ring-protocols { animation: pm-spin 70s linear infinite reverse; }
	.pan-motif-framework .pm-ring-scales { animation: pm-spin 110s linear infinite; }
	.pan-motif-framework .pm-ring-self { animation: pm-spin 60s linear infinite reverse; }
}

.pan-fw-hero .pan-motif-framework { justify-self: center; }

/* Explainer copy inside a chosen card. */
.pan-fw-pick p.pan-fw-what { margin-top: 0.7rem; font-size: 1.125rem; line-height: 1.5; color: var(--wp--preset--color--ink); }
/* The sister-network note: an aside, set off by a brass rule rather than a box. */
p.pan-sister { margin-top: 2rem; padding-left: 1.1rem; border-left: 3px solid var(--wp--preset--color--brass); font-size: 1.0625rem; line-height: 1.55; color: var(--wp--preset--color--ink-2); }
p.pan-sister strong { color: var(--wp--preset--color--ink); }

.pan-fw-pick p.pan-fw-promise { margin-top: 0.55rem; font-size: 1.2rem; line-height: 1.45; color: var(--wp--preset--color--ink); }
.pan-fw-pick p.pan-fw-promise b { color: var(--wp--custom--brass-800); }

dl.pan-fw-facts { display: grid; gap: 0; margin: 1.2rem 0 0; }
.pan-fw-facts > div { margin: 0; padding: 0.8rem 0; border-top: 1px solid var(--wp--preset--color--border); }
.pan-fw-facts dt { font-size: var(--wp--preset--font-size--caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); }
.pan-fw-facts dd { margin: 0.25rem 0 0; color: var(--wp--preset--color--ink-2); }

/* The first step is the one to act on: a navy tick, and full ink. */
.pan-fw-facts > .pan-fw-step dt { display: flex; align-items: center; gap: 0.45rem; color: var(--wp--preset--color--seal-mid); }

.pan-fw-facts > .pan-fw-step dt::before {
	content: "";
	width: 1.05rem;
	height: 1.05rem;
	background: currentColor;
	-webkit-mask: var(--pan-icon-safe) center / contain no-repeat;
	mask: var(--pan-icon-safe) center / contain no-repeat;
}

.pan-fw-facts > .pan-fw-step dd { font-weight: 600; color: var(--wp--preset--color--ink); }

.pan-fw-pick p.pan-fw-help,
.pan-fw-pick p.pan-fw-move { margin-top: 1rem; }
.pan-fw-pick p.pan-fw-move { color: var(--wp--preset--color--ink-2); }
.pan-fw-pick p.pan-fw-move strong { color: var(--wp--preset--color--headline); }
.pan-fw-pick p.pan-fw-help { font-weight: 600; }

.pan-fw-help a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--wp--preset--color--seal-mid);
	text-decoration: none;
}

.pan-fw-help a::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--pan-icon-arrow) center / contain no-repeat;
	mask: var(--pan-icon-arrow) center / contain no-repeat;
}

.pan-fw-help a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.pan-fw-pick p.pan-fw-note { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px dashed var(--wp--preset--color--border); font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--ink-2); }
.pan-fw-pick p.pan-fw-limit { margin-top: 0.55rem; font-size: var(--wp--preset--font-size--small); line-height: 1.5; color: var(--wp--preset--color--ink-3); }
.pan-fw-pick p.pan-fw-limit b { color: var(--wp--preset--color--ink-2); }

/* --- Question 1: the layer stack. Nine isometric slabs, layer 1 at the bottom; the chosen one lights
   cyan and slides out of the stack. Each slab is a rounded square turned 45° and squashed to half its
   height; its box-shadow, drawn before the transform, becomes the slab's edge. */
/* Side by side from 881px; below that the shared chooser stage stacks (pan-services.css). This file loads later,
   so an unconditional column rule here overrode that stacking on phones (seen 14 Sep at 390px). */
@media (min-width: 881px) {
	.pan-fw-stage { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
}

ol.pan-fw-stack {
	display: flex;
	flex-direction: column-reverse; /* layer 1 last in paint order would sit on top: reversed, the higher slab paints over the lower */
	margin: 0;
	padding: 3rem 0 3.4rem;
	list-style: none;
}

.pan-fw-stack li {
	--lit: 0;
	--tone: 0%;
	position: relative;
	z-index: calc(1 + var(--lit) * 20);
	height: 2.25rem;
	margin: 0;
}

.pan-fw-stack li:nth-child(2) { --tone: 11%; }
.pan-fw-stack li:nth-child(3) { --tone: 22%; }
.pan-fw-stack li:nth-child(4) { --tone: 33%; }
.pan-fw-stack li:nth-child(5) { --tone: 44%; }
.pan-fw-stack li:nth-child(6) { --tone: 55%; }
.pan-fw-stack li:nth-child(7) { --tone: 66%; }
.pan-fw-stack li:nth-child(8) { --tone: 77%; }
.pan-fw-stack li:nth-child(9) { --tone: 88%; }

.pan-fw-stack i {
	position: absolute;
	left: 2rem;
	top: 50%;
	width: 8.5rem;
	height: 8.5rem;
	margin-top: -4.25rem;
	border-radius: 0.6rem;
	background: color-mix(in srgb, var(--wp--preset--color--seal-bright) calc(var(--lit) * 100%), color-mix(in srgb, #3C7CC4 var(--tone), #0F2F86));
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.16),
		0.42rem 0.42rem 0 color-mix(in srgb, #056E72 calc(var(--lit) * 100%), var(--wp--preset--color--seal-deep));
	transform: translate(calc(var(--lit) * -1.6rem), calc(var(--lit) * -0.8rem)) scaleY(0.5) rotate(45deg);
	transition:
		transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease-decel),
		background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard),
		box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-fw-stack span {
	position: absolute;
	left: 13.6rem;
	top: 50%;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--small);
	font-weight: calc(500 + var(--lit) * 200);
	color: color-mix(in srgb, var(--wp--preset--color--headline) calc(var(--lit) * 100%), var(--wp--preset--color--ink-3));
	transform: translate(calc(var(--lit) * 0.4rem), -50%);
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease-decel), color var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-fw-stack span::before {
	content: "";
	width: 0.9rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--seal-bright) calc(var(--lit) * 100%), rgba(12, 40, 129, 0.22));
}

.pan-fw-stack span b {
	display: inline-grid;
	place-items: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	font-size: 0.72rem;
	color: var(--wp--preset--color--headline);
	background: color-mix(in srgb, var(--wp--preset--color--brass) calc(var(--lit) * 100%), var(--wp--preset--color--seal-soft));
}

@media (max-width: 880px) {
	ol.pan-fw-stack { padding: 2.2rem 0 2.6rem; }
	.pan-fw-stack li { height: 1.9rem; }
	.pan-fw-stack i { left: 2rem; width: 6rem; height: 6rem; margin-top: -3rem; }
	.pan-fw-stack span { left: 10.6rem; white-space: normal; max-width: calc(100% - 10.6rem); line-height: 1.2; font-size: var(--wp--preset--font-size--caption); }
}

/* --- Question 2: the protocol dial, in a night room. The needle turns to the chosen protocol; the arc
   shows where everyday life, the sweet spot and specialist practice sit. */
@media (min-width: 881px) {
	.pan-fw-dial-stage { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
}

.pan-fw-dial { margin: 0; }
.pan-fw-dial svg { display: block; width: 100%; max-width: 27rem; margin: 0 auto; overflow: visible; }
.pan-fw-dial .pm-arc { fill: none; stroke-width: 16; stroke-linecap: round; }
.pan-fw-dial .pm-arc.is-everyday { stroke: var(--wp--preset--color--seal-bright); }
.pan-fw-dial .pm-arc.is-sweet { stroke: var(--wp--preset--color--brass); }
.pan-fw-dial .pm-arc.is-specialist { stroke: rgba(188, 211, 232, 0.4); }
.pan-fw-dial .pm-dial-ticks line { stroke: var(--wp--preset--color--night); stroke-width: 3; }

.pan-fw-dial .pm-dial-numbers text {
	--lit: 0;
	fill: color-mix(in srgb, var(--wp--preset--color--brass) calc(var(--lit) * 100%), var(--wp--preset--color--seal-label));
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: calc(16px + var(--lit) * 5px);
	font-weight: calc(400 + var(--lit) * 200);
	text-anchor: middle;
	transition: fill var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-fw-dial .pm-needle { transform-box: view-box; transform-origin: 160px 170px; transform: rotate(-90deg); transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease-decel); }
.pan-fw-dial .pm-needle line { stroke: var(--wp--preset--color--bone); stroke-width: 3; stroke-linecap: round; }
.pan-fw-dial .pm-needle-tip { fill: var(--wp--preset--color--bone); }
.pan-fw-dial .pm-hub { fill: var(--wp--preset--color--night); stroke: var(--wp--preset--color--brass); stroke-width: 2; }
.pan-fw-dial .pm-hub-dot { fill: var(--wp--preset--color--brass); }

.pan-fw-protocols:has(.pan-chip:nth-of-type(1) > input:checked) .pm-needle { transform: rotate(-90deg); }
.pan-fw-protocols:has(.pan-chip:nth-of-type(2) > input:checked) .pm-needle { transform: rotate(-60deg); }
.pan-fw-protocols:has(.pan-chip:nth-of-type(3) > input:checked) .pm-needle { transform: rotate(-30deg); }
.pan-fw-protocols:has(.pan-chip:nth-of-type(4) > input:checked) .pm-needle { transform: rotate(0deg); }
.pan-fw-protocols:has(.pan-chip:nth-of-type(5) > input:checked) .pm-needle { transform: rotate(30deg); }
.pan-fw-protocols:has(.pan-chip:nth-of-type(6) > input:checked) .pm-needle { transform: rotate(60deg); }
.pan-fw-protocols:has(.pan-chip:nth-of-type(7) > input:checked) .pm-needle { transform: rotate(90deg); }

.pan-fw-dial figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin-top: 1.1rem; font-size: var(--wp--preset--font-size--caption); font-weight: 600; color: var(--wp--preset--color--seal-label); }
.pan-fw-dial figcaption span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pan-fw-dial figcaption span::before { content: ""; width: 0.8rem; height: 0.3rem; border-radius: 1rem; background: currentColor; }
.pan-fw-dial figcaption .is-everyday::before { background: var(--wp--preset--color--seal-bright); }
.pan-fw-dial figcaption .is-sweet::before { background: var(--wp--preset--color--brass); }
.pan-fw-dial figcaption .is-specialist::before { background: rgba(188, 211, 232, 0.45); }

/* Chips and chosen cards in a night room: glass, never white boxes on navy. */
.pan-fw-room .pan-chooser-picks > legend { color: var(--wp--preset--color--bone); }
.pan-fw-room .pan-chooser-picks > .pan-chip,
.pan-fw-room .pan-chooser-picks > .pan-chip:not(:has(input:checked)) { color: var(--wp--preset--color--bone); background: var(--wp--custom--depth--on-seal-fill); border-color: var(--wp--custom--depth--on-seal-edge); box-shadow: none; }
.pan-fw-room .pan-chooser-picks > .pan-chip:hover { border-color: var(--wp--custom--depth--on-seal-edge-strong); }
.pan-fw-room .pan-chip b { background: rgba(255, 255, 255, 0.12); color: var(--wp--preset--color--bone); }
.pan-fw-room .pan-chooser-picks > .pan-chip:has(input:checked) { color: var(--wp--preset--color--night); background: var(--wp--preset--color--bone); border-color: var(--wp--preset--color--bone); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.6); }
.pan-fw-room .pan-chip:has(input:checked) b { background: var(--wp--preset--color--brass); color: var(--wp--preset--color--headline); }

.pan-fw-room .pan-pick { background: var(--wp--custom--depth--on-seal-fill-raised); border-color: var(--wp--custom--depth--on-seal-edge); box-shadow: var(--wp--custom--depth--on-seal-lift); }
.pan-fw-room .pan-pick h3 { color: var(--wp--preset--color--bone); }
.pan-fw-room .pan-pick-kicker { color: var(--wp--preset--color--brass); }
.pan-fw-room .pan-fw-pick p.pan-fw-what { color: var(--wp--preset--color--bone); }
.pan-fw-room .pan-pick .pan-ticks li { color: var(--wp--preset--color--seal-label); }
.pan-fw-room .pan-pick .pan-ticks li::before { border-color: var(--wp--preset--color--seal-bright); }
.pan-fw-room .pan-fw-pick p.pan-fw-note { color: var(--wp--preset--color--bone); border-top-color: var(--wp--custom--depth--on-seal-edge); }
.pan-fw-room .pan-fw-pick p.pan-fw-promise { color: var(--wp--preset--color--bone); }
.pan-fw-room .pan-fw-pick p.pan-fw-promise b { color: var(--wp--preset--color--brass); }
.pan-fw-room .pan-fw-pick p.pan-fw-limit { color: var(--wp--preset--color--seal-label); }
.pan-fw-room .pan-fw-pick p.pan-fw-limit b { color: var(--wp--preset--color--bone); }

/* --- Question 4: the seven self-reliance layers. One vertical list, with the panel beside it.
   The first pass had a chip row AND a second list of the same seven below it: the same choice
   offered twice, a tall empty column under the shorter one, and a lit state using `bone` on a
   `pan-on-bone` section, so the chosen layer matched the background behind it (Jeremy, 20 Sep).
   The list is now the chooser, so the selected state is the design system's own. */
.pan-fw-reliance-grid { display: grid; gap: 1.25rem; }

@media (min-width: 881px) {
	.pan-fw-reliance-grid { grid-template-columns: 17.5rem minmax(0, 1fr); gap: 2rem; align-items: start; }
	.pan-fw-reliance-grid > .pan-chooser-panels { position: sticky; top: 6.5rem; }
}

fieldset.pan-chooser-picks--rows {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.pan-chooser-picks--rows > .pan-chip {
	width: 100%;
	justify-content: flex-start;
	padding: 0.7rem 0.95rem;
	border-radius: var(--wp--custom--radius--md);
	font-size: 1rem;
}

.pan-chooser-picks--rows .pan-chip svg {
	flex: none;
	width: 1.3rem;
	height: 1.3rem;
	fill: none;
	stroke: var(--wp--custom--brass-800);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pan-chooser-picks--rows .pan-chip:has(input:checked) svg { stroke: var(--wp--preset--color--brass); }

/* The caveat rides with the two layers it belongs to, rather than reading as a warning about all seven. */
.pan-fw-pick p.pan-fw-caveat {
	margin-top: 1.1rem;
	padding-top: 0.85rem;
	border-top: 1px dashed var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-3);
}

/* --- Question 3: the scale rings. Five bands around "You"; the chosen band fills with blue, and a
   ripple travels outward from the middle. */
@media (min-width: 881px) {
	.pan-fw-rings-stage { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
}

.pan-fw-rings { margin: 0; }
.pan-fw-rings svg { display: block; width: 100%; max-width: 25rem; margin: 0 auto; overflow: visible; }

.pan-fw-rings .pm-scale {
	--lit: 0;
	--base: rgba(12, 40, 129, 0.08);
	fill: none;
	stroke-width: 28;
	stroke: color-mix(in srgb, var(--wp--preset--color--seal-mid) calc(var(--lit) * 100%), var(--base));
	transition: stroke var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-fw-rings .pm-scale[data-n="5"] { --base: rgba(12, 40, 129, 0.06); }
.pan-fw-rings .pm-scale[data-n="4"] { --base: rgba(12, 40, 129, 0.11); }
.pan-fw-rings .pm-scale[data-n="2"] { --base: rgba(12, 40, 129, 0.18); }
.pan-fw-rings .pm-scale.is-sweet { --base: rgba(194, 161, 77, 0.38); }
.pan-fw-rings .pm-scale-core { stroke: none; fill: color-mix(in srgb, var(--wp--preset--color--seal-mid) calc(var(--lit) * 100%), var(--wp--preset--color--seal-deep)); }

.pan-fw-rings .pm-scale-label {
	--lit: 0;
	fill: color-mix(in srgb, var(--wp--preset--color--surface) calc(var(--lit) * 100%), var(--wp--preset--color--ink-2));
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-anchor: middle;
	transition: fill var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-fw-rings .pm-scale-label.pm-scale-you { fill: var(--wp--preset--color--bone); font-family: var(--wp--preset--font-family--newsreader); font-size: 14px; font-weight: 500; letter-spacing: 0; }

.pan-fw-rings .pm-ripple { fill: none; stroke: rgba(7, 168, 173, 0.5); stroke-width: 2; transform-box: view-box; transform-origin: 160px 160px; transform: scale(1); opacity: 0; }

@keyframes pm-ripple { 0% { transform: scale(0.2); opacity: 0.9; } 100% { transform: scale(1.04); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
	.pan-fw-rings .pm-ripple { animation: pm-ripple 5s var(--wp--custom--motion--ease-decel) infinite; }
}

/* --- One picture: where things sit, from you outward (28 Sep 2026, Jeremy's inside-out addition). The
   scale rings' geometry plus the world beyond the border, on night in the hero drawing's colours: bone
   close in, brass for the sweet spot, pale blue fading outward. The chosen ring turns teal and its words
   go dark on it. Only what the rings add lives here; the chips and cards come from .pan-fw-room. */
@media (min-width: 881px) {
	.pan-fw-where-stage { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
}

.pan-fw-where { margin: 0; }
.pan-fw-where svg { display: block; width: 100%; max-width: 27rem; margin: 0 auto; overflow: visible; }
.pan-fw-where .pw-halo { fill: rgba(7, 168, 173, 0.07); }

.pan-fw-where .pw-band {
	--lit: 0;
	--base: rgba(188, 211, 232, 0.16);
	fill: none;
	stroke-width: 26;
	stroke: color-mix(in srgb, var(--wp--preset--color--seal-bright) calc(var(--lit) * 100%), var(--base));
	transition: stroke var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-fw-where .pw-band[data-n="2"] { --base: rgba(244, 236, 216, 0.3); }
.pan-fw-where .pw-band[data-n="3"] { --base: rgba(194, 161, 77, 0.55); }
.pan-fw-where .pw-band[data-n="4"] { --base: rgba(188, 211, 232, 0.22); }
.pan-fw-where .pw-band[data-n="5"] { --base: rgba(188, 211, 232, 0.15); }
.pan-fw-where .pw-band[data-n="6"] { --base: rgba(188, 211, 232, 0.08); }
.pan-fw-where .pw-border { fill: none; stroke: rgba(244, 236, 216, 0.5); stroke-width: 1; stroke-dasharray: 3 4; }

.pan-fw-where .pw-core {
	--lit: 0;
	fill: color-mix(in srgb, var(--wp--preset--color--seal-bright) calc(var(--lit) * 100%), var(--wp--preset--color--seal-deep));
	stroke: var(--wp--preset--color--brass);
	stroke-width: 1.5;
	transition: fill var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-fw-where .pw-you,
.pan-fw-where .pw-name,
.pan-fw-where .pw-eg {
	--lit: 0;
	text-anchor: middle;
	transition: fill var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-fw-where .pw-you { font-family: var(--wp--preset--font-family--newsreader); font-size: 16px; fill: color-mix(in srgb, var(--wp--preset--color--night) calc(var(--lit) * 100%), var(--wp--preset--color--bone)); }
.pan-fw-where .pw-name { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; fill: color-mix(in srgb, var(--wp--preset--color--night) calc(var(--lit) * 100%), var(--wp--preset--color--bone)); }
.pan-fw-where .pw-eg { font-size: 11px; fill: color-mix(in srgb, var(--wp--preset--color--night) calc(var(--lit) * 100%), var(--wp--preset--color--seal-label)); }

/* fill-box, not view-box: the viewBox starts at -30, and a circle's own box keeps the ripple centred. */
.pan-fw-where .pw-ripple { fill: none; stroke: rgba(7, 168, 173, 0.5); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	.pan-fw-where .pw-ripple { animation: pm-ripple 5s var(--wp--custom--motion--ease-decel) infinite; }
}

/* The ring cards on night: who can reach it, the move, and the one link. */
.pan-fw-room .pan-fw-pick p.pan-fw-move { color: var(--wp--preset--color--seal-label); }
.pan-fw-room .pan-fw-pick p.pan-fw-move strong { color: var(--wp--preset--color--bone); }
.pan-fw-where-chooser .pan-fw-pick p.pan-fw-move + p.pan-fw-move { margin-top: 0.45rem; }
.pan-fw-room .pan-fw-help a { color: var(--wp--preset--color--bone); }
.pan-fw-room .pan-fw-help a::after { background: var(--wp--preset--color--brass); }

/* The rule under the rings, then the three moves as glass cards. */
.pan-fw-room p.pan-fw-rule { max-width: 46rem; margin-top: clamp(2.25rem, 5vw, 3.25rem); font-size: 1.125rem; line-height: 1.55; color: var(--wp--preset--color--seal-label); }
.pan-fw-room p.pan-fw-rule strong { color: var(--wp--preset--color--brass); }
.pan-fw-rule + .pan-fw-moves { margin-top: 1.25rem; }

/* --- Question 4: the self-reliance hub. Community in the middle, the six others around it, each tied
   to the centre by a brass thread. */


/* --- Putting it together: three examples, each with its coordinates. */
.pan-fw-example p.pan-fw-coords { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.8rem; }

.pan-fw-coords span {
	padding: 0.18rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--bone);
	border: 1px solid var(--wp--custom--depth--on-seal-edge-strong);
	border-radius: var(--wp--custom--radius--pill);
}

.pan-fw-coords span:first-child { color: var(--wp--preset--color--headline); background: var(--wp--preset--color--brass); border-color: var(--wp--preset--color--brass); }
.pan-room .pan-fw-example p:not(.pan-fw-coords) { margin-top: 0.9rem; }

.pan-room h3.pan-fw-examples-title { margin: clamp(2.75rem, 6vw, 4rem) 0 0; font-size: 1.375rem; color: var(--wp--preset--color--bone); }
.pan-fw-examples-title + .pan-fw-examples { margin-top: 1.25rem; }
.pan-fw-next { margin-top: 2.75rem; }
.pan-fw-next > * { margin-block: 0; }
.pan-fw-next .pan-lead { color: var(--wp--preset--color--bone); }
.pan-fw-next .wp-block-buttons { gap: 0.75rem 1rem; margin-top: 1.25rem; }
.pan-room .wp-block-button.is-style-outline > .wp-block-button__link { padding: 0.9rem 1.4rem; font-size: var(--wp--preset--font-size--body); background: transparent; color: var(--wp--preset--color--bone); border: 1px solid rgba(244, 236, 216, 0.5); }
.pan-room .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgba(244, 236, 216, 0.08); border-color: var(--wp--preset--color--bone); }

/* The waiting list, "Learn the framework" (#waitlist; masterplan S2a, 17 Sep 2026): the one public way to hear about
   the course. Paper between the night check room and the night footer, the pitch beside a night card with the form. */
.pan-fw-waitlist {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 3rem);
	align-items: center;
}

@media (min-width: 900px) {
	.pan-fw-waitlist { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); }
}

.pan-fw-waitlist > *,
.pan-fw-waitlist-text > *,
.pan-fw-waitlist-card > * { margin-block: 0; }
.pan-fw-waitlist-text > p.pan-eyebrow { margin-bottom: 0.875rem; }
.pan-fw-waitlist-text > p.pan-lead { margin-top: 1rem; }
.pan-fw-waitlist-text > ul.pan-ticks { margin-top: 1.5rem; }
.pan-fw-waitlist-text > ul.pan-ticks li { font-size: 1.0625rem; }

.pan-fw-waitlist-text > p.pan-fw-story {
	margin-top: 1.75rem;
	padding-left: 1rem;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.375rem;
	font-style: italic;
	line-height: 1.35;
	color: var(--wp--preset--color--headline);
	border-left: 3px solid var(--wp--preset--color--brass);
}

.pan-fw-waitlist-card {
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	color: var(--wp--preset--color--bone);
	background:
		radial-gradient(ellipse 90% 70% at 100% 0%, rgba(7, 168, 173, 0.28), rgba(12, 91, 158, 0.14) 50%, transparent 78%),
		var(--wp--preset--color--night);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--depth--elev-3);
}

.pan-fw-waitlist-card h3 { font-size: 1.75rem; color: var(--wp--preset--color--bone); }
.pan-fw-waitlist-card > p { margin-top: 0.6rem; color: var(--wp--preset--color--seal-label); }
.pan-fw-waitlist-card .fluentform { margin-top: 1.25rem; }
.pan-fw-waitlist-card .fluentform .ff-el-input--label label,
.pan-fw-waitlist-card .fluentform .ff-el-form-check-label,
.pan-fw-waitlist-card .fluentform .ff-message-success { color: var(--wp--preset--color--bone); }
.pan-fw-waitlist-card .fluentform .ff-message-success { background: var(--wp--custom--depth--on-seal-fill-raised); border: 1px solid var(--wp--custom--depth--on-seal-edge); box-shadow: none; }

/* A form on a night card shows its errors in the on-dark red: the theme's red is for light ground, and on night it
   fell well under 4.5:1 (Resources' newsletter card had the same gap). */
:is(.pan-fw-waitlist-card, .pan-hub-news) .fluentform { --fluentform-danger: var(--wp--custom--signal--risk-on-dark); }

/* ---------- 2b. The privacy check (framework page, #check) -------------------------
   A bone sheet for the questions and the result, and the map on glass beside it, lit as the answers
   come. Written by pan-check.js from mu-plugins/pan-check/check.json. The states use the signal set
   with its icons, never colour alone. */

.pan-check {
	display: grid;
	gap: clamp(1rem, 3vw, 1.75rem);
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
	align-items: start;
	scroll-margin-top: 6rem;
}

@media (min-width: 960px) {
	.pan-check { grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); }
}

.pan-check-card {
	min-height: 25rem;
	padding: clamp(1.4rem, 4vw, 2.5rem);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--bone);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 18px 50px rgba(3, 10, 40, 0.35);
}

.pan-check-card :where(h3, h4, p, legend, label, dt, dd, li) { color: var(--wp--preset--color--ink); }
.pan-check-card > * > :first-child { margin-top: 0; }

.pan-check-card p.pan-check-kicker {
	margin: 0 0 0.6rem;
	font-size: var(--wp--custom--eyebrow--size);
	font-weight: var(--wp--custom--eyebrow--weight);
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	color: var(--wp--custom--brass-800);
}

.pan-check-card h3 {
	max-width: 22ch;
	margin: 0;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.12;
	color: var(--wp--preset--color--headline);
	text-wrap: balance;
}

.pan-check-card h3 em { color: var(--wp--custom--brass-800); white-space: nowrap; }
.pan-check-card h3.pan-check-result-title { max-width: 26ch; }
.pan-check-intro > p:not(.pan-check-kicker) { max-width: 36rem; margin: 1rem 0 0; color: var(--wp--preset--color--ink-2); }

.pan-check button { font: inherit; cursor: pointer; }

.pan-check button.pan-check-start,
.pan-check button.pan-check-next {
	margin-top: 1.5rem;
	padding: 0.85rem 1.45rem;
	font-weight: 600;
	color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--terracotta);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	transition: background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
}

.pan-check button.pan-check-start:hover,
.pan-check button.pan-check-next:not(:disabled):hover { background: var(--wp--custom--terracotta-hover); }
.pan-check button.pan-check-next { margin-top: 0; }
.pan-check button.pan-check-next:disabled { cursor: not-allowed; opacity: 0.45; }

.pan-check-card p.pan-check-noscript { margin-top: 1.25rem; font-weight: 500; }

/* A question */
.pan-check-q { min-width: 0; margin: 0; padding: 0; border: 0; }

.pan-check-q legend { display: grid; gap: 0.5rem; padding: 0; outline: none; }

.pan-check-count {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--brass-800);
	font-variant-numeric: tabular-nums;
}

.pan-check-question {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: clamp(1.45rem, 2.8vw, 1.9rem);
	line-height: 1.2;
	color: var(--wp--preset--color--headline);
	text-wrap: balance;
}

.pan-check-card p.pan-check-hint { margin: 0.5rem 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }

.pan-check-options { display: grid; gap: 0.6rem; margin-top: 1.25rem; }

.pan-check-card label.pan-check-option {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0;
	padding: 0.85rem 1rem;
	font-weight: 500;
	line-height: 1.35;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--depth--elev-1);
	cursor: pointer;
	transition: border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard), box-shadow var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
}

.pan-check-option input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--wp--preset--color--seal-deep); }
.pan-check-option:hover { border-color: var(--wp--preset--color--seal-mid); }
.pan-check-option:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--seal-mid); outline-offset: 2px; }

.pan-check-option:has(input:checked) {
	border-color: var(--wp--preset--color--seal-deep);
	box-shadow: 0 0 0 1px var(--wp--preset--color--seal-deep), var(--wp--custom--depth--elev-2);
	background: var(--wp--preset--color--seal-soft);
}

.pan-check-nav { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }

.pan-check button.pan-check-back,
.pan-check button.pan-check-again {
	padding: 0.5rem 0;
	font-weight: 600;
	color: var(--wp--preset--color--seal-mid);
	background: none;
	border: 0;
}

.pan-check button.pan-check-back:hover,
.pan-check button.pan-check-again:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.pan-check-progress { flex: 1; height: 4px; overflow: hidden; background: var(--wp--preset--color--border); border-radius: 99px; }
.pan-check-progress i { display: block; height: 100%; background: var(--wp--preset--color--brass); border-radius: inherit; transition: width var(--wp--custom--motion--base) var(--wp--custom--motion--ease-decel); }

/* The result */
.pan-check-card p.pan-check-summary { margin: 0.75rem 0 0; font-size: var(--wp--preset--font-size--lead); color: var(--wp--preset--color--ink-2); }

.pan-check-card p.pan-check-note {
	position: relative;
	margin: 1.25rem 0 0;
	padding: 0.9rem 1rem 0.9rem 2.8rem;
	font-size: var(--wp--preset--font-size--small);
	background: var(--pan-sig-tint);
	border: 1px solid var(--pan-sig-edge);
	border-radius: var(--wp--custom--radius--md);
}

.pan-check-note::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1rem;
	width: 1.15rem;
	height: 1.15rem;
	background: var(--pan-sig);
	-webkit-mask: var(--pan-i) center / contain no-repeat;
	mask: var(--pan-i) center / contain no-repeat;
}

.pan-check-note a { font-weight: 600; color: var(--wp--preset--color--seal-mid); }

dl.pan-check-coords { display: grid; gap: 0; margin: 1.5rem 0 0; }
.pan-check-coords > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--wp--preset--color--border); }
.pan-check-card .pan-check-coords dt { margin: 0; font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--custom--brass-800); font-variant-numeric: tabular-nums; }
.pan-check-card .pan-check-coords dd { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }
.pan-check-coords dd strong { color: var(--wp--preset--color--headline); }
@media (max-width: 559px) {
	.pan-check-coords > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

.pan-check-card h4.pan-check-first-title { margin: 1.75rem 0 0; font-size: 1.25rem; color: var(--wp--preset--color--headline); }

ol.pan-check-first { display: grid; gap: 0.75rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { ol.pan-check-first { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pan-check-first li {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1rem 1.05rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--depth--elev-1);
}

.pan-check-card p.pan-check-state { display: grid; gap: 0.45rem; margin: 0; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--ink-2); }
.pan-check-card p.pan-check-step-title { margin: 0.7rem 0 0; font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--headline); }
.pan-check-card p.pan-check-step { margin: 0.4rem 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }
.pan-check-card p.pan-check-meta { margin: auto 0 0; padding-top: 0.75rem; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--ink-2); }
.pan-check-meta a { font-weight: 600; color: var(--wp--preset--color--seal-mid); }
.pan-check button.pan-check-again { margin-top: 1.25rem; }

/* Keep going: the deeper round under a first result, or what comes after it once it's done. A navy button,
   because the terracotta one is the action list's. */
.pan-check-more {
	display: grid;
	justify-items: start;
	gap: 0.45rem;
	margin-top: 1.75rem;
	padding: 1.25rem 1.35rem;
	background: var(--wp--preset--color--seal-soft);
	border: 1px solid rgba(12, 91, 158, 0.28);
	border-radius: var(--wp--custom--radius--md);
}

.pan-check-card p.pan-check-more-title { margin: 0; font-family: var(--wp--preset--font-family--newsreader); font-size: 1.45rem; line-height: 1.2; color: var(--wp--preset--color--headline); }
.pan-check-card p.pan-check-more-title em { color: var(--wp--custom--brass-800); }
.pan-check-card p.pan-check-more-text { max-width: 40rem; margin: 0; color: var(--wp--preset--color--ink-2); }
.pan-check-card p.pan-check-more-note { margin: 0; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--ink-3); }

.pan-check button.pan-check-more-go {
	margin-top: 0.4rem;
	padding: 0.75rem 1.3rem;
	font-weight: 600;
	color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--seal-deep);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	transition: background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
}

.pan-check button.pan-check-more-go:hover { background: var(--wp--preset--color--night); }
.pan-check button.pan-check-more-go:focus-visible { outline: 2px solid var(--wp--preset--color--seal-mid); outline-offset: 3px; }
.pan-check-more.is-done { background: var(--wp--preset--color--surface); border-color: var(--wp--preset--color--border); }

/* The map beside it: nine layers on glass. */
.pan-check-map {
	padding: 1.25rem;
	background: var(--wp--custom--depth--on-seal-fill);
	border: 1px solid var(--wp--custom--depth--on-seal-edge);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--depth--on-seal-lift);
}

.pan-room .pan-check-map p.pan-check-map-title {
	margin: 0 0 0.75rem;
	font-size: var(--wp--custom--eyebrow--size);
	font-weight: var(--wp--custom--eyebrow--weight);
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
}

ol.pan-check-layers { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }

.pan-check-layers li {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	column-gap: 0.7rem;
	align-items: center;
	margin: 0;
	padding: 0.45rem 0;
	font-size: var(--wp--preset--font-size--small);
	border-bottom: 1px solid var(--wp--custom--depth--on-seal-edge);
}

.pan-check-layers li:last-child { border-bottom: 0; }

.pan-check-layers b {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	font-family: var(--wp--preset--font-family--newsreader);
	font-weight: 500;
	color: var(--wp--preset--color--seal-label);
	border: 1px solid var(--wp--custom--depth--on-seal-edge-strong);
	border-radius: 50%;
	transition: background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard), color var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-check-layer-name { color: var(--wp--preset--color--seal-label); line-height: 1.3; }

.pan-check-layer-state {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--wp--preset--font-size--caption);
	font-style: normal;
	font-weight: 600;
	color: var(--pan-sig-dark);
}

.pan-check-layers li.is-answered .pan-check-layer-state::before {
	content: "";
	width: 0.85rem;
	height: 0.85rem;
	background: currentColor;
	-webkit-mask: var(--pan-i) center / contain no-repeat;
	mask: var(--pan-i) center / contain no-repeat;
}

.pan-check-layers li.is-answered b { color: var(--wp--preset--color--night); background: var(--pan-sig-dark); border-color: var(--pan-sig-dark); }
.pan-check-layers li.is-answered .pan-check-layer-name { color: var(--wp--preset--color--bone); }

/* On a phone the map is a row of nine numbered dots above the questions. */
@media (max-width: 959px) {
	.pan-check-map { order: -1; padding: 0.8rem 1rem; }
	.pan-room .pan-check-map p.pan-check-map-title { margin-bottom: 0.55rem; }
	ol.pan-check-layers { display: flex; justify-content: space-between; gap: 0.25rem; }
	.pan-check-layers li { display: block; padding: 0; border: 0; }
	.pan-check-layers b { width: 1.9rem; height: 1.9rem; }
	.pan-check-layer-name,
	.pan-check-layer-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* The action-list offer, shown once there's a result. */
.pan-check-offer {
	display: grid;
	gap: clamp(1rem, 3vw, 1.75rem);
	margin-top: clamp(1rem, 3vw, 1.75rem);
	align-items: start;
}

.pan-check-offer[hidden] { display: none; }

@media (min-width: 960px) {
	.pan-check-offer { grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); }
}

.pan-check-offer-form {
	padding: clamp(1.4rem, 4vw, 2.25rem);
	background: var(--wp--preset--color--bone);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 18px 50px rgba(3, 10, 40, 0.35);
}

.pan-check-offer-form :where(h3, p, label) { color: var(--wp--preset--color--ink); }
.pan-check-offer-form h3 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--wp--preset--color--headline); }
.pan-room .pan-check-offer-form p { margin: 0.6rem 0 0; color: var(--wp--preset--color--ink-2); }
.pan-check-offer-form .fluentform { margin-top: 1.25rem; }
.pan-room .pan-check-offer-form p.pan-check-sent { margin-top: 0.9rem; font-size: var(--wp--preset--font-size--caption); }

.pan-check-offer-audit {
	padding: 1.4rem;
	background: var(--wp--custom--depth--on-seal-fill);
	border: 1px solid var(--wp--custom--depth--on-seal-edge);
	border-radius: var(--wp--custom--radius--lg);
}

.pan-check-offer-audit h3 { margin: 0; font-size: 1.4rem; color: var(--wp--preset--color--bone); }
.pan-room .pan-check-offer-audit p { margin: 0.6rem 0 0; }
.pan-check-offer-audit p.pan-section-link { margin-top: 1rem; font-weight: 600; }

/* ---------- 2c. Drawings you can click and hover (pan-explore.js) -------------------
   Parts of a drawing that stand for one chip pick it when clicked; the four rings open their sections.
   Hover effects only where there's a mouse, so a tap on a phone never leaves something stuck lit. */

.pan-chooser-stage [data-n]:not([data-n*=" "]),
.pan-motif-framework [data-href] { cursor: pointer; }

.pan-fw-dial .pm-dial-hits circle { fill: transparent; stroke: none; }
.pan-motif-framework .pm-hit { fill: none; stroke: transparent; stroke-width: 28; pointer-events: stroke; }

@media (hover: hover) {
	.pan-fw-stack li:hover { --peek: 1; }
	.pan-fw-stack li:hover span { color: var(--wp--preset--color--headline); }
	.pan-fw-dial:has(.pm-dial-hits [data-n="1"]:hover) .pm-dial-numbers [data-n="1"],
	.pan-fw-dial:has(.pm-dial-hits [data-n="2"]:hover) .pm-dial-numbers [data-n="2"],
	.pan-fw-dial:has(.pm-dial-hits [data-n="3"]:hover) .pm-dial-numbers [data-n="3"],
	.pan-fw-dial:has(.pm-dial-hits [data-n="4"]:hover) .pm-dial-numbers [data-n="4"],
	.pan-fw-dial:has(.pm-dial-hits [data-n="5"]:hover) .pm-dial-numbers [data-n="5"],
	.pan-fw-dial:has(.pm-dial-hits [data-n="6"]:hover) .pm-dial-numbers [data-n="6"],
	.pan-fw-dial:has(.pm-dial-hits [data-n="7"]:hover) .pm-dial-numbers [data-n="7"] { fill: var(--wp--preset--color--brass); }
	.pan-fw-rings .pm-scale:hover { stroke: color-mix(in srgb, var(--wp--preset--color--seal-mid) 55%, var(--base)); }
	.pan-motif-framework .pm-ring:hover > circle:first-child { stroke: var(--wp--preset--color--brass); }
}

/* A slab being hovered lifts a little way towards where a chosen one sits. */
.pan-fw-stack li { --peek: 0; }
.pan-fw-stack i { transform: translate(calc((var(--lit) + var(--peek) * 0.35) * -1.6rem), calc((var(--lit) + var(--peek) * 0.35) * -0.8rem)) scaleY(0.5) rotate(45deg); }

/* The label that follows the mouse. */
.pan-tip {
	position: fixed;
	z-index: 9999;
	max-width: 18rem;
	padding: 0.4rem 0.7rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--bone);
	background: var(--wp--preset--color--night);
	border: 1px solid rgba(194, 161, 77, 0.55);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--depth--elev-2);
	pointer-events: none;
	transform: translate(0.9rem, 1rem);
}

/* The teaser's four questions, now links. */
.pan-fw-axes li:has(> a) { display: block; }
.pan-fw-axes li a { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: baseline; column-gap: 0.5rem; color: inherit; text-decoration: none; }
.pan-fw-axes li:has(a:hover) { color: var(--wp--preset--color--surface); }
.pan-fw-axes li a:focus-visible { outline: 2px solid var(--wp--preset--color--brass); outline-offset: 3px; border-radius: var(--wp--custom--radius--sm); }
.pan-fw-teaser .wp-block-buttons { gap: 0.75rem 1rem; }

/* ---------- 3. Homepage teasers -------------------------------------------- */

.pan-fw-teaser-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.pan-fw-teaser-grid > *,
.pan-fw-teaser-text > * { margin-block: 0; }
.pan-fw-teaser h2 { font-size: clamp(2rem, 3.6vw, 3rem); text-wrap: balance; }
.pan-fw-teaser .pan-lead { margin-top: 1rem; }
.pan-fw-teaser .wp-block-buttons { margin-top: 1.75rem; }

ul.pan-fw-axes { display: grid; margin: 1.5rem 0 0; padding: 0; list-style: none; }

.pan-fw-axes li {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	align-items: baseline;
	column-gap: 0.5rem;
	margin: 0;
	padding: 0.7rem 0;
	font-weight: 600;
	color: var(--wp--preset--color--bone);
	border-top: 1px solid var(--wp--custom--depth--on-seal-edge);
}

.pan-fw-axes li b { grid-row: 1 / span 2; font-family: var(--wp--preset--font-family--newsreader); font-size: 2.1rem; font-weight: 400; line-height: 1; color: var(--wp--preset--color--brass); }
.pan-fw-axes li span { grid-column: 2; font-size: var(--wp--preset--font-size--small); font-weight: 400; color: var(--wp--preset--color--seal-label); }

@media (max-width: 880px) {
	.pan-fw-teaser-grid { grid-template-columns: minmax(0, 1fr); }
	.pan-fw-teaser .pan-motif-framework { max-width: 18rem; justify-self: center; }
}

/* Free resources: the guides' real covers on night card tops. */
.pan-card-art--cover .wp-block-image { margin: 0; }

.pan-card-art--cover .wp-block-image img {
	display: block;
	width: auto;
	height: 9.25rem;
	border-radius: 3px;
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45), 0 2px 5px rgba(0, 0, 0, 0.3);
	transform: rotate(-3deg);
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease-decel);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pan-card:hover .pan-card-art--cover .wp-block-image img { transform: rotate(0deg) translateY(-4px) scale(1.03); }
}

.pan-card p.pan-resource-kind {
	margin-top: 1.25rem;
	font-size: var(--wp--custom--eyebrow--size);
	font-weight: 700;
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	color: var(--wp--custom--brass-800);
}

.pan-card .pan-resource-kind + .wp-block-heading { margin-top: 0.35rem; }

/* ---------- 4a. Resources ----------------------------------------------------- */

/* The two guides' covers, fanned, beside the hero text. */
.pan-hub-covers { position: relative; min-height: 21rem; }
.pan-hub-covers > * { margin: 0; }

.pan-hub-covers .wp-block-image {
	position: absolute;
	width: 44%;
	max-width: 13rem;
}

.pan-hub-covers .wp-block-image:first-child { left: 16%; top: 1.5rem; z-index: 2; transform: rotate(-7deg); }
.pan-hub-covers .wp-block-image:last-child { right: 12%; top: 0; transform: rotate(5deg); }
.pan-hub-covers img { display: block; border-radius: 4px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.35); }

@media (max-width: 880px) {
	.pan-hub-covers { min-height: 15rem; max-width: 22rem; }
}

.pan-hub-guides {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	margin-top: 2.25rem;
}

@media (min-width: 1000px) {
	.pan-hub-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pan-hub-guides > * { margin: 0; }

.pan-hub-guide {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	gap: 1.4rem;
	align-items: start;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--depth--elev-2);
}

.pan-hub-guide > * { margin: 0; }
.pan-hub-guide .wp-block-image.pan-guide-cover { max-width: none; justify-self: stretch; }
.pan-hub-guide .wp-block-image.pan-guide-cover img { transform: rotate(-2deg); box-shadow: 0 14px 28px rgba(12, 40, 129, 0.25), 0 2px 5px rgba(12, 40, 129, 0.15); }
.pan-hub-guide-text > * { margin-block: 0; }
.pan-hub-guide-text h3 { font-size: 1.5rem; text-wrap: balance; }
.pan-hub-guide-text > p { margin-top: 0.6rem; color: var(--wp--preset--color--ink-2); }
.pan-hub-guide-text ul.pan-ticks { margin-top: 0.9rem; }
.pan-hub-guide-text .fluentform { margin-top: 1.25rem; }

@media (max-width: 520px) {
	.pan-hub-guide { grid-template-columns: minmax(0, 1fr); }
	.pan-hub-guide .wp-block-image.pan-guide-cover { max-width: 8rem; }
}

.pan-hub-more {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: center;
}

@media (min-width: 900px) {
	.pan-hub-more { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); }
}

.pan-hub-more > *,
.pan-hub-coming > * { margin-block: 0; }
.pan-hub-coming ul.pan-ticks { margin-top: 1.25rem; }
.pan-hub-coming ul.pan-ticks li { font-size: 1.0625rem; }

.pan-hub-news {
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	color: var(--wp--preset--color--bone);
	background:
		radial-gradient(ellipse 90% 70% at 100% 0%, rgba(7, 168, 173, 0.28), rgba(12, 91, 158, 0.14) 50%, transparent 78%),
		var(--wp--preset--color--night);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--depth--elev-3);
}

.pan-hub-news > * { margin-block: 0; }
.pan-hub-news h3 { font-size: 1.75rem; color: var(--wp--preset--color--bone); }
.pan-hub-news > p { margin-top: 0.6rem; color: var(--wp--preset--color--seal-label); }
.pan-hub-news .fluentform { margin-top: 1.25rem; }
.pan-hub-news .fluentform .ff-el-input--label label,
.pan-hub-news .fluentform .ff-el-form-check-label,
.pan-hub-news .fluentform .ff-message-success { color: var(--wp--preset--color--bone); }
.pan-hub-news .fluentform .ff-message-success { background: var(--wp--custom--depth--on-seal-fill-raised); border: 1px solid var(--wp--custom--depth--on-seal-edge); box-shadow: none; }
.pan-hub-news p.pan-hub-later { margin-top: 1.4rem; padding-top: 1.1rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--seal-label); border-top: 1px solid var(--wp--custom--depth--on-seal-edge); }

/* ---------- 4b. About ----------------------------------------------------------- */

.pan-about-hero .wp-block-image.pan-about-portrait { justify-self: center; width: 100%; max-width: 22rem; margin: 0 1rem 1rem 0; }
.pan-about-hero .wp-block-image.pan-portrait img { box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.7); }

.pan-about-story > * { margin-block: 0; }
.pan-about-story .pan-eyebrow + h2 { margin-top: 0; }
.pan-about-story h2 { max-width: 22ch; }
.pan-about-story p:not(.pan-eyebrow) { margin-top: 1.1rem; font-size: 1.125rem; color: var(--wp--preset--color--ink-2); }
.pan-about-story p.pan-lead { margin-top: 1.5rem; font-size: var(--wp--preset--font-size--lead); color: var(--wp--preset--color--ink); }
.pan-about-story h3 { margin-top: 2.25rem; font-size: 1.6rem; }

/* "Who you're dealing with" (2 Oct 2026, from Jeremy's interview): his background in words, beside a glass card
   of the kinds of job he has done. A navy room between the paper story and the bone beliefs. */
.pan-about-who .wp-block-column > * { margin-block: 0; }
.pan-about-who .wp-block-column > .pan-eyebrow { margin-bottom: 0.875rem; }
.pan-about-who .wp-block-column > p:not(.pan-eyebrow) { margin-top: 1.1rem; font-size: 1.0625rem; }
.pan-about-who .wp-block-column > h2 + p { margin-top: 1.5rem; }
.pan-about-helped ul.pan-ticks { gap: 0.65rem; margin-top: 1.1rem; }
.pan-about-helped .pan-ticks li { font-size: 1.0625rem; color: var(--wp--preset--color--bone); }
.pan-about-helped .pan-ticks li::before { border-color: var(--wp--preset--color--seal-bright); }
.pan-room .pan-glass.pan-about-helped p.pan-about-proof {
	margin-top: 1.25rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--wp--custom--depth--on-seal-edge);
}

/* The framework section's extra paragraphs (the "with or without me" words). */
.pan-about-fw-text > p:not(.pan-eyebrow):not(.pan-lead) { margin-top: 1rem; color: var(--wp--preset--color--ink-2); }

.pan-beliefs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin-top: 2.25rem;
}

@media (min-width: 640px) {
	.pan-beliefs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
	.pan-beliefs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pan-beliefs > * { margin: 0; }

.pan-belief {
	padding: 1.6rem 1.5rem 1.5rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--depth--elev-1);
}

.pan-belief > * { margin-block: 0; }
.pan-belief h3 { font-size: 1.4rem; }

/* Seal DNA's 40 × 2px brass rule under each belief. */
.pan-belief h3::after { content: ""; display: block; width: 40px; height: 2px; margin-top: 0.8rem; background: var(--wp--preset--color--brass); }
.pan-belief p { margin-top: 0.9rem; color: var(--wp--preset--color--ink-2); }

.pan-about-fw {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.pan-about-fw > *,
.pan-about-fw-text > * { margin-block: 0; }
.pan-about-fw-text .wp-block-buttons { margin-top: 1.75rem; }

.pan-fw-mini {
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background:
		radial-gradient(circle at 50% 45%, rgba(7, 168, 173, 0.28), rgba(12, 91, 158, 0.14) 50%, transparent 76%),
		var(--wp--preset--color--night);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--depth--elev-3);
}

.pan-fw-mini > * { margin: 0; }
.pan-fw-mini .pan-motif-framework { max-width: 18rem; }

@media (max-width: 880px) {
	.pan-about-fw { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 4c. How it works: a timeline that zig-zags down a brass thread ----- */

.pan-journey {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin-top: 2.5rem;
	counter-reset: pan-journey;
}

.pan-journey::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	bottom: 1.5rem;
	left: 1.625rem;
	border-left: 1px solid rgba(194, 161, 77, 0.7);
}

.pan-journey > * { margin: 0; }

.pan-journey-step {
	position: relative;
	margin-left: 4.5rem;
	padding: 1.4rem 1.5rem 1.35rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--depth--elev-1);
	counter-increment: pan-journey;
}

.pan-journey-step > * { margin-block: 0; }

/* The step's number in a small seal on the thread. */
.pan-journey-step::before {
	content: counter(pan-journey);
	position: absolute;
	top: 1.1rem;
	left: -4.5rem;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--seal-deep);
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.375rem;
	line-height: 1;
	box-shadow:
		inset 0 0 0 1px rgba(194, 161, 77, 0.8),
		inset 0 0 0 5px var(--wp--preset--color--seal-deep),
		inset 0 0 0 6px rgba(241, 236, 223, 0.3),
		var(--wp--custom--depth--elev-2);
}

.pan-journey-step h3 { font-size: 1.5rem; }
.pan-journey-step p { margin-top: 0.5rem; color: var(--wp--preset--color--ink-2); }

.pan-journey-step p.pan-journey-note {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin-top: 0.9rem;
	padding-top: 0.8rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--headline);
	border-top: 1px dashed var(--wp--preset--color--border);
}

.pan-journey-note::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 0.2em;
	background: var(--wp--preset--color--seal-mid);
	-webkit-mask: var(--pan-icon-safe) center / contain no-repeat;
	mask: var(--pan-icon-safe) center / contain no-repeat;
}

/* Wide screens: the thread runs down the middle, and the steps take turns either side of it, each in
   its own row and tucked a little under the one before. (A first version spanned rows, and the seals
   drifted away from their cards.) */
@media (min-width: 960px) {
	.pan-journey { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 7rem; row-gap: 1.25rem; align-items: start; }
	.pan-journey::before { left: 50%; }
	.pan-journey-step { margin-left: 0; }
	.pan-journey-step:nth-child(odd) { grid-column: 1; }
	.pan-journey-step:nth-child(even) { grid-column: 2; }
	.pan-journey-step:nth-child(1) { grid-row: 1; }
	.pan-journey-step:nth-child(2) { grid-row: 2; }
	.pan-journey-step:nth-child(3) { grid-row: 3; }
	.pan-journey-step:nth-child(4) { grid-row: 4; }
	.pan-journey-step:nth-child(5) { grid-row: 5; }
	.pan-journey-step:nth-child(n+2) { margin-top: -5.5rem; }
	.pan-journey-step:nth-child(odd)::before { left: auto; right: -5.125rem; }
	.pan-journey-step:nth-child(even)::before { left: -5.125rem; }
}

/* ---------- 4d. Contact --------------------------------------------------------- */

.pan-contact { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); }

.pan-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.pan-contact-grid > *,
.pan-contact-text > * { margin-block: 0; }
.pan-contact-text h1 { max-width: 12ch; margin-top: 0; font-size: clamp(2.5rem, 5vw, 4rem); text-wrap: balance; }
.pan-contact-text .pan-lead { margin-top: 1.25rem; }

ul.pan-contact-points { display: grid; gap: 0.6rem; margin: 1.75rem 0 0; padding: 1.5rem 0 0; list-style: none; border-top: 1px solid var(--wp--custom--depth--on-seal-edge); }

.pan-contact-points li { position: relative; margin: 0; padding-left: 1.9rem; color: var(--wp--preset--color--bone); font-weight: 500; }

.pan-contact-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.15rem;
	height: 1.15rem;
	background: var(--wp--preset--color--brass);
	-webkit-mask: var(--pan-icon-safe) center / contain no-repeat;
	mask: var(--pan-icon-safe) center / contain no-repeat;
}

.pan-scene p.pan-contact-urgent {
	position: relative;
	margin-top: 1.75rem;
	padding: 0.9rem 1rem 0.9rem 2.8rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--bone);
	background: var(--wp--custom--depth--on-seal-fill);
	border: 1px solid var(--wp--custom--depth--on-seal-edge);
	border-radius: var(--wp--custom--radius--md);
}

.pan-contact-urgent::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1rem;
	width: 1.15rem;
	height: 1.15rem;
	background: var(--wp--custom--signal--caution-on-dark);
	-webkit-mask: var(--pan-icon-caution) center / contain no-repeat;
	mask: var(--pan-icon-caution) center / contain no-repeat;
}

.pan-contact-urgent strong { color: var(--wp--custom--signal--caution-on-dark); }

/* The address to write to, under the urgent note (2 Oct 2026). On the night scene the theme's link colour would be
   dark on dark, so every state is set here. */
.pan-scene p.pan-contact-email { margin-top: 1.25rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--seal-label); }
.pan-scene p.pan-contact-email a { color: var(--wp--preset--color--bone); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.pan-scene p.pan-contact-email a:hover,
.pan-scene p.pan-contact-email a:focus-visible { color: var(--wp--preset--color--surface); }

/* The scripts-off line under a form (mu-plugins/pan-leads.php): it sits on night scenes and on bone bands alike, so
   its link takes the colour of the words around it. */
.pan-form-noscript { margin-top: 1rem; font-size: var(--wp--preset--font-size--small); }
.pan-form-noscript a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; overflow-wrap: anywhere; }

.pan-contact-form .fluentform {
	padding: clamp(1.25rem, 4vw, 2rem);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--bone);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 18px 50px rgba(3, 10, 40, 0.35);
}

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

/* The closing scene, split (homepage, Services, About): what happens next, beside the form. The
   homepage's separate "How it works" band became this on 14 Sep, so the reassurance sits where the
   decision is made. Service pages keep their centred close. */
.pan-close.pan-close-split { text-align: left; }
.pan-close-split .pan-contact-text h2 { max-width: 13ch; margin: 0; font-size: clamp(2.25rem, 4.4vw, 3.5rem); text-wrap: balance; }
.pan-close-split .pan-contact-text .pan-lead { max-width: 28rem; margin-top: 1.1rem; }
.pan-close-split .fluentform { max-width: none; margin-top: 0; }

.pan-close-text h3.pan-next-title {
	margin: 2.25rem 0 0;
	padding-top: 1.5rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--custom--eyebrow--size);
	font-weight: var(--wp--custom--eyebrow--weight);
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--brass);
	border-top: 1px solid var(--wp--custom--depth--on-seal-edge);
}

ol.pan-next-steps { display: grid; gap: 1.25rem; margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: pan-next; }

.pan-next-steps li {
	position: relative;
	margin: 0;
	padding-left: 3.25rem;
	color: var(--wp--preset--color--seal-label);
	counter-increment: pan-next;
}

/* Numbered like the site's other steps: a small seal, on a brass thread to the next one. */
.pan-next-steps li::before {
	content: counter(pan-next);
	position: absolute;
	left: 0;
	top: -0.15rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.05rem;
	line-height: 1;
	color: var(--wp--preset--color--bone);
	background: var(--wp--preset--color--seal-deep);
	box-shadow: inset 0 0 0 1px rgba(194, 161, 77, 0.8), inset 0 0 0 4px var(--wp--preset--color--seal-deep), inset 0 0 0 5px rgba(241, 236, 223, 0.3);
}

.pan-next-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 1.125rem;
	top: 2.35rem;
	bottom: -1.2rem;
	width: 1px;
	background: rgba(194, 161, 77, 0.45);
}

.pan-next-steps strong { display: block; margin-bottom: 0.15rem; font-weight: 600; color: var(--wp--preset--color--bone); }

:is(.pan-scene, .pan-room) .pan-section-link a { color: var(--wp--preset--color--bone); }
:is(.pan-scene, .pan-room) .pan-section-link a::after { background: var(--wp--preset--color--brass); }
.pan-close-split p.pan-section-link { margin-top: 1.75rem; }

/* The private-call note that appears in every enquiry form when "A private video call" is chosen. */
.fluentform p.pan-form-help {
	position: relative;
	margin: 0;
	padding: 0.75rem 0.95rem 0.75rem 2.7rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--seal-soft);
	border: 1px solid rgba(12, 91, 158, 0.2);
	border-radius: var(--wp--custom--radius--md);
}

.fluentform p.pan-form-help::before {
	content: "";
	position: absolute;
	left: 0.95rem;
	top: 0.85rem;
	width: 1.15rem;
	height: 1.15rem;
	background: var(--wp--preset--color--seal-mid);
	-webkit-mask: var(--pan-icon-shield) center / contain no-repeat;
	mask: var(--pan-icon-shield) center / contain no-repeat;
}

/* ---------- 4e. Privacy policy, disclaimer, fine print ---------------------- */

/* The one-line pointer to the disclaimer under a check, a tool list or official help. */
p.pan-fine-print {
	max-width: 46rem;
	margin: clamp(1.5rem, 3vw, 2rem) auto 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	text-align: center;
	color: var(--wp--preset--color--ink-3);
}
p.pan-fine-print a { color: var(--wp--preset--color--seal-mid); text-underline-offset: 0.18em; }
:is(.pan-room, .pan-scene) p.pan-fine-print { color: var(--wp--preset--color--seal-label); }
:is(.pan-room, .pan-scene) p.pan-fine-print a { color: var(--wp--preset--color--bone); }
:is(.pan-room, .pan-scene) p.pan-fine-print a:hover { color: var(--wp--preset--color--surface); }

.pan-policy-hero { padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 4.5rem); }
.pan-policy-hero h1 { max-width: 18ch; font-size: clamp(2.25rem, 4.5vw, 3.5rem); }

.pan-policy > * { margin-block: 0; }
.pan-policy h2.wp-block-heading { margin-top: 2.75rem; font-size: clamp(1.625rem, 2.6vw, 2rem); }
.pan-policy h3.wp-block-heading { margin-top: 1.6rem; font-size: 1.25rem; }
.pan-policy > p { margin-top: 0.75rem; color: var(--wp--preset--color--ink-2); }
.pan-policy > ul.pan-ticks { margin-top: 0.9rem; }
.pan-policy > ul.pan-ticks li { font-size: 1.0625rem; }
.pan-policy a { color: var(--wp--preset--color--seal-mid); }

.pan-policy-summary {
	padding: clamp(1.4rem, 3.5vw, 2rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--depth--elev-2);
}

.pan-policy-summary > * { margin-block: 0; }
.pan-policy .pan-policy-summary h2.wp-block-heading { margin-top: 0; font-size: 1.5rem; }
.pan-policy-summary ul.pan-ticks { margin-top: 1rem; gap: 0.7rem; }
.pan-policy-summary ul.pan-ticks li { font-size: 1.0625rem; color: var(--wp--preset--color--ink); }

/* ---------- 4e. Who it's for, and Help now ------------------------------------ */

/* The services that fit an audience: glass cards, two across, four on a wide screen, each ending on its link. */
@media (min-width: 1180px) {
	.pan-glass-grid.pan-audience-services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 960px) and (max-width: 1179px) {
	.pan-glass-grid.pan-audience-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pan-audience-service { display: flex; flex-direction: column; }

.pan-room .pan-glass p.pan-audience-kicker {
	margin: 0 0 0.6rem;
	font-size: var(--wp--custom--eyebrow--size);
	font-weight: var(--wp--custom--eyebrow--weight);
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
}

.pan-room .pan-glass p.pan-section-link { margin-top: auto; padding-top: 1.1rem; }

/* Links inside glass cards, such as the official services on Help now. */
.pan-room .pan-glass p a:not(.wp-block-button__link) { color: var(--wp--preset--color--bone); text-underline-offset: 0.18em; }
.pan-room .pan-glass p a:not(.wp-block-button__link):hover { color: var(--wp--preset--color--surface); }

/* Groups: the hand-off to the Local Action Network, its two framework links close together. */
.pan-audience-lan p.pan-section-link { margin-top: 1.5rem; }
.pan-audience-lan p.pan-section-link + p.pan-section-link { margin-top: 0.6rem; }

/* Help now: the note under a panel's steps (official numbers, what to do if already paid). */
.pan-pick p.pan-help-official {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-2);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
}

.pan-pick p.pan-help-official a { font-weight: 600; }

/* ---------- 4g. Audience pages: figures, the essentials, tools, help ----------------
   14 Sep: the audience pages lead with the visitor's problem and what they can do about it; the services
   come last, as a short list (setup-audiences.php). */

/* Why it matters, in figures: open columns with a brass rule, each with its source. */
.pan-facts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 760px) {
	.pan-facts { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
}

.pan-fact { padding-top: 1rem; border-top: 1px solid rgba(194, 161, 77, 0.65); }
.pan-fact > * { margin-block: 0; }

.pan-fact p.pan-fact-figure {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: clamp(2rem, 3.4vw, 2.625rem);
	font-weight: 600;
	line-height: 1.05;
	color: var(--wp--preset--color--headline);
	font-variant-numeric: lining-nums;
}

.pan-fact p.pan-fact-line { max-width: 24rem; margin-top: 0.5rem; color: var(--wp--preset--color--ink-2); }
.pan-fact p.pan-fact-source { margin-top: 0.65rem; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--ink-3); }
.pan-fact p.pan-fact-source a { color: var(--wp--preset--color--seal-mid); text-underline-offset: 0.18em; }

/* The essentials: stages of step cards, a Done box on each, and a progress bar after them. */
/* Section leads run the full wide column here, so they're held to a readable measure. */
:is(.pan-plan-section, .pan-audience-help) p.pan-lead { max-width: 46rem; }

.pan-plan { display: grid; gap: 1.25rem; margin-top: 1.5rem; counter-reset: pan-plan-done; }
.pan-plan > * { margin: 0; }
.pan-plan p.pan-plan-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-3); }

.pan-plan-stages { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
.pan-plan-stage > * { margin-block: 0; }

.pan-plan-stage h3.pan-plan-when {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.8rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--ink-2);
}

.pan-plan-when span {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.625rem;
	font-weight: 600;
	color: var(--wp--preset--color--headline);
}

.pan-plan-items { display: grid; gap: 1rem; margin-top: 0.9rem; }

@media (min-width: 640px) {
	.pan-plan-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pan-plan-items > .pan-plan-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
	.pan-plan-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pan-plan-items > .pan-plan-item:last-child:nth-child(odd) { grid-column: auto; }
}

.pan-plan-item {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.3rem 1.3rem 1.1rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--depth--elev-1);
	transition: border-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard), box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-plan-item > * { margin-block: 0; }
.pan-plan-item p.pan-plan-tag { padding-right: 2.25rem; font-size: var(--wp--preset--font-size--caption); font-weight: 600; color: var(--wp--preset--color--seal-mid); }
.pan-plan-item h4 { margin-top: 0.4rem; font-family: var(--wp--preset--font-family--newsreader); font-size: 1.3rem; line-height: 1.2; color: var(--wp--preset--color--headline); text-wrap: balance; }
.pan-plan-item p.pan-plan-why { margin-top: 0.5rem; color: var(--wp--preset--color--ink-2); }

details.pan-plan-how { margin: 0.75rem 0 1rem; }

/* Blocksy's flow margin on <summary> is zeroed, as on the FAQs. */
.pan-plan-how > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.2rem 0;
	font-weight: 600;
	color: var(--wp--preset--color--seal-mid);
	list-style: none;
	cursor: pointer;
}

.pan-plan-how > summary::-webkit-details-marker { display: none; }

.pan-plan-how > summary::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s ease;
}

.pan-plan-how[open] > summary::after { transform: translateY(20%) rotate(-135deg); }
.pan-plan-how > summary:hover { color: var(--wp--preset--color--seal-deep); }
.pan-plan-how > summary:focus-visible { outline: 2px solid var(--wp--preset--color--seal-mid); outline-offset: 3px; border-radius: 2px; }

.pan-plan-how ol { margin: 0.55rem 0 0; padding-left: 1.25rem; color: var(--wp--preset--color--ink); }
.pan-plan-how li { margin: 0 0 0.45rem; padding-left: 0.15rem; }
.pan-plan-how li::marker { font-weight: 600; color: var(--wp--preset--color--seal-mid); }
.pan-plan-how p.pan-plan-link { margin: 0.35rem 0 0; font-size: var(--wp--preset--font-size--small); }
.pan-plan-how p.pan-plan-link a { font-weight: 600; color: var(--wp--preset--color--seal-mid); text-underline-offset: 0.18em; }

.pan-plan-item label.pan-plan-done {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	width: fit-content;
	margin-top: auto;
	padding: 0.45rem 0.85rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
}

.pan-plan-done input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--wp--custom--signal--safe); }
.pan-plan-done input:checked { counter-increment: pan-plan-done; }
.pan-plan-done:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--seal-mid); outline-offset: 2px; }

/* A done step: the safe signal, with its tick and its word. */
.pan-plan-item:has(input:checked) { border-color: var(--wp--custom--signal--safe-edge); box-shadow: 0 0 0 1px var(--wp--custom--signal--safe-edge), var(--wp--custom--depth--elev-2); }
.pan-plan-item:has(input:checked) label.pan-plan-done { color: var(--wp--custom--signal--safe); background: var(--wp--custom--signal--safe-tint); border-color: var(--wp--custom--signal--safe-edge); }

/* The corner tick on a done step: a tinted circle (::before) and the tick drawn over it (::after), as on the good-news strip. */
.pan-plan-item:has(input:checked)::before,
.pan-plan-item:has(input:checked)::after {
	content: "";
	position: absolute;
	top: 1.05rem;
	right: 1.05rem;
	width: 1.7rem;
	height: 1.7rem;
}

.pan-plan-item:has(input:checked)::before {
	background: var(--wp--custom--signal--safe-tint);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--wp--custom--signal--safe-edge);
}

.pan-plan-item:has(input:checked)::after {
	background: var(--wp--custom--signal--safe);
	-webkit-mask: var(--pan-icon-tick) center / 1rem no-repeat;
	mask: var(--pan-icon-tick) center / 1rem no-repeat;
}

/* The progress bar: after the steps, and stuck to the bottom of the screen once anything is ticked. */
.pan-plan-progress {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	padding: 0.85rem 1.25rem;
	color: var(--wp--preset--color--bone);
	background: var(--wp--preset--color--night);
	border: 1px solid rgba(194, 161, 77, 0.45);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--depth--elev-3);
}

.pan-plan:has(.pan-plan-done input:checked) .pan-plan-progress { position: sticky; bottom: 0.9rem; z-index: 5; }
.pan-plan-progress > * { margin: 0; }

.pan-plan-progress p.pan-plan-kicker {
	font-size: var(--wp--custom--eyebrow--size);
	font-weight: var(--wp--custom--eyebrow--weight);
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
}

.pan-plan-progress p.pan-plan-score { font-weight: 600; font-variant-numeric: tabular-nums; }
.pan-plan-count::after { content: counter(pan-plan-done); color: var(--wp--custom--signal--safe-on-dark); }

ol.pan-plan-segs { display: flex; flex: 1 1 9rem; gap: 4px; max-width: 18rem; margin: 0; padding: 0; list-style: none; }
.pan-plan-segs li { flex: 1; height: 0.5rem; margin: 0; background: rgba(244, 236, 216, 0.18); border-radius: var(--wp--custom--radius--pill); }

.pan-plan:has(#pan-plan-1:checked) .pan-plan-segs li[data-n="1"],
.pan-plan:has(#pan-plan-2:checked) .pan-plan-segs li[data-n="2"],
.pan-plan:has(#pan-plan-3:checked) .pan-plan-segs li[data-n="3"],
.pan-plan:has(#pan-plan-4:checked) .pan-plan-segs li[data-n="4"],
.pan-plan:has(#pan-plan-5:checked) .pan-plan-segs li[data-n="5"],
.pan-plan:has(#pan-plan-6:checked) .pan-plan-segs li[data-n="6"],
.pan-plan:has(#pan-plan-7:checked) .pan-plan-segs li[data-n="7"],
.pan-plan:has(#pan-plan-8:checked) .pan-plan-segs li[data-n="8"],
.pan-plan:has(#pan-plan-9:checked) .pan-plan-segs li[data-n="9"],
.pan-plan:has(#pan-plan-10:checked) .pan-plan-segs li[data-n="10"],
.pan-plan:has(#pan-plan-11:checked) .pan-plan-segs li[data-n="11"],
.pan-plan:has(#pan-plan-12:checked) .pan-plan-segs li[data-n="12"] { background: var(--wp--custom--signal--safe-on-dark); }

.pan-plan-progress p.pan-plan-next { margin-left: auto; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--seal-label); }
.pan-plan-progress p.pan-plan-next a { font-weight: 600; color: var(--wp--preset--color--bone); text-underline-offset: 0.18em; }
.pan-plan-progress p.pan-plan-next a:hover { color: var(--wp--preset--color--surface); }

.pan-plan-progress p.pan-plan-alldone { display: none; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--custom--signal--safe-on-dark); }
.pan-plan:not(:has(.pan-plan-done input:not(:checked))) p.pan-plan-alldone { display: block; }

/* On a phone the bar stays two short lines: the count beside its segments, then the next step. */
@media (max-width: 639px) {
	.pan-plan-progress { gap: 0.35rem 0.9rem; padding: 0.7rem 1rem; }
	.pan-plan-progress p.pan-plan-kicker { display: none; }
	ol.pan-plan-segs { flex: 1 1 6rem; max-width: none; }
	.pan-plan-progress p.pan-plan-next { flex-basis: 100%; margin-left: 0; font-size: var(--wp--preset--font-size--caption); }
	.pan-plan-progress p.pan-plan-alldone { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.pan-plan-item, .pan-plan-how > summary::after { transition: none; }
}

/* Free tools: three across on a wide screen, each card ending on its link. */
.pan-audience-tools .pan-audience-service p:not(.pan-audience-kicker):not(.pan-section-link) { margin-top: 0.5rem; }

/* Help, if they want it: the services as a quiet list after everything people can do themselves. */
.pan-help-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

@media (min-width: 760px) {
	.pan-help-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); }
}

.pan-help-list > * { margin: 0; }
.pan-help-item { padding: 1.1rem 0 1.15rem; border-bottom: 1px solid var(--wp--preset--color--border); }
.pan-help-item > * { margin-block: 0; }
.pan-help-item h3.wp-block-heading { font-size: 1.25rem; }

.pan-help-item h3 a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--headline);
	text-decoration: none;
}

.pan-help-item h3 a::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: var(--wp--preset--color--seal-mid);
	-webkit-mask: var(--pan-icon-arrow) center / contain no-repeat;
	mask: var(--pan-icon-arrow) center / contain no-repeat;
	transition: transform var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
}

.pan-help-item h3 a:hover { color: var(--wp--preset--color--seal-mid); }
.pan-help-item h3 a:hover::after { transform: translateX(3px); }
.pan-help-item h3 a:focus-visible { outline: 2px solid var(--wp--preset--color--seal-mid); outline-offset: 3px; border-radius: 2px; }
.pan-help-item p { margin-top: 0.35rem; color: var(--wp--preset--color--ink-2); }
.pan-audience-help p.pan-help-trust { margin-top: 1.25rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-3); }

/* ---------- 4f. Your digital footprint (/footprint/) ------------------------------
   The hero's live panel is the homepage readout taken further: what fingerprinting scripts read, and
   one code made from it (pan-live.js). The checks below are plain HTML: ticking "I found something"
   lights the card and adds its fix to the plan with CSS :has(), and a CSS counter keeps the count. */

.pan-fp-hero .pan-readout-panel { width: 100%; max-width: 30rem; justify-self: end; }
.pan-fp-card p.pan-readout-live {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-bottom: 0.8rem;
	font-size: var(--wp--custom--eyebrow--size);
	font-weight: 700;
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--bone);
}

.pan-fp-card p.pan-fp-code {
	display: grid;
	gap: 0.2rem;
	margin: 0 0 0.9rem;
	padding: 0.9rem 1rem;
	background: rgba(3, 10, 40, 0.35);
	border: 1px solid var(--wp--custom--depth--on-seal-edge-strong);
	border-radius: var(--wp--custom--radius--md);
}

.pan-fp-code span { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--seal-label); }

.pan-fp-code b {
	font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
	font-size: clamp(1.6rem, 3.4vw, 2.1rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--brass);
	font-variant-numeric: tabular-nums;
}

.pan-fp-card p.pan-readout-foot { margin: 0.9rem 0 0.4rem; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--seal-label); }

/* The checks, and the plan that builds beside them. */
.pan-fp { display: grid; gap: clamp(1.25rem, 3vw, 2rem); margin-top: 2.25rem; align-items: start; counter-reset: pan-fp-found; }

@media (min-width: 1040px) {
	.pan-fp { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); }
	.pan-fp-plan { position: sticky; top: 6.5rem; }
}

.pan-fp-checks { display: grid; gap: 1rem; }
@media (min-width: 700px) {
	.pan-fp-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pan-fp-checks > .pan-fp-check:last-child:nth-child(odd) { grid-column: 1 / -1; } /* never an orphan on a row */
}

.pan-fp-check {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.35rem 1.35rem 1.15rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--depth--elev-1);
	transition: box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard), border-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-fp-check > * { margin-block: 0; }

.pan-fp-check p.pan-fp-num {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	margin-bottom: 0.8rem;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1rem;
	line-height: 1;
	color: var(--wp--preset--color--bone);
	background: var(--wp--preset--color--seal-deep);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(194, 161, 77, 0.8), inset 0 0 0 3px var(--wp--preset--color--seal-deep), inset 0 0 0 4px rgba(241, 236, 223, 0.3);
}

.pan-fp-check h3 { font-size: 1.3rem; line-height: 1.2; color: var(--wp--preset--color--headline); }
.pan-fp-check p.pan-fp-how { margin-top: 0.55rem; color: var(--wp--preset--color--ink); }
.pan-fp-check p.pan-fp-shows { margin-top: 0.55rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }
.pan-fp-check p.pan-fp-shows strong { color: var(--wp--preset--color--ink); }
.pan-fp-check a { font-weight: 600; }

.pan-fp-check label.pan-fp-found {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	width: fit-content;
	margin-top: auto;
	padding: 0.5rem 0.85rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
}

.pan-fp-check p.pan-fp-shows + label.pan-fp-found { margin-top: 1rem; }
.pan-fp-found input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--wp--custom--signal--caution); }
.pan-fp-found input:checked { counter-increment: pan-fp-found; }
.pan-fp-found:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--seal-mid); outline-offset: 2px; }

/* A ticked check: the caution signal, with its icon and word. */
.pan-fp-check:has(input:checked) { border-color: var(--wp--custom--signal--caution-edge); box-shadow: 0 0 0 1px var(--wp--custom--signal--caution-edge), var(--wp--custom--depth--elev-2); }
.pan-fp-check:has(input:checked) label.pan-fp-found { color: var(--wp--custom--signal--caution); background: var(--wp--custom--signal--caution-tint); border-color: var(--wp--custom--signal--caution-edge); }

.pan-fp-plan {
	padding: clamp(1.25rem, 3vw, 1.6rem);
	color: var(--wp--preset--color--bone);
	background: var(--wp--preset--color--night);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--depth--elev-3);
}

.pan-fp-plan > * { margin-block: 0; }

.pan-fp-plan p.pan-fp-plan-kicker {
	font-size: var(--wp--custom--eyebrow--size);
	font-weight: var(--wp--custom--eyebrow--weight);
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--brass);
}

.pan-fp-plan h3 { margin-top: 0.4rem; font-size: 1.5rem; color: var(--wp--preset--color--bone); }
.pan-fp-count::after { content: counter(pan-fp-found); font-variant-numeric: tabular-nums; color: var(--wp--custom--signal--caution-on-dark); }

.pan-fp-plan p.pan-fp-empty { margin-top: 0.75rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--seal-label); }
.pan-fp:has(.pan-fp-found input:checked) p.pan-fp-empty { display: none; }

ol.pan-fp-steps { margin: 0.9rem 0 0; padding: 0 0 0 1.2rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--seal-label); }
.pan-fp-steps li { display: none; margin: 0 0 0.7rem; padding-left: 0.2rem; }
.pan-fp-steps li::marker { color: var(--wp--preset--color--brass); }
.pan-fp-steps strong { color: var(--wp--preset--color--bone); }
.pan-fp-steps a, .pan-fp-plan p.pan-fp-more a { color: var(--wp--preset--color--bone); }

.pan-fp:has(#pan-fp-1:checked) .pan-fp-steps li[data-fp="1"],
.pan-fp:has(#pan-fp-2:checked) .pan-fp-steps li[data-fp="2"],
.pan-fp:has(#pan-fp-3:checked) .pan-fp-steps li[data-fp="3"],
.pan-fp:has(#pan-fp-4:checked) .pan-fp-steps li[data-fp="4"],
.pan-fp:has(#pan-fp-5:checked) .pan-fp-steps li[data-fp="5"],
.pan-fp:has(#pan-fp-6:checked) .pan-fp-steps li[data-fp="6"],
.pan-fp:has(#pan-fp-7:checked) .pan-fp-steps li[data-fp="7"] { display: list-item; }

/* The hub's Learn shelf: two doors beside the newsletter. */
.pan-hub-coming .pan-doors.pan-doors--two { grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; }
@media (min-width: 1200px) {
	.pan-hub-coming .pan-doors.pan-doors--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pan-hub-coming h3.pan-hub-coming-title { margin-top: 2.25rem; font-size: 1.3rem; color: var(--wp--preset--color--headline); }
.pan-hub-coming h3.pan-hub-coming-title + p { margin-top: 0.4rem; color: var(--wp--preset--color--ink-2); }

/* On a phone the plan sits below all seven checks, so once something is ticked a bar stays at the bottom of
   the screen with the count and a jump to the plan. The count comes from the same CSS counter. */
a.pan-fp-jump { display: none; }

@media (max-width: 1039px) {
	.pan-fp:has(.pan-fp-found input:checked) a.pan-fp-jump {
		position: sticky;
		bottom: 0.9rem;
		z-index: 5;
		display: flex;
		justify-content: center;
		gap: 0.35rem;
		padding: 0.8rem 1rem;
		font-weight: 600;
		color: var(--wp--preset--color--bone);
		text-decoration: none;
		background: var(--wp--preset--color--night);
		border: 1px solid rgba(194, 161, 77, 0.6);
		border-radius: var(--wp--custom--radius--pill);
		box-shadow: var(--wp--custom--depth--elev-3);
	}
	.pan-fp-plan { scroll-margin-top: 5.5rem; }
}

.pan-fp-plan p.pan-fp-more { margin-top: 1rem; padding-top: 1rem; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--seal-label); border-top: 1px solid var(--wp--custom--depth--on-seal-edge); }

/* ---------- 5. Footer and 404 ------------------------------------------------ */

/* The footer continues the closing night scene: the copyright line and receipt on the left, the Footer
   menu on the right. Header-style specificity (#footer), because Blocksy's Customizer CSS prints after
   this file. */
#footer [data-row] { background-color: var(--wp--preset--color--night); }
#footer [data-row*="bottom"] { --theme-border-top: 1px solid rgba(188, 211, 232, 0.12); }
#footer .ct-footer-copyright { color: var(--wp--preset--color--seal-label); font-size: var(--wp--preset--font-size--caption); }
#footer .ct-footer-copyright a { color: var(--wp--preset--color--bone); }

/* 🔴 On the LINK, not the nav: Blocksy sets --theme-link-initial-color (#1C1A16, ink) and uppercase 12px
   directly on each footer link, so variables set on the nav never reached them. The first build had
   dark-on-night footer links, the same trap as the header dropdown (measured 14 Sep). */
#footer [data-id="menu"] .ct-menu-link {
	--theme-link-initial-color: var(--wp--preset--color--seal-label);
	--theme-link-hover-color: var(--wp--preset--color--bone);
	--theme-link-active-color: var(--wp--preset--color--bone);
	--theme-font-size: var(--wp--preset--font-size--small);
	--theme-font-weight: 500;
	--theme-text-transform: none;
	--theme-letter-spacing: 0;
}

/* Blocksy splits the bottom row in two equal halves, which wrapped seven links onto two lines. */
@media (min-width: 1000px) {
	#footer [data-row*="bottom"] > div { --grid-template-columns: auto minmax(0, 1fr); }
	#footer [data-column="menu"] { --horizontal-alignment: flex-end; }
}

/* 404: a short night scene with the places people usually want. */
.pan-not-found { padding-top: clamp(4.5rem, 12vw, 8rem); padding-bottom: clamp(4.5rem, 12vw, 8rem); }
.pan-not-found h1 { max-width: 14ch; }

ul.pan-not-found-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 2.25rem auto 0;
	padding: 0;
	list-style: none;
}

.pan-not-found-links li { margin: 0; }

.pan-not-found-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.1rem;
	font-weight: 600;
	color: var(--wp--preset--color--bone);
	text-decoration: none;
	background: var(--wp--custom--depth--on-seal-fill);
	border: 1px solid var(--wp--custom--depth--on-seal-edge-strong);
	border-radius: var(--wp--custom--radius--pill);
	transition: background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
}

.pan-not-found-links a::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: var(--wp--preset--color--brass);
	-webkit-mask: var(--pan-icon-arrow) center / contain no-repeat;
	mask: var(--pan-icon-arrow) center / contain no-repeat;
}

.pan-not-found-links a:hover { background: var(--wp--custom--depth--on-seal-fill-raised); }

/* --- Paying without a processor (mu-plugins/pan-payments.php): "How to pay" on FluentCart's receipt, and the
   Monero note under the checkout's payment methods. FluentCart's receipt styles tables and headings of its own,
   so these rules start from the box. */
.pan-pay-box {
	display: grid;
	gap: 0.7rem;
	margin: 0 0 1.75rem;
	padding: 1.25rem 1.4rem 1.1rem;
	background: var(--wp--preset--color--bone);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
}

.pan-pay-box > * { margin: 0; }
.pan-pay-box > h2 { font-size: var(--wp--preset--font-size--subhead); line-height: 1.2; color: var(--wp--preset--color--headline); }
.pan-pay-box > p { font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--wp--preset--color--ink-2); }
.pan-pay-box table.pan-pay-rows { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }

.pan-pay-box table.pan-pay-rows th,
.pan-pay-box table.pan-pay-rows td {
	padding: 0.55rem 0;
	border: 0;
	border-bottom: 1px dashed var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
	background: none;
}

.pan-pay-box table.pan-pay-rows th { width: 38%; padding-right: 1rem; font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--wp--preset--color--ink-3); }
.pan-pay-box table.pan-pay-rows td { font-weight: 600; color: var(--wp--preset--color--headline); overflow-wrap: anywhere; }
.pan-pay-box table.pan-pay-rows tr:last-child > * { border-bottom: 0; }
.pan-pay-aside { margin: 0.9rem 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-3); }

/* ---------- The tools hub (mu-plugins/pan-tools.php) -------------------------------------------------------
   Layer chips filter the picks with :has(), like the explainers, so it works with JavaScript off. Each card:
   what it's for, the facts as small labels, why it's a pick, what's worth knowing, links out, the date checked. */
.pan-tools { display: grid; gap: 2.25rem; margin-top: 2rem; }
.pan-tools > * { margin: 0; }
.pan-tools-filter { gap: 0.45rem; }

.pan-tools:has(input[name="pan-tools-layer"][value="1"]:checked) .pan-tools-layer:not([data-layer="1"]),
.pan-tools:has(input[name="pan-tools-layer"][value="2"]:checked) .pan-tools-layer:not([data-layer="2"]),
.pan-tools:has(input[name="pan-tools-layer"][value="3"]:checked) .pan-tools-layer:not([data-layer="3"]),
.pan-tools:has(input[name="pan-tools-layer"][value="4"]:checked) .pan-tools-layer:not([data-layer="4"]),
.pan-tools:has(input[name="pan-tools-layer"][value="5"]:checked) .pan-tools-layer:not([data-layer="5"]),
.pan-tools:has(input[name="pan-tools-layer"][value="6"]:checked) .pan-tools-layer:not([data-layer="6"]),
.pan-tools:has(input[name="pan-tools-layer"][value="7"]:checked) .pan-tools-layer:not([data-layer="7"]),
.pan-tools:has(input[name="pan-tools-layer"][value="8"]:checked) .pan-tools-layer:not([data-layer="8"]),
.pan-tools:has(input[name="pan-tools-layer"][value="9"]:checked) .pan-tools-layer:not([data-layer="9"]) { display: none; }

.pan-tools-layer { display: grid; gap: 1rem; }
.pan-tools-layer > h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: var(--wp--preset--font-size--subhead); }

.pan-tools-num {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--inter, inherit);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--bone);
	background: var(--wp--preset--color--seal-deep);
}

.pan-tools-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }

@media (min-width: 720px) {
	.pan-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1120px) {
	.pan-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pan-tool {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.25rem 1.3rem 1.1rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--depth--elev-1);
}

.pan-tool > * { margin: 0; }
.pan-tool h4 { font-size: 1.3rem; line-height: 1.2; color: var(--wp--preset--color--headline); }
.pan-tool-for { font-weight: 500; color: var(--wp--preset--color--ink); }

.pan-tool ul.pan-tool-facts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }

.pan-tool-facts li {
	margin: 0;
	padding: 0.2rem 0.55rem;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.35;
	color: var(--wp--preset--color--ink-2);
	background: var(--wp--preset--color--bone);
	border-radius: var(--wp--custom--radius--pill);
}

.pan-tool-facts li.is-open { color: var(--wp--preset--color--seal-deep); background: var(--wp--preset--color--seal-soft); }
.pan-tool-why, .pan-tool-watch { font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--wp--preset--color--ink-2); }
.pan-tool-watch strong { color: var(--wp--preset--color--ink); }

.pan-tool-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: auto !important; padding-top: 0.35rem; font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.pan-tool-links a { color: var(--wp--preset--color--seal-deep); }
.pan-tool-checked { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--ink-3); }

/* ---------- Workshop page (/workshop/, 2 Oct 2026): the report list sits under a lead ----- */

.pan-workshop-report > ul.pan-ticks { margin-top: 1.5rem; }
.pan-workshop-report > ul.pan-ticks li { font-size: 1.0625rem; }

/* "How a number gets out": words beside the moving drawing (content/explainers/workshop-trail.html; its motion is
   with the other motifs in pan-services.css). A navy room straight after the night hero, as on the homepage. */
.pan-workshop-trail .pan-room-grid { align-items: center; }
.pan-room ul.pan-trail-ways { display: grid; gap: 0.9rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.pan-trail-ways li { position: relative; margin: 0; padding-left: 1.6rem; line-height: 1.55; color: var(--wp--preset--color--seal-label); }
.pan-trail-ways li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.5em;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--wp--custom--signal--risk-on-dark);
}
.pan-trail-ways strong { font-weight: 600; color: var(--wp--preset--color--bone); }
.pan-room p.pan-trail-next { margin-top: 1.5rem; }
.pan-trail { display: grid; justify-items: center; gap: 0.75rem; }
.pan-room p.pan-trail-caption { margin: 0; font-size: var(--wp--preset--font-size--caption); text-align: center; }