/*
 * Page styles: home. Owned by the home page agent.
 * Loaded only on that page (see formsieve_current_page_css() in functions.php).
 *
 * Source: "Formsieve Home.dc.html" (1440) and "Formsieve Home Mobile.dc.html"
 * (390). Content: website/content/pages/home.html. Every rule is scoped to
 * body.fs-page-home; components (sieve, scale, entry panel, step cards,
 * features, price cards, FAQ, data flow) come from the Formsieve Site plugin.
 */

/* ------------------------------------------------------------------ */
/* Rows                                                                 */
/* ------------------------------------------------------------------ */

/*
 * Salient's 1% column gutters (-1% row margin, 1% column padding) leave
 * single-column rows about 0.5 px narrower than the container, enough to
 * re-wrap a line that fits the artboard exactly. Grid, wide and block rows
 * already reset them in base.css.
 */
body.fs-page-home .wpb_row:not(.fs-grid):not(.fs-block):not(.fs-wide) > .row_col_wrap_12 {
	margin-left: 0;
	margin-right: 0;
}

body.fs-page-home .wpb_row:not(.fs-grid):not(.fs-block):not(.fs-wide) > .row_col_wrap_12 > .wpb_column {
	padding-left: 0;
	padding-right: 0;
}

/* ------------------------------------------------------------------ */
/* Headings                                                             */
/* ------------------------------------------------------------------ */

/* H2s the artboard leaves at line-height: normal (How it works, Features, Pricing, FAQ). */
body.fs-page-home .home-h2-plain,
body.fs-page-home .row .col .home-h2-plain {
	line-height: normal;
}

/* 44 px H2s (It explains itself, Accuracy). */
body.fs-page-home .home-h2-44,
body.fs-page-home .row .col .home-h2-44 {
	font-size: 44px;
}

body.fs-page-home .home-problem__title,
body.fs-page-home .row .col .home-problem__title {
	line-height: 1.1;
}

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

/* Hero title: 60 px on desktop (the display token is 68 px); phones keep the 40 px token. */
@media (min-width: 691px) {
	body.fs-page-home .wpb_row.home-hero .col .home-hero__title {
		font-size: 60px;
	}
}

/* 1000–1239 px: the hero column is narrower than the artboard's 604 px; scale the display type with it (60 px at 1240). */
@media (min-width: 1000px) and (max-width: 1239px) {
	body.fs-page-home .wpb_row.home-hero .col .fs-display {
		font-size: 4.84vw;
	}
}

/* The desktop artboard pretty-wraps the hero lead and balances the problem title; the phone artboard does neither. */
@media (min-width: 691px) {
	body.fs-page-home .home-hero__lead {
		text-wrap: pretty;
	}

	body.fs-page-home .home-problem__title {
		text-wrap: balance;
	}
}

/* ------------------------------------------------------------------ */
/* Compatibility line under the hero                                    */
/* ------------------------------------------------------------------ */

body.fs-page-home .home-compat__text p,
body.fs-page-home .row .col .home-compat__text p {
	font-size: 17px;
	font-weight: 500;
	line-height: normal;
}

/* ------------------------------------------------------------------ */
/* The problem: three colour cards (the columns are the cards)          */
/* ------------------------------------------------------------------ */

body.fs-page-home .wpb_column.home-problem__card {
	padding: 32px 28px;
	font-size: 19px;
}

body.fs-page-home .wpb_column.home-problem__card p,
body.fs-page-home .row .col.home-problem__card p {
	line-height: 1.55;
}

/* ------------------------------------------------------------------ */
/* How it works                                                         */
/* ------------------------------------------------------------------ */

/* The artboard's min-height: 340px is content-box: 340 + 28 + 32 padding. */
@media (min-width: 1200px) {
	body.fs-page-home .home-step-first {
		min-height: 400px;
	}
}

/* 1000–1199 px: five cards are too narrow, so three on the first line and two on the second. */
@media (min-width: 1000px) and (max-width: 1199px) {
	body.fs-page-home .wpb_row.fs-grid.fs-cols-5.home-steps .wpb_column {
		width: calc((100% - 2 * var(--fs-grid-gap)) / 3) !important;
	}

	body.fs-page-home .wpb_row.fs-grid.fs-cols-5.home-steps .wpb_column:nth-child(n + 4) {
		width: calc((100% - var(--fs-grid-gap)) / 2) !important;
	}
}

/* Tablets: the five cards stack, so use the number-beside-text layout. */
@media (min-width: 691px) and (max-width: 999px) {
	body.fs-page-home .home-steps .fs-step--auto {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 6px 16px;
		height: auto;
		padding: 24px 28px;
	}

	body.fs-page-home .home-steps .fs-step--auto .fs-step__num {
		grid-row: span 2;
		font-size: 40px;
	}
}

/* ------------------------------------------------------------------ */
/* Cost + your visitors' data                                           */
/* ------------------------------------------------------------------ */

/* The artboard's link inherits 16 px. */
body.fs-page-home .home-panels .fs-btn--text-light {
	font-size: 16px;
}

/* ------------------------------------------------------------------ */
/* Accuracy                                                             */
/* ------------------------------------------------------------------ */

body.fs-page-home .wpb_row.home-accuracy {
	--fs-grid-row-gap: 18px;
}

/* ------------------------------------------------------------------ */
/* Pricing teaser                                                       */
/* ------------------------------------------------------------------ */

body.fs-page-home .home-pricing__head > .wpb_wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px 32px;
}

body.fs-page-home .home-pricing__head > .wpb_wrapper > p {
	margin: 0;
}

/* Equal-height cards when a title wraps (narrower desktops). */
body.fs-page-home .home-pricing__cards .fs-price-card {
	height: 100%;
}

/* ------------------------------------------------------------------ */
/* Closing call to action                                               */
/* ------------------------------------------------------------------ */

/* Beats Salient's ".container-wrap .row > .wpb_row:last-child { margin-bottom: 0 }". */
body.fs-page-home .container-wrap .wpb_row.home-cta {
	margin-bottom: 40px;
}

body.fs-page-home .wpb_column.home-cta__col > .vc_column-inner > .wpb_wrapper {
	align-items: center;
	text-align: center;
}

body.fs-page-home .home-cta__title,
body.fs-page-home .row .col .home-cta__title {
	max-width: 900px;
	margin: 0 auto;
	font-size: 56px;
	line-height: 1.05;
}

/* ------------------------------------------------------------------ */
/* 1000–1199 px: columns narrower than the artboard's                   */
/* ------------------------------------------------------------------ */

@media (min-width: 1000px) and (max-width: 1199px) {
	body.fs-page-home .home-h2-44,
	body.fs-page-home .row .col .home-h2-44 {
		font-size: 36px;
	}

	body.fs-page-home .home-panels .wpb_column.fs-panel {
		padding: 48px 40px;
	}

	body.fs-page-home .home-panels .fs-h2,
	body.fs-page-home .row .col.fs-panel .fs-h2 {
		font-size: 40px;
	}
}

/* ------------------------------------------------------------------ */
/* Phones (390 artboard)                                                */
/* ------------------------------------------------------------------ */

@media (max-width: 690px) {
	body.fs-page-home .home-h2-m28,
	body.fs-page-home .row .col .home-h2-m28 {
		font-size: 28px;
		line-height: 1.15;
	}

	/* "It explains itself" is 28 px at line-height: normal on the phone artboard. */
	body.fs-page-home .home-explains__title,
	body.fs-page-home .row .col .home-explains__title {
		font-size: 28px;
		line-height: normal;
	}

	body.fs-page-home .home-text-m16,
	body.fs-page-home .row .col .home-text-m16 {
		font-size: 16px;
		line-height: 1.55;
	}

	body.fs-page-home .home-compat__text {
		padding: 0 4px;
	}

	body.fs-page-home .home-compat__text p,
	body.fs-page-home .row .col .home-compat__text p {
		font-size: 15px;
		line-height: 1.5;
	}

	body.fs-page-home .wpb_column.home-problem__card {
		padding: 22px 20px;
		font-size: 17px;
	}

	body.fs-page-home .home-panels .fs-btn--text-light {
		text-decoration-thickness: auto;
	}

	/* Pricing: 4 px under the heading, 8 px above the single "See pricing" button. */
	body.fs-page-home .wpb_column.fs-stack > .vc_column-inner > .wpb_wrapper > .home-pricing__head {
		margin-bottom: 4px;
	}

	body.fs-page-home .wpb_column.fs-stack > .vc_column-inner > .wpb_wrapper > .home-pricing__mobile-cta {
		margin-top: 8px;
	}

	body.fs-page-home .container-wrap .wpb_row.home-cta {
		margin-bottom: 12px;
	}

	body.fs-page-home .wpb_column.home-cta__col > .vc_column-inner > .wpb_wrapper {
		align-items: stretch;
	}

	/* A centred block_mobile button sits in a flex wrapper: let it fill the row. */
	body.fs-page-home .home-cta .fs-btn-wrap--block-mobile .fs-btn {
		flex: 1 1 auto;
	}

	body.fs-page-home .home-cta__title,
	body.fs-page-home .row .col .home-cta__title {
		font-size: 32px;
		line-height: 1.1;
		letter-spacing: -.03em;
	}

	body.fs-page-home .home-cta__text,
	body.fs-page-home .row .col .home-cta__text {
		font-size: 16px;
		line-height: 1.5;
	}
}