/*
 * Verakase components (Luminol).
 *
 * Colours come from assets/css/tokens.css (--vk-*), which theme.json maps to
 * the block palette. Sizes, fonts and spacing come from theme.json presets.
 * Do not introduce raw colour values here.
 *
 * House rules: flat surfaces, 1px lines, 4px radius, no shadows, no glow, no
 * gradient text. JetBrains Mono is reserved for case IDs and UTC times.
 */

:root {
	--vk-mono: var(--wp--preset--font-family--mono);
	--vk-s1: var(--wp--preset--spacing--10);
	--vk-s2: var(--wp--preset--spacing--20);
	--vk-s3: var(--wp--preset--spacing--30);
	--vk-s4: var(--wp--preset--spacing--40);
	--vk-s5: var(--wp--preset--spacing--50);
	--vk-s6: var(--wp--preset--spacing--60);
	--vk-s7: var(--wp--preset--spacing--70);
	--vk-s8: var(--wp--preset--spacing--80);
	--vk-fs-xs: var(--wp--preset--font-size--xs);
	--vk-fs-sm: var(--wp--preset--font-size--sm);
	--vk-fs-base: var(--wp--preset--font-size--base);
	--vk-fs-md: var(--wp--preset--font-size--md);
	--vk-fs-lg: var(--wp--preset--font-size--lg);
	--vk-fs-xl: var(--wp--preset--font-size--xl);
	--vk-fs-xxl: var(--wp--preset--font-size--xxl);
	--vk-t-fast: var(--wp--custom--transition--fast);
	--vk-header-h: 4.25rem;
	--vk-border: var(--vk-hair) solid var(--vk-line);
}

/* ---------------------------------------------------------------------------
 * Legacy palette aliases
 *
 * Page content saved in the database before the rebrand may still reference
 * the old palette slugs (has-violet-color, has-night-background-color, ...).
 * Those slugs are no longer in theme.json; they are mapped here onto the new
 * tokens so old content follows the brand and the active mode. Remove once
 * the stored content has been re-saved with the new palette.
 * ------------------------------------------------------------------------- */

:root {
	--wp--preset--color--canvas: var(--vk-ground);
	--wp--preset--color--mist: var(--vk-surface);
	--wp--preset--color--ink: var(--vk-text);
	--wp--preset--color--ink-muted: var(--vk-muted);
	--wp--preset--color--ink-subtle: var(--vk-muted);
	--wp--preset--color--line-strong: var(--vk-muted);
	--wp--preset--color--night: var(--vk-ground);
	--wp--preset--color--night-raised: var(--vk-surface);
	--wp--preset--color--night-line: var(--vk-line);
	--wp--preset--color--night-text: var(--vk-text);
	--wp--preset--color--night-muted: var(--vk-muted);
	--wp--preset--color--violet: var(--vk-accent);
	--wp--preset--color--violet-strong: var(--vk-accent);
	--wp--preset--color--violet-soft: var(--vk-surface);
	--wp--preset--color--violet-bright: var(--vk-accent);
	--wp--preset--color--green: var(--vk-accent);
	--wp--preset--color--green-strong: var(--vk-accent);
	--wp--preset--color--green-soft: var(--vk-surface);
	--wp--preset--color--green-bright: var(--vk-accent);
	--wp--preset--color--amber-soft: var(--vk-surface);
	--wp--preset--color--slate: var(--vk-muted);
	--wp--preset--color--slate-soft: var(--vk-surface);
	--wp--preset--gradient--brand: none;
	--wp--preset--gradient--night-glow: none;
	--wp--preset--gradient--mist-glow: none;
	--wp--preset--shadow--product: none;
	--wp--preset--shadow--soft: none;
}

:is(.has-canvas-background-color, .has-night-background-color) { background-color: var(--vk-ground) !important; }
:is(.has-mist-background-color, .has-night-raised-background-color, .has-violet-soft-background-color, .has-green-soft-background-color, .has-amber-soft-background-color, .has-slate-soft-background-color) { background-color: var(--vk-surface) !important; }
:is(.has-violet-background-color, .has-violet-strong-background-color, .has-violet-bright-background-color, .has-green-background-color, .has-green-strong-background-color, .has-green-bright-background-color) { background-color: var(--vk-accent) !important; color: var(--vk-accent-ink); }
:is(.has-ink-background-color) { background-color: var(--vk-text) !important; color: var(--vk-ground); }
:is(.has-ink-color, .has-night-text-color) { color: var(--vk-text) !important; }
:is(.has-ink-muted-color, .has-ink-subtle-color, .has-night-muted-color, .has-slate-color) { color: var(--vk-muted) !important; }
:is(.has-violet-color, .has-violet-strong-color, .has-violet-bright-color, .has-green-color, .has-green-strong-color, .has-green-bright-color) { color: var(--vk-accent) !important; }
:is(.has-brand-gradient-background, .has-night-glow-gradient-background, .has-mist-glow-gradient-background) { background: var(--vk-surface) !important; }

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------- */

html {
	scroll-padding-top: calc(var(--vk-header-h) + 1rem);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3 {
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

strong, b {
	font-weight: 600;
}

::selection {
	background: var(--vk-accent);
	color: var(--vk-accent-ink);
}

:where(p, li, td) code {
	font-family: var(--vk-mono);
	font-size: 0.9em;
}

/* Inside product examples, file and process names stay in the text face. */
:where(.vk-pcard, .vk-float, .vk-mini, .vk-report, .vk-signal) code {
	font: inherit;
}

a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--vk-t-fast);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--vk-accent);
	outline-offset: 2px;
	border-radius: var(--vk-radius);
}

/* On accent-filled controls the ring uses the text colour so it stays distinct. */
:is(.wp-block-button__link, .vk-nav-cta .wp-block-navigation-item__content):focus-visible {
	outline-color: var(--vk-text);
}

/* Mono: case IDs and UTC times only. */
:is(.vk-pcard__id, .vk-report__id, .vk-mini__id, .vk-tl-item time, .vk-mono) {
	font-family: var(--vk-mono);
	font-weight: 400;
	font-variant-ligatures: none;
}

/* Layout resets: full-width bands sit flush, and grid/flex components own their spacing. */
.wp-site-blocks > * + *,
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + * {
	margin-block-start: 0;
}

body :is(.vk-hero__grid, .vk-split, .vk-flow, .vk-gains__list, .vk-audiences, .vk-principles, .vk-states,
	.vk-features, .vk-feature, .vk-usecases, .vk-usecase, .vk-ideas, .vk-contact, .vk-footer-grid, .vk-footer-legal,
	.vk-report, .vk-report__top, .vk-report__body, .vk-report__main, .vk-report__side, .vk-pcard, .vk-pcard__head,
	.vk-pcard__meta, .vk-mini, .vk-mini__head, .vk-hero-visual, .vk-principle-rows, .vk-bigsteps, .vk-signals,
	.vk-points, .vk-team, .vk-site-header__bar, .vk-site-header__tools) > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
 * Typography roles
 * ------------------------------------------------------------------------- */

.vk-eyebrow {
	margin: 0;
	font-size: var(--vk-fs-sm);
	font-weight: 500;
	color: var(--vk-accent);
}

.vk-lede {
	font-size: var(--vk-fs-md);
	line-height: 1.5;
	color: var(--vk-muted);
	max-width: var(--wp--custom--measure);
}

.vk-label {
	margin: 0;
	font-size: var(--vk-fs-xs);
	font-weight: 500;
	color: var(--vk-muted);
}

.vk-footnote,
.vk-demo-label,
.vk-meta {
	margin: 0;
	font-size: var(--vk-fs-xs);
	color: var(--vk-muted);
}

/* Legacy: was gradient text. Now plain. */
.vk-grad {
	background: none;
	color: inherit;
}

.vk-h-sm {
	font-size: var(--vk-fs-md);
}

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

.wp-block-button__link {
	transition: background-color var(--vk-t-fast), border-color var(--vk-t-fast), color var(--vk-t-fast);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--vk-text);
	border: var(--vk-hair) solid var(--vk-text);
	padding: 0.75rem 1.25rem;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--vk-surface);
	border-color: var(--vk-accent);
	color: var(--vk-text);
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------- */

.wp-site-blocks > header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.vk-site-header {
	background: var(--vk-ground);
	border-bottom: var(--vk-border);
	color: var(--vk-text);
}

.vk-site-header__bar {
	min-height: var(--vk-header-h);
	gap: var(--vk-s4);
}

.vk-site-header__tools {
	gap: var(--vk-s4);
}

/* Logo: both files are in the markup, the tokens decide which one shows. */
.vk-logo {
	display: inline-flex;
	flex: none;
	line-height: 0;
}

.vk-logo__img {
	height: 1.75rem;
	width: auto;
}

.vk-logo__img--on-dark {
	display: var(--vk-show-on-dark);
}

.vk-logo__img--on-light {
	display: var(--vk-show-on-light);
}

.vk-site-footer .vk-logo__img {
	height: 1.5rem;
}

/* Legacy text wordmark (site-title block), if a stored header still uses it. */
.vk-wordmark {
	margin: 0;
	flex-shrink: 0;
}

.vk-wordmark a {
	color: inherit;
	text-decoration: none;
}

.vk-primary-nav .wp-block-navigation-item__content {
	color: var(--vk-muted);
	text-decoration: none;
	padding-block: 0.4rem;
	transition: color var(--vk-t-fast), background-color var(--vk-t-fast);
}

.vk-primary-nav .wp-block-navigation-item__content:hover,
.vk-primary-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--vk-text);
}

.vk-primary-nav .wp-block-navigation-item:not(.vk-nav-cta) .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--vk-accent);
	text-underline-offset: 0.5em;
	text-decoration-thickness: 2px;
}

.vk-primary-nav .vk-nav-cta .wp-block-navigation-item__content {
	color: var(--vk-accent-ink);
	background: var(--vk-accent);
	border-radius: var(--vk-radius);
	padding: 0.55rem 1rem;
}

.vk-primary-nav .vk-nav-cta .wp-block-navigation-item__content:hover,
.vk-primary-nav .vk-nav-cta .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--vk-accent-hover);
	color: var(--vk-accent-ink);
}

.vk-primary-nav .wp-block-navigation__responsive-container-open,
.vk-primary-nav .wp-block-navigation__responsive-container-close {
	color: var(--vk-text);
	min-width: 2.5rem;
	min-height: 2.5rem;
	align-items: center;
	justify-content: center;
}

.vk-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--custom--gutter);
	background: var(--vk-ground) !important;
	color: var(--vk-text) !important;
}

.vk-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.vk-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

.vk-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--vk-s4);
	font-size: var(--vk-fs-lg);
	font-weight: 500;
}

.vk-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--vk-text);
}

.vk-primary-nav .wp-block-navigation__responsive-container.is-menu-open .vk-nav-cta {
	margin-top: var(--vk-s4);
	font-size: var(--vk-fs-base);
}

.vk-primary-nav .wp-block-navigation__responsive-container.is-menu-open .vk-nav-cta .wp-block-navigation-item__content {
	color: var(--vk-accent-ink);
	padding: 0.55rem 1rem;
}

/* Keep the overlay menu up to 1120px: five links, the CTA, language and theme controls need the room. */
@media (min-width: 600px) and (max-width: 1119.98px) {
	.vk-primary-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.vk-primary-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Language switcher. */
.vk-lang ul {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--vk-fs-xs);
	font-weight: 500;
}

.vk-lang li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--vk-muted);
}

.vk-lang :is(a, span) {
	color: var(--vk-muted);
	text-decoration: none;
}

.vk-lang a:hover {
	color: var(--vk-text);
	text-decoration: underline;
}

.vk-lang [aria-current] {
	color: var(--vk-text);
	text-decoration: underline;
	text-decoration-color: var(--vk-accent);
	text-underline-offset: 0.35em;
	text-decoration-thickness: 2px;
}

/* Theme toggle. Shows the mode it switches to: sun while dark, moon while light. */
.vk-theme-toggle {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: var(--vk-hair) solid var(--vk-muted);
	border-radius: var(--vk-radius);
	background: transparent;
	color: var(--vk-text);
	cursor: pointer;
	transition: border-color var(--vk-t-fast), background-color var(--vk-t-fast);
}

.vk-theme-toggle[hidden] {
	display: none;
}

.vk-theme-toggle:hover {
	border-color: var(--vk-text);
	background: var(--vk-surface);
}

.vk-theme-toggle__sun {
	display: var(--vk-show-on-dark);
}

.vk-theme-toggle__moon {
	display: var(--vk-show-on-light);
}

/* ---------------------------------------------------------------------------
 * Sections
 * ------------------------------------------------------------------------- */

.vk-section {
	padding-block: var(--vk-s7);
	position: relative;
}

/* Surface bands. --mist and --night are legacy names that now mean the same thing. */
:is(.vk-section--surface, .vk-section--mist, .vk-section--night),
.vk-section.has-surface-background-color {
	background: var(--vk-surface);
	border-block: var(--vk-border);
}

/* On a surface band, nested cards step back to the ground colour. */
:is(.vk-section--surface, .vk-section--mist, .vk-section--night, .vk-section.has-surface-background-color)
	:is(.vk-pcard, .vk-float, .vk-mini, .vk-report, .vk-state-item, .vk-principle, .vk-usecase__qs, .vk-form, .vk-signal) {
	background: var(--vk-ground);
}

.vk-intro {
	margin-bottom: var(--vk-s6);
	max-width: 46rem;
}

.vk-intro > * {
	margin: 0;
}

.vk-intro > * + * {
	margin-top: var(--vk-s4);
}

.vk-intro--center {
	margin-inline: auto !important;
	text-align: center;
}

.vk-intro--center .vk-lede {
	margin-inline: auto;
}

.vk-split {
	display: grid;
	gap: var(--vk-s6);
	align-items: start;
}

@media (min-width: 60rem) {
	.vk-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--vk-s7);
		align-items: center;
	}

	.vk-split:has(.vk-sticky) {
		align-items: start;
	}

	.vk-sticky {
		position: sticky;
		top: calc(var(--vk-header-h) + var(--vk-s6));
	}
}

.vk-split__copy > *,
.vk-prose-col > * {
	margin: 0;
}

.vk-split__copy > * + *,
.vk-prose-col > * + * {
	margin-top: var(--vk-s4);
}

.vk-prose-col .wp-block-buttons {
	margin-top: var(--vk-s5);
}

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

.vk-hero {
	padding-block: var(--vk-s7);
	border-bottom: var(--vk-border);
}

.vk-hero__head > * {
	margin: 0;
}

.vk-hero__head h1 {
	margin-top: var(--vk-s4);
}

.vk-hero__grid {
	display: grid;
	gap: var(--vk-s6);
	align-items: start;
}

.vk-hero__head + .vk-hero__grid {
	margin-top: var(--vk-s5) !important;
}

@media (min-width: 64rem) {
	.vk-hero__grid {
		grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
		gap: var(--vk-s7);
		align-items: center;
	}

	.vk-hero__head + .vk-hero__grid {
		align-items: start;
	}
}

.vk-hero__copy > * {
	margin: 0;
}

.vk-hero__copy > * + * {
	margin-top: var(--vk-s4);
}

.vk-hero .vk-lede {
	max-width: 34rem;
}

.vk-hero .wp-block-buttons {
	margin-top: var(--vk-s5);
}

.vk-hero__note {
	margin-top: var(--vk-s5) !important;
	font-size: var(--vk-fs-xs);
	color: var(--vk-muted);
}

/* ---------------------------------------------------------------------------
 * Evidence grades and status chips
 *
 * A grade is never colour alone: each has its own glyph shape and always
 * carries its name as text.
 *   Direct        accent, filled square
 *   Plausible     amber, half-filled circle
 *   Context       muted, ring
 *   Inconclusive  muted, dashed ring (and a dashed chip outline)
 * ------------------------------------------------------------------------- */

.vk-state,
.vk-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	flex: none;
	padding: 0.25rem 0.625rem;
	border: var(--vk-border);
	border-radius: var(--vk-radius);
	font-size: var(--vk-fs-xs);
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--vk-text);
	background: transparent;
}

.vk-state::before,
.vk-pill::before {
	content: "";
	flex: none;
	box-sizing: border-box;
	width: 0.625rem;
	height: 0.625rem;
	border: 1.5px solid var(--vk-muted);
	border-radius: 50%;
}

.vk-state--direct::before {
	/* A square made of border, so it survives forced-colours mode. */
	width: 0;
	height: 0;
	border: 0.3125rem solid var(--vk-accent);
	border-radius: 1px;
}

.vk-state--plausible::before,
.vk-pill--review::before {
	border-color: var(--vk-amber);
	/* Hard stop: one half filled, one half empty. */
	background: linear-gradient(90deg, var(--vk-amber) 50%, transparent 50%);
}

.vk-state--context::before,
.vk-pill--draft::before {
	border-color: var(--vk-muted);
}

.vk-state--inconclusive {
	border-style: dashed;
	border-color: var(--vk-muted);
}

.vk-state--inconclusive::before {
	border-style: dashed;
	border-color: var(--vk-muted);
}

.vk-pill--ready::before {
	border-color: var(--vk-accent);
	background: var(--vk-accent);
}

.vk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vk-s2);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Product visuals (shared card language): flat, ruled, in the flow.
 * ------------------------------------------------------------------------- */

.vk-hero-visual {
	position: relative;
}

.vk-pcard,
.vk-float,
.vk-mini,
.vk-report {
	background: var(--vk-surface);
	color: var(--vk-text);
	border: var(--vk-border);
	border-radius: var(--vk-radius);
	box-shadow: none;
}

.vk-pcard {
	padding: var(--vk-s5);
	display: grid;
	gap: var(--vk-s4);
}

.vk-pcard__head,
.vk-mini__head,
.vk-pcard__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--vk-s3);
	flex-wrap: wrap;
}

.vk-pcard__head > *,
.vk-mini__head > *,
.vk-pcard__meta > * {
	margin: 0;
}

.vk-pcard__id,
.vk-mini__id,
.vk-report__id {
	font-size: var(--vk-fs-sm);
	color: var(--vk-text);
}

.vk-pcard__title {
	font-size: var(--vk-fs-base);
	font-weight: 500;
	line-height: 1.35;
}

.vk-pcard__finding {
	padding: var(--vk-s3) var(--vk-s4);
	border: var(--vk-border);
	border-radius: var(--vk-radius);
}

.vk-pcard__finding > * {
	margin: 0;
}

.vk-pcard__finding-text,
.vk-float__text {
	margin-top: var(--vk-s2) !important;
	font-size: var(--vk-fs-sm);
	line-height: 1.5;
}

.vk-pcard__finding-text .vk-state,
.vk-float__text .vk-state {
	margin-right: 0.4em;
}

.vk-pcard__meta {
	padding-top: var(--vk-s3);
	border-top: var(--vk-border);
}

.vk-pcard__meta-item {
	font-size: var(--vk-fs-xs);
	color: var(--vk-muted);
}

/* Legacy: was a floating, overlapping card. Now a plain card below the case. */
.vk-float {
	margin: var(--vk-s4) 0 0 !important;
	padding: var(--vk-s4) var(--vk-s5);
}

.vk-float > * {
	margin: 0;
}

.vk-hero-visual > .vk-demo-label {
	margin-top: var(--vk-s3) !important;
}

/* Timeline rows: UTC time, then what happened. */
.vk-mini-tl {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--vk-border);
}

.vk-tl-item {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr) auto;
	gap: 0 var(--vk-s3);
	align-items: baseline;
	padding: 0.55rem 0;
	border-bottom: var(--vk-border);
	font-size: var(--vk-fs-sm);
	line-height: 1.4;
}

.vk-tl-item time {
	font-size: var(--vk-fs-xs);
	color: var(--vk-muted);
}

.vk-tl-item.is-key span {
	font-weight: 500;
}

.vk-tl-item.is-context span,
.vk-tl-item.is-gap span {
	color: var(--vk-muted);
}

.vk-tl-item.is-gap {
	border-bottom-style: dashed;
}

.vk-tl-item em {
	font-style: normal;
	font-size: var(--vk-fs-xs);
	color: var(--vk-muted);
	border: var(--vk-border);
	border-radius: var(--vk-radius);
	padding: 0 0.45rem;
}

/* Visual stage beside feature copy. */
.vk-visual {
	padding: clamp(1.25rem, 4vw, 3rem);
	display: grid;
	place-items: center;
	border: var(--vk-border);
	border-radius: var(--vk-radius);
}

.vk-mini {
	width: 100%;
	max-width: 26rem;
	padding: var(--vk-s5);
	display: grid;
	gap: var(--vk-s4);
	box-sizing: border-box;
}

.vk-mini__title {
	font-weight: 500;
	line-height: 1.35;
}

.vk-mini__rows,
.vk-mini__toc,
.vk-steps-mini {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--vk-fs-sm);
}

.vk-mini__rows li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--vk-s3);
	padding: 0.6rem 0;
	border-bottom: var(--vk-border);
}

.vk-mini__rows li:last-child {
	border-bottom: 0;
}

.vk-mini__n,
.vk-mini__foot {
	font-size: var(--vk-fs-xs);
	color: var(--vk-muted);
}

.vk-mini__toc {
	counter-reset: vk-toc;
}

.vk-mini__toc li {
	counter-increment: vk-toc;
	display: flex;
	gap: var(--vk-s3);
	padding: 0.55rem 0;
	border-bottom: var(--vk-border);
}

.vk-mini__toc li::before {
	content: counter(vk-toc, decimal-leading-zero);
	font-size: var(--vk-fs-xs);
	color: var(--vk-muted);
	padding-top: 0.15em;
}

.vk-steps-mini {
	counter-reset: vk-sm;
}

.vk-steps-mini li {
	counter-increment: vk-sm;
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--vk-s3);
	padding: 0.55rem 0;
	color: var(--vk-muted);
}

.vk-steps-mini li::before {
	content: counter(vk-sm);
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border: var(--vk-hair) solid var(--vk-muted);
	border-radius: var(--vk-radius);
	font-size: var(--vk-fs-xs);
	box-sizing: border-box;
}

.vk-steps-mini li.is-done {
	color: var(--vk-text);
}

.vk-steps-mini li.is-done::before {
	content: "✓";
	background: var(--vk-accent);
	border-color: var(--vk-accent);
	color: var(--vk-accent-ink);
}

.vk-steps-mini li.is-current {
	color: var(--vk-text);
	font-weight: 600;
}

.vk-steps-mini li.is-current::before {
	border-color: var(--vk-accent);
	border-width: 2px;
	color: var(--vk-text);
}

.vk-steps-mini em {
	font-style: normal;
	font-size: var(--vk-fs-xs);
	color: var(--vk-muted);
	font-weight: 400;
}

/* Unconnected signals (problem band). */
.vk-signals {
	display: grid;
	gap: var(--vk-s5);
	justify-items: start;
}

.vk-signals__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-width: 30rem;
}

.vk-signal {
	padding: 0.45rem 0.8rem;
	border: var(--vk-border);
	border-radius: var(--vk-radius);
	background: var(--vk-surface);
	font-size: var(--vk-fs-sm);
	color: var(--vk-muted);
}

.vk-signal.is-lit {
	color: var(--vk-text);
	border-color: var(--vk-accent);
}

.vk-signals__result {
	padding: 0.8rem 1.1rem;
	border: var(--vk-border);
	border-radius: var(--vk-radius);
	background: var(--vk-surface);
	color: var(--vk-text);
	font-size: var(--vk-fs-sm);
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Signal → report flow
 * ------------------------------------------------------------------------- */

.vk-flow {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: vk-flow;
	display: grid;
	gap: var(--vk-s5);
}

.vk-flow li {
	counter-increment: vk-flow;
	display: grid;
	gap: 0.35rem;
	align-content: start;
	padding-top: var(--vk-s4);
	border-top: var(--vk-border);
}

.vk-flow li::before {
	content: counter(vk-flow, decimal-leading-zero);
	font-size: var(--vk-fs-xs);
	font-weight: 500;
	color: var(--vk-muted);
}

.vk-flow li:last-child {
	border-top-color: var(--vk-accent);
}

.vk-flow strong {
	font-size: var(--vk-fs-md);
	font-weight: 600;
	line-height: 1.25;
}

.vk-flow span {
	color: var(--vk-muted);
	font-size: var(--vk-fs-sm);
}

@media (min-width: 56rem) {
	.vk-flow {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------
 * Numbered rows (analyst gains)
 * ------------------------------------------------------------------------- */

.vk-gains__list {
	display: grid;
}

.vk-gain {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	column-gap: var(--vk-s4);
	padding-block: var(--vk-s5);
	border-top: var(--vk-border);
}

.vk-gain:last-child {
	border-bottom: var(--vk-border);
}

.vk-gain > * {
	margin: 0;
	grid-column: 2;
}

.vk-gain > .vk-gain__n {
	grid-column: 1;
	grid-row: 1 / span 2;
	font-size: var(--vk-fs-sm);
	font-weight: 500;
	color: var(--vk-muted);
	padding-top: 0.3em;
}

.vk-gain h3 {
	font-size: var(--vk-fs-md);
}

.vk-gain p:not(.vk-gain__n) {
	margin-top: 0.4rem;
	color: var(--vk-muted);
}

/* ---------------------------------------------------------------------------
 * Report preview
 * ------------------------------------------------------------------------- */

.vk-report {
	max-width: 64rem;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	display: grid;
	gap: var(--vk-s5);
	box-sizing: border-box;
}

.vk-intro--center + .vk-report {
	margin-inline: auto !important;
}

.vk-report__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--vk-s4);
	padding-bottom: var(--vk-s5);
	border-bottom: var(--vk-border);
}

.vk-report__heading > * {
	margin: 0;
}

.vk-report__title {
	margin-top: 0.4rem !important;
	font-size: var(--vk-fs-lg);
	line-height: 1.2;
	max-width: 26ch;
}

.vk-report__pills {
	display: flex;
	gap: var(--vk-s2);
	flex-wrap: wrap;
	margin: 0;
}

.vk-report__pills > * {
	margin: 0;
}

.vk-report__body {
	display: grid;
	gap: var(--vk-s5);
}

@media (min-width: 52rem) {
	.vk-report__body {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--vk-s6);
	}

	.vk-report__side {
		padding-left: var(--vk-s6);
		border-left: var(--vk-border);
	}
}

.vk-report__main,
.vk-report__side {
	display: grid;
	gap: var(--vk-s5);
	align-content: start;
}

.vk-report__block > * {
	margin: 0;
}

.vk-report__block > * + * {
	margin-top: var(--vk-s2);
}

.vk-report__block p:not(.vk-label) {
	font-size: var(--vk-fs-sm);
	line-height: 1.6;
	color: var(--vk-muted);
}

.vk-report__findings {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--vk-border);
}

.vk-report__findings li {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	gap: var(--vk-s3);
	align-items: baseline;
	padding: 0.65rem 0;
	border-bottom: var(--vk-border);
	font-size: var(--vk-fs-sm);
}

.vk-report__findings .vk-state {
	justify-self: start;
}

.vk-report__block .vk-report__assessment {
	padding: var(--vk-s3) var(--vk-s4);
	border: var(--vk-border);
	border-radius: var(--vk-radius);
	color: var(--vk-text);
}

.vk-report__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vk-s2);
}

.vk-report__stats li {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.1rem;
	padding: var(--vk-s3);
	border: var(--vk-border);
	border-radius: var(--vk-radius);
	font-size: var(--vk-fs-xs);
	color: var(--vk-muted);
}

.vk-report__stats strong {
	font-size: var(--vk-fs-lg);
	font-weight: 600;
	color: var(--vk-text);
}

.vk-report__block .vk-report__limit {
	padding-left: var(--vk-s3);
	border-left: 2px dashed var(--vk-muted);
}

@media (max-width: 36rem) {
	.vk-report__findings li {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.35rem;
	}
}

/* ---------------------------------------------------------------------------
 * Ruled rows: audiences, principle rows, use cases, big steps
 * ------------------------------------------------------------------------- */

.vk-audiences,
.vk-principle-rows,
.vk-usecases {
	display: grid;
	border-top: var(--vk-border);
}

.vk-audience {
	display: grid;
	gap: var(--vk-s2) var(--vk-s6);
	padding-block: var(--vk-s5);
	border-bottom: var(--vk-border);
	align-items: baseline;
}

@media (min-width: 48rem) {
	.vk-audience {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.vk-audience > * {
	margin: 0;
}

.vk-audience h3 {
	font-size: var(--vk-fs-lg);
	line-height: 1.2;
}

.vk-audience p {
	color: var(--vk-muted);
}

.vk-principle-row {
	padding-block: var(--vk-s5);
	border-bottom: var(--vk-border);
}

.vk-principle-row > * {
	margin: 0;
}

.vk-principle-row h3 {
	font-size: var(--vk-fs-md);
}

.vk-principle-row p {
	margin-top: 0.4rem;
	color: var(--vk-muted);
}

.vk-integration .vk-intro {
	margin-bottom: 0;
}

.vk-bigsteps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: vk-big;
	border-top: var(--vk-border);
}

.vk-bigsteps li {
	counter-increment: vk-big;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: var(--vk-s2) var(--vk-s4);
	padding-block: var(--vk-s5);
	border-bottom: var(--vk-border);
	align-items: baseline;
}

.vk-bigsteps li::before {
	content: counter(vk-big, decimal-leading-zero);
	grid-row: 1 / span 2;
	font-size: var(--vk-fs-md);
	font-weight: 600;
	color: var(--vk-muted);
}

.vk-bigsteps strong {
	font-size: var(--vk-fs-lg);
	font-weight: 600;
	line-height: 1.2;
}

.vk-bigsteps span {
	color: var(--vk-muted);
	max-width: 46ch;
}

@media (min-width: 56rem) {
	.vk-bigsteps li {
		grid-template-columns: 5rem minmax(0, 4fr) minmax(0, 6fr);
		gap: var(--vk-s6);
	}

	.vk-bigsteps li::before {
		grid-row: auto;
	}
}

.vk-usecase {
	display: grid;
	gap: var(--vk-s4) var(--vk-s6);
	padding-block: var(--vk-s6);
	border-bottom: var(--vk-border);
}

@media (min-width: 56rem) {
	.vk-usecase {
		grid-template-columns: 4rem minmax(0, 6fr) minmax(0, 4fr);
		align-items: start;
	}
}

.vk-usecase__n {
	font-size: var(--vk-fs-sm);
	font-weight: 500;
	color: var(--vk-muted);
	padding-top: 0.7em;
}

.vk-usecase__copy > *,
.vk-usecase__qs > * {
	margin: 0;
}

.vk-usecase__copy > * + * {
	margin-top: var(--vk-s3);
}

.vk-usecase__copy h2 {
	font-size: var(--vk-fs-xl);
}

.vk-usecase__qs {
	padding: var(--vk-s4) var(--vk-s5);
	border: var(--vk-border);
	border-radius: var(--vk-radius);
	background: var(--vk-surface);
}

.vk-usecase__qs .vk-questions {
	list-style: none;
	margin-top: var(--vk-s2);
	padding: 0;
}

.vk-questions li {
	padding: 0.45rem 0 0.45rem 1.75rem;
	position: relative;
}

.vk-questions li::before {
	content: "?";
	position: absolute;
	left: 0;
	top: 0.6rem;
	width: 1.15rem;
	height: 1.15rem;
	display: grid;
	place-items: center;
	border: var(--vk-hair) solid var(--vk-muted);
	border-radius: var(--vk-radius);
	color: var(--vk-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Ruled grids: trust, evidence grades, local-first points, ideas
 * ------------------------------------------------------------------------- */

.vk-principles,
.vk-states {
	display: grid;
	gap: var(--vk-s4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.vk-principle,
.vk-state-item {
	padding: var(--vk-s5);
	border: var(--vk-border);
	border-radius: var(--vk-radius);
	background: var(--vk-surface);
}

.vk-principle > *,
.vk-state-item > * {
	margin: 0;
}

.vk-principle h3 {
	font-size: var(--vk-fs-md);
}

.vk-principle p,
.vk-state-item p + p {
	margin-top: var(--vk-s3);
	color: var(--vk-muted);
	font-size: var(--vk-fs-sm);
}

/* Legacy icon tiles (gradient-masked icons) are retired. */
.vk-icon::before,
.vk-icon::after {
	content: none;
}

.vk-trust .vk-footnote {
	margin-top: var(--vk-s5);
}

.vk-points,
.vk-ideas {
	display: grid;
	gap: var(--vk-s5) var(--vk-s6);
}

@media (min-width: 52rem) {
	.vk-points,
	.vk-ideas {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.vk-point,
.vk-idea {
	padding-top: var(--vk-s4);
	border-top: var(--vk-border);
}

.vk-point > *,
.vk-idea > * {
	margin: 0;
}

.vk-point h3,
.vk-idea h3 {
	font-size: var(--vk-fs-md);
}

.vk-point p,
.vk-idea p {
	margin-top: var(--vk-s2);
	color: var(--vk-muted);
}

.vk-points + .wp-block-buttons {
	margin-top: var(--vk-s6);
}

/* ---------------------------------------------------------------------------
 * Team
 * ------------------------------------------------------------------------- */

.vk-team {
	display: grid;
	gap: var(--vk-s6);
}

@media (min-width: 40rem) {
	.vk-team {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.vk-person > * {
	margin: 0;
}

.vk-person__photo img {
	display: block;
	width: 100%;
	max-width: 18rem;
	aspect-ratio: 1;
	object-fit: cover;
	border: var(--vk-border);
	border-radius: var(--vk-radius);
	background: var(--vk-surface);
}

.vk-person h3 {
	margin-top: var(--vk-s4);
	font-size: var(--vk-fs-md);
}

.vk-person__role {
	margin-top: 0.15rem;
	font-size: var(--vk-fs-sm);
	font-weight: 500;
	color: var(--vk-muted);
}

.vk-person__bio {
	margin-top: var(--vk-s3);
	font-size: var(--vk-fs-sm);
	color: var(--vk-muted);
	max-width: 36ch;
}

/* ---------------------------------------------------------------------------
 * CTA band
 * ------------------------------------------------------------------------- */

.vk-cta__panel {
	padding: clamp(1.5rem, 5vw, 4rem);
	border: var(--vk-border);
	border-radius: var(--vk-radius);
	background: var(--vk-surface);
	color: var(--vk-text);
	box-sizing: border-box;
}

.vk-cta__panel > * {
	margin: 0;
	max-width: 38rem;
}

.vk-cta__panel > * + * {
	margin-top: var(--vk-s4);
}

.vk-cta__panel .wp-block-buttons {
	margin-top: var(--vk-s5);
}

/* ---------------------------------------------------------------------------
 * Interior page hero
 * ------------------------------------------------------------------------- */

.vk-page-hero {
	padding-block: var(--vk-s7) var(--vk-s6);
	border-bottom: var(--vk-border);
}

.vk-page-hero__inner > * {
	margin: 0;
	max-width: 50rem;
}

.vk-page-hero__inner > * + * {
	margin-top: var(--vk-s4);
}

.vk-page-hero .wp-block-buttons {
	margin-top: var(--vk-s5);
}

.vk-page-hero--compact {
	padding-block: var(--vk-s6) var(--vk-s5);
}

.vk-page-hero--compact h1 {
	font-size: var(--vk-fs-xl);
}

.vk-page-hero--tall {
	min-height: 60vh;
	display: grid;
	align-content: center;
	border-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Product page features
 * ------------------------------------------------------------------------- */

.vk-features {
	display: grid;
	gap: var(--vk-s7);
}

.vk-feature {
	display: grid;
	gap: var(--vk-s6);
	align-items: center;
}

@media (min-width: 56rem) {
	.vk-feature {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--vk-s7);
	}

	.vk-feature--flip {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}

	.vk-feature--flip > .vk-feature__copy {
		order: 2;
	}
}

.vk-feature__copy > * {
	margin: 0;
}

.vk-feature__copy > * + * {
	margin-top: var(--vk-s4);
}

/* ---------------------------------------------------------------------------
 * Contact
 * ------------------------------------------------------------------------- */

.vk-contact {
	display: grid;
	gap: var(--vk-s6);
	align-items: start;
}

@media (min-width: 56rem) {
	.vk-contact {
		grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
		gap: var(--vk-s7);
	}
}

.vk-contact__aside > * {
	margin: 0;
}

.vk-contact__aside > * + * {
	margin-top: var(--vk-s4);
}

.vk-contact__aside .vk-checks {
	list-style: none;
	padding: 0;
}

.vk-checks li {
	position: relative;
	padding: 0.6rem 0 0.6rem 1.75rem;
	border-bottom: var(--vk-border);
}

.vk-checks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--vk-accent);
	font-weight: 600;
}

.vk-form {
	display: grid;
	gap: var(--vk-s4);
	padding: clamp(1.25rem, 3vw, 2.25rem);
	background: var(--vk-surface);
	border: var(--vk-border);
	border-radius: var(--vk-radius);
}

.vk-form__row {
	display: grid;
	gap: 0.35rem;
}

.vk-form__pair {
	display: grid;
	gap: var(--vk-s4);
}

@media (min-width: 36rem) {
	.vk-form__pair {
		grid-template-columns: 1fr 1fr;
	}
}

.vk-form label {
	font-size: var(--vk-fs-sm);
	font-weight: 500;
}

.vk-form .vk-optional {
	font-weight: 400;
	color: var(--vk-muted);
}

.vk-form__hint {
	margin: 0;
	font-size: var(--vk-fs-xs);
	color: var(--vk-muted);
}

.vk-form input[type="text"],
.vk-form input[type="email"],
.vk-form textarea {
	font: inherit;
	font-size: var(--vk-fs-base);
	color: var(--vk-text);
	background: var(--vk-ground);
	/* Muted, not line: a field boundary needs 3:1 against its surroundings. */
	border: var(--vk-hair) solid var(--vk-muted);
	border-radius: var(--vk-radius);
	padding: 0.7rem 0.85rem;
	width: 100%;
	box-sizing: border-box;
	transition: border-color var(--vk-t-fast);
}

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

.vk-form input:focus-visible,
.vk-form textarea:focus-visible {
	border-color: var(--vk-accent);
	outline-offset: 1px;
}

.vk-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vk-form__submit {
	justify-self: start;
}

.vk-form__submit button {
	cursor: pointer;
}

.vk-form__notice {
	margin: 0;
	padding: var(--vk-s3) var(--vk-s4);
	border: var(--vk-border);
	border-left: 3px solid var(--vk-accent);
	border-radius: var(--vk-radius);
	color: var(--vk-text);
	font-size: var(--vk-fs-sm);
	font-weight: 500;
}

.vk-form__notice--error {
	border-color: var(--vk-alert);
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */

.vk-site-footer {
	background: var(--vk-ground);
	color: var(--vk-text);
	border-top: var(--vk-border);
	padding-block: var(--vk-s7) var(--vk-s5);
	font-size: var(--vk-fs-sm);
}

.vk-footer-grid {
	display: grid;
	gap: var(--vk-s6);
}

@media (min-width: 48rem) {
	.vk-footer-grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	}
}

.vk-footer-brand > *,
.vk-footer-col > * {
	margin: 0;
}

.vk-footer-brand > * + *,
.vk-footer-col > * + * {
	margin-top: var(--vk-s4);
}

.vk-footer-brand p {
	color: var(--vk-muted);
	max-width: 30ch;
}

.vk-footer-heading {
	font-size: var(--vk-fs-xs);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--vk-muted);
}

.vk-footer-links {
	list-style: none;
	padding: 0;
}

.vk-footer-links li + li {
	margin-top: 0.55rem;
}

.vk-site-footer a {
	color: var(--vk-text);
	text-decoration: none;
}

.vk-site-footer a:hover {
	color: var(--vk-accent);
	text-decoration: underline;
}

.vk-footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--vk-s3) var(--vk-s6);
	margin-top: var(--vk-s6) !important;
	padding-top: var(--vk-s4);
	border-top: var(--vk-border);
	font-size: var(--vk-fs-xs);
	color: var(--vk-muted);
}

.vk-footer-legal p {
	max-width: 60ch;
}

/* ---------------------------------------------------------------------------
 * Generic prose pages and post lists
 * ------------------------------------------------------------------------- */

.vk-prose {
	padding-block: var(--vk-s6) var(--vk-s8);
}

.vk-prose > .vk-lede {
	max-width: var(--wp--style--global--content-size);
}

.vk-prose h2 {
	font-size: var(--vk-fs-lg);
	margin-top: var(--vk-s6);
}

.vk-post-list h2 {
	margin-top: var(--vk-s5);
}

/* ---------------------------------------------------------------------------
 * Motion, print, forced colours
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.wp-site-blocks > header,
	.vk-site-footer,
	.vk-cta {
		display: none;
	}
}

@media (forced-colors: active) {
	/* Backgrounds are dropped in forced colours; keep the glyphs as outlines. */
	.vk-state::before,
	.vk-pill::before {
		forced-color-adjust: none;
	}
}

/*
 * Block editor canvas: the editor wraps list-item text in an extra editable
 * element, so grid/flex rows collapse. Let those items flow inline while
 * editing. The front end is unaffected (the editor classes only exist there).
 */
:is(.vk-tl-item, .vk-steps-mini li, .vk-report__stats li, .vk-report__findings li, .vk-mini__rows li, .vk-flow li, .vk-bigsteps li).block-editor-block-list__block {
	display: block;
}

:is(.vk-tl-item, .vk-steps-mini li, .vk-report__findings li, .vk-mini__rows li).block-editor-block-list__block .rich-text > * + * {
	margin-left: 0.6em;
}

:is(.vk-flow li, .vk-bigsteps li, .vk-report__stats li).block-editor-block-list__block .rich-text > :is(strong, span) {
	display: block;
}

/*
 * Long compound words (German) must not overflow narrow screens: hyphenate
 * headings using the page language, with a break-word fallback.
 */
h1, h2, h3, h4 {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Check lists carry their own ✓ marker wherever they are used. */
.vk-checks {
	list-style: none;
	padding-left: 0;
}