/* =====================================================
 * AppAgentix - shared landing-page components
 *
 * Styles for the reusable parts under template-parts/lp/:
 *   hero.php, clients.php, stats.php, card-grid.php,
 *   split-media.php, pricing.php, tech-marquee.php, industries.php,
 *   case-studies.php, case-tabs.php, faq.php, cta.php, process.php,
 *   ai-grid.php,
 *   lead-form.php, modal.php
 *
 * Loads AFTER a page's own Appagentix-*.css, and deliberately only adds
 * rules for the new component classes - it overrides nothing that the
 * existing landing pages already rely on.
 *
 * Design tokens (--lp-*) come from the page stylesheet already loaded.
 * Fallbacks are supplied so the file also works standalone.
 * ===================================================== */

.lp-hero--split,
.lp-clients,
.lp-work,
.lp-casetabs,
.lp-ctab,
.lp-proc,
.lp-ai,
.lp-cards-section,
.lp-splitmedia,
.lp-techm,
.lp-industries,
.lp-pricing-section,
.lp-faq-section,
.lp-form-card {
	--lpc-primary: var(--lp-primary, #654dff);
	--lpc-purple: var(--lp-purple, #973dd9);
	--lpc-dark: var(--lp-dark, #120d26);
	--lpc-ink: var(--lp-ink, #111);
	--lpc-sub: var(--lp-sub, rgba(0, 0, 0, .62));
	--lpc-border: var(--lp-border, #e2e2e2);
	--lpc-white: var(--lp-white, #fff);
	--lpc-primary-soft: var(--lp-primary-soft, #eef0ff);
	--lpc-radius: 14px;
}

/* =====================================================
 * Hero - split layout with an aside
 * ===================================================== */

.lp-hero--split {
	text-align: left;
	padding: 84px 0 72px;
}

.lp-hero-grid {
	display: grid;
	gap: 56px;
	align-items: start;
}

.lp-hero--split .lp-hero-grid {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

.lp-hero--split .lp-hero-copy h1 {
	margin: 0;
	max-width: 100%;
	text-align: left;
	/* Shared display scale - see layout.css. */
	font-size: var(--display-size);
	line-height: var(--display-lh);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-ls);
}

.lp-hero-lead {
	margin: 18px 0 0;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.5;
	font-weight: 600;
	color: var(--lpc-ink);
}

.lp-hero--split .lp-hero-sub {
	margin: 16px 0 0;
	max-width: 62ch;
	text-align: left;
}

.lp-hero--split .lp-hero-actions {
	justify-content: flex-start;
	margin-top: 28px;
}

/* Hero stat row - the dark-section stat styling is white-on-dark, so the
   hero needs its own light-background treatment. */
.lp-hero-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 28px;
	margin: 36px 0 0;
	padding: 28px 0 0;
	list-style: none;
	border-top: 1px solid rgba(0, 0, 0, .1);
}

.lp-hero-stats li {
	margin: 0;
}

.lp-hero-stats .lp-stat-num {
	display: block;
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 700;
	line-height: 1.1;
	background: linear-gradient(135deg, var(--lpc-primary), var(--lpc-purple));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lp-hero-stats .lp-stat-label {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--lpc-sub);
}

/* =====================================================
 * Lead form
 *
 * Translucent glass card with a static gradient border. The border is
 * drawn inside the element's own box via mask-composite - the same
 * technique used by .lp-service-card - so it never affects layout.
 * ===================================================== */

.lp-form-card {
	position: relative;
	isolation: isolate;
	border-radius: 18px;
	color: #fff;
	/* Translucent over the page background rather than a solid slab. */
	background: linear-gradient(160deg, rgb(24, 18, 46), rgb(12, 9, 26));
	box-shadow: 0 30px 70px rgba(18, 13, 38, .26);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.lp-form-card {
		/* background: linear-gradient(160deg, rgba(28, 21, 54, .56), rgba(14, 10, 30, .62)); */
		-webkit-backdrop-filter: blur(18px) saturate(140%);
		backdrop-filter: blur(18px) saturate(140%);
	}
}

/* Static gradient border ring, drawn inside the element's own box via
   mask-composite so it never affects layout. */
.lp-form-glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(135deg,
			rgba(101, 77, 255, .75),
			rgba(151, 61, 217, .55) 45%,
			rgba(240, 171, 252, .35) 70%,
			rgba(101, 77, 255, .5));
	/* Keep only the ring: fill minus content box. */
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: .6;
	pointer-events: none;
}

.lp-form-inner {
	position: relative;
	padding: 24px 26px 22px;
}

/* ===== Top content ===== */

.lp-form-badge {
	display: inline-block;
	margin: 0 0 10px;
	padding: 7px 14px;
	border-radius: 100px;
	background: rgba(101, 77, 255, .22);
	border: 1px solid rgba(157, 99, 255, .45);
	color: #c7b9ff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.3;
}

.lp-form-title {
	margin: 0 0 16px;
	font-size: 18px;
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: -.01em;
	color: #fff;
}

/* ===== Status message ===== */

.lp-form-alert {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: 8px;
	background: rgba(255, 86, 86, .14);
	border: 1px solid rgba(255, 120, 120, .45);
	color: #ffc9c9;
	font-size: 14px;
	line-height: 1.55;
}

.lp-form-alert.is-success {
	background: rgba(74, 222, 128, .14);
	border-color: rgba(74, 222, 128, .45);
	color: #bbf7d0;
}

.lp-form-alert.is-hidden {
	display: none;
}

/* ===== Fields ===== */

/* Name and Email sit side by side to keep the card short. The row
   collapses to a single column below 640px (see the media query). */
.lp-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 12px;
}

.lp-form-field {
	margin-bottom: 12px;
	min-width: 0;
}

.lp-form-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, .84);
}

.lp-req {
	color: #c7b9ff;
}

.lp-form-field input,
.lp-form-field select,
.lp-form-field textarea {
	width: 100%;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.lp-form-field textarea {
	resize: vertical;
	min-height: 84px;
}

.lp-form-field input::placeholder,
.lp-form-field textarea::placeholder {
	color: rgba(255, 255, 255, .45);
}

.lp-form-field input:focus,
.lp-form-field select:focus,
.lp-form-field textarea:focus {
	outline: none;
	border-color: var(--lpc-primary);
	background: rgba(255, 255, 255, .1);
	box-shadow: 0 0 0 3px rgba(101, 77, 255, .32);
}

.lp-form-field.has-error input,
.lp-form-field.has-error select,
.lp-form-field.has-error textarea,
.lp-form-field.has-error .lp-cc__toggle {
	border-color: #ff8080;
	background: rgba(255, 86, 86, .1);
}

.lp-form-err {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	color: #ffb3b3;
}

.lp-form-err:not(:empty) {
	margin-top: 6px;
}

/* Honeypot: never shown, never announced, never tabbable. */
.lp-form-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ===== Phone field ===== */

.lp-phone {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.lp-phone-number {
	flex: 1 1 auto;
	min-width: 0;
}

/* Without JS the native select shows; with JS it is replaced. */
.lp-phone-select {
	flex: 0 0 auto;
	width: 40%;
	max-width: 190px;
}

.lp-phone-select--enhanced {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
}

.lp-cc {
	position: relative;
	flex: 0 0 auto;
}

.lp-cc__toggle {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 100%;
	padding: 12px 12px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.lp-cc__toggle:hover {
	background: rgba(255, 255, 255, .1);
}

.lp-cc__toggle:focus-visible {
	outline: none;
	border-color: var(--lpc-primary);
	box-shadow: 0 0 0 3px rgba(101, 77, 255, .32);
}

.lp-cc__flag {
	font-size: 17px;
	line-height: 1;
}

.lp-cc__dial {
	font-variant-numeric: tabular-nums;
}

.lp-cc__caret {
	width: 7px;
	height: 7px;
	margin-left: 1px;
	border-right: 2px solid rgba(255, 255, 255, .6);
	border-bottom: 2px solid rgba(255, 255, 255, .6);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.lp-cc__toggle[aria-expanded="true"] .lp-cc__caret {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.lp-cc__panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	width: 290px;
	max-width: 78vw;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: #191233;
	box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
}

.lp-cc__search {
	width: 100%;
	margin-bottom: 8px;
	padding: 9px 12px;
	border-radius: 7px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
}

.lp-cc__search:focus {
	outline: none;
	border-color: var(--lpc-primary);
	box-shadow: 0 0 0 3px rgba(101, 77, 255, .3);
}

.lp-cc__list {
	max-height: 232px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	overscroll-behavior: contain;
}

.lp-cc__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 7px;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .88);
	cursor: pointer;
}

.lp-cc__item[hidden] {
	display: none;
}

.lp-cc__item:hover,
.lp-cc__item.is-active {
	background: rgba(101, 77, 255, .3);
}

.lp-cc__item.is-selected {
	background: rgba(101, 77, 255, .45);
	font-weight: 600;
}

.lp-cc__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lp-cc__code {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, .6);
	font-variant-numeric: tabular-nums;
}

.lp-cc__empty {
	margin: 10px 4px 4px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .55);
}

/* =====================================================
 * Benefits - the optional extras
 *
 * Each row is a real checkbox. The tick that used to be decorative is
 * now the checked state, so the row keeps the type, spacing and colour
 * it had while gaining a control.
 *
 * The input is clipped rather than display:none, because display:none
 * takes it out of the tab order and there would be no way to reach it
 * from the keyboard.
 * ===================================================== */

.lp-form-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.lp-form-benefit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, .86);
	cursor: pointer;
	user-select: none;
	transition: color var(--ao-m-dur-fast, .18s) var(--ao-m-ease, ease);
}

.lp-form-benefit__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Same 15px circle the decorative tick sat in, now drawn as a control. */
.lp-form-benefit__box {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	padding: 3px;
	border-radius: 10%;
	border: 1px solid rgba(199, 185, 255, .45);
	background: transparent;
	color: #c7b9ff;
	box-sizing: content-box;
	transition:
		background-color var(--ao-m-dur-fast, .18s) var(--ao-m-ease, ease),
		border-color var(--ao-m-dur-fast, .18s) var(--ao-m-ease, ease);
}

.lp-form-benefit__box svg {
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(.6);
	transition:
		opacity var(--ao-m-dur-fast, .18s) var(--ao-m-ease, ease),
		transform var(--ao-m-dur-fast, .18s) var(--ao-m-ease, ease);
}

/* Checked: the original filled circle, with the tick faded in. */
.lp-form-benefit__input:checked + .lp-form-benefit__box {
	background: rgba(101, 77, 255, .3);
	border-color: rgba(199, 185, 255, .7);
}

.lp-form-benefit__input:checked + .lp-form-benefit__box svg {
	opacity: 1;
	transform: scale(1);
}

.lp-form-benefit:hover .lp-form-benefit__box {
	border-color: rgba(199, 185, 255, .8);
}

.lp-form-benefit:hover {
	color: #fff;
}

/* The input is clipped, so the ring has to be drawn on the box. */
.lp-form-benefit__input:focus-visible + .lp-form-benefit__box {
	outline: 2px solid var(--color-fill-blue, #dfcdff);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.lp-form-benefit,
	.lp-form-benefit__box,
	.lp-form-benefit__box svg {
		transition: none;
	}
}

/* ===== Submit ===== */

.lp-form-submit {
	position: relative;
	width: 100%;
	margin-top: 14px;
	border: 0;
	cursor: pointer;
	min-height: 44px;
}

.lp-form-submit[disabled] {
	cursor: progress;
	opacity: .78;
}

.lp-form-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	animation: lp-spin .7s linear infinite;
}

.lp-form-card.is-busy .lp-form-spinner {
	display: inline-block;
}

@keyframes lp-spin {
	to {
		transform: rotate(360deg);
	}
}

.lp-form-note {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .55);
}

.lp-form-note a {
	color: #c7b9ff;
}

/* =====================================================
 * Modal
 * ===================================================== */

.lp-modal {
	width: min(560px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100dvh - 32px);
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.lp-modal::backdrop {
	background: rgba(8, 6, 18, .72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.lp-modal__panel {
	position: relative;
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 18px;
}

.lp-modal__close {
	position: absolute;
	z-index: 5;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}

.lp-modal__close:hover {
	background: rgba(255, 255, 255, .16);
}

.lp-modal__close:focus-visible {
	outline: 2px solid var(--lpc-primary);
	outline-offset: 2px;
}

.lp-modal__close svg {
	width: 16px;
	height: 16px;
}

/* In the popup the card fills the panel and the heading clears the close button. */
.lp-form-card--popup {
	box-shadow: none;
}

.lp-form-card--popup .lp-form-title {
	padding-right: 38px;
}

/* Stop the page behind the modal from scrolling. */
.lp-modal-open,
.lp-modal-open body {
	overflow: hidden;
}
/* =====================================================
 * Industries hub-and-spokes
 *
 * The base .lp-ind-* rules live in the page stylesheet and are shared by
 * the other landing pages. Everything here is scoped under .lp-industries
 * so those pages keep their original proportions untouched.
 * ===================================================== */

.lp-industries .lp-ind {
	/* Hub sized against the reference ratio, leaving the side columns
	   enough width for the longest industry name on one line. */
	grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr);
	grid-template-rows: repeat(var(--lp-ind-rows, 5), 128px);
	column-gap: 56px;
}

/* The shared rule forces nowrap, which lets a long name spill past the
   card edge. Allow it to wrap instead. Every name fits on one line from
   1100px up; in the narrow three-column band the longest one wraps, which
   the 128px row absorbs. */
.lp-industries .lp-ind-node h3 {
	white-space: normal;
}

/* The dashed frame reaches well above and below the hub in the reference,
   rather than hugging it. */
.lp-industries .lp-ind-hub-ring {
	inset: -40px -34px;
	border-radius: 40px;
	border-color: rgba(152, 61, 217, 0.579);
}

.lp-industries .lp-ind-hub {
	padding: 44px 30px;
	border-radius: 22px;
}

.lp-industries .lp-ind-hub-icon {
	width: 72px;
	height: 72px;
	border-radius: 18px;
}

.lp-industries .lp-ind-hub-icon svg {
	width: 38px;
	height: 38px;
	
}

.lp-industries .lp-ind-hub-eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #b6a8ff;
}

/* Gradient pill with the bloom beneath it, as in the reference. */
.lp-industries .lp-ind-hub-cta {
	background: linear-gradient(135deg, var(--lpc-primary), var(--lpc-purple));
	box-shadow:
		0 14px 30px -8px rgba(101, 77, 255, .65),
		0 0 22px rgba(151, 61, 217, .35);
	transition: box-shadow .3s ease, transform .3s ease;
}

.lp-industries .lp-ind-hub-cta:hover {
	transform: translateY(-2px);
	box-shadow:
		0 18px 38px -8px rgba(101, 77, 255, .8),
		0 0 30px rgba(151, 61, 217, .5);
}

/* Cards are links when a url is supplied; keep them keyboard-visible. */
.lp-industries a.lp-ind-node {
	text-decoration: none;
}

.lp-industries a.lp-ind-node:focus-visible,
.lp-industries .lp-ind-hub-cta:focus-visible {
	outline: 2px solid #b6a8ff;
	outline-offset: 3px;
}

/* The page stylesheet narrows this layout at 1100px and stacks it at
   767px. Follow those breakpoints rather than introducing new ones: the
   hub is pinned to grid-column 2 until the stacked rules release it, so
   collapsing to one column any earlier leaves an empty phantom track. */
@media (max-width: 1100px) {
	.lp-industries .lp-ind {
		grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr);
		column-gap: 44px;
	}

	.lp-industries .lp-ind-hub {
		padding: 34px 22px;
	}

	.lp-industries .lp-ind-hub-icon {
		width: 62px;
		height: 62px;
	}

	.lp-industries .lp-ind-hub-icon svg {
		width: 32px;
		height: 32px;
	}

	.lp-industries .lp-ind-hub-ring {
		inset: -48px -22px;
		border-radius: 32px;
	}
}

@media (max-width: 900px) {
	/* Last three-column band before the layout stacks: give the side
	   columns the width back so long names are not squeezed. */
	.lp-industries .lp-ind {
		grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr);
		column-gap: 32px;
	}

	.lp-industries .lp-ind-node {
		padding: 16px 16px;
		gap: 12px;
	}

	.lp-industries .lp-ind-node-icon {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}

	.lp-industries .lp-ind-node-icon svg {
		width: 22px;
		height: 22px;
	}

	.lp-industries .lp-ind-node h3 {
		font-size: 14.5px;
	}
}

@media (max-width: 767px) {
	.lp-industries .lp-ind {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		column-gap: 0;
	}

	.lp-industries .lp-ind-hub {
		padding: 32px 22px;
	}

	.lp-industries .lp-ind-hub-icon {
		width: 58px;
		height: 58px;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* The shared rule only shortens this to 0.01ms, which reads as a
	   flicker rather than a stop. Turn it off outright and leave the
	   frame visible at full strength. */
	.lp-industries .lp-ind-hub-ring {
		animation: none;
		transform: none;
		opacity: 1;
	}

	.lp-industries .lp-ind-node,
	.lp-industries .lp-ind-hub-cta {
		transition: none;
	}

	.lp-industries .lp-ind-node:hover,
	.lp-industries .lp-ind-hub-cta:hover {
		transform: none;
	}
}

/* =====================================================
 * Technology marquee
 *
 * Each row prints its items twice and translates by exactly -50%, so the
 * second copy lands where the first began: no seam, no trailing gap.
 * Hovering a row pauses it, which also makes the cards easy to hit.
 *
 * NOTE: the card and hover treatment below is derived from the theme's
 * own language (the same mask-composite gradient ring used by
 * .lp-service-card). Pending the reference screenshot for the exact
 * highlight state.
 * ===================================================== */

.lp-techm {
	/* Rows run edge to edge, so clip rather than scroll the page. */
	overflow: hidden;
}

.lp-techm__rows {
	display: grid;
	gap: 28px;
	margin-top: 52px;
	/* Softens both ends so cards fade rather than cut off. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lp-techm__row {
	overflow: hidden;
}

.lp-techm__track {
	display: flex;
	align-items: stretch;
	width: max-content;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	animation: lp-techm-scroll var(--lp-techm-duration, 42s) linear infinite;
	animation-direction: var(--lp-techm-direction, normal);
	/* Halves the distance travelled so -50% is one full set. */
	will-change: transform;
}

.lp-techm__rows.is-pausable .lp-techm__row:hover .lp-techm__track,
.lp-techm__rows.is-pausable .lp-techm__row:focus-within .lp-techm__track {
	animation-play-state: paused;
}

@keyframes lp-techm-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Spacing lives on the item, not as flex gap: the last item must
   carry a trailing margin or -50% lands half a gap short and the
   loop visibly jumps. */
.lp-techm__track > li {
	flex: 0 0 auto;
	margin: 0 var(--lp-techm-gap, 28px) 0 0;
}

/* ===== Card ===== */

.lp-tech-card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 176px;
	min-height: 102px;
	padding: 15px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .028);
	border: 1px solid rgba(255, 255, 255, .07);
	color: rgba(255, 255, 255, .68);
	text-decoration: none;
	text-align: center;
	transition: background .3s ease, border-color .3s ease, box-shadow .35s ease, color .3s ease;
}

/* Highlight: a crisp accent border with a soft bloom spreading around and
   below it. Border colour and box-shadow only, so nothing reflows and the
   card never nudges its neighbours in the moving row. */
.lp-tech-card:hover,
.lp-tech-card:focus-visible {
	background: rgba(101, 77, 255, .09);
	border-color: var(--lpc-primary);
	color: #fff;
	box-shadow:
		0 0 0 1px rgba(101, 77, 255, .5),
		0 12px 32px rgba(101, 77, 255, .45),
		0 0 22px rgba(101, 77, 255, .28);
	outline: none;
}

.lp-tech-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: rgba(255, 255, 255, .8);
	transition: color .3s ease;
}

.lp-tech-card:hover .lp-tech-card__icon,
.lp-tech-card:focus-visible .lp-tech-card__icon {
	color: #fff;
}

.lp-tech-card__icon svg {
	width: 42px;
	height: 42px;
	display: block;
}

.lp-tech-card__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: .01em;
}

/* =====================================================
 * Pricing tiers
 *
 * Equal-height cards: tinted badge, large price, description, accent
 * highlight line, optional check list. The three tints are the theme's
 * own indigo / purple / pink rather than a new palette.
 * ===================================================== */

.lp-pricing-section {
	background: var(--lpc-white);
}

.lp-tiers {
	display: grid;
	grid-template-columns: repeat(var(--lp-tiers-cols, 3), minmax(0, 1fr));
	gap: 26px;
	margin-top: 52px;
	align-items: stretch;
}

.lp-tier {
	--lp-tier-accent: var(--lpc-primary);
	--lp-tier-soft: rgba(101, 77, 255, .1);

	display: flex;
	flex-direction: column;
	padding: 34px 32px 36px;
	border-radius: 16px;
	background: var(--lpc-white);
	border: 1px solid rgba(18, 13, 38, .09);
	box-shadow: 0 10px 28px rgba(18, 13, 38, .05);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.lp-tier--purple {
	--lp-tier-accent: var(--lpc-purple);
	--lp-tier-soft: rgba(151, 61, 217, .12);
}

.lp-tier--pink {
	--lp-tier-accent: #b0369b;
	--lp-tier-soft: rgba(240, 171, 252, .22);
}

.lp-tier:hover {
	transform: translateY(-4px);
	border-color: rgba(101, 77, 255, .3);
	box-shadow: 0 22px 48px rgba(18, 13, 38, .1);
}

/* Optional emphasis for a recommended tier. */
.lp-tier--featured {
	border-color: var(--lp-tier-accent);
	box-shadow: 0 18px 44px rgba(101, 77, 255, .16);
}

.lp-tier__badge {
	align-self: flex-start;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--lp-tier-soft);
	color: var(--lp-tier-accent);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
}

.lp-tier__price {
	margin: 22px 0 0;
	font-size: clamp(24px, 2.4vw, 22px);
	line-height: 1.22;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--lpc-dark);
}

/* Grows to fill the card so the highlight line and any feature list sit
   on a common baseline across tiers, whatever the copy length. */
.lp-tier__text {
	flex: 1 1 auto;
	margin: 18px 0 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--lpc-sub);
}

.lp-tier__highlight {
	margin: 20px 0 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--lp-tier-accent);
}

.lp-tier__list,
.lp-tiers-note__list {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.lp-tier__list li,
.lp-tiers-note__list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-bottom: 11px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--lpc-ink);
}

.lp-tier__list li:last-child,
.lp-tiers-note__list li:last-child {
	margin-bottom: 0;
}

.lp-tier__list svg,
.lp-tiers-note__list svg {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin-top: 1px;
	color: var(--lp-tier-accent, var(--lpc-primary));
}

/* Pushes any per-tier CTA to the bottom so cards line up. */
.lp-tier__cta {
	margin-top: auto;
	align-self: flex-start;
}

.lp-tier__list + .lp-tier__cta,
.lp-tier__text + .lp-tier__cta {
	margin-top: 26px;
}

/* ===== Footnote block ===== */

.lp-tiers-note {
	margin-top: 44px;
	padding: 30px 34px;
	border-radius: 16px;
	background: var(--lpc-primary-soft, #eef0ff);
	border: 1px solid rgba(101, 77, 255, .14);
}

.lp-tiers-note__title {
	margin: 0 0 18px;
	font-size: 19px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--lpc-dark);
}

.lp-tiers-note__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 32px;
	margin: 0;
}

.lp-tiers-note__list svg {
	color: var(--lpc-primary);
}

.lp-tiers-cta {
	margin-top: 32px;
	text-align: center;
}

/* =====================================================
 * Split section: copy + staggered image grid
 *
 * Images are laid out column-major, so each column stacks to its own
 * height and the two sides sit offset from one another. Corner brackets
 * come from pseudo-elements on the wrapper and one decorative span.
 * ===================================================== */

.lp-splitmedia {
	position: relative;
	overflow: hidden;
	padding: 96px 0;
	background:
		radial-gradient(64% 110% at 4% 22%, rgba(101, 77, 255, .28), rgba(101, 77, 255, 0) 60%),
		radial-gradient(52% 100% at 96% 92%, rgba(151, 61, 217, .24), rgba(151, 61, 217, 0) 62%),
		linear-gradient(140deg, #140c28 0%, #100a20 52%, #160d2b 100%);
}

.lp-splitmedia__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.08fr);
	gap: 32px;
	align-items: center;
}

/* Media on the left is a reorder only, so the markup order is unchanged. */
.lp-splitmedia--media-left .lp-splitmedia__copy {
	order: 2;
}

.lp-splitmedia__copy .lp-eyebrow {
	margin-bottom: 16px;
	color: var(--lp-white);
	text-align: left;
}

.lp-splitmedia__title {
	margin: 0;
	font-size: clamp(28px, 3.4vw, 46px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--lp-white);
}

.lp-splitmedia__text {
	margin: 22px 0 0;
	max-width: 58ch;
	font-size: 17px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .72);
}

.lp-splitmedia__text strong {
	color: rgba(255, 255, 255, .92);
	font-weight: 600;
}

/* ===== Media ===== */

.lp-splitmedia__media {
	position: relative;
	padding: 22px;
}

/* Corner brackets: wrapper draws the top pair, the span the bottom pair. */
.lp-splitmedia__media::before,
.lp-splitmedia__media::after,
.lp-splitmedia__frame::before,
.lp-splitmedia__frame::after {
	content: "";
	position: absolute;
	width: 34px;
	height: 34px;
	border: 2px solid rgba(143, 123, 255, .5);
	pointer-events: none;
}

.lp-splitmedia__media::before {
	top: 0;
	left: 0;
	border-right: 0;
	border-bottom: 0;
}

.lp-splitmedia__media::after {
	top: 0;
	right: 0;
	border-left: 0;
	border-bottom: 0;
}

.lp-splitmedia__frame::before {
	bottom: 0;
	left: 0;
	border-right: 0;
	border-top: 0;
}

.lp-splitmedia__frame::after {
	bottom: 0;
	right: 0;
	border-left: 0;
	border-top: 0;
}

.lp-splitmedia__cols {
	display: grid;
	grid-template-columns: repeat(var(--lp-media-cols, 2), minmax(0, 1fr));
	gap: 20px;
	/* Each item keeps its own height rather than stretching to the row. */
	align-items: start;
}

/* Alternating ratios plus a lift on the second column give the offset
   composition. The pattern repeats every four, so eight or twelve images
   stagger the same way. */
.lp-splitmedia__cols > .lp-splitmedia__item:nth-child(4n + 1) {
	aspect-ratio: 16 / 15;
}

.lp-splitmedia__cols > .lp-splitmedia__item:nth-child(4n + 2) {
	aspect-ratio: 16 / 12.6;
}

.lp-splitmedia__cols > .lp-splitmedia__item:nth-child(4n + 3) {
	aspect-ratio: 16 / 11.4;
}

.lp-splitmedia__cols > .lp-splitmedia__item:nth-child(4n) {
	aspect-ratio: 16 / 15;
}

/* Second column sits slightly higher. Absorbed by the wrapper padding,
   so it never escapes the corner brackets. */
.lp-splitmedia__cols > .lp-splitmedia__item:nth-child(even) {
	margin-top: -20px;
}

/* Fixed frame: the image scales inside it, so nothing shifts. */
.lp-splitmedia__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
}

.lp-splitmedia__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform .65s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.lp-splitmedia__item:hover img,
.lp-splitmedia__item:focus-visible img {
	transform: scale(1.07);
}

a.lp-splitmedia__item:focus-visible {
	outline: 2px solid #b6a8ff;
	outline-offset: 3px;
}

/* ===== Read More disclosure =====
 *
 * Opt-in per paragraph from split-media.php ('expandable'). The clipping
 * happens on the paragraph itself, so the closed height can be stated in
 * that element's own line boxes: the cut always lands on a line break,
 * never mid-word, and it re-measures itself at every viewport width
 * without a single pixel value in the markup.
 *
 * Open height comes from --lp-rm-full, which the page script keeps in
 * step with the live layout. The fallback is only what the first frame
 * uses before that lands.
 */

.lp-readmore {
	margin: 22px 0 0;
	max-width: 58ch;
	--lp-rm-lines: 4;
}

/* The paragraph keeps .lp-splitmedia__text for its type, and hands its
   spacing and width to the wrapper so the clipped box starts exactly on
   the first line. */
.lp-readmore .lp-readmore__text {
	margin: 0;
	max-width: none;
	overflow: hidden;
	max-height: var(--lp-rm-full, 100em);
	transition: max-height .42s var(--ao-m-ease, cubic-bezier(.22, 1, .36, 1));
}

/* Fallback first: .lp-splitmedia__text is line-height 1.75, so 1.75em is
   one line box. Browsers with lh units restate it exactly below, which
   stays right if the line height is ever re-pointed. */
.lp-readmore.is-collapsed .lp-readmore__text {
	max-height: calc(var(--lp-rm-lines, 4) * 1.75em);
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1.6em), transparent 100%);
	mask-image: linear-gradient(180deg, #000 calc(100% - 1.6em), transparent 100%);
}

@supports (max-height: 1lh) {
	.lp-readmore.is-collapsed .lp-readmore__text {
		max-height: calc(var(--lp-rm-lines, 4) * 1lh);
	}
}

/* Nothing of the paragraph on the page until the control is used. The
   closed state is a zero-height clip rather than a line count, so the
   fade has nothing left to fade over and goes.

   visibility is what keeps the held-back copy out of the accessibility
   tree and out of the tab order while it is closed - a box clipped to
   zero height is still announced by most screen readers, which would
   make the control a lie. It is switched back on with no delay so the
   opening is not held up, and only withdrawn once the height has
   finished closing. */
.lp-readmore--full .lp-readmore__text {
	visibility: visible;
	transition:
		max-height .42s var(--ao-m-ease, cubic-bezier(.22, 1, .36, 1)),
		visibility 0s linear 0s;
}

.lp-readmore--full.is-collapsed .lp-readmore__text {
	max-height: 0;
	visibility: hidden;
	-webkit-mask-image: none;
	mask-image: none;
	transition:
		max-height .42s var(--ao-m-ease, cubic-bezier(.22, 1, .36, 1)),
		visibility 0s linear .42s;
}

/* The control now stands where the paragraph would have started, so it
   takes the paragraph's own spacing instead of stacking on top of it. */
.lp-readmore--full .lp-readmore__toggle {
	margin-top: 0;
}

/* Matches the page's own .lp-btn geometry - 4px radius, 600 weight - at
   the smaller scale a secondary control wants. */
.lp-readmore__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 0 16px;
	min-height: 40px;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 4px;
	background: rgba(255, 255, 255, .04);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	color: #b6a8ff;
	cursor: pointer;
	transition:
		color .18s ease,
		border-color .18s ease,
		background-color .18s ease;
}

/* The UA rule for [hidden] loses to the class selector above, so the
   control the script has nothing to disclose is hidden explicitly. */
.lp-readmore__toggle[hidden] {
	display: none;
}

/* Held while the script checks whether the paragraph needs clipping at
   this width: the clamp goes on, the height is read, and it comes back
   off again, all of which must be instant. */
.lp-readmore.is-measuring .lp-readmore__text {
	transition: none;
}

.lp-readmore__toggle:hover {
	border-color: rgba(182, 168, 255, .55);
	background: rgba(182, 168, 255, .12);
	color: #d5ccff;
}

/* The premium skin restores a focus ring for every button on the page,
   but picks its dark-ground colour from a list of section classes that
   .lp-splitmedia is not on - so the ring here would be the 3.67:1 purple
   that file itself rejects for dark grounds. Same remedy, scoped to this
   control, so no other focusable thing in the section moves. */
.lp-readmore .lp-readmore__toggle:focus-visible {
	outline: 2px solid var(--color-fill-blue, #dfcdff);
	outline-offset: 3px;
}

/* One chevron for both states: aria-expanded is the source of truth, so
   the arrow cannot disagree with the control's accessible state. */
.lp-readmore__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	transition: transform .32s var(--ao-m-ease, cubic-bezier(.22, 1, .36, 1));
}

.lp-readmore__icon svg {
	width: 100%;
	height: 100%;
}

.lp-readmore__toggle[aria-expanded="true"] .lp-readmore__icon {
	transform: rotate(180deg);
}

/* =====================================================
 * Icon card grid
 *
 * Soft tinted cards with a circular outlined icon. Cards alternate
 * neutral / tinted in a checkerboard via :nth-child(even), which works
 * for any column count. Separate from .lp-service-card, the bordered
 * grid the other landing pages use.
 * ===================================================== */

.lp-cards-section {
	background: var(--lpc-white);
}

.lp-cards-head {
	max-width: 860px;
}

.lp-cards-head .lp-lead {
	margin: 0 auto;
	max-width: 74ch;
	font-size: 17px;
	line-height: 1.75;
	color: var(--lpc-sub);
}

.lp-cards {
	display: grid;
	grid-template-columns: repeat(var(--lp-cards-cols, 3), minmax(0, 1fr));
	gap: 26px;
	margin-top: 52px;
}

.lp-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 34px 32px 36px;
	border-radius: 16px;
	background: #faf9f8;
	border: 1px solid rgba(18, 13, 38, .05);
	text-decoration: none;
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Checkerboard tint, as in the reference. */
.lp-card:nth-child(even) {
	background: linear-gradient(155deg, #f4f0fe 0%, #f7f1fb 55%, #fbf2f6 100%);
	border-color: rgba(151, 61, 217, .1);
}

.lp-card:hover {
	transform: translateY(-3px);
	border-color: rgba(151, 61, 217, .28);
	box-shadow: 0 18px 38px rgba(18, 13, 38, .09);
}

/* Cards that link somewhere are focusable; keep the ring visible. */
a.lp-card:focus-visible {
	outline: 2px solid var(--lpc-primary);
	outline-offset: 3px;
}

.lp-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 28px;
	border-radius: 50%;
	border: 1px solid rgba(151, 61, 217, .42);
	color: var(--lpc-purple);
	background: rgba(255, 255, 255, .55);
	transition: border-color .25s ease, background .25s ease;
}

.lp-card:hover .lp-card__icon {
	border-color: rgba(151, 61, 217, .75);
	background: #fff;
}

.lp-card__icon svg {
	width: 25px;
	height: 25px;
	display: block;
}

.lp-card__title {
	margin: 0 0 14px;
	font-size: 21px;
	line-height: 1.32;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--lpc-dark);
}

.lp-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--lpc-sub);
}

/* =====================================================
 * Statistics band
 *
 * Full-width dark band, centred heading, one row of figures divided by
 * hairlines. Column count comes from --lp-stats-cols, set inline by the
 * component from the number of statistics passed, so the divider logic
 * below works for any count.
 * ===================================================== */

.lp-stats-band {
	position: relative;
	overflow: hidden;
	padding: 84px 0;
	/* background:
		radial-gradient(72% 130% at 6% 42%, rgba(124, 58, 190, .58), rgba(124, 58, 190, 0) 60%),
		radial-gradient(58% 120% at 94% 88%, rgba(178, 42, 140, .38), rgba(178, 42, 140, 0) 62%),
		linear-gradient(118deg, #241043 0%, #160b29 55%, #1c0d2c 100%); */
		background: #120d26;
}

.lp-stats-band__head {
	margin: 0 auto 54px;
	max-width: 900px;
	text-align: center;
}

.lp-stats-band__title {
	margin: 0;
	font-size: clamp(25px, 3vw, 38px);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: -.01em;
	color: #fff;
}

.lp-stats-band__lead {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .7);
}

.lp-stats-band__grid {
	display: grid;
	grid-template-columns: repeat(var(--lp-stats-cols, 4), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-stats-band__grid > li {
	padding: 4px 26px;
	text-align: center;
	/* Hairline between figures; removed for the first in each row below. */
	border-left: 1px solid rgba(255, 255, 255, .16);
}

.lp-stats-band__grid > li:first-child {
	border-left: 0;
}

.lp-stats-band__num {
	display: block;
	font-size: clamp(32px, 3.6vw, 48px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.01em;
	/* Flat white here, unlike the gradient fill used on other dark
	   sections, to match the reference treatment. */
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: #fff;
}

.lp-stats-band__label {
	display: block;
	margin: 14px auto 0;
	max-width: 24ch;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
}

/* =====================================================
 * Clients strip
 * ===================================================== */

.lp-clients-grid {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: 48px;
	align-items: center;
}

.lp-clients-copy .lp-eyebrow,
.lp-clients-copy .lp-heading,
.lp-clients-copy .lp-lead {
	text-align: left;
}

.lp-clients-copy .lp-heading {
	margin-bottom: 14px;
}

.lp-clients-copy .lp-lead {
	margin: 0;
	color: rgba(255, 255, 255, .72);
	font-size: 16px;
	line-height: 1.7;
}

.lp-clients-marquee {
	display: grid;
	gap: 16px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.lp-clients-track {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: max-content;
	animation: lp-clients-scroll 38s linear infinite;
}

.lp-clients-track--alt {
	animation-duration: 46s;
	animation-direction: reverse;
}

.lp-clients-marquee:hover .lp-clients-track {
	animation-play-state: paused;
}

.lp-clients-track li {
	flex: 0 0 auto;
}

.lp-clients-track .lp-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 152px;
	padding: 18px 26px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .09);
	color: rgba(255, 255, 255, .82);
	font-size: 17px;
	font-weight: 600;
	white-space: nowrap;
}

@keyframes lp-clients-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* =====================================================
 * Case studies - additions only; .card styling is inherited
 * ===================================================== */

.lp-work .card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-work .card-subtitle {
	margin: 4px 0 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--lpc-primary);
}

.lp-work .card-summary {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--lpc-sub);
}

.lp-work .card.hidden {
	display: none;
}

/* =====================================================
 * FAQ - category tabs, numbering, button-based disclosure
 * ===================================================== */
.lp-faq-content {
 display: flex;
    justify-content: space-between;
}
.lp-faq-tabs {
	display: flex;
	flex-direction: column;
	justify-content: start;
	gap: 10px;
	margin: 0 auto 38px;
	max-width: 900px;
}

.lp-faq-tab {
	padding: 11px 22px;
	border-radius: 100px;
	border: 1px solid var(--lpc-border);
	background: var(--lpc-white);
	color: var(--lpc-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.lp-faq-tab:hover {
	border-color: var(--lpc-primary);
	color: var(--lpc-primary);
}

.lp-faq-tab.is-active {
	background: var(--lpc-primary);
	border-color: var(--lpc-primary);
	color: #fff;
}

.lp-faq-tab:focus-visible {
	outline: 2px solid var(--lpc-primary);
	outline-offset: 3px;
}

.lp-faq-panel[hidden] {
	display: none;
}

/* The question is a real button, so reset the UA styling. */
.lp-faq-h {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.lp-faq-section .lp-faq-q {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 22px 24px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.lp-faq-section .lp-faq-q:focus-visible {
	outline: 2px solid var(--lpc-primary);
	outline-offset: -3px;
	border-radius: 10px;
}

.lp-faq-num {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--lpc-primary);
	font-variant-numeric: tabular-nums;
}

.lp-faq-text {
	flex: 1 1 auto;
	min-width: 0;
}

.lp-faq-section .lp-faq-icon {
	flex: 0 0 auto;
	margin-left: auto;
}

.lp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =====================================================
 * Responsive
 * ===================================================== */

@media (max-width: 1024px) {

	.lp-hero--split .lp-hero-grid,
	.lp-clients-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.lp-hero--split {
		padding: 64px 0 60px;
	}

	.lp-clients-copy .lp-eyebrow,
	.lp-clients-copy .lp-heading,
	.lp-clients-copy .lp-lead {
		text-align: center;
	}

	.lp-splitmedia {
		padding: 72px 0;
	}

	.lp-splitmedia__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}

	/* Copy first on narrow screens regardless of the desktop order. */
	.lp-splitmedia--media-left .lp-splitmedia__copy {
		order: 0;
	}

	.lp-splitmedia__text {
		max-width: none;
	}

	/* Copy spans the container here, so the same paragraph occupies far
	   fewer, much longer lines. Two of them is the same proportion of
	   the whole that four is on the desktop measure. */
	.lp-readmore {
		max-width: none;
		--lp-rm-lines: 2;
	}

	.lp-techm__rows {
		margin-top: 42px;
		gap: 16px;
		--lp-techm-gap: 16px;
	}

	.lp-tech-card {
		width: 158px;
		min-height: 96px;
		padding: 13px 12px;
	}

	.lp-tech-card__icon {
		width: 44px;
		height: 44px;
	}

	/* Longer labels wrap at this width; reserving the second line
	   keeps every row the same height. */
	.lp-tech-card__name {
		min-height: 2.7em;
	}

	.lp-tech-card__icon svg {
		width: 38px;
		height: 38px;
	}

	.lp-tiers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
		margin-top: 42px;
	}

	.lp-tier {
		padding: 30px 26px 32px;
	}

	.lp-tiers-note {
		padding: 26px 26px;
	}

	.lp-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
		margin-top: 42px;
	}

	.lp-card {
		padding: 30px 26px 32px;
	}

	/* Two per row on tablet; the divider now falls between the pair, so
	   it is cleared on every odd item rather than only the first. */
	.lp-stats-band {
		padding: 68px 0;
	}

	.lp-stats-band__head {
		margin-bottom: 42px;
	}

	.lp-stats-band__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 40px;
	}

	.lp-stats-band__grid > li:nth-child(odd) {
		border-left: 0;
	}
}

@media (max-width: 640px) {
	.lp-hero-stats {
		gap: 18px 20px;
		margin-top: 28px;
		padding-top: 22px;
	}

	.lp-form-card {
		border-radius: 14px;
	}

	.lp-form-inner {
		padding: 22px 18px 20px;
	}

	/* Two fields side by side are too cramped on a phone. */
	.lp-form-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.lp-splitmedia {
		padding: 54px 0;
	}

	/* Narrow measure, so the paragraph runs long again: four lines keeps
	   the closed state to about half of it and the section compact. */
	.lp-readmore {
		--lp-rm-lines: 4;
	}

	/* Comfortable thumb target, and full width so it cannot be missed. */
	.lp-readmore__toggle {
		min-height: 44px;
		justify-content: center;
		width: 100%;
	}

	.lp-splitmedia__media {
		padding: 16px;
	}

	.lp-splitmedia__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	/* One per row: a uniform ratio keeps every image a usable size, and
	   the lift is removed so the stack is evenly spaced. */
	.lp-splitmedia__cols > .lp-splitmedia__item:nth-child(4n + 1),
	.lp-splitmedia__cols > .lp-splitmedia__item:nth-child(4n + 2),
	.lp-splitmedia__cols > .lp-splitmedia__item:nth-child(4n + 3),
	.lp-splitmedia__cols > .lp-splitmedia__item:nth-child(4n) {
		aspect-ratio: 16 / 10;
	}

	.lp-splitmedia__cols > .lp-splitmedia__item:nth-child(even) {
		margin-top: 0;
	}

	.lp-splitmedia__media::before,
	.lp-splitmedia__media::after,
	.lp-splitmedia__frame::before,
	.lp-splitmedia__frame::after {
		width: 24px;
		height: 24px;
	}

	/* Two rows are kept on mobile; the cards shrink instead. */
	.lp-techm__rows {
		margin-top: 32px;
		gap: 12px;
	}

	.lp-techm__rows {
		--lp-techm-gap: 12px;
	}

	.lp-tech-card {
		width: 134px;
		min-height: 88px;
		padding: 12px 10px;
		gap: 7px;
		border-radius: 12px;
	}

	.lp-tech-card__icon {
		width: 38px;
		height: 38px;
	}

	.lp-tech-card__icon svg {
		width: 33px;
		height: 33px;
	}

	.lp-tech-card__name {
		font-size: 11.5px;
	}

	.lp-tiers {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		margin-top: 32px;
	}

	.lp-tier {
		padding: 26px 22px 28px;
		border-radius: 14px;
	}

	.lp-tiers-note {
		margin-top: 28px;
		padding: 22px 20px;
		border-radius: 14px;
	}

	.lp-tiers-note__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 11px;
	}

	.lp-tier__cta,
	.lp-tiers-cta .lp-btn {
		width: 100%;
	}

	.lp-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		margin-top: 32px;
	}

	.lp-card {
		padding: 26px 22px 28px;
		border-radius: 14px;
	}

	.lp-card__icon {
		width: 50px;
		height: 50px;
		margin-bottom: 20px;
	}

	.lp-card__title {
		font-size: 19px;
	}

	/* Single column: vertical dividers become horizontal rules between rows. */
	.lp-stats-band {
		padding: 54px 0;
	}

	.lp-stats-band__head {
		margin-bottom: 32px;
	}

	.lp-stats-band__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.lp-stats-band__grid > li {
		padding: 24px 8px;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .14);
	}

	.lp-stats-band__grid > li:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.lp-stats-band__label {
		max-width: 30ch;
	}

	/* Keep the country toggle compact so the number field stays usable. */
	.lp-cc__toggle {
		gap: 5px;
		padding: 12px 9px;
		font-size: 14px;
	}

	.lp-cc__panel {
		width: min(300px, calc(100vw - 56px));
	}

	.lp-form-benefits {
		gap: 8px 16px;
	}

	.lp-modal {
		width: calc(100vw - 20px);
		max-height: calc(100dvh - 20px);
	}

	.lp-modal__panel {
		max-height: calc(100dvh - 20px);
	}

	.lp-faq-tabs {
		gap: 8px;
		margin-bottom: 28px;
	}

	.lp-faq-tab {
		padding: 9px 16px;
		font-size: 14px;
	}

	.lp-faq-section .lp-faq-q {
		gap: 12px;
		padding: 18px 16px;
		font-size: 16px;
	}

	.lp-clients-track .lp-brand {
		min-width: 124px;
		padding: 14px 18px;
		font-size: 15px;
	}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {

	/* The disclosure keeps working; it just arrives rather than grows.
	   The full-hide state is restated at its own specificity, or its own
	   rule above - which also carries the visibility hand-off - would
	   keep animating right through this. */
	.lp-readmore .lp-readmore__text,
	.lp-readmore--full .lp-readmore__text,
	.lp-readmore--full.is-collapsed .lp-readmore__text,
	.lp-readmore__icon {
		transition: none;
	}

	.lp-clients-track {
		animation: none;
	}

	.lp-form-spinner {
		animation-duration: 1.6s;
	}

	.lp-card:hover,
	.lp-tier:hover {
		transform: none;
	}

	/* Marquee stops; the row becomes scrollable so every card is
	   still reachable, and the edge fade is dropped so nothing looks
	   cut off when stationary. */
	.lp-techm__track {
		animation: none;
	}

	.lp-techm__row {
		overflow-x: auto;
	}

	.lp-techm__rows {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.lp-tech-card,
	.lp-tech-card__icon {
		transition: none;
	}

	.lp-tier {
		transition: none;
	}

	.lp-splitmedia__item img,
	.lp-splitmedia__item:hover img,
	.lp-splitmedia__item:focus-visible img {
		transform: none;
		transition: none;
	}

	.lp-card,
	.lp-card__icon,
	.lp-faq-tab,
	.lp-form-field input,
	.lp-form-field select,
	.lp-form-field textarea,
	.lp-cc__toggle,
	.lp-cc__caret {
		transition: none;
	}
}

/* =====================================================
 * Success-story showcase
 *
 * A sticky index of projects beside one featured story panel.
 * Everything is scoped under .lp-casetabs: the older
 * .featured-case-studies card styling is shared by the home, atlanta,
 * chicago and software-chicago pages, so none of it is touched here.
 *
 * Two rules the layout depends on:
 *
 *   1. Icons are optional. The index card and the outcome line are flex,
 *      not grid, so a page without the icon layer loses the icon and
 *      nothing else moves.
 *   2. Nothing here animates a property that triggers layout. The index
 *      accent is scaled, not sized; the artwork is transformed, not
 *      resized.
 *
 * The motion layer (appagentix-motion.css, section 16) owns only the
 * panel's arrival, because that is the one piece it re-times against
 * its own --ao-m-* tokens.
 * ===================================================== */

.lp-casetabs {
	--ct-surface: var(--lpc-white, #fff);
	--ct-line: rgba(18, 13, 38, .08);
	--ct-line-soft: rgba(18, 13, 38, .05);

	position: relative;
	padding: 104px 0 108px;
	/* Carries over the light-to-purple gradient the previous grid used,
	   so the page's section rhythm is unchanged. */
	background:
		radial-gradient(120% 80% at 50% 0%, #fff 0%, rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, var(--lp-soft, #fcfbf9) 0, #f4ecff 100%);
	overflow-x: clip;
}

/* A hairline seam, so the band reads as a deliberate stop rather than a
   gradient that simply ran out. */
.lp-casetabs::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg,
			rgba(101, 77, 255, 0) 0%,
			rgba(101, 77, 255, .22) 50%,
			rgba(101, 77, 255, 0) 100%);
}

/* ===== Section header ===== */

.lp-casetabs .lp-head {
	max-width: 780px;
	margin-bottom: 52px;
}

.lp-casetabs .lp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-size: 12.5px;
	letter-spacing: .16em;
}

/* Two short rules either side of the eyebrow, in the motion layer's own
   orange/purple pair. Decoration, so it is drawn in CSS. */
.lp-casetabs .lp-eyebrow::before,
.lp-casetabs .lp-eyebrow::after {
	content: "";
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--ao-m-orange, #FFA15C), var(--ao-m-blue, #8347EC));
}

.lp-casetabs .lp-eyebrow::after {
	transform: scaleX(-1);
}

.lp-casetabs .lp-heading {
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.16;
}

/* Second half of the heading, tinted as in the reference. */
.lp-casetabs .lp-ct-accent {
	background: linear-gradient(100deg, var(--lpc-primary, #654dff), var(--lpc-purple, #973dd9));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lp-casetabs .lp-lead {
	margin-top: 18px;
	font-size: 16.5px;
	line-height: 1.65;
}

/* =====================================================
 * Shell: index rail + story stage
 * ===================================================== */

.lp-casetabs .lp-ct {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

/* ===== Index ===== */

/* The index lies across the top of the stage at every width, so the
   rail is a full-width row rather than a sticky column beside it. */
.lp-casetabs .lp-ct-tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.lp-casetabs .lp-ct-rail-label {
	display: none;
	margin: 0 0 6px;
	padding-left: 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(18, 13, 38, .42);
}

.lp-casetabs .lp-ct-tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--ct-line);
	border-radius: 16px;
	background: rgba(255, 255, 255, .6);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition:
		background var(--ao-m-dur-mid, .28s) var(--ao-m-ease, ease),
		border-color var(--ao-m-dur-mid, .28s) var(--ao-m-ease, ease),
		box-shadow var(--ao-m-dur-mid, .28s) var(--ao-m-ease, ease),
		transform var(--ao-m-dur-mid, .28s) var(--ao-m-ease, ease);
}

/* The accent that marks the active story. Scaled rather than sized, so
   it never touches layout. Lying down, it underlines the card. */
.lp-casetabs .lp-ct-tab::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--ao-m-orange, #FFA15C), var(--ao-m-blue, #8347EC));
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .42s var(--ao-m-ease, ease);
}

.lp-casetabs .lp-ct-tab.is-active::after {
	transform: scaleX(1);
}

/* Icon well. Muted at rest; the whole card is the trigger, so the icon
   lights and animates from hover, focus and the active state. */
.lp-casetabs .lp-ct-tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(18, 13, 38, .05);
	color: rgba(18, 13, 38, .5);
	transition: background var(--ao-m-dur-mid, .28s) ease, color var(--ao-m-dur-mid, .28s) ease;
}

.lp-casetabs .lp-ct-tab-icon .ai-svg {
	width: 18px;
	height: 18px;
}

.lp-casetabs .lp-ct-tab-text {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.lp-casetabs .lp-ct-tab-title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 15.5px;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--lpc-ink, #111);
	transition: color var(--ao-m-dur-mid, .28s) ease;
}

.lp-casetabs .lp-ct-tab-index {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	color: rgba(18, 13, 38, .34);
	transition: color var(--ao-m-dur-mid, .28s) ease;
}

/* A caption rather than a pill: four pills of four different widths made
   the index ragged, and the category already repeats in the panel. */
.lp-casetabs .lp-ct-tab-cat {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.5;
	text-transform: uppercase;
	color: rgba(18, 13, 38, .42);
	transition: color var(--ao-m-dur-mid, .28s) ease;
}

@media (hover: hover) and (pointer: fine) {
	.lp-casetabs .lp-ct-tab:not(.is-active):hover {
		background: rgba(255, 255, 255, .78);
		border-color: var(--ct-line);
		transform: translateX(2px);
	}

	.lp-casetabs .lp-ct-tab:not(.is-active):hover .lp-ct-tab-icon {
		background: var(--lpc-primary-soft, #eef0ff);
		color: var(--lpc-primary, #654dff);
	}
}

.lp-casetabs .lp-ct-tab.is-active {
	background: var(--ct-surface);
	border-color: rgba(101, 77, 255, .16);
	box-shadow: 0 18px 40px -22px rgba(18, 13, 38, .45);
}

.lp-casetabs .lp-ct-tab.is-active .lp-ct-tab-icon {
	background: linear-gradient(140deg, rgba(101, 77, 255, .14), rgba(151, 61, 217, .14));
	color: var(--lpc-primary, #654dff);
}

.lp-casetabs .lp-ct-tab.is-active .lp-ct-tab-index,
.lp-casetabs .lp-ct-tab.is-active .lp-ct-tab-cat {
	color: var(--lpc-primary, #654dff);
}

/*
 * The radius is restated here on purpose, and the extra .lp-ct-tabs in
 * the selector is load-bearing.
 *
 * The premium skin gives every focusable thing on the page
 * `border-radius: var(--ao-r-sm)` so a control with no radius of its own
 * still gets a sane focus ring. One of those selectors is
 * `.lp-body [tabindex]:focus-visible`, and an attribute selector counts
 * as a class - so it ties `.lp-casetabs .lp-ct-tab:focus-visible` and
 * wins on load order. These cards carry a roving tabindex, so they all
 * match it, and keyboard focus snapped their corners from 16px to 8px.
 * The third class breaks the tie.
 */
.lp-casetabs .lp-ct-tabs .lp-ct-tab:focus-visible {
	outline: 2px solid var(--lpc-primary, #654dff);
	outline-offset: 3px;
	border-radius: 16px;
}

/* =====================================================
 * Story stage
 * ===================================================== */

.lp-casetabs .lp-ct-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 316px;
	gap: 44px;
	align-items: start;
	padding: 40px;
	border: 1px solid var(--ct-line);
	border-radius: 22px;
	background: var(--ct-surface);
	box-shadow: 0 34px 70px -46px rgba(18, 13, 38, .5);
}

/* display:grid would otherwise defeat the hidden attribute. */
.lp-casetabs .lp-ct-panel[hidden] {
	display: none;
}

/* ===== Copy column ===== */

.lp-casetabs .lp-ct-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lpc-primary, #654dff);
}

.lp-casetabs .lp-ct-kicker span {
	color: rgba(18, 13, 38, .38);
}

.lp-casetabs .lp-ct-title {
	margin: 0;
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.14;
	color: var(--lpc-ink, #111);
}

.lp-casetabs .lp-ct-sub {
	margin: 8px 0 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--lpc-sub, rgba(0, 0, 0, .62));
}

.lp-casetabs .lp-ct-summary {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--lpc-sub, rgba(0, 0, 0, .62));
}

/* One column, so the story reads as a sequence: the situation, then
   what changed. Side by side above 900px would put them in competition. */
.lp-casetabs .lp-ct-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 26px;
	margin-top: 30px;
}

.lp-casetabs .lp-ct-col-head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 12px;
}

.lp-casetabs .lp-ct-col-head .ai-svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
}

.lp-casetabs .lp-ct-col h4 {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(18, 13, 38, .55);
}

.lp-casetabs .lp-ct-col ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- The "before": recessed behind a hairline rule. The previous red
       dots read as an error state and were not in the palette. --- */

.lp-casetabs .lp-ct-col--challenges ul {
	padding-left: 16px;
	border-left: 2px solid rgba(18, 13, 38, .09);
}

.lp-casetabs .lp-ct-col--challenges li {
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(18, 13, 38, .66);
}

.lp-casetabs .lp-ct-col--challenges .lp-ct-col-head .ai-svg {
	color: rgba(18, 13, 38, .38);
}

/* --- The "after": checked, full contrast, figures pulled forward. --- */

.lp-casetabs .lp-ct-col--outcomes ul {
	gap: 11px;
}

.lp-casetabs .lp-ct-col--outcomes li {
	display: flex;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--lpc-ink, #111);
}

.lp-casetabs .lp-ct-tick {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: .35em;
	color: var(--lpc-primary, #654dff);
}

/* The leading figure of an outcome the client already wrote. Nothing is
   added or reworded: the number is set apart from the clause after it.
   A line with no leading figure renders plain. */
.lp-casetabs .lp-ct-fig {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--lpc-primary, #654dff);
}

/* Technology row. Present only for projects that supply a stack. */
.lp-casetabs .lp-ct-tech {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.lp-casetabs .lp-ct-tech li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border: 1px solid var(--ct-line);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--lpc-sub, rgba(0, 0, 0, .62));
}

.lp-casetabs .lp-ct-tech .ai-svg {
	width: 15px;
	height: 15px;
}

.lp-casetabs .lp-ct-cta {
	margin-top: 32px;
	padding-top: 26px;
	border-top: 1px solid var(--ct-line-soft);
}

.lp-casetabs .lp-ct-cta .lp-btn {
	height: 46px;
	max-height: 46px;
	border-radius: 8px;
}

/* ===== Media column ===== */

.lp-casetabs .lp-ct-media {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 18px;
	overflow: hidden;
	background: var(--lp-ct-media-bg, var(--lpc-dark, #120d26));
	box-shadow: 0 26px 54px -30px rgba(18, 13, 38, .75);
}

.lp-casetabs .lp-ct-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The artwork is a wide SVG of a handset. A small zoom brings the
	   device up to size in the portrait crop without crowding the chip
	   or the figure card. It is vector, so nothing softens. */
	transform: scale(1.05);
	transition: transform .6s var(--ao-m-ease, ease);
}

/* A scrim at each end: legible ground for the chip and the figure. */
.lp-casetabs .lp-ct-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(18, 13, 38, .5) 0, rgba(18, 13, 38, 0) 22%),
		linear-gradient(0deg, rgba(18, 13, 38, .72) 0, rgba(18, 13, 38, 0) 38%);
}

.lp-casetabs .lp-ct-chip {
	position: absolute;
	left: 14px;
	top: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 7px 12px 7px 9px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(18, 13, 38, .55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.lp-casetabs .lp-ct-chip .ai-svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

/* The headline figure. A card on the artwork's own floor rather than a
   sticker in its corner. */
.lp-casetabs .lp-ct-metric {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	margin: 0;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(12, 8, 28, .66);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
}

.lp-casetabs .lp-ct-metric-value {
	display: block;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
	background: linear-gradient(100deg, #fff 0%, #cbbcff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lp-casetabs .lp-ct-metric-label {
	display: block;
	margin-top: 5px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

@media (hover: hover) and (pointer: fine) {
	.lp-casetabs .lp-ct-panel:hover .lp-ct-media img {
		transform: scale(1.11);
	}
}

/* =====================================================
 * Responsive
 * ===================================================== */

/* --- 1280 and down: the stage tightens. --- */
@media (max-width: 1280px) {
	.lp-casetabs .lp-ct-panel {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 36px;
		padding: 34px;
	}
}

/* --- 900 and down: artwork leads, copy follows. --- */
@media (max-width: 900px) {
	.lp-casetabs {
		padding: 84px 0 88px;
	}

	.lp-casetabs .lp-head {
		margin-bottom: 40px;
	}

	.lp-casetabs .lp-ct-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 26px;
	}

	.lp-casetabs .lp-ct-media {
		order: -1;
		aspect-ratio: 16 / 10;
	}

	.lp-casetabs .lp-ct-media img {
		transform: scale(1.02);
	}

	/* Landscape artwork: the figure returns to a corner rather than
	   covering the frame edge to edge. */
	.lp-casetabs .lp-ct-metric {
		left: auto;
		right: 16px;
		bottom: 16px;
		min-width: 168px;
	}

	.lp-casetabs .lp-ct-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px;
	}

	@media (hover: hover) and (pointer: fine) {
		.lp-casetabs .lp-ct-panel:hover .lp-ct-media img {
			transform: scale(1.07);
		}
	}
}

/* --- 767 and down: the index becomes a snap scroller. --- */
@media (max-width: 767px) {
	.lp-casetabs .lp-ct-tabs {
		display: flex;
		grid-template-columns: none;
		gap: 10px;
		/* Full-bleed edges, so the first and last card sit against the
		   gutter rather than being clipped by it. */
		margin: 0 -24px;
		padding: 2px 24px 4px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.lp-casetabs .lp-ct-tabs::-webkit-scrollbar {
		display: none;
	}

	.lp-casetabs .lp-ct-tab {
		flex: 0 0 auto;
		width: 176px;
		/* The whole card is the target, well clear of 44px. */
		min-height: 88px;
		scroll-snap-align: center;
	}

	.lp-casetabs .lp-ct-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

/* --- 600 and down: one column throughout. --- */
@media (max-width: 600px) {
	.lp-casetabs {
		padding: 72px 0 76px;
	}

	.lp-casetabs .lp-heading {
		font-size: clamp(25px, 7vw, 32px);
	}

	.lp-casetabs .lp-lead {
		font-size: 15.5px;
	}

	.lp-casetabs .lp-ct-panel {
		gap: 22px;
		padding: 18px 18px 22px;
		border-radius: 18px;
	}

	/* The figure leaves the artwork below, so the media stops being a
	   clipping box: the image carries its own radius and shadow and
	   nothing is cut off. */
	.lp-casetabs .lp-ct-media {
		aspect-ratio: auto;
		overflow: visible;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.lp-casetabs .lp-ct-media img {
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: 14px;
		transform: none;
		box-shadow: 0 22px 44px -28px rgba(18, 13, 38, .85);
	}

	/* No longer a scrim over a figure; the chip carries its own ground. */
	.lp-casetabs .lp-ct-media::after {
		content: none;
	}

	@media (hover: hover) and (pointer: fine) {
		.lp-casetabs .lp-ct-panel:hover .lp-ct-media img {
			transform: none;
		}
	}

	/* On a phone the headline figure is the reason to keep reading, so
	   it leaves the artwork and becomes a card of its own, overlapping
	   the lower edge. */
	.lp-casetabs .lp-ct-metric {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		display: grid;
		min-width: 0;
		margin: -32px 10px 0;
		padding: 16px 18px;
		border-color: rgba(255, 255, 255, .1);
		background: linear-gradient(135deg, #171034 0%, #241546 100%);
		box-shadow: 0 18px 36px -22px rgba(18, 13, 38, .9);
	}

	.lp-casetabs .lp-ct-metric-value {
		font-size: 34px;
	}

	.lp-casetabs .lp-ct-title {
		font-size: 23px;
	}

	.lp-casetabs .lp-ct-cta {
		margin-top: 26px;
		padding-top: 22px;
	}

	.lp-casetabs .lp-ct-cta .lp-btn {
		width: 100%;
	}
}

/* --- 400 and down --- */
@media (max-width: 400px) {
	.lp-casetabs .lp-ct-tab {
		width: 162px;
	}

	.lp-casetabs .lp-ct-panel {
		padding: 14px 14px 20px;
	}
}

/* =====================================================
 * Reduced motion
 *
 * Every figure, every line and every icon still renders. Only the
 * travel is dropped. The count-up is suppressed centrally in
 * appagentix-motion.js, and the icons in appagentix-icons.css.
 * ===================================================== */

@media (prefers-reduced-motion: reduce) {

	.lp-casetabs .lp-ct-tab,
	.lp-casetabs .lp-ct-tab-icon,
	.lp-casetabs .lp-ct-tab-title,
	.lp-casetabs .lp-ct-tab-index,
	.lp-casetabs .lp-ct-tab-cat,
	.lp-casetabs .lp-ct-media img {
		transition: none;
	}

	/* The accent renders complete rather than drawing in. */
	.lp-casetabs .lp-ct-tab::after {
		transition: none;
	}

	.lp-casetabs .lp-ct-tab:not(.is-active):hover {
		transform: none;
	}

	.lp-casetabs .lp-ct-panel:hover .lp-ct-media img {
		transform: scale(1.05);
	}
}

/* =====================================================
 * Split media - About variant
 *
 * The reference composition (one large image beside the copy, ending in
 * a button) in the site's light palette. Scoped to --about so the other
 * split-media section keeps its staggered image grid.
 * ===================================================== */

/* Corner brackets off: the wrapper draws the top pair itself. */
.lp-splitmedia--frameless .lp-splitmedia__media::before,
.lp-splitmedia--frameless .lp-splitmedia__media::after {
	content: none;
}

.lp-splitmedia--frameless .lp-splitmedia__media {
	padding: 0;
}

.lp-splitmedia__cta {
	margin-top: 32px;
}

.lp-splitmedia__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
}

.lp-splitmedia__cta-icon svg {
	width: 100%;
	height: 100%;
}

/* ===== About variant ===== */

.lp-splitmedia--about {
	background: var(--lp-soft, #fcfbf9);
	overflow-x: hidden;
}

/* The copy runs longer than the artwork, so the columns stretch and the
   image fills its side rather than floating in the middle. */
.lp-splitmedia--about .lp-splitmedia__grid {
	grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
	gap: 60px;
	align-items: stretch;
}

.lp-splitmedia--about .lp-splitmedia__copy {
	align-self: center;
}

/* The base component resets this order below 1024px so its own section
   leads with copy. Here the artwork leads at every width: beside the copy
   when there are two columns, above it once they stack. */
.lp-splitmedia--about.lp-splitmedia--media-left .lp-splitmedia__copy {
	order: 2;
}

/* Two-tone heading: "About" in ink, the brand in the accent colour. */
/* The base component is built for a dark background, so the light
   variant has to reclaim every inherited white. */
.lp-splitmedia--about .lp-splitmedia__copy .lp-eyebrow {
	color: var(--lpc-primary);
}

.lp-splitmedia--about .lp-splitmedia__title {
	color: var(--lpc-ink);
}

.lp-splitmedia--about .lp-splitmedia__text strong {
	color: var(--lpc-ink);
}

.lp-splitmedia--about .lp-splitmedia__title .lp-sm-accent {
	color: var(--lpc-primary);
}

/* First paragraph carries the lead weight, as in the reference. */
.lp-splitmedia--about .lp-splitmedia__text:first-of-type {
	font-size: 17px;
	color: var(--lpc-ink);
}

.lp-splitmedia--about .lp-splitmedia__text {
	color: var(--lpc-sub);
}

.lp-splitmedia--about .lp-splitmedia__cols {
	height: 100%;
	gap: 0;
	align-items: stretch;
}

.lp-splitmedia--about .lp-splitmedia__item {
	height: 100%;
	min-height: 440px;
	aspect-ratio: auto;
	border-radius: 20px;
	overflow: hidden;
	background: var(--lpc-primary-soft, #eef0ff);
	box-shadow: var(--lp-shadow, 0 20px 45px rgba(18, 13, 38, .08));
}

.lp-splitmedia--about .lp-splitmedia__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.lp-splitmedia--about .lp-splitmedia__item:hover img {
	transform: scale(1.02);
}

/* ===== Responsive ===== */

@media (max-width: 1100px) {
	.lp-splitmedia--about .lp-splitmedia__grid {
		gap: 44px;
	}

	.lp-splitmedia--about .lp-splitmedia__item {
		min-height: 380px;
	}
}

@media (max-width: 900px) {
	/* Stacks: artwork leads, copy follows. */
	.lp-splitmedia--about .lp-splitmedia__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.lp-splitmedia--about .lp-splitmedia__item {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 767px) {
	.lp-splitmedia--about .lp-splitmedia__grid {
		gap: 28px;
	}

	.lp-splitmedia--about .lp-splitmedia__text:first-of-type {
		font-size: 16px;
	}

	.lp-splitmedia__cta {
		margin-top: 26px;
	}
}

@media (max-width: 640px) {
	.lp-splitmedia--about .lp-splitmedia__item {
		aspect-ratio: 4 / 3;
		border-radius: 16px;
	}

	/* Full-width button is easier to hit on a phone. */
	.lp-splitmedia__cta .lp-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-splitmedia--about .lp-splitmedia__item img,
	.lp-splitmedia--about .lp-splitmedia__item:hover img {
		transition: none;
		transform: none;
	}
}

/* =====================================================
 * Split media: single-image variant
 *
 * One photograph in place of the staggered grid. The stagger's
 * alternating aspect ratios are a composition device for four tiles;
 * applied to a lone card they would crop the image to 16/15 for no
 * reason, so the card takes the picture's own proportions instead and
 * nothing is cut off. Pair with 'columns' => 1.
 * ===================================================== */

.lp-splitmedia--single .lp-splitmedia__cols {
	gap: 0;
}

/* Selector shaped to match the stagger rules above: those are written as
   .lp-splitmedia__cols > .lp-splitmedia__item:nth-child(...), including
   one inside the <= 900px query, and a flatter selector here would lose
   to both on specificity at every width. */
.lp-splitmedia--single .lp-splitmedia__cols > .lp-splitmedia__item {
	aspect-ratio: auto;
	margin-top: 0;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(8, 4, 20, .45);
}

/* Height follows the intrinsic ratio rather than the frame, which is
   what keeps the whole photograph visible. */
.lp-splitmedia--single .lp-splitmedia__item img {
	height: auto;
	object-fit: contain;
}

/* =====================================================
 * Closing CTA band
 *
 * Same gradient and blurred orbs as the older .lp-cta, rebuilt under
 * .lp-ctab so the six sections still using .lp-cta across the four
 * landing pages are untouched. Single centred column.
 * ===================================================== */

.lp-ctab {
	position: relative;
	overflow: hidden;
	padding: 100px 0;
	text-align: center;
	background: linear-gradient(120deg, var(--lpc-dark), #2b1a55 55%, #4a2ef0);
	color: var(--lpc-white);
}

/* Two soft orbs, matching the existing band. Static by design: this sits
   directly above the footer and an animated gradient here would repaint
   for no benefit. */
.lp-ctab::before,
.lp-ctab::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .5;
	pointer-events: none;
}

.lp-ctab::before {
	width: 320px;
	height: 320px;
	left: -80px;
	top: -100px;
	background: var(--lpc-purple);
}

.lp-ctab::after {
	width: 380px;
	height: 380px;
	right: -120px;
	bottom: -140px;
	background: var(--lpc-primary);
}

.lp-ctab__inner {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: 0 auto;
}

.lp-ctab__eyebrow {
	margin: 0 0 14px;
	color: #b6a8ff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.lp-ctab__title {
	margin: 0 0 14px;
	font-size: clamp(28px, 3.6vw, 46px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--lpc-white);
}

/* Supporting line: styled text rather than a heading level, so the page's
   heading outline is unchanged. */
.lp-ctab__sub {
	margin: 0 0 24px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
	color: #b6a8ff;
}

.lp-ctab__text {
	margin: 0 auto 16px;
	max-width: 70ch;
	font-size: 16.5px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .8);
}

.lp-ctab__text:last-of-type {
	margin-bottom: 0;
}

.lp-ctab__micro {
	margin: 28px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .62);
}

/* Reassurance tags: the same copy as the single micro line, broken into
   pills so each claim reads on its own. */
.lp-ctab__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.lp-ctab__tag {
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	color: rgba(255, 255, 255, .86);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

.lp-ctab__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 26px;
}

/* Wider than the shared 30px-padding default so the band ends on a
   deliberate, prominent action. */
.lp-ctab__actions .lp-btn {
	min-width: 380px;
	padding: 0 44px;
}

.lp-ctab__link {
	color: rgba(255, 255, 255, .82);
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .25s ease;
}

.lp-ctab__link:hover {
	color: var(--lpc-white);
}

.lp-ctab .lp-btn:focus-visible,
.lp-ctab__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ===== Responsive =====
   The older .lp-cta has no responsive rules at all, so its 100px band and
   760px cap hold at every width. This one steps down instead. */

@media (max-width: 1100px) {
	.lp-ctab {
		padding: 88px 0;
	}
}

@media (max-width: 900px) {
	.lp-ctab {
		padding: 72px 0;
	}

	.lp-ctab__sub {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.lp-ctab {
		padding: 56px 0;
	}

	.lp-ctab__sub {
		margin-bottom: 20px;
		font-size: 17px;
	}

	.lp-ctab__text {
		font-size: 15px;
	}

	.lp-ctab__actions {
		gap: 14px;
	}

	/* The shared .lp-btn is a fixed 44px tall. This label wraps to two
	   lines at phone widths, so the box has to grow rather than clip it. */
	.lp-ctab__actions .lp-btn {
		width: 100%;
		/* Release the desktop min-width or it would overflow a 320px phone. */
		min-width: 0;
		height: auto;
		max-height: none;
		min-height: 48px;
		padding: 12px 20px;
		line-height: 1.35;
	}
}

@media (max-width: 640px) {
	.lp-ctab {
		padding: 48px 0;
	}

	.lp-ctab__micro {
		margin-top: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-ctab__link {
		transition: none;
	}
}

/* =====================================================
 * Phased process rail
 *
 * Sticky intro beside a numbered rail of phases, each holding its own
 * process items. Scoped to .lp-proc; the older flat .lp-process timeline
 * is shared by four sections across the landing pages and is untouched.
 * ===================================================== */

.lp-proc__grid {
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 62%);
	gap: 60px;
	/* start, so the sticky intro's containing block is the full row and it
	   has the whole rail's height to travel through. */
	align-items: start;
}

/* ===== Intro column ===== */

.lp-proc__intro {
	position: sticky;
	top: 120px;
}

.lp-proc__intro .lp-heading {
	margin-bottom: 14px;
}

.lp-proc__introhead {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--lpc-white);
}

.lp-proc__intro .lp-lead {
	margin: 0;
	max-width: 46ch;
	color: rgba(255, 255, 255, .78);
}

.lp-proc__cta {
	margin-top: 28px;
}

/* ===== Rail ===== */

.lp-proc__rail {
	position: relative;
	padding-left: 68px;
}

/* Fades out at the foot: the journey has a start, and the last phase is
   ongoing rather than a full stop. */
.lp-proc__rail::before {
	content: "";
	position: absolute;
	left: 23px;
	top: 6px;
	bottom: 10px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg,
		var(--lpc-purple) 0%,
		var(--lpc-primary) 46%,
		rgba(255, 255, 255, .07) 100%);
}

.lp-proc__phase {
	position: relative;
	padding-bottom: 42px;
}

.lp-proc__phase:last-child {
	padding-bottom: 0;
}

.lp-proc__badge {
	position: absolute;
	left: -68px;
	top: -2px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--lpc-primary), var(--lpc-purple));
	box-shadow: 0 12px 26px -10px rgba(101, 77, 255, .85);
	color: var(--lpc-white);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: transform .3s ease, box-shadow .3s ease;
}

.lp-proc__phase:hover .lp-proc__badge {
	transform: scale(1.06);
	box-shadow: 0 16px 32px -10px rgba(101, 77, 255, 1);
}

.lp-proc__label {
	margin: 0 0 5px;
	color: #b6a8ff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.lp-proc__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lpc-white);
}

/* ===== Process items =====
   Only the items are cards. The phase heading is not, which is what keeps
   phase > process > description legible at a glance. */

.lp-proc__items {
	display: grid;
	/* Fixed at two: auto-fit produced a third column once the rail went
	   full width below 900px. A phase with three items wraps to a second
	   row, which is the predictable result. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 18px;
}

.lp-proc__item {
	padding: 18px 18px 20px;
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 14px;
	background: rgba(255, 255, 255, .038);
	transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

a.lp-proc__item {
	display: block;
	text-decoration: none;
}

.lp-proc__item:hover {
	border-color: rgba(151, 61, 217, .5);
	background: rgba(255, 255, 255, .06);
	transform: translateY(-2px);
}

a.lp-proc__item:focus-visible {
	outline: 2px solid #b6a8ff;
	outline-offset: 3px;
}

.lp-proc__item h4 {
	margin: 0 0 8px;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lpc-white);
}

.lp-proc__item p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .72);
}

/* ===== Responsive ===== */

@media (max-width: 1100px) {
	.lp-proc__grid {
		gap: 40px;
	}

	.lp-proc__intro {
		top: 100px;
	}
}

@media (max-width: 900px) {
	/* Two narrow columns stop being readable here: the intro unsticks and
	   the rail takes the full width. */
	.lp-proc__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.lp-proc__intro {
		position: static;
	}

	.lp-proc__intro .lp-lead {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.lp-proc__rail {
		padding-left: 50px;
	}

	.lp-proc__rail::before {
		left: 16px;
	}

	.lp-proc__badge {
		left: -50px;
		top: 0;
		width: 38px;
		height: 38px;
		border-radius: 12px;
		font-size: 13px;
	}

	.lp-proc__title {
		font-size: 18px;
	}

	.lp-proc__phase {
		padding-bottom: 32px;
	}

	.lp-proc__items {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

@media (max-width: 640px) {
	.lp-proc__introhead {
		font-size: 17px;
	}

	.lp-proc__item {
		padding: 16px;
	}

	.lp-proc__cta .lp-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-proc__badge,
	.lp-proc__item {
		transition: none;
	}

	.lp-proc__phase:hover .lp-proc__badge,
	.lp-proc__item:hover {
		transform: none;
	}
}

/* =====================================================
 * AI capability data bus
 *
 * A signal rail with one station per capability above a detail panel.
 * The active station is set by click, by keyboard, by scroll position, or
 * by the optional timer - whichever the visitor drove last.
 * ===================================================== */

.lp-ai {
	position: relative;
	/* Gradient rather than flat dark, so it reads as a distinct surface
	   from the flat-dark tech section directly above it. */
	background:
		radial-gradient(58% 90% at 8% 6%, rgba(101, 77, 255, .22), rgba(101, 77, 255, 0) 62%),
		radial-gradient(52% 84% at 94% 96%, rgba(151, 61, 217, .20), rgba(151, 61, 217, 0) 64%),
		linear-gradient(150deg, #140c28 0%, #100a20 54%, #170e2c 100%);
}

/* Scroll markers: invisible, zero-size, one per capability, spaced down
   the section. The script observes which one crosses the viewport
   midline, so no scroll handler runs. */
.lp-ai__marks {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.lp-ai__mark {
	position: absolute;
	left: 0;
	width: 1px;
	/* A band, not a point. The observer root is collapsed to the viewport
	   midline, so exactly one band straddles it at any scroll position -
	   a 1px marker would be skipped between frames on a fast scroll. */
	height: calc(100% / var(--lp-ai-n, 6));
	top: calc(var(--k, 0) / var(--lp-ai-n, 6) * 100%);
}

.lp-ai__accent {
	background: linear-gradient(90deg, #a04add, #7c5cff);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lp-ai .lp-lead {
	max-width: 72ch;
}

/* ===== Bus shell ===== */

.lp-ai__bus {
	margin-top: 46px;
	padding: 28px 30px 30px;
	border: 1px solid rgba(255, 255, 255, .085);
	border-radius: 18px;
	background: rgba(255, 255, 255, .03);
}

.lp-ai__bushead {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 26px;
}

.lp-ai__buslabel {
	margin: 0;
	color: #b6a8ff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Revealed by script: with no JS there is no timer to pause. */
.lp-ai__pause[hidden] {
	display: none;
}

.lp-ai__pause {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 999px;
	background: rgba(255, 255, 255, .04);
	color: rgba(255, 255, 255, .72);
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	cursor: pointer;
	transition: color .25s ease, border-color .25s ease;
}

.lp-ai__pause:hover {
	color: var(--lpc-white);
	border-color: rgba(151, 61, 217, .6);
}

.lp-ai__pause:focus-visible {
	outline: 2px solid #b6a8ff;
	outline-offset: 3px;
}

.lp-ai__pauseicon {
	width: 8px;
	height: 9px;
	border-left: 3px solid #b6a8ff;
	border-right: 3px solid #b6a8ff;
}

/* Paused: the control offers play, so the glyph becomes a triangle. */
.lp-ai__pause[aria-pressed="true"] .lp-ai__pauseicon {
	width: 0;
	height: 0;
	border-left: 8px solid #b6a8ff;
	border-right: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

/* ===== Rail ===== */

.lp-ai__rail {
	position: relative;
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .1);
}

/* Station centres sit at (i + 0.5) / n of the rail, matching the equal
   grid columns below. */
.lp-ai__railfill,
.lp-ai__raildot {
	--lp-ai-pos: calc((var(--lp-ai-i, 0) + .5) / var(--lp-ai-n, 6) * 100%);
	transition: width .55s cubic-bezier(.4, 0, .2, 1), left .55s cubic-bezier(.4, 0, .2, 1);
}

.lp-ai__railfill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--lp-ai-pos);
	border-radius: 3px;
	background: linear-gradient(90deg, var(--lpc-primary), var(--lpc-purple));
}

.lp-ai__raildot {
	position: absolute;
	top: 50%;
	left: var(--lp-ai-pos);
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #b6a8ff;
	box-shadow: 0 0 16px var(--lpc-purple);
	transform: translate(-50%, -50%);
}

/* ===== Stations ===== */

.lp-ai__stations {
	display: grid;
	grid-template-columns: repeat(var(--lp-ai-n, 6), minmax(0, 1fr));
}

.lp-ai__station {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 0 6px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: center;
	cursor: pointer;
}

.lp-ai__station:focus-visible {
	outline: 2px solid #b6a8ff;
	outline-offset: 4px;
	border-radius: 8px;
}

.lp-ai__stationdot {
	width: 13px;
	height: 13px;
	margin-top: -8px;
	border: 2px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	background: #2a1d4d;
	transition: background .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.lp-ai__station.is-on .lp-ai__stationdot {
	background: #b6a8ff;
	border-color: var(--lpc-purple);
	transform: scale(1.3);
	box-shadow: 0 0 14px -2px var(--lpc-purple);
}

.lp-ai__stationlabel {
	font-size: 11.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .56);
	transition: color .3s ease;
}

.lp-ai__station.is-on .lp-ai__stationlabel {
	color: var(--lpc-white);
}

.lp-ai__stationnum {
	display: block;
	margin-bottom: 3px;
	color: rgba(255, 255, 255, .34);
	font-size: 10px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .08em;
	transition: color .3s ease;
}

.lp-ai__station.is-on .lp-ai__stationnum {
	color: #b6a8ff;
}

/* ===== Detail panel ===== */

.lp-ai__panels {
	margin-top: 28px;
}

.lp-ai__panel {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 20px;
	padding: 24px 26px;
	border: 1px solid rgba(151, 61, 217, .35);
	border-radius: 14px;
	background: rgba(151, 61, 217, .07);
}

/* display:grid would otherwise defeat the hidden attribute. */
.lp-ai__panel[hidden] {
	display: none;
}

.lp-ai__panel.is-on {
	animation: lp-ai-swap .45s ease both;
}

@keyframes lp-ai-swap {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.lp-ai__panelicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 13px;
	background: linear-gradient(135deg, rgba(101, 77, 255, .35), rgba(151, 61, 217, .3));
	color: #d7cfff;
}

.lp-ai__panelicon svg {
	width: 24px;
	height: 24px;
}

.lp-ai__paneltitle {
	display: flex;
	align-items: baseline;
	gap: 11px;
	margin: 0 0 9px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lpc-white);
}

.lp-ai__panelnum {
	color: #b6a8ff;
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lp-ai__paneltext {
	margin: 0;
	max-width: 74ch;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .74);
}

.lp-ai__panellink {
	display: inline-block;
	margin-top: 14px;
	color: #b6a8ff;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ===== Pipeline ===== */

.lp-ai__flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 18px 0 0;
	padding: 15px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
	list-style: none;
}

.lp-ai__node {
	position: relative;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.5;
	color: rgba(255, 255, 255, .56);
	/* Nodes light in sequence, reading as a signal crossing the pipeline. */
	animation: lp-ai-lit 3.6s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * .42s);
}

@keyframes lp-ai-lit {
	0%, 62%, 100% { color: rgba(255, 255, 255, .56); }
	10%, 34%      { color: var(--lpc-white); }
}

.lp-ai__node + .lp-ai__node::before {
	content: "";
	position: absolute;
	left: -11px;
	top: 50%;
	width: 6px;
	height: 1px;
	background: rgba(255, 255, 255, .18);
	transform: translateY(-50%);
}

.lp-ai__cta {
	margin-top: 34px;
	text-align: center;
}

/* ===== Responsive ===== */

@media (max-width: 1023px) {
	.lp-ai__bus {
		padding: 24px 22px 26px;
	}

	.lp-ai__stationlabel {
		font-size: 11px;
	}
}

@media (max-width: 860px) {
	/* Six stations across stops being legible; the rail gives way to a
	   two-row grid and the connecting line is dropped rather than drawn
	   through a wrap. */
	.lp-ai__rail {
		display: none;
	}

	.lp-ai__stations {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px 8px;
	}

	.lp-ai__stationdot {
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.lp-ai__bus {
		margin-top: 32px;
		padding: 20px 16px 22px;
	}

	.lp-ai__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 20px 18px;
	}

	.lp-ai__paneltitle {
		font-size: 16.5px;
	}

	.lp-ai__cta .lp-btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.lp-ai__stations {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	/* The rail still moves between stations, but instantly; the pipeline
	   stays fully legible with no travelling signal. */
	.lp-ai__railfill,
	.lp-ai__raildot,
	.lp-ai__stationdot,
	.lp-ai__stationlabel,
	.lp-ai__stationnum,
	.lp-ai__pause {
		transition: none;
	}

	.lp-ai__panel.is-on {
		animation: none;
	}

	.lp-ai__node {
		animation: none;
		color: rgba(255, 255, 255, .74);
	}
}

/* =====================================================
 * Engagement
 *
 * Three beats in the order the copy argues them: a filled panel making
 * the claim, a row of cards giving the options, and a split panel
 * holding the proof beside the standards it names.
 *
 * Nothing is behind a click. Entry motion and hover only, so every word
 * is in the document and reachable at every breakpoint.
 * ===================================================== */

.lp-engage {
	/* lp-components declares these aliases on an explicit list of
	   component roots; this is that list's newest member. */
	--lpc-primary: var(--lp-primary, #654dff);
	--lpc-purple: var(--lp-purple, #973dd9);
	--lpc-dark: var(--lp-dark, #120d26);
	--lpc-sub: var(--lp-sub, rgba(0, 0, 0, .62));
	--lpc-white: var(--lp-white, #fff);
}

/* ===== Project-manager panel ===== */

.lp-engage__pm {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 30px;
	align-items: start;
	padding: 42px 46px 44px;
	border-radius: var(--ao-r-lg, 20px);
	background: linear-gradient(140deg, var(--ao-m-blue, #8347EC) 0%, #6a34d4 100%);
	color: #fff;
	box-shadow: 0 30px 64px -22px rgba(131, 71, 236, .55);
}

/* Warm bloom in the corner - the one place the two accents meet, as on
   the bento grid's featured tile. */
.lp-engage__pm::after {
	content: "";
	position: absolute;
	top: -90px;
	right: -80px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 161, 92, .38), rgba(255, 161, 92, 0) 68%);
	pointer-events: none;
}

.lp-engage__pm > * {
	position: relative;
}

.lp-engage__pmicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--ao-r-md, 14px);
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
}

.lp-engage__pmicon svg {
	width: 28px;
	height: 28px;
}

.lp-engage__pm h3 {
	margin: 0 0 14px;
	font-size: clamp(21px, 2.2vw, 27px);
	line-height: 1.3;
	font-weight: 600;
	color: #fff;
}

.lp-engage__pm p {
	margin: 0;
	max-width: 70ch;
	font-size: 16px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .84);
}

/* ===== Engagement models ===== */

.lp-engage__subhead {
	margin: 64px 0 26px;
	font-size: clamp(20px, 2vw, 25px);
	line-height: 1.3;
	font-weight: 600;
	color: var(--lpc-dark);
}

.lp-engage__models {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-engage__model {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 28px 26px 28px 28px;
	border-radius: var(--ao-r-lg, 20px);
	border: 1px solid rgba(131, 71, 236, .14);
	background: #fff;
	box-shadow: var(--ao-shadow-sm, 0 2px 10px rgba(18, 13, 38, .06));
	transition:
		transform var(--ao-m-dur-mid, .28s) var(--ao-m-ease, ease),
		border-color var(--ao-m-dur-mid, .28s) ease,
		box-shadow var(--ao-m-dur-mid, .28s) ease;
}

/* Left rail, drawn top to bottom just behind the card's own arrival. */
.lp-engage__model::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--ao-m-blue, #8347EC), var(--color-border-orange, #FFA15C));
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform calc(var(--ao-m-dur, .62s) * 1.1) var(--ao-m-ease, ease);
	transition-delay: calc(var(--i, 0) * 70ms + 120ms);
}

.lp-engage__model.is-in::before {
	transform: scaleY(1);
}

.lp-engage__modelnum {
	display: block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
	color: var(--ao-blue-deep, #6a34d4);
	transition: color var(--ao-dur, .28s) var(--ao-ease, ease);
}

.lp-engage__model h4 {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--lpc-dark);
}

.lp-engage__model p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--lpc-sub);
}

@media (hover: hover) and (pointer: fine) {
	.lp-engage__model:hover {
		transform: translateY(-4px);
		border-color: var(--ao-m-orange, #FFA15C);
		box-shadow: 0 18px 42px -18px rgba(255, 161, 92, .45);
	}

	.lp-engage__model:hover .lp-engage__modelnum {
		color: var(--ao-orange-ink, #9E480C);
	}
}

/* ===== Compliance ===== */

.lp-engage__compliance {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 40px;
	align-items: center;
	margin-top: 60px;
	padding: 40px 44px;
	border-radius: var(--ao-r-lg, 20px);
	border: 1px solid rgba(131, 71, 236, .14);
	background: #fff;
	box-shadow: var(--ao-shadow-sm, 0 2px 10px rgba(18, 13, 38, .06));
}

.lp-engage__compliance h3 {
	margin: 0 0 14px;
	font-size: clamp(20px, 2vw, 25px);
	line-height: 1.3;
	font-weight: 600;
	color: var(--lpc-dark);
}

.lp-engage__compliance p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--lpc-sub);
}

.lp-engage__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-engage__badges li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 15px;
	border-radius: var(--ao-r-pill, 999px);
	background: var(--color-fill-blue, #DFCDFF);
	color: var(--ao-blue-deep, #6a34d4);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	opacity: 0;
	transform: translate3d(0, 8px, 0) scale(.96);
	transition:
		opacity var(--ao-m-dur-mid, .28s) var(--ao-m-ease, ease),
		transform var(--ao-m-dur-mid, .28s) var(--ao-m-ease, ease),
		background var(--ao-dur, .28s) var(--ao-ease, ease),
		color var(--ao-dur, .28s) var(--ao-ease, ease);
	transition-delay: calc(var(--i, 0) * 50ms + 140ms);
}

/* The chips stagger off the panel's own arrival rather than carrying
   .lp-reveal each, so the observer watches one element, not seven. */
.lp-engage__compliance.is-in .lp-engage__badges li {
	opacity: 1;
	transform: none;
}

.lp-engage__badges svg {
	width: 14px;
	height: 14px;
	flex: none;
}

@media (hover: hover) and (pointer: fine) {
	.lp-engage__badges li:hover {
		background: var(--color-fill-orange, #FFEEE1);
		color: var(--ao-orange-ink, #9E480C);
		transition-delay: 0s;
	}
}

/* ===== Responsive ===== */

@media (max-width: 1024px) {
	.lp-engage__models {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-engage__pm {
		padding: 36px 34px 38px;
		gap: 24px;
	}

	.lp-engage__compliance {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		padding: 34px 32px;
	}
}

@media (max-width: 767px) {
	.lp-engage__pm {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 30px 24px 32px;
	}

	.lp-engage__pmicon {
		width: 54px;
		height: 54px;
	}

	.lp-engage__subhead {
		margin: 48px 0 20px;
	}

	.lp-engage__compliance {
		margin-top: 44px;
		padding: 28px 24px 30px;
	}
}

@media (max-width: 640px) {
	.lp-engage__models {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.lp-engage__model {
		padding: 24px 22px 24px 24px;
	}

	.lp-engage__badges {
		gap: 8px;
	}

	.lp-engage__badges li {
		padding: 8px 13px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-engage__model::before {
		transform: none;
		transition: none;
	}

	.lp-engage__badges li {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =====================================================
 * Section head - consecutive leads
 *
 * .lp-lead carries no bottom margin, which was correct while every
 * .lp-head held exactly one. lp/why-choose.php can now be given a list
 * of paragraphs, so a second one needs separating from the first.
 * ===================================================== */

.lp-head .lp-lead + .lp-lead {
	margin-top: 14px;
}

/* =====================================================
 * Landing-page section overrides
 *
 * Two rules scoped to #lp-same-team, the section that renders
 * lp/why-choose.php a second time on the Atlanta mobile page. Both fix
 * behaviour in the page stylesheet that only shows up with this
 * section's content; scoping them by id leaves #lp-why-choose, and
 * every other page using the same component, exactly as it was.
 * ===================================================== */

/* .lp-why-grid--tri holds three columns down to 640px, which is tight
   at tablet width. */
@media (min-width: 641px) and (max-width: 900px) {
	#lp-same-team .lp-why-grid--tri {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* .lp-btn is locked to a 44px box in every page stylesheet. This CTA's
   label wraps to two lines on a 375px screen and was being clipped. */
@media (max-width: 480px) {
	#lp-same-team .lp-same-team-cta .lp-btn {
		height: auto;
		max-height: none;
		min-height: 44px;
		padding: 11px 24px;
		line-height: 1.45;
		text-align: center;
	}
}

/* =====================================================
 * Device chain
 *
 * The markup is template-parts/lp/device-chain.php. A rail crosses the
 * top of a horizontal track; each capability's icon sits on it as a
 * node with its card hanging below, and every segment takes its own
 * slice of one blue-to-orange ramp spanning the whole run. The set
 * therefore reads as a chain with a start and an end rather than as a
 * grid of peers.
 *
 * This replaces the 'chain' variant of .lp-cards, which was a 4x2 grid
 * of eight equal cards. Three things were wrong with it: nothing said
 * where the run began or ended, equal row heights left three of the
 * eight cards a third empty, and the page already carried four card
 * grids. That variant and its .lp-card__index are gone; this section
 * was their only caller.
 * ===================================================== */

.lp-chain {
	/* lp-components declares these aliases on an explicit list of
	   component roots; this is that list's newest member. */
	--lpc-primary: var(--lp-primary, #654dff);
	--lpc-dark: var(--lp-dark, #120d26);
	--lpc-sub: var(--lp-sub, rgba(0, 0, 0, .62));
	--lpc-white: var(--lp-white, #fff);

	/*
	 * --lp-chain-per is how many links the track shows at once, and the
	 * card width falls out of it, so the part-card at the right edge
	 * stays a consistent promise of more rather than a sliver at one
	 * width and a third of a card at another.
	 */
	--lp-chain-per: 3.4;
	--lp-chain-gap: 24px;
	--lp-chain-card:
		calc((100% - (var(--lp-chain-per) - 1) * var(--lp-chain-gap)) / var(--lp-chain-per));
	--lp-chain-node: 44px;
	--lp-chain-inset: 26px;

	/*
	 * The ground. The premium skin already paints #lp-chain with
	 * --ao-warm by id, so this does not set a background; it names the
	 * one already there, because the edge fades have to match it
	 * exactly.
	 */
	--lp-chain-ground: var(--ao-warm, #fffaf6);
}

/* ===== Header: claim left, supporting line and controls right =====
 *
 * Two columns, both load-bearing. Stacking heading, lead and controls
 * put 400px between the top of the section and the chain itself.
 */

.lp-chain__head {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	align-items: stretch;
	gap: 30px 64px;
	margin-bottom: 52px;
	text-align: left;
}

.lp-chain__head .lp-eyebrow,
.lp-chain__head .lp-heading {
	text-align: left;
}

.lp-chain__head .lp-heading {
	margin-bottom: 0;
	max-width: 16ch;
}

.lp-chain__aside {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 26px;
	padding-bottom: 6px;
}

.lp-chain__lead {
	margin: 0;
	max-width: 46ch;
	font-size: 17px;
	line-height: 1.75;
	color: var(--lpc-sub);
}

/* The controls row. Present because the track is a scroller, not
   because the header needed filling. */
.lp-chain__nav {
	display: flex;
	align-items: center;
	gap: 20px;
}

.lp-chain__progress {
	position: relative;
	width: 132px;
	height: 3px;
	border-radius: var(--ao-r-pill, 999px);
	background: rgba(18, 13, 38, .09);
	overflow: hidden;
}

/* Reads "how much of the run you have seen", so it starts at the share
   already on screen rather than at zero. The script writes the one
   custom property. */
.lp-chain__progress span {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ao-m-blue, #8347EC), var(--color-border-orange, #FFA15C));
	transform: scaleX(var(--lp-chain-p, .34));
	transform-origin: left center;
	transition: transform var(--ao-m-dur-mid, .28s) var(--ao-m-ease, ease);
}

.lp-chain__buttons {
	display: flex;
	gap: 10px;
}

.lp-chain__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(18, 13, 38, .14);
	background: var(--lpc-white);
	color: var(--lpc-dark);
	cursor: pointer;
	transition:
		transform var(--ao-dur, .28s) var(--ao-ease, ease),
		border-color var(--ao-dur, .28s) var(--ao-ease, ease),
		color var(--ao-dur, .28s) var(--ao-ease, ease),
		box-shadow var(--ao-dur, .28s) var(--ao-ease, ease),
		opacity var(--ao-dur, .28s) var(--ao-ease, ease);
}

.lp-chain__btn svg {
	width: 18px;
	height: 18px;
	display: block;
	transition: transform var(--ao-dur, .28s) var(--ao-ease, ease);
}

/* aria-disabled rather than the disabled attribute: the control stays
   in the tab order and keeps announcing itself at the end of the run. */
.lp-chain__btn[aria-disabled="true"] {
	opacity: .34;
	cursor: default;
}

.lp-chain__btn:active {
	transform: scale(.94);
}

@media (hover: hover) and (pointer: fine) {
	.lp-chain__btn:not([aria-disabled="true"]):hover {
		border-color: var(--ao-m-orange, #FFA15C);
		color: var(--ao-orange-ui, #D96C20);
		box-shadow: var(--ao-glow-orange, 0 18px 42px -18px rgba(255, 161, 92, .45));
	}

	.lp-chain__btn--prev:not([aria-disabled="true"]):hover svg {
		transform: translateX(-2px);
	}

	.lp-chain__btn--next:not([aria-disabled="true"]):hover svg {
		transform: translateX(2px);
	}
}

/* ===== The track ===== */

.lp-chain__viewport {
	position: relative;
}

/* Signals "the run continues" at whichever end still has links behind
   it, and gets out of the way at the end that does not, so a fade never
   sits over nothing. */
.lp-chain__viewport::before,
.lp-chain__viewport::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 88px;
	pointer-events: none;
	transition: opacity var(--ao-m-dur-mid, .28s) ease;
}

.lp-chain__viewport::before {
	left: 0;
	background: linear-gradient(270deg, rgba(255, 250, 246, 0), var(--lp-chain-ground) 84%);
	opacity: 0;
}

.lp-chain__viewport::after {
	right: 0;
	background: linear-gradient(90deg, rgba(255, 250, 246, 0), var(--lp-chain-ground) 84%);
	opacity: 1;
}

.lp-chain__viewport.is-scrolled::before {
	opacity: 1;
}

.lp-chain__viewport.is-end::after {
	opacity: 0;
}

/* Links hang from the rail at their own length. Forcing one row height
   is what left three of the eight old cards a third empty. */
.lp-chain__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--lp-chain-card);
	align-items: start;
	gap: var(--lp-chain-gap);
	/* Room for the hover lift and its shadow: overflow-x on a scroller
	   clips the y axis too. The negative margin keeps it off the flow. */
	margin: 0 0 -28px;
	padding: 0 0 36px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.lp-chain__track::-webkit-scrollbar {
	display: none;
}

.lp-chain__track:focus-visible {
	outline: 2px solid var(--color-border-blue, #8347EC);
	outline-offset: 6px;
	border-radius: var(--ao-r-md, 14px);
}

/* ===== One link of the chain ===== */

.lp-chain__link {
	position: relative;
	padding-top: calc(var(--lp-chain-node) / 2 + 22px);
	scroll-snap-align: start;
}

/*
 * The rail. Each link draws its own segment, bridging the gap to the
 * next one, and takes its slice of a single blue-to-orange ramp
 * spanning the whole run, so the set reads as one chain whatever the
 * breakpoint shows. --lp-chain-n is the link count and --i the index,
 * both emitted by device-chain.php.
 */
.lp-chain__link::before {
	content: "";
	position: absolute;
	top: calc(var(--lp-chain-node) / 2 - 1px);
	left: 0;
	right: calc(var(--lp-chain-gap) * -1);
	height: 2px;
	background: linear-gradient(90deg, var(--ao-m-blue, #8347EC), var(--color-border-orange, #FFA15C));
	background-size: calc(var(--lp-chain-n, 8) * 100%) 100%;
	background-position: calc(var(--i, 0) * 100% / (var(--lp-chain-n, 8) - 1)) 0;
	opacity: .34;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform calc(var(--ao-m-dur, .62s) * 1.2) var(--ao-m-ease, ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}

/* The run starts and ends on a node, not in mid-air: the first segment
   leaves the first node, the last one arrives at the last and stops. */
.lp-chain__link:first-child::before {
	left: calc(var(--lp-chain-inset) + var(--lp-chain-node) / 2);
}

.lp-chain__link:last-child::before {
	right: calc(100% - var(--lp-chain-inset) - var(--lp-chain-node) / 2);
}

.lp-chain__link.is-in::before {
	transform: scaleX(1);
}

/* The node sits on the rail, above the card it belongs to. */
.lp-chain__node {
	position: absolute;
	top: 0;
	left: var(--lp-chain-inset);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--lp-chain-node);
	height: var(--lp-chain-node);
	border-radius: 50%;
	background: var(--lpc-white);
	/* Each node's own point on the same ramp the rail draws. The flat
	   declaration first is the fallback where color-mix is unsupported. */
	border: 1.5px solid var(--ao-m-blue, #8347EC);
	border-color: color-mix(in oklab,
			var(--ao-m-blue, #8347EC),
			var(--color-border-orange, #FFA15C) calc(var(--i, 0) * 100% / (var(--lp-chain-n, 8) - 1)));
	color: var(--ao-m-blue, #8347EC);
	color: color-mix(in oklab,
			var(--ao-m-blue, #8347EC),
			var(--ao-orange-ui, #D96C20) calc(var(--i, 0) * 100% / (var(--lp-chain-n, 8) - 1)));
	transform: scale(.4);
	opacity: 0;
	transition:
		transform var(--ao-m-dur, .62s) var(--ao-m-ease, ease),
		opacity var(--ao-m-dur, .62s) ease,
		background var(--ao-m-dur-mid, .28s) ease,
		box-shadow var(--ao-m-dur-mid, .28s) ease;
	/* Lands just behind its own rail segment. */
	transition-delay: calc(var(--i, 0) * 70ms + 140ms);
}

.lp-chain__link.is-in .lp-chain__node {
	transform: none;
	opacity: 1;
}

.lp-chain__node svg {
	width: 21px;
	height: 21px;
	display: block;
}

/* ===== The card ===== */

.lp-chain__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px var(--lp-chain-inset) 28px;
	border-radius: var(--ao-r-md, 14px);
	/* Warm white, a half-step off the warm ground. Cool grey on a warm
	   surface is the mismatch the skin's token pass removed. */
	background: #fffdfb;
	border: 1px solid rgba(18, 13, 38, .07);
	transition:
		transform var(--ao-m-dur-mid, .28s) var(--ao-m-ease, ease),
		border-color var(--ao-m-dur-mid, .28s) ease,
		background-color var(--ao-m-dur-mid, .28s) ease,
		box-shadow var(--ao-m-dur-mid, .28s) ease;
}

.lp-chain__index {
	display: block;
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	font-variant-numeric: tabular-nums;
	color: rgba(18, 13, 38, .26);
	transition: color var(--ao-dur, .28s) var(--ao-ease, ease);
}

.lp-chain__title {
	margin: 0 0 12px;
	font-size: 19px;
	line-height: 1.34;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--lpc-dark);
	text-wrap: balance;
}

.lp-chain__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.72;
	color: var(--lpc-sub);
}

/* Active = the link at the reading edge of the track. Set by the
   observer in the page script, which watches the scroller itself. */
.lp-chain__link.is-active .lp-chain__card {
	background: var(--lpc-white);
	border-color: rgba(131, 71, 236, .26);
	box-shadow: var(--ao-shadow-md, 0 14px 30px -12px rgba(18, 13, 38, .18));
}

.lp-chain__link.is-active::before {
	opacity: 1;
}

.lp-chain__link.is-active .lp-chain__node {
	box-shadow: 0 0 0 5px rgba(131, 71, 236, .1);
}

.lp-chain__link.is-active .lp-chain__index {
	color: rgba(18, 13, 38, .5);
}

/* Pointer-gated: on touch there is no hover to leave, so a card would
   keep a state it was never given. */
@media (hover: hover) and (pointer: fine) {
	.lp-chain__link:hover .lp-chain__card {
		transform: translateY(-4px);
		background: var(--lpc-white);
		border-color: var(--ao-m-orange, #FFA15C);
		box-shadow: 0 18px 42px -18px rgba(255, 161, 92, .45);
	}

	.lp-chain__link:hover .lp-chain__index {
		color: var(--ao-orange-ui, #D96C20);
	}

	.lp-chain__link:hover .lp-chain__node {
		background: var(--color-fill-orange, #FFEEE1);
		box-shadow: 0 0 0 5px rgba(255, 161, 92, .16);
	}
}

/* ===== Responsive ===== */

@media (max-width: 1100px) {
	.lp-chain {
		--lp-chain-per: 3.15;
		--lp-chain-gap: 20px;
	}

	.lp-chain__head {
		margin-bottom: 44px;
	}
}

@media (max-width: 860px) {
	.lp-chain {
		--lp-chain-per: 2.3;
		--lp-chain-gap: 18px;
	}

	.lp-chain__head {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 22px;
	}

	.lp-chain__head .lp-heading {
		max-width: 100%;
	}

	.lp-chain__aside {
		gap: 22px;
		padding-bottom: 0;
	}

	.lp-chain__lead {
		max-width: 62ch;
	}

	.lp-chain__nav {
		justify-content: space-between;
		width: 100%;
	}

	.lp-chain__progress {
		flex: 1 1 auto;
		width: auto;
	}
}

/*
 * Under 768px the run turns vertical. Not a narrower version of the
 * track: a horizontal scroller is a poor way to promise breadth on a
 * phone, because the reader has to discover the rest rather than meet
 * it. The rail simply rotates, so the chain still reads as one
 * continuous run and every link is reached by scrolling the page.
 */
@media (max-width: 767px) {
	.lp-chain {
		--lp-chain-node: 40px;
	}

	/* Nothing left for them to drive. */
	.lp-chain__nav {
		display: none;
	}

	.lp-chain__viewport::before,
	.lp-chain__viewport::after {
		display: none;
	}

	.lp-chain__track {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: 16px;
		margin-bottom: 0;
		padding-bottom: 0;
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.lp-chain__link {
		padding-top: 0;
		padding-left: 62px;
	}

	.lp-chain__link::before {
		top: calc(var(--lp-chain-node) / 2);
		left: calc(var(--lp-chain-node) / 2 - 1px);
		right: auto;
		bottom: -16px;
		width: 2px;
		height: auto;
		background: linear-gradient(180deg, var(--ao-m-blue, #8347EC), var(--color-border-orange, #FFA15C));
		background-size: 100% calc(var(--lp-chain-n, 8) * 100%);
		background-position: 0 calc(var(--i, 0) * 100% / (var(--lp-chain-n, 8) - 1));
		transform: scaleY(0);
		transform-origin: top center;
	}

	/* The two desktop end-cap rules trim the run horizontally;
	   vertically the base rule already does it, so they are returned to
	   the default here. */
	.lp-chain__link:first-child::before {
		left: calc(var(--lp-chain-node) / 2 - 1px);
	}

	.lp-chain__link:last-child::before {
		right: auto;
		bottom: auto;
		height: 0;
	}

	.lp-chain__link.is-in::before {
		transform: scaleY(1);
	}

	.lp-chain__node {
		left: 0;
	}

	.lp-chain__card {
		padding: 22px 20px;
	}

	.lp-chain__index {
		position: absolute;
		top: 22px;
		right: 20px;
		margin: 0;
	}

	.lp-chain__title {
		font-size: 18px;
		padding-right: 34px;
	}
}

@media (max-width: 420px) {
	.lp-chain__link {
		padding-left: 54px;
	}

	.lp-chain__card {
		padding: 20px 18px;
	}
}

/* =====================================================================
 * Popup: fitting the form into short viewports
 *
 * The dialog panel carries `max-height: 100dvh - 32px` with
 * `overflow-y: auto`, so once the form is taller than the screen an
 * internal scrollbar appears. Measured intrinsic height is ~561px on
 * desktop and ~733px on a phone, which means the popup scrolled on
 * essentially every handset and on any laptop under ~593px of viewport
 * height - and a failed submit added another 60-160px on top.
 *
 * These rules compact the form as vertical space runs out, so the
 * scroller never engages. `overflow-y: auto` is deliberately left in
 * place: removing it would not create space, it would clip the submit
 * button, and an unreachable button is worse than a scrollbar.
 *
 * Everything here is scoped to `.lp-form-card--popup`, which only the
 * modal sets (template-parts/lp/lead-form.php:85). The inline form on
 * the landing pages is therefore untouched by construction.
 * ================================================================== */

/* --- Under ~760px tall: trim the chrome, not the fields ------------- */
@media (max-height: 760px) {

	.lp-form-card--popup .lp-form-inner {
		padding: 16px 22px 16px;
	}

	/* The badge is decoration; the title already carries the offer. */
	.lp-form-card--popup .lp-form-badge {
		display: none;
	}

	.lp-form-card--popup .lp-form-title {
		margin-bottom: 12px;
		font-size: 17px;
	}

	.lp-form-card--popup .lp-form-field {
		margin-bottom: 8px;
	}

	.lp-form-card--popup .lp-form-field label {
		margin-bottom: 4px;
	}

	/* The textarea is the single largest block in the form. */
	.lp-form-card--popup .lp-form-field textarea {
		min-height: 58px;
	}

	.lp-form-card--popup .lp-form-benefits {
		margin-top: 8px;
	}

	.lp-form-card--popup .lp-form-submit {
		margin-top: 10px;
	}

	.lp-form-card--popup .lp-form-note {
		margin-top: 8px;
		font-size: 11.5px;
		line-height: 1.45;
	}
}

/* --- Under ~620px tall: tighten the controls themselves ------------- */
@media (max-height: 620px) {

	.lp-form-card--popup .lp-form-inner {
		padding: 14px 18px 14px;
	}

	.lp-form-card--popup .lp-form-title {
		margin-bottom: 10px;
		font-size: 16px;
	}

	/* Name and email go back to sharing a row even on a narrow screen.
	   Below 640px the base rule stacks them, which costs a whole field
	   row that short viewports cannot spare. */
	.lp-form-card--popup .lp-form-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 10px;
	}

	.lp-form-card--popup .lp-form-field input,
	.lp-form-card--popup .lp-form-field select,
	.lp-form-card--popup .lp-form-field textarea,
	.lp-form-card--popup .lp-cc__toggle {
		padding-block: 9px;
	}

	.lp-form-card--popup .lp-form-field textarea {
		min-height: 48px;
	}

	.lp-form-card--popup .lp-form-note {
		font-size: 11px;
	}
}

/* --- Landscape phone: two columns is the only way it fits ----------- */
@media (orientation: landscape) and (max-height: 500px) {

	/* ~390px of height cannot hold four stacked field rows plus a
	   button, however tight the spacing. Pairing the rows is the only
	   layout that fits without scrolling. */
	.lp-modal {
		width: min(760px, calc(100vw - 24px));
		/* A smaller gutter buys back height, which is the scarce axis
		   here. Squeezing the form further would cost legibility. */
		max-height: calc(100dvh - 6px);
	}

	.lp-modal__panel {
		max-height: calc(100dvh - 6px);
	}

	.lp-form-card--popup .lp-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 14px;
	}

	/* The name/email row already holds two fields, so it spans both
	   columns and keeps its own internal split. */
	.lp-form-card--popup .lp-form-row {
		grid-column: 1 / -1;
	}

	.lp-form-card--popup .lp-form-benefits,
	.lp-form-card--popup .lp-form-submit,
	.lp-form-card--popup .lp-form-note {
		grid-column: 1 / -1;
	}

	.lp-form-card--popup .lp-form-field textarea {
		min-height: 36px;
	}

	.lp-form-card--popup .lp-form-inner {
		padding: 10px 16px 10px;
	}

	.lp-form-card--popup .lp-form-title {
		margin-bottom: 8px;
		font-size: 15px;
	}

	.lp-form-card--popup .lp-form-field {
		margin-bottom: 6px;
	}

	.lp-form-card--popup .lp-form-benefits {
		margin-top: 4px;
	}

	.lp-form-card--popup .lp-form-submit {
		margin-top: 6px;
	}

	.lp-form-card--popup .lp-form-note {
		margin-top: 6px;
		font-size: 10.5px;
		line-height: 1.4;
	}
}

/* --- Popup: the error state ----------------------------------------
 *
 * A failed submit adds the alert banner plus one message per invalid
 * field - about 160px - which pushed the popup back into scrolling on
 * every phone. These rules only apply while an alert is actually on
 * screen, so the resting form keeps its comfortable spacing.
 *
 * `:has()` is what makes that conditional possible in CSS; without it
 * the form would need a class toggled from JavaScript.
 * ------------------------------------------------------------------ */

.lp-form-card--popup .lp-form-alert {
	padding: 7px 11px;
	margin-bottom: 9px;
	font-size: 12.5px;
	line-height: 1.4;
}

.lp-form-card--popup .lp-form-err {
	font-size: 11.5px;
	line-height: 1.35;
}

.lp-form-card--popup .lp-form-err:not(:empty) {
	margin-top: 3px;
}

.lp-form-card--popup:has(.lp-form-alert:not(.is-hidden)) {

	/* Name and email pair up even on a narrow screen. One field row is
	   ~82px, which is most of what the error messages just consumed. */
	& .lp-form-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 10px;
	}

	& .lp-form-field {
		margin-bottom: 5px;
	}

	& .lp-form-field textarea {
		min-height: 42px;
	}

	& .lp-form-badge {
		display: none;
	}

	& .lp-form-title {
		margin-bottom: 9px;
		font-size: 16px;
	}

	& .lp-form-submit {
		margin-top: 8px;
	}

	/* The privacy line stays - it is consent copy, not decoration - but
	   it tightens up. */
	& .lp-form-note {
		margin-top: 6px;
		font-size: 11px;
		line-height: 1.4;
	}
}

/* --- Popup: landscape phone, showing errors -------------------------
 *
 * The hardest combination in the set: ~378px of usable height holding a
 * two-column form plus an alert and four messages. Everything here is
 * squeezed deliberately, and only for this combination - any other
 * viewport keeps the roomier spacing above.
 * ------------------------------------------------------------------ */
@media (orientation: landscape) and (max-height: 500px) {

	.lp-form-card--popup:has(.lp-form-alert:not(.is-hidden)) {

		& .lp-form-inner {
			padding: 6px 14px 6px;
		}

		& .lp-form-title {
			margin-bottom: 5px;
			font-size: 14px;
		}

		& .lp-form-alert {
			padding: 4px 9px;
			margin-bottom: 6px;
			font-size: 11.5px;
		}

		& .lp-form-field {
			margin-bottom: 2px;
		}

		& .lp-form-field label {
			margin-bottom: 2px;
			font-size: 12px;
		}

		& .lp-form-field textarea {
			min-height: 30px;
		}

		& .lp-form-submit {
			margin-top: 4px;
		}

		& .lp-form-submit {
			padding-block: 9px;
			font-size: 14px;
		}

		& .lp-form-benefits {
			margin-top: 2px;
		}

		& .lp-form-note {
			margin-top: 3px;
			font-size: 10px;
			line-height: 1.3;
		}
	}
}

/* =====================================================================
 * Popup: two-column layout
 *
 * Everything below is scoped to `.lp-modal--split`, a class only
 * template-parts/lp/modal.php sets. Two consequences worth stating:
 *
 *   1. The inline lead forms on the six location pages share every
 *      `.lp-form-*` class with the popup and are reached by none of
 *      these rules. That isolation is the safety mechanism, not a
 *      convention - the dark card they render is untouched.
 *
 *   2. The two-class prefix also outranks appagentix-premium.css, which
 *      loads after this file and restyles `.lp-form-card`, `.lp-btn` and
 *      the focus rings at one class. A single-class rule here would lose
 *      to it regardless of what it said.
 *
 * WHERE THE SCROLLER LIVES
 *
 * The panel clips (`overflow: hidden`) so one 24px radius rounds both
 * columns, and the close button sits inside it, in the form column's
 * top-right corner, rather than overhanging the shell - an overhang
 * needs the panel unclipped and was cut off by the viewport edge on
 * tablets. The scroller is `.lp-modal__main`, the only column whose
 * content can grow; the aside is fixed-length copy and never needs to
 * scroll. Below 768px the columns stack and the panel takes the
 * scroller again.
 *
 * As before, the aim is that the scroller never actually engages: the
 * short-viewport tiers at the end of this block compact the layout so
 * `scrollHeight <= clientHeight` holds. `overflow-y: auto` stays as a
 * safety valve, because removing it clips the submit button rather than
 * making room for it.
 *
 * Contents
 *   1. Shell and columns
 *   2. Close button
 *   3. Left panel
 *   4. Right column - white form skin
 *   5. Country dropdown on white
 *   6. Responsive: stacking
 *   7. Responsive: short viewports
 *   8. Motion: opening, closing and reduced motion
 * ================================================================== */

/* ---------------------------------------------------------------------
 * 1. Shell and columns
 * ------------------------------------------------------------------ */

/* Padding and borders inside the popup count toward declared sizes, so
   a field set to 100% or 48px is exactly that wide or tall. */
.lp-modal--split,
.lp-modal--split *,
.lp-modal--split *::before,
.lp-modal--split *::after {
	box-sizing: border-box;
}

/*
 * 56/44 rather than 60/40: at 40% the form column could not hold the
 * phone placeholder or the two extras on one line below ~1300px, and the
 * heading wrapped on tablets.
 */
/*
 * Never taller than 80% of the screen; the dialog's own auto margins
 * keep it centred on both axes, and the form column scrolls if a
 * screen is too short for it. vh first for browsers without dvh.
 */
.lp-modal--split {
	width: min(1200px, calc(100vw - 48px));
	max-height: 80vh;
	max-height: 80dvh;
}

.lp-modal--split::backdrop {
	background: rgba(10, 8, 22, .7);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.lp-modal--split .lp-modal__panel--split {
	display: grid;
	grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
	max-height: 80vh;
	max-height: 80dvh;
	/* See "where the scroller lives" above. */
	overflow: hidden;
	border-radius: 24px;
	background: var(--surface, #fff);
	/* A hairline ring keeps the edge crisp against the dark overlay. */
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .08),
		0 32px 80px -16px rgba(8, 6, 20, .6);
}

/* ---------------------------------------------------------------------
 * 2. Close button
 *
 * Inside the shell, in the form column's top-right corner, on the white
 * it sits over. The form heading reserves room for it (see
 * .lp-form-title below), so the two never touch.
 * ------------------------------------------------------------------ */

.lp-modal--split .lp-modal__close {
	top: 14px;
	right: 14px;
	width: 38px;
	height: 38px;
	border: 1px solid #e6e4f2;
	background: #f5f4fb;
	color: var(--ink-soft, #3f3d4d);
	box-shadow: none;
	transition:
		background-color .2s var(--ease, ease),
		border-color .2s var(--ease, ease),
		color .2s var(--ease, ease);
}

.lp-modal--split .lp-modal__close:hover {
	border-color: rgba(101, 77, 255, .32);
	background: rgba(101, 77, 255, .1);
	color: var(--brand, #654dff);
}

.lp-modal--split .lp-modal__close:focus-visible {
	outline: 2px solid var(--brand, #654dff);
	outline-offset: 2px;
}

.lp-modal--split .lp-modal__close svg {
	width: 16px;
	height: 16px;
}

/* ---------------------------------------------------------------------
 * 3. Left panel
 * ------------------------------------------------------------------ */

.lp-modal--split .lp-modal__aside {
	display: flex;
	min-width: 0;
	/* min-height:0 lets the column shrink inside the grid instead of
	   forcing the panel past its max-height. */
	min-height: 0;
	overflow: hidden;
	/* Same top padding as .lp-form-inner, so the two headings align. */
	padding: 32px 40px 28px;
	/* The panel's own clip rounds the outer corners. A faint light from
	   the top-left corner gives the flat gradient some depth. */
	background:radial-gradient(circle at 12% 10%,rgba(91,61,245,0.58) 0,rgba(91,61,245,0) 42%),radial-gradient(ellipse 60% 55% at 55% 112%,rgba(226,63,159,0.3) 0,rgba(226,63,159,0) 60%),radial-gradient(circle at 94% 96%,rgba(255,138,0,0.3) 0,rgba(255,138,0,0) 24%),#100C24;
	color: #fff;
}

.lp-modal--split .lp-modal__aside-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}

.lp-modal--split .lp-modal__aside-title {
	margin: 0 0 12px;
	font-size: clamp(1.4rem, 1.1rem + .8vw, 1.85rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: #fff;
	text-wrap: balance;
}

.lp-modal--split .lp-modal__aside-text {
	max-width: 52ch;
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .86);
}

/*
 * The reassurances follow the copy directly, so heading, copy and points
 * read as one block from the top - level with the form heading - and the
 * leftover height collects in a single gap above the logo band (which
 * takes `margin-top: auto`). Centring the points instead split that
 * space into two gaps and left them floating mid-panel.
 */
.lp-modal--split .lp-modal__points {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* The bottom margin is the least room the band's rule ever gets;
	   flex margins do not collapse, so the band's auto margin adds to
	   it rather than replacing it. */
	margin: 24px 0 24px;
	padding: 0;
	list-style: none;
}

.lp-modal--split .lp-modal__point {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, .95);
}

/*
 * A chip rather than a bare glyph, so the three rows read as a set
 * and the registry icons have something to sit on.
 */
.lp-modal--split .lp-modal__point-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .13);
	color: #fff;
	transition: background .2s var(--ease, ease),
		border-color .2s var(--ease, ease);
}

.lp-modal--split .lp-modal__point:hover .lp-modal__point-icon {
	border-color: rgba(255, 255, 255, .42);
	background: rgba(255, 255, 255, .2);
}

.lp-modal--split .lp-modal__point-icon svg {
	width: 18px;
	height: 18px;
}

/*
 * appagentix-icons.css paints a hovered [data-ai-trigger]'s icon
 * with --ai-color-hover, which is the brand purple - invisible on
 * this panel. The icon keeps the row's own colour instead; the
 * animation still plays, which is the part worth having.
 */
.lp-modal--split .lp-modal__point .ai-ico,
.lp-modal--split .lp-modal__point:hover .ai-ico {
	color: inherit;
}

/* The logo band sits on the panel floor however tall the copy runs. A
   hairline above it marks it as the panel's footer, so the space above
   reads as deliberate rather than left over. */
.lp-modal--split .lp-modal__trusted {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.lp-modal--split .lp-modal__trusted-label {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

/*
 * The logo band.
 *
 * Same seamless technique as the homepage marquee - the list is
 * printed twice and the track animates to exactly -50%, so the
 * duplicate arrives where the original began and there is no seam and
 * no trailing gap. Declared here rather than reused from
 * homepage.css, which only loads on the front page: this popup also
 * renders on the six location pages, where that file is absent.
 *
 * One transform on one element, so the compositor handles it without
 * touching layout. No JavaScript and no clones made at runtime.
 */
.lp-modal--split .lp-modal__marquee {
	position: relative;
	overflow: hidden;
	/* Fades the logos out at both edges instead of cutting them dead. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.lp-modal--split .lp-modal__marquee-viewport {
	display: flex;
	width: max-content;
}

.lp-modal--split .lp-modal__marquee-track {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0 7px;
	list-style: none;
	animation: lp-modal-marquee var(--lp-modal-marquee-speed, 34s) linear infinite;
}

.lp-modal--split .lp-modal__marquee-item {
	flex: 0 0 auto;
	margin: 0;
}

/* The translucent card and its border are baked into each PNG, so
   nothing is drawn around them here. */
.lp-modal--split .lp-modal__marquee-item img {
	display: block;
	width: auto;
	height: 30px;
	opacity: .95;
}

@keyframes lp-modal-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Hovering the band stops it, so a logo can be read. */
.lp-modal--split .lp-modal__marquee:hover .lp-modal__marquee-track,
.lp-modal--split .lp-modal__marquee:focus-within .lp-modal__marquee-track {
	animation-play-state: paused;
}

/* The shared in-view observer adds .is-visible. Until it does the
   track is not animating, so a closed dialog costs no compositor
   time. */
.lp-modal--split .lp-modal__marquee[data-inview]:not(.is-visible) .lp-modal__marquee-track {
	animation-play-state: paused;
}

/* The loop stops and the row becomes scrollable, so every logo stays
   reachable rather than frozen off screen. */
@media (prefers-reduced-motion: reduce) {

	.lp-modal--split .lp-modal__marquee {
		-webkit-mask-image: none;
		mask-image: none;
		overflow-x: auto;
	}

	.lp-modal--split .lp-modal__marquee-track {
		animation: none;
	}

	.lp-modal--split .lp-modal__marquee-viewport > .lp-modal__marquee-track[aria-hidden="true"] {
		display: none;
	}
}

/*
 * The PNGs carry their own translucent card and a white mark, drawn for
 * a purple ground - which is what this panel is. So no card is drawn
 * around them here either; only the height is normalised, since the
 * source files run 125-252px wide at 56-66px tall.
 */
/* Sizing for the band lives with .lp-modal__marquee-item above. */

/* ---------------------------------------------------------------------
 * 4. Right column - white form skin
 *
 * The form markup is the same markup the location pages render. Only
 * its colours, spacing and radii change here.
 * ------------------------------------------------------------------ */

.lp-modal--split .lp-modal__main {
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	background: var(--surface, #fff);
}

.lp-modal--split .lp-form-card--popup {
	border-radius: 0;
	background: var(--surface, #fff);
	box-shadow: none;
	color: var(--ink, #14121c);
}

/* The gradient ring belongs to the dark card; on white it reads as a
   stray outline. */
.lp-modal--split .lp-form-glow {
	display: none;
}

.lp-modal--split .lp-form-inner {
	padding: 32px 36px 28px;
}

/* The column's padding is the only space under the note. A page in
   quirks mode gives every <form> a 1em bottom margin (the homepage
   currently renders that way), which added ~22px of empty space. */
.lp-modal--split .lp-form {
	margin: 0;
}

.lp-modal--split .lp-form-title {
	/* Clears the close button in the column's top-right corner. */
	padding-right: 36px;
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--ink, #14121c);
}

/*
 * The reference labels its fields with placeholders alone. The <label>
 * elements stay in the DOM and keep their for/id pairing, the error
 * wiring and the required marker - they are taken out of sight, not out
 * of the accessibility tree. Deleting them would break
 * aria-describedby and silence the validation messages.
 */
.lp-modal--split .lp-form-field > label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * One field per row. The 40% column is 440px at 1440 and 397px at
 * 1024; paired, that leaves each field ~150px against the 170px the
 * email placeholder needs. Since the visible label IS the
 * placeholder here, clipping it would leave the field unlabelled.
 */
.lp-modal--split .lp-form-row {
	grid-template-columns: minmax(0, 1fr);
}

/* One 12px rhythm: every field, the extras and the note sit this far
   from what precedes them; the button takes a little more. */
.lp-modal--split .lp-form-field {
	margin-bottom: 12px;
}

.lp-modal--split .lp-form-field input,
.lp-modal--split .lp-form-field select,
.lp-modal--split .lp-form-field textarea,
.lp-modal--split .lp-cc__toggle {
	max-width: 100%;
	border-radius: 12px;
	border: 1px solid #e2e1ee;
	background: #f8f8fc;
	color: var(--ink, #14121c);
	font-size: 15px;
	transition:
		border-color .2s var(--ease, ease),
		background-color .2s var(--ease, ease),
		box-shadow .2s var(--ease, ease);
}

/*
 * One height for every single-line control. Named one by one rather
 * than as `.lp-form-field input`, which would also catch the search box
 * inside the country dropdown.
 */
.lp-modal--split .lp-form-field > input,
.lp-modal--split .lp-phone-number,
.lp-modal--split .lp-phone-select:not(.lp-phone-select--enhanced),
.lp-modal--split .lp-cc__toggle {
	height: 48px;
	padding-block: 0;
	padding-inline: 16px;
	line-height: 1.4;
}

.lp-modal--split .lp-form-field input::placeholder,
.lp-modal--split .lp-form-field textarea::placeholder {
	color: #9a9aad;
	opacity: 1;
}

.lp-modal--split .lp-form-field input:hover,
.lp-modal--split .lp-form-field textarea:hover,
.lp-modal--split .lp-cc__toggle:hover {
	border-color: #cfcfe2;
}

.lp-modal--split .lp-form-field input:focus,
.lp-modal--split .lp-form-field select:focus,
.lp-modal--split .lp-form-field textarea:focus,
.lp-modal--split .lp-form input:focus-visible,
.lp-modal--split .lp-form textarea:focus-visible,
.lp-modal--split .lp-cc__toggle:focus-visible {
	outline: none;
	border-color: var(--brand, #654dff);
	background: var(--surface, #fff);
	box-shadow: 0 0 0 4px rgba(101, 77, 255, .12);
}

/* A height rather than a min-height: rows="4" alone is ~125px tall,
   which a smaller minimum would never undercut. Still resizable. */
.lp-modal--split .lp-form-field textarea {
	display: block;
	height: 96px;
	min-height: 72px;
	padding: 13px 16px;
	line-height: 1.55;
}

/* --- Phone row ------------------------------------------------------ */

/* Code and number share one 48px line; the number takes what is left. */
.lp-modal--split .lp-phone {
	gap: 10px;
}

/* Where the number gets narrow, its placeholder ends in an ellipsis
   rather than being cut mid-letter. */
.lp-modal--split .lp-phone-number {
	text-overflow: ellipsis;
}

/* Once the custom dropdown replaces it, the native select stays in the
   form visually hidden at 1px - but `.lp-form-field select` sets
   width:100% at a higher specificity, so the hidden box spanned the
   column and poked past its edge. Restated here for the popup. */
.lp-modal--split .lp-phone-select--enhanced {
	width: 1px;
	height: 1px;
	padding: 0;
}

.lp-modal--split .lp-cc__toggle {
	gap: 8px;
	padding-inline: 14px;
}

/* The caret was drawn in 60% white for the dark card - invisible on
   the light field. */
.lp-modal--split .lp-cc__caret {
	width: 8px;
	height: 8px;
	border-right-color: #8d8ba6;
	border-bottom-color: #8d8ba6;
}

.lp-modal--split .lp-cc__toggle:hover .lp-cc__caret,
.lp-modal--split .lp-cc__toggle[aria-expanded="true"] .lp-cc__caret {
	border-right-color: var(--brand, #654dff);
	border-bottom-color: var(--brand, #654dff);
}

/* --- Error state on white ------------------------------------------ */

.lp-modal--split .lp-form-field.has-error input,
.lp-modal--split .lp-form-field.has-error select,
.lp-modal--split .lp-form-field.has-error textarea,
.lp-modal--split .lp-form-field.has-error .lp-cc__toggle {
	border-color: #e0483c;
	background: #fef4f3;
}

.lp-modal--split .lp-form-err {
	color: #c9372c;
}

.lp-modal--split .lp-form-alert {
	background: #fef4f3;
	border: 1px solid #f3c6c1;
	color: #a3281e;
}

.lp-modal--split .lp-req {
	color: var(--brand, #654dff);
}

/* --- The two optional extras, on white ----------------------------- */

/* The textarea's field margin already spaces this from above. */
.lp-modal--split .lp-form-benefits {
	margin-top: 0;
	gap: 10px 24px;
}

.lp-modal--split .lp-form-benefit {
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--ink-soft, #3f3d4d);
}

.lp-modal--split .lp-form-benefit:hover {
	color: var(--ink, #14121c);
}

.lp-modal--split .lp-form-benefit__box {
	width: 20px;
	height: 20px;
	padding: 3px;
	border-radius: 6px;
	border: 1.5px solid #c9c8db;
	background: var(--surface, #fff);
	color: #fff;
	transition:
		background-color .2s var(--ease, ease),
		border-color .2s var(--ease, ease);
}

.lp-modal--split .lp-form-benefit:hover .lp-form-benefit__box {
	border-color: var(--brand, #654dff);
}

/* Ticked: a filled brand square with a white tick. */
.lp-modal--split .lp-form-benefit__input:checked + .lp-form-benefit__box {
	border-color: var(--brand, #654dff);
	background: var(--brand, #654dff);
}

.lp-modal--split .lp-form-benefit__input:focus-visible + .lp-form-benefit__box {
	outline: 2px solid var(--brand, #654dff);
	outline-offset: 2px;
}

/* --- Submit -------------------------------------------------------- */

/*
 * Light purple into deep violet. The gradient is drawn twice as wide as
 * the button and slides on hover, which is how a gradient can change
 * colour smoothly - gradients themselves cannot be transitioned.
 *
 * Three classes on the states: appagentix-premium.css loads later and
 * restyles `.lp-btn--primary:hover` at two.
 */
.lp-modal--split .lp-form-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 50px;
	min-height: 50px;
	margin-top: 16px;
	padding: 0 24px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(120deg,
			#9a6cff 0%,
			var(--brand-alt, #8347ec) 40%,
			#6c35dd 70%,
			#5a25c6 100%);
	background-size: 200% 100%;
	background-position: 0% 50%;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	box-shadow: 0 10px 24px -12px rgba(101, 77, 255, .7);
	transition:
		background-position .3s var(--ease, ease),
		transform .2s var(--ease, ease),
		box-shadow .25s var(--ease, ease),
		opacity .2s var(--ease, ease);
}

.lp-modal--split .lp-form-submit:hover {
	background: linear-gradient(120deg,
			#9a6cff 0%,
			var(--brand-alt, #8347ec) 40%,
			#6c35dd 70%,
			#5a25c6 100%);
	background-size: 200% 100%;
	background-position: 100% 50%;
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -14px rgba(101, 77, 255, .8);
}

.lp-modal--split .lp-form-submit:active {
	transform: translateY(0);
	box-shadow: 0 8px 18px -10px rgba(101, 77, 255, .7);
}

.lp-modal--split .lp-form-submit:focus-visible {
	outline: 3px solid rgba(101, 77, 255, .38);
	outline-offset: 3px;
}

/* While it submits it stays put: no lift, and the spinner says busy. */
.lp-modal--split .lp-form-submit[disabled],
.lp-modal--split .lp-form-submit[disabled]:hover {
	transform: none;
	opacity: .72;
	box-shadow: none;
	cursor: progress;
}

/*
 * The send glyph from the reference, drawn as a mask rather than added
 * to the markup - this task changes no form markup, and a mask inherits
 * currentColor so it stays correct against the gradient. Same paper
 * plane as the `send` entry in inc/icons.php.
 */
.lp-modal--split .lp-form-submit::after {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: var(--lp-send-glyph) center / contain no-repeat;
	mask: var(--lp-send-glyph) center / contain no-repeat;
}

.lp-modal--split {
	--lp-send-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
}

/* While the form is submitting the spinner speaks for the button. */
.lp-modal--split .lp-form-card.is-busy .lp-form-submit::after {
	display: none;
}

.lp-modal--split .lp-form-note {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink-muted, #6b7280);
}

.lp-modal--split .lp-form-note a {
	color: var(--brand, #654dff);
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * 5. Country dropdown on white
 *
 * The listbox lead-form.js builds is styled for the dark card. It opens
 * inside the white column, so it is recoloured here - structure, sizing
 * and behaviour are left exactly as they are.
 * ------------------------------------------------------------------ */

.lp-modal--split .lp-cc__panel {
	border-color: #e3e3ee;
	background: var(--surface, #fff);
	box-shadow: 0 24px 48px rgba(20, 18, 28, .18);
}

.lp-modal--split .lp-cc__search {
	border-color: #e3e3ee;
	background: #f7f7fc;
	color: var(--ink, #14121c);
}

.lp-modal--split .lp-cc__item {
	color: var(--ink-soft, #3f3d4d);
}

.lp-modal--split .lp-cc__item:hover,
.lp-modal--split .lp-cc__item.is-active {
	background: rgba(101, 77, 255, .1);
}

.lp-modal--split .lp-cc__item.is-selected {
	background: rgba(101, 77, 255, .16);
}

.lp-modal--split .lp-cc__code,
.lp-modal--split .lp-cc__empty {
	color: var(--ink-muted, #6b7280);
}

/* ---------------------------------------------------------------------
 * 6. Responsive: stacking
 * ------------------------------------------------------------------ */

/* Tablet and small laptop: even columns, so the form keeps room for its
   controls. 1100 rather than 1023: at 1024 the 44% column wrapped the
   form heading. */
@media (max-width: 1100px) {

	.lp-modal--split .lp-modal__panel--split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.lp-modal--split .lp-phone {
		gap: 8px;
	}

	.lp-modal--split .lp-cc__toggle {
		padding-inline: 12px;
	}

	.lp-modal--split .lp-phone-number {
		padding-inline: 14px;
	}

	.lp-modal--split .lp-modal__aside {
		padding: 28px 28px 24px;
	}

	.lp-modal--split .lp-form-inner {
		padding: 28px 28px 24px;
	}

	.lp-modal--split .lp-modal__close {
		top: 12px;
		right: 12px;
	}

	.lp-modal--split .lp-form-title {
		font-size: 20px;
	}

	.lp-modal--split .lp-modal__marquee-item img {
		height: 26px;
	}
}

/*
 * Below 768px the columns stack and the panel is the scroller again.
 * The close button now sits over the gradient header, so it turns
 * translucent dark with a white cross, and it is 40px - an easy tap.
 * The paragraph and the three reassurances are the parts that go: they
 * are reassurance, not instruction, and on a phone the form is what the
 * visitor came for.
 */
@media (max-width: 767px) {

	.lp-modal--split {
		width: calc(100vw - 24px);
		max-height: calc(100dvh - 24px);
	}

	.lp-modal--split .lp-modal__panel--split {
		grid-template-columns: minmax(0, 1fr);
		max-height: calc(100dvh - 24px);
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		border-radius: 20px;
	}

	.lp-modal--split .lp-modal__main {
		overflow: visible;
	}

	.lp-modal--split .lp-modal__close {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
		border-color: rgba(255, 255, 255, .22);
		background: rgba(10, 8, 24, .32);
		color: #fff;
	}

	.lp-modal--split .lp-modal__close:hover {
		border-color: rgba(255, 255, 255, .4);
		background: rgba(10, 8, 24, .48);
		color: #fff;
	}

	.lp-modal--split .lp-modal__aside {
		padding: 22px 22px 20px;
	}

	.lp-modal--split .lp-modal__aside-title {
		margin-bottom: 0;
		padding-right: 46px;
		font-size: 1.2rem;
	}

	.lp-modal--split .lp-modal__aside-text,
	.lp-modal--split .lp-modal__points {
		display: none;
	}

	/* Directly under the heading here, so no footer rule. */
	.lp-modal--split .lp-modal__trusted {
		padding-top: 16px;
		border-top: 0;
	}

	.lp-modal--split .lp-modal__trusted-label {
		margin-bottom: 9px;
	}

	.lp-modal--split .lp-modal__marquee-item img {
		height: 22px;
	}

	.lp-modal--split .lp-form-inner {
		padding: 20px 18px 18px;
	}

	/* The button is over the header now, not this heading. */
	.lp-modal--split .lp-form-title {
		padding-right: 0;
		margin-bottom: 14px;
		font-size: 19px;
	}

	/* 16px text: iOS zooms the page into any field set smaller. Field
	   heights and gaps are the compact desktop ones. */
	.lp-modal--split .lp-form-field input,
	.lp-modal--split .lp-form-field select,
	.lp-modal--split .lp-form-field textarea,
	.lp-modal--split .lp-cc__toggle {
		font-size: 16px;
	}

	.lp-modal--split .lp-form-benefits {
		gap: 10px 18px;
	}

	.lp-modal--split .lp-form-submit {
		height: 48px;
		min-height: 48px;
		margin-top: 14px;
	}
}

@media (max-width: 479px) {

	.lp-modal--split .lp-modal__aside {
		padding: 18px 18px 17px;
	}

	.lp-modal--split .lp-modal__marquee-item img {
		height: 20px;
	}

	.lp-modal--split .lp-form-inner {
		padding-inline: 16px;
	}

	/* Narrow phones: the code chip gives width back to the number. */
	.lp-modal--split .lp-phone {
		gap: 8px;
	}

	.lp-modal--split .lp-cc__toggle {
		gap: 5px;
		padding-inline: 10px;
	}

	.lp-modal--split .lp-phone-number {
		padding-inline: 12px;
	}
}

/* ---------------------------------------------------------------------
 * 7. Responsive: short viewports
 *
 * Re-tunes the tiers above for the split shell. The two-column layout
 * is already about 60px shorter than the stacked card it replaces, so
 * these are gentler than their single-column predecessors - but the
 * landscape tier matters more, not less, because a phone held sideways
 * is wide enough to keep the split and has almost no height.
 *
 * The compact form is about 530px tall, which the 80% cap allows on a
 * screen 665px high or more, so the first tier starts at 670px. Every
 * tier restates the control heights, which are explicit rather than
 * the product of padding.
 * ------------------------------------------------------------------ */

/* Form spacing on any short screen, split or stacked. */
@media (max-height: 670px) {

	.lp-modal--split .lp-form-field {
		margin-bottom: 10px;
	}

	.lp-modal--split .lp-form-field > input,
	.lp-modal--split .lp-phone-number,
	.lp-modal--split .lp-phone-select:not(.lp-phone-select--enhanced),
	.lp-modal--split .lp-cc__toggle {
		height: 44px;
	}

	.lp-modal--split .lp-form-field textarea {
		height: 76px;
		min-height: 56px;
		padding-block: 11px;
	}

	.lp-modal--split .lp-form-submit {
		height: 46px;
		min-height: 46px;
		margin-top: 12px;
	}

	.lp-modal--split .lp-form-note {
		margin-top: 10px;
	}
}

/* The split shell's padding on a short screen. Width-gated so a phone's
   stacked header keeps the padding the stacking block gives it. */
@media (min-width: 768px) and (max-height: 670px) {

	.lp-modal--split .lp-modal__aside {
		padding: 24px 32px 20px;
	}

	.lp-modal--split .lp-modal__points {
		margin-block: 18px;
	}

	.lp-modal--split .lp-modal__trusted {
		padding-top: 14px;
	}

	.lp-modal--split .lp-form-inner {
		padding: 24px 30px 20px;
	}

	.lp-modal--split .lp-form-title {
		margin-bottom: 12px;
		font-size: 19px;
	}
}

@media (max-height: 620px) {

	.lp-modal--split .lp-modal__aside-text,
	.lp-modal--split .lp-modal__points {
		display: none;
	}

	.lp-modal--split .lp-modal__trusted {
		padding-top: 18px;
	}

	.lp-modal--split .lp-form-inner {
		padding: 18px 22px 18px;
	}

	.lp-modal--split .lp-form-title {
		margin-bottom: 12px;
		font-size: 17px;
	}

	.lp-modal--split .lp-form-field {
		margin-bottom: 10px;
	}

	.lp-modal--split .lp-form-field > input,
	.lp-modal--split .lp-phone-number,
	.lp-modal--split .lp-phone-select:not(.lp-phone-select--enhanced),
	.lp-modal--split .lp-cc__toggle {
		height: 42px;
	}

	.lp-modal--split .lp-form-field textarea {
		height: 56px;
		min-height: 44px;
		padding-block: 10px;
	}

	.lp-modal--split .lp-form-submit {
		height: 44px;
		min-height: 44px;
		margin-top: 12px;
	}

	.lp-modal--split .lp-form-note {
		margin-top: 10px;
	}

	/* Paired again: here the choice is a clipped placeholder or a
	   scrollbar, and not scrolling is the requirement. */
	.lp-modal--split .lp-form-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 10px;
	}
}

/*
 * Landscape phone. ~390px of height, but 700-900px of width - so the
 * split stays and the form column pairs its rows, which is the only
 * arrangement that fits four fields plus a button without scrolling.
 * The aside keeps its heading and the logos and drops everything else.
 */
@media (orientation: landscape) and (max-height: 500px) {

	.lp-modal--split {
		width: min(900px, calc(100vw - 20px));
		max-height: calc(100dvh - 8px);
	}

	.lp-modal--split .lp-modal__panel--split {
		grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
		max-height: calc(100dvh - 8px);
		border-radius: 18px;
	}

	.lp-modal--split .lp-modal__aside {
		padding: 18px 18px;
	}

	.lp-modal--split .lp-modal__aside-title {
		font-size: 1.05rem;
		line-height: 1.25;
	}

	.lp-modal--split .lp-modal__trusted {
		padding-top: 14px;
	}

	.lp-modal--split .lp-modal__marquee-item img {
		height: 20px;
	}

	.lp-modal--split .lp-form-inner {
		padding: 16px 18px 16px;
	}

	.lp-modal--split .lp-form-title {
		margin-bottom: 10px;
		font-size: 16px;
	}

	.lp-modal--split .lp-form-field {
		margin-bottom: 8px;
	}

	.lp-modal--split .lp-form-field > input,
	.lp-modal--split .lp-phone-number,
	.lp-modal--split .lp-phone-select:not(.lp-phone-select--enhanced),
	.lp-modal--split .lp-cc__toggle {
		height: 40px;
	}

	/* Natural height here: it sits beside the phone field in the paired
	   grid and spans the row, which reads better than a squat box. */
	.lp-modal--split .lp-form-field textarea {
		height: auto;
		min-height: 40px;
		padding-block: 9px;
	}

	.lp-modal--split .lp-form-submit {
		height: 42px;
		min-height: 42px;
		margin-top: 8px;
	}

	.lp-modal--split .lp-form-note {
		margin-top: 8px;
		font-size: 11px;
		line-height: 1.45;
	}

	/* Paired again: here the choice is a clipped placeholder or a
	   scrollbar, and not scrolling is the requirement. */
	.lp-modal--split .lp-form-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 10px;
	}
}

/*
 * Stacked, mid-height phones - 360x740, 375x812 and similar. A light
 * trim so the stacked form fits without scrolling; the logo band stays.
 * The SE tier below still wins on anything shorter.
 */
@media (max-width: 767px) and (max-height: 800px) {

	.lp-modal--split .lp-modal__aside {
		padding: 18px 20px 16px;
	}

	.lp-modal--split .lp-form-inner {
		padding: 20px 18px 18px;
	}

	.lp-modal--split .lp-form-title {
		margin-bottom: 12px;
	}

	.lp-modal--split .lp-form-field {
		margin-bottom: 10px;
	}

	.lp-modal--split .lp-form-field > input,
	.lp-modal--split .lp-phone-number,
	.lp-modal--split .lp-phone-select:not(.lp-phone-select--enhanced),
	.lp-modal--split .lp-cc__toggle {
		height: 46px;
	}

	.lp-modal--split .lp-form-field textarea {
		height: 84px;
	}

	.lp-modal--split .lp-form-submit {
		margin-top: 12px;
	}
}

/*
 * Stacked and short - the iPhone SE class of screen, 375x667.
 *
 * The stacked layout re-adds the gradient header above the form, and at
 * 667px the short-screen tiers alone left the panel over. This is the
 * tier that closes that gap; it sits last so it wins over both those
 * tiers and the stacking block, whose media queries it overlaps rather
 * than replaces.
 */
@media (max-width: 767px) and (max-height: 720px) {

	.lp-modal--split .lp-modal__aside {
		padding: 16px 18px 15px;
	}

	.lp-modal--split .lp-modal__aside-title {
		font-size: 1.08rem;
	}

	.lp-modal--split .lp-form-inner {
		padding: 18px 18px 16px;
	}

	.lp-modal--split .lp-form-title {
		margin-bottom: 12px;
		font-size: 17px;
	}

	.lp-modal--split .lp-form-field {
		margin-bottom: 10px;
	}

	.lp-modal--split .lp-form-field > input,
	.lp-modal--split .lp-phone-number,
	.lp-modal--split .lp-phone-select:not(.lp-phone-select--enhanced),
	.lp-modal--split .lp-cc__toggle {
		height: 44px;
	}

	.lp-modal--split .lp-form-field textarea {
		height: 64px;
		min-height: 48px;
	}

	.lp-modal--split .lp-form-benefits {
		gap: 8px 18px;
	}

	.lp-modal--split .lp-form-submit {
		height: 46px;
		min-height: 46px;
		margin-top: 12px;
	}

	.lp-modal--split .lp-form-note {
		margin-top: 10px;
		font-size: 11.5px;
		line-height: 1.45;
	}

	/* Stacked AND short: the band is the one part of the header that can
	   go without losing meaning, and it buys back ~55px. */
	.lp-modal--split .lp-modal__trusted {
		display: none;
	}
}

/*
 * Landscape phone: a smaller close button, tucked closer to the corner.
 * The form column is short and narrow here, so the heading reserves a
 * little more room beside it.
 */
@media (orientation: landscape) and (max-height: 500px) {

	.lp-modal--split .lp-modal__close {
		top: 10px;
		right: 10px;
		width: 32px;
		height: 32px;
	}

	.lp-modal--split .lp-modal__close svg {
		width: 15px;
		height: 15px;
	}

	.lp-modal--split .lp-form-title {
		padding-right: 42px;
	}
}

/*
 * The close glyph takes the button's colour.
 *
 * appagentix-icons.css paints `.ai-ico` with `--ai-color`, which
 * resolves to `--lp-sub` - rgba(0,0,0,.62). Only `.lp-btn .ai-ico` and
 * `.ai-ico--inherit` opt out, and the close button is neither, so the
 * cross would ignore the button's own colour - its brand hover, and the
 * white it turns over the gradient header on phones.
 *
 * Scoped to this popup, and at three classes so it wins over
 * appagentix-icons.css, which loads later.
 */
.lp-modal--split .lp-modal__close .ai-ico {
	color: inherit;
}

/* ---------------------------------------------------------------------
 * 8. Motion: opening, closing and reduced motion
 *
 * The popup fades in and rises 12px into place while the overlay fades
 * up behind it; closing plays the same in reverse. Pure CSS on the
 * native <dialog>: @starting-style supplies the "before" state when it
 * opens, and the allow-discrete transitions on `display` and `overlay`
 * keep a closing dialog in the top layer until its fade has finished.
 * lead-form.js is untouched. A browser without these features opens
 * and closes instantly, exactly as before.
 *
 * The open state is `transform: none`, so nothing stays transformed
 * once the popup is up: text renders crisp and the country dropdown
 * positions as it always has. Hover and focus transitions on the
 * controls themselves are declared with each control above.
 * ------------------------------------------------------------------ */

.lp-modal--split {
	opacity: 0;
	transform: translateY(12px);
	/* First declaration for browsers that reject allow-discrete. */
	transition:
		opacity .28s var(--ease, ease),
		transform .28s var(--ease, ease);
	transition:
		opacity .28s var(--ease, ease),
		transform .28s var(--ease, ease),
		overlay .28s allow-discrete,
		display .28s allow-discrete;
}

.lp-modal--split[open] {
	opacity: 1;
	transform: none;
}

@starting-style {
	.lp-modal--split[open] {
		opacity: 0;
		transform: translateY(12px);
	}
}

.lp-modal--split::backdrop {
	opacity: 0;
	transition: opacity .28s var(--ease, ease);
	transition:
		opacity .28s var(--ease, ease),
		overlay .28s allow-discrete,
		display .28s allow-discrete;
}

.lp-modal--split[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.lp-modal--split[open]::backdrop {
		opacity: 0;
	}
}

/* Reduced motion: the fades stay, the movement goes - no rise on open,
   no lift on the button. */
@media (prefers-reduced-motion: reduce) {

	.lp-modal--split {
		transform: none;
	}

	@starting-style {
		.lp-modal--split[open] {
			transform: none;
		}
	}

	.lp-modal--split .lp-form-submit:hover,
	.lp-modal--split .lp-form-submit:active {
		transform: none;
	}
}