/* =============================================================================
   ELabELN, Marketing template foundation
   Reusable, Cornerstone-free styling for weaned marketing pages.
   Loaded only on pages using MARKETING/* templates (see MARKETING/inc/marketing.php).
   Tokens + shared components mirror TEMPLATES/assets/page.css so weaned pages
   look identical to the already-migrated Templates CPT and the legacy site.
   ============================================================================= */

:root {
	--eln-brand-orange: #f48220;
	--eln-brand-orange-hover: #c3681a;
	--eln-brand-orange-soft: #FDECDC;
	--eln-brand-green: #1f7a4a;
	--eln-navy: rgb(6, 22, 52);
	--eln-ink: #1F2330;
	--eln-ink-body: #333;
	--eln-ink-3: #6B7280;
	--eln-ink-4: #9CA3AF;
	--eln-line: #E3E5EA;
	--eln-line-warm: #ECE9E1;
	--eln-bg-gray: #F1F3F8;
	--eln-bg-card-warm: #FAF7F2;
	--eln-good: #1F8A5B;
	--eln-good-soft: #E2F4EB;
	--eln-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
	--eln-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
	--eln-shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12);
}

/* Scope a reset to our page so we don't disturb the shared header/footer */
.eln-mkt,
.eln-mkt *,
.eln-mkt *::before,
.eln-mkt *::after { box-sizing: border-box; }

.eln-mkt { color: var(--eln-ink-body); }

/* ---- container --------------------------------------------------------- */
.eln-container {
	width: 88%;
	max-width: 1200px;
	margin: 0 auto;
}

/* ---- section rhythm ---------------------------------------------------- */
.eln-section { padding: 60px 0; }
.eln-section--gray { background: var(--eln-bg-gray); }
.eln-section--navy { background: var(--eln-navy); color: #fff; }

/* ---- eyebrow (green, uppercase, leading rule) -------------------------- */
.eln-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--eln-brand-green);
	margin-bottom: 22px;
}
.eln-eyebrow::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 2px;
	background: var(--eln-brand-green);
}
.eln-section--navy .eln-eyebrow { color: #2DA463; }
.eln-section--navy .eln-eyebrow::before { background: #2DA463; }

/* ---- headings ---------------------------------------------------------- */
.eln-h2 {
	font-family: inherit;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--eln-navy);
	margin: 0 0 18px;
}
.eln-section--navy .eln-h2 { color: #fff; }
.eln-accent { color: var(--eln-brand-orange); font-style: italic; font-weight: inherit; }
.eln-lead {
	font-size: 19px;
	line-height: 1.6;
	color: var(--eln-ink-body);
	margin: 0 0 8px;
	max-width: 720px;
}
.eln-section--navy .eln-lead { color: rgba(255,255,255,0.85); }

/* ---- CTA buttons (identical to page.css .eln-cta) ---------------------- */
.eln-cta {
	display: inline-flex;
	align-items: center;
	padding: 0.45em 0.8em;
	border: 2px solid transparent;
	border-radius: 5px;
	font-size: 1.1em;
	font-family: inherit;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.eln-cta__label { display: inline-block; margin: 5px; font-size: 0.9em; }
.eln-cta__icon { display: inline-flex; align-items: center; margin: 5px; }
.eln-cta__icon svg { width: 0.95em; height: 0.95em; stroke: currentColor; }
.eln-cta--primary {
	background: var(--eln-brand-orange);
	border-color: var(--eln-brand-orange);
	color: #fff;
	flex-direction: row-reverse;
}
.eln-cta--primary:hover, .eln-cta--primary:focus { background: #fff; color: var(--eln-brand-orange); }
.eln-cta--secondary { background: #fff; border-color: var(--eln-brand-green); color: var(--eln-brand-green); }
.eln-cta--secondary:hover, .eln-cta--secondary:focus { background: var(--eln-brand-green); color: #fff; }
/* secondary on navy: readable outline */
.eln-section--navy .eln-cta--secondary { background: transparent; border-color: #2DA463; color: #fff; }
.eln-section--navy .eln-cta--secondary:hover { background: #2DA463; color: #fff; }

/* =============================================================================
   HERO (navy)
   ============================================================================= */
.eln-hero { background: var(--eln-navy); color: #fff; padding: 72px 0 64px; }
.eln-hero__eyebrow { color: #2DA463; }
.eln-hero__eyebrow::before { background: #2DA463; }
.eln-hero__title {
	font-family: inherit;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0 0 20px;
	max-width: 860px;
}
.eln-hero__lead {
	font-size: 19px;
	line-height: 1.55;
	color: rgba(255,255,255,0.85);
	margin: 0 0 30px;
	max-width: 640px;
}
.eln-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* =============================================================================
   VALUE STRIP (3 points)
   ============================================================================= */
.eln-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.eln-value__icon {
	width: 46px; height: 46px; border-radius: 10px;
	background: var(--eln-brand-orange-soft); color: var(--eln-brand-orange);
	display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.eln-value__icon svg { width: 24px; height: 24px; }
.eln-value__title { font-size: 18px; font-weight: 700; color: var(--eln-navy); margin: 0 0 8px; }
.eln-value__text { font-size: 15px; line-height: 1.55; color: var(--eln-ink-3); margin: 0; }

/* =============================================================================
   PLAN BUILDER
   ============================================================================= */
.eln-pb__head { max-width: 720px; margin-bottom: 34px; }
.eln-pb__grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 28px; align-items: start; }

.eln-pb__panel {
	background: #fff; border: 1px solid var(--eln-line); border-radius: 16px;
	padding: 8px 26px 22px; box-shadow: var(--eln-shadow-sm);
}
/* billing toggle */
.eln-pb__billing { display: flex; align-items: center; gap: 12px; padding: 20px 0 6px; flex-wrap: wrap; }
.eln-pb__switch { display: inline-flex; background: var(--eln-bg-gray); border-radius: 999px; padding: 4px; }
.eln-pb__switch button {
	border: 0; background: transparent; cursor: pointer; font-family: inherit; font-weight: 700;
	font-size: 14px; color: var(--eln-ink-3); padding: 8px 18px; border-radius: 999px; transition: all .15s ease;
}
.eln-pb__switch button[aria-pressed="true"] { background: #fff; color: var(--eln-navy); box-shadow: var(--eln-shadow-sm); }
.eln-pb__save { font-size: 13px; font-weight: 700; color: var(--eln-good); background: var(--eln-good-soft); padding: 5px 12px; border-radius: 999px; }

/* base + add-on rows */
.eln-pb__row {
	display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-top: 1px solid var(--eln-line);
}
.eln-pb__row:first-of-type { border-top: 0; }
.eln-pb__rowmain { flex: 1; min-width: 0; }
.eln-pb__rowname { font-size: 17px; font-weight: 700; color: var(--eln-navy); margin: 0 0 3px; }
.eln-pb__rowdesc { font-size: 14px; color: var(--eln-ink-3); line-height: 1.5; margin: 0; }
.eln-pb__rowprice { text-align: right; white-space: nowrap; flex-shrink: 0; }
.eln-pb__rowprice b { font-size: 18px; color: var(--eln-navy); font-weight: 700; }
.eln-pb__rowprice span { display: block; font-size: 12px; color: var(--eln-ink-4); }
.eln-pb__included { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--eln-good); }

/* app toggle checkbox */
.eln-pb__toggle { position: relative; flex-shrink: 0; padding-top: 2px; }
.eln-pb__toggle input { position: absolute; opacity: 0; width: 52px; height: 30px; margin: 0; cursor: pointer; }
.eln-pb__track {
	display: block; width: 52px; height: 30px; border-radius: 999px; background: #cbd2de;
	position: relative; transition: background .15s ease;
}
.eln-pb__track::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
	background: #fff; box-shadow: var(--eln-shadow-sm); transition: transform .15s ease;
}
.eln-pb__toggle input:checked + .eln-pb__track { background: var(--eln-brand-orange); }
.eln-pb__toggle input:checked + .eln-pb__track::after { transform: translateX(22px); }
.eln-pb__toggle input:focus-visible + .eln-pb__track { outline: 2px solid var(--eln-navy); outline-offset: 2px; }
.eln-pb__row.is-on { background: #fff; }
.eln-pb__applink { font-size: 13px; font-weight: 700; color: var(--eln-brand-orange); text-decoration: none; }
.eln-pb__applink:hover { text-decoration: underline; }

/* summary card */
.eln-pb__summary {
	background: var(--eln-navy); color: #fff; border-radius: 16px; padding: 26px; position: sticky; top: 110px;
	box-shadow: var(--eln-shadow-lg);
}
.eln-pb__summary h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); margin: 0 0 16px; font-weight: 700; }
.eln-pb__lines { list-style: none; margin: 0 0 16px; padding: 0; }
.eln-pb__lines li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 7px 0; color: rgba(255,255,255,.9); border-bottom: 1px solid rgba(255,255,255,.1); }
.eln-pb__lines li span:last-child { font-weight: 700; white-space: nowrap; }
.eln-pb__total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 0 4px; }
.eln-pb__total-label { font-size: 14px; color: rgba(255,255,255,.8); }
.eln-pb__total-amt { font-size: 34px; font-weight: 700; color: #fff; }
.eln-pb__total-amt small { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.7); }
.eln-pb__note { font-size: 13px; color: #2DA463; font-weight: 700; margin: 0 0 18px; min-height: 1.2em; }
.eln-pb__summary .eln-cta { width: 100%; justify-content: center; }

/* =============================================================================
   WHAT'S INCLUDED
   ============================================================================= */
.eln-inc__head { max-width: 720px; margin-bottom: 32px; }
.eln-inc__features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; margin-bottom: 44px; }
.eln-inc__feature { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; color: var(--eln-ink-body); line-height: 1.45; }
.eln-inc__check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--eln-good-soft); color: var(--eln-good); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.eln-inc__check svg { width: 13px; height: 13px; }

.eln-inc__subhead { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--eln-ink-3); margin: 0 0 18px; }
.eln-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.eln-appcard { background: #fff; border: 1px solid var(--eln-line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; box-shadow: var(--eln-shadow-sm); }
.eln-appcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.eln-appcard__name { font-size: 19px; font-weight: 700; color: var(--eln-navy); margin: 0; }
.eln-appcard__price { font-size: 15px; font-weight: 700; color: var(--eln-brand-orange); white-space: nowrap; }
.eln-appcard__fn { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--eln-brand-green); margin: 0 0 10px; }
.eln-appcard__desc { font-size: 15px; line-height: 1.55; color: var(--eln-ink-3); margin: 0 0 16px; flex: 1; }
.eln-appcard__link { font-size: 14px; font-weight: 700; color: var(--eln-brand-orange); text-decoration: none; align-self: flex-start; }
.eln-appcard__link:hover { text-decoration: underline; }

/* fine print band */
.eln-finePrint { margin-top: 40px; font-size: 14px; line-height: 1.6; color: var(--eln-ink-3); max-width: 860px; }

/* =============================================================================
   FAQ  (mirrors page.css .eln-faq)
   ============================================================================= */
.eln-faq { background: #fff; padding: 60px 0; }
.eln-faq__inner > * { max-width: 820px; }
.eln-faq__intro { margin-bottom: 28px; }
.eln-faq__list { display: grid; gap: 8px; max-width: 820px; }
.eln-faq__item { background: #fff; border: 1px solid var(--eln-line); border-radius: 8px; overflow: hidden; }
.eln-faq__question { width: 100%; padding: 16px 20px; background: transparent; cursor: pointer; display: flex; align-items: center; gap: 12px; font-family: inherit; text-align: left; list-style: none; }
.eln-faq__question::-webkit-details-marker { display: none; }
.eln-faq__indicator { color: var(--eln-brand-orange); font-size: 12px; line-height: 1; flex-shrink: 0; transition: transform .2s ease; display: inline-block; }
.eln-faq__item[open] .eln-faq__indicator { transform: rotate(90deg); }
.eln-faq__question-text { flex: 1; font-family: inherit; font-size: 1em; font-weight: 600; color: var(--eln-navy); line-height: 1.4; margin: 0; }
.eln-faq__answer { padding: 0 20px 18px 38px; font-size: 1em; color: var(--eln-ink-body); line-height: 1.65; }
.eln-faq__answer p { margin: 0 0 1em; } .eln-faq__answer p:last-child { margin-bottom: 0; }

/* =============================================================================
   FINAL CTA  (mirrors page.css .eln-final-cta)
   ============================================================================= */
.eln-final-cta__card { background: var(--eln-navy); color: #fff; border-radius: 24px; padding: 56px 60px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; }
.eln-final-cta__headline { font-family: inherit; font-size: 38px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; color: #fff; }
.eln-final-cta__headline .eln-accent { color: var(--eln-brand-orange); }
.eln-final-cta__paragraph { font-size: 16px; color: rgba(255,255,255,.78); margin: 0 0 26px; max-width: 520px; line-height: 1.55; }
.eln-final-cta__buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.eln-final-cta__features { display: grid; gap: 10px; }
.eln-final-cta__feature { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; font-size: 13px; font-weight: 500; color: #fff; }
.eln-final-cta__feature svg { width: 18px; height: 18px; color: var(--eln-brand-orange); flex-shrink: 0; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
	.eln-pb__grid { grid-template-columns: 1fr; }
	.eln-pb__summary { position: static; }
}
@media (max-width: 900px) {
	.eln-hero__title { font-size: 38px; }
	.eln-h2 { font-size: 32px; }
	.eln-final-cta__card { grid-template-columns: 1fr; gap: 32px; padding: 44px 36px; }
	.eln-final-cta__headline { font-size: 30px; }
}
@media (max-width: 700px) {
	.eln-values { grid-template-columns: 1fr; gap: 22px; }
	.eln-inc__features { grid-template-columns: 1fr; }
	.eln-apps { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.eln-hero { padding: 52px 0 44px; }
	.eln-hero__title { font-size: 30px; }
	.eln-hero__lead, .eln-lead { font-size: 16px; }
	.eln-section { padding: 44px 0; }
	.eln-h2 { font-size: 26px; }
	.eln-hero__ctas .eln-cta, .eln-final-cta__buttons .eln-cta { justify-content: center; }
	.eln-final-cta__card { padding: 36px 24px; border-radius: 18px; }
	.eln-pb__panel { padding: 8px 18px 18px; }
}

/* =============================================================================
   Font Awesome icons: official SVGs inlined by MARKETING/inc/icons.php.
   Duotone = navy primary / orange secondary (matches the TEMPLATES/ system).
   ============================================================================= */
.eln-value__icon svg { width: auto; height: 26px; }
.eln-value__icon svg .fa-primary { fill: var(--eln-navy); opacity: 1; }
.eln-value__icon svg .fa-secondary { fill: var(--eln-brand-orange); opacity: 1; }
.eln-inc__check svg { width: 12px; height: 12px; fill: currentColor; }
.eln-fcta-check { display: inline-flex; align-items: center; flex-shrink: 0; }
.eln-fcta-check svg { width: 15px; height: 15px; fill: var(--eln-brand-orange); }

/* =============================================================================
   APP / PRODUCT PAGE sections (Lab Portal, later the other app repositions).
   Mirrors the LabDrive page structure, Cornerstone-free, on the shared tokens.
   ============================================================================= */

/* hero with side product shot */
.eln-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.eln-hero__bullets { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.eln-hero__bullets li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.9); }
.eln-hero__bullets svg { width: 15px; height: 15px; fill: #2DA463; flex-shrink: 0; }
.eln-pill { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px; background: rgba(45,164,99,0.18); color: #2DA463; font-size: 11px; font-weight: 700; letter-spacing: .06em; vertical-align: middle; }

/* product screenshot frame (faux app window) */
.eln-shot { border-radius: 12px; overflow: hidden; border: 1px solid var(--eln-line); background: #fff; box-shadow: var(--eln-shadow-lg); }
.eln-shot__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f2f4f8; border-bottom: 1px solid var(--eln-line); }
.eln-shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfd6e0; display: inline-block; }
.eln-shot img { display: block; width: 100%; height: auto; }
.eln-shot--float { box-shadow: 0 30px 60px rgba(6,22,52,0.28); }

/* problem section */
.eln-prose { max-width: 760px; }
.eln-prose p { font-size: 17px; line-height: 1.65; color: var(--eln-ink-body); margin: 0 0 16px; }
.eln-prose p:last-child { margin-bottom: 0; }

/* numbered capabilities (alternating image + text) */
.eln-caps { display: grid; gap: 56px; margin-top: 44px; }
.eln-cap { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.eln-cap:nth-child(even) .eln-cap__media { order: -1; }
.eln-cap--full { grid-template-columns: 1fr; max-width: 820px; }
.eln-cap__num { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--eln-brand-orange); margin: 0 0 10px; }
.eln-cap__title { font-size: 24px; font-weight: 700; color: var(--eln-navy); line-height: 1.2; margin: 0 0 10px; }
.eln-cap__text { font-size: 16px; line-height: 1.6; color: var(--eln-ink-3); margin: 0; }

/* "how it fits" module rows */
.eln-mods { display: grid; gap: 14px; margin-top: 30px; max-width: 820px; }
.eln-mod { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; background: #fff; border: 1px solid var(--eln-line); border-radius: 12px; }
.eln-mod__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--eln-brand-orange-soft); display: flex; align-items: center; justify-content: center; }
.eln-mod__icon svg { width: 22px; height: 22px; }
.eln-mod__icon svg .fa-primary { fill: var(--eln-navy); opacity: 1; }
.eln-mod__icon svg .fa-secondary { fill: var(--eln-brand-orange); opacity: 1; }
.eln-mod__name { font-size: 16px; font-weight: 700; color: var(--eln-navy); margin: 0 0 3px; }
.eln-mod__desc { font-size: 14px; line-height: 1.55; color: var(--eln-ink-3); margin: 0; }

/* differentiation trigger bullets */
.eln-triggers { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; max-width: 760px; }
.eln-triggers li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--eln-ink-body); }
.eln-triggers svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.eln-triggers svg .fa-primary { fill: var(--eln-navy); opacity: 1; }
.eln-triggers svg .fa-secondary { fill: var(--eln-brand-orange); opacity: 1; }

@media (max-width: 900px) {
	.eln-hero__grid { grid-template-columns: 1fr; gap: 34px; }
	.eln-cap { grid-template-columns: 1fr; gap: 22px; }
	.eln-cap:nth-child(even) .eln-cap__media { order: 0; }
	.eln-cap__title { font-size: 21px; }
}

/* =============================================================================
   FIXES + additions (Lab Portal v2)
   ============================================================================= */
/* readable body text in capability/how-it-fits on gray + white */
.eln-cap__text { color: var(--eln-ink-body); }
/* "how it fits" module name/desc: force block layout + spacing + readable desc */
.eln-mod { align-items: center; }
.eln-mod > span:last-child { display: block; }
.eln-mod__name { display: block; margin-bottom: 4px; }
.eln-mod__desc { display: block; color: var(--eln-ink-body); font-size: 14.5px; }
/* navy CTA check icons -> white */
.eln-final-cta__feature svg { fill: #fff; width: 16px; height: 16px; }
.eln-final-cta__feature svg .fa-primary, .eln-final-cta__feature svg .fa-secondary { fill: #fff; opacity: 1; }

/* ---- balanced capability grid (replaces big alternating screenshots) ------ */
.eln-capgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.eln-capgrid .eln-capcard:nth-child(4) { grid-column: 1 / 2; }
.eln-capcard { background: #fff; border: 1px solid var(--eln-line); border-radius: 14px; padding: 26px 24px; box-shadow: var(--eln-shadow-sm); }
.eln-capcard__icon { width: 46px; height: 46px; border-radius: 11px; background: var(--eln-brand-orange-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.eln-capcard__icon svg { width: 24px; height: 24px; }
.eln-capcard__icon svg .fa-primary { fill: var(--eln-navy); opacity: 1; }
.eln-capcard__icon svg .fa-secondary { fill: var(--eln-brand-orange); opacity: 1; }
.eln-capcard__num { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--eln-brand-orange); }
.eln-capcard__title { font-size: 18px; font-weight: 700; color: var(--eln-navy); line-height: 1.25; margin: 4px 0 8px; }
.eln-capcard__text { font-size: 15px; line-height: 1.6; color: var(--eln-ink-body); margin: 0; }
@media (max-width: 900px) { .eln-capgrid { grid-template-columns: 1fr 1fr; } .eln-capgrid .eln-capcard:nth-child(4){ grid-column: auto; } }
@media (max-width: 560px) { .eln-capgrid { grid-template-columns: 1fr; } }

/* =============================================================================
   INTERACTIVE DEMO ("see it work")
   ============================================================================= */
.lpdemo { margin-top: 34px; border-radius: 20px; border: 1px solid var(--eln-line); background: #fff; box-shadow: var(--eln-shadow-lg); overflow: hidden; }
.lpdemo__bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 22px; background: var(--eln-navy); color: #fff; }
.lpdemo__toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; background: var(--eln-brand-orange); color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 999px; }
.lpdemo__toggle:hover { background: #fff; color: var(--eln-brand-orange); }
.lpdemo__toggle svg { width: 12px; height: 12px; fill: currentColor; }
.lpdemo__steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; }
.lpdemo__steps li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.55); padding: 4px 10px; border-radius: 999px; transition: all .2s ease; }
.lpdemo__steps li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); }
.lpdemo__steps li.is-active { color: #fff; background: rgba(255,255,255,.12); }
.lpdemo__steps li.is-active::before { background: var(--eln-brand-orange); box-shadow: 0 0 0 3px rgba(244,130,32,.3); }
.lpdemo__steps li.is-done { color: rgba(255,255,255,.8); }
.lpdemo__steps li.is-done::before { background: #2DA463; }

.lpdemo__stage { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; gap: 0; padding: 26px; background: var(--eln-bg-gray); align-items: stretch; }
.lpdemo__panel { background: #fff; border: 1px solid var(--eln-line); border-radius: 14px; overflow: hidden; transition: box-shadow .3s ease, transform .3s ease; }
.lpdemo.is-portal .lpdemo__portal, .lpdemo.is-eln .lpdemo__eln { box-shadow: 0 0 0 2px var(--eln-brand-orange), var(--eln-shadow-md); }
.lpdemo__phead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 15px; background: var(--eln-navy); color: #fff; }
.lpdemo__pname { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.lpdemo__ptag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: rgba(255,255,255,.16); padding: 3px 8px; border-radius: 999px; }
.lpdemo__pbody { padding: 15px 16px; }

/* mini form */
.lpdemo__field { margin-bottom: 11px; }
.lpdemo__flabel { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--eln-ink-4); margin-bottom: 4px; }
.lpdemo__fbox { min-height: 30px; border: 1px solid var(--eln-line); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; color: var(--eln-navy); background: #fff; display: flex; align-items: center; }
.lpdemo__caret { display: inline-block; width: 1px; height: 14px; background: var(--eln-brand-orange); margin-left: 2px; animation: lpcaret 1s step-end infinite; }
.lpdemo.is-eln .lpdemo__caret, .lpdemo:not(.is-portal) .lpdemo__caret { animation: none; opacity: 0; }
@keyframes lpcaret { 50% { opacity: 0; } }
.lpdemo__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lpdemo__chip { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--eln-line); color: var(--eln-ink-3); background: #fff; transition: all .2s ease; }
.lpdemo__chip.is-on { border-color: var(--eln-brand-orange); background: var(--eln-brand-orange-soft); color: var(--eln-brand-orange-hover); }
.lpdemo__submit { margin-top: 12px; width: 100%; text-align: center; padding: 9px; border-radius: 8px; background: #cbd2de; color: #fff; font-size: 13px; font-weight: 700; transition: all .25s ease; }
.lpdemo__submit.is-active { background: var(--eln-brand-orange); box-shadow: 0 6px 16px rgba(244,130,32,.4); transform: translateY(-1px); }

/* list rows (appear on state) */
.lpdemo__list { margin-top: 4px; }
.lpdemo__listhead { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--eln-ink-4); margin: 6px 0 8px; }
.lpdemo__row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--eln-line); border-radius: 10px; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.lpdemo__row.is-in { opacity: 1; transform: none; }
.lpdemo__ref { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12.5px; font-weight: 700; color: var(--eln-navy); }
.lpdemo__rowsub { font-size: 11.5px; color: var(--eln-ink-3); }
.lpdemo__grow { flex: 1; min-width: 0; }
.lpdemo__status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; transition: opacity .3s ease; }
.lpdemo__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, #8898aa); }
.lpdemo__report { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 11px; border: 1px dashed var(--eln-line); border-radius: 10px; font-size: 12px; color: var(--eln-navy); opacity: 0; transform: translateY(6px); transition: all .4s ease; }
.lpdemo__report.is-in { opacity: 1; transform: none; }
.lpdemo__report svg { width: 15px; height: 15px; flex-shrink: 0; }
.lpdemo__report svg .fa-primary { fill: var(--eln-navy);} .lpdemo__report svg .fa-secondary { fill: var(--eln-brand-orange); opacity: 1; }
.lpdemo__dl { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--eln-brand-orange); }

/* center pipe + flying tokens */
.lpdemo__pipe { position: relative; display: flex; align-items: center; justify-content: center; }
.lpdemo__pipe::before { content: ""; position: absolute; top: 12%; bottom: 12%; width: 2px; background: repeating-linear-gradient(to bottom, var(--eln-line) 0 6px, transparent 6px 12px); }
.lpdemo__pipe span { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--eln-line); display: flex; align-items: center; justify-content: center; color: var(--eln-brand-green); box-shadow: var(--eln-shadow-sm); }
.lpdemo__pipe span svg { width: 15px; height: 15px; fill: currentColor; }
.lpdemo__packet, .lpdemo__token { position: absolute; top: 50%; z-index: 5; padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; box-shadow: var(--eln-shadow-lg); opacity: 0; pointer-events: none; white-space: nowrap; }
.lpdemo__packet { left: 30%; background: var(--eln-brand-orange); }
.lpdemo__token { left: 30%; background: var(--eln-brand-green); }
.lpdemo__packet.is-flying { animation: lpfly-r 1s ease forwards; }
.lpdemo__token.is-flying { animation: lpfly-l 1s ease forwards; }
@keyframes lpfly-r { 0% { left: 30%; opacity: 0; transform: translateY(-50%) scale(.8);} 20%{opacity:1; transform:translateY(-50%) scale(1);} 80%{opacity:1;} 100% { left: 62%; opacity: 0; transform: translateY(-50%) scale(.9);} }
@keyframes lpfly-l { 0% { left: 62%; opacity: 0; transform: translateY(-50%) scale(.8);} 20%{opacity:1; transform:translateY(-50%) scale(1);} 80%{opacity:1;} 100% { left: 30%; opacity: 0; transform: translateY(-50%) scale(.9);} }

.lpdemo__caption { margin: 0; padding: 15px 22px; font-size: 15px; font-weight: 500; color: var(--eln-ink-body); background: #fff; border-top: 1px solid var(--eln-line); text-align: center; min-height: 1.2em; }

@media (max-width: 760px) {
  .lpdemo__stage { grid-template-columns: 1fr; gap: 0; }
  .lpdemo__pipe { height: 48px; }
  .lpdemo__pipe::before { top: auto; bottom: auto; left: 12%; right: 12%; height: 2px; width: auto; background: repeating-linear-gradient(to right, var(--eln-line) 0 6px, transparent 6px 12px); }
  .lpdemo__packet.is-flying, .lpdemo__token.is-flying { animation: none; }
}

/* =============================================================================
   v3: PREMIUM REFINEMENT + product-real demo + full responsive
   ============================================================================= */

/* fluid type */
.eln-hero__title { font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -0.02em; }
.eln-h2 { font-size: clamp(26px, 3.4vw, 40px); }
.eln-final-cta__headline { font-size: clamp(26px, 3.2vw, 40px); }

/* ---- premium hero: layered gradient + glow + dot grid ---------------------- */
.eln-hero { position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 560px at 12% -12%, rgba(244,130,32,.20), transparent 58%),
    radial-gradient(900px 520px at 102% -8%, rgba(45,164,99,.18), transparent 55%),
    linear-gradient(158deg, #08214e 0%, #061634 56%, #040f27 100%);
}
.eln-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px);
  background-size: 26px 26px; mask-image: linear-gradient(180deg, #000 0%, transparent 78%); }
.eln-hero .eln-container { position: relative; z-index: 1; }
.eln-hero__title .eln-accent { background: linear-gradient(92deg, #f9a24d, #f48220); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: normal; }
.eln-hero__media { perspective: 1400px; }
.eln-hero__media .eln-shot { transform: rotateY(-9deg) rotateX(3deg); transform-origin: left center; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.eln-hero__media .eln-shot:hover { transform: rotateY(-3deg) rotateX(1deg) translateY(-4px); }
.eln-shot--float { box-shadow: 0 40px 80px -24px rgba(3,10,30,.7), 0 0 0 1px rgba(255,255,255,.06); }

/* soft brand section backgrounds */
.eln-section--gray { background: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%); }

/* eyebrow refinement */
.eln-eyebrow { font-size: 12.5px; }

/* ---- premium capability cards --------------------------------------------- */
.eln-capcard { position: relative; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow: hidden; }
.eln-capcard::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--eln-brand-orange), #f9a24d); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.eln-capcard:hover { transform: translateY(-5px); box-shadow: var(--eln-shadow-lg); border-color: transparent; }
.eln-capcard:hover::after { transform: scaleX(1); }
.eln-capcard__icon { background: linear-gradient(145deg, #fff2e6, #fde0c6); box-shadow: inset 0 0 0 1px rgba(244,130,32,.16); transition: transform .25s ease; }
.eln-capcard:hover .eln-capcard__icon { transform: scale(1.06) rotate(-3deg); }

/* module rows hover */
.eln-mod { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.eln-mod:hover { transform: translateX(4px); box-shadow: var(--eln-shadow-md); border-color: #d9dee8; }

/* trigger list as chips-in-cards */
.eln-triggers li { background: #fff; border: 1px solid var(--eln-line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--eln-shadow-sm); font-weight: 500; }

/* ---- premium final CTA ----------------------------------------------------- */
.eln-final-cta__card { position: relative; overflow: hidden;
  background:
    radial-gradient(600px 300px at 88% -20%, rgba(244,130,32,.30), transparent 60%),
    radial-gradient(500px 320px at -5% 120%, rgba(45,164,99,.22), transparent 60%),
    linear-gradient(150deg, #0a2350 0%, #061634 60%);
  box-shadow: 0 30px 70px -30px rgba(3,10,30,.6); }
.eln-final-cta__feature { backdrop-filter: blur(4px); }

/* =============================================================================
   Scroll-reveal
   ============================================================================= */
.eln-anim .eln-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.eln-anim .eln-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .eln-anim .eln-reveal { opacity: 1 !important; transform: none !important; transition: none; } }

/* =============================================================================
   DEMO v2: browser-window chrome + product-real theming
   ============================================================================= */
.lpdemo { border-radius: 22px; }
.lpdemo__stage { gap: 8px; padding: 30px 26px; background: linear-gradient(180deg, #eef2f8, #e6ecf5); grid-template-columns: 1fr 58px 1fr; }
.lpdemo__panel { border: 0; border-radius: 14px; box-shadow: 0 18px 40px -20px rgba(15,23,42,.4), 0 0 0 1px rgba(15,23,42,.05); }

/* window url bar (both) */
.lpdemo__url { display: flex; align-items: center; gap: 7px; padding: 8px 12px; background: #eef1f6; border-bottom: 1px solid #e3e8ee; }
.lpdemo__url i { width: 9px; height: 9px; border-radius: 50%; background: #cfd6e0; display: inline-block; }
.lpdemo__url i:nth-child(1){ background:#f7776f;} .lpdemo__url i:nth-child(2){ background:#f7c04a;} .lpdemo__url i:nth-child(3){ background:#5fd08a;}
.lpdemo__url span { margin-left: 8px; font-size: 11px; color: #8a97a8; background: #fff; border: 1px solid #e3e8ee; border-radius: 7px; padding: 3px 12px; font-family: ui-monospace, Menlo, monospace; }

/* --- Portal panel: the real (Stripe-purple / Inter) product --------------- */
.lpdemo__portal { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.lpdemo__portal .lpdemo__phead { background: #fff; color: #0a2540; border-bottom: 1px solid #eef3f8; }
.lpdemo__portal .lpdemo__pname { color: #0a2540; display: flex; align-items: center; gap: 8px; }
.lpdemo__portal .lpdemo__pname::before { content: ""; width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, #1E3C77, #2f6fd0); }
.lpdemo__portal .lpdemo__ptag { background: rgba(30,60,119,.12); color: #1E3C77; }
.lpdemo__portal .lpdemo__flabel { color: #8898aa; }
.lpdemo__portal .lpdemo__fbox { border-color: #e3e8ee; color: #0a2540; }
.lpdemo__portal .lpdemo__caret { background: #1E3C77; }
.lpdemo__portal .lpdemo__chip { border-color: #e3e8ee; color: #647488; }
.lpdemo__portal .lpdemo__chip.is-on { border-color: #1E3C77; background: #e7edf8; color: #1E3C77; }
.lpdemo__portal .lpdemo__submit.is-active { background: #1E3C77; box-shadow: 0 8px 20px -4px rgba(30,60,119,.5); }
.lpdemo__portal .lpdemo__ref { color: #1E3C77; }
.lpdemo.is-portal .lpdemo__portal { box-shadow: 0 0 0 2px #1E3C77, 0 18px 40px -18px rgba(30,60,119,.5) !important; }
.lpdemo__packet { background: linear-gradient(135deg, #1E3C77, #1E3C77) !important; }

/* --- ELabELN panel: distinct pro ELN (navy/orange) ------------------------ */
.lpdemo__eln .lpdemo__phead { background: linear-gradient(120deg, #08214e, #061634); }
.lpdemo__eln .lpdemo__pname { display: flex; align-items: center; gap: 8px; }
.lpdemo__eln .lpdemo__pname::before { content: ""; width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, #f9a24d, #f48220); }
.lpdemo__eln .lpdemo__ptag { background: rgba(244,130,32,.22); color: #ffd9b3; }
.lpdemo__tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--eln-line); background: #fbfcfe; }
.lpdemo__tabs span { font-size: 11.5px; font-weight: 600; color: var(--eln-ink-4); padding: 7px 12px; border-bottom: 2px solid transparent; }
.lpdemo__tabs span.is-on { color: var(--eln-navy); border-bottom-color: var(--eln-brand-orange); }
.lpdemo__eln .lpdemo__ref { color: var(--eln-navy); }
.lpdemo__token { background: linear-gradient(135deg, #2DA463, #1f7a4a) !important; }

/* caption refinement */
.lpdemo__caption { font-weight: 500; color: var(--eln-navy); background: #fff; }
.lpdemo__caption::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--eln-brand-orange); margin-right: 9px; vertical-align: middle; animation: lppulse 1.4s ease-in-out infinite; }
@keyframes lppulse { 0%,100%{ opacity: 1; transform: scale(1);} 50%{ opacity:.4; transform: scale(.8);} }

/* =============================================================================
   RESPONSIVE: full pass
   ============================================================================= */
@media (max-width: 980px) {
  .eln-hero { padding: 56px 0 48px; }
  .eln-hero__media .eln-shot { transform: none; }
  .eln-hero__media { perspective: none; margin-top: 8px; }
}
@media (max-width: 760px) {
  .lpdemo__stage { grid-template-columns: 1fr; padding: 18px 14px; gap: 4px; }
  .lpdemo__pipe { height: 52px; margin: 2px 0; }
  .lpdemo__bar { padding: 12px 14px; gap: 12px; }
  .lpdemo__steps { font-size: 11px; }
  .lpdemo__steps li { padding: 3px 7px; }
  .lpdemo__caption { font-size: 13.5px; padding: 13px 16px; }
  .eln-triggers li { font-size: 15px; }
}
@media (max-width: 560px) {
  .eln-section { padding: 40px 0; }
  .eln-container { width: 90%; }
  .eln-hero__bullets { gap: 8px 16px; }
  .eln-hero__bullets li { font-size: 13px; }
  .lpdemo__url span { font-size: 10px; padding: 2px 8px; }
  .lpdemo__steps { width: 100%; }
}

/* =============================================================================
   v4: high-fidelity, branded product mockups inside the demo
   ============================================================================= */
.lpdemo__stage { align-items: stretch; }
.lpwin { display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 22px 48px -24px rgba(15,23,42,.5), 0 0 0 1px rgba(15,23,42,.06); }

/* browser chrome */
.lpwin__chrome { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: #eef1f6; border-bottom: 1px solid #e3e8ee; }
.lpwin__chrome i { width: 9px; height: 9px; border-radius: 50%; }
.lpwin__chrome i:nth-child(1){ background:#f7776f;} .lpwin__chrome i:nth-child(2){ background:#f7c04a;} .lpwin__chrome i:nth-child(3){ background:#5fd08a;}
.lpwin__chrome--dark { background: #1f2937; border-bottom-color: #111827; }
.lpwin__url { margin-left: 8px; font-size: 11px; color: #8a97a8; background: #fff; border: 1px solid #e3e8ee; border-radius: 7px; padding: 3px 12px; font-family: ui-monospace, Menlo, monospace; }
.lpwin__chrome--dark .lpwin__url { background: #374151; border-color: #4b5563; color: #cbd5e1; }

/* shared nav bits */
.lpwin__logo { height: 18px; width: auto; display: block; }
.lpwin__grow { flex: 1; }
.lpwin__ava { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#1E3C77,#2f6fd0); flex-shrink: 0; }
.lpwin__ava--eln { background: rgba(244,130,32,.14); color: #f48220; }

/* portal nav */
.lpwin__nav { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #eef3f8; }
.lpwin__prod { font-size: 13px; font-weight: 700; color: #0a2540; padding-left: 10px; border-left: 1px solid #e3e8ee; }
.lpwin__tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; background: rgba(30,60,119,.12); color: #1E3C77; }

/* portal body */
.lpp { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 15px 16px; background: #fff; flex: 1; }
.lpp__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 13px; }
.lpp__title { font-size: 14px; font-weight: 700; color: #0a2540; }
.lpp__team { font-size: 11px; color: #8898aa; }
.lpp__field { margin-bottom: 11px; }
.lpp__label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8898aa; margin-bottom: 5px; }
.lpp__input { min-height: 34px; border: 1px solid #e3e8ee; border-radius: 9px; padding: 7px 11px; font-size: 13.5px; color: #0a2540; background: #fff; display: flex; align-items: center; box-shadow: inset 0 1px 2px rgba(15,23,42,.03); }
.lpp__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lpp .lpdemo__chip { font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px; border: 1px solid #e3e8ee; color: #647488; background: #fff; transition: all .2s ease; }
.lpp .lpdemo__chip.is-on { border-color: #1E3C77; background: #e7edf8; color: #1E3C77; }
.lpp .lpdemo__submit { width: 100%; text-align: center; margin-top: 13px; padding: 10px; border-radius: 9px; background: #cbd2de; color: #fff; font-size: 13px; font-weight: 700; transition: all .25s ease; }
.lpp .lpdemo__submit.is-active { background: #1E3C77; box-shadow: 0 8px 20px -4px rgba(30,60,119,.5); transform: translateY(-1px); }
.lpp__listhead { margin: 15px 0 9px; padding-top: 13px; border-top: 1px solid #eef3f8; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8898aa; }
.lpp__row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e3e8ee; border-radius: 10px; }
.lpp__grow { flex: 1; display: flex; flex-direction: column; }
.lpp__sub { font-size: 11.5px; color: #647488; }
.lpp .lpdemo__ref { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 700; color: #1E3C77; }
.lpp__report { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 12px; border: 1px dashed #d6dbe6; border-radius: 10px; font-size: 12px; color: #0a2540; }
.lpp__report svg { width: 15px; height: 15px; flex-shrink: 0; }
.lpp__report svg .fa-primary { fill: #1E3C77; } .lpp__report svg .fa-secondary { fill: #f48220; opacity: 1; }
.lpp__file { flex: 1; } .lpp__dl { font-size: 11px; font-weight: 700; color: #1E3C77; }

/* ELN nav */
.lpeln__nav { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.lpeln__items { display: flex; gap: 2px; }
.lpeln__items span { font-size: 10.5px; font-weight: 600; color: #6b7280; padding: 4px 9px; border-radius: 6px; }
.lpeln__items span.is-on { background: rgba(244,130,32,.1); color: #f48220; }
.lpeln__bell { position: relative; color: #6b7280; display: flex; }
.lpeln__bell svg { width: 15px; height: 15px; }
.lpeln__belldot { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; background: #f48220; border-radius: 50%; }

/* ELN body */
.lpeln { padding: 0; background: #f8f9fb; flex: 1; }
.lpeln__head { padding: 13px 14px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lpeln__title { font-size: 13px; font-weight: 700; color: #0a2540; }
.lpeln__title b { font-size: 10px; font-weight: 700; color: #f48220; background: rgba(244,130,32,.1); padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.lpeln__stats { display: flex; gap: 12px; }
.lpeln__stats span { font-size: 10px; color: #6b7280; display: flex; align-items: center; gap: 5px; }
.lpeln__list { padding: 0 14px 12px; display: grid; gap: 8px; }
.lpeln__row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid #eef0f3; border-radius: 10px; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.lpeln__row--new { border-color: #f7d9bd; }
.lpeln__grow { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lpeln .lpdemo__ref { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 700; color: #0a2540; }
.lpeln__sub { font-size: 11px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpeln__badge { font-size: 9.5px; font-weight: 600; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.lpeln__badge--run { background: #eff6ff; color: #2563eb; }
.lpeln__badge--done { background: #f0fdf4; color: #16a34a; }
.lpeln__badge--rev { background: #fffbeb; color: #d97706; }
.lpeln__report { display: flex; align-items: center; gap: 8px; margin: 0 14px 13px; padding: 9px 12px; border: 1px dashed #e5e7eb; border-radius: 10px; font-size: 12px; color: #0a2540; background: #fff; }
.lpeln__report svg { width: 15px; height: 15px; flex-shrink: 0; }
.lpeln__report svg .fa-primary { fill: #1E3C77; } .lpeln__report svg .fa-secondary { fill: #f48220; opacity: 1; }

/* status dots */
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot--blue{ background:#3b82f6;} .dot--green{ background:#22c55e;} .dot--amber{ background:#f59e0b;}
.dot--orange{ background:#f48220;} .dot--purple{ background:#a855f7;} .dot--emerald{ background:#10b981;}

/* active-window rings on the new windows */
.lpdemo.is-eln .lpdemo__eln { box-shadow: 0 0 0 2px #f48220, 0 20px 44px -20px rgba(244,130,32,.45) !important; }

/* responsive for the rich mockups */
@media (max-width: 900px) { .lpeln__stats { display: none; } }
@media (max-width: 760px) {
  .lpwin { box-shadow: 0 12px 30px -18px rgba(15,23,42,.5), 0 0 0 1px rgba(15,23,42,.06); }
}
@media (max-width: 620px) {
  .lpeln__items span:nth-child(n+4) { display: none; }
  .lpwin__prod { padding-left: 8px; }
}
@media (max-width: 480px) {
  .lpeln__items { display: none; }
  .lpwin__url { font-size: 10px; padding: 2px 8px; }
}

/* =============================================================================
   v5: cinematic single-window product demo ("see it work" movie)
   ============================================================================= */
.lpmovie { max-width: 1060px; margin: 40px auto 0; }
.lpmovie__win { border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 40px 90px -30px rgba(6,22,52,.55), 0 0 0 1px rgba(6,22,52,.06); }

/* window chrome (premium navy) */
.lpmovie__chrome { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: linear-gradient(180deg,#0c2038,#08182c); }
.lpmovie__chrome > i { width: 11px; height: 11px; border-radius: 50%; }
.lpmovie__chrome > i:nth-child(1){ background:#ff5f57;} .lpmovie__chrome > i:nth-child(2){ background:#febc2e;} .lpmovie__chrome > i:nth-child(3){ background:#28c840;}
.lpmovie__url { margin-left: 10px; font-size: 12px; color: #9fb0c7; font-family: ui-monospace, Menlo, monospace; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 4px 16px; transition: color .3s ease; }
.lpmovie__app { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; transition: all .3s ease; }
.lpmovie.is-portal .lpmovie__app { background: rgba(30,60,119,.9); color: #cdd9f2; }
.lpmovie.is-eln .lpmovie__app { background: rgba(244,130,32,.16); color: #f9b877; }

/* stage + scenes */
.lpmovie__stage { position: relative; height: 542px; background: #f6f8fc; overflow: hidden; }
.lpscene { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(10px) scale(.995); pointer-events: none; transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.lpscene.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* scene nav */
.lpsc-nav { display: flex; align-items: center; gap: 12px; padding: 11px 18px; background: #fff; border-bottom: 1px solid #e9edf3; flex-shrink: 0; }
.lpsc-logo { height: 20px; width: auto; display: block; }
.lpsc-prod { font-size: 14px; font-weight: 700; color: #0a2540; padding-left: 12px; border-left: 1px solid #e3e8ee; }
.lpsc-grow { flex: 1; }
.lpsc-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: rgba(30,60,119,.1); color: #1E3C77; }
.lpsc-ava { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#1E3C77,#2f6fd0); }
.lpsc-ava--eln { background: rgba(244,130,32,.14); color: #f48220; }
.lpsc-items { display: flex; gap: 3px; }
.lpsc-items span { font-size: 11.5px; font-weight: 600; color: #6b7280; padding: 5px 11px; border-radius: 7px; }
.lpsc-items span.is-on { background: rgba(244,130,32,.1); color: #f48220; }
.lpsc-bell { position: relative; color: #6b7280; display: flex; } .lpsc-bell svg { width: 16px; height: 16px; }
.lpsc-belldot { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; background: #f48220; border-radius: 50%; }

/* scene body */
.lpsc-body { flex: 1; overflow: hidden; }
.lpsc-pad { padding: 22px 26px; }
.lpscene--portal .lpsc-body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #fff; }
.lpscene--eln .lpsc-body { background: #f8f9fb; }

/* portal form */
.lpsc-cardhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.lpsc-h { font-size: 16px; font-weight: 700; color: #0a2540; }
.lpsc-h .lpsc-count, .lpsc-h b { font-size: 11px; font-weight: 700; color: #f48220; background: rgba(244,130,32,.1); padding: 2px 9px; border-radius: 999px; margin-left: 8px; }
.lpsc-sub { font-size: 12px; color: #8898aa; }
.lpsc-field { margin-bottom: 13px; }
.lpsc-lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8898aa; margin-bottom: 6px; }
.lpsc-input { min-height: 40px; border: 1px solid #e3e8ee; border-radius: 10px; padding: 9px 13px; font-size: 14.5px; color: #0a2540; background: #fff; display: flex; align-items: center; box-shadow: inset 0 1px 2px rgba(15,23,42,.03); }
.lpsc-input--set { color: #0a2540; background: #f9fbfd; }
.lpsc-caret { display: inline-block; width: 2px; height: 17px; background: #1E3C77; margin-left: 2px; animation: lpcaret 1s step-end infinite; }
.lpscene:not(.is-active) .lpsc-caret { animation: none; }
.lpsc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lpsc-chip { font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: 9px; border: 1px solid #e3e8ee; color: #647488; background: #fff; transition: all .25s ease; }
.lpsc-chip.is-on { border-color: #1E3C77; background: #e7edf8; color: #1E3C77; }
.lpsc-submit { margin-top: 8px; text-align: center; padding: 12px; border-radius: 10px; background: #cbd2de; color: #fff; font-size: 14px; font-weight: 700; transition: all .3s ease; }
.lpsc-submit.is-active { background: #1E3C77; box-shadow: 0 10px 24px -6px rgba(30,60,119,.5); transform: translateY(-1px); }
.lpsc-success { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: #e7f5ee; color: #1f7a4a; font-size: 13.5px; opacity: 0; transform: translateY(8px); transition: all .4s ease; }
.lpsc-success.is-in { opacity: 1; transform: none; }
.lpsc-success svg { width: 17px; height: 17px; } .lpsc-success svg .fa-primary{ fill:#1f7a4a;} .lpsc-success svg .fa-secondary{ fill:#3ecf8e; opacity:1;}

/* eln list */
.lpsc-lhead { padding: 16px 22px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lpsc-stats { display: flex; gap: 14px; } .lpsc-stats span { font-size: 11px; color: #6b7280; display: flex; align-items: center; gap: 5px; }
.lpsc-list { padding: 0 22px; display: grid; gap: 9px; }
.lpsc-row { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: #fff; border: 1px solid #eef0f3; border-radius: 11px; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.lpsc-row--new { opacity: 0; transform: translateY(-8px); transition: opacity .5s ease, transform .5s ease; border-color: #f7d9bd; box-shadow: 0 8px 20px -10px rgba(244,130,32,.4); }
.lpsc-row--new.is-in { opacity: 1; transform: none; }
.lpsc-rowmain { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lpsc-ref { font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; color: #0a2540; }
.lpscene--portal .lpsc-ref { color: #1E3C77; }
.lpsc-ref--lg { font-size: 16px; }
.lpsc-rowsub, .lpsc-dsub { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpsc-badge { font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 6px; white-space: nowrap; }
.lpsc-badge--run { background:#eff6ff; color:#2563eb;} .lpsc-badge--done { background:#f0fdf4; color:#16a34a;} .lpsc-badge--rev { background:#fffbeb; color:#d97706;}
.lpsc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; transition: opacity .3s ease; }
.lpsc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot,#8898aa); }

/* eln detail */
.lpsc-dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid #eef0f3; }
.lpsc-dhead > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.lpsc-kvgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.lpsc-kv { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; border-bottom: 1px dashed #e9edf3; }
.lpsc-kv.is-in { opacity: 1; transform: none; }
.lpsc-kv span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9aa7b8; font-weight: 600; }
.lpsc-kv b { font-size: 14px; color: #0a2540; font-weight: 600; }
.lpsc-pass { color: #1f7a4a !important; }
.lpsc-report { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px dashed #f0c79a; border-radius: 11px; background: #fffaf3; font-size: 13px; color: #0a2540; opacity: 0; transform: translateY(8px); transition: all .45s ease; }
.lpsc-report.is-in { opacity: 1; transform: none; }
.lpsc-report svg, .lpsc-dochead svg { width: 16px; height: 16px; flex-shrink: 0; }
.lpsc-report svg .fa-primary { fill:#1E3C77;} .lpsc-report svg .fa-secondary { fill:#f48220; opacity:1;}
.lpsc-file { flex: 1; font-weight: 600; }
.lpsc-attached { font-size: 11px; font-weight: 700; color: #f48220; background: rgba(244,130,32,.12); padding: 3px 9px; border-radius: 999px; }

/* portal result */
.lpsc-row--result { margin-bottom: 14px; }
.lpsc-doc { border: 1px solid #e3e8ee; border-radius: 12px; overflow: hidden; opacity: 0; transform: translateY(10px); transition: all .5s ease; }
.lpsc-doc.is-in { opacity: 1; transform: none; }
.lpsc-dochead { display: flex; align-items: center; gap: 9px; padding: 12px 15px; background: #f9fbfd; border-bottom: 1px solid #eef3f8; font-size: 13px; font-weight: 700; color: #0a2540; }
.lpsc-dochead svg .fa-primary { fill:#1E3C77;} .lpsc-dochead svg .fa-secondary { fill:#f48220; opacity:1;}
.lpsc-docrow { display: flex; align-items: center; gap: 10px; padding: 13px 15px; }
.lpsc-docrow .lpsc-file { font-size: 13.5px; color: #0a2540; }
.lpsc-dl { font-size: 12px; font-weight: 700; color: #fff; background: #1E3C77; padding: 7px 14px; border-radius: 8px; }

/* callout */
.lpmovie__callout { position: absolute; z-index: 6; display: flex; align-items: center; gap: 11px; max-width: 320px; padding: 12px 15px 12px 12px; border-radius: 14px; background: rgba(8,24,44,.92); color: #fff; box-shadow: 0 18px 40px -14px rgba(6,22,52,.6); backdrop-filter: blur(6px); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .45s ease, transform .45s ease; }
.lpmovie__callout.is-in { opacity: 1; transform: none; }
.lpmovie__calnum { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #f48220; color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lpmovie__caltext { font-size: 13.5px; line-height: 1.4; color: #eaf0f8; }
.lpmovie__callout[data-pos="0"] { left: 26px; bottom: 22px; }
.lpmovie__callout[data-pos="1"] { right: 24px; bottom: 22px; }
.lpmovie__callout[data-pos="2"] { right: 24px; bottom: 22px; }
.lpmovie__callout[data-pos="3"] { left: 26px; bottom: 22px; }

/* controls */
.lpmovie__controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.lpmovie__toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; background: var(--eln-brand-orange); color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: 999px; transition: all .15s ease; }
.lpmovie__toggle:hover { background: var(--eln-navy); }
.lpmovie__toggle svg { width: 12px; height: 12px; fill: currentColor; }
.lpmovie__dots { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.lpmovie__dots li { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--eln-ink-4); padding: 7px 13px; border-radius: 999px; border: 1px solid var(--eln-line); background: #fff; transition: all .2s ease; }
.lpmovie__dots li b { width: 19px; height: 19px; border-radius: 50%; background: var(--eln-bg-gray); color: var(--eln-ink-3); font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: 800; transition: all .2s ease; }
.lpmovie__dots li.is-active { color: var(--eln-navy); border-color: var(--eln-brand-orange); box-shadow: 0 4px 12px -4px rgba(244,130,32,.4); }
.lpmovie__dots li.is-active b { background: var(--eln-brand-orange); color: #fff; }
.lpmovie__dots li.is-done b { background: #2DA463; color: #fff; }

@keyframes lpcaret { 50% { opacity: 0; } }

/* responsive */
@media (max-width: 900px) {
  .lpmovie__stage { height: 560px; }
  .lpsc-stats { display: none; }
  .lpmovie__caltext { font-size: 12.5px; }
}
@media (max-width: 620px) {
  .lpsc-items span:nth-child(n+3) { display: none; }
  .lpmovie__stage { height: 600px; }
  .lpsc-kvgrid { grid-template-columns: 1fr; }
  .lpmovie__callout { max-width: 74%; }
  .lpmovie__dots li span { display: none; }
  .lpmovie__dots li { padding: 8px; }
}
@media (max-width: 440px) {
  .lpsc-items { display: none; }
  .lpsc-pad { padding: 16px 16px; }
  .lpsc-prod { font-size: 13px; padding-left: 9px; }
}

/* =============================================================================
   v6: homepage-style hero (centered intro + full-width product movie)
   ============================================================================= */
.eln-hero--home { padding: 66px 0 72px; }
.eln-hero__center { max-width: 900px; margin: 0 auto; text-align: center; }
.eln-hero--home .eln-hero__title { max-width: none; margin-left: auto; margin-right: auto; }
.eln-hero--home .eln-hero__lead { max-width: 680px; margin-left: auto; margin-right: auto; }
.eln-hero--home .eln-hero__ctas { justify-content: center; }

/* trust badge */
.eln-trust { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px);
  color: #cdd9ec; font-size: 13.5px; font-weight: 600; margin-bottom: 22px; }
.eln-trust__dots { display: inline-flex; }
.eln-trust__dots i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #061634; margin-left: -7px; display: inline-block; }
.eln-trust__dots i:first-child { margin-left: 0; }
.eln-trust__dots i:nth-child(1){ background:#f48220;} .eln-trust__dots i:nth-child(2){ background:#1E3C77;} .eln-trust__dots i:nth-child(3){ background:#2DA463;}

/* demo inside the hero: glow behind, centered controls */
.eln-hero__demo { position: relative; margin-top: 46px; }
.eln-hero__demo::before { content: ""; position: absolute; inset: -26px 4% 30%; z-index: 0; pointer-events: none;
  background: radial-gradient(620px 240px at 28% 0%, rgba(244,130,32,.30), transparent 62%), radial-gradient(620px 240px at 74% 0%, rgba(45,164,99,.22), transparent 62%);
  filter: blur(30px); opacity: .75; }
.eln-hero__demo .lpmovie { position: relative; z-index: 1; margin-top: 0; }
.eln-hero__demo .lpmovie__controls { justify-content: center; }
.eln-hero__demo .lpmovie__win { box-shadow: 0 50px 100px -34px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }

@media (max-width: 560px) {
  .eln-hero--home { padding: 46px 0 52px; }
  .eln-hero__demo { margin-top: 32px; }
}

/* =============================================================================
   v7: reimagined body (dark band, before/after, bento, architecture, compare)
   ============================================================================= */
/* dark band */
.eln-band { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(900px 420px at 14% -12%, rgba(244,130,32,.16), transparent 60%),
              radial-gradient(820px 440px at 100% 0%, rgba(45,164,99,.14), transparent 55%),
              linear-gradient(160deg,#08214e 0%,#061634 60%,#040f27 100%); }
.eln-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size: 26px 26px;
  mask-image: linear-gradient(180deg,#000,transparent 88%); }
.eln-band > .eln-container { position: relative; z-index: 1; }
.eln-band .eln-h2 { color: #fff; }
.eln-band .eln-eyebrow { color: #2DA463; } .eln-band .eln-eyebrow::before { background: #2DA463; }
.eln-band .eln-lead { color: rgba(255,255,255,.82); }

/* shared check/x marks */
.eln-vs__x { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #eef0f3; color: #9aa7b8; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.eln-vs__c { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--eln-good-soft); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.eln-vs__c svg { width: 11px; height: 11px; fill: var(--eln-good); }

/* before / after contrast */
.eln-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin-top: 36px; }
.eln-vs__col { background: #fff; border: 1px solid var(--eln-line); border-radius: 16px; padding: 26px; box-shadow: var(--eln-shadow-sm); }
.eln-vs__col--old { background: #fbfcfe; }
.eln-vs__col--new { border-color: #f7d9bd; box-shadow: 0 18px 40px -18px rgba(244,130,32,.28); }
.eln-vs__tag { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--eln-ink-3); background: var(--eln-bg-gray); padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }
.eln-vs__tag--new { color: #f48220; background: var(--eln-brand-orange-soft); }
.eln-vs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.eln-vs__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--eln-ink-body); }
.eln-vs__col--old .eln-vs__list li { color: var(--eln-ink-3); }
.eln-vs__mid { color: var(--eln-brand-orange); display: flex; align-items: center; justify-content: center; }
.eln-vs__mid svg { width: 30px; height: 30px; } .eln-vs__mid svg .fa-primary { fill: var(--eln-navy); } .eln-vs__mid svg .fa-secondary { fill: var(--eln-brand-orange); opacity: 1; }

/* bento grid */
.eln-bento { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: minmax(158px,auto); gap: 16px; margin-top: 40px; }
.eln-bento__tile { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--eln-line); border-radius: 18px; padding: 24px; box-shadow: var(--eln-shadow-sm); transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; }
.eln-bento__tile:hover { transform: translateY(-4px); box-shadow: var(--eln-shadow-lg); }
.eln-bento__tile--lg { grid-column: span 2; grid-row: span 2; justify-content: space-between; }
.eln-bento__tile--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 20px; }
.eln-bento__tile--dark { background: linear-gradient(155deg,#0a2350,#061634); border-color: transparent; color: #fff; }
.eln-bento__tile--accent { background: linear-gradient(155deg,#fff6ee,#ffe9d4); border-color: #f7d9bd; }
.eln-bento__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--eln-brand-orange-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-shrink: 0; }
.eln-bento__icon svg { width: 24px; height: 24px; } .eln-bento__icon svg .fa-primary { fill: var(--eln-navy); } .eln-bento__icon svg .fa-secondary { fill: var(--eln-brand-orange); opacity: 1; }
.eln-bento__tile--dark .eln-bento__icon { background: rgba(244,130,32,.2); } .eln-bento__tile--dark .eln-bento__icon svg .fa-primary { fill: #fff; }
.eln-bento__t { font-size: 18px; font-weight: 700; color: var(--eln-navy); margin: 0 0 8px; }
.eln-bento__tile--dark .eln-bento__t { color: #fff; font-size: 23px; }
.eln-bento__x { font-size: 14.5px; line-height: 1.6; color: var(--eln-ink-3); margin: 0; }
.eln-bento__tile--dark .eln-bento__x { color: rgba(255,255,255,.82); }
.eln-bento__mini { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 22px; }
.eln-mini-field { flex: 1; min-width: 130px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #fff; }
.eln-mini-chip { font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 8px; background: rgba(30,60,119,.55); border: 1px solid rgba(255,255,255,.16); color: #d6e0f0; }
.eln-mini-go { font-size: 12.5px; font-weight: 700; padding: 9px 16px; border-radius: 8px; background: #f48220; color: #fff; }
.eln-bento__flow { display: flex; gap: 7px; margin-top: 18px; flex-wrap: wrap; }
.eln-mini-stat { font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.eln-mini-stat--blue { background: #eff4ff; color: #2f80ed; } .eln-mini-stat--amber { background: #fff7ea; color: #d97706; } .eln-mini-stat--green { background: #eaf7f0; color: #1f7a4a; }

/* architecture diagram */
.eln-arch { margin-top: 44px; }
.eln-arch__nodes { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.eln-arch__node { position: relative; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 22px; text-align: center; }
.eln-arch__ic { display: inline-flex; width: 46px; height: 46px; border-radius: 12px; background: rgba(244,130,32,.16); align-items: center; justify-content: center; }
.eln-arch__ic svg { width: 23px; height: 23px; } .eln-arch__ic svg .fa-primary { fill: #fff; } .eln-arch__ic svg .fa-secondary { fill: #f9a24d; opacity: 1; }
.eln-arch__node b { display: block; color: #fff; font-size: 15px; margin-top: 12px; }
.eln-arch__node > span:not(.eln-arch__ic) { display: block; font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 4px; }
.eln-arch__node::after { content: ""; position: absolute; left: 50%; bottom: -30px; width: 2px; height: 30px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, rgba(244,130,32,.75) 0 5px, transparent 5px 10px); }
.eln-arch__core { margin-top: 30px; display: flex; align-items: center; gap: 20px; padding: 24px 28px; border-radius: 16px; border: 1px solid rgba(244,130,32,.4); background: linear-gradient(120deg, rgba(244,130,32,.2), rgba(30,60,119,.4)); box-shadow: 0 24px 56px -22px rgba(244,130,32,.45); }
.eln-arch__coreic { width: 54px; height: 54px; border-radius: 14px; background: #f48220; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.eln-arch__coreic svg { width: 27px; height: 27px; } .eln-arch__coreic svg .fa-primary { fill: #fff; } .eln-arch__coreic svg .fa-secondary { fill: #fff; opacity: .55; }
.eln-arch__coretext b { color: #fff; font-size: 19px; } .eln-arch__coretext span { display: block; color: rgba(255,255,255,.82); font-size: 14px; margin-top: 4px; }

/* comparison */
.eln-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.eln-cmp__col { border-radius: 18px; padding: 28px; border: 1px solid var(--eln-line); }
.eln-cmp__col--muted { background: #fbfcfe; }
.eln-cmp__col--brand { background: linear-gradient(160deg,#ffffff,#f6faff); border-color: #cddaf0; box-shadow: 0 18px 42px -20px rgba(30,60,119,.25); }
.eln-cmp__badge { display: inline-block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 6px 13px; border-radius: 999px; margin-bottom: 20px; }
.eln-cmp__badge--muted { background: var(--eln-bg-gray); color: var(--eln-ink-3); }
.eln-cmp__badge--brand { background: rgba(30,60,119,.1); color: #1E3C77; }
.eln-cmp__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.eln-cmp__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--eln-ink-body); }
.eln-cmp__col--muted .eln-cmp__list li { color: var(--eln-ink-3); }

@media (max-width: 860px) {
  .eln-vs { grid-template-columns: 1fr; }
  .eln-vs__mid { transform: rotate(90deg); }
  .eln-bento { grid-template-columns: 1fr 1fr; }
  .eln-bento__tile--lg { grid-column: span 2; grid-row: span 1; }
  .eln-bento__tile--wide { grid-column: span 2; }
  .eln-arch__nodes { grid-template-columns: 1fr; gap: 34px; }
  .eln-arch__node::after { left: 50%; }
  .eln-cmp { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .eln-bento { grid-template-columns: 1fr; }
  .eln-bento__tile--lg, .eln-bento__tile--wide { grid-column: span 1; }
  .eln-bento__tile--wide { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   v8: mobile fixes for the hero movie (slide 2 samples + slide 3 report)
   ============================================================================= */
@media (max-width: 620px) {
  /* slide 3 detail: keep fields 2-up so the attached report stays on screen */
  .lpsc-kvgrid { grid-template-columns: 1fr 1fr; gap: 9px 14px; }
  .lpsc-kv { padding-bottom: 7px; }
  .lpsc-kv span { font-size: 9.5px; }
  .lpsc-kv b { font-size: 12.5px; }
  .lpsc-dhead { padding-bottom: 10px; margin-bottom: 12px; }
  .lpsc-ref--lg { font-size: 15px; }
  .lpsc-dsub { font-size: 11px; }
  .lpsc-report { margin-top: 12px; padding: 9px 11px; font-size: 11px; gap: 8px; }
  .lpsc-attached { font-size: 10px; padding: 2px 7px; }

  /* slide 2 samples: compact rows so they fit the mobile window */
  .lpsc-lhead { padding: 12px 15px 8px; }
  .lpsc-list { padding: 0 15px; gap: 7px; }
  .lpsc-row { padding: 9px 11px; gap: 9px; }
  .lpsc-ref { font-size: 12px; }
  .lpsc-rowsub { font-size: 10.5px; }
  .lpsc-badge { font-size: 9px; padding: 3px 7px; }
  .lpsc-status { font-size: 10.5px; padding: 4px 9px; }
  .lpsc-status::before { width: 6px; height: 6px; }
  .dot { width: 6px; height: 6px; }
  .lpsc-pad { padding: 18px 16px; }
}
@media (max-width: 440px) {
  /* trim the last ambient sample so the new highlighted row is clearly the focus */
  .lpscene[data-scene="1"] .lpsc-list .lpsc-row:nth-of-type(4) { display: none; }
}

/* =============================================================================
   v9: mobile hero movie: larger text, status-above-sample, fill the space
   (overrides the v8 compacting)
   ============================================================================= */
@media (max-width: 620px) {
  .lpmovie__stage { height: 620px; }
  .lpsc-pad { padding: 22px 18px; }
  .lpsc-h { font-size: 17px; }
  .lpsc-cardhead .lpsc-sub, .lpsc-sub { font-size: 12.5px; }

  /* --- slide 2 (Samples) + slide 4 (result): stack, status on top, bigger --- */
  .lpsc-lhead { padding: 18px 18px 12px; }
  .lpsc-list { padding: 0 18px; gap: 12px; }
  .lpsc-row { flex-direction: column; align-items: flex-start; gap: 9px; padding: 15px 16px; }
  .lpsc-row > .dot { display: none; }
  .lpsc-status, .lpsc-badge { order: -1; }
  .lpsc-ref { font-size: 15.5px; }
  .lpsc-rowsub { font-size: 12.5px; white-space: normal; }
  .lpsc-badge { font-size: 12px; padding: 5px 12px; }
  .lpsc-status { font-size: 12px; padding: 5px 12px; }
  .lpsc-status::before { width: 7px; height: 7px; }
  /* keep 3 large sample rows so the new one is the clear focus */
  .lpscene[data-scene="1"] .lpsc-list .lpsc-row:nth-of-type(4) { display: none; }

  /* --- slide 3 (detail): 2-col, larger, report visible --- */
  .lpsc-dhead { padding-bottom: 15px; margin-bottom: 18px; }
  .lpsc-ref--lg { font-size: 18px; }
  .lpsc-dsub { font-size: 13px; }
  .lpsc-kvgrid { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .lpsc-kv { padding-bottom: 13px; gap: 4px; }
  .lpsc-kv span { font-size: 11px; }
  .lpsc-kv b { font-size: 15px; }
  .lpsc-report { margin-top: 18px; padding: 14px 15px; font-size: 13px; gap: 10px; }
  .lpsc-report svg { width: 17px; height: 17px; }
  .lpsc-attached { font-size: 11px; padding: 3px 9px; }

  /* --- slide 4 (result doc): larger --- */
  .lpsc-dochead { font-size: 14px; padding: 13px 15px; }
  .lpsc-docrow { padding: 14px 15px; }
  .lpsc-docrow .lpsc-file { font-size: 14.5px; }
  .lpsc-dl { font-size: 13px; padding: 8px 15px; }
}

/* =============================================================================
   v10: "How it fits" as a nested ELabELN container (portal/template/status inside)
   ============================================================================= */
.eln-nest { margin-top: 42px; border: 1.5px solid rgba(244,130,32,.45); border-radius: 22px;
  background: rgba(255,255,255,.04); box-shadow: 0 34px 80px -34px rgba(244,130,32,.4), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; }
.eln-nest__head { display: flex; align-items: center; gap: 16px; padding: 20px 24px; }
.eln-nest__logo { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; background: #fff; padding: 7px; box-shadow: 0 8px 18px rgba(0,0,0,.32); object-fit: contain; }
.eln-nest__headtext b { display: block; color: #fff; font-size: 20px; }
.eln-nest__headtext span { display: block; color: rgba(255,255,255,.72); font-size: 13.5px; margin-top: 3px; }
.eln-nest__tag { margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #f9b877; background: rgba(244,130,32,.16); border: 1px solid rgba(244,130,32,.4); padding: 6px 13px; border-radius: 999px; white-space: nowrap; }
.eln-nest__items { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding: 20px; background: rgba(4,15,39,.45); border-top: 1px solid rgba(255,255,255,.08); }
.eln-nest__item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 20px; transition: transform .2s ease, background .2s ease; }
.eln-nest__item:hover { transform: translateY(-3px); background: rgba(255,255,255,.09); }
.eln-nest__ic { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); align-items: center; justify-content: center; margin-bottom: 14px; }
.eln-nest__ic svg { width: 22px; height: 22px; } .eln-nest__ic svg .fa-primary { fill: var(--eln-navy); } .eln-nest__ic svg .fa-secondary { fill: #f48220; opacity: 1; }
.eln-nest__item b { display: block; color: #fff; font-size: 15.5px; }
.eln-nest__item span { display: block; color: rgba(255,255,255,.62); font-size: 12.5px; margin-top: 4px; line-height: 1.45; }
@media (max-width: 760px) {
  .eln-nest__head { flex-wrap: wrap; }
  .eln-nest__tag { margin-left: 0; order: 3; }
  .eln-nest__items { grid-template-columns: 1fr; }
}

/* v10.2: the icon span is also matched by `.eln-nest__item span { display:block }`
   (meant for the description), which killed its flex centering. Higher-specificity
   rule restores centering. */
.eln-nest__item .eln-nest__ic { display: inline-flex; align-items: center; justify-content: center; }

/* v11: wider address bar so the window reads as a real browser */
.lpmovie__url { flex: 1 1 auto; max-width: 640px; text-align: center; }

/* =============================================================================
   v12: SEO/GEO/AEO content sections
   (definition prose, how-it-works steps, who-it's-for audience grid)
   ============================================================================= */
.eln-prose { max-width: 820px; margin: 26px auto 0; }
.eln-prose p { font-size: 17px; line-height: 1.72; color: var(--eln-ink-body); margin: 0 0 18px; }
.eln-prose p:last-child { margin-bottom: 0; }
.eln-prose strong { color: var(--eln-navy); font-weight: 700; }

/* how it works: numbered steps */
.eln-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 42px; }
.eln-step { position: relative; background: #fff; border: 1px solid var(--eln-line); border-radius: 18px; padding: 26px 22px 24px; box-shadow: var(--eln-shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.eln-step:hover { transform: translateY(-4px); box-shadow: var(--eln-shadow-lg); }
.eln-step__n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(155deg,#0a2350,#061634); color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 16px; }
.eln-step__t { font-size: 16.5px; font-weight: 700; color: var(--eln-navy); margin: 0 0 8px; line-height: 1.3; }
.eln-step__x { font-size: 14.5px; line-height: 1.6; color: var(--eln-ink-3); margin: 0; }
.eln-step::after { content: ""; position: absolute; top: 46px; right: -9px; width: 18px; height: 2px; background: repeating-linear-gradient(to right, var(--eln-brand-orange) 0 5px, transparent 5px 9px); }
.eln-step:last-child::after { display: none; }

/* who it's for: audience grid */
.eln-aud { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 42px; }
.eln-aud__card { background: var(--eln-bg-card-warm); border: 1px solid var(--eln-line-warm); border-radius: 16px; padding: 24px 22px; transition: transform .2s ease, box-shadow .2s ease; }
.eln-aud__card:hover { transform: translateY(-3px); box-shadow: var(--eln-shadow-md); }
.eln-aud__ic { display: inline-flex; width: 46px; height: 46px; border-radius: 12px; background: var(--eln-brand-orange-soft); align-items: center; justify-content: center; margin-bottom: 14px; }
.eln-aud__ic svg { width: 24px; height: 24px; } .eln-aud__ic svg .fa-primary { fill: var(--eln-navy); } .eln-aud__ic svg .fa-secondary { fill: var(--eln-brand-orange); opacity: 1; }
.eln-aud__card b { display: block; color: var(--eln-navy); font-size: 16px; margin-bottom: 6px; line-height: 1.3; }
.eln-aud__card span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--eln-ink-3); }

@media (max-width: 860px) {
  .eln-steps { grid-template-columns: 1fr 1fr; }
  .eln-step::after { display: none; }
  .eln-aud { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .eln-steps { grid-template-columns: 1fr; }
  .eln-aud { grid-template-columns: 1fr; }
  .eln-prose p { font-size: 16px; }
}

/* =============================================================================
   v15: LAB PORTAL redesign - light-premium with dark moments (scoped to page)
   Mostly light + high-contrast (WCAG AA), with 3 deliberate dark sections:
   hero, "How it fits", final CTA. Keeps the refinements from v14 (numbered
   kickers, clean single-hue icons, no italic-headline tic, depth) but readable.
   All scoped to .eln-labportal so the Pricing page is untouched.
   Contrast (on #fff): navy #061634 ~16:1, body #3a4256 ~9:1, dim #55607a ~5.6:1.
   ============================================================================= */
.eln-labportal {
  --lp-ink: #1c2333;      /* headings on light */
  --lp-body: #3a4256;     /* body on light (AA) */
  --lp-dim: #55607a;      /* secondary on light (AA) */
  --lp-line: #E4E8F0;
  --lp-tint: #F4F7FC;     /* light section tint */
  --lp-amber: #f48220;
  position: relative; background: #fff; color: var(--lp-body);
  isolation: isolate; overflow: hidden;
}
/* subtle light atmosphere */
.eln-labportal::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 520px at 100% -6%, rgba(30,60,119,.06), transparent 60%),
    radial-gradient(760px 520px at -4% 6%, rgba(244,130,32,.05), transparent 60%),
    #ffffff;
}

/* section rhythm: alternate white / light tint */
.eln-labportal .eln-section { padding: 80px 0; background: transparent; }
.eln-labportal .eln-section--gray { background: var(--lp-tint); }

/* ---- numbered kicker ---- */
.eln-labportal .eln-eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--lp-ink); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.eln-labportal .eln-eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--lp-amber), transparent); }
.eln-labportal .eln-eyebrow i { font-style: normal; font-weight: 800; letter-spacing: .04em; color: var(--lp-amber); font-variant-numeric: tabular-nums; }

/* ---- headlines / body ---- */
.eln-labportal .eln-h2 { color: var(--eln-navy); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: 14px; }
.eln-labportal .eln-lead { color: var(--lp-dim); }
.eln-labportal .eln-prose p { color: var(--lp-body); }
.eln-labportal .eln-prose strong { color: var(--eln-navy); }

/* ---- "What it is": two-column header/body (fixes left-head + centered-body) ---- */
.eln-labportal .eln-intro__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 20px 56px; align-items: start; }
.eln-labportal .eln-intro__head .eln-h2 { margin-top: 14px; }
.eln-labportal .eln-intro__body { max-width: none; margin: 0; }
.eln-labportal .eln-intro__body p { font-size: 16.5px; line-height: 1.72; color: var(--lp-body); margin: 0 0 16px; }
.eln-labportal .eln-intro__body p:last-child { margin-bottom: 0; }
.eln-labportal .eln-intro__body strong { color: var(--eln-navy); font-weight: 700; }
@media (max-width: 820px) { .eln-labportal .eln-intro__grid { grid-template-columns: 1fr; gap: 22px; } }

/* ---- elevated light card base ---- */
.eln-labportal .eln-bento__tile,
.eln-labportal .eln-step,
.eln-labportal .eln-aud__card,
.eln-labportal .eln-cmp__col,
.eln-labportal .eln-vs__col,
.eln-labportal .eln-faq__item {
  background: #fff; border: 1px solid var(--lp-line);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 34px -20px rgba(16,24,40,.22);
}
.eln-labportal .eln-bento__tile:hover,
.eln-labportal .eln-step:hover,
.eln-labportal .eln-aud__card:hover {
  transform: translateY(-4px); border-color: rgba(244,130,32,.42);
  box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 26px 52px -24px rgba(244,130,32,.4);
}

/* ---- clean single-hue icons (navy glyph on orange-soft tile) ---- */
.eln-labportal .eln-bento__icon,
.eln-labportal .eln-aud__ic {
  background: var(--eln-brand-orange-soft); border: 1px solid #F6D6B8;
}
.eln-labportal .eln-bento__icon svg .fa-primary,
.eln-labportal .eln-aud__ic svg .fa-primary { fill: var(--eln-navy); }
.eln-labportal .eln-bento__icon svg .fa-secondary,
.eln-labportal .eln-aud__ic svg .fa-secondary { fill: var(--eln-navy); opacity: .32; }

/* ---- bento ---- */
.eln-labportal .eln-bento__t { color: var(--eln-navy); }
.eln-labportal .eln-bento__x { color: var(--lp-dim); }
/* keep one dark feature tile as a deliberate accent (white text = AA) */
.eln-labportal .eln-bento__tile--dark { background: linear-gradient(158deg,#0a2350,#061634); border-color: transparent; }
.eln-labportal .eln-bento__tile--dark .eln-bento__t { color: #fff; font-size: 23px; }
.eln-labportal .eln-bento__tile--dark .eln-bento__x { color: rgba(255,255,255,.86); }
.eln-labportal .eln-bento__tile--dark .eln-bento__icon { background: rgba(244,130,32,.24); border-color: rgba(244,130,32,.5); }
.eln-labportal .eln-bento__tile--dark .eln-bento__icon svg .fa-primary { fill: #fff; }
.eln-labportal .eln-bento__tile--dark .eln-bento__icon svg .fa-secondary { fill: var(--lp-amber); opacity: 1; }
.eln-labportal .eln-bento__tile--accent { background: linear-gradient(158deg,#fff6ee,#ffe9d4); border-color: #f7d9bd; }
.eln-labportal .eln-bento__tile--accent .eln-bento__x { color: #6a5138; }

/* ---- how it works: timeline ---- */
.eln-labportal .eln-step__n { background: linear-gradient(155deg,#f9a24d,#f48220); color: #061634; box-shadow: 0 10px 22px -8px rgba(244,130,32,.55); }
.eln-labportal .eln-step__t { color: var(--eln-navy); }
.eln-labportal .eln-step__x { color: var(--lp-dim); }
.eln-labportal .eln-step::after { top: 46px; right: -10px; width: 20px; height: 2px; background: linear-gradient(90deg, rgba(244,130,32,.8), rgba(244,130,32,0)); }

/* ---- who it's for ---- */
.eln-labportal .eln-aud__card b { color: var(--eln-navy); }
.eln-labportal .eln-aud__card span { color: var(--lp-dim); }

/* ---- problem: before / after ---- */
.eln-labportal .eln-vs__col--old { background: #fbfcfe; }
.eln-labportal .eln-vs__col--new { border-color: #f7d9bd; box-shadow: 0 24px 52px -24px rgba(244,130,32,.32); }
.eln-labportal .eln-vs__tag { background: var(--eln-bg-gray); color: var(--lp-dim); }
.eln-labportal .eln-vs__tag--new { background: var(--eln-brand-orange-soft); color: #964909; }
.eln-labportal .eln-vs__list li { color: var(--lp-body); }
.eln-labportal .eln-vs__col--old .eln-vs__list li { color: var(--lp-dim); }
.eln-labportal .eln-vs__x { background: #eef0f3; color: #6b7385; }
.eln-labportal .eln-vs__c { background: var(--eln-good-soft); }
.eln-labportal .eln-vs__c svg { fill: var(--eln-good); }
.eln-labportal .eln-vs__mid svg .fa-primary { fill: var(--eln-navy); }
.eln-labportal .eln-vs__mid svg .fa-secondary { fill: var(--lp-amber); opacity: 1; }

/* ---- why it matters: comparison ---- */
.eln-labportal .eln-cmp__col--muted { background: #fbfcfe; }
.eln-labportal .eln-cmp__col--brand { background: linear-gradient(160deg,#ffffff,#fff6ee); border-color: #f7d9bd; box-shadow: 0 26px 56px -24px rgba(244,130,32,.34); }
.eln-labportal .eln-cmp__badge--muted { background: var(--eln-bg-gray); color: var(--lp-dim); }
.eln-labportal .eln-cmp__badge--brand { background: var(--eln-brand-orange-soft); color: #964909; }
.eln-labportal .eln-cmp__list li { color: var(--lp-body); }
.eln-labportal .eln-cmp__col--muted .eln-cmp__list li { color: var(--lp-dim); }

/* ---- FAQ (light) ---- */
.eln-labportal .eln-faq__item { border-radius: 12px; overflow: hidden; }
.eln-labportal .eln-faq__item[open] { border-color: rgba(244,130,32,.4); box-shadow: 0 18px 40px -24px rgba(244,130,32,.3); }
.eln-labportal .eln-faq__question-text { color: var(--eln-navy); }
.eln-labportal .eln-faq__answer, .eln-labportal .eln-faq__answer p { color: var(--lp-body); }

/* =========================== DARK MOMENTS =============================== */
/* Hero */
.eln-labportal .eln-hero { background: linear-gradient(170deg,#0b1d42,#061634 62%); color: #fff; position: relative; overflow: hidden; padding-top: 60px; }
.eln-labportal .eln-hero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:1; background:
  radial-gradient(760px 440px at 50% 92%, rgba(244,130,32,.22), transparent 60%),
  radial-gradient(900px 500px at 100% 0%, rgba(30,60,119,.5), transparent 55%),
  linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/64px 64px,
  linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/64px 64px; }
.eln-labportal .eln-hero .eln-container { position: relative; z-index: 1; }
.eln-labportal .eln-hero__kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fbcb96; background: rgba(244,130,32,.16); border: 1px solid rgba(244,130,32,.42); padding: 7px 15px; border-radius: 999px; margin-bottom: 20px; }
.eln-labportal .eln-hero__title { color: #fff; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
.eln-labportal .eln-hero__title .eln-accent { background: linear-gradient(92deg,#fbb765,#f48220); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-style: normal; }
.eln-labportal .eln-hero__lead { color: rgba(255,255,255,.86); }
.eln-labportal .lpmovie__win { box-shadow: 0 60px 140px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }
.eln-labportal .eln-hero .eln-cta--secondary { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.eln-labportal .eln-hero .eln-cta--secondary:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
/* hero demo step controls on dark */
.eln-labportal .lpmovie__dots li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.82); }
.eln-labportal .lpmovie__dots li b { background: rgba(255,255,255,.14); color: #fff; }
.eln-labportal .lpmovie__dots li.is-active { color: #fff; border-color: rgba(244,130,32,.7); background: rgba(244,130,32,.16); }
.eln-labportal .lpmovie__dots li.is-active b { background: var(--eln-brand-orange); color: #fff; }
.eln-labportal .lpmovie__dots li.is-done { color: rgba(255,255,255,.72); }
.eln-labportal .lpmovie__dots li.is-done b { background: var(--eln-brand-green); color: #fff; }
.eln-labportal .lpmovie__toggle:hover { background: #d1701a; }

/* How it fits (dark band) */
.eln-labportal .eln-band { background: linear-gradient(165deg,#0b1d42,#061634); color: #fff; position: relative; overflow: hidden; }
.eln-labportal .eln-band::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(800px 420px at 80% 0%, rgba(244,130,32,.16), transparent 60%); }
.eln-labportal .eln-band .eln-container { position: relative; z-index: 1; }
.eln-labportal .eln-band .eln-eyebrow { color: #d7deea; }
.eln-labportal .eln-band .eln-h2 { color: #fff; }
.eln-labportal .eln-band .eln-lead { color: rgba(255,255,255,.84); }

/* Final CTA (dark card) */
.eln-labportal .eln-final-cta__card { background: linear-gradient(150deg,#0e2350,#061634); border: 1px solid rgba(244,130,32,.32); box-shadow: 0 50px 120px -50px rgba(244,130,32,.45); }
.eln-labportal .eln-final-cta__headline { color: #fff; }
.eln-labportal .eln-final-cta__headline .eln-accent { color: var(--lp-amber); font-style: normal; }
.eln-labportal .eln-final-cta__paragraph { color: rgba(255,255,255,.86); }
.eln-labportal .eln-final-cta__feature { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }

/* responsive */
@media (max-width: 760px) { .eln-labportal .eln-section { padding: 56px 0; } }

/* =============================================================================
   v15.1: H1 kicker, standardized icons, remove step connectors, level-up nest
   ============================================================================= */
/* Lab Portal kicker now lives inside the H1 (same look) */
.eln-labportal .eln-hero__title .eln-hero__kicker {
  display: block; width: -moz-fit-content; width: fit-content; margin: 0 auto 20px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fbcb96; background: rgba(244,130,32,.16); border: 1px solid rgba(244,130,32,.42);
  padding: 7px 15px; border-radius: 999px;
}

/* Standardized icons: solid orange chip + solid navy glyph, everywhere */
.eln-labportal .eln-bento__icon,
.eln-labportal .eln-aud__ic,
.eln-labportal .eln-nest__ic {
  background: linear-gradient(155deg,#f9a24d,#f48220);
  border: 1px solid rgba(244,130,32,.55);
  box-shadow: 0 6px 14px -6px rgba(244,130,32,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.eln-labportal .eln-bento__icon svg .fa-primary,
.eln-labportal .eln-aud__ic svg .fa-primary,
.eln-labportal .eln-nest__ic svg .fa-primary,
.eln-labportal .eln-bento__icon svg .fa-secondary,
.eln-labportal .eln-aud__ic svg .fa-secondary,
.eln-labportal .eln-nest__ic svg .fa-secondary { fill: #061634; opacity: 1; }
/* dark feature tile: keep the same orange chip + navy glyph (pops on navy) */
.eln-labportal .eln-bento__tile--dark .eln-bento__icon { background: linear-gradient(155deg,#f9a24d,#f48220); border-color: rgba(244,130,32,.6); }
.eln-labportal .eln-bento__tile--dark .eln-bento__icon svg .fa-primary,
.eln-labportal .eln-bento__tile--dark .eln-bento__icon svg .fa-secondary { fill: #061634; opacity: 1; }

/* Remove the misaligned step connectors */
.eln-labportal .eln-step::after { display: none; }

/* Level up: "How it fits" nest */
.eln-labportal .eln-nest {
  margin-top: 40px; border: 1px solid rgba(255,255,255,.14); border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 40px 100px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); overflow: hidden;
}
.eln-labportal .eln-nest__head {
  display: flex; align-items: center; gap: 16px; padding: 22px 26px;
  text-decoration: none; color: inherit; position: relative;
  background: linear-gradient(120deg, rgba(244,130,32,.14), transparent 62%); transition: background .2s ease;
}
.eln-labportal .eln-nest__head:hover { background: linear-gradient(120deg, rgba(244,130,32,.26), transparent 66%); }
.eln-labportal .eln-nest__logo { width: 52px; height: 52px; border-radius: 14px; background: #fff; padding: 8px; box-shadow: 0 10px 22px rgba(0,0,0,.4); flex-shrink: 0; object-fit: contain; }
.eln-labportal .eln-nest__headtext b { display: block; color: #fff; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.eln-labportal .eln-nest__headtext span { display: block; color: rgba(255,255,255,.74); font-size: 13.5px; margin-top: 3px; }
.eln-labportal .eln-nest__go {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  color: #fbcb96; background: rgba(244,130,32,.16); border: 1px solid rgba(244,130,32,.42);
  padding: 9px 16px; border-radius: 999px; white-space: nowrap; transition: all .2s ease;
}
.eln-labportal .eln-nest__go svg { width: 15px; height: 15px; transition: transform .2s ease; }
.eln-labportal .eln-nest__head:hover .eln-nest__go { background: var(--eln-brand-orange); color: #fff; border-color: var(--eln-brand-orange); }
.eln-labportal .eln-nest__head:hover .eln-nest__go svg { transform: translateX(3px); }
.eln-labportal .eln-nest__panel { padding: 20px 22px 22px; background: rgba(4,12,32,.5); border-top: 1px solid rgba(255,255,255,.08); }
.eln-labportal .eln-nest__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 14px; }
.eln-labportal .eln-nest__items { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding: 0; background: transparent; border: 0; }
.eln-labportal .eln-nest__item { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 20px; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.eln-labportal .eln-nest__item:hover { transform: translateY(-3px); background: rgba(255,255,255,.09); border-color: rgba(244,130,32,.4); }
.eln-labportal .eln-nest__ic { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 14px; display: inline-flex; align-items: center; justify-content: center; }
.eln-labportal .eln-nest__ic svg { width: 22px; height: 22px; }
.eln-labportal .eln-nest__item b { display: block; color: #fff; font-size: 15.5px; }
.eln-labportal .eln-nest__item span { display: block; color: rgba(255,255,255,.66); font-size: 12.5px; margin-top: 4px; line-height: 1.45; }
@media (max-width: 760px) {
  .eln-labportal .eln-nest__head { flex-wrap: wrap; }
  .eln-labportal .eln-nest__go { margin-left: 0; }
  .eln-labportal .eln-nest__items { grid-template-columns: 1fr; }
}

/* =============================================================================
   v15.2: brand DUOTONE icons (blue #1E3C77 + orange #f48220) on white tiles,
   with correct, uniform fitting (normalize by height, preserve aspect ratio).
   Replaces the flat monochrome from v15.1.
   ============================================================================= */
.eln-labportal .eln-bento__icon,
.eln-labportal .eln-aud__ic,
.eln-labportal .eln-nest__ic {
  background: #fff; border: 1px solid var(--lp-line);
  box-shadow: 0 6px 16px -8px rgba(16,24,40,.28), inset 0 1px 0 rgba(255,255,255,.6);
}
/* duotone: blue primary + orange secondary, both vivid */
.eln-labportal .eln-bento__icon svg .fa-primary,
.eln-labportal .eln-aud__ic svg .fa-primary,
.eln-labportal .eln-nest__ic svg .fa-primary { fill: #1E3C77; opacity: 1; }
.eln-labportal .eln-bento__icon svg .fa-secondary,
.eln-labportal .eln-aud__ic svg .fa-secondary,
.eln-labportal .eln-nest__ic svg .fa-secondary { fill: #f48220; opacity: 1; }
/* fitting: uniform glyph height, auto width so non-square icons keep their shape */
.eln-labportal .eln-bento__icon svg,
.eln-labportal .eln-aud__ic svg,
.eln-labportal .eln-nest__ic svg { width: auto; height: 24px; max-width: 30px; }
/* dark feature tile: same white tile + duotone (pops on navy) */
.eln-labportal .eln-bento__tile--dark .eln-bento__icon { background: #fff; border-color: rgba(255,255,255,.3); }
.eln-labportal .eln-bento__tile--dark .eln-bento__icon svg .fa-primary { fill: #1E3C77; opacity: 1; }
.eln-labportal .eln-bento__tile--dark .eln-bento__icon svg .fa-secondary { fill: #f48220; opacity: 1; }

/* =============================================================================
   v15.3: FIX icon centering. The card description rules
   `.eln-nest__item span{display:block}` and `.eln-aud__card span{display:block}`
   (spec 0,3,0 / 0,2,0) were overriding the icon spans' flex centering, pinning
   the glyph to the top-left. These higher-specificity rules restore centering.
   ============================================================================= */
.eln-labportal .eln-nest__item span.eln-nest__ic,
.eln-labportal .eln-aud__card span.eln-aud__ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}