/* Универсальная установка z-индексов (просто поставьте элементу класс при неободимости) */
.z-index-2 {
    position: relative!important;
    z-index: 2!important;
}
.z-index-1 {
    position: relative!important;
    z-index: 1!important;
}

/* Бегущая строка логотипов на главной и страницах проектов */
.marquee-train {
  overflow: hidden;          /* окно, которое обрезает; само стоит на месте */
}
.marquee-carriage {
  animation: marquee 40s linear infinite;
  flex: 0 0 auto;            /* чтобы вагоны не сжимались */
}

@keyframes marquee {
  to { transform: translateX(-100%); }
}

/*Убираем кривой наклон на мобайле*/
.norm-italic {
    font-synthesis: none!important
}

.headline-lg-custom {
  font-family: var(--uc-typo-fontfamily-t9lfHRhhl, InterTight);
  font-weight: 400;
  font-size: var(--uc-typo-fontsize-t9lfHRhhl,55px);
  line-height: 1;
  color: var(--uc-color-color-uzobEOLcM, #1f1f1f);
  text-align: center;
  font-synthesis: none!important
}

.headline-lg-custom.is-left {
  text-align: left;
}

.cap {
  font-family: var(--uc-typo-fontfamily-Vc7uE9Mi,CormorantInfant);
  /*font-style: italic;*/
  font-weight: var(--uc-typo-fontweight-Vc7uE9Mi,800);
  font-size: var(--uc-typo-fontsize-Vc7uE9Mi,76px);
  color: var(--uc-color-color-VfWNp2p, #a59600);
}

.cap--dark {
  font-family: var(--uc-typo-fontfamily-Vc7uE9Mi,CormorantInfant);
  /*font-style: italic;*/
  font-weight: var(--uc-typo-fontweight-Vc7uE9Mi,800);
  font-size: var(--uc-typo-fontsize-Vc7uE9Mi,76px);
  color: var(--uc-color-color-uzobEOLcM, #1f1f1f);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Убирает переносы текста. Если текст больше 1 строки - ставится ... на конце */
.one-line-only {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.one-line-only .tn-atom {
  display: table-cell;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/*Стили калькулятора*/

		body {
			background: rgba(31, 31, 31, 1);
		}

		.roi-calc,
		.roi-calc * {
			box-sizing: border-box;
		}

		.roi-calc {
			--brand: rgba(165, 150, 0, 1);
			font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
			max-width: 1400px;
			margin: 0 auto;
		}

		.roi-shell {
			display: flex;
			gap: 20px;
			width: 100%;
			align-items: stretch;
		}

		@media (max-width: 860px) {
			.roi-shell {
				flex-direction: column;
			}
		}

		.roi-panel {
			flex: 1 1 50%;
			min-width: 0;
			border-radius: 20px;
			padding: 40px;
		}

		.roi-panel-light {
			background: rgba(255, 255, 255, 1);
		}

		.roi-panel-dark {
			/* background: rgba(31, 31, 31, 1) url("https://static.tildacdn.com/tild6535-3438-4434-b430-353564393736/calc-bg.png") center / cover no-repeat; */
			background: rgba(31, 31, 31, 1);
			color: #FFFFFF;
		}

		/* ---- left panel ---- */

		.roi-label {
			font-family: 'Manrope', sans-serif;
			font-weight: 400;
			font-size: 11px;
			line-height: 20px;
			letter-spacing: 0;
			color: rgba(31, 31, 31, 1);
			margin: 0 0 4px;
		}

		.roi-amount-row {
			display: flex;
			align-items: center;
			margin-bottom: 24px;
		}

		.roi-icon-btn {
			border: none;
			background: transparent;
			padding: 0;
			margin: 0;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 0;
		}

		.roi-icon-btn:disabled {
			cursor: not-allowed;
			opacity: 0.4;
		}

		.roi-icon-btn.roi-minus {
			margin-right: 8px;
		}

		.roi-icon-btn.roi-plus {
			margin-right: 20px;
		}

		.roi-amount-number {
			font-family: 'Inter Tight', sans-serif;
			font-weight: 400;
			font-size: 44px;
			line-height: 120%;
			letter-spacing: -0.02em;
			text-transform: lowercase;
			color: rgba(31, 31, 31, 1);
			margin-right: 8px;
			font-variant-numeric: tabular-nums;
			width: 5ch;
			min-width: 3ch;
			padding: 0;
			border: 0;
			background: transparent;
			outline: none;
			text-align: center;
			-moz-appearance: textfield;
			-webkit-appearance: none;
			appearance: none;
		}

		.roi-amount-number::-webkit-outer-spin-button,
		.roi-amount-number::-webkit-inner-spin-button {
			margin: 0;
			-webkit-appearance: none;
		}

		.roi-amount-unit {
			font-family: 'Inter Tight', sans-serif;
			font-weight: 400;
			font-size: 22px;
			line-height: 120%;
			letter-spacing: 0;
			text-transform: lowercase;
			color: rgba(31, 31, 31, 1);
		}

		.roi-term-number {
			font-family: 'Inter Tight', sans-serif;
			font-weight: 400;
			font-size: 44px;
			line-height: 120%;
			letter-spacing: -0.02em;
			text-transform: lowercase;
			color: rgba(31, 31, 31, 1);
			margin-bottom: 12px;
			font-variant-numeric: tabular-nums;
		}

		#roiTermUnit {
			font-size: 22px;
			letter-spacing: 0;
			vertical-align: middle;
		}

		.roi-term-slider {
			-webkit-appearance: none;
			appearance: none;
			display: block;
			width: 100%;
			height: 3px;
			border-radius: 2px;
			background: rgba(221, 221, 221, 1);
			outline: none;
			margin: 0 0 6px;
		}

		.roi-term-slider::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 24px;
			height: 24px;
			border-radius: 50px;
			background: radial-gradient(circle 8px at 50% 50%, var(--brand, rgba(165, 150, 0, 1)) 8px, transparent 8px);
			border: none;
			cursor: pointer;
		}

		.roi-term-slider::-moz-range-thumb {
			width: 24px;
			height: 24px;
			border-radius: 50px;
			background: radial-gradient(circle 8px at 50% 50%, var(--brand, rgba(165, 150, 0, 1)) 8px, transparent 8px);
			border: none;
			cursor: pointer;
		}

		.roi-term-slider::-moz-range-track {
			height: 3px;
			border-radius: 2px;
			background: rgba(221, 221, 221, 1);
		}

		.roi-term-slider:focus-visible {
			outline: 2px solid var(--brand);
			outline-offset: 4px;
		}

		.roi-term-ticks {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20px;
		}

		.roi-term-ticks span {
			font-family: 'Manrope', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 150%;
			letter-spacing: 0;
			color: rgba(149, 149, 158, 1);
		}

		.roi-disclaimer {
			font-family: 'Manrope', sans-serif;
			font-weight: 400;
			font-size: 12px;
			line-height: 150%;
			letter-spacing: 0;
			color: rgba(31, 31, 31, 1);
			opacity: 0.6;
			margin: 0;
		}

		/* ---- right panel ---- */

		.roi-header-row {
			display: flex;
			flex-wrap: wrap;
			gap: 60px;
			margin-bottom: 24px;
		}

		.roi-stat-label {
			font-family: 'Manrope', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 150%;
			letter-spacing: 0;
			color: rgba(255, 255, 255, 1);
			margin: 0 0 4px;
		}

		.roi-stat-value {
			font-family: 'Inter Tight', sans-serif;
			font-weight: 400;
			font-size: 44px;
			line-height: 120%;
			letter-spacing: -0.02em;
			text-transform: lowercase;
			color: rgba(255, 255, 255, 1);
			font-variant-numeric: tabular-nums;
		}

		.roi-tiles-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
		}

		.roi-tile {
			background: transparent;
			border-radius: 10px;
			padding: 20px;
			border: 1px solid rgba(255, 255, 255, 0.3);
		}

		.roi-disclaimer-dark {
			display: none;
			font-family: 'Manrope', sans-serif;
			font-weight: 400;
			font-size: 7.7px;
			line-height: 150%;
			letter-spacing: 0;
			color: rgba(255, 255, 255, 1);
			opacity: 0.6;
			margin: 20px 0 0;
		}

		.roi-tile-top {
			display: flex;
			align-items: center;
			margin-bottom: 8px;
			flex-wrap: wrap;
		}

		.roi-tile-value {
			font-family: 'Inter Tight', sans-serif;
			font-weight: 500;
			font-size: 20px;
			line-height: 110%;
			letter-spacing: 0;
			color: rgba(255, 255, 255, 1);
			margin-right: 8px;
			font-variant-numeric: tabular-nums;
		}

		.roi-tile-dot {
			width: 4px;
			height: 4px;
			border-radius: 2000px;
			background: rgba(255, 255, 255, 1);
			margin-right: 8px;
			flex: 0 0 auto;
		}

		.roi-tile-percent {
			font-family: 'Inter Tight', sans-serif;
			font-weight: 500;
			font-size: 20px;
			line-height: 110%;
			letter-spacing: 0;
			color: rgba(255, 255, 255, 1);
			font-variant-numeric: tabular-nums;
		}

		.roi-tile-label {
			font-family: 'Manrope', sans-serif;
			font-weight: 400;
			font-size: 14px;
			line-height: 120%;
			letter-spacing: 0;
			color: rgba(255, 255, 255, 1);
			opacity: 0.8;
		}

		.roi-tile-icon {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-left: 8px;
			flex: 0 0 auto;
		}

		@media (max-width: 860px) {

			.roi-shell {
				gap: 10px;
			}

			.roi-panel {
				padding: 20px;
				border-radius: 10px;
			}

			.roi-amount-row {
				margin-bottom: 28px;
			}

			.roi-icon-btn.roi-minus {
				margin-right: 6px;
			}

			.roi-icon-btn.roi-plus {
				margin-right: 14px;
			}

			.roi-amount-number {
				font-size: 33.8px;
				width: 5ch;
				min-width: 2ch;
				margin-right: 4px;
			}

			.roi-term-number {
				font-size: 33.8px;
				line-height: 120%;
			}

			.roi-header-row {
				margin-bottom: 20px;
				gap: 50px;
			}

			.roi-stat-label {
				font-size: 11px;
				margin-bottom: 8px;
			}

			.roi-amount-unit {
				font-size: 11px;
			}

			#roiTermUnit {
				font-size: 11px;
			}

			.roi-stat-value {
				font-size: 33.8px;
			}

			.roi-tiles-grid {
				grid-template-columns: 1fr;
			}

			.roi-tile {
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				justify-content: space-between;
				gap: 10px;
				padding: 16px;
			}

			.roi-tile-top {
				margin-bottom: 0;
				justify-content: flex-end;
				flex-wrap: wrap;
				flex-shrink: 0;
			}

			.roi-tile-value,
			.roi-tile-percent {
				font-size: 15px;
			}

			.roi-tile-value,
			.roi-tile-percent {
				white-space: nowrap;
			}

			.roi-tile-label {
				flex-shrink: 0;
				white-space: nowrap;
				text-align: center;
				font-size: 12px;
			}

			.roi-tiles-grid>.roi-tile:last-child .roi-tile-label {
				white-space: normal;
				flex-shrink: 1;
				min-width: 0;
				text-align: left;
			}

			.roi-tile-icon {
				display: none;
			}

			.roi-payback-suffix {
				display: none;
			}

			.roi-disclaimer {
				display: none;
			}

			.roi-disclaimer-dark {
				display: block;
			}
		}

		@media (max-width: 430px) {
			.roi-tile-top {
				flex: 1 1 auto;
				min-width: 0;
				flex-wrap: wrap;
				justify-content: flex-end;
				row-gap: 4px;
			}

			.roi-tile-value {
				flex-basis: 100%;
				text-align: right;
				margin-right: 0;
			}

			.roi-tile-dot {
				display: none;
			}
		}
	</style>