/* ===========================================================================
   «Настройка Nesting и оптимизация мебельного производства»
   information/nwa_nesting — 13.09.2026

   Оформление взято у страницы NWA Viewer и карточек каталога, чтобы страница
   не выбивалась из сайта: белые блоки на светлом поле, рамка #E2E2DE, бежевый
   акцент #CD802D, при наведении рамка светлеет до #DEA568 и блок поднимается.

   ⚠️ Исходная инфографика была тёмно-фиолетовой. Повторять её палитру здесь
   НЕ нужно: остальной сайт светлый, и одна тёмная страница читалась бы как
   чужая. Фиолетовый остался только на самих фотографиях, вырезанных из неё.

   ⚠️ Префикс селекторов — `body:is(.nwa-page, .nwa-home)`, как в nwa-viewer.css.
   Здесь он строго говоря избыточен (страница всегда nwa-page), но правило
   держим одно на обе страницы программ: скопируют блок отсюда туда — и он
   сразу заработает. Специфичность та же, что у `body.nwa-page`.
   =========================================================================== */

body:is(.nwa-page, .nwa-home) .nwa-ns{
	--ns-text:#2A2C2E;
	--ns-dim:#5A5D60;
	--ns-line:#E2E2DE;
	--ns-card:#FFFFFF;
	--ns-accent:#DE4E10;
	--ns-accent-dark:#BD420E;
	--ns-accent-hot:#F06529;

	padding:8px 15px 72px;
	color:var(--ns-text);
	font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

body:is(.nwa-page, .nwa-home) .nwa-ns .breadcrumb{
	margin:0 0 18px;
	padding:0;
	background:none;
}

/* --- Заголовки ------------------------------------------------------------ */

body:is(.nwa-page, .nwa-home) .nwa-ns-h1{
	margin:0 0 16px;
	font-size:38px;
	font-weight:300;
	line-height:1.2;
	letter-spacing:.02em;
	text-transform:uppercase;
	color:var(--ns-text);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-h2{
	margin:0 0 10px;
	font-size:26px;
	font-weight:300;
	line-height:1.25;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--ns-text);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-section{margin:0 0 64px}
body:is(.nwa-page, .nwa-home) .nwa-ns-section__lead{
	max-width:860px;
	margin:0 0 28px;
	font-size:16px;
	line-height:1.6;
	color:var(--ns-dim);
}

/* --- Первый экран --------------------------------------------------------- */

body:is(.nwa-page, .nwa-home) .nwa-ns-hero{
	display:grid;
	grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
	gap:36px;
	align-items:center;
	margin:0 0 64px;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-hero__eyebrow{
	margin:0 0 12px;
	font-size:13px;
	font-weight:500;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ns-accent-dark);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-hero__lead{
	margin:0 0 22px;
	font-size:17px;
	line-height:1.6;
	color:var(--ns-dim);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-hero__media img{
	display:block;
	width:100%;
	height:auto;
	border:1px solid var(--ns-line);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-hero__actions{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-top:26px;
}

/* Перечень возможностей. Маркер — своя черта, а не точка списка: точки темы
   приходят картинкой и на светлом фоне почти не видны. */
body:is(.nwa-page, .nwa-home) .nwa-ns-bullets{
	list-style:none;
	margin:0;
	padding:0;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-bullets li{
	position:relative;
	padding:0 0 0 22px;
	margin:0 0 11px;
	font-size:15px;
	line-height:1.5;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-bullets li:before{
	content:'';
	position:absolute;
	left:0;
	top:9px;
	width:10px;
	height:2px;
	background:var(--ns-accent);
}

/* --- Кнопки --------------------------------------------------------------- */

body:is(.nwa-page, .nwa-home) .nwa-ns-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:13px 24px;
	border:1px solid var(--ns-accent-dark);
	background:transparent;
	color:var(--ns-accent-dark) !important;
	font-size:14px;
	font-weight:600;
	letter-spacing:.04em;
	text-transform:uppercase;
	text-decoration:none !important;
	cursor:pointer;
	transition:background .2s ease, color .2s ease, border-color .2s ease;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-btn:hover{
	border-color:var(--ns-accent-hot);
	color:var(--ns-accent-hot) !important;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-btn--main{
	background:var(--ns-accent-dark);
	color:#fff !important;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-btn--main:hover{
	background:var(--ns-accent-hot);
	border-color:var(--ns-accent-hot);
	color:#fff !important;
}

/* --- Тарифы --------------------------------------------------------------- */

body:is(.nwa-page, .nwa-home) .nwa-ns-plans{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:22px;
	align-items:start;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-plan{
	position:relative;
	display:flex;
	flex-direction:column;
	height:100%;
	padding:22px;
	background:var(--ns-card);
	border:1px solid var(--ns-line);
	transition:border-color .2s ease, transform .2s ease;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-plan:hover{
	border-color:#F38454;
	transform:translateY(-3px);
}
/* Выделен только рамкой и подписью — заливкой было бы слишком громко рядом с
   двумя другими тарифами. */
body:is(.nwa-page, .nwa-home) .nwa-ns-plan--best{border-color:var(--ns-accent)}
body:is(.nwa-page, .nwa-home) .nwa-ns-plan__flag{
	position:absolute;
	top:-11px;
	left:22px;
	padding:4px 10px;
	background:var(--ns-accent-dark);
	color:#fff;
	font-size:11px;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-plan__head{
	display:flex;
	align-items:center;
	gap:14px;
	margin:0 0 16px;
	padding:0 0 16px;
	border-bottom:1px solid var(--ns-line);
}
/* ⚠️ Скругление 22%, а не в пикселях, и это важно.
   Плашки тарифов вырезаны из инфографики прямоугольником, а сами скруглены
   по-иконочному (радиус примерно 22% стороны). При меньшем радиусе в углах
   картинки оставался тёмный фон инфографики — тонкая тёмная окантовка, которую
   владелец и заметил. Процент держит скругление совпадающим при любом размере
   иконки; менять на пиксели нельзя. */
body:is(.nwa-page, .nwa-home) .nwa-ns-plan__icon{
	flex:0 0 auto;
	width:64px;
	height:auto;
	border-radius:22%;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-plan__title{
	margin:0 0 4px;
	font-size:17px;
	font-weight:600;
	line-height:1.3;
	color:var(--ns-text);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-plan__price{
	font-size:24px;
	font-weight:700;
	color:var(--ns-accent-dark);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-plan__note{
	margin-top:4px;
	font-size:12px;
	color:var(--ns-dim);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-plan__list{
	list-style:none;
	margin:0 0 18px;
	padding:0;
	flex:1 1 auto;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-plan__list li{
	position:relative;
	margin:0 0 10px;
	padding:0 0 0 20px;
	font-size:14px;
	line-height:1.5;
	color:var(--ns-text);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-plan__list li:before{
	content:'';
	position:absolute;
	left:2px;
	top:6px;
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--ns-accent);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-plan__btn{width:100%}

/* --- Шаги внедрения ------------------------------------------------------- */

body:is(.nwa-page, .nwa-home) .nwa-ns-steps{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:20px;
	list-style:none;
	margin:0 0 20px;
	padding:0;
	counter-reset:none;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-step{
	background:var(--ns-card);
	border:1px solid var(--ns-line);
	padding:0 0 16px;
	transition:border-color .2s ease, transform .2s ease;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-step:hover{
	border-color:#F38454;
	transform:translateY(-3px);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-step__media{
	position:relative;
	margin:0 0 12px;
	line-height:0;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-step__media img{
	display:block;
	width:100%;
	height:auto;
}
/* Номер шага — поверх снимка: на инфографике порядок задавали стрелки, и на
   узком экране он рассыпался. */
body:is(.nwa-page, .nwa-home) .nwa-ns-step__n{
	position:absolute;
	left:0;
	top:0;
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	background:var(--ns-accent-dark);
	color:#fff;
	font-size:15px;
	font-weight:700;
	line-height:1;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-step__title{
	margin:0 14px 6px;
	font-size:16px;
	font-weight:600;
	color:var(--ns-text);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-step__text{
	margin:0 14px;
	font-size:14px;
	line-height:1.5;
	color:var(--ns-dim);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-steps__after{
	margin:0 0 28px;
	font-size:15px;
	line-height:1.6;
	color:var(--ns-dim);
}

/* --- Широкие фотографии --------------------------------------------------- */

body:is(.nwa-page, .nwa-home) .nwa-ns-wide{
	margin:0 0 28px;
	line-height:0;
	border:1px solid var(--ns-line);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-wide img{
	display:block;
	width:100%;
	height:auto;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-wide--flat{margin-bottom:24px}

/* --- Программы ------------------------------------------------------------ */

body:is(.nwa-page, .nwa-home) .nwa-ns-tools{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
	gap:20px;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-tool{
	display:flex;
	flex-direction:column;
	padding:20px;
	background:var(--ns-card);
	border:1px solid var(--ns-line);
	transition:border-color .2s ease, transform .2s ease;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-tool:hover{
	border-color:#F38454;
	transform:translateY(-3px);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-tool__title{
	margin:0 0 10px;
	font-size:17px;
	font-weight:600;
	color:var(--ns-text);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-tool__text{
	margin:0;
	font-size:14px;
	line-height:1.55;
	color:var(--ns-dim);
	flex:1 1 auto;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-tool__more{
	margin-top:14px;
	font-size:14px;
	font-weight:600;
	color:var(--ns-accent-dark) !important;
	text-decoration:none !important;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-tool__more:hover{color:var(--ns-accent-hot) !important}
body:is(.nwa-page, .nwa-home) .nwa-ns-tool--link{border-color:var(--ns-accent)}

/* --- Дополнительные услуги ------------------------------------------------ */

body:is(.nwa-page, .nwa-home) .nwa-ns-extras{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
	gap:20px;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-extra{
	display:flex;
	flex-direction:column;
	padding:20px;
	background:var(--ns-card);
	border:1px solid var(--ns-line);
	transition:border-color .2s ease, transform .2s ease;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-extra:hover{
	border-color:#F38454;
	transform:translateY(-3px);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-extra__title{
	margin:0 0 10px;
	font-size:16px;
	font-weight:600;
	line-height:1.35;
	color:var(--ns-text);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-extra__text{
	margin:0 0 16px;
	font-size:14px;
	line-height:1.55;
	color:var(--ns-dim);
	flex:1 1 auto;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-extra__price{
	font-size:20px;
	font-weight:700;
	color:var(--ns-accent-dark);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-extra__free{
	margin-top:4px;
	font-size:13px;
	color:var(--ns-accent-hot);
}

/* --- Модули «Базис» ------------------------------------------------------- */

body:is(.nwa-page, .nwa-home) .nwa-ns-modules{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
	gap:16px;
	margin:0 0 16px;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-module{
	display:flex;
	align-items:center;
	gap:14px;
	padding:14px;
	background:var(--ns-card);
	border:1px solid var(--ns-line);
	transition:border-color .2s ease;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-module:hover{border-color:#F38454}
body:is(.nwa-page, .nwa-home) .nwa-ns-module__icon{
	flex:0 0 auto;
	width:48px;
	height:48px;
	object-fit:cover;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-module__title{
	margin:0 0 2px;
	font-size:15px;
	font-weight:600;
	color:var(--ns-text);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-module__price{
	font-size:15px;
	font-weight:700;
	color:var(--ns-accent-dark);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-note{
	margin:0;
	font-size:13px;
	line-height:1.5;
	color:var(--ns-dim);
}

/* --- Контакты ------------------------------------------------------------- */

body:is(.nwa-page, .nwa-home) .nwa-ns-contacts{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
	gap:16px;
	margin:0 0 24px;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-contact{
	display:block;
	padding:16px 18px;
	background:var(--ns-card);
	border:1px solid var(--ns-line);
	text-decoration:none !important;
	transition:border-color .2s ease, transform .2s ease;
}
body:is(.nwa-page, .nwa-home) .nwa-ns-contact:hover{
	border-color:#F38454;
	transform:translateY(-2px);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-contact__label{
	display:block;
	margin:0 0 4px;
	font-size:12px;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--ns-dim);
}
body:is(.nwa-page, .nwa-home) .nwa-ns-contact__value{
	display:block;
	font-size:16px;
	font-weight:600;
	color:var(--ns-text);
}

/* --- Узкие экраны --------------------------------------------------------- */

@media (max-width:1199px){
	body:is(.nwa-page, .nwa-home) .nwa-ns-steps{grid-template-columns:repeat(3, minmax(0, 1fr))}
	body:is(.nwa-page, .nwa-home) .nwa-ns-h1{font-size:32px}
}

@media (max-width:991px){
	body:is(.nwa-page, .nwa-home) .nwa-ns-hero{grid-template-columns:1fr;gap:24px}
	/* Фото уходит под текст: на планшете колонка становится слишком узкой, и
	   станок превращается в полоску. */
	body:is(.nwa-page, .nwa-home) .nwa-ns-hero__media{order:2}
	body:is(.nwa-page, .nwa-home) .nwa-ns-plans{grid-template-columns:1fr}
	body:is(.nwa-page, .nwa-home) .nwa-ns-steps{grid-template-columns:repeat(2, minmax(0, 1fr))}
	body:is(.nwa-page, .nwa-home) .nwa-ns-plan--best{order:-1}
}

@media (max-width:575px){
	body:is(.nwa-page, .nwa-home) .nwa-ns{padding-bottom:48px}
	body:is(.nwa-page, .nwa-home) .nwa-ns-h1{font-size:26px}
	body:is(.nwa-page, .nwa-home) .nwa-ns-h2{font-size:21px}
	body:is(.nwa-page, .nwa-home) .nwa-ns-steps{grid-template-columns:1fr}
	body:is(.nwa-page, .nwa-home) .nwa-ns-section{margin-bottom:44px}
	body:is(.nwa-page, .nwa-home) .nwa-ns-hero__actions .nwa-ns-btn{flex:1 1 100%}
}