/*
 * Homepage redesign. Page specific CSS only.
 *
 * Tokens, the type scale, `.row` and Jost arrive from the shared design layer, and the 1160 row cap
 * from `lib/page.css`. Nothing here redeclares them.
 *
 * EVERY SELECTOR IS SCOPED TO `.ezy-page--hp`. Two coded pages share a document scope only through
 * `.ezy-design`; their own classes must not be able to reach each other.
 *
 * ORANGE IS THE CALL TO ACTION AND ELECTRIC BLUE IS THE INTERACTIVE COLOUR. Midnight carries the
 * three dark moments, each an inset panel with rounded corners: the hero, the AI band and, in the
 * warm gradient, the closing call to action.
 *
 * VERTICAL RHYTHM, three tiers keyed to the colour edge, the same tiers the sibling pages declare:
 *
 *   96px  var(--space-24)  a banded section, alt or dark   workflows, AI, testimonials, CTA
 *   80px  var(--space-20)  a white section carrying a lot  platform, compare, integrations, blog
 *   40px  var(--space-10)  the clients strip, a single line of logos closed by a hairline
 *
 * The bands run dark, white, white, alt, white, dark, white, alt, white, warm. The one white to
 * white seam, clients to platform, carries a hairline.
 */

.ezy-page--hp svg.ph { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }
.ezy-page--hp img { max-width: 100%; display: block; }
.ezy-page--hp ul, .ezy-page--hp ol { list-style: none; margin: 0; padding: 0; }
.ezy-page--hp dl, .ezy-page--hp dd, .ezy-page--hp figure, .ezy-page--hp blockquote { margin: 0; }
.ezy-page--hp fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ezy-page--hp .hp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ezy-page--hp .hp-num { font-variant-numeric: tabular-nums; }

/* ---------- shared furniture ---------- */

.ezy-page--hp .hp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-height: 52px; padding: 0 var(--space-6);
	border: 1px solid transparent; border-radius: var(--radius-md);
	font-family: inherit; font-size: var(--text-base); font-weight: var(--weight-semibold);
	white-space: nowrap; text-decoration: none;
	transition: background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}
.ezy-page--hp .hp-btn svg.ph { font-size: 18px; }
.ezy-page--hp .hp-btn:hover { text-decoration: none; }
.ezy-page--hp .hp-btn:active { transform: translateY(1px); }
.ezy-page--hp .hp-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-primary); }
.ezy-page--hp .hp-btn--primary { background: var(--color-primary); color: var(--color-text-on-primary); }
.ezy-page--hp .hp-btn--primary:hover { background: var(--color-primary-hover); color: var(--color-text-on-primary); }
.ezy-page--hp .hp-btn--ghost-dark { color: var(--color-text-on-dark); border-color: color-mix(in srgb, var(--color-text-on-dark) 40%, transparent); background: color-mix(in srgb, var(--color-text-on-dark) 6%, transparent); }
.ezy-page--hp .hp-btn--ghost-dark:hover { background: color-mix(in srgb, var(--color-text-on-dark) 14%, transparent); color: var(--color-text-on-dark); }
.ezy-page--hp .hp-btn--outline { color: var(--color-text-heading); border-color: var(--color-border); background: var(--color-surface); }
.ezy-page--hp .hp-btn--outline:hover { background: var(--color-surface-hover); color: var(--color-text-heading); }
.ezy-page--hp .hp-btn--white { background: var(--color-surface); color: var(--color-primary-hover); }
.ezy-page--hp .hp-btn--white:hover { background: var(--color-primary-muted); color: var(--color-primary-hover); }
.ezy-page--hp .hp-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ezy-page--hp .hp-cta__actions { justify-content: center; }

/* Text links get 8px of tap room above and below (phone pass, 2026-10-19: they measured 17 to 24px tall). */
.ezy-page--hp .hp-link { display: inline-flex; align-items: center; gap: var(--space-2); padding-block: 8px; font-weight: var(--weight-semibold); color: var(--color-secondary); }
.ezy-page--hp .hp-link svg.ph { transition: transform var(--duration-fast) var(--ease-standard); }
.ezy-page--hp a.hp-link:hover, .ezy-page--hp a:hover .hp-link { text-decoration: none; }
.ezy-page--hp a.hp-link:hover svg.ph, .ezy-page--hp a:hover .hp-link svg.ph { transform: translateX(3px); }

/* Status tags in the mocks. A chip radius, not a pill. */
.ezy-page--hp .hp-tag { display: inline-flex; padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.2; white-space: nowrap; }
.ezy-page--hp .hp-tag--ok { color: color-mix(in srgb, var(--color-success) 62%, var(--lm-midnight-blue)); background: var(--color-success-muted); }
.ezy-page--hp .hp-tag--warn { color: var(--color-primary-hover); background: var(--color-primary-muted); }
.ezy-page--hp .hp-tag--info { color: var(--color-secondary); background: color-mix(in srgb, var(--color-secondary) 10%, var(--color-surface)); }

/*
 * THE SPLIT HEAD. Heading on the left, its supporting line on the right, sharing a baseline. A
 * single column head capped at a measure would leave half the row empty.
 */
.ezy-page--hp .hp-head { display: grid; gap: var(--space-4) var(--space-12); margin-bottom: var(--space-12); }
.ezy-page--hp .hp-head__title .eyebrow { margin: 0 0 var(--space-3); }
.ezy-page--hp .hp-head__line { margin: 0; }
.ezy-page--hp .hp-centre { display: grid; gap: var(--space-4); max-width: 760px; margin: 0 auto var(--space-12); text-align: center; }
.ezy-page--hp .hp-centre > * { margin: 0; }
.ezy-page--hp h2 { font-size: clamp(2rem, 2.2vw + 1rem, 3rem); font-weight: var(--weight-heavy); letter-spacing: -0.025em; line-height: 1.08; }
.ezy-page--hp .eyebrow { margin: 0; }

/* ============================================================ HERO */

/* Full width, edge to edge, owner request 2026-10-14: no inset and no rounded corners. */
.ezy-page--hp .hp-hero { padding: 0; }
.ezy-page--hp .hp-hero__panel {
	position: relative; overflow: hidden; isolation: isolate;
	background:
		radial-gradient(55% 65% at 100% 0%, color-mix(in srgb, var(--lm-electric-blue) 55%, transparent), transparent 65%),
		radial-gradient(45% 55% at 0% 100%, color-mix(in srgb, color-mix(in srgb, var(--lm-electric-blue) 55%, var(--lm-white)) 30%, transparent), transparent 70%),
		radial-gradient(35% 45% at 60% 60%, color-mix(in srgb, var(--color-comp-violet) 22%, transparent), transparent 70%),
		color-mix(in srgb, var(--lm-midnight-blue) 80%, black);
	color: var(--color-text-on-dark);
}
.ezy-page--hp .hp-hero__grid { display: grid; gap: var(--space-16); align-items: center; padding-top: clamp(56px, 7vw, 96px); }
.ezy-page--hp .hp-hero__copy { display: grid; gap: var(--space-6); justify-items: start; }
/* The handoff's headline: 800 weight, tight, and as large as the copy column allows (owner, 2026-10-14). */
/*
 * TWO LINES, ALWAYS: "Cash flow," then "on autopilot." (owner, 2026-10-14). Each line is kept whole,
 * and the size is also capped at 17% of the copy column (cqi), because "on autopilot." is about
 * 5.5em wide, so the longer line fits at any width rather than breaking into three. Line height
 * 1.04 and tracking -0.03em, opened up from 0.94 and -0.045em (owner, 2026-10-19: lines too close).
 */
.ezy-page--hp .hp-hero__copy { container-type: inline-size; }
.ezy-page--hp .hp-hero__line { display: inline-block; white-space: nowrap; }
.ezy-page--hp .hp-hero h1 {
	width: 100%;
	color: var(--color-text-on-dark);
	font-size: min(clamp(3.2rem, 6.4vw + 0.2rem, 6.5rem), 17cqi); font-weight: var(--weight-heavy); line-height: 1.04; letter-spacing: -0.03em;
}
/*
 * Light orange into orange, through to light blue, and back: the colour flows slowly left to right,
 * owner instruction 2026-10-19. The gradient starts and ends on the same colour and is drawn twice
 * the word's width, so moving it by one full tile (-200% at this size) loops without a seam.
 */
.ezy-page--hp .hp-hero__accent {
	background: linear-gradient(92deg,
		color-mix(in srgb, var(--lm-orange) 70%, var(--lm-white)) 0%,
		var(--lm-orange) 25%,
		color-mix(in srgb, var(--lm-electric-blue) 70%, var(--lm-white)) 50%,
		var(--lm-orange) 75%,
		color-mix(in srgb, var(--lm-orange) 70%, var(--lm-white)) 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: hp-accent-flow 6s linear infinite;
}
@keyframes hp-accent-flow { from { background-position: 0% 0; } to { background-position: -200% 0; } }
.ezy-page--hp .hp-hero__lead { margin: 0; max-width: 34em; font-size: var(--text-lg); font-weight: var(--weight-light); line-height: 1.6; color: var(--color-sidebar-text); }

/*
 * THE KICKER, owner design 2026-10-19: a pill, not a link. An orange disc with a sparkle, then the
 * line, inside a capsule a shade lighter than the panel with a hairline edge. An h2 for the outline,
 * sized as a kicker, not a section head.
 */
.ezy-page--hp .hp-hero .hp-kicker {
	display: inline-flex; align-items: center; gap: var(--space-3); margin: 0;
	padding: 6px var(--space-4) 6px 6px; border-radius: 999px;
	background: color-mix(in srgb, var(--lm-white) 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--lm-white) 14%, transparent);
	font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.4; letter-spacing: 0.01em;
	color: color-mix(in srgb, var(--lm-white) 90%, transparent);
}
.ezy-page--hp .hp-hero .hp-kicker__icon {
	flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--lm-orange); color: var(--lm-white); font-size: 16px;
}

.ezy-page--hp .hp-proof { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: var(--text-sm); color: var(--color-sidebar-text); }
.ezy-page--hp .hp-proof li { display: inline-flex; align-items: center; gap: var(--space-2); }
.ezy-page--hp .hp-proof svg.ph { font-size: 20px; color: var(--color-primary); }

/* --- the dashboard mock --- */
.ezy-page--hp .hp-hero__art { position: relative; }
.ezy-page--hp .hp-app {
	width: 100%; overflow: hidden;
	background: var(--color-surface); color: var(--color-text-heading);
	border-radius: var(--radius-lg);
	box-shadow: 0 50px 100px color-mix(in srgb, black 50%, transparent), 0 0 0 1px color-mix(in srgb, var(--lm-white) 15%, transparent);
}
.ezy-page--hp .hp-app__bar { display: flex; align-items: center; gap: var(--space-3); padding: 10px 14px; background: var(--color-surface-hover); border-bottom: 1px solid var(--color-border); }
.ezy-page--hp .hp-app__dots { display: flex; gap: 6px; }
.ezy-page--hp .hp-app__dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-danger); }
.ezy-page--hp .hp-app__dots span + span { background: var(--color-warning); }
.ezy-page--hp .hp-app__dots span + span + span { background: var(--color-success); }
.ezy-page--hp .hp-app__url { display: inline-flex; align-items: center; gap: 6px; flex: 1; max-width: 300px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-xs); color: var(--color-text-muted); }
/* The icon rail is decoration; on a phone the figures need its 52px more, so it waits for 768. */
.ezy-page--hp .hp-app__body { display: grid; grid-template-columns: minmax(0, 1fr); }
.ezy-page--hp .hp-app__rail { display: none; align-content: start; justify-items: center; gap: 6px; padding: 14px 0; background: var(--color-sidebar-bg); }
.ezy-page--hp .hp-app__logo { width: 30px; height: 30px; object-fit: contain; margin-bottom: var(--space-2); }
.ezy-page--hp .hp-app__rail > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); color: var(--color-sidebar-text); font-size: 18px; }
.ezy-page--hp .hp-app__rail > .is-on { background: color-mix(in srgb, var(--lm-white) 12%, transparent); color: var(--color-text-on-dark); }
.ezy-page--hp .hp-app__rail > .is-ai { color: var(--color-primary); }
.ezy-page--hp .hp-app__main { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-5); }
.ezy-page--hp .hp-app__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.ezy-page--hp .hp-app__head > span:first-child { display: grid; gap: 4px; }
.ezy-page--hp .hp-app__title { font-size: 18px; font-weight: var(--weight-bold); letter-spacing: -0.01em; }
.ezy-page--hp .hp-app__sync { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-text-muted); }
.ezy-page--hp .hp-app__btn { padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-text-on-primary); font-size: 13px; font-weight: var(--weight-semibold); white-space: nowrap; }
.ezy-page--hp .hp-app__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--space-3); }
/*
 * Phones: the mock's header keeps the title and the sync line whole (they broke over four lines at
 * 375px) and lets the button drop below; the three figures sit two up with the third across.
 */
@media (max-width: 599px) {
	.ezy-page--hp .hp-app__head { flex-wrap: wrap; row-gap: var(--space-3); }
	.ezy-page--hp .hp-app__title, .ezy-page--hp .hp-app__sync { white-space: nowrap; }
	.ezy-page--hp .hp-app__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ezy-page--hp .hp-app__kpis > :nth-child(3) { grid-column: 1 / -1; }
}
.ezy-page--hp .hp-kpi { display: grid; gap: 4px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.ezy-page--hp .hp-kpi__label { font-size: var(--text-xs); color: var(--color-text-muted); }
.ezy-page--hp .hp-kpi__value { font-size: clamp(15px, 1.4vw, 20px); font-weight: var(--weight-heavy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ezy-page--hp .hp-kpi__delta { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: color-mix(in srgb, var(--color-success) 70%, var(--lm-midnight-blue)); }
.ezy-page--hp .hp-app__chart { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.ezy-page--hp .hp-app__chart-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: var(--weight-semibold); }
.ezy-page--hp .hp-app__chart-head span + span { font-weight: var(--weight-medium); font-size: var(--text-xs); color: var(--color-text-muted); }
.ezy-page--hp .hp-bars { display: flex; align-items: end; gap: 6px; height: 96px; }
.ezy-page--hp .hp-bars span { flex: 1; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--lm-electric-blue) 22%, var(--color-surface)); }
.ezy-page--hp .hp-bars .is-recent { background: var(--color-secondary); }
.ezy-page--hp .hp-bars .is-now { background: var(--color-primary); }
.ezy-page--hp .hp-app__ledger { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.ezy-page--hp .hp-app__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: 10px 14px; font-size: 13px; font-weight: var(--weight-medium); }
.ezy-page--hp .hp-app__row + .hp-app__row { border-top: 1px solid var(--color-border); }
.ezy-page--hp .hp-app__row > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ezy-page--hp .hp-app__row .hp-num { color: var(--color-text-body); }

/*
 * AIMIE (written Aimie), WHOLE, IN FRONT OF THE DASHBOARD, the handoff's composition (owner, 2026-10-14). She
 * stands centre right with her raised hand at the chart and her feet below the dashboard's edge.
 * Below 1024px there is no room beside the copy, so she is left to the AI band.
 */
.ezy-page--hp .hp-hero__aimie {
	display: none; position: absolute; right: clamp(-80px, -4vw, -8px); bottom: 0; z-index: 2;
	width: auto; height: clamp(380px, 34vw, 500px);
	filter: drop-shadow(0 30px 40px color-mix(in srgb, black 45%, transparent));
	pointer-events: none;
}

/*
 * THE AIMIE CARD, THE HERO'S ONE BEHAVIOUR. It sits in flow under the dashboard and overlaps only
 * the dashboard's bottom padding, so it layers without covering a single ledger figure.
 */
.ezy-page--hp .hp-feed {
	position: relative; z-index: 3;
	width: min(340px, 100%); margin-top: calc(-1 * var(--space-4));
	display: grid; gap: var(--space-2); padding: var(--space-3);
	background: color-mix(in srgb, var(--lm-midnight-blue) 78%, transparent);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	border: 1px solid color-mix(in srgb, var(--lm-white) 20%, transparent);
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 60px color-mix(in srgb, black 45%, transparent);
}
.ezy-page--hp .hp-feed__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 2px 4px; }
.ezy-page--hp .hp-feed__name { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.ezy-page--hp .hp-feed__name svg.ph { color: var(--color-primary); }
.ezy-page--hp .hp-feed__live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-sidebar-text); }
.ezy-page--hp .hp-feed__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 22%, transparent); }
.ezy-page--hp .hp-feed__list { display: grid; gap: var(--space-2); }
.ezy-page--hp .hp-feed__item {
	--hp-tone: var(--color-secondary);
	display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center;
	padding: 10px; border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--lm-white) 5%, transparent);
	font-size: var(--text-xs);
}
.ezy-page--hp .hp-feed__item:first-child { background: color-mix(in srgb, var(--lm-white) 14%, transparent); }
.ezy-page--hp .hp-feed__item[hidden] { display: none; }
.ezy-page--hp .hp-feed__item--green { --hp-tone: var(--color-success); }
.ezy-page--hp .hp-feed__item--blue { --hp-tone: color-mix(in srgb, var(--lm-electric-blue) 55%, var(--lm-white)); }
.ezy-page--hp .hp-feed__item--orange { --hp-tone: var(--color-primary); }
.ezy-page--hp .hp-feed__item--violet { --hp-tone: color-mix(in srgb, var(--color-comp-violet) 60%, var(--lm-white)); }
.ezy-page--hp .hp-feed__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md); font-size: 16px; color: var(--hp-tone); background: color-mix(in srgb, var(--hp-tone) 22%, transparent); }
.ezy-page--hp .hp-feed__text { display: grid; gap: 2px; min-width: 0; }
.ezy-page--hp .hp-feed__title { font-size: 13px; font-weight: var(--weight-semibold); color: var(--color-text-on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ezy-page--hp .hp-feed__meta { color: var(--color-sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ezy-page--hp .hp-feed__item .hp-num { font-weight: var(--weight-semibold); color: var(--color-text-on-dark); }
.ezy-page--hp .hp-feed__item.is-in { animation: hp-feed-in var(--duration-slow) var(--ease-emphasized) backwards; }
@keyframes hp-feed-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- the stats strip, docked in the hero --- */
.ezy-page--hp .hp-stats {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6);
	margin-top: var(--space-12); padding: var(--space-8) 0 var(--space-12);
	border-top: 1px solid color-mix(in srgb, var(--lm-white) 18%, transparent);
}
.ezy-page--hp .hp-stat { display: grid; gap: var(--space-2); align-content: start; }
.ezy-page--hp .hp-stat__value { font-size: clamp(2.2rem, 2.4vw + 1rem, 3.25rem); font-weight: var(--weight-heavy); line-height: 1; letter-spacing: -0.035em; color: var(--color-text-on-dark); font-variant-numeric: tabular-nums; }
.ezy-page--hp .hp-stat__label { font-size: 15px; line-height: 1.45; color: var(--color-sidebar-text); }

/* ============================================================ CLIENTS */

.ezy-page--hp .hp-clients { border-bottom: 1px solid var(--color-border); }
.ezy-page--hp .hp-clients__row { display: grid; gap: var(--space-4); padding-block: var(--space-6); }
.ezy-page--hp .hp-clients__label { color: var(--color-text-muted); text-align: center; }
/*
 * THE DRIFTING STRIP, in the UK landing page's form (owner, 2026-10-19), without its cards: each
 * logo sits bare in a 152 by 68 slot, the slots 12px apart, moving right to left at about 27px a
 * second, the UK page's pace. Logos are grey and come to life in colour on hover, as there (owner,
 * 2026-10-19). A compact strip (owner, same day): one set of twelve is 1968px and
 * crosses in 73s. The track holds the set twice and moves
 * left by one set plus one gap, so the loop closes without a jump; the edges fade so logos arrive
 * rather than appear. Hover pauses it.
 */
.ezy-page--hp .hp-clients__strip {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.ezy-page--hp .hp-clients__logos { --hp-logo-gap: 12px; display: flex; gap: var(--hp-logo-gap); width: max-content; align-items: center; animation: hp-logos 73s linear infinite; }
.ezy-page--hp .hp-clients__strip:hover .hp-clients__logos { animation-play-state: paused; }
@keyframes hp-logos { to { transform: translateX(calc(-50% - var(--hp-logo-gap) / 2)); } }
/*
 * The one-cell track is what makes the logo's `height: 100%` resolve. With an auto row the height
 * follows the width, object-fit never applies, and a tall mark spills into the padding: Vela APX
 * measured 116x68 in a 116x40 box on 2026-10-21, its tagline clipped.
 */
.ezy-page--hp .hp-clients__logos li {
	flex: none; display: grid; grid-template: 100% / 100%; place-items: center; box-sizing: border-box;
	width: 152px; height: 68px; padding: 14px 18px;
}
.ezy-page--hp .hp-clients__logo {
	width: 100%; height: 100%; object-fit: contain;
	filter: grayscale(1); opacity: 0.6;
	transition: filter var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}
.ezy-page--hp .hp-clients__logos li:hover .hp-clients__logo { filter: none; opacity: 1; }
/* Smaller slots on phones; one set is 1656px, so 61s keeps the same pace. */
@media (max-width: 767px) {
	.ezy-page--hp .hp-clients__logos { --hp-logo-gap: 10px; animation-duration: 61s; }
	.ezy-page--hp .hp-clients__logos li { width: 128px; height: 58px; padding: 12px 16px; }
}

/* ============================================================ PLATFORM */

/*
 * THE STAGE. A light inset panel, owner choice 2026-10-14 (a dark one sat too close to the dark
 * hero). Its colour is the animation: each tab owns a tint, blue, teal or violet, painted as three
 * soft glows. The open tab's tint fades in as the others fade out, each drifts on its own long
 * loop, and the whole layer leans toward the pointer (--hx, --hy, from the script). The disc rises into place as
 * the section arrives and leans a little toward the pointer (--hx, from the script).
 */
/* Full width, edge to edge, owner instruction 2026-10-19: no outer inset and no rounded corners. */
.ezy-page--hp .hp-platform { padding: 0; }
.ezy-page--hp .hp-platform__stage {
	--hp-lb: color-mix(in srgb, var(--lm-electric-blue) 55%, var(--lm-white));
	position: relative; overflow: hidden; isolation: isolate;
	padding-block: var(--space-24);
	background:
		radial-gradient(60% 50% at 85% 0%, color-mix(in srgb, var(--lm-electric-blue) 8%, transparent), transparent 70%),
		linear-gradient(180deg, var(--color-surface), color-mix(in srgb, var(--lm-electric-blue) 4%, var(--color-surface)));
	color: var(--color-text-body);
}
.ezy-page--hp .hp-aura {
	position: absolute; z-index: -1; inset: 0; pointer-events: none;
	translate: calc(var(--hx, 0) * 28px) calc(var(--hy, 0) * 18px);
	transition: translate 900ms var(--ease-out);
}
/*
 * Full width since 2026-10-19, so the glows sit in towards the content column at about half their
 * old strength: at the window edges, sized off a 1860px section, they read as stains (owner).
 */
.ezy-page--hp .hp-aura__glow {
	--hp-a: var(--lm-electric-blue); --hp-b: var(--color-comp-sky);
	position: absolute; inset: -20%; opacity: 0;
	background:
		radial-gradient(34% 40% at 30% 70%, color-mix(in srgb, var(--hp-a) 14%, transparent), transparent 75%),
		radial-gradient(36% 42% at 72% 30%, color-mix(in srgb, var(--hp-b) 12%, transparent), transparent 75%),
		radial-gradient(28% 30% at 55% 85%, color-mix(in srgb, var(--hp-a) 8%, transparent), transparent 75%);
	transition: opacity 1100ms var(--ease-standard);
	animation: hp-aura-drift 16s ease-in-out infinite alternate;
}
.ezy-page--hp .hp-aura__glow--pay { --hp-a: var(--color-comp-teal); --hp-b: var(--color-success); animation-duration: 19s; animation-direction: alternate-reverse; }
.ezy-page--hp .hp-aura__glow--risk { --hp-a: var(--color-comp-violet); --hp-b: var(--color-comp-sky); animation-duration: 22s; }
.ezy-page--hp .hp-platform__stage:has(#hp-tab-automate:checked) .hp-aura__glow--automate,
.ezy-page--hp .hp-platform__stage:has(#hp-tab-pay:checked) .hp-aura__glow--pay,
.ezy-page--hp .hp-platform__stage:has(#hp-tab-risk:checked) .hp-aura__glow--risk { opacity: 1; }
@keyframes hp-aura-drift { from { transform: translate(-5%, 4%) scale(1); } to { transform: translate(5%, -4%) scale(1.1); } }

/*
 * THE LIVING GROUND, on the AI band, owner instruction 2026-10-19: the hero background of the UK
 * landing page. Three aurora glows drift on long loops, a grid floor recedes to a horizon and
 * scrolls towards the viewer, and the script draws a network of invoice nodes on the canvas, with
 * orange payments travelling along its links. Glows and floor move only `transform` and a
 * background position; the canvas is quieter behind the copy and draws only while on screen.
 */
.ezy-page--hp .hp-ai__fx { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.ezy-page--hp .hp-aurora { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.45; will-change: transform; }
.ezy-page--hp .hp-aurora--a {
	width: 46vw; height: 46vw; left: -12vw; top: -18vw;
	background: radial-gradient(circle, color-mix(in srgb, var(--lm-electric-blue) 90%, transparent), transparent 70%);
	animation: hp-aurora-a 22s ease-in-out infinite alternate;
}
.ezy-page--hp .hp-aurora--b {
	width: 38vw; height: 38vw; right: -8vw; top: 4vw;
	background: radial-gradient(circle, color-mix(in srgb, var(--color-comp-violet) 75%, transparent), transparent 70%);
	animation: hp-aurora-b 26s ease-in-out infinite alternate;
}
.ezy-page--hp .hp-aurora--c {
	width: 30vw; height: 30vw; left: 30vw; bottom: -14vw;
	background: radial-gradient(circle, color-mix(in srgb, var(--color-comp-sky) 55%, transparent), transparent 70%);
	animation: hp-aurora-c 30s ease-in-out infinite alternate;
}
@keyframes hp-aurora-a { to { transform: translate3d(14vw, 8vw, 0) scale(1.15); } }
@keyframes hp-aurora-b { to { transform: translate3d(-12vw, 10vw, 0) scale(0.9); } }
@keyframes hp-aurora-c { to { transform: translate3d(10vw, -8vw, 0) scale(1.2); } }
.ezy-page--hp .hp-ai__floor {
	--hp-floor-line: color-mix(in srgb, color-mix(in srgb, var(--lm-electric-blue) 40%, var(--lm-white)) 12%, transparent);
	position: absolute; left: -25%; right: -25%; bottom: -10%; height: 60%;
	background-image: linear-gradient(var(--hp-floor-line) 1px, transparent 1px), linear-gradient(90deg, var(--hp-floor-line) 1px, transparent 1px);
	background-size: 64px 64px;
	transform: perspective(520px) rotateX(62deg); transform-origin: 50% 100%;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, black 55%, black 100%);
	mask-image: linear-gradient(180deg, transparent 0%, black 55%, black 100%);
	animation: hp-floor 6s linear infinite;
}
@keyframes hp-floor { to { background-position: 0 64px, 0 0; } }
.ezy-page--hp .hp-ai__net {
	position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
	transition: opacity 1.2s var(--ease-standard);
	-webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.3) 40%, black 55%, black 100%);
	mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.3) 40%, black 55%, black 100%);
}
.ezy-page--hp .hp-ai__net.is-on { opacity: 1; }

.ezy-page--hp .hp-platform h2 { color: var(--color-text-heading); }
.ezy-page--hp .hp-platform .hp-head__line { color: var(--color-text-body); }

/* The headline arrives word by word, each word sliding up out of its own clipped line. */
.ezy-page--hp .hp-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ezy-page--hp .hp-word > span { display: inline-block; animation: hp-word-up 900ms var(--ease-emphasized) calc(150ms + var(--i) * 80ms) backwards; }
@keyframes hp-word-up { from { transform: translateY(110%); } to { transform: none; } }

/* --- the tabs, a glass strip; the open tab's line fills while the tour runs --- */
.ezy-page--hp .hp-tabs__list {
	display: grid; gap: var(--space-2); padding: 6px; margin-bottom: var(--space-6);
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
}
.ezy-page--hp .hp-tab {
	position: relative; overflow: hidden;
	display: flex; align-items: center; gap: var(--space-3);
	padding: var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md);
	cursor: pointer;
	transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.ezy-page--hp .hp-tab:hover { background: color-mix(in srgb, var(--color-surface) 60%, transparent); }
.ezy-page--hp .hp-tab::before, .ezy-page--hp .hp-tab::after {
	content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: 0; height: 2px; border-radius: 2px;
}
.ezy-page--hp .hp-tab::before { background: transparent; }
.ezy-page--hp .hp-tab::after {
	background: var(--color-primary);
	transform: scaleX(0); transform-origin: left center;
	transition: transform var(--duration-slow) var(--ease-emphasized);
}
/*
 * THE ANIMATED TAB ICONS, after SVGator's "How to animate icons". Each icon sits on a tinted tile and
 * is drawn in two tones: the line in the tile's colour, the accents in a softer mix of it. The open
 * tab's icon loops its action and any tab plays it on hover; at rest an icon shows its finished
 * drawing. Line drawing moves `stroke-dashoffset` on a 1-unit path, which paints and never lays
 * out; everything else moves `transform`, `opacity` or `offset-distance`.
 */
.ezy-page--hp .hp-tab__icon {
	--hp-acc: color-mix(in srgb, currentColor 28%, transparent);
	display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-md);
	color: var(--color-secondary); background: color-mix(in srgb, var(--color-secondary) 9%, var(--color-surface));
	transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.ezy-page--hp .hp-anim { width: 30px; height: 30px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ezy-page--hp .hp-anim * { transform-box: fill-box; transform-origin: center; }
.ezy-page--hp .hp-anim__draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ezy-page--hp .hp-anim__fill { fill: var(--hp-acc); }
.ezy-page--hp .hp-anim__ring { stroke: var(--hp-acc); opacity: 0; }
.ezy-page--hp .hp-anim__dot { fill: var(--color-primary); stroke: none; offset-path: path('M12 8 C18 8 24.5 8 24.5 12 L24.5 20 C24.5 24 18 24 12 24'); offset-distance: 100%; offset-rotate: 0deg; opacity: 0; }
.ezy-page--hp .hp-anim__wave { stroke: var(--hp-acc); }
.ezy-page--hp .hp-anim--pay .hp-anim__card { transform-origin: 30% 70%; }

/*
 * Automate, a workflow: three steps joined by a connector, always drawn, so the icon reads as a
 * workflow at every moment. Over it the connector draws, a dot runs through the steps and each
 * step lights as the dot reaches it.
 */
.ezy-page--hp .hp-anim__track { stroke: var(--hp-acc); }
.ezy-page--hp .hp-anim__step { fill: var(--color-surface); }
.ezy-page--hp .hp-anim__lit { fill: currentColor; stroke: none; opacity: 0; }
.ezy-page--hp .hp-anim--flow .hp-anim__lit--1 { opacity: 1; }
.ezy-page--hp input:checked + .hp-tab .hp-anim--flow .hp-anim__draw, .ezy-page--hp .hp-tab:hover .hp-anim--flow .hp-anim__draw { animation: hp-i-draw 3s var(--ease-standard) infinite; }
.ezy-page--hp input:checked + .hp-tab .hp-anim--flow .hp-anim__dot, .ezy-page--hp .hp-tab:hover .hp-anim--flow .hp-anim__dot { animation: hp-i-run 3s var(--ease-standard) infinite; }
.ezy-page--hp input:checked + .hp-tab .hp-anim--flow .hp-anim__lit, .ezy-page--hp .hp-tab:hover .hp-anim--flow .hp-anim__lit { animation: hp-i-lit 3s var(--ease-standard) infinite; }
.ezy-page--hp input:checked + .hp-tab .hp-anim--flow .hp-anim__lit--2, .ezy-page--hp .hp-tab:hover .hp-anim--flow .hp-anim__lit--2 { animation-delay: 0.75s; }
.ezy-page--hp input:checked + .hp-tab .hp-anim--flow .hp-anim__lit--3, .ezy-page--hp .hp-tab:hover .hp-anim--flow .hp-anim__lit--3 { animation-delay: 1.5s; }
@keyframes hp-i-draw { 0% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes hp-i-run { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 55% { offset-distance: 100%; opacity: 1; } 62%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes hp-i-lit { 0% { opacity: 0; transform: scale(0.6); } 12% { opacity: 1; transform: none; } 70% { opacity: 1; } 85%, 100% { opacity: 0; } }

/* Get paid: the card taps, then the contactless waves pulse out, near one first. */
.ezy-page--hp input:checked + .hp-tab .hp-anim--pay .hp-anim__card, .ezy-page--hp .hp-tab:hover .hp-anim--pay .hp-anim__card { animation: hp-i-tap 2.4s var(--ease-emphasized) infinite; }
.ezy-page--hp input:checked + .hp-tab .hp-anim--pay .hp-anim__wave, .ezy-page--hp .hp-tab:hover .hp-anim--pay .hp-anim__wave { animation: hp-i-wave 2.4s var(--ease-standard) infinite; }
.ezy-page--hp input:checked + .hp-tab .hp-anim--pay .hp-anim__wave--2, .ezy-page--hp .hp-tab:hover .hp-anim--pay .hp-anim__wave--2 { animation-delay: 150ms; }
@keyframes hp-i-tap { 0%, 100% { transform: none; } 18% { transform: rotate(-10deg) translate(-1px, 1px); } 34% { transform: none; } }
@keyframes hp-i-wave { 0%, 28% { opacity: 0; transform: translateX(-3px); } 42% { opacity: 1; transform: none; } 75%, 100% { opacity: 0; transform: translateX(2px); } }

/* Manage risk: the tick draws inside the shield, the shield fills, a ring ripples out. */
.ezy-page--hp input:checked + .hp-tab .hp-anim--risk .hp-anim__draw, .ezy-page--hp .hp-tab:hover .hp-anim--risk .hp-anim__draw { animation: hp-i-tick 2.6s var(--ease-emphasized) infinite; }
.ezy-page--hp input:checked + .hp-tab .hp-anim--risk .hp-anim__fill, .ezy-page--hp .hp-tab:hover .hp-anim--risk .hp-anim__fill { animation: hp-i-glow 2.6s var(--ease-standard) infinite; }
.ezy-page--hp input:checked + .hp-tab .hp-anim--risk .hp-anim__ring, .ezy-page--hp .hp-tab:hover .hp-anim--risk .hp-anim__ring { animation: hp-i-shield 2.6s var(--ease-out) infinite; }
@keyframes hp-i-tick { 0%, 10% { stroke-dashoffset: 1; } 42%, 100% { stroke-dashoffset: 0; } }
@keyframes hp-i-glow { 0%, 38% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@keyframes hp-i-shield { 0%, 40% { opacity: 0; transform: scale(1); } 46% { opacity: 0.9; } 85%, 100% { opacity: 0; transform: scale(1.55); } }
.ezy-page--hp .hp-tab__text { display: grid; gap: 2px; }
.ezy-page--hp .hp-tab__label { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-heading); }
.ezy-page--hp .hp-tab__sub { font-size: 13px; color: var(--color-text-muted); }
.ezy-page--hp input:checked + .hp-tab { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-md); }
.ezy-page--hp input:checked + .hp-tab::after { transform: none; }
.ezy-page--hp input:checked + .hp-tab .hp-tab__icon { color: var(--color-primary); background: var(--color-primary-muted); }
.ezy-page--hp .hp-tabs.is-auto input:checked + .hp-tab::after { transition: none; animation: hp-progress var(--hp-dwell, 7s) linear both; }
@keyframes hp-progress { from { transform: scaleX(0); } to { transform: none; } }
.ezy-page--hp input:focus-visible + .hp-tab, .ezy-page--hp input:focus-visible + .hp-persona { box-shadow: var(--shadow-focus); }

/*
 * ONE PANEL SHOWS, the one whose radio is checked. `:has()` reaches from the group to the panels
 * because the radios live in the fieldset and the panels beside it. A panel that becomes displayed
 * restarts every animation inside it, which is what replays each mock on every tab change.
 */
.ezy-page--hp .hp-panel { display: none; gap: var(--space-6); }
.ezy-page--hp .hp-tabs:has(#hp-tab-automate:checked) .hp-panel--automate,
.ezy-page--hp .hp-tabs:has(#hp-tab-pay:checked) .hp-panel--pay,
.ezy-page--hp .hp-tabs:has(#hp-tab-risk:checked) .hp-panel--risk { display: grid; }
@keyframes hp-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.ezy-page--hp .hp-panel__copy {
	display: grid; gap: var(--space-6); align-content: start;
	padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
}
.ezy-page--hp .hp-panel__copy > * { animation: hp-fade 600ms var(--ease-emphasized) backwards; }
.ezy-page--hp .hp-panel__copy > :nth-child(2) { animation-delay: 120ms; }
.ezy-page--hp .hp-panel__copy > :nth-child(3) { animation-delay: 240ms; }
.ezy-page--hp .hp-panel__copy h3 { color: var(--color-text-heading); font-size: clamp(1.4rem, 1vw + 1rem, 1.85rem); line-height: 1.2; text-wrap: balance; }
.ezy-page--hp .hp-checks { display: grid; gap: var(--space-4); }
.ezy-page--hp .hp-checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); line-height: 1.55; color: var(--color-text-body); }
.ezy-page--hp .hp-checks svg.ph { font-size: 20px; margin-top: 2px; color: var(--color-secondary); }
.ezy-page--hp .hp-checks strong { font-weight: var(--weight-semibold); color: var(--color-text-heading); }
.ezy-page--hp .hp-benefits strong { font-weight: var(--weight-semibold); color: var(--color-text-heading); }

.ezy-page--hp .hp-panel__art {
	position: relative;
	display: grid; gap: var(--space-6); align-content: space-between;
	padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg);
	background: var(--color-bg-alt);
}
.ezy-page--hp .hp-surface {
	position: relative; padding: var(--space-5); background: var(--color-surface); color: var(--color-text-heading);
	border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
	animation: hp-surface-in 700ms var(--ease-emphasized) 150ms backwards;
}
@keyframes hp-surface-in { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }
.ezy-page--hp .hp-surface p { margin: 0; }
.ezy-page--hp .hp-surface .hp-surface__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-heading); margin-bottom: var(--space-2); }

/* Automate: the steps light in order, each icon arriving with a small overshoot. */
.ezy-page--hp .hp-flow li { --n: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px 0; animation: hp-step-light 500ms var(--ease-emphasized) calc(500ms + var(--n) * 320ms) backwards; }
.ezy-page--hp .hp-flow li:nth-child(2) { --n: 1; }
.ezy-page--hp .hp-flow li:nth-child(3) { --n: 2; }
.ezy-page--hp .hp-flow li:nth-child(4) { --n: 3; }
.ezy-page--hp .hp-flow li + li { border-top: 1px solid var(--color-border); }
.ezy-page--hp .hp-flow__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-secondary); font-size: 18px; animation: hp-pop 560ms var(--ease-out) calc(500ms + var(--n) * 320ms) backwards; }
.ezy-page--hp .hp-flow .is-warn .hp-flow__icon { background: var(--color-primary-muted); color: var(--color-primary-hover); }
.ezy-page--hp .hp-flow__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-heading); }
.ezy-page--hp .hp-flow__when { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
@keyframes hp-step-light { from { opacity: 0.25; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes hp-pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.12); } 100% { transform: none; } }

/* Get paid: a cursor picks Card, then clicks Pay now, and the button turns Paid. */
.ezy-page--hp .hp-invoice { display: grid; gap: var(--space-4); }
.ezy-page--hp .hp-invoice__head, .ezy-page--hp .hp-credit__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-heading); }
.ezy-page--hp .hp-invoice__head span + span { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.ezy-page--hp .hp-invoice__amount { font-size: 34px; font-weight: var(--weight-heavy); line-height: 1; letter-spacing: -0.02em; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
.ezy-page--hp .hp-invoice__methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.ezy-page--hp .hp-invoice__methods span { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 13px; font-weight: var(--weight-medium); }
.ezy-page--hp .hp-invoice__methods .is-on { color: var(--color-text-heading); }
.ezy-page--hp .hp-invoice__methods .is-on::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--color-secondary); border-radius: inherit; animation: hp-on 300ms var(--ease-standard) 1.35s backwards; }
@keyframes hp-on { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.ezy-page--hp .hp-invoice__pay { position: relative; overflow: hidden; display: block; padding: 14px; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-text-on-primary); font-weight: var(--weight-semibold); text-align: center; animation: hp-press 320ms var(--ease-standard) 2.55s; }
.ezy-page--hp .hp-pay__now { display: block; }
.ezy-page--hp .hp-pay__done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: color-mix(in srgb, var(--color-success) 80%, var(--lm-midnight-blue)); opacity: 0; animation: hp-paid 400ms var(--ease-emphasized) 2.7s forwards; }
@keyframes hp-press { 50% { transform: scale(0.96); } }
@keyframes hp-paid { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
/* The track is the size of the invoice, so a translate in percent lands on the same spot at any width. */
.ezy-page--hp .hp-cursor-track { position: absolute; inset: 0; pointer-events: none; opacity: 0; animation: hp-cursor 2.9s var(--ease-standard) 400ms forwards; }
.ezy-page--hp .hp-cursor { position: absolute; left: 0; top: 0; color: var(--lm-midnight-blue); filter: drop-shadow(0 4px 6px color-mix(in srgb, black 30%, transparent)); transform-origin: 4px 2px; animation: hp-click 2.9s linear 400ms; }
@keyframes hp-cursor {
	0% { opacity: 0; transform: translate(92%, 104%); }
	10% { opacity: 1; }
	32%, 40% { transform: translate(17%, 63%); }
	72%, 84% { opacity: 1; transform: translate(50%, 86%); }
	100% { opacity: 0; transform: translate(56%, 96%); }
}
@keyframes hp-click { 0%, 34%, 40%, 75%, 81%, 100% { transform: none; } 37%, 78% { transform: scale(0.78); } }

/* Manage risk: the marker runs the scale, the score and limit count up, Low risk arrives. */
.ezy-page--hp .hp-credit { display: grid; gap: var(--space-4); }
.ezy-page--hp .hp-credit__head .hp-tag { animation: hp-pop 520ms var(--ease-out) 1.9s backwards; }
.ezy-page--hp .hp-credit__score { display: flex; align-items: end; gap: var(--space-4); font-size: 13px; color: var(--color-text-muted); }
.ezy-page--hp .hp-credit__score span { font-size: 44px; font-weight: var(--weight-heavy); line-height: 1; letter-spacing: -0.02em; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
.ezy-page--hp .hp-credit__scale { position: relative; display: block; height: 8px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-danger), var(--color-warning), var(--color-success)); }
.ezy-page--hp .hp-credit__runner { position: absolute; inset: 0; transform: translateX(81%); animation: hp-run 1.6s var(--ease-emphasized) 500ms backwards; }
.ezy-page--hp .hp-credit__runner span { position: absolute; left: -8px; top: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-surface); border: 3px solid var(--color-text-heading); }
@keyframes hp-run { from { transform: translateX(0); } to { transform: translateX(81%); } }
.ezy-page--hp .hp-credit__terms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); font-size: 13px; color: var(--color-text-muted); animation: hp-fade 500ms var(--ease-emphasized) 1.5s backwards; }
.ezy-page--hp .hp-credit__terms strong { display: block; font-size: 15px; font-weight: var(--weight-semibold); color: var(--color-text-heading); font-variant-numeric: tabular-nums; }

/* The notification: one line, the event then "now" (owner, 2026-10-19: no "From:" label). It lands once the mock has acted. */
.ezy-page--hp .hp-toast {
	position: absolute; z-index: 2; top: calc(-1 * var(--space-6)); right: var(--space-4);
	width: min(300px, 82%);
	display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-3);
	padding: 10px 14px; border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--lm-midnight-blue) 82%, transparent);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border: 1px solid color-mix(in srgb, var(--lm-white) 18%, transparent);
	box-shadow: 0 20px 40px -12px color-mix(in srgb, black 60%, transparent);
	animation: hp-toast-in 600ms var(--ease-emphasized) 2.1s backwards;
}
.ezy-page--hp .hp-panel--pay .hp-toast { animation-delay: 3.1s; }
.ezy-page--hp .hp-panel--risk .hp-toast { animation-delay: 2.4s; }
.ezy-page--hp .hp-toast__when { font-size: var(--text-xs); color: var(--color-sidebar-text); }
.ezy-page--hp .hp-toast__body { font-size: 13px; font-weight: var(--weight-semibold); color: var(--color-text-on-dark); }
@keyframes hp-toast-in { from { opacity: 0; transform: translate(24px, -8px) scale(0.96); } to { opacity: 1; transform: none; } }

.ezy-page--hp .hp-metric { display: grid; gap: 4px; margin: 0; animation: hp-fade 600ms var(--ease-emphasized) 900ms backwards; }
.ezy-page--hp .hp-metric__value { font-size: clamp(2rem, 2vw + 1rem, 2.75rem); font-weight: var(--weight-heavy); line-height: 1; letter-spacing: -0.025em; color: var(--color-text-heading); }
.ezy-page--hp .hp-metric__label { font-size: 15px; line-height: 1.5; color: var(--color-text-body); }

/* Everything above waits for the section to arrive. Scoped to this section, never the page. */
.ezy-page--hp .hp-platform.is-armed *, .ezy-page--hp .hp-platform.is-armed *::before, .ezy-page--hp .hp-platform.is-armed *::after { animation-play-state: paused; }

/* ============================================================ DYNAMIC WORKFLOWS */

/*
 * THE PRODUCT STAGE, owner brief 2026-10-19: the page's scroll stopper, same words. A light band
 * holds a centred head, a dark stage, the benefits and the button. On the stage the open customer's
 * steps sit on one line: an orange invoice travels it over 4.2s and each step lights as the invoice
 * reaches it, at 0.4s + n / (steps - 1) of the run, then Aimie's note rises. Across from 1024px,
 * down below it. Changing customer redisplays the list, which replays the run. Each customer
 * stays 8s (script), so the note is on screen for about 2.5s before the next run.
 */
.ezy-page--hp .hp-wf { padding-block: var(--space-24); background: color-mix(in srgb, var(--color-bg-alt) 50%, var(--color-surface)); }
.ezy-page--hp .hp-wf__grid { display: grid; gap: var(--space-12); justify-items: center; }
.ezy-page--hp .hp-wf__copy { display: grid; gap: var(--space-5); justify-items: center; text-align: center; }
.ezy-page--hp .hp-wf__copy h2, .ezy-page--hp .hp-wf__copy .body-lead { max-width: 760px; text-wrap: balance; }
.ezy-page--hp .hp-wf__copy .body-lead { margin: 0; }
.ezy-page--hp .hp-benefits { display: grid; gap: var(--space-4) var(--space-8); width: 100%; margin: 0; text-align: left; }
.ezy-page--hp .hp-benefits li { display: flex; gap: var(--space-3); align-items: flex-start; line-height: 1.5; }
.ezy-page--hp .hp-benefits svg.ph { flex: none; font-size: 22px; color: var(--color-secondary); }
.ezy-page--hp .hp-wf__cta { margin: 0; }

/* The stage: midnight with a violet and a blue glow, and a dot grid that fades out at the edges. */
.ezy-page--hp .hp-wf__card {
	--hp-wf-edge: color-mix(in srgb, var(--lm-white) 16%, transparent);
	--hp-wf-node: color-mix(in srgb, var(--lm-white) 12%, var(--lm-midnight-blue));
	--hp-wf-soft: color-mix(in srgb, var(--lm-electric-blue) 45%, var(--lm-white));
	position: relative; overflow: hidden; isolation: isolate;
	width: 100%; padding: clamp(24px, 4vw, 56px);
	border-radius: var(--radius-lg); color: var(--color-text-on-dark);
	background:
		radial-gradient(50% 70% at 0% 0%, color-mix(in srgb, var(--color-comp-violet) 32%, transparent), transparent 70%),
		radial-gradient(45% 70% at 100% 100%, color-mix(in srgb, var(--lm-electric-blue) 42%, transparent), transparent 70%),
		color-mix(in srgb, var(--lm-midnight-blue) 80%, black);
	box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--lm-midnight-blue) 70%, transparent);
}
.ezy-page--hp .hp-wf__card::before {
	content: ""; position: absolute; z-index: -1; inset: 0;
	background-image: radial-gradient(color-mix(in srgb, var(--lm-white) 22%, transparent) 1px, transparent 1.5px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(70% 80% at 50% 45%, black, transparent);
	mask-image: radial-gradient(70% 80% at 50% 45%, black, transparent);
}

/*
 * The four customers, two by two below 1024px and one row of four above. The floated legend is an
 * ordinary grid item, so it and the steps span every column. While the tour plays (`is-auto`, from
 * the script) the open chip carries a line that fills over the dwell: this moves on, pick one.
 */
.ezy-page--hp .hp-personas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.ezy-page--hp .hp-wf__pick { float: left; grid-column: 1 / -1; width: 100%; padding: 0; margin-bottom: var(--space-2); font-size: 13px; font-weight: var(--weight-medium); color: var(--color-sidebar-text); }
.ezy-page--hp .hp-persona {
	position: relative; overflow: hidden;
	display: flex; align-items: center; justify-content: center; gap: var(--space-2);
	padding: 10px 14px; border: 1px solid var(--hp-wf-edge); border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--lm-white) 4%, transparent); color: color-mix(in srgb, var(--lm-white) 85%, transparent);
	font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer;
	transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.ezy-page--hp .hp-persona:hover { border-color: color-mix(in srgb, var(--lm-white) 34%, transparent); }
/* Narrow screens: tighter chips, so "Promised to pay" keeps to one line in a 2 x 2 grid. */
@media (max-width: 1023px) {
	.ezy-page--hp .hp-persona { gap: 6px; padding: 10px 8px; font-size: 13px; white-space: nowrap; }
}
.ezy-page--hp input:checked + .hp-persona { background: var(--lm-white); border-color: var(--lm-white); color: var(--color-text-heading); }
.ezy-page--hp input:focus-visible + .hp-persona { outline: 2px solid var(--hp-wf-soft); outline-offset: 2px; }
.ezy-page--hp .hp-persona::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: var(--lm-orange); transform: scaleX(0); transform-origin: left;
}
.ezy-page--hp .hp-personas.is-auto input:checked + .hp-persona::after { animation: hp-progress var(--hp-wf-dwell, 8s) linear both; }

.ezy-page--hp .hp-steps { display: none; grid-column: 1 / -1; width: 100%; margin-top: var(--space-10); }
.ezy-page--hp .hp-personas:has(#hp-persona-ontime:checked) .hp-steps--ontime,
.ezy-page--hp .hp-personas:has(#hp-persona-late:checked) .hp-steps--late,
.ezy-page--hp .hp-personas:has(#hp-persona-promise:checked) .hp-steps--promise,
.ezy-page--hp .hp-personas:has(#hp-persona-key:checked) .hp-steps--key { display: block; }

/*
 * THE LINE, running down: icon in a left column, then when, title and description. The text
 * wrappers are `display: contents`, so their children place straight into the step's grid areas.
 * Each step draws the connector to the next behind its opaque icon.
 */
.ezy-page--hp .hp-steps__list { --hp-lit: 4.2s; position: relative; display: grid; gap: var(--space-6); }
.ezy-page--hp .hp-step {
	--n: 0; position: relative;
	display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "icon when" "icon title" "icon desc";
	column-gap: var(--space-4); row-gap: 4px; align-content: start;
	animation: hp-step-in 420ms var(--ease-emphasized) calc(var(--n) * 110ms) backwards;
}
.ezy-page--hp .hp-step::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: calc(-1 * var(--space-6)); width: 2px; background: var(--hp-wf-edge); }
.ezy-page--hp .hp-step:last-child::before { display: none; }
.ezy-page--hp .hp-step__text, .ezy-page--hp .hp-step__top { display: contents; }
.ezy-page--hp .hp-step__icon {
	grid-area: icon; align-self: start; position: relative; z-index: 1;
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--hp-wf-node); border: 1px solid var(--hp-wf-edge); color: var(--hp-wf-soft); font-size: 20px;
	animation: hp-node-lit 1100ms var(--ease-out) calc(0.4s + var(--n) / (var(--steps, 4) - 1) * var(--hp-lit)) both;
}
.ezy-page--hp .hp-step.is-ok .hp-step__icon { background: color-mix(in srgb, var(--color-success) 32%, var(--lm-midnight-blue)); color: color-mix(in srgb, var(--color-success) 55%, var(--lm-white)); }
.ezy-page--hp .hp-step.is-warn .hp-step__icon { background: color-mix(in srgb, var(--lm-orange) 32%, var(--lm-midnight-blue)); color: color-mix(in srgb, var(--lm-orange) 60%, var(--lm-white)); }
.ezy-page--hp .hp-step__when { grid-area: when; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--hp-wf-soft); font-variant-numeric: tabular-nums; }
.ezy-page--hp .hp-step__title { grid-area: title; font-size: 15px; font-weight: var(--weight-semibold); line-height: 1.35; color: var(--color-text-on-dark); }
.ezy-page--hp .hp-step__desc { grid-area: desc; font-size: var(--text-sm); line-height: 1.5; color: var(--color-sidebar-text); }

/* The invoice: hidden while the line runs down, it travels the line once it runs across. */
.ezy-page--hp .hp-steps__list::after { content: none; }

/*
 * Aimie's note rises once the run has reached the last step. Three classes, not two: the note is a
 * <p> and the last of its type, and Divi's `p:not(.has-background):last-of-type { padding-bottom: 0 }`
 * (0,2,1) outranks a two-class rule, which left the pill with no bottom padding and its text on the
 * border (owner, 2026-10-19).
 */
.ezy-page--hp .hp-steps .hp-steps__note {
	display: flex; align-items: center; gap: var(--space-3); width: fit-content; max-width: 100%;
	margin: var(--space-8) auto 0; padding: 12px var(--space-5); border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--lm-white) 8%, transparent); border: 1px solid var(--hp-wf-edge);
	font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.45; color: var(--color-text-on-dark);
	animation: hp-note-in 600ms var(--ease-out) calc(0.6s + var(--hp-lit, 4.2s)) both;
}
.ezy-page--hp .hp-steps__note svg.ph { flex: none; font-size: 20px; color: var(--lm-orange); }

@keyframes hp-step-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes hp-node-lit {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lm-orange) 0%, transparent); }
	25% { background: var(--lm-orange); border-color: var(--lm-orange); color: var(--lm-white); box-shadow: 0 0 0 8px color-mix(in srgb, var(--lm-orange) 28%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lm-orange) 0%, transparent); }
}
@keyframes hp-note-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hp-travel { from { left: 17px; opacity: 1; } 96% { opacity: 1; } to { left: var(--hp-end); opacity: 0; } }

/* The section waits off screen; the script arms it so the first run starts on arrival. */
.ezy-page--hp .hp-wf.is-armed .hp-step, .ezy-page--hp .hp-wf.is-armed .hp-step__icon,
.ezy-page--hp .hp-wf.is-armed .hp-steps__list::after, .ezy-page--hp .hp-wf.is-armed .hp-steps__note { animation-play-state: paused; }

/*
 * THE LINE, running across from 1024px. Each step is a column: when, icon on the line, title,
 * description. The connector runs from each icon to the next column; the invoice, a glowing orange
 * dot, travels from the first icon's centre to the last's (--hp-end, from the column count).
 */
@media (min-width: 1024px) {
	.ezy-page--hp .hp-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ezy-page--hp .hp-personas { grid-template-columns: repeat(4, minmax(0, 190px)); justify-content: center; }
	.ezy-page--hp .hp-wf__pick { text-align: center; }
	.ezy-page--hp .hp-steps__list {
		--hp-col: calc((100% - (var(--steps, 4) - 1) * var(--space-6)) / var(--steps, 4));
		--hp-end: calc(100% - var(--hp-col) + 17px);
		grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
	}
	.ezy-page--hp .hp-step { grid-template-columns: none; grid-template-areas: "when" "icon" "title" "desc"; grid-template-rows: 18px 44px auto auto; row-gap: var(--space-3); }
	.ezy-page--hp .hp-step::before { left: 44px; right: calc(-1 * var(--space-6)); top: calc(18px + var(--space-3) + 21px); bottom: auto; width: auto; height: 2px; }
	.ezy-page--hp .hp-steps__list::after {
		content: ""; position: absolute; z-index: 2; top: calc(18px + var(--space-3) + 17px); left: 17px;
		width: 10px; height: 10px; border-radius: 50%; background: var(--lm-orange);
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--lm-orange) 30%, transparent), 0 0 18px 4px color-mix(in srgb, var(--lm-orange) 60%, transparent);
		animation: hp-travel var(--hp-lit) linear 0.4s both;
	}
	.ezy-page--hp .hp-steps .hp-steps__note { border-radius: 999px; }
}

/* ============================================================ MANUAL VS EZYCOLLECT */

.ezy-page--hp .hp-compare { position: relative; overflow: hidden; padding-block: var(--space-20); }
.ezy-page--hp .hp-compare > .row { position: relative; z-index: 1; }

/*
 * THE RESPONSIVE BACKGROUND. The grid is drawn twice: faint across the whole section, and again,
 * stronger, through a soft circular mask centred on --mx, --my, which the script moves with the
 * pointer. The two glows are blurred discs that drift on a long loop; only `transform` moves.
 */
.ezy-page--hp .hp-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --mx: 50%; --my: 18%; }
.ezy-page--hp .hp-field::before, .ezy-page--hp .hp-field__grid {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(color-mix(in srgb, var(--lm-electric-blue) 55%, transparent) 1.2px, transparent 1.7px);
	background-size: 22px 22px;
}
.ezy-page--hp .hp-field::before {
	opacity: 0.18;
	-webkit-mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);
	mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);
}
.ezy-page--hp .hp-field__grid {
	z-index: 1;
	-webkit-mask-image: radial-gradient(340px circle at var(--mx) var(--my), black, transparent 72%);
	mask-image: radial-gradient(340px circle at var(--mx) var(--my), black, transparent 72%);
}
.ezy-page--hp .hp-field__glow { position: absolute; width: 560px; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: 0.32; will-change: transform; }
.ezy-page--hp .hp-field__glow--blue {
	left: -120px; top: 18%; background: color-mix(in srgb, var(--lm-electric-blue) 60%, var(--lm-white));
	animation: hp-drift-a 22s ease-in-out infinite alternate;
}
.ezy-page--hp .hp-field__glow--violet {
	right: -140px; top: 42%; background: color-mix(in srgb, var(--color-comp-violet) 45%, var(--lm-white));
	animation: hp-drift-b 26s ease-in-out infinite alternate;
}
@keyframes hp-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(220px, 120px) scale(1.15); } }
@keyframes hp-drift-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-240px, -140px) scale(0.95); } }
.ezy-page--hp .hp-compare__grid { display: grid; gap: var(--space-4); }
.ezy-page--hp .hp-side { display: grid; gap: var(--space-6); align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); }
.ezy-page--hp .hp-side--manual { background: var(--color-surface); border: 1px solid var(--color-border); }
.ezy-page--hp .hp-side--auto {
	background: radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--lm-electric-blue) 50%, transparent), transparent 70%), var(--color-sidebar-bg);
	color: var(--color-text-on-dark); box-shadow: var(--shadow-xl);
}
.ezy-page--hp .hp-side__head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px var(--space-3); align-items: center; }
.ezy-page--hp .hp-side__badge { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); font-size: 22px; background: var(--color-bg-alt); color: var(--color-text-muted); }
.ezy-page--hp .hp-side--auto .hp-side__badge { background: var(--color-primary); color: var(--color-text-on-primary); }
.ezy-page--hp .hp-side h3 { font-size: var(--text-xl); }
.ezy-page--hp .hp-side--auto h3 { color: var(--color-text-on-dark); }
.ezy-page--hp .hp-side__sub { font-size: 13px; color: var(--color-text-muted); }
.ezy-page--hp .hp-side--auto .hp-side__sub { color: var(--color-sidebar-text); }
.ezy-page--hp .hp-side__list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding: var(--space-4) 0; border-top: 1px solid var(--color-border); line-height: 1.5; }
.ezy-page--hp .hp-side--auto .hp-side__list li { border-top-color: color-mix(in srgb, var(--lm-white) 14%, transparent); font-weight: var(--weight-medium); }
.ezy-page--hp .hp-side__list svg.ph { font-size: 22px; color: var(--color-text-muted); }
.ezy-page--hp .hp-side--auto .hp-side__list svg.ph { color: var(--color-primary); }
.ezy-page--hp .hp-side__topic { display: block; margin-bottom: 2px; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.ezy-page--hp .hp-side--auto .hp-side__topic { color: var(--color-sidebar-text); }
.ezy-page--hp .hp-compare__foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4) var(--space-8); margin-top: var(--space-12); text-align: center; }
.ezy-page--hp .hp-compare__foot p { margin: 0; font-size: 17px; font-weight: var(--weight-medium); color: var(--color-text-heading); }
.ezy-page--hp .hp-compare__foot strong { font-weight: var(--weight-heavy); color: var(--color-primary); }

/* ============================================================ AI */

.ezy-page--hp .hp-ai { padding: 0; } /* full width, edge to edge (owner, 2026-10-19) */
.ezy-page--hp .hp-ai__panel {
	position: relative; overflow: hidden; isolation: isolate;
	padding-block: var(--space-24); color: var(--color-text-on-dark);
	background:
		radial-gradient(50% 70% at 0% 0%, color-mix(in srgb, var(--color-comp-violet) 35%, transparent), transparent 70%),
		radial-gradient(40% 60% at 100% 100%, color-mix(in srgb, var(--lm-electric-blue) 45%, transparent), transparent 70%),
		var(--color-sidebar-bg);
}
.ezy-page--hp .hp-ai__intro { display: grid; gap: var(--space-8); align-items: center; margin-bottom: var(--space-12); }
.ezy-page--hp .hp-ai__copy { display: grid; gap: var(--space-5); }
.ezy-page--hp .hp-ai h2 { color: var(--color-text-on-dark); }
.ezy-page--hp .hp-ai .body-lead { margin: 0; color: var(--color-sidebar-text); }
.ezy-page--hp .hp-eyebrow--warm { color: var(--color-primary); }
.ezy-page--hp .hp-ai__aimie { justify-self: center; width: auto; height: clamp(240px, 26vw, 340px); }
.ezy-page--hp .hp-ai__cards { display: grid; gap: var(--space-4); }
/*
 * THE CARD IS THREE LAYERS. Its own background is the 1px border colour; ::before is a wide light
 * that rotates behind, showing only through that 1px; ::after is the card's face, inset 1px, and
 * carries the pointer glow. The light runs once on arrival and circles while the card is hovered.
 */
.ezy-page--hp .hp-ai__card {
	--hp-face: color-mix(in srgb, var(--lm-midnight-blue) 90%, var(--lm-white));
	position: relative; overflow: hidden; isolation: isolate;
	display: grid; gap: 14px; align-content: start; height: 100%;
	padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--lm-white) 14%, var(--lm-midnight-blue));
	color: var(--color-text-on-dark);
	transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.ezy-page--hp .hp-ai__card::before {
	content: ""; position: absolute; z-index: -2; left: 50%; top: 50%;
	width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%;
	background: conic-gradient(from 0deg, transparent 0 62%, var(--lm-electric-blue) 80%, color-mix(in srgb, var(--lm-electric-blue) 55%, var(--lm-white)) 92%, transparent 100%);
	opacity: 0;
}
.ezy-page--hp .hp-ai__card::after {
	content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: calc(var(--radius-lg) - 1px);
	background:
		radial-gradient(260px circle at var(--hp-gx, 50%) var(--hp-gy, -30%), color-mix(in srgb, color-mix(in srgb, var(--lm-electric-blue) 55%, var(--lm-white)) 26%, transparent), transparent 70%),
		var(--hp-face);
}
.ezy-page--hp .hp-ai__card:hover { color: var(--color-text-on-dark); text-decoration: none; transform: translateY(-4px); box-shadow: 0 24px 48px -16px color-mix(in srgb, black 60%, transparent); }

/* Arrival: the cards rise in turn, then each border light runs once, in turn. */
.ezy-page--hp .hp-ai .hp-ai__cards li { animation: hp-rise 640ms var(--ease-emphasized) backwards; }
.ezy-page--hp .hp-ai .hp-ai__cards li:nth-child(2) { animation-delay: 140ms; }
.ezy-page--hp .hp-ai .hp-ai__cards li:nth-child(3) { animation-delay: 280ms; }
.ezy-page--hp .hp-ai .hp-ai__cards li .hp-ai__card::before { animation: hp-orbit-once 1600ms var(--ease-standard) 700ms; }
.ezy-page--hp .hp-ai .hp-ai__cards li:nth-child(2) .hp-ai__card::before { animation-delay: 950ms; }
.ezy-page--hp .hp-ai .hp-ai__cards li:nth-child(3) .hp-ai__card::before { animation-delay: 1200ms; }
.ezy-page--hp .hp-ai.is-armed .hp-ai__cards li, .ezy-page--hp .hp-ai.is-armed .hp-ai__card::before { animation-play-state: paused; }
/* Hovered, the light circles. Same specificity as the arrival rules above and later, so it wins. */
.ezy-page--hp .hp-ai .hp-ai__cards li .hp-ai__card:hover::before { animation: hp-orbit 2.4s linear infinite; animation-delay: 0s; }
@keyframes hp-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes hp-orbit { from { opacity: 1; transform: rotate(0deg); } to { opacity: 1; transform: rotate(360deg); } }
@keyframes hp-orbit-once { 0% { opacity: 0; transform: rotate(0deg); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: rotate(360deg); } }
.ezy-page--hp .hp-ai__card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ezy-page--hp .hp-ai__top { display: flex; justify-content: space-between; align-items: center; font-size: 28px; }
/* An uppercase label with a slim mark, not a tinted capsule. */
.ezy-page--hp .hp-status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-sidebar-text); }
.ezy-page--hp .hp-status { position: relative; }
.ezy-page--hp .hp-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hp-dot, var(--color-primary)); }
/* The dot pulses: a ring leaves it every two and a half seconds. Green where the program is open. */
.ezy-page--hp .hp-status::after {
	content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px;
	border-radius: 50%; background: var(--hp-dot, var(--color-primary));
	animation: hp-ping 2.5s var(--ease-out) infinite;
}
.ezy-page--hp .hp-status--open { --hp-dot: var(--color-success); color: var(--color-text-on-dark); }
@keyframes hp-ping { from { opacity: 0.7; transform: scale(1); } 70%, to { opacity: 0; transform: scale(3.2); } }
.ezy-page--hp .hp-ai__title { font-size: 21px; font-weight: var(--weight-bold); line-height: 1.25; letter-spacing: -0.01em; }
.ezy-page--hp .hp-ai__body { font-size: 15px; line-height: 1.6; color: var(--color-sidebar-text); }
.ezy-page--hp .hp-ai__cta { display: inline-flex; align-items: center; gap: var(--space-2); padding-top: 6px; font-size: 15px; font-weight: var(--weight-semibold); }
.ezy-page--hp .hp-ai__cta svg.ph { transition: transform var(--duration-fast) var(--ease-standard); }
.ezy-page--hp .hp-ai__card:hover .hp-ai__cta svg.ph { transform: translateX(3px); }

/* ============================================================ INTEGRATIONS */

.ezy-page--hp .hp-int { padding-block: var(--space-20); }
.ezy-page--hp .hp-int__grid { display: grid; gap: var(--space-12); align-items: center; }
.ezy-page--hp .hp-int__copy { display: grid; gap: var(--space-4); }
.ezy-page--hp .hp-int__copy .body-lead { margin: 0; }
.ezy-page--hp .hp-int__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ezy-page--hp .hp-int__tile {
	position: relative; box-sizing: border-box;
	display: grid; place-items: center; min-height: 76px; height: 100%; padding: var(--space-3) var(--space-5);
	border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface);
	font-size: 15px; font-weight: var(--weight-semibold); line-height: 1.2; text-align: center; color: var(--color-text-heading);
	transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
/* Each logo is drawn at its own height (--hp-logo-h, from the markup) and never wider than 82% of the tile. */
.ezy-page--hp .hp-int__logo { display: block; width: auto; height: var(--hp-logo-h, 32px); max-width: 82%; object-fit: contain; }
/*
 * A LINKED TILE ANSWERS THE POINTER PLAINLY: it lifts, takes a blue edge and shadow, and an arrow
 * arrives in its corner. The face stays white so the partner's own colours read. QuickBooks is not a
 * link and does none of this.
 */
.ezy-page--hp a.hp-int__tile { transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.ezy-page--hp a.hp-int__tile svg.ph {
	position: absolute; top: 8px; right: 8px; font-size: 16px; color: var(--color-secondary);
	opacity: 0; transform: translate(-4px, 4px);
	transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.ezy-page--hp a.hp-int__tile:hover, .ezy-page--hp a.hp-int__tile:focus-visible {
	border-color: var(--color-secondary); color: var(--color-text-heading);
	text-decoration: none; transform: translateY(-3px);
	box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--color-secondary) 45%, transparent);
	outline: none;
}
.ezy-page--hp a.hp-int__tile:hover svg.ph, .ezy-page--hp a.hp-int__tile:focus-visible svg.ph { opacity: 1; transform: none; }

/* ============================================================ TESTIMONIALS */

/*
 * Two customer stories on a dark panel, full width (owner, 2026-10-19). The cards are translucent
 * white on midnight with a hairline edge; each lays out as logo, lifted line, quote, caption, and the
 * quote row takes the slack so both captions sit on one baseline.
 */
.ezy-page--hp .hp-quotes {
	padding-block: var(--space-24); color: var(--color-text-on-dark);
	background:
		radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--lm-electric-blue) 28%, transparent), transparent 70%),
		var(--color-sidebar-bg);
}
.ezy-page--hp .hp-quotes h2 { color: var(--color-text-on-dark); }
.ezy-page--hp .hp-stories { display: grid; gap: var(--space-6); }
.ezy-page--hp .hp-stories > li { display: grid; }
.ezy-page--hp .hp-story {
	display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-5); margin: 0;
	padding: clamp(28px, 3vw, 40px); border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--lm-white) 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--lm-white) 12%, transparent);
}
.ezy-page--hp .hp-story__logo { width: auto; height: 36px; }
.ezy-page--hp .hp-story__logo--tall { height: 56px; margin-block: -10px; }
.ezy-page--hp .hp-story__lift { margin: 0; font-size: clamp(1.4rem, 1vw + 1rem, 1.9rem); font-weight: var(--weight-heavy); line-height: 1.2; letter-spacing: -0.02em; color: var(--color-text-on-dark); text-wrap: balance; }
.ezy-page--hp .hp-story blockquote { margin: 0; padding: 0; border: 0; font-size: var(--text-base); line-height: 1.65; color: var(--color-sidebar-text); text-wrap: pretty; }
.ezy-page--hp .hp-story figcaption { display: grid; gap: 2px; padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--lm-white) 12%, transparent); }
.ezy-page--hp .hp-story__name { font-weight: var(--weight-semibold); color: var(--color-text-on-dark); }
.ezy-page--hp .hp-story__role { font-size: var(--text-sm); color: var(--color-sidebar-text); }
.ezy-page--hp .hp-reviews__more { margin: var(--space-10) 0 0; text-align: center; font-size: var(--text-sm); color: var(--color-sidebar-text); }
.ezy-page--hp .hp-reviews__more a { display: inline-block; padding-block: 10px; font-weight: var(--weight-semibold); color: color-mix(in srgb, var(--lm-electric-blue) 45%, var(--lm-white)); }
@media (min-width: 768px) {
	.ezy-page--hp .hp-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================ CTA */

/* Full width, edge to edge, owner request 2026-10-14: no inset and no rounded corners. */
.ezy-page--hp .hp-cta { padding: 0; }
.ezy-page--hp .hp-cta__panel { padding-block: var(--space-24); background: var(--gradient-warm); }
/* CENTRED ON PURPOSE. Heading, line and buttons on one axis, so the band reads as one ask. */
.ezy-page--hp .hp-cta__grid { display: grid; gap: var(--space-8); justify-items: center; text-align: center; }
.ezy-page--hp .hp-cta h2, .ezy-page--hp .hp-cta p { color: var(--color-text-on-primary); }
.ezy-page--hp .hp-cta p { margin: var(--space-4) auto 0; max-width: 34em; font-size: var(--text-lg); line-height: 1.6; }
.ezy-page--hp .hp-cta .hp-btn--ghost-dark { border-width: 2px; border-color: var(--color-text-on-primary); background: transparent; }

/* ============================================================ 768 */

@media (min-width: 768px) {
	.ezy-page--hp .hp-app__body { grid-template-columns: 52px minmax(0, 1fr); }
	.ezy-page--hp .hp-app__rail { display: grid; }
	.ezy-page--hp .hp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ezy-page--hp .hp-tabs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ezy-page--hp .hp-compare__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ezy-page--hp .hp-ai__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ezy-page--hp .hp-int__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ezy-page--hp .hp-feed { margin-left: calc(-1 * var(--space-4)); }
}

/* ============================================================ 1024, where two columns fit */

@media (min-width: 1024px) {
	.ezy-page--hp .hp-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
	/*
	 * THE HANDOFF'S HERO. The dashboard bleeds past the column into the panel's edge, Aimie stands
	 * in front of it, and the Aimie card overlaps its bottom left corner, reaching out past it.
	 * The art keeps room underneath for her feet and the card.
	 */
	.ezy-page--hp .hp-hero__art { padding-bottom: var(--space-16); }
	.ezy-page--hp .hp-app { width: calc(100% + clamp(40px, 8vw, 140px)); }
	.ezy-page--hp .hp-hero__aimie { display: block; }
	.ezy-page--hp .hp-feed { position: absolute; left: clamp(-56px, -4vw, -12px); bottom: var(--space-6); margin: 0; width: min(340px, 64%); }
	.ezy-page--hp .hp-head { grid-template-columns: var(--span-7) minmax(0, 1fr); align-items: end; }
	.ezy-page--hp .hp-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ezy-page--hp .hp-ai__intro { grid-template-columns: var(--span-8) minmax(0, 1fr); }
	.ezy-page--hp .hp-int__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================ 1280 */

@media (min-width: 1280px) {
	.ezy-page--hp .hp-tab { padding: var(--space-4) var(--space-5); }
}


@media (prefers-reduced-motion: reduce) {
	.ezy-page--hp .hp-feed__item, .ezy-page--hp .hp-panel, .ezy-page--hp .hp-step,
	.ezy-page--hp .hp-tab, .ezy-page--hp .hp-tab::after,
	.ezy-page--hp .hp-int__tile, .ezy-page--hp .hp-btn,
	.ezy-page--hp .hp-ai__cards li, .ezy-page--hp .hp-ai__card, .ezy-page--hp .hp-ai__card::before,
	.ezy-page--hp .hp-status::after, .ezy-page--hp a.hp-int__tile svg.ph { animation: none; transition: none; }
	.ezy-page--hp .hp-status::after { display: none; }
	.ezy-page--hp .hp-field__glow { animation: none; }
	.ezy-page--hp .hp-hero__accent { animation: none; }
	.ezy-page--hp .hp-aura__glow, .ezy-page--hp .hp-aurora, .ezy-page--hp .hp-ai__floor, .ezy-page--hp .hp-word > span,
	.ezy-page--hp .hp-panel__copy h3, .ezy-page--hp .hp-panel__copy .hp-checks, .ezy-page--hp .hp-panel__copy .hp-link,
	.ezy-page--hp .hp-surface, .ezy-page--hp .hp-flow li, .ezy-page--hp .hp-flow__icon,
	.ezy-page--hp .hp-invoice__pay, .ezy-page--hp .hp-invoice__methods .is-on::after,
	.ezy-page--hp .hp-credit__head .hp-tag, .ezy-page--hp .hp-credit__runner, .ezy-page--hp .hp-credit__terms,
	.ezy-page--hp .hp-toast, .ezy-page--hp .hp-metric { animation: none; }
	.ezy-page--hp .hp-cursor-track { display: none; }
	.ezy-page--hp .hp-anim__draw, .ezy-page--hp .hp-anim__lit, .ezy-page--hp .hp-anim__dot, .ezy-page--hp .hp-anim__ring,
	.ezy-page--hp .hp-anim__card, .ezy-page--hp .hp-anim__wave, .ezy-page--hp .hp-anim__fill { animation: none; }
	.ezy-page--hp .hp-pay__done { animation: none; opacity: 1; }
	.ezy-page--hp .hp-step__icon, .ezy-page--hp .hp-steps__note { animation: none; }
	.ezy-page--hp .hp-steps__list::after { display: none; }
	.ezy-page--hp .hp-clients__logos { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: var(--space-6) var(--space-8); }
	.ezy-page--hp .hp-clients__logos .is-clone { display: none; }
	.ezy-page--hp .hp-clients__strip { -webkit-mask-image: none; mask-image: none; }
}