/* ==========================================================================
   Section-landing block library (.al-lp)
   Reference: frontend/private-mockup-v3.html (<style id="al-private-v3">).
   Palette + type per docs/spec/01-design-system.md
   ALL rules scoped under .al-lp so the live header/footer stay untouched.

   Three things are deliberate and should survive the next copy:
     1. the hero carries no photograph - it is type + CSS geometry only, so a
        new page needs new words, never new art direction;
     2. specialist cards (.sc) are NOT styled here - they come from the plugin
        (albaniall-woocommerce/assets/css/specialist-cards.css, scope
        .ova-product-list). This file only lays out the lanes around them;
     3. the closing band lands on #EAEAEA, the footer's own colour, so the
        footer mountain graphic grows out of the page instead of butting
        against a dark slab.
   ========================================================================== */

.al-lp {
	--al-orange: #F28C00;
	--al-orange-deep: #d97d00;
	--al-orange-soft: rgba(242, 140, 0, .13);
	--al-orange-line: rgba(242, 140, 0, .55);
	--al-purple: #5A3D8E;
	--al-purple-deep: #47306f;
	--al-purple-ink: #2e1f49;
	--al-purple-soft: rgba(90, 61, 142, .08);
	--al-bg-page: #fcfcfd;
	--al-bg-card: #FFFFFF;
	--al-bg-foot: #EAEAEA;
	--al-neutral-soft: #f3f2f6;
	--al-text-main: #5e5e5e;
	--al-text-dark: #454545;
	--al-text-search: #2B2B2B;
	--al-line: #ececf1;

	--al-font-heading: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
	--al-font-body: 'Manrope', 'Inter', system-ui, sans-serif;

	--al-shell: 1240px;
	--al-gut: 24px;
	--al-r: 16px;
	--al-r-sm: 11px;
	--al-r-pill: 999px;

	/* motion tokens - mirrored from assets/css/motion.css, same values */
	--al-ease: cubic-bezier(.4, 0, .2, 1);
	--al-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
	--al-t-inst: .08s;
	--al-t-fast: .15s;
	--al-t-med: .28s;
	--al-t-slow: .5s;
	--al-t-rv: .55s;
	--al-rise: 16px;
	--al-lift: 6px;
	--al-lift-btn: 2px;
	--al-sh-rest: 0 2px 10px rgba(30, 20, 60, .05);
	--al-sh-hover: 0 14px 40px rgba(60, 40, 110, .10);
	--al-sh-btn: 0 8px 22px rgba(90, 61, 142, .30);
	--al-sh-btn-o: 0 8px 22px rgba(242, 140, 0, .28);

	background: var(--al-bg-page);
	font-family: var(--al-font-body);
	color: var(--al-text-main);
}

.al-lp *,
.al-lp *::before,
.al-lp *::after { box-sizing: border-box; }

.al-lp h1, .al-lp h2, .al-lp h3, .al-lp h4 {
	font-family: var(--al-font-heading);
	color: var(--al-purple);
	margin: 0;
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 700;
}
.al-lp p { margin: 0; }
.al-lp img { max-width: 100%; display: block; }

.al-lp .al-shell {
	width: 100%;
	max-width: var(--al-shell);
	margin-inline: auto;
	padding-inline: var(--al-gut);
}

/* Vertical rhythm. On Elementor containers the shorthand alone loses: core
   applies `padding-block-start: var(--padding-block-start)` via `.e-con-full`,
   and a longhand always beats a shorthand regardless of source order — the
   bands rendered at Elementor's default 10px. Feed core's own chain instead of
   fighting it: `.e-con` defines `--padding-block-start: var(--padding-top)`,
   so `--padding-top`/`--padding-bottom` are the properties to set (setting
   `--padding-block-*` here is overridden by `.e-con` and does nothing).
   The plain `padding` stays for the static mockup, which has no Elementor. */
.al-lp .al-sec {
	padding: clamp(60px, 7vw, 118px) 0;
	--padding-top: clamp(60px, 7vw, 118px);
	--padding-bottom: clamp(60px, 7vw, 118px);
	--padding-left: 0px;
	--padding-right: 0px;
}
.al-lp .al-sec--tight {
	padding: clamp(44px, 5vw, 76px) 0;
	--padding-top: clamp(44px, 5vw, 76px);
	--padding-bottom: clamp(44px, 5vw, 76px);
}

/* Section head ------------------------------------------------------- */
.al-lp .al-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--al-orange);
	margin-bottom: 16px;
}
.al-lp .al-kicker::before {
	content: "";
	width: 26px;
	height: 2px;
	background: currentColor;
}
.al-lp .al-kicker--onpurple { color: #f6b64d; }

.al-lp .al-sec-head { max-width: 780px; margin-bottom: clamp(32px, 3.6vw, 56px); }
.al-lp .al-sec-head h2 { font-size: clamp(29px, 4vw, 50px); }
.al-lp .al-sec-head p {
	margin-top: 16px;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.65;
}

/* Buttons ------------------------------------------------------------- */
.al-lp .al-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 17px 36px;
	border: 0;
	border-radius: var(--al-r-pill);
	font-family: var(--al-font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--al-t-fast) var(--al-ease),
	            box-shadow var(--al-t-med) var(--al-ease),
	            background-color var(--al-t-fast) var(--al-ease);
}
.al-lp .al-btn--primary {
	background: var(--al-orange);
	color: #fff;
	box-shadow: var(--al-sh-btn-o);
}
.al-lp .al-btn--primary:hover {
	background: var(--al-orange-deep);
	color: #fff;
	transform: translateY(calc(var(--al-lift-btn) * -1));
	box-shadow: 0 16px 34px rgba(242, 140, 0, .4);
}
.al-lp .al-btn--ghost {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .55);
}
.al-lp .al-btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
	transform: translateY(calc(var(--al-lift-btn) * -1));
}
.al-lp .al-btn--solid {
	background: var(--al-purple);
	color: #fff;
	box-shadow: var(--al-sh-btn);
}
.al-lp .al-btn--solid:hover {
	background: var(--al-purple-deep);
	color: #fff;
	transform: translateY(calc(var(--al-lift-btn) * -1));
}
.al-lp .al-btn--block { width: 100%; }
.al-lp .al-btn:active { transform: translateY(0) scale(.985); transition-duration: var(--al-t-inst); }

/* =====================================================================
   2. CARD LANES - grid + lane headings only.
   The .sc card itself is styled by the plugin
   (albaniall-woocommerce/assets/css/specialist-cards.css, scope
   .ova-product-list). Do not duplicate it here.
   ===================================================================== */
.al-lp .al-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	align-items: stretch;
}
.al-lp .al-cards--two { grid-template-columns: repeat(2, 1fr); }


/* legend that labels each card type for the next agent */
.al-lp .al-lane { margin-bottom: clamp(34px, 4vw, 58px); }
.al-lp .al-lane:last-child { margin-bottom: 0; }
.al-lp .al-lane__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(90, 61, 142, .16);
}
.al-lp .al-lane__head h3 { font-size: clamp(20px, 1.9vw, 26px); color: var(--al-text-dark); }
.al-lp .al-lane__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	font-weight: 700;
	color: var(--al-purple);
	background: var(--al-purple-soft);
	padding: 6px 13px;
	border-radius: var(--al-r-pill);
	white-space: nowrap;
}

/* =====================================================================
   3. BENEFITS - hairline grid, numerals as graphics
   ===================================================================== */
.al-lp .al-ben-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: rgba(90, 61, 142, .14);
	border: 1px solid rgba(90, 61, 142, .14);
	border-radius: 18px;
	overflow: hidden;
}
.al-lp .al-ben {
	background: var(--al-bg-card);
	padding: clamp(26px, 2.8vw, 42px);
	transition: background-color var(--al-t-med) var(--al-ease);
}
.al-lp .al-ben:hover { background: #fbf8ff; }
.al-lp .al-ben__n {
	font-family: var(--al-font-heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--al-orange);
	letter-spacing: .1em;
	display: block;
	margin-bottom: 18px;
}
.al-lp .al-ben h3 { font-size: clamp(19px, 1.6vw, 23px); margin-bottom: 12px; line-height: 1.25; }
.al-lp .al-ben p { font-size: 16px; line-height: 1.62; }

/* =====================================================================
   4. TOUR CARDS - the photo-led card type (feature / wide variants)
   ===================================================================== */
.al-lp .al-tours-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(18px, 2vw, 26px);
}
.al-lp .al-tour {
	position: relative;
	grid-column: span 2;
	min-height: 330px;
	border-radius: var(--al-r);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	text-decoration: none;
	isolation: isolate;
	background: var(--al-purple-ink);
	box-shadow: var(--al-sh-rest);
	transition: transform var(--al-t-med) var(--al-ease), box-shadow var(--al-t-med) var(--al-ease);
}
.al-lp .al-tour--feature { grid-column: span 4; min-height: 430px; }
.al-lp .al-tour--wide { grid-column: span 6; min-height: 310px; }
.al-lp .al-tour__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform var(--al-t-slow) var(--al-ease);
	z-index: -2;
}
.al-lp .al-tour__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(46, 31, 73, 0) 28%, rgba(46, 31, 73, .82) 100%);
}
.al-lp .al-tour__body { position: relative; padding: clamp(22px, 2.4vw, 32px); width: 100%; }
.al-lp .al-tour__tag {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var(--al-r-pill);
	background: rgba(255, 255, 255, .16);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.al-lp .al-tour h3 { color: #fff; font-size: clamp(21px, 2vw, 29px); margin-bottom: 10px; }
.al-lp .al-tour--feature h3,
.al-lp .al-tour--wide h3 { font-size: clamp(25px, 2.6vw, 38px); }
.al-lp .al-tour p {
	color: rgba(255, 255, 255, .85);
	font-size: 15.5px;
	line-height: 1.6;
	max-width: 46ch;
}
.al-lp .al-tour__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	color: var(--al-orange);
	font-weight: 700;
	font-size: 15px;
}
@media (hover: hover) and (pointer: fine) {
	.al-lp .al-tour:hover { transform: translateY(calc(var(--al-lift) * -1)); box-shadow: var(--al-sh-hover); }
	.al-lp .al-tour:hover .al-tour__img { transform: scale(1.07); }
}
.al-lp .al-tours-note { margin-top: 28px; font-size: 16px; color: var(--al-text-main); }
.al-lp .al-tours-note a { color: var(--al-purple); font-weight: 700; }

/* =====================================================================
   5. HOW IT WORKS - purple flood, outlined step numerals
   ===================================================================== */
.al-lp .al-how {
	background: var(--al-purple);
	color: rgba(255, 255, 255, .84);
	position: relative;
	overflow: hidden;
}
.al-lp .al-how::before {
	content: "";
	position: absolute;
	top: -140px;
	right: -120px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(242, 140, 0, .22) 0%, transparent 68%);
	pointer-events: none;
}
.al-lp .al-how .al-sec-head h2 { color: #fff; }
.al-lp .al-how .al-sec-head p { color: rgba(255, 255, 255, .82); }
.al-lp .al-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
}
.al-lp .al-step { position: relative; padding-top: 28px; border-top: 2px solid rgba(255, 255, 255, .26); }
.al-lp .al-step__n {
	font-family: var(--al-font-heading);
	font-size: clamp(44px, 4.6vw, 68px);
	font-weight: 800;
	line-height: .9;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, .48);
	text-stroke: 1.5px rgba(255, 255, 255, .48);
	display: block;
	margin-bottom: 16px;
}
.al-lp .al-step:first-child .al-step__n {
	color: var(--al-orange);
	-webkit-text-stroke: 0;
	text-stroke: 0;
}
.al-lp .al-step h3 { color: #fff; font-size: clamp(18px, 1.5vw, 22px); margin-bottom: 12px; }
.al-lp .al-step p { font-size: 15.5px; line-height: 1.62; color: rgba(255, 255, 255, .8); }

/* =====================================================================
   6. PRICING - split panel
   ===================================================================== */
.al-lp .al-price-panel {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(28px, 3vw, 52px);
	align-items: center;
	background: var(--al-bg-card);
	border: 1px solid rgba(90, 61, 142, .16);
	border-left: 5px solid var(--al-orange);
	border-radius: 18px;
	padding: clamp(28px, 3.6vw, 52px);
	box-shadow: 0 18px 48px rgba(90, 61, 142, .09);
}
.al-lp .al-price-panel h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 16px; }
.al-lp .al-price-panel p { font-size: 17px; line-height: 1.68; }
.al-lp .al-price-factors { display: grid; gap: 14px; }
.al-lp .al-price-factor {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	background: #f7f4fc;
	border-radius: 12px;
}
.al-lp .al-price-factor span:first-child {
	font-family: var(--al-font-heading);
	font-weight: 800;
	color: var(--al-orange);
	font-size: 18px;
	line-height: 1.4;
}
.al-lp .al-price-factor b { display: block; color: var(--al-text-dark); font-size: 16px; }
.al-lp .al-price-factor small { color: var(--al-text-main); font-size: 14.5px; }

/* =====================================================================
   7. REQUEST FORM
   ===================================================================== */
.al-lp .al-form-sec {
	background:
		radial-gradient(90% 120% at 88% 0%, rgba(242, 140, 0, .20) 0%, rgba(242, 140, 0, 0) 55%),
		linear-gradient(200deg, var(--al-purple-deep) 0%, var(--al-purple-ink) 100%);
	position: relative;
	overflow: hidden;
}
.al-lp .al-form-sec::before {
	content: "";
	position: absolute;
	inset: -20%;
	background-image: repeating-linear-gradient(72deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 26px);
	transform: skewY(-6deg);
	pointer-events: none;
}
.al-lp .al-form-wrap {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}
.al-lp .al-form-intro h2 { color: #fff; font-size: clamp(29px, 3.8vw, 48px); }
.al-lp .al-form-intro p { color: rgba(255, 255, 255, .85); font-size: 17px; line-height: 1.68; margin-top: 20px; }
.al-lp .al-form-intro ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.al-lp .al-form-intro li {
	color: rgba(255, 255, 255, .9);
	font-size: 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.al-lp .al-form-intro li::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: 7px;
	border-radius: 50%;
	background: var(--al-orange);
}
.al-lp .al-form-card {
	background: var(--al-bg-card);
	border-radius: 20px;
	padding: clamp(26px, 3vw, 42px);
	box-shadow: 0 28px 70px rgba(24, 14, 45, .34);
}
.al-lp .al-form-hint { font-size: 15px; color: var(--al-text-main); margin-bottom: 24px; }
.al-lp .al-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.al-lp .al-field { display: flex; flex-direction: column; gap: 8px; }
.al-lp .al-field--full { grid-column: 1 / -1; }
.al-lp .al-field label { font-size: 14px; font-weight: 700; color: var(--al-text-dark); }
.al-lp .al-field label .al-req { color: var(--al-orange-deep); margin-left: 3px; }
.al-lp .al-field input,
.al-lp .al-field textarea {
	width: 100%;
	font-family: var(--al-font-body);
	font-size: 16px;
	color: var(--al-text-search);
	background: #fff;
	border: 1.5px solid rgba(90, 61, 142, .32);
	border-radius: 12px;
	padding: 15px 16px;
	transition: border-color var(--al-t-fast) var(--al-ease), box-shadow var(--al-t-fast) var(--al-ease);
	-webkit-appearance: none;
	appearance: none;
}
.al-lp .al-field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
/* placeholder kept at 4.5:1 against #fff, not the usual washed-out grey */
.al-lp .al-field input::placeholder,
.al-lp .al-field textarea::placeholder { color: #6d6478; opacity: 1; }
.al-lp .al-field input:focus,
.al-lp .al-field textarea:focus {
	outline: none;
	border-color: var(--al-orange-deep);
	box-shadow: 0 0 0 4px rgba(242, 140, 0, .18);
}
.al-lp .al-form-actions { margin-top: 24px; }
.al-lp .al-form-note { margin-top: 16px; font-size: 13.5px; color: var(--al-text-main); line-height: 1.55; text-align: center; }

/* =====================================================================
   8. FAQ - CSS-only accordion
   ===================================================================== */
.al-lp .al-faq-list { border-top: 1px solid rgba(90, 61, 142, .18); }
.al-lp .al-faq { border-bottom: 1px solid rgba(90, 61, 142, .18); background: transparent; }
.al-lp .al-faq > summary {
	list-style: none;
	cursor: pointer;
	padding: 25px 56px 25px 0;
	position: relative;
	font-family: var(--al-font-heading);
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 700;
	color: var(--al-purple);
	line-height: 1.35;
	transition: color var(--al-t-fast) var(--al-ease);
}
.al-lp .al-faq > summary::-webkit-details-marker { display: none; }
.al-lp .al-faq > summary:hover { color: var(--al-orange-deep); }
/* CSS-only +/- toggle: no inline SVG, TranslatePress lowercases viewBox in AJAX */
.al-lp .al-faq > summary::before,
.al-lp .al-faq > summary::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	background: var(--al-orange);
	transition: transform var(--al-t-med) var(--al-ease), opacity var(--al-t-med) var(--al-ease);
}
.al-lp .al-faq > summary::before { width: 18px; height: 2px; transform: translateY(-50%); }
.al-lp .al-faq > summary::after { width: 2px; height: 18px; right: 16px; transform: translateY(-50%); }
.al-lp .al-faq[open] > summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.al-lp .al-faq__body {
	padding: 0 56px 26px 0;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--al-text-main);
}

/* =====================================================================
   9. CLOSING BAND - light, and it must stay light.
   The Elementor footer below is #EAEAEA with the mountain graphic pinned to
   `top center`. Ending this band on that exact colour lets the mountains
   rise out of the page; a dark slab here would cut them off in a hard line.
   ===================================================================== */
.al-lp .al-outro {
	background: #fff;
	text-align: center;
	padding: clamp(56px, 6vw, 92px) 0 clamp(64px, 7vw, 104px);
	/* see the note on .al-sec: Elementor's longhand would otherwise win */
	--padding-top: clamp(56px, 6vw, 92px);
	--padding-bottom: clamp(64px, 7vw, 104px);
	--padding-left: 0px;
	--padding-right: 0px;
	border-top: 1px solid rgba(90, 61, 142, .12);
}
.al-lp .al-outro h2 { color: var(--al-purple); font-size: clamp(26px, 3.2vw, 42px); }
.al-lp .al-outro p {
	color: var(--al-text-main);
	font-size: 17px;
	margin: 18px auto 30px;
	max-width: 56ch;
	line-height: 1.65;
}

/* =====================================================================
   10. MOTION — deliberately EMPTY.
   Reveal is owned entirely by the plugin (assets/css/motion.css +
   assets/js/motion.js). This file used to mirror those rules, which was
   correct in the mockup (where `.al-lp` sat on an ANCESTOR) but wrong on the
   live site: motion.js puts `al-rv` on the section itself, so the section
   carries `.al-lp` AND `.al-rv` together. `.al-lp .al-rv` (descendant) then
   never matched the reveal rule `.al-lp .al-rv.is-in`, while the plugin's
   hiding rule `html.al-js .al-rv` still applied — four sections stayed at
   opacity 0 permanently. Duplicating another module's rules is what created
   the mismatch; the plugin is the single owner.
   ===================================================================== */

/* =====================================================================
   Responsive - 1024 tablet, 720/390 mobile
   ===================================================================== */
@media (max-width: 1024px) {
	.al-lp .al-cards { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	.al-lp .al-ben-grid { grid-template-columns: repeat(2, 1fr); }
	.al-lp .al-steps { grid-template-columns: repeat(2, 1fr); gap: 30px; }
	.al-lp .al-tour,
	.al-lp .al-tour--feature { grid-column: span 3; }
	.al-lp .al-tour--wide { grid-column: span 6; }
	.al-lp .al-price-panel { grid-template-columns: 1fr; }
	.al-lp .al-form-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.al-lp { --al-gut: 18px; }
	.al-lp .al-cards,
	.al-lp .al-cards--two { grid-template-columns: 1fr; }
	.al-lp .al-ben-grid { grid-template-columns: 1fr; }
	.al-lp .al-steps { grid-template-columns: 1fr; gap: 24px; }
	.al-lp .al-tour,
	.al-lp .al-tour--feature,
	.al-lp .al-tour--wide { grid-column: 1 / -1; min-height: 296px; }
	.al-lp .al-tours-grid { grid-template-columns: 1fr; }
	.al-lp .al-fields { grid-template-columns: 1fr; }
	.al-lp .al-faq > summary { padding-right: 44px; font-size: 17px; }
	.al-lp .al-faq__body { padding-right: 0; }
	.al-lp .al-lane__head { gap: 8px; }
}

/* Accessibility ------------------------------------------------------- */
.al-lp a:focus-visible,
.al-lp button:focus-visible,
.al-lp summary:focus-visible,
.al-lp input:focus-visible,
.al-lp textarea:focus-visible {
	outline: 3px solid var(--al-orange-deep);
	outline-offset: 3px;
	border-radius: 6px;
	transition: none;
}

/* Print: the reveal must never withhold content from paper. */
@media print {
	html.al-js .al-lp.al-rv,
	html.al-js .al-lp .al-rv,
	html.al-js .al-lp .al-rv-stagger > * {
		opacity: 1 !important;
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.al-lp *, .al-lp *::before, .al-lp *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
	/* resetting the start state is what matters: killing the transition alone
	   would strand these at opacity 0 forever */
	html.al-js .al-lp.al-rv,
	html.al-js .al-lp .al-rv,
	html.al-js .al-lp .al-rv-stagger > * {
		opacity: 1 !important;
		transform: none !important;
	}
}