/* ============================================================
   VITA Pulse main stylesheet
   ============================================================
   Organised top-down:
     1. Tokens (CSS custom properties)
     2. Reset & base
     3. Typography
     4. Layout primitives (container, section, kicker, etc.)
     5. Chrome (top bar, nav, member bar, footer)
     6. Buttons & links
     7. Cards & content blocks
     8. Hero & landing-page specifics
     9. Library, cases, articles archives
     10. Single entry & paywall
     11. Gold gate
     12. Animations & motion
     13. Accessibility & utility
============================================================ */


/* -----------------------------------------------------------
   1. TOKENS
   ----------------------------------------------------------- */
:root {

	/* Brand colours */
	--vp-navy: #215079;
	--vp-navy-deep: #18395A;
	--vp-teal: #0D8389;
	--vp-teal-dark: #0D7377;
	--vp-teal-light: #0DA0A8;
	--vp-rose: #B85379;
	--vp-rose-dark: #9B3F62;

	/* Neutrals */
	--vp-charcoal: #2C3E50;
	--vp-dark-grey: #4A5A6B;
	--vp-mid-grey: #6B7B8D;
	--vp-light-grey: #E8ECF0;
	--vp-off-white: #F5F7FA;
	--vp-white: #FFFFFF;

	/* Typography */
	--font-display: "Barlow Condensed", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;
	--font-serif: "Source Serif 4", Georgia, serif;

	/* Spacing scale (8px base) */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--space-3xl: 72px;
	--space-4xl: 96px;
	--space-5xl: 128px;
	--space-4xl: 96px;

	/* Layout */
	--container-max: 1200px;
	--container-padding: clamp(20px, 4vw, 48px);
	--top-bar-height: 36px;
	--nav-height: 72px;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(33, 80, 121, 0.06);
	--shadow-md: 0 4px 12px rgba(33, 80, 121, 0.08);
	--shadow-lg: 0 8px 24px rgba(33, 80, 121, 0.10);
}


/* -----------------------------------------------------------
   2. RESET & BASE
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--vp-charcoal);
	background: var(--vp-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

a { color: var(--vp-teal); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--vp-teal-dark); }

ul, ol { padding-left: 1.25em; margin: 0 0 1em; }

blockquote {
	margin: var(--space-lg) 0;
	padding-left: var(--space-md);
	border-left: 3px solid var(--vp-teal);
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--vp-dark-grey);
}

::selection { background: var(--vp-teal); color: var(--vp-white); }


/* -----------------------------------------------------------
   3. TYPOGRAPHY
   ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--vp-navy);
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 var(--space-md);
}

h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.375rem, 2vw, 1.625rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; }

p { margin: 0 0 var(--space-md); }

.lede {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.55;
	color: var(--vp-dark-grey);
	max-width: 60ch;
}

.kicker {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vp-teal);
	margin-bottom: var(--space-md);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.kicker::before {
	content: "";
	width: 24px;
	height: 1px;
	background: currentColor;
}


/* -----------------------------------------------------------
   4. LAYOUT PRIMITIVES
   ----------------------------------------------------------- */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.section { padding: var(--space-3xl) 0; }
.section--off { background: var(--vp-off-white); }
.section--dark { background: var(--vp-navy); color: var(--vp-white); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--vp-white); }
.section--dark .kicker { color: var(--vp-teal-light); }

.section-header { max-width: 720px; margin-bottom: var(--space-2xl); }


/* -----------------------------------------------------------
   5. CHROME top bar, nav, member bar, footer
   ----------------------------------------------------------- */

/* Top bar */
.top-bar {
	background: var(--vp-navy-deep);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8125rem;
	white-space: nowrap;
	overflow: hidden;
}
.top-bar-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 8px var(--container-padding);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
}
.top-bar a { color: inherit; }
.top-bar a:hover { color: var(--vp-teal-light); }
.top-bar .sep { opacity: 0.4; margin: 0 8px; }

/* Primary navigation */
.primary-nav {
	background: var(--vp-white);
	border-bottom: 1px solid var(--vp-light-grey);
	position: relative;
	z-index: 50;
}
.primary-nav-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: flex;
	align-items: center;
	gap: var(--space-md);
	height: var(--nav-height);
}

.nav-brand { display: flex; align-items: center; flex-shrink: 0; }
.nav-brand-img {
	height: 44px;
	width: auto;
}
.nav-brand-tag {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vp-mid-grey);
	padding-left: var(--space-md);
	border-left: 1px solid var(--vp-light-grey);
	margin-left: 4px;
	white-space: nowrap;
	flex-shrink: 0;
}

@media (max-width: 1280px) {
	.nav-brand-tag { display: none; }
}

.primary-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin: 0 auto 0 var(--space-lg);
	padding: 0;
	flex-wrap: nowrap;
	white-space: nowrap;
}
.primary-menu a {
	color: var(--vp-charcoal);
	font-weight: 500;
	font-size: 0.9375rem;
	position: relative;
	padding: 8px 0;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.primary-menu .current-menu-item a,
.primary-menu .menu-item.active a { color: var(--vp-navy); }
.primary-menu .current-menu-item a::after,
.primary-menu .menu-item.active a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: var(--vp-teal);
}
.primary-menu .menu-item--locked a {
	color: var(--vp-mid-grey);
	opacity: 0.7;
}
.menu-lock {
	width: 11px;
	height: 13px;
	color: var(--vp-mid-grey);
	flex-shrink: 0;
	opacity: 0.7;
	margin-right: 2px;
	vertical-align: -1px;
}

.primary-menu .menu-item--locked .menu-lock {
	color: var(--vp-mid-grey);
}

.primary-menu .menu-item--gold.menu-item--locked .menu-lock {
	color: var(--vp-rose);
	opacity: 0.8;
}

/* Nav CTA visitor button OR member chip */
.nav-cta-group {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.nav-cta-login {
	color: var(--vp-charcoal);
	font-weight: 500;
	font-size: 0.9375rem;
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.nav-cta-login:hover {
	color: var(--vp-teal-dark);
	border-bottom-color: var(--vp-teal);
}

.nav-cta {
	background: var(--vp-teal);
	color: var(--vp-white);
	padding: 12px 22px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background 0.2s ease;
	white-space: nowrap;
	flex-shrink: 0;
}
.nav-cta:hover { background: var(--vp-teal-dark); color: var(--vp-white); }

.nav-cta--member {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 8px;
	background: var(--vp-off-white);
	border: 1px solid var(--vp-light-grey);
	border-radius: 24px;
	color: var(--vp-navy);
}
.nav-cta--member:hover {
	background: var(--vp-white);
	border-color: var(--vp-teal);
	color: var(--vp-teal);
}
.nav-cta-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--vp-teal);
	color: var(--vp-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	font-family: var(--font-display);
}
.nav-cta-name { font-weight: 600; font-size: 0.9375rem; }
.nav-cta-signout {
	font-size: 0.75rem;
	color: var(--vp-mid-grey);
	padding-left: 8px;
	border-left: 1px solid var(--vp-light-grey);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

/* Mobile nav toggle */
.nav-toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	width: 40px;
	height: 40px;
	margin-left: auto;
}
.nav-toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--vp-navy);
	margin: 4px auto;
	transition: transform 0.2s ease;
}

@media (max-width: 1000px) {
	.primary-menu { display: none; }
	.nav-toggle { display: block; }
	.nav-brand-tag { display: none; }
	body.nav-open .primary-menu {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: var(--nav-height);
		left: 0; right: 0;
		background: var(--vp-white);
		padding: var(--space-lg);
		gap: var(--space-md);
		border-bottom: 1px solid var(--vp-light-grey);
		margin: 0;
	}
}

/* Member bar (only renders when logged in) */
.member-bar {
	background: var(--vp-off-white);
	border-bottom: 1px solid var(--vp-light-grey);
	font-size: 0.875rem;
	color: var(--vp-dark-grey);
}
.member-bar-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 10px var(--container-padding);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
}
.member-tier {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}
.member-tier--silver { background: rgba(13, 131, 137, 0.1); color: var(--vp-teal); }
.member-tier--gold { background: rgba(184, 83, 121, 0.1); color: var(--vp-rose); }

/* Footer four-column dark band, matches the demo. The 1.5fr column on the
   left holds the brand mark and tagline; three equal columns on the right
   hold link lists. Stacks 2-up at 900px and 1-up below 500px. */
.footer {
	background: var(--vp-navy-deep);
	color: #fff;
	padding: var(--space-4xl) 0 var(--space-xl);
	margin-top: var(--space-4xl);
	position: relative;
	overflow: hidden;
}

/* Faint teal hairline across the very top of the footer. */
.footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--vp-teal) 50%, transparent);
	opacity: 0.4;
}

.footer-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--space-2xl);
	position: relative;
	z-index: 2;
}

@media (max-width: 900px) {
	.footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
	.footer-inner { grid-template-columns: 1fr; }
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: var(--space-md);
}

.footer-brand-img {
	height: 48px;
	width: auto;
	display: block;
}

.footer-tag {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.9375rem;
	line-height: 1.55;
	max-width: 340px;
	font-family: var(--font-serif);
	font-style: italic;
	margin: 0;
}

.footer h5 {
	font-family: var(--font-body);
	color: var(--vp-white);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin-bottom: var(--space-md);
}

.footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer li { margin-bottom: 10px; }

.footer a,
.footer-text {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.9375rem;
	transition: color 0.15s ease;
}

.footer a:hover { color: var(--vp-teal-light); }

.footer-bottom {
	max-width: var(--container-max);
	margin: var(--space-3xl) auto 0;
	padding: var(--space-lg) var(--container-padding) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-md);
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.8125rem;
	position: relative;
	z-index: 2;
}

.footer-bottom .sep { color: rgba(255, 255, 255, 0.25); margin: 0 4px; }


/* -----------------------------------------------------------
   6. BUTTONS
   ----------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	border: 0;
	transition: all 0.2s ease;
	text-decoration: none;
}
.btn--primary { background: var(--vp-teal); color: var(--vp-white); }
.btn--primary:hover { background: var(--vp-teal-dark); color: var(--vp-white); }

.btn--secondary { background: transparent; color: var(--vp-navy); border: 1.5px solid var(--vp-navy); }
.btn--secondary:hover { background: var(--vp-navy); color: var(--vp-white); }

.btn--gold { background: var(--vp-rose); color: var(--vp-white); }
.btn--gold:hover { background: var(--vp-rose-dark); color: var(--vp-white); }

/* Ghost button for use on dark backgrounds: white text and a soft white
   border that fills in on hover. Pairs with btn--primary in dark CTAs. */
.btn--ghost-light {
	background: transparent;
	color: var(--vp-white);
	border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.btn--ghost-light:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--vp-white);
	border-color: rgba(255, 255, 255, 0.6);
}

.btn--arrow::after { content: "\2192"; transition: transform 0.2s ease; }
.btn--arrow:hover::after { transform: translateX(3px); }


/* -----------------------------------------------------------
   7. CARDS & CONTENT BLOCKS knowledge cards, picks, schedule, rollout, invite
   (Full styles ported in Segment 2 alongside the templates that use them.
   Stub left here so the foundation passes a visual smoke test.)
   ----------------------------------------------------------- */
.card-stub {
	background: var(--vp-white);
	border: 1px solid var(--vp-light-grey);
	border-left: 4px solid var(--vp-teal);
	padding: var(--space-lg);
	box-shadow: var(--shadow-sm);
}


/* -----------------------------------------------------------
   7a. HERO LAYOUT & "INSIDE VITA PULSE" PANEL
   Two-column hero: copy on the left, feature panel on the right.
   Sized to match the demo spec; tall section (~680px min-height) with
   generous top/bottom padding so the columns get real vertical breathing
   room. Atmospheric layered radial gradients add depth without imagery.
   Stacks to a single column below 960px with the panel falling naturally
   below the CTAs (source-order stack).
   ----------------------------------------------------------- */

/* Hero section override of .section--dark: keep the dark background but
   replace the standard padding with the taller hero rhythm. */
.section--dark.hero {
	padding: var(--space-4xl) 0 var(--space-5xl);
	min-height: 680px;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

/* Atmospheric layered background: two large soft radial gradients plus a
   subtle bottom-fade. Creates depth on the dark navy without needing imagery.
   Drifts slowly (24s cycle, ~12px swing) so the hero feels alive but never
   distracts. */
.hero::before {
	content: "";
	position: absolute;
	inset: -20px; /* over-extend so the drift doesn't expose hard edges */
	background:
		radial-gradient(ellipse 1200px 600px at 85% 120%, rgba(13, 131, 137, 0.35), transparent 60%),
		radial-gradient(ellipse 800px 500px at 10% 20%, rgba(33, 80, 121, 0.45), transparent 60%),
		linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
	pointer-events: none;
	animation: heroAtmosphereDrift 24s ease-in-out infinite;
}

@keyframes heroAtmosphereDrift {
	0%   { transform: translate(0, 0); }
	50%  { transform: translate(-12px, 6px); }
	100% { transform: translate(0, 0); }
}

/* Faint vertical 12-column grid lines for structural feel. Very subtle. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: calc(100% / 12) 100%;
	pointer-events: none;
	opacity: 0.6;
}

/* Bring the grid above the decorative pseudo-elements. */
.hero__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--space-3xl);
	align-items: center;
	width: 100%;
}

@media (max-width: 960px) {
	.section--dark.hero {
		min-height: auto;
		padding: var(--space-3xl) 0;
	}
	.hero__grid {
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
	}
}

.hero__copy { min-width: 0; }

/* Hero headline matches the demo type scale: large, tight line-height,
   slight negative tracking. The global h1 scale stays unchanged. */
.hero h1 {
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-lg);
	font-weight: 700;
}

/* Hero lede overrides the global .lede class (which is serif/italic for
   pull-quote use elsewhere). In the hero it reads as standard body copy,
   constrained so it ends well before the panel column. */
.hero .lede {
	font-family: var(--font-body);
	font-style: normal;
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.55;
	font-weight: 400;
	max-width: 560px;
	margin-bottom: var(--space-2xl);
}

.hero__ctas {
	display: flex;
	gap: var(--space-md);
	flex-wrap: wrap;
}

/* Inside VITA Pulse panel: thin teal top accent, layered translucent fill,
   subtle inner border. */
.hero-panel {
	position: relative;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: var(--space-xl);
	border-radius: 2px;
}

.hero-panel::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 3px;
	background: var(--vp-teal);
}

/* The kicker inside the hero panel renders as a plain label (no leading
   dash), matching the demo's hero-panel-label treatment. */
.hero-panel .kicker::before { display: none; }

.hero-panel__title {
	color: var(--vp-white);
	font-family: var(--font-body);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 var(--space-lg);
}

.hero-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hero-panel__item {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-panel__item:first-child { border-top: 0; }

.hero-panel__link {
	display: grid;
	grid-template-columns: 24px 1fr auto;
	gap: 14px;
	align-items: start;
	padding: 14px 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9375rem;
	line-height: 1.45;
	transition: color 0.15s ease;
}
.hero-panel__link:not(.hero-panel__link--static):hover {
	color: var(--vp-white);
}
.hero-panel__link:not(.hero-panel__link--static):hover .hero-panel__num {
	color: var(--vp-white);
}

.hero-panel__num {
	color: var(--vp-teal-light);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
	padding-top: 3px;
	transition: color 0.15s ease;
}

.hero-panel__text { display: block; }

.hero-panel__tier {
	align-self: center;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 10px;
	white-space: nowrap;
}
.hero-panel__tier--silver {
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-panel__tier--gold {
	background: rgba(193, 154, 41, 0.18);
	color: #e3c46b;
	border: 1px solid rgba(193, 154, 41, 0.5);
}

@media (max-width: 480px) {
	.hero-panel { padding: var(--space-lg) var(--space-md); }
	.hero-panel__title { font-size: 1.25rem; }
	.hero-panel__link { grid-template-columns: 24px 1fr; }
	.hero-panel__tier { grid-column: 2; justify-self: start; margin-top: 4px; }
}


/* -----------------------------------------------------------
   7b. METRICS BAND full-bleed dark band with count-up numbers
   ----------------------------------------------------------- */
.metrics-band {
	scroll-margin-top: var(--space-xl);
	background: var(--vp-navy-deep);
	color: var(--vp-white);
	padding: var(--space-3xl) 0;
	position: relative;
	overflow: hidden;
}

/* Subtle radial teal glow centred behind the numbers */
.metrics-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(13, 160, 168, 0.08) 0%, transparent 65%);
	pointer-events: none;
}

.metrics-band-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	row-gap: var(--space-xl);
	position: relative;
	z-index: 1;
}

@media (max-width: 1100px) {
	.metrics-band-inner { grid-template-columns: repeat(3, 1fr); gap: 0; row-gap: var(--space-xl); }
}

@media (max-width: 800px) {
	.metrics-band-inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
}

@media (max-width: 540px) {
	.metrics-band-inner { grid-template-columns: 1fr; }
}

.metrics-band .metric {
	padding: 0 var(--space-lg);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* Border resets per breakpoint: the leftmost cell of each row should
   never have a left border. With 6 cells, that's cell 1 on the wide
   desktop. With 3 cells, it's cells 1 and 4 (3n+1). With 2 cells,
   it's the odd ones (2n+1). */
.metrics-band .metric:first-child {
	border-left: 0;
	padding-left: 0;
}

@media (max-width: 1100px) {
	.metrics-band .metric { border-left: 1px solid rgba(255, 255, 255, 0.08); padding-left: var(--space-lg); }
	.metrics-band .metric:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}

@media (max-width: 800px) {
	.metrics-band .metric { border-left: 1px solid rgba(255, 255, 255, 0.08); padding-left: var(--space-lg); }
	.metrics-band .metric:nth-child(3n+1) { border-left: 1px solid rgba(255, 255, 255, 0.08); padding-left: var(--space-lg); }
	.metrics-band .metric:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}

@media (max-width: 540px) {
	.metrics-band .metric,
	.metrics-band .metric:nth-child(3n+1),
	.metrics-band .metric:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}

.metrics-band .metric-value {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.25rem, 3vw, 3rem);
	color: var(--vp-white);
	line-height: 1;
	margin-bottom: var(--space-md);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums; /* keeps width steady as digits change during count-up */
}

.metrics-band .metric-label {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.metrics-band-foot {
	max-width: var(--container-max);
	margin: var(--space-2xl) auto 0;
	padding: var(--space-md) var(--container-padding) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: relative;
	z-index: 1;
}

.metrics-foot-beat {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vp-teal-light);
	animation: beatPulse 2s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes beatPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(1.4); }
}


/* -----------------------------------------------------------
   8. TEASES Silver tease (visitor on a single) and Gold tease (silver on a gold archive)
   Goal: not just "you can't see this", but "look at the breadth of what's here".
   ----------------------------------------------------------- */
.tease {
	position: relative;
	margin-top: var(--space-2xl);
}

/* Silver tease only: white-fade overlay positioned at the top of the card,
   suggesting "the article keeps going behind this". Gold tease has no fade
   because there's no current article to fade out from it's a full takeover. */
.tease--silver .tease-fade {
	position: absolute;
	top: -120px;
	left: 0;
	right: 0;
	height: 200px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 35%, var(--vp-white) 100%);
	pointer-events: none;
	z-index: 1;
}

.tease-card {
	position: relative;
	z-index: 2;
	background: var(--vp-white);
	border-radius: 8px;
	padding: clamp(28px, 4vw, 48px);
	box-shadow: var(--shadow-lg);
	max-width: 920px;
	margin: 0 auto;
}

.tease--silver .tease-card { border-top: 4px solid var(--vp-teal); }
.tease--gold .tease-card { border-top: 4px solid var(--vp-rose); }

.tease-card-header {
	text-align: center;
	max-width: 600px;
	margin: 0 auto var(--space-2xl);
}

.tease-kicker {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--vp-teal);
	margin-bottom: var(--space-sm);
}
.tease-kicker--gold { color: var(--vp-rose); }

.tease-card h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	color: var(--vp-navy);
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin-bottom: var(--space-md);
}

.tease-lede {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--vp-mid-grey);
	font-size: 1rem;
	line-height: 1.55;
	margin-bottom: var(--space-lg);
}

/* "Not a member yet? Apply..." line beneath the Gold tease contact button,
 * shown to signed-out visitors on Toolkit / Opportunities. */
.tease-apply-line {
	margin: var(--space-md) 0 0;
	font-size: 0.875rem;
	color: var(--vp-mid-grey);
}

.tease-apply-line a {
	color: var(--vp-teal);
	font-weight: 600;
}

/* Preview area small cards showing locked content so users can see what they're missing */
.tease-preview {
	margin-top: var(--space-xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--vp-light-grey);
}

.tease-preview-section + .tease-preview-section {
	margin-top: var(--space-xl);
	padding-top: var(--space-xl);
	border-top: 1px dashed var(--vp-light-grey);
}

.tease-preview-label {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vp-mid-grey);
	margin-bottom: var(--space-md);
	text-align: center;
}

.tease-preview-label--gold { color: var(--vp-rose); }

.tease-preview-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

@media (max-width: 760px) {
	.tease-preview-grid { grid-template-columns: 1fr; }
}

.tease-preview-card {
	background: var(--vp-off-white);
	border: 1px solid var(--vp-light-grey);
	border-radius: 4px;
	padding: var(--space-md);
	position: relative;
	min-height: 96px;
}

/* Lock indicator in top-right subtle hint that this is gated content.
   Drawn in CSS rather than using an emoji so it renders reliably everywhere. */
.tease-preview-card::after,
.tease-preview-card::before {
	content: "";
	position: absolute;
	right: 12px;
	background: var(--vp-mid-grey);
	opacity: 0.4;
	pointer-events: none;
}
/* Lock body */
.tease-preview-card::after {
	top: 14px;
	width: 9px;
	height: 7px;
	border-radius: 1px;
}
/* Lock shackle */
.tease-preview-card::before {
	top: 9px;
	right: 14px;
	width: 5px;
	height: 5px;
	border: 1.5px solid var(--vp-mid-grey);
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
	background: transparent;
	opacity: 0.4;
}

.tease-preview-card--gold {
	background: rgba(184, 83, 121, 0.04);
	border-color: rgba(184, 83, 121, 0.2);
}

.tease-preview-topic {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--vp-teal);
	margin-bottom: 6px;
}

.tease-preview-card--gold .tease-preview-topic { color: var(--vp-rose); }

.tease-preview-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--vp-navy);
	line-height: 1.25;
}

/* Stat strip only on Silver tease, shows platform breadth */
.tease-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-top: var(--space-xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--vp-light-grey);
}

/* When the stats bar sits directly inside a library archive's visitor
 * inner wrapper (i.e. below the apply CTA rather than inside the single
 * tease card), centre it and cap its width so it lines up with the CTA. */
.library-visitor-inner > .tease-stats {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

@media (max-width: 600px) {
	.tease-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
}

.tease-stat {
	text-align: center;
	padding: 0 var(--space-md);
	border-left: 1px solid var(--vp-light-grey);
}
.tease-stat:first-child { border-left: none; }

@media (max-width: 600px) {
	.tease-stat { border-left: none; }
}

.tease-stat-value {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2rem;
	color: var(--vp-navy);
	line-height: 1;
	margin-bottom: 6px;
}

.tease-stat-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vp-mid-grey);
}


/* -----------------------------------------------------------
   8b. KNOWLEDGE LIBRARY ARCHIVE
   Two flavours within one stylesheet: visitors get hero + example
   card + apply CTA; members get hero + search + filter chips +
   A-to-Z nav + grouped letter sections of summary cards.
   ----------------------------------------------------------- */

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

.library-hero {
	padding: var(--space-3xl) 0 var(--space-2xl);
	position: relative;
	overflow: hidden;
}

.library-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 700px 400px at 100% 100%, rgba(13, 131, 137, 0.25), transparent 65%),
		radial-gradient(ellipse 600px 350px at 0% 0%, rgba(33, 80, 121, 0.4), transparent 65%);
	pointer-events: none;
}

.library-hero-inner { position: relative; z-index: 2; }

.library-hero-title {
	color: var(--vp-white);
	font-size: clamp(1.875rem, 4vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0 0 var(--space-md);
	max-width: 880px;
}

.library-hero-lede {
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.55;
	max-width: 560px;
	margin: 0 0 var(--space-xl);
}

.library-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.library-stat {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.65);
	letter-spacing: 0.02em;
}

.library-stat-value {
	font-family: var(--font-display, var(--font-body));
	font-size: 1rem;
	font-weight: 700;
	color: var(--vp-white);
}

.library-stat-value--small { font-size: 0.875rem; font-weight: 600; }

.library-stat-label { white-space: nowrap; }

/* ---- Visitor view ----------------------------------------- */

.library-visitor-body {
	background: var(--vp-white);
	padding: var(--space-3xl) 0 var(--space-3xl);
}

.library-visitor-inner {
	max-width: 880px;
	margin: 0 auto;
}

.library-example-label {
	display: inline-block;
	background: rgba(13, 131, 137, 0.08);
	color: var(--vp-teal-dark);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 2px;
	margin-bottom: var(--space-md);
}

.library-example-card {
	margin-bottom: var(--space-2xl);
	pointer-events: none; /* example is illustrative; not clickable */
	cursor: default;
}

.library-apply-cta {
	background: var(--vp-off-white);
	border-top: 3px solid var(--vp-teal);
	padding: var(--space-2xl) var(--space-xl);
	text-align: center;
}

.library-apply-kicker {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--vp-teal);
	margin-bottom: var(--space-sm);
}

.library-apply-title {
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	line-height: 1.2;
	color: var(--vp-navy);
	margin: 0 auto var(--space-md);
	max-width: 640px;
	letter-spacing: -0.01em;
}

.library-apply-lede {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--vp-dark-grey);
	max-width: 580px;
	margin: 0 auto var(--space-lg);
}

/* ---- Member view ------------------------------------------ */

.library-member-body {
	background: var(--vp-white);
	padding: var(--space-2xl) 0 var(--space-3xl);
}

.library-member-inner { position: relative; }

/* Search bar */
.search-bar {
	display: flex;
	align-items: center;
	gap: 0;
	background: #fff;
	border: 1px solid var(--vp-light-grey);
	border-radius: 2px;
	padding: 4px 4px 4px var(--space-md);
	margin-bottom: var(--space-lg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-bar:focus-within {
	border-color: var(--vp-teal);
	box-shadow: 0 0 0 3px rgba(13, 131, 137, 0.12);
}

.search-bar-icon {
	color: var(--vp-mid-grey);
	display: inline-flex;
	margin-right: 8px;
}

.search-bar input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 0.9375rem;
	font-family: inherit;
	color: var(--vp-charcoal);
	padding: 10px 0;
}

.search-bar input::placeholder { color: var(--vp-mid-grey); }

.search-bar-btn {
	padding: 10px 18px;
	background: var(--vp-navy);
	color: var(--vp-white);
	border: 0;
	border-radius: 2px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease;
}

.search-bar-btn:hover { background: var(--vp-teal); }

/* Filter row */
.filter-row {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: var(--space-xl);
}

.filter-row-label {
	font-size: 0.75rem;
	color: var(--vp-mid-grey);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-weight: 600;
	margin-right: var(--space-sm);
}

.filter-pill {
	padding: 7px 14px;
	background: #fff;
	border: 1px solid var(--vp-light-grey);
	border-radius: 2px;
	font-size: 0.8125rem;
	color: var(--vp-dark-grey);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
	font-family: inherit;
	font-weight: 500;
}

.filter-pill:hover {
	border-color: var(--vp-teal);
	color: var(--vp-teal);
}

.filter-pill.active {
	background: var(--vp-navy);
	border-color: var(--vp-navy);
	color: #fff;
}

/* A to Z bar */
.az-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0 0 var(--space-sm);
	padding: 10px;
	background: #fff;
	border: 1px solid var(--vp-light-grey);
	border-radius: 2px;
}

.az-bar-help {
	font-size: 0.8125rem;
	color: var(--vp-mid-grey);
	margin: 0 0 var(--space-2xl);
	padding: 0 4px;
	font-style: italic;
	line-height: 1.5;
}

.az-letter {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display, var(--font-body));
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--vp-navy);
	text-decoration: none;
	transition: all 0.12s ease;
	border-radius: 2px;
}

.az-letter:hover:not(.disabled):not(.is-empty) {
	background: rgba(13, 131, 137, 0.1);
	color: var(--vp-teal);
}

.az-letter.active,
.az-letter.is-current {
	background: var(--vp-teal);
	color: #fff;
	font-weight: 700;
	cursor: default;
}

.az-letter.disabled,
.az-letter.is-empty {
	color: var(--vp-light-grey);
	cursor: default;
	pointer-events: none;
}

/* Breadcrumb on letter pages */
.library-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: var(--space-md);
	letter-spacing: 0.02em;
}

.library-breadcrumb a {
	color: rgba(255, 255, 255, 0.85);
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.library-breadcrumb a:hover {
	border-bottom-color: rgba(255, 255, 255, 0.5);
}

.library-breadcrumb .sep {
	color: rgba(255, 255, 255, 0.35);
}

/* A to Z section heads */
.az-section {
	margin-bottom: var(--space-3xl);
}

.az-section-head {
	display: flex;
	align-items: baseline;
	gap: var(--space-md);
	padding-bottom: var(--space-md);
	margin-bottom: var(--space-xl);
	border-bottom: 2px solid var(--vp-navy);
}

.az-section-letter {
	font-family: var(--font-display, var(--font-body));
	font-size: 3.5rem;
	font-weight: 700;
	color: var(--vp-navy);
	line-height: 0.9;
	letter-spacing: -0.02em;
}

.az-section-title {
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--vp-mid-grey);
	letter-spacing: 0.05em;
}

.az-section-count {
	margin-left: auto;
	font-size: 0.75rem;
	color: var(--vp-mid-grey);
	letter-spacing: 0.05em;
}

/* "Three most recent" cap: cards beyond the cap carry .is-overflow and
   are hidden by default. They reappear when the section is expanded
   (click "Show all N entries") or when the user is filtering / searching
   (in which case the results root has .is-filtering applied). */
.k-card.is-overflow,
.opp-card.is-overflow,
.tool-card.is-overflow,
.article-card.is-overflow {
	display: none;
}

/* Filter visibility: applied by JS when a card or section doesn't
   match the current search query or filter pill selection. Using a
   class (rather than inline style) keeps the cascade predictable so
   stale visibility from earlier states doesn't leak through. */
.k-card.is-hidden,
.opp-card.is-hidden,
.tool-card.is-hidden,
.article-card.is-hidden,
.az-section.is-hidden {
	display: none !important;
}

.az-section.is-expanded .k-card.is-overflow,
.library-results.is-filtering .k-card.is-overflow,
.az-section.is-expanded .opp-card.is-overflow,
.library-results.is-filtering .opp-card.is-overflow,
.az-section.is-expanded .tool-card.is-overflow,
.library-results.is-filtering .tool-card.is-overflow,
.az-section.is-expanded .article-card.is-overflow,
.library-results.is-filtering .article-card.is-overflow {
	display: flex;
}

.az-section-show-all {
	display: inline-block;
	margin-top: var(--space-lg);
	padding: 10px 18px;
	background: transparent;
	border: 1px solid var(--vp-light-grey);
	border-radius: 2px;
	color: var(--vp-navy);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
	font-family: inherit;
	text-decoration: none;
}

.az-section-show-all:hover {
	border-color: var(--vp-teal);
	background: rgba(13, 131, 137, 0.04);
	color: var(--vp-teal-dark);
}

/* Card grid: 3 columns on desktop, 2 then 1 on smaller screens.
   First card in each section uses k-card--featured which spans
   the whole row with a side-by-side layout. */
.k-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}

@media (max-width: 1000px) { .k-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .k-grid { grid-template-columns: 1fr; } }

/* Standard card */
.k-card {
	background: #fff;
	border: 1px solid var(--vp-light-grey);
	border-left: 4px solid var(--vp-teal);
	padding: var(--space-xl);
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	text-decoration: none;
	color: inherit;
	position: relative;
	border-radius: 2px;
}

.k-card:hover {
	border-color: var(--vp-light-grey);
	border-left-color: var(--vp-navy);
	box-shadow: 0 8px 22px rgba(15, 42, 66, 0.08);
	transform: translateY(-2px);
	color: inherit;
}

.k-card-topic {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vp-teal);
	margin-bottom: var(--space-sm);
}

.k-card-title {
	font-size: 1.125rem;
	line-height: 1.25;
	color: var(--vp-navy);
	margin: 0 0 var(--space-md);
	letter-spacing: -0.01em;
}

.k-card-summary {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--vp-dark-grey);
	margin: 0 0 var(--space-md);
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.k-card-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--vp-light-grey);
	font-size: 0.8125rem;
}

.k-card-updated { color: var(--vp-mid-grey); }

.k-card-cta {
	color: var(--vp-rose, var(--vp-teal-dark));
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Featured (first in each letter group): full row, side-by-side. */
.k-card--featured {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: var(--space-2xl);
	align-items: stretch;
	padding: var(--space-xl);
	border-left-width: 6px;
}

.k-card--featured .k-card-side {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.k-card--featured .k-card-summary {
	margin-bottom: 0;
	font-size: 0.9375rem;
}

.k-card--featured .k-card-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.k-card--featured .k-card-title {
	font-size: 1.5rem;
	margin-bottom: var(--space-md);
}

.k-card--featured .k-card-divider {
	height: 1px;
	background: var(--vp-light-grey);
	margin: 0 0 var(--space-md);
}

.k-card--featured .k-card-foot {
	border-top: 0;
	padding-top: 0;
}

@media (max-width: 700px) {
	.k-card--featured {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
}

/* Empty + no-results states */
.library-empty-state,
.library-no-results {
	padding: var(--space-2xl);
	background: var(--vp-off-white);
	border: 1px dashed var(--vp-light-grey);
	border-radius: 2px;
	text-align: center;
	color: var(--vp-mid-grey);
}


/* -----------------------------------------------------------
   8c. ARTICLES archive grid + card variants
   Articles tile in a 3-column grid (2fr + 1fr + 1fr) with a dark
   navy "feature" treatment for the most recent piece. The feature
   card uses serif italic body text and an atmospheric teal glow.
   Below the breakpoint everything stacks single-column.
   ----------------------------------------------------------- */

.article-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}

@media (max-width: 960px) {
	.article-grid { grid-template-columns: repeat(2, 1fr); }
}

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

.article-card {
	background: #fff;
	border: 1px solid var(--vp-light-grey);
	padding: var(--space-xl);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	position: relative;
	border-radius: 2px;
}

.article-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(15, 42, 66, 0.08);
	border-color: var(--vp-teal);
	color: inherit;
}

.article-card--feature {
	grid-column: 1 / -1;
	background: var(--vp-navy-deep);
	color: #fff;
	border-color: var(--vp-navy-deep);
	padding: var(--space-2xl);
	overflow: hidden;
}

.article-card--feature::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 400px 300px at 100% 100%, rgba(13, 131, 137, 0.3), transparent 60%);
	pointer-events: none;
}

.article-card--feature > * { position: relative; z-index: 2; }

.article-card--feature:hover {
	color: #fff;
	border-color: var(--vp-navy-deep);
	box-shadow: 0 14px 32px rgba(15, 42, 66, 0.18);
}

.article-card-eyebrow {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--vp-teal);
	margin-bottom: 0.5rem;
}

.article-card-badge {
	display: inline-block;
	padding: 4px 10px;
	background: var(--vp-teal);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border-radius: 2px;
	align-self: flex-start;
	margin-bottom: var(--space-md);
}

.article-card h3 {
	font-size: 1.375rem;
	margin: 0 0 var(--space-sm);
	line-height: 1.2;
	color: var(--vp-navy);
	letter-spacing: -0.01em;
}

.article-card--feature h3 {
	color: #fff;
	font-size: 1.875rem;
	margin-bottom: var(--space-md);
	line-height: 1.15;
}

.article-card p {
	color: var(--vp-dark-grey);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0 0 var(--space-md);
	flex-grow: 1;
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* When a card has no lede paragraph the title takes the flex-grow
   so the meta strip still pins to the bottom of the card and all
   cards in a row stay the same height. */
.article-card h3:last-of-type {
	margin-bottom: var(--space-md);
}
.article-card:not(:has(p)) h3 {
	flex-grow: 1;
}

.article-card--feature p {
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-line-clamp: 6;
}

.article-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--vp-light-grey);
	font-size: 0.75rem;
	color: var(--vp-mid-grey);
	letter-spacing: 0.03em;
	margin-top: auto;
}

.article-card--feature .article-card-meta {
	border-top-color: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.65);
}

/* Visitor example uses the feature card style but isn't clickable. */
.library-visitor-body .article-card--feature.library-example-card {
	pointer-events: none;
	cursor: default;
	margin-bottom: var(--space-2xl);
}


/* -----------------------------------------------------------
   8d. OPPORTUNITIES + TOOLKIT cards and grids
   Both are simpler than the knowledge / case / article patterns.
   Opportunities use a plain white card with a sector kicker, title,
   one-sentence headline angle, and a "view opportunity" link.
   Toolkit uses a white card with a type kicker, title, sector
   meta line, and a download icon CTA. Both grids auto-fill at
   reasonable widths and stack on narrow viewports.
   ----------------------------------------------------------- */

.opp-grid,
.tool-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-lg);
}

.opp-card,
.tool-card {
	background: #fff;
	border: 1px solid var(--vp-light-grey);
	border-left: 4px solid var(--vp-teal);
	padding: var(--space-xl);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	border-radius: 2px;
}

.opp-card:hover,
.tool-card:hover {
	border-left-color: var(--vp-navy);
	box-shadow: 0 8px 22px rgba(15, 42, 66, 0.08);
	transform: translateY(-2px);
	color: inherit;
}

.opp-card-sector,
.tool-card-type {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vp-teal);
	margin-bottom: var(--space-sm);
}

.opp-card-title,
.tool-card-title {
	font-size: 1.125rem;
	line-height: 1.25;
	color: var(--vp-navy);
	margin: 0 0 var(--space-md);
	letter-spacing: -0.01em;
}

.opp-card-headline {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--vp-dark-grey);
	margin: 0 0 var(--space-md);
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tool-card-meta {
	font-size: 0.8125rem;
	color: var(--vp-mid-grey);
	margin: 0 0 var(--space-md);
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.opp-card-cta,
.tool-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--vp-rose);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	margin-top: auto;
	padding-top: var(--space-md);
	border-top: 1px solid var(--vp-light-grey);
}

.tool-card-cta svg { color: var(--vp-rose); }

/* Visitor examples: same card style but unclickable. */
.opp-card--example,
.tool-card--example {
	pointer-events: none;
	cursor: default;
	margin-bottom: var(--space-2xl);
}


/* -----------------------------------------------------------
   8a. ENTRY (single knowledge / case / article read view)
   Layout: navy entry head with breadcrumb/title/meta/tags, then a
   white body with summary, key concepts, prose, red flags panel,
   sources, and a related-pills strip in the footer. The visitor /
   member split happens server-side; this stylesheet is the same for
   both, the markup just stops earlier for visitors.
   ----------------------------------------------------------- */

.entry { background: var(--vp-white); }

.entry-head {
	padding: var(--space-3xl) 0 var(--space-2xl);
	position: relative;
	overflow: hidden;
}

.entry-head::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 600px 350px at 100% 100%, rgba(13, 131, 137, 0.28), transparent 65%),
		radial-gradient(ellipse 500px 300px at 0% 0%, rgba(33, 80, 121, 0.4), transparent 65%);
	pointer-events: none;
}

.entry-head-inner { position: relative; z-index: 2; }

/* When the article has a publisher logo, split the hero into two columns:
   article meta on the left, publisher logo block on the right. Collapses
   to a single column on narrow viewports so the title stays prominent. */
.entry-head-inner.has-publisher {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-xl);
	align-items: start;
}

.entry-head-main {
	min-width: 0; /* allow long titles to wrap inside the grid cell */
}

.entry-publisher {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	min-width: 240px;
	max-width: 320px;
}

.entry-publisher-label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}

/* Logo sits on a white plaque so coloured marks (Croner-i palette,
   Tax Adviser blue/grey) hold their own against the dark navy hero. */
.entry-publisher-logo {
	max-width: 100%;
	max-height: 64px;
	background: var(--vp-white);
	padding: 8px 12px;
	border-radius: 3px;
	display: block;
	height: auto;
	width: auto;
}

.entry-publisher-issue {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 500;
}

@media (max-width: 900px) {
	.entry-head-inner.has-publisher {
		grid-template-columns: 1fr;
	}
	.entry-publisher {
		flex-direction: row;
		align-items: center;
		max-width: none;
	}
	.entry-publisher-label {
		flex-basis: 100%;
	}
	.entry-publisher-logo {
		max-height: 48px;
	}
}

.entry-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: var(--space-md);
	letter-spacing: 0.02em;
}

.entry-breadcrumb a {
	color: rgba(255, 255, 255, 0.85);
	transition: color 0.15s ease;
}

.entry-breadcrumb a:hover { color: var(--vp-teal-light); }

.entry-breadcrumb .sep { color: rgba(255, 255, 255, 0.3); }

.entry-topic {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--vp-teal-light);
	margin-bottom: var(--space-md);
}

.entry-title {
	color: var(--vp-white);
	font-size: clamp(1.875rem, 4vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 var(--space-lg);
	max-width: 880px;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md) var(--space-lg);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.75);
	letter-spacing: 0.02em;
	margin-top: var(--space-md);
}

.entry-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Author name rendered as a link to their vita-uk.com profile.
   The hero is dark navy, so we use a soft white underline that
   teal-lights on hover. Doesn't shout but signals it's clickable. */
.entry-author-link {
	color: var(--vp-white);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.entry-author-link:hover,
.entry-author-link:focus {
	color: var(--vp-teal);
	border-bottom-color: var(--vp-teal);
}

/* A-Z letter rendered as a small badge that reads at a glance. */
.entry-meta-az .entry-meta-label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
}

.entry-meta-az .entry-meta-value {
	display: inline-block;
	min-width: 22px;
	padding: 2px 8px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 2px;
	color: var(--vp-white);
	font-weight: 600;
	text-align: center;
	letter-spacing: 0;
}

.entry-meta-badge {
	padding: 3px 10px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border-radius: 2px;
}

.entry-meta-vita-view {
	background: rgba(184, 83, 121, 0.18);
	color: #f4c0d1;
	border: 1px solid rgba(184, 83, 121, 0.35);
}

/* Articles only: prominent serif italic lede sitting between title and meta. */
.entry-article-lede {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--space-lg);
	max-width: 740px;
}

.entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	max-width: 880px;
}

.entry-tag {
	display: inline-block;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	border-radius: 2px;
	transition: background 0.15s ease, color 0.15s ease;
}

.entry-tag:hover {
	background: var(--vp-teal);
	color: var(--vp-white);
}

/* ---- Body ------------------------------------------------- */

.entry-body-wrap {
	background: var(--vp-white);
	padding: var(--space-2xl) 0 var(--space-3xl);
}

.entry-body {
	max-width: 1080px;
	margin: 0 auto;
}

.entry-section-label {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vp-mid-grey);
	margin: 0 0 var(--space-md);
}

.entry-section-label--alert {
	color: var(--vp-rose);
	font-size: 0.875rem;
	letter-spacing: 0.15em;
}

.entry-summary {
	margin-bottom: var(--space-xl);
	padding: var(--space-lg) var(--space-xl);
	background: #F4FBFA;
	border-left: 3px solid var(--vp-teal);
	border-radius: 2px;
}

.entry-summary p {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--vp-charcoal);
}

.entry-key-concepts,
.entry-red-flags,
.entry-sources {
	margin-bottom: var(--space-xl);
}

.entry-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.entry-list li {
	position: relative;
	padding: 6px 0 6px var(--space-lg);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--vp-charcoal);
}

.entry-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 16px;
	width: 12px;
	height: 1px;
	background: var(--vp-teal);
}

/* Red flags panel: rose tint, rose-bordered, with proper flag icons on the
   heading and each bullet. Matches the demo treatment Greg signed off on. */
.entry-red-flags {
	padding: var(--space-lg) var(--space-xl);
	background: #FDF5F7;
	border: 1px solid #F2D0DA;
	border-left: 4px solid var(--vp-rose);
	border-radius: 2px;
}

.entry-list--alert li {
	color: #5C2540;
	padding-left: 26px;
}

.entry-list--alert li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 14px;
	height: 16px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24' fill='%23B85379'><path d='M3 2v20h2v-9h12l-2-4 2-4H5V2H3z'/></svg>") no-repeat center / contain;
}

/* Sources: smaller, more reference-y. */
.entry-list--sources li {
	font-size: 0.875rem;
	color: var(--vp-dark-grey);
}

.entry-list--sources li::before { background: var(--vp-mid-grey); }

/* Callouts: used on single opportunity (script + why it matters) and
   single toolkit (usage notes). Soft tinted panel with a left border,
   distinct enough to read as "pause here, this is structured" but
   tonally calmer than the red-flags panel. */
.entry-callout {
	margin-bottom: var(--space-xl);
	padding: var(--space-lg) var(--space-xl);
	background: #F4FBFA;
	border-left: 3px solid var(--vp-teal);
	border-radius: 2px;
}

.entry-callout--why {
	background: var(--vp-off-white);
	border-left-color: var(--vp-navy);
}

.entry-callout-body {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--vp-charcoal);
}

.entry-callout-body p:last-child { margin-bottom: 0; }

/* Toolkit download: prominent panel with file info and download CTA. */
.entry-download {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	flex-wrap: wrap;
	padding: var(--space-lg) var(--space-xl);
	margin-bottom: var(--space-xl);
	background: var(--vp-navy);
	color: var(--vp-white);
	border-radius: 2px;
}

.entry-download-info { flex: 1; min-width: 220px; }

.entry-download-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vp-teal-light);
	margin-bottom: 4px;
}

.entry-download-name {
	font-size: 1rem;
	color: var(--vp-white);
	font-weight: 500;
}

.entry-download-size {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.6);
	margin-left: 4px;
}

/* The post body content (whatever Greg writes in the editor). */
/* ---- Article body prose -------------------------------- */
/* Wider than a typographer's preferred 65ch but constrained enough that
   the page doesn't feel form-like. Approx 1080px is comfortable on
   desktop while leaving the prose readable. */
.entry-prose {
	max-width: 1080px;
	margin: 0 auto var(--space-xl);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--vp-charcoal);
}

.entry-prose h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.625rem;
	line-height: 1.25;
	margin: 2.5rem 0 1rem;
	color: var(--vp-navy);
	letter-spacing: -0.015em;
	padding-top: 1.5rem;
	border-top: 1px solid var(--vp-light-grey);
}

.entry-prose h2:first-child,
.entry-prose > p:first-child + h2 {
	border-top: none;
	padding-top: 0;
	margin-top: 1.5rem;
}

.entry-prose h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.25rem;
	margin: 1.75rem 0 0.5rem;
	color: var(--vp-charcoal);
	letter-spacing: -0.01em;
}

.entry-prose p {
	margin: 0 0 1.1rem;
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Editorial aside paragraphs (whole-paragraph italics in the source).
   The parser emits these with class="prose-aside". Rendered as a serif
   pull-quote with a teal accent — visually distinct from inline italic
   emphasis inside regular paragraphs. */
.entry-prose p.prose-aside {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--vp-dark-grey);
	padding: 0.75rem 0 0.75rem 1.25rem;
	border-left: 3px solid var(--vp-teal);
	margin: 1.25rem 0;
}

.entry-prose ul,
.entry-prose ol {
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
}

.entry-prose ul li,
.entry-prose ol li {
	margin-bottom: 0.5rem;
}

.entry-prose ul li:last-child,
.entry-prose ol li:last-child {
	margin-bottom: 0;
}

.entry-prose strong {
	color: var(--vp-navy);
	font-weight: 600;
}

.entry-prose em {
	font-style: italic;
	/* No display:block here — keep inline by default */
}

.entry-prose blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--vp-teal);
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--vp-dark-grey);
	background: var(--vp-off-white);
}

.entry-prose a {
	color: var(--vp-teal-dark);
	border-bottom: 1px solid rgba(13, 131, 137, 0.3);
	transition: border-color 0.15s ease;
}

.entry-prose a:hover {
	border-bottom-color: var(--vp-teal);
}

/* ---- Publisher CTA (footer of single article) ----------- */
/* A branded courtesy plug to the original publisher: logo on the left,
   copy and action buttons on the right. Collapses to single-column on
   narrow viewports. Two button variants — primary (this specific
   article) and secondary (the publication's home / "learn more"). */
.publisher-cta {
	max-width: 1080px;
	margin: var(--space-xl) auto;
	background: var(--vp-off-white);
	border: 1px solid var(--vp-light-grey);
	border-left: 4px solid var(--vp-teal);
	border-radius: 4px;
	overflow: hidden;
}

.publisher-cta-inner {
	display: grid;
	grid-template-columns: minmax(140px, 200px) 1fr;
	gap: 1.5rem;
	align-items: center;
	padding: 1.75rem 2rem;
}

.publisher-cta-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: var(--vp-white);
	border-radius: 4px;
	min-height: 80px;
}

.publisher-cta-logo {
	max-width: 100%;
	max-height: 56px;
	height: auto;
	width: auto;
	display: block;
}

.publisher-cta-name {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--vp-navy);
	margin: 0 0 0.5rem;
	letter-spacing: -0.005em;
}

.publisher-cta-lede {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--vp-dark-grey);
	margin: 0 0 0.75rem;
}

.publisher-cta-meta {
	font-size: 0.8125rem;
	color: var(--vp-mid-grey);
	margin: 0 0 1rem;
	letter-spacing: 0.02em;
}

.publisher-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: center;
}

.publisher-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.6rem 1.1rem;
	border-radius: 3px;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, gap 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}

.publisher-cta-btn--primary {
	background: var(--vp-teal);
	color: var(--vp-white);
	border: 1px solid var(--vp-teal);
}

.publisher-cta-btn--primary:hover {
	background: var(--vp-teal-dark);
	border-color: var(--vp-teal-dark);
	color: var(--vp-white);
	gap: 0.65rem;
}

.publisher-cta-btn--secondary {
	background: transparent;
	color: var(--vp-teal-dark);
	border: 1px solid var(--vp-teal-dark);
}

.publisher-cta-btn--secondary:hover {
	background: rgba(13, 131, 137, 0.06);
	color: var(--vp-teal);
	border-color: var(--vp-teal);
	gap: 0.65rem;
}

@media (max-width: 720px) {
	.publisher-cta-inner {
		grid-template-columns: 1fr;
		padding: 1.5rem 1.5rem;
	}
	.publisher-cta-brand {
		justify-self: start;
		padding: 0.75rem 1rem;
	}
	.publisher-cta-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---- Footer (related pills) ------------------------------ */

.entry-footer {
	background: var(--vp-off-white);
	padding: var(--space-2xl) 0;
	border-top: 1px solid var(--vp-light-grey);
}

.entry-footer .container {
	max-width: 760px;
	margin: 0 auto;
}

.related-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.related-pill {
	display: inline-block;
	padding: 8px 14px;
	background: var(--vp-white);
	border: 1px solid var(--vp-light-grey);
	border-radius: 20px;
	font-size: 0.875rem;
	color: var(--vp-charcoal);
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.related-pill:hover {
	border-color: var(--vp-teal);
	color: var(--vp-teal-dark);
	background: rgba(13, 131, 137, 0.04);
}


/* -----------------------------------------------------------
   12. ANIMATIONS & MOTION
   ----------------------------------------------------------- */

/* Pulse drift: a slow horizontal sway on the heartbeat graphic so the
   wave breathes rather than sitting flat. Uses transform so it works on
   inline SVG (the older background-position version was background-only
   and was orphaned when we moved the footer beat to inline SVG). */
@keyframes pulseDrift {
	0%   { transform: translateX(0); }
	50%  { transform: translateX(-8px); }
	100% { transform: translateX(0); }
}

/* Hero entrance cascade.
   On first paint the hero copy and panel fade up in sequence: kicker first,
   then h1, lede, CTAs, panel. Pure CSS; no JS needed because this only
   plays once on load. Honours reduced-motion (keyframe is no-op below). */
@keyframes heroEnter {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero__copy > .kicker,
.hero__copy > h1,
.hero__copy > .lede,
.hero__copy > .hero__ctas,
.hero .hero-panel {
	animation: heroEnter 0.6s cubic-bezier(.2, .7, .2, 1) both;
}

.hero__copy > .kicker     { animation-delay: 0.05s; }
.hero__copy > h1          { animation-delay: 0.15s; }
.hero__copy > .lede       { animation-delay: 0.30s; }
.hero__copy > .hero__ctas { animation-delay: 0.45s; }
.hero .hero-panel         { animation-delay: 0.55s; }

/* One-shot attention pulse on the hero primary CTA. Fires once after the
   hero entrance has settled, then never again. Uses outline-style box-shadow
   that ripples outward and fades, so the button itself stays still. */
@keyframes ctaAttentionPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(13, 131, 137, 0.55);
	}
	70% {
		box-shadow: 0 0 0 14px rgba(13, 131, 137, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(13, 131, 137, 0);
	}
}

.hero .btn--primary {
	animation: ctaAttentionPulse 1.6s ease-out 1.6s 1 both;
}

/* Repeating attention pulse on every primary apply button on the home page,
   fired on hover. Because the animation is declared on the :hover state, it
   restarts each time the pointer re-enters the button, so the pulse happens
   on every hover rather than only once. Scoped to .home so apply buttons on
   other pages are unaffected. */
.home .btn--primary:hover {
	animation: ctaAttentionPulse 1.2s ease-out 1;
}

/* Reveals content visible by default; only hidden if JS adds .js-reveal-on */
html.js-reveal-on [data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
html.js-reveal-on [data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}
html.js-reveal-on [data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
html.js-reveal-on [data-reveal-stagger] > *.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001s !important;
		animation-delay: 0s !important;
		transition-duration: 0.001s !important;
		transition-delay: 0s !important;
	}
}


/* -----------------------------------------------------------
   13. ACCESSIBILITY & UTILITY
   ----------------------------------------------------------- */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: var(--vp-white);
	clip: auto !important;
	color: var(--vp-navy);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link { position: absolute; top: -40px; left: 0; }
.skip-link:focus { top: 0; }

a:focus-visible, button:focus-visible, .nav-cta:focus-visible {
	outline: 2px solid var(--vp-teal);
	outline-offset: 2px;
}


/* -----------------------------------------------------------
   9. CAPABILITY GRID five-pillar overview on the home page
   Hero capability is full-width teal; secondary capabilities are
   a clean three-up grid (responsive).
   ----------------------------------------------------------- */

.capability-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

@media (max-width: 900px) {
	.capability-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* Secondary capability card */
.capability {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-xl);
	background: var(--vp-white);
	border: 1px solid var(--vp-light-grey);
	text-decoration: none;
	color: var(--vp-charcoal);
	transition: all 0.25s ease;
	min-height: 240px;
	position: relative;
}

.capability:hover {
	border-color: var(--vp-teal);
	transform: translateY(-4px);
	box-shadow:
		0 12px 28px rgba(15, 42, 66, 0.10),
		0 0 0 1px var(--vp-teal),
		0 8px 24px -8px rgba(13, 131, 137, 0.35);
	color: var(--vp-charcoal);
}

.capability:hover .capability-explore {
	color: var(--vp-teal-dark);
}

.capability:hover .capability-explore-arrow {
	transform: translateX(4px);
}

/* Gold tier capability cards (cards 05 / Toolkit and 06 / Opportunities).
   Visually distinguishes Gold-tier content from Silver-tier (cards 01-04)
   so visitors see the tier mix at a glance. Uses the same soft gold tone
   applied to the Gold pill on the hero panel (rgba(193, 154, 41, ...))
   so the visual language stays consistent across the site. */
.capability--gold {
	background: #FBF8EE;
	border-color: rgba(193, 154, 41, 0.35);
}
.capability--gold:hover {
	border-color: rgba(193, 154, 41, 0.75);
	box-shadow:
		0 12px 28px rgba(15, 42, 66, 0.10),
		0 0 0 1px rgba(193, 154, 41, 0.75),
		0 8px 24px -8px rgba(193, 154, 41, 0.40);
}
.capability--gold:hover .capability-explore {
	color: #8a6f1f;
}

.capability-number {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vp-mid-grey);
	margin-bottom: 0;
}

.capability h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--vp-navy);
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin-bottom: 0;
}

.capability p {
	font-size: 0.9375rem;
	color: var(--vp-dark-grey);
	line-height: 1.55;
	margin: 0;
	flex-grow: 1;
}

.capability-explore {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--vp-teal);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-top: var(--space-sm);
	transition: color 0.2s ease;
}

.capability-explore-arrow {
	font-size: 1rem;
	transition: transform 0.2s ease;
}

/* Hero capability Knowledge Library, full-width, teal background */
.capability--hero {
	grid-column: 1 / -1;
	background: linear-gradient(135deg, var(--vp-teal-dark) 0%, var(--vp-teal) 100%);
	color: var(--vp-white);
	padding: var(--space-2xl);
	min-height: 0;
	position: relative;
	overflow: hidden;
	border: 0;
}

.capability--hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/pulse-divider.png") right center no-repeat;
	background-size: 50% auto;
	opacity: 0.08;
	pointer-events: none;
}

.capability--hero:hover {
	background: linear-gradient(135deg, var(--vp-teal-dark) 20%, var(--vp-teal) 100%);
	color: var(--vp-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.capability-hero-inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--space-2xl);
	align-items: center;
	position: relative;
	z-index: 1;
}

@media (max-width: 800px) {
	.capability-hero-inner {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
}

.capability-hero-meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.capability-number--hero {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	margin-bottom: 0;
}

.capability-hero-tag {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.4;
}

.capability-hero-content h3 {
	color: var(--vp-white);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	margin-bottom: var(--space-md);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.capability-hero-content p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1rem;
	line-height: 1.55;
	margin-bottom: var(--space-md);
}

.capability-arrow--light {
	color: var(--vp-white);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	font-family: var(--font-body);
	margin-top: 0;
	display: inline-flex;
	align-items: center;
	transition: transform 0.25s ease;
}

.capability--hero:hover .capability-arrow--light {
	transform: translateX(4px);
}


/* -----------------------------------------------------------
   10. MANIFESTO SECTION strategic editorial note
   Two-column layout: kicker + headline on the left, three short serif
   paragraphs on the right closing with a text link to the library.
   Dark navy with a subtle dual radial wash for editorial weight.
   ----------------------------------------------------------- */

.manifesto {
	position: relative;
	overflow: hidden;
}

.manifesto::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 0%, rgba(13, 160, 168, 0.08) 0%, transparent 45%),
		radial-gradient(circle at 90% 100%, rgba(184, 83, 121, 0.05) 0%, transparent 45%);
	pointer-events: none;
}

.manifesto > .container {
	position: relative;
	z-index: 1;
}

.manifesto-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--space-3xl);
	align-items: start;
}

@media (max-width: 900px) {
	.manifesto-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
}

.manifesto-title {
	color: var(--vp-white);
	font-size: clamp(1.875rem, 3.5vw, 2.625rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
}

.manifesto-body {
	font-family: var(--font-serif);
	font-size: 1.1875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	font-style: normal;
}

.manifesto-body p {
	margin: 0 0 var(--space-md);
	font-style: normal;
}

.manifesto-body p:last-child {
	margin-bottom: 0;
}

.manifesto-opener {
	font-style: italic !important;
}

.manifesto-link-row {
	margin-top: var(--space-lg) !important;
}

/* Inline text link with arrow that nudges on hover. Used in editorial
   contexts (manifesto, in-prose CTAs) where a full button would be too
   heavy. The --light modifier swaps the colours for use on dark backgrounds. */
.text-link {
	color: var(--vp-navy);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
	font-family: var(--font-body);
	font-style: normal;
}

.text-link::after {
	content: "\2192";
	transition: transform 0.2s ease;
}

.text-link:hover {
	color: var(--vp-teal);
	border-bottom-color: var(--vp-teal);
}

.text-link:hover::after {
	transform: translateX(4px);
}

.text-link--light {
	color: var(--vp-white);
}

.text-link--light:hover {
	color: var(--vp-teal-light);
	border-bottom-color: var(--vp-teal-light);
}


/* -----------------------------------------------------------
   11. TIER SECTION two equal side-by-side cards (Silver and Gold)
   Each card: teal/rose top border, name top-left, label top-right,
   italic intro, feature list with coloured checkmarks, full-width CTA.
   ----------------------------------------------------------- */

.tiers-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	max-width: 1100px;
	margin: 0 auto;
}

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

.tier {
	background: var(--vp-white);
	padding: var(--space-2xl);
	display: flex;
	flex-direction: column;
	position: relative;
	border: 1px solid var(--vp-light-grey);
	border-top-width: 3px;
	border-top-style: solid;
}

.tier--silver {
	border-top-color: var(--vp-teal);
}

.tier--gold {
	border-top-color: rgba(193, 154, 41, 0.75);
	background: #FBF8EE;
}

.tier-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--space-md);
}

.tier-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.875rem;
	color: var(--vp-navy);
	letter-spacing: -0.015em;
	line-height: 1;
}

.tier-label {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.tier-label--silver { color: var(--vp-teal); }
.tier-label--gold { color: #8a6f1f; }

.tier-sub {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--vp-mid-grey);
	margin-bottom: var(--space-xl);
}

/* Feature list with CSS-drawn tick marks (cross-browser reliable) */
.tier-features {
	list-style: none;
	margin: 0 0 var(--space-xl) 0;
	padding: 0;
	flex-grow: 1;
}

.tier-features li {
	font-size: 0.9375rem;
	color: var(--vp-dark-grey);
	padding: 12px 0 12px 30px;
	position: relative;
	border-bottom: 1px solid var(--vp-light-grey);
	line-height: 1.45;
}

.tier-features li:last-child { border-bottom: none; }

.tier-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	width: 14px;
	height: 8px;
	border-left: 1.5px solid var(--vp-teal);
	border-bottom: 1.5px solid var(--vp-teal);
	transform: rotate(-45deg);
}

.tier-features--gold li::before {
	border-left-color: rgba(193, 154, 41, 0.85);
	border-bottom-color: rgba(193, 154, 41, 0.85);
}

/* Highlight Gold-only features in slightly bolder treatment */
.tier-features-highlight {
	font-weight: 600;
	color: var(--vp-charcoal) !important;
}

/* Full-width CTA at the bottom of each tier card */
.tier-cta {
	width: 100%;
	justify-content: center;
}

/* Gold's secondary CTA needs a slightly different look,
   navy outline rather than teal */
.tier--gold .tier-cta.btn--secondary {
	background: transparent;
	color: var(--vp-navy);
	border-color: var(--vp-navy);
}

.tier--gold .tier-cta.btn--secondary:hover {
	background: var(--vp-navy);
	color: var(--vp-white);
}


/* -----------------------------------------------------------
   12. FINAL CTA closing dark panel that pairs the primary signup
   action with a route out to vita-uk.com. Centred, breathing.
   ----------------------------------------------------------- */
.final-cta {
	padding: var(--space-4xl) 0;
	position: relative;
	overflow: hidden;
}

/* Soft radial wash echoing the hero, so the page bookends visually. */
.final-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 900px 500px at 50% 100%, rgba(13, 131, 137, 0.22), transparent 65%);
	pointer-events: none;
}

.final-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	text-align: center;
}

/* Centre the kicker on this section (it's inline-flex with a leading
   dash, so we need flex-centre rather than text-align). */
.final-cta .kicker {
	display: inline-flex;
	margin-left: auto;
	margin-right: auto;
}

.final-cta__title {
	color: var(--vp-white);
	font-size: clamp(2rem, 4vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 var(--space-md);
}

.final-cta__lede {
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.55;
	max-width: 620px;
	margin: 0 auto var(--space-xl);
}

.final-cta__actions {
	display: flex;
	justify-content: center;
	gap: var(--space-md);
	flex-wrap: wrap;
}

@media (max-width: 600px) {
	.final-cta { padding: var(--space-3xl) 0; }
}


/* =====================================================================
 * Apply form
 * ================================================================== */

.apply-form {
	max-width: 640px;
	margin: 0 auto;
}

.apply-row {
	margin-bottom: 1.5rem;
}

.apply-row label {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--vp-navy);
	margin-bottom: 0.5rem;
	letter-spacing: 0.01em;
}

.apply-row .required {
	color: #c0392b;
	margin-left: 0.125rem;
}

.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form select,
.apply-form textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--vp-light-grey);
	border-radius: 3px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--vp-charcoal);
	background: var(--vp-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
	outline: none;
	border-color: var(--vp-teal);
	box-shadow: 0 0 0 3px rgba(13, 131, 137, 0.15);
}

.apply-form textarea {
	resize: vertical;
	min-height: 100px;
}

.apply-row--submit {
	margin-top: 2rem;
}

.apply-submit {
	background: var(--vp-navy);
	color: var(--vp-white);
	padding: 0.9rem 1.75rem;
	border: none;
	border-radius: 3px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.15s ease;
}

.apply-submit:hover {
	background: var(--vp-teal-dark);
}

.apply-note {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	color: var(--vp-mid-grey);
}

.apply-row-help {
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	color: var(--vp-mid-grey);
	line-height: 1.4;
}

.apply-errors {
	background: #fff5f5;
	border-left: 4px solid #c0392b;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	border-radius: 2px;
}

.apply-errors p { margin: 0 0 0.5rem; color: #c0392b; }
.apply-errors ul { margin: 0; padding-left: 1.5rem; color: var(--vp-charcoal); }
.apply-errors li { margin-bottom: 0.25rem; }

.apply-thanks {
	max-width: 640px;
	margin: 0 auto;
	padding: 2rem;
	background: var(--vp-off-white);
	border-left: 4px solid var(--vp-teal);
	border-radius: 3px;
	text-align: center;
}

.apply-thanks h2 {
	color: var(--vp-navy);
	font-size: 1.375rem;
	margin: 0 0 1rem;
}

.apply-thanks p {
	color: var(--vp-dark-grey);
	line-height: 1.6;
	margin: 0;
}

.apply-already-member {
	max-width: 640px;
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	background: var(--vp-off-white);
	border-left: 4px solid var(--vp-teal);
	border-radius: 3px;
	text-align: center;
}

.apply-already-member a {
	color: var(--vp-teal-dark);
	font-weight: 600;
}


/* =====================================================================
 * Header search
 * ================================================================== */

.nav-search-toggle {
	background: transparent;
	border: 1px solid transparent;
	color: var(--vp-charcoal);
	padding: 8px 10px;
	border-radius: 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	margin-right: 6px;
}

.nav-search-toggle:hover {
	background: rgba(13, 131, 137, 0.08);
	color: var(--vp-teal-dark);
	border-color: rgba(13, 131, 137, 0.2);
}

.nav-search-toggle[aria-expanded="true"] {
	background: var(--vp-teal);
	color: var(--vp-white);
}

/* The form slides down below the primary nav */
.nav-search-form {
	background: var(--vp-off-white);
	border-bottom: 1px solid var(--vp-light-grey);
	padding: 1rem 0;
}

.nav-search-form-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: flex;
	gap: 8px;
	align-items: center;
}

.nav-search-form input[type="search"] {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 1px solid var(--vp-light-grey);
	border-radius: 3px;
	font-family: inherit;
	font-size: 1rem;
	background: var(--vp-white);
	color: var(--vp-charcoal);
}

.nav-search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--vp-teal);
	box-shadow: 0 0 0 3px rgba(13, 131, 137, 0.15);
}

.nav-search-form button[type="submit"] {
	background: var(--vp-navy);
	color: var(--vp-white);
	padding: 0.75rem 1.25rem;
	border: none;
	border-radius: 3px;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.nav-search-form button[type="submit"]:hover {
	background: var(--vp-teal-dark);
}

.nav-search-form-close {
	background: transparent;
	border: none;
	color: var(--vp-mid-grey);
	font-size: 1.5rem;
	line-height: 1;
	padding: 0 8px;
	cursor: pointer;
}

.nav-search-form-close:hover {
	color: var(--vp-charcoal);
}


/* =====================================================================
 * Search results page
 * ================================================================== */

.search-hero {
	padding: var(--space-3xl) 0 var(--space-2xl);
	position: relative;
	overflow: hidden;
}

.search-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 600px 350px at 100% 100%, rgba(13, 131, 137, 0.28), transparent 65%),
		radial-gradient(ellipse 500px 300px at 0% 0%, rgba(33, 80, 121, 0.4), transparent 65%);
	pointer-events: none;
}

.search-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 920px;
}

.search-hero-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin: 0.5rem 0 1.5rem;
	line-height: 1.15;
}

.search-hero-title em {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--vp-teal);
	font-weight: 400;
}

.search-hero-form {
	display: flex;
	gap: 8px;
	max-width: 680px;
}

.search-hero-form input[type="search"] {
	flex: 1;
	padding: 0.9rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.95);
	font-size: 1rem;
	color: var(--vp-charcoal);
}

.search-hero-form input[type="search"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(13, 131, 137, 0.3);
}

.search-hero-form button {
	background: var(--vp-teal);
	color: var(--vp-white);
	padding: 0.9rem 1.5rem;
	border: none;
	border-radius: 3px;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.search-hero-form button:hover {
	background: var(--vp-teal-dark);
}

.search-hero-count {
	margin-top: 1rem;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9375rem;
}

.search-empty {
	max-width: 720px;
	margin: 0 auto;
	padding: 2.5rem 0;
	text-align: center;
}

.search-empty h2 {
	color: var(--vp-navy);
	font-size: 1.5rem;
	margin: 0 0 1rem;
}

.search-empty p {
	color: var(--vp-dark-grey);
	line-height: 1.65;
	margin: 0 0 1.5rem;
}

/* "Did you mean..." suggestion shown when a search returns zero results.
   The corrected term is a link to the suggested search; clicking it
   reruns the query with the corrected spelling. */
.search-did-you-mean {
	margin: -0.5rem 0 1.5rem !important;
	font-size: 1.05rem;
	color: var(--vp-dark-grey);
}
.search-did-you-mean a {
	color: var(--vp-teal);
	text-decoration: none;
	border-bottom: 1px solid var(--vp-teal);
	padding-bottom: 1px;
}
.search-did-you-mean a:hover {
	color: var(--vp-teal-dark, var(--vp-teal));
	border-bottom-color: var(--vp-teal-dark, var(--vp-teal));
}

.search-suggestions,
.search-shortcuts {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.search-suggestions li a,
.search-shortcuts li a {
	display: inline-block;
	padding: 8px 16px;
	background: var(--vp-off-white);
	color: var(--vp-teal-dark);
	border: 1px solid var(--vp-light-grey);
	border-radius: 20px;
	font-size: 0.875rem;
	font-weight: 500;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.search-suggestions li a:hover,
.search-shortcuts li a:hover {
	background: rgba(13, 131, 137, 0.08);
	border-color: var(--vp-teal);
	color: var(--vp-teal);
}

.search-group {
	margin-bottom: 2.5rem;
}

.search-group-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-bottom: 2px solid var(--vp-navy);
	padding-bottom: 0.5rem;
	margin-bottom: 1.5rem;
}

.search-group-title {
	font-family: var(--font-display);
	color: var(--vp-navy);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
}

.search-group-count {
	font-size: 0.8125rem;
	color: var(--vp-mid-grey);
	letter-spacing: 0.05em;
}

.search-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg);
}

@media (max-width: 800px) {
	.search-cards { grid-template-columns: 1fr; }
}

.search-card {
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.5rem;
	background: var(--vp-white);
	border: 1px solid var(--vp-light-grey);
	border-left: 3px solid var(--vp-teal);
	border-radius: 2px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.search-card:hover {
	border-left-color: var(--vp-teal-dark);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}

.search-card-topic {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vp-teal-dark);
	margin-bottom: 0.5rem;
}

.search-card-title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--vp-navy);
	margin: 0 0 0.5rem;
	letter-spacing: -0.01em;
}

.search-card-summary {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--vp-dark-grey);
	margin: 0 0 1rem;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.search-card-summary mark {
	background: rgba(13, 131, 137, 0.18);
	color: var(--vp-teal-dark);
	font-weight: 600;
	padding: 0 2px;
	border-radius: 2px;
}

.search-card-cta {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--vp-rose);
	letter-spacing: 0.02em;
}

/* Locked Gold-only result cards shown to Silver and signed-out visitors. */
.search-card--locked {
	background: var(--vp-off-white);
}

.search-card--locked .search-card-title {
	color: var(--vp-navy);
}

.search-card-lock {
	display: inline-block;
	vertical-align: -1px;
	margin-right: 0.35em;
	color: var(--vp-teal);
}

.search-card--locked .search-card-cta {
	color: var(--vp-navy);
	opacity: 0.7;
}

.search-member-prompt {
	margin-top: 2.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--vp-off-white);
	border-left: 4px solid var(--vp-teal);
	border-radius: 2px;
	text-align: center;
}

.search-member-prompt p {
	margin: 0;
	color: var(--vp-dark-grey);
	font-size: 0.9375rem;
}

.search-member-prompt a {
	color: var(--vp-teal-dark);
	font-weight: 600;
	margin-left: 0.5rem;
}


/* =====================================================================
 * Member account page
 * ================================================================== */

.account-page {
	max-width: 880px;
	margin: 0 auto;
}

.account-locked {
	max-width: 640px;
	margin: 0 auto;
	padding: 2rem;
	background: var(--vp-off-white);
	border-left: 4px solid var(--vp-teal);
	border-radius: 3px;
	text-align: center;
}

.account-locked a {
	color: var(--vp-teal-dark);
	font-weight: 600;
}

.account-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--vp-light-grey);
	margin-bottom: 2rem;
}

.account-welcome {
	font-family: var(--font-display);
	font-size: 1.75rem;
	margin: 0;
	color: var(--vp-navy);
	letter-spacing: -0.015em;
}

.account-tier {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 16px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.account-tier--silver {
	background: rgba(102, 102, 102, 0.12);
	color: #555;
}

.account-tier--gold {
	background: rgba(176, 128, 0, 0.15);
	color: #b08000;
}

.account-notice {
	padding: 0.9rem 1.25rem;
	border-radius: 3px;
	margin-bottom: 1.5rem;
}

.account-notice p {
	margin: 0;
	font-size: 0.9375rem;
}

.account-notice--success {
	background: rgba(26, 127, 55, 0.08);
	border-left: 3px solid #1a7f37;
	color: #1a7f37;
}

.account-notice--error {
	background: rgba(192, 57, 43, 0.08);
	border-left: 3px solid #c0392b;
	color: #c0392b;
}

.account-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
}

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

.account-section {
	background: var(--vp-white);
	border: 1px solid var(--vp-light-grey);
	border-left: 3px solid var(--vp-teal);
	border-radius: 3px;
	padding: 1.5rem 1.75rem;
}

.account-section--meta {
	grid-column: 1 / -1;
	border-left-color: var(--vp-navy);
}

.account-section h3 {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	color: var(--vp-navy);
	margin: 0 0 1.25rem;
	letter-spacing: -0.005em;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--vp-light-grey);
}

.account-form {
	margin: 0;
}

.account-row {
	margin-bottom: 1.25rem;
}

.account-row label {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--vp-navy);
	margin-bottom: 0.5rem;
}

.account-row input[type="text"],
.account-row input[type="email"],
.account-row input[type="password"] {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--vp-light-grey);
	border-radius: 3px;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--vp-charcoal);
	background: var(--vp-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.account-row input:focus {
	outline: none;
	border-color: var(--vp-teal);
	box-shadow: 0 0 0 3px rgba(13, 131, 137, 0.15);
}

.account-row-readonly {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.7rem 0.9rem;
	background: var(--vp-off-white);
	border: 1px solid var(--vp-light-grey);
	border-radius: 3px;
	color: var(--vp-charcoal);
	font-size: 0.9375rem;
	flex-wrap: wrap;
}

.account-request-change {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--vp-teal-dark);
	white-space: nowrap;
}

.account-request-change:hover {
	color: var(--vp-teal);
}

.account-row-help {
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	color: var(--vp-mid-grey);
	line-height: 1.4;
}

.account-row--submit {
	margin-top: 1.5rem;
	margin-bottom: 0;
}

.account-button {
	background: var(--vp-navy);
	color: var(--vp-white);
	padding: 0.7rem 1.5rem;
	border: none;
	border-radius: 3px;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.15s ease;
}

.account-button:hover {
	background: var(--vp-teal-dark);
}

.account-meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5rem 1.5rem;
	margin: 0 0 1.5rem;
}

.account-meta dt {
	font-weight: 600;
	color: var(--vp-navy);
	font-size: 0.875rem;
}

.account-meta dd {
	margin: 0;
	color: var(--vp-charcoal);
	font-size: 0.9375rem;
}

.account-meta dd small {
	display: block;
	color: var(--vp-mid-grey);
	font-size: 0.8125rem;
	margin-top: 0.125rem;
}

.account-actions {
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--vp-light-grey);
}

.account-signout {
	color: var(--vp-rose);
	font-weight: 600;
	font-size: 0.9375rem;
}

.account-signout:hover {
	color: var(--vp-navy);
}


/* ----------------------------------------------------------- */
/*  Marketing pages (About, FAQ, etc.) — page-marketing.php    */
/* ----------------------------------------------------------- */

.vp-marketing {
	background: var(--vp-white);
}

.vp-marketing-hero {
	padding: var(--space-3xl) 0 var(--space-2xl);
}

.vp-marketing-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--vp-white);
	margin: 0;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

.vp-marketing-body {
	padding: var(--space-3xl) 0 var(--space-3xl);
}

.vp-marketing-inner {
	max-width: 760px;
}

/* Prose styling specifically for the editable WP content area on
   marketing pages. Mirrors the body style we use on single entries
   so the team sees consistent typography. */
.vp-marketing-inner > * + * {
	margin-top: 1.25em;
}

.vp-marketing-inner h2 {
	font-family: var(--font-display);
	font-size: 1.625rem;
	color: var(--vp-navy);
	margin-top: 2.25em;
	margin-bottom: 0.6em;
	letter-spacing: -0.005em;
	line-height: 1.25;
}

.vp-marketing-inner h2:first-child {
	margin-top: 0;
}

.vp-marketing-inner h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: var(--vp-navy);
	margin-top: 1.75em;
	margin-bottom: 0.5em;
}

.vp-marketing-inner p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--vp-dark-grey);
}

.vp-marketing-inner ul,
.vp-marketing-inner ol {
	padding-left: 1.5em;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--vp-dark-grey);
}

.vp-marketing-inner li + li {
	margin-top: 0.4em;
}

.vp-marketing-inner a {
	color: var(--vp-teal-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.vp-marketing-inner a:hover {
	color: var(--vp-teal);
}

/* Accordion (native <details>) — used for FAQ Q&A. Gutenberg's
   "Details" block produces <details><summary>...</summary>...</details>. */
.vp-marketing-inner details {
	border: 1px solid var(--vp-light-grey);
	border-radius: 4px;
	padding: 0;
	margin-top: 0.75em;
	background: var(--vp-white);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vp-marketing-inner details[open] {
	border-color: var(--vp-teal);
	box-shadow: 0 1px 4px rgba(13, 131, 137, 0.08);
}

.vp-marketing-inner details summary {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--vp-navy);
	padding: 1rem 1.25rem;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 3rem;
	user-select: none;
}

.vp-marketing-inner details summary::-webkit-details-marker {
	display: none;
}

.vp-marketing-inner details summary::after {
	content: '+';
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--vp-teal-dark);
	line-height: 1;
	transition: transform 0.15s ease;
}

.vp-marketing-inner details[open] summary::after {
	content: '−';
}

.vp-marketing-inner details summary:hover {
	color: var(--vp-teal-dark);
}

.vp-marketing-inner details > *:not(summary) {
	padding: 0 1.25rem 1.25rem;
	margin: 0;
}

.vp-marketing-inner details p {
	font-size: 1rem;
	margin-top: 0.5em;
}

/* Pull-quote / callout block within marketing prose */
.vp-marketing-inner .vp-callout {
	background: var(--vp-off-white);
	border-left: 4px solid var(--vp-teal);
	padding: 1.25rem 1.5rem;
	margin: 1.5em 0;
	border-radius: 0 4px 4px 0;
}

.vp-marketing-inner .vp-callout p {
	margin: 0;
	font-size: 1rem;
	color: var(--vp-navy);
}


/* ----------------------------------------------------------- */
/*  Related content (bottom of single-entry pages)             */
/* ----------------------------------------------------------- */

.related-content {
	background: var(--vp-off-white);
	padding: var(--space-3xl) 0;
	border-top: 1px solid var(--vp-light-grey);
}

.related-content-inner {
	max-width: 1080px;
}

.related-content-head {
	margin-bottom: var(--space-xl);
}

.related-content-title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--vp-navy);
	margin: 0 0 0.4em;
	letter-spacing: -0.005em;
}

.related-content-lede {
	font-size: 0.9375rem;
	color: var(--vp-mid-grey);
	margin: 0;
	line-height: 1.5;
}

.related-content-grid {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

/* Each panel = one content type's worth of related items, shown as a
   full-width row with the items laid out horizontally as cards. */
.related-panel {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.related-panel--gated {
	border-color: transparent;
}

.related-panel--teaser {
	background: transparent;
}

.related-panel-head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--vp-light-grey);
}

.related-panel-title {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--vp-navy);
	margin: 0;
	letter-spacing: 0.01em;
}

.related-panel-badge {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a6d1a;
	background: rgba(193, 154, 41, 0.12);
	padding: 0.2rem 0.55rem;
	border-radius: 12px;
}

/* Items now flow horizontally as cards within the row */
.related-panel-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}

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

.related-panel-item {
	margin: 0;
}

.related-panel-item + .related-panel-item {
	border-top: none;
}

.related-panel-link {
	display: block;
	height: 100%;
	padding: 1rem 1.1rem;
	text-decoration: none;
	color: inherit;
	position: relative;
	background: var(--vp-white);
	border: 1px solid var(--vp-light-grey);
	border-radius: 6px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.related-panel-link:hover {
	border-color: var(--vp-teal);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.related-panel-link:hover .related-panel-item-title {
	color: var(--vp-teal-dark);
}

.related-panel-item-title {
	display: block;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--vp-navy);
	line-height: 1.35;
	margin-bottom: 0.4rem;
	padding-right: 1.2rem;
	transition: color 0.15s ease;
}

.related-panel-item-snippet {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--vp-mid-grey);
}

.related-panel-item-lock {
	position: absolute;
	right: 0.9rem;
	top: 1rem;
	font-size: 0.875rem;
	color: #8a6d1a;
	opacity: 0.6;
}

/* Gold (gated) rows get a subtle premium tint on their cards */
.related-panel--teaser .related-panel-link {
	background: linear-gradient(180deg, #fffdf6 0%, var(--vp-white) 100%);
	border-color: rgba(193, 154, 41, 0.35);
}

.related-panel--teaser .related-panel-link:hover {
	border-color: rgba(193, 154, 41, 0.7);
}

.related-panel-tease {
	margin: 0.85rem 0 0;
	padding: 0;
	border-top: none;
	font-size: 0.8125rem;
	color: #8a6d1a;
	font-style: italic;
	text-align: left;
}


/* ----------------------------------------------------------- */
/*  Opportunity entries (sector packs)                         */
/* ----------------------------------------------------------- */

/* Trigger statement in the hero — pulled out from the standard
   lede so it reads as the "since X happened, this changed" framing. */
.opp-trigger {
	margin-top: var(--space-lg);
	padding: 1rem 1.25rem;
	background: rgba(255, 255, 255, 0.06);
	border-left: 3px solid var(--vp-teal);
	border-radius: 0 3px 3px 0;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.5;
	max-width: 720px;
}

.opp-trigger p {
	margin: 0;
}
.opp-trigger p + p {
	margin-top: 0.6em;
}

.opp-section {
	margin-bottom: var(--space-2xl);
}

.opp-section h2 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--vp-navy);
	margin: 0 0 0.6em;
	letter-spacing: -0.005em;
}

.opp-section h3 {
	font-family: var(--font-display);
	font-size: 1.125rem;
	color: var(--vp-navy);
	margin: 0 0 0.5em;
}

/* 3-column grid for legislation / eligibility / how-to-claim */
.opp-section--detail-grid {
	margin-bottom: var(--space-3xl);
}

.opp-detail-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.opp-detail-block {
	background: var(--vp-off-white);
	border: 1px solid var(--vp-light-grey);
	border-radius: 4px;
	padding: 1.5rem;
}

.opp-detail-block h3 {
	margin-top: 0;
	margin-bottom: 0.75em;
	padding-bottom: 0.6em;
	border-bottom: 1px solid var(--vp-light-grey);
	font-size: 1rem;
	font-weight: 700;
}

.opp-detail-block p {
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0 0 0.75em;
}

.opp-detail-block p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.opp-detail-grid {
		grid-template-columns: 1fr;
	}
}

/* Pitfalls section — slightly distinct visual treatment */
.opp-section--pitfalls h2 {
	color: var(--vp-rose, #c64b6e);
}

/* Case study callout */
.opp-case-study {
	margin: var(--space-2xl) 0;
	padding: 1.75rem 2rem;
	background: linear-gradient(135deg, var(--vp-off-white) 0%, var(--vp-white) 100%);
	border: 1px solid var(--vp-light-grey);
	border-left: 4px solid var(--vp-teal);
	border-radius: 0 4px 4px 0;
}

.opp-case-study-label {
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--vp-teal-dark);
	margin: 0 0 0.75em;
}

.opp-case-study-body p {
	margin: 0 0 0.75em;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--vp-dark-grey);
}

.opp-case-study-body p:last-child {
	margin-bottom: 0;
}

/* Testimonial pull quote */
.opp-testimonial {
	margin: var(--space-2xl) auto;
	max-width: 720px;
	padding: 1.5rem 2rem;
	background: var(--vp-navy);
	color: var(--vp-white);
	border-radius: 4px;
	text-align: center;
	position: relative;
}

.opp-testimonial::before {
	content: '\201C';
	position: absolute;
	top: 0.5rem;
	left: 1rem;
	font-family: var(--font-display);
	font-size: 4rem;
	line-height: 1;
	color: var(--vp-teal);
	opacity: 0.3;
}

.opp-testimonial-quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.opp-testimonial-quote p {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--vp-white);
	margin: 0;
}

.opp-testimonial-attrib {
	margin-top: 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.75);
}

/* Service tiers — VITA's offer */
.opp-service-tiers {
	margin: var(--space-3xl) 0 var(--space-2xl);
}

.opp-service-tiers-title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--vp-navy);
	margin: 0 0 1em;
	letter-spacing: -0.005em;
}

.opp-tier-grid {
	display: grid;
	gap: 1rem;
}

.opp-tier-grid--count-1 { grid-template-columns: 1fr; }
.opp-tier-grid--count-2 { grid-template-columns: repeat(2, 1fr); }
.opp-tier-grid--count-3 { grid-template-columns: repeat(3, 1fr); }
.opp-tier-grid--count-4 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
	.opp-tier-grid--count-3,
	.opp-tier-grid--count-4 {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px) {
	.opp-tier-grid {
		grid-template-columns: 1fr !important;
	}
}

.opp-tier {
	background: var(--vp-white);
	border: 1px solid var(--vp-light-grey);
	border-radius: 4px;
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.opp-tier--highlight {
	background: var(--vp-teal);
	color: var(--vp-white);
	border-color: var(--vp-teal-dark);
}

.opp-tier-label {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--vp-navy);
	letter-spacing: -0.005em;
}

.opp-tier--highlight .opp-tier-label {
	color: var(--vp-white);
}

.opp-tier-price {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--vp-teal-dark);
	letter-spacing: 0.01em;
}

.opp-tier--highlight .opp-tier-price {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.125rem;
}

.opp-tier-desc {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--vp-dark-grey);
	margin: 0;
}

.opp-tier--highlight .opp-tier-desc {
	color: rgba(255, 255, 255, 0.92);
}

.opp-tier-footnote {
	margin: 1rem 0 0;
	font-size: 0.75rem;
	color: var(--vp-mid-grey);
	font-style: italic;
	line-height: 1.5;
}

/* Contact CTA at the end of an opportunity */
.opp-contact-cta {
	margin: var(--space-3xl) 0 var(--space-xl);
	padding: 2rem 2.5rem;
	background: var(--vp-teal);
	color: var(--vp-white);
	border-radius: 4px;
	text-align: center;
}

.opp-contact-cta-title {
	font-family: var(--font-display);
	font-size: 1.375rem;
	color: var(--vp-white);
	margin: 0 0 0.4em;
	letter-spacing: -0.005em;
}

.opp-contact-cta-lede {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 1.25rem;
}

.opp-contact-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.opp-contact-cta-btn {
	display: inline-flex;
	align-items: center;
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.75rem 1.5rem;
	border-radius: 3px;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.opp-contact-cta-btn--primary {
	background: var(--vp-white);
	color: var(--vp-teal-dark);
}

.opp-contact-cta-btn--primary:hover {
	background: var(--vp-off-white);
	color: var(--vp-navy);
}

.opp-contact-cta-btn--secondary {
	background: transparent;
	color: var(--vp-white);
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.opp-contact-cta-btn--secondary:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--vp-white);
}


/* ----------------------------------------------------------- */
/*  Opportunity downloadable resource card                     */
/* ----------------------------------------------------------- */

.opp-resource {
	margin: var(--space-2xl) 0;
}

.opp-resource-label {
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--vp-teal-dark);
	margin: 0 0 0.75em;
}

.opp-resource-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1.5rem;
	align-items: center;
	padding: 1.25rem 1.5rem;
	background: var(--vp-white);
	border: 1px solid var(--vp-light-grey);
	border-left: 4px solid var(--vp-teal);
	border-radius: 0 4px 4px 0;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.opp-resource-card:hover {
	border-color: var(--vp-teal);
	box-shadow: 0 2px 6px rgba(13, 131, 137, 0.1);
	transform: translateY(-1px);
}

.opp-resource-icon {
	width: 56px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vp-navy);
	color: var(--vp-white);
	border-radius: 3px;
	font-family: var(--font-display);
	flex-shrink: 0;
}

.opp-resource-ext {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.opp-resource-title {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--vp-navy);
	margin: 0 0 0.25rem;
	line-height: 1.3;
}

.opp-resource-card:hover .opp-resource-title {
	color: var(--vp-teal-dark);
}

.opp-resource-desc {
	font-size: 0.875rem;
	color: var(--vp-dark-grey);
	margin: 0.25rem 0 0.5rem;
	line-height: 1.5;
}

.opp-resource-detail {
	font-size: 0.75rem;
	color: var(--vp-mid-grey);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.opp-resource-action {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--vp-teal-dark);
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: gap 0.15s ease;
}

.opp-resource-card:hover .opp-resource-action {
	gap: 0.65rem;
}

.opp-resource-arrow {
	font-size: 1.125rem;
	transition: transform 0.15s ease;
}

.opp-resource-card:hover .opp-resource-arrow {
	transform: translateY(2px);
}

@media (max-width: 600px) {
	.opp-resource-card {
		grid-template-columns: auto 1fr;
	}
	.opp-resource-action {
		grid-column: 1 / -1;
		justify-self: end;
	}
}


/* ----------------------------------------------------------- */
/*  Videos & Webinars                                          */
/* ----------------------------------------------------------- */

.video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5rem;
}

.video-card {
	background: var(--vp-white);
	border: 1px solid var(--vp-light-grey);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.video-card:hover {
	border-color: var(--vp-teal);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.video-card-link {
	display: block;
	position: relative;
	text-decoration: none;
	color: inherit;
}

.video-card-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--vp-navy);
	overflow: hidden;
}

.video-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.video-card:hover .video-card-thumb img {
	transform: scale(1.03);
}

.video-card-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.92;
	transition: opacity 0.15s ease, transform 0.15s ease;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.video-card:hover .video-card-play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.08);
}

.video-card-play svg path {
	fill: rgba(0, 0, 0, 0.7);
	transition: fill 0.15s ease;
}

.video-card:hover .video-card-play svg path {
	fill: #cc0000;
}

.video-card-duration {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: rgba(0, 0, 0, 0.78);
	color: var(--vp-white);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 3px 8px;
	border-radius: 3px;
}

.video-card-body {
	padding: 1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.video-card-format {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vp-teal-dark);
	margin-bottom: 0.5rem;
}

.video-card-format--webinar {
	color: var(--vp-rose, #c64b6e);
}

.video-card-title {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--vp-navy);
	margin: 0 0 0.5rem;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.video-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.video-card-title a:hover {
	color: var(--vp-teal-dark);
}

.video-card-lede {
	font-size: 0.875rem;
	color: var(--vp-dark-grey);
	line-height: 1.5;
	margin: 0 0 0.75rem;
	flex-grow: 1;
}

.video-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	font-size: 0.75rem;
	color: var(--vp-mid-grey);
	letter-spacing: 0.02em;
}

.video-card-meta-item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

/* Single-page "Watch on YouTube" card */
.video-watch-card {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0 auto var(--space-2xl);
	max-width: 760px;
	background: var(--vp-white);
	border: 1px solid var(--vp-light-grey);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.video-watch-card:hover {
	border-color: var(--vp-teal);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.video-watch-card-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--vp-navy);
	overflow: hidden;
}

.video-watch-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.video-watch-card:hover .video-watch-card-thumb img {
	transform: scale(1.02);
}

.video-watch-card-cta {
	padding: 1.5rem 2rem;
	background: var(--vp-teal);
	color: var(--vp-white);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	transition: background 0.15s ease;
}

.video-watch-card:hover .video-watch-card-cta {
	background: var(--vp-teal-dark);
}

.video-watch-card-cta-text {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.video-watch-card-cta-sub {
	font-size: 0.8125rem;
	opacity: 0.85;
}


/* ----------------------------------------------------------- */
/*  Webinars                                                    */
/* ----------------------------------------------------------- */

.webinar-section {
	margin-bottom: var(--space-3xl);
}

.webinar-section:last-child {
	margin-bottom: 0;
}

.webinar-section-title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--vp-navy);
	margin: 0 0 0.5em;
	letter-spacing: -0.005em;
	padding-bottom: 0.5em;
	border-bottom: 2px solid var(--vp-teal);
	display: inline-block;
}

.webinar-section-lede {
	font-size: 0.9375rem;
	color: var(--vp-mid-grey);
	margin: 0 0 1.5rem;
	line-height: 1.55;
}

.webinar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.25rem;
}

.webinar-card {
	background: var(--vp-white);
	border: 1px solid var(--vp-light-grey);
	border-radius: 4px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.webinar-card:hover {
	border-color: var(--vp-teal);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.webinar-card-link {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.25rem;
	padding: 1.25rem 1.5rem;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.webinar-card-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	background: var(--vp-teal);
	color: var(--vp-white);
	padding: 0.75rem 0.85rem;
	border-radius: 4px;
	min-width: 72px;
	text-align: center;
	gap: 2px;
}

.webinar-card-date--past {
	background: var(--vp-navy);
	opacity: 0.92;
}

.webinar-card-date-day {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

.webinar-card-date-month {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.9;
}

.webinar-card-date-time {
	font-size: 0.75rem;
	margin-top: 4px;
	opacity: 0.85;
}

.webinar-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.webinar-card-badge {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vp-teal-dark);
	margin-bottom: 0.15rem;
}

.webinar-card-badge--past {
	color: var(--vp-mid-grey);
}

.webinar-card-title {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--vp-navy);
	margin: 0;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.webinar-card-lede {
	font-size: 0.8125rem;
	color: var(--vp-dark-grey);
	margin: 0;
	line-height: 1.5;
}

.webinar-card-meta {
	font-size: 0.75rem;
	color: var(--vp-mid-grey);
	letter-spacing: 0.02em;
}

.webinar-card-cta {
	margin-top: auto;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--vp-teal-dark);
	padding-top: 0.4rem;
}

.webinar-card:hover .webinar-card-cta {
	color: var(--vp-teal);
}

/* What you'll learn block */
.webinar-what-youll-learn {
	margin-bottom: var(--space-xl);
}

/* Registration form */
.webinar-register {
	background: var(--vp-off-white);
	border: 1px solid var(--vp-light-grey);
	border-left: 4px solid var(--vp-teal);
	border-radius: 0 4px 4px 0;
	padding: 1.75rem 2rem;
	margin: var(--space-xl) 0;
	max-width: 640px;
}

.webinar-register-title {
	font-family: var(--font-display);
	font-size: 1.375rem;
	color: var(--vp-navy);
	margin: 0 0 0.4em;
	letter-spacing: -0.005em;
}

.webinar-register-lede {
	font-size: 0.9375rem;
	color: var(--vp-dark-grey);
	margin: 0 0 1.25rem;
	line-height: 1.55;
}

.webinar-register-errors {
	background: #fdf0f0;
	border-left: 4px solid #c64b6e;
	border-radius: 0 4px 4px 0;
	padding: 1rem 1.25rem;
	margin-bottom: 1.25rem;
}

.webinar-register-errors ul {
	margin: 0;
	padding-left: 1.2em;
	font-size: 0.9375rem;
	color: var(--vp-dark-grey);
}

.webinar-register-errors li + li {
	margin-top: 0.4em;
}

.webinar-register-form .apply-row {
	margin-bottom: 1rem;
}

.webinar-register-form .apply-row--checkbox label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--vp-dark-grey);
	font-weight: 400;
	margin-bottom: 0;
	cursor: pointer;
}

.webinar-register-form .apply-row--checkbox input {
	margin-top: 3px;
	flex-shrink: 0;
}

.webinar-register-form .apply-row--honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Success / already registered confirmation */
.webinar-success {
	background: linear-gradient(135deg, rgba(13, 131, 137, 0.06) 0%, var(--vp-white) 100%);
	border: 1px solid var(--vp-teal);
	border-left: 4px solid var(--vp-teal);
	border-radius: 0 4px 4px 0;
	padding: 1.75rem 2rem;
	margin: var(--space-xl) auto;
	max-width: 640px;
	text-align: center;
}

.webinar-success h2 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--vp-navy);
	margin: 0 0 0.6em;
}

.webinar-success p {
	font-size: 0.9375rem;
	color: var(--vp-dark-grey);
	line-height: 1.55;
	margin: 0;
}

/* Pending recording */
.webinar-pending-recording {
	background: var(--vp-off-white);
	border: 1px solid var(--vp-light-grey);
	border-radius: 4px;
	padding: 1.75rem 2rem;
	margin: var(--space-xl) 0;
	max-width: 640px;
}

.webinar-pending-recording h2 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: var(--vp-navy);
	margin: 0 0 0.6em;
}

.webinar-pending-recording p {
	font-size: 0.9375rem;
	color: var(--vp-dark-grey);
	line-height: 1.55;
	margin: 0 0 1rem;
}

.webinar-pending-recording p:last-child {
	margin-bottom: 0;
}


/* Broken / draft video card (admin view only) */
.video-card--broken {
	border-color: #e0c8a0;
	background: #fffbf2;
}

.video-card-thumb--broken {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f4e4c1;
	color: #8a6d1a;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: var(--font-display);
	letter-spacing: 0.02em;
}


/* ----------------------------------------------------------- */
/*  Webinars notify-list capture (top of archive)              */
/* ----------------------------------------------------------- */

.webinar-notify {
	margin-bottom: var(--space-2xl);
}

.webinar-notify-inner {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 2rem;
	align-items: start;
	background: linear-gradient(135deg, rgba(13, 131, 137, 0.05) 0%, var(--vp-white) 100%);
	border: 1px solid var(--vp-light-grey);
	border-left: 4px solid var(--vp-teal);
	border-radius: 0 4px 4px 0;
	padding: 1.75rem 2rem;
}

@media (max-width: 760px) {
	.webinar-notify-inner {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

.webinar-notify-copy {
	padding-top: 0.25rem;
}

.webinar-notify-title {
	font-family: var(--font-display);
	font-size: 1.375rem;
	color: var(--vp-navy);
	margin: 0 0 0.5em;
	letter-spacing: -0.005em;
	line-height: 1.25;
}

.webinar-notify-lede {
	font-size: 0.9375rem;
	color: var(--vp-dark-grey);
	line-height: 1.55;
	margin: 0;
}

.webinar-notify-form .webinar-notify-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1rem;
	margin-bottom: 0.75rem;
}

.webinar-notify-form .webinar-notify-fields .apply-row {
	margin-bottom: 0;
}

.webinar-notify-form .webinar-notify-fields .apply-row:nth-child(3) {
	grid-column: 1 / -1;
}

@media (max-width: 480px) {
	.webinar-notify-form .webinar-notify-fields {
		grid-template-columns: 1fr;
	}
	.webinar-notify-form .webinar-notify-fields .apply-row:nth-child(3) {
		grid-column: 1;
	}
}

.webinar-notify-form .apply-row--checkbox {
	margin: 0.5rem 0 1rem;
}

.webinar-notify-form .apply-row--checkbox label {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--vp-dark-grey);
	font-weight: 400;
	margin-bottom: 0;
	cursor: pointer;
}

.webinar-notify-form .apply-row--checkbox input {
	margin-top: 3px;
	flex-shrink: 0;
}

.webinar-notify-form .apply-row--honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* ----------------------------------------------------------- */
/*  Video Library — filter pills                                */
/* ----------------------------------------------------------- */

.video-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--space-xl);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--vp-light-grey);
}

.video-filter-pill {
	background: var(--vp-white);
	border: 1px solid var(--vp-light-grey);
	color: var(--vp-dark-grey);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.5rem 1rem;
	border-radius: 24px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.video-filter-pill:hover {
	border-color: var(--vp-teal);
	color: var(--vp-teal-dark);
}

.video-filter-pill:focus-visible {
	outline: 2px solid var(--vp-teal);
	outline-offset: 2px;
}

.video-filter-pill.is-active {
	background: var(--vp-teal);
	color: var(--vp-white);
	border-color: var(--vp-teal-dark);
}

.video-filter-pill.is-active:hover {
	color: var(--vp-white);
}

.video-filter-count {
	font-size: 0.75rem;
	opacity: 0.8;
	font-weight: 500;
}

.video-filter-empty {
	margin-top: var(--space-xl);
	padding: var(--space-xl);
	text-align: center;
	color: var(--vp-mid-grey);
	font-size: 0.9375rem;
	background: var(--vp-off-white);
	border-radius: 4px;
}

/* Per-category accent for the format badge on cards */
.video-card-format--webinar   { color: var(--vp-rose, #c64b6e); }
.video-card-format--interview { color: #1b6b8a; }
.video-card-format--briefing  { color: var(--vp-teal-dark); }
.video-card-format--update    { color: #8a6d1a; }


/* ----------------------------------------------------------- */
/*  Case citation block (single-vp_case)                        */
/* ----------------------------------------------------------- */

.case-citation {
	background: var(--vp-off-white);
	border-left: 4px solid var(--vp-teal);
	border-radius: 0 4px 4px 0;
	padding: 1.25rem 1.5rem;
	margin: 0 0 var(--space-xl);
}

.case-citation-label {
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--vp-teal-dark);
	margin: 0 0 0.6em;
}

.case-citation-body {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--vp-navy);
}

.case-citation-body p {
	margin: 0;
}

.case-citation-body p + p {
	margin-top: 0.4em;
}

.case-citation-body strong {
	font-weight: 700;
}

.case-citation-body a {
	color: var(--vp-teal-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-word;
}

.case-citation-body a:hover {
	color: var(--vp-teal);
}


/* ----------------------------------------------------------- */
/*  Related-content admin diagnostic                            */
/*  Visible only when ?vp_related_debug=1 in URL and admin user */
/* ----------------------------------------------------------- */

.related-content-debug-notice {
	margin-top: 12px;
	padding: 10px 14px;
	background: rgba(193, 154, 41, 0.12);
	border: 1px solid rgba(193, 154, 41, 0.5);
	border-radius: 4px;
	font-size: 0.875rem;
	color: #6b540f;
	line-height: 1.4;
}

.related-panel-debug {
	margin-top: 6px;
	padding: 8px 10px;
	background: rgba(15, 42, 66, 0.04);
	border-left: 3px solid var(--vp-teal);
	border-radius: 0 3px 3px 0;
	font-size: 0.75rem;
	color: var(--vp-dark-grey);
	line-height: 1.5;
}

.related-panel-debug-row {
	display: block;
}

.related-panel-debug-row + .related-panel-debug-row {
	margin-top: 2px;
}

.related-panel-debug-row strong {
	color: var(--vp-navy);
	font-weight: 700;
}