/* Стили страниц раздела «Продукт — photo, cabinet, monuments, memory, registry, site, services».

   Подключён на всех страницах сайта (шаблон SITE_PAGE в build.py) после
   styles.css. Общий язык оформления — токены, кнопки, первый экран, плитки,
   подложки сцен .stage — живёт в styles.css; здесь только то, что нужно
   страницам этого раздела. Правила начинайте с `body[data-page="имя"]` или с класса блока,
   а не с голого тега: файл читают все страницы сайта.

   Блоки раздела (приставка `prod-`, 09.10.2026, фаза 2 языка «Рядом»):
   - `.prod-hero__stage` — сцена справа от первого экрана, на небе страницы;
   - `.prod-sec--first` — первый раздел под первым экраном, ближе к нему;
   - `.prod-cmp2` — сравнение строками в две колонки «Как сейчас / В кабинете»
     поверх общего `.cmp`, без колонки темы;
   - `.prod-feat` (`--rev`) — под заголовком раздела: список слева, сцена
     справа (или наоборот); сцена держится у верха списка, пока список длинный;
   - `.prod-leads` — несколько вводных абзацев в заголовке раздела `--split`;
   - `.prod-facts` — три коротких факта в строку с тонкой чертой сверху;
   - `.prod-checks--strong` — пункты с жирным началом, крупнее и реже;
   - `.steplist__us` — вторая строка шага («что это даёт дому»);
   - `.prod-cards` — плитки без сцены (сайт дома). */

/* ── Первый экран: сцена на небе ── */
.prod-hero__stage {
  --stage-pad: 0px;
  padding: 0;
  overflow: visible;
}

.prod-hero__stage > * {
  max-width: 600px;
}

@media (min-width: 981px) {
  .page-hero:has(.prod-hero__stage) .page-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
  }
}

.page-hero:has(.prod-hero__stage) h1 {
  max-width: 16ch;
}

/* Окно сцены на цветном небе — стеклом, как плашки первого экрана. */
.prod-hero__stage .sc .win {
  box-shadow: 0 1px 2px rgba(80, 30, 40, 0.05), 0 30px 60px -30px rgba(90, 50, 70, 0.45);
}

@media (max-width: 980px) {
  .prod-hero__stage {
    overflow: hidden;
    padding: 20px 8px 36px;
    margin: -20px -8px -36px;
  }

  .prod-hero__stage > * {
    max-width: 560px;
  }
}

/* ── Первый раздел под первым экраном ── */
.prod-sec--first {
  padding-top: clamp(24px, 4vw, 48px);
}

/* ── Сравнение в две колонки ── */
.prod-cmp2 {
  margin-top: 0;
}

.prod-cmp2 .cmp__head,
.prod-cmp2 .cmp__row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 64px);
}

.prod-cmp2 .cmp__now p:not(.cmp__lbl) {
  font-size: 17px;
}

.prod-cmp2 .cmp__us p:not(.cmp__lbl) {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}



@media (max-width: 900px) {
  .prod-cmp2 .cmp__row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ── Заголовок раздела с несколькими вводными абзацами ── */
.prod-leads {
  display: grid;
  gap: 14px;
  max-width: 640px;
  justify-self: end;
}

.prod-leads .lead {
  margin: 0;
}

@media (max-width: 900px) {
  .prod-leads {
    justify-self: start;
  }
}

/* ── Список + сцена под заголовком раздела ── */
.prod-feat {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.prod-feat--rev {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.prod-feat--rev > .prod-feat__text {
  order: 2;
}

.prod-feat__text {
  min-width: 0;
}

.prod-feat__text > .checks:first-child {
  margin-top: 0;
}

.prod-feat > .scene-shot,
.prod-feat > .stage {
  position: sticky;
  top: 112px;
}

.prod-feat .scene-shot .stage,
.prod-feat > .stage {
  --stage-pad: clamp(12px, 2.4vw, 40px);
  min-height: 460px;
}

.prod-feat .proof {
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: 16px;
  font-size: 15.5px;
  line-height: 1.55;
}

.prod-feat .proof strong {
  font-weight: 500;
}

@media (max-width: 980px) {
  .prod-feat,
  .prod-feat--rev {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }

  .prod-feat--rev > .prod-feat__text {
    order: 0;
  }

  .prod-feat > .scene-shot {
    position: static;
  }

  .prod-feat > .stage {
    position: relative;
    top: auto;
  }

  .prod-feat .scene-shot .stage,
  .prod-feat > .stage {
    min-height: 0;
  }
}

/* Пункты с жирным началом: крупнее, жирное — отдельной строкой. */
.prod-checks--strong li {
  padding-top: 18px;
  padding-bottom: 18px;
  color: var(--muted);
  line-height: 1.6;
}

.prod-checks--strong li::before {
  top: 21px;
}

.prod-checks--strong li::after {
  top: 26px;
}

.prod-checks--strong strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* ── Три факта в строку ── */
.prod-facts {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
}

.prod-facts > article {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.prod-facts .kicker {
  display: block;
}

.prod-facts h3 {
  margin-top: 14px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.018em;
}

.prod-facts p:not(.kicker) {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 900px) {
  .prod-facts {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ── Вторая строка шага ── */
.steplist__us {
  margin-top: 10px !important;
  color: var(--ink-soft) !important;
  font-size: 15px !important;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

/* ── Плитки без сцены ── */
.prod-cards {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.prod-cards > article {
  padding: 26px 24px 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.prod-cards .mono {
  display: block;
  font-size: 12px;
  color: var(--muted-2);
}

.prod-cards h3 {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

.prod-cards p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .prod-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .prod-cards {
    grid-template-columns: 1fr;
  }
}

/* Призыв внизу страниц раздела: телефон крупно не должен рвать строку на
   узком экране. */
@media (max-width: 420px) {
  .cta-card .bigphone {
    font-size: 30px;
  }
}

/* ═══════════ Кабинет ═══════════ */

/* Демо-календарь — на подложке в клетку, белым окном. Высота рамки — по
   содержимому вставки (замер 09.10.2026: 860 при рамке 870, 824 при 1060,
   800 от 1156), чтобы под календарём не оставалось пустой полосы, а снизу
   не обрезалась подпись. */
.cabinet-cal {
  margin-top: 48px;
  --stage-pad: clamp(10px, 2.4vw, 32px);
}

.cabinet-cal .demo-frame {
  margin: 0;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.075);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.035), 0 18px 40px -26px rgba(70, 45, 10, 0.28);
}

@media (min-width: 981px) {
  .cabinet-cal .demo-frame iframe {
    height: 860px;
  }
}

@media (min-width: 1200px) {
  .cabinet-cal .demo-frame iframe {
    height: 824px;
  }
}

@media (min-width: 1300px) {
  .cabinet-cal .demo-frame iframe {
    height: 800px;
  }
}

.cabinet-cal .demo-frame--closed {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.7);
}

.cabinet-cal + .proof {
  margin-top: 20px;
}

/* Шаги в колонке рядом со сценой: номер и заголовок, под ними текст. */
.prod-steps {
  margin: 0;
  max-width: none;
}

.prod-steps li {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 24px 0 26px;
}

.prod-steps li > p {
  padding-left: 34px;
}

/* ═══════════ Страницы памяти ═══════════ */

/* Числа квоты строками с тонкой чертой: число крупно слева, подпись справа. */
.prod-stats {
  display: grid;
  border-top: 1px solid var(--line);
}

.prod-stats .stat {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 8px 24px;
  align-items: baseline;
  padding: 22px 0;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid var(--line);
}

.prod-stats .stat__value {
  font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1;
}

.prod-stats .stat__label {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 560px) {
  .prod-stats .stat {
    grid-template-columns: 1fr;
  }
}

/* Снимки страницы и кабинета на подложке. */
.memory-shots {
  min-height: 0 !important;
}

.memory-shots > .phone-wrap {
  max-width: none;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 18px;
  align-items: end;
}

.memory-shots .phone {
  padding: 7px;
  border-radius: 30px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 26px 50px -24px rgba(40, 50, 80, 0.45);
}

.memory-shots .phone img {
  border-radius: 24px;
}

.memory-shots .shot--small img {
  border-radius: 12px;
}

@media (max-width: 560px) {
  .memory-shots > .phone-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .memory-shots .phone {
    max-width: 220px;
  }
}

/* Шаги публикации: телефон стоит на подложке «сирень с кругами». */
body[data-page="memory"] .flow__stage {
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  background: #ece9ef;
}

body[data-page="memory"] .flow__stage::before,
body[data-page="memory"] .flow__stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

body[data-page="memory"] .flow__stage::before {
  width: 78%;
  aspect-ratio: 1;
  right: -22%;
  top: -26%;
  background: #cdbbe0;
  filter: blur(46px);
  opacity: 0.9;
}

body[data-page="memory"] .flow__stage::after {
  width: 46%;
  aspect-ratio: 1;
  left: -14%;
  bottom: -24%;
  background: #f3d9cf;
  filter: blur(40px);
  opacity: 0.85;
}

body[data-page="memory"] .flow {
  margin-top: 56px;
}

body[data-page="memory"] .memory-tag {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Шаги публикации — тем же голосом, что заголовки плиток языка. */
body[data-page="memory"] .flow__step h3 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.018em;
}

body[data-page="memory"] .flow__label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.09em;
  color: var(--muted);
}

body[data-page="memory"] .flow__step::before {
  font-family: var(--mono);
  font-weight: 400;
}

body[data-page="memory"] .flow__step p {
  color: var(--muted);
}

body[data-page="memory"] .flow.is-on .flow__step.is-current {
  border-radius: 18px;
}

.prod-cards h3:first-child {
  margin-top: 0;
}

/* Сцены на страницах раздела: общие классы сайта `.card` и `.chip`
   (наименьшая высота карточки 156, цель касания 44 на телефоне) задевают
   одноимённые классы внутри сцен — доска и телефон агента вырастали вдвое.
   Правильное место для этой правки — scenes.css; здесь она только для
   страниц раздела. */
:is(body[data-page="cabinet"], body[data-page="photo"], body[data-page="monuments"], body[data-page="memory"], body[data-page="registry"], body[data-page="site"]) .sc .card {
  min-height: 0;
}

:is(body[data-page="cabinet"], body[data-page="photo"], body[data-page="monuments"], body[data-page="memory"], body[data-page="registry"], body[data-page="site"]) .sc .card:hover {
  transform: none;
}

:is(body[data-page="cabinet"], body[data-page="photo"], body[data-page="monuments"], body[data-page="memory"], body[data-page="registry"], body[data-page="site"]) .sc .chip {
  min-height: 0;
}

:is(body[data-page="cabinet"], body[data-page="photo"], body[data-page="monuments"], body[data-page="memory"], body[data-page="registry"], body[data-page="site"]) .sc .chip span {
  font-size: inherit;
}

/* Сцена первого экрана на телефоне — не выше экрана: низ тает. */
@media (max-width: 980px) {
  .prod-hero__stage {
    max-height: 620px;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }
}

:is(body[data-page="cabinet"], body[data-page="photo"], body[data-page="monuments"], body[data-page="memory"], body[data-page="registry"], body[data-page="site"]) .sc .go {
  width: auto;
  height: auto;
  margin-top: 0;
}

:is(body[data-page="cabinet"], body[data-page="photo"], body[data-page="monuments"], body[data-page="memory"], body[data-page="registry"], body[data-page="site"]) .sc .logo {
  min-height: 0;
}