/*
 * The landing page document (templates/landing-page.php): one narrow centred
 * column, phone first. Type and colour come from the theme stylesheet, which
 * wp_head() still loads; the buttons are .gdv-ui-btn from gdv-public-ui.
 * Nothing here sets a colour except the footer link, which takes the theme's
 * body text token (#444444 on white, 9.7:1).
 */
.gdv-lp-page {
	box-sizing: border-box;
	width: 100%;
	max-width: 30rem;
	margin: 0 auto;
	padding: 1.5rem 1rem 2.5rem;
	text-align: center;
}

.gdv-lp-brand {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.gdv-lp-brand-logo {
	display: block;
	line-height: 0;
}

/* The image is whatever gdv-seo holds as default image, logo-shaped or wide,
   so it is bounded on both sides and keeps its own ratio. */
.gdv-lp-brand img.gdv-lp-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 16rem;
	max-height: 8rem;
}

.gdv-lp-brand-name {
	font-size: 1.25rem;
	font-weight: 600;
	text-decoration: none;
}

.gdv-lp-page h1.gdv-lp-title {
	margin: 0 0 0.75rem;
}

.gdv-lp-intro {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 1.75rem;
}

.gdv-lp-group {
	margin-bottom: 1.75rem;
}

.gdv-lp-page h2.gdv-lp-heading {
	margin: 0 0 1rem;
}

/* Each .gdv-ui-btn is as wide as its label and centres itself; the column
   only spaces them. */
.gdv-lp-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.gdv-lp-footer {
	margin-top: 2.5rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.gdv-lp-footer a {
	color: var(--text-color, #444444);
}