/*
 * Правки поверх main.css (он скомпилирован из SCSS, исходников нет — поэтому отдельным файлом).
 * Аудит юзабилити (п. 9, 10, 11, 12, 14) и ТЗ №13 «удобство на телефоне».
 */

/* ---------- Общее ---------- */
/* У картинок теперь заданы width/height (страница не прыгает при загрузке). Там, где main.css задаёт только ширину,
   без этого правила высота бралась бы из атрибута и картинку растягивало. Правила main.css с классами сильнее этого. */
img { height: auto; }
.main__text { text-decoration: none; }
.main__subtitle a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.soc__item { text-decoration: none; }
.footer-block__link { color: inherit; font-weight: 700; text-decoration: underline; }
.footer-last__text a { color: inherit; }
/* .tel — flex-контейнер: пробел перед <span> с номером в нём схлопывается */
.tel span { margin-left: .3em; }

/* Кнопки действия под видами ключей и под FAQ */
.about__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 40px 0 10px; }
.btn-cta {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px;
	border-radius: 24px; border: 2px solid #000; background: #ffd800; color: #000; text-decoration: none; text-align: center;
	font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 900; line-height: 1.2; letter-spacing: .5px; text-transform: uppercase;
	transition: background .2s, color .2s;
}
.btn-cta:hover { background: #000; color: #ffd800; }
.btn-cta--dark { background: #000; color: #fff; }
.btn-cta--dark:hover { background: #ffd800; color: #000; }

/* ---------- п. 11: таблица часов работы ---------- */
.hours { margin-top: 50px; }
.hours__title { text-align: center; margin-bottom: 20px; font-family: "Montserrat", sans-serif; font-size: 22px; font-weight: 900; color: #000; }
.hours__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hours-table { width: 100%; max-width: 860px; margin: 0 auto; border-collapse: collapse; font-family: "Montserrat", sans-serif; font-size: 15px; color: #000; }
.hours-table th, .hours-table td { padding: 12px 10px; border-bottom: 1px solid #e3e3e3; text-align: left; vertical-align: middle; }
.hours-table th { font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: .5px; border-bottom: 2px solid #000; }
.hours-table td:nth-child(2), .hours-table td:nth-child(3) { white-space: nowrap; }
.hours-table a { color: #000; font-weight: 700; white-space: nowrap; text-decoration: none; border-bottom: 1px solid #ffd800; }

/* ---------- п. 10: FAQ ---------- */
.faq { padding: 70px 0; background: #fff; }
.faq__title { text-align: center; margin-bottom: 35px; font-family: "Montserrat", sans-serif; font-size: 30px; font-weight: 900; color: #000; }
.faq__item { max-width: 860px; margin: 0 auto 10px; border: 2px solid #000; border-radius: 14px; background: #fff; overflow: hidden; }
.faq__item[open] { background: #fff9d6; }
.faq__q {
	position: relative; display: block; padding: 16px 52px 16px 20px; cursor: pointer; list-style: none;
	font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.35; color: #000;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; line-height: 1; }
.faq__item[open] .faq__q::after { content: "–"; }
.faq__a { margin: 0; padding: 0 20px 18px; font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.55; color: #333; }

/* ---------- Яндекс.Карта: место резервируется заранее, страницу при загрузке не «толкает» ---------- */
.ymap { width: 100%; min-height: 712px; background: #f2f2f2; }

/* ---------- п. 12: панель связи, только телефон ---------- */
.sticky-cta { display: none; }

@media (max-width: 768px) {
	.ymap { min-height: 420px; }

	.sticky-cta {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: 8px;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #000; box-shadow: 0 -2px 10px rgba(0, 0, 0, .25);
	}
	.sticky-cta__btn {
		flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 8px; border-radius: 24px;
		font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 900; line-height: 1.15; text-align: center; text-decoration: none;
	}
	.sticky-cta__btn--call { background: #ffd800; color: #000; }
	.sticky-cta__btn--chat { background: #fff; color: #000; }
	/* низ страницы не прячется под панелью; кнопка Jivo поднимается над ней */
	body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
	jdiv[class^="wrap_"], jdiv[class*=" wrap_"] { margin-bottom: 68px !important; }
	/* попап открыт — панель не перекрывает кнопку «Отправить» */
	body.modal-open .sticky-cta { display: none; }
}

/* ---------- ТЗ №13: телефон ---------- */
@media (max-width: 760px) {
	/* шапка: номер в одну строку и крупной целью для пальца */
	.header__tel {
		display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: auto !important; min-height: 48px;
		margin: 6px 0 4px !important; font-size: 22px !important; white-space: nowrap; gap: .3em;
	}
	.soc__item { width: 44px !important; height: 44px !important; margin: 0 4px !important; }
	.soc__item img { width: 22px !important; height: 22px; }
	/* бургер: зона нажатия 48×48 вместо 30×25 */
	.burger { width: 48px !important; height: 48px !important; right: 10px !important; top: 12px !important; }
	.burger span, .burger span:before, .burger span:after { width: 30px; left: 9px; }
	.burger span:before, .burger span:after { left: 0; }
	/* ревью 23.09.2026: в открытом меню (панель справа, как в исходной вёрстке) «Наши преимущества» ломалось на две строки
	   и прижималось к левому краю. Панель чуть шире (225 → 280 px), пункты по центру в одну строку. */
	.mobile-menu { height: auto !important; }
	.mobile-menu.mobile-open { width: 280px; max-width: 100%; padding-right: 0; }
	.mobile-menu ul { padding: 64px 0 16px; height: auto !important; }
	.mobile-menu ul li { text-align: center; }
	.mobile-menu ul li a { display: block; padding: 14px 24px; font-size: 15px; color: #fff; text-decoration: none; white-space: nowrap; }

	/* первый экран: текст читается без увеличения */
	.main__subtitle { font-size: 13px !important; line-height: 1.5 !important; letter-spacing: 1.5px !important; }
	.main__text { display: inline-flex !important; align-items: center; height: auto !important; min-height: 48px; padding: 6px 22px !important; font-size: 13px !important; line-height: 1.3 !important; letter-spacing: .5px !important; }
	.main-item__text { font-size: 12px !important; line-height: 1.35 !important; }
	.main-item__text span { font-size: 12px; }

	/* форма «скидка»: поле и кнопка на всю ширину, высота под палец; 16px — чтобы iOS не зумил страницу при фокусе */
	/* у плашки в main.css фиксированная высота под одну строку — в столбик содержимое из неё вылезало */
	#order.reviews, #zayavka.reviews { height: auto !important; min-height: 0; }   /* #zayavka — та же форма на страницах услуг и блога */
	.reviews-container { flex-direction: column; padding: 24px 15px !important; }
	.reviews__title { width: 100%; margin: 0 0 14px !important; text-align: center; }
	.reviews-form { width: 100%; max-width: 420px; display: flex; flex-direction: column; margin: 0 auto !important; }
	.reviews-form__input { width: 100% !important; min-height: 48px; font-size: 16px !important; box-sizing: border-box; }
	.reviews-form__btn { width: 100% !important; min-height: 48px; font-size: 14px !important; margin-top: 8px; }
	.modal-form .open-form .form__inp, .form_message { font-size: 16px !important; min-height: 48px; box-sizing: border-box; }
	.modal-form .open-form .form__btn { min-height: 48px; }
	.modal-form--fix { max-height: 100vh; overflow-y: auto; }
	.modal-form span.close { top: 4px; right: 6px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }

	/* сервисы: адрес и телефон — крупные цели, телефон заметнее */
	.services-block { flex: 0 0 100%; width: 100%; margin-top: 28px; }
	.services-block__title { display: block; padding: 8px 0; font-size: 15px !important; line-height: 1.35 !important; }
	.services-block__link { display: block; padding: 10px 0; font-size: 16px !important; line-height: 1.5 !important; }

	/* таблица часов на телефоне — карточками: в четыре колонки на 360 px она не помещается */
	.hours-table thead { display: none; }
	.hours-table, .hours-table tbody, .hours-table tr, .hours-table td { display: block; width: 100%; box-sizing: border-box; }
	.hours-table tr { margin-bottom: 12px; padding: 14px 16px; border: 2px solid #000; border-radius: 14px; }
	.hours-table td { padding: 2px 0; border: 0; font-size: 15px; }
	.hours-table td:first-child { font-weight: 900; font-size: 16px; padding-bottom: 6px; }
	.hours-table td:nth-child(2)::before { content: "Будни: "; color: #5a5a5a; }
	.hours-table td:nth-child(3)::before { content: "Выходные: "; color: #5a5a5a; }
	.hours-table td:last-child a { display: flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 10px; border: 0; border-radius: 23px; background: #ffd800; font-size: 16px; font-weight: 900; }
	.faq { padding: 45px 0; }
	.faq__title { font-size: 22px; }
	.faq__q { font-size: 15px; min-height: 48px; box-sizing: border-box; }
	.btn-cta { width: 100%; }
	.f-block .tel, .footer-block .tel { min-height: 44px; height: auto; font-size: 16px; }
}

/* ---------- ТЗ №14 и №15: служебные страницы 404.html, spasibo.html, oshibka.html ---------- */
/* Шапка сайта лежит поверх первого экрана (position: absolute), поэтому у блока большой верхний отступ. */
/* Жёлтая полоса под шапкой и меню — как фон первого экрана главной. */
.service-page { padding: 230px 15px 70px; background: linear-gradient(#ffec35 0, #ffec35 180px, #fff 180px); text-align: center; font-family: "Montserrat", sans-serif; color: #000; }
.service-page__title { margin: 0 0 18px; font-size: 38px; font-weight: 900; line-height: 1.2; }
.service-page__text { max-width: 720px; margin: 0 auto; font-size: 17px; font-weight: 500; line-height: 1.6; }
.service-page__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 32px 0 26px; }
.service-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin: 0; padding: 0; list-style: none; }
.service-page__links a { display: inline-flex; align-items: center; min-height: 44px; color: #000; font-size: 15px; font-weight: 700; text-decoration: none; border-bottom: 2px solid #ffd800; }
.service-page__links a:hover { border-bottom-color: #000; }
.service-page__note { margin: 26px 0 0; font-size: 15px; line-height: 1.5; color: #333; }
.service-page__subtitle { margin: 56px 0 20px; font-size: 22px; font-weight: 900; }
.service-page .hours-table { text-align: left; }
/* «Заказать звонок» здесь ссылка на форму главной: попапа на служебных страницах нет */
a.header__btn--link { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding-right: 6px; color: #000; text-align: center; line-height: 1.15; text-decoration: none; }

@media (max-width: 760px) {
	.service-page { padding: 250px 15px 45px; background: linear-gradient(#ffec35 0, #ffec35 215px, #fff 215px); }
	.service-page__title { font-size: 26px; }
	.service-page__text { font-size: 16px; }
	.service-page__links { flex-direction: column; align-items: center; gap: 0; }
	/* как на главной: на телефоне кнопки «Заказать звонок» в шапке нет, звонок — в нижней панели */
	a.header__btn--link { display: none; }
	/* «Позвонить +7 904-006-07-00» помещается в одну строку на 360 px */
	.service-page .btn-cta { padding: 0 12px; font-size: 13px; letter-spacing: 0; white-space: nowrap; }
}

/* ---------- Услуги и блог: страницы собирает docs/klyuchi-tver/build_content.py ---------- */
.article-page { padding: 230px 15px 50px; background: linear-gradient(#ffec35 0, #ffec35 180px, #fff 180px); font-family: "Montserrat", sans-serif; color: #000; }
.article-page .container { max-width: 900px; }
.crumbs { margin-bottom: 22px; font-size: 14px; font-weight: 500; line-height: 1.6; color: #555; }
.crumbs a { color: #000; text-decoration: underline; }
.crumbs__sep { margin: 0 4px; }
.article__title { margin: 0; font-size: 36px; font-weight: 900; line-height: 1.2; }
.article h2 { margin: 40px 0 14px; font-size: 25px; font-weight: 900; line-height: 1.25; }
.article h3 { margin: 26px 0 10px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.article p, .article li { font-size: 17px; font-weight: 400; line-height: 1.65; }
.article p { margin: 14px 0 0; }
.article ul, .article ol { margin: 14px 0 0; padding-left: 24px; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { display: list-item; margin-top: 8px; list-style: inherit; }
.article a { color: #000; text-decoration: underline; }
.article strong, .article b { font-weight: 800; color: #000; }
.article__table { margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article__table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.article__table th, .article__table td { padding: 10px 12px; border: 1px solid #000; text-align: left; vertical-align: top; }
.article__table th { background: #000; color: #fff; font-weight: 700; }
.article .faq__item { max-width: none; margin: 0 0 10px; }
.article .faq__q h3 { display: inline; margin: 0; font: inherit; }
.article .faq__a { padding: 0 20px 18px; }
.article .faq__a p { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.55; color: #333; }
.article .faq__a p + p { margin-top: 10px; }
.article__back { margin: 34px 0 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
.article__back a { display: inline-block; min-height: 44px; line-height: 44px; color: #000; text-decoration: underline; }
.article-contacts { padding: 50px 15px 60px; font-family: "Montserrat", sans-serif; }
.article-contacts .container { max-width: 900px; }
.article-contacts__title { margin: 0 0 20px; font-size: 24px; font-weight: 900; text-align: center; }
.blog__lead { margin: 16px 0 0; font-size: 18px; font-weight: 500; line-height: 1.55; }
.blog-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.blog-card { display: flex; flex-direction: column; padding: 24px; border: 2px solid #000; border-radius: 14px; background: #fff; }
.blog-card__title { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.3; }
.blog-card__title a { color: #000; text-decoration: none; }
.blog-card__title a:hover { text-decoration: underline; }
.blog-card__text { margin: 12px 0 18px; font-size: 15px; font-weight: 500; line-height: 1.55; color: #333; }
.blog-card__more { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 22px; background: #ffd800; color: #000; font-size: 14px; font-weight: 700; text-decoration: none; }
.blog-card__more:hover { background: #000; color: #fff; }
.footer-last__text a { color: inherit; }
@media (max-width: 767px) {
	.article-page { padding: 250px 15px 36px; background: linear-gradient(#ffec35 0, #ffec35 215px, #fff 215px); }
	.article__title { font-size: 26px; }
	.article h2 { font-size: 21px; margin-top: 30px; }
	.article h3 { font-size: 18px; }
	.article p, .article li { font-size: 16px; }
	.blog-cards { grid-template-columns: 1fr; gap: 16px; }
	.blog-card { padding: 18px; }
	.crumbs a, .crumbs span { display: inline-block; min-height: 32px; line-height: 32px; }
	.article-contacts { padding: 36px 15px 40px; }
	.footer-last__text a { display: inline-block; min-height: 44px; line-height: 44px; }
}

/* №4, №14 «Юзабилити»: цены «от» (от заказчика 22.09.2026) — под видами ключей и таблицей в «Цены и Акции» */
.about-flex__price { margin: 4px 0 0; font-family: "Montserrat"; font-weight: 800; font-size: 18px; color: #000; }
/* видов ключей теперь 5 (автомобильные не делают): вторая строка из двух карточек — по центру, а не по краям */
.about-flex:nth-child(2) { justify-content: center; gap: 120px; }
@media (max-width: 730px) { .about-flex:nth-child(2) { gap: 0; } }
/* Ревью 23.09.2026: переход по якорю (#order, #price, меню) прятал начало секции под закреплённой шапкой
   (.wrap-menu.menu-act, 84 px на десктопе). Отступ у всех якорных целей; на телефоне шапка не закреплена — только бургер. */
[id] { scroll-margin-top: 108px; }
/* У секций разный внутренний отступ сверху (0–70 px), поэтому одинаковый scroll-margin давал «сбитые» якоря — заголовок
   оказывался то в 16, то в 86 px под шапкой. Отступы подобраны так, чтобы заголовок вставал на 14 px под шапкой (84 px)
   (24.09: было 24 px, Павел попросил чуть выше). */
#key { scroll-margin-top: 41px; }
#prev { scroll-margin-top: 43px; }
#otzyvy { scroll-margin-top: 68px; }
#price { scroll-margin-top: 38px; }
#services { scroll-margin-top: 31px; }
#order { scroll-margin-top: 70px; }
#faq { scroll-margin-top: 28px; }
#about { scroll-margin-top: 40px; }   /* .footer padding-top 58 */
/* 24.09.2026: шапка закреплена до 681 px (бургер — с 680), поэтому граница отступа — 680, а не 760: на 681–760 px
   начало секции (#order с кнопок «Заказать») уходило под шапку. */
@media (max-width: 680px) { [id], #key, #prev, #otzyvy, #price, #services, #order, #faq, #about { scroll-margin-top: 16px; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.price-table { width: 100%; max-width: 520px; margin: 18px 0 8px; border-collapse: collapse; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 600; }   /* ревью 23.09: без font-family таблица шла Times New Roman */
.price-table th, .price-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #e5e5e5; }
.price-table th { background: #000; color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.price-table__price { font-weight: 800; white-space: nowrap; }
.price-table__term { white-space: nowrap; color: #333; font-weight: 500; }
/* ТЗ №4 п.3: из каждой строки — на форму заявки (#order) */
.price-table__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border-radius: 18px; background: #000; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.price-table__cta:hover { background: #333; color: #fff; }
.price-table td:last-child { text-align: right; padding-right: 8px; }
.price__promo { margin: 0 0 6px; padding: 12px 16px; border: 2px dashed #000; border-radius: 14px; font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 600; display: inline-block; }
.price__promo strong { font-weight: 900; letter-spacing: .04em; }
@media (max-width: 760px) {
	.price-table__term { display: none; }   /* срок есть в примечании под таблицей; четыре колонки на 360 px не помещаются */
	.price-table th, .price-table td { padding: 10px 8px; }
	.price__promo { display: block; text-align: center; }
}
.price__note { margin: 6px 0 18px; font-family: "Montserrat", sans-serif; font-size: 14px; color: #444; }
/* ревью 23.09.2026: три абзаца под таблицей шли узкой колонкой слева — теперь три карточки в ряд во всю ширину блока,
   в стиле FAQ (белые, чёрная рамка). На ≤ 700 px — столбиком, текст по центру, как и раньше. */
.price-points { display: flex; gap: 16px; margin-top: 28px; }
.price-point { flex: 1 1 0; padding: 18px 20px; border: 2px solid #000; border-radius: 14px; background: #fff; font-family: "Montserrat", sans-serif; box-sizing: border-box; }
.price-point__title { margin: 0 0 8px; font-size: 16px; font-weight: 900; line-height: 1.3; }
.price-point__text { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; }
@media (max-width: 1000px) {
	.price-points { flex-direction: column; gap: 12px; margin-top: 20px; }
	.price-point { text-align: center; }
}

/* №15 «Юзабилити»: отзывы с Яндекс Карт */
.testimonials { padding: 10px 0 30px; }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { border: 4px solid #e2e3e5; border-radius: 30px; padding: 24px; background: #fff; font-family: "Montserrat"; }
.review-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.review-card__avatar { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: #ffd800; color: #000; font-weight: 800; font-size: 22px; line-height: 48px; text-align: center; }
.review-card__name { font-weight: 800; font-size: 17px; color: #000; }
.review-card__meta { font-size: 13px; color: #666; margin-top: 2px; }
.review-card__stars { color: #f5b400; font-size: 18px; letter-spacing: 2px; margin-bottom: 8px; }
.review-card__text { margin: 0; font-size: 15px; line-height: 1.5; color: #333; }
.testimonials__more { text-align: center; margin: 28px 0 0; font-size: 16px; font-family: "Montserrat"; }
.testimonials__more a { color: #000; font-weight: 700; text-decoration: underline; }
@media (max-width: 991px) { .testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .testimonials__grid { grid-template-columns: 1fr; gap: 16px; } .review-card { padding: 18px; border-width: 3px; } }

/* Сервисы на 761–1000 px: main.css даёт flex-wrap + space-between, пять карточек без ширины ложились 2+2+1
   и последняя прижималась к левому краю. Три колонки, ряды по центру (3+2). Ниже 760 px — по одной, см. выше. */
@media (min-width: 761px) and (max-width: 1000px) {
	.services-flex { justify-content: center; }
	.services-block { flex: 0 0 33.333%; box-sizing: border-box; padding: 0 12px; }
}

/* Планшет 681–1000 px (ревью 23.09.2026, iPad 820): main.css даёт контейнер 740 px, при этом текстовая колонка первого экрана
   фиксированно 525 px, картинка с ключами — абсолютно справа 43 % → накладываются; семь пунктов меню по 17 px с разрядкой 2 px
   в 740 px не помещаются и слипаются. Ниже 680 px картинка скрыта и работает бургер — там не трогаем. */
@media (min-width: 681px) and (max-width: 1000px) {
	.menu-list { gap: 6px 10px; flex-wrap: wrap; justify-content: center; }
	.menu-list__link { font-size: 11px; letter-spacing: .3px; white-space: nowrap; }   /* 24.09: девять пунктов (+«Вопросы») — 11 px, чтобы на 820 px в одну строку */
	.main-wrap__row { max-width: 56%; }
	.main__title { font-size: 24px; line-height: 1.25; }
	.main-wrap__img { max-width: 40%; bottom: 120px; }
	.main-text_wrapper img { max-width: 100%; height: auto; }
	.main-block { width: 100%; }
	.main-item__text { white-space: nowrap; }   /* «5 минут», «от 90 ₽» ломались на два слова */
}
/* 681–760 px (24.09.2026): восемь пунктов по 12 px переносились в две строки (с ≈707 px), закреплённая шапка становилась
   114 px вместо 84 и перекрывала якорные секции ещё сильнее. На 11 px без разрядки меню помещается в одну строку и на 681 px. */
@media (min-width: 681px) and (max-width: 760px) {
	.menu-list { gap: 6px 8px; }
	.menu-list__link { font-size: 10.5px; letter-spacing: 0; }   /* 24.09: девять пунктов и на 681 px в одну строку */
	#faq { scroll-margin-top: 53px; }   /* здесь .faq { padding: 45px } вместо 70 — с общим 38 px заголовок упирался в шапку */
}

/* 1001–1140 px (ревью 23.09.2026): контейнер main.css здесь во всю ширину без полей, а семь пунктов по 17 px с разрядкой 2 px
   растягиваются от края до края — «О нас» упирается в правый край экрана. Поля у меню и пункты чуть мельче. */
@media (min-width: 1001px) and (max-width: 1140px) {
	.container { padding: 0 24px; box-sizing: border-box; }   /* не только меню: цены, сервисы, FAQ тоже упирались в края экрана */
}
/* 24.09: с девятым пунктом («Вопросы») 17 px с разрядкой 2 px слипались на любом десктопе — 15 px / 1 px от 1001 px и выше */
@media (min-width: 1001px) {
	.menu-list { gap: 0 8px; }
	.menu-list__link { font-size: 15px; letter-spacing: 1px; white-space: nowrap; }
}

/* Ошибки форм (ревью 23.09.2026): вместо alert() — строка под полем. В строчной форме «Получи скидку» переносится под поле и кнопку. */
.reviews-form { flex-wrap: wrap; }
.form-error { flex: 0 0 100%; width: 100%; margin: 8px 0 0; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600; color: #b00020; text-align: left; order: 10; }
.is-invalid { outline: 2px solid #b00020 !important; outline-offset: -2px; }
@media (max-width: 540px) { .form-error { order: 0; margin: 0 0 8px; } }   /* форма столбиком: ошибка сразу под полем, а не под кнопкой */

/* «Подробнее о сети» (ревью 23.09.2026): карточки .work-col в main.css с фиксированной высотой (255/200 px) и без ширины —
   в столбике на телефоне были разной ширины, текст вылезал за рамку. Ширина от контейнера, высота от содержимого. */
.work-flex { align-items: stretch; gap: 24px; }
.work-col { flex: 1 1 0; height: auto; min-height: 255px; box-sizing: border-box; margin-bottom: 36px; }
@media (max-width: 1000px) { .work-col { min-height: 0; } }
@media (max-width: 770px) {
	.work-flex { gap: 0; height: auto; }
	.work-col { flex: 0 0 auto; width: 100%; max-width: 340px; min-height: 240px; margin: 0 auto 16px; padding: 24px 20px; display: flex; flex-direction: column; justify-content: center; }   /* одна высота у всех шести, содержимое по центру */   /* столбик: flex:1 сжимал карточки под высоту контейнера */
	.work-flex:nth-child(3) { margin-bottom: 0; }
}

/* «О нас» (24.09.2026): блок возвращён (был убран 23.09), текст про ключи, фото мастера с первого экрана вместо разбитого телефона */
.about-us .footer-flex picture { flex: 0 0 341px; margin-right: 45px; }   /* flex-элемент — picture, без ширины его сжимало до 140 px */
.about-us .footer-flex img { display: block; width: 100%; height: auto; margin: 0; border-radius: 14px; }
@media (max-width: 1000px) { .about-us .footer-flex picture { flex-basis: 280px; margin-right: 30px; } }
@media (min-width: 701px) { .about-us .footer-block { margin-top: 0; } }   /* main.css даёт 40 px на ≤ 980, но блок тут ещё в строку */
@media (max-width: 700px) { .about-us .footer-flex picture { flex: 0 0 auto; width: 100%; max-width: 300px; margin: 0; } .about-us .footer-block { margin-top: 24px; } .about-us .footer-block__title { text-align: center; } }

/* 24.09.2026: на незакреплённой шапке (жёлтый фон, верх страницы) подсвеченный пункт был жёлтым на жёлтом и пропадал —
   заметно на /uslugi и /blog, где свой пункт горит всегда. Там он чёрный с чёрным подчёркиванием; на закреплённой чёрной — жёлтый, как было. */
.wrap-menu:not(.menu-act) .menu-list__link.yellow { color: #000; border-bottom-color: #000; }
/* 681–760 px (24.09): шапка здесь в три строки (меню, телефон, соцсети) и абсолютная — иконки соцсетей ложились на заголовок первого экрана */
@media (min-width: 681px) and (max-width: 760px) { .main-wrap__row { padding-top: 70px; } }
@media (max-width: 374px) {
	.price-table { font-size: 14px; }
	.price-table th, .price-table td { padding: 9px 5px; }
	.price-table th { font-size: 11px; letter-spacing: 0; }
	.price-table__cta { padding: 0 10px; font-size: 12px; }
}

/* логотип «Ай Лайк» в подвале: файл 94×140, рамка темы была под старый горизонтальный 99×56 */
.f-block .logo { width: 47px; height: 70px; margin: -10px 80px 0 0; }
@media (min-width: 681px) and (max-width: 1000px) { .f-block .logo { margin: 0 40px 15px 0; } }
@media (min-width: 761px) { .f-block .f-number__text { white-space: nowrap; } }
@media (max-width: 680px) { .f-block .logo { margin: 0 0 20px 0; } }
.f-block .tel { white-space: nowrap; -webkit-flex-shrink: 0; flex-shrink: 0; }
@media (min-width: 681px) {
	.f-block-flex { -webkit-justify-content: space-between; justify-content: space-between; }
	.f-block .f-number__text { -webkit-flex: 1 1 auto; flex: 1 1 auto; max-width: none; margin: 0 16px; text-align: center; }
	.f-block .tel { margin-left: 0; }
}

/* ---------- 13.10.2026: тексты главной по документу «Оптимизация» ---------- */
.intro { padding: 40px 0 0; }
.intro p, .about__lead, .work__lead, .key-info p, .howto__lead, .cta-final__text { max-width: 860px; margin: 0 auto 14px; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.6; color: #222; text-align: center; }
.about__lead { margin-top: 18px; }
.work__lead { margin-top: -30px; margin-bottom: 36px; }
.about-flex__desc { max-width: 260px; margin: 8px auto 0; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 500; line-height: 1.45; color: #444; text-align: center; }
.about-block { align-self: flex-start; }
@media (max-width: 730px) { .about-flex { align-items: center; } .about-block { align-self: center; } }
.key-info { padding: 10px 0 50px; }
.key-info__grid { display: flex; flex-direction: column; gap: 12px; }
.key-info__col { flex: 1 1 0; padding: 24px 26px; border: 2px solid #000; border-radius: 14px; background: #fff; box-sizing: border-box; }
.key-info__title, .howto__title, .cta-final__title { margin: 0 0 14px; font-family: "Montserrat", sans-serif; font-size: 22px; font-weight: 900; line-height: 1.25; color: #000; }
.key-info p { margin: 0 auto 10px; text-align: center; }
.key-info__title { text-align: center; }
.services__subtitle { max-width: 760px; margin-left: auto; margin-right: auto; font-size: 17px; font-weight: 500; line-height: 1.5; }
.howto { padding: 50px 0 20px; }
.howto__title, .cta-final__title { font-size: 30px; text-align: center; }
.howto__steps { display: flex; gap: 16px; max-width: 1100px; margin: 26px auto 0; padding: 0; list-style: none; counter-reset: step; }
.howto__steps li { flex: 1 1 0; position: relative; padding: 58px 18px 20px; border: 2px solid #000; border-radius: 14px; background: #fff; counter-increment: step; font-family: "Montserrat", sans-serif; box-sizing: border-box; }
.howto__steps li::before { content: counter(step); position: absolute; left: 18px; top: 14px; width: 34px; height: 34px; line-height: 34px; border-radius: 50%; background: #ffd800; color: #000; font-weight: 900; text-align: center; }
.howto__steps b { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 900; line-height: 1.3; }
.howto__steps span { display: block; font-size: 14px; font-weight: 500; line-height: 1.5; color: #444; }
.footer-block__subtitle { margin: 22px 0 10px; font-family: "Montserrat", sans-serif; font-size: 22px; font-weight: 900; line-height: 1.3; color: #000; }
.footer-block__subtitle + .footer-block__text { font-weight: 400; }
.cta-final { padding: 50px 0 40px; background: #ffd800; }
@media (max-width: 1000px) {
	.howto__steps { flex-direction: column; gap: 12px; }
}
@media (max-width: 540px) {
	.intro { padding-top: 26px; }
	.intro p, .about__lead, .work__lead, .key-info p, .howto__lead, .cta-final__text { font-size: 15px; }
	.work__lead { margin-top: -34px; }
	.key-info__col { padding: 18px 16px; }
	.key-info__title { font-size: 19px; }
	.howto__title, .cta-final__title { font-size: 22px; }
	.howto__steps li { padding: 16px 16px 16px 62px; }
	.howto__steps li::before { top: 16px; left: 16px; }
}
.work-col .work-block__text { width: auto; max-width: 240px; line-height: 1.45; }
.key-info__col p:last-child { margin-bottom: 0; }