/**
 * First Visit page — hero, "what to expect" steps, HZZO section, FAQ
 * accordion, appointment form.
 */

/* Shared badge pill (Hero + HZZO) --------------------------------------- */

.fv-badge {
	display: inline-flex;
	align-items: flex-start;
	padding: var(--space-2) 14px;
	border-radius: var(--radius-pill);
	/* Brand teal tint (was the old indigo's rgb, 88/193/199 = #58c1c7) —
	   still a near-white surface at 10% opacity, so text uses the
	   text-safe darker teal, same as anywhere else on white/near-white. */
	background: rgba(88, 193, 199, 0.1);
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-tag);
	letter-spacing: var(--text-tag-ls);
	text-transform: uppercase;
	color: var(--color-primary-text);
}

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

.fv-hero {
	background: var(--color-surface);
}

.fv-hero__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-11) var(--container-padding);
	min-height: 600px;
	display: flex;
	align-items: center;
	gap: var(--space-10);
}

.fv-hero__left {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-7);
}

.fv-hero__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-display);
	line-height: var(--text-display-lh);
	color: var(--color-black);
}

.fv-hero__intro {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-gray-800);
}

.fv-hero__ctas {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.fv-hero__phone {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-black);
}

.fv-hero__phone svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.fv-hero__phone-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fv-hero__phone-label {
	font-family: var(--font-heading);
	font-size: var(--text-paragraph);
	color: var(--color-gray-500);
}

.fv-hero__phone-number {
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	color: var(--color-black);
}

.fv-hero__image {
	flex: 1;
	min-width: 0;
	height: 480px;
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.fv-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* What to Expect ------------------------------------------------------ */

.fv-expect__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-13) var(--container-padding);
	display: flex;
	flex-direction: column;
	gap: var(--space-11);
}

.fv-expect__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.fv-expect__eyebrow {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-tag);
	letter-spacing: var(--text-tag-ls);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.fv-expect__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-h1);
	line-height: var(--text-h1-lh);
	color: var(--color-black);
}

.fv-expect__intro {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-gray-800);
	max-width: 800px;
}

.fv-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}

.fv-step-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 20px;
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.fv-step-card__number {
	font-family: var(--font-heading);
	font-weight: var(--weight-regular);
	font-size: var(--text-h2);
	line-height: var(--text-h2-lh);
	color: var(--color-primary-text);
}

.fv-step-card__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-subtitle);
	line-height: var(--text-subtitle-lh);
	color: var(--color-gray-900);
	margin-bottom: var(--space-3);
}

.fv-step-card__description {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-text-muted);
}

/* HZZO ------------------------------------------------------------- */

.fv-hzzo {
	background: var(--color-surface);
}

.fv-hzzo__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-12) var(--container-padding);
	display: flex;
	align-items: center;
	gap: var(--space-11);
}

.fv-hzzo__left {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
}

.fv-hzzo__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-h1);
	line-height: var(--text-h1-lh);
	color: var(--color-black);
}

.fv-hzzo__intro {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-gray-800);
}

.fv-benefits {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: 100%;
}

.fv-benefits__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	color: var(--color-gray-900);
}

.fv-benefits__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-md);
	background: rgba(88, 193, 199, 0.12);
	color: var(--color-primary-text);
}

.fv-benefits__icon svg {
	width: 12px;
	height: 12px;
}

.fv-hzzo-card {
	flex: 1;
	min-width: 0;
	background: var(--color-black);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
}

.fv-hzzo-card__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-regular);
	font-size: var(--text-h3);
	line-height: var(--text-h3-lh);
	color: var(--color-white);
}

.fv-hzzo-card__intro {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-gray-300);
}

.fv-hzzo-card__stat {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	width: 100%;
}

.fv-hzzo-card__stat-number {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: 48px;
	color: var(--color-primary);
}

.fv-hzzo-card__stat-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fv-hzzo-card__stat-label {
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	color: var(--color-white);
}

.fv-hzzo-card__stat-sublabel {
	font-family: var(--font-heading);
	font-size: var(--text-paragraph);
	color: var(--color-gray-500);
}

.fv-hzzo-card__button {
	width: 100%;
	border: 1px solid var(--color-gray-800);
}

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

.fv-faq__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-13) var(--container-padding);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-10);
}

.fv-faq__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	text-align: center;
}

.fv-faq__eyebrow {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-tag);
	letter-spacing: var(--text-tag-ls);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.fv-faq__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-h1);
	line-height: var(--text-h1-lh);
	color: var(--color-black);
}

.fv-faq-list {
	width: 100%;
	max-width: 900px;
}

.fv-faq-item {
	border-bottom: 1px solid var(--color-border);
}

.fv-faq-item__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-4);
	background: none;
	border: 0;
	text-align: left;
}

.fv-faq-item__question {
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-subtitle);
	line-height: var(--text-subtitle-lh);
	color: var(--color-gray-900);
}

.fv-faq-item__icon {
	flex-shrink: 0;
	display: flex;
	color: var(--color-gray-900);
	transition: transform 0.2s ease;
}

.fv-faq-item__icon svg {
	width: 16px;
	height: 16px;
}

.fv-faq-item.is-open .fv-faq-item__icon {
	transform: rotate(180deg);
}

.fv-faq-item__answer {
	display: none;
	padding: 0 var(--space-4) var(--space-5);
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-text-muted);
}

.fv-faq-item__answer > * + * {
	margin-top: var(--space-3);
}

.fv-faq-item.is-open .fv-faq-item__answer {
	display: block;
}

.fv-faq__search {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	max-width: 480px;
	padding: var(--space-4);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.fv-faq__search svg {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--color-text-muted);
}

.fv-faq__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	color: var(--color-text);
}

.fv-faq__search input::placeholder {
	color: var(--color-text-muted);
}

.fv-faq-list__empty {
	padding: var(--space-5) var(--space-4);
	font-family: var(--font-body);
	color: var(--color-text-muted);
	text-align: center;
}

/* Q&A video (First Visit) ------------------------------------------------ */

.fv-qa {
	width: 100%;
	max-width: 900px;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.fv-qa__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-subtitle);
	line-height: var(--text-subtitle-lh);
	color: var(--color-gray-900);
	text-align: center;
}

.fv-qa__video {
	max-width: 640px;
	margin-inline: auto;
	width: 100%;
}

.fv-qa__topics {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-4);
	list-style: none;
	padding: 0;
}

.fv-qa__topics li {
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	color: var(--color-text-muted);
}

.fv-qa__topics li::before {
	content: '\2713';
	margin-right: var(--space-2);
	color: var(--color-primary-text);
}

.fv-explainers-grid {
	width: 100%;
	max-width: 900px;
}

.fv-explainers-teaser {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-caption);
	color: var(--color-gray-900);
}

.fv-explainers-teaser svg {
	width: 16px;
	height: 16px;
}

/* Appointment form ------------------------------------------------------ */

.fv-form {
	background: var(--color-surface);
}

.fv-form__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-13) var(--container-padding);
	display: flex;
	align-items: flex-start;
	gap: var(--space-11);
}

.fv-form__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.fv-form__heading-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.fv-form__eyebrow {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-tag);
	letter-spacing: var(--text-tag-ls);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.fv-form__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-regular);
	font-size: var(--text-h2);
	line-height: var(--text-h2-lh);
	color: var(--color-black);
}

.fv-form__intro {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-gray-800);
}

.fv-contact-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.fv-contact-list__row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.fv-contact-list__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-xl);
	background: rgba(88, 193, 199, 0.1);
	color: var(--color-primary-text);
}

.fv-contact-list__icon svg {
	width: 20px;
	height: 20px;
}

.fv-contact-list__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fv-contact-list__label {
	font-family: var(--font-heading);
	font-size: var(--text-paragraph);
	color: var(--color-gray-500);
}

.fv-contact-list__value {
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	color: var(--color-gray-900);
}

.fv-form .contact-form-wrap {
	flex: 0 0 568px;
	max-width: 568px;
}

.fv-form .contact-form {
	background: var(--color-white);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* Responsive -------------------------------------------------------- */

@media (max-width: 900px) {
	.fv-hero__inner {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.fv-hero__ctas {
		flex-direction: column;
		align-items: flex-start;
	}

	.fv-hero__image {
		height: 280px;
	}

	.fv-steps {
		grid-template-columns: 1fr;
	}

	.fv-hzzo__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.fv-hzzo-card {
		width: 100%;
	}

	.fv-form__inner {
		flex-direction: column;
	}

	.fv-form .contact-form-wrap {
		flex-basis: auto;
		max-width: none;
		width: 100%;
	}

	.fv-expect__heading,
	.fv-hzzo__heading,
	.fv-faq__heading {
		font-size: var(--text-h2);
		line-height: var(--text-h2-lh);
	}
}