/* overrides.css — the deviation layer, printed after every cloned sheet.
   Rules here exist only where our structure had to differ from the source's. */


/* Телефон в инлайн-CTA статьи стоит на тёмной подложке, а `.text-rich a` (0,1,1)
   перекрывает `.phone-btn` и красит его в тёмно-синий — на фоне он не читается.
   У донора ровно так же; правка сознательная (владелец, 2026-09-04). */
.inner-cta a.phone-btn,
.inner-cta a.phone-btn:hover {
	color: var(--white);
}

/* До 479px сетка формы одноколоночная, но у двух полей остаётся десктопный `grid-column: span 2`
   (правила w-node-* донора), и они создают фантомную вторую колонку — отсюда боковой скролл
   на 79px. Схлопываем span на всех детях формы в этом же диапазоне (владелец, 2026-09-11). */
@media screen and (max-width: 479px) {
	/* !important: место в сетке донор задаёт правилами по id (#w-node-…), они сильнее классов. */
	.form > * {
		grid-column: span 1 / span 1 !important;
	}
}

/* Слайдер статей ничем не обрезается до самого <main>, поэтому соседние слайды тянут страницу
   вбок: 42px на главной и 4844px на странице юриста с 30 карточками. Секция кейсов в донорском
   css обрезана ровно так же (`.cases-section{overflow:hidden}`) — выравниваем. */
.posts-section {
	overflow: hidden;
}

/* Стартовое состояние анимаций (`translate3d(±100px,0,0)` из assets/js/main.js) сдвигает ещё не
   проигранные блоки вправо и растягивает документ на 28-50px — боковой скролл от 992px, где
   анимации и включаются. `clip`, а не `hidden`: внутри main есть sticky-aside, а `hidden` сделал
   бы из main скроллер и sticky бы умер. */
main {
	overflow-x: clip;
}

/* Мобильное меню: список растянут на всю высоту (`height:100%`), а nav раскладывает детей
   `space-between` — кнопка «Get a Consultation» улетает к нижней кромке, под панель браузера и
   плавающий виджет отзывов. Прижимаем содержимое к верху, список ужимаем по содержимому
   (прокрутка остаётся через max-height). Владелец, 2026-09-14. */
@media screen and (max-width: 1279px) {
	.header-nav {
		justify-content: flex-start;
		row-gap: 32px;
	}

	.header-nav .header-nav-list {
		height: auto;
		max-height: 100%;
		flex: 0 1 auto;
	}

	/* chrome-header.js:90 при открытии меню ставит кнопке инлайновый `margin: auto auto 0 auto`,
	   который и уносит её к нижней кромке. Инлайн бьётся только !important. */
	.header-nav > .button {
		margin-top: 0 !important;
	}
}

/* CF7 добавляет в ряд кнопок свой спиннер, которого у донора нет: 16px плюс отступ 16px — ряд
   и так впритык (у донора 104+124+86+отступы = ровно 358), поэтому телефон переносился в три
   строки. Выводим спиннер из потока: он остаётся на месте и виден при отправке, но ширину не ест. */
.form-btn-wrap {
	position: relative;
}

.form-btn-wrap .wpcf7-spinner {
	position: absolute;
}

/* The donor's form script prints its own "The … is invalid" under a field; CF7's tip for the
   same field landed on top of it. The tip stays for screen readers only, and a field CF7 marks
   invalid gets the donor's message too. */
.form-field-wrap > .wpcf7-not-valid-tip {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.form-field-wrap:has( > .form-field__input.wpcf7-not-valid) {
	border-color: #BF0D3E;
}

.form-field-wrap:has( > .form-field__input.wpcf7-not-valid)::after {
	padding: 0 8px;
	max-width: 100%;
}

/* На узких экранах ряд не помещается и телефон ломается посередине номера (у донора так же).
   Владелец попросил починить: разрешаем ряду переноситься и запрещаем рвать сам номер. */
@media screen and (max-width: 479px) {
	.form-btn-wrap {
		flex-wrap: wrap;
		row-gap: 16px;
	}

	.form-btn-wrap .phone-btn {
		white-space: nowrap;
	}
}

/* Планшеты — дыра в раскладке донора. `.hero-content.hp{top:320px}` задан без медиазапроса и
   снимается только на ≤767px, а колоночная раскладка контейнера и `order:-1` у фото тоже живут
   только там. В 768-1279 не срабатывает ни то, ни другое: сверху пустая полоса в 320px, фото
   уезжает под текст. Распространяем мобильную раскладку до брейкпоинта десктопа. */
@media screen and (min-width: 768px) and (max-width: 1279px) {
	.container.container-hero {
		flex-flow: column;
		display: flex;
	}

	.hero-img-wrap {
		order: -1;
	}

	.hero-content.hp,
	.hero-content.hp.texas,
	.hero-content.hp.texas.texas-legacy {
		top: 0;
	}
}

/* Секция «Services We Provide»: клик висит на .provide-item__header (sections/22-*-provide_section.js),
   а курсор там дефолтный — заголовок не читается как кликабельный. Заодно возвращаем обычный
   курсор тексту ответа в двух других аккордеонах: с 2026-09-14 клик по нему ничего не делает,
   а «лапа» обещала обратное. */
.provide-item__header {
	cursor: pointer;
}

.dropdown-item__answer,
.faq-item__answer {
	cursor: auto;
}

/* Карточки кейсов нигде не ссылки (`.cases-item__link` — div, у типа case_study нет своих url),
   а донорский лист assets/css/head/85616711.css на /case-studies даёт им ховер: тёмный оверлей
   `::before` и белый текст с подчёркиванием. Обещание кликабельности снято (владелец, 2026-09-14),
   остальные страницы этот лист не грузят, так что правка касается только хаба. */
.cases-hub__list .cases-item:hover::before {
	opacity: 0;
}

.cases-hub__list .cases-item:hover .cases-item__title {
	color: var(--373a62);
}

.cases-hub__list .cases-item:hover .cases-item__text {
	color: #333;
}

.cases-hub__list .cases-item__link:hover > .cases-item__title {
	text-decoration-color: #0000;
}

/* Декоративное водяное слово живёт при opacity .05 — по дизайну донора, но для WAVE это текст с
   нечитаемым контрастом. Переносим его в сгенерированный контент: пикселей это не меняет, а в DOM
   текстового узла больше нет (владелец, 2026-09-14). */
.bg-text::before {
	content: attr(data-text);
}

/* Список городов и карта лежат в одном флекс-ряду с `align-items: center`, а высота списка
   меняется от округа к округу (324/208/92px при карте в 482) — от этого список прыгает вверх-вниз
   при переключении вкладок. Прижимаем к верхнему краю; карта самая высокая, её это не двигает.
   Только от 992px: ниже ряд превращается в колонку и align-items там отвечает за ширину. */
@media screen and (min-width: 992px) {
	.area-serve-wrapper {
		align-items: flex-start;
	}
}

/* Строка под заголовком секции отзывов — поле наше, у донора такого элемента нет, поэтому и
   стиля для него в main.css нет. Берём типографику соседних секций: 856px по центру, как у
   `.team-header`, и отступ 24px, как между `.posts-content__title` и его текстом. */
.testimonials-header__text {
	color: var(--grey-txt);
	max-width: 856px;
	margin: 24px auto 0;
}

/* Донор с момента снятия main.css добавил в свой бандл утилитарные классы белого текста и
   раздаёт их героям тёмных страниц. У нас без них заголовок и ссылка в герое
   /titles-and-deeds-attorneys-texas и /trust-lawyers-new-braunfels-tx выходили тёмно-синими на
   тёмном фоне. Правило перенесено с донора дословно (2026-09-16). */
.link-2,
.text-block-2,
.text-block-3,
.link-3,
.heading,
.heading-2,
.link-4,
.text-block-4,
.text-block-5 {
	color: var(--white);
}

/* Светлая кнопка внутри текстового блока стоит на белом фоне, а донорский ховер снимает заливку
   и красит текст в белый — кнопка пропадает. У донора ровно так же; владелец попросил починить
   (2026-09-16). Берём ховер соседнего варианта `.button--bordered`: заливка фирменным красным. */
.text-rich > .button.button--light:hover {
	background-color: var(--bf0d3e);
	border-color: var(--bf0d3e);
	color: var(--white);
}

/* Донор завёл /texas-residential-real-estate-attorneys уже после снятия main.css, поэтому
   grid-правил для w-node-…-818d2972 в нём нет и карточки «Why» с лид-абзацем area-serve
   встают не по сетке. Правила перенесены с донора дословно (2026-09-16). */
@media screen and (min-width: 1280px) {
	#w-node-f6de39c9-39ec-c895-a927-dc69864ba398-818d2972 {
		grid-area: 2 / 1 / 3 / 2;
	}
}

@media screen and (max-width: 991px) {
	#w-node-_77c88966-e98d-4afa-4844-45965df27eed-818d2972,
	#w-node-_084f58bf-fcff-9ad7-0839-800d604c9490-818d2972,
	#w-node-ff82aae0-efc7-3a17-f120-45ea438d3866-818d2972,
	#w-node-_46138703-165d-3d2c-26e1-3324d40bebae-818d2972 {
		grid-area: span 1 / span 2 / span 1 / span 2;
	}
}

/* Тумблер «Eyebrow is the H1»: надзаголовок печатается тегом h1 внутри блока `.hero-title`, а сам
   блок становится div — и теряет типографику h1, которую main.css задаёт по тегу, а не по классу.
   Возвращаем её блоку и убираем браузерный отступ у h1 внутри (2026-09-16). */
div.hero-title {
	font-family: RedHatDisplay, sans-serif;
	font-size: var(--h1);
	font-weight: 500;
	line-height: 110%;
}

@media screen and (max-width: 767px) {
	div.hero-title {
		font-size: var(--h1-mobile);
	}
}

h1.hero-min-title {
	margin-top: 0;
}

/* Текст row-секции печатается абзацами (см. template-parts/sections/row_section.php); у донора это
   одна строка через `<br>`, и разрыв был виден только как межстрочный интервал (владелец, 2026-09-16). */
.row-section__text p:not(:last-child) {
	margin-bottom: 16px;
}

/* CTA тянется во всю ширину окна (макет в фигме), тогда как донорский `.cta-section` упирается в
   max-width:1440px и на широких экранах стоит по центру с полями. Колонки и их содержимое у донора
   тоже с потолком (601 и 839px) — снимаем, иначе в растянутой сетке между красным блоком и фото
   остаётся белая дыра. Ниже 1441px ограничение и так не срабатывало, поэтому правило живёт только
   выше: на обычных экранах вёрстка донорская (владелец, 2026-09-16). */
@media screen and (min-width: 1441px) {
	.cta-section {
		max-width: none;
		grid-template-columns: minmax(200px, 601fr) minmax(200px, 839fr);
	}

	.cta-content,
	.cta-img-wrap {
		max-width: none;
	}
}

/* Страница /residential-real-estate-attorneys-seguin-tx заведена у донора после снятия main.css,
   поэтому её grid-правил по `#w-node-…-770f3aab` в нашей копии нет: лид и нижняя строка секции
   «зона обслуживания» не растягивались на обе колонки и текст справа от карты ломался.
   Перенесено дословно из живого бандла донора (2026-09-16). */
#w-node-a50eb803-18e0-7bdd-d05a-6cdeae42d486-770f3aab,
#w-node-bfd7313c-fc72-33ff-470e-b2c3bb164f86-770f3aab {
	grid-area: span 1 / span 2 / span 1 / span 2;
}

@media screen and (max-width: 991px) {
	#w-node-ca37d72d-eb50-b71a-61b4-5f2b0871ecdc-770f3aab,
	#w-node-ca37d72d-eb50-b71a-61b4-5f2b0871ecd6-770f3aab,
	#w-node-ca37d72d-eb50-b71a-61b4-5f2b0871ecc4-770f3aab,
	#w-node-ca37d72d-eb50-b71a-61b4-5f2b0871ecca-770f3aab {
		grid-area: span 1 / span 2 / span 1 / span 2;
	}
}

@media screen and (max-width: 479px) {
	#w-node-bfd7313c-fc72-33ff-470e-b2c3bb164f86-770f3aab {
		grid-column: span 1 / span 1;
	}
}

/* Ссылка в таблице статьи: у ячейки line-height 20px при кегле 18px, строки налезают друг на
   друга (замер: строчные боксы перекрываются на 4px), и подчёркивание ложится на слово ниже.
   У донора так же; владелец попросил починить (2026-09-16, уточнено 2026-09-18). Даём ячейке
   нормальный интерлиньяж и прижимаем линию к своей строке. */
.text-rich table td,
.text-rich table th {
	line-height: 1.35;
}

.text-rich table a {
	text-underline-offset: 2px;
}

/* Маркеры простых списков в тексте статьи висели левее колонки: у донора `ul` без отступа, а
   маркер рисуется снаружи. Даём списку отступ, чтобы точки стояли внутри поля, как в макете
   (владелец, 2026-09-16). Списки со своим оформлением (`.dropdown-list`, `.inner-stared-list`)
   не затрагиваются — у них класс есть. */
.text-rich ul:not([class]) {
	padding-left: 20px;
}

/* Внутри ответов гармошки у пунктов своя разметка от донора (отступ 30px и точка в ::before) —
   туда наш отступ не нужен. */
.dropdown-item__answer ul:not([class]) {
	padding-left: 0;
}

/* Две ссылки подряд в тексте блока у донора стоят вплотную. Разводим их (владелец, 2026-09-16). */
.text-rich > a + a {
	margin-left: 16px;
}

/* Страница /commercial-real-estate-attorneys-seguin-tx заведена у донора после снятия main.css,
   поэтому её grid-правил по `#w-node-…-9795ddf4` в нашей копии нет. Перенесено дословно из
   живого бандла донора (2026-09-18). */
#w-node-a50eb803-18e0-7bdd-d05a-6cdeae42d486-9795ddf4,
#w-node-bfd7313c-fc72-33ff-470e-b2c3bb164f86-9795ddf4 {
	grid-area: span 1 / span 2 / span 1 / span 2;
}

@media screen and (max-width: 991px) {
	#w-node-ca67d834-0ad2-a6d7-f224-19215621e166-9795ddf4,
	#w-node-_98450be0-ec20-b5e6-c6a8-8af9511052cb-9795ddf4,
	#w-node-_77c88966-e98d-4afa-4844-45965df27eed-9795ddf4,
	#w-node-e1eee36b-ccd7-d4d1-d57c-0411455e5798-9795ddf4 {
		grid-area: span 1 / span 2 / span 1 / span 2;
	}
}

@media screen and (max-width: 479px) {
	#w-node-bfd7313c-fc72-33ff-470e-b2c3bb164f86-9795ddf4 {
		grid-column: span 1 / span 1;
	}
}

/* Светлая кнопка на тёмной подложке: донорский ховер снимает заливку и оставляет белый текст на
   белой рамке — кнопка «растворяется». Держим заливку белой и красим текст фирменным красным,
   так ховер виден и кнопка не пропадает (владелец, 2026-09-18). */
.inner-cta .button.button--light:hover,
.aside .button.button--light:hover {
	background-color: var(--white);
	border-color: var(--white);
	color: var(--bf0d3e);
}

/* Калькулятор чистых поступлений в посте «home-sale-net-proceeds-calculator»: разметку с
   префиксом `tnpc-` вставили в контент без стилей и скрипта — ни у нас, ни у донора кода для
   неё нет. Оформление и логика написаны здесь и в assets/js/main.js (владелец, 2026-09-18). */
.tnpc-wrap {
	background-color: var(--white);
	border: 1px solid var(--stroke);
	margin: 32px 0;
	padding: 32px;
}

.tnpc-wrap *,
.tnpc-wrap *:before,
.tnpc-wrap *:after {
	box-sizing: border-box;
}

.tnpc-header {
	border-bottom: 1px solid var(--stroke);
	margin-bottom: 28px;
	padding-bottom: 20px;
}

.tnpc-wrap h2.tnpc-header__title {
	color: var(--373a62);
	font-family: RedHatDisplay, sans-serif;
	font-size: var(--h4);
	font-weight: 600;
	line-height: 120%;
	margin: 0;
}

.tnpc-layout {
	align-items: start;
	display: grid;
	grid-column-gap: 24px;
	grid-row-gap: 24px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.tnpc-wrap p {
	color: var(--grey-txt);
	font-family: Manrope, sans-serif;
	font-size: 14px;
	line-height: 160%;
	margin: 0;
}

/* Поля ввода */

.tnpc-group-label {
	color: var(--373a62);
	font-family: RedHatDisplay, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: 16px;
	text-transform: uppercase;
}

.tnpc-group-label__opt {
	color: var(--grey-txt);
	font-family: Manrope, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	opacity: .7;
	text-transform: none;
}

.tnpc-rule {
	background-color: var(--stroke);
	height: 1px;
	margin: 24px 0;
	opacity: .7;
}

.tnpc-field {
	margin-bottom: 18px;
}

.tnpc-field-row {
	display: grid;
	grid-column-gap: 16px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.tnpc-label-row {
	align-items: center;
	display: flex;
	grid-column-gap: 8px;
	margin-bottom: 8px;
	position: relative;
}

.tnpc-label {
	color: var(--grey-txt);
	font-family: Manrope, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 140%;
}

.tnpc-input-wrap {
	align-items: center;
	background-color: var(--white);
	border: 1px solid var(--stroke);
	display: flex;
	grid-column-gap: 8px;
	height: 52px;
	padding: 0 16px;
	transition: border-color .3s ease-out;
}

.tnpc-input-wrap:focus-within {
	border-color: var(--373a62);
}

.tnpc-input-wrap--error {
	border-color: var(--bf0d3e);
}

.tnpc-affix {
	color: var(--grey-txt);
	flex: none;
	font-family: Manrope, sans-serif;
	font-size: var(--s);
	font-weight: 600;
	opacity: .6;
}

.tnpc-wrap input.tnpc-input {
	-webkit-appearance: none;
	appearance: none;
	background-color: #0000;
	border: 0;
	color: var(--grey-txt);
	flex: 1;
	font-family: Manrope, sans-serif;
	font-size: var(--s);
	font-weight: 500;
	height: 100%;
	margin: 0;
	min-width: 0;
	outline: 0;
	padding: 0;
}

.tnpc-error {
	color: var(--bf0d3e);
	display: block;
	font-family: Manrope, sans-serif;
	font-size: 13px;
	line-height: 140%;
	margin-top: 6px;
}

.tnpc-error:empty {
	display: none;
}

/* Подсказки «i» */

.tnpc-tip {
	display: inline-flex;
	flex: none;
}

.tnpc-wrap button.tnpc-tip__btn {
	align-items: center;
	background-color: #0000;
	border: 1px solid var(--stroke);
	border-radius: 50%;
	color: var(--373a62);
	cursor: pointer;
	display: flex;
	font-family: RedHatDisplay, sans-serif;
	font-size: 12px;
	font-weight: 700;
	height: 20px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out;
	width: 20px;
}

.tnpc-wrap button.tnpc-tip__btn:hover,
.tnpc-wrap button.tnpc-tip__btn[aria-expanded="true"] {
	background-color: var(--373a62);
	border-color: var(--373a62);
	color: var(--white);
}

.tnpc-tip__box {
	background-color: var(--white);
	border: 1px solid var(--stroke);
	box-shadow: 0 8px 24px #373a6229;
	color: var(--grey-txt);
	display: none;
	font-family: Manrope, sans-serif;
	font-size: 13px;
	font-weight: 500;
	left: 0;
	line-height: 150%;
	min-width: 220px;
	padding: 12px 14px;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 20;
}

.tnpc-tip__btn[aria-expanded="true"] + .tnpc-tip__box {
	display: block;
}

.tnpc-field-row .tnpc-field:last-child .tnpc-tip__box {
	left: auto;
}

/* Кнопки */

.tnpc-actions {
	display: flex;
	flex-wrap: wrap;
	grid-column-gap: 12px;
	grid-row-gap: 12px;
	margin-top: 24px;
}

.tnpc-wrap button.tnpc-btn {
	border: 1px solid #0000;
	cursor: pointer;
	font-family: RedHatDisplay, sans-serif;
	font-size: var(--s);
	font-weight: 600;
	line-height: 150%;
	padding: 17px 28px;
	text-align: center;
	transition: color .3s ease-out, background-color .3s ease-out, border-color .3s ease-out;
}

.tnpc-wrap button.tnpc-btn--calc {
	background-color: var(--bf0d3e);
	border-color: var(--bf0d3e);
	color: var(--white);
	flex: 1;
}

.tnpc-wrap button.tnpc-btn--calc:hover {
	background-color: var(--white);
	color: var(--bf0d3e);
}

.tnpc-wrap button.tnpc-btn--reset {
	background-color: var(--white);
	border-color: var(--stroke);
	color: var(--373a62);
	flex: none;
}

.tnpc-wrap button.tnpc-btn--reset:hover {
	border-color: var(--373a62);
}

/* Результат */

/* `[hidden]` и класс одной специфичности — без явного правила наш `display` победил бы по
   порядку и скрытая панель осталась бы на экране. */
.tnpc-empty[hidden],
.tnpc-results[hidden] {
	display: none;
}

.tnpc-empty {
	align-items: center;
	background-color: var(--bg);
	border: 1px dashed var(--stroke);
	display: flex;
	flex-direction: column;
	grid-row-gap: 16px;
	padding: 48px 24px;
	text-align: center;
}

.tnpc-wrap .tnpc-empty p {
	max-width: 260px;
}

.tnpc-results {
	display: grid;
	grid-row-gap: 20px;
}

.tnpc-net-card {
	background-color: var(--373a62);
	padding: 28px 24px;
	text-align: center;
	transition: background-color .3s ease-out;
}

.tnpc-net-card--negative {
	background-color: var(--bf0d3e);
}

.tnpc-net-card__label {
	color: var(--light-txt);
	font-family: Manrope, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	opacity: .8;
	text-transform: uppercase;
}

.tnpc-net-card__amount {
	color: var(--white);
	font-family: RedHatDisplay, sans-serif;
	font-size: var(--h4);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 115%;
	margin: 10px 0 6px;
	word-break: break-word;
}

.tnpc-net-card__sub {
	color: var(--light-txt);
	font-family: Manrope, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 150%;
	opacity: .75;
}

.tnpc-breakdown {
	border: 1px solid var(--stroke);
}

.tnpc-breakdown__head {
	align-items: center;
	background-color: var(--bg);
	border-bottom: 1px solid var(--stroke);
	color: var(--373a62);
	display: flex;
	font-family: RedHatDisplay, sans-serif;
	font-size: 15px;
	font-weight: 600;
	grid-column-gap: 12px;
	justify-content: space-between;
	padding: 14px 16px;
}

.tnpc-breakdown__total {
	font-family: Manrope, sans-serif;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.tnpc-wrap ul.tnpc-breakdown__list {
	list-style: none;
	margin: 0;
	padding: 0 16px;
}

.tnpc-row {
	align-items: baseline;
	border-bottom: 1px solid var(--stroke);
	display: flex;
	grid-column-gap: 12px;
	justify-content: space-between;
	padding: 12px 0;
}

.tnpc-row:last-child {
	border-bottom: 0;
}

.tnpc-row__name {
	color: var(--grey-txt);
	font-family: Manrope, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 150%;
}

.tnpc-row__amt,
.tnpc-row__comm-amt {
	color: var(--373a62);
	font-family: Manrope, sans-serif;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.tnpc-row__comm {
	align-items: baseline;
	display: inline-flex;
	grid-column-gap: 8px;
}

.tnpc-row__pct {
	color: var(--grey-txt);
	font-family: Manrope, sans-serif;
	font-size: 12px;
	font-weight: 500;
	opacity: .7;
	white-space: nowrap;
}

.tnpc-formula {
	background-color: var(--bg);
	border: 1px solid var(--stroke);
	padding: 16px;
}

.tnpc-formula__title {
	color: var(--373a62);
	font-family: RedHatDisplay, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.tnpc-formula__row {
	align-items: baseline;
	color: var(--grey-txt);
	display: flex;
	font-family: Manrope, sans-serif;
	font-size: 14px;
	font-weight: 500;
	grid-column-gap: 12px;
	justify-content: space-between;
	padding: 7px 0;
}

.tnpc-formula__val {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.tnpc-formula__row--sub .tnpc-formula__val {
	color: var(--bf0d3e);
}

.tnpc-formula__row--result {
	border-top: 1px solid var(--stroke);
	color: var(--373a62);
	font-size: var(--s);
	font-weight: 700;
	margin-top: 6px;
	padding-top: 12px;
}

.tnpc-wrap p.tnpc-result-note {
	font-size: 12px;
	line-height: 160%;
	opacity: .75;
}

@media screen and (max-width: 991px) {
	.tnpc-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.tnpc-empty {
		padding: 32px 24px;
	}
}

@media screen and (max-width: 767px) {
	.tnpc-wrap {
		padding: 24px 20px;
	}

	.tnpc-wrap h2.tnpc-header__title {
		font-size: var(--h4-mobile);
	}

	.tnpc-net-card__amount {
		font-size: var(--h3-mobile);
	}
}

@media screen and (max-width: 479px) {
	.tnpc-wrap {
		padding: 20px 16px;
	}

	.tnpc-field-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.tnpc-field-row .tnpc-field:last-child .tnpc-tip__box {
		left: 0;
	}

	.tnpc-actions {
		flex-direction: column;
	}

	.tnpc-wrap button.tnpc-btn {
		width: 100%;
	}
}