/* ========================= ZC — ZeroCapture landing page ========================= */
/* Scoped: only loaded on page-zerocapture.php (see header.php).
   Every rule is prefixed .zc_ or layered onto a reused class with a zc_ class,
   so nothing here can reach other pages. */


/* ---------- ZC Layout ---------- */

.zc_page{
	--zc-gold-tint: rgba(242, 186, 0, 0.16);
	--zc-section-pad: 96px;
	overflow-x: clip;
}

.zc_container{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

.zc_page h2{
	display: block; /* base h2 is display:table */
}

.zc_icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 10px;
}


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

#home-hero.zc_hero{
	padding: 140px 0 80px;
}

.zc_hero_grid{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 380px);
	grid-template-areas: "copy phone form";
	gap: 32px;
	align-items: center;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.zc_hero_copy{ grid-area: copy; }
.zc_hero_phone{ grid-area: phone; }
.zc_hero_form{ grid-area: form; position: relative; z-index: 2; scroll-margin-top: 100px; }

.zc_eyebrow{
	display: inline-block;
	margin-bottom: 20px;
	padding: 6px 14px;
	border: 1px solid rgba(242, 186, 0, 0.45);
	border-radius: 999px;
	color: var(--colour-secondary);
	font-family: var(--font-primary-bold);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.zc_hero_title{
	margin: 0 0 20px;
	color: #FFF;
	font-family: var(--font-primary-bold);
	font-size: clamp(34px, 3vw, 44px);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.zc_hero_title .highlight{
	display: block;
}

@media only screen and (min-width: 1201px) {
	.zc_hero_title,
	.zc_hero_title .highlight{ white-space: nowrap; }
}

.zc_hero_intro{
	max-width: 460px;
	margin-bottom: 28px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 17px;
	line-height: 1.6;
}

.zc_hero_actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.zc_hero_actions .btn_large{
	margin: 0;
}

.zc_watch_link{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: #FFF;
	font-family: var(--font-primary-bold);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.zc_watch_icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 2px solid var(--colour-secondary);
	border-radius: 50%;
	color: var(--colour-secondary);
	padding-left: 2px;
	box-sizing: border-box;
	transition: all .35s ease-in-out;
}

.zc_watch_link:hover .zc_watch_icon,
.zc_watch_link:focus-visible .zc_watch_icon{
	background: var(--colour-secondary);
	color: var(--colour-primary);
}

.zc_hero_phone{
	width: 100%;
	aspect-ratio: 1 / 1; /* matches new_phone_whole.png (1638x1638) */
	transform: scale(1.3); /* sits behind the form (z-index) so a little bleed is fine */
	background-image: url('../assets/2026/hero_els/new_phone_whole.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}


/* ---------- ZC Form (layers onto the site's #main_form_con white form) ---------- */

#main_form_con.zc_form_card{
	display: block;
	margin: 0;
	padding: 32px;
	box-shadow: 0 30px 60px -20px rgba(20, 6, 26, 0.55);
}

#main_form_con.zc_form_card .zc_form_head{
	margin-bottom: 20px;
}

/* colour/font from the site's h2.core; size stepped down to the large token */
/* title scales to the card width (container query units), always one line edge to edge */
#main_form_con.zc_form_card .zc_form_head{
	container-type: inline-size;
}

#main_form_con.zc_form_card .zc_form_title{
	margin: 0 0 12px;
	font-size: var(--font-size-large); /* fallback for browsers without cqi */
	font-size: 9cqi; /* "Get ahead of the queue" is ~10.9x its font size wide — retune if the wording changes */
	line-height: 1.15;
	white-space: nowrap;
}

#main_form_con.zc_form_card .zc_form_intro{
	color: var(--colour-dark);
	font-size: 14px;
	line-height: 1.5;
}

#main_form_con.zc_form_card label{
	margin-bottom: 6px;
	font-size: 14px;
}

#main_form_con.zc_form_card input,
#main_form_con.zc_form_card select{
	margin-bottom: 4px;
}

#main_form_con.zc_form_card .row{
	margin-bottom: 12px;
}

/* Ts & Cs checkbox — undo the global 100% x 45px input sizing */
#main_form_con.zc_form_card .zc_check{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 16px 0 20px;
}

#main_form_con.zc_form_card .zc_check input[type="checkbox"]{
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	padding: 0;
	accent-color: var(--colour-primary);
	cursor: pointer;
}

#main_form_con.zc_form_card .zc_check label{
	display: block;
	width: auto;
	margin: 0;
	color: var(--colour-dark);
	font-family: var(--font-primary);
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer;
}

#main_form_con.zc_form_card .zc_check label a{
	color: var(--colour-primary);
	text-decoration: underline;
}

#main_form_con.zc_form_card .zc_check label.error{
	position: absolute;
	top: auto;
	bottom: -18px;
	left: 28px;
	right: auto;
	color: red;
	font-size: 12px;
}

/* submit is the site's small .btn_1 (floated right by #main_form_con .btn_1) — contain the float */
#main_form_con.zc_form_card .zc_form{
	display: flow-root;
}

#main_form_con.zc_form_card .zc_thanks{
	display: none;
	padding: 20px 0 4px;
	color: var(--colour-primary);
	font-size: 16px;
	line-height: 1.5;
}


/* ---------- ZC Trust strip ---------- */

.zc_trust{
	background: var(--colour-secondary);
}

.zc_trust_row{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	padding-top: 22px;
	padding-bottom: 22px;
}

.zc_trust_item{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.zc_trust .zc_icon{
	background: var(--colour-primary);
	color: var(--colour-secondary);
}

.zc_trust_label{
	color: var(--colour-primary);
	font-family: var(--font-primary-bold);
	font-size: 16px;
	line-height: 1.25;
}


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

.zc_how{
	position: relative;
	padding: var(--zc-section-pad) 0;
	/* lady photo fills the section; its left side holds the steps */
	background: url('../assets/2026/zc_lady_1.jpg') right center / cover no-repeat, #FFF;
}

/* white fade from the left, reaching well past the steps so they always read cleanly */
.zc_how::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #FFF 0%, #FFF 35%, rgba(255, 255, 255, 0.85) 48%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 72%);
	pointer-events: none;
}

.zc_how_grid{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
	min-height: 520px;
}

/* h2.zc_section_title beats the site's h2.core size/margin */
h2.zc_section_title{
	margin-bottom: 20px;
	font-size: clamp(32px, 3vw, 42px);
	line-height: 1.15;
}

.zc_how_cta{
	margin: 32px 0 0;
}

/* desktop: the photo is the section background, so the media column is just space */
.zc_how_image{
	display: none;
}


/* ---------- ZC Pain points ---------- */

.zc_pain{
	padding: var(--zc-section-pad) 0;
	background: radial-gradient(circle at 50% 120%, #69287E, #2c1436);
	color: #FFF;
}

.zc_pain_title{
	max-width: 900px;
	margin: 0 auto 20px;
	color: #FFF;
	font-family: var(--font-primary-bold);
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.2;
	text-align: center;
}

.zc_pain_lead{
	margin-bottom: 40px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 18px;
	text-align: center;
}

.zc_pain_grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 900px;
	margin: 0 auto 48px;
}

.zc_pain_item{
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
}

.zc_pain .zc_icon{
	background: var(--zc-gold-tint);
	color: var(--colour-secondary);
}

.zc_pain_item p{
	color: rgba(255, 255, 255, 0.85);
	font-size: 16px;
	line-height: 1.45;
}

.zc_pain_item strong{
	color: #FFF;
	font-family: var(--font-primary-bold);
	font-weight: normal;
}

.zc_pain_close{
	max-width: 760px;
	margin: 0 auto;
	color: #FFF;
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.45;
	text-align: center;
}


/* ---------- ZC Final CTA ---------- */

.zc_cta{
	padding: 72px 0;
	background: var(--colour-secondary);
}

.zc_cta_row{
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.zc_cta_title{
	margin: 0;
	color: var(--colour-primary);
	font-family: var(--font-primary-bold);
	font-size: clamp(32px, 3.6vw, 46px);
	line-height: 1.1;
}

.zc_cta_side p{
	margin-bottom: 20px;
	color: var(--colour-primarydark);
	font-size: 18px;
	line-height: 1.5;
}

.zc_cta .btn_large.zc_btn_dark{
	margin: 0;
	background-color: var(--colour-primarydark);
	color: #FFF !important;
}

.zc_cta .btn_large.zc_btn_dark:hover{
	background-color: var(--colour-primary);
}


/* ---------- ZC Video modal ---------- */

.zc_video_modal{
	position: fixed;
	inset: 0;
	z-index: 1000; /* above #nav (998) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.zc_video_modal[hidden]{
	display: none;
}

.zc_video_backdrop{
	position: absolute;
	inset: 0;
	background: rgba(20, 6, 26, 0.85);
	animation: zcFade .25s ease;
}

.zc_video_dialog{
	position: relative;
	width: 100%;
	max-width: 960px;
	animation: zcFade .25s ease;
}

.zc_video_frame{
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
}

.zc_video_frame iframe{
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.zc_video_close{
	position: absolute;
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--colour-secondary);
	color: var(--colour-primary);
	font-size: 26px;
	line-height: 40px;
	cursor: pointer;
}

body.zc_modal_open{
	overflow: hidden;
}

@keyframes zcFade{
	from{ opacity: 0; }
	to{ opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
	.zc_video_backdrop,
	.zc_video_dialog{ animation: none; }
	.zc_watch_icon{ transition: none; }
}


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

@media only screen and (max-width: 1200px) {

	.zc_hero_grid{
		grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
		grid-template-areas:
			"copy form"
			"phone form";
		align-items: start;
	}

	.zc_hero_copy{ padding-top: 20px; }

	.zc_how_grid{ grid-template-columns: minmax(0, 470px) minmax(0, 1fr); }
	.zc_how::before{ background: linear-gradient(90deg, #FFF 0%, #FFF 40%, rgba(255, 255, 255, 0.85) 52%, rgba(255, 255, 255, 0.4) 64%, rgba(255, 255, 255, 0) 76%); }

	.zc_hero_phone{
		max-width: 540px;
		margin: 0 auto;
		transform: none;
	}
}

@media only screen and (max-width: 900px) {

	.zc_page{ --zc-section-pad: 64px; }

	#home-hero.zc_hero{ padding: 120px 0 56px; }

	.zc_hero_grid{
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "copy" "form" "phone";
		gap: 28px;
	}

	.zc_hero_copy{ padding-top: 0; text-align: center; }
	.zc_hero_intro{ margin-left: auto; margin-right: auto; }
	.zc_hero_actions{ justify-content: center; }

	.zc_hero_form{ max-width: 520px; width: 100%; margin: 0 auto; }

	.zc_hero_phone{ max-width: 460px; margin: 0 auto; }

	.zc_trust_row{
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		max-width: 360px;
	}

	.zc_trust_item{ justify-content: flex-start; }

	.zc_how_grid{
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	/* mobile: drop the background photo and show it as a cropped image above the steps */
	.zc_how{ background: #FFF; }
	.zc_how::before{ display: none; }
	.zc_how_grid{ min-height: 0; }

	.zc_how_media{ order: -1; }

	.zc_how_image{
		display: block;
		width: 100%;
		aspect-ratio: 16 / 10;
		border-radius: 16px;
		background: url('../assets/2026/zc_lady_1.jpg') 82% center / cover no-repeat;
	}

	.zc_pain_grid{ grid-template-columns: minmax(0, 1fr); }

	.zc_cta{ padding: 56px 0; }

	.zc_cta_row{
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		text-align: center;
	}
}

@media only screen and (max-width: 480px) {

	.zc_page{ --zc-section-pad: 48px; }

	#main_form_con.zc_form_card{ padding: 22px; }

	.zc_eyebrow{ font-size: 10px; letter-spacing: 0.04em; padding: 6px 12px; }

	.zc_hero_actions .btn_large{ width: 100%; justify-content: space-between; }

	.zc_pain_item{ padding: 18px; }
}