/**
 * Conversion-page layout for /create-your-family-village/ (NFV-174).
 *
 * Everything here is scoped under .nfv-offer, the outer group builder B's page block markup wraps
 * around, so nothing here can leak onto any other page. Reuses the site's own design tokens
 * (--nfv-accent, --nfv-accent-deep, --nfv-accent-rgb -- see inc/chrome.php's nfv_shell_css(), the
 * one place the palette is defined) rather than restating any colour. Loaded only when a singular
 * view's content contains "nfv-offer" or the [nfv_family_intake] shortcode -- see
 * NFV_Family_Intake::maybe_enqueue() in inc/intake.php.
 *
 * Class contract (scratchpad/nfv-174-cyfv-polish/index.md, orchestrator-owned, builder A styles,
 * builder B uses): nfv-offer, nfv-offer-hero, nfv-offer-trust, nfv-offer-section, nfv-offer-cards,
 * nfv-offer-card, nfv-offer-steps, nfv-offer-step, nfv-pricing, nfv-price-card(.is-featured),
 * nfv-price-badge, nfv-price-name, nfv-price-amount, nfv-price-for, nfv-price-features,
 * nfv-offer-band, nfv-offer-terms, nfv-offer-faq, nfv-offer-cta.
 */

.nfv-offer {
	--nfv-offer-radius: 12px;
	--nfv-offer-gap: 1.5rem;
	color: var(--nfv-body);
}

.nfv-offer * {
	box-sizing: border-box;
}

.nfv-offer a {
	color: var(--nfv-accent);
}

.nfv-offer a:hover {
	color: var(--nfv-accent-deep);
}

/* ---------------------------------------------------------------------------------- layout */

.nfv-offer-section {
	max-width: 68rem;
	margin: 0 auto;
	padding: 3rem 1.25rem;
}

.nfv-offer-section + .nfv-offer-section {
	border-top: 1px solid var(--nfv-line-soft);
}

/* ---------------------------------------------------------------------------------- hero */

.nfv-offer-hero {
	max-width: 68rem;
	margin: 0 auto;
	padding: 4rem 1.25rem 3rem;
	text-align: center;
}

.nfv-offer-hero h1 {
	font-family: var(--nfv-font-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.15;
	color: var(--nfv-ink);
	margin: 0 0 1rem;
}

.nfv-offer-hero .nfv-offer-lead {
	font-size: 1.15rem;
	color: var(--nfv-body-alt);
	max-width: 40rem;
	margin: 0 auto 1.75rem;
}

.nfv-offer-hero .nfv-offer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-bottom: 1rem;
}

.nfv-offer-hero .nfv-offer-note {
	font-size: 1rem;
	color: var(--nfv-muted);
}

.nfv-offer .nfv-offer-btn {
	display: inline-block;
	border-radius: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.nfv-offer .nfv-offer-btn-primary {
	background: var(--nfv-accent);
	color: #fff;
}

.nfv-offer .nfv-offer-btn-primary:hover {
	background: var(--nfv-accent-deep);
	color: #fff;
	box-shadow: 0 4px 12px rgba(var(--nfv-accent-rgb), 0.3);
}

.nfv-offer .nfv-offer-btn-secondary {
	background: transparent;
	color: var(--nfv-accent);
	border: 1px solid var(--nfv-line);
}

.nfv-offer .nfv-offer-btn-secondary:hover {
	border-color: var(--nfv-accent);
	color: var(--nfv-accent-deep);
}

/* ---------------------------------------------------------------------------------- trust strip */

.nfv-offer-trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--nfv-offer-gap);
	max-width: 68rem;
	margin: 0 auto;
	padding: 0 1.25rem 3rem;
}

.nfv-offer-trust > * {
	text-align: center;
	font-size: 1rem;
	color: var(--nfv-body-alt);
}

.nfv-offer-trust i {
	color: var(--nfv-accent);
	font-size: 1.5rem;
	display: block;
	margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------------------------- cards / steps */

.nfv-offer-cards,
.nfv-offer-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--nfv-offer-gap);
	margin-top: 2rem;
}

.nfv-offer-card {
	background: var(--nfv-surface);
	border: 1px solid var(--nfv-line-soft);
	border-radius: var(--nfv-offer-radius);
	padding: 1.5rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nfv-offer-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.nfv-offer-card h3 {
	margin-top: 0;
	color: var(--nfv-ink);
	font-family: var(--nfv-font-display);
}

.nfv-offer-step {
	text-align: center;
	padding: 1rem;
}

.nfv-offer-step .nfv-offer-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--nfv-accent);
	color: #fff;
	font-weight: 700;
	margin: 0 auto 1rem;
}

.nfv-offer-step h3 {
	color: var(--nfv-ink);
	margin: 0 0 0.5rem;
}

/* ---------------------------------------------------------------------------------- pricing */

/* Full width up to the section's own 68rem cap (MEDIUM-2, refuter-report.md): the block editor's
   "wide" alignment (see content/page.html) lets this break out of the parent group's narrower
   default content width; this max-width is this stylesheet's own guarantee that the row itself
   never collapses down to it regardless of block alignment markup. */
/* Doubled class beats core's `.wp-block-columns{display:flex}` (HIGH-A, refuter2-report.md). */
.nfv-offer .wp-block-columns.nfv-pricing,
.nfv-pricing {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--nfv-offer-gap);
	align-items: stretch;
	max-width: 68rem;
	margin: 2rem auto 0;
}

.nfv-price-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--nfv-surface);
	border: 1px solid var(--nfv-line-soft);
	border-radius: var(--nfv-offer-radius);
	padding: 2rem 1.5rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Three cards (NFV-179, 2026-09-24: Family Blog | Village Care | Build & Hand Off; Heritage Plus
   retired): one row from 960px up, stacked below that (the 959px rule below). */

@media (min-width: 960px) {
	.nfv-price-card.is-featured {
		border: 2px solid var(--nfv-accent);
		box-shadow: 0 10px 30px rgba(var(--nfv-accent-rgb), 0.18);
		transform: scale(1.03);
		z-index: 1;
	}
}

.nfv-price-badge {
	position: absolute;
	top: -0.85rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--nfv-accent);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	white-space: nowrap;
}

.nfv-price-name {
	font-family: var(--nfv-font-display);
	font-size: 1.35rem;
	color: var(--nfv-ink);
	margin: 0.5rem 0 0.25rem;
}

.nfv-price-amount {
	display: flex;
	flex-direction: column;
	font-size: clamp(1.4rem, 2vw, 2rem);
	font-weight: 700;
	color: var(--nfv-accent);
	margin: 0 0 0.25rem;
}

/* The unit/cadence text ("one-time", "build + $19/month") never breaks mid-word, and gets its own
   line under the dollar amount instead of fighting it for width (MEDIUM-2, refuter-report.md). */
.nfv-price-amount span {
	display: block;
	font-size: 0.55em;
	font-weight: 600;
	white-space: nowrap;
	color: var(--nfv-muted);
}

.nfv-price-for {
	color: var(--nfv-muted);
	font-size: 1rem;
	margin: 0 0 1.25rem;
}

.nfv-price-features {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	flex-grow: 1;
}

.nfv-price-features li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.65rem;
	font-size: 1rem;
	color: var(--nfv-body);
}

.nfv-price-features li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--nfv-accent);
	font-weight: 700;
}

.nfv-price-card .nfv-offer-btn {
	width: 100%;
	text-align: center;
}

.nfv-offer-band {
	margin-top: 2rem;
	background: var(--nfv-accent-tint);
	border: 1px solid var(--nfv-line-soft);
	border-radius: var(--nfv-offer-radius);
	padding: 1.5rem;
	text-align: center;
}

.nfv-offer-terms {
	margin-top: 1.5rem;
	font-size: 1rem;
	color: var(--nfv-muted);
	text-align: center;
}

/* ---------------------------------------------------------------------------------- FAQ */

.nfv-offer-faq details {
	border-bottom: 1px solid var(--nfv-line-soft);
	padding: 1rem 0;
}

.nfv-offer-faq summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--nfv-ink);
	list-style: none;
}

.nfv-offer-faq summary::-webkit-details-marker {
	display: none;
}

.nfv-offer-faq summary::after {
	content: "+";
	float: right;
	color: var(--nfv-accent);
	font-weight: 700;
}

.nfv-offer-faq details[open] summary::after {
	content: "\2212";
}

.nfv-offer-faq p {
	margin: 0.75rem 0 0;
	color: var(--nfv-body-alt);
}

/* ---------------------------------------------------------------------------------- intake form */

.nfv-offer-cta {
	background: var(--nfv-surface);
	border: 1px solid var(--nfv-line-soft);
	border-radius: var(--nfv-offer-radius);
	padding: 2rem;
}

.nfv-intake {
	max-width: 40em;
	margin: 0 auto;
}

.nfv-intake-progress {
	font-weight: 600;
	color: var(--nfv-accent);
	margin-bottom: 1rem;
}

.nfv-intake-step {
	border: 0;
	padding: 0;
	margin: 0 0 1.5rem;
}

.nfv-intake-step legend {
	font-family: var(--nfv-font-display);
	font-size: 1.25rem;
	color: var(--nfv-ink);
	padding: 0;
	margin-bottom: 1rem;
}

/* intake.js programmatically focuses the legend on each step change for a11y announcement, not as
   a visible focus target -- suppress its focus outline (LOW-1, refuter-report.md). */
.nfv-intake-step legend:focus {
	outline: none;
}

.nfv-intake p {
	margin: 0 0 1rem;
}

.nfv-intake label {
	display: block;
	font-weight: 600;
	color: var(--nfv-ink);
	margin-bottom: 0.35rem;
}

.nfv-intake input[type="text"],
.nfv-intake input[type="email"],
.nfv-intake input[type="tel"],
.nfv-intake textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--nfv-line);
	border-radius: 0.4rem;
	background: var(--nfv-bg);
	color: var(--nfv-ink);
	font: inherit;
}

.nfv-intake input:focus,
.nfv-intake textarea:focus {
	outline: 2px solid var(--nfv-accent);
	outline-offset: 1px;
	border-color: var(--nfv-accent);
}

.nfv-intake .description {
	display: block;
	font-size: 1rem;
	color: var(--nfv-muted);
	margin-bottom: 0.4rem;
}

.nfv-intake-group {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
}

.nfv-intake-group legend {
	font-size: 1rem;
	font-weight: 600;
	color: var(--nfv-ink);
	padding: 0;
	margin-bottom: 0.4rem;
}

.nfv-intake-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nfv-intake-checklist li {
	margin-bottom: 0.5rem;
}

.nfv-intake-checklist label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	cursor: pointer;
}

.nfv-intake-nav {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.nfv-intake-nav button {
	border-radius: 0.4rem;
	padding: 0.55rem 1.25rem;
	font-weight: 600;
	border: 1px solid var(--nfv-line);
	background: var(--nfv-surface);
	color: var(--nfv-ink);
	cursor: pointer;
}

.nfv-intake-nav .nfv-intake-next {
	background: var(--nfv-accent);
	color: #fff;
	border-color: var(--nfv-accent);
	margin-left: auto;
}

.nfv-intake-nav .nfv-intake-next:hover {
	background: var(--nfv-accent-deep);
}

.nfv-intake button[type="submit"] {
	background: var(--nfv-accent);
	color: #fff;
	border: 0;
	border-radius: 0.4rem;
	padding: 0.75rem 1.75rem;
	font-weight: 700;
	cursor: pointer;
}

.nfv-intake button[type="submit"]:hover {
	background: var(--nfv-accent-deep);
}

.nfv-intake-ok,
.nfv-intake-err {
	border-radius: var(--nfv-offer-radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
}

.nfv-intake-ok {
	background: rgba(var(--nfv-accent-rgb), 0.08);
	border: 1px solid var(--nfv-accent);
	color: var(--nfv-ink);
}

.nfv-intake-err {
	background: rgba(168, 69, 47, 0.08);
	border: 1px solid var(--nfv-warning);
	color: var(--nfv-ink);
}

/* ---------------------------------------------------------------------------------- responsive */

/* Pricing stacks earlier than the other rows: three full cards need ~960px (tablet portrait
   overflowed at 782-850px, refuter3-report.md HIGH-1). */
@media (max-width: 959px) {
	.nfv-offer .wp-block-columns.nfv-pricing,
	.nfv-pricing {
		grid-template-columns: 1fr;
		max-width: 30rem;
	}

	.nfv-price-card.is-featured {
		transform: none;
	}
}

@media (max-width: 781px) {
	.nfv-offer-cards,
	.nfv-offer-steps,
	.nfv-offer .wp-block-columns.nfv-pricing,
	.nfv-pricing,
	.nfv-offer-trust {
		grid-template-columns: 1fr;
	}

	.nfv-price-card.is-featured {
		transform: none;
	}
}

@media (max-width: 390px) {
	.nfv-offer-hero,
	.nfv-offer-section,
	.nfv-offer-trust {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nfv-offer .nfv-offer-btn,
	.nfv-offer-card {
		transition: none;
	}
}