/**
 * DFS Motion — Process Timeline.
 *
 * Mode 1 is scrollstepstimeline.framer.website, steps only (Brad, 2026-09-27: "just the
 * step parts ... no titles above"). Every value below is READ FROM SOURCE — the Framer
 * component's own props and style objects in harvest/source/shared-lib.*.mjs and the
 * page module — and cross-checked against the harvest's computed styles at 9 rungs:
 *   circle 44 (40 phone) · radius 36 · border 2.5 · line 2.5 · contentGap 34 · rowGap 176
 *   accent #f04e23 · ground #fff9f8 · line #ded9d1 · muted #b2aea6
 *   activeTitle #000 · activeText rgba(0,0,0,.8) · description opacity .85, max 580
 *   circle font Funnel Sans 500 22/1em (18 phone) · title Inter Display 400 36/1.2em
 *   -0.02em (32 phone) · description Inter Display 400 18/1.4em (16 phone)
 *   transition background/border-color/color 0.2s ease · halo 0 0 0 10px accent@15%
 *
 * Every property an Elementor control writes is ALSO here, with the same value: the
 * control wins when someone sets it, this is the floor for instances saved before it
 * existed (Startbuild.md, "a control default only reaches instances saved AFTER").
 */

.dfs-ptl {
	--dfs-ptl-accent: #f04e23;
	--dfs-ptl-ground: #fff9f8;
	--dfs-ptl-line: #ded9d1;
	--dfs-ptl-muted: #b2aea6;
	--dfs-ptl-num-ink: #b2aea6;
	--dfs-ptl-num-ink-on: #ffffff;
	--dfs-ptl-num-bg: #fff9f8;
	--dfs-ptl-num-border: #ded9d1;
	--dfs-ptl-title-ink: #b2aea6;
	--dfs-ptl-title-ink-on: #000000;
	--dfs-ptl-text-ink: #b2aea6;
	--dfs-ptl-text-ink-on: #000000cc;
	--dfs-ptl-fill: #f04e23;
	--dfs-ptl-halo-size: 10px;
	--dfs-ptl-halo-blur: 0px;
	--dfs-ptl-halo: #f04e2326; /* accent at .15 — Uo( accent, .15 ) in the component */
	--dfs-ptl-size: 44px;
	--dfs-ptl-border: 2.5px;
	--dfs-ptl-lw: 2.5px;
	--dfs-ptl-dur: 0.2s;

	/* The wrappers inherit the reference's page ink (rgb(0,0,0), harvest el 0-4), not the
	 * theme's — every visible glyph sets its own colour below. */
	color: #000000;
	position: relative;
	width: 100%;
	max-width: 810px;
	margin: 0 auto;
	box-sizing: border-box;
}

.dfs-ptl *,
.dfs-ptl *::before,
.dfs-ptl *::after {
	box-sizing: border-box;
}

/* The rail runs from the first circle's centre to the last one's: top = size/2,
 * height = 100% - size, left = size/2 - lineWidth/2 (component source, Vo()). */
.dfs-ptl__rail {
	position: absolute;
	left: calc( var( --dfs-ptl-size ) / 2 - var( --dfs-ptl-lw ) / 2 );
	top: calc( var( --dfs-ptl-size ) / 2 );
	height: calc( 100% - var( --dfs-ptl-size ) );
	width: var( --dfs-ptl-lw );
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

/* "Last circle" (the default, Brad 2026-09-27): the script measures first-to-last circle
 * centre into --dfs-ptl-rail-h. Without the script the line keeps the reference's length —
 * longer, never broken. */
.dfs-ptl[ data-line-end="circle" ] .dfs-ptl__rail {
	height: var( --dfs-ptl-rail-h, calc( 100% - var( --dfs-ptl-size ) ) );
}

.dfs-ptl__track {
	width: 100%;
	height: 100%;
	background: var( --dfs-ptl-line );
}

.dfs-ptl__fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var( --dfs-ptl-fill );
	transform-origin: top;
	transform: scaleY( 1 );
}

/* Only once the script owns the fill does it start empty — no script, no motion, a
 * fully drawn line and every step readable (degrade: smaller, never broken). */
.dfs-ptl--live .dfs-ptl__fill {
	transform: scaleY( 0 );
}

.dfs-ptl__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dfs-ptl__row {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 34px;
	margin: 0 0 176px;
	padding: 0;
}

.dfs-ptl__row:last-child {
	margin-bottom: 0;
}

.dfs-ptl__row::marker {
	content: none;
}

.dfs-ptl__num {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var( --dfs-ptl-size );
	height: var( --dfs-ptl-size );
	min-width: var( --dfs-ptl-size );
	border-radius: 36px;
	border: var( --dfs-ptl-border ) solid var( --dfs-ptl-num-border );
	background: var( --dfs-ptl-num-bg );
	color: var( --dfs-ptl-num-ink );
	font-family: "DFS PT Funnel Sans", "Funnel Sans", sans-serif;
	font-size: 22px;
	font-weight: 500;
	font-style: normal;
	line-height: 1em;
	letter-spacing: 0em;
	box-shadow: none;
	transition: background var( --dfs-ptl-dur ) var( --dfs-ptl-dur-ease, ease ), border-color var( --dfs-ptl-dur ) var( --dfs-ptl-dur-ease, ease ), color var( --dfs-ptl-dur ) var( --dfs-ptl-dur-ease, ease );
}

.dfs-ptl__body {
	flex: 1;
	min-width: 0;
	padding-top: 4px;
}

.dfs-ptl__title {
	margin: 0 0 12px;
	padding: 0;
	color: var( --dfs-ptl-title-ink );
	font-family: "DFS PT Inter Display", "Inter Display", sans-serif;
	font-size: 36px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.2em;
	letter-spacing: -0.02em;
	text-transform: none;
	transition: color var( --dfs-ptl-dur ) var( --dfs-ptl-dur-ease, ease );
}

.dfs-ptl__text {
	margin: 0;
	padding: 0;
	max-width: 580px;
	opacity: 0.85;
	color: var( --dfs-ptl-text-ink );
	font-family: "DFS PT Inter Display", "Inter Display", sans-serif;
	font-size: 18px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4em;
	letter-spacing: 0em;
	transition: color var( --dfs-ptl-dur ) var( --dfs-ptl-dur-ease, ease );
}

/* THE LIT STATE. Colours ease over 0.2s; the halo does not — the reference animates the
 * box-shadow through a motion value over 0.1% of the viewport and lists no transition
 * for it, so it lands at once. Without the script every row is lit. */
.dfs-ptl__row.is-on .dfs-ptl__num,
.dfs-ptl:not( .dfs-ptl--live ) .dfs-ptl__num {
	background: var( --dfs-ptl-accent );
	border-color: var( --dfs-ptl-num-border-on, var( --dfs-ptl-accent ) );
	color: var( --dfs-ptl-num-ink-on );
	box-shadow: 0 0 var( --dfs-ptl-halo-blur ) var( --dfs-ptl-halo-size ) var( --dfs-ptl-halo );
}

.dfs-ptl__row.is-on .dfs-ptl__title,
.dfs-ptl:not( .dfs-ptl--live ) .dfs-ptl__title {
	color: var( --dfs-ptl-title-ink-on );
}

.dfs-ptl__row.is-on .dfs-ptl__text,
.dfs-ptl:not( .dfs-ptl--live ) .dfs-ptl__text {
	color: var( --dfs-ptl-text-ink-on );
}


/* ==========================================================================
 * EVERYTHING BELOW IS OFF UNTIL A MODE, THE VARIATION OR A SWITCH TURNS IT ON.
 * Each rule is scoped to a class render() prints only for that choice, so Modes 1
 * and 2 at their defaults match none of it (the lock, Brad 2026-09-27).
 * ======================================================================= */

/* ---------------------------------------------------- VARIATION 2 — ALTERNATING */
@media ( min-width: 1025px ) {
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--o-h ) .dfs-ptl__rail { left: calc( 50% - var( --dfs-ptl-lw ) / 2 ); }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--o-h ) .dfs-ptl__row { display: grid; grid-template-columns: minmax( 0, 1fr ) var( --dfs-ptl-size ) minmax( 0, 1fr ); align-items: start; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--o-h ) .dfs-ptl__num { grid-column: 2; grid-row: 1; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--o-h ) .dfs-ptl__body { grid-column: 3; grid-row: 1; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--o-h ) .dfs-ptl__media { grid-column: 1; grid-row: 1; justify-self: end; margin: 0; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--o-h ) .dfs-ptl__row:nth-child( even ) .dfs-ptl__body { grid-column: 1; text-align: right; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--o-h ) .dfs-ptl__row:nth-child( even ) .dfs-ptl__text { margin-left: auto; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--o-h ) .dfs-ptl__row:nth-child( even ) .dfs-ptl__media { grid-column: 3; justify-self: start; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--o-h ) .dfs-ptl__ghost { right: auto; left: 50%; transform: translateX( -50% ); }
}
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--ot-h ) .dfs-ptl__rail { left: calc( 50% - var( --dfs-ptl-lw ) / 2 ); }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--ot-h ) .dfs-ptl__row { display: grid; grid-template-columns: minmax( 0, 1fr ) var( --dfs-ptl-size ) minmax( 0, 1fr ); align-items: start; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--ot-h ) .dfs-ptl__num { grid-column: 2; grid-row: 1; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--ot-h ) .dfs-ptl__body { grid-column: 3; grid-row: 1; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--ot-h ) .dfs-ptl__media { grid-column: 1; grid-row: 1; justify-self: end; margin: 0; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--ot-h ) .dfs-ptl__row:nth-child( even ) .dfs-ptl__body { grid-column: 1; text-align: right; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--ot-h ) .dfs-ptl__row:nth-child( even ) .dfs-ptl__text { margin-left: auto; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--ot-h ) .dfs-ptl__row:nth-child( even ) .dfs-ptl__media { grid-column: 3; justify-self: start; }
	.dfs-ptl.dfs-ptl--alt:not( .dfs-ptl--ot-h ) .dfs-ptl__ghost { right: auto; left: 50%; transform: translateX( -50% ); }
}
@media ( max-width: 767px ) {
	.dfs-ptl.dfs-ptl--alt.dfs-ptl--alt-m:not( .dfs-ptl--om-h ) .dfs-ptl__rail { left: calc( 50% - var( --dfs-ptl-lw ) / 2 ); }
	.dfs-ptl.dfs-ptl--alt.dfs-ptl--alt-m:not( .dfs-ptl--om-h ) .dfs-ptl__row { display: grid; grid-template-columns: minmax( 0, 1fr ) var( --dfs-ptl-size ) minmax( 0, 1fr ); align-items: start; }
	.dfs-ptl.dfs-ptl--alt.dfs-ptl--alt-m:not( .dfs-ptl--om-h ) .dfs-ptl__num { grid-column: 2; grid-row: 1; }
	.dfs-ptl.dfs-ptl--alt.dfs-ptl--alt-m:not( .dfs-ptl--om-h ) .dfs-ptl__body { grid-column: 3; grid-row: 1; }
	.dfs-ptl.dfs-ptl--alt.dfs-ptl--alt-m:not( .dfs-ptl--om-h ) .dfs-ptl__media { grid-column: 1; grid-row: 1; justify-self: end; margin: 0; }
	.dfs-ptl.dfs-ptl--alt.dfs-ptl--alt-m:not( .dfs-ptl--om-h ) .dfs-ptl__row:nth-child( even ) .dfs-ptl__body { grid-column: 1; text-align: right; }
	.dfs-ptl.dfs-ptl--alt.dfs-ptl--alt-m:not( .dfs-ptl--om-h ) .dfs-ptl__row:nth-child( even ) .dfs-ptl__text { margin-left: auto; }
	.dfs-ptl.dfs-ptl--alt.dfs-ptl--alt-m:not( .dfs-ptl--om-h ) .dfs-ptl__row:nth-child( even ) .dfs-ptl__media { grid-column: 3; justify-self: start; }
	.dfs-ptl.dfs-ptl--alt.dfs-ptl--alt-m:not( .dfs-ptl--om-h ) .dfs-ptl__ghost { right: auto; left: 50%; transform: translateX( -50% ); }
}

/* --------------------------------------------------- DIRECTION — LEFT TO RIGHT */
@media ( min-width: 1025px ) {
	.dfs-ptl.dfs-ptl--o-h { --dfs-ptl-axis: x; }
	.dfs-ptl.dfs-ptl--o-h .dfs-ptl__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax( 0, 1fr ); grid-template-rows: auto auto auto; column-gap: var( --dfs-ptl-hgap, 32px ); }
	/* The row gap and bottom margins belong to top-to-bottom; left to right has its own gap. */
	.dfs-ptl.dfs-ptl--o-h .dfs-ptl__row { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; margin: 0 !important; align-items: start; text-align: var( --dfs-ptl-h-text, center ); }
	.dfs-ptl.dfs-ptl--o-h .dfs-ptl__num { grid-row: 1; justify-self: var( --dfs-ptl-h-self, center ); }
	.dfs-ptl.dfs-ptl--o-h .dfs-ptl__body { grid-row: 2; }
	.dfs-ptl.dfs-ptl--o-h .dfs-ptl__media { grid-row: 3; justify-self: var( --dfs-ptl-h-self, center ); margin: 0; }
	.dfs-ptl.dfs-ptl--o-h .dfs-ptl__text { margin-left: var( --dfs-ptl-h-margin, auto ); margin-right: var( --dfs-ptl-h-margin, auto ); }
	.dfs-ptl.dfs-ptl--o-h .dfs-ptl__rail { top: var( --dfs-ptl-rail-y, calc( var( --dfs-ptl-size ) / 2 - var( --dfs-ptl-lw ) / 2 ) ); left: var( --dfs-ptl-rail-x, 12.5% ); width: var( --dfs-ptl-rail-w, 75% ); height: var( --dfs-ptl-lw ); }
	.dfs-ptl.dfs-ptl--o-h .dfs-ptl__fill { transform-origin: left; }
	.dfs-ptl.dfs-ptl--o-h.dfs-ptl--live .dfs-ptl__fill { transform: scaleX( 0 ); }
	.dfs-ptl.dfs-ptl--o-h.dfs-ptl--fx-liquid .dfs-ptl__num::before { transform-origin: left; transform: scaleX( 0 ); }
	.dfs-ptl.dfs-ptl--o-h.dfs-ptl--fx-liquid .dfs-ptl__row.is-on .dfs-ptl__num::before { transform: none; }
	.dfs-ptl.dfs-ptl--o-h .dfs-ptl__ghost { right: auto; left: 50%; transform: translateX( -50% ); top: auto; bottom: 0; }
	.dfs-ptl.dfs-ptl--o-h.dfs-ptl--panel { display: block; }
	.dfs-ptl.dfs-ptl--o-h.dfs-ptl--panel .dfs-ptl__panel { display: block; position: relative; top: auto; width: var( --dfs-ptl-panel-w, 340px ); max-width: 100%; margin: 56px auto 0; }
	.dfs-ptl.dfs-ptl--o-h.dfs-ptl--panel .dfs-ptl__media--m { display: none; }
	.dfs-ptl.dfs-ptl--o-h.dfs-ptl--alt .dfs-ptl__num { grid-row: 2; }
	.dfs-ptl.dfs-ptl--o-h.dfs-ptl--alt .dfs-ptl__body { grid-row: 3; }
	.dfs-ptl.dfs-ptl--o-h.dfs-ptl--alt .dfs-ptl__media { grid-row: 1; align-self: end; }
	.dfs-ptl.dfs-ptl--o-h.dfs-ptl--alt .dfs-ptl__row:nth-child( even ) .dfs-ptl__body { grid-row: 1; align-self: end; }
	.dfs-ptl.dfs-ptl--o-h.dfs-ptl--alt .dfs-ptl__row:nth-child( even ) .dfs-ptl__media { grid-row: 3; align-self: start; }
}
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.dfs-ptl.dfs-ptl--ot-h { --dfs-ptl-axis: x; }
	.dfs-ptl.dfs-ptl--ot-h .dfs-ptl__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax( 0, 1fr ); grid-template-rows: auto auto auto; column-gap: var( --dfs-ptl-hgap, 32px ); }
	/* The row gap and bottom margins belong to top-to-bottom; left to right has its own gap. */
	.dfs-ptl.dfs-ptl--ot-h .dfs-ptl__row { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; margin: 0 !important; align-items: start; text-align: var( --dfs-ptl-h-text, center ); }
	.dfs-ptl.dfs-ptl--ot-h .dfs-ptl__num { grid-row: 1; justify-self: var( --dfs-ptl-h-self, center ); }
	.dfs-ptl.dfs-ptl--ot-h .dfs-ptl__body { grid-row: 2; }
	.dfs-ptl.dfs-ptl--ot-h .dfs-ptl__media { grid-row: 3; justify-self: var( --dfs-ptl-h-self, center ); margin: 0; }
	.dfs-ptl.dfs-ptl--ot-h .dfs-ptl__text { margin-left: var( --dfs-ptl-h-margin, auto ); margin-right: var( --dfs-ptl-h-margin, auto ); }
	.dfs-ptl.dfs-ptl--ot-h .dfs-ptl__rail { top: var( --dfs-ptl-rail-y, calc( var( --dfs-ptl-size ) / 2 - var( --dfs-ptl-lw ) / 2 ) ); left: var( --dfs-ptl-rail-x, 12.5% ); width: var( --dfs-ptl-rail-w, 75% ); height: var( --dfs-ptl-lw ); }
	.dfs-ptl.dfs-ptl--ot-h .dfs-ptl__fill { transform-origin: left; }
	.dfs-ptl.dfs-ptl--ot-h.dfs-ptl--live .dfs-ptl__fill { transform: scaleX( 0 ); }
	.dfs-ptl.dfs-ptl--ot-h.dfs-ptl--fx-liquid .dfs-ptl__num::before { transform-origin: left; transform: scaleX( 0 ); }
	.dfs-ptl.dfs-ptl--ot-h.dfs-ptl--fx-liquid .dfs-ptl__row.is-on .dfs-ptl__num::before { transform: none; }
	.dfs-ptl.dfs-ptl--ot-h .dfs-ptl__ghost { right: auto; left: 50%; transform: translateX( -50% ); top: auto; bottom: 0; }
	.dfs-ptl.dfs-ptl--ot-h.dfs-ptl--panel { display: block; }
	.dfs-ptl.dfs-ptl--ot-h.dfs-ptl--panel .dfs-ptl__panel { display: block; position: relative; top: auto; width: var( --dfs-ptl-panel-w, 340px ); max-width: 100%; margin: 56px auto 0; }
	.dfs-ptl.dfs-ptl--ot-h.dfs-ptl--panel .dfs-ptl__media--m { display: none; }
	.dfs-ptl.dfs-ptl--ot-h.dfs-ptl--alt .dfs-ptl__num { grid-row: 2; }
	.dfs-ptl.dfs-ptl--ot-h.dfs-ptl--alt .dfs-ptl__body { grid-row: 3; }
	.dfs-ptl.dfs-ptl--ot-h.dfs-ptl--alt .dfs-ptl__media { grid-row: 1; align-self: end; }
	.dfs-ptl.dfs-ptl--ot-h.dfs-ptl--alt .dfs-ptl__row:nth-child( even ) .dfs-ptl__body { grid-row: 1; align-self: end; }
	.dfs-ptl.dfs-ptl--ot-h.dfs-ptl--alt .dfs-ptl__row:nth-child( even ) .dfs-ptl__media { grid-row: 3; align-self: start; }
}
@media ( max-width: 767px ) {
	.dfs-ptl.dfs-ptl--om-h { --dfs-ptl-axis: x; }
	.dfs-ptl.dfs-ptl--om-h .dfs-ptl__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax( 0, 1fr ); grid-template-rows: auto auto auto; column-gap: var( --dfs-ptl-hgap, 32px ); }
	/* The row gap and bottom margins belong to top-to-bottom; left to right has its own gap. */
	.dfs-ptl.dfs-ptl--om-h .dfs-ptl__row { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; margin: 0 !important; align-items: start; text-align: var( --dfs-ptl-h-text, center ); }
	.dfs-ptl.dfs-ptl--om-h .dfs-ptl__num { grid-row: 1; justify-self: var( --dfs-ptl-h-self, center ); }
	.dfs-ptl.dfs-ptl--om-h .dfs-ptl__body { grid-row: 2; }
	.dfs-ptl.dfs-ptl--om-h .dfs-ptl__media { grid-row: 3; justify-self: var( --dfs-ptl-h-self, center ); margin: 0; }
	.dfs-ptl.dfs-ptl--om-h .dfs-ptl__text { margin-left: var( --dfs-ptl-h-margin, auto ); margin-right: var( --dfs-ptl-h-margin, auto ); }
	.dfs-ptl.dfs-ptl--om-h .dfs-ptl__rail { top: var( --dfs-ptl-rail-y, calc( var( --dfs-ptl-size ) / 2 - var( --dfs-ptl-lw ) / 2 ) ); left: var( --dfs-ptl-rail-x, 12.5% ); width: var( --dfs-ptl-rail-w, 75% ); height: var( --dfs-ptl-lw ); }
	.dfs-ptl.dfs-ptl--om-h .dfs-ptl__fill { transform-origin: left; }
	.dfs-ptl.dfs-ptl--om-h.dfs-ptl--live .dfs-ptl__fill { transform: scaleX( 0 ); }
	.dfs-ptl.dfs-ptl--om-h.dfs-ptl--fx-liquid .dfs-ptl__num::before { transform-origin: left; transform: scaleX( 0 ); }
	.dfs-ptl.dfs-ptl--om-h.dfs-ptl--fx-liquid .dfs-ptl__row.is-on .dfs-ptl__num::before { transform: none; }
	.dfs-ptl.dfs-ptl--om-h .dfs-ptl__ghost { right: auto; left: 50%; transform: translateX( -50% ); top: auto; bottom: 0; }
	.dfs-ptl.dfs-ptl--om-h.dfs-ptl--panel { display: block; }
	.dfs-ptl.dfs-ptl--om-h.dfs-ptl--panel .dfs-ptl__panel { display: block; position: relative; top: auto; width: var( --dfs-ptl-panel-w, 340px ); max-width: 100%; margin: 56px auto 0; }
	.dfs-ptl.dfs-ptl--om-h.dfs-ptl--panel .dfs-ptl__media--m { display: none; }
	.dfs-ptl.dfs-ptl--om-h.dfs-ptl--alt.dfs-ptl--alt-m .dfs-ptl__num { grid-row: 2; }
	.dfs-ptl.dfs-ptl--om-h.dfs-ptl--alt.dfs-ptl--alt-m .dfs-ptl__body { grid-row: 3; }
	.dfs-ptl.dfs-ptl--om-h.dfs-ptl--alt.dfs-ptl--alt-m .dfs-ptl__media { grid-row: 1; align-self: end; }
	.dfs-ptl.dfs-ptl--om-h.dfs-ptl--alt.dfs-ptl--alt-m .dfs-ptl__row:nth-child( even ) .dfs-ptl__body { grid-row: 1; align-self: end; }
	.dfs-ptl.dfs-ptl--om-h.dfs-ptl--alt.dfs-ptl--alt-m .dfs-ptl__row:nth-child( even ) .dfs-ptl__media { grid-row: 3; align-self: start; }
}

/* ------------------------------------------------------------------ STEP MEDIA */
.dfs-ptl__media {
	position: relative;
	flex: 0 0 var( --dfs-ptl-media-w, 220px );
	width: var( --dfs-ptl-media-w, 220px );
	max-width: 100%;
	aspect-ratio: var( --dfs-ptl-media-ratio, 4 / 5 );
	border-radius: var( --dfs-ptl-media-radius, 14px );
	overflow: hidden;
	background: rgba( 0, 0, 0, 0.06 );
	isolation: isolate;
}

.dfs-ptl__media video,
.dfs-ptl__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var( --dfs-ptl-media-fit, cover );
}

.dfs-ptl--media .dfs-ptl__body,
.dfs-ptl--panel .dfs-ptl__body {
	flex: 1 1 0;
}

.dfs-ptl--fx-focus .dfs-ptl__media,
.dfs-ptl--media .dfs-ptl__media {
	transition: filter 0.6s ease, opacity 0.6s ease, transform 0.8s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.dfs-ptl__sound {
	position: absolute;
	right: var( --dfs-ptl-sound-off, 10px );
	bottom: var( --dfs-ptl-sound-off, 10px );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --dfs-ptl-sound, 38px );
	height: var( --dfs-ptl-sound, 38px );
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --dfs-ptl-sound-bg, rgba( 20, 24, 21, 0.55 ) );
	color: var( --dfs-ptl-sound-ink, #ffffff );
	cursor: pointer;
	backdrop-filter: blur( 6px );
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.dfs-ptl__sound:hover { transform: scale( 1.08 ); }
.dfs-ptl__sound:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.dfs-ptl__sound svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dfs-ptl__sound svg path:first-child { fill: currentColor; stroke: none; }
.dfs-ptl__sound .dfs-ptl__sound-on,
.dfs-ptl__sound[ aria-pressed="true" ] .dfs-ptl__sound-off { display: none; }
.dfs-ptl__sound[ aria-pressed="true" ] .dfs-ptl__sound-on { display: block; }

@media ( max-width: 767px ) {
	.dfs-ptl--media:not( .dfs-ptl--om-h ):not( .dfs-ptl--alt-m ) .dfs-ptl__row,
	.dfs-ptl--panel:not( .dfs-ptl--om-h ) .dfs-ptl__row { flex-wrap: wrap; }
	.dfs-ptl--media:not( .dfs-ptl--om-h ):not( .dfs-ptl--alt-m ) .dfs-ptl__media,
	.dfs-ptl--panel:not( .dfs-ptl--om-h ) .dfs-ptl__media--m { margin-left: calc( var( --dfs-ptl-size ) + 24px ); }
}

/* --------------------------------------------------------- STICKY MEDIA PANEL */
.dfs-ptl__panel { display: none; }
.dfs-ptl__media--m { display: none; }

@media ( max-width: 767px ) {
	.dfs-ptl--panel:not( .dfs-ptl--panel-m-hide ):not( .dfs-ptl--om-h ) .dfs-ptl__media--m { display: block; }
}

@media ( min-width: 1025px ) {
	.dfs-ptl.dfs-ptl--panel:not( .dfs-ptl--o-h ) { display: grid; grid-template-columns: minmax( 0, 1fr ) var( --dfs-ptl-panel-w, 340px ); column-gap: var( --dfs-ptl-panel-gap, 96px ); align-items: start; }
	.dfs-ptl.dfs-ptl--panel:not( .dfs-ptl--o-h ) .dfs-ptl__list { grid-column: 1; grid-row: 1; }
	.dfs-ptl.dfs-ptl--panel:not( .dfs-ptl--o-h ) .dfs-ptl__panel { display: block; grid-column: 2; grid-row: 1; position: sticky; top: var( --dfs-ptl-panel-top, 12vh ); }
}
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.dfs-ptl.dfs-ptl--panel:not( .dfs-ptl--ot-h ) { display: grid; grid-template-columns: minmax( 0, 1fr ) var( --dfs-ptl-panel-w, 340px ); column-gap: var( --dfs-ptl-panel-gap, 96px ); align-items: start; }
	.dfs-ptl.dfs-ptl--panel:not( .dfs-ptl--ot-h ) .dfs-ptl__list { grid-column: 1; grid-row: 1; }
	.dfs-ptl.dfs-ptl--panel:not( .dfs-ptl--ot-h ) .dfs-ptl__panel { display: block; grid-column: 2; grid-row: 1; position: sticky; top: var( --dfs-ptl-panel-top, 12vh ); }
}

.dfs-ptl__panel {
	width: 100%;
	aspect-ratio: var( --dfs-ptl-panel-ratio, 9 / 16 );
	border-radius: var( --dfs-ptl-panel-radius, 18px );
	overflow: hidden;
	isolation: isolate;
	background: rgba( 0, 0, 0, 0.06 );
}

.dfs-ptl__panel .dfs-ptl__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	border-radius: 0;
	opacity: 0;
	transform: scale( var( --dfs-ptl-slide-zoom, 1.06 ) );
	transition: opacity var( --dfs-ptl-slide-fade, 0.7s ) ease, transform calc( var( --dfs-ptl-slide-fade, 0.7s ) * 1.72 ) cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.dfs-ptl__panel .dfs-ptl__slide.is-active,
.dfs-ptl:not( .dfs-ptl--live ) .dfs-ptl__panel .dfs-ptl__slide:first-child {
	opacity: 1;
	transform: none;
	z-index: 1;
}

/* ---------------------------------------------------------------------- LABELS */
.dfs-ptl__label {
	display: block;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --dfs-ptl-label-ink, var( --dfs-ptl-title-ink ) );
	transition: color var( --dfs-ptl-dur ) var( --dfs-ptl-dur-ease, ease );
}

.dfs-ptl__row.is-on .dfs-ptl__label,
.dfs-ptl:not( .dfs-ptl--live ) .dfs-ptl__label {
	color: var( --dfs-ptl-label-ink-on, var( --dfs-ptl-accent ) );
}

/* --------------------------------------------------------------------- BUTTONS */
.dfs-ptl__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 10px 20px;
	border: 1px solid var( --dfs-ptl-btn-bd, currentColor );
	border-radius: 999px;
	background: var( --dfs-ptl-btn-bg, transparent );
	color: var( --dfs-ptl-btn-ink, var( --dfs-ptl-title-ink-on ) );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2em;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.dfs-ptl__btn:hover,
.dfs-ptl__btn:focus-visible {
	color: var( --dfs-ptl-btn-ink-h, #ffffff );
	background: var( --dfs-ptl-btn-bg-h, var( --dfs-ptl-accent ) );
	border-color: var( --dfs-ptl-btn-bd-h, var( --dfs-ptl-accent ) );
}

.dfs-ptl__btn-arrow { display: inline-block; transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ); }
.dfs-ptl__btn:hover .dfs-ptl__btn-arrow { transform: translateX( 4px ); }

/* -------------------------------------------------------------- CUSTOM CIRCLES */
.dfs-ptl__glyph { display: flex; align-items: center; justify-content: center; line-height: 1; }
.dfs-ptl__glyph svg { width: var( --dfs-ptl-icon, 20px ); height: var( --dfs-ptl-icon, 20px ); fill: currentColor; }
.dfs-ptl__glyph i { font-size: var( --dfs-ptl-icon, 20px ); }
.dfs-ptl .dfs-ptl__num .dfs-ptl__cimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dfs-ptl__ctext { font-size: 0.62em; letter-spacing: 0.02em; white-space: nowrap; }

/* ------------------------------------------------------------ RICH TEXT BODIES */
div.dfs-ptl__text p { margin: 0 0 0.6em; }
div.dfs-ptl__text > :last-child { margin-bottom: 0; }
div.dfs-ptl__text a { color: inherit; }

/* ---------------------------------------------------------- STATUS BY HAND */
.dfs-ptl--status .dfs-ptl__row.is-done .dfs-ptl__num {
	background: var( --dfs-ptl-done-bg, var( --dfs-ptl-accent ) );
	border-color: var( --dfs-ptl-done-bg, var( --dfs-ptl-accent ) );
	color: var( --dfs-ptl-done-ink, var( --dfs-ptl-num-ink-on ) );
}

.dfs-ptl--status .dfs-ptl__row.is-done:not( .is-current ) .dfs-ptl__num { box-shadow: none; }

/* ------------------------------------------------------ STEP LINKS & KEYBOARD */
a.dfs-ptl__num { text-decoration: none; cursor: pointer; }
a.dfs-ptl__num:focus-visible { outline: 2px solid var( --dfs-ptl-accent ); outline-offset: 5px; }
.dfs-ptl--nav .dfs-ptl__row { scroll-margin-top: 30vh; }
.dfs-ptl__live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.dfs-ptl[ data-trigger="click" ] .dfs-ptl__row,
.dfs-ptl[ data-trigger="hover" ] .dfs-ptl__row { cursor: pointer; }

/* ---------------------------------------------------------------- PROGRESS BAR */
.dfs-ptl__pbar {
	position: fixed;
	left: var( --dfs-ptl-pbar-x, 16px );
	right: var( --dfs-ptl-pbar-x, 16px );
	bottom: var( --dfs-ptl-pbar-y, 16px );
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 9px;
	max-width: 520px;
	margin: 0 auto;
	padding: 12px 16px;
	border-radius: 14px;
	background: var( --dfs-ptl-pbar-bg, rgba( 39, 53, 44, 0.94 ) );
	color: var( --dfs-ptl-pbar-ink, #f7f4ec );
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3em;
	letter-spacing: 0.02em;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.18 );
	backdrop-filter: blur( 10px );
	opacity: 0;
	transform: translateY( var( --dfs-ptl-pbar-hide, calc( 100% + 32px ) ) );
	transition: transform 0.5s cubic-bezier( 0.2, 0.7, 0.2, 1 ), opacity 0.35s ease;
	pointer-events: none;
}

.dfs-ptl__pbar.is-shown { opacity: 1; transform: none; }
.dfs-ptl__pbar-track { position: relative; display: block; height: 3px; border-radius: 3px; overflow: hidden; background: var( --dfs-ptl-pbar-track, rgba( 247, 244, 236, 0.18 ) ); }
.dfs-ptl__pbar-fill { position: absolute; inset: 0; background: var( --dfs-ptl-pbar-fill, var( --dfs-ptl-accent ) ); transform: scaleX( 0 ); transform-origin: left; }

@media ( min-width: 1025px ) {
	.dfs-ptl:not( .dfs-ptl--pbar-all ) .dfs-ptl__pbar { display: none; }
}

/* =============================================================== EFFECTS === */

/* Glowing line tip — placed by the script at the end of the fill. */
.dfs-ptl__tip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: var( --dfs-ptl-tip-size, 10px );
	height: var( --dfs-ptl-tip-size, 10px );
	margin: calc( var( --dfs-ptl-tip-size, 10px ) / -2 ) 0 0 calc( var( --dfs-ptl-tip-size, 10px ) / -2 );
	border-radius: 50%;
	background: var( --dfs-ptl-tip, var( --dfs-ptl-fill ) );
	box-shadow: 0 0 var( --dfs-ptl-tip-glow, 18px ) calc( var( --dfs-ptl-tip-glow, 18px ) / 3 ) var( --dfs-ptl-tip, var( --dfs-ptl-fill ) );
	opacity: 0;
	pointer-events: none;
	will-change: transform;
}

/* Circle outline draws itself. */
.dfs-ptl__ring {
	position: absolute;
	top: calc( -1 * var( --dfs-ptl-ring-gap, 6px ) - var( --dfs-ptl-border ) );
	left: calc( -1 * var( --dfs-ptl-ring-gap, 6px ) - var( --dfs-ptl-border ) );
	width: calc( 100% + 2 * var( --dfs-ptl-ring-gap, 6px ) + 2 * var( --dfs-ptl-border ) );
	height: calc( 100% + 2 * var( --dfs-ptl-ring-gap, 6px ) + 2 * var( --dfs-ptl-border ) );
	overflow: visible;
	fill: none;
	pointer-events: none;
	transform: rotate( -90deg );
}

.dfs-ptl__ring circle {
	stroke: var( --dfs-ptl-ring, var( --dfs-ptl-accent ) );
	stroke-width: var( --dfs-ptl-ring-w, 1.5px );
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset var( --dfs-ptl-ring-dur, 0.9s ) var( --dfs-ptl-ring-ease, cubic-bezier( 0.65, 0, 0.35, 1 ) );
}

.dfs-ptl__row.is-on .dfs-ptl__ring circle,
.dfs-ptl:not( .dfs-ptl--live ) .dfs-ptl__ring circle { stroke-dashoffset: 0; }

/* Liquid fill — the lit colour pours in from the line's side (top, or left). */
.dfs-ptl--fx-liquid .dfs-ptl__num::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var( --dfs-ptl-accent );
	transform: scaleY( 0 );
	transform-origin: top;
	transition: transform var( --dfs-ptl-liquid-dur, 0.7s ) var( --dfs-ptl-liquid-ease, cubic-bezier( 0.65, 0, 0.35, 1 ) );
}

.dfs-ptl.dfs-ptl--fx-liquid.dfs-ptl--live .dfs-ptl__row.is-on .dfs-ptl__num { background: var( --dfs-ptl-num-bg ); }
.dfs-ptl--fx-liquid .dfs-ptl__row.is-on .dfs-ptl__num::before,
.dfs-ptl--fx-liquid:not( .dfs-ptl--live ) .dfs-ptl__num::before { transform: none; }

/* Focus — unlit steps sit soft. */
.dfs-ptl--fx-focus .dfs-ptl__body { transition: filter var( --dfs-ptl-focus-dur, 0.6s ) var( --dfs-ptl-focus-ease, ease ), opacity var( --dfs-ptl-focus-dur, 0.6s ) var( --dfs-ptl-focus-ease, ease ); }
.dfs-ptl--fx-focus.dfs-ptl--live .dfs-ptl__row:not( .is-on ) .dfs-ptl__body,
.dfs-ptl--fx-focus.dfs-ptl--live .dfs-ptl__row:not( .is-on ) .dfs-ptl__media {
	filter: blur( var( --dfs-ptl-focus-blur, 3px ) );
	opacity: var( --dfs-ptl-focus-dim, 0.45 );
}

/* Ghost number. */
.dfs-ptl--fx-ghost .dfs-ptl__list { position: relative; z-index: 1; }
.dfs-ptl__ghost {
	position: absolute;
	top: 0;
	right: var( --dfs-ptl-ghost-x, 0px );
	z-index: 0;
	height: 0.8em;
	min-width: 2ch;
	overflow: hidden;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 200px;
	font-weight: 400;
	line-height: 0.8em;
	letter-spacing: -0.04em;
	color: var( --dfs-ptl-ghost-ink, var( --dfs-ptl-accent ) );
	opacity: var( --dfs-ptl-ghost-o, 0.08 );
	pointer-events: none;
	font-variant-numeric: lining-nums tabular-nums;
	will-change: transform;
}

.dfs-ptl__ghost-n { position: absolute; top: 0; right: 0; display: block; white-space: nowrap; }

/* Curved line. */
.dfs-ptl--fx-curve .dfs-ptl__rail { visibility: hidden; }
.dfs-ptl__curve { position: absolute; top: 0; left: 0; z-index: 1; overflow: visible; pointer-events: none; }
.dfs-ptl__curve path { fill: none; stroke-width: var( --dfs-ptl-lw ); stroke-linecap: round; }
.dfs-ptl__curve-track { stroke: var( --dfs-ptl-line ); }
.dfs-ptl__curve-fill { stroke: var( --dfs-ptl-fill ); }

/* Passed steps turn into ticks. */
.dfs-ptl__digit { display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.3s ease, transform 0.4s cubic-bezier( 0.2, 0.7, 0.2, 1 ); }
.dfs-ptl__tick { position: absolute; inset: 0; width: 46%; height: 46%; margin: auto; overflow: visible; pointer-events: none; }
.dfs-ptl__tick path {
	fill: none;
	stroke: var( --dfs-ptl-tick, currentColor );
	stroke-width: var( --dfs-ptl-tick-w, 2.5 );
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset var( --dfs-ptl-tick-dur, 0.5s ) var( --dfs-ptl-tick-ease, cubic-bezier( 0.65, 0, 0.35, 1 ) );
}

.dfs-ptl__row.is-done .dfs-ptl__digit { opacity: 0; transform: scale( 0.4 ); }
.dfs-ptl__row.is-done .dfs-ptl__tick path { stroke-dashoffset: 0; transition-delay: var( --dfs-ptl-tick-delay, 0.15s ); }

@media ( prefers-reduced-motion: reduce ) and ( dfs-reduced-motion-honoured ) {
	.dfs-ptl__label,
	.dfs-ptl__btn,
	.dfs-ptl__body,
	.dfs-ptl__media,
	.dfs-ptl__num::before,
	.dfs-ptl__ring circle,
	.dfs-ptl__tick path,
	.dfs-ptl__digit,
	.dfs-ptl__panel .dfs-ptl__slide,
	.dfs-ptl__pbar {
		transition: none;
	}

	.dfs-ptl__num,
	.dfs-ptl__title,
	.dfs-ptl__text {
		transition: none;
	}
}

/* Reveal Descriptions As Steps Light — folded only while the script runs (dfs-ptl--live);
   no script or reduced motion leaves every description open. Keyboard focus inside a folded
   step opens it, so a button is never focused while invisible. */
.dfs-ptl--reveal.dfs-ptl--live .dfs-ptl__more { height: 0; opacity: 0; overflow: hidden; }
.dfs-ptl--reveal.dfs-ptl--live .dfs-ptl__more:focus-within { height: auto !important; opacity: 1 !important; overflow: visible !important; }
.dfs-ptl__more-in { display: flow-root; }

/* SIGNATURE SET — Mode 7, and a switch in every mode (off there). Only while the script runs
   (dfs-ptl--live): without it, or with reduced motion, every step shows lit and nothing moves. */
.dfs-ptl--fx-soft.dfs-ptl--live .dfs-ptl__row:not( .is-reached ) .dfs-ptl__title { color: var( --dfs-ptl-soft-ink, #B2AEA6 ); }
.dfs-ptl--fx-soft.dfs-ptl--live .dfs-ptl__row:not( .is-reached ) .dfs-ptl__text { opacity: var( --dfs-ptl-soft-o, 0.55 ); }
.dfs-ptl--fx-soft .dfs-ptl__text { transition: color var( --dfs-ptl-dur ) var( --dfs-ptl-dur-ease, ease ), opacity var( --dfs-ptl-soft-dur, 0.5s ) ease; }
/* Sheen: a band of light clipped to the circle; the script sends it across once per step. */
.dfs-ptl__sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.dfs-ptl__sheen i { position: absolute; top: 0; bottom: 0; left: 0; width: var( --dfs-ptl-sheen-w, 100% ); background: linear-gradient( 105deg, transparent 25%, var( --dfs-ptl-sheen, rgba( 255, 238, 206, 0.75 ) ) 50%, transparent 75% ); transform: translateX( -130% ); }
/* Breathing halo: the span's own shadow, which falls outside the circle. */
.dfs-ptl__breath { position: absolute; inset: calc( var( --dfs-ptl-border, 0px ) * -1 ); border-radius: inherit; pointer-events: none; }


/*
 * STAGE MODES (8-11) — left to right, holding the screen while pinned. Desktop and
 * tablet only: phones keep Mode 7's pinned column. The stage stays under the pin's
 * 80vh centring threshold by default (Stage Height, 72vh), so it pins centred.
 */
@media ( min-width: 768px ) {
	.dfs-ptl.dfs-ptl--stage {
		box-sizing: border-box;
		min-height: var( --dfs-ptl-stage-h, 72vh );
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	/* Mode 9: the ghost number stands in the flow above the steps, left-set, as an editorial numeral. */
	.dfs-ptl.dfs-ptl--stage-9.dfs-ptl--fx-ghost .dfs-ptl__ghost {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		align-self: flex-start;
		transform: none;
		margin: 0 0 28px;
		font-size: 220px;
		height: 1em;
		line-height: 1em;
		opacity: var( --dfs-ptl-ghost-o, 0.08 );
	}
	/* Spotlight: the lit step leads; the others step back until the line reaches them. */
	.dfs-ptl.dfs-ptl--stage-11 .dfs-ptl__body {
		transform-origin: var( --dfs-ptl-h-text, center ) top;
		transition: opacity var( --dfs-ptl-spot-dur, 0.7s ) var( --dfs-ptl-spot-ease, cubic-bezier(0.16, 1, 0.3, 1) ), transform var( --dfs-ptl-spot-dur, 0.7s ) var( --dfs-ptl-spot-ease, cubic-bezier(0.16, 1, 0.3, 1) );
	}
	.dfs-ptl.dfs-ptl--stage-11.dfs-ptl--live .dfs-ptl__row:not( .is-on ) .dfs-ptl__body {
		opacity: var( --dfs-ptl-spot-o, 0.35 );
		transform: scale( var( --dfs-ptl-spot-scale, 0.9 ) );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.dfs-ptl.dfs-ptl--stage-11 .dfs-ptl__body { transition: none; }
}

/*
 * STAGE EFFECTS (Modes 8-11). Each is keyed on its own dfs-ptl--sx-* class and on
 * dfs-ptl--live, so reduced motion and a page without the engine show none of them.
 */
/* Gilded Glint — a light band travels the filled part of the line. */
.dfs-ptl.dfs-ptl--sx-glint.dfs-ptl--live .dfs-ptl__fill {
	background-image: linear-gradient( 90deg, transparent 0, var( --dfs-ptl-sx-glint, #FFF6E6 ) 50%, transparent 100% );
	background-size: 18% 100%;
	background-repeat: no-repeat;
	animation: dfs-ptl-sx-glint var( --dfs-ptl-sx-glint-t, 2.8s ) cubic-bezier( 0.45, 0, 0.55, 1 ) infinite;
}
@keyframes dfs-ptl-sx-glint { from { background-position: -30% 0; } to { background-position: 130% 0; } }
/* Focus Pull — a title comes into focus as its step lights. */
.dfs-ptl.dfs-ptl--sx-focus.dfs-ptl--live .dfs-ptl__title {
	filter: blur( var( --dfs-ptl-sx-focus, 6px ) );
	transition: filter 1.1s cubic-bezier( 0.16, 1, 0.3, 1 );
}
.dfs-ptl.dfs-ptl--sx-focus.dfs-ptl--live .dfs-ptl__row.is-on .dfs-ptl__title,
.dfs-ptl.dfs-ptl--sx-focus.dfs-ptl--live .dfs-ptl__row.is-reached .dfs-ptl__title { filter: none; }
/* Magnetic Circles / 3D Stage Tilt — driven by the script (translate, transform). */
.dfs-ptl.dfs-ptl--sx-tilt { transform-style: preserve-3d; will-change: transform; }
/* Drawn Rule — a hairline draws under the lit title. */
.dfs-ptl.dfs-ptl--sx-rule .dfs-ptl__title { position: relative; padding-bottom: 16px; }
.dfs-ptl.dfs-ptl--sx-rule .dfs-ptl__title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 72px;
	height: 1px;
	background: var( --dfs-ptl-sx-rule, var( --dfs-ptl-fill ) );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 1s cubic-bezier( 0.65, 0, 0.35, 1 );
}
.dfs-ptl.dfs-ptl--sx-rule:not( .dfs-ptl--live ) .dfs-ptl__title::after,
.dfs-ptl.dfs-ptl--sx-rule .dfs-ptl__row.is-on .dfs-ptl__title::after { transform: none; }
/* Opening Tracking — the lit title's letters open out: a script tween from the computed
 * spacing (mode_css prints the title's letter-spacing at #id, which no class rule can beat). */
/* Ink-Fill Numeral — the ghost numeral as an outline, filled from below by scroll. */
.dfs-ptl.dfs-ptl--sx-numfill.dfs-ptl--fx-ghost.dfs-ptl--live .dfs-ptl__ghost { opacity: var( --dfs-ptl-sx-num-o, 0.5 ); }
.dfs-ptl.dfs-ptl--sx-numfill.dfs-ptl--live .dfs-ptl__ghost-n {
	color: transparent;
	-webkit-text-stroke: 1px var( --dfs-ptl-ghost-ink, var( --dfs-ptl-accent ) );
	background-image: linear-gradient( to top, var( --dfs-ptl-ghost-ink, var( --dfs-ptl-accent ) ) var( --dfs-ptl-sx-fill, 0% ), transparent var( --dfs-ptl-sx-fill, 0% ) );
	-webkit-background-clip: text;
	background-clip: text;
}
/* Cursor Light — a warm light follows the cursor across the stage. */
.dfs-ptl.dfs-ptl--sx-light .dfs-ptl__list { position: relative; z-index: 1; }
.dfs-ptl.dfs-ptl--sx-light::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient( var( --dfs-ptl-sx-light-r, 460px ) circle at var( --dfs-ptl-sx-mx, 50% ) var( --dfs-ptl-sx-my, 50% ), var( --dfs-ptl-sx-light, #AF79502E ), transparent 70% );
	opacity: var( --dfs-ptl-sx-lo, 0 );
}
/* Growing Stems — a stem draws from the circle to its text (text below: from above; text above: from below). */
.dfs-ptl.dfs-ptl--sx-stems.dfs-ptl--live .dfs-ptl__body { position: relative; }
.dfs-ptl.dfs-ptl--sx-stems.dfs-ptl--live .dfs-ptl__body::before {
	content: "";
	position: absolute;
	left: 50%;
	top: calc( -1 * var( --dfs-ptl-sx-stem, 22px ) - 4px );
	width: 1px;
	height: var( --dfs-ptl-sx-stem, 22px );
	background: var( --dfs-ptl-fill );
	transform: scaleY( 0 );
	transform-origin: top;
	transition: transform 0.8s cubic-bezier( 0.65, 0, 0.35, 1 );
}
.dfs-ptl.dfs-ptl--sx-stems.dfs-ptl--alt.dfs-ptl--live .dfs-ptl__row:nth-child( even ) .dfs-ptl__body::before { top: auto; bottom: calc( -1 * var( --dfs-ptl-sx-stem, 22px ) - 4px ); transform-origin: bottom; }
.dfs-ptl.dfs-ptl--sx-stems.dfs-ptl--live .dfs-ptl__row.is-on .dfs-ptl__body::before,
.dfs-ptl.dfs-ptl--sx-stems.dfs-ptl--live .dfs-ptl__row.is-reached .dfs-ptl__body::before { transform: none; }
/* Floating Text — the lit step drifts gently. */
.dfs-ptl.dfs-ptl--sx-float.dfs-ptl--live .dfs-ptl__row.is-on .dfs-ptl__body { animation: dfs-ptl-sx-float var( --dfs-ptl-sx-float-t, 4.5s ) ease-in-out infinite; }
@keyframes dfs-ptl-sx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc( -1 * var( --dfs-ptl-sx-float, 6px ) ); } }
/* Comet — a glowing head at the fill's edge, its tail stretching with scroll speed. */
.dfs-ptl__comet {
	position: absolute;
	top: 50%;
	left: calc( var( --dfs-ptl-sx-p, 0 ) * 100% );
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: var( --dfs-ptl-sx-comet, var( --dfs-ptl-fill ) );
	box-shadow: 0 0 14px 4px var( --dfs-ptl-sx-comet, var( --dfs-ptl-fill ) );
	opacity: 0;
	pointer-events: none;
}
.dfs-ptl--live .dfs-ptl__comet { opacity: 1; }
.dfs-ptl__comet::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 50%;
	width: calc( 40px + var( --dfs-ptl-sx-tail, 0 ) * 220px );
	height: 3px;
	margin-top: -1.5px;
	border-radius: 3px;
	background: linear-gradient( 90deg, transparent, var( --dfs-ptl-sx-comet, var( --dfs-ptl-fill ) ) );
	transition: width 0.25s ease-out;
}
/* Depth Of Field — steps blur with distance from the lit one. */
.dfs-ptl.dfs-ptl--sx-dof.dfs-ptl--live .dfs-ptl__body {
	transition: opacity var( --dfs-ptl-spot-dur, 0.7s ) var( --dfs-ptl-spot-ease, cubic-bezier(0.16, 1, 0.3, 1) ), transform var( --dfs-ptl-spot-dur, 0.7s ) var( --dfs-ptl-spot-ease, cubic-bezier(0.16, 1, 0.3, 1) ), filter var( --dfs-ptl-spot-dur, 0.7s ) var( --dfs-ptl-spot-ease, cubic-bezier(0.16, 1, 0.3, 1) );
}
.dfs-ptl.dfs-ptl--sx-dof.dfs-ptl--live .dfs-ptl__row[data-sx-dist="1"] .dfs-ptl__body { filter: blur( var( --dfs-ptl-sx-dof, 1.4px ) ); }
.dfs-ptl.dfs-ptl--sx-dof.dfs-ptl--live .dfs-ptl__row[data-sx-dist="2"] .dfs-ptl__body { filter: blur( calc( var( --dfs-ptl-sx-dof, 1.4px ) * 2 ) ); }
.dfs-ptl.dfs-ptl--sx-dof.dfs-ptl--live .dfs-ptl__row[data-sx-dist="3"] .dfs-ptl__body { filter: blur( calc( var( --dfs-ptl-sx-dof, 1.4px ) * 3 ) ); }
/* Glow Pool — a warm light glides beneath the lit step (placed by the script). */
.dfs-ptl__pool {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 460px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient( closest-side, var( --dfs-ptl-sx-pool, #AF795033 ), transparent );
	opacity: 0;
	pointer-events: none;
}
.dfs-ptl.dfs-ptl--sx-pool .dfs-ptl__list { position: relative; z-index: 1; }
/* 3D Lift — waiting steps tip back into the page, the lit one stands up. */
.dfs-ptl.dfs-ptl--sx-lift .dfs-ptl__list { perspective: 1100px; }
.dfs-ptl.dfs-ptl--sx-lift.dfs-ptl--live .dfs-ptl__body { transform-origin: 50% 0; transition: opacity var( --dfs-ptl-spot-dur, 0.7s ) var( --dfs-ptl-spot-ease, cubic-bezier(0.16, 1, 0.3, 1) ), transform var( --dfs-ptl-spot-dur, 0.7s ) var( --dfs-ptl-spot-ease, cubic-bezier(0.16, 1, 0.3, 1) ), filter var( --dfs-ptl-spot-dur, 0.7s ) var( --dfs-ptl-spot-ease, cubic-bezier(0.16, 1, 0.3, 1) ); }
.dfs-ptl.dfs-ptl--sx-lift.dfs-ptl--live .dfs-ptl__row:not( .is-on ) .dfs-ptl__body {
	transform: rotateX( var( --dfs-ptl-sx-lift, 16deg ) ) scale( var( --dfs-ptl-spot-scale, 0.9 ) );
}
/* Iris Reveal — the lit description opens out of a circle from above. */
.dfs-ptl.dfs-ptl--sx-iris.dfs-ptl--live .dfs-ptl__text {
	clip-path: circle( 0% at 50% 0% );
	transition: clip-path 1.2s cubic-bezier( 0.65, 0, 0.35, 1 );
}
.dfs-ptl.dfs-ptl--sx-iris.dfs-ptl--live .dfs-ptl__row.is-on .dfs-ptl__text { clip-path: circle( 150% at 50% 0% ); }
@media ( prefers-reduced-motion: reduce ) {
	.dfs-ptl.dfs-ptl--sx-glint .dfs-ptl__fill,
	.dfs-ptl.dfs-ptl--sx-float .dfs-ptl__body { animation: none; }
}

/* Comet and stems need a left-to-right line: hidden on any device that runs top to bottom. */
@media ( min-width: 1025px ) {
	.dfs-ptl:not( .dfs-ptl--o-h ) .dfs-ptl__comet,
	.dfs-ptl.dfs-ptl--sx-stems:not( .dfs-ptl--o-h ) .dfs-ptl__body::before { display: none; }
}
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.dfs-ptl:not( .dfs-ptl--ot-h ) .dfs-ptl__comet,
	.dfs-ptl.dfs-ptl--sx-stems:not( .dfs-ptl--ot-h ) .dfs-ptl__body::before { display: none; }
}
@media ( max-width: 767px ) {
	.dfs-ptl__pool { width: 260px; height: 200px; }
	.dfs-ptl:not( .dfs-ptl--om-h ) .dfs-ptl__comet,
	.dfs-ptl.dfs-ptl--sx-stems:not( .dfs-ptl--om-h ) .dfs-ptl__body::before { display: none; }
}