/*
 * Website Pilot campaign styles.
 *
 * Phase 7 / P7-004: scoped visual system for the Techne Kaizen £600 Pilot
 * Website landing page. Keep selectors campaign-specific so existing pages are
 * not affected by this stylesheet.
 *
 * Post-Phase-8 / A02 (TICKET-TK-LP-POST8-A02): visual architecture and
 * hierarchy pass. Presentation only — no funnel, analytics, consent,
 * attribution or schema behaviour is expressed here.
 *
 * A02 structure:
 *   1.  Tokens (colour, type scale, spacing scale, card system)
 *   2.  Base + typography
 *   3.  Buttons and CTA emphasis levels
 *   4.  Card family (offer / content / panel / warning)
 *   5.  Header and footer
 *   6.  Section rhythm
 *   7.  S01 hero
 *   8.  S02 trust strip
 *   9.  S03 recognition
 *   10. S05 customer journey + website job
 *   11. S06 guidance transition
 *   12. S10 selected proof
 *   13. S07 package inclusions
 *   14. S08 you provide / we handle
 *   15. S09 process
 *   16. S10B founder accountability
 *   17. S11 why £600 / why £200 / capacity
 *   18. S12 comparison
 *   19. S13 FAQ
 *   20. S14 final close
 *   21. Sticky mobile CTA
 *   22. Responsive
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

.tk-campaign-website-pilot {
	--campaign-bg: #f9fafb;
	--campaign-surface: #ffffff;
	--campaign-surface-alt: #f3f4f6;
	--campaign-surface-sunken: #eef0f3;
	--campaign-text: #111827;
	--campaign-text-muted: #4b5563;
	--campaign-primary: #111827;
	--campaign-primary-hover: #1f2937;
	--campaign-primary-active: #030712;
	--campaign-primary-contrast: #ffffff;
	--campaign-border: #d1d5db;
	--campaign-border-soft: #e3e6ea;
	--campaign-success: #047857;
	--campaign-warning: #b45309;
	--campaign-warning-surface: #fffbeb;
	--campaign-focus: #f97316;
	--campaign-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* Containers */
	--campaign-container: 1160px;
	--campaign-container-narrow: 66ch;
	--campaign-container-medium: 1040px;
	--campaign-container-wide: 1280px;
	--campaign-gutter: clamp(1rem, 4vw, 2rem);

	/* Spacing scale — one rhythm for the whole campaign. */
	--campaign-space-1: 0.25rem;
	--campaign-space-2: 0.5rem;
	--campaign-space-3: 0.75rem;
	--campaign-space-4: 1rem;
	--campaign-space-5: 1.5rem;
	--campaign-space-6: 2rem;
	--campaign-space-7: 3rem;

	/* Section rhythm */
	--campaign-section-padding: clamp(3.25rem, 6vw, 5.5rem);
	--campaign-section-padding-dense: clamp(2rem, 3.5vw, 3rem);
	--campaign-hero-padding: clamp(3.5rem, 7vw, 6rem);
	--campaign-header-gap: clamp(1.75rem, 3vw, 2.5rem);
	--campaign-cta-gap: clamp(1.75rem, 3vw, 2.5rem);
	--campaign-grid-gap: clamp(0.875rem, 1.5vw, 1.25rem);
	--campaign-column-gap: clamp(1.75rem, 4vw, 3.5rem);

	/* Card system */
	--campaign-card-padding: clamp(1.15rem, 2.2vw, 1.6rem);
	--campaign-card-padding-lg: clamp(1.5rem, 3vw, 2.15rem);
	--campaign-radius-card: 14px;
	--campaign-radius-feature: 18px;
	--campaign-radius-media: 18px;
	--campaign-radius-faq: 14px;
	--campaign-radius-pill: 999px;
	--campaign-shadow-1: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 28px rgba(17, 24, 39, 0.07);
	--campaign-shadow-offer: 0 2px 4px rgba(17, 24, 39, 0.05), 0 18px 48px rgba(17, 24, 39, 0.11);

	/* Type scale */
	--campaign-type-eyebrow: 0.78rem;
	--campaign-type-h1: clamp(2.2rem, 4.1vw, 3rem);
	--campaign-type-h2: clamp(1.6rem, 2.8vw, 2.25rem);
	--campaign-type-h3: clamp(1.05rem, 1.35vw, 1.2rem);
	--campaign-type-body: 1rem;
	--campaign-type-support: 0.95rem;
	--campaign-type-micro: 0.85rem;
	--campaign-type-price: clamp(2.75rem, 5.5vw, 4rem);
	--campaign-type-price-md: clamp(1.45rem, 2.4vw, 1.85rem);

	/* Motion */
	--campaign-transition-fast: 140ms ease;
	--campaign-transition-med: 200ms ease;
	--campaign-transition-base: 200ms ease;

	/* Retained aliases (Phase 7 contract). */
	--website-pilot-color-bg: var(--campaign-bg);
	--website-pilot-color-surface: var(--campaign-surface);
	--website-pilot-color-text: var(--campaign-text);
	--website-pilot-color-muted: var(--campaign-text-muted);
	--website-pilot-color-border: var(--campaign-border);
	--website-pilot-color-accent: var(--campaign-focus);
	--website-pilot-color-accent-contrast: var(--campaign-text);
	--website-pilot-font-sans: var(--campaign-font-sans);
	--website-pilot-container: var(--campaign-container);
	--website-pilot-gutter: var(--campaign-gutter);
	--website-pilot-radius: var(--campaign-radius-pill);
	--website-pilot-focus: 0 0 0 3px rgba(249, 115, 22, 0.32), 0 0 0 6px rgba(17, 24, 39, 0.18);

	margin: 0;
	background: var(--campaign-bg);
	color: var(--campaign-text);
	font-family: var(--campaign-font-sans);
	font-size: 16px;
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* The reserve must be at least as tall as the sticky bar, otherwise the last
 * band of content stays under it. At 430px and below the bar stacks its
 * summary above a full-width button, which is its tallest state (~118px). */
@media (max-width: 1023px) {
	.tk-campaign-website-pilot.has-website-pilot-sticky-space {
		padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px));
	}
}

/* ------------------------------------------------------------------ *
 * 2. Base + typography
 * ------------------------------------------------------------------ */

.tk-campaign-website-pilot *,
.tk-campaign-website-pilot *::before,
.tk-campaign-website-pilot *::after {
	box-sizing: border-box;
}

.tk-campaign-website-pilot :where(h1, h2, h3, p, ul, ol, dl, dd, figure) {
	margin-block-start: 0;
}

.tk-campaign-website-pilot :where(p, ul, ol, dl) {
	margin-block-end: 0;
}

.tk-campaign-website-pilot :where(ul, ol) {
	padding-inline-start: 1.25rem;
}

.tk-campaign-website-pilot :where(img, svg) {
	max-width: 100%;
	height: auto;
}

.tk-campaign-website-pilot a {
	color: inherit;
	text-underline-offset: 0.18em;
}

.tk-campaign-website-pilot :where(a, button, summary):focus-visible {
	outline: 2px solid var(--campaign-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(17, 24, 39, 0.14);
}

.website-pilot-skip-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1000;
	transform: translateY(-150%);
	border-radius: 0.75rem;
	background: var(--campaign-text);
	color: var(--campaign-surface);
	padding: 0.75rem 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform var(--campaign-transition-fast);
}

.website-pilot-skip-link:focus {
	transform: translateY(0);
	outline: none;
	box-shadow: var(--website-pilot-focus);
}

.website-pilot {
	background:
		radial-gradient(circle at 0 0, rgba(249, 115, 22, 0.07), transparent 30rem),
		var(--campaign-bg);
	color: var(--campaign-text);
	overflow-x: clip;
}

.website-pilot:focus {
	outline: none;
}

.website-pilot h1,
.website-pilot h2,
.website-pilot h3 {
	color: var(--campaign-text);
	letter-spacing: -0.028em;
	text-wrap: balance;
}

.website-pilot h1 {
	max-width: 17ch;
	margin-block-end: 0;
	font-size: var(--campaign-type-h1);
	font-weight: 850;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.website-pilot h2 {
	max-width: 24ch;
	margin-block-end: 0;
	font-size: var(--campaign-type-h2);
	font-weight: 800;
	line-height: 1.16;
}

.website-pilot h3 {
	margin-block-end: 0;
	font-size: var(--campaign-type-h3);
	font-weight: 750;
	letter-spacing: -0.012em;
	line-height: 1.32;
}

.website-pilot__eyebrow {
	width: fit-content;
	margin-block-end: 0;
	border: 1px solid rgba(17, 24, 39, 0.1);
	border-radius: var(--campaign-radius-pill);
	background: var(--campaign-surface);
	color: var(--campaign-text);
	padding: 0.34rem 0.7rem;
	font-size: var(--campaign-type-eyebrow);
	font-weight: 800;
	letter-spacing: 0.07em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Small caps label. Scoped with two classes so it also wins over the
 * element-qualified heading rules when a heading carries it. */
.website-pilot .website-pilot__label,
.website-pilot__label {
	max-width: none;
	margin: 0;
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-eyebrow);
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.website-pilot__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Supporting prose — one treatment, one measure. */
.website-pilot__section-header > p,
.website-pilot__lead,
.website-pilot__lead-support,
.website-pilot__closing-line,
.website-pilot__timeline-note,
.website-pilot__fairness-note,
.website-pilot__proof-note,
.website-pilot__microcopy,
.website-pilot-cta-group__microcopy {
	max-width: var(--campaign-container-narrow);
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-body);
	line-height: 1.65;
}

.website-pilot__lead {
	color: var(--campaign-text);
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.5;
}

.website-pilot__lead-support,
.website-pilot__microcopy,
.website-pilot-cta-group__microcopy {
	font-size: var(--campaign-type-support);
	line-height: 1.6;
}

.website-pilot__closing-line,
.website-pilot__timeline-note,
.website-pilot__fairness-note,
.website-pilot__proof-note {
	margin-block-start: var(--campaign-space-5);
	font-size: var(--campaign-type-support);
}

/* ------------------------------------------------------------------ *
 * 3. Buttons and CTA emphasis levels
 *
 * Three visual levels; one behavioural contract. Every level keeps the
 * same data-* hooks, so analytics semantics are unaffected by emphasis.
 *   --primary : high emphasis (hero, package, process, FAQ, final, sticky)
 *   --secondary : mid emphasis (proof, modal cancel)
 *   --quiet   : low emphasis inline action (guidance, pilot price)
 * ------------------------------------------------------------------ */

.website-pilot-header__cta,
.website-pilot-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	border: 1px solid var(--campaign-primary);
	border-radius: var(--campaign-radius-pill);
	background: var(--campaign-primary);
	color: var(--campaign-primary-contrast);
	padding: 0.85rem 1.4rem;
	font-family: inherit;
	font-size: 0.98rem;
	font-weight: 750;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--campaign-transition-fast),
		border-color var(--campaign-transition-fast),
		color var(--campaign-transition-fast),
		transform var(--campaign-transition-fast);
}

.website-pilot-button--primary {
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12), 0 6px 18px rgba(17, 24, 39, 0.14);
}

.website-pilot-button:hover,
.website-pilot-header__cta:hover {
	border-color: var(--campaign-primary-hover);
	background: var(--campaign-primary-hover);
	color: var(--campaign-primary-contrast);
	transform: translateY(-1px);
}

.website-pilot-button:active,
.website-pilot-header__cta:active {
	border-color: var(--campaign-primary-active);
	background: var(--campaign-primary-active);
	transform: translateY(0);
}

.website-pilot-button:disabled,
.website-pilot-button[aria-disabled="true"],
.website-pilot-header__cta[aria-disabled="true"] {
	border-color: var(--campaign-border);
	background: var(--campaign-surface-alt);
	color: #3f4650;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.website-pilot-button[data-cta-state="loading"],
.website-pilot-header__cta[data-cta-state="loading"] {
	cursor: progress;
}

.website-pilot-button[data-cta-state="error"],
.website-pilot-button[data-cta-state="retry"],
.website-pilot-header__cta[data-cta-state="error"],
.website-pilot-header__cta[data-cta-state="retry"] {
	border-color: var(--campaign-warning);
}

.website-pilot-button--secondary {
	border-color: var(--campaign-border);
	background: var(--campaign-surface);
	color: var(--campaign-text);
	box-shadow: none;
}

.website-pilot-button--secondary:hover {
	border-color: var(--campaign-primary);
	background: var(--campaign-primary);
	color: var(--campaign-primary-contrast);
}

/* Low-emphasis inline action. Same hooks, quieter presence. */
.website-pilot-button--quiet {
	min-height: 0;
	border-color: transparent;
	border-bottom: 2px solid rgba(17, 24, 39, 0.3);
	border-radius: 0;
	background: transparent;
	color: var(--campaign-text);
	padding: 0.1rem 0 0.2rem;
	font-size: var(--campaign-type-support);
	font-weight: 800;
	white-space: normal;
	box-shadow: none;
}

.website-pilot-button--quiet:hover {
	border-color: transparent;
	border-bottom-color: var(--campaign-focus);
	background: transparent;
	color: var(--campaign-text);
	transform: none;
}

.website-pilot-button--quiet:active {
	border-color: transparent;
	border-bottom-color: var(--campaign-focus);
	background: transparent;
	transform: none;
}

.website-pilot-button--quiet:disabled,
.website-pilot-button--quiet[aria-disabled="true"] {
	border-color: transparent;
	border-bottom-color: var(--campaign-border);
	background: transparent;
}

.website-pilot-cta-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--campaign-space-3);
	margin-block-start: var(--campaign-cta-gap);
}

.website-pilot-cta-group--inline {
	margin-block-start: var(--campaign-space-5);
}

.website-pilot-cta-group .website-pilot-button {
	width: 100%;
}

.website-pilot-cta-group .website-pilot-button--quiet {
	width: auto;
}

.website-pilot-cta-group__microcopy {
	max-width: 52ch;
}

.website-pilot-cta-status {
	width: 100%;
	margin: 0.25rem 0 0;
	border: 1px solid rgba(180, 83, 9, 0.28);
	border-radius: 12px;
	background: var(--campaign-warning-surface);
	color: var(--campaign-text);
	padding: 0.75rem 0.85rem;
	font-size: 0.92rem;
	font-weight: 650;
	line-height: 1.4;
}

.website-pilot-cta-status[hidden] {
	display: none;
}

.website-pilot-cta-status[data-cta-status="loading"] {
	border-color: rgba(17, 24, 39, 0.22);
	background: var(--campaign-surface-alt);
	color: var(--campaign-text-muted);
}

.website-pilot-cta-status[data-cta-status="error"] {
	border-color: rgba(180, 83, 9, 0.45);
	background: var(--campaign-warning-surface);
}

/* ------------------------------------------------------------------ *
 * 4. Card family
 *
 * Four members only:
 *   .website-pilot-card          standard content card
 *   .website-pilot-offer-card    primary offer card (hero + final close)
 *   .website-pilot-panel         subtle informational panel
 *   .website-pilot-panel--warning exclusion / caution panel
 * ------------------------------------------------------------------ */

.website-pilot-card,
.website-pilot-proof-card {
	height: 100%;
	border: 1px solid var(--campaign-border-soft);
	border-radius: var(--campaign-radius-card);
	background: var(--campaign-surface);
	padding: var(--campaign-card-padding);
}

.website-pilot-card {
	display: grid;
	align-content: start;
	gap: var(--campaign-space-2);
}

.website-pilot-panel {
	display: grid;
	align-content: start;
	gap: var(--campaign-space-3);
	border: 1px solid var(--campaign-border-soft);
	border-radius: var(--campaign-radius-card);
	background: rgba(255, 255, 255, 0.66);
	padding: var(--campaign-card-padding);
}

.website-pilot-panel--warning {
	border-color: rgba(180, 83, 9, 0.32);
	background: var(--campaign-warning-surface);
}

.website-pilot-panel__title {
	margin: 0;
	color: var(--campaign-text);
	font-size: var(--campaign-type-eyebrow);
	font-weight: 850;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.website-pilot-panel--warning .website-pilot-panel__title {
	color: var(--campaign-warning);
}

.website-pilot-card > p,
.website-pilot-proof-card > p,
.website-pilot-card li,
.website-pilot-proof-card li,
.website-pilot-panel p,
.website-pilot-process-list p,
.website-pilot-faq-item__answer p,
.website-pilot-note-group p,
.website-pilot-final-close p {
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-support);
	line-height: 1.6;
}

.website-pilot-card-list,
.website-pilot-fact-strip,
.website-pilot-feature-list,
.website-pilot-process-list,
.website-pilot-offer-recap,
.website-pilot-split-list {
	list-style: none;
	padding-inline-start: 0;
}

.website-pilot-card-list {
	display: grid;
	gap: var(--campaign-grid-gap);
	margin: 0;
	grid-template-columns: 1fr;
}

/* Shared tick treatment. */
.website-pilot-proof-card li::before,
.website-pilot-feature-list li::before,
.website-pilot-offer-recap li::before,
.website-pilot-split-list li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	color: var(--campaign-success);
	font-weight: 850;
}

.website-pilot-proof-card ul,
.website-pilot-offer-recap,
.website-pilot-split-list {
	display: grid;
	gap: var(--campaign-space-2);
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.website-pilot-proof-card li,
.website-pilot-offer-recap li,
.website-pilot-split-list li,
.website-pilot-feature-list li {
	position: relative;
	padding-inline-start: 1.4rem;
}

/* ------------------------------------------------------------------ *
 * 5. Header and footer
 * ------------------------------------------------------------------ */

.website-pilot-header,
.website-pilot-footer {
	background: rgba(255, 255, 255, 0.94);
	color: var(--campaign-text);
}

.website-pilot-header {
	position: relative;
	z-index: 20;
	border-bottom: 1px solid rgba(209, 213, 219, 0.85);
	backdrop-filter: blur(10px);
}

.website-pilot-header__inner,
.website-pilot-footer__inner {
	width: min(100%, var(--campaign-container));
	margin-inline: auto;
	padding-inline: var(--campaign-gutter);
}

.website-pilot-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--campaign-space-3);
	min-height: 60px;
	padding-block: 0.6rem;
}

/*
 * The brand lockup is the shared v2 component (template-parts/global/brand).
 * The campaign page enqueues only this stylesheet, so the global header's
 * design tokens are restated here at their token values rather than pulled in
 * — loading main.css would restyle the whole campaign. Keep these in step with
 * `.tk-site-header__brand*` in main.css so both surfaces show one brand.
 */
.website-pilot-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	width: fit-content;
	min-width: 0;
	color: #172033;
	font-weight: 900;
	text-decoration: none;
}

.website-pilot-header__brand-mark {
	display: block;
	flex: none;
	width: auto;
	height: 1.75rem;
	max-width: 100%;
	object-fit: contain;
}

.website-pilot-header__brand-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.website-pilot-header__offer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--campaign-space-4);
	min-width: 0;
}

.website-pilot-header__price-context {
	display: none;
	margin: 0;
	color: var(--campaign-text);
	font-size: var(--campaign-type-support);
	font-weight: 800;
	line-height: 1.25;
	white-space: nowrap;
}

.website-pilot-header__price-context span {
	color: var(--campaign-text-muted);
	font-weight: 650;
}

.website-pilot-header__campaign-context {
	display: none;
	min-width: 0;
}

.website-pilot-header__campaign-label,
.website-pilot-header__microcopy {
	margin: 0;
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-micro);
	line-height: 1.3;
}

.website-pilot-header__campaign-label {
	color: var(--campaign-text);
	font-weight: 750;
}

.website-pilot-header__cta {
	min-height: 2.6rem;
	padding: 0.7rem 1.1rem;
	font-size: 0.9rem;
	box-shadow: none;
}

/*
 * The header CTA is the only one of the ten that is an <a>, so the campaign
 * link reset `.tk-campaign-website-pilot a { color: inherit }` (0,1,1) beat
 * the shared button rule (0,1,0) and left the label dark-on-dark at rest. It
 * only became legible on hover, where `:hover` (0,2,0) took the specificity
 * back. Matching the reset's specificity restores the intended contrast.
 */
.tk-campaign-website-pilot a.website-pilot-header__cta {
	color: var(--campaign-primary-contrast);
}

.website-pilot-footer {
	position: relative;
	z-index: 2;
	border-top: 1px solid var(--campaign-border);
}

.website-pilot-footer__inner {
	display: grid;
	gap: var(--campaign-space-3);
	padding-block: 1.5rem;
}

.website-pilot-footer__brand {
	margin: 0;
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-support);
}

.website-pilot-footer__legal {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--campaign-space-3) var(--campaign-space-4);
	font-size: var(--campaign-type-support);
}

.website-pilot-footer__brand a,
.website-pilot-footer__legal a,
.website-pilot-footer__legal-button {
	color: inherit;
	text-underline-offset: 0.2em;
}

.website-pilot-footer__legal-button {
	appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
}

.website-pilot-footer__legal-button:focus-visible {
	outline: 3px solid var(--campaign-focus, currentColor);
	outline-offset: 4px;
}

/* ------------------------------------------------------------------ *
 * 6. Section rhythm
 *
 * One vertical rhythm for every section:
 *   section padding      --campaign-section-padding
 *   header -> content    --campaign-header-gap
 *   content -> CTA       --campaign-cta-gap
 *   grid gaps            --campaign-grid-gap
 * ------------------------------------------------------------------ */

.website-pilot__section {
	width: min(100%, var(--campaign-container));
	margin-inline: auto;
	padding: var(--campaign-section-padding) var(--campaign-gutter);
}

.website-pilot__section--hero {
	padding-block: var(--campaign-hero-padding) var(--campaign-section-padding);
}

.website-pilot__section--final-cta {
	padding-block: var(--campaign-hero-padding);
}

.website-pilot__section--trust-strip {
	padding-block: var(--campaign-section-padding-dense);
}

/* The wide container exists for a multi-project proof grid. Until approved
 * proof exists this section aligns with the rest of the page. */
.website-pilot__section--proof[data-proof-state="validated-proof"],
.website-pilot__section--proof[data-proof-state="limited-proof"] {
	width: min(100%, var(--campaign-container-wide));
}

/* Alternating surface bands give the page a calm scan rhythm. */
.website-pilot__section--customer-journey,
.website-pilot__section--offer,
.website-pilot__section--simplicity,
.website-pilot__section--proof,
.website-pilot__section--comparison,
.website-pilot__section--final-cta {
	background: var(--campaign-surface-alt);
	box-shadow: 0 0 0 100vmax var(--campaign-surface-alt);
	clip-path: inset(0 -100vmax);
}

.website-pilot__section-header {
	display: grid;
	gap: var(--campaign-space-4);
	max-width: var(--campaign-container-narrow);
	margin-block-end: var(--campaign-header-gap);
}

.website-pilot__section-header .website-pilot__eyebrow {
	margin-block-end: calc(var(--campaign-space-1) * -1);
}

/* ------------------------------------------------------------------ *
 * 7. S01 hero
 *
 * A02 Finding A: at 1440px the H1 previously wrapped to six lines inside a
 * 620px column while the right column held a short card and ~815px of empty
 * space. The fix is compositional, not a blanket font reduction:
 *   - the commercial offer moves into the right column as the primary card;
 *   - the left column keeps message, outcome flow and the primary CTA;
 *   - the H1 measure and size are tuned together for a 2–4 line composition.
 * ------------------------------------------------------------------ */

.website-pilot-hero {
	display: grid;
	gap: var(--campaign-column-gap);
	align-items: start;
}

.website-pilot-hero__content {
	display: grid;
	align-content: start;
	gap: var(--campaign-space-5);
	max-width: 44rem;
}

.website-pilot-hero__content .website-pilot__eyebrow {
	margin-block-end: calc(var(--campaign-space-2) * -1);
}

/* Tuned with the column proportions above: at the 1440px target the H1 gets
 * 684px, which is the width at which this sentence resolves to three lines.
 * Narrower desktops fall back to four, which is still inside the intended
 * 2–4 line composition. */
.website-pilot-hero__content h1 {
	max-width: 24ch;
}

.website-pilot-hero__content .website-pilot__lead {
	margin-block-start: calc(var(--campaign-space-1) * -1);
}

.website-pilot-hero__content .website-pilot__lead-support {
	margin-block-start: calc(var(--campaign-space-3) * -1);
}

.website-pilot-hero__content .website-pilot-cta-group {
	margin-block-start: var(--campaign-space-2);
}

/* Understand -> Trust -> Act */

.website-pilot-outcome-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--campaign-space-2) var(--campaign-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.website-pilot-outcome-flow li {
	display: inline-flex;
	align-items: center;
	gap: var(--campaign-space-3);
	color: var(--campaign-text);
	font-size: var(--campaign-type-micro);
	font-weight: 850;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

.website-pilot-outcome-flow li:not(:last-child)::after {
	content: "→";
	color: var(--campaign-focus);
	font-size: 1rem;
	letter-spacing: 0;
}

/* Hero right column */

.website-pilot-hero__aside {
	display: grid;
	align-content: start;
	gap: var(--campaign-space-4);
	width: 100%;
	max-width: 30rem;
}

.website-pilot-offer-card {
	display: grid;
	gap: var(--campaign-space-4);
	border: 1px solid rgba(17, 24, 39, 0.1);
	border-radius: var(--campaign-radius-feature);
	background: var(--campaign-surface);
	padding: var(--campaign-card-padding-lg);
	box-shadow: var(--campaign-shadow-offer);
}

.website-pilot-offer-card__total {
	display: grid;
	gap: 0.1rem;
	margin: 0;
}

.website-pilot-offer-card__figure {
	color: var(--campaign-text);
	font-size: var(--campaign-type-price);
	font-weight: 850;
	letter-spacing: -0.045em;
	line-height: 0.95;
}

.website-pilot-offer-card__caption {
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-eyebrow);
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.website-pilot-offer-card__split {
	display: grid;
	gap: var(--campaign-space-3);
	border-block: 1px solid var(--campaign-border-soft);
	padding-block: var(--campaign-space-4);
}

.website-pilot-offer-card__split > div {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: var(--campaign-space-3);
}

.website-pilot-offer-card__amount {
	color: var(--campaign-text);
	font-size: var(--campaign-type-price-md);
	font-weight: 850;
	letter-spacing: -0.035em;
	line-height: 1.1;
}

.website-pilot-offer-card__meaning {
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-support);
	line-height: 1.45;
}

.website-pilot-offer-card__note {
	margin: 0;
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-micro);
	line-height: 1.55;
}

.website-pilot-offer-card__built {
	display: grid;
	gap: var(--campaign-space-3);
	border-top: 1px solid var(--campaign-border-soft);
	padding-block-start: var(--campaign-space-4);
}

.website-pilot-offer-card__built .website-pilot-offer-recap li {
	color: var(--campaign-text);
	font-size: var(--campaign-type-support);
	line-height: 1.45;
}

/* The Phase 7 hero price stack is retained for compatibility but is no longer
 * emitted by the hero partial after A02. */
.website-pilot-price-stack {
	display: grid;
	gap: var(--campaign-space-2);
	max-width: 27rem;
	border: 1px solid rgba(17, 24, 39, 0.1);
	border-radius: var(--campaign-radius-feature);
	background: var(--campaign-surface);
	padding: var(--campaign-card-padding-lg);
	box-shadow: var(--campaign-shadow-1);
}

.website-pilot-price-stack__total {
	color: var(--campaign-text);
	font-size: var(--campaign-type-price-md);
	font-weight: 850;
	letter-spacing: -0.04em;
	line-height: 1.05;
}

/* Neutral proof card (hero + proof section). */

.website-pilot-proof-card {
	display: grid;
	gap: var(--campaign-space-4);
	border-radius: var(--campaign-radius-media);
}

.website-pilot-proof-card--neutral {
	position: relative;
	overflow: hidden;
	background: var(--campaign-surface);
	box-shadow: none;
}

.website-pilot-proof-card--neutral::before {
	content: "";
	display: block;
	width: 3rem;
	height: 0.28rem;
	border-radius: var(--campaign-radius-pill);
	background: var(--campaign-focus);
}

.website-pilot-proof-card__status {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	border: 1px solid rgba(180, 83, 9, 0.28);
	border-radius: var(--campaign-radius-pill);
	background: var(--campaign-warning-surface);
	color: var(--campaign-warning);
	padding: 0.34rem 0.65rem;
	font-size: 0.76rem;
	font-weight: 850;
	letter-spacing: 0.04em;
	line-height: 1.25;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * 8. S02 trust strip
 * ------------------------------------------------------------------ */

.website-pilot-fact-strip {
	display: grid;
	gap: var(--campaign-space-2);
	margin: 0;
	border: 1px solid var(--campaign-border-soft);
	border-radius: var(--campaign-radius-feature);
	background: var(--campaign-surface);
	padding: var(--campaign-space-2);
}

.website-pilot-fact-strip li {
	display: flex;
	align-items: center;
	border-radius: 10px;
	background: var(--campaign-surface-alt);
	padding: 0.8rem 0.9rem;
	color: var(--campaign-text);
	font-size: var(--campaign-type-micro);
	line-height: 1.4;
}

.website-pilot-fact-strip strong {
	font-weight: 750;
}

.website-pilot__microcopy {
	margin-block-start: var(--campaign-space-4);
}

/* ------------------------------------------------------------------ *
 * 9. S03 recognition
 *
 * Presented as a compact recognition system, visually secondary to the hero:
 * quieter cards, quote-mark markers, tighter type. Not six sales cards.
 * ------------------------------------------------------------------ */

.website-pilot-card-list--recognition .website-pilot-card {
	position: relative;
	gap: var(--campaign-space-2);
	border-color: transparent;
	background: var(--campaign-surface);
	padding-inline-start: calc(var(--campaign-card-padding) + 0.85rem);
}

.website-pilot-card-list--recognition .website-pilot-card h3 {
	font-size: clamp(1rem, 1.15vw, 1.08rem);
	font-weight: 800;
	line-height: 1.35;
	text-wrap: pretty;
}

.website-pilot-card-list--recognition .website-pilot-card p {
	font-size: var(--campaign-type-micro);
	line-height: 1.55;
}

/* ------------------------------------------------------------------ *
 * 10. S04 customer journey
 * ------------------------------------------------------------------ */

.website-pilot-step-list {
	display: grid;
	gap: var(--campaign-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: journey;
}

.website-pilot-step-list li {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid var(--campaign-border-soft);
	border-radius: var(--campaign-radius-card);
	background: var(--campaign-surface);
	padding: 0.8rem 1rem 0.8rem 2.9rem;
	color: var(--campaign-text);
	font-size: var(--campaign-type-support);
	font-weight: 650;
	line-height: 1.45;
	counter-increment: journey;
}

.website-pilot-step-list li::before {
	content: counter(journey);
	position: absolute;
	top: 50%;
	left: 0.85rem;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--campaign-surface-sunken);
	color: var(--campaign-text);
	font-size: 0.78rem;
	font-weight: 850;
	transform: translateY(-50%);
}

/* ------------------------------------------------------------------ *
 * 11. S05 understand / trust / use / act
 *
 * The clearest teaching system on the page: numbered, evenly weighted,
 * and deliberately not styled like another pricing block.
 * ------------------------------------------------------------------ */

.website-pilot-card-list--outcomes .website-pilot-card {
	position: relative;
	gap: var(--campaign-space-2);
	border-color: var(--campaign-border-soft);
	background: var(--campaign-surface);
	padding-block-start: calc(var(--campaign-card-padding) + 1.9rem);
	counter-increment: outcome;
}

.website-pilot-card-list--outcomes {
	counter-reset: outcome;
}

.website-pilot-card-list--outcomes .website-pilot-card::before {
	content: "0" counter(outcome);
	position: absolute;
	top: var(--campaign-card-padding);
	left: var(--campaign-card-padding);
	color: var(--campaign-focus);
	font-size: var(--campaign-type-micro);
	font-weight: 850;
	letter-spacing: 0.12em;
	line-height: 1;
}

.website-pilot-card-list--outcomes .website-pilot-card h3 {
	font-size: 1.05rem;
	font-weight: 850;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * 12. S06 guidance transition
 * ------------------------------------------------------------------ */

.website-pilot-feature-list {
	display: grid;
	gap: var(--campaign-space-3);
	max-width: var(--campaign-container-medium);
	margin: 0;
	border: 1px solid var(--campaign-border-soft);
	border-radius: var(--campaign-radius-feature);
	background: var(--campaign-surface);
	padding: var(--campaign-card-padding-lg);
}

.website-pilot-feature-list li {
	color: var(--campaign-text);
	font-size: var(--campaign-type-support);
	line-height: 1.55;
}

/* ------------------------------------------------------------------ *
 * 13. S07 package inclusions
 * ------------------------------------------------------------------ */

.website-pilot-grouped-content {
	display: grid;
	gap: var(--campaign-grid-gap);
	counter-reset: inclusion;
}

.website-pilot-grouped-content .website-pilot-card {
	position: relative;
	padding-block-start: calc(var(--campaign-card-padding) + 1.9rem);
	counter-increment: inclusion;
}

.website-pilot-grouped-content .website-pilot-card::before {
	content: counter(inclusion);
	position: absolute;
	top: var(--campaign-card-padding);
	left: var(--campaign-card-padding);
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--campaign-surface-sunken);
	color: var(--campaign-text);
	font-size: 0.78rem;
	font-weight: 850;
}

.website-pilot-note-group {
	display: grid;
	gap: var(--campaign-grid-gap);
	margin-block-start: var(--campaign-header-gap);
}

.website-pilot-note-group .website-pilot-panel p {
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * 14. S08 you provide / we handle
 *
 * A two-sided responsibility split. Grouping and hierarchy carry the
 * message: the customer supplies business knowledge, Techne Kaizen
 * supplies website expertise.
 * ------------------------------------------------------------------ */

.website-pilot-two-column-group {
	display: grid;
	gap: var(--campaign-grid-gap);
	align-items: stretch;
}

.website-pilot-two-column-group .website-pilot-card {
	gap: var(--campaign-space-2);
	padding: var(--campaign-card-padding-lg);
}

.website-pilot-two-column-group .website-pilot-split-group:first-of-type {
	margin-block-start: var(--campaign-space-3);
}

.website-pilot-two-column-group .website-pilot-card:first-child {
	border-color: rgba(249, 115, 22, 0.4);
	background: var(--campaign-surface);
}

.website-pilot-two-column-group .website-pilot-card:last-child {
	border-color: rgba(17, 24, 39, 0.16);
	background: var(--campaign-surface);
}

.website-pilot-split-card__label {
	margin: 0;
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-eyebrow);
	font-weight: 850;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

.website-pilot-two-column-group .website-pilot-card:first-child .website-pilot-split-card__label {
	color: var(--campaign-warning);
}

.website-pilot-two-column-group .website-pilot-card h3 {
	font-size: clamp(1.15rem, 1.6vw, 1.35rem);
	font-weight: 800;
}

.website-pilot-split-group {
	display: grid;
	gap: var(--campaign-space-2);
}

.website-pilot-split-group + .website-pilot-split-group {
	border-top: 1px solid var(--campaign-border-soft);
	padding-block-start: var(--campaign-space-4);
}

.website-pilot-split-list {
	display: grid;
	gap: var(--campaign-space-2);
}

.website-pilot-split-list li {
	color: var(--campaign-text);
	font-size: var(--campaign-type-support);
	line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * 15. S09 process
 *
 * A numbered sequence with explicit payment markers, so the reader can see
 * the whole journey — including when each payment happens — without
 * reading a dense paragraph.
 * ------------------------------------------------------------------ */

.website-pilot-process-list {
	display: grid;
	gap: var(--campaign-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: process;
}

.website-pilot-process-list__item {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--campaign-space-2);
	border: 1px solid var(--campaign-border-soft);
	border-radius: var(--campaign-radius-card);
	background: var(--campaign-surface);
	padding: var(--campaign-card-padding);
	padding-block-start: calc(var(--campaign-card-padding) + 2.1rem);
	counter-increment: process;
}

.website-pilot-process-list__item::before {
	content: counter(process);
	position: absolute;
	top: var(--campaign-card-padding);
	left: var(--campaign-card-padding);
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--campaign-surface-sunken);
	color: var(--campaign-text);
	font-size: 0.8rem;
	font-weight: 850;
}

.website-pilot-process-list__item h3 {
	font-size: 1rem;
	font-weight: 800;
}

/* Payment steps are the two moments money changes hands. */
.website-pilot-process-list__item--payment {
	border-color: rgba(17, 24, 39, 0.28);
	background: var(--campaign-surface);
}

.website-pilot-process-list__item--payment::before {
	background: var(--campaign-primary);
	color: var(--campaign-primary-contrast);
}

.website-pilot-process-list__marker {
	display: inline-flex;
	width: fit-content;
	border-radius: var(--campaign-radius-pill);
	background: var(--campaign-surface-sunken);
	color: var(--campaign-text);
	padding: 0.22rem 0.55rem;
	font-size: 0.72rem;
	font-weight: 850;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.website-pilot-process-list__item--payment .website-pilot-process-list__marker {
	background: var(--campaign-primary);
	color: var(--campaign-primary-contrast);
}

/* ------------------------------------------------------------------ *
 * 16. S10 selected proof and founder accountability
 * ------------------------------------------------------------------ */

.website-pilot__section-header--wide {
	max-width: 62rem;
}

.website-pilot-results-grid {
	display: grid;
	gap: var(--campaign-grid-gap);
}

.website-pilot-result-card {
	display: grid;
	grid-template-rows: auto auto;
	overflow: hidden;
	border: 1px solid var(--campaign-border-soft);
	border-radius: var(--campaign-radius-feature);
	background: var(--campaign-surface);
	box-shadow: var(--campaign-shadow-1);
}

.website-pilot-result-card__body {
	display: grid;
	gap: var(--campaign-space-3);
	align-content: start;
	padding: var(--campaign-card-padding);
}

.website-pilot-result-card__body h3,
.website-pilot-result-card__body p,
.website-pilot-result-card__evidence {
	margin: 0;
}

.website-pilot-result-card__body > p:not(.website-pilot-result-card__label) {
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-support);
	line-height: 1.6;
}

.website-pilot-result-card__label {
	/* Small proof labels need text contrast; the focus accent is not a text token. */
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-eyebrow);
	font-weight: 850;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.website-pilot-result-card__body h3 {
	font-size: var(--campaign-type-h3);
	line-height: 1.2;
}

.website-pilot-result-card__body h3 span {
	display: inline;
	font-weight: 850;
}

.website-pilot-result-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--campaign-space-2);
	margin: var(--campaign-space-2) 0;
}

.website-pilot-result-metrics > div {
	display: grid;
	align-content: start;
	gap: 0.3rem;
	border-top: 2px solid var(--campaign-text);
	padding-block-start: var(--campaign-space-2);
}

.website-pilot-result-metrics dt {
	color: var(--campaign-text);
	font-size: clamp(1.45rem, 3vw, 2.25rem);
	font-weight: 850;
	letter-spacing: -0.04em;
	line-height: 1;
}

.website-pilot-result-metrics dd {
	margin: 0;
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-micro);
	font-weight: 700;
	line-height: 1.35;
}

.website-pilot-result-card__support {
	font-size: var(--campaign-type-micro) !important;
}

.website-pilot-result-card__evidence {
	align-self: end;
	border-top: 1px solid var(--campaign-border-soft);
	background: var(--campaign-surface-sunken);
}

.website-pilot-result-card__evidence img {
	display: block;
	width: 100%;
	height: auto;
}

.website-pilot-result-card__evidence figcaption {
	padding: var(--campaign-space-2) var(--campaign-card-padding) var(--campaign-space-3);
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-micro);
	line-height: 1.45;
}

.website-pilot__proof-note {
	max-width: 66rem;
	color: var(--campaign-text-muted);
	font-weight: 600;
}

.website-pilot-proof-bridge {
	display: grid;
	gap: var(--campaign-space-4);
	margin-block-start: var(--campaign-header-gap);
	border-top: 1px solid var(--campaign-border);
	padding-block-start: var(--campaign-header-gap);
}

.website-pilot-proof-bridge > p {
	max-width: var(--campaign-container-narrow);
	color: var(--campaign-text);
	font-size: var(--campaign-type-body);
	font-weight: 700;
	line-height: 1.55;
}

.website-pilot-proof-bridge .website-pilot-cta-group {
	margin-block-start: 0;
}

.website-pilot-founder-summary {
	display: grid;
	gap: var(--campaign-space-3);
	max-width: 56rem;
	border-top: 3px solid var(--campaign-focus);
	padding-block-start: var(--campaign-space-4);
}

.website-pilot-founder-summary p {
	margin: 0;
	color: var(--campaign-text-muted);
	line-height: 1.65;
}

.website-pilot-founder-summary strong {
	color: var(--campaign-text);
}

@media (min-width: 1024px) {
	.website-pilot-results-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.website-pilot-proof-bridge {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
	}

	.website-pilot-proof-bridge .website-pilot-cta-group {
		align-items: flex-end;
	}
}

/* ------------------------------------------------------------------ *
 * 17. S11 why £600 / why £200 / capacity
 *
 * A02 Finding B: the two sub-headings previously sat as bare grid children,
 * separated from their own paragraphs by the section column gap. They are now
 * grouped into explanation blocks that share the card family's typographic
 * rhythm.
 *
 * The capacity block is a production-capacity explanation. It renders no
 * remaining count, progress bar, countdown or scarcity meter. B02 owns any
 * real capacity counter.
 * ------------------------------------------------------------------ */

.website-pilot-reason-notes {
	display: grid;
	gap: var(--campaign-grid-gap);
}

.website-pilot-reason-note {
	display: grid;
	gap: var(--campaign-space-2);
	border: 1px solid var(--campaign-border-soft);
	border-radius: var(--campaign-radius-card);
	background: var(--campaign-surface);
	padding: var(--campaign-card-padding);
}

.website-pilot-reason-note h3 {
	margin: 0;
	font-size: var(--campaign-type-h3);
	font-weight: 800;
}

.website-pilot-reason-note p {
	margin: 0;
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-support);
	line-height: 1.6;
}

.website-pilot-capacity-figure {
	display: grid;
	gap: 0.1rem;
	margin: 0;
	border-inline-start: 3px solid var(--campaign-focus);
	padding-inline-start: var(--campaign-space-3);
}

.website-pilot-capacity-figure__count {
	color: var(--campaign-text);
	font-size: var(--campaign-type-price-md);
	font-weight: 850;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.website-pilot-capacity-figure__label {
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-eyebrow);
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.website-pilot-price-breakdown {
	display: grid;
	gap: var(--campaign-space-3);
	max-width: 27rem;
	margin: 0;
	border: 1px solid rgba(17, 24, 39, 0.1);
	border-radius: var(--campaign-radius-feature);
	background: var(--campaign-surface);
	padding: var(--campaign-card-padding-lg);
	box-shadow: var(--campaign-shadow-1);
}

.website-pilot-price-breakdown > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--campaign-space-4);
	border-bottom: 1px solid var(--campaign-border-soft);
	padding-block-end: var(--campaign-space-3);
}

.website-pilot-price-breakdown > div:last-child {
	border-bottom: 0;
	padding-block-end: 0;
}

.website-pilot-price-breakdown dt {
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-support);
	font-weight: 650;
}

.website-pilot-price-breakdown dd {
	margin: 0;
	color: var(--campaign-text);
	font-weight: 850;
	text-align: right;
	white-space: nowrap;
}

/* £600 is the total, and reads as the total. A04 removed the reference-price
   row that used to sit above it, so the total is now the first row. */
.website-pilot-price-breakdown > div:nth-child(1) dd {
	font-size: var(--campaign-type-price-md);
	letter-spacing: -0.04em;
	line-height: 1.05;
}

/* ------------------------------------------------------------------ *
 * 18. S12 comparison
 * ------------------------------------------------------------------ */

.website-pilot-card-list--comparison .website-pilot-card {
	background: var(--campaign-surface);
}

.website-pilot-card-list--comparison .website-pilot-card:nth-child(2) {
	border-color: rgba(249, 115, 22, 0.55);
	box-shadow: var(--campaign-shadow-1);
}

/* ------------------------------------------------------------------ *
 * 19. S13 FAQ
 * ------------------------------------------------------------------ */

.website-pilot__section--faq {
	width: min(100%, 900px);
}

.website-pilot-faq-list {
	display: grid;
	gap: var(--campaign-space-2);
}

.website-pilot-faq-item {
	border: 1px solid var(--campaign-border-soft);
	border-radius: var(--campaign-radius-faq);
	background: var(--campaign-surface);
	overflow: hidden;
	transition: border-color var(--campaign-transition-fast);
}

.website-pilot-faq-item summary {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 3.25rem;
	padding: 0.9rem 3.5rem 0.9rem 1.1rem;
	color: var(--campaign-text);
	font-size: var(--campaign-type-support);
	font-weight: 750;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.website-pilot-faq-item summary:hover {
	background: rgba(243, 244, 246, 0.7);
}

.website-pilot-faq-item summary::-webkit-details-marker {
	display: none;
}

.website-pilot-faq-item summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--campaign-surface-sunken);
	color: var(--campaign-text);
	font-size: 1.2rem;
	font-weight: 650;
	line-height: 1;
	transform: translateY(-50%);
}

.website-pilot-faq-item[open] {
	border-color: rgba(17, 24, 39, 0.24);
}

.website-pilot-faq-item[open] summary {
	border-bottom: 1px solid var(--campaign-border-soft);
	background: var(--campaign-surface-alt);
}

.website-pilot-faq-item[open] summary::after {
	content: "–";
	background: var(--campaign-primary);
	color: var(--campaign-primary-contrast);
}

.website-pilot-faq-item__answer {
	padding: var(--campaign-space-4) 1.1rem var(--campaign-space-5);
}

.website-pilot-faq-item__answer p {
	max-width: var(--campaign-container-narrow);
}

/* ------------------------------------------------------------------ *
 * 20. S14 final close
 *
 * Deliberately different from the earlier CTA blocks: one statement, the
 * three money facts, one action. The remaining package recap is present but
 * visually secondary.
 * ------------------------------------------------------------------ */

.website-pilot-final-close {
	display: grid;
	gap: var(--campaign-column-gap);
	align-items: start;
}

.website-pilot-final-close__content {
	display: grid;
	gap: var(--campaign-space-4);
	max-width: 40rem;
}

.website-pilot-final-close__content .website-pilot__eyebrow {
	margin-block-end: calc(var(--campaign-space-1) * -1);
}

.website-pilot-final-close__content h2 {
	max-width: 20ch;
}

.website-pilot-final-close__offer {
	display: grid;
	gap: var(--campaign-space-5);
	width: 100%;
	max-width: 30rem;
	border: 1px solid rgba(17, 24, 39, 0.1);
	border-radius: var(--campaign-radius-feature);
	background: var(--campaign-surface);
	padding: var(--campaign-card-padding-lg);
	box-shadow: var(--campaign-shadow-offer);
}

.website-pilot-money-summary {
	display: grid;
	gap: var(--campaign-space-3);
	margin: 0;
}

.website-pilot-money-summary > div {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: var(--campaign-space-3);
}

.website-pilot-money-summary dt {
	color: var(--campaign-text);
	font-weight: 850;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.website-pilot-money-summary > div:first-child {
	border-bottom: 1px solid var(--campaign-border-soft);
	padding-block-end: var(--campaign-space-4);
}

.website-pilot-money-summary > div:first-child dt {
	font-size: var(--campaign-type-price);
	letter-spacing: -0.045em;
	line-height: 0.95;
}

.website-pilot-money-summary > div:not(:first-child) dt {
	font-size: var(--campaign-type-price-md);
}

.website-pilot-money-summary dd {
	margin: 0;
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-support);
	line-height: 1.45;
}

.website-pilot-final-close__recap {
	display: grid;
	gap: var(--campaign-space-3);
	border-top: 1px solid var(--campaign-border-soft);
	padding-block-start: var(--campaign-space-4);
}

.website-pilot-final-close__recap .website-pilot-offer-recap li {
	color: var(--campaign-text-muted);
	font-size: var(--campaign-type-micro);
	line-height: 1.45;
}

.website-pilot-offer-recap {
	display: grid;
	gap: var(--campaign-space-2);
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * 21. Sticky mobile CTA
 * ------------------------------------------------------------------ */

.website-pilot-sticky-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 900;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--campaign-space-3);
	border-top: 1px solid rgba(209, 213, 219, 0.95);
	background: rgba(255, 255, 255, 0.97);
	padding: 0.7rem var(--campaign-gutter) calc(0.7rem + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -4px 20px rgba(17, 24, 39, 0.1);
	backdrop-filter: blur(10px);
	opacity: 0;
	pointer-events: none;
	transform: translateY(110%);
	visibility: hidden;
	transition:
		opacity var(--campaign-transition-base),
		transform var(--campaign-transition-base),
		visibility var(--campaign-transition-base);
}

.website-pilot-sticky-cta[hidden] {
	display: none;
}

.website-pilot-sticky-cta.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	visibility: visible;
}

.website-pilot-sticky-cta__summary,
.website-pilot-sticky-cta__button,
.website-pilot-sticky-cta .website-pilot-cta-status {
	position: relative;
	z-index: 1;
}

.website-pilot-sticky-cta__summary {
	display: grid;
	gap: 0.05rem;
	margin: 0;
	color: var(--campaign-text);
	font-size: var(--campaign-type-micro);
	font-weight: 800;
	line-height: 1.25;
}

.website-pilot-sticky-cta__summary span:last-child {
	color: var(--campaign-text-muted);
	font-weight: 650;
}

.website-pilot-sticky-cta__button {
	min-height: 2.75rem;
	padding: 0.72rem 0.95rem;
	font-size: 0.9rem;
	white-space: normal;
}

.website-pilot-sticky-cta .website-pilot-cta-status {
	grid-column: 1 / -1;
	margin-top: 0;
}

/* ------------------------------------------------------------------ *
 * 22. Responsive
 * ------------------------------------------------------------------ */

@media (min-width: 480px) {
	.website-pilot-fact-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.website-pilot-cta-group .website-pilot-button {
		width: auto;
	}
}

@media (min-width: 768px) {
	.website-pilot-header__price-context {
		display: block;
	}

	.website-pilot-card-list--recognition,
	.website-pilot-card-list--outcomes,
	.website-pilot-grouped-content,
	.website-pilot-two-column-group,
	.website-pilot-note-group,
	.website-pilot-reason-notes,
	.website-pilot-commitment-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.website-pilot-process-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.website-pilot-step-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.website-pilot-proof-grid[data-proof-count="2"],
	.website-pilot-proof-grid[data-proof-count="3"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.website-pilot-card-list--comparison {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.website-pilot-footer__inner {
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.website-pilot-sticky-cta {
		max-width: 720px;
		right: 1rem;
		bottom: 1rem;
		left: auto;
		border: 1px solid var(--campaign-border);
		border-radius: var(--campaign-radius-feature);
		padding: 0.8rem 1rem;
	}
}

@media (min-width: 1024px) {
	.website-pilot-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		min-height: 68px;
	}

	.website-pilot-header__brand-mark {
		height: 2rem;
	}

	.website-pilot-header__campaign-context {
		display: block;
	}

	/* Hero: left column carries the message, right column carries the offer.
	 * The proportions and the H1 measure are tuned together. */
	.website-pilot-hero {
		grid-template-columns: minmax(0, 0.62fr) minmax(19rem, 0.38fr);
	}

	.website-pilot-hero__aside {
		justify-self: end;
	}

	.website-pilot-fact-strip {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.website-pilot-card-list--recognition {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.website-pilot-card-list--outcomes,
	.website-pilot-commitment-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.website-pilot-grouped-content {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.website-pilot-note-group {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.website-pilot-step-list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.website-pilot-step-list li {
		align-items: start;
		padding: 2.6rem 1rem 1rem;
	}

	.website-pilot-step-list li::before {
		top: 1rem;
		left: 1rem;
		transform: none;
	}

	.website-pilot__section--offer {
		display: grid;
		grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr);
		row-gap: var(--campaign-header-gap);
		column-gap: var(--campaign-column-gap);
		align-items: start;
	}

	.website-pilot__section--offer .website-pilot__section-header {
		margin-block-end: 0;
	}

	.website-pilot__section--offer .website-pilot-cta-group {
		margin-block-start: 0;
	}

	.website-pilot__section--offer .website-pilot-feature-list {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.website-pilot__section--offer .website-pilot-cta-group {
		grid-column: 1;
	}

	.website-pilot-process-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.website-pilot-proof-grid[data-proof-count="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.website-pilot-proof-grid[data-proof-count="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.website-pilot__section--pilot-reason {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
		row-gap: var(--campaign-header-gap);
		column-gap: var(--campaign-column-gap);
		align-items: start;
	}

	.website-pilot__section--pilot-reason .website-pilot__section-header,
	.website-pilot__section--pilot-reason .website-pilot-reason-notes,
	.website-pilot__section--pilot-reason .website-pilot-cta-group {
		grid-column: 1;
	}

	.website-pilot__section--pilot-reason .website-pilot__section-header {
		margin-block-end: 0;
	}

	.website-pilot__section--pilot-reason .website-pilot-cta-group {
		margin-block-start: 0;
	}

	.website-pilot__section--pilot-reason .website-pilot-reason-notes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.website-pilot-price-breakdown {
		grid-column: 2;
		grid-row: 1 / span 3;
		justify-self: end;
		width: 100%;
	}

	.website-pilot-final-close {
		grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem);
	}

	.website-pilot-final-close__offer {
		justify-self: end;
	}

	.website-pilot-sticky-cta {
		display: none;
	}
}

@media (min-width: 1440px) {
	.website-pilot__section {
		padding-inline: 0;
	}
}

/* Touch-first widths: low-emphasis CTAs stay visually quiet but keep a
 * comfortable target, and the header action stays at least 44px tall. */
@media (max-width: 1023px) {
	.website-pilot-header__cta {
		min-height: 2.75rem;
		padding: 0.7rem 0.95rem;
		font-size: 0.85rem;
	}

	.website-pilot-button--quiet {
		min-height: 2.75rem;
		padding-block: 0.7rem 0.75rem;
	}

	.website-pilot-footer__legal a,
	.website-pilot-footer__legal-button {
		display: inline-block;
		padding-block: 0.65rem;
	}
}

@media (max-width: 767px) {
	.website-pilot-header__price-context,
	.website-pilot-header__microcopy {
		display: none;
	}

	.website-pilot-button {
		min-height: 3rem;
		white-space: normal;
	}

	.website-pilot-price-breakdown > div {
		display: grid;
		gap: 0.2rem;
	}

	.website-pilot-price-breakdown dd {
		text-align: left;
	}

	.website-pilot-offer-card__split > div,
	.website-pilot-money-summary > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.15rem;
	}

	.website-pilot-result-metrics {
		grid-template-columns: 1fr;
	}

	.website-pilot-result-metrics > div {
		grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
		align-items: baseline;
		gap: var(--campaign-space-3);
	}
}

@media (max-width: 430px) {
	.website-pilot__section {
		padding-inline: 1rem;
	}

	.website-pilot-faq-item summary {
		padding-right: 3rem;
	}

	.website-pilot-sticky-cta {
		grid-template-columns: 1fr;
	}

	.website-pilot-sticky-cta__button {
		width: 100%;
	}
}

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

	.website-pilot-skip-link,
	.website-pilot-sticky-cta,
	.website-pilot-button,
	.website-pilot-header__cta {
		transition: none;
	}

	.website-pilot-button:hover,
	.website-pilot-header__cta:hover {
		transform: none;
	}
}