/*
Дополнительные блоки лендинга: калькулятор сметы, лента доверия, витрина услуг,
прайс-таблица, чек-лист приёмки, шторка «до/после», онлайн-запись, акции,
блок для юрлиц, хлебные крошки и перелинковка.

Продолжение style.css: файл подключается после него и использует те же токены
(цвета, радиусы, шрифты, тени) из :root. Своих переменных не вводит.
*/

/* ------------------------------------------------------------ калькулятор */
.smeta {
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.smeta__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 20px 26px;
	background: var(--blue-050);
}

.smeta__head b {
	font-family: var(--font-head);
	font-size: 20px;
	font-weight: 700;
}

.smeta__head span {
	color: var(--muted);
	font-size: 15px;
}

.smeta__body { padding: 22px 26px 6px; }

.smeta__field { margin-bottom: 16px; }

.smeta__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 9px;
	color: var(--muted);
	font-size: 15px;
}

/* Пояснение про студию и метры: кнопкой, а не третьей сноской в теле формы. */
.smeta__i {
	flex: none;
	width: 20px;
	height: 20px;
	padding: 0;
	background: var(--blue-050);
	border: 0;
	border-radius: 50%;
	color: var(--blue);
	font-family: var(--font-text);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	cursor: help;
}

.smeta__i:hover,
.smeta__i[aria-expanded='true'] { background: var(--blue-300); }

.seg {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	padding: 5px;
	background: var(--blue-050);
	border-radius: var(--radius-pill);
}

.seg button {
	min-height: 44px;
	padding: 0 5px;
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 15px;
	transition: background-color 0.2s ease;
}

.seg button:hover { background: #e7f3ff; }

.seg button[aria-pressed='true'] {
	background: var(--blue-300);
	font-weight: 500;
}

/*
 * Комнаты и площадь стоят в одной плашке: раньше поле «Площадь» занимало
 * отдельные 110 px ради случая, который нужен от 100 м².
 */
.rowline {
	display: flex;
	gap: 6px;
	padding: 5px;
	background: var(--blue-050);
	border-radius: var(--radius-pill);
}

.rowline .rooms {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 5px;
	min-width: 0;
}

.rowline .rooms button {
	min-height: 44px;
	padding: 0 4px;
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 16px;
	transition: background-color 0.2s ease;
}

.rowline .rooms button:hover { background: #e7f3ff; }

.rowline .rooms button[aria-pressed='true'] {
	background: var(--blue-300);
	font-weight: 500;
}

.rowline__m2 {
	flex: 0 0 90px;
	min-width: 0;
	min-height: 44px;
	padding: 0 10px;
	background: var(--white);
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 15px;
	text-align: center;
	-moz-appearance: textfield;
}

.rowline__m2::placeholder { color: var(--muted); }
.rowline__m2:focus { outline: 2px solid var(--blue); outline-offset: -2px; }

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

.smeta__hint {
	margin-top: 8px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.35;
}

/* Допуслуги свёрнуты: их выбирает меньшинство, а высоту платили все. */
.extras-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	padding: 0 16px;
	background: var(--blue-050);
	border: 0;
	border-radius: var(--radius-row);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 15px;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.extras-toggle:hover { background: #e7f3ff; }

.extras-toggle__cnt {
	margin-left: auto;
	color: var(--muted);
	font-size: 14px;
}

.extras-toggle__sum {
	color: var(--blue);
	font-weight: 500;
	white-space: nowrap;
}

.extras-toggle__chev {
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--blue);
	border-bottom: 2px solid var(--blue);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}

.extras-toggle[aria-expanded='true'] .extras-toggle__chev {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.extras {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 9px;
}

/* Один способ выбора вместо четырёх: всё, что добавляется, — чип. */
.chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	background: var(--white);
	border: 1px solid var(--blue-line);
	border-radius: var(--radius-pill);
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.chip:hover { border-color: var(--blue); }

.chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.chip i {
	color: var(--muted);
	font-style: normal;
	font-size: 13px;
	white-space: nowrap;
}

.chip:has(input:checked) {
	background: var(--blue-300);
	border-color: var(--blue-300);
	font-weight: 500;
}

.chip:has(input:checked) i { color: var(--ink); }

.chip:has(input:focus-visible) {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/* Окна считаются по створкам, поэтому у них счётчик, а не переключатель. */
.chip--step {
	gap: 10px;
	padding: 4px 5px 4px 14px;
	cursor: default;
}

.chip--step:hover { border-color: var(--blue-line); }

.chip__name {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
}

.stepper {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: var(--blue-050);
	border-radius: var(--radius-pill);
}

.stepper button {
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--blue);
	font-family: var(--font-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.stepper button:hover { background: var(--blue-300); }

.stepper input {
	width: 30px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	-moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

/* Дом и коммерция: вместо комнат — условие замера. */
.smeta__big {
	padding: 14px 16px;
	background: var(--blue-050);
	border-radius: var(--radius-row);
	color: var(--muted);
	font-size: 14px;
	line-height: 1.45;
}

/* Построчная смета осталась: это и есть обещание «цена из прайса». */
.sheet { margin-top: 4px; }

.sheet__line {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 4px 0;
	font-size: 15px;
}

.sheet__line dt {
	flex: none;
	max-width: 64%;
	color: var(--ink);
}

.sheet__dots {
	flex: 1;
	border-bottom: 1px dotted var(--blue-line);
	transform: translateY(-4px);
}

.sheet__line dd {
	flex: none;
	margin: 0;
	font-weight: 500;
	white-space: nowrap;
}

.sheet__line--min dd { color: var(--blue); }

/* Итог и кнопки — единый подвал, чтобы цена и действие стояли рядом. */
.smeta__foot {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 26px 18px;
	border-top: 1px solid var(--blue-300);
}

.smeta__sumrow {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.smeta__sumlbl b {
	display: block;
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 700;
}

.smeta__sumlbl span {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.35;
}

.smeta__sum {
	color: var(--blue);
	font-family: var(--font-head);
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.smeta__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.smeta__cta .btn {
	flex: 1 1 180px;
	padding: 0 18px;
	font-size: 16px;
}

.smeta__note {
	padding: 12px 26px 20px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.4;
}

/*
 * Телефон. Сегменты — три кнопки в ряд с переносом подписи, а не три строки:
 * два переключателя из трёх слов занимали 296 px.
 */
@media (max-width: 640px) {
	.seg {
		gap: 5px;
		padding: 4px;
		border-radius: var(--radius-row);
	}

	.seg button {
		min-height: 44px;
		padding: 5px 2px;
		border-radius: var(--radius-row);
		font-size: 13px;
		line-height: 1.15;
		white-space: normal;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.rowline {
		gap: 5px;
		padding: 4px;
		border-radius: var(--radius-row);
	}

	.rowline .rooms { gap: 4px; }

	.rowline .rooms button {
		min-height: 44px;
		border-radius: 12px;
		font-size: 15px;
	}

	.rowline__m2 {
		flex: 0 0 74px;
		min-height: 44px;
		padding: 0 6px;
		border-radius: 12px;
		font-size: 14px;
	}

	.smeta__head { padding: 14px 20px; }
	.smeta__head b { font-size: 18px; }
	.smeta__head span { display: none; }

	.smeta__body { padding: 16px 20px 4px; }
	.smeta__field { margin-bottom: 14px; }
	.smeta__label { margin-bottom: 7px; font-size: 14px; }

	.extras-toggle { min-height: 48px; padding: 0 13px; font-size: 14px; }
	.extras-toggle__cnt { display: none; }

	.extras { gap: 6px; }
	.chip { padding: 8px 12px; font-size: 13px; }

	.sheet__line { font-size: 14px; }

	.smeta__sumlbl b { font-size: 17px; }
	.smeta__sum { font-size: 32px; }

	.smeta__note { padding: 10px 20px 18px; }
}

/* ------------------------------------------------------------ первый экран A */
.hero--calc .hero__inner {
	grid-template-columns: minmax(0, 1fr) 520px;
	gap: 60px;
	padding-top: 158px;
}

.hero--calc .hero__visual { width: auto; height: auto; margin: 0; }
.hero--calc .hero__visual::before { display: none; }

.hero--calc .hero__star {
	left: auto;
	right: -54px;
	top: -46px;
	width: 108px;
	height: 108px;
	z-index: 2;
}

.hero--calc .hero__sparkle { left: -34px; top: 250px; }

/* лента доверия под первым экраном */
.trustbar { background: var(--white); padding: 34px 0; }

.trustbar__inner {
	display: grid;
	grid-template-columns: 232px repeat(3, 1fr);
	gap: 34px;
	align-items: center;
	padding: 22px 34px;
	background: var(--blue-050);
	border-radius: var(--radius-card);
}

.trustbar__photo {
	width: 198px;
	height: 132px;
	object-fit: cover;
	border-radius: 8px 40px 40px 40px;
}

.trustbar__item b {
	display: block;
	color: var(--blue);
	font-family: var(--font-head);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

.trustbar__item span {
	display: block;
	margin-top: 8px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.35;
}

@media (max-width: 1080px) {
	.hero--calc .hero__inner { grid-template-columns: 1fr; gap: 34px; padding-top: 150px; }
	.hero--calc .hero__star { display: none; }
	.trustbar__inner { grid-template-columns: 1fr 1fr; }
	.trustbar__photo { display: none; }
}

/* ------------------------------------------------------------ витрина услуг */
.showcase {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 30px;
}

.showcase .service-card__image { height: 226px; }

.showcase .service-card__body { padding: 22px 26px 24px; }

.showcase .service-card__title { font-size: 21px; }

.showcase .service-card__lead {
	margin-top: 10px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.4;
}

@media (max-width: 980px) { .showcase { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .showcase { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ прайс-таблица */
.ptable-hint { display: none; }

.ptable-wrap {
	overflow-x: auto;
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

table.ptable {
	width: 100%;
	min-width: 700px;
	border-collapse: collapse;
	font-size: 17px;
}

.ptable-caption {
	margin: 34px 0 16px;
	font-size: 21px;
}

.ptable-caption--first { margin-top: 28px; }

.ptable-title { margin-top: 48px; }

/* Прайс читается парами «работа — цена», поэтому таблице нужна не вся ширина. */
.ptable-wrap--price { max-width: 980px; }

table.ptable th.num { text-align: right; }

/* Сдвоенный прайс: два списка рядом, между ними — разделитель. */
.ptable--pairs { table-layout: fixed; }

.ptable--pairs th:nth-child(2n),
.ptable--pairs td:nth-child(2n) { width: 136px; }

.ptable--pairs th:nth-child(3),
.ptable--pairs td:nth-child(3) {
	padding-left: 34px;
	border-left: 1px solid var(--blue-050);
}

table.ptable th,
table.ptable td {
	padding: 17px 24px;
	text-align: left;
	border-bottom: 1px solid var(--blue-050);
}

table.ptable thead th {
	background: var(--blue-050);
	color: var(--muted);
	font-family: var(--font-text);
	font-size: 15px;
	font-weight: 400;
}

table.ptable tbody tr:last-child td { border-bottom: 0; }

table.ptable tbody tr:hover { background: #fafcff; }

table.ptable td.num {
	color: var(--blue);
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

table.ptable td.note {
	color: var(--muted);
	font-weight: 400;
	text-align: right;
}

.pnote {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-start;
	margin-top: 20px;
	padding: 20px 26px;
	background: var(--blue-050);
	border-radius: var(--radius-soft);
	font-size: 16px;
	line-height: 1.45;
}

.pnote b { white-space: nowrap; }

/* ------------------------------------------------------------- чек-лист */
.zones {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.zone {
	padding: 26px 28px;
	background: var(--card);
	border-radius: var(--radius-card);
}

.zone h3 { font-size: 21px; }

.zone ul {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.zone li {
	position: relative;
	padding: 0 0 9px 26px;
	color: var(--ink);
	font-size: 16px;
	line-height: 1.35;
}

.zone li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--blue);
	border-bottom: 2px solid var(--blue);
	transform: rotate(-45deg);
}

@media (max-width: 980px) { .zones { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .zones { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- шторка до/после */
.balist {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 30px;
}

.bacard {
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.ba {
	position: relative;
	height: 260px;
	background: var(--card);
	user-select: none;
	touch-action: pan-y;
}

.ba img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ba .ba__before { filter: grayscale(0.75) brightness(0.86) contrast(0.9); }

.ba .ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }

.ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos, 50%);
	width: 3px;
	background: var(--white);
	pointer-events: none;
}

.ba__handle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	background: var(--blue);
	border: 3px solid var(--white);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: var(--shadow-card);
}

.ba input[type='range'] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}

.ba__tag {
	position: absolute;
	bottom: 14px;
	padding: 6px 16px;
	background: rgba(255, 255, 255, 0.92);
	border-radius: var(--radius-pill);
	font-size: 14px;
	pointer-events: none;
}

.ba__tag--l { left: 14px; }
.ba__tag--r { right: 14px; }

.bacard__body { padding: 20px 24px 24px; }

.bacard__body h3 { font-size: 19px; }

.bacard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.bacard__meta span {
	padding: 6px 14px;
	background: var(--blue-050);
	border-radius: var(--radius-pill);
	font-size: 14px;
}

.bacard__price {
	margin-top: 16px;
	color: var(--blue);
	font-family: var(--font-head);
	font-size: 24px;
	font-weight: 700;
}

@media (max-width: 980px) { .balist { grid-template-columns: 1fr; } }

/* заглушка для мест, где нужны настоящие снимки */
.needshot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding: 16px 24px;
	background: #fffbe6;
	border: 1px dashed var(--yellow);
	border-radius: var(--radius-soft);
	color: #6b5a12;
	font-size: 15px;
	line-height: 1.4;
}

/* ==========================================================================
   Блоки финальной сборки
   ========================================================================== */

/* ------------------------------------------- двойная цена в первом экране */
.pricelead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-top: 18px;
	padding: 14px 22px;
	background: var(--white);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-card);
}

.pricelead b {
	color: var(--blue);
	font-family: var(--font-head);
	font-size: 27px;
	font-weight: 700;
	line-height: 1;
}

.pricelead span { font-size: 16px; }
.pricelead .sep { color: var(--blue-400); }

@media (max-width: 560px) {
	.pricelead { border-radius: var(--radius-soft); padding: 14px 18px; }
}

/* --------------------------------------------------- онлайн-запись, слоты */
.booking {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 24px;
	margin-top: 30px;
}

.booking__panel {
	padding: 32px 34px 34px;
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.booking__label {
	display: block;
	margin-bottom: 12px;
	color: var(--muted);
	font-size: 15px;
}

.days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 7px;
}

.day {
	padding: 12px 4px;
	background: var(--blue-050);
	border: 1px solid transparent;
	border-radius: var(--radius-row);
	color: var(--ink);
	font-family: var(--font-text);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.day span {
	display: block;
	color: var(--muted);
	font-size: 12px;
	text-transform: lowercase;
}

.day b {
	display: block;
	margin-top: 4px;
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 700;
}

.day:hover { background: #e7f3ff; }

.day[aria-pressed='true'] {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--white);
}

.day[aria-pressed='true'] span { color: var(--blue-300); }

.day[disabled] { opacity: 0.4; cursor: not-allowed; }

.slots {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 12px;
}

.slot {
	min-height: 44px;
	padding: 0 20px;
	background: var(--white);
	border: 1px solid var(--blue-line);
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.slot:hover { border-color: var(--blue); }

.slot[aria-pressed='true'] {
	background: var(--blue-300);
	border-color: var(--blue-300);
	font-weight: 500;
}

.slot[disabled] {
	background: var(--card);
	border-color: transparent;
	color: var(--gray);
	text-decoration: line-through;
	cursor: not-allowed;
}

.booking__side {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px 34px;
	background: var(--grad-blue);
	border-radius: var(--radius-card);
	color: var(--white);
}

.booking__side h3 { color: var(--white); font-size: 24px; }

.booking__side p {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.45;
	opacity: 0.95;
}

.booking__pick {
	margin: 20px 0;
	padding: 16px 20px;
	background: rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-soft);
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 700;
}

.booking__side .btn--white {
	background: var(--white);
	color: var(--blue);
}

.booking__side .btn--white:hover { background: var(--blue-050); color: var(--blue); }

.booking__note {
	margin-top: 14px;
	font-size: 13px;
	opacity: 0.9;
}

@media (max-width: 1080px) {
	.booking { grid-template-columns: 1fr; }
	.days { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 560px) {
	.booking__panel, .booking__side { padding: 24px 20px; }
	.days { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------- чек-лист приёмки: прогресс */
.checkbar {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding: 22px 28px;
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.checkbar__progress {
	flex: 1;
	min-width: 220px;
	height: 10px;
	background: var(--blue-050);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.checkbar__progress i {
	display: block;
	width: 0;
	height: 100%;
	background: var(--blue);
	border-radius: var(--radius-pill);
	transition: width 0.3s ease;
}

.checkbar__counter { color: var(--muted); font-size: 16px; }
.checkbar__counter b { color: var(--ink); font-family: var(--font-head); }

.zone label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 5px 0;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.35;
	cursor: pointer;
}

.zone label:has(input:checked) { color: var(--ink); }

.zone label input {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	accent-color: var(--blue);
}

/* «что не входит» */
.notin {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 18px;
	padding: 30px 34px;
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.notin__head { grid-column: 1 / -1; }
.notin__head h3 { font-size: 24px; }
.notin__head p { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.45; }

.notin ul { margin: 0; padding: 0; list-style: none; }

.notin li {
	position: relative;
	padding: 0 0 10px 26px;
	font-size: 16px;
	line-height: 1.35;
}

.notin li::before,
.notin li::after {
	content: '';
	position: absolute;
	left: 2px;
	top: 10px;
	width: 13px;
	height: 2px;
	background: var(--gray);
}

.notin li::before { transform: rotate(45deg); }
.notin li::after { transform: rotate(-45deg); }

@media (max-width: 900px) { .notin { grid-template-columns: 1fr; } }

/* --------------------------------------------------- гарантия и документы */
.guar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
	margin-top: 32px;
}

.guar__card {
	display: flex;
	flex-direction: column;
	padding: 30px 30px 32px;
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.guar__num {
	color: var(--blue);
	font-family: var(--font-head);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

.guar__card h3 { margin-top: 12px; font-size: 21px; }

.guar__card p {
	flex: 1;
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.45;
}

.guar__card a { margin-top: auto; padding-top: 16px; font-size: 16px; }

.guar__card--accent { background: var(--grad-blue); color: var(--white); }
.guar__card--accent h3,
.guar__card--accent .guar__num { color: var(--white); }
.guar__card--accent p { color: rgba(255, 255, 255, 0.94); }

@media (max-width: 1080px) { .guar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .guar { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- акции, подписка */
.promos {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 18px;
	margin-top: 30px;
}

.promo {
	position: relative;
	padding: 34px 38px 36px;
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.promo--main { background: var(--grad-hero); }

.promo__badge {
	display: inline-block;
	padding: 7px 18px;
	background: var(--yellow);
	border-radius: var(--radius-pill);
	font-size: 15px;
	font-weight: 500;
}

.promo h3 { margin-top: 16px; font-size: 27px; line-height: 1.2; }
.promo h3 span { color: var(--blue); }

.promo p { margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.45; }

.promo ul { margin: 16px 0 0; padding: 0; list-style: none; }

.promo li {
	position: relative;
	padding: 0 0 9px 26px;
	font-size: 16px;
	line-height: 1.35;
}

.promo li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--blue);
	border-bottom: 2px solid var(--blue);
	transform: rotate(-45deg);
}

.promo .btn { margin-top: 22px; }

.promo__star {
	position: absolute;
	right: -30px;
	top: -34px;
	width: 104px;
	height: 104px;
	pointer-events: none;
}

@media (max-width: 900px) { .promos { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- юрлицам */
.b2b {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 40px;
	align-items: center;
	margin-top: 30px;
	padding: 44px 48px;
	background: var(--grad-footer);
	border-radius: var(--radius-card);
	color: var(--white);
}

.b2b h2,
.b2b > div:not(.b2b__card) > h3 { color: var(--white); font-size: 34px; line-height: 42px; }
.b2b > div:not(.b2b__card) > p { margin-top: 14px; font-size: 17px; line-height: 1.45; opacity: 0.94; }

.b2b__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.b2b__list li {
	position: relative;
	padding-left: 26px;
	font-size: 16px;
	line-height: 1.35;
}

.b2b__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--yellow);
	border-bottom: 2px solid var(--yellow);
	transform: rotate(-45deg);
}

.b2b__card {
	padding: 30px 32px;
	background: var(--white);
	border-radius: var(--radius-soft);
	color: var(--ink);
}

.b2b__card h3 { font-size: 21px; }
.b2b__card p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.b2b__card .btn { margin-top: 18px; width: 100%; }

@media (max-width: 980px) {
	.b2b { grid-template-columns: 1fr; padding: 34px 24px; }
	.b2b__list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- реквизиты */
.requisites {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 14px;
	opacity: 0.9;
}

/* --------------------------------------------------------- мобильная плашка */
.mobbar { display: none; }

@media (max-width: 960px) {
	.mobbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 150;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 6px;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
		background: var(--white);
		box-shadow: 0 -6px 18px rgba(49, 58, 69, 0.12);
	}

	.mobbar a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 7px 0;
		border-radius: var(--radius-row);
		color: var(--ink);
		font-size: 11px;
		text-align: center;
	}

	.mobbar a b { font-size: 17px; line-height: 1; }
	.mobbar a.is-accent { background: var(--blue); color: var(--white); }

	body { padding-bottom: 74px; }
}

/* --------------------------------------------------- мелочи финальной сборки */
.svc-perm {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: 14px;
	font-weight: 400;
}

.sechead-lead {
	max-width: 720px;
	margin: 14px 0 0;
	color: var(--muted);
	font-size: 19px;
	line-height: 25px;
}

.opengap { margin-top: 32px; }

/* ------------------------------------------------------------ хлебные крошки */
.crumbs {
	padding: calc(var(--header-total) + 14px) 0 0;
	background: var(--grad-hero);
	font-size: 14px;
}

.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
}

.crumbs li + li::before {
	content: '/';
	margin-right: 8px;
	color: var(--blue-400);
}

.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue); }
.crumbs span { color: var(--ink); }

.crumbs + .hero .hero__inner { padding-top: 18px; }

.b2b__mail {
	margin-top: 16px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.45;
}

.b2b__mail a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* ---------------------------------------------------------- перелинковка */
.linkgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 20px;
}

.linkcard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-height: 116px;
	padding: 22px 24px;
	background: var(--blue-050);
	border-radius: var(--radius-soft);
	transition: background-color 0.2s ease;
}

.linkcard:hover { background: var(--blue-300); }

.linkcard b {
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink);
}

.linkcard span { color: var(--blue); font-size: 15px; }

@media (max-width: 980px) { .linkgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .linkgrid { grid-template-columns: 1fr; } }

/* SEO-текст двумя колонками */
.seotext { columns: 2; column-gap: 44px; font-size: 17px; line-height: 25px; color: var(--ink); }
.seotext p { margin: 0 0 16px; }
@media (max-width: 760px) { .seotext { columns: 1; } }

/* ------------------------------------------------ матрица тарифов */
/* Свёрнутое состояние: до клика видны первые 8 работ. */
.matrix__toggle:not(:checked) ~ .ptable-wrap .matrix__row--more { display: none; }
.matrix__toggle:checked ~ .matrix__action { display: none; }
.matrix__action { margin-top: 20px; text-align: center; }
.matrix__more { cursor: pointer; }
.matrix__toggle:focus-visible ~ .matrix__action .matrix__more {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/* Шапка параметров: цена и ставка крупнее работ. */
.matrix__meta th { color: var(--muted); font-weight: 400; }
.matrix__meta td { font-size: 20px; }
.matrix__meta tr:nth-child(-n + 2) td { font-size: 24px; }
.matrix__meta tr:last-child td,
.matrix__meta tr:last-child th { border-bottom: 2px solid var(--blue-050); }

/* Строка-разделитель группы. */
.ptable--matrix .matrix__group th {
	background: var(--blue-050);
	color: var(--muted);
	font-size: 15px;
	font-weight: 400;
}

/*
 * Матрица — это сравнение тарифов, а не прайс: значения выравниваем по центру
 * колонки. Галочка — блочный svg, её text-align не двигает, поэтому центруем
 * её отдельно полями; из-за этого галочки стояли слева, а цены справа.
 */
table.ptable--matrix { table-layout: fixed; }

.ptable--matrix thead th:first-child { width: 40%; }

table.ptable--matrix thead th:not(:first-child),
table.ptable--matrix td,
table.ptable--matrix td.num,
table.ptable--matrix td.note { text-align: center; }

.ptable--matrix td svg { margin: 0 auto; }

/*
 * Значения в матрице длиннее цены («назовём после осмотра», «550 ₽ / створка»),
 * а колонка тарифа узкая уже на планшете — переносим и в ячейках, и в шапке.
 */
table.ptable--matrix td.num { white-space: normal; }

.ptable--matrix thead th {
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Первая колонка не уезжает при горизонтальном скролле. */
.ptable--matrix th[scope='row'] {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--white);
	font-weight: 400;
}
.ptable--matrix thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--blue-050);
}


/* ------------------------------------------------ таблицы на телефоне */
/*
 * Матрица из четырёх колонок в контейнере 335 px: залипающая первая колонка
 * занимала 171 px, и на данные оставалось 164 — рядом не помещалась даже одна
 * колонка тарифа, то есть сравнить было нечего. Сжимаем ячейки и первую
 * колонку так, чтобы в поле зрения попадали минимум две колонки тарифа.
 */
@media (max-width: 640px) {
	table.ptable {
		min-width: 560px;
		font-size: 15px;
	}

	table.ptable th,
	table.ptable td {
		padding: 11px 12px;
	}

	table.ptable thead th {
		font-size: 13px;
	}

	table.ptable--matrix {
		min-width: 430px;
		table-layout: fixed;
	}

	.ptable--matrix thead th:not(:first-child) {
		width: 98px;
	}

	.ptable--matrix th[scope='row'],
	.ptable--matrix thead th:first-child {
		width: 136px;
		min-width: 136px;
		font-size: 14px;
		line-height: 1.25;
	}

	table.ptable--matrix td,
	table.ptable--matrix td.num {
		min-width: 88px;
		padding: 10px 8px;
		font-size: 14px;
		line-height: 1.25;
		white-space: normal;
		text-align: center;
	}

	/*
	 * Сдвоенный прайс на телефоне уезжает вбок, поэтому фиксированные колонки
	 * ему только мешают: «Матрас полутороспальный» не влезал в 144 px.
	 */
	table.ptable--pairs { table-layout: auto; }

	.ptable--pairs th:nth-child(2n),
	.ptable--pairs td:nth-child(2n) { width: auto; }

	.ptable--pairs th:nth-child(3),
	.ptable--pairs td:nth-child(3) { padding-left: 16px; }

	.matrix__meta td { font-size: 15px; }
	.matrix__meta tr:nth-child(-n + 2) td { font-size: 16px; }

	/* «Поддерживающая» — одно слово в 98 px: без переносов оно вылезает из ячейки. */
	.ptable--matrix thead th {
		padding: 10px 6px;
		font-size: 13px;
		line-height: 1.2;
		hyphens: auto;
		overflow-wrap: break-word;
	}

	.ptable-hint {
		display: block;
		margin: 0 0 10px;
		color: var(--muted);
		font-size: 14px;
	}

	/* Ссылки в ячейках прайса — до нормы тач-таргета. */
	table.ptable td.num a,
	table.ptable td a {
		display: inline-block;
		padding: 11px 0;
	}
}


/* ---------------------------------------- липкий итог сметы (телефон и планшет) */
/*
 * Порог 960 совпадает с порогом мобильной плашки: на её высоту (74 px) опирается
 * смещение bottom. Пока калькулятор в поле зрения, сумма и кнопка не уезжают
 * вниз, сколько бы допуслуг ни отметили.
 */
/*
 * До 960 px подвал со сметой липнет к низу экрана: сумма и кнопка остаются
 * на виду, пока человек крутит параметры. Отступ снизу — под мобильную плашку.
 */
@media (max-width: 960px) {
	.smeta {
		overflow: visible;
		border-radius: var(--radius-card);
	}

	.smeta__head {
		border-radius: var(--radius-card) var(--radius-card) 0 0;
	}

	.smeta__foot {
		gap: 10px;
		padding: 12px 22px 14px;
	}

	.smeta:has(.extras:not([hidden])) .smeta__foot {
		position: sticky;
		bottom: 74px;
		z-index: 3;
		background: var(--white);
		box-shadow: 0 -8px 20px rgba(4, 67, 185, 0.1);
	}

	.smeta__sumrow { align-items: center; }
	.smeta__sumlbl span { display: none; }
	.smeta__sum { font-size: 30px; }
}

@media (max-width: 640px) {
	.smeta__foot { padding: 10px 20px 12px; }
	.smeta__cta .btn--primary { flex: 1 1 100%; }

	/* Второй кнопке хватает вида ссылки — она забирала целую строку. */
	.smeta__cta .btn--outline {
		flex: 1 1 100%;
		min-height: 34px;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		font-size: 15px;
	}
}