/*
 * Shared styles for Prilinq Elementor widgets.
 * Built on the theme's CSS variables; fallbacks keep widgets usable
 * if the plugin runs with a different theme.
 */

.prilinq-widget {
	font-family: var(--prilinq-font-family, 'Heebo', sans-serif);
	color: var(--prilinq-text, inherit);
}

.prilinq-widget .prilinq-widget-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 26px;
	border-radius: var(--prilinq-radius-pill, 999px);
	background: var(--prilinq-accent, #00A3C4);
	color: #fff;
	text-decoration: none;
	transition: filter 0.2s ease;
}

.prilinq-widget .prilinq-widget-button:hover {
	filter: brightness(1.1);
}

/* Stat Counter */
.prilinq-stat-counter {
	text-align: center;
}

.prilinq-stat-number {
	font-size: 3rem;
	font-weight: 700;
	color: var(--prilinq-accent, #00A3C4);
	line-height: 1.1;
}

.prilinq-stat-label {
	color: var(--prilinq-text-primary, #1E293B);
	margin: 8px 0 4px;
}

.prilinq-stat-description {
	color: var(--prilinq-text-secondary, #64748B);
}

/* Badge Pill */
.prilinq-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--prilinq-badge-bg, color-mix(in srgb, var(--prilinq-badge-accent, var(--prilinq-accent, #00A3C4)) 10%, transparent));
	border: 1px solid var(--prilinq-badge-accent, var(--prilinq-accent, #00A3C4));
	color: var(--prilinq-badge-accent, var(--prilinq-accent, #00A3C4));
	font-size: 0.875rem;
	font-weight: 600;
}

.prilinq-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.prilinq-badge-dot.is-pulsing {
	animation: prilinq-pulse 1.8s ease-in-out infinite;
}

@keyframes prilinq-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .5; transform: scale(1.3); }
}

/* ===================================================================== *
 * Unify Scatter — pinned headline + scroll-linked floating cards.
 * The section is taller than the viewport; the stage sticks so the
 * headline stays centred while the extra scroll drives per-card motion.
 * ===================================================================== */
.prilinq-unify {
	--pu-section-h: 210vh;
	--pu-hshrink: 66;   /* headline shrinks to this % of its natural size */
	--pu-intensity: 1;  /* card spread magnitude */
	position: relative;
	min-height: var(--pu-section-h);
	width: 100%;
}

.prilinq-unify-stage {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh; /* iOS: track the visible viewport so the pin doesn't drift */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.prilinq-unify-headline-wrap {
	position: relative;
	z-index: 1;
	max-width: 620px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
	pointer-events: none;
	/* eyebrow + headline shrink together as one block. */
	transform: scale(var(--pu-hscale, 1));
	transform-origin: center center;
	will-change: transform;
}

.prilinq-unify-eyebrow {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--prilinq-primary, var(--prilinq-accent, #00A3C4));
	margin-bottom: 10px;
}

.prilinq-unify-headline {
	/* Natural (large) START size — override with the Typography control. The
	 * script scales the wrap DOWN from here toward --pu-hshrink, so glyphs are
	 * only ever downscaled (crisp), never upscaled. */
	font-size: clamp(34px, 6.5vw, 84px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.5px;
	color: var(--prilinq-secondary, var(--prilinq-text-primary, #1E293B));
	margin: 0;
}

/* Card field — its own stacking context so per-card z-index wins
 * regardless of DOM order. */
.prilinq-unify-cards {
	position: absolute;
	inset: 0;
	z-index: 2;
	isolation: isolate;
	pointer-events: none;
}

.prilinq-unify-card {
	--pu-w: 240px;
	--pu-rot: 0deg;
	--pu-ox: 0px;
	--pu-oy: 0px;
	--pu-tx: 0px;
	--pu-ty: 0px;
	--pu-z: 1;
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--pu-w);
	max-width: 80vw;
	z-index: var(--pu-z);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
	will-change: transform;
	transform:
		translate(-50%, -50%)
		translate(var(--pu-ox), var(--pu-oy))
		translate3d(var(--pu-tx), var(--pu-ty), 0)
		rotate(var(--pu-rot));
	pointer-events: auto;
}

/* Cards stay anchored on the stage centre; the script pushes each one out
 * toward its slot direction (data-slot) via --pu-tx/--pu-ty, so the same
 * transform drives the fly-in-from-outside → scatter → converge-to-centre
 * motion. No per-slot left/top anchors needed. */

.prilinq-unify-card-icon {
	display: inline-flex;
	font-size: 24px;
	color: var(--prilinq-accent, #00A3C4);
	line-height: 1;
}

.prilinq-unify-card-icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.prilinq-unify-card-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	object-fit: cover;
}

.prilinq-unify-card-title {
	font-weight: 700;
	font-size: 18px;
	color: var(--prilinq-text-primary, #1E293B);
}

.prilinq-unify-card-subtitle {
	font-size: 14px;
	color: var(--prilinq-text-secondary, #64748B);
}

/* converge & scatter modes start hidden; the script reveals cards on scroll. */
.prilinq-unify[data-motion="converge"] .prilinq-unify-card,
.prilinq-unify[data-motion="scatter"] .prilinq-unify-card {
	opacity: 0;
}

/* Elementor editor: no real scroll drives the effect, so force a static,
 * visible, scattered layout so every card can be seen and edited. Uses
 * !important so it wins even if the frontend script also runs in preview. */
.elementor-editor-active .prilinq-unify-card {
	opacity: 1 !important;
	--pu-tx: 0px !important;
	--pu-ty: 0px !important;
}
.elementor-editor-active .prilinq-unify-headline-wrap {
	transform: none !important;
}
.elementor-editor-active .prilinq-unify-card[data-slot="top-left"]      { left: 18%; top: 20%; }
.elementor-editor-active .prilinq-unify-card[data-slot="top-center"]    { left: 50%; top: 14%; }
.elementor-editor-active .prilinq-unify-card[data-slot="top-right"]     { left: 82%; top: 20%; }
.elementor-editor-active .prilinq-unify-card[data-slot="mid-left"]      { left: 15%; top: 50%; }
.elementor-editor-active .prilinq-unify-card[data-slot="mid-right"]     { left: 85%; top: 50%; }
.elementor-editor-active .prilinq-unify-card[data-slot="bottom-left"]   { left: 20%; top: 80%; }
.elementor-editor-active .prilinq-unify-card[data-slot="bottom-center"] { left: 50%; top: 86%; }
.elementor-editor-active .prilinq-unify-card[data-slot="bottom-right"]  { left: 80%; top: 80%; }

/* Mobile: SAME fly-in-from-outside → converge effect as desktop, sized for a
 * narrow screen. Cards are capped to a fraction of the viewport so they don't
 * overflow/overlap, the spread is boosted so they clearly enter from off-screen
 * and distribute, and the inner content is tightened. !important overrides the
 * per-widget fixed px widths / saved intensity without editing the page. */
@media (max-width: 767px) {
	.prilinq-unify {
		--pu-intensity: 0.9 !important; /* spread across the narrow screen */
	}
	.prilinq-unify-cards {
		transform: none;
	}
	.prilinq-unify-card {
		width: min(var(--pu-w, 240px), 42vw) !important;
		max-width: 42vw !important;
		padding: 12px !important;
		border-radius: 16px !important;
		gap: 4px !important;
		box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
	}
	.prilinq-unify-card-title {
		font-size: 14px;
		line-height: 1.2;
	}
	.prilinq-unify-card-subtitle {
		font-size: 11px;
		line-height: 1.3;
	}
	.prilinq-unify-card-icon {
		font-size: 18px;
	}
	.prilinq-unify-card-icon svg {
		width: 18px;
		height: 18px;
	}
	.prilinq-unify-card-img {
		border-radius: 10px;
	}
}

/* Respect reduced-motion: the script freezes cards at the scattered mid-state
 * (via inline styles) instead of animating; just drop will-change here. */
@media (prefers-reduced-motion: reduce) {
	.prilinq-unify-card {
		will-change: auto;
	}
	.prilinq-unify-headline-wrap {
		will-change: auto;
	}
}

/* ===================================================================== *
 * Action Reveal — pinned stage + scroll-linked staggered word reveal.
 * The section is taller than the viewport; the stage sticks so the word
 * list stays centred while the extra scroll drives each row's slide/scale/
 * fade reveal (a staggered "Add / Send / Exchange" word list). --par-* vars
 * are namespaced to avoid colliding with Unify Scatter's --pu-*.
 * ===================================================================== */
/* The widget's scroll runway FOLLOWS its Elementor container: the script reads
 * the container's Min Height and applies it to the widget root (minus the
 * container's vertical padding), so the CONTAINER — not the widget — drives the
 * length. --par-section-h is the fallback / safety minimum used when the
 * container defines no (or a shorter) height, so the effect always has a runway.
 * The pinned stage stays one screen tall (dvh) so the words remain centred. */
.prilinq-action-reveal {
	--par-section-h: 260vh;
	--par-rise: 55;            /* JS reads this (vh) — how far below the fold risers start */
	--par-mobile-scale: 0.8;
	--par-start: 50;           /* non-sticky: JS reads this (vh from top) as the reveal start line */
	position: relative;
	width: 100%;
}

/* STICKY mode: the widget is INDEPENDENT of the container — its own height
 * (--par-section-h, the "Sticky height" control) is the runway the stage pins
 * through. NON-STICKY takes its height from the container instead (set by JS). */
.prilinq-action-reveal[data-sticky="1"] {
	min-height: var(--par-section-h);
}

.prilinq-action-reveal-stage {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* STICKY mode (default): the stage is one screen tall and pins to the top, so
 * the words fill the viewport while you scroll through the container runway.
 * Scoped to sticky so it never forces full height in non-sticky mode (even if
 * the script hasn't run — e.g. inside the Elementor editor). */
.prilinq-action-reveal[data-sticky="1"] .prilinq-action-reveal-stage {
	height: 100vh;
	height: 100dvh;
}

/* NON-STICKY mode: no pin, and NOT forced to full height. The stage takes the
 * container's height (the script sets the exact px; auto = content height as a
 * fallback if the script hasn't run). */
.prilinq-action-reveal[data-sticky="0"] .prilinq-action-reveal-stage {
	position: static;
	height: auto;
}

.prilinq-action-reveal-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 0 24px;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

.prilinq-action-reveal-row {
	--par-op: 1;
	--par-ty: 0vh;
	display: inline-flex;
	align-items: center;
	gap: 22px;
	opacity: var(--par-op);
	transform: translateY(var(--par-ty));
	transform-origin: center center;
	will-change: transform, opacity;
}

/* Icon side — physical left/right, chosen via the "Icon position" control and
 * resolved against the page direction (data-rtl). Default (no attr) keeps the
 * icon on the left, matching the original layout. */
.prilinq-action-reveal[data-rtl="1"] .prilinq-action-reveal-row,
.prilinq-action-reveal[data-rtl="1"][data-icon-pos="left"] .prilinq-action-reveal-row,
.prilinq-action-reveal[data-rtl="0"][data-icon-pos="right"] .prilinq-action-reveal-row {
	flex-direction: row-reverse;
}
.prilinq-action-reveal[data-rtl="1"][data-icon-pos="right"] .prilinq-action-reveal-row,
.prilinq-action-reveal[data-rtl="0"][data-icon-pos="left"] .prilinq-action-reveal-row,
.prilinq-action-reveal[data-rtl="0"] .prilinq-action-reveal-row {
	flex-direction: row;
}

.prilinq-action-reveal-icon {
	--par-icon-box: 76px;
	--par-icon-size: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--par-icon-box);
	height: var(--par-icon-box);
	border-radius: 20px;
	font-size: var(--par-icon-size);
	line-height: 1;
	background: var(--prilinq-accent, #00A3C4);
	color: #fff;
}

.prilinq-action-reveal-icon svg {
	width: var(--par-icon-size);
	height: var(--par-icon-size);
	fill: currentColor;
}

.prilinq-action-reveal-word {
	font-size: clamp(40px, 9vw, 110px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -1px;
	color: var(--prilinq-text-primary, #1E293B);
}

/* Elementor editor: no real scroll drives the effect, so force every row
 * fully revealed so it can be seen and edited. */
.elementor-editor-active .prilinq-action-reveal-row {
	opacity: 1 !important;
	transform: none !important;
}

/* Mobile: keep the reveal but shrink the whole list. */
@media (max-width: 767px) {
	.prilinq-action-reveal-list {
		transform: scale(var(--par-mobile-scale));
		transform-origin: center center;
	}
}

/* Respect reduced-motion: the script paints every row fully revealed (inline
 * styles) instead of animating; just drop will-change here. */
@media (prefers-reduced-motion: reduce) {
	.prilinq-action-reveal-row {
		will-change: auto;
	}
}

/* ===================================================================== *
 * Business Advantages — sticky-pinned two-side section. The media side and
 * the advantages column share ONE sticky stage, so both pin together; the
 * extra section height drives a staggered horizontal slide-in per item.
 * ===================================================================== */
.prilinq-advantages {
	--adv-section-h: 220vh;
	--adv-dist: 12;       /* extra runway (vw) beyond the screen edge */
	--adv-media-w: 50%;   /* media side size (overridden per device) */
	width: 100%;
}

.prilinq-adv {
	position: relative;
	min-height: var(--adv-section-h);
	width: 100%;
}

/* The stage spans the FULL container width and clips overflow at its own edge,
 * so items that start beyond it read as entering from the real screen edge —
 * even when the content below is boxed to a max-width. It is forced LTR so the
 * media side (row / row-reverse / column) is deterministic regardless of the
 * page's RTL direction; the text column restores its own direction below. */
.prilinq-adv-stage {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh; /* iOS: track the visible viewport so the pin doesn't drift */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-sizing: border-box;
	direction: ltr;
}

/* Boxed content: constrains only the resting layout (not the fly-in runway).
 * The fallback max-width matches Elementor's default global Content Width
 * (1140px); the "Content width" control emits the actual (Kit-derived) value
 * when Boxed, or flips to full width via [data-width]. */
.prilinq-adv-inner {
	display: flex;
	flex-direction: row; /* media position — overridden by the responsive control */
	align-items: center;
	gap: 56px;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Full-width mode: remove the box constraint. The extra class raises specificity
 * above Elementor's own per-element max-width rule (which may linger in a page's
 * generated CSS), so Full reliably wins regardless of source order. */
.prilinq-widget.prilinq-advantages[data-width="full"] .prilinq-adv-inner {
	max-width: none !important;
}

.prilinq-adv-media-col {
	flex: 0 0 auto;
	width: var(--adv-media-w, 50%);
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.prilinq-adv-media {
	position: relative;
	width: 100%;
	height: 78vh;
	overflow: hidden;
	border-radius: 24px;
}

.prilinq-adv-media img,
.prilinq-adv-media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prilinq-adv-col {
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center; /* vertical centring of the list */
}

/* Restore the document's reading direction on the text column (the stage was
 * forced LTR only to make the media side deterministic). */
.prilinq-advantages[data-rtl="1"] .prilinq-adv-col {
	direction: rtl;
}

.prilinq-advantages[data-rtl="0"] .prilinq-adv-col {
	direction: ltr;
}

/* Optional main heading above the list. Sits inside the (vertically-centred)
 * column, so heading + list centre together. Styling is overridable via the
 * Heading style controls; sensible brand defaults here. */
.prilinq-adv-heading {
	width: 100%;
	margin: 0 0 28px;
	font-family: var(--prilinq-font-family, inherit);
	font-weight: 800;
	line-height: 1.15;
	color: var(--prilinq-text-primary, #1E293B);
}

/* Animated heading: leads the stagger, flying in horizontally like the items.
 * A "fixed" (or absent) heading has none of this and simply stays in place. */
.prilinq-advantages[data-heading-motion="animated"] .prilinq-adv-heading {
	--adv-tx: 0px;
	--adv-op: 1;
	transform: translate3d(var(--adv-tx), 0, 0);
	opacity: var(--adv-op);
	will-change: transform, opacity;
}

.prilinq-adv-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	/* text-align / align-items are set by the layout controls; default follows
	 * the document direction. */
}

.prilinq-adv-item {
	--adv-tx: 0px;
	--adv-op: 1;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 18px;
	transform: translate3d(var(--adv-tx), 0, 0);
	opacity: var(--adv-op);
	will-change: transform, opacity;
}

/* Icon position options (before / after / above the text). "start"/"end" follow
 * the reading direction because the row uses logical flex order. */
.prilinq-advantages[data-icon-pos="end"] .prilinq-adv-item {
	flex-direction: row-reverse;
}

.prilinq-advantages[data-icon-pos="top"] .prilinq-adv-item {
	flex-direction: column;
}

/* Keep the icon aligned to the text's leading edge for start/end layouts. */
.prilinq-advantages[data-icon-pos="start"] .prilinq-adv-item,
.prilinq-advantages[data-icon-pos="end"] .prilinq-adv-item {
	align-items: center;
}

.prilinq-adv-icon {
	--adv-icon-box: 56px;
	--adv-icon-size: 26px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--adv-icon-box);
	height: var(--adv-icon-box);
	border-radius: 16px;
	background: var(--prilinq-accent, #00A3C4);
	color: #fff;
	font-size: var(--adv-icon-size);
	line-height: 1;
}

.prilinq-adv-icon svg {
	width: var(--adv-icon-size);
	height: var(--adv-icon-size);
	fill: currentColor;
}

.prilinq-adv-text {
	min-width: 0;
}

.prilinq-adv-title {
	font-family: var(--prilinq-font-family, inherit);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 6px;
	color: var(--prilinq-text-primary, #1E293B);
}

.prilinq-adv-desc {
	font-family: var(--prilinq-font-family, inherit);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	color: var(--prilinq-text-secondary, #475569);
}

/* Elementor editor: no real scroll drives the effect, so force every item (and
 * an animated heading) to its resting place so it can be seen and edited. */
.elementor-editor-active .prilinq-adv-item,
.elementor-editor-active .prilinq-adv-heading {
	opacity: 1 !important;
	transform: none !important;
}

/* Media position (left/right/top/bottom) and per-device sizing are driven by
 * the widget's responsive controls (media_position → .prilinq-adv-inner
 * flex-direction; media_width / media_height). The block below is only a low-
 * specificity DEFAULT so a narrow screen stacks sensibly out of the box; any
 * explicit per-device control value emits a higher-specificity rule and wins. */
@media (max-width: 767px) {
	.prilinq-adv-inner {
		flex-direction: column;
		gap: 28px;
	}
	.prilinq-adv-media-col {
		width: 100%;
	}
	.prilinq-adv-media {
		height: 40vh;
	}
}

/* Respect reduced-motion: the script paints every item at rest (inline styles)
 * instead of animating; just drop will-change here. */
@media (prefers-reduced-motion: reduce) {
	.prilinq-adv-item,
	.prilinq-advantages[data-heading-motion="animated"] .prilinq-adv-heading {
		will-change: auto;
	}
}

/* ===================================================================== *
 * Brand Kit — two-column scrolling "document" (jeton.com/media-assets).
 * Each item = a sticky section label on the reading-start side + a free
 * Elementor container on the other side, items separated by a large margin.
 * Nearly all dimensions are driven by the widget's responsive controls
 * (writing --bk-* custom properties / direct selectors); the rules here are
 * only sane defaults + structure so it looks right out of the box.
 * ===================================================================== */
.prilinq-bk {
	width: 100%;
}

/* The fallback max-width matches Elementor's default global Content Width
 * (1140px); the "Content width" control emits the actual (Kit-derived) value
 * when Boxed, or flips to full width via [data-width]. */
.prilinq-bk-inner {
	--bk-nav-w: 18%;
	--bk-inner-gap: 64px;
	display: flex;
	align-items: flex-start;
	gap: var(--bk-inner-gap, 64px);
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Symmetric (jeton) layout: mirror the navbar column as empty space on the
 * opposite side so the label+content block sits centred with equal gaps. */
.prilinq-bk[data-balance="1"] .prilinq-bk-list {
	margin-inline-end: calc(var(--bk-nav-w, 18%) + var(--bk-inner-gap, 64px));
}

/* Full-width mode: remove the box constraint. The extra class raises specificity
 * above Elementor's own per-element max-width rule (which may linger in a page's
 * generated CSS), so Full reliably wins regardless of source order. */
.prilinq-widget.prilinq-bk[data-width="full"] .prilinq-bk-inner {
	max-width: none !important;
}

/* Content navbar — the jeton `_content-navbar`: a sticky side rail of section
 * links. Sits first in DOM so it lands on the reading-start side (right in
 * RTL, mirroring jeton's left). Show/hide, width, sticky top, colors and
 * typography are all responsive widget controls. */
.prilinq-bk-nav-col {
	flex: 0 0 var(--bk-nav-w, 18%);
	max-width: var(--bk-nav-w, 18%);
	min-width: 0;
	align-self: stretch;
	box-sizing: border-box;
	/* The show/hide control sets display:flex on this column; without these the
	 * default align-items:stretch blows the nav up to the full column height and
	 * a sticky element as tall as its container never pins. */
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.prilinq-bk-nav {
	--bk-nav-dim: 0.4;
	position: -webkit-sticky;
	position: sticky;
	top: 50vh;
}

.prilinq-bk-nav ul {
	--bk-bar-y: 0px;
	--bk-bar-h: 1.3em;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* the track + indicator (::before/::after) inherit this via currentColor */
	color: var(--prilinq-primary, var(--prilinq-accent, #00A3C4));
}

/* Scroll-position rail — replica of jeton `._content-navbar ul::before`:
 * a faint full-height 1px track on the reading-start side… */
.prilinq-bk-nav ul::before {
	content: '';
	position: absolute;
	inset-inline-start: -0.5px;
	top: 0.333em;
	bottom: 0.333em;
	width: 1px;
	border-radius: 1em;
	background: currentColor;
	opacity: 0.2;
}

/* …and jeton `ul::after`: the solid 2px indicator that slides to the item
 * the scroll is currently in, with jeton's exact 0.5s ease. Position/height
 * are measured per-item by brand-kit.js (robust to any row gap/typography). */
.prilinq-bk-nav ul::after {
	content: '';
	position: absolute;
	inset-inline-start: -1px;
	top: 0;
	width: 2px;
	height: var(--bk-bar-h, 1.3em);
	border-radius: 1em;
	background: currentColor;
	transform: translateY(var(--bk-bar-y, 0px));
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.prilinq-bk-nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: none;
	border: 0;
	/* jeton button padding — clears the rail and sets the row rhythm */
	padding: 0.333em 0.667em;
	margin: 0;
	cursor: pointer;
	font-family: var(--prilinq-font-family, inherit);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: inherit;
	color: var(--prilinq-primary, var(--prilinq-accent, #00A3C4));
	opacity: var(--bk-nav-dim, 0.4);
	/* jeton's exact cross-fade */
	transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Optional per-item icon (like the Tabs widget's tab icon) */
.prilinq-bk-nav-icon {
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--bk-nav-icon, 1.1em);
	line-height: 1;
}

.prilinq-bk-nav-icon svg {
	width: var(--bk-nav-icon, 1.1em);
	height: var(--bk-nav-icon, 1.1em);
	fill: currentColor;
}

.prilinq-bk-nav-btn:hover {
	opacity: 0.75;
}

.prilinq-bk-nav-btn.is-active {
	opacity: 1;
}

.prilinq-bk-list {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* One item = its nested Elementor container, spread across the FULL item
 * width (the item labels live only in the content navbar). Bottom margin is
 * set by the "Gap between items" responsive control. */
.prilinq-bk-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	box-sizing: border-box;
	width: 100%;
}

.prilinq-bk-item:not(:last-child) {
	margin-bottom: 160px;
}

/* The item's body = the nested Elementor container, printed/appended directly
 * inside .prilinq-bk-item as its only child (frontend and editor share this
 * DOM shape — the editor's nth-child placement requires the item root to be
 * the container placeholder). It stretches to the full item width. */
.prilinq-bk-item > * {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

/* Elementor editor: no real scroll — keep the navbar static so every item is
 * fully visible/editable; nav links all readable (first stays lit via markup). */
.elementor-editor-active .prilinq-bk-nav {
	position: static !important;
}

/* Low-specificity mobile default so a fresh drop stacks sensibly even before
 * the responsive controls are touched; explicit per-device control values emit
 * higher-specificity rules and win. jeton hides the content navbar on mobile. */
@media (max-width: 767px) {
	.prilinq-bk-inner {
		gap: 0;
	}
	.prilinq-bk-nav-col {
		display: none;
	}
	/* navbar hidden on mobile → drop its mirrored margin too */
	.prilinq-bk[data-balance="1"] .prilinq-bk-list {
		margin-inline-end: 0;
	}
	.prilinq-bk-item:not(:last-child) {
		margin-bottom: 72px;
	}
}

/* ===================================================================== *
 * Extra Bold Hero — giant centred statement + subhead + button(s).
 * Display type is sized by the widget's Typography control (responsive);
 * these rules are structure + brand-accent defaults only.
 * ===================================================================== */
.prilinq-xbold {
	position: relative; /* anchors the colour-wipe overlay */
	width: 100%;
	box-sizing: border-box;
	padding: 140px 24px;
}

/* Scroll colour wipe — inverted duplicate of the content, clipped by a scroll-
 * driven chevron polygon (extra-bold-hero.js). Enters covering everything
 * (accent bg, light text) and wipes away to reveal the resting colours.
 * Starts fully hidden so no-JS / pre-JS shows the resting state. */
.prilinq-xbold-wipe {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: inherit; /* mirror the base layer so both copies align 1:1 */
	box-sizing: border-box;
	background: var(--xb-wipe-bg, var(--prilinq-primary, var(--prilinq-accent, #00A3C4)));
	pointer-events: none;
	will-change: clip-path;
	clip-path: polygon(0% -1%, 100% -1%, 100% -1%, 50% -1%, 0% -1%);
	-webkit-clip-path: polygon(0% -1%, 100% -1%, 100% -1%, 50% -1%, 0% -1%);
}

/* Inverted colours inside the overlay. Uses !important because the base title
 * colour is often bound to an Elementor GLOBAL color (`__globals__.title_color`),
 * which Elementor emits with a selector specific enough to beat a plain class
 * rule — so the overlay title would otherwise keep the resting colour and the
 * text wouldn't flip as the wipe passes over it (only the background would). */
.prilinq-xbold .prilinq-xbold-wipe .prilinq-xbold-title,
.prilinq-xbold .prilinq-xbold-wipe .prilinq-xbold-sub,
.prilinq-xbold .prilinq-xbold-wipe .prilinq-xbold-eyebrow {
	color: var(--xb-wipe-text, #FFFFFF) !important;
}

.prilinq-xbold .prilinq-xbold-wipe .prilinq-xbold-btn.is-filled {
	background: var(--xb-wipe-text, #FFFFFF);
	color: var(--xb-wipe-bg, var(--prilinq-primary, var(--prilinq-accent, #00A3C4)));
	border-color: transparent;
}

.prilinq-xbold .prilinq-xbold-wipe .prilinq-xbold-btn.is-outline {
	color: var(--xb-wipe-text, #FFFFFF);
}

/* Editor: no real scroll — hide the overlay so the resting design is edited. */
.elementor-editor-active .prilinq-xbold-wipe {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.prilinq-xbold-wipe {
		will-change: auto;
	}
}

.prilinq-xbold-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

.prilinq-xbold-eyebrow {
	font-family: var(--prilinq-font-family, inherit);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--prilinq-primary, var(--prilinq-accent, #00A3C4));
	margin-bottom: 18px;
}

.prilinq-xbold-title {
	margin: 0 0 24px;
	font-family: var(--prilinq-font-family, inherit);
	/* START scale — override per device with the Typography control. */
	font-size: clamp(44px, 9vw, 140px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -1.5px;
	color: var(--prilinq-primary, var(--prilinq-accent, #00A3C4));
}

.prilinq-xbold-sub {
	margin: 0 auto 34px;
	max-width: 560px;
	font-family: var(--prilinq-font-family, inherit);
	font-size: clamp(17px, 2vw, 22px);
	line-height: 1.55;
	color: var(--prilinq-text-secondary, #64748B);
}

.prilinq-xbold-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.prilinq-xbold-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 34px;
	border-radius: 10px;
	font-family: var(--prilinq-font-family, inherit);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1;
	transition: filter 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.prilinq-xbold-btn.is-filled {
	background: var(--prilinq-primary, var(--prilinq-accent, #00A3C4));
	color: #fff;
	border: 2px solid transparent;
}

.prilinq-xbold-btn.is-outline {
	background: transparent;
	color: var(--prilinq-primary, var(--prilinq-accent, #00A3C4));
	border: 2px solid currentColor;
}

.prilinq-xbold-btn.is-outline:hover {
	background: var(--prilinq-primary, var(--prilinq-accent, #00A3C4));
	color: #fff;
}

/* Stack buttons full-width on mobile when enabled. */
@media (max-width: 767px) {
	.prilinq-xbold[data-btn-stack="1"] .prilinq-xbold-buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 340px;
	}
	.prilinq-xbold[data-btn-stack="1"] .prilinq-xbold-btn {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * Prilinq Accordion (prilinq-accordion)
 * The animated panel is padding-free; padding lives on .pq-acc-inner
 * so the height transition never "pops". Colours/typography/spacing
 * are overridden by widget controls; these are the smooth-critical
 * structure + house defaults.
 * ------------------------------------------------------------------ */
.prilinq-accordion {
	width: 100%;
}
.prilinq-accordion .pq-acc-item {
	border: 0;
	border-bottom: 1px solid rgba(30, 41, 59, 0.2);
	background: transparent;
}
.prilinq-accordion .pq-acc-heading {
	margin: 0;
	font: inherit;
}
.prilinq-accordion .pq-acc-trigger {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	margin: 0;
	padding: 30px 46px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: start;
	font-family: inherit;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	color: #1E293B;
	-webkit-appearance: none;
	appearance: none;
}
.prilinq-accordion .pq-acc-title {
	flex: 1 1 auto;
	color: #1E293B;
}
.prilinq-accordion .pq-acc-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	color: #1E293B;
	transition: transform 0.3s ease;
}
.prilinq-accordion .pq-acc-icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}
.prilinq-accordion .pq-acc-title {
	order: 0;
}
.prilinq-accordion .pq-acc-icon {
	order: 0;
}
/* Icon position: "left" (end in RTL) pushes the icon after the title. */
.pq-acc-icon-pos-left .prilinq-accordion .pq-acc-icon,
.pq-acc-icon-pos-left.prilinq-accordion .pq-acc-icon {
	order: 2;
}
.prilinq-accordion .pq-acc-icon-open {
	display: none;
}
.prilinq-accordion .pq-acc-item[data-active="true"] .pq-acc-icon-closed {
	display: none;
}
.prilinq-accordion .pq-acc-item[data-active="true"] .pq-acc-icon-open {
	display: inline-flex;
}
.prilinq-accordion .pq-acc-panel {
	overflow: hidden;
	height: 0;
	transition: height 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: height;
}
.prilinq-accordion .pq-acc-inner {
	padding: 10px 46px 40px;
	color: #64748B;
	font-size: 21px;
	line-height: 1.6;
}
.prilinq-accordion .pq-acc-inner > :first-child {
	margin-top: 0;
}
.prilinq-accordion .pq-acc-inner > :last-child {
	margin-bottom: 0;
}
@media (max-width: 767px) {
	.prilinq-accordion .pq-acc-trigger {
		padding: 20px 16px;
		gap: 14px;
		font-size: 20px;
	}
	.prilinq-accordion .pq-acc-icon {
		font-size: 18px;
	}
	.prilinq-accordion .pq-acc-icon svg {
		width: 18px;
		height: 18px;
	}
	.prilinq-accordion .pq-acc-inner {
		padding: 6px 16px 26px;
		font-size: 16px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.prilinq-accordion .pq-acc-panel {
		transition: none;
	}
}

/* ===================================================================== *
 * Global Block — reusable saved container template
 * ===================================================================== */

/* Passthrough: widget wrapper does not create an extra layout box. */
.prilinq-global-block--passthrough {
	display: contents;
}

.prilinq-global-block__placeholder {
	padding: 2rem 1.5rem;
	text-align: center;
	border: 2px dashed var(--prilinq-border, #cbd5e1);
	border-radius: 10px;
	color: var(--prilinq-text, #64748b);
	background: color-mix(in srgb, var(--prilinq-accent, #47a7f2) 6%, transparent);
}

.prilinq-global-block__placeholder-title {
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--prilinq-text-primary, #1e293b);
}

.prilinq-global-block__placeholder-text {
	margin: 0;
	font-size: 0.95rem;
}

/* ===================================================================== *
 * Pricing Table
 * Row of plan cards + monthly/annual toggle. Structural colors track the
 * brand via the theme CSS variables; the widget's own COLOR controls layer
 * on top. --pricing-accent defaults to the brand primary; per-card and the
 * "featured" control can override it. Column count (--pricing-cols) is set
 * per breakpoint by the widget's responsive "Columns" control.
 * ===================================================================== */
.prilinq-pricing {
	/* Bind to the Elementor global "primary" (the live brand blue). The theme's
	 * --prilinq-accent var is a stale teal, so we do NOT use it here. */
	--pricing-accent: var(--e-global-color-primary, #47A7F2);
	--pricing-cols: 3;
	--pricing-featured-lift: 12px;
	--pricing-card-gap: 18px;
}

.prilinq-pricing-inner {
	margin-inline: auto;
	width: 100%;
}

.prilinq-pricing[data-width="full"] .prilinq-pricing-inner {
	max-width: none;
}

/* -- Toggle -- */
.prilinq-pricing-toggle-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
}

.prilinq-pricing-toggle {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	background: var(--prilinq-border, #E2E8F0);
	border-radius: 999px;
	padding: 5px;
	gap: 4px;
}

.prilinq-pricing-toggle-thumb {
	position: absolute;
	top: 5px;
	left: 0; /* Anchored left:0; JS moves it with translateX (no right/inset — that
	          * would over-constrain the box in RTL and freeze the pill in place). */
	height: calc(100% - 10px);
	width: calc(50% - 5px); /* fallback; JS sets exact width + translateX */
	background: var(--prilinq-surface, #FFFFFF);
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
	z-index: 0;
}

/* Animate only AFTER the JS has done its first (instant) placement — otherwise
 * the thumb visibly flies in from the CSS-fallback spot on load. */
.prilinq-pricing.is-ready .prilinq-pricing-toggle-thumb {
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.prilinq-pricing-toggle-btn {
	position: relative;
	z-index: 1;
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--prilinq-text, #64748B);
	padding: 9px 22px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 96px;
	justify-content: center;
	transition: color 0.2s ease;
}

.prilinq-pricing-toggle-btn.is-active {
	color: var(--prilinq-text-primary, #1E293B);
}

/* Floating badge above the annual button — straddles the toggle's top edge
 * (half in / half out). JS sets its exact horizontal centre over the button. */
.prilinq-pricing-toggle-badge {
	position: absolute;
	top: 0;
	left: 50%; /* fallback; JS overrides with the annual button's centre */
	transform: translate(-50%, -50%);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--pricing-accent, #47A7F2);
	color: #fff;
	white-space: nowrap;
	pointer-events: none;
	z-index: 3;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

/* -- Grid -- */
.prilinq-pricing-grid {
	display: grid;
	grid-template-columns: repeat(var(--pricing-cols, 3), minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

/* -- Card -- */
.prilinq-pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--pricing-card-gap, 18px);
	background: var(--prilinq-surface, #FFFFFF);
	border: 1px solid var(--prilinq-border, #E2E8F0);
	border-radius: 10px;
	padding: 36px 32px;
	text-align: start;
}

.prilinq-pricing-card.is-featured {
	border-color: var(--pricing-card-accent, var(--pricing-accent, #47A7F2));
	border-width: 2px;
}

/* Featured lift — desktop only. */
@media (min-width: 768px) {
	.prilinq-pricing-card.is-featured {
		transform: translateY(calc(-1 * var(--pricing-featured-lift, 12px)));
	}
}

.prilinq-pricing-ribbon {
	position: absolute;
	top: 0;
	inset-inline-end: 24px;
	transform: translateY(-50%);
	background: var(--pricing-card-accent, var(--pricing-accent, #47A7F2));
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	padding: 7px 14px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}

/* -- Head -- */
.prilinq-pricing-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.prilinq-pricing-name {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--prilinq-text-primary, #1E293B);
}

.prilinq-pricing-subtitle {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--prilinq-text, #64748B);
}

/* -- Price -- */
.prilinq-pricing-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	flex-wrap: wrap;
}

.prilinq-pricing-currency {
	font-size: 24px;
	font-weight: 700;
	color: var(--prilinq-text-primary, #1E293B);
}

.prilinq-pricing-amount {
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--prilinq-text-primary, #1E293B);
}

.prilinq-pricing-period {
	font-size: 16px;
	font-weight: 400;
	color: var(--prilinq-text, #64748B);
}

.prilinq-pricing-note {
	margin-top: -6px;
	font-size: 13px;
	color: #94A3B8;
}

/* -- Features -- */
.prilinq-pricing-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
}

.prilinq-pricing-feature {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--prilinq-text-primary, #1E293B);
}

.prilinq-pricing-feat-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	margin-top: 1px;
}

.prilinq-pricing-feature.is-included .prilinq-pricing-feat-icon {
	color: var(--pricing-accent, #47A7F2);
	background: color-mix(in srgb, var(--pricing-accent, #47A7F2) 14%, transparent);
}

.prilinq-pricing-feature.is-excluded {
	color: #94A3B8;
}

.prilinq-pricing-feature.is-excluded .prilinq-pricing-feat-text {
	text-decoration: line-through;
}

.prilinq-pricing-feature.is-excluded .prilinq-pricing-feat-icon {
	color: #94A3B8;
	background: rgba(148, 163, 184, 0.14);
}

/* -- Button -- */
.prilinq-pricing-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: auto;
	padding: 16px 30px;
	border: 2px solid transparent;
	border-radius: 10px;
	background: var(--pricing-card-accent, var(--pricing-accent, #47A7F2));
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.prilinq-pricing-btn:hover,
.prilinq-pricing-btn:focus {
	filter: brightness(1.08);
}

/* Ghost variant for non-featured cards (when chosen). */
.prilinq-pricing[data-btn-variant="ghost"] .prilinq-pricing-card:not(.is-featured) .prilinq-pricing-btn {
	background: transparent;
	color: var(--pricing-card-accent, var(--pricing-accent, #47A7F2));
	border-color: var(--pricing-card-accent, var(--pricing-accent, #47A7F2));
}
.prilinq-pricing[data-btn-variant="ghost"] .prilinq-pricing-card:not(.is-featured) .prilinq-pricing-btn:hover,
.prilinq-pricing[data-btn-variant="ghost"] .prilinq-pricing-card:not(.is-featured) .prilinq-pricing-btn:focus {
	background: color-mix(in srgb, var(--pricing-card-accent, var(--pricing-accent, #47A7F2)) 10%, transparent);
	filter: none;
}

/* -- Mobile tidy-ups -- */
@media (max-width: 767px) {
	.prilinq-pricing-card.is-featured {
		transform: none;
	}
	.prilinq-pricing-amount {
		font-size: 40px;
	}

	/* Sticky billing toggle: floats at the top of the screen while scrolling the
	 * plans, pinned within the widget so it releases at the widget's bottom.
	 * Toggled by the "Sticky toggle on mobile" control (data-sticky-toggle). */
	.prilinq-pricing[data-sticky-toggle="1"] .prilinq-pricing-toggle-wrap {
		position: -webkit-sticky;
		position: sticky;
		top: var(--pricing-sticky-top, 20px);
		z-index: 20;
		padding: 10px 0;
		transition: box-shadow 0.2s ease, background-color 0.2s ease;
	}

	/* Background + shadow appear ONLY while actually pinned — JS adds .is-stuck.
	 * In the toggle's normal (unpinned) position there is no shadow/bar. */
	.prilinq-pricing[data-sticky-toggle="1"] .prilinq-pricing-toggle-wrap.is-stuck {
		background: var(--prilinq-surface, #FFFFFF);
		border-radius: 16px;
		box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
	}
}

/* Reduced motion — no thumb slide. */
@media (prefers-reduced-motion: reduce) {
	.prilinq-pricing-toggle-thumb,
	.prilinq-pricing-btn {
		transition: none;
	}
}