/*
 * SIA Step Process — visual styles.
 *
 * Layout strategy (v4.1.1 — connector + responsive direction overhaul):
 *
 *   HORIZONTAL: CSS Grid on .sia-sp__list, columns = repeat(--sia-sp-cols, 1fr).
 *   Each step is a grid cell. The step is a CSS Container
 *   (`container-type: inline-size`) so descendants can query the step's
 *   computed width via `100cqw`. The connector lives INSIDE
 *   `.sia-sp__indicator` (positioned absolute); width = step_width -
 *   indicator_size + step_gap - 2 * connector_offset, computed via
 *   100cqw and CSS vars. That centers the line between two indicators
 *   regardless of how wide the column ends up.
 *
 *   VERTICAL (timeline): Flex column on each step (row direction:
 *   indicator on the left, body on the right). The connector inside the
 *   indicator extends downward; height bridges the gap to the next
 *   indicator. v4.1.4: step height is provided by JS via the
 *   `--sia-sp-step-h` CSS variable (ResizeObserver on each step) instead
 *   of `container-type: size` + 100cqh — the latter forced the step's
 *   intrinsic height to 0 (size containers don't use content sizing),
 *   collapsing every step on top of each other.
 *
 *   RESPONSIVE direction: per-device classes emitted by template — see
 *   the .sia-sp--dir-{d,t,m}-{horizontal,vertical} rules below scoped to
 *   @media breakpoints (default tablet 768-1024, mobile ≤767).
 *
 * Colors: defaults come from theme/Elementor chain via --sia-color-*
 * (defined in sia-base.css). Hex fallbacks inline.
 */

/* ───────── Root + shared ───────── */

.sia-sp {
	--sia-sp-cols: 4;
	--sia-sp-step-gap: 24px;
	--sia-sp-indicator-size: 88px;
	--sia-sp-connector-offset: 12px;
	color: var(--sia-color-text, #1A1718);
}

.sia-sp__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sia-sp-step-gap);
}

.sia-sp__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	min-width: 0;
	/* v4.1.5: NO container-type on the step itself. Was `inline-size`
	   here, but on a flex item in vertical mode (`flex-direction: row,
	   align-items: stretch`) the containment interfered with cross-axis
	   sizing — step height ended up clamped near the indicator height
	   (88px) instead of growing to the body's natural height, so body
	   text from each step overflowed into the next step. Containment is
	   now placed on `.sia-sp__indicator-wrap` only on horizontal mode
	   (where indicator-wrap is `width: 100%` and the connector inside
	   the indicator queries it via `100cqw`). On vertical mode the
	   connector uses `--sia-sp-step-h` (JS-measured) so no container
	   query is needed. */
}

.sia-sp__indicator-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	margin-bottom: 16px;
}

.sia-sp__indicator {
	width: var(--sia-sp-indicator-size, 88px);
	height: var(--sia-sp-indicator-size, 88px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--sia-color-secondary, #54595F);
	color: #fff;
	position: relative;
	flex-shrink: 0;
	transition: transform .25s ease, background-color .25s ease;
}

.sia-sp__indicator-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 36px;
	color: inherit;
}

.sia-sp__indicator-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.sia-sp__indicator-number {
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	color: inherit;
	font-family: inherit;
}

/* "Step N" badge above */
.sia-sp__step-label {
	display: inline-block;
	background-color: var(--sia-color-primary, #6EC1E4);
	color: #fff;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	margin-bottom: 8px;
}

/* Corner number on the indicator */
.sia-sp__corner-number {
	position: absolute;
	top: -6px;
	left: -6px;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--sia-color-text, #1A1718);
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	z-index: 2;
}

.sia-sp__title {
	margin: 0 0 8px;
	color: var(--sia-color-text, #1A1718);
	font-weight: 700;
	line-height: 1.3;
}

.sia-sp__content {
	margin: 0;
	color: var(--sia-color-text, #1A1718);
	opacity: 0.85;
	line-height: 1.5;
	font-size: 14px;
}

/* ───────── Connector line (v4.1.1 — container-query based) ───────── */

/* HORIZONTAL connector — extends to the right of the indicator across
   the gap to the next indicator. The math:
     - 100% (this element's containing block = indicator) = indicator_size
     - 100cqw (nearest container = step) = step_width = column_width
     - Distance between adjacent indicator centers = column_width + step_gap
     - Distance between adjacent indicator EDGES = column_width + step_gap - indicator_size
     - Subtract 2 * connector_offset for the gap on each side
   So `width = 100cqw - indicator_size + step_gap - 2 * connector_offset`.
   `left: calc(100% + offset)` starts the line at indicator_right + offset.
*/
.sia-sp__connector {
	position: absolute;
	border: 0 solid var(--sia-color-secondary, #54595F);
	/* v4.43.0: the line used to be forced to `opacity: .4`, so the colour
	   picked in the panel never appeared as chosen — it was always washed out
	   and there was no way to switch that off. The colour is now shown exactly
	   as set; use an alpha value in the colour picker for a faded line. */
	pointer-events: none;
}

/* When the rule sets we apply below say "horizontal", they mean this
   STEP is horizontally laid out at the current breakpoint — see the
   responsive blocks at the bottom of this file for which classes
   activate when. */
.sia-sp--has-connect .sia-sp__connector { display: block; }

/* Direction-specific connector geometry — applied through a single set
   of utility classes (.sia-sp__step--h, .sia-sp__step--v) added by the
   responsive @media blocks. */

.sia-sp__step--h .sia-sp__connector {
	top: 50%;
	transform: translateY(-50%);
	left: calc(100% + var(--sia-sp-connector-offset, 12px));
	width: calc(100cqw - var(--sia-sp-indicator-size, 88px) + var(--sia-sp-step-gap, 24px) - 2 * var(--sia-sp-connector-offset, 12px));
	height: var(--sp-line-t, 0);
	border-top-width: var(--sp-line-bw, var(--sia-sp-connector-w, 2px));
}

.sia-sp__step--v .sia-sp__connector {
	left: 50%;
	transform: translateX(-50%);
	top: calc(100% + var(--sia-sp-connector-offset, 12px));
	width: var(--sp-line-t, 0);
	/* In vertical mode we want the connector to bridge the full step
	   height (body included) plus the row gap, minus the offsets. The
	   step height is provided by the JS measurement (--sia-sp-step-h)
	   set via ResizeObserver — see step-process.js. Fallback `200px`
	   used until first measurement lands. */
	height: calc(var(--sia-sp-step-h, 200px) - var(--sia-sp-indicator-size, 88px) + var(--sia-sp-step-gap, 24px) - 2 * var(--sia-sp-connector-offset, 12px));
	border-left-width: var(--sp-line-bw, var(--sia-sp-connector-w, 2px));
}

/* Connector line styles (solid / dashed / dotted) — applied uniformly
   regardless of direction; the engagement axis is picked by the
   --step direction-utility class above. */
.sia-sp--connect-solid  .sia-sp__connector { border-top-style: solid;  border-left-style: solid; }
.sia-sp--connect-dashed .sia-sp__connector { border-top-style: dashed; border-left-style: dashed; }
.sia-sp--connect-dotted .sia-sp__connector { border-top-style: dotted; border-left-style: dotted; }

/* ───────── Responsive direction (v4.1.1) ───────── */

/* Per-device direction classes set on the root by template:
   `.sia-sp--dir-d-{horizontal|vertical}` desktop ≥1025
   `.sia-sp--dir-t-{horizontal|vertical}` tablet 768-1024
   `.sia-sp--dir-m-{horizontal|vertical}` mobile ≤767
   At each breakpoint we toggle the step's layout AND apply the right
   connector utility class (--h / --v) inside the same @media. */

/* === DESKTOP ≥ 1025 === */
@media (min-width: 1025px) {
	.sia-sp.sia-sp--dir-d-horizontal .sia-sp__list   { grid-template-columns: repeat(var(--sia-sp-cols, 4), minmax(0, 1fr)); }
	.sia-sp.sia-sp--dir-d-horizontal .sia-sp__step   { flex-direction: column; align-items: center; text-align: center; }
	.sia-sp.sia-sp--dir-d-horizontal .sia-sp__indicator-wrap { margin-bottom: 16px; margin-right: 0; width: 100%; container-type: inline-size; }
	.sia-sp.sia-sp--dir-d-horizontal .sia-sp__body   { padding-bottom: 0; }

	.sia-sp.sia-sp--dir-d-vertical .sia-sp__list     { grid-template-columns: 1fr; }
	.sia-sp.sia-sp--dir-d-vertical .sia-sp__step     { flex-direction: row; align-items: stretch; text-align: left; }
	.sia-sp.sia-sp--dir-d-vertical .sia-sp__indicator-wrap { margin-bottom: 0; margin-right: 16px; flex-shrink: 0; }
	.sia-sp.sia-sp--dir-d-vertical .sia-sp__body     { flex: 1 1 auto; min-width: 0; padding-bottom: var(--sia-sp-step-gap); }
	.sia-sp.sia-sp--dir-d-vertical .sia-sp__step:last-child .sia-sp__body { padding-bottom: 0; }

	/* Connector direction utility: applied via these CSS-only selectors
	   instead of an extra class because we want it to match the device's
	   direction class for the breakpoint. */
	.sia-sp.sia-sp--dir-d-horizontal .sia-sp__connector { top: 50%; transform: translateY(-50%); left: calc(100% + var(--sia-sp-connector-offset, 12px)); width: calc(100cqw - var(--sia-sp-indicator-size, 88px) + var(--sia-sp-step-gap, 24px) - 2 * var(--sia-sp-connector-offset, 12px)); height: var(--sp-line-t, 0); border-top-width: var(--sp-line-bw, var(--sia-sp-connector-w, 2px)); border-left-width: 0; }
	.sia-sp.sia-sp--dir-d-vertical   .sia-sp__connector { left: 50%; transform: translateX(-50%); top: calc(100% + var(--sia-sp-connector-offset, 12px)); height: calc(var(--sia-sp-step-h, 200px) - var(--sia-sp-indicator-size, 88px) + var(--sia-sp-step-gap, 24px) - 2 * var(--sia-sp-connector-offset, 12px)); width: var(--sp-line-t, 0); border-left-width: var(--sp-line-bw, var(--sia-sp-connector-w, 2px)); border-top-width: 0; }
}

/* === TABLET 768-1024 === */
@media (min-width: 768px) and (max-width: 1024px) {
	.sia-sp.sia-sp--dir-t-horizontal .sia-sp__list   { grid-template-columns: repeat(var(--sia-sp-cols-tablet, var(--sia-sp-cols, 2)), minmax(0, 1fr)); }
	.sia-sp.sia-sp--dir-t-horizontal .sia-sp__step   { flex-direction: column; align-items: center; text-align: center; }
	.sia-sp.sia-sp--dir-t-horizontal .sia-sp__indicator-wrap { margin-bottom: 16px; margin-right: 0; width: 100%; container-type: inline-size; }
	.sia-sp.sia-sp--dir-t-horizontal .sia-sp__body   { padding-bottom: 0; }

	.sia-sp.sia-sp--dir-t-vertical .sia-sp__list     { grid-template-columns: 1fr; }
	.sia-sp.sia-sp--dir-t-vertical .sia-sp__step     { flex-direction: row; align-items: stretch; text-align: left; }
	.sia-sp.sia-sp--dir-t-vertical .sia-sp__indicator-wrap { margin-bottom: 0; margin-right: 16px; flex-shrink: 0; }
	.sia-sp.sia-sp--dir-t-vertical .sia-sp__body     { flex: 1 1 auto; min-width: 0; padding-bottom: var(--sia-sp-step-gap); }
	.sia-sp.sia-sp--dir-t-vertical .sia-sp__step:last-child .sia-sp__body { padding-bottom: 0; }

	.sia-sp.sia-sp--dir-t-horizontal .sia-sp__connector { top: 50%; transform: translateY(-50%); left: calc(100% + var(--sia-sp-connector-offset, 12px)); width: calc(100cqw - var(--sia-sp-indicator-size, 88px) + var(--sia-sp-step-gap, 24px) - 2 * var(--sia-sp-connector-offset, 12px)); height: var(--sp-line-t, 0); border-top-width: var(--sp-line-bw, var(--sia-sp-connector-w, 2px)); border-left-width: 0; }
	.sia-sp.sia-sp--dir-t-vertical   .sia-sp__connector { left: 50%; transform: translateX(-50%); top: calc(100% + var(--sia-sp-connector-offset, 12px)); height: calc(var(--sia-sp-step-h, 200px) - var(--sia-sp-indicator-size, 88px) + var(--sia-sp-step-gap, 24px) - 2 * var(--sia-sp-connector-offset, 12px)); width: var(--sp-line-t, 0); border-left-width: var(--sp-line-bw, var(--sia-sp-connector-w, 2px)); border-top-width: 0; }
}

/* === MOBILE ≤ 767 === */
@media (max-width: 767px) {
	.sia-sp.sia-sp--dir-m-horizontal .sia-sp__list   { grid-template-columns: repeat(var(--sia-sp-cols-mobile, var(--sia-sp-cols, 1)), minmax(0, 1fr)); }
	.sia-sp.sia-sp--dir-m-horizontal .sia-sp__step   { flex-direction: column; align-items: center; text-align: center; }
	.sia-sp.sia-sp--dir-m-horizontal .sia-sp__indicator-wrap { margin-bottom: 16px; margin-right: 0; width: 100%; container-type: inline-size; }
	.sia-sp.sia-sp--dir-m-horizontal .sia-sp__body   { padding-bottom: 0; }

	.sia-sp.sia-sp--dir-m-vertical .sia-sp__list     { grid-template-columns: 1fr; }
	.sia-sp.sia-sp--dir-m-vertical .sia-sp__step     { flex-direction: row; align-items: stretch; text-align: left; }
	.sia-sp.sia-sp--dir-m-vertical .sia-sp__indicator-wrap { margin-bottom: 0; margin-right: 16px; flex-shrink: 0; }
	.sia-sp.sia-sp--dir-m-vertical .sia-sp__body     { flex: 1 1 auto; min-width: 0; padding-bottom: var(--sia-sp-step-gap); }
	.sia-sp.sia-sp--dir-m-vertical .sia-sp__step:last-child .sia-sp__body { padding-bottom: 0; }

	.sia-sp.sia-sp--dir-m-horizontal .sia-sp__connector { top: 50%; transform: translateY(-50%); left: calc(100% + var(--sia-sp-connector-offset, 12px)); width: calc(100cqw - var(--sia-sp-indicator-size, 88px) + var(--sia-sp-step-gap, 24px) - 2 * var(--sia-sp-connector-offset, 12px)); height: var(--sp-line-t, 0); border-top-width: var(--sp-line-bw, var(--sia-sp-connector-w, 2px)); border-left-width: 0; }
	.sia-sp.sia-sp--dir-m-vertical   .sia-sp__connector { left: 50%; transform: translateX(-50%); top: calc(100% + var(--sia-sp-connector-offset, 12px)); height: calc(var(--sia-sp-step-h, 200px) - var(--sia-sp-indicator-size, 88px) + var(--sia-sp-step-gap, 24px) - 2 * var(--sia-sp-connector-offset, 12px)); width: var(--sp-line-t, 0); border-left-width: var(--sp-line-bw, var(--sia-sp-connector-w, 2px)); border-top-width: 0; }
}

/* Fallback for browsers without container queries (Chrome <105, Firefox
   <110, Safari <16). The connector still renders — just with a fixed
   approximate width based on the indicator size + step gap, so it
   reaches into the gap but doesn't span the full visual center.
   Acceptable degradation: line shorter than ideal, still readable. */
@supports not (container-type: inline-size) {
	.sia-sp__connector {
		width:  calc(var(--sia-sp-step-gap, 24px) + 80px) !important;
		height: calc(var(--sia-sp-step-gap, 24px) + 80px) !important;
	}
	/* Force a sensible direction for each axis even without cqw. */
	.sia-sp[class*="sia-sp--dir-"][class*="-horizontal"] .sia-sp__connector { height: 0 !important; border-top-width: var(--sia-sp-connector-w, 2px); border-left-width: 0; }
	.sia-sp[class*="sia-sp--dir-"][class*="-vertical"]   .sia-sp__connector { width: 0  !important; border-left-width: var(--sia-sp-connector-w, 2px); border-top-width: 0; }
}

/* ───────── Scroll-reveal animation ───────── */

.sia-sp.sia-sp--animate .sia-sp__step {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .55s ease, transform .55s ease;
	transition-delay: calc(var(--sia-sp-step-index, 0) * var(--sia-sp-stagger, 120ms));
}

.sia-sp.sia-sp--animate .sia-sp__step.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Connector reveal: starts at 0 length, grows when the step becomes
   visible. The positioning transform (translateY -50% for horizontal,
   translateX -50% for vertical) must be preserved, so we scope the
   reveal rules per direction inside each @media block — that way the
   `transform` value at any given breakpoint is the right one for the
   current layout. */
.sia-sp.sia-sp--animate.sia-sp--has-connect .sia-sp__connector {
	transition: transform .5s ease;
	transition-delay: calc(var(--sia-sp-step-index, 0) * var(--sia-sp-stagger, 120ms) + 0.2s);
}

@media (min-width: 1025px) {
	.sia-sp.sia-sp--animate.sia-sp--has-connect.sia-sp--dir-d-horizontal .sia-sp__connector { transform-origin: left center; }
	.sia-sp.sia-sp--animate.sia-sp--has-connect.sia-sp--dir-d-horizontal .sia-sp__step:not(.is-visible) .sia-sp__connector { transform: translateY(-50%) scaleX(0); }
	.sia-sp.sia-sp--animate.sia-sp--has-connect.sia-sp--dir-d-vertical   .sia-sp__connector { transform-origin: center top; }
	.sia-sp.sia-sp--animate.sia-sp--has-connect.sia-sp--dir-d-vertical   .sia-sp__step:not(.is-visible) .sia-sp__connector { transform: translateX(-50%) scaleY(0); }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.sia-sp.sia-sp--animate.sia-sp--has-connect.sia-sp--dir-t-horizontal .sia-sp__connector { transform-origin: left center; }
	.sia-sp.sia-sp--animate.sia-sp--has-connect.sia-sp--dir-t-horizontal .sia-sp__step:not(.is-visible) .sia-sp__connector { transform: translateY(-50%) scaleX(0); }
	.sia-sp.sia-sp--animate.sia-sp--has-connect.sia-sp--dir-t-vertical   .sia-sp__connector { transform-origin: center top; }
	.sia-sp.sia-sp--animate.sia-sp--has-connect.sia-sp--dir-t-vertical   .sia-sp__step:not(.is-visible) .sia-sp__connector { transform: translateX(-50%) scaleY(0); }
}
@media (max-width: 767px) {
	.sia-sp.sia-sp--animate.sia-sp--has-connect.sia-sp--dir-m-horizontal .sia-sp__connector { transform-origin: left center; }
	.sia-sp.sia-sp--animate.sia-sp--has-connect.sia-sp--dir-m-horizontal .sia-sp__step:not(.is-visible) .sia-sp__connector { transform: translateY(-50%) scaleX(0); }
	.sia-sp.sia-sp--animate.sia-sp--has-connect.sia-sp--dir-m-vertical   .sia-sp__connector { transform-origin: center top; }
	.sia-sp.sia-sp--animate.sia-sp--has-connect.sia-sp--dir-m-vertical   .sia-sp__step:not(.is-visible) .sia-sp__connector { transform: translateX(-50%) scaleY(0); }
}

/* Reduced motion: render fully visible at all times, no transitions. */
@media (prefers-reduced-motion: reduce) {
	.sia-sp.sia-sp--animate .sia-sp__step,
	.sia-sp.sia-sp--animate .sia-sp__connector {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ───────── Accent gradient (v4.44.0) ─────────
   ONE gradient spanning the whole row: it starts at step 1 and finishes at the
   last step, so every indicator and every connector segment shows the slice of
   that single sweep sitting at its own position. Each circle is NOT given its
   own 0→100% gradient — that is what made them all come out looking identical.

   How the slice is taken: each element paints the gradient at the size of the
   FULL row (`--sp-row`) and then scrolls it left by its own distance from the
   row's start, via a negative `background-position`. Both quantities are
   computable in plain CSS because the steps are equal grid columns:

     row        = n * stepWidth + (n - 1) * gap
     indicator  = i * (stepWidth + gap) + (stepWidth - indicatorSize) / 2
     connector  = i * (stepWidth + gap) + (stepWidth + indicatorSize) / 2 + offset

   `stepWidth` is `100cqw` (the step's indicator-wrap is an inline-size
   container in horizontal mode) and `--sp-i` / `--sp-n` are emitted per step
   and on the root by the template.

   Scoped to HORIZONTAL only: a row-spanning sweep is meaningless once the steps
   stack, and `100cqw` is not available there. Vertical mode keeps the
   per-element gradient defined in the first block below.

   Each target needs its own technique — a border cannot hold a gradient, text
   needs background-clip, a line needs a real background — which is why these
   are separate classes rather than one shared property. */

/* ── Connector: a background strip instead of a border ──
   These two variables flip the geometry set by the per-device rules: border
   width to 0, cross-axis size to the chosen thickness. */
.sia-sp--grad-connector {
	--sp-line-bw: 0;
	--sp-line-t: var(--sia-sp-connector-w, 2px);
}
/* The gradient is painted on a PSEUDO-ELEMENT, not on the connector itself.
   Elementor's background lazy-load emits
     `.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded) * { background-image: none !important }`
   — that trailing `*` strips the background off every descendant of any
   container that hasn't scrolled into view yet, and no specificity we can
   reasonably write beats an `!important` at (0,5,0). `*` does not match
   pseudo-elements, so painting there side-steps it entirely and the line is
   visible immediately instead of only after the container is revealed. */
.sia-sp--grad-connector .sia-sp__connector {
	/* Fully opaque. The old hardcoded 0.4 fade is gone (v4.43.0) — use an alpha
	   value in the gradient's colour pickers if a translucent line is wanted. */
	opacity: 1;
}
.sia-sp--grad-connector .sia-sp__connector::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--sp-grad);
	background-repeat: no-repeat;
}

/* ── Indicator ring: the two-background trick ──
   The flat inner layer is painted to the padding box and is what shows inside
   the ring; the gradient is painted to the border box, so it appears only in
   the border band. */
.sia-sp--grad-ring .sia-sp__indicator {
	border: var(--sp-grad-ring-w, 2px) solid transparent;
	background-image: linear-gradient(var(--sp-ring-inner, #fff), var(--sp-ring-inner, #fff)), var(--sp-grad);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background-color: transparent;
	background-repeat: no-repeat;
	box-sizing: border-box;
}

/* ── Indicator background: fill the circle ── */
.sia-sp--grad-fill .sia-sp__indicator {
	background-image: var(--sp-grad);
	background-color: transparent;
	background-repeat: no-repeat;
}
.sia-sp--grad-fill.sia-sp--grad-ring .sia-sp__indicator {
	background-image: var(--sp-grad), var(--sp-grad);
	background-clip: padding-box, border-box;
}

/* ── Indicator number / icon ── */
.sia-sp--grad-ind .sia-sp__indicator-number,
.sia-sp--grad-ind .sia-sp__indicator-icon {
	background-image: var(--sp-grad);
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}
.sia-sp--grad-ind .sia-sp__indicator-icon svg { fill: currentColor; }
/* A gradient glyph on a gradient fill is unreadable, so the filled variant
   opts the glyph back out to a solid colour. */
.sia-sp--grad-fill.sia-sp--grad-ind .sia-sp__indicator-number,
.sia-sp--grad-fill.sia-sp--grad-ind .sia-sp__indicator-icon {
	background-image: none;
	color: #fff;
}

/* ── Title ── */
.sia-sp--grad-title .sia-sp__title {
	background-image: var(--sp-grad);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}

/* ───── Row-spanning geometry, per breakpoint ─────
   Repeated once per device because it depends on that breakpoint's direction
   class — the sweep only spans a row while the steps are actually in a row. */

@media (min-width: 1025px) {
	.sia-sp--dir-d-horizontal.sia-sp--grad-ring .sia-sp__indicator,
	.sia-sp--dir-d-horizontal.sia-sp--grad-fill .sia-sp__indicator,
	.sia-sp--dir-d-horizontal.sia-sp--grad-ind .sia-sp__indicator-number,
	.sia-sp--dir-d-horizontal.sia-sp--grad-ind .sia-sp__indicator-icon {
		background-size: calc(100cqw * var(--sp-n, 1) + var(--sia-sp-step-gap, 24px) * (var(--sp-n, 1) - 1)) 100%;
		background-position: calc(-1 * ((100cqw + var(--sia-sp-step-gap, 24px)) * var(--sp-i, 0) + (100cqw - var(--sia-sp-indicator-size, 88px)) / 2)) 0;
	}
	.sia-sp--dir-d-horizontal.sia-sp--grad-ring.sia-sp--grad-fill .sia-sp__indicator {
		background-size: calc(100cqw * var(--sp-n, 1) + var(--sia-sp-step-gap, 24px) * (var(--sp-n, 1) - 1)) 100%, calc(100cqw * var(--sp-n, 1) + var(--sia-sp-step-gap, 24px) * (var(--sp-n, 1) - 1)) 100%;
		background-position: calc(-1 * ((100cqw + var(--sia-sp-step-gap, 24px)) * var(--sp-i, 0) + (100cqw - var(--sia-sp-indicator-size, 88px)) / 2)) 0, calc(-1 * ((100cqw + var(--sia-sp-step-gap, 24px)) * var(--sp-i, 0) + (100cqw - var(--sia-sp-indicator-size, 88px)) / 2)) 0;
	}
	.sia-sp--dir-d-horizontal.sia-sp--grad-connector .sia-sp__connector::before {
		background-size: calc(100cqw * var(--sp-n, 1) + var(--sia-sp-step-gap, 24px) * (var(--sp-n, 1) - 1)) 100%;
		background-position: calc(-1 * ((100cqw + var(--sia-sp-step-gap, 24px)) * var(--sp-i, 0) + (100cqw + var(--sia-sp-indicator-size, 88px)) / 2 + var(--sia-sp-connector-offset, 12px))) 0;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.sia-sp--dir-t-horizontal.sia-sp--grad-ring .sia-sp__indicator,
	.sia-sp--dir-t-horizontal.sia-sp--grad-fill .sia-sp__indicator,
	.sia-sp--dir-t-horizontal.sia-sp--grad-ind .sia-sp__indicator-number,
	.sia-sp--dir-t-horizontal.sia-sp--grad-ind .sia-sp__indicator-icon {
		background-size: calc(100cqw * var(--sp-n, 1) + var(--sia-sp-step-gap, 24px) * (var(--sp-n, 1) - 1)) 100%;
		background-position: calc(-1 * ((100cqw + var(--sia-sp-step-gap, 24px)) * var(--sp-i, 0) + (100cqw - var(--sia-sp-indicator-size, 88px)) / 2)) 0;
	}
	.sia-sp--dir-t-horizontal.sia-sp--grad-ring.sia-sp--grad-fill .sia-sp__indicator {
		background-size: calc(100cqw * var(--sp-n, 1) + var(--sia-sp-step-gap, 24px) * (var(--sp-n, 1) - 1)) 100%, calc(100cqw * var(--sp-n, 1) + var(--sia-sp-step-gap, 24px) * (var(--sp-n, 1) - 1)) 100%;
		background-position: calc(-1 * ((100cqw + var(--sia-sp-step-gap, 24px)) * var(--sp-i, 0) + (100cqw - var(--sia-sp-indicator-size, 88px)) / 2)) 0, calc(-1 * ((100cqw + var(--sia-sp-step-gap, 24px)) * var(--sp-i, 0) + (100cqw - var(--sia-sp-indicator-size, 88px)) / 2)) 0;
	}
	.sia-sp--dir-t-horizontal.sia-sp--grad-connector .sia-sp__connector::before {
		background-size: calc(100cqw * var(--sp-n, 1) + var(--sia-sp-step-gap, 24px) * (var(--sp-n, 1) - 1)) 100%;
		background-position: calc(-1 * ((100cqw + var(--sia-sp-step-gap, 24px)) * var(--sp-i, 0) + (100cqw + var(--sia-sp-indicator-size, 88px)) / 2 + var(--sia-sp-connector-offset, 12px))) 0;
	}
}

@media (max-width: 767px) {
	.sia-sp--dir-m-horizontal.sia-sp--grad-ring .sia-sp__indicator,
	.sia-sp--dir-m-horizontal.sia-sp--grad-fill .sia-sp__indicator,
	.sia-sp--dir-m-horizontal.sia-sp--grad-ind .sia-sp__indicator-number,
	.sia-sp--dir-m-horizontal.sia-sp--grad-ind .sia-sp__indicator-icon {
		background-size: calc(100cqw * var(--sp-n, 1) + var(--sia-sp-step-gap, 24px) * (var(--sp-n, 1) - 1)) 100%;
		background-position: calc(-1 * ((100cqw + var(--sia-sp-step-gap, 24px)) * var(--sp-i, 0) + (100cqw - var(--sia-sp-indicator-size, 88px)) / 2)) 0;
	}
	.sia-sp--dir-m-horizontal.sia-sp--grad-ring.sia-sp--grad-fill .sia-sp__indicator {
		background-size: calc(100cqw * var(--sp-n, 1) + var(--sia-sp-step-gap, 24px) * (var(--sp-n, 1) - 1)) 100%, calc(100cqw * var(--sp-n, 1) + var(--sia-sp-step-gap, 24px) * (var(--sp-n, 1) - 1)) 100%;
		background-position: calc(-1 * ((100cqw + var(--sia-sp-step-gap, 24px)) * var(--sp-i, 0) + (100cqw - var(--sia-sp-indicator-size, 88px)) / 2)) 0, calc(-1 * ((100cqw + var(--sia-sp-step-gap, 24px)) * var(--sp-i, 0) + (100cqw - var(--sia-sp-indicator-size, 88px)) / 2)) 0;
	}
	.sia-sp--dir-m-horizontal.sia-sp--grad-connector .sia-sp__connector::before {
		background-size: calc(100cqw * var(--sp-n, 1) + var(--sia-sp-step-gap, 24px) * (var(--sp-n, 1) - 1)) 100%;
		background-position: calc(-1 * ((100cqw + var(--sia-sp-step-gap, 24px)) * var(--sp-i, 0) + (100cqw + var(--sia-sp-indicator-size, 88px)) / 2 + var(--sia-sp-connector-offset, 12px))) 0;
	}
}

/* `background-clip: text` is unsupported on very old engines, where the text
   would render fully transparent — invisible. Give those the plain colour. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.sia-sp--grad-ind .sia-sp__indicator-number,
	.sia-sp--grad-ind .sia-sp__indicator-icon,
	.sia-sp--grad-title .sia-sp__title {
		background-image: none;
		color: var(--sia-color-text, #1A1718);
	}
}

/* ───── Vertical breakpoints: the sweep turns a quarter turn, and still runs
   end to end ─────
   The colours switch to `--sp-grad-v` (the same pair at angle + 90, composed in
   render()), because a left-to-right gradient reads as an accident once the
   steps stack into a column.

   The sweep spans the WHOLE column, exactly as it spans the whole row
   horizontally: each element paints the gradient at the full list height and
   scrolls it up by its own distance from the top, so it shows only its slice.

   Horizontal can compute that offset in pure CSS — equal grid columns, so it's
   `index × columnWidth` in container-query units. Vertical can't: step heights
   follow their content, so nothing in CSS knows where step 3 begins. The two
   missing numbers come from the measurement pass that already runs for the
   connector height — `--sp-total-h` on the root and `--sp-offset-y` per step
   (see step-process.js). Without JS both fall back to `100%` / `0`, which is
   the old per-element gradient: degraded, never broken. */

@media (min-width: 1025px) {
	.sia-sp--dir-d-vertical.sia-sp--grad-connector .sia-sp__connector::before {
		background-image: var(--sp-grad-v);
		background-size: 100% var(--sp-total-h, 100%);
		background-position: 0 calc(-1 * (var(--sp-offset-y, 0px) + var(--sia-sp-indicator-size, 88px) + var(--sia-sp-connector-offset, 12px)));
	}
	.sia-sp--dir-d-vertical.sia-sp--grad-ring .sia-sp__indicator {
		background-image: linear-gradient(var(--sp-ring-inner, #fff), var(--sp-ring-inner, #fff)), var(--sp-grad-v);
		background-size: auto, 100% var(--sp-total-h, 100%);
		background-position: 0 0, 0 calc(-1 * var(--sp-offset-y, 0px));
	}
	.sia-sp--dir-d-vertical.sia-sp--grad-fill .sia-sp__indicator {
		background-image: var(--sp-grad-v);
		background-size: 100% var(--sp-total-h, 100%);
		background-position: 0 calc(-1 * var(--sp-offset-y, 0px));
	}
	.sia-sp--dir-d-vertical.sia-sp--grad-fill.sia-sp--grad-ring .sia-sp__indicator {
		background-image: var(--sp-grad-v), var(--sp-grad-v);
		background-size: 100% var(--sp-total-h, 100%), 100% var(--sp-total-h, 100%);
		background-position: 0 calc(-1 * var(--sp-offset-y, 0px)), 0 calc(-1 * var(--sp-offset-y, 0px));
	}
	.sia-sp--dir-d-vertical.sia-sp--grad-ind .sia-sp__indicator-number,
	.sia-sp--dir-d-vertical.sia-sp--grad-ind .sia-sp__indicator-icon {
		background-image: var(--sp-grad-v);
		background-size: 100% var(--sp-total-h, 100%);
		background-position: 0 calc(-1 * var(--sp-offset-y, 0px));
	}
	.sia-sp--dir-d-vertical.sia-sp--grad-title .sia-sp__title { background-image: var(--sp-grad-v); }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.sia-sp--dir-t-vertical.sia-sp--grad-connector .sia-sp__connector::before {
		background-image: var(--sp-grad-v);
		background-size: 100% var(--sp-total-h, 100%);
		background-position: 0 calc(-1 * (var(--sp-offset-y, 0px) + var(--sia-sp-indicator-size, 88px) + var(--sia-sp-connector-offset, 12px)));
	}
	.sia-sp--dir-t-vertical.sia-sp--grad-ring .sia-sp__indicator {
		background-image: linear-gradient(var(--sp-ring-inner, #fff), var(--sp-ring-inner, #fff)), var(--sp-grad-v);
		background-size: auto, 100% var(--sp-total-h, 100%);
		background-position: 0 0, 0 calc(-1 * var(--sp-offset-y, 0px));
	}
	.sia-sp--dir-t-vertical.sia-sp--grad-fill .sia-sp__indicator {
		background-image: var(--sp-grad-v);
		background-size: 100% var(--sp-total-h, 100%);
		background-position: 0 calc(-1 * var(--sp-offset-y, 0px));
	}
	.sia-sp--dir-t-vertical.sia-sp--grad-fill.sia-sp--grad-ring .sia-sp__indicator {
		background-image: var(--sp-grad-v), var(--sp-grad-v);
		background-size: 100% var(--sp-total-h, 100%), 100% var(--sp-total-h, 100%);
		background-position: 0 calc(-1 * var(--sp-offset-y, 0px)), 0 calc(-1 * var(--sp-offset-y, 0px));
	}
	.sia-sp--dir-t-vertical.sia-sp--grad-ind .sia-sp__indicator-number,
	.sia-sp--dir-t-vertical.sia-sp--grad-ind .sia-sp__indicator-icon {
		background-image: var(--sp-grad-v);
		background-size: 100% var(--sp-total-h, 100%);
		background-position: 0 calc(-1 * var(--sp-offset-y, 0px));
	}
	.sia-sp--dir-t-vertical.sia-sp--grad-title .sia-sp__title { background-image: var(--sp-grad-v); }
}

@media (max-width: 767px) {
	.sia-sp--dir-m-vertical.sia-sp--grad-connector .sia-sp__connector::before {
		background-image: var(--sp-grad-v);
		background-size: 100% var(--sp-total-h, 100%);
		background-position: 0 calc(-1 * (var(--sp-offset-y, 0px) + var(--sia-sp-indicator-size, 88px) + var(--sia-sp-connector-offset, 12px)));
	}
	.sia-sp--dir-m-vertical.sia-sp--grad-ring .sia-sp__indicator {
		background-image: linear-gradient(var(--sp-ring-inner, #fff), var(--sp-ring-inner, #fff)), var(--sp-grad-v);
		background-size: auto, 100% var(--sp-total-h, 100%);
		background-position: 0 0, 0 calc(-1 * var(--sp-offset-y, 0px));
	}
	.sia-sp--dir-m-vertical.sia-sp--grad-fill .sia-sp__indicator {
		background-image: var(--sp-grad-v);
		background-size: 100% var(--sp-total-h, 100%);
		background-position: 0 calc(-1 * var(--sp-offset-y, 0px));
	}
	.sia-sp--dir-m-vertical.sia-sp--grad-fill.sia-sp--grad-ring .sia-sp__indicator {
		background-image: var(--sp-grad-v), var(--sp-grad-v);
		background-size: 100% var(--sp-total-h, 100%), 100% var(--sp-total-h, 100%);
		background-position: 0 calc(-1 * var(--sp-offset-y, 0px)), 0 calc(-1 * var(--sp-offset-y, 0px));
	}
	.sia-sp--dir-m-vertical.sia-sp--grad-ind .sia-sp__indicator-number,
	.sia-sp--dir-m-vertical.sia-sp--grad-ind .sia-sp__indicator-icon {
		background-image: var(--sp-grad-v);
		background-size: 100% var(--sp-total-h, 100%);
		background-position: 0 calc(-1 * var(--sp-offset-y, 0px));
	}
	.sia-sp--dir-m-vertical.sia-sp--grad-title .sia-sp__title { background-image: var(--sp-grad-v); }
}