/* Главная страница — стили нового макета (редизайн по макету владельца
   14 августа 2026, файл «Редизайн Happy Prazdnik» — точные цвета, шрифты
   и раскладка перенесены отсюда, реальный текст и фото — из content.json).
   Подключается ПОСЛЕ styles.css и mobile.css и перебивает их.

   Токены объявлены на #main — контейнер только для содержимого главной
   между общей шапкой и подвалом (nav.js), поэтому шапка/подвал остаются
   в старом стиле сайта, как на всех остальных страницах. Шрифты — Libre
   Caslon Text (заголовки) и Karla (текст), подключены в index.html через
   Google Fonts.

   ВАЖНО: классы вроде .service-cards/.pricing-tier/.occasion-card и т.п.
   нигде не описаны в styles.css/mobile.css — их раскладка (display,
   flex/grid, паддинги) целиком живёт здесь, в этом файле. Переопределять
   тут только цвета и не трогать структуру — обязательно проверять, что
   у переопределяемого класса структурные свойства (display, padding,
   flex/grid) тоже присутствуют, иначе карточка разъедется.

   Правила файла: размеры текста на телефоне ≥14px, цели нажатия ≥44px,
   без горизонтального скролла. */

#main {
  --rose: #C25A72;
  --rose-dark: #9E4A59;
  --gold2: #2A2420;
  --gold-soft2: #F3D9DC;
  --blush2: #F8E8E8;
  --cream2: #FAF3EF;
  --card2: #FFFFFF;
  --ink2: #231B1B;
  --ink-soft2: #796B69;
  --line2: #E5D7D3;
  --card-shadow2: 0 1px 2px rgba(21,19,17,0.04), 0 6px 20px rgba(183,122,99,0.06);
  --r-lg: 18px;
  --r-md: 18px;
  --serif2: 'Libre Caslon Text', Georgia, serif;
  --sans2: 'Karla', sans-serif;
  font-family: var(--sans2);
  color: var(--ink2);
  background: var(--cream2);
}

#main .eyebrow { font-family: var(--sans2); color: var(--rose); }

#main .occasions .section__head,
#main .services .section__head,
#main .advantages .section__head,
#main .process .section__head,
#main .reviews .section__head { text-align: center; }

#main .section__title { font-size: clamp(2rem, 3.4vw, 2.25rem); }
/* Ссылки внутри лидов (например, «калькулятор» в ценах) — заметны как ссылки. */
#main .section__lead a { color: var(--rose-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

#main h1, #main h2, #main h3,
#main .section__title,
#main .hero__title {
  font-family: var(--serif2);
  font-weight: 400;
  color: var(--ink2);
}

#main p, #main span, #main li, #main a, #main label, #main input, #main textarea, #main button {
  font-family: var(--sans2);
}

#main .btn--primary { background: var(--rose); color: #fff; }
#main .btn--primary:hover { background: var(--rose-dark); }
#main .btn--ghost { border-color: var(--line2); color: var(--ink2); }
#main .btn--ghost:hover { border-color: var(--rose); color: var(--rose); }

/* ---------- Первый экран ----------
   Слева: рубрика, заголовок, подзаголовок, кнопки, строка фактов (иконка +
   значение). Справа: фото на всю высоту колонки. Строка «шарики от…»
   из макета не входит — цены уже есть в блоке «Сколько стоит оформление». */
#main .hero {
  display: grid;
  /* Одна строка: текст слева, фото справа. Фото растягивается по высоте
     текстовой колонки (см. .hero__photo) — пустоты под текстом нет. */
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.95fr);
  grid-template-areas: "copy photo";
  column-gap: clamp(40px, 5vw, 64px);
  align-items: center;
  padding: 72px 28px 64px;
  max-width: 1360px;
  margin: 0 auto;
  overflow-x: clip;
}

#main .hero__copy { grid-area: copy; max-width: none; background: transparent; }

#main .hero__title { font-size: clamp(2rem, 3.4vw, 2.25rem); line-height: 1.15; margin-bottom: 22px; }
#main .hero__subtitle { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft2); max-width: 460px; margin-bottom: 24px; }

#main .hero__photo {
  grid-area: photo;
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  align-self: stretch;
  /* Высота = высота левой колонки (без aspect-ratio фото не раздувает
     hero); кадр обрезается по центру. Скругление как у медиа-блоков
     «Цен» (pricing-tier__media) — острее, чем у карточек. */
  border-radius: calc(var(--r-md) - 6px);
  overflow: hidden;
  border: none;
  background: none;
}
#main .hero__photo::after { display: none; }
#main .hero__photo picture,
#main .hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#main .hero__photo-empty { display: none; }
#main .hero:has(.hero__photo-empty) {
  grid-template-areas: "copy";
  grid-template-columns: 1fr;
}

#main .hero__price-teaser { display: none; }

#main .hero__cta { margin-bottom: 0; order: 2; }
/* Более прямоугольные кнопки — как переключатели в калькуляторе
   (.calc-more, .calculator__delivery-option), а не общесайтовая пилюля. */
#main .hero__cta .btn { border-radius: var(--r-lg); min-height: 44px; }

/* Полоса доверия: рейтинг «★ 5,0 Яндекс Карты» + факты о мастере в одну
   строку через hairline-разделители. Раньше это были два отдельных блока
   (рейтинг над кнопками и плашки внизу) с пустотой между ними. */
#main .hero__rating {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 24px;
  font-size: 0.9375rem;
  color: var(--ink-soft2);
}
#main .hero__rating .hero-trust__item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 22px;
  border-left: 1px solid var(--line2);
}
#main .hero__rating .hero-trust__item:first-child { padding-left: 0; border-left: none; }
#main .hero__rating .hero-trust__item--rating a { color: var(--accent-deep); }
#main .hero__rating strong { font-family: var(--serif2); font-weight: 400; font-size: 1.2em; line-height: 1.1; color: var(--ink2); }

/* Плашки «10 лет опыта» больше не существуют отдельно — факты уехали
   в полосу доверия выше; пустой контейнер скрываем. */
#main .hero__stats { display: none; }

/* ---------- Витрина работ из каталога (макет главной v2) ----------
   Пять случайных работ: фото 4:5, снизу цена. Секция без заголовка,
   стоит сразу под первым экраном, перед поводами. */
#main .home-works {
  margin: 0 auto;
  padding: 0 28px 64px;
  max-width: 1360px;
}
#main .home-works__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
#main .home-works__title {
  margin: 0;
  font-family: var(--serif2);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 1.95rem);
  color: var(--ink2);
}
#main .home-works__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink2);
  font-weight: 700;
}
#main .home-works__link:hover { color: var(--rose); }
/* На десктопе ссылка переехала в шапку секции — снизу не дублируем. */
#main .home-works__more { display: none; }
#main .home-works__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Карточка — точная копия .occasion-card ниже: та же рамка, тень, скругление,
   отступ подписи и поведение при наведении. Только вместо заголовка+описания
   здесь цена (у работы портфолио нет отдельного названия для карточки). */
#main .home-work {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line2);
  background: var(--card2);
  box-shadow: var(--card-shadow2);
  transition: border-color 0.2s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
#main .home-work:hover {
  border-color: var(--rose);
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(35, 27, 27, 0.12);
}
#main .home-work__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
#main .home-work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
#main .home-work:hover .home-work__media img { transform: scale(1.04); }
#main .home-work__price {
  display: block;
  padding: 16px;
  font-family: var(--sans2);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rose);
}
#main .home-work__price--ask { color: var(--ink-soft2); }
/* Ссылка «Смотреть весь каталог →» — та же ссылка, что «Смотреть все
   поводы →»: серая по умолчанию, розовая при наведении (было наоборот —
   розовая всегда, что выделяло её сильнее, чем у соседней секции). */
#main .home-works__more { margin: 28px 0 0; text-align: center; }
#main .home-works__more a {
  display: inline-block;
  padding: 12px 4px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink2);
  border-bottom: 1px solid var(--line2);
  transition: color 0.15s, border-color 0.15s;
}
#main .home-works__more a:hover { color: var(--rose); border-color: var(--rose); }

/* ---------- Поводы: «Какой у вас праздник?» ----------
   Фото 4:5, карточка со слабой тенью — по макету v2. */
#main .occasions-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

#main .occasion-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line2);
  background: var(--card2);
  box-shadow: var(--card-shadow2);
  transition: border-color 0.2s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
#main .occasion-card:hover {
  border-color: var(--rose);
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(35, 27, 27, 0.12);
}
#main .occasion-card__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
#main .occasion-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
#main .occasion-card:hover .occasion-card__media img { transform: scale(1.04); }
#main .occasion-card__body { display: block; padding: 16px; }
#main .occasion-card__title { display: block; font-family: var(--sans2); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--ink2); margin-bottom: 6px; }
#main .occasion-card__desc { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-soft2); }
#main .occasions__more { margin: 28px 0 0; text-align: center; }
#main .occasions__more a {
  display: inline-block;
  padding: 12px 4px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink2);
  border-bottom: 1px solid var(--line2);
  transition: color 0.15s, border-color 0.15s;
}
#main .occasions__more a:hover { color: var(--rose); border-color: var(--rose); }
/* Кнопка «Показать ещё» — только на телефоне (см. медиа-запрос ниже),
   на десктопе все карточки видны сразу. */
#main .occasions__show-more { display: none; }

/* ---------- Услуги: «Что можно оформить» ----------
   Секция на розовой подложке (blush), как в макете. */
#main .services { background: var(--blush2); max-width: none; padding: var(--section-gap) 28px; margin: var(--section-gap) 0; }
/* 1304, не 1360: у «Поводов» (.section, max-width:1360) 28px padding
   срезаны ВНУТРИ этой ширины, контент — 1360-56=1304. У «Услуг» те же
   28px padding раньше считались от края экрана (max-width:none), и эта
   обёртка ничего не срезала — фото получались на 56px шире. */
#main .services > * { max-width: 1304px; margin-left: auto; margin-right: auto; }

#main .service-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

#main .service-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  background: var(--card2);
  color: inherit;
  overflow: hidden;
  box-shadow: var(--card-shadow2);
  transition: border-color 0.2s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
#main .service-card:hover {
  border-color: var(--rose);
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(35, 27, 27, 0.12);
}
#main .service-card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
#main .service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
#main .service-card:hover .service-card__media img { transform: scale(1.04); }
#main .service-card__body { display: block; padding: 16px; }
#main .service-card__title { display: block; font-family: var(--sans2); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--ink2); margin-bottom: 6px; }
#main .service-card__desc { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-soft2); }
#main .service-card__price { display: none; }
#main .service-card__foot { display: none; }
/* «Показать ещё» — только на телефоне (см. медиа-запрос ниже). */
#main .services__show-more { display: none; }
#main .service-card__more { display: none; }
/* margin-top, а не margin: 28px 0 0 — иначе обнулённые left/right
   перебивают центрирование из «#main .services > *» (margin auto), и блок
   съезжает к левому краю. */
#main .services__more { margin-top: 28px; text-align: center; }
#main .services__more a {
  display: inline-block;
  padding: 12px 4px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink2);
  border-bottom: 1px solid var(--line2);
  transition: color 0.15s, border-color 0.15s;
}
#main .services__more a:hover { color: var(--rose); border-color: var(--rose); }

/* ---------- Цены: «Сколько стоит оформление?» ----------
   Три диапазона — те же, что форматы калькулятора (Мини/Стандарт/Большой).
   Без кнопки: вся карточка — ссылка на калькулятор (та же схема наведения,
   что у .occasion-card/.service-card). */
#main .pricing-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }

#main .pricing-tier {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  background: var(--card2);
  box-shadow: var(--card-shadow2);
  padding: 26px 24px 24px;
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
#main .pricing-tier:hover { border-color: var(--rose); transform: translateY(-4px); box-shadow: 0 14px 34px rgba(35, 27, 27, 0.12); }
#main .pricing-tier__media { display: block; aspect-ratio: 4/3; border-radius: calc(var(--r-md) - 6px); overflow: hidden; margin: 0 0 16px; }
#main .pricing-tier__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s var(--ease); }
#main .pricing-tier:hover .pricing-tier__media img { transform: scale(1.04); }
#main .pricing-tier__title { display: block; font-family: var(--serif2); font-size: 1.45rem; line-height: 1.15; color: var(--ink2); }
#main .pricing-tier__badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: var(--r-md);
  background: var(--blush2);
  color: var(--rose);
  font-size: 0.8125rem;
  font-weight: 700;
}
#main .pricing-tier__subtitle { display: block; margin: 10px 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--ink-soft2); }
#main .pricing-tier__list { display: block; margin: 16px 0 0; flex: 1; }
#main .pricing-tier__item { display: block; position: relative; padding: 0 0 0 22px; margin: 0 0 10px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft2); }
#main .pricing-tier__item::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose);
  opacity: 0.8;
}
/* Ссылка под сеткой — только на десктопе (см. медиа-запрос ниже), карточки
   и так кликабельны целиком, но на телефоне при свайпе кнопка снизу
   секции не видна, поэтому там её нет. */
#main .pricing-more { margin: 28px 0 0; text-align: center; }
#main .pricing-more a {
  display: inline-block;
  padding: 12px 4px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink2);
  border-bottom: 1px solid var(--line2);
  transition: color 0.15s, border-color 0.15s;
}
#main .pricing-more a:hover { color: var(--rose); border-color: var(--rose); }

/* ---------- Преимущества: «Ваш праздник в надёжных руках» ----------
   На розовой подложке, иконки в кружке — как в макете (иконка не голая
   штриховая линия сама по себе, а внутри мягкого золотистого круга). */
#main .advantages { background: var(--blush2); max-width: none; padding: var(--section-gap) 28px; margin: var(--section-gap) 0; }
#main .advantages > * { max-width: 1304px; margin-left: auto; margin-right: auto; }

#main .advantages-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; text-align: center; }
#main .advantage { border-top: none; padding-top: 0; }
#main .advantage__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gold-soft2);
  color: var(--rose);
  margin: 0 auto 16px;
}
#main .advantage__title { font-size: 1.02rem; font-weight: 700; margin: 0 0 6px; }
#main .advantage__desc { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft2); }

/* ---------- О мастере ---------- */
#main .about__grid { align-items: start; grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1fr); }
#main .about__photo { grid-column: 1; grid-row: 1 / span 2; align-self: start; max-width: 540px; }
#main .about__copy { grid-column: 2; grid-row: 1; }
#main .home-advantages { grid-column: 2; grid-row: 2; }
#main .about__photo picture,
#main .about__photo img { border-radius: var(--r-lg); }
/* Заголовок был до 2.3rem (styles.css) и доминировал над фото — уже. Текст
   шире 46em по умолчанию (styles.css) — колонка справа гораздо шире этого,
   оставалась пустота; больше текста (buildAboutHtml берёт 2 предложения
   вместо одного) + расширенный max-width заполняют её. */
#main .about__quote { font-family: var(--serif2); font-style: normal; color: var(--ink2); font-size: clamp(1.4rem, 2vw, 1.85rem); }
#main .about__text { max-width: 56em; }
#main .about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 30px; }
#main .about__stat { border: 1px solid var(--line2); border-radius: var(--r-md); background: var(--card2); padding: 14px 16px; }
#main .about__stat-value { display: block; font-family: var(--serif2); font-size: 1.6rem; line-height: 1.1; color: var(--ink2); }
#main .about__stat-label { display: block; margin-top: 5px; font-size: 0.82rem; color: var(--ink-soft2); }
#main .about__thanks {
  margin: 0;
  font-family: var(--serif2);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--rose-dark);
  transform: rotate(-1.2deg);
}

/* Ссылка «Подробнее о мастере» — тот же стиль ссылки-кнопки, что «Смотреть
   услуги»/«Рассчитать точную стоимость» (подчёркивание на всю ширину текста,
   не просто цветной текст), короткая версия секции (SEO-04) — полная версия
   и биография на отдельной странице /o-mastere. */
#main .about__more {
  display: inline-block;
  padding: 12px 4px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink2);
  border-bottom: 1px solid var(--line2);
  transition: color 0.15s, border-color 0.15s;
}
#main .about__more:hover { color: var(--rose); border-color: var(--rose); }

/* ---------- Как проходит заказ ----------
   Четыре шага в один ряд на широком экране, кружки-иконки соединены
   пунктирной линией — так же, как в макете. На розовой подложке. */
#main .process { background: var(--blush2); max-width: none; padding: var(--section-gap) 28px; margin: var(--section-gap) 0; }
#main .process > * { max-width: 1304px; margin-left: auto; margin-right: auto; }

#main .process__steps { grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; }
#main .process__step { padding-left: 0; border-left: none; padding-top: 0; border-top: none; text-align: center; }
#main .process__step-head {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  margin-bottom: 14px;
}
#main .process__step-head::before {
  content: '';
  position: absolute;
  top: 25px;
  left: -50%;
  width: 100%;
  border-top: 1.5px dashed var(--line2);
  z-index: 0;
}
#main .process__step:first-child .process__step-head::before { display: none; }
#main .process__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--card2);
  border: 1.5px solid var(--rose);
  color: var(--rose);
}
#main .process__icon svg { display: block; }
#main .process__num { display: block; margin-top: 8px; font-family: var(--serif2); font-size: 0.85rem; color: var(--ink-soft2); }
#main .process__step h3 { font-size: 0.98rem; font-weight: 700; margin: 0 0 6px; }
#main .process__step p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft2); }

/* ---------- Отзывы ---------- */
#main .review-card__media { aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line2); margin-bottom: 16px; }
#main .review-card__media img { width: 100%; height: 100%; object-fit: cover; }
#main .review-card { border-color: var(--line2); background: var(--card2); border-radius: var(--r-md); }
#main .review-card__stars { display: block; margin: 0 0 10px; font-size: 1.05rem; letter-spacing: 2px; color: var(--gold2); }
#main .review-card__link { color: var(--rose); border-color: var(--line2); }
#main .review-card__link:hover { color: var(--rose-dark); border-color: var(--rose-dark); }

/* ---------- Нижний блок: FAQ + форма заявки ----------
   На розовой подложке, форма — светлая карточка со скруглением макета. */
#main .home-faq { background: var(--blush2); max-width: none; padding: var(--section-gap) 28px; margin: var(--section-gap) 0 0; }
#main .home-faq > * { max-width: 1304px; margin-left: auto; margin-right: auto; }

#main .home-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
}
/* Форма (справа) выше блока вопросов — центрируем вопросы по высоте
   формы, а не прижимаем к её верхнему краю. Сама форма остаётся на месте. */
#main .home-faq__col { align-self: center; }
#main .home-faq__title { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 24px; }
#main .home-faq__form { border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--card2); padding: 30px 30px 26px; }
#main .home-faq__form-title { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0 0 4px; }
#main .home-faq__form .order-form { background: none; box-shadow: none; padding: 18px 0 0; }
#main .home-faq__form .order-form__field input,
#main .home-faq__form .order-form__field textarea { background: var(--cream2); border-radius: var(--r-lg); }
/* Форма на главной короче, чем на страницах работ (то же поле, но без
   отдельного вводного абзаца) — сближаем её высоту со списком вопросов
   слева, не трогая общий .order-form на остальных страницах. */
#main .home-faq__form .order-form__field,
#main .home-faq__form .order-form__row,
#main .home-faq__form .order-form__consent { margin-top: 12px; }
#main .home-faq__form .order-form__field textarea { min-height: 64px; }

#main .faq-item { border-color: var(--line2); }
#main .faq-item summary::after { color: var(--rose); font-family: var(--serif2); }
#main .faq-item p a { color: var(--rose); }

#main .order-chip { border-radius: var(--r-lg); }
#main .order-chip[aria-checked="true"] { background: var(--rose); border-color: var(--rose); }
#main .order-form__progress-fill { background: var(--rose); }

/* ---------- Планшет (721–900px) ---------- */
@media (min-width: 721px) and (max-width: 900px) {
  #main .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "photo";
  }
  /* На планшете фото отдельной строкой — фиксированная пропорция 4/3,
     чтобы ряд не схлопнулся (на десктопе высоту задаёт левая колонка). */
  #main .hero__photo { align-self: auto; height: auto; aspect-ratio: 4 / 3; }

  #main .occasions-cards { grid-template-columns: repeat(3, 1fr); }
  #main .service-cards { grid-template-columns: repeat(3, 1fr); }

  #main .pricing-tiers { grid-template-columns: repeat(3, 1fr); gap: 12px; }

  #main .advantages-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
  #main .advantages-grid .advantage:last-child:nth-child(3n+2) { grid-column: span 2; }

  #main .process__steps { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  #main .process__step:nth-child(odd) .process__step-head::before { display: none; }
  /* Компактные 4 шага главной на планшете — 2×2, разделитель только внутри ряда. */
  #main .process__steps--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  #main .process__steps--compact .process__step { padding: 4px 32px; }
  #main .process__steps--compact .process__step:nth-child(odd) { border-left: 0; padding-left: 0; }
  #main .process__steps--compact .process__step:nth-child(n+3) { padding-top: 28px; }

  #main .home-faq__grid { grid-template-columns: 1fr; }
}

/* ---------- Телефон (≤720px) ---------- */
@media (max-width: 720px) {
  #main .hero { display: block; padding: 0; overflow-x: clip; }

  /* На телефоне фото убрано совсем — решение владельца, не возвращать:
     портретное фото на всю ширину съедало половину первого экрана. */
  #main .hero__photo { display: none; }

  #main .hero__copy { padding: 24px 20px 0; }
  #main .hero__title { font-size: 2rem; }

  /* Полоса доверия — компактной сеткой 2×2: факты парами, разделитель
     только между колонками. Идёт сразу за подзаголовком, до кнопок. */
  #main .hero__rating {
    order: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 10px;
    margin: 0 0 18px;
    font-size: 0.9375rem;
  }
  #main .hero__rating .hero-trust__item { display: block; padding: 0; border-left: none; }
  #main .hero__rating .hero-trust__item:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line2); }
  #main .hero__rating strong { font-size: 1.15em; }

  #main .hero__cta { display: flex; flex-direction: column; gap: 10px; order: 2; }
  #main .hero__cta .btn { width: 100%; text-align: center; }

  #main .home-works__head { display: none; }
  #main .home-works { padding: 0 20px 40px; }
  #main .home-works__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
  /* На телефоне — 6 работ (три ряда по две), остальные скрыты. */
  #main .home-work:nth-child(n+7) { display: none; }
  #main .home-work__price { padding: 12px 6px; font-size: 0.875rem; }
  #main .home-works__more { display: block; margin-bottom: 0; }

  /* Как у «Работ из каталога»: сетка 2 колонки вместо свайпа. Сначала
     видно 4 карточки (2 ряда), «Показать ещё» открывает оставшиеся —
     тогда кнопка меняется на «Смотреть все поводы →». */
  #main .occasions-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  #main .occasions-cards:not(.is-expanded) .occasion-card:nth-child(n+5) { display: none; }
  #main .occasion-card__title { font-size: 0.95rem; margin-bottom: 0; }
  #main .occasion-card__desc { display: none; }

  #main .occasions__show-more {
    display: block;
    width: max-content;
    margin: 20px auto 0;
    padding: 12px 4px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line2);
    font-family: var(--sans2);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink2);
    cursor: pointer;
  }
  #main .occasions__show-more:hover { color: var(--rose); border-color: var(--rose); }
  #main .occasions-cards.is-expanded ~ .occasions__show-more { display: none; }

  #main .occasions__more { margin-top: 20px; display: none; }
  #main .occasions-cards.is-expanded ~ .occasions__more { display: block; }

  #main .services { padding: 56px 20px; }
  /* По аналогии с «Поводами»: сетка 2 колонки, видно 4, «Показать ещё»
     раскрывает остальные. Своей ссылки на что-то большее тут нет (это и
     есть все услуги), поэтому кнопка после клика просто скрывается. */
  #main .service-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  #main .service-cards:not(.is-expanded) .service-card:nth-child(n+5) { display: none; }
  #main .service-card__title { font-size: 0.95rem; margin-bottom: 0; }
  #main .service-card__desc { display: none; }

  #main .services__show-more {
    display: block;
    width: max-content;
    margin: 20px auto 0;
    padding: 12px 4px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line2);
    font-family: var(--sans2);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink2);
    cursor: pointer;
  }
  #main .services__show-more:hover { color: var(--rose); border-color: var(--rose); }
  #main .service-cards.is-expanded ~ .services__show-more { display: none; }
  #main .services__more { margin-top: 20px; display: none; }
  #main .service-cards.is-expanded ~ .services__more { display: block; }

  /* «Цены» на телефоне — спокойным столбиком, без свайп-ленты:
     горизонтальный скролл со scroll-snap и touch-action:pan-x перехватывал
     вертикальный свайп — страница «зависала» от лёгкого касания. */
  #main .pricing-tiers {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
    margin: 0; padding: 0;
  }
  #main .pricing-tier { min-width: 0; }
  #main .pricing-more { display: none; }

  #main .advantages { padding: 48px 20px; }
  #main .advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  #main .advantages-grid .advantage:last-child:nth-child(3n+2) { grid-column: 1 / -1; }

  /* Фото было уже текста (max-width:280px, mobile.css) — во всю ширину
     колонки, как текст под ним. Пропорция 4/5 (styles.css) при полной
     ширине давала высоту 418px — многовато, делаем ниже (4/3). */
  #main .about__photo { max-width: none; width: 100%; margin: 0; aspect-ratio: 4/3; }
  /* Заголовок-цитата легче: было 1.45rem (mobile.css), делаем ещё компактнее. */
  #main .about__quote { font-size: 1.2rem; }
  /* Было repeat(3,1fr) при двух карточках — третья колонка пустовала,
     карточки выглядели прижатыми влево. Две карточки, поровну на всю ширину. */
  #main .about__stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #main .about__stat { padding: 10px 12px; }
  #main .about__stat-value { font-size: 1.2rem; }
  #main .about__thanks { font-size: 1.2rem; }
  /* «Подробнее о мастере» — та же ссылка-кнопка, что «Смотреть услуги»/
     «Рассчитать точную стоимость»: подчёркивание на всю ширину, не просто
     цветной текст. */
  #main .about__more {
    display: block;
    width: 100%;
    padding: 12px 4px;
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink2);
    border-bottom: 1px solid var(--line2);
  }
  #main .about__more:hover { color: var(--rose); border-color: var(--rose); }

  /* «Как проходит заказ» на телефоне — спокойным столбиком, без свайп-ленты:
     горизонтальный скролл со scroll-snap и touch-action:pan-x перехватывал
     вертикальный свайп — страница «зависала» от лёгкого касания. */
  #main .process { padding: 40px 20px; }
  #main .process__steps {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
    margin: 0; padding: 0;
  }
  #main .process__step {
    min-width: 0; text-align: left;
    background: var(--card2); border-radius: var(--r-lg);
    padding: 20px; border: 1px solid var(--line2);
  }
  #main .process__step-head { flex-direction: row; justify-content: flex-start; gap: 12px; margin-bottom: 12px; }
  #main .process__step-head::before { display: none; }
  #main .process__num { margin-top: 0; }

  #main .home-faq { padding: 40px 20px; }
  #main .home-faq__grid { grid-template-columns: 1fr; gap: 36px; }
  /* Форма заявки на телефоне — выше частых вопросов (в разметке она вторая,
     но её проще заметить и заполнить сразу, не листая мимо длинного FAQ). */
  #main .home-faq__form { order: -1; padding: 24px 20px 20px; }
  #main .home-faq__form .order-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Hero v4: портфолио начинается с первого экрана ---------- */
#main .hero--showcase {
  grid-template-columns: minmax(0, 0.88fr) minmax(560px, 1.12fr);
  grid-template-areas: 'copy showcase';
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
  max-width: 1360px;
  min-height: min(760px, calc(100vh - 56px));
  padding: 56px 28px 48px;
}

#main .hero--showcase .hero__copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 590px;
}

#main .hero--showcase .hero__title {
  max-width: 12ch;
  margin: 0 0 24px;
  font-size: clamp(2.8rem, 4.2vw, 4.3rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

#main .hero--showcase .hero__subtitle {
  max-width: 54ch;
  margin: 0 0 28px;
  font-size: 1.0625rem;
  line-height: 1.62;
}

#main .hero--showcase .hero__cta {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 28px;
}

#main .hero--showcase .hero__cta .btn {
  min-height: 50px;
  padding: 14px 24px;
  border-radius: 4px;
}

#main .hero--showcase .hero__cta .btn--ghost {
  min-height: 44px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--line2);
  border-radius: 0;
  background: transparent;
}

#main .hero--showcase .hero__rating {
  order: initial;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line2);
}

#main .hero--showcase .hero__rating .hero-trust__item {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line2);
}

#main .hero--showcase .hero__rating .hero-trust__item:nth-child(even) {
  padding-left: 18px;
  border-left: 1px solid var(--line2);
}

#main .hero--showcase .hero__rating strong { font-size: 1.1rem; }

#main .hero-showcase {
  grid-area: showcase;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  height: clamp(500px, 42vw, 610px);
}

#main .hero-showcase__item {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--line2);
}

#main .hero-showcase__item--main { grid-row: auto; }
#main .hero-showcase__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
#main .hero-showcase__item:hover img { transform: scale(1.025); }
#main .hero-showcase__item span {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 8px 10px;
  border-radius: 3px;
  background: rgba(255, 253, 249, 0.94);
  color: var(--ink2);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
}
#main .hero-showcase__item--detail span { display: none; }

@media (min-width: 721px) and (max-width: 1000px) {
  #main .hero--showcase {
    grid-template-columns: 1fr;
    grid-template-areas: 'copy' 'showcase';
    min-height: 0;
  }
  #main .hero--showcase .hero__copy { max-width: 720px; }
  #main .hero-showcase { height: 520px; }
}

@media (max-width: 720px) {
  #main .hero--showcase {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 'copy';
    gap: 24px;
    min-height: 0;
    padding: 30px 20px 34px;
  }
  #main .hero--showcase .hero__copy { padding: 0; max-width: none; }
  #main .hero--showcase .hero__title {
    max-width: 11ch;
    margin-bottom: 18px;
    font-size: clamp(2.55rem, 12vw, 3.35rem);
    line-height: 1;
  }
  #main .hero--showcase .hero__subtitle { margin-bottom: 22px; font-size: 1rem; line-height: 1.55; }
  #main .hero--showcase .hero__cta { flex-direction: row; gap: 16px; margin-bottom: 22px; }
  #main .hero--showcase .hero__cta .btn { width: auto; flex: 1 1 auto; padding-left: 16px; padding-right: 16px; }
  #main .hero--showcase .hero__cta .btn--ghost { flex: 0 0 auto; }
  #main .hero--showcase .hero__rating { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main .hero--showcase .hero__rating .hero-trust__item,
  #main .hero--showcase .hero__rating .hero-trust__item:nth-child(even) {
    min-height: 52px;
    padding: 10px 10px 8px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line2);
    font-size: 0.875rem;
  }
  #main .hero--showcase .hero__rating .hero-trust__item:nth-child(even) {
    padding-left: 12px;
    border-left: 1px solid var(--line2);
  }
  #main .hero-showcase { display: none; }
}

/* ---------- Главная v3: короткий путь от портфолио к расчёту ---------- */
#main .eyebrow,
#main .hero__eyebrow { display: none; }

#main .section__head {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#main .section__lead {
  max-width: 62ch;
  margin: 12px auto 0;
  color: var(--ink-soft2);
  font-size: 1rem;
  line-height: 1.55;
}

/* Двенадцать работ — две ровные строки на широком экране. */
#main .home-works__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
#main .home-work:nth-child(n+11) { display: none; }
#main .home-work__price { font-size: 0.875rem; padding: 10px 12px; }

/* Поводы и типы оформления теперь составляют один блок выбора. */
#main .home-choices {
  max-width: none;
  margin: 0;
  padding: 64px 28px;
  background: var(--blush2);
}
#main .home-choices > * { max-width: 1304px; margin-left: auto; margin-right: auto; }
#main .home-choices__group { margin-top: 40px; }
#main .home-choices__group + .home-choices__group {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--line2);
}
#main .home-choices__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
#main .home-choices__bar h3 { margin: 0; font-family: var(--serif2); font-weight: 400; font-size: clamp(1.7rem, 2.8vw, 1.95rem); color: var(--ink2); }
#main .home-choices__bar a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink2);
  font-weight: 700;
}
#main .home-choices__bar a:hover { color: var(--rose); }
#main .home-choices .services { margin: 48px auto 0; padding: 0; background: transparent; }
#main .home-choices .services > * { max-width: 1304px; margin-left: auto; margin-right: auto; }
#main .home-choices .occasion-card:nth-child(n+5),
#main .home-choices .service-card:nth-child(n+5) { display: none; }
#main .home-choices .occasion-card__media,
#main .home-choices .service-card__media { aspect-ratio: 4 / 5; }
#main .occasion-card__desc,
#main .service-card__desc { font-size: 0.875rem; line-height: 1.5; }

/* Личный рассказ и конкретные обещания читаются как одна история. */
#main .about .section__head { text-align: left; max-width: none; }
#main .home-advantages { margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--line2); }
#main .home-advantages__title { margin: 0 0 18px; font-size: 1.35rem; }
#main .home-advantages .advantage-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
#main .home-advantages .advantage-rail__item {
  padding: 8px 24px 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#main .home-advantages .advantage-rail__item:nth-child(n+5) { display: none; }
#main .home-advantages .advantage-rail__item + .advantage-rail__item {
  padding-left: 24px;
  border-left: 1px solid var(--line2);
}

/* Тарифы и калькулятор — одно решение, а не две соседние секции. */
#main .pricing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line2);
}
#main .pricing-cta p { margin: 0; color: var(--ink-soft2); font-size: 1rem; }
#main .pricing-cta .btn { min-height: 48px; white-space: nowrap; border-radius: var(--r-md); }

/* Четыре содержательных шага вместо шести микрошагов. */
#main .process__steps--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
#main .process__steps--compact .process__step { padding: 4px 32px; text-align: left; }
#main .process__steps--compact .process__step + .process__step { border-left: 1px solid var(--line2); }
#main .process__steps--compact .process__step-head { align-items: flex-start; margin-bottom: 12px; }
#main .process__steps--compact .process__step-head::before { display: none; }
#main .process__steps--compact .process__num {
  margin: 0;
  color: var(--rose);
  font-family: var(--sans2);
  font-weight: 700;
  letter-spacing: 0.08em;
}
#main .process__steps--compact .process__step h3 { font-size: 1.1rem; }
#main .process__steps--compact .process__step p { font-size: 0.9375rem; }

/* Отзывы без тяжёлой карты: социальное доказательство остаётся в потоке,
   в общем ритме секций — без добавочных отступов сверху и снизу. */
#main .reviews__more { justify-content: center; }
/* Ссылка внизу отзывов — вид как у ссылок-кнопок остальных секций. */
#main .reviews__more a {
  display: inline-block;
  padding: 12px 4px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink2);
  border-bottom: 1px solid var(--line2);
  transition: color 0.15s, border-color 0.15s;
}
#main .reviews__more a:hover { color: var(--rose); border-color: var(--rose); }
#main .reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#main .reviews__more { justify-content: center; }

/* Основная форма короче; вложение-пример остаётся заметным. */
#main .home-faq__form .order-comment__add-photo {
  width: 44px;
  height: 44px;
  font-size: 0;
}
#main .home-faq__form .order-comment__add-photo::after {
  content: 'Фото';
  font-size: 0.75rem;
  font-weight: 700;
}

/* .mobile-actions — в mobile.css (общая плашка для всех страниц). */

@media (min-width: 721px) and (max-width: 1100px) {
  #main .home-works__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #main .home-advantages .advantage-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  #main .home-advantages .advantage-rail__item:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 720px) {
  #main .section__lead { font-size: 1rem; }
  #main .home-works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  #main .home-choices { padding: 40px 20px; }
  #main .home-choices__group { margin-top: 32px; }
  #main .home-choices__group + .home-choices__group { margin-top: 36px; padding-top: 32px; }
  #main .home-choices__bar { align-items: center; margin-bottom: 14px; }
  #main .home-choices__bar h3 { font-size: 1.2rem; }
  #main .home-choices__bar a { font-size: 0.875rem; }
  #main .home-choices .occasions-cards,
  #main .home-choices .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* «По поводу» и «Вид оформлений» — как витрина: шапки групп скрыты,
     карточки сеткой 2 колонки (видно 4), ссылка на каталог — внизу. */
  #main .home-choices__group { display: flex; flex-direction: column; margin-top: 24px; }
  #main .home-choices__group + .home-choices__group { margin-top: 40px; padding-top: 0; }
  #main .home-choices .services { margin: 40px auto 0; padding: 0; background: transparent; }
  #main .home-choices__bar { display: block; order: 2; margin: 28px 0 0; text-align: center; }
  #main .home-choices__bar h3 { display: none; }
  /* Вид — как изначальная ссылка внизу витрины: капс по центру с чертой. */
  #main .home-choices__bar a {
    display: inline-block;
    padding: 12px 4px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink2);
    border-bottom: 1px solid var(--line2);
  }
  #main .occasions__show-more,
  #main .services__show-more,
  #main .occasions__more,
  #main .services__more,
  #main .occasions-cards.is-expanded ~ .occasions__more,
  #main .service-cards.is-expanded ~ .services__more { display: none; }
  /* Ссылки-кнопки внизу витрины и групп — покрупнее. */
  #main .home-works__more a,
  #main .home-choices__bar a,
  #main .reviews__more a {
    padding: 16px 8px;
    font-size: 1rem;
  }

  #main .about { padding-bottom: 40px; }
  /* Блок «Что я беру на себя» на телефоне скрыт (остаётся на десктопе). */
  #main .home-advantages { display: none; }
  /* Две колонки (фото слева) только для широких; на телефоне всё строго
     в одну колонку: фото вверху во всю ширину, ниже текст и преимущества. */
  #main .about__grid { grid-template-columns: 1fr; gap: 24px; }
  /* Сброс десктопных позиций (фото слева / текст справа), иначе текст
     ложится поверх фото. */
  #main .about__photo,
  #main .about__copy,
  #main .home-advantages { grid-column: auto; grid-row: auto; }
  #main .home-advantages { margin-top: 24px; padding-top: 20px; }
  #main .home-advantages .advantage-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  #main .home-advantages .advantage-rail__item,
  #main .home-advantages .advantage-rail__item + .advantage-rail__item {
    padding: 14px 0;
    border: 0;
    border-top: 1px solid var(--line2);
  }
  #main .home-advantages .advantage-rail__item:nth-child(-n+2) { border-top: 0; }
  #main .home-advantages .advantage__title { font-size: 1rem; }
  #main .home-advantages .advantage__desc { font-size: 0.9375rem; line-height: 1.5; }

  #main .pricing { padding-top: 40px; padding-bottom: 0; }
  #main .pricing-tier__list { display: none; }
  #main .pricing-tier {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 14px;
    padding: 16px;
  }
  #main .pricing-tier__media {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 150px;
    height: 150px;
    aspect-ratio: 1;
    margin: 0;
  }
  #main .pricing-tier__title,
  #main .pricing-tier__badge,
  #main .pricing-tier__subtitle { grid-column: 2; }
  #main .pricing-tier__title { font-size: 1.2rem; }
  #main .pricing-tier__badge { justify-self: start; margin-top: 5px; padding: 3px 9px; }
  #main .pricing-tier__subtitle { margin-top: 6px; font-size: 0.875rem; }
  #main .pricing-cta { display: block; }
  #main .pricing-cta p { margin-bottom: 18px; }
  #main .pricing-cta .btn { width: 100%; text-align: center; }

  #main .process__steps--compact { grid-template-columns: 1fr; gap: 0; }
  #main .process__steps--compact .process__step,
  #main .process__steps--compact .process__step + .process__step {
    padding: 22px 0;
    border: 0;
    border-top: 1px solid var(--line2);
    border-radius: 0;
    background: transparent;
  }
  #main .process__steps--compact .process__step:first-child { border-top: 0; }

  #main .reviews__grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  #main .reviews .section__lead a,
  #main .reviews__more a,
  #main .hero__rating a,
  #main .faq-item p a { display: inline-flex; min-height: 44px; align-items: center; }
  #main .faq-item summary { min-height: 44px; display: flex; align-items: center; }

}

/* Убраны кнопки «Получить расчёт» и «Посмотреть работы» из hero. */
#main .hero--showcase .hero__cta,
#main .hero__cta { display: none; }