/*
The page for visitors who are not signed in.

Adapted from gdv-cowrite's public.css, block "Landing page". Its own file because
gdv-chat.css loads only for a signed-in reader. Loaded on this one page only.

The tokens the landing reads, with gdv-cowrite's light and dark values, declared on
the landing's own root so nothing here depends on another stylesheet. The site's
own fonts throughout: Lato for text, Cantata One for headings and the numbers in
circles, regular weight only, because that is the only weight the theme ships.
*/

.gdv-chat-landing {
	--gdv-chat-landing-bg:             #ffffff;
	--gdv-chat-landing-bg-alt:         #f8f7f5;
	--gdv-chat-landing-text:           #1e1e1e;
	--gdv-chat-landing-text-secondary: #2c3338;
	--gdv-chat-landing-text-muted:     #50575e;
	--gdv-chat-landing-border:         #c3c4c7;
	--gdv-chat-landing-border-light:   #dcdcde;
	--gdv-chat-landing-accent:         #e1ad4e;
	--gdv-chat-landing-success-strong: #1d3d3e;
	/* What sits on the two coloured circles. Dark on the gold in both schemes
	   (8.17:1 light, 9.36:1 dark); white on the gold is 2.04:1. On the green the
	   page background: white on #1d3d3e is 11.74:1, #1e1e1e on #8ec8c9 is 8.94:1. */
	--gdv-chat-landing-on-accent:      #1e1e1e;

	font-family: 'Lato', sans-serif;
	line-height: 1.6;
	color: var(--gdv-chat-landing-text);
	width: 100%;
	overflow-x: hidden;
	/* No margin under it: the page's FAQ, drawn next, brings its own. */
	margin-bottom: 0;
}

@media (prefers-color-scheme: dark) {
	.gdv-chat-landing {
		--gdv-chat-landing-bg:             #1e1e1e;
		--gdv-chat-landing-bg-alt:         #262420;
		--gdv-chat-landing-text:           #f0f0f0;
		--gdv-chat-landing-text-secondary: #d4d4d4;
		--gdv-chat-landing-text-muted:     #a3a3a3;
		--gdv-chat-landing-border:         #3d3d3d;
		--gdv-chat-landing-border-light:   #333333;
		--gdv-chat-landing-accent:         #e8bc60;
		--gdv-chat-landing-success-strong: #8ec8c9;
	}

}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.gdv-chat-landing-hero {
	/* Fixed in both schemes: it is what shows until the photo loads, under a
	   dark overlay either way. */
	background-color: #1d3d3e;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	min-height: 70vh;
	min-height: 70dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

.gdv-chat-landing-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.40),
		rgba(0, 0, 0, 0.60)
	);
}

.gdv-chat-landing-hero::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 60px;
	background: var(--gdv-chat-landing-bg);
	clip-path: ellipse(55% 100% at 50% 100%);
}

/* The bottom padding is the curve (60px) plus the credit line and a gap. On a
   phone the credit moves into the curve, and the padding is the curve and a gap. */
.gdv-chat-landing-hero__inner {
	position: relative;
	max-width: 800px;
	padding: 3rem 2rem 6.5rem;
}

/*
Element-qualified and three classes deep: the theme paints h1 gold and centred
at (0,0,1) and h2 green at (0,0,1), and h1, h2, h3, h4, h5 sets font-family,
letter-spacing and line-height separately, so each of those is restated.
*/
.gdv-chat-landing .gdv-chat-landing-hero__inner h1.gdv-chat-landing-hero__title {
	font-family: 'Cantata One', Georgia, serif;
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: normal;
	color: #fff;
	text-align: center;
	margin: 0 0 1.25rem;
}

.gdv-chat-landing-hero__subtitle {
	font-size: clamp(1rem, 2vw, 1.35rem);
	font-weight: 400;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.85);
	margin: 1.5rem auto 0;
	max-width: 800px;
}

/* ── Photo credit ──────────────────────────────────────────────────────── */

/*
In the bottom right corner of the section whose photo it names. Element-qualified
because the theme styles bare p and a. On the hero it sits 4.5rem up, above the
60px white curve at every point of its width (2.25rem put it on the curve at the
right edge), in the subtitle's white over the dark overlay; the hero's bottom
padding keeps the subtitle clear of it at every width. On a phone the hero's moves
to the end of the join block, or into the curve under the photo when the page has
no join block (see the 768px block). On the highlights, over the
pale overlay, in the muted text colour.
*/
.gdv-chat-landing p.gdv-chat-landing-credit {
	position: absolute;
	right: 1rem;
	bottom: 4.5rem;
	z-index: 1;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
}

.gdv-chat-landing .gdv-chat-landing-features p.gdv-chat-landing-credit {
	bottom: 0.75rem;
	color: var(--gdv-chat-landing-text-muted);
}

.gdv-chat-landing p.gdv-chat-landing-credit a {
	color: inherit;
	text-decoration: underline;
}

/* The hero's credit for a phone, at the end of the join block. Hidden above 768px,
   where the copy on the photo shows (see the 768px block). */
.gdv-chat-landing p.gdv-chat-landing-credit--under-join {
	display: none;
	position: static;
	margin: 1.5rem 0 0;
	text-align: right;
	color: var(--gdv-chat-landing-text-muted);
}

/* ── Sections (shared) ─────────────────────────────────────────────────── */

.gdv-chat-landing-section {
	padding: clamp(2.5rem, 5vw, 4rem) 2rem;
	background: var(--gdv-chat-landing-bg);
	position: relative;
}

.gdv-chat-landing-section--alt {
	background: var(--gdv-chat-landing-bg-alt);
}

/* Soft gradient fade at top of alt sections */
.gdv-chat-landing-section--alt::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40px;
	background: linear-gradient(to bottom, var(--gdv-chat-landing-bg), var(--gdv-chat-landing-bg-alt));
	pointer-events: none;
}

.gdv-chat-landing-section__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.gdv-chat-landing .gdv-chat-landing-section__inner h2.gdv-chat-landing-section__heading {
	font-family: 'Cantata One', Georgia, serif;
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: normal;
	text-align: center;
	margin: 0 0 3rem;
	color: var(--gdv-chat-landing-text);
}

/*
The join block, drawn by [gdv_chat_join] with gdv-public-ui's own classes. A
short section: it is one panel between two full sections, and with a full
section's padding of its own it sat in twice the air the others have.
*/
.gdv-chat-landing-section.gdv-chat-landing-join {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.gdv-chat-landing-join .gdv-chat-landing-section__inner {
	max-width: 800px;
}

/* ── Grid ──────────────────────────────────────────────────────────────── */

.gdv-chat-landing-grid {
	display: grid;
	gap: 2rem;
}

.gdv-chat-landing-grid--1 {
	grid-template-columns: 1fr;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.gdv-chat-landing-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.gdv-chat-landing-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.gdv-chat-landing-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* ── Cards (highlights) ────────────────────────────────────────────────── */

/* GSAP owns transform and opacity through inline styles, so hover uses box-shadow and filter only. */
.gdv-chat-landing-card {
	background: var(--gdv-chat-landing-bg);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	padding: 2.5rem 2rem;
	text-align: center;
	transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.gdv-chat-landing-card:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	filter: brightness(0.97);
}

/* Highlights on a photo */
.gdv-chat-landing-features--image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: relative;
}

.gdv-chat-landing-features--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.82);
}

@media (prefers-color-scheme: dark) {
	.gdv-chat-landing-features--image::before {
		background: rgba(30, 30, 30, 0.85);
	}

}

.gdv-chat-landing-features--image > .gdv-chat-landing-section__inner {
	position: relative;
}

/* Fixed attachment is not supported on iOS */
@media (max-width: 768px) {
	.gdv-chat-landing-features--image {
		background-attachment: scroll;
	}

}

.gdv-chat-landing-card__icon {
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 auto 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--gdv-chat-landing-accent);
}

/* Element-qualified: Icons::get() sets width and height to 1em on the svg. */
.gdv-chat-landing-card__icon svg.gdv-chat-landing-card__svg {
	width: 2rem;
	height: 2rem;
	color: var(--gdv-chat-landing-on-accent);
}

/*
Three classes and the element: the theme's h3:not(.widget-title):not(.extract-title)
is (0,2,1) and paints gold, centred, 1.35em, and repeats the same selector for
dark mode. This is (0,3,1) in both places, so stylesheet order cannot decide it.
*/
.gdv-chat-landing .gdv-chat-landing-item h3.gdv-chat-landing-card__title {
	font-family: 'Cantata One', Georgia, serif;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: center;
	margin: 0 0 0.75rem;
	color: var(--gdv-chat-landing-text);
}

@media (prefers-color-scheme: dark) {
	.gdv-chat-landing .gdv-chat-landing-item h3.gdv-chat-landing-card__title {
		color: var(--gdv-chat-landing-text);
	}

}

.gdv-chat-landing-card__text {
	font-size: 1rem;
	font-weight: 400;
	color: var(--gdv-chat-landing-text-muted);
	margin: 0;
	line-height: 1.6;
}

/* A link he typed into a description. Element-qualified because the theme styles
   bare a; the dark green is 11.74:1 on white and, in dark mode, 8.94:1 on the
   page background, where the theme's gold underline would be 2.04:1. */
.gdv-chat-landing p.gdv-chat-landing-card__text a {
	color: var(--gdv-chat-landing-success-strong);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 0.0625em;
}

/* ── Testimonials ──────────────────────────────────────────────────────── */

.gdv-chat-landing-testimonial {
	background: var(--gdv-chat-landing-bg);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	padding: 2.5rem 2rem;
	text-align: left;
	display: flex;
	flex-direction: column;
}

.gdv-chat-landing-testimonial__avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 1rem;
}

.gdv-chat-landing-testimonial__question {
	font-style: italic;
	font-size: 0.95rem;
	color: var(--gdv-chat-landing-text-muted);
	margin: 0 0 0.75rem;
	text-align: center;
}

/* Element-qualified: the theme styles bare blockquote with its own type,
   padding, side margin and a large ::before. */
.gdv-chat-landing .gdv-chat-landing-testimonial blockquote.gdv-chat-landing-testimonial__answer {
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	font-style: normal;
	line-height: 1.6;
	color: var(--gdv-chat-landing-text);
	margin: 0 0 1rem;
	padding: 0;
	border: none;
	background: none;
	quotes: none;
}

.gdv-chat-landing .gdv-chat-landing-testimonial blockquote.gdv-chat-landing-testimonial__answer::before,
.gdv-chat-landing .gdv-chat-landing-testimonial blockquote.gdv-chat-landing-testimonial__answer::after {
	content: none;
}

.gdv-chat-landing-testimonial__name {
	font-size: 0.9375rem;
	font-weight: 400;
	font-style: normal;
	color: var(--gdv-chat-landing-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
	margin-top: auto;
}

/* ── Roles ─────────────────────────────────────────────────────────────── */

.gdv-chat-landing-role {
	text-align: center;
	padding: 2rem 1.5rem;
	border-radius: 12px;
	background: var(--gdv-chat-landing-bg);
	border: 1px solid var(--gdv-chat-landing-border);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gdv-chat-landing-role:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.gdv-chat-landing-role__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--gdv-chat-landing-accent);
	color: var(--gdv-chat-landing-on-accent);
	font-family: 'Cantata One', Georgia, serif;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1;
	padding-bottom: 0.15em;
}

.gdv-chat-landing-role .gdv-chat-landing-card__text {
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* ── Call to action ────────────────────────────────────────────────────── */

.gdv-chat-landing-cta {
	text-align: center;
}

.gdv-chat-landing-cta__text {
	font-family: 'Cantata One', Georgia, serif;
	font-size: clamp(1.25rem, 2.5vw, 1.85rem);
	font-weight: 400;
	line-height: 1.3;
	margin: 0 0 1.5rem;
	color: var(--gdv-chat-landing-text);
}

/* ── Steps (how it works) ──────────────────────────────────────────────── */

.gdv-chat-landing-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	position: relative;
}

/* Connector line between steps */
.gdv-chat-landing-steps-grid::before {
	content: "";
	position: absolute;
	top: 3.5rem;
	left: calc(16.67% + 1rem);
	right: calc(16.67% + 1rem);
	height: 2px;
	background: var(--gdv-chat-landing-border-light);
	z-index: 0;
}

.gdv-chat-landing-step {
	background: var(--gdv-chat-landing-bg);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	padding: 2.5rem 2rem;
	text-align: center;
	position: relative;
	z-index: 1;
	transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.gdv-chat-landing-step:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	filter: brightness(0.97);
}

.gdv-chat-landing-step__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--gdv-chat-landing-success-strong);
	color: var(--gdv-chat-landing-bg);
	font-family: 'Cantata One', Georgia, serif;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1;
	padding-bottom: 0.15em;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 992px) {
	.gdv-chat-landing-hero {
		min-height: 50vh;
		min-height: 50dvh;
	}

	.gdv-chat-landing-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 768px) {
	.gdv-chat-landing-hero__inner {
		padding: 2.5rem 1.5rem 4.5rem;
	}

	/*
	The hero's credit as a caption under the photo, in the white curve and the
	muted text colour. Over the photo it had the subtitle's white at nearly the
	subtitle's size, right under it, and read as a third line of the headline; it
	cannot be smaller or fainter than it was. Held 0.25rem off the bottom so its one
	line stays inside the curve at the right edge at every phone width, and given
	the full width so a long name wraps late rather than climbing onto the photo.
	*/
	.gdv-chat-landing .gdv-chat-landing-hero p.gdv-chat-landing-credit {
		left: 1rem;
		bottom: 0.25rem;
		text-align: right;
		color: var(--gdv-chat-landing-text-muted);
	}

	/* With a join block on the page, the credit leaves the curve for the end of
	   that block. */
	.gdv-chat-landing .gdv-chat-landing-hero p.gdv-chat-landing-credit--on-photo {
		display: none;
	}

	.gdv-chat-landing p.gdv-chat-landing-credit--under-join {
		display: block;
	}

	.gdv-chat-landing-section {
		padding: 3.5rem 1.5rem;
	}

	/* Three columns become one on tablets and below */
	.gdv-chat-landing-grid--3,
	.gdv-chat-landing-steps-grid {
		grid-template-columns: 1fr;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}

	.gdv-chat-landing-steps-grid::before {
		display: none;
	}

	/* Role cards: number and title in a row, description below */
	.gdv-chat-landing-role {
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 0 0.75rem;
	}

	.gdv-chat-landing-role__number {
		margin: 0;
		flex-shrink: 0;
		width: 2rem;
		height: 2rem;
		font-size: 1rem;
	}

	.gdv-chat-landing .gdv-chat-landing-role h3.gdv-chat-landing-card__title {
		text-align: center;
		margin-bottom: 0;
		line-height: 2rem;
		flex: 1 1 0;
		min-width: 0;
	}

	.gdv-chat-landing-role .gdv-chat-landing-card__text {
		text-align: center;
		flex-basis: 100%;
		margin-top: 0.75rem;
	}

	.gdv-chat-landing .gdv-chat-landing-section__inner h2.gdv-chat-landing-section__heading {
		font-size: clamp(1.65rem, 5vw, 2rem);
		margin-bottom: 2rem;
	}

	.gdv-chat-landing-card__text {
		font-size: 1.05rem;
	}

	.gdv-chat-landing-role .gdv-chat-landing-card__text {
		font-size: 1rem;
	}

	/* Step cards: number and title in a row, description below */
	.gdv-chat-landing-step {
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 0 0.75rem;
	}

	.gdv-chat-landing-step__number {
		margin: 0;
		flex-shrink: 0;
		width: 2rem;
		height: 2rem;
		font-size: 1rem;
	}

	.gdv-chat-landing .gdv-chat-landing-step h3.gdv-chat-landing-card__title {
		text-align: center;
		margin-bottom: 0;
		line-height: 2rem;
		flex: 1 1 0;
		min-width: 0;
	}

	.gdv-chat-landing-step .gdv-chat-landing-card__text {
		text-align: center;
		flex-basis: 100%;
		margin-top: 0.75rem;
	}

	.gdv-chat-landing-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 480px) {
	.gdv-chat-landing-hero {
		min-height: 40vh;
		min-height: 40dvh;
	}

	.gdv-chat-landing-hero__inner {
		padding: 2rem 1rem 4.5rem;
	}

	.gdv-chat-landing-section {
		padding: 2.5rem 1rem;
	}

	.gdv-chat-landing-grid--2,
	.gdv-chat-landing-grid--3,
	.gdv-chat-landing-grid--4 {
		grid-template-columns: 1fr;
		max-width: none;
	}

	.gdv-chat-landing-steps-grid {
		grid-template-columns: 1fr;
		max-width: none;
	}

	.gdv-chat-landing-cta__text {
		font-size: 1.15rem;
	}

	.gdv-chat-landing-testimonial {
		padding: 2rem 1.5rem;
	}

}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.gdv-chat-landing-card,
	.gdv-chat-landing-step,
	.gdv-chat-landing-role {
		transition: none;
	}

	.gdv-chat-landing-card:hover,
	.gdv-chat-landing-step:hover {
		filter: none;
	}

	.gdv-chat-landing-role:hover {
		transform: none;
	}

}