/**
 * VerifyCar - site styles.
 *
 * Base Theme supplies the foundation, the block styles and the design tokens.
 * This file is everything specific to VerifyCar.
 *
 * Tokens only. A raw hex or px value here is a bug - the one exception is a
 * transform offset, which is a nudge rather than a design value.
 *
 *   1  Layout          full-bleed sections, no gaps against the chrome
 *   2  Header
 *   3  Buttons         including the icon glyphs
 *   4  Cards + chips
 *   5  Hero            the VIN form slot
 *   6  Grids + trust bar
 *   7  Pricing         the price figure and the market comparison
 *   8  Sample + report preview
 *   9  Risks           the consequences, on the ink band
 *  10  Steps
 *  11  FAQ
 *  12  Coming soon
 *  13  CTA band
 *  14  Footer
 *  15  Forms           whatever plugin supplies them
 *  16  About page      heroes that carry an H1, sources, operator
 *  17  How it works    the VIN finder and the refund band
 *  18  Pricing page    scope panels and the exclusions list
 *  19  FAQs page       grouped questions and the help cards
 *  20  Contact page    the form beside its aside
 *  21  Legal pages     terms and privacy prose
 */

/* =========================================================================
   1. Layout
   ========================================================================= */

/*
 * Bands sit flush. Previously only the first and last child were cleared, so
 * the block gap survived between every pair of sections and showed as a thin
 * stripe of page background - which read as a deliberate divider rule between
 * two sections that otherwise looked identical. The same gap sat between <main>
 * and the footer, leaving a cream band above the dark footer.
 *
 * Only full-bleed children are flattened, so ordinary prose on a normal page
 * keeps the spacing the block gap is there to give it.
 */
.wp-site-blocks > *,
.wp-block-post-content > .alignfull {
	margin-block: 0;
}

.wp-site-blocks > main > :first-child,
.wp-block-post-content > :first-child {
	margin-block-start: 0;
}

.wp-site-blocks > main > :last-child,
.wp-block-post-content > :last-child {
	margin-block-end: 0;
}

/*
 * The block editor leaves an empty paragraph behind at the end of a page
 * whenever someone clicks past the last section, and an empty <p> still
 * takes a line box - which shows as a band of page background between the
 * last section and the footer. Nothing renders it, so nothing should
 * reserve space for it.
 */
.wp-block-post-content > p:empty {
	display: none;
}

/* Anchor targets clear the sticky header rather than hiding behind it. */
:target,
.vc-check-anchor {
	display: block;
	scroll-margin-top: 6rem;
}

/* =========================================================================
   2. Header
   ========================================================================= */

/*
 * The utility bar sits ABOVE the sticky header and scrolls away with the page.
 * Only the main bar is pinned, so the sticky chrome stays 4.75rem tall instead
 * of 7rem. Every claim here is one the report actually delivers - see the hard
 * rules in CLAUDE.md before editing the copy.
 */
.vc-topbar {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1;
}

.vc-topbar__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md);
	justify-content: space-between;
	min-height: 2.5rem;
	padding-block: var(--wp--preset--spacing--xs);
}

.vc-topbar__facts {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--lg);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vc-topbar__fact {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--xs);
}

.vc-topbar__icon {
	color: var(--wp--custom--sky);
	flex: none;
}

.vc-topbar__link {
	align-items: center;
	color: var(--wp--preset--color--text-inverse);
	display: inline-flex;
	font-weight: 600;
	gap: var(--wp--preset--spacing--xs);
	text-decoration: none;
	white-space: nowrap;
}

.vc-topbar__link:hover {
	color: var(--wp--custom--sky);
}

.vc-topbar__link svg {
	transition: transform var(--wp--custom--transition--fast) var(--wp--custom--transition--easing);
}

.vc-topbar__link:hover svg {
	transform: translateX(2px);
}

.vc-topbar__link-short {
	display: none;
}

/*
 * The bar sheds facts right to left as it narrows, then swaps the link to its
 * short label. The first fact - official data - is the one that survives.
 */
@media (max-width: 1099px) {
	.vc-topbar__fact:nth-child(3) {
		display: none;
	}
}

@media (max-width: 859px) {
	.vc-topbar__fact:nth-child(2) {
		display: none;
	}
}

@media (max-width: 599px) {
	.vc-topbar__link-long {
		display: none;
	}

	.vc-topbar__link-short {
		display: inline;
	}
}

/*
 * Sticky positioning and the on-scroll elevation come from Base Theme's
 * .base-header (assets/css/header.css + assets/js/header.js). This header
 * carries both classes, so all that is left here is the VerifyCar skin.
 */
.vc-header {
	padding-block: 0;
}

.vc-header__inner {
	height: 4.75rem;
	margin-inline: auto;
	max-width: var(--wp--custom--container--content);
}

.vc-header .wp-block-site-logo img {
	height: auto;
	max-height: 2.375rem;
	width: auto;
}

/* With a logo image the wordmark is redundant. */
.vc-header .wp-block-site-logo:not(:empty) + .wp-block-site-title {
	display: none;
}

.vc-header .wp-block-site-title a {
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 800;
	text-decoration: none;
}

.vc-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

/*
 * The underline grows from the link's own box rather than being a border that
 * shifts the text, so nothing moves on hover.
 */
.vc-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--xs);
	position: relative;
}

.vc-header .wp-block-navigation .wp-block-navigation-item__content::after {
	background: var(--wp--preset--color--primary);
	block-size: 2px;
	border-radius: 2px;
	content: "";
	inset-block-end: 0;
	inset-inline-start: 0;
	position: absolute;
	inline-size: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

.vc-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
}

.vc-header .wp-block-navigation li:hover > .wp-block-navigation-item__content::after,
.vc-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.vc-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* The overlay is a full-screen panel, so the underline rail makes no sense. */
.vc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: none;
}

.vc-header .wp-block-navigation__responsive-container.is-menu-open {
	font-size: var(--wp--preset--font-size--md);
}

/*
 * The overlay carries a logo and a CTA button of its own so the mobile menu is
 * a designed panel rather than a bare list. Both are children of the Navigation
 * block - core allows core/site-logo and core/buttons there - and both are dead
 * weight on the desktop bar, where the real header already shows them.
 */
@media (min-width: 782px) {
	.vc-header .wp-block-navigation__container > li:has(.vc-nav__logo),
	.vc-header .vc-nav__cta {
		display: none;
	}
}

/* --- Collapsed header and its overlay ----------------------------------- */

/*
 * Base Theme swaps to the overlay at 781px, not the Navigation block's 600px
 * default, so everything about the collapsed header keys off that number.
 */
@media (max-width: 781px) {
	/*
	 * Source order stays logo, menu, action. Visually the hamburger takes the
	 * right edge - it is the control a thumb reaches for - and the offer sits
	 * inboard of it.
	 */
	/*
	 * Direct child only. Core puts `wp-block-navigation` on the inner <ul> as
	 * well as the <nav>, and a descendant selector here would order the list
	 * inside the overlay too - which drops the CTA above the links.
	 */
	.vc-header__actions > .wp-block-navigation {
		order: 2;
	}

	.vc-header__actions > .vc-header__cta {
		order: 1;
	}

	.vc-header .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--text);
	}

	/* The panel lays itself out, so core's blanket padding goes. */
	.vc-header .wp-block-navigation__responsive-container.is-menu-open {
		padding: 0;
	}

	.vc-header .is-menu-open .wp-block-navigation__responsive-close {
		block-size: 100%;
		max-inline-size: none;
	}

	.vc-header .is-menu-open .wp-block-navigation__responsive-dialog {
		/* The brand row: the logo and the close button are both this tall. */
		--vc-nav-brand-row: 2.75rem;

		block-size: 100%;
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: var(--wp--preset--spacing--md) var(--wp--custom--gutter) var(--wp--preset--spacing--xxl);
		position: relative;
	}

	/*
	 * Absolute, so the close control shares a row with the logo instead of
	 * stacking above it - it is the dialog's first child in the DOM. Both are
	 * the same height and start at the dialog's top padding, which is what
	 * makes them line up.
	 */
	.vc-header .is-menu-open .wp-block-navigation__responsive-container-close {
		align-items: center;
		block-size: var(--vc-nav-brand-row);
		display: flex;
		inset-block-start: var(--wp--preset--spacing--md);
		inset-inline-end: var(--wp--custom--gutter);
		justify-content: center;
		position: absolute;
		z-index: 1;
	}

	/*
	 * Fills the dialog, which is what gives the auto margin under the CTA a
	 * gap to consume. Base Theme and core both space the stock overlay from
	 * here - a block gap, and a top padding that would push the logo off the
	 * close button's row.
	 *
	 * Four classes deliberately: core's own rule is three, and WordPress prints
	 * block stylesheets after the theme's, so an equal-specificity rule loses on
	 * source order. The list inside picks up `gap: inherit` from here, so
	 * zeroing it once is enough for the whole panel.
	 */
	.vc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch;
		flex: 1;
		gap: 0;
		inline-size: 100%;
		padding-block-start: 0;
	}

	/*
	 * The list becomes the whole panel: mark at the top, links down the middle,
	 * the offer pinned to the foot by the auto margin below.
	 *
	 * The nav is justified right on the desktop bar, which core turns into a
	 * custom property that becomes `align-items` once the overlay stacks the
	 * items in a column - so the menu inherits right-aligned text unless the
	 * property itself is reset. Setting align-items directly would not do it:
	 * core declares the property on this element, not an ancestor.
	 */
	.vc-header .is-menu-open .wp-block-navigation__container.items-justified-right {
		--navigation-layout-justification-setting: stretch;
	}

	.vc-header .is-menu-open .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	/*
	 * The logo's half of the brand row. The close button is the other half.
	 *
	 * flex-direction has to be stated: core lays every overlay list item out as
	 * a column, which would turn the centring below into horizontal centring
	 * and float the mark into the middle of the panel.
	 */
	.vc-header .is-menu-open .wp-block-navigation__container > li:has(.vc-nav__logo) {
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-block-end: var(--wp--preset--spacing--lg);
		min-block-size: var(--vc-nav-brand-row);
	}

	.vc-header .is-menu-open .vc-nav__logo img {
		height: auto;
		max-height: var(--vc-nav-brand-row);
		width: auto;
	}

	/* A hairline under every link, so the last one closes the list too. */
	.vc-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-link {
		border-block-end: 1px solid var(--wp--preset--color--border);
	}

	/*
	 * Core zeroes the padding on overlay links with a four-class selector, so
	 * matching it is what makes these rows tappable rather than a specificity
	 * flourish.
	 */
	.vc-header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		display: block;
		font-size: var(--wp--preset--font-size--md);
		inline-size: 100%;
		padding-block: var(--wp--preset--spacing--md);
	}

	/*
	 * core/buttons is the one allowed child the Navigation block renders OUTSIDE
	 * its <ul> - it is a sibling of the list, not a list item - so it is
	 * targeted directly rather than through the li that wraps everything else.
	 * The auto margin drops it to the foot of the panel.
	 */
	.vc-header .is-menu-open .vc-nav__cta {
		margin-block-start: auto;
		padding-block-start: var(--wp--preset--spacing--xl);
	}

	.vc-header .is-menu-open .vc-nav__cta .wp-block-button,
	.vc-header .is-menu-open .vc-nav__cta .wp-block-button__link {
		inline-size: 100%;
	}

	.vc-header .is-menu-open .vc-nav__cta .wp-block-button__link {
		display: block;
		font-size: var(--wp--preset--font-size--base);
		padding-block: var(--wp--preset--spacing--md);
		text-align: center;
	}
}

/*
 * Base Theme hides the header CTA below 600px to protect the hamburger. Here
 * the CTA carries the price, which is the single strongest thing on the page,
 * so it stays and the logo gives up the room instead.
 */
@media (max-width: 599px) {
	.vc-header__cta {
		display: block;
	}

	.vc-header__cta .wp-block-button__link {
		font-size: var(--wp--preset--font-size--xs);
		padding-inline: var(--wp--preset--spacing--md);
	}

	.vc-header__inner {
		height: 4rem;
	}

	.vc-header .wp-block-site-logo img {
		max-height: 1.875rem;
	}

	.vc-header__actions {
		gap: var(--wp--preset--spacing--sm);
	}
}

/* =========================================================================
   3. Buttons
   ========================================================================= */

.wp-block-button__link,
.wp-element-button {
	border: 2px solid transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1;
	padding: 0.75rem 1.5rem;
	white-space: nowrap;
}

.wp-block-button.btn-lg .wp-block-button__link {
	font-size: var(--wp--preset--font-size--base);
	padding: 0.9375rem 2rem;
}

/*
 * Specificity note: Base Theme styles the secondary variant with
 * `.wp-block-button.is-style-secondary > .wp-block-button__link`, and that
 * stylesheet is printed when the block renders - after this file. Adding
 * .wp-element-button wins on specificity rather than reaching for !important.
 */
.wp-block-button.is-style-secondary > .wp-block-button__link.wp-element-button,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	background-color: transparent;
	border-color: var(--wp--preset--color--border-strong);
	color: var(--wp--preset--color--text);
}

.wp-block-button.is-style-secondary > .wp-block-button__link.wp-element-button:hover,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/*
 * Icon glyphs, drawn as a mask so they inherit the button's text colour. The
 * same button is white-on-blue in the hero and ink-on-cream on the CTA band,
 * and an <img> would be wrong in one of them.
 */
.has-btn-icon-search .wp-block-button__link,
.has-btn-icon-doc .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	justify-content: center;
}

.has-btn-icon-search .wp-block-button__link::before,
.has-btn-icon-doc .wp-block-button__link::before {
	background-color: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 1.125em;
	margin-inline-end: 0.5em;
	width: 1.125em;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.has-btn-icon-search .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
}

.has-btn-icon-doc .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7.5L19 8v12.5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-16a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14.5 3.5V8H19'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7.5L19 8v12.5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-16a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14.5 3.5V8H19'/%3E%3C/svg%3E");
}

/* =========================================================================
   4. Cards, chips and lists
   ========================================================================= */

/*
 * Cards are WHITE on the cream page. Base Theme defaults a card to
 * --background, which here is the cream, so without this every card would
 * disappear into the page.
 */
.wp-block-group.is-style-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--sm);
	height: 100%;
	padding: var(--wp--preset--spacing--xl);
	transition:
		box-shadow var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		transform var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

.wp-block-group.is-style-card:hover {
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-3px);
}

/* On a white band the cards invert to cream, or they vanish. */
.has-surface-background-color .wp-block-group.is-style-card {
	background-color: var(--wp--preset--color--background);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-card {
		transition: none;
	}

	.wp-block-group.is-style-card:hover {
		transform: none;
	}
}

/* Icon chip */
.vc-icon-chip {
	align-items: center;
	background: var(--wp--preset--color--primary-soft);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	flex: 0 0 auto;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.vc-icon-chip svg {
	height: 1.5rem;
	width: 1.5rem;
}

.vc-icon-chip--sm {
	border-radius: var(--wp--custom--radius--md);
	height: 2.25rem;
	width: 2.25rem;
}

.vc-icon-chip--sm svg {
	height: 1.125rem;
	width: 1.125rem;
}

/* Eyebrow */
.is-style-eyebrow {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: 0.16em;
}

/* On a dark or blue band the primary blue loses contrast; Sky takes over. */
.has-dark-background-color .is-style-eyebrow,
.has-primary-fade-gradient-background .is-style-eyebrow,
.vc-footer .is-style-eyebrow {
	color: var(--wp--custom--sky);
}

/*
 * theme.json pins headings to --text so they stay ink on the cream page. On a
 * dark band that renders ink on ink, so section colour has to win.
 */
.has-dark-background-color :where(h1, h2, h3, h4, h5, h6),
.has-primary-fade-gradient-background :where(h1, h2, h3, h4, h5, h6),
.vc-footer :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--text-inverse);
}

/* Tick lists */
.vc-ticks {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * The marker is absolutely positioned, not a flex child.
 *
 * These were flex rows, which looked fine until a list item contained inline
 * markup: a <strong> label followed by its description became two flex items
 * sitting side by side in columns, and the text stopped reading as a sentence.
 * Out of flow, the tick lines up with the first line and the content flows
 * normally however it is marked up.
 */
.vc-ticks li {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	padding-inline-start: var(--wp--preset--spacing--lg);
	position: relative;
}

.vc-ticks li::before {
	border-block-end: 2px solid var(--wp--preset--color--primary);
	border-inline-start: 2px solid var(--wp--preset--color--primary);
	block-size: 0.4rem;
	content: "";
	inline-size: 0.75rem;
	inset-block-start: 0.4em;
	inset-inline-start: 0;
	position: absolute;
	transform: rotate(-45deg);
}

/* Result and status chips */
.is-style-chip-soon {
	align-items: center;
	border-radius: var(--wp--custom--radius--pill);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	gap: var(--wp--preset--spacing--xs);
	letter-spacing: 0.02em;
	line-height: 1;
	margin-block: 0;
	padding: 0.4375rem 0.75rem;
	text-transform: uppercase;
}

/* Colour is never the only signal: the chip carries a glyph too. */
.is-style-chip-soon::before {
	content: "\2022";
}

.is-style-chip-soon {
	background-color: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}
/* =========================================================================
   5. Hero
   ========================================================================= */

/*
 * The hero is a columns block, not a CSS grid, because the section ships as
 * editable blocks and columns is the structure a client can actually handle in
 * the editor. Everything below is skin.
 */
.vc-hero__eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.vc-hero__eyebrow p {
	margin: 0;
}

.vc-hero__eyebrow svg {
	block-size: 1.125rem;
	flex: none;
	inline-size: 1.125rem;
}

.vc-hero__title {
	letter-spacing: -0.03em;
	line-height: var(--wp--custom--line-height--tight);
}

/*
 * Measure, not width - and the auto margins have to go with it. The copy column
 * is a constrained group, which centres any child narrower than the column, so
 * a max-width alone would indent the lead and the form away from the heading.
 */
.vc-hero__copy .is-style-lead {
	margin-inline: 0 auto;
	max-width: 34rem;
}

/*
 * The VIN form is served by the Fieldper app and brings its own styling, which
 * already matches this palette. Only the box around it belongs to us.
 */
.vc-check {
	margin-inline: 0 auto;
	max-width: 34rem;
}

.vc-check #vc-ppsr-form:empty {
	background: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--xl);
	display: block;
	min-height: 11rem;
}

.editor-styles-wrapper .vc-check::after {
	color: var(--wp--preset--color--text-muted);
	content: "The VIN check form renders here on the live site.";
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	padding: var(--wp--preset--spacing--md);
	text-align: center;
}

.vc-hero__proof-item {
	color: var(--wp--preset--color--text-muted);
}

.vc-hero__proof-item p {
	margin: 0;
}

.vc-hero__proof-item svg {
	block-size: 1.0625rem;
	color: var(--wp--preset--color--success);
	flex: none;
	inline-size: 1.0625rem;
}

/* --- The media column: photograph with the report card over its corner --- */

.vc-hero__media {
	position: relative;
}

/*
 * The crop is fixed here rather than left to the upload. WordPress writes width
 * and height attributes onto every image it serves, and against those an
 * aspect-ratio on the <img> does not reliably win - a tall photograph would
 * then set the height of the whole hero.
 */
.vc-hero__photo {
	margin: 0;
}

.vc-hero__photo img {
	aspect-ratio: 4 / 4;
	block-size: 100%;
	border-radius: var(--wp--custom--radius--xl);
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/* Once the columns stack there is no second column to hold a measure against. */
@media (max-width: 781px) {
	.vc-hero__copy .is-style-lead,
	.vc-check {
		max-width: none;
	}
}

/* =========================================================================
   6. Trust bar
   ========================================================================= */

/*
 * These two grids were declared in the markup and never written here, so six
 * feature cards and four value cards each rendered as a full-width stack. That
 * one omission was most of why the homepage was so long.
 */
.vc-checks__grid,
.vc-values__grid {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	grid-template-columns: repeat(3, 1fr);
}

/*
 * Every grid on this site is a group using WordPress's flow layout that CSS
 * then turns into a grid. Flow layout gives each child after the first a
 * block-gap top margin, and inside a grid that margin offsets the item within
 * its own cell - so a row of cards comes out stepped rather than level. The gap
 * property already does that spacing job, so the margins go.
 */
.vc-checks__grid > *,
.vc-values__grid > *,
.vc-soon__grid > *,
.vc-trust__grid > *,
.vc-steps__grid > * {
	margin-block: 0;
}

@media (max-width: 1023px) {
	.vc-checks__grid,
	.vc-values__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 639px) {
	.vc-checks__grid,
	.vc-values__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.vc-trust__grid {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	grid-template-columns: repeat(4, 1fr);
}

.vc-trust__item {
	align-items: flex-start;
	display: flex;
	gap: var(--wp--preset--spacing--md);
}

.vc-trust__item p {
	margin: 0;
}

.vc-trust__item strong {
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--heading);
}

/* =========================================================================
   7. Pricing
   ========================================================================= */

/*
 * Card on the left, the comparison beside it on the right. The comparison is
 * the argument for the number, so it sits next to the number rather than
 * stacked underneath where it read as an afterthought.
 */
.vc-pricing__grid {
	align-items: stretch;
}

.vc-price {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--md);
	padding: var(--wp--preset--spacing--xl);
}

.vc-price > * {
	margin-block: 0;
}

.vc-price > * + * {
	margin-block-start: var(--wp--preset--spacing--md);
}

.vc-price__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
}

.is-style-price {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(3rem, 2rem + 4vw, 4.25rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

/* The price and the line explaining it are one unit, not two. */
.is-style-price + .vc-price__note {
	margin-block-start: var(--wp--preset--spacing--xs);
}

.vc-price__note {
	color: var(--wp--preset--color--text-muted);
}

.vc-price .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--lg);
}

.vc-price .wp-block-button,
.vc-price .wp-block-button__link {
	display: block;
	text-align: center;
	width: 100%;
}

/* --- The market comparison --- */

.vc-compare > * {
	margin-block: 0;
}

.vc-compare > * + * {
	margin-block-start: var(--wp--preset--spacing--md);
}

.vc-compare__row {
	border-inline-start: 3px solid var(--wp--preset--color--border);
	padding-inline-start: var(--wp--preset--spacing--md);
}

.vc-compare__row > * {
	margin-block: 0;
}

/* Ours is the only one that gets the brand colour, so the eye lands on it. */
.vc-compare__row.is-ours {
	border-inline-start-color: var(--wp--preset--color--primary);
}

.vc-compare__who {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.vc-compare__price {
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 800;
	margin-inline-start: var(--wp--preset--spacing--xs);
}

.vc-compare__row.is-ours .vc-compare__who,
.vc-compare__row.is-ours .vc-compare__price {
	color: var(--wp--preset--color--primary);
}

.vc-compare__what {
	color: var(--wp--preset--color--text-muted);
	margin-block-start: 0.125rem;
}

.vc-compare__note {
	margin-block-start: var(--wp--preset--spacing--lg);
}

/* =========================================================================
/* =========================================================================
   8. Report preview
   ========================================================================= */

/* --- The sample section: copy beside the document it arrives as --- */

/*
 * Two sheets, the certificate showing behind the report. The stack is what says
 * "a document arrives", which a flat card cannot - and it is the certificate
 * that most competitors leave out, so it earns the peek.
 */
/*
 * The top padding is the peek: it is the strip of certificate that shows above
 * the report, and the back sheet's tag and title are ordered first so that they
 * are what lands in it. Take the padding away and the certificate is completely
 * covered, which defeats the point of stacking them.
 */
.vc-sample__docs {
	padding-block-start: var(--wp--preset--spacing--xxl);
	padding-inline-end: var(--wp--preset--spacing--lg);
	position: relative;
}

.vc-doc {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--lg);
}

/*
 * Full height of the stack, so the sheet peeks past the report at the top and
 * again at the opposite bottom corner once it is rotated. The label is a single
 * row precisely because only that top strip is ever visible.
 */
.vc-doc--back {
	background: var(--wp--preset--color--background);
	box-shadow: var(--wp--preset--shadow--sm);
	inset-block: 0;
	inset-inline-end: 0;
	position: absolute;
	inline-size: 78%;
	transform: rotate(2.5deg);
}

.vc-doc__label {
	align-items: center;
	display: flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
}

.vc-doc--front {
	box-shadow: var(--wp--preset--shadow--lg);
	position: relative;
}

.vc-doc__tag {
	background: var(--wp--preset--color--primary-soft);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--primary);
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.125rem 0.5rem;
}

.vc-doc__head {
	border-block-end: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding-block-end: var(--wp--preset--spacing--md);
}

.vc-doc__head strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
}

.vc-doc__head span {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xs);
}

.vc-doc__contents {
	counter-reset: doc;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	list-style: none;
	margin: var(--wp--preset--spacing--md) 0 0;
	padding: 0;
}

.vc-doc__contents li {
	align-items: center;
	color: var(--wp--preset--color--text-muted);
	counter-increment: doc;
	display: flex;
	font-size: var(--wp--preset--font-size--sm);
	gap: var(--wp--preset--spacing--sm);
}

.vc-doc__contents li::before {
	background: var(--wp--preset--color--primary-soft);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--primary);
	content: counter(doc);
	flex: none;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.5rem;
	text-align: center;
	inline-size: 1.5rem;
}

/* =========================================================================
   9. Risks           on the ink band
   ========================================================================= */

/*
 * These cards replaced four big statistics. The numbers looked authoritative
 * and none of them had a source, which is exactly the kind of claim this site
 * does not make. A consequence stated plainly does the same job and can be
 * defended.
 */
/*
 * A columns block now, not a CSS grid: the section ships as editable blocks and
 * columns is the structure the editor exposes. Equal heights come from the card
 * filling its column rather than from grid rows.
 */
.vc-risks .wp-block-column {
	display: flex;
}

.vc-risk {
	background-color: var(--wp--custom--on-dark--wash);
	border: 1px solid var(--wp--custom--on-dark--hairline);
	border-radius: var(--wp--custom--radius--lg);
	inline-size: 100%;
	padding: var(--wp--preset--spacing--xl);
}

.vc-risk > * {
	margin-block: 0;
}

.vc-risk__icon {
	align-items: center;
	background: var(--wp--custom--on-dark--hairline);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--custom--sky);
	display: inline-flex;
	block-size: 2.75rem;
	inline-size: 2.75rem;
	justify-content: center;
	margin-block-end: var(--wp--preset--spacing--md);
}

.vc-risk h3 {
	color: var(--wp--preset--color--text-inverse);
	font-size: var(--wp--preset--font-size--lg);
	line-height: var(--wp--custom--line-height--snug);
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.vc-risk p {
	color: var(--wp--preset--color--text-muted-inverse);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

/*
 * Colour only. This carried `margin: 0` from when it was raw HTML, which
 * cancelled the section's block gap and pulled the line up hard against the
 * cards while leaving a big void beneath it. Alignment and size come from the
 * block's own attributes now.
 */
.vc-why__note {
	color: var(--wp--custom--sky);
}

/* =========================================================================
   10. Steps
   ========================================================================= */

.vc-steps__grid {
	align-items: start;
	display: grid;
	gap: var(--wp--preset--spacing--xl);
	grid-template-columns: repeat(3, 1fr);
}

.vc-hiw .vc-steps__grid {
	grid-template-columns: repeat(4, 1fr);
}

.vc-step {
	padding-inline: var(--wp--preset--spacing--sm);
	text-align: center;
}

.vc-step__num {
	align-items: center;
	background: var(--wp--preset--color--primary-soft);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 800;
	height: 3.5rem;
	justify-content: center;
	margin-inline: auto;
	width: 3.5rem;
}

/* =========================================================================
   11. FAQ
   ========================================================================= */

/*
 * Every question carries name="vc-faq", which is the HTML exclusive-accordion
 * attribute: opening one closes the rest. The first ships open so the section
 * never starts as a wall of shut boxes. All of it is native <details> - no
 * JavaScript, keyboard operable, and findable by the browser's own page search
 * even while closed.
 */
.base-faq .wp-block-details {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	transition:
		border-color var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		box-shadow var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

.base-faq .wp-block-details:hover {
	border-color: var(--wp--preset--color--border-strong);
}

.base-faq .wp-block-details[open] {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--sm);
}

/*
 * The question sits at lg, not the md the block stylesheet gives it. The marker
 * is sized in em, so a 24px question was drawing a 13px chevron in a 2px stroke
 * - heavy enough to read as an icon competing with the text rather than a hint
 * about state.
 */
.base-faq .wp-block-details > summary {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	padding-inline-end: var(--wp--preset--spacing--xl);
}

.base-faq .wp-block-details > summary::after {
	border-width: 0 1.5px 1.5px 0;
	color: var(--wp--preset--color--text-muted);
	height: 0.45em;
	width: 0.45em;
}

.base-faq .wp-block-details[open] > summary {
	color: var(--wp--preset--color--primary);
}

.base-faq .wp-block-details[open] > summary::after {
	color: var(--wp--preset--color--primary);
}

.base-faq .wp-block-details p {
	font-size: var(--wp--preset--font-size--sm);
}

/* =========================================================================
   12. Coming soon
   ========================================================================= */

.vc-soon__grid {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	grid-template-columns: repeat(2, 1fr);
}

/* Nothing here is buyable, so nothing here looks like a product card. */
.vc-soon__card {
	box-shadow: none;
	opacity: 0.92;
}

.vc-soon__card:hover {
	box-shadow: none;
	transform: none;
}

/* =========================================================================
   13. CTA band
   ========================================================================= */

/* Cream button on the blue band. A primary button would vanish. */
.vc-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--text);
}

.vc-cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--surface);
}

/*
 * text-muted-inverse is tuned for the ink band, where it reads 12.23:1. On the
 * blue gradient it drops to 4.27:1, under WCAG AA. This lighter tint clears the
 * bar at both ends of the gradient.
 */
.vc-cta .has-text-muted-inverse-color {
	color: var(--wp--custom--on-brand--text-muted);
}

.vc-cta .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--xl);
}

.vc-cta__note {
	color: var(--wp--custom--on-brand--text-muted);
	font-size: var(--wp--preset--font-size--xs);
	margin-block: var(--wp--preset--spacing--lg) 0;
	text-align: center;
}

/* =========================================================================
   14. Footer
   ========================================================================= */

.vc-footer a {
	color: inherit;
	text-decoration: none;
}

.vc-footer a:hover {
	color: var(--wp--custom--sky);
	text-decoration: underline;
}

/*
 * One logo file serves both bands. The brand mark is a solid blue wordmark on
 * a transparent ground, so brightness(0) flattens it to black and invert(1)
 * lifts it to white - legible on the navy footer, and it keeps working if the
 * client uploads a different logo in Theme Settings.
 */
.vc-footer .wp-block-site-logo img {
	filter: brightness(0) invert(1);
	height: auto;
	max-height: 2.5rem;
	width: auto;
}

.vc-footer .wp-block-site-logo:not(:empty) + .wp-block-site-title {
	display: none;
}

.vc-footer .wp-block-site-title a {
	color: var(--wp--preset--color--text-inverse);
}

/*
 * Measure, not width. The brand group uses flow layout rather than constrained
 * for exactly this reason: constrained puts `margin-inline: auto !important` on
 * any child narrower than the column, which would centre the blurb under a
 * left-aligned logo.
 */
.vc-footer__blurb {
	max-width: 34ch;
}

.vc-footer .wp-block-list {
	list-style: none;
	padding: 0;
}

/* An inline-block so the hit target is the text box, not the whole row. */
.vc-footer__links a {
	display: inline-block;
}

.vc-footer__note {
	color: var(--wp--preset--color--text-muted-inverse);
	margin-block-start: var(--wp--preset--spacing--sm);
	opacity: 0.75;
}

/*
 * The credentials strip. Carify fills this space with social icons; VerifyCar
 * has no social accounts yet and will not fake them, so the room goes to the
 * four names that actually underwrite the product.
 */
.vc-footer__credentials {
	align-items: center;
	border-block: 1px solid var(--wp--custom--on-dark--hairline);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
	padding-block: var(--wp--preset--spacing--lg);
}

.vc-footer__credentials-label {
	color: var(--wp--custom--sky);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.vc-footer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vc-footer__badges li {
	border: 1px solid var(--wp--custom--on-dark--hairline-strong);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--text-inverse);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
}

/*
 * The dynamic parts arrive from shortcodes as bare markup with no block
 * classes to hang styling on.
 */
.vc-footer .base-contact-list,
.vc-footer .vc-footer__social {
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--sm);
	gap: var(--wp--preset--spacing--xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vc-footer .vc-footer__social {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md);
	margin-block-start: var(--wp--preset--spacing--md);
}

.vc-footer .wp-block-shortcode {
	margin-block: 0;
}

/*
 * The shortcode block above carries no margin, so the contact list would sit
 * flush under its heading while the sibling columns - plain lists with a block
 * gap - stand clear of theirs. Match them.
 */
.vc-footer .base-contact-list {
	margin-block-start: var(--wp--preset--spacing--md);
}

/*
 * The credentials strip draws its own top and bottom rules, so the separator
 * block the footer used to carry is gone.
 */
.vc-footer__bottom {
	column-gap: var(--wp--preset--spacing--lg);
	font-size: var(--wp--preset--font-size--xs);
	row-gap: var(--wp--preset--spacing--md);
}

.vc-footer__legal p {
	margin: 0;
	opacity: 0.75;
}

.vc-footer__legal a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * The operator credit: lead-in words plus the CarAssure mark. The file is
 * already white on transparent, so unlike the VerifyCar logo above it needs no
 * filter to sit on the navy.
 */
.vc-powered {
	align-items: center;
	display: inline-flex;
	gap: var(--wp--preset--spacing--xs);
}

.vc-powered:hover {
	text-decoration: none;
}

.vc-powered__label {
	font-size: var(--wp--preset--font-size--xs);
	opacity: 0.75;
}

.vc-powered__logo {
	height: auto;
	max-height: 1.375rem;
	transition: opacity var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
	width: auto;
}

.vc-powered:hover .vc-powered__logo {
	opacity: 0.8;
}

/* =========================================================================
   15. Forms
   ========================================================================= */

/*
 * Form plugins ship their own markup and their own opinions. Targeted by
 * plugin class because there is no shared standard between them.
 */
.wpforms-container input:not([type="submit"]),
.wpforms-container textarea,
.fluentform input:not([type="submit"]),
.fluentform textarea,
.gform_wrapper input:not([type="submit"]),
.gform_wrapper textarea,
.wpcf7 input:not([type="submit"]),
.wpcf7 textarea {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	padding: 0.75rem;
	width: 100%;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus,
.fluentform input:focus,
.fluentform textarea:focus,
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-soft);
	outline: none;
}

.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit,
.fluentform .ff-btn-submit,
.gform_wrapper input[type="submit"],
.wpcf7 input[type="submit"] {
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--text-inverse);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	padding: 0.875rem 2rem;
	width: auto;
}

.wpforms-container button[type="submit"]:hover,
.fluentform .ff-btn-submit:hover,
.gform_wrapper input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/*
 * The confirmation that replaces the form after a successful send.
 *
 * WPForms ships this as a pale-green bar (#e0ffc7 on #b4d39b, square corners),
 * which is neither of our greens and reads as a validation warning rather than
 * a reply. It also sits directly under the "Send us a message" heading with the
 * form gone from beneath it, so the column ends in a stranded strip above a
 * large void.
 *
 * Treating it as a panel fixes both: it becomes the thing the column is now
 * for, rather than the residue of the thing that left.
 *
 * The selector has to out-rank the plugin's own
 * `div.wpforms-container-full .wpforms-confirmation-container-full`, which is
 * two classes and an element. Scoping to .vc-contact__form - our own wrapper
 * from the contact-form pattern - clears it without !important, and says plainly
 * that this is the theme dressing a plugin's output inside our section. Both
 * container classes are matched because WPForms picks between them depending on
 * whether the form renders full-width.
 *
 * The tick is a masked data URI rather than markup, so no file is bundled and
 * nothing depends on an SVG surviving the plugin's own message sanitiser.
 */
.vc-contact__form div.wpforms-container :is(.wpforms-confirmation-container, .wpforms-confirmation-container-full) {
	background: var(--wp--custom--success-soft);
	border: 1px solid var(--wp--preset--color--success);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--text);
	margin: 0;
	padding: var(--wp--preset--spacing--xl);
}

.vc-contact__form div.wpforms-container :is(.wpforms-confirmation-container, .wpforms-confirmation-container-full)::before {
	background-color: var(--wp--preset--color--success);
	content: "";
	display: block;
	height: 2.5rem;
	margin-block-end: var(--wp--preset--spacing--md);
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>') center / contain no-repeat;
	width: 2.5rem;
}

.vc-contact__form div.wpforms-container :is(.wpforms-confirmation-container, .wpforms-confirmation-container-full) p {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--base);
	margin: 0;
}

.vc-contact__form div.wpforms-container :is(.wpforms-confirmation-container, .wpforms-confirmation-container-full) p + p {
	margin-block-start: var(--wp--preset--spacing--sm);
}

/*
 * The first line is the answer to "did that work?", so it carries the weight of
 * a heading without being one - the page already has its H2 above.
 */
.vc-contact__form div.wpforms-container :is(.wpforms-confirmation-container, .wpforms-confirmation-container-full) .vc-confirm__title {
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--snug);
}

.vc-contact__form div.wpforms-container :is(.wpforms-confirmation-container, .wpforms-confirmation-container-full) .vc-confirm__meta {
	border-block-start: 1px solid rgb(14 122 69 / 20%);
	font-size: var(--wp--preset--font-size--sm);
	margin-block-start: var(--wp--preset--spacing--md);
	padding-block-start: var(--wp--preset--spacing--md);
}
/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1024px) {
	.vc-trust__grid,
	.vc-hiw .vc-steps__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

@media (max-width: 640px) {
	.vc-trust__grid,
	.vc-steps__grid,
	.vc-soon__grid,
	.vc-hiw .vc-steps__grid {
		grid-template-columns: 1fr;
	}

	.vc-header__inner {
		height: 4.5rem;
	}

	.vc-footer__bottom {
		gap: var(--wp--preset--spacing--sm);
		justify-content: flex-start;
	}
}

/* =========================================================================
   16. About page
   ========================================================================= */

/*
 * Interior pages carry their H1 in a hero section of their own, because the
 * Page - No Title template renders no post title and every other section opens
 * at H2. Before these heroes existed the About, Pricing, How it works, FAQs and
 * Contact pages had no first-level heading at all.
 */
/*
 * Interior page heroes are centred and carry no photograph - only the homepage
 * has one. That keeps the hero from becoming a slot somebody has to find a
 * picture for on every page, and the credential row below the buttons is what
 * gives the band weight in place of an image.
 */
.vc-page-hero__title {
	letter-spacing: -0.03em;
	line-height: var(--wp--custom--line-height--tight);
}

.vc-page-hero__creds {
	color: var(--wp--preset--color--text-muted);
}

.vc-cred p {
	margin: 0;
}

.vc-cred svg {
	block-size: 1.125rem;
	color: var(--wp--preset--color--primary);
	flex: none;
	inline-size: 1.125rem;
}
/* --- The story, with the middle beat pulled out --- */

.vc-pullquote {
	border-inline-start: 3px solid var(--wp--preset--color--primary);
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--lg);
}

.vc-pullquote p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--snug);
	margin: 0;
}

/* --- Where the data comes from, on the ink band --- */

.vc-sources .wp-block-column {
	display: flex;
}

.vc-source {
	background-color: var(--wp--custom--on-dark--wash);
	border: 1px solid var(--wp--custom--on-dark--hairline);
	border-radius: var(--wp--custom--radius--lg);
	inline-size: 100%;
	padding: var(--wp--preset--spacing--xl);
}

/*
 * The rhythm is set here rather than left to the block gap. Zeroing the
 * margins is needed to drop the browser defaults, but it also cancels the gap
 * WordPress emits for the group - so the spacing has to be put back explicitly
 * or the tag, heading and body run together.
 */
.vc-source > * {
	margin-block: 0;
}

.vc-source > * + * {
	margin-block-start: var(--wp--preset--spacing--md);
}

/* The short name and the full name are one unit, so they sit closer. */
.vc-source__tag + h3 {
	margin-block-start: var(--wp--preset--spacing--xs);
}

.vc-source__icon {
	align-items: center;
	background: var(--wp--custom--on-dark--hairline);
	border-radius: var(--wp--custom--radius--lg);
	block-size: 2.75rem;
	color: var(--wp--custom--sky);
	display: inline-flex;
	inline-size: 2.75rem;
	justify-content: center;
}

/*
 * The register's short name, set apart from its full one. A reader who already
 * knows what the PPSR is should be able to find it without reading the heading.
 */
.vc-source__tag {
	color: var(--wp--custom--sky);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vc-source h3 {
	color: var(--wp--preset--color--text-inverse);
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--line-height--snug);
}

.vc-about-data__note {
	color: var(--wp--preset--color--text-muted-inverse);
}

/* --- Who runs it --- */

.vc-operator__copy .is-style-lead {
	margin-inline: 0 auto;
	max-width: 34rem;
}

.vc-operator__panel {
	background: var(--wp--preset--color--primary-soft);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--xl);
}

.vc-operator__panel > * {
	margin-block: 0;
}

.vc-operator__label {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-block-end: var(--wp--preset--spacing--md);
	text-transform: uppercase;
}

/* On the tint the ticks need the deeper blue to hold their contrast. */
.vc-operator__panel .vc-ticks li {
	color: var(--wp--preset--color--text);
}

.vc-operator__panel .vc-ticks li::before {
	border-color: var(--wp--preset--color--primary-dark);
}

/* =========================================================================
   17. How it works page
   ========================================================================= */

.vc-vin__grid .wp-block-column {
	display: flex;
}

.vc-vin__grid .is-style-card {
	inline-size: 100%;
}

/*
 * A worked example of a VIN, set in mono and spaced out. Seeing the shape of a
 * real one is what stops somebody typing in an engine number instead.
 */
.vc-vin__panel {
	background: var(--wp--preset--color--primary-soft);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--xl);
	text-align: center;
}

.vc-vin__panel > * {
	margin-block: 0;
}

.vc-vin__panel > * + * {
	margin-block-start: var(--wp--preset--spacing--md);
}

.vc-vin__label {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vc-vin__sample {
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: 0.18em;
	word-break: break-all;
}

.vc-vin__panel .has-sm-font-size {
	margin-inline: auto;
	max-width: 56ch;
}

/* =========================================================================
   18. Pricing page
   ========================================================================= */

.vc-scope__grid .wp-block-column {
	display: flex;
}

.vc-scope__panel {
	border-radius: var(--wp--custom--radius--xl);
	inline-size: 100%;
	padding: var(--wp--preset--spacing--xl);
}

.vc-scope__panel > * {
	margin-block: 0;
}

.vc-scope__panel > * + * {
	margin-block-start: var(--wp--preset--spacing--md);
}

/* What you get is the brand tint; what you do not is quieter, not alarming. */
.vc-scope__panel.is-in {
	background: var(--wp--preset--color--primary-soft);
}

.vc-scope__panel.is-out {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
}

.vc-scope__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vc-scope__panel.is-in .vc-scope__label {
	color: var(--wp--preset--color--primary);
}

.vc-scope__panel.is-out .vc-scope__label {
	color: var(--wp--preset--color--text-muted);
}

.vc-scope__panel.is-in .vc-ticks li::before {
	border-color: var(--wp--preset--color--primary-dark);
}

/*
 * The exclusions list. A cross rather than a tick, drawn the same way and in
 * the muted colour - these are honest limits, not warnings, and colouring them
 * red would read as something having gone wrong.
 */
.vc-crosses {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vc-crosses li {
	color: var(--wp--preset--color--text-muted);
	padding-inline-start: var(--wp--preset--spacing--lg);
	position: relative;
}

.vc-crosses li::before {
	color: var(--wp--preset--color--border-strong);
	content: "\00d7";
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	inset-block-start: -0.15em;
	inset-inline-start: 0;
	line-height: 1.4;
	position: absolute;
}

.vc-why-price__note {
	color: var(--wp--custom--sky);
}

/* =========================================================================
   19. FAQs page
   ========================================================================= */

/*
 * The group heading is a label for the questions under it, not a section
 * heading competing with the page H1 - so it sits at lg with the eyebrow
 * treatment's colour rather than the section-heading scale.
 */
.vc-faqs__title {
	border-block-end: 1px solid var(--wp--preset--color--border);
	padding-block-end: var(--wp--preset--spacing--sm);
}

.vc-help__grid .wp-block-column {
	display: flex;
}

.vc-help__grid .is-style-card {
	inline-size: 100%;
}

/* The address arrives from a shortcode with no block classes to hang on. */
.vc-help .base-contact-list {
	font-size: var(--wp--preset--font-size--sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vc-help .wp-block-shortcode {
	margin-block: 0;
}

/* =========================================================================
   20. Contact page
   ========================================================================= */

.vc-contact__form > * {
	margin-block: 0;
}

.vc-contact__form > * + * {
	margin-block-start: var(--wp--preset--spacing--lg);
}

.vc-contact__aside > * {
	margin-block: 0;
}

.vc-contact__aside > * + * {
	margin-block-start: var(--wp--preset--spacing--lg);
}

/*
 * The aside is a stack of small cards rather than the is-style-card used
 * elsewhere: three shadowed boxes beside a form would compete with it, and the
 * form is what the page is for.
 */
.vc-contact__card {
	border-inline-start: 3px solid var(--wp--preset--color--primary-soft);
	padding-inline-start: var(--wp--preset--spacing--lg);
}

.vc-contact__card > * {
	margin-block: 0;
}

.vc-contact__card > * + * {
	margin-block-start: var(--wp--preset--spacing--sm);
}

.vc-contact__card .base-contact-list {
	font-size: var(--wp--preset--font-size--sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vc-contact-form .wp-block-shortcode {
	margin-block: 0;
}

/*
 * WPForms renders with its own CSS custom properties and styles the form from
 * them, at a specificity that a plain .wpforms-submit rule loses to. Setting
 * the variables is the supported way in, and it means the form follows the
 * theme's tokens rather than needing a rule per element.
 *
 * The plugin's defaults are a 3px radius, its own mid-blue button and 16px labels -
 * none of which belong to this site.
 */
.vc-contact-form .wpforms-container {
	--wpforms-field-border-radius: var(--wp--custom--radius--md);
	--wpforms-field-border-color: var(--wp--preset--color--border-strong);
	--wpforms-field-border-color-spare: var(--wp--preset--color--border-strong);
	--wpforms-field-background-color: var(--wp--preset--color--surface);
	--wpforms-field-text-color: var(--wp--preset--color--text);
	--wpforms-label-color: var(--wp--preset--color--text);
	--wpforms-label-sublabel-color: var(--wp--preset--color--text-muted);
	--wpforms-label-error-color: var(--wp--preset--color--error);
	--wpforms-button-background-color: var(--wp--preset--color--primary);
	--wpforms-button-border-color: var(--wp--preset--color--primary);
	--wpforms-button-text-color: var(--wp--preset--color--text-inverse);
	--wpforms-button-border-radius: var(--wp--custom--radius--pill);
	--wpforms-button-size-font-size: 0.875rem;
	--wpforms-button-size-height: 3rem;
	--wpforms-button-size-padding-h: 1.75rem;
	--wpforms-field-size-input-height: 3rem;
	--wpforms-field-size-font-size: 1rem;
	--wpforms-label-size-font-size: 0.875rem;
	--wpforms-label-size-sublabel-font-size: 0.8125rem;
}

/* The plugin sets its own family; the site's heading face is the one we want. */
.vc-contact-form .wpforms-submit {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
}

.vc-contact-form .wpforms-field-label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
}

.vc-contact-form .wpforms-submit:hover {
	background-color: var(--wp--preset--color--primary-dark) !important;
	border-color: var(--wp--preset--color--primary-dark) !important;
}

/* =========================================================================
   21. Legal pages
   ========================================================================= */

.vc-legal__date {
	color: var(--wp--preset--color--text-muted);
}

/*
 * Document rhythm, not section rhythm. A clause heading belongs tight to the
 * paragraph it introduces, with the air going ABOVE it to separate one clause
 * from the last - so the block gap is small and the heading carries the space.
 * With both set large, every heading floated equidistant between two clauses
 * and the page lost its structure.
 */
.vc-legal h2 {
	margin-block-start: var(--wp--preset--spacing--xxl);
}

.vc-legal h2 + p,
.vc-legal h2 + ul {
	margin-block-start: var(--wp--preset--spacing--sm);
}

.vc-legal__intro {
	border-inline-start: 3px solid var(--wp--preset--color--primary);
	padding-inline-start: var(--wp--preset--spacing--lg);
}

/*
 * Lists inside legal prose are part of the sentence they follow, so they read
 * at the prose size rather than the smaller size used inside cards.
 */
.vc-legal ul {
	color: var(--wp--preset--color--text-muted);
	padding-inline-start: var(--wp--preset--spacing--lg);
}

.vc-legal li + li {
	margin-block-start: var(--wp--preset--spacing--sm);
}

/*
 * Placeholders the client still has to answer are marked [[ LIKE THIS ]] in the
 * copy. Nothing styles them, deliberately - they are meant to look wrong.
 */