/* ==========================================================================
   LobbyVPN — inner page sections
   Styles for the widgets used outside the landing page: lvpn-page-hero,
   lvpn-post-grid and lvpn-contact.
   ========================================================================== */

/* ==========================================================================
   Page header — lvpn-page-hero
   ========================================================================== */

.lvpn-page-hero {
	padding-block: 56px 32px;
	background-color: var(--lvpn-black);
}

.lvpn-page-hero__inner {
	width: 100%;
	max-width: 820px;
	margin-inline: auto;
	padding-inline: 20px;
	text-align: center;
}

.lvpn-page-hero__logo {
	margin-bottom: 20px;
}

.lvpn-page-hero__logo img {
	display: inline-block;
	height: 56px;
	width: auto;
}

.lvpn-page-hero__eyebrow {
	margin-bottom: 10px;
	color: var(--lvpn-green-soft);
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lvpn-page-hero__title {
	color: #fff;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	text-wrap: balance;
}

.lvpn-page-hero__subtitle {
	max-width: 640px;
	margin-inline: auto;
	margin-top: 14px;
	color: var(--lvpn-text-quiet);
	font-size: 16px;
	line-height: 1.65;
}

.lvpn-page-hero__inner[style*='left'] .lvpn-page-hero__subtitle,
.lvpn-page-hero__inner[style*='left'] .lvpn-page-hero__title {
	margin-inline: 0;
}

/* --------------------------------------------------------------------------
   Split header — text beside an image

   Only when a side image is set. Below 1024 the image drops under the text,
   because a 46% column would leave the headline setting in a gutter.
   -------------------------------------------------------------------------- */

.lvpn-page-hero--split .lvpn-page-hero__inner {
	max-width: 1200px;
	text-align: left;
}

.lvpn-page-hero--split .lvpn-page-hero__title,
.lvpn-page-hero--split .lvpn-page-hero__subtitle {
	margin-inline: 0;
}

.lvpn-page-hero__actions {
	margin: 24px 0 0;
}

.lvpn-page-hero--split .lvpn-page-hero__media {
	margin-top: 32px;
}

.lvpn-page-hero--split .lvpn-page-hero__media img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: 70% center;
	border-radius: var(--lvpn-radius-xl);
	border: 1px solid var(--lvpn-border-dim);
}

@media (min-width: 640px) {
	.lvpn-page-hero {
		padding-block: 72px 40px;
	}

	.lvpn-page-hero__title {
		font-size: 42px;
	}

	.lvpn-page-hero__logo img {
		height: 64px;
	}
}

@media (min-width: 1024px) {
	.lvpn-page-hero__title {
		font-size: 52px;
	}

	.lvpn-page-hero__subtitle {
		font-size: 18px;
	}

	.lvpn-page-hero--split {
		padding-block: 88px 72px;
	}

	.lvpn-page-hero--split .lvpn-page-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
		align-items: center;
		gap: 48px;
	}

	.lvpn-page-hero--split .lvpn-page-hero__media {
		margin-top: 0;
	}

	.lvpn-page-hero--split .lvpn-page-hero__media img {
		height: 340px;
		object-position: center;
	}
}

/* ==========================================================================
   Post grid — lvpn-post-grid
   Card styles live in blog.css because archives and search reuse them.
   ========================================================================== */

.elementor-widget-lvpn-post-grid {
	display: block;
	width: 100%;
	padding-block: 8px 72px;
	background-color: var(--lvpn-black);
}

.elementor-widget-lvpn-post-grid > .elementor-widget-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
}

.lvpn-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

@media (min-width: 1024px) {
	.elementor-widget-lvpn-post-grid .lvpn-archive__grid {
		grid-template-columns: repeat(var(--lvpn-cols, 3), minmax(0, 1fr));
	}
}

/* ==========================================================================
   Contact — lvpn-contact
   ========================================================================== */

/*
 * Frosted glass needs something behind it.
 *
 * `backdrop-filter` blurs whatever is painted underneath — over a flat black
 * page that is nothing, and the cards would read as plain dark grey. These two
 * soft brand-coloured pools give the blur something to pick up, so the cards
 * actually look like glass. They sit behind the content and never intercept
 * clicks.
 */
.lvpn-contact {
	position: relative;
	isolation: isolate;
	padding-block: 56px 80px;
	background-color: var(--lvpn-black);
}

.lvpn-contact::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(46rem 26rem at 12% 12%, rgba(98, 255, 140, 0.13), transparent 60%),
		radial-gradient(38rem 24rem at 88% 78%, rgba(54, 211, 255, 0.11), transparent 62%);
}

.lvpn-contact__inner {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
}

.lvpn-contact__intro {
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: 48px;
	text-align: center;
}

.lvpn-contact__title {
	margin-bottom: 14px;
	color: var(--lvpn-green-cta);
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	text-wrap: balance;
}

.lvpn-contact__subtitle {
	color: var(--lvpn-text-quiet);
	font-size: 16px;
	line-height: 1.65;
}

.lvpn-contact__subtitle strong {
	color: #fff;
}

.lvpn-contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

.lvpn-contact__grid > * {
	min-width: 0;
}

.lvpn-contact__aside-title {
	margin-bottom: 16px;
	color: #fff;
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
}

.lvpn-contact__methods {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lvpn-contact__method {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--lvpn-glass-border);
	border-radius: var(--lvpn-radius-lg);
	background-color: var(--lvpn-glass-bg);
	backdrop-filter: var(--lvpn-glass-blur);
	-webkit-backdrop-filter: var(--lvpn-glass-blur);
	/* Hairline along the top edge — what sells a pane of glass. */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
	transition: border-color 0.2s ease, background-color 0.2s ease,
		transform 0.2s ease;
}

.lvpn-contact__method:hover {
	border-color: var(--lvpn-green-review);
	background-color: var(--lvpn-glass-bg-strong);
	transform: translateY(-2px);
}

.lvpn-contact__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: var(--lvpn-radius-lg);
	background-color: rgba(98, 255, 140, 0.12);
	color: var(--lvpn-green-soft);
}

/*
 * Each icon declares its own fill/stroke — the mail and clock glyphs are
 * stroke-based — so only the colour is set here. Forcing `fill: currentColor`
 * turned the outlined envelope into a solid block.
 */
.lvpn-contact__icon svg {
	width: 20px;
	height: 20px;
}

.lvpn-contact__method-body {
	min-width: 0;
}

.lvpn-contact__method-label {
	margin-bottom: 4px;
	color: var(--lvpn-green-soft);
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lvpn-contact__method-line {
	color: var(--lvpn-gray-300);
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.lvpn-contact__method-line a {
	color: var(--lvpn-gray-300);
	text-decoration: none;
	transition: color 0.2s ease;
}

.lvpn-contact__method-line a:hover,
.lvpn-contact__method-line a:focus {
	color: var(--lvpn-green-soft);
}

.lvpn-contact__social {
	margin-top: 32px;
}

.lvpn-contact__card {
	padding: 24px;
	border: 1px solid rgba(98, 255, 140, 0.45);
	border-radius: var(--lvpn-radius-xl);
	background-color: var(--lvpn-glass-bg);
	backdrop-filter: var(--lvpn-glass-blur);
	-webkit-backdrop-filter: var(--lvpn-glass-blur);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 24px 60px -30px rgba(0, 0, 0, 0.9);
}

.lvpn-contact__card-title {
	margin-bottom: 20px;
	color: #fff;
	font-size: 22px;
	line-height: 30px;
	font-weight: 700;
}

@media (min-width: 640px) {
	.lvpn-contact__title {
		font-size: 40px;
	}

	.lvpn-contact__card {
		padding: 32px;
	}
}

@media (min-width: 1024px) {
	.lvpn-contact__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 40px;
	}
}

/* --------------------------------------------------------------------------
   Fluent Forms inside the contact card

   The form markup comes from the plugin, so it is restyled here rather than
   rebuilt. Selectors are scoped to the card so other forms are untouched.
   -------------------------------------------------------------------------- */

.lvpn-contact__form .fluentform .ff-el-group {
	margin-bottom: 16px;
}

.lvpn-contact__form .fluentform .ff-el-input--label label {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.lvpn-contact__form .fluentform input:not([type='submit']):not([type='checkbox']):not([type='radio']),
.lvpn-contact__form .fluentform textarea,
.lvpn-contact__form .fluentform select {
	width: 100%;
	padding: 12px 16px;
	background-color: var(--lvpn-surface-3);
	border: 1px solid var(--lvpn-border-dim);
	border-radius: var(--lvpn-radius-lg);
	color: #fff;
	font-family: var(--lvpn-font);
	font-size: 15px;
	line-height: 1.5;
	box-shadow: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lvpn-contact__form .fluentform input::placeholder,
.lvpn-contact__form .fluentform textarea::placeholder {
	color: var(--lvpn-gray-500);
}

.lvpn-contact__form .fluentform input:not([type='submit']):focus,
.lvpn-contact__form .fluentform textarea:focus,
.lvpn-contact__form .fluentform select:focus {
	outline: none;
	border-color: var(--lvpn-green);
	background-color: var(--lvpn-gray-900);
}

.lvpn-contact__form .fluentform textarea {
	min-height: 140px;
	resize: vertical;
}

/*
 * Fluent Forms ships `form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)`
 * at specificity (0,3,1). The extra `.lvpn-contact__card` ancestor takes ours to
 * (0,4,1) so it wins for any form id, without `!important`.
 */
.lvpn-contact__card .lvpn-contact__form .fluentform .ff-btn-submit,
.lvpn-contact__card .lvpn-contact__form .fluentform button[type='submit'] {
	width: 100%;
	padding: 14px 24px;
	background-color: var(--lvpn-green-lime);
	border: 0;
	border-radius: var(--lvpn-radius-lg);
	color: #000;
	font-family: var(--lvpn-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.lvpn-contact__card .lvpn-contact__form .fluentform .ff-btn-submit:hover,
.lvpn-contact__card .lvpn-contact__form .fluentform button[type='submit']:hover {
	background-color: var(--lvpn-green-soft);
	transform: translateY(-1px);
}

.lvpn-contact__form .fluentform .ff-el-is-error input,
.lvpn-contact__form .fluentform .ff-el-is-error textarea {
	border-color: #ff8080;
}

.lvpn-contact__form .fluentform .error,
.lvpn-contact__form .fluentform .text-danger {
	color: #ff8080;
	font-size: 13px;
}

.lvpn-contact__form .ff-message-success {
	padding: 16px;
	border: 1px solid var(--lvpn-green-review);
	border-radius: var(--lvpn-radius-lg);
	background-color: rgba(98, 255, 140, 0.1);
	color: var(--lvpn-green-soft);
}

/* Same specificity story for the fields and their labels. */
/* The fields sit on the glass, so they are translucent too — a solid grey fill
   would look pasted on. */
.lvpn-contact__card .lvpn-contact__form .fluentform input:not([type='submit']):not([type='checkbox']):not([type='radio']),
.lvpn-contact__card .lvpn-contact__form .fluentform textarea,
.lvpn-contact__card .lvpn-contact__form .fluentform select {
	background-color: rgba(255, 255, 255, 0.05);
	border-color: var(--lvpn-glass-border);
	color: #fff;
}

/*
 * The three `:not()` attribute selectors above each count as a class, putting the
 * rest state at (0,6,1). This focus rule must carry the same three or it lands at
 * (0,5,1) and loses — the field would stay at its resting fill while focused.
 */
.lvpn-contact__card .lvpn-contact__form .fluentform input:not([type='submit']):not([type='checkbox']):not([type='radio']):focus,
.lvpn-contact__card .lvpn-contact__form .fluentform textarea:focus,
.lvpn-contact__card .lvpn-contact__form .fluentform select:focus {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--lvpn-green);
}

/*
 * Safari before 18 and Firefox before 103 have no backdrop-filter. Fall back to
 * the original opaque surfaces rather than leaving nearly-transparent panels
 * floating over the glow, which would hurt contrast.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lvpn-contact__method,
	.lvpn-contact__card {
		background-color: var(--lvpn-surface-2);
	}

	.lvpn-contact__method:hover {
		background-color: var(--lvpn-surface-3);
	}

	.lvpn-contact__card .lvpn-contact__form .fluentform input:not([type='submit']):not([type='checkbox']):not([type='radio']),
	.lvpn-contact__card .lvpn-contact__form .fluentform textarea,
	.lvpn-contact__card .lvpn-contact__form .fluentform select {
		background-color: var(--lvpn-surface-3);
	}
}

.lvpn-contact__card .lvpn-contact__form .fluentform .ff-el-input--label label {
	color: #fff;
}

/* Fluent Forms renders its own asterisk next to a label that already ends in
   one, which reads as "Email * *". Hide the duplicate. */
.lvpn-contact__form .fluentform .ff-el-is-required.asterisk-right label:after {
	display: none;
}

/* ==========================================================================
   Legal pages — privacy policy, terms, refund policy, disclaimer

   One widget drives all four (`lvpn-legal`), so all four share this block.
   The structure follows the React routes: a branded header, an intro, numbered
   sections and a closing contact card, on a single dark sheet.
   ========================================================================== */

.lvpn-legal {
	--lvpn-legal-accent: var(--lvpn-green);
	--lvpn-legal-card-border: var(--lvpn-green-faq);

	background-color: var(--lvpn-black);
}

.lvpn-legal__inner {
	/* Legal text is read, not skimmed, so it gets the same measure discipline
	   as an article rather than the full page width. */
	max-width: 900px;
	margin-inline: auto;
	padding: 48px 20px 72px;
}

.lvpn-legal__card {
	padding: 32px 24px;
	border: 1px solid var(--lvpn-legal-card-border);
	border-radius: var(--lvpn-radius-lg);
	background-color: var(--lvpn-surface-1);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.lvpn-legal__head {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--lvpn-surface-4);
}

.lvpn-legal__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	color: #fff;
	font-family: var(--lvpn-font);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.lvpn-legal__emoji {
	font-size: 34px;
	line-height: 1;
}

.lvpn-legal__title {
	margin: 0 0 8px;
	color: var(--lvpn-legal-accent);
	font-family: var(--lvpn-font);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}

.lvpn-legal__updated {
	margin: 0;
	color: var(--lvpn-gray-400);
	font-size: 15px;
	line-height: 22px;
}

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */

.lvpn-legal__intro {
	margin-bottom: 32px;
	color: var(--lvpn-gray-300);
}

.lvpn-legal__sections {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.lvpn-legal__heading {
	margin: 0 0 16px;
	color: #fff;
	font-family: var(--lvpn-font);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
}

.lvpn-legal__body,
.lvpn-legal__intro {
	font-size: 16px;
	line-height: 1.75;
}

.lvpn-legal__body {
	color: var(--lvpn-gray-300);
}

/*
 * Same rule as the article body: bottom margins off, every gap owned by the
 * element below. A typed `p { margin: 0 }` would sit at (0,1,1) and beat the
 * (0,1,0) sibling rule, which is exactly how the paragraphs ended up touching
 * the first time.
 */
.lvpn-legal__body > *,
.lvpn-legal__intro > * {
	margin-block: 0;
}

.lvpn-legal__body > * + *,
.lvpn-legal__intro > * + * {
	margin-top: 16px;
}

.lvpn-legal__body ul,
.lvpn-legal__body ol {
	padding-left: 22px;
}

.lvpn-legal__body li + li {
	margin-top: 12px;
}

.lvpn-legal__body li::marker {
	color: var(--lvpn-legal-accent);
}

.lvpn-legal__body strong {
	color: #fff;
	font-weight: 600;
}

.lvpn-legal__body a {
	color: var(--lvpn-legal-accent);
	text-underline-offset: 3px;
}

.lvpn-legal__body a:hover,
.lvpn-legal__body a:focus {
	color: var(--lvpn-green-soft);
}

/*
 * The amber warning from the disclaimer's section 2. A control rather than
 * markup inside the WYSIWYG, so re-editing the section in TinyMCE cannot strip
 * the class off it.
 */
.lvpn-legal__callout {
	margin: 0 0 16px;
	padding: 16px;
	border-left: 4px solid #f0b429;
	background-color: rgba(240, 180, 41, 0.12);
	color: #f5d48a;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Closing contact card
   -------------------------------------------------------------------------- */

.lvpn-legal__contact-intro {
	margin: 0 0 16px;
	color: var(--lvpn-gray-300);
	font-size: 16px;
	line-height: 1.75;
}

.lvpn-legal__contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 24px;
	border: 1px solid var(--lvpn-legal-card-border);
	border-radius: var(--lvpn-radius-lg);
	background-color: var(--lvpn-surface-3);
	list-style: none;
}

.lvpn-legal__contact-item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.lvpn-legal__contact-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--lvpn-legal-accent);
}

.lvpn-legal__contact-link {
	min-width: 0;
	color: var(--lvpn-legal-accent);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	overflow-wrap: anywhere;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lvpn-legal__contact-link:hover,
.lvpn-legal__contact-link:focus {
	color: var(--lvpn-green-soft);
}

/* --------------------------------------------------------------------------
   Wider gutters once there is room
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.lvpn-legal__inner {
		padding-inline: 32px;
	}

	.lvpn-legal__card {
		padding: 48px;
	}

	.lvpn-legal__brand {
		font-size: 34px;
	}

	.lvpn-legal__emoji {
		font-size: 40px;
	}

	.lvpn-legal__title {
		font-size: 24px;
	}

	.lvpn-legal__heading {
		font-size: 20px;
	}
}

/* ==========================================================================
   White label page

   Two widgets: `lvpn-white-label` for the explainer, packages and inclusions,
   and `lvpn-lead-form` for the enquiry form. The page hero above them is the
   shared `lvpn-page-hero`.
   ========================================================================== */

/*
 * Each block is its own full-width band. Alternating backgrounds are the only
 * thing separating one section from the next on a page that is otherwise a
 * single sheet of black.
 */

.lvpn-wl__band--intro {
	background-color: var(--lvpn-surface-1);
	border-block: 1px solid rgba(255, 255, 255, 0.06);
}

.lvpn-wl__band--packages {
	background-color: var(--lvpn-black);
}

.lvpn-wl__inner {
	max-width: 1120px;
	margin-inline: auto;
	padding-block: 64px;
}

/* --------------------------------------------------------------------------
   Explainer — centred
   -------------------------------------------------------------------------- */

.lvpn-wl__block--intro {
	text-align: center;
}

.lvpn-wl__block--intro .lvpn-wl__lede {
	margin-inline: auto;
}

.lvpn-wl__title {
	margin: 0 0 16px;
	color: #fff;
	font-family: var(--lvpn-font);
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	text-wrap: balance;
}

.lvpn-wl__standfirst,
.lvpn-wl__note {
	margin: 0;
	color: var(--lvpn-gray-300);
	font-size: 17px;
	line-height: 1.75;
}

.lvpn-wl__standfirst {
	margin-bottom: 28px;
	max-width: 68ch;
}

.lvpn-wl__note {
	margin-top: 28px;
	max-width: 68ch;
}

.lvpn-wl__lede {
	max-width: 68ch;
	color: var(--lvpn-gray-300);
	font-size: 17px;
	line-height: 1.75;
}

.lvpn-wl__lede > * {
	margin-block: 0;
}

.lvpn-wl__lede > * + * {
	margin-top: 20px;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.lvpn-wl__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.lvpn-wl__card {
	padding: 26px;
	border: 1px solid var(--lvpn-border-dim);
	border-radius: var(--lvpn-radius-lg);
	background-color: var(--lvpn-surface-1);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.lvpn-wl__card:hover {
	border-color: var(--lvpn-green-faq);
	transform: translateY(-2px);
}

.lvpn-wl__card-title {
	margin: 0 0 10px;
	color: var(--lvpn-green-soft);
	font-family: var(--lvpn-font);
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
}

.lvpn-wl__card-text {
	margin: 0;
	color: var(--lvpn-gray-300);
	font-size: 16px;
	line-height: 1.7;
}

@media (min-width: 768px) {
	.lvpn-wl__inner {
		padding-block: 88px;
	}

	.lvpn-wl__title {
		font-size: 34px;
	}

	.lvpn-wl__cards--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Lead form section
   ========================================================================== */

.lvpn-lead {
	background-color: var(--lvpn-surface-1);
}

.lvpn-lead__inner {
	max-width: 1120px;
	margin-inline: auto;
	padding-block: 64px;
}

.lvpn-lead__head {
	margin-bottom: 32px;
	text-align: center;
}

.lvpn-lead__eyebrow {
	margin: 0 0 10px;
	color: var(--lvpn-green);
	font-family: var(--lvpn-font);
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lvpn-lead__title {
	margin: 0 0 14px;
	color: #fff;
	font-family: var(--lvpn-font);
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	text-wrap: balance;
}

.lvpn-lead__subtitle {
	max-width: 56ch;
	margin: 0 auto;
	color: var(--lvpn-gray-300);
	font-size: 17px;
	line-height: 1.7;
}

.lvpn-lead__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.lvpn-lead__card {
	padding: 28px 24px;
	border: 1px solid var(--lvpn-border-dim);
	border-radius: var(--lvpn-radius-xl);
	background-color: var(--lvpn-black);
}

/* --------------------------------------------------------------------------
   Side column — contact details, reasons, quick links
   -------------------------------------------------------------------------- */

.lvpn-lead__aside {
	display: grid;
	gap: 20px;
}

.lvpn-lead__panel {
	padding: 24px;
	border: 1px solid var(--lvpn-border-dim);
	border-radius: var(--lvpn-radius-xl);
	background-color: var(--lvpn-black);
}

.lvpn-lead__panel-title {
	margin: 0 0 16px;
	color: #fff;
	font-family: var(--lvpn-font);
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
}

.lvpn-lead__methods {
	display: grid;
	gap: 16px;
}

.lvpn-lead__method {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.lvpn-lead__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--lvpn-radius-md);
	background-color: var(--lvpn-surface-3);
	color: var(--lvpn-green-soft);
}

.lvpn-lead__icon svg {
	width: 17px;
	height: 17px;
}

.lvpn-lead__method-label {
	margin: 0 0 2px;
	color: var(--lvpn-text-muted);
	font-size: 12px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lvpn-lead__method-line {
	margin: 0;
	color: var(--lvpn-text-quiet);
	font-size: 15px;
	line-height: 24px;
	overflow-wrap: anywhere;
}

.lvpn-lead__method-line a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.lvpn-lead__method-line a:hover,
.lvpn-lead__method-line a:focus {
	color: var(--lvpn-green-soft);
}

.lvpn-lead__reasons {
	display: grid;
	gap: 12px;
}

.lvpn-lead__reason {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	color: var(--lvpn-gray-300);
	font-size: 15px;
	line-height: 24px;
}

.lvpn-lead__tick {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 3px;
	color: var(--lvpn-green-check);
}

.lvpn-lead__tick svg {
	width: 18px;
	height: 18px;
}

.lvpn-lead__links {
	display: grid;
	gap: 10px;
}

.lvpn-lead__links a {
	display: block;
	color: var(--lvpn-text-quiet);
	font-size: 15px;
	line-height: 24px;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.lvpn-lead__links a:hover,
.lvpn-lead__links a:focus {
	color: var(--lvpn-green-soft);
	transform: translateX(2px);
}

@media (min-width: 768px) {
	.lvpn-lead__inner {
		padding-block: 88px;
	}

	.lvpn-lead__title {
		font-size: 34px;
	}

	.lvpn-lead__card {
		padding: 36px;
	}
}

@media (min-width: 1024px) {
	.lvpn-lead__grid {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 32px;
	}
}

/* --------------------------------------------------------------------------
   Fluent Forms inside the lead card

   Same treatment as the contact form (D-019), scoped to this section so the two
   stay independent.
   -------------------------------------------------------------------------- */

.lvpn-lead__card .fluentform .ff-el-group {
	margin-bottom: 18px;
}

.lvpn-lead__card .fluentform .ff-el-input--label label {
	color: #fff;
	font-family: var(--lvpn-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.lvpn-lead__card .fluentform input:not([type='submit']):not([type='checkbox']):not([type='radio']),
.lvpn-lead__card .fluentform textarea,
.lvpn-lead__card .fluentform select {
	width: 100%;
	padding: 12px 16px;
	background-color: var(--lvpn-surface-2);
	border: 1px solid var(--lvpn-border-dim);
	border-radius: var(--lvpn-radius-md);
	color: #fff;
	font-family: var(--lvpn-font);
	font-size: 15px;
	line-height: 24px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lvpn-lead__card .fluentform input::placeholder,
.lvpn-lead__card .fluentform textarea::placeholder {
	color: var(--lvpn-text-meta);
}

/* Repeats every `:not()` so the specificity matches the resting rule (D-039). */
.lvpn-lead__card .fluentform input:not([type='submit']):not([type='checkbox']):not([type='radio']):focus,
.lvpn-lead__card .fluentform textarea:focus,
.lvpn-lead__card .fluentform select:focus {
	outline: none;
	border-color: var(--lvpn-green);
	background-color: var(--lvpn-surface-3);
}

.lvpn-lead__card .fluentform textarea {
	min-height: 140px;
	resize: vertical;
}

/*
 * Fluent ships `form.fluent_form_N .ff-btn-submit` at (0,3,1); the extra
 * `.lvpn-lead` ancestor takes ours to (0,4,0) and class count is compared
 * first. `:focus` is declared with `:hover` because Hello Elementor ships
 * `button:focus { background-color: #c36 }` (D-030).
 */
.lvpn-lead .lvpn-lead__card .fluentform .ff-btn-submit,
.lvpn-lead .lvpn-lead__card .fluentform button[type='submit'] {
	width: 100%;
	min-width: 0;
	padding: 14px 24px;
	background-color: var(--lvpn-green-lime);
	border: 1px solid transparent;
	border-radius: var(--lvpn-radius-lg);
	color: #000;
	font-family: var(--lvpn-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.lvpn-lead .lvpn-lead__card .fluentform .ff-btn-submit:hover,
.lvpn-lead .lvpn-lead__card .fluentform .ff-btn-submit:focus,
.lvpn-lead .lvpn-lead__card .fluentform button[type='submit']:hover,
.lvpn-lead .lvpn-lead__card .fluentform button[type='submit']:focus {
	background-color: var(--lvpn-green-soft);
	color: #000;
	transform: translateY(-1px);
}

.lvpn-lead__card .fluentform .ff-el-is-error input,
.lvpn-lead__card .fluentform .ff-el-is-error textarea {
	border-color: #ff8080;
}

.lvpn-lead__card .fluentform .error,
.lvpn-lead__card .fluentform .text-danger,
.lvpn-lead__card .ff-errors-in-stack {
	color: #ff8080;
	font-size: 13px;
	line-height: 18px;
}

.lvpn-lead__card .ff-message-success {
	padding: 16px;
	border: 1px solid var(--lvpn-green-review);
	border-radius: var(--lvpn-radius-md);
	background-color: rgba(98, 255, 140, 0.08);
	color: var(--lvpn-green-soft);
}

/* Fluent renders its own asterisk beside a label that already ends in one. */
.lvpn-lead__card .fluentform .ff-el-is-required.asterisk-right label:after {
	display: none;
}