/* SyncraIT Team Pricing widget styles — namespaced under .stp-team-pricing so it never leaks into the rest of the page. */

.stp-team-pricing {
	--stp-ink: #0B1529;
	--stp-panel: #272F50;
	--stp-blue: #2F65F6;
	--stp-cyan: #65DBFA;
	--stp-muted: #6F798C;
	--stp-line: rgba(11,21,41,.08);
	--stp-line-soft: rgba(11,21,41,.06);
	--stp-bg-soft: #F7F9FE;
	--stp-tick: #34A06A;
	--stp-amber: #C68A3E;
	font-family: inherit;
	color: var(--stp-text, #3A465C);
	box-sizing: border-box;
}
.elementor-widget-stp-team-pricing {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
.stp-team-pricing {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
.stp-team-pricing *,
.stp-team-pricing *::before,
.stp-team-pricing *::after {
	box-sizing: inherit;
}

/* Grow band */
.stp-team-pricing .stp-grow-band {
	display: grid;
	grid-template-columns: 56% 44%;
	gap: 24px;
	align-items: start;
	max-width: none;
	margin: 0 0 40px;
}
@media (max-width: 900px) {
	.stp-team-pricing .stp-grow-band {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}
.stp-team-pricing .stp-heading {
	font-size: clamp(26px, 3.2vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--stp-ink);
	margin: 0;
}
.stp-team-pricing .stp-heading .stp-accent {
	color: var(--stp-blue);
	font-style: italic;
}
.stp-team-pricing .stp-subheading {
	font-size: 16px;
	line-height: 1.65;
	color: var(--stp-muted);
	max-width: 480px;
	margin: 0;
	padding-top: 8px;
}

/* Slider */
.stp-team-pricing .stp-config {
	max-width: 760px;
	margin: 100px auto;
}
.stp-team-pricing .stp-config-top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.stp-team-pricing .stp-slider-label {
	font-size: 19px;
	font-weight: 700;
	color: var(--stp-ink);
	margin: 0;
}
.stp-team-pricing .stp-readout {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.stp-team-pricing .stp-num {
	font-weight: 800;
	font-size: 40px;
	line-height: .9;
	letter-spacing: -0.03em;
	background: linear-gradient(178deg, var(--stp-cyan) 8%, var(--stp-blue) 92%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-variant-numeric: tabular-nums;
}
.stp-team-pricing .stp-unit {
	font-style: italic;
	font-weight: 600;
	font-size: 16px;
	color: var(--stp-panel);
}

.stp-team-pricing .stp-slider-shell {
	position: relative;
}
.stp-team-pricing .stp-track-wrap {
	position: relative;
	height: 40px;
	display: flex;
	align-items: center;
}

/* The visual track + fill sit in their own layer, BEHIND the (invisible) range input. */
.stp-team-pricing .stp-track {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 20px !important;
	border-radius: 100px !important;
	background: #EDF1F9 !important;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}
.stp-team-pricing .stp-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 12%;
	border-radius: 100px !important;
	background: linear-gradient(90deg, var(--stp-cyan) 0%, var(--stp-blue) 100%) !important;
	transition: width .12s linear;
}
.stp-team-pricing .stp-notches {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 4px;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 2;
}
.stp-team-pricing .stp-notches i {
	position: absolute;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(11,21,41,.18);
	transform: translate(-50%, -50%);
}

/* Hard reset of every native range-input skin so no theme / browser default
   (dark fill track, OS accent-color, etc.) can show through. */
.stp-team-pricing input.stp-range,
.stp-team-pricing input[type="range"].stp-range {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	position: relative;
	z-index: 3;
	width: 100% !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	accent-color: var(--stp-blue);
	cursor: grab;
	vertical-align: middle;
}
.stp-team-pricing input.stp-range:active {
	cursor: grabbing;
}

/* WebKit / Blink (Chrome, Edge, Safari) track + thumb */
.stp-team-pricing input.stp-range::-webkit-slider-runnable-track {
	-webkit-appearance: none !important;
	appearance: none !important;
	height: 40px !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.stp-team-pricing input.stp-range::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 28px;
	height: 28px;
	/* WebKit positions the thumb using margin-top relative to the (invisible)
	   40px runnable-track, so this has to be set explicitly or the thumb sits
	   flush with the top of the track instead of centered on it. */
	margin-top: 6px !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: none !important;
	box-shadow: 0 3px 12px -2px rgba(11,21,41,.25), 0 0 0 1px rgba(11,21,41,.06) !important;
	transition: transform .18s ease;
	cursor: grab;
}
.stp-team-pricing input.stp-range::-webkit-slider-thumb:hover {
	transform: scale(1.08);
}

/* Firefox */
.stp-team-pricing input.stp-range::-moz-range-track {
	-moz-appearance: none !important;
	appearance: none !important;
	height: 40px !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.stp-team-pricing input.stp-range::-moz-range-progress {
	background: transparent !important;
	height: 40px !important;
	border: none !important;
}
.stp-team-pricing input.stp-range::-moz-focus-outer {
	border: 0;
}
.stp-team-pricing input.stp-range::-moz-range-thumb {
	width: 28px;
	height: 28px;
	border-radius: 50% !important;
	background: #fff !important;
	border: 1px solid rgba(11,21,41,.07) !important;
	box-shadow: 0 3px 12px -2px rgba(11,21,41,.25) !important;
}

/* Edge legacy / IE fallback */
.stp-team-pricing input.stp-range::-ms-track {
	height: 40px !important;
	background: transparent !important;
	border-color: transparent !important;
	color: transparent !important;
}
.stp-team-pricing input.stp-range::-ms-fill-lower,
.stp-team-pricing input.stp-range::-ms-fill-upper {
	background: transparent !important;
}
.stp-team-pricing input.stp-range::-ms-thumb {
	width: 28px;
	height: 28px;
	border-radius: 50% !important;
	background: #fff !important;
	border: none !important;
}

.stp-team-pricing input.stp-range:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba(47,101,246,.28) !important;
}
.stp-team-pricing input.stp-range:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 4px rgba(47,101,246,.28) !important;
}

.stp-team-pricing .stp-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--stp-muted);
	font-variant-numeric: tabular-nums;
}

/* Plan cards */
.stp-team-pricing .stp-plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}
@media (max-width: 900px) {
	.stp-team-pricing .stp-plans {
		grid-template-columns: 1fr;
		max-width: 440px;
		margin: 0 auto;
	}
}
.stp-team-pricing .stp-plan {
	position: relative;
	background: #fff;
	border: 1px solid var(--stp-line);
	border-radius: 20px;
	padding: 36px 32px 28px;
	display: flex;
	flex-direction: column;
	transition: transform .3s ease, box-shadow .3s ease;
}
.stp-team-pricing .stp-plan:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 54px -32px rgba(11,21,41,.3);
}
.stp-team-pricing .stp-plan--featured {
	background: var(--stp-panel);
	border-color: var(--stp-panel);
	box-shadow: 0 30px 64px -32px rgba(11,21,41,.5);
	color: #fff;
}
.stp-team-pricing .stp-plan--featured .stp-plan-name,
.stp-team-pricing .stp-plan--featured .stp-cur,
.stp-team-pricing .stp-plan--featured .stp-amt,
.stp-team-pricing .stp-plan--featured .stp-plan-per {
	color: #fff;
}
.stp-team-pricing .stp-plan--featured .stp-plan-tag {
	color: var(--stp-cyan);
}
.stp-team-pricing .stp-plan--featured .stp-plan-desc {
	color: rgba(255,255,255,.78);
}
.stp-team-pricing .stp-plan--featured .stp-plan-icon {
	color: var(--stp-cyan);
}
.stp-team-pricing .stp-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -52%);
	background: var(--stp-cyan);
	color: var(--stp-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 9px 26px;
	border-radius: 100px;
	white-space: nowrap;
	box-shadow: 0 12px 26px -10px rgba(101,219,250,.85);
}
.stp-team-pricing .stp-plan-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}
.stp-team-pricing .stp-plan-name {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1;
	color: var(--stp-muted);
}
.stp-team-pricing .stp-plan-icon {
	flex-shrink: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--stp-blue);
	margin-top: -2px;
}
.stp-team-pricing .stp-plan-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.stp-team-pricing .stp-plan-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-top: 16px;
}
.stp-team-pricing .stp-cur {
	font-size: 20px;
	font-weight: 500;
	color: var(--stp-muted);
}
.stp-team-pricing .stp-amt {
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: .95;
	color: var(--stp-ink);
	font-variant-numeric: tabular-nums;
}
.stp-team-pricing .stp-plan-per {
	margin-top: 12px;
	font-size: 14px;
	color: var(--stp-muted);
}
.stp-team-pricing .stp-plan-body {
	margin-top: auto;
	padding-top: 28px;
}
.stp-team-pricing .stp-plan-tag {
	font-size: 15px;
	color: var(--stp-blue);
}
.stp-team-pricing .stp-plan-desc {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--stp-muted);
}
.stp-team-pricing .stp-btn {
	margin-top: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	font-size: 14px;
	font-weight: 700;
	padding: 15px 20px;
	border-radius: 100px;
	background: var(--stp-blue);
	color: #fff;
	text-decoration: none;
	transition: transform .2s ease, background .2s ease;
}
.stp-team-pricing .stp-plan--featured .stp-btn {
	background: var(--stp-cyan);
	color: var(--stp-ink);
}
.stp-team-pricing .stp-btn:hover {
	transform: translateY(-2px);
}
.stp-team-pricing .stp-arr {
	transition: transform .2s ease;
}
.stp-team-pricing .stp-btn:hover .stp-arr {
	transform: translateX(3px);
}

/* Footer row: small print + helpdesk badge */
.stp-team-pricing .stp-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 28px;
}
.stp-team-pricing .stp-footer-note {
	font-size: 13.5px;
	color: var(--stp-muted);
}
.stp-team-pricing .stp-hd-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--stp-ink);
}
.stp-team-pricing .stp-hd-badge-ico {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: #E8EFFE;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--stp-blue);
	font-size: 18px;
}
.stp-team-pricing .stp-hd-badge-ico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ─── Please note callout ─── */
.stp-team-pricing .stp-note {
	margin: 100px auto;
	background: #fff;
	border: 1px solid var(--stp-line);
	border-radius: 16px;
	padding: 26px 32px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
	box-shadow: 0 18px 44px -30px rgba(11,21,41,.26);
	max-width: 800px;
}
.stp-team-pricing .stp-note-ico {
	flex-shrink: 0;
	margin-top: 10px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
}
.stp-team-pricing .stp-note-ico svg {
	width: 1em;
	height: 1em;
}
.stp-team-pricing .stp-note-lbl {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--stp-blue);
}
.stp-team-pricing .stp-note-h {
	margin: 8px 0 0;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--stp-ink);
}
.stp-team-pricing .stp-note-h em {
	font-style: normal;
	color: var(--stp-blue);
}
.stp-team-pricing .stp-note-p {
	margin: 8px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--stp-muted);
}
@media (max-width: 700px) {
	.stp-team-pricing .stp-note {
		padding: 20px 22px;
	}
}

/* ─── Comparison table ─── */
.stp-team-pricing .stp-compare {
	margin-top: 72px;
}
.stp-team-pricing .stp-compare-heading {
	font-size: clamp(24px, 2.6vw, 38px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--stp-ink);
	margin: 0 0 16px;
}
.stp-team-pricing .stp-compare-sub {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--stp-muted);
	max-width: 560px;
	margin: 0 0 36px;
}
.stp-team-pricing .stp-table-card {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 22px 54px -34px rgba(11,21,41,.32);
}
.stp-team-pricing .stp-table-scroll {
	width: 100%;
}
.stp-team-pricing table.stp-cmp {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	border: 0 !important;
}
.stp-team-pricing .stp-cmp th,
.stp-team-pricing .stp-cmp td {
	border: 0 !important;
}
.stp-team-pricing .stp-cmp thead th:first-child { border-top-left-radius: 18px; }
.stp-team-pricing .stp-cmp thead th:last-child  { border-top-right-radius: 18px; }
.stp-team-pricing .stp-cmp tbody tr:last-child td:first-child { border-bottom-left-radius: 18px; }
.stp-team-pricing .stp-cmp tbody tr:last-child td:last-child  { border-bottom-right-radius: 18px; }
.stp-team-pricing .stp-cmp thead th.stp-c-first { width: 40%; }
.stp-team-pricing .stp-cmp thead th {
	background: var(--stp-panel);
	padding: 22px 20px 20px 22px;
	text-align: left;
	vertical-align: top;
}
.stp-team-pricing .stp-cmp thead th.stp-h-prem {
	background: var(--stp-ink);
}
.stp-team-pricing .stp-cmp-nm {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	line-height: 1;
}
.stp-team-pricing .stp-cmp thead th.stp-h-std .stp-cmp-nm {
	color: var(--stp-cyan);
}
.stp-team-pricing .stp-cmp-pr {
	margin-top: 8px;
	font-size: 13px;
	color: rgba(255,255,255,.66);
	font-variant-numeric: tabular-nums;
}
.stp-team-pricing .stp-cmp tr.stp-cat td {
	background: var(--stp-bg-soft);
	padding: 8px 20px 7px 22px;
}
.stp-team-pricing .stp-cat-t {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--stp-ink);
}
.stp-team-pricing .stp-cmp tbody tr.stp-feat td {
	padding: 13px 20px;
	text-align: center;
	transition: background .18s;
}
.stp-team-pricing .stp-cmp tbody tr.stp-feat td.stp-c-first {
	text-align: left;
	padding-left: 22px;
}
.stp-team-pricing .stp-cmp tbody tr.stp-feat:hover td {
	background: rgba(47,101,246,.03);
}
.stp-team-pricing .stp-col-std {
	background: rgba(101,219,250,.06);
}
.stp-team-pricing .stp-cmp tbody tr.stp-feat:hover td.stp-col-std {
	background: rgba(101,219,250,.1);
}
.stp-team-pricing .stp-feat-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--stp-ink);
	font-weight: 400;
	text-align: left;
}
.stp-team-pricing .stp-mk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
}
.stp-team-pricing .stp-mk-yes {
	background: rgba(52,160,106,.12);
}
.stp-team-pricing .stp-mk-yes svg {
	width: 13px;
	height: 13px;
	stroke: var(--stp-tick);
	stroke-width: 2.8;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.stp-team-pricing .stp-mk-no {
	background: rgba(11,21,41,.055);
}
.stp-team-pricing .stp-mk-no svg {
	width: 10px;
	height: 10px;
	stroke: #9AA3B2;
	stroke-width: 2.4;
	fill: none;
	stroke-linecap: round;
}
.stp-team-pricing .stp-mk-addon {
	width: auto;
	height: auto;
	font-style: italic;
	font-size: 13px;
	color: var(--stp-amber);
	background: rgba(198,138,62,.13);
	border-radius: 100px;
	padding: 6px 16px;
}

/* Info tooltip */
.stp-team-pricing .stp-info {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1.4px solid var(--stp-blue);
	color: var(--stp-blue);
	cursor: help;
	transition: background .2s ease, color .2s ease;
}
.stp-team-pricing .stp-glyph {
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	font-style: normal;
}
.stp-team-pricing .stp-info:hover,
.stp-team-pricing .stp-info:focus-visible {
	background: var(--stp-blue);
	color: #fff;
	outline: none;
}
.stp-team-pricing .stp-tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%) translateY(4px);
	width: 240px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid rgba(101,180,250,.35);
	box-shadow: 0 16px 34px -18px rgba(11,21,41,.34);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--stp-text, #3A465C);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 30;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.stp-team-pricing .stp-info:hover .stp-tip,
.stp-team-pricing .stp-info:focus-visible .stp-tip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}


/* ─── Mobile ─── */
@media (max-width: 700px) {
	.stp-team-pricing .stp-config,
	.stp-team-pricing .stp-note {
		margin-top: 48px;
		margin-bottom: 48px;
		max-width: 100%;
	}
	.stp-team-pricing .stp-compare {
		margin-top: 48px;
	}
	.stp-team-pricing .stp-compare-sub {
		margin-bottom: 24px;
	}
	.stp-team-pricing .stp-table-card {
		border-radius: 14px;
	}
	.stp-team-pricing .stp-cmp thead th:first-child { border-top-left-radius: 14px; }
	.stp-team-pricing .stp-cmp thead th:last-child  { border-top-right-radius: 14px; }
	.stp-team-pricing .stp-cmp tbody tr:last-child td:first-child { border-bottom-left-radius: 14px; }
	.stp-team-pricing .stp-cmp tbody tr:last-child td:last-child  { border-bottom-right-radius: 14px; }

	.stp-team-pricing .stp-cmp thead th.stp-c-first { width: 40%; }
	.stp-team-pricing .stp-cmp thead th {
		padding: 14px 4px 12px;
		text-align: center;
	}
	.stp-team-pricing .stp-cmp thead th.stp-c-first { padding: 0; }
	.stp-team-pricing .stp-cmp-nm {
		font-size: 11px;
		letter-spacing: .02em;
		line-height: 1.15;
		word-break: break-word;
	}
	.stp-team-pricing .stp-cmp-pr {
		margin-top: 5px;
		font-size: 9.5px;
		line-height: 1.25;
	}
	.stp-team-pricing .stp-cmp tr.stp-cat td {
		padding: 7px 10px 6px 12px;
	}
	.stp-team-pricing .stp-cat-t {
		font-size: 10px;
		letter-spacing: .12em;
	}
	.stp-team-pricing .stp-cmp tbody tr.stp-feat td {
		padding: 10px 3px;
	}
	.stp-team-pricing .stp-cmp tbody tr.stp-feat td.stp-c-first {
		padding-left: 12px;
		padding-right: 4px;
	}
	.stp-team-pricing .stp-feat-label {
		font-size: 12px;
		gap: 6px;
		line-height: 1.35;
	}
	.stp-team-pricing .stp-mk {
		width: 22px;
		height: 22px;
	}
	.stp-team-pricing .stp-mk-yes svg { width: 11px; height: 11px; }
	.stp-team-pricing .stp-mk-no svg  { width: 8px;  height: 8px; }
	.stp-team-pricing .stp-mk-addon {
		width: auto;
		height: auto;
		font-size: 10px;
		padding: 4px 7px;
	}
	.stp-team-pricing .stp-info {
		width: 15px;
		height: 15px;
	}
	.stp-team-pricing .stp-glyph { font-size: 9px; }
	/* keep tooltips inside the screen: anchor to the left of the label */
	.stp-team-pricing .stp-tip {
		left: -8px;
		transform: translateY(4px);
		width: 210px;
	}
	.stp-team-pricing .stp-info:hover .stp-tip,
	.stp-team-pricing .stp-info:focus-visible .stp-tip,
	.stp-team-pricing .stp-info:focus .stp-tip {
		transform: translateY(0);
	}
}