/* PointCPD — brand site styles. Palette from BRIEF.md Section 3; visual
   language matches the approved shadcn/Tailwind-style direction (restrained
   neutrals, one accent, real webfont, tabular figures for numbers). */

:root {
	--background: 0 0% 100%;
	--surface-2: 220 14% 96%;      /* was --surface: subtle off-white, used for muted fills */
	--foreground: 224 12% 9%;      /* ink */
	--muted-foreground: 216 10% 40%;/* slate #5B6470 — was 46% lightness, which failed 4.5:1 on the alt surface */
	--border: 220 13% 91%;
	--border-strong: 220 13% 82%;
	--card: 0 0% 100%;
	--radius: 0.75rem;
	--yellow: 45 100% 50%;
	--yellow-foreground: 45 100% 12%;
	--yellow-tint: 45 100% 92%;
	--success: 158 64% 38%;
	--success-tint: 158 55% 92%;
	--alert: 358 75% 59%;
	--alert-tint: 358 80% 95%;
	--shadow-color: 220 43% 11%;
	/* 1280, not 1120: the hero and ticker are full-bleed with a clamped 6vw inset, so on a
	   laptop/desktop the hero copy started ~90px further left than every section under it —
	   the site read as two different widths stacked (James, Aug 2026). At 1280 the content
	   column lands on the hero's own left edge at common widths, and the header inset
	   (which tracks the container) follows both. */
	--container: 1280px;
	/* Layered depth scale — two shadows per level (contact + ambient) so elevation
	   reads as light, not as grey smudge. */
	--shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 1px 1px hsl(var(--shadow-color) / 0.04);
	--shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.05), 0 12px 24px -8px hsl(var(--shadow-color) / 0.14);
	--shadow-lg: 0 4px 8px hsl(var(--shadow-color) / 0.06), 0 28px 56px -16px hsl(var(--shadow-color) / 0.22);
	--glow-yellow: 0 6px 20px -4px hsl(var(--yellow) / 0.45);
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Text selection carries the brand. */
::selection { background: hsl(var(--yellow)); color: hsl(var(--yellow-foreground)); }

*, *::before, *::after { box-sizing: border-box; min-width: 0; }

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

/* Sticky-footer shell: page fills the viewport and the footer takes up any slack, so a
   short page can never leave a white strip below it. The footer's `margin-top: auto`
   does the pushing. */
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: 'Inter', ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* Flex children stretch by default; keep full-bleed sections genuinely full-bleed. */
body > * { flex: none; }

/* Anchored headings must clear the sticky header instead of hiding behind it. */
html { scroll-padding-top: 7rem; }

h1, h2, h3, h4 {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }

.pcpd-container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Trust bar */
/* Trust ticker — charcoal, scrolling. Static claims meant a phone showed one of them and
   hid the rest; scrolling shows all of them in the same strip of space. */
.pcpd-trustbar {
	background: hsl(var(--foreground));
	color: hsl(var(--background) / 0.8);
	font-size: 0.75rem;
	font-weight: 500;
}
.pcpd-trustbar__viewport {
	overflow: hidden;
	/* Fade the ends so claims enter and leave rather than being chopped. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
.pcpd-trustbar__track {
	display: flex;
	width: max-content;
	animation: pcpd-ticker 105s linear infinite;
}
.pcpd-trustbar__viewport:hover .pcpd-trustbar__track { animation-play-state: paused; }
.pcpd-trustbar__list {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	margin: 0 2.5rem 0 0; /* margin, not track gap: -50% must land on a whole number of copies */
	padding: 0.5rem 0;
	list-style: none;
}
.pcpd-trustbar__list li { display: flex; align-items: center; gap: 2.5rem; white-space: nowrap; }
.pcpd-trustbar__list li::after {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: hsl(var(--yellow));
	flex: none;
}
/* Exactly -50%: the track holds two identical lists, so this lands copy two where copy
   one started and the restart is invisible. */
@keyframes pcpd-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
/* Respect reduced-motion: stop the scroll and let the row simply centre. */
@media (prefers-reduced-motion: reduce) {
	.pcpd-trustbar__track { animation: none; width: auto; }
	.pcpd-trustbar__viewport { mask-image: none; -webkit-mask-image: none; }
	.pcpd-trustbar__list:nth-child(n+2) { display: none; }
	.pcpd-trustbar__list { flex-wrap: wrap; justify-content: center; margin: 0; padding: 0.5rem 1.5rem; }
}

/* Legacy static markup, kept so an older cached header still renders sanely. */
.pcpd-trustbar__inner {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
	padding: 0.45rem 1.5rem;
}
.pcpd-trustbar__inner span:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	margin-left: 2rem;
	vertical-align: middle;
}
@media (max-width: 720px) {
	.pcpd-trustbar__inner span:nth-child(n+2) { display: none; }
}

/* Header — solid ink, merging visually with the trustbar above it (James, Aug 2026).
   It was briefly translucent (0.88 + blur): over the white page that renders as washed
   grey, and because the logo lockup carries its own solid ink background the mismatch
   drew a visible dark box around the logo. Opaque is the requirement, not a preference. */
.pcpd-header {
	background: hsl(var(--foreground));
	border-bottom: 1px solid hsl(var(--background) / 0.08);
	position: sticky;
	top: 0;
	z-index: 40;
}
.pcpd-header .pcpd-nav__list { color: hsl(var(--background) / 0.75); }
.pcpd-header .pcpd-nav__list a:hover,
.pcpd-header .pcpd-megamenu__trigger:hover { color: hsl(var(--background)); }
.pcpd-header .pcpd-megamenu__trigger { color: hsl(var(--background) / 0.75); }
.pcpd-header__actions .pcpd-btn--ghost { color: hsl(var(--background) / 0.75); }
.pcpd-header__actions .pcpd-btn--ghost:hover { color: hsl(var(--background)); }
.pcpd-header__actions .pcpd-btn--primary { background: hsl(var(--yellow)); color: hsl(var(--yellow-foreground)); }
.pcpd-header__actions .pcpd-btn--primary:hover { opacity: 1; box-shadow: var(--glow-yellow); }
.pcpd-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	/* Full-width, not the 1120px content container: the ticker and the split hero are
	   full-bleed, so a container-locked header left the logo floating ~380px in from the
	   edge on wide monitors. The horizontal inset mirrors the hero copy's own padding, so
	   the logo and the headline share a left edge at every width. */
	max-width: none;
	/* Track the 1120px content container's left edge (its 1.5rem gutter included), so
	   the logo lines up with page content at tablet and laptop widths — 6vw had the
	   header sitting 46-61px in while every section sat at 24px. Capped at 6rem so on
	   wide monitors the logo still hugs the edge instead of drifting toward the centre
	   (the original full-width reason for this rule). */
	padding: 0 min(max(1.5rem, calc((100vw - var(--container)) / 2 + 1.5rem)), 6rem);
	height: 64px;
}
.pcpd-logo {
	display: inline-flex;
	align-items: center;
	flex: none; /* the header's flex layout was shrinking the lockup to 77px */
	gap: 0;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: hsl(var(--foreground));
	white-space: nowrap;
}
/* Fallback lockup (currentColor mark + text) must read light on the ink header —
   without this it inherits ink and disappears if the SVG asset ever goes missing. */
.pcpd-header .pcpd-logo { color: hsl(var(--background)); }
.pcpd-logo__mark { flex: none; display: block; margin-right: 0.5rem; }
/* Inlined brand lockup (assets/img/pointcpd-logo-*.svg) — intrinsic size is 320x88,
   scaled by height here so header and footer can size it independently. */
/* Explicit width + flex:none: the SVG's width="320" attribute makes the flex header
   treat it as a 320px item and shrink it. Width is always height x 320/88.
   Sized up across all devices (James: "currently tiny"). */
.pcpd-logo__img { height: 40px; width: 145px; flex: none; display: block; }
.pcpd-logo--footer .pcpd-logo__img { height: 36px; width: 131px; }
.pcpd-logo b { font-weight: 700; letter-spacing: -0.01em; }
/* Matches the certificate wordmark: "CPD" sits tight against "point", lighter
   weight, no tracking, always signal yellow (James's call — the wordmark is a
   logo, exempt from text-contrast rules, and the ink mark beside it carries
   the recognition weight on light surfaces). */
.pcpd-logo span { font-weight: 400; letter-spacing: 0; margin-left: 0; color: hsl(var(--yellow)); }
.pcpd-nav { flex: 1; display: flex; justify-content: center; }
.pcpd-nav__list {
	list-style: none;
	display: flex;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	color: hsl(var(--muted-foreground));
}
.pcpd-nav__list a { text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; min-height: 40px; }
.pcpd-nav__list a:hover { color: hsl(var(--foreground)); }
.pcpd-header__actions { display: flex; gap: 0.5rem; align-items: center; flex: none; }
/* The desktop nav shows from 900px up — on an iPad that's a finger, not a mouse, so
   every header control keeps a 40px hit area even where it looks like a text link. */
.pcpd-header__actions .pcpd-btn { min-height: 40px; }

/* Mega menu */
.pcpd-megamenu__item { position: relative; display: flex; align-items: center; }
.pcpd-megamenu__trigger {
	background: none;
	border: none;
	font: inherit;
	font-weight: 500;
	font-size: 0.9rem;
	color: hsl(var(--muted-foreground));
	cursor: pointer;
	padding: 0.5rem 0.25rem;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.pcpd-megamenu__trigger:hover { color: hsl(var(--foreground)); }
.pcpd-megamenu__trigger::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
	transition: transform 0.15s ease;
}
.pcpd-megamenu__trigger[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 3px; }
.pcpd-megamenu__panel {
	position: absolute;
	top: calc(100% + 1.1rem);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	box-shadow: 0 16px 40px hsl(var(--shadow-color) / 0.16);
	padding: 1.5rem;
	display: grid;
	grid-template-columns: repeat(3, 180px);
	gap: 2rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 50;
}
.pcpd-megamenu__item.is-open .pcpd-megamenu__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.pcpd-megamenu__col h4 {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: hsl(var(--muted-foreground));
	margin: 0 0 0.75rem;
}
/* :not(.pcpd-btn) matters: the CTA column's "Browse all courses" is a real button
   (dark gradient background, .pcpd-btn--primary sets its own light text) — this rule
   was painting it ink-on-near-black too, same invisible-button bug as everywhere
   else a blanket `a` colour rule caught a .pcpd-btn (James, Aug 2026 screenshot). */
.pcpd-megamenu__col a:not(.pcpd-btn) { display: block; padding: 0.35rem 0; font-size: 0.9rem; text-decoration: none; color: hsl(var(--foreground)); font-weight: 400; }
/* color re-stated on purpose: the header's blanket `.pcpd-nav__list a:hover` (white,
   for the ink bar) outranks the base rule above and was turning these panel links
   white-on-white the moment they were hovered. */
.pcpd-megamenu__col a:not(.pcpd-btn):hover { text-decoration: underline; color: hsl(var(--foreground)); }
.pcpd-megamenu__col--cta { background: hsl(var(--surface-2)); border-radius: calc(var(--radius) - 0.25rem); padding: 1rem; }
.pcpd-megamenu__col--cta p { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin: 0 0 0.85rem; }
.pcpd-megamenu__col--cta .pcpd-btn { width: 100%; height: 38px; font-size: 0.85rem; }
@media (max-width: 900px) {
	.pcpd-megamenu__panel { grid-template-columns: repeat(2, 160px); }
	.pcpd-megamenu__col--cta { display: none; }
}

/* Buttons — shadcn-style variants: primary = solid ink, secondary = outline,
   ghost = text-only. Yellow is reserved for badges/pills/progress (BRIEF.md
   Section 3: "use yellow sparingly as an accent, not a wash"). */
.pcpd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 38px;
	padding: 0 1.1rem;
	border-radius: calc(var(--radius) - 0.25rem);
	font-weight: 500;
	font-size: 0.875rem;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.18s var(--ease-out), border-color 0.18s var(--ease-out),
		opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.pcpd-btn:hover { transform: translateY(-1px); }
.pcpd-btn:active { transform: translateY(0); transition-duration: 0.06s; }
.pcpd-btn:focus-visible { outline: 2px solid hsl(var(--yellow)); outline-offset: 2px; }
/* Faint top sheen on the ink button so it reads as a surface, not a flat block. */
.pcpd-btn--primary {
	background: linear-gradient(180deg, hsl(224 12% 16%), hsl(var(--foreground)) 55%);
	color: hsl(var(--background));
	box-shadow: var(--shadow-sm);
}
.pcpd-btn--primary:hover { opacity: 0.92; box-shadow: var(--shadow-md); }
.pcpd-btn--secondary { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.pcpd-btn--secondary:hover { background: hsl(var(--surface-2)); }
.pcpd-btn--ghost { background: transparent; color: hsl(var(--muted-foreground)); padding: 0 0.6rem; height: auto; }
.pcpd-btn--ghost:hover { color: hsl(var(--foreground)); transform: none; }
.pcpd-btn--lg { height: 46px; padding: 0 1.5rem; font-size: 0.95rem; }

/* Pills / badges — the one place yellow shows up. A hair of gradient + lift so
   the accent reads like enamel, not flat fill. */
.pcpd-pill {
	display: inline-flex;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	background: linear-gradient(180deg, hsl(45 100% 56%), hsl(var(--yellow)) 60%);
	color: hsl(var(--foreground));
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	margin-bottom: 1rem;
	white-space: nowrap;
	box-shadow: 0 1px 2px hsl(var(--yellow-foreground) / 0.18), inset 0 1px 0 hsl(45 100% 70% / 0.6);
}
.pcpd-pill--dark { background: hsl(var(--foreground)); color: hsl(var(--yellow)); }

/* Hero — [pointcpd_hero]: split screen. Left, the pitch on paper; right, the free-trial
   offer full-bleed on signal yellow with ghost-outline type texture. */
/* The hero sits on the SAME column as everything else (James, Aug 2026: "the hero
   shrinks and fits into the rest of the website's sizing"). It used to be full-bleed
   — 1425px wide on a 1440 screen — while the sections under it stopped at 1140, so
   the page read as two or three different site widths stacked. Now it is a contained
   band: same max-width, same 1.5rem gutters, rounded so it reads as one deliberate
   block rather than a strip that ran off the edge. */
.pcpd-hero--split {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	/* Exactly .pcpd-container's own behaviour — full width up to the max, centred,
	   with the 1.5rem gutter carried as PADDING on the panels rather than margin on
	   the card. Anything else and the hero copy sits 24px further in than every
	   section heading once the viewport drops below the container width. */
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	min-height: min(58vh, 520px);
	overflow: hidden;
	padding: 0;
}
.pcpd-hero__left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Horizontal padding matches .pcpd-container's own gutter, so the hero headline
	   starts on exactly the same line as every section heading below it. */
	padding: clamp(2.5rem, 4vw, 3.5rem) 1.5rem;
}
.pcpd-hero__cta { width: 100%; max-width: 380px; margin-top: 0.5rem; }
.pcpd-hero__alt { margin: 1rem 0 0; font-size: 0.9rem; color: hsl(var(--muted-foreground)); }
.pcpd-hero__alt a { font-weight: 600; color: hsl(var(--foreground)); }

.pcpd-hero__right {
	position: relative;
	background: hsl(var(--yellow));
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.75rem, 3vw, 3rem);
	clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%);
}
.pcpd-hero__offer { position: relative; text-align: left; }
.pcpd-hero__offer-kicker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: clamp(0.85rem, 1.2vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--yellow-foreground));
}
/* Short ink bar in front of the kicker — same device as the section-title dot family. */
.pcpd-hero__offer-kicker::before {
	content: "";
	width: 2.25rem;
	height: 3px;
	background: hsl(var(--yellow-foreground));
}
.pcpd-hero__offer-big {
	margin: 0 0 2.25rem;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	/* Scaled to the contained panel: 7.5rem was set for a full-bleed hero and rendered
	   at 120px, which dwarfed every heading under it. */
	font-size: clamp(2.75rem, 5.4vw, 4.75rem);
	font-weight: 700;
	line-height: 0.94;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	color: hsl(var(--foreground));
}
.pcpd-hero__offer-line { display: block; }
/* The outlined line — the signature of the reference design. Solid-ink fallback
   (a slightly faded fill) where text-stroke isn't supported. */
.pcpd-hero__offer-line--ghost { color: hsl(var(--yellow-foreground) / 0.35); }
@supports (-webkit-text-stroke: 2px black) {
	.pcpd-hero__offer-line--ghost {
		color: transparent;
		-webkit-text-stroke: 3px hsl(var(--foreground));
	}
}
.pcpd-hero__offer-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1.05rem 2.5rem;
	border-radius: 999px;
	background: hsl(var(--foreground));
	color: hsl(var(--background));
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	text-decoration: none;
	box-shadow: 0 10px 28px hsl(var(--shadow-color) / 0.22);
	transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), gap 0.18s var(--ease-out);
}
.pcpd-hero__offer-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px hsl(var(--shadow-color) / 0.3); gap: 0.9rem; }
.pcpd-hero__offer-fine { margin: 1.1rem 0 0; font-size: 0.9rem; font-weight: 500; color: hsl(var(--yellow-foreground) / 0.85); }

@media (max-width: 860px) {
	.pcpd-hero--split { grid-template-columns: 1fr; min-height: 0; }
	.pcpd-hero__left { padding: 2.5rem 1.5rem 3rem; order: 1; }  /* headline first on phones (11 Oct 2026 audit) */
	/* The offer panel follows the headline on a phone, so the value prop is above the fold. */
	.pcpd-hero__right { clip-path: none; padding: 3rem 1.5rem; order: 2; }
}

/* Legacy hero layout kept for anything still using the card variant. */
.pcpd-hero { padding: 5rem 0 4rem; }
.pcpd-hero--split { padding: 0; }
.pcpd-hero__inner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 3rem;
	align-items: center;
}
.pcpd-hero__title { font-size: clamp(2rem, 4.5vw, 3.25rem); max-width: 16ch; text-wrap: balance; }
.pcpd-hero__subtitle { font-size: 1.1rem; color: hsl(var(--muted-foreground)); max-width: none; text-wrap: pretty; }
.pcpd-hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

.pcpd-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0 0 1rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: hsl(var(--yellow-tint));
	color: hsl(var(--yellow-foreground));
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.pcpd-hero__lede {
	font-size: 1.1rem;
	color: hsl(var(--muted-foreground));
	max-width: 60ch;
	text-wrap: pretty;
}
.pcpd-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	color: hsl(var(--muted-foreground));
}
.pcpd-hero__meta li { display: flex; align-items: center; gap: 0.45rem; }
.pcpd-hero__meta li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: hsl(var(--yellow));
}

/* Points card */
.pcpd-hero__card {
	max-width: 340px;
	margin-left: auto;
	padding: 1.5rem;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	background: hsl(var(--card));
	box-shadow: 0 16px 40px hsl(var(--shadow-color) / 0.10);
}
.pcpd-hero__card-label {
	margin: 0 0 1rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
}
.pcpd-hero__dots {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.6rem;
	margin-bottom: 1.1rem;
}
.pcpd-hero__dot {
	aspect-ratio: 1;
	border-radius: 50%;
	background: hsl(var(--surface-2));
	box-shadow: inset 0 0 0 1.5px hsl(var(--border-strong));
	animation: pcpd-dot-fill 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	animation-delay: calc(var(--pcpd-i) * 0.09s + 0.2s);
	opacity: 0.5;
	transform: scale(0.82);
}
@keyframes pcpd-dot-fill {
	to {
		opacity: 1;
		transform: scale(1);
		background: hsl(var(--yellow));
		box-shadow: inset 0 0 0 1.5px hsl(var(--yellow));
	}
}
.pcpd-hero__card-count {
	margin: 0 0 0.35rem;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-variant-numeric: tabular-nums;
	font-size: 1rem;
	color: hsl(var(--muted-foreground));
}
.pcpd-hero__card-count strong {
	font-size: 2rem;
	font-weight: 700;
	color: hsl(var(--foreground));
	margin-right: 0.15rem;
}
.pcpd-hero__card-note {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: hsl(var(--muted-foreground));
}

@media (max-width: 860px) {
	.pcpd-hero__inner { grid-template-columns: 1fr; gap: 2.25rem; }
	.pcpd-hero__card { margin-left: 0; max-width: 100%; }
}

/* Motion is decorative: with it disabled the card reads as a completed ledger. */
@media (prefers-reduced-motion: reduce) {
	.pcpd-hero__dot {
		animation: none;
		opacity: 1;
		transform: none;
		background: hsl(var(--yellow));
		box-shadow: inset 0 0 0 1.5px hsl(var(--yellow));
	}
}

/* Page header band — pointcpd_page_header(). The practical counterpart to the home hero:
   states what the page is and the facts a builder wants before reading further. */
.pcpd-pagehead {
	background:
		radial-gradient(90% 130% at 88% -10%, hsl(var(--yellow) / 0.12), transparent 55%),
		hsl(var(--surface-2));
	border-bottom: 1px solid hsl(var(--border));
	padding: 3rem 0 2.5rem;
}
.pcpd-pagehead__eyebrow {
	margin: 0 0 0.6rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
}
.pcpd-pagehead__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 3.6vw, 2.6rem);
}
.pcpd-pagehead__lede {
	margin: 0;
	max-width: none;
	text-wrap: pretty;
	font-size: 1.02rem;
	color: hsl(var(--muted-foreground));
}
.pcpd-pagehead__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	font-weight: 500;
	color: hsl(var(--muted-foreground));
}
.pcpd-pagehead__meta li { display: flex; align-items: center; gap: 0.45rem; }
.pcpd-pagehead__meta li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: hsl(var(--yellow));
}

/* Section directly under a header band needs less top padding. */
.pcpd-section--tight { padding-top: 2.5rem; border-top: 0; }

/* Course hero facts */
.pcpd-course-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	color: hsl(var(--muted-foreground));
}
.pcpd-course-hero__facts li { display: flex; align-items: center; gap: 0.45rem; }
.pcpd-course-hero__facts li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: hsl(var(--yellow));
}

@media (max-width: 720px) {
	.pcpd-pagehead { padding: 2.25rem 0 1.75rem; }
}

/* Mid-page CTA band — [pointcpd_cta]. Yellow tint, ink text: replaces the old dark banner. */
.pcpd-ctaband {
	background:
		radial-gradient(70% 160% at 12% 120%, hsl(var(--yellow) / 0.22), transparent 55%),
		hsl(var(--yellow-tint));
	border-block: 1px solid hsl(var(--yellow) / 0.4);
	padding: 3rem 0;
}
.pcpd-ctaband__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}
.pcpd-ctaband__title { margin: 0 0 0.35rem; font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.pcpd-ctaband__lede { margin: 0; color: hsl(var(--muted-foreground)); }
.pcpd-ctaband .pcpd-btn { flex: none; }

/* Pricing tiers — [pointcpd_packages] */
.pcpd-pricing {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.1rem;
	margin: 2rem 0 1.25rem;
	align-items: start;
}
/* Three packs (12 / 36 / 60) on both /pricing/ and home: always one row of three on desktop,
   so the "Most popular" 36-pack sits in the middle. */
@media (min-width: 900px) {
	.pcpd-pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
}
.pcpd-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.6rem 1.35rem;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	background: hsl(var(--card));
}
/* The recommended tier lifts and inverts — one clear default, not six equal options. */
.pcpd-tier--popular {
	background: linear-gradient(180deg, hsl(224 12% 13%), hsl(var(--foreground)) 60%);
	border-color: hsl(var(--foreground));
	color: hsl(var(--background));
	box-shadow: var(--shadow-lg), 0 0 0 1px hsl(var(--yellow) / 0.25);
}
/* Licence term above the points figure — the home packs are chosen by how long the
   builder's licence runs, so that is the first thing the card says. */
.pcpd-tier__term {
	margin: 0 0 0.15rem;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
}
.pcpd-tier--popular .pcpd-tier__term { color: hsl(var(--background) / 0.72); }
.pcpd-tier__flag {
	position: absolute;
	top: -11px;
	left: 1.35rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: hsl(var(--yellow));
	color: hsl(var(--yellow-foreground));
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.pcpd-tier__points { margin: 0 0 0.15rem; font-size: 0.95rem; color: hsl(var(--muted-foreground)); }
.pcpd-tier--popular .pcpd-tier__points { color: hsl(var(--background) / 0.72); }
.pcpd-tier__points strong {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 1.7rem;
	font-weight: 700;
	color: hsl(var(--foreground));
	margin-right: 0.25rem;
}
.pcpd-tier--popular .pcpd-tier__points strong { color: hsl(var(--background)); }
.pcpd-tier__price {
	margin: 0.35rem 0 0.1rem;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 1.85rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.pcpd-tier__unit { margin: 0 0 1rem; font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.pcpd-tier--popular .pcpd-tier__unit { color: hsl(var(--background) / 0.7); }
.pcpd-tier__list {
	list-style: none;
	margin: 0 0 1.35rem;
	padding: 0;
	font-size: 0.86rem;
	color: hsl(var(--muted-foreground));
	flex: 1;
}
.pcpd-tier--popular .pcpd-tier__list { color: hsl(var(--background) / 0.82); }
.pcpd-tier__list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.22rem 0; }
.pcpd-tier__list li::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: hsl(var(--yellow));
}
.pcpd-tier--popular .pcpd-btn--primary {
	background: hsl(var(--yellow));
	color: hsl(var(--yellow-foreground));
}
.pcpd-pricing__note {
	font-size: 0.85rem;
	line-height: 1.6;
	color: hsl(var(--muted-foreground));
	max-width: none;
	text-wrap: pretty;
}

/* Auth — [pointcpd_signup]. The wp-login.php side is styled inline from inc/auth.php. */
/* No extra top padding — the section band already provides it; the old 3.5rem stacked
   on top and opened a dead gap under the "Sign up" heading (James's screenshot). */
.pcpd-auth { max-width: 420px; margin: 0 auto; padding: 0 0 4rem; }
.pcpd-auth__title { font-size: clamp(1.6rem, 3vw, 2.1rem); }
/* The pitch reads as a pitch: display face, ink, confident size — not body-copy grey. */
.pcpd-auth__lede {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 1.18rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: hsl(var(--foreground));
	margin: 0 0 1.1rem;
}
/* Free-course offer: a labelled yellow callout, unmistakably the sales bit. */
.pcpd-auth__trial {
	background: hsl(var(--yellow) / 0.13);
	border-left: 3px solid hsl(var(--yellow));
	border-radius: 8px;
	padding: 0.85rem 1rem;
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
}
.pcpd-auth__trial-tag {
	display: block;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: hsl(var(--yellow-foreground));
	margin-bottom: 0.3rem;
}
/* Card matches the login form exactly: same border, radius, shadow, padding. */
.pcpd-auth__form {
	border: 1px solid hsl(var(--border));
	border-radius: 12px;
	background: hsl(var(--card));
	padding: 1.75rem 1.5rem 1.5rem;
	box-shadow: 0 12px 32px hsl(var(--shadow-color) / 0.07);
}
.pcpd-auth__errors {
	margin-bottom: 1.25rem;
	padding: 0.85rem 1rem;
	border-left: 3px solid hsl(var(--alert));
	border-radius: calc(var(--radius) - 0.25rem);
	background: hsl(var(--alert-tint));
	font-size: 0.9rem;
}
.pcpd-auth__errors p { margin: 0; }
.pcpd-auth__errors p + p { margin-top: 0.4rem; }
/* Field styling mirrors wp-login exactly (labels slate/500, 8px inputs, yellow focus)
   so signup and login read as two screens of one product. */
.pcpd-field { margin: 0 0 1.1rem; }
.pcpd-field label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: hsl(var(--muted-foreground));
}
.pcpd-field input {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid hsl(var(--border));
	border-radius: 8px;
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: inherit;
	font-size: 16px; /* not smaller: sub-16px inputs make iOS zoom the viewport */
}
.pcpd-field input:focus {
	outline: none;
	border-color: hsl(var(--foreground));
	box-shadow: 0 0 0 3px hsl(var(--yellow) / 0.35);
}
.pcpd-field__hint { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: hsl(var(--muted-foreground)); }
.pcpd-field__optional { font-weight: 400; color: hsl(var(--muted-foreground)); font-size: 0.78rem; }
.pcpd-auth__form .pcpd-btn { width: 100%; }
.pcpd-auth__alt { margin: 1rem 0 0; text-align: center; font-size: 0.88rem; color: hsl(var(--muted-foreground)); }

/* ── One auth card, two modes: the tabs toggle which form (and lede) is visible.
      The links land on /login/ and /signup/, so it degrades to full page loads
      without JS; the script upgrades them to an instant in-place switch. ── */
.pcpd-auth__tabs {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin: 0 0 1.25rem;
	border: 1px solid hsl(var(--border));
	border-radius: 10px;
	background: hsl(var(--card));
}
.pcpd-auth__tab {
	flex: 1;
	text-align: center;
	padding: 0.55rem 0.75rem;
	border-radius: 7px;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	color: hsl(var(--muted-foreground));
	text-decoration: none;
}
.pcpd-auth__tab[aria-selected="true"] {
	background: hsl(var(--foreground));
	color: hsl(var(--background));
	box-shadow: inset 0 -3px 0 hsl(var(--yellow));
}
.pcpd-auth .pcpd-auth__form--register,
.pcpd-auth .pcpd-auth__lede--register,
.pcpd-auth .pcpd-auth__trial { display: none; }
.pcpd-auth--register .pcpd-auth__form--register { display: block; }
.pcpd-auth--register .pcpd-auth__lede--register,
.pcpd-auth--register .pcpd-auth__trial { display: block; }
.pcpd-auth--register .pcpd-auth__form--login,
.pcpd-auth--register .pcpd-auth__lede--login { display: none; }

/* Notices (logged out, link sent, link expired) — yellow-edged, matching wp-login's message. */
.pcpd-auth__notice {
	margin-bottom: 1.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid hsl(var(--border));
	border-left: 3px solid hsl(var(--yellow));
	border-radius: calc(var(--radius) - 0.25rem);
	background: hsl(var(--card));
	font-size: 0.9rem;
}
.pcpd-auth__notice p { margin: 0; }

/* "Keep me logged in" row. */
.pcpd-field--check label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.88rem;
	font-weight: 500;
	color: hsl(var(--foreground));
	margin: 0;
}
.pcpd-field--check input { width: 1rem; height: 1rem; accent-color: hsl(var(--yellow)); }

/* Email-first login: with JS running (form--jsinit), only one path shows at a time —
   the magic-link default, or the password section once toggled. Without JS everything
   stays visible and the form still posts. */
.pcpd-auth__form--jsinit .pcpd-auth__pw { display: none; }
.pcpd-auth__form--jsinit.pcpd-auth__form--pw .pcpd-auth__pw { display: block; }
.pcpd-auth__form--jsinit.pcpd-auth__form--pw .pcpd-auth__magicwrap { display: none; }
.pcpd-auth__magicwrap { margin-top: 0.35rem; }

/* Link-styled control (the password/magic toggle). */
.pcpd-auth__linkbtn {
	display: block;
	margin: 0 auto;
	background: none;
	border: 0;
	padding: 0.5rem 0.25rem; /* 40px hit area on a thumb, still reads as a link */
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	color: hsl(var(--foreground));
	text-decoration: underline;
	text-decoration-color: hsl(var(--yellow));
	text-decoration-thickness: 2px;
	cursor: pointer;
}
.pcpd-auth__linkbtn:hover { color: hsl(var(--muted-foreground)); }

/* Password or magic link — the two paths split by an "or" divider. */
.pcpd-auth__divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.1rem 0;
	color: hsl(var(--muted-foreground));
	font-size: 0.8rem;
}
.pcpd-auth__divider::before,
.pcpd-auth__divider::after { content: ""; flex: 1; height: 1px; background: hsl(var(--border)); }
.pcpd-auth__magichint {
	display: block;
	margin-top: 0.5rem;
	text-align: center;
	font-size: 0.78rem;
	color: hsl(var(--muted-foreground));
}
/* Magic link tapped with no email: the field itself lights up and explains, right where
   the cursor just landed — not a message elsewhere saying "above". */
.pcpd-field--error input {
	border-color: hsl(var(--alert));
	box-shadow: 0 0 0 3px hsl(var(--alert) / 0.18);
}
.pcpd-field--error input:focus {
	border-color: hsl(var(--alert));
	box-shadow: 0 0 0 3px hsl(var(--alert) / 0.3);
}
.pcpd-field__error {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: hsl(var(--alert));
}

/* Auth pages: the pagehead centres over the narrow card so title and form share one axis. */
body.pcpd-page--auth .pcpd-pagehead { text-align: center; }
body.pcpd-page--auth .pcpd-pagehead__lede { margin-left: auto; margin-right: auto; }

/* ── Licence gate on My CPD: the add-your-licence box and its notices ── */
.pcpd-licgate {
	margin: 1.5rem 0 0.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid hsl(var(--yellow));
	border-left-width: 4px;
	border-radius: var(--radius);
	background: hsl(var(--yellow) / 0.08);
	scroll-margin-top: 6rem;
}
.pcpd-licgate__title { margin: 0 0 0.4rem; font-size: 1.05rem; }
.pcpd-licgate__body { margin: 0 0 0.9rem; font-size: 0.9rem; color: hsl(var(--muted-foreground)); }
.pcpd-licgate__form { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pcpd-licgate__form input {
	flex: 1 1 12rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid hsl(var(--border));
	border-radius: 8px;
	font: inherit;
	font-size: 16px;
	text-transform: uppercase;
}
.pcpd-licgate__form input:focus { outline: none; border-color: hsl(var(--foreground)); box-shadow: 0 0 0 3px hsl(var(--yellow) / 0.35); }
.pcpd-licnotice {
	margin: 1.25rem 0 0;
	padding: 0.85rem 1rem;
	border-radius: 8px;
	border-left: 4px solid;
	font-size: 0.9rem;
}
.pcpd-licnotice--ok { background: hsl(var(--success-tint)); border-left-color: hsl(var(--success)); }
.pcpd-licnotice--err { background: hsl(var(--alert-tint)); border-left-color: hsl(var(--alert)); }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.pcpd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Sections */
/* Longhand on purpose: page.php stacks pcpd-container AND pcpd-section on one element,
   and the old `padding: 4.5rem 0` shorthand zeroed the container's 1.5rem side gutters —
   which is why article pages (signup, FAQ, policies) ran text hard against the screen
   edge on phones. Vertical only; the horizontal gutter stays the container's. */
.pcpd-section { padding-top: 4.5rem; padding-bottom: 4.5rem; border-top: 1px solid hsl(var(--border)); }
/* Elementor gives every column 10px of default padding, which shoved the full-bleed
   shortcode sections (hero, how-it-works, catalogue strip) 10px off the grid every
   other band sits on — most visible as a 34px vs 24px left gutter on phones. Zero it
   only where the column exists purely to carry one of our full-width sections. */
.elementor-column > .elementor-widget-wrap.elementor-element-populated:has(> .elementor-widget-shortcode .pcpd-section),
.elementor-column > .elementor-widget-wrap.elementor-element-populated:has(> .elementor-widget-shortcode .pcpd-hero) { padding: 0; }
/* Elementor's own boxed content width is 1140px, so the Elementor-built pages (Home,
   Pricing, FAQ shells) were 140px narrower than the theme's own templates (courses,
   dashboard, article pages) — the same content column measured differently depending
   on which page you were on. One width across the site. */
/* `body` prefix on purpose: Elementor prints the identical selector from its kit
   stylesheet, which loads after the theme's, so an equal-specificity rule loses. */
body .elementor-section.elementor-section-boxed > .elementor-container,
body .e-con > .e-con-inner { max-width: var(--container); }
.pcpd-section--alt { background: hsl(var(--surface-2)); }
.pcpd-section__title { font-size: clamp(1.5rem, 3vw, 1.75rem); }
/* Every section title ends on the brand point — the logo's dot, echoed as punctuation. */
.pcpd-section__title::after,
.pcpd-pagehead__title::after {
	content: "";
	display: inline-block;
	width: 0.28em;
	height: 0.28em;
	margin-left: 0.14em;
	border-radius: 50%;
	background: hsl(var(--yellow));
}
.pcpd-section__lede { color: hsl(var(--muted-foreground)); max-width: none; text-wrap: pretty; font-size: 0.95rem; }
.pcpd-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2rem;
}
.pcpd-link { font-weight: 600; text-decoration: none; }
.pcpd-link:hover { text-decoration: underline; }

/* Features */
.pcpd-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin-top: 2.5rem;
}
.pcpd-feature {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	padding: 1.5rem;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.pcpd-feature:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pcpd-feature:hover .pcpd-feature__num { background: hsl(var(--yellow)); color: hsl(var(--yellow-foreground)); }
.pcpd-feature__num {
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	background: hsl(var(--surface-2));
	font-weight: 600;
	font-size: 0.85rem;
	color: hsl(var(--foreground));
	margin-bottom: 1rem;
	transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.pcpd-feature h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.pcpd-feature p { color: hsl(var(--muted-foreground)); font-size: 0.875rem; line-height: 1.55; }

/* Course cards / grid */
.pcpd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 1.25rem;
}
.pcpd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.pcpd-card:hover { box-shadow: var(--shadow-lg); border-color: hsl(var(--border-strong)); transform: translateY(-3px); }
/* The brand "point" sweeps across the top edge on hover — a filled line = progress. */
.pcpd-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: hsl(var(--yellow));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--ease-out);
	z-index: 2;
}
.pcpd-card:hover::before { transform: scaleX(1); }
.pcpd-card__media {
	height: 128px;
	background-image:
		linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px),
		linear-gradient(135deg, hsl(220 9% 20%), hsl(220 9% 30%));
	background-size: 22px 22px, 22px 22px, cover;
	background-position: center;
	display: flex;
	align-items: flex-start;
	padding: 0.85rem;
	position: relative;
	overflow: hidden;
}
.pcpd-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 15%, hsl(var(--yellow) / 0.22), transparent 55%);
	opacity: 0.75;
	transition: opacity 0.3s var(--ease-out);
}
.pcpd-card:hover .pcpd-card__media::after { opacity: 1; }
.pcpd-card__media .pcpd-pill { position: relative; z-index: 1; }
/* NCC badge — the National Construction Code's own navy and blue (ncc.abcb.gov.au:
   #002957 text/header navy, #5477db link blue), so it reads as "the Code", not as ours. */
.pcpd-card__ncc {
	position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
	display: inline-block;
	font-family: var(--font-heading, inherit);
	font-size: 0.68rem; font-weight: 700; line-height: 1; letter-spacing: 0.14em;
	color: #fff; background: #002957;
	border-bottom: 3px solid #5477db;
	padding: 0.38rem 0.5rem 0.32rem;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 41, 87, 0.35);
}
.pcpd-catfilter__item--ncc { border-color: #002957; color: #002957; }
.pcpd-catfilter__item--ncc:hover, .pcpd-catfilter__item--ncc:focus-visible { border-color: #002957; color: #002957; }
.pcpd-catfilter__item--ncc.is-active { background: #002957; border-color: #002957; color: #fff; }
.pcpd-card__body { padding: 1.1rem; display: flex; flex-direction: column; flex: 1; }
.pcpd-card__title { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; line-height: 1.35; overflow-wrap: break-word; }
.pcpd-card__excerpt { color: hsl(var(--muted-foreground)); font-size: 0.85rem; }
.pcpd-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: hsl(var(--muted-foreground));
	margin-top: auto;
	padding-top: 0.85rem;
	border-top: 1px solid hsl(var(--border));
}
.pcpd-card__price { font-weight: 600; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }

/* Per-user state chip in the card footer — replaces the price once the price is no
   longer the useful fact (owned, in progress, free, or covered by points). */
.pcpd-card__state {
	flex: none;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
}
.pcpd-card__state--completed { background: hsl(var(--success) / 0.14); color: #0d6b45; }
.pcpd-card__state--enrolled { background: hsl(var(--yellow)); color: hsl(var(--yellow-foreground)); }
.pcpd-card__state--free { background: hsl(var(--foreground)); color: hsl(var(--background)); }
.pcpd-card__state--redeem { background: hsl(var(--yellow) / 0.16); color: hsl(var(--foreground)); border: 1px solid hsl(var(--yellow)); }

.pcpd-empty { color: hsl(var(--muted-foreground)); font-style: italic; }

/* Catalogue category filter */
.pcpd-catfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.75rem;
}
.pcpd-catfilter__item {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid hsl(var(--border));
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	color: hsl(var(--muted-foreground));
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.pcpd-catfilter__item:hover,
.pcpd-catfilter__item:focus-visible {
	border-color: hsl(var(--foreground));
	color: hsl(var(--foreground));
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}
.pcpd-catfilter__item.is-active {
	background: hsl(var(--foreground));
	border-color: hsl(var(--foreground));
	color: hsl(var(--background));
}

/* CTA band */
.pcpd-cta { background: hsl(var(--foreground)); color: hsl(var(--background)); padding: 3rem 0; }
.pcpd-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
}
.pcpd-cta h2 { margin: 0; font-size: 1.4rem; max-width: 32ch; }

/* Course single page */
.pcpd-course-hero { background: hsl(var(--card)); padding: 2.5rem 0 1.75rem; border-bottom: 1px solid hsl(var(--border)); }
.pcpd-course-hero__title { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
.pcpd-course-hero__excerpt { color: hsl(var(--muted-foreground)); font-size: 1rem; max-width: 60ch; }
.pcpd-course-content { padding: 2.25rem 1.5rem 4rem; max-width: 720px; }
.pcpd-course-content__cover { border-radius: var(--radius); overflow: hidden; margin-bottom: 2rem; }
.pcpd-course-content .pointcpd-course__outcome,
.pcpd-course-content .pointcpd-course__duration { color: hsl(var(--muted-foreground)); }
.pcpd-course-content .pointcpd-course__reviewed-by {
	font-size: 0.85rem;
	color: hsl(var(--muted-foreground));
	margin-bottom: 1.25rem;
}
.pcpd-course-content .pointcpd-course__reviewed-by strong { color: hsl(var(--foreground)); font-weight: 600; }
/* Course disclaimer: present and readable, but visually subordinate to the
   course itself -- it is a standing legal note, not a warning about this
   particular course. */
.pcpd-disclaimer {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid hsl(var(--border));
	color: hsl(var(--muted-foreground));
	font-size: 0.82rem;
	line-height: 1.6;
}
.pcpd-disclaimer__title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: hsl(var(--foreground));
	margin: 0 0 0.6rem;
}
.pcpd-disclaimer p { margin: 0 0 0.7rem; }
.pcpd-disclaimer p:last-child { margin-bottom: 0; }

/* Reviewer preview banner: deliberately loud. Someone reading a draft for
   sign-off must never be in doubt about whether what they are doing counts. */
.pcpd-course-content .pointcpd-course__preview-note {
	background: hsl(var(--yellow) / 0.16);
	border-left: 4px solid hsl(var(--yellow));
	padding: 0.75rem 1rem;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
	border-radius: 0 var(--radius) var(--radius) 0;
}
.pcpd-course-content .pointcpd-course__accreditation {
	list-style: none;
	padding: 0;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 1rem 0 1.5rem;
}
.pcpd-course-content .pointcpd-course__accreditation li {
	background: hsl(var(--surface-2));
	border: 1px solid hsl(var(--border));
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
	font-size: 0.8rem;
	font-weight: 500;
}
.pcpd-course-content .pointcpd-btn,
.pcpd-course-content .pointcpd-btn--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 1.25rem;
	border-radius: calc(var(--radius) - 0.25rem);
	font-weight: 600;
	font-size: 0.95rem;
	background: hsl(var(--foreground));
	color: hsl(var(--background));
	text-decoration: none;
	transition: opacity 0.12s ease;
}
.pcpd-course-content .pointcpd-btn:hover { opacity: 0.88; }

/* Generic article/page content */
/* width: 100% is load-bearing, not decoration. body is `display:flex; flex-direction:
   column` for the sticky footer; .pcpd-article is a direct flex child of it via
   page.php. align-self:stretch (the flex default) should size it to full width, but
   with the WooCommerce checkout block inside — the one page that actually exercises
   this path — that stretch resolution collapses to ~48px (padding only, zero content
   width) and the whole form renders one character per line. An explicit percentage
   width sidesteps whatever is breaking the flex stretch calculation; max-width still
   caps it at 720px everywhere else. Confirmed live on /checkout/ before this fix
   (James, Aug 2026: "checkout page is all over the place"). */
/* max-width was 720px, which made every page read as three-quarters of the 1280px
   container (James, Sep 2026: "all the articles are like 3/4 size"). Now the full
   container measure. .pcpd-container still supplies the horizontal inset, so this fills
   the space between the site margins and no further. width:100% stays for the checkout
   reason above. */
.pcpd-article { width: 100%; max-width: var(--container); }
.pcpd-article__date { color: hsl(var(--muted-foreground)); font-size: 0.9rem; }

/* Dashboard (My CPD) */
.pcpd-dashboard__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
	margin-bottom: 2.5rem;
}
.pcpd-dashboard__card {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	padding: 1.5rem;
	text-align: center;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.pcpd-dashboard__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pcpd-dashboard__card h3 { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; }
.pcpd-ring {
	--pcpd-ring-percent: 0;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	margin: 0 auto 0.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: conic-gradient(hsl(var(--yellow)) calc(var(--pcpd-ring-percent) * 1%), hsl(var(--border)) 0);
	position: relative;
	/* Soft halo + ambient lift so the ledger ring reads like the hero object it is. */
	box-shadow: 0 0 0 6px hsl(var(--yellow) / 0.08), 0 14px 34px -12px hsl(var(--yellow) / 0.45);
}
.pcpd-ring::before {
	content: "";
	position: absolute;
	inset: 11px;
	border-radius: 50%;
	background: hsl(var(--card));
}
.pcpd-ring__value, .pcpd-ring__of { position: relative; z-index: 1; }
.pcpd-ring__value { font-size: 1.65rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pcpd-ring__of { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.pcpd-dashboard__big { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 2.1rem; font-weight: 700; margin: 0.4rem 0; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ── Standing panel: the dashboard's hero. Ink slab, oversized ring, stat row.
      Replaces three equal white boxes that gave every number the same weight. ── */
.pcpd-standing {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	border-radius: var(--radius);
	/* Graphite, not black: a flat near-black slab this size reads as a hole in the page,
	   especially under the ink header. The lift at the top keeps it a surface. */
	background:
		radial-gradient(120% 140% at 88% 8%, hsl(var(--yellow) / 0.13), transparent 55%),
		linear-gradient(160deg, hsl(220 9% 20%), hsl(var(--foreground)) 70%);
	color: hsl(var(--background));
	box-shadow: var(--shadow-md);
}
.pcpd-standing--empty { grid-template-columns: 1fr; }
.pcpd-standing__ring { display: flex; justify-content: center; flex: none; }
/* flex: none is load-bearing — the global min-width:0 reset lets a flex item shrink past
   its fixed width, which collapsed the ring (and its grid column) to 0px. */
.pcpd-ring--lg {
	flex: none;
	width: 168px;
	height: 168px;
	/* Ink-on-ink track so the yellow arc is the only thing that reads as progress. */
	background: conic-gradient(hsl(var(--yellow)) calc(var(--pcpd-ring-percent) * 1%), hsl(var(--background) / 0.16) 0);
	filter: drop-shadow(0 8px 24px hsl(var(--yellow) / 0.28));
}
.pcpd-ring--lg::before { inset: 13px; background: hsl(var(--foreground)); }
.pcpd-ring--lg .pcpd-ring__value { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 3rem; font-weight: 700; color: hsl(var(--background)); line-height: 1; }
.pcpd-ring--lg .pcpd-ring__of { color: hsl(var(--background) / 0.6); margin-top: 0.25rem; }

.pcpd-standing__eyebrow {
	margin: 0 0 0.5rem;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--yellow));
}
.pcpd-standing__head {
	margin: 0;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: clamp(1.6rem, 3.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: hsl(var(--background));
}
.pcpd-standing__by { display: block; color: hsl(var(--background) / 0.62); font-weight: 500; }
.pcpd-standing__fine { margin: 0.75rem 0 0; font-size: 0.85rem; color: hsl(var(--background) / 0.6); }
/* Staff added by an employer see who manages their CPD (James, 14 Sep 2026). */
.pcpd-dashboard__employer {
	margin: 0 0 1rem; padding: 0.8rem 1rem;
	background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-left: 4px solid #002957;
	border-radius: var(--radius); font-size: 0.92rem; color: hsl(var(--muted-foreground));
}
.pcpd-dashboard__employer strong { color: hsl(var(--foreground)); }
/* The add-staff animation (inc/employer-demo.php) on /for-employers/ and Home. */
.pcpd-empdemo__host { display: block; max-width: 640px; margin: 0 auto; }
.pcpd-empdemo__cta { text-align: center; margin: 1.75rem 0 0; }
.pcpd-eyebrow { margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.pcpd-standing__fine a { color: hsl(var(--yellow)); text-decoration-color: hsl(var(--yellow) / 0.5); }

/* Shortfall upsell inside the ink standing panel: honest maths, one yellow buy button. */
.pcpd-standing__upsell {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.1rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid hsl(var(--background) / 0.18);
	border-left: 3px solid hsl(var(--yellow));
	border-radius: 10px;
	background: hsl(var(--background) / 0.05);
}
.pcpd-standing__upsell-line {
	flex: 1 1 16rem;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: hsl(var(--background) / 0.85);
}
.pcpd-standing__upsell-line strong { color: hsl(var(--yellow)); }
.pcpd-standing__upsell-line .woocommerce-Price-amount { color: hsl(var(--background)); }
.pcpd-standing__buy {
	flex: none;
	background: hsl(var(--yellow));
	color: hsl(var(--yellow-foreground));
	border: 0;
}
.pcpd-standing__buy:hover { background: hsl(var(--yellow) / 0.85); color: hsl(var(--yellow-foreground)); }

/* Plain link beside the buy button, out to the full pricing table. */
.pcpd-standing__all {
	font-size: 0.88rem;
	color: hsl(var(--background) / 0.75);
	text-decoration: underline;
	text-decoration-color: hsl(var(--yellow) / 0.6);
	text-decoration-thickness: 2px;
}
.pcpd-standing__all:hover { color: hsl(var(--background)); }

.pcpd-standing__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid hsl(var(--background) / 0.14);
}
.pcpd-standing__k { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--background) / 0.55); margin-bottom: 0.2rem; }
.pcpd-standing__v {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: hsl(var(--background));
}
.pcpd-standing__unit { font-size: 0.85rem; font-weight: 500; color: hsl(var(--background) / 0.55); margin-left: 0.2rem; }

.pcpd-standing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
/* The credits widget carries its own balance line — redundant here, the stat row has it. */
.pcpd-standing__actions .pcpd-credits__balance { display: none; }
.pcpd-standing__actions .pcpd-credits { display: contents; }
/* On the dark slab the ink "primary" button was ink-on-ink and vanished. Inside the
   standing panel the primary action goes yellow and the secondary is a clear outline. */
.pcpd-standing__actions .pcpd-btn--primary {
	background: hsl(var(--yellow));
	color: hsl(var(--yellow-foreground));
	border: 1px solid hsl(var(--yellow));
}
.pcpd-standing__actions .pcpd-btn--primary:hover { box-shadow: var(--glow-yellow); opacity: 1; }
.pcpd-btn--ghost-light {
	background: transparent;
	color: hsl(var(--background));
	border: 1.5px solid hsl(var(--background) / 0.5);
}
.pcpd-btn--ghost-light:hover { background: hsl(var(--background) / 0.12); border-color: hsl(var(--background)); }

@media (max-width: 720px) {
	.pcpd-standing { grid-template-columns: 1fr; text-align: left; }
	.pcpd-standing__ring { justify-content: flex-start; }
	.pcpd-ring--lg { width: 132px; height: 132px; }
	.pcpd-ring--lg .pcpd-ring__value { font-size: 2.4rem; }
	.pcpd-standing__stats { gap: 1.25rem 2rem; }
}

/* ── Course rows: status you can read at a glance + a real affordance to resume ── */
.pcpd-courserow {
	position: relative;
	gap: 0.9rem !important;
	padding-left: 0.9rem !important;
	transition: transform 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out), border-color 0.16s var(--ease-out);
}
.pcpd-courserow:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: hsl(var(--yellow)); }
.pcpd-courserow__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 0.85rem;
	font-weight: 700;
	color: hsl(var(--foreground));
	background: hsl(var(--surface-2));
	border: 1.5px solid hsl(var(--border));
}
.pcpd-courserow.is-done .pcpd-courserow__mark { background: hsl(var(--yellow)); border-color: hsl(var(--yellow)); }
/* "Start here — on us": the free-course rows lead with a yellow dot and a real button. */
.pcpd-courserow--free { border-color: hsl(var(--yellow) / 0.55); }
.pcpd-courserow__mark--free { background: hsl(var(--yellow) / 0.18); border-color: hsl(var(--yellow)); }
.pcpd-courserow__claim { white-space: nowrap; }
.pcpd-courserow__title { font-weight: 600; font-size: 1rem; }
.pcpd-courserow__go {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
	font-size: 0.88rem;
	white-space: nowrap;
	text-decoration: none;
	color: hsl(var(--foreground));
	transition: gap 0.16s var(--ease-out);
}
.pcpd-courserow:hover .pcpd-courserow__go { gap: 0.6rem; }
.pcpd-pill--points { background: hsl(var(--yellow) / 0.18); color: hsl(var(--foreground)); font-weight: 600; }
.pcpd-dashboard__note { color: hsl(var(--muted-foreground)); font-size: 0.875rem; }
.pcpd-dashboard__section-title { margin-top: 2rem; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: hsl(var(--muted-foreground)); }
.pcpd-dashboard__section-note { text-transform: none; letter-spacing: 0; font-weight: 500; color: hsl(var(--muted-foreground) / 0.85); }
.pcpd-dashboard__section-note::before { content: "\2014\00a0"; }
.pcpd-courserow__serial { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78em; letter-spacing: 0.02em; }

/* ── Earlier CPD years: record-keeping, not progress. Collapsed, muted, and never
      styled like the rows that count toward the current renewal. ── */
.pcpd-archive { margin-top: 2.25rem; border-top: 1px solid hsl(var(--border)); }
.pcpd-archive__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	padding: 1rem 0 0.25rem;
	cursor: pointer;
	list-style: none;
}
.pcpd-archive__summary::-webkit-details-marker { display: none; }
.pcpd-archive__summary .pcpd-dashboard__section-title { margin-top: 0; }
.pcpd-archive__summary::after {
	content: "\25BE";
	margin-left: auto;
	font-size: 0.8rem;
	color: hsl(var(--muted-foreground));
	transition: transform 0.18s var(--ease-out);
}
.pcpd-archive[open] .pcpd-archive__summary::after { transform: rotate(180deg); }
.pcpd-archive__count { font-size: 0.85rem; color: hsl(var(--muted-foreground)); }
.pcpd-courselist--archive { margin-top: 0.5rem; }
.pcpd-courselist--archive .pcpd-courserow {
	background: hsl(var(--surface-2));
	border-style: dashed;
	box-shadow: none;
}
.pcpd-courselist--archive .pcpd-courserow:hover { transform: none; box-shadow: none; border-color: hsl(var(--border)); }
.pcpd-courserow--archived .pcpd-courserow__title { font-weight: 500; color: hsl(var(--muted-foreground)); }
/* Grey tick, not yellow: yellow is reserved for points that still count. */
.pcpd-courserow--archived.is-done .pcpd-courserow__mark { background: hsl(var(--border)); border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.pcpd-courserow--archived .pcpd-pill--points { background: hsl(var(--surface-2)); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.pcpd-dashboard__list { list-style: none; padding: 0; margin: 0; }
.pcpd-dashboard__list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1rem;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: calc(var(--radius) - 0.25rem);
	margin-bottom: 0.5rem;
}
.pcpd-dashboard__list a { font-weight: 500; text-decoration: none; }
.pcpd-dashboard__status {
	font-size: 0.75rem;
	font-weight: 500;
	color: hsl(var(--muted-foreground));
	background: hsl(var(--surface-2));
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	white-space: nowrap;
}

/* Two-part rows: text stack on the left, badges/actions pinned right. min-width:0 lets a
   long course title truncate instead of shoving the badges into each other. */
.pcpd-row__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.pcpd-row__main > a,
.pcpd-row__main { overflow-wrap: anywhere; }
.pcpd-row__sub {
	font-size: 0.76rem;
	color: hsl(var(--muted-foreground));
	font-variant-numeric: tabular-nums;
}
.pcpd-row__aside {
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
}
.pcpd-btn--sm { height: 32px; min-height: 32px; padding: 0 0.8rem; font-size: 0.8rem; }

/* Branded scene illustrations */
.pcpd-illustration { display: block; }
.pcpd-illustration--card {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0.75rem 1.5rem 0.25rem;
	object-fit: contain;
}
.pcpd-course-hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
}
.pcpd-course-hero__art { flex: 0 0 300px; max-width: 300px; }
.pcpd-illustration--hero { width: 100%; height: auto; opacity: 0.95; }
/* Both dark surfaces (card media, course hero): flip ink line-work to off-white. */
.pcpd-card__media .pcpd-illustration [stroke="#14161B"],
.pcpd-course-hero__art .pcpd-illustration [stroke="#14161B"] { stroke: #F7F7F5; }
.pcpd-card__media .pcpd-illustration [stroke="#5B6470"],
.pcpd-course-hero__art .pcpd-illustration [stroke="#5B6470"] { stroke: #9AA3AF; }
.pcpd-card__media .pcpd-illustration [fill="#14161B"],
.pcpd-course-hero__art .pcpd-illustration [fill="#14161B"] { fill: #F7F7F5; }
.pcpd-card__media .pcpd-illustration [fill="#5B6470"],
.pcpd-course-hero__art .pcpd-illustration [fill="#5B6470"] { fill: #9AA3AF; }
@media (max-width: 760px) {
	.pcpd-course-hero__art { display: none; }
}

/* Manager dashboard (company seats + roster) */
.pcpd-manager__table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0 2rem;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: calc(var(--radius) - 0.25rem);
	overflow: hidden;
}
.pcpd-manager__table th,
.pcpd-manager__table td {
	text-align: left;
	padding: 0.65rem 1rem;
	border-bottom: 1px solid hsl(var(--border));
	font-size: 0.9rem;
}
.pcpd-manager__table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: hsl(var(--muted-foreground)); }
.pcpd-manager__table tr:last-child td { border-bottom: none; }
.pcpd-manager__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: calc(var(--radius) - 0.25rem);
	padding: 1rem;
	margin-bottom: 2rem;
}
.pcpd-manager__form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.pcpd-manager__form input,
.pcpd-manager__form select {
	padding: 0.5rem 0.65rem;
	border: 1px solid hsl(var(--border));
	border-radius: calc(var(--radius) - 0.25rem);
	font: inherit;
	min-width: 220px;
}
.pcpd-btn--small { height: 32px; padding: 0 0.75rem; font-size: 0.8rem; }
.pcpd-notice { padding: 0.65rem 1rem; border-radius: calc(var(--radius) - 0.25rem); font-size: 0.9rem; margin-bottom: 1rem; }
.pcpd-notice--ok { background: hsl(var(--success-tint)); color: #0d6b45; }
.pcpd-notice--err { background: hsl(var(--alert-tint)); color: hsl(var(--alert)); }

/* How it works -- CSS-animated step tracker (no video dependency) */
.pcpd-howitworks { position: relative; overflow: hidden; }
.pcpd-howitworks__track {
	position: relative;
	height: 2px;
	background: hsl(var(--border));
	margin: 2.5rem 0 -1.9rem;
	display: none;
}
.pcpd-howitworks__track-fill {
	position: absolute;
	inset: 0;
	width: 0%;
	background: hsl(var(--yellow));
	transform-origin: left;
}
.pcpd-howitworks.is-inview .pcpd-howitworks__track-fill {
	width: 100%;
	transition: width 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
@media (min-width: 900px) {
	.pcpd-howitworks__track { display: block; }
}
.pcpd-howitworks__list {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	position: relative;
}
.pcpd-howitworks__step {
	position: relative;
	padding-top: 0.25rem;
	opacity: 0;
	transform: translateY(16px) scale(0.97);
}
.pcpd-howitworks.is-inview .pcpd-howitworks__step {
	opacity: 1;
	transform: translateY(0) scale(1);
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: var(--pcpd-step-delay, 0s);
}
.pcpd-howitworks__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: hsl(var(--surface-2));
	color: hsl(var(--foreground));
	margin-bottom: 1rem;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.pcpd-howitworks.is-inview .pcpd-howitworks__icon {
	animation: pcpd-icon-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
	animation-delay: calc(var(--pcpd-step-delay, 0s) + 0.15s);
}
.pcpd-howitworks__step:hover .pcpd-howitworks__icon {
	background: hsl(var(--yellow-tint));
	transform: scale(1.08);
}
.pcpd-howitworks__num {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: hsl(var(--yellow));
	color: hsl(var(--yellow-foreground));
	font-size: 0.65rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Inter', sans-serif;
}
.pcpd-howitworks__step h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.pcpd-howitworks__step p { color: hsl(var(--muted-foreground)); font-size: 0.875rem; line-height: 1.55; margin: 0; }
@keyframes pcpd-icon-pop {
	0% { transform: scale(0.3); }
	65% { transform: scale(1.12); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.pcpd-howitworks__step,
	.pcpd-howitworks__icon,
	.pcpd-howitworks__track-fill {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
		width: 100% !important;
	}
}

/* CPD ledger teaser */
.pcpd-ledger__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 2.5rem;
	align-items: center;
}
.pcpd-ledger__card {
	max-width: 280px;
	margin: 0 auto;
}
@media (max-width: 720px) {
	.pcpd-ledger__inner { grid-template-columns: 1fr; }
}

/* Scroll-triggered reveal -- shared by the ledger, certificate, and course
   teaser sections (BRIEF.md Section 9 discover-flow visuals). Content is
   fully visible with no JS; [data-pcpd-animate] + site.js only add
   .is-inview once the section scrolls into view. */
.pcpd-ledger__copy,
.pcpd-certshow__copy {
	opacity: 0;
	transform: translateX(-18px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.pcpd-ledger__card,
.pcpd-certshow__visual {
	opacity: 0;
	transform: translateX(18px) scale(0.96);
	transition: opacity 0.6s ease 0.15s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}
.pcpd-ledger.is-inview .pcpd-ledger__copy,
.pcpd-certshow.is-inview .pcpd-certshow__copy,
.pcpd-ledger.is-inview .pcpd-ledger__card,
.pcpd-certshow.is-inview .pcpd-certshow__visual {
	opacity: 1;
	transform: none;
}
.pcpd-ledger.is-inview .pcpd-ring {
	animation: pcpd-ring-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s backwards;
}
@keyframes pcpd-ring-pop {
	0% { transform: scale(0.7); }
	100% { transform: scale(1); }
}

.pcpd-courses-teaser .pcpd-card {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.pcpd-courses-teaser.is-inview .pcpd-card {
	opacity: 1;
	transform: translateY(0);
}
.pcpd-courses-teaser .pcpd-card:nth-child(1) { transition-delay: 0s; }
.pcpd-courses-teaser .pcpd-card:nth-child(2) { transition-delay: 0.1s; }
.pcpd-courses-teaser .pcpd-card:nth-child(3) { transition-delay: 0.2s; }
.pcpd-courses-teaser .pcpd-card:nth-child(4) { transition-delay: 0.3s; }
.pcpd-courses-teaser .pcpd-card:nth-child(5) { transition-delay: 0.4s; }
.pcpd-courses-teaser .pcpd-card:nth-child(6) { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
	.pcpd-ledger__copy,
	.pcpd-certshow__copy,
	.pcpd-ledger__card,
	.pcpd-certshow__visual,
	.pcpd-courses-teaser .pcpd-card,
	.pcpd-ledger .pcpd-ring {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}

/* Certificate showcase */
.pcpd-certshow__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 2.5rem;
	align-items: center;
}
.pcpd-certshow__visual {
	max-width: 320px;
	margin: 0 auto;
	filter: drop-shadow(0 12px 24px hsl(var(--shadow-color) / 0.12));
}
@media (max-width: 720px) {
	.pcpd-certshow__inner { grid-template-columns: 1fr; }
}

/* Target decor — the certificate's concentric-ring motif as a background
   flourish. Each placement sets ring intensity via color; the yellow
   bullseye ships in the SVG itself. */
.pcpd-target-decor {
	position: absolute;
	pointer-events: none;
}
.pcpd-target-decor--footer {
	bottom: -110px;
	right: -110px;
	color: hsl(var(--background) / 0.08);
}
/* Keep real content painting above the decor. */
.pcpd-footer__inner,
.pcpd-section--target .pcpd-container { position: relative; }
.pcpd-section--target { position: relative; overflow: hidden; }
.pcpd-target-decor--page {
	top: -120px;
	right: -100px;
	color: hsl(var(--foreground) / 0.07);
}
@media (max-width: 720px) {
	.pcpd-target-decor { display: none; }
}

/* Footer — deep charcoal gradient under a hi-vis hairline, mirroring the login page's
   yellow top edge. */
.pcpd-footer {
	background: linear-gradient(180deg, hsl(224 12% 9%), hsl(224 16% 5%));
	color: hsl(var(--background) / 0.8);
	padding: 3rem 0 2rem;
	/* auto, not a fixed 2rem: the old margin painted a white band above the footer on
	   every page, and on short pages the footer still floated with white beneath it.
	   With the body as a flex column this both closes the band and pins the footer to
	   the bottom of the viewport when content does not fill it. */
	margin-top: auto;
	position: relative;
	overflow: hidden;
	border-top: 3px solid hsl(var(--yellow));
}
.pcpd-footer__inner {
	display: grid;
	grid-template-columns: 1.2fr 0.7fr 0.8fr 0.8fr;
	gap: 2rem 2.5rem;
	align-items: start;
}
.pcpd-footer__brand { grid-column: 1; }
.pcpd-logo--footer { color: hsl(var(--background)); }
.pcpd-logo--footer span { color: hsl(var(--yellow)); }
.pcpd-footer__tagline { color: hsl(var(--background) / 0.65); max-width: 32ch; font-size: 0.9rem; }
.pcpd-footer__heading {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: hsl(var(--background) / 0.5);
	margin: 0 0 0.85rem;
}
.pcpd-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; }
.pcpd-footer__list a { text-decoration: none; color: inherit; }
.pcpd-footer__list a:hover { color: hsl(var(--yellow)); }
.pcpd-footer__legal {
	grid-column: 1 / -1;
	font-size: 0.78rem;
	line-height: 1.6;
	color: hsl(var(--background) / 0.5);
	margin: 1rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid hsl(var(--background) / 0.12);
	max-width: none; /* full width on desktop (James, Sep 2026) */
}

@media (max-width: 900px) {
	.pcpd-footer__inner { grid-template-columns: repeat(3, 1fr); }
	.pcpd-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.pcpd-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
	.pcpd-footer__inner { grid-template-columns: 1fr; }
	.pcpd-footer__brand { grid-column: 1; }
}

/* Mobile nav -- borderless hamburger opening a clean full-screen menu. */
.pcpd-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: transparent;
	border: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	z-index: 60; /* stays tappable above the full-screen menu */
}
.pcpd-nav-toggle__bar {
	display: block;
	height: 2px;
	width: 100%;
	background: hsl(var(--background)); /* light bars on the ink header */
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.pcpd-nav-toggle[aria-expanded="true"] .pcpd-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pcpd-nav-toggle[aria-expanded="true"] .pcpd-nav-toggle__bar:nth-child(2) { opacity: 0; }
.pcpd-nav-toggle[aria-expanded="true"] .pcpd-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile-only flat links (Courses / How CPD works) replace the megamenu on phones. */
.pcpd-nav__mobile-only { display: none; }
.pcpd-nav__account { display: none; }

@media (max-width: 720px) {
	.pcpd-nav-toggle { display: inline-flex; order: 3; }
	/* The megamenu is a desktop pattern — on a phone it's gone entirely, replaced by the
	   flat links and a clean full-screen menu. */
	.pcpd-megamenu__item { display: none; }
	.pcpd-nav__mobile-only { display: block; }
	/* Account lives inside the menu; only the call button stays in the bar (11 Oct 2026). */
	.pcpd-header__actions > :not(.pcpd-header__phone) { display: none; }
	.pcpd-header__actions { margin-left: auto; }

	.pcpd-nav {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 50;
		background: hsl(var(--foreground));
		padding: 5rem 1.5rem 2rem;
		overflow-y: auto;
	}
	.pcpd-nav.is-open { display: flex; flex-direction: column; }
	body.pcpd-nav-open { overflow: hidden; }
	.pcpd-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		font-size: 1.0625rem; /* 17px: standard mobile menu size (was 24px, 11 Oct 2026) */
		color: hsl(var(--background) / 0.85);
	}
	.pcpd-nav__list > li { border-bottom: 1px solid hsl(var(--background) / 0.1); }
	.pcpd-nav__list > li:last-child { border-bottom: none; }
	.pcpd-nav__list > li > a {
		display: block;
		width: 100%;
		padding: 0.85rem 0; /* rows stay 44px+ to tap */
		font-family: 'Space Grotesk', 'Inter', sans-serif;
		font-weight: 500;
		letter-spacing: 0.01em;
	}
	.pcpd-nav__list a:hover { color: hsl(var(--yellow)); }
	.pcpd-nav__account {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
		margin-top: 1.5rem;
	}
	.pcpd-nav__account .pcpd-btn { width: 100%; min-height: 48px; border-radius: 999px; font-size: 0.95rem; font-weight: 700; }
	.pcpd-nav__account .pcpd-btn--primary { background: hsl(var(--yellow)); color: hsl(var(--yellow-foreground)); }
	.pcpd-nav__account .pcpd-btn--secondary { background: transparent; border-color: hsl(var(--background) / 0.3); color: hsl(var(--background)); }

	/* :not(--split) matters — the split hero is full-bleed and ordered yellow-panel-first
	   on phones, so a top padding here painted a white band between the header and the
	   banner (and another under the copy). The legacy card hero still wants the padding. */
	.pcpd-hero:not(.pcpd-hero--split) { padding: 3rem 0 2.5rem; }
	.pcpd-section { padding-top: 3rem; padding-bottom: 3rem; } /* longhand — see .pcpd-section above */
	.pcpd-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* Elementor's kit palette colours headings its own blue, which is not in our palette at
   all (James: "no blue text — black or charcoal/grey only"). Headings authored in
   Elementor inherit the brand ink instead; an explicit per-widget colour still wins. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor h1,
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4 {
	color: hsl(var(--foreground));
}

/* Content links use theme colours only — never browser/Elementor-kit blue. Ink text with a
   yellow underline reads as a link without leaving the palette. Buttons are exempt. */
.pcpd-article a:not(.pcpd-btn),
.pcpd-course-content a:not(.pcpd-btn):not(.pointcpd-btn):not(.pcpd-action),
.elementor-widget-container a:not(.elementor-button):not(.pcpd-btn) {
	color: hsl(var(--foreground));
	text-decoration: underline;
	text-decoration-color: hsl(var(--yellow));
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}
.pcpd-article a:not(.pcpd-btn):hover,
.pcpd-course-content a:not(.pcpd-btn):not(.pointcpd-btn):not(.pcpd-action):hover,
.elementor-widget-container a:not(.elementor-button):not(.pcpd-btn):hover {
	text-decoration-thickness: 3px;
}
/* App surfaces are UI, not prose: the dashboard's rows and standing panel opt out of the
   content-link underline (it out-specifies their own styling otherwise). */
.pcpd-article .pcpd-dashboard__list a,
.pcpd-article .pcpd-courserow__go,
.pcpd-article .pcpd-standing__actions a {
	text-decoration: none;
}
.pcpd-article .pcpd-dashboard__list a:hover,
.pcpd-article .pcpd-courserow__title:hover { color: hsl(var(--foreground)); text-decoration: underline; text-decoration-color: hsl(var(--yellow)); text-decoration-thickness: 2px; }
/* The auth tabs are a control, not prose: the content-link rule above was painting the
   active tab's label ink-on-ink (invisible) with an underline poking through. */
.pcpd-article a.pcpd-auth__tab { text-decoration: none; }
.pcpd-article a.pcpd-auth__tab[aria-selected="true"] { color: hsl(var(--background)); }

/* ── FAQ ([pointcpd_faq]) ─────────────────────────────────────────────────── */
/* The article wrapper is capped at a prose measure; the FAQ needs the full container
   for its rail-plus-answers split (body class set in inc/faq.php). */
body.pcpd-page--wide .pcpd-article { max-width: var(--container); }
.pcpd-faq { max-width: 62rem; margin: 0 auto; }

/* Search + expand-all sit above the split, full width. */
.pcpd-faq__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: 0 0 0.75rem;
}
.pcpd-faq__search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 18rem;
}
.pcpd-faq__search-icon {
	position: absolute;
	left: 0.9rem;
	color: hsl(var(--muted-foreground));
	pointer-events: none;
}
.pcpd-faq__search input {
	width: 100%;
	padding: 0.8rem 1rem 0.8rem 2.75rem;
	font: inherit;
	color: hsl(var(--foreground));
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: 999px;
	transition: border-color 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out);
}
.pcpd-faq__search input:focus {
	outline: none;
	border-color: hsl(var(--yellow));
	box-shadow: 0 0 0 3px hsl(var(--yellow) / 0.25);
}
.pcpd-faq__expand {
	padding: 0.8rem 1.1rem;
	font: inherit;
	font-weight: 600;
	font-size: 0.9rem;
	color: hsl(var(--foreground));
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.14s var(--ease-out), background-color 0.14s var(--ease-out);
}
.pcpd-faq__expand:hover { border-color: hsl(var(--yellow)); background: hsl(var(--yellow) / 0.1); }
.pcpd-faq__count { margin: 0 0 1.5rem; font-size: 0.85rem; color: hsl(var(--muted-foreground)); }
.pcpd-faq__empty { margin: 2rem 0; color: hsl(var(--muted-foreground)); }

/* Rail beside the answers on wide screens; stacked chips on narrow ones. */
.pcpd-faq__layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; }
.pcpd-faq__rail { position: sticky; top: 6rem; }
.pcpd-faq__rail-label {
	margin: 0 0 0.6rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
}
.pcpd-faq__rail ol { list-style: none; margin: 0; padding: 0; }
.pcpd-faq__rail li { margin-bottom: 0.15rem; }
.pcpd-faq__rail a {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	color: hsl(var(--foreground));
	border-left: 3px solid transparent;
	transition: background-color 0.14s var(--ease-out), border-color 0.14s var(--ease-out);
}
.pcpd-faq__rail a:hover { background: hsl(var(--surface-2)); border-left-color: hsl(var(--yellow)); }
.pcpd-faq__rail-n { margin-left: auto; font-size: 0.75rem; font-weight: 500; color: hsl(var(--muted-foreground)); }

@media (max-width: 900px) {
	.pcpd-faq__layout { grid-template-columns: 1fr; gap: 1.5rem; }
	.pcpd-faq__rail { position: static; }
	.pcpd-faq__rail ol { display: flex; flex-wrap: wrap; gap: 0.4rem; }
	.pcpd-faq__rail li { margin: 0; }
	.pcpd-faq__rail a {
		border-left: 0;
		border: 1px solid hsl(var(--border));
		border-radius: 999px;
		font-size: 0.82rem;
		padding: 0.35rem 0.8rem;
	}
	.pcpd-faq__rail-n { display: none; }
}

.pcpd-faq__group { margin: 0 0 2.75rem; scroll-margin-top: 6rem; }
.pcpd-faq__group-title { font-size: clamp(1.35rem, 2.5vw, 1.75rem); margin: 0 0 0.4rem; }
.pcpd-faq__group-intro { margin: 0 0 1.25rem; color: hsl(var(--muted-foreground)); }

.pcpd-faq__item {
	border-bottom: 1px solid hsl(var(--border));
}
.pcpd-faq__item:first-of-type { border-top: 1px solid hsl(var(--border)); }
.pcpd-faq__q {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem 0;
	cursor: pointer;
	list-style: none;
}
.pcpd-faq__q::-webkit-details-marker { display: none; }
.pcpd-faq__q h3 {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.45;
	flex: 1;
}
/* Plus/minus in the brand dot rather than a generic chevron. */
.pcpd-faq__q::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-top: 0.1rem;
	border-radius: 50%;
	background: hsl(var(--yellow) / 0.16);
	color: hsl(var(--foreground));
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.14s var(--ease-out);
}
.pcpd-faq__item[open] .pcpd-faq__q::after { content: "\2212"; background: hsl(var(--yellow)); }
.pcpd-faq__q:hover::after { background: hsl(var(--yellow) / 0.4); }
.pcpd-faq__a { padding: 0 0 1.25rem; color: hsl(var(--muted-foreground)); }
.pcpd-faq__a > *:first-child { margin-top: 0; }
.pcpd-faq__a strong { color: hsl(var(--foreground)); }
.pcpd-faq__a ul, .pcpd-faq__a ol { padding-left: 1.25rem; }
.pcpd-faq__a li { margin-bottom: 0.5rem; }

/* Per-answer permalink: quiet until the answer is hovered or keyboard-focused. */
.pcpd-faq__permalink {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
	color: hsl(var(--muted-foreground));
	opacity: 0;
	transition: opacity 0.14s var(--ease-out), color 0.14s var(--ease-out);
}
.pcpd-faq__permalink::before { content: "\1F517\00a0"; }
.pcpd-faq__item[open]:hover .pcpd-faq__permalink,
.pcpd-faq__permalink:focus-visible { opacity: 1; }
.pcpd-faq__permalink:hover { color: hsl(var(--foreground)); }
/* Touch has no hover — never hide the link behind an interaction that cannot happen. */
@media (hover: none) {
	.pcpd-faq__permalink { opacity: 1; }
}
/* Landing on a deep link should make it obvious which answer was linked. */
.pcpd-faq__item:target { background: hsl(var(--yellow) / 0.08); border-radius: 8px; }
.pcpd-faq__item:target .pcpd-faq__q { padding-left: 0.75rem; }
.pcpd-faq__item:target .pcpd-faq__a { padding-left: 0.75rem; }

/* Ask-us panel at the foot of the answers. */
.pcpd-faq__cta {
	margin: 2.5rem 0 0;
	padding: 1.75rem;
	border-radius: var(--radius);
	background:
		radial-gradient(90% 140% at 92% 0%, hsl(var(--yellow) / 0.18), transparent 60%),
		hsl(var(--surface-2));
	border: 1px solid hsl(var(--border));
}
.pcpd-faq__cta h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.pcpd-faq__cta p { margin: 0 0 1rem; color: hsl(var(--muted-foreground)); }
.pcpd-faq__cta-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.pcpd-faq__foot {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid hsl(var(--border));
	font-size: 0.85rem;
	color: hsl(var(--muted-foreground));
}

/* ── About ([pointcpd_about]) ─────────────────────────────────────────────── */
.pcpd-about { max-width: 44rem; margin: 0 auto; }
.pcpd-about__lede {
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	line-height: 1.55;
	color: hsl(var(--foreground));
	margin: 0 0 2rem;
}
.pcpd-about h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 2.25rem 0 0.75rem; }
.pcpd-about__list { padding-left: 0; list-style: none; }
.pcpd-about__list li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.85rem;
}
/* The "point earned" dot, reused as a list marker. */
.pcpd-about__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: hsl(var(--yellow));
}
.pcpd-about__legal {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid hsl(var(--border));
	font-size: 0.85rem;
	color: hsl(var(--muted-foreground));
}

/* DB-authored page heroes (icon/photo block at the top of trust pages) */
.pcpd-page-hero { margin: 0 0 1.75rem; }
.pcpd-page-hero img { border-radius: var(--radius); }

/* Content-page images (classic WP alignment classes) */
.pcpd-article img { border-radius: calc(var(--radius) - 0.25rem); margin: 1.25rem 0; }
.pcpd-article .alignleft { float: left; margin: 0.35rem 1.25rem 0.85rem 0; }
.pcpd-article .alignright { float: right; margin: 0.35rem 0 0.85rem 1.25rem; }
.pcpd-article .aligncenter { margin-left: auto; margin-right: auto; }
.pcpd-article .wp-caption { max-width: 100%; }
.pcpd-article .wp-caption-text { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin-top: 0.35rem; }

@media (max-width: 480px) {
	.pcpd-hero__actions .pcpd-btn { width: 100%; }
	.pcpd-dashboard__list li { flex-wrap: wrap; }
}

/* Elementor-authored pages (home, about, pricing, FAQ) use Elementor's own
   button widget -- brand it to match .pcpd-btn--primary instead of the
   Elementor kit's default grey. */
.elementor-widget-button .elementor-button,
a.elementor-button {
	background-color: hsl(var(--foreground)) !important;
	border-color: hsl(var(--foreground)) !important;
	color: hsl(var(--background)) !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	border-radius: calc(var(--radius) - 0.25rem) !important;
	transition: opacity 0.12s ease, transform 0.12s ease !important;
}
.elementor-widget-button .elementor-button:hover,
a.elementor-button:hover {
	opacity: 0.88;
	transform: translateY(-1px);
	color: hsl(var(--background)) !important;
}
.elementor-widget-button .elementor-button:focus-visible,
a.elementor-button:focus-visible {
	outline: 2px solid hsl(var(--yellow));
	outline-offset: 2px;
}

/* ---- CPD point balance + package modal (PointCPD_Credits) ---- */
.pcpd-credits__balance { font-size: 1.05rem; margin: 0 0 0.75rem; }
.pcpd-credits__balance strong { font-size: 1.65rem; font-weight: 600; font-variant-numeric: tabular-nums; display: block; }
.pcpd-credits__modal {
	position: fixed; inset: 0; z-index: 999;
	background: hsl(var(--foreground) / 0.55);
	display: flex; align-items: flex-start; justify-content: center;
	padding: 8vh 1rem 1rem;
}
.pcpd-credits__modal[hidden] { display: none; }
.pcpd-credits__modal-box {
	background: hsl(var(--background));
	/* color re-stated: the widget renders inside the dark standing slab (off-white
	   text) and a fixed modal still inherits it — heading and points lines were
	   white-on-white when opened from My CPD. */
	color: hsl(var(--foreground));
	border-radius: var(--radius);
	box-shadow: 0 20px 50px hsl(var(--foreground) / 0.25);
	width: 26rem; max-width: 100%;
	padding: 1.25rem 1.5rem 1.5rem;
}
.pcpd-credits__modal-head { display: flex; justify-content: space-between; align-items: center; }
.pcpd-credits__modal-head h3 { margin: 0; }
.pcpd-credits__close {
	background: none; border: 0; cursor: pointer;
	font-size: 1.5rem; line-height: 1; color: hsl(var(--muted-foreground));
}
.pcpd-credits__hint { color: hsl(var(--muted-foreground)); font-size: 0.875rem; margin: 0.5rem 0 1rem; }
.pcpd-credits__packages { list-style: none; margin: 0; padding: 0; }
.pcpd-credits__packages li {
	display: flex; justify-content: space-between; align-items: center;
	gap: 1rem; padding: 0.6rem 0;
	border-bottom: 1px solid hsl(var(--border));
}
.pcpd-credits__packages li:last-child { border-bottom: 0; }
.pcpd-credits__redeem { margin: 0 0 0.75rem; }
.pcpd-credits__note { color: hsl(var(--muted-foreground)); font-size: 0.875rem; }
.pcpd-credits__notice { font-size: 0.9rem; font-weight: 600; }
.pcpd-credits__notice--error { color: hsl(0 72% 45%); }

/* ── Trust bar: signal yellow so it reads as its own band instead of merging
      into the ink header below it (James, Aug 2026). ─────────────────────── */
/* (The yellow trustbar override lived here. James asked for charcoal, and the bar is now
   a scrolling ticker — see the .pcpd-trustbar block near the top of this file.) */
.pcpd-trustbar__inner span:not(:last-child)::after { background: hsl(var(--yellow)); }

/* ── Hero offer panel: tiled outline echo of the offer copy behind the text
      (Open Colleges pattern), and a squared CTA — no pills on this site. ─── */
.pcpd-hero__right { position: relative; overflow: hidden; }
.pcpd-hero__tile {
	position: absolute;
	inset: -8% -12%;
	z-index: 0;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	gap: 0.02em 0.3em;
	pointer-events: none;
	user-select: none;
	font-weight: 800;
	font-size: clamp(2.4rem, 5.6vw, 5rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: lowercase;
	color: transparent;
	-webkit-text-stroke: 2px rgba(20, 22, 25, 0.22);
	text-stroke: 2px rgba(20, 22, 25, 0.22);
}
.pcpd-hero__offer { position: relative; z-index: 1; }
.pcpd-hero__offer-cta {
	border-radius: 0;
	padding: 0.95rem 1.6rem;
}
@media (prefers-reduced-motion: no-preference) {
	.pcpd-hero__tile { transition: none; }
}
/* tile is texture, not competition: lighter stroke, and the ghost headline
   line keeps a full-strength outline so it stays the loudest thing there */
.pcpd-hero__tile { -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: rgba(20, 22, 25, 0.12); }
.pcpd-hero__offer-line--ghost { -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #141619; }
/* ── assessor: review queue card on My CPD ───────────────────────────────
   Sits above the standing ring for anyone who can review. An unreviewed
   course carrying CPD points is more urgent than the reviewer's own points,
   and this renders nothing at all for ordinary learners. */
.pcpd-review-card--dash {
	background: var(--pcpd-ink, #141619);
	color: #fff;
	border-radius: 0;
	border-left: 6px solid var(--pcpd-yellow, #ffc400);
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.5rem;
}

.pcpd-review-card__eyebrow {
	margin: 0 0 .35rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pcpd-yellow, #ffc400);
}

.pcpd-review-card--dash h2 {
	margin: 0 0 .5rem;
	color: #fff;
	font-size: 1.5rem;
	line-height: 1.2;
}

.pcpd-review-card--dash p { color: rgba(255, 255, 255, .82); margin: 0 0 .9rem; }

.pcpd-review-card__list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: .35rem;
}

.pcpd-review-card__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
	padding: .45rem .7rem;
	background: rgba(255, 255, 255, .07);
	font-size: .92rem;
}

.pcpd-review-card__list span {
	font-size: .78rem;
	color: var(--pcpd-yellow, #ffc400);
	font-weight: 600;
}

/* "Open the studio" — the plugin renders it as .pointcpd-btn, which the theme only
   styles inside .pcpd-course-content, so on My CPD it fell through to the article
   link rule: ink text on the ink card, i.e. black on black (James, Aug 2026).
   Specificity has to clear `.pcpd-article a:not(.pcpd-btn)`, hence the a.<class>. */
.pcpd-review-card--dash a.pointcpd-btn,
.pcpd-article .pcpd-review-card--dash a.pointcpd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.25rem;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 8px;
	background: transparent;
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.pcpd-review-card--dash a.pointcpd-btn:hover,
.pcpd-article .pcpd-review-card--dash a.pointcpd-btn:hover {
	background: #fff;
	border-color: #fff;
	color: var(--pcpd-ink, #141619);
}
.pcpd-review-card--dash a.pointcpd-btn:focus-visible {
	outline: 2px solid var(--pcpd-yellow, #ffc400);
	outline-offset: 2px;
}

.pcpd-review-card__more { font-size: .85rem; opacity: .75; }

/* ── assessor: one-time "you have items to review" modal ─────────────────
   Shown when the pending count changes rather than on every login — a popup
   that appears every single time gets dismissed reflexively and stops being
   information. */
.pcpd-review-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(20, 22, 25, .62);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}

.pcpd-review-modal__box {
	background: #fff;
	max-width: 520px;
	width: 100%;
	padding: 2rem;
	border-top: 6px solid var(--pcpd-yellow, #ffc400);
	box-shadow: 0 24px 60px rgba(20, 22, 25, .35);
}

.pcpd-review-modal__box h2 { margin: 0 0 .6rem; font-size: 1.5rem; line-height: 1.2; }
.pcpd-review-modal__box p  { color: var(--pcpd-slate, #5b6470); }
.pcpd-review-modal__box .pcpd-review-card__eyebrow { color: var(--pcpd-ink, #141619); }
.pcpd-review-modal__box .pointcpd-btn { margin-right: .5rem; }

@media (max-width: 560px) {
	.pcpd-review-card--dash { padding: 1.25rem; }
	.pcpd-review-modal__box { padding: 1.5rem; }
}

/* ── Checkout (WooCommerce Blocks) ─────────────────────────────────────────
   Ran on plain browser/WooCommerce defaults — no theme touched it (James,
   Aug 2026: "the checkout page is all over the place"). .pcpd-article caps
   content at 720px everywhere else, which is right for prose but starves a
   two-column form+summary layout; checkout gets its own wider column via the
   body class WooCommerce already adds, so nothing else on the site is
   affected. Selectors target WooCommerce Blocks' real class names — this is
   the block-based checkout (wc-block-checkout), not the classic shortcode. */
/* Sep 2026: .pcpd-article is now container-width (1280px) sitewide, so this no longer
   widens checkout — it deliberately narrows it. Kept at 1120px because that is the width
   the block checkout was actually verified at after the "all over the place" fix, and a
   payment form is the last place to take an untested layout change for tidiness. */
body.woocommerce-checkout .pcpd-article { max-width: 1120px; }

/* WooCommerce Blocks gives both columns `flex: 0 1 auto` with no flex-basis, so on a
   contained (not full-viewport) layout they compete for space and flex-wrap kicks in —
   the sidebar dropped to its own row under the form instead of sitting beside it.
   Deterministic widths fix that regardless of container width. */
.wc-block-components-sidebar-layout.wc-block-checkout {
	gap: 2.5rem;
	flex-wrap: nowrap;
}
.wc-block-checkout__main {
	padding-right: 0;
	flex: 1 1 auto;
	min-width: 0;
}
.wc-block-components-sidebar {
	flex: 0 0 400px; /* was 340: course names were wrapping into three lines (James, 14 Sep 2026) */
}

/* Each step (Contact / Shipping / Billing / Payment) as its own card, same
   family as every other card on the site: white, bordered, radius, soft
   shadow — not the bare unstyled fieldsets WooCommerce ships. */
.wc-block-checkout__contact-fields,
.wc-block-checkout__billing-fields,
.wp-block-woocommerce-checkout-payment-block,
.wp-block-woocommerce-checkout-order-note-block,
.wp-block-woocommerce-checkout-terms-block {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	padding: 1.5rem 1.5rem 1.75rem;
	margin: 0 0 1.25rem;
}
/* Shipping/pickup blocks always render their wrapper div, even with nothing to ship —
   every PointCPD course is virtual. WooCommerce leaves them as an empty node rather than
   omitting them, which under the card rule above showed as a blank bordered box between
   Contact information and Billing address. Hide them outright rather than card-style an
   empty box; if a physical product is ever sold this will need revisiting. */
.wp-block-woocommerce-checkout-shipping-method-block:empty,
.wp-block-woocommerce-checkout-pickup-options-block:empty,
.wp-block-woocommerce-checkout-shipping-address-block:empty { display: none; }
/* "Invoice details" (James, 14 Sep 2026): the contact block (email) carries the heading and
   the billing block has none, so the two cards are fused into one section — heading, email,
   then the invoice address. The empty shipping blocks between them are display:none above. */
.wc-block-checkout__contact-fields {
	border-bottom: 0;
	border-radius: var(--radius) var(--radius) 0 0;
	margin-bottom: 0;
	padding-bottom: 0.25rem;
}
.wc-block-checkout__billing-fields {
	border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius);
	padding-top: 0.25rem;
}
/* Country/Region is gone from the checkout (James, 14 Sep 2026): WooCommerce is set to sell
   to Australia only and to default the customer location to the shop country, so the field
   only ever holds "Australia" -- it still submits, it just is not shown. */
.wc-block-checkout__billing-fields .wc-block-components-address-form__country,
.wc-block-checkout__shipping-fields .wc-block-components-address-form__country { display: none; }
.wc-block-components-checkout-step__heading {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: hsl(var(--foreground));
}
.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step__description { color: hsl(var(--muted-foreground)); }

/* Form fields: same 8px radius, 16px font (no iOS zoom), yellow focus ring
   as every other input on the site — signup, login, licence gate. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-address-form input,
.wc-block-checkout__form input[type="text"],
.wc-block-checkout__form input[type="email"],
.wc-block-checkout__form input[type="tel"],
.wc-block-components-combobox-control input,
.wc-block-components-select select,
select.wc-block-components-country-input,
select.wc-block-components-state-input {
	border: 1px solid hsl(var(--border)) !important;
	border-radius: 8px !important;
	font-size: 16px !important;
	background: hsl(var(--background)) !important;
	box-shadow: none !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-combobox-control input:focus,
.wc-block-components-select select:focus {
	border-color: hsl(var(--foreground)) !important;
	box-shadow: 0 0 0 3px hsl(var(--yellow) / 0.35) !important;
	outline: none !important;
}
.wc-block-components-text-input label,
.wc-block-components-address-form label {
	color: hsl(var(--muted-foreground)) !important;
}
.wc-block-components-checkbox svg,
.wc-block-components-radio-control__input { accent-color: hsl(var(--yellow)); }

/* Order summary sidebar: the same ink+yellow treatment the dashboard's
   standing panel uses elsewhere, so the price the learner is about to pay
   reads with some weight instead of sitting in a thin grey sidebar. */
.wc-block-components-sidebar {
	background: hsl(var(--foreground));
	border-radius: var(--radius);
	padding: 1.25rem 1.25rem 1.4rem; /* was 1.75rem: the phone card opened with a blank band above the title (James, 21 Sep 2026) */
	color: hsl(var(--background));
	align-self: flex-start;
}
.wc-block-components-sidebar .wc-block-components-title {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	color: hsl(var(--background));
}
.wc-block-components-sidebar .wc-block-components-totals-item,
.wc-block-components-sidebar .wc-block-components-order-summary-item {
	color: hsl(var(--background) / 0.85);
	border-color: hsl(var(--background) / 0.15) !important;
}
.wc-block-components-sidebar .wc-block-components-totals-footer-item,
.wc-block-components-sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: hsl(var(--background));
	font-weight: 700;
}
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar hr { border-color: hsl(var(--background) / 0.15) !important; }
.wc-block-components-order-summary-item__quantity {
	background: hsl(var(--background) / 0.15);
	color: hsl(var(--background));
}
.wc-block-components-sidebar a { color: hsl(var(--yellow)); }
/* Point packs and courses have no product photo, so the thumbnail slot only ever
   holds WooCommerce's placeholder — which rendered as a white blob colliding with
   the title on the narrow dark card (James's checkout screenshot, Sep 2026). Hide
   the graphic itself but keep the slot as a small dark tile so the quantity badge
   (absolutely positioned on it) still has somewhere to sit. */
.wc-block-components-order-summary-item__image {
	position: relative;
	width: 56px;
	min-width: 56px;
	height: 56px;
	background: hsl(var(--background) / 0.12);
	border-radius: 6px;
	overflow: hidden;
}
/* Real covers now exist for every course and package (plugin 0.9.61); show them
   edge-to-edge in the tile. Absolute fill rather than height:100% — on the phone
   checkout the course cover rendered 48×28 (a black bar) while the pack filled. */
.wc-block-components-order-summary-item__image img {
	position: absolute; inset: 0;
	width: 100% !important; height: 100% !important; /* Woo pins the img at 48px */
	max-width: none !important;
	object-fit: cover; display: block;
}
/* Title and price were fighting for one cramped row: stack them. */
.wc-block-components-order-summary-item { flex-wrap: wrap; }
.wc-block-components-sidebar .wc-block-components-product-name {
	display: block; white-space: normal; overflow: visible; text-overflow: clip;
	overflow-wrap: anywhere; line-height: 1.35; font-weight: 600;
}
.wc-block-components-order-summary-item__description { flex: 1 1 0; min-width: 0; padding-left: 0.85rem; }
.wc-block-components-order-summary-item__total-price {
	flex-basis: 100%;
	margin: 0.4rem 0 0;
	text-align: left;
	font-weight: 700;
	color: hsl(var(--background));
}
/* The product blurb is catalogue copy, not order information — it only adds clutter here. */
.wc-block-components-order-summary-item .wc-block-components-product-metadata { display: none; }
/* Per-line "Remove" injected by site.js (James, Sep 2026): quiet link, red on hover. */
.pcpd-remove-item {
	display: inline-block;
	margin: 0.3rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.82rem;
	/* Slate on the ink panel was near-invisible (James, 14 Sep 2026): paper text,
	   yellow on hover, like every other link in the panel. */
	color: hsl(var(--background) / 0.85);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.pcpd-remove-item:hover, .pcpd-remove-item:focus-visible { color: hsl(var(--yellow)); }
/* "Add coupons" is the one control in the panel people hunt for; make it read as one. */
.wc-block-components-sidebar .wc-block-components-totals-coupon .wc-block-components-panel__button,
.wc-block-components-sidebar .wc-block-components-totals-coupon .wc-block-components-panel__button span { font-weight: 700 !important; color: hsl(var(--background)); }
.pcpd-remove-item[disabled] { opacity: 0.6; cursor: default; }

/* Home "Why builders pick PointCPD" strip reuses the feature cards. */
.pcpd-usps { padding-top: 3rem; padding-bottom: 1rem; }
.pcpd-usps__grid { margin-top: 1.5rem; }

/* Place Order: same primary-button family as the rest of the site. */
.wc-block-components-checkout-place-order-button {
	background: hsl(var(--yellow)) !important;
	color: hsl(var(--yellow-foreground)) !important;
	border-radius: 999px !important;
	font-family: 'Space Grotesk', 'Inter', sans-serif !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}
.wc-block-components-checkout-place-order-button:hover { box-shadow: var(--glow-yellow) !important; }

/* The order summary is always open (James, 21 Sep 2026): site.js opens it and keeps it open;
   the chevron goes, the title stops looking like a button, and the phone padding tightens. */
.pcpd-summary-locked { pointer-events: none; cursor: default; }
.wc-block-components-order-summary__button-icon,
.wc-block-components-order-summary .wc-block-components-panel__button svg { display: none !important; }
.wc-block-components-order-summary__button,
.wc-block-components-order-summary .wc-block-components-panel__button { padding-top: 0 !important; margin-top: 0 !important; }
.wc-block-components-order-summary__content { padding-top: 0.25rem; }
.wc-block-components-sidebar .wc-block-components-order-summary-item { padding: 0.9rem 0; }
.wc-block-components-sidebar .wc-block-components-totals-item { padding: 0.6rem 0; }
.wc-block-components-sidebar .wc-block-components-totals-coupon { padding: 0.6rem 0; }
.wc-block-components-sidebar .wc-block-components-totals-footer-item { padding: 0.9rem 0 0; }

@media (max-width: 900px) {
	body.woocommerce-checkout .pcpd-article { max-width: 100%; }
	.wc-block-components-sidebar { padding: 1rem 1rem 1.2rem; }
	.wc-block-components-sidebar-layout.wc-block-checkout { flex-direction: column; flex-wrap: wrap; }
	.wc-block-components-sidebar { flex-basis: auto; }
}

/* ── For Employers & Teams ([pointcpd_employers]) ────────────────────────
   The page had real copy (how seats work, what a manager sees) but no design at
   all — a bare Elementor text column. This gives it the same card/step/FAQ
   language the rest of the site already uses, rather than a new visual system. */
.pcpd-employer-features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin-top: 2rem;
}
.pcpd-employer-feature {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	padding: 1.5rem;
	box-shadow: var(--shadow-sm);
}
.pcpd-employer-feature h3 {
	margin: 0 0 0.5rem;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 1.05rem;
}
.pcpd-employer-feature p { margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.92rem; line-height: 1.6; }

.pcpd-employer-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
}
.pcpd-employer-cta__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; flex: none; }

.pcpd-employer-faq__list { max-width: 62rem; margin-top: 1.5rem; }

@media (max-width: 640px) {
	.pcpd-employer-cta__inner { flex-direction: column; align-items: flex-start; }
	.pcpd-employer-cta__actions .pcpd-btn { width: 100%; }
}

/* ------------------------------------------------------------------ */
/* Purchase ticker — bottom-left toast of recent real purchases        */
/* (inc/social-proof.php; real orders only, renders nothing without)   */
/* ------------------------------------------------------------------ */
.pcpd-proof {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 900; /* under modals (999+) and the module player (100000) */
	display: flex;
	align-items: center;
	gap: 0.6rem;
	max-width: min(92vw, 24rem);
	padding: 0.65rem 0.85rem;
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	box-shadow: 0 10px 30px hsl(var(--foreground) / 0.18);
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.pcpd-proof.is-in { opacity: 1; transform: none; }
.pcpd-proof__dot {
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: hsl(var(--yellow));
}
.pcpd-proof__text { margin: 0; font-size: 0.82rem; line-height: 1.35; }
.pcpd-proof__close {
	flex: none;
	border: none;
	background: none;
	color: hsl(var(--muted-foreground));
	font-size: 0.8rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem;
}
.pcpd-proof__close:hover { color: hsl(var(--foreground)); }
@media (prefers-reduced-motion: reduce) {
	.pcpd-proof { transition: none; transform: none; }
}

/* ------------------------------------------------------------------ */
/* Package upsell on single-course pages (class-course-template.php)   */
/* — the quantified "buy the pack instead" ad beside the Buy button    */
/* ------------------------------------------------------------------ */
/* Certificate verification — [pointcpd_verify_certificate] (Sep 2026). */
.pcpd-verify { margin: 1.5rem 0 2.5rem; }
.pcpd-verify__label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.pcpd-verify__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.pcpd-verify__input {
	flex: 1 1 260px;
	min-width: 0;
	padding: 0.8rem 1rem;
	font: inherit;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	background: hsl(var(--card));
	color: hsl(var(--foreground));
}
.pcpd-verify__input:focus-visible { outline: 2px solid hsl(var(--yellow)); outline-offset: 2px; }
.pcpd-verify__hint { margin: 0.5rem 0 0; font-size: 0.85rem; color: hsl(var(--muted-foreground)); }
.pcpd-verify__result {
	margin-top: 1.5rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius);
	border: 1px solid hsl(var(--border));
	border-left-width: 5px;
	background: hsl(var(--card));
}
.pcpd-verify__result--ok { border-left-color: hsl(var(--success, 155 69% 39%)); }
.pcpd-verify__result--no { border-left-color: hsl(var(--destructive, 0 72% 51%)); }
.pcpd-verify__badge { margin: 0 0 0.9rem; font-weight: 700; font-size: 1.1rem; }
.pcpd-verify__result--ok .pcpd-verify__badge { color: hsl(var(--success, 155 69% 39%)); }
.pcpd-verify__result--no .pcpd-verify__badge { color: hsl(var(--destructive, 0 72% 51%)); }
.pcpd-verify__facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.25rem; margin: 0; }
.pcpd-verify__facts dt { font-weight: 600; color: hsl(var(--muted-foreground)); }
.pcpd-verify__facts dd { margin: 0; }
.pcpd-verify__note { margin: 1rem 0 0; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
@media (max-width: 480px) { .pcpd-verify__facts { grid-template-columns: 1fr; gap: 0.15rem; } .pcpd-verify__facts dd { margin-bottom: 0.6rem; } }

/* NSW builder licence check — [pointcpd_licence_check] and /licence-check/{number}/ (Sep 2026).
   Reuses the verify form and fact list; adds result rows, status pills and the CPD panel. */
.pcpd-lcheck { margin: 1.5rem 0 2.5rem; }
.pcpd-lcheck__input { font-family: inherit; letter-spacing: normal; text-transform: none; }
.pcpd-lcheck__results { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid hsl(var(--border)); }
.pcpd-lcheck__result {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.2rem 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid hsl(var(--border));
}
.pcpd-lcheck__name { font-weight: 600; font-size: 1.05rem; }
.pcpd-lcheck__sub { grid-column: 1; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.pcpd-lcheck__pills { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; align-items: center; }
.pcpd-lcheck__pill {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	background: hsl(var(--muted));
	color: hsl(var(--foreground));
}
.pcpd-lcheck__pill--ok { background: hsl(155 69% 39% / 0.12); color: #0d6b45; }
.pcpd-lcheck__pill--no { background: hsl(0 72% 51% / 0.1); color: #b42318; }
.pcpd-lcheck__pill--warn { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.pcpd-lcheck__pill--cpd { background: hsl(var(--yellow)); color: #141619; }
.pcpd-lcheck__muted { color: hsl(var(--muted-foreground)); }

/* The field that matters most on a listing: can PointCPD vouch for their CPD? */
.pcpd-lcheck__cpd {
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.4rem;
	border-radius: var(--radius);
	border: 1px solid hsl(var(--border));
	background: hsl(var(--card));
}
.pcpd-lcheck__cpd--yes { background: hsl(var(--yellow) / 0.14); border: 2px solid hsl(var(--yellow)); }
.pcpd-lcheck__cpd-badge { margin: 0 0 0.35rem; font-size: 1.3rem; font-weight: 700; }
.pcpd-lcheck__cpd--no .pcpd-lcheck__cpd-badge { color: hsl(var(--muted-foreground)); font-size: 1.1rem; }
.pcpd-lcheck__cpd-note { margin: 0; font-size: 0.9rem; }
.pcpd-lcheck__facts { margin-bottom: 1rem; }
.pcpd-lcheck__source { margin: 2rem 0 0; font-size: 0.8rem; color: hsl(var(--muted-foreground)); }

/* "Find them online" — the builder's own website and the socials it links to. */
.pcpd-lcheck__links {
	margin: 1.75rem 0 0;
	padding: 1.25rem 1.25rem 1rem;
	border: 1px solid hsl(var(--border));
	border-radius: 10px;
	background: hsl(var(--muted) / 0.4);
}
.pcpd-lcheck__links-title { margin: 0 0 0.6rem; font-size: 1.05rem; }
.pcpd-lcheck__links-site { margin: 0 0 0.75rem; font-weight: 600; word-break: break-word; }
.pcpd-lcheck__socials { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.pcpd-lcheck__social a {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border: 1px solid hsl(var(--border));
	border-radius: 999px;
	background: hsl(var(--background));
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}
.pcpd-lcheck__social a:hover,
.pcpd-lcheck__social a:focus-visible { border-color: hsl(var(--yellow)); }
.pcpd-lcheck__links-note { margin: 0.9rem 0 0; font-size: 0.8rem; color: hsl(var(--muted-foreground)); }

/* "Is this your licence?" — the consented-email capture on every listing. */
.pcpd-claim {
	margin: 1.75rem 0 0;
	padding: 1.5rem;
	border: 2px solid hsl(var(--yellow));
	border-radius: 12px;
	background: hsl(var(--yellow) / 0.07);
}
.pcpd-claim__title { margin: 0 0 0.5rem; font-size: 1.25rem; }
.pcpd-claim__lead { margin: 0 0 1rem; font-size: 0.95rem; }
.pcpd-claim__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 0 0 0.85rem; }
.pcpd-claim__field { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.pcpd-claim__field label { font-size: 0.8rem; font-weight: 600; }
.pcpd-claim__opt { font-weight: 400; color: hsl(var(--muted-foreground)); }
.pcpd-claim__field input {
	font: inherit;
	padding: 0.55rem 0.7rem;
	border: 1px solid hsl(var(--border));
	border-radius: 8px;
	background: hsl(var(--background));
	min-height: 44px;
}
.pcpd-claim__field input:focus-visible { outline: 2px solid hsl(var(--yellow)); outline-offset: 1px; }
.pcpd-claim__consent { margin: 0 0 1rem; font-size: 0.85rem; line-height: 1.45; }
.pcpd-claim__consent label { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.pcpd-claim__consent input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.pcpd-claim__actions { margin: 0; }
.pcpd-claim__btn[disabled] { opacity: 0.6; cursor: progress; }
.pcpd-claim__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pcpd-claim__result { margin-top: 0.85rem; font-weight: 600; }
.pcpd-claim__result--error { color: #b42318; }
.pcpd-claim__fine { margin: 0.85rem 0 0; font-size: 0.78rem; color: hsl(var(--muted-foreground)); }
.pcpd-claim__notice {
	margin: 0 0 1.25rem; padding: 0.9rem 1.1rem; border-radius: 10px; font-weight: 600;
	background: hsl(155 69% 39% / 0.12); color: #0d6b45; border: 1px solid hsl(155 69% 39% / 0.35);
}
.pcpd-claim__notice--no { background: hsl(0 72% 51% / 0.1); color: #b42318; border-color: hsl(0 72% 51% / 0.3); }
@media (max-width: 680px) {
	.pcpd-claim__grid { grid-template-columns: 1fr; }
}

/* Builder-written profile: the business's own words, clearly marked as theirs. */
.pcpd-profile {
	margin: 1.75rem 0 0;
	padding: 1.5rem;
	border: 1px solid hsl(var(--border));
	border-left: 4px solid hsl(var(--ink));
	border-radius: 10px;
	background: hsl(var(--background));
}
.pcpd-profile__title { margin: 0 0 0.25rem; font-size: 1.3rem; }
.pcpd-profile__byline { margin: 0 0 1rem; font-size: 0.78rem; color: hsl(var(--muted-foreground)); }
.pcpd-profile__about { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; }
.pcpd-profile__services { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; padding: 0; }
.pcpd-profile__services li {
	padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.82rem;
	background: hsl(var(--muted)); color: hsl(var(--foreground));
}
.pcpd-profile__facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; font-size: 0.92rem; }
.pcpd-profile__facts dt { font-weight: 600; color: hsl(var(--muted-foreground)); }
.pcpd-profile__facts dd { margin: 0; }

/* The owner's editor, and the nudge shown to everyone else. */
.pcpd-profile-edit, .pcpd-profile-prompt {
	margin: 1.75rem 0 0; padding: 1.5rem;
	border: 1px dashed hsl(var(--border)); border-radius: 12px;
	background: hsl(var(--muted) / 0.35);
}
.pcpd-profile-edit__title { margin: 0 0 0.5rem; font-size: 1.15rem; }
.pcpd-profile-edit__lead, .pcpd-profile-prompt p { margin: 0 0 1rem; font-size: 0.92rem; }
.pcpd-profile-prompt p:last-child { margin-bottom: 0; }
.pcpd-profile-prompt__kicker { margin: 0 0 0.35rem; font-weight: 700; }
.pcpd-profile-edit__notice {
	margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600;
	background: hsl(var(--muted)); color: hsl(var(--foreground));
}
.pcpd-profile-edit__notice--live { background: hsl(155 69% 39% / 0.12); color: #0d6b45; }
.pcpd-profile-edit__notice--no { background: hsl(0 72% 51% / 0.1); color: #b42318; }
.pcpd-profile-edit__field { margin: 0 0 0.85rem; display: flex; flex-direction: column; gap: 0.25rem; }
.pcpd-profile-edit__field label { font-size: 0.82rem; font-weight: 600; }
.pcpd-profile-edit__count { font-weight: 400; color: hsl(var(--muted-foreground)); }
.pcpd-profile-edit__field input,
.pcpd-profile-edit__field textarea {
	font: inherit; padding: 0.55rem 0.7rem; border: 1px solid hsl(var(--border));
	border-radius: 8px; background: hsl(var(--background)); min-height: 44px;
}
.pcpd-profile-edit__field textarea { min-height: 7rem; resize: vertical; }
.pcpd-profile-edit__field input:focus-visible,
.pcpd-profile-edit__field textarea:focus-visible { outline: 2px solid hsl(var(--yellow)); outline-offset: 1px; }
.pcpd-profile-edit__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.pcpd-profile-edit__fine { margin: 0.5rem 0 1rem; font-size: 0.78rem; color: hsl(var(--muted-foreground)); }
@media (max-width: 680px) {
	.pcpd-profile-edit__grid { grid-template-columns: 1fr; }
	.pcpd-profile__facts { grid-template-columns: 1fr; gap: 0.1rem 0; }
	.pcpd-profile__facts dd { margin-bottom: 0.5rem; }
}
@media (max-width: 560px) {
	.pcpd-lcheck__result { grid-template-columns: 1fr; }
	.pcpd-lcheck__pills { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

.pcpd-upsell {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	background: hsl(var(--yellow) / 0.09);
	border: 1px solid hsl(var(--yellow) / 0.45);
	border-left: 4px solid hsl(var(--yellow));
	border-radius: var(--radius);
	max-width: 34rem;
}
.pcpd-upsell__kicker {
	margin: 0 0 0.35rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
}
.pcpd-upsell__body { margin: 0 0 0.85rem; font-size: 0.92rem; line-height: 1.5; }
.pcpd-upsell__body s { color: hsl(var(--muted-foreground)); }
.pcpd-upsell__save { color: #0d6b45; white-space: nowrap; }
.pcpd-upsell .pointcpd-btn { display: inline-block; }

/* Checkout: the softened "no payment methods" notice while Stripe mounts (site.js).
   Neutral, not an error — the real banner styling returns after the grace period. */
.wc-block-components-notice-banner:has(.pcpd-payment-loading) {
	background: hsl(var(--muted)) !important;
	border-color: hsl(var(--border)) !important;
	color: hsl(var(--foreground)) !important;
}
.wc-block-components-notice-banner:has(.pcpd-payment-loading) > svg { display: none; }
.pcpd-payment-loading { display: flex; align-items: center; gap: 0.6rem; }
.pcpd-payment-loading__dot {
	width: 0.7rem; height: 0.7rem; border-radius: 50%;
	background: hsl(var(--yellow));
	animation: pcpd-pulse 1s ease-in-out infinite;
}
@keyframes pcpd-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pcpd-payment-loading__dot { animation: none; } }

/* Course cards with a real cover (inline background-image from the featured image).
   The base .pcpd-card__media rule sizes its grid pattern at 22px, which a single
   inline image inherited — so the 1200px cover tiled across the card. Cover-fit it,
   and frame the upper band where the title sits on the square cover. */
.pcpd-card__media[style*="background-image"] {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 26%;
	height: 160px;
}

/* Package art on the tier cards (James, Sep 2026 — packages are the product, so they
   get a face). The bundled pack-{N}.png cover is square; crop to 5:4 and sit the
   frame just below the top rule so the big point count, "CPD points" line and the
   subtitle read, with the badge at the foot. */
.pcpd-tier__art {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	object-position: center 25%; /* 5:4 window sits 5%–85% of the square: keeps the top rule, hides the wordmark row */
	border-radius: calc(var(--radius) - 4px);
	margin: 0 0 1rem;
}
.pcpd-tier--popular .pcpd-tier__art { box-shadow: 0 0 0 1px hsl(var(--yellow) / 0.35); }

/* Skip link — offscreen until it takes focus, then pinned top-left over the
   header. Added after the Sep 2026 test pass found no bypass mechanism for the
   mega-menu (WCAG 2.4.1, Level A). */
.pcpd-skiplink {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.75rem 1.1rem;
	background: hsl(var(--yellow));
	color: hsl(var(--ink));
	font-weight: 700;
	border-radius: 0 0 var(--radius) 0;
	text-decoration: none;
}
.pcpd-skiplink:focus {
	left: 0;
	outline: 3px solid hsl(var(--ink));
	outline-offset: -3px;
}

/* ── Welcome-code capture (inc/lead-capture.php). The code used to be printed on
      the page; now it is sent in exchange for an email. Three settings: on the
      yellow hero panel, in the CTA band, and inline in prose. ── */
.pcpd-offer { margin: 1.1rem 0 0; max-width: 34rem; }
.pcpd-offer__label { display: block; margin: 0 0 0.45rem; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 0.95rem; color: inherit; }
.pcpd-offer__row { display: flex; gap: 0.5rem; }
.pcpd-offer__input {
	flex: 1 1 auto; min-width: 0;
	padding: 0.7rem 0.85rem;
	border: 1px solid hsl(var(--border));
	border-radius: 999px;
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: inherit;
	font-size: 16px; /* iOS zooms on anything smaller */
}
.pcpd-offer__input:focus { outline: none; border-color: hsl(var(--foreground)); box-shadow: 0 0 0 3px hsl(var(--yellow) / 0.35); }
.pcpd-offer__btn {
	flex: 0 0 auto;
	padding: 0.7rem 1.2rem;
	border: 0; border-radius: 999px;
	background: hsl(var(--foreground)); color: hsl(var(--background));
	font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 0.95rem;
	cursor: pointer;
	transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.pcpd-offer__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px hsl(var(--shadow-color) / 0.22); }
.pcpd-offer__btn[disabled] { opacity: 0.6; cursor: wait; transform: none; box-shadow: none; }
.pcpd-offer__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pcpd-offer__consent { margin: 0.5rem 0 0; font-size: 0.78rem; line-height: 1.45; color: hsl(var(--muted-foreground)); }
.pcpd-offer__result { margin-top: 0.8rem; padding: 0.85rem 1rem; border-radius: 12px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); font-size: 0.95rem; }
.pcpd-offer__result--error { border-color: hsl(var(--alert) / 0.5); color: hsl(var(--alert)); }
.pcpd-offer__code { display: inline-block; margin: 0.25rem 0 0.35rem; padding: 0.35rem 0.7rem; border-radius: 8px; background: hsl(var(--yellow)); color: hsl(var(--yellow-foreground)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; }
.pcpd-offer__result a { font-weight: 600; }

/* On the yellow panel the ink button already reads; the consent line must stay legible on yellow. */
.pcpd-offer--hero { margin-top: 1.3rem; }
.pcpd-offer--hero .pcpd-offer__label { color: hsl(var(--yellow-foreground)); }
.pcpd-offer--hero .pcpd-offer__input { border-color: hsl(var(--yellow-foreground) / 0.35); }
.pcpd-offer--hero .pcpd-offer__consent { color: hsl(var(--yellow-foreground) / 0.8); }
.pcpd-offer--hero .pcpd-offer__result { background: hsl(var(--background)); }

.pcpd-offer--band { margin-top: 0.9rem; }
.pcpd-offer--band .pcpd-offer__label { position: absolute; left: -9999px; } /* the lede already says it */

@media (max-width: 520px) {
	.pcpd-offer__row { flex-direction: column; }
	.pcpd-offer__btn { width: 100%; }
}

/* ── Checkout: Staff stepper per order line (quantity = people) and the two notes. ── */
.pcpd-staff { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0.2rem; }
.pcpd-staff__ctl { display: inline-flex; align-items: center; border: 1px solid hsl(var(--background) / 0.3); border-radius: 999px; overflow: hidden; }
.pcpd-staff__btn { width: 30px; height: 28px; border: 0; background: hsl(var(--background) / 0.1); color: hsl(var(--background)); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.pcpd-staff__btn:hover { background: hsl(var(--yellow)); color: hsl(var(--yellow-foreground)); }
.pcpd-staff__n { min-width: 2.2rem; text-align: center; font-weight: 700; color: hsl(var(--background)); font-variant-numeric: tabular-nums; }
.pcpd-staff.is-busy { opacity: 0.6; pointer-events: none; }
.pcpd-tax-note { margin: 0.35rem 0 0.75rem; font-size: 0.8rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }

/* ── Team Dashboard (Employee Management Module) ── */
.pcpd-team__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; margin-bottom: 1.25rem; }
.pcpd-team__kicker { margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--yellow-foreground)); }
.pcpd-team__title { margin: 0; font-family: 'Space Grotesk', 'Inter', sans-serif; }
.pcpd-team__abn { margin: 0.25rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.9rem; }
.pcpd-team__details summary { cursor: pointer; font-weight: 600; color: hsl(var(--foreground)); }
.pcpd-team__details .pcpd-manager__form { margin: 0.75rem 0 0; }
.pcpd-team__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.85rem; margin: 0 0 1.75rem; }
.pcpd-team__tile { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: hsl(var(--foreground)); color: hsl(var(--background)); text-decoration: none; }
.pcpd-team__tile--cta { background: hsl(var(--yellow)); color: hsl(var(--yellow-foreground)); }
.pcpd-team__num { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 1.9rem; font-weight: 700; line-height: 1; }
.pcpd-team__lbl { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.pcpd-team__people { display: flex; flex-direction: column; gap: 0.85rem; margin: 0.5rem 0 1.5rem; }
.pcpd-team__person { display: grid; grid-template-columns: 1.1fr 1.6fr; gap: 0.75rem 1.5rem; padding: 1rem 1.15rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.pcpd-team__who { display: flex; flex-direction: column; gap: 0.15rem; }
.pcpd-team__who span { font-size: 0.88rem; color: hsl(var(--muted-foreground)); }
.pcpd-team__status { font-size: 0.75rem !important; font-weight: 600; }
.pcpd-team__status--active { color: #0d6b45 !important; }
.pcpd-team__status--invited { color: hsl(var(--yellow-foreground)) !important; }
.pcpd-team__has { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem 1rem; }
.pcpd-team__has div { display: flex; flex-direction: column; gap: 0.15rem; }
.pcpd-team__has .pcpd-team__lbl { opacity: 1; color: hsl(var(--muted-foreground)); }
.pcpd-team__has small { color: hsl(var(--muted-foreground)); }
.pcpd-team__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; padding-top: 0.75rem; border-top: 1px solid hsl(var(--border)); }
.pcpd-team__mini { display: flex; align-items: flex-end; gap: 0.5rem; }
.pcpd-team__mini label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; color: hsl(var(--muted-foreground)); }
.pcpd-team__mini input, .pcpd-team__mini select { padding: 0.45rem 0.6rem; border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit; font-size: 16px; min-width: 7rem; }
.pcpd-team__foot { font-size: 0.85rem; color: hsl(var(--muted-foreground)); }
@media (max-width: 640px) { .pcpd-team__person { grid-template-columns: 1fr; } }

/* A builder quote inside a "Why builders pick PointCPD" card (James, 14 Sep 2026). */
.pcpd-feature__quote { margin: 0.9rem 0 0; padding: 0.75rem 0.9rem; border-left: 3px solid hsl(var(--yellow)); background: hsl(var(--yellow-tint)); border-radius: 0 8px 8px 0; }
.pcpd-feature__quote p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: hsl(var(--foreground)); font-style: italic; }
.pcpd-feature__quote cite { display: block; margin-top: 0.4rem; font-size: 0.78rem; font-style: normal; color: hsl(var(--muted-foreground)); }

/* Builder quote under the four USP cards, not boxed into one. */
.pcpd-usps__yield { margin: 2.25rem auto 0; max-width: 46rem; font-family: "Space Grotesk", "Inter", sans-serif; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: hsl(var(--muted-foreground)); }
.pcpd-usps__yield strong { color: hsl(var(--foreground)); font-weight: 700; box-shadow: inset 0 -0.4em 0 hsl(var(--yellow) / 0.55); }
.pcpd-usps__yield + .pcpd-usps__quote { margin-top: 1rem; }
.pcpd-usps__quote { margin: 2rem auto 0.5rem; max-width: 46rem; padding: 0 0 0 1.25rem; border-left: 4px solid hsl(var(--yellow)); }
.pcpd-usps__quote p { margin: 0; font-family: "Space Grotesk", "Inter", sans-serif; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.4; font-weight: 600; color: hsl(var(--foreground)); text-wrap: balance; }
.pcpd-usps__quote cite { display: block; margin-top: 0.6rem; font-style: normal; font-size: 0.9rem; color: hsl(var(--muted-foreground)); }

/* First-order price on the pack cards: full price struck through, small; the 15%-off figure carries the weight. */
.pcpd-tier__was { display: inline-block; margin-right: 0.35rem; font-size: 0.95rem; font-weight: 500; color: hsl(var(--muted-foreground)); text-decoration: line-through; text-decoration-thickness: 2px; }
.pcpd-tier--popular .pcpd-tier__was { color: hsl(var(--background) / 0.6); }
.pcpd-tier__offer { display: block; margin-top: 0.15rem; font-size: 0.74rem; font-weight: 600; color: hsl(var(--yellow-foreground)); }
.pcpd-tier--popular .pcpd-tier__offer { color: hsl(var(--yellow)); }

/* Every inline text link on the site carries the yellow underline, not only inside
   articles (James, 14 Sep 2026). Scoped to links inside running text so buttons,
   card titles, nav and tabs keep their own treatment. */
.pcpd-main p a:not(.pcpd-btn):not([class*="pcpd-btn"]),
.pcpd-main li a:not(.pcpd-btn):not([class*="pcpd-btn"]):not(.pcpd-tabi):not(.pcpd-megamenu__panel a):not(.pcpd-trust__link),
.pcpd-main td a:not(.pcpd-btn), .pcpd-main dd a:not(.pcpd-btn), .pcpd-main figcaption a,
.pcpd-main .pcpd-section__lede a, .pcpd-main .pcpd-hero__alt a, .pcpd-main .pcpd-pricing__note a,
.pcpd-main .pcpd-offer__result a, .pcpd-main .pcpd-usps__quote a, .pcpd-footer__legal a {
	text-decoration: underline;
	text-decoration-color: hsl(var(--yellow));
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.pcpd-main p a:not(.pcpd-btn):hover, .pcpd-main li a:not(.pcpd-btn):not(.pcpd-trust__link):hover, .pcpd-main td a:hover, .pcpd-main dd a:hover,
.pcpd-main .pcpd-section__lede a:hover, .pcpd-main .pcpd-hero__alt a:hover { text-decoration-thickness: 3px; }

/* Trust strip under the home hero — facts only, see pointcpd_trust_strip_html(). */
.pcpd-trust { margin: 0 0 0.5rem; padding: 1.25rem 0; border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.pcpd-trust__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.pcpd-trust__item { display: flex; }
.pcpd-main .pcpd-trust__link, .pcpd-main .pcpd-trust__link:hover { display: flex; text-decoration: none; color: inherit; }
.pcpd-main .pcpd-trust__link:hover strong { text-decoration: underline; text-decoration-color: hsl(var(--primary)); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pcpd-trust__link, .pcpd-trust__item { gap: 0.7rem; align-items: flex-start; }
.pcpd-trust__icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; background: hsl(var(--yellow) / 0.22); color: hsl(var(--foreground)); }
.pcpd-trust__icon svg { width: 22px; height: 22px; }
.pcpd-trust__text { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.82rem; line-height: 1.35; color: hsl(var(--muted-foreground)); }
.pcpd-trust__text strong { font-size: 0.9rem; color: hsl(var(--foreground)); letter-spacing: -0.01em; }
@media (max-width: 1100px) { .pcpd-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.pcpd-trust { padding: 1rem 0; }
	.pcpd-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
	.pcpd-trust__icon { width: 34px; height: 34px; }
	.pcpd-trust__icon svg { width: 19px; height: 19px; }
	.pcpd-trust__text { font-size: 0.76rem; }
	.pcpd-trust__text strong { font-size: 0.84rem; }
}

/* ── Price beat guarantee: CTA, provider list, claim pop-up, terms page (inc/price-beat.php) ── */
.pcpd-pb-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: hsl(var(--yellow)); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.pcpd-pb-line { margin: 1rem 0 0; font-size: 0.95rem; color: hsl(var(--muted-foreground)); }
.pcpd-pb-line__tag { display: inline-block; margin-right: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: hsl(var(--yellow)); color: hsl(var(--yellow-foreground)); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pcpd-pb-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; margin: 2rem 0 0; padding: 1.2rem 1.4rem; border: 1px dashed hsl(var(--yellow)); border-radius: var(--radius); background: hsl(var(--yellow-tint) / 0.5); }
.pcpd-pb-cta__badge { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: hsl(var(--yellow)); color: hsl(var(--yellow-foreground)); font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 700; font-size: 1.25rem; box-shadow: var(--glow-yellow); }
.pcpd-pb-cta__title { margin: 0 0 0.2rem; font-weight: 700; font-size: 1.1rem; color: hsl(var(--foreground)); }
.pcpd-pb-cta__text { margin: 0; color: hsl(var(--muted-foreground)); }
.pcpd-pb-cta__actions { display: grid; gap: 0.4rem; justify-items: center; }
.pcpd-pb-cta__terms { font-size: 0.82rem; }
@media (max-width: 720px) { .pcpd-pb-cta { grid-template-columns: auto minmax(0, 1fr); } .pcpd-pb-cta__actions { grid-column: 1 / -1; justify-items: start; } }

.pcpd-pb-providers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.pcpd-pb-providers li { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 0.9rem; border: 1px solid hsl(var(--border)); border-radius: 0.6rem; background: hsl(var(--card)); color: hsl(var(--foreground)); }
.pcpd-pb-providers li span { font-size: 0.82rem; color: hsl(var(--muted-foreground)); }
.pcpd-pb-providers__other { border-style: dashed !important; }

.pcpd-pb-modal { width: min(640px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: 1rem; box-shadow: var(--shadow-lg); color: hsl(var(--foreground)); background: hsl(var(--card)); }
.pcpd-pb-modal::backdrop { background: hsl(var(--shadow-color) / 0.55); backdrop-filter: blur(2px); }
.pcpd-pb-modal[open] { animation: pcpd-pb-pop 0.25s var(--ease-out); }
@keyframes pcpd-pb-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.pcpd-pb-form { position: relative; padding: 1.6rem 1.5rem 1.4rem; }
.pcpd-pb-modal__close { position: absolute; top: 0.6rem; right: 0.7rem; width: 36px; height: 36px; border: 0; border-radius: 50%; background: hsl(var(--surface-2)); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.pcpd-pb-modal__kicker { display: inline-block; margin: 0 0 0.5rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: hsl(var(--yellow)); color: hsl(var(--yellow-foreground)); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.pcpd-pb-modal h2 { margin: 0 0 0.4rem; font-family: "Space Grotesk", "Inter", sans-serif; font-size: 1.6rem; }
.pcpd-pb-modal__lede { margin: 0 0 1.1rem; color: hsl(var(--muted-foreground)); }
.pcpd-pb-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1rem; }
.pcpd-pb-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; font-weight: 600; }
.pcpd-pb-form label em { font-style: normal; font-weight: 400; color: hsl(var(--muted-foreground)); }
.pcpd-pb-form__check span { color: hsl(var(--foreground)); }
.pcpd-pb-form__hint { font-weight: 400; color: hsl(var(--muted-foreground)); }
.pcpd-pb-form input[type="text"], .pcpd-pb-form input[type="email"], .pcpd-pb-form input[type="tel"], .pcpd-pb-form input[type="number"], .pcpd-pb-form input[type="url"], .pcpd-pb-form select { height: 42px; padding: 0 0.75rem; border: 1px solid hsl(var(--border-strong)); border-radius: 0.5rem; background: hsl(var(--background)); font: inherit; font-weight: 400; }
.pcpd-pb-form input[type="file"] { padding: 0.6rem; border: 1px dashed hsl(var(--border-strong)); border-radius: 0.5rem; font-weight: 400; }
.pcpd-pb-form input:focus-visible, .pcpd-pb-form select:focus-visible { outline: 2px solid hsl(var(--yellow)); outline-offset: 1px; }
.pcpd-pb-form__wide { grid-column: 1 / -1; }
.pcpd-pb-form__hint { font-size: 0.78rem; }
.pcpd-pb-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pcpd-pb-form .pcpd-pb-form__check { flex-direction: row; align-items: flex-start; gap: 0.5rem; margin: 1rem 0 0; font-weight: 400; }
.pcpd-pb-form__check input { margin-top: 0.2rem; }
.pcpd-pb-form__status { min-height: 1.4em; margin: 0.8rem 0 0; font-weight: 600; }
.pcpd-pb-form__status.is-ok { color: hsl(var(--success)); }
.pcpd-pb-form__status.is-error { color: hsl(var(--alert)); }
.pcpd-pb-form__actions { margin-top: 0.6rem; }
@media (max-width: 560px) { .pcpd-pb-form__grid { grid-template-columns: minmax(0, 1fr); } .pcpd-pb-form { padding: 1.3rem 1.1rem; } }

.pcpd-pb-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 2.5rem; background: radial-gradient(50rem 26rem at 85% -10%, hsl(var(--yellow) / 0.2), transparent 60%), hsl(var(--surface-2)); }
.pcpd-pb-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.pcpd-pb-hero__eyebrow { display: inline-block; margin: 0 0 0.8rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: hsl(var(--yellow)); color: hsl(var(--yellow-foreground)); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.pcpd-pb-hero__title { margin: 0 0 0.9rem; font-family: "Space Grotesk", "Inter", sans-serif; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; max-width: 18ch; text-wrap: balance; }
.pcpd-pb-hero__lede { max-width: 60ch; font-size: 1.1rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.pcpd-pb-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }
.pcpd-pb-hero__badge { display: grid; place-items: center; align-content: center; width: clamp(150px, 20vw, 220px); aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(hsl(var(--yellow)) 0 10deg, hsl(45 100% 44%) 10deg 20deg); color: hsl(var(--yellow-foreground)); box-shadow: var(--glow-yellow); text-align: center; animation: pcpd-pb-spin 1s var(--ease-spring) both; }
.pcpd-pb-hero__badge span { font-family: "Space Grotesk", "Inter", sans-serif; font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 700; line-height: 1; }
.pcpd-pb-hero__badge small { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; }
@keyframes pcpd-pb-spin { from { opacity: 0; transform: rotate(-120deg) scale(0.6); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .pcpd-pb-hero__inner { grid-template-columns: minmax(0, 1fr); } .pcpd-pb-hero__badge { width: 130px; } }
.pcpd-pb-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: pb; }
.pcpd-pb-steps li { counter-increment: pb; position: relative; padding: 1.2rem 1.2rem 1.2rem 3.6rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); line-height: 1.55; color: hsl(var(--muted-foreground)); }
.pcpd-pb-steps li strong { display: block; color: hsl(var(--foreground)); }
.pcpd-pb-steps li::before { content: counter(pb); position: absolute; left: 1rem; top: 1.1rem; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: hsl(var(--foreground)); color: hsl(var(--yellow)); font-weight: 700; }
.pcpd-pb-terms ol { max-width: 880px; padding-left: 1.3rem; line-height: 1.7; }
.pcpd-pb-terms li { margin-bottom: 0.7rem; color: hsl(var(--muted-foreground)); }
.pcpd-pb-terms li strong { color: hsl(var(--foreground)); }
.pcpd-pb-terms__updated { font-size: 0.85rem; color: hsl(var(--muted-foreground)); }
@media (prefers-reduced-motion: reduce) { .pcpd-pb-modal[open], .pcpd-pb-hero__badge { animation: none; } }

/* ── /compare/ provider comparisons (inc/compare.php) ────────────────────── */
.pcpd-cmp-hero { padding: clamp(2.2rem, 5vw, 4rem) 0 2rem; background: radial-gradient(48rem 24rem at 85% -10%, hsl(var(--yellow) / 0.18), transparent 60%), hsl(var(--surface-2)); }
.pcpd-cmp-eyebrow { display: inline-block; margin: 0 0 0.7rem; padding: 0.28rem 0.7rem; border-radius: 999px; background: hsl(var(--yellow)); color: hsl(var(--yellow-foreground)); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.pcpd-cmp-eyebrow a { color: inherit; text-decoration: none; }
.pcpd-cmp-hero h1 { margin: 0 0 0.8rem; font-family: "Space Grotesk", "Inter", sans-serif; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; max-width: 22ch; text-wrap: balance; }
.pcpd-cmp-hero__lede { max-width: 70ch; font-size: 1.08rem; line-height: 1.6; color: hsl(var(--muted-foreground)); margin: 0; }
/* 12-point price chart on the /compare/ hub. The row text carries the figure; the bar is
   presentation only, so nothing is lost without CSS or with motion turned off. */
.pcpd-cmp-chart { margin: 0 0 1.6rem; padding: 1.2rem 1.3rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
.pcpd-cmp-chart__cap { margin: 0 0 1rem; font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 700; font-size: 1.05rem; }
.pcpd-cmp-chart__rows { display: grid; gap: 0.55rem; }
.pcpd-cmp-bar { display: grid; grid-template-columns: minmax(8.5rem, 14rem) 1fr auto; align-items: center; gap: 0.85rem; }
.pcpd-cmp-bar__name { font-size: 0.93rem; line-height: 1.25; }
.pcpd-cmp-bar__name a { color: inherit; text-decoration: none; border-bottom: 1px solid hsl(var(--border)); }
.pcpd-cmp-bar__name a:hover { border-bottom-color: currentColor; }
.pcpd-cmp-bar__track { height: 1.35rem; border-radius: 999px; background: hsl(var(--surface-2)); overflow: hidden; }
.pcpd-cmp-bar__fill { display: block; height: 100%; width: var(--w); border-radius: 999px; background: hsl(var(--muted-foreground) / 0.45); animation: pcpd-cmp-grow 900ms cubic-bezier(.22,.8,.3,1) both; }
.pcpd-cmp-bar__val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.95rem; }
.pcpd-cmp-bar.is-us .pcpd-cmp-bar__name { font-weight: 700; }
.pcpd-cmp-bar.is-us .pcpd-cmp-bar__fill { background: hsl(var(--yellow)); }
@keyframes pcpd-cmp-grow { from { width: 0; } to { width: var(--w); } }
@media (prefers-reduced-motion: reduce) { .pcpd-cmp-bar__fill { animation: none; } }
@media (max-width: 640px) {
	.pcpd-cmp-bar { grid-template-columns: 1fr auto; }
	.pcpd-cmp-bar__track { grid-column: 1 / -1; }
}
.pcpd-cmp-tablewrap { overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.pcpd-cmp-table { width: 100%; min-width: 640px; border-collapse: collapse; background: hsl(var(--card)); }
.pcpd-cmp-table th, .pcpd-cmp-table td { padding: 0.9rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid hsl(var(--border)); }
.pcpd-cmp-table tbody tr:last-child > * { border-bottom: 0; }
.pcpd-cmp-table thead th { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); }
.pcpd-cmp-table tbody th { font-weight: 700; width: 22%; }
.pcpd-cmp-table td { color: hsl(var(--muted-foreground)); }
.pcpd-cmp-table td span { display: block; font-size: 0.82rem; }
.pcpd-cmp-table .is-us { background: hsl(var(--yellow-tint) / 0.5); color: hsl(var(--foreground)); }
.pcpd-cmp-table tr.is-us th { background: hsl(var(--yellow-tint) / 0.5); }
.pcpd-cmp-note { margin: 0.9rem 0 0; font-size: 0.84rem; color: hsl(var(--muted-foreground)); }
.pcpd-cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.pcpd-cmp-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.2rem 1.3rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); color: hsl(var(--foreground)); text-decoration: none; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
.pcpd-cmp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pcpd-cmp-card span { color: hsl(var(--muted-foreground)); font-size: 0.9rem; line-height: 1.5; }
.pcpd-cmp-card__go { color: hsl(var(--foreground)); font-weight: 600; font-size: 0.85rem !important; }
.pcpd-cmp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.5rem); }
.pcpd-cmp-cols h2 { margin-top: 0; font-size: 1.25rem; }
.pcpd-cmp-list { margin: 0; padding-left: 1.1rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.pcpd-cmp-list li { margin-bottom: 0.5rem; }
.pcpd-cmp-verdict { padding: 1.4rem 1.5rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
.pcpd-cmp-verdict--us { border-color: hsl(var(--yellow)); background: hsl(var(--yellow-tint) / 0.35); }
.pcpd-cmp-best { margin: 0.9rem 0 0; font-weight: 600; color: hsl(var(--foreground)); }
.pcpd-cmp-honest { padding: 1.3rem 1.4rem; border-left: 4px solid hsl(var(--yellow)); border-radius: 0 var(--radius) var(--radius) 0; background: hsl(var(--surface-2)); }
.pcpd-cmp-honest h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.pcpd-cmp-honest p { margin: 0; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.pcpd-cmp-checklist { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.pcpd-cmp-checklist li { padding: 0.9rem 1.1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); line-height: 1.6; color: hsl(var(--muted-foreground)); }
.pcpd-cmp-checklist strong { color: hsl(var(--foreground)); }
.pcpd-cmp-faq { display: grid; gap: 0.6rem; max-width: 860px; margin: 1rem 0 1.5rem; }
.pcpd-cmp-faq details { border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
.pcpd-cmp-faq summary { cursor: pointer; padding: 0.9rem 1.1rem; font-weight: 600; }
.pcpd-cmp-faq p { margin: 0; padding: 0 1.1rem 1rem; color: hsl(var(--muted-foreground)); line-height: 1.6; }
.pcpd-cmp-next { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.2rem 0; }
@media (max-width: 760px) { .pcpd-cmp-cols { grid-template-columns: minmax(0, 1fr); } }

/* "How PointCPD works" — the same ring-and-steps widget as /pricing/ (pointcpd-pricing
   style/script, enqueued on every /compare/ view by inc/pricing-page.php). */
.pcpd-cmp-works__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .pcpd-cmp-works__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Phone checkout: the sidebar collapses to an "Order summary $x" bar whose toggle is the
   title div, not a button (James, 22 Sep 2026: "it should not be collapsible"). site.js opens it
   and locks it; this removes the chevron, the button affordance and the blank band above. */
.wc-block-components-checkout-order-summary__title-icon { display: none !important; }
.wc-block-components-checkout-order-summary__title[role="button"] { cursor: default; padding-top: 0 !important; margin-top: 0 !important; }
.wc-block-components-sidebar .wc-block-components-notices:empty,
.wc-block-components-sidebar .wc-block-components-notices__snackbar:empty { display: none; }
@media (max-width: 900px) {
	.wc-block-components-sidebar.is-sticky { position: static; padding: 0.9rem 1rem 1.1rem; }
	.wc-block-components-checkout-order-summary__title { padding-bottom: 0.6rem; }
	.wc-block-components-checkout-order-summary__content { padding-top: 0; }
}
/* WooCommerce's phone stylesheet zeroes the sidebar padding after hydration; the card needs its gutter. */
@media (max-width: 900px) {
	.wc-block-components-sidebar,
	.wc-block-components-sidebar.is-sticky { padding: 0.9rem 1rem 1.1rem !important; }
}

/* Express pay is for logged-in buyers only (inc/auth.php); guests never see the block or its rule. */
body.woocommerce-checkout:not(.logged-in) .wc-block-components-express-payment,
body.woocommerce-checkout:not(.logged-in) .wc-block-components-express-payment-continue-rule,
body.woocommerce-checkout:not(.logged-in) .wp-block-woocommerce-checkout-express-payment-block { display: none !important; }

/* ── Claims and answer-engine FAQ (inc/claims.php, inc/aeo.php) ───────────── */
.pcpd-claims__h, .pcpd-aeo__h { font-family: "Space Grotesk", "Inter", sans-serif; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; margin: 0 0 1.4rem; max-width: 24ch; text-wrap: balance; }
.pcpd-claims__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pcpd-claims__item { padding: 1.2rem 1.3rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); border-left: 4px solid hsl(var(--yellow)); }
.pcpd-claims__claim { margin: 0 0 0.55rem; font-family: "Space Grotesk", "Inter", sans-serif; font-size: 1.05rem; line-height: 1.25; }
.pcpd-claims__answer { margin: 0 0 0.7rem; font-size: 0.95rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.pcpd-claims__proof { margin: 0; font-size: 0.86rem; }
.pcpd-claims__proof a { color: inherit; text-underline-offset: 3px; }
.pcpd-claims__list--compact { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pcpd-claims__list--compact .pcpd-claims__item { padding: 0.85rem 1rem; }
.pcpd-claims__note { margin: 1.2rem 0 0; font-size: 0.82rem; line-height: 1.55; color: hsl(var(--muted-foreground)); max-width: 80ch; }
.pcpd-aeo__list { display: grid; gap: 0.6rem; }
.pcpd-aeo__item { border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); padding: 0.9rem 1.1rem; }
.pcpd-aeo__item summary { cursor: pointer; list-style: none; }
.pcpd-aeo__item summary::-webkit-details-marker { display: none; }
.pcpd-aeo__item summary h3 { display: inline; font-family: "Space Grotesk", "Inter", sans-serif; font-size: 1rem; }
.pcpd-aeo__item[open] summary h3 { color: hsl(var(--foreground)); }
.pcpd-aeo__item p { margin: 0.7rem 0 0; font-size: 0.95rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }

/* Course page: guides, templates and articles that name this course (inc/internal-links.php). */
.pcpd-course-related { margin: 2.5rem 0 0; padding-top: 1.75rem; border-top: 1px solid hsl(var(--border)); }
.pcpd-course-related h2 { font-size: 1.25rem; margin: 0 0 0.9rem; }
.pcpd-course-related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pcpd-course-related__list li { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.pcpd-course-related__kind {
	flex: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
	color: hsl(var(--muted-foreground)); min-width: 6.5rem;
}

/* ── home page tidy (James, 8 Oct 2026) ───────────────────────────────────
   Selling points: eight cards as two even rows of four, an icon on each in
   place of a number. Courses live now: eight cards, four across. The offer's
   "Choose a package" button spans the column so it lines up with the email
   row under it. The trust strip's rules sit at the content width, not the
   full window, and the section after it drops its own top rule so there is
   one line between them, not two. */
.pcpd-feature__icon {
	display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center;
	border-radius: 0.6rem; background: hsl(var(--yellow) / 0.18); color: hsl(var(--foreground));
	margin-bottom: 1rem; transition: background-color 0.25s var(--ease-out);
}
.pcpd-feature:hover .pcpd-feature__icon { background: hsl(var(--yellow)); }
.pcpd-usps__grid .pcpd-feature h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1100px) {
	.pcpd-usps__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pcpd-courses-teaser .pcpd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 1099px) {
	.pcpd-usps__grid, .pcpd-courses-teaser .pcpd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pcpd-usps__grid .pcpd-feature h3 { white-space: normal; }
}
@media (max-width: 1099px) and (min-width: 700px) {
	.pcpd-courses-teaser .pcpd-grid > :nth-child(n+7) { display: none; }
}
@media (max-width: 699px) {
	.pcpd-usps__grid .pcpd-feature h3 { white-space: normal; }
	.pcpd-courses-teaser .pcpd-grid > :nth-child(n+5) { display: none; }
}
.pcpd-hero__offer-cta { display: flex; width: 100%; justify-content: center; box-sizing: border-box; }
.pcpd-trust { border-top: 0; border-bottom: 0; padding: 0; }
.pcpd-trust__list {
	max-width: var(--container); margin: 0 auto; box-sizing: border-box;
	padding: 1.25rem 1.5rem; border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border));
}
.pcpd-usps { border-top: 0 !important; }

/* "<provider> reviews" answer on the comparison pages (compare.php). */
.pcpd-cmp-reviews {
	margin: 2rem 0 0; padding: 1.4rem 1.5rem; border-radius: 12px;
	background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
}
.pcpd-cmp-reviews h2 { font-size: 1.2rem; margin: 0 0 0.6rem; }
.pcpd-cmp-reviews p { margin: 0 0 0.6rem; }
.pcpd-cmp-reviews p:last-child { margin-bottom: 0; }

/* ── Licence listing: read as a record, not a landing page ──────────────────
   James asked (9 Oct 2026) for this to look like NSW Fair Trading. It must not:
   a private register dressed as a government one is misleading, and every listing
   carries "PointCPD is not a government service" for that reason. What it gets
   instead is the formality of a record — a reference number set first and large,
   ruled label/value rows, a dated verification stamp and restrained ink-and-slate
   colour — all in PointCPD's own palette. Authority through structure, not costume. */
.pcpd-lcheck--listing { max-width: 56rem; }

.pcpd-lcheck__record {
	margin: 0 0 1.25rem;
	padding: 1.25rem 1.5rem 1.1rem;
	border: 1px solid hsl(var(--border-strong));
	border-top: 4px solid hsl(var(--foreground));
	border-radius: 4px;
	background: hsl(var(--card));
}
.pcpd-lcheck__record-kicker {
	margin: 0 0 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
}
.pcpd-lcheck__record-no {
	margin: 0;
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}
.pcpd-lcheck__record-name { margin: 0.15rem 0 0.8rem; font-size: 1.1rem; color: hsl(var(--muted-foreground)); }
.pcpd-lcheck__record-status { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: baseline; }
.pcpd-lcheck__record-stamp { font-size: 0.82rem; color: hsl(var(--muted-foreground)); }

.pcpd-lcheck__summary { margin: 0 0 1.5rem; font-size: 1.02rem; }

/* Ruled label/value rows: the shape of a register entry. */
.pcpd-lcheck__facts {
	display: grid;
	grid-template-columns: minmax(10rem, 15rem) 1fr;
	gap: 0;
	margin: 0 0 1.5rem;
	border-top: 1px solid hsl(var(--border));
}
.pcpd-lcheck__facts dt,
.pcpd-lcheck__facts dd {
	margin: 0;
	padding: 0.7rem 0.9rem 0.7rem 0;
	border-bottom: 1px solid hsl(var(--border));
}
.pcpd-lcheck__facts dt {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
}
.pcpd-lcheck__facts dd { font-variant-numeric: tabular-nums; }
@media (max-width: 34rem) {
	.pcpd-lcheck__facts { grid-template-columns: 1fr; }
	.pcpd-lcheck__facts dt { padding-bottom: 0.1rem; border-bottom: 0; }
}

/* PointCPD's own assertion sits apart from the register's facts, and reads quieter
   when there is nothing to assert. */
.pcpd-lcheck--listing .pcpd-lcheck__cpd { border-radius: 4px; }
.pcpd-lcheck--listing .pcpd-lcheck__cpd--no {
	background: transparent;
	border: 1px dashed hsl(var(--border-strong));
}
.pcpd-lcheck--listing .pcpd-lcheck__cpd--no .pcpd-lcheck__cpd-badge {
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.pcpd-lcheck--listing .pcpd-upsell { margin-top: 2rem; }
.pcpd-lcheck--listing .pcpd-verify__note {
	padding: 0.9rem 1.1rem;
	border-left: 3px solid hsl(var(--foreground));
	background: hsl(var(--muted));
	font-size: 0.92rem;
}

/* Phone, top right of the header (James, 11 Oct 2026). Number on desktop, icon-only on
   narrow screens so the header still fits; tap-to-call either way. */
.pcpd-header__phone {
	display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0 0.6rem;
	color: hsl(var(--yellow)); font-size: 0.9rem; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
/* Same type as the menu links beside it, and the same hover: a colour change, no pill (James, 11 Oct 2026). */
.pcpd-header__phone:hover { color: hsl(var(--background)); }
.pcpd-header__actions .pcpd-btn { font-size: 0.9rem; font-weight: 500; line-height: 1; }
@media (max-width: 1100px) {
	.pcpd-header__phone { padding: 0; width: 40px; justify-content: center; }
	.pcpd-header__phone-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Course page (11 Oct 2026 audit): buy button in the header, "What's inside", folded disclaimer. */
.pcpd-course-hero__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 1.5rem 0 0; }
.pcpd-course-hero__packs { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: hsl(var(--yellow)); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pointcpd-course__inside { margin: 2rem 0; padding: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
.pointcpd-course__inside h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.pointcpd-course__inside ol { margin: 0 0 0.75rem; padding-left: 1.4rem; display: grid; gap: 0.35rem; }
.pointcpd-course__inside p { margin: 0; color: hsl(var(--muted-foreground)); }
.pcpd-disclaimer--folded { margin: 2rem 0; padding: 0.9rem 1.1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.pcpd-disclaimer--folded summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.pcpd-disclaimer--folded p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.pcpd-coursesearch { margin: 0 0 1.5rem; }
.pcpd-coursesearch input { width: 100%; max-width: 32rem; box-sizing: border-box; padding: 0.85rem 1rem; font: inherit; font-size: 1rem; border: 2px solid hsl(var(--border)); border-radius: calc(var(--radius) - 0.25rem); background: #fff; }
.pcpd-coursesearch input:focus { outline: 3px solid hsl(var(--yellow)); outline-offset: 1px; border-color: hsl(var(--foreground)); }
.pcpd-coursesearch__none { margin: 1rem 0 0; color: hsl(var(--muted-foreground)); }
.pcpd-grid > [hidden] { display: none !important; }
/* /compare/: one chart per licence term, side by side on wide screens (14 Oct 2026). */
.pcpd-cmp-charts { display: grid; gap: 1rem; margin-bottom: 1.6rem; }
.pcpd-cmp-charts .pcpd-cmp-chart { margin: 0; }
@media (min-width: 1200px) { .pcpd-cmp-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* Buttons never carry the link underline (James, 26 Oct 2026). The paragraph-link rule
   above (.pcpd-main p a…) also caught button-styled links sitting inside a <p>, such as
   the course player's "Download the PDF guide" and "Go to assessment". */
.pcpd-main a.pcpd-action, .pcpd-main a.pcpd-action *,
.pcpd-main a.pcpd-btn, .pcpd-main a.pcpd-btn *, .pcpd-main a[class*="pcpd-btn"],
.pcpd-main a.pointcpd-btn, .pcpd-main a.button, .pcpd-main a.wp-element-button,
.pcpd-main a.skip, .pcpd-main a.skip * { text-decoration: none !important; }
/* Two-line buttons: both lines one width, set by site.js (fitPairs). */
.pcpd-action__small, .pcpd-action__big, .skip__small, .skip__big { white-space: nowrap; }

/* Checkout order summary is a dark panel: its links (coupon [Remove] and any WooCommerce
   adds later) inherited charcoal text, black on black (James, 26 Oct 2026). */
#order_review a:not(.pcpd-btn):not(.button) { color: hsl(var(--yellow)); text-decoration: underline; text-underline-offset: 2px; }
#order_review a:not(.pcpd-btn):not(.button):hover { color: hsl(var(--background)); }