/* ============================================================
   8 ключей — светлая тема.
   Бумажный фон, приглушённый тёмно-зелёный как интерактив.
   Каждый кабинет несёт свой цвет, взятый из его имени: Бордо
   бордовый, Лазурный лазурный, Лавандовый лавандовый. Это не
   украшение, а способ различать строки сетки без чтения подписей.
   Цвета притемнены относительно тёмной версии — на бумаге светлые
   оттенки не читаются.
   Занятое — тёплый серый, а не красный: занято это не ошибка.
   Шрифты: Spectral (дисплей) / Onest (текст) / IBM Plex Mono (данные)
   ============================================================ */

:root {
  color-scheme: light;
  --bg:        #F4F3EF;   /* бумага */
  --bg-2:      #FFFFFF;   /* карточки и панели */
  --bg-3:      #FAF9F6;   /* приподнятые элементы */
  --line:      #E3E1DA;
  --line-soft: #EEECE6;
  --text:      #16201C;
  --muted:     #6B7671;
  --accent:    #1F4E4A;   /* интерактив */
  --accent-dk: #2C6B62;
  --taken:     #DDD9D2;   /* занято — тёплый серый на холодной бумаге */
  --pick-c:    var(--accent);

  --r:    6px;
  --r-lg: 14px;

  --f-display: "Spectral", Georgia, serif;
  --f-body:    "Onest", -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --hdr-h: 68px;
  --gut:   clamp(20px, 5vw, 64px);
  --maxw:  1280px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

/* ОДНА СТРОКА — ОДИН ШРИФТ И ОДИН РАЗМЕР. Вторую часть строки выделяем
   только цветом («500 ₽ / час», «9:00–22:00 ежедневно»). Моноширинный — лишь
   для подписей, которые стоят отдельной строкой: «КАБИНЕТЫ», «ШАГ 1». Цифры
   в тексте — шрифтом текста с цифрами одной ширины (tabular-nums), чтобы
   столбцы цен оставались ровными. */
/* Диапазоны вроде «15–18» не рвутся по тире. */
.nw { white-space: nowrap; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.14; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.eyebrow {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 18px;
}

/* ---------------- Шапка ---------------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.hdr__in { display: flex; align-items: center; gap: 28px; height: var(--hdr-h); }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 30px; height: 30px; border-radius: 7px; display: block; }
.brand__n { font-family: var(--f-display); font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }

.nav { display: flex; gap: 24px; }
.nav a { font-size: 14.5px; text-decoration: none; color: var(--muted); transition: color .18s; }
.nav a:hover { color: var(--text); }

.hdr__tel { font-size: 14.5px; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; color: var(--muted); }
.hdr__tel:hover { color: var(--text); }

/* ---------------- Кнопки ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-body); font-size: 14.5px; font-weight: 500;
  padding: 12px 22px; border-radius: var(--r); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.btn--fill { background: var(--accent); color: #fff; font-weight: 500; }
.btn--fill:hover:not(:disabled) { background: var(--accent-dk); }
.btn--fill:disabled { background: var(--bg-3); color: var(--muted); cursor: not-allowed; box-shadow: none; }
.btn--line { border-color: var(--line); color: var(--text); background: transparent; }
.btn--line:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost { color: var(--muted); background: transparent; }
.btn--ghost:hover { color: var(--text); }
.btn--sm { padding: 9px 15px; font-size: 13.5px; }
/* Кнопка на всю ширину карточки. Класс стоял в разметке страницы брони, а
   правила не было — кнопки выходили узкими и разной длины. */
.btn--wide { width: 100%; }
.bpage__card .btn + .btn { margin-top: 10px; }
.bpage__card p + .btn, .bpage__card dl + .btn { margin-top: 16px; }

/* ---------------- Герой ---------------- */
.hero { padding: clamp(48px, 7vw, 88px) 0 clamp(28px, 4vw, 40px); position: relative; }
/* На бумаге свечение из тёмной версии выглядело бы грязным пятном —
   убрано намеренно, а не забыто. */
.hero h1 { font-size: clamp(34px, 5.6vw, 66px); max-width: 17ch; margin-bottom: 20px; }
.hero h1 span { color: var(--accent); }
.hero__sub { font-size: clamp(16px, 1.9vw, 19px); color: var(--muted); max-width: 48ch; margin-bottom: 28px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }

/* Фото в герое. Раньше правая половина первого экрана пустовала: текст
   занимал левую, а справа был только фон. Теперь там сам центр — это
   первое, что человек хочет увидеть, выбирая, куда вести клиента. */
.hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero__ph { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 10px; aspect-ratio: 5/4; }
.hero__tile { position: relative; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-3); cursor: zoom-in; min-height: 0; }
.hero__tile--big { grid-row: 1 / span 2; }
.hero__tile picture { display: block; width: 100%; height: 100%; }
.hero__tile img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.hero__tile:hover img { transform: scale(1.04); }
.hero__cap { position: absolute; left: 10px; bottom: 10px; font-family: var(--f-mono); font-size: 12px;
  color: #fff; background: rgba(0,0,0,.5); padding: 3px 9px; border-radius: 99px; }
@media (max-width: 960px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__ph { aspect-ratio: 16/10; margin-top: 8px; }
}
@media (max-width: 640px) {
  /* На телефоне фото первого экрана нет: сразу под фактами идут карточки
     кабинетов с тем же Лазурным первым — картинка читалась как повтор. */
  .hero__ph { display: none; }
  /* Фото нет — и отступа под него тоже: иначе между кнопками и фактами
     оставалась пустота почти в сотню пикселей. Селектор с .hero: базовое
     правило .facts стоит в файле ниже и иначе перебивает это. */
  .hero .facts { margin-top: 0; }
}

/* Лента ближайшего свободного времени */
.ribbon__k {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px; display: block;
}
.ribbon { display: flex; gap: 10px; flex-wrap: wrap; }
.ribbon__none { color: var(--muted); font-size: 15px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 10px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line);
  border-left: 3px solid var(--c); border-radius: var(--r);
  padding: 11px 16px; color: var(--text); font-family: var(--f-body);
  transition: border-color .16s, background .16s, transform .16s;
}
.chip:hover { background: var(--bg-3); border-color: var(--c); transform: translateY(-1px); }
.chip__t { font-family: var(--f-mono); font-size: 15px; font-weight: 500; }
.chip__n { font-size: 14px; color: var(--muted); }

/* ---------------- Факты ---------------- */
.facts { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line-soft); margin-top: 44px; }
.fact { padding: 18px 30px 18px 0; margin-right: 30px; border-right: 1px solid var(--line-soft); }
.fact:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.fact__k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.fact__v { font-size: 16px; font-weight: 500; }
.fact__v small { font-weight: 400; font-size: inherit; color: var(--muted); }

/* ---------------- Сетка ---------------- */
.sched { padding: clamp(30px, 5vw, 52px) 0 clamp(50px, 7vw, 84px); }
.sched__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.sched__head h2 { font-size: clamp(24px, 3.2vw, 34px); }

.demo-tag {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 100px; padding: 5px 12px; white-space: nowrap;
}

/* ---------------- Календарь ----------------
   Была полоса на семь дней. Она же была единственным ограничением горизонта:
   в API потолка не существовало, и через него кабинет занимался на год
   вперёд. Теперь горизонт задан в базе, а календарь рисует ровно то окно,
   которое система примет, — и показывает, где вообще есть место.

   Точка под числом: зелёная — свободно, янтарная — часть дня занята,
   нет точки — занято всё. Цифры «сколько часов свободно» здесь были бы
   шумом: для выбора ДНЯ хватает «есть или нет». */
.cal { position: relative; margin-bottom: 26px; }
.cal__months { display: grid; grid-template-columns: minmax(0, 320px); gap: 34px; }
@media (min-width: 900px) {
  /* Два месяца рядом: на широком экране один занимал треть строки, а
     остальное оставалось пустым. */
  .cal__months { grid-template-columns: repeat(2, minmax(0, 320px)); }
}
.cal__mn { font-family: var(--f-display); font-size: 18px; margin-bottom: 12px; }

.cal__nav { position: absolute; top: -4px; width: 34px; height: 34px; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg-2); color: var(--text); font-size: 17px; line-height: 1; cursor: pointer; z-index: 1; }
.cal__nav--prev { right: 44px; }
.cal__nav--next { right: 0; }
@media (min-width: 900px) { .cal__nav { top: 0; } }
.cal__nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cal__nav:disabled { opacity: .3; cursor: default; }

.cal__wd, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__wd { margin-bottom: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.cal__wd span { text-align: center; }

.cal__d { position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2);
  color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.cal__d:hover:not(:disabled) { border-color: var(--accent); }
.cal__d.is-on { background: var(--text); border-color: var(--text); color: var(--bg-2); }
.cal__d.is-off { background: transparent; border-color: transparent; color: var(--muted);
  opacity: .45; cursor: default; }
.cal__n { font-family: var(--f-mono); font-size: 14px; }
.cal__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.cal__d.is-part .cal__dot { background: #C89A2B; }
.cal__d.is-on .cal__dot { background: var(--bg-2); }

.grid-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.grid-scroll { overflow-x: auto; }
table.grid { border-collapse: collapse; width: 100%; min-width: 900px; table-layout: fixed; }
/* Ширину колонок задаёт colgroup, а не содержимое: иначе подписанный час
   растягивается, а пустой получас схлопывается в невидимую щель. */
.grid col.colh { width: 200px; }

.grid thead th {
  font-family: var(--f-mono); font-weight: 400; font-size: 11.5px; color: var(--muted);
  padding: 14px 0 12px; text-align: center; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
/* Вечерняя ставка — реальная информация, а не декор. Подписи часов с
   14:00 идут акцентом, а сама граница рисуется акцентной линией: серой
   её больше не отличить от границы обычного часа, они одного токена. */
.grid thead th.is-pm { color: var(--accent); }
.grid .is-shift { box-shadow: inset 1px 0 0 var(--accent); }

/* Ширина задана на <col>, здесь её дублировать нельзя: при
   table-layout: fixed выигрывает colgroup, и второе значение просто
   молча разошлось бы с первым при первой же правке. */
.grid th.rowh {
  position: sticky; left: 0; z-index: 3; background: var(--bg-2);
  border-right: 1px solid var(--line); text-align: left;
  padding: 12px 16px 12px 18px;
}
.grid th.rowh { border-left: 3px solid var(--c); }
.grid thead th.rowh { z-index: 4; border-left: 3px solid transparent; }
.rowh__n { font-weight: 500; font-size: 15px; display: block; }
.rowh__m { font-family: var(--f-mono); font-size: 11px; color: var(--muted); display: block; margin-top: 2px; }

.grid tbody tr + tr th, .grid tbody tr + tr td { border-top: 1px solid var(--line-soft); }

.cell { padding: 0; text-align: center; border-left: 1px solid var(--line-soft); position: relative; height: 48px; background: var(--bg-2); transition: background .13s; }
.cell button {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--f-mono); font-size: 13px; line-height: 1; color: transparent;
  transition: color .13s;
}
.cell.free:hover { background: color-mix(in srgb, var(--c) 14%, var(--bg-2)); }
.cell.free:hover button { color: var(--c); }
.cell.free button::after { content: "+"; }
.cell.taken { background: var(--taken); }
.cell.taken button { cursor: not-allowed; }
.cell.sel { background: var(--c); }
.cell.sel button { color: #fff; }
.cell.sel button::after { content: "✓"; }

/* Итог */
.pick { border-top: 1px solid var(--line); background: var(--bg-3); display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 18px 20px; }
.pick__empty { color: var(--muted); font-size: 14.5px; }
.pick__body { display: none; align-items: center; gap: 24px; flex-wrap: wrap; width: 100%; }
.pick.is-on .pick__empty { display: none; }
.pick.is-on .pick__body { display: flex; }
.pick__item { display: flex; flex-direction: column; }
.pick__k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pick__v { font-size: 15.5px; font-weight: 500; }
.pick__sum { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.pick__total { font-family: var(--f-display); font-size: 26px; color: var(--pick-c); }
.pick__note { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }

.legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 15px; height: 15px; border-radius: 3px; display: inline-block; }
.legend .l-free  { background: var(--bg-2); border: 1px solid var(--line); }
.legend .l-taken { background: var(--taken); }
.legend .l-sel   { background: var(--accent); }

/* ---------------- Кабинеты ---------------- */
.rooms { padding: clamp(50px, 7vw, 84px) 0; border-top: 1px solid var(--line-soft); }
.rooms__head { max-width: 54ch; margin-bottom: 40px; }
.rooms__head h2 { font-size: clamp(24px, 3.2vw, 34px); margin-bottom: 14px; }
.rooms__head p { color: var(--muted); }

.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.room { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.room:hover { border-color: var(--c); transform: translateY(-2px); }
/* Фото кабинета — лента со снапом, а не карусель на JS: палец листает
   нативно, инерция и отскок у телефона свои. Стрелки только там, где есть
   мышь; на сенсорном экране они лишь закрывали бы фото. */
.room__ph { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-3); }
.room__strip { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.room__strip::-webkit-scrollbar { display: none; }
.room__shot { flex: 0 0 100%; height: 100%; scroll-snap-align: start; border: 0; padding: 0;
  background: none; cursor: zoom-in; overflow: hidden; }
.room__shot picture { display: block; width: 100%; height: 100%; }
.room__shot img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.room__shot:hover img { transform: scale(1.03); }
.room__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: #1b1b1b;
  /* Стрелка — SVG по центру флексом. Текстовые «‹ ›» рисовались запасным
     Arial и сидели на полтора пикселя выше центра круга. */
  display: flex; align-items: center; justify-content: center; padding: 0;
  cursor: pointer; opacity: 0; transition: opacity .2s;
  box-shadow: 0 1px 6px rgba(0,0,0,.2); }
.room__nav--prev { left: 10px; }
.room__nav--next { right: 10px; }
.room:hover .room__nav, .room__nav:focus-visible { opacity: 1; }
@media (hover: none) { .room__nav { display: none; } }
.room__count { position: absolute; right: 10px; bottom: 10px; pointer-events: none;
  font-family: var(--f-mono); font-size: 12px; color: #fff; background: rgba(0,0,0,.5);
  padding: 3px 9px; border-radius: 99px; }

/* Полноэкранный просмотр. Тёмный всегда, в любой теме: фото на тёмном
   смотрятся честнее, а белая рамка вокруг интерьера спорит с ним. */
.viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: #0e0e0e; color: #fff; }
.viewer::backdrop { background: rgba(0,0,0,.9); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.viewer__top { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 20px; }
.viewer__t { font-size: 16px; font-weight: 500; }
.viewer__c { font-size: 16px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.6); }
.viewer__x { margin-left: auto; width: 44px; height: 44px; border: 0; background: none; color: #fff;
  font-size: 32px; line-height: 1; cursor: pointer; }
.viewer__strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; }
.viewer__strip::-webkit-scrollbar { display: none; }
.viewer__shot { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; display: flex;
  align-items: center; justify-content: center; padding: 0 clamp(0px, 6vw, 84px) 18px; }
.viewer__shot picture { display: contents; }
.viewer__shot img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.viewer__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0;
  cursor: pointer; transition: background .15s; }
.viewer__nav:hover { background: rgba(255,255,255,.24); }
.viewer__nav--prev { left: 14px; }
.viewer__nav--next { right: 14px; }
@media (hover: none) { .viewer__nav { display: none; } }
.room__b { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; border-top: 3px solid var(--c); }
.room__top { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.room__n { font-family: var(--f-display); font-size: 19px; }
.room__m { font-size: 13.5px; color: var(--muted); }
.room__d { font-size: 14.5px; color: var(--muted); flex: 1; margin-bottom: 16px; }
.room__f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
/* Кнопка в одну строку: у кабинетов с вечерней ставкой цена длиннее, и
   «Выбрать время» ломалось на два слова в столбик. Переносится цена. */
.room__f .btn { white-space: nowrap; flex-shrink: 0; }
.room__p { min-width: 0; }
/* Цена и кнопка в строку, пока влезают; не влезли — кнопка уходит вниз
   и растягивается на всю ширину. Порога в пикселях нет: цена жадная
   (grow 999) и забирает свободное место, пока кнопка рядом; оставшись
   одна в строке, кнопка забирает всё сама. Раньше на планшете кнопка
   падала под цену огрызком, а на телефоне сжимала цену в четыре строки. */
.room__f { flex-wrap: wrap; }
.room__p { flex: 999 1 auto; }
.room__f .btn { flex: 1 1 auto; }
.room__p { font-size: 16px; font-variant-numeric: tabular-nums; }
.room__p b { font-weight: 600; color: var(--text); }
.room__p span { color: var(--muted); }
/* Вечерняя ставка — своей строкой, а не хвостом после запятой: «500 ₽ / час,»
   с висящей запятой в конце строки выглядело как опечатка. */
.room__p .room__eve { display: block; margin-top: 2px; font-size: 13.5px; }

/* ---------------- Шаги ---------------- */
.how { padding: clamp(50px, 7vw, 84px) 0; border-top: 1px solid var(--line-soft); }
.how h2 { font-size: clamp(24px, 3.2vw, 34px); margin-bottom: 40px; }
.how h2:has(+ .how__lead) { margin-bottom: 12px; }
.how__lead { color: var(--muted); max-width: 58ch; margin-bottom: 36px; }
/* Свои имена, а не .steps/.step: те же классы занял мобильный пошаговый выбор
   брони, объявленный ниже, и его .steps { display: none } прятал этот блок
   целиком — на широком экране «Как это работает» просто исчезал. */
.how__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px; }
.how__n { font-family: var(--f-mono); font-size: 11px; color: var(--accent); letter-spacing: .12em; padding-bottom: 12px; border-bottom: 1px solid var(--accent); display: block; margin-bottom: 16px; }
.how__step h3 { font-size: 19px; margin-bottom: 8px; }
.how__step p { font-size: 14.5px; color: var(--muted); }

/* ---------------- Цены ---------------- */
.price { padding: clamp(50px, 7vw, 84px) 0; border-top: 1px solid var(--line-soft); }
.price h2 { font-size: clamp(24px, 3.2vw, 34px); margin-bottom: 12px; }
.price__sub { color: var(--muted); margin-bottom: 32px; max-width: 58ch; }
.scroll { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; min-width: 560px; }
.ptable th { text-align: left; font-family: var(--f-mono); font-weight: 400; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 14px 20px; border-bottom: 1px solid var(--line); }
/* По верху: при выравнивании по центру «любой кабинет» и цена вставали
   в одну линию с мелким пояснением первой колонки, а не с её заголовком. */
.ptable td { padding: 15px 20px; border-top: 1px solid var(--line-soft); font-size: 15px; vertical-align: top; }
.ptable tr:first-child td { border-top: 0; }
.ptable td:last-child { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ptable .pt__t { font-weight: 500; }
.ptable td small { display: block; color: var(--muted); font-size: 14px; margin-top: 3px; }
/* На телефоне таблица шириной 560px уезжала вбок, и за краем экрана
   оставалась сама цена. Строка становится карточкой: формат и цена
   сверху, кабинеты — под ними. */
@media (max-width: 640px) {
  .ptable { min-width: 0; }
  .ptable, .ptable tbody { display: block; }
  .ptable thead { display: none; }
  .ptable tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px;
               padding: 14px 16px; border-top: 1px solid var(--line-soft); }
  .ptable tr:first-child { border-top: 0; }
  .ptable td { padding: 0; border: 0; }
  /* Заголовок формата и цена — первой строкой, пояснение — на всю ширину
     под ними, а не узкой колонкой рядом с ценой. */
  .ptable td:first-child { display: contents; }
  .ptable .pt__t { grid-column: 1; grid-row: 1; }
  .ptable td small { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .ptable td:last-child { grid-column: 2; grid-row: 1; }
}
.price__extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 20px; }
.xbox { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 18px; }
.xbox b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.xbox span { font-size: 13.5px; color: var(--muted); }

/* ---------------- Место ---------------- */
.place { padding: clamp(50px, 7vw, 84px) 0; border-top: 1px solid var(--line-soft); }
.place__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.place h2 { font-size: clamp(24px, 3.2vw, 34px); margin-bottom: 20px; }
.place p { color: var(--muted); margin-bottom: 14px; }
.place__addr { font-size: 18px; color: var(--text) !important; font-weight: 500; }
.metro { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 26px; }
.metro span { font-family: var(--f-mono); font-size: 12px; border: 1px solid var(--line); border-radius: 100px; padding: 5px 12px; color: var(--muted); }
.place__ph { position: relative; display: block; width: 100%; padding: 0; border-radius: var(--r-lg);
  overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--line); background: var(--bg-3); cursor: zoom-in; }
.place__ph picture { display: block; width: 100%; height: 100%; }
.place__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.place__ph:hover img { transform: scale(1.03); }
.place__more { position: absolute; left: 14px; bottom: 14px; font-family: var(--f-mono); font-size: 12px;
  color: #fff; background: rgba(0,0,0,.55); padding: 5px 11px; border-radius: 99px; }

/* ---------------- Условия ---------------- */
.rules { padding: clamp(50px, 7vw, 84px) 0; border-top: 1px solid var(--line-soft); }
.rules h2 { font-size: clamp(24px, 3.2vw, 34px); margin-bottom: 36px; }
.rlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 30px 40px; }
/* Заголовок и текст пункта — строки общей сетки: если один заголовок
   переносится на две строки, тексты соседей всё равно начинаются вровень. */
.rule { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 8px; }
.rule h3 { font-size: 19px; }
.rule p { font-size: 14.5px; color: var(--muted); }

/* ---------------- Подвал ---------------- */
.foot { border-top: 1px solid var(--line-soft); padding: clamp(44px, 6vw, 70px) 0 40px; }
.foot__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.foot h3 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: 14px; }
.foot a { display: block; text-decoration: none; margin-bottom: 7px; font-size: 15px; color: var(--muted); transition: color .16s; }
.foot a:hover { color: var(--accent); }
.foot__brand { font-family: var(--f-display); font-size: 22px; margin-bottom: 10px; }
.foot__note { color: var(--muted); font-size: 14.5px; max-width: 34ch; }
.foot__req { color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; margin-top: 16px; }
.foot__docs { margin-top: 12px; }
.foot .foot__docs a { font-size: 13.5px; margin-bottom: 4px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Адаптив ---------------- */
@media (max-width: 900px) {
  .nav, .hdr__tel { display: none; }
  .place__in { grid-template-columns: 1fr; }
  .foot__in  { grid-template-columns: 1fr 1fr; }
  .pick__sum { margin-left: 0; width: 100%; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line-soft); }
}
@media (max-width: 560px) {
  /* Факты на телефоне — сеткой 2×2 без вертикальных черт: в строку с
     переносом они ложились лесенкой, с пустой колонкой за разделителем. */
  .facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .fact, .fact:last-child { padding: 16px 0 0; margin: 0; border-right: 0; }
  /* Кнопки друг под другом — одной ширины, иначе столбик выглядит рваным. */
  .hero__cta .btn, .place__links .btn { flex: 1 1 100%; }
  .foot__in { grid-template-columns: 1fr; }
  .rgrid { grid-template-columns: 1fr; }
  .chip { flex: 1 1 100%; }
}


/* На телефоне сетки нет вовсе: ниже 640px `.grid-scroll` скрывается и
   работает пошаговый выбор (кабинет → время). Правила, ужимавшие таблицу
   под мобильный экран, лежали здесь и не применялись ни разу — тот же
   медиазапрос её и прятал. Мёртвый CSS убран, чтобы следующий читатель
   не правил невидимое. */

/* ---------------- Форма брони ---------------- */
.bookform { border-top: 1px solid var(--line); background: var(--bg-3);
  padding: 18px 20px; display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.bookform.hidden { display: none; }
.bookform__f { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; }
.bookform__f label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.bookform__f input { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 11px 13px; color: var(--text); font-family: var(--f-body); font-size: 15px; }
.bookform__f input:focus { border-color: var(--accent); outline: none; }
.bookform__note { flex: 1 1 100%; color: var(--muted); font-size: 13px; }
.bookform__note a { color: inherit; text-underline-offset: 2px; }
.bookform__err { flex: 1 1 100%; color: #A83232; font-size: 13.5px; min-height: 18px; }

/* Раскрытие через grid, а не через max-height. Была фиксированная высота
   в 90 px — и всё, что не влезло, обрезалось: ссылка на бронь, кнопки и
   реквизиты просто исчезали. Высоту содержимого заранее не угадать, поэтому
   её считает браузер. */
.booked { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0;
  transition: grid-template-rows .25s, opacity .25s, padding .25s;
  background: #E7EEE9; border: 1px solid transparent; border-radius: var(--r);
  color: #1F4E4A; padding: 0 18px; }
.booked > * { min-height: 0; }
.booked.is-on { grid-template-rows: 1fr; opacity: 1; padding: 14px 18px; margin-top: 14px;
  border-color: #BFD6C9; }

/* ============================================================
   Помощник. Спокойный блок в общей палитре: это не «AI-виджет»
   поверх сайта, а часть страницы. Реплики различаются положением
   и фоном, а не цветными пузырями — центру нужен тихий тон.
   ============================================================ */
.chat { padding: clamp(56px, 8vw, 96px) 0; background: var(--bg-3);
        border-top: 1px solid var(--line-soft); }
.chat__head { max-width: 680px; margin-bottom: 32px; }
.chat__head h2 { font-family: var(--f-display); font-weight: 500;
                 font-size: clamp(26px, 3.4vw, 38px); margin: 10px 0 12px; }
.chat__head p { color: var(--muted); max-width: 62ch; margin: 0; }

.chat__box { background: var(--bg-2); border: 1px solid var(--line);
             border-radius: var(--r-lg); padding: 20px; max-width: 780px; }

.chat__log { display: flex; flex-direction: column; gap: 10px;
             max-height: 380px; overflow-y: auto; padding-right: 4px; }

.chat__msg { max-width: 88%; padding: 11px 14px; border-radius: 12px;
             line-height: 1.5; font-size: 15px; }
.chat__msg--bot { background: var(--bg-3); border: 1px solid var(--line-soft);
                  align-self: flex-start; border-bottom-left-radius: 4px; }
.chat__msg--me  { background: var(--accent); color: #fff;
                  align-self: flex-end; border-bottom-right-radius: 4px; }

/* Варианты — кнопки, а не текст: их назначение в том, чтобы по ним кликали. */
.chat__opts { display: flex; flex-direction: column; gap: 6px;
              align-self: flex-start; width: 88%; }
.chat__opt { display: flex; justify-content: space-between; align-items: center;
             gap: 14px; width: 100%; text-align: left; cursor: pointer;
             background: var(--bg-2); border: 1px solid var(--line);
             border-radius: 10px; padding: 11px 14px; font: inherit;
             font-size: 15px; color: var(--text);
             transition: border-color .15s, background .15s; }
.chat__opt:hover { border-color: var(--accent); background: var(--bg-3); }
.chat__opt-p { font-family: var(--f-mono); font-size: 14px; white-space: nowrap; }

.chat__hints { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.chat__hint { cursor: pointer; font: inherit; font-size: 13px; color: var(--muted);
              background: transparent; border: 1px dashed var(--line);
              border-radius: 100px; padding: 7px 13px;
              transition: color .15s, border-color .15s; }
.chat__hint:hover { color: var(--accent); border-color: var(--accent); }

.chat__bar { display: flex; gap: 10px; }
.chat__bar input { flex: 1; min-width: 0; font: inherit; font-size: 15px;
                   padding: 12px 14px; border: 1px solid var(--line);
                   border-radius: var(--r); background: var(--bg);
                   color: var(--text); }
.chat__bar input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat__bar .btn { white-space: nowrap; }
.chat__bar .btn:disabled { opacity: .5; cursor: default; }

.chat__foot { color: var(--muted); font-size: 13px; margin: 12px 0 0; }

@media (max-width: 560px) {
  .chat__box { padding: 14px; }
  .chat__msg, .chat__opts { max-width: 100%; width: 100%; }
  .chat__bar { flex-direction: column; }
}

/* Подпись только для скринридера: поле ввода чата обязано иметь label,
   но визуально его заменяет placeholder. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Прошедший час: не занят, а недоступен. Отдельно от «занято», иначе
   вечером сайт выглядит забитым, хотя завтра свободен весь день. */
.cell.past { background: repeating-linear-gradient(
    -45deg, transparent, transparent 5px,
    var(--line-soft) 5px, var(--line-soft) 6px); opacity: .5; }
.cell.past button { cursor: default; }

/* Ссылка на бронь на экране «бронь принята». Не прячется по таймеру:
   человеку надо успеть её сохранить, второй раз мы её не покажем. */
.booked__hint { display: block; color: var(--muted); font-size: 14px; margin-top: 6px; }
.booked__row  { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.booked__go   { display: inline-block; padding: 8px 14px; border-radius: 100px;
                border: 1px solid var(--line); background: var(--bg-2);
                color: var(--accent); text-decoration: none; font-size: 14px;
                transition: border-color .15s; }
.booked__go:hover { border-color: var(--accent); }

/* ---------- Отзывы ---------- */
.revs { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--line-soft); }
.revs__head { max-width: 680px; margin-bottom: 34px; }
.revs__head h2 { font-family: var(--f-display); font-weight: 500;
                 font-size: clamp(26px, 3.4vw, 38px); margin: 10px 0 12px; }
.revs__head p { color: var(--muted); max-width: 62ch; margin: 0; }

.revs__grid { display: grid; gap: 16px;
              grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.rev { margin: 0; background: var(--bg-2); border: 1px solid var(--line);
       border-radius: var(--r-lg); padding: 20px 22px;
       display: flex; flex-direction: column; gap: 14px; }
.rev blockquote { margin: 0; line-height: 1.6; }
.rev figcaption { display: flex; align-items: baseline; gap: 10px;
                  flex-wrap: wrap; margin-top: auto;
                  padding-top: 12px; border-top: 1px solid var(--line-soft); }
.rev__room { font-weight: 500; }
.rev__st   { color: #C89A2B; letter-spacing: 1px; }
.rev__when { color: var(--muted); font-size: 13px; margin-left: auto; }

/* ============================================================
   ПОШАГОВЫЙ ВЫБОР ДЛЯ ТЕЛЕФОНА
   Матрица 8×13 на маленьком экране нечитаема и не попадается пальцем.
   Здесь тот же день в два шага: кабинет, потом время. Какое из двух
   представлений видно — решает ширина экрана, а не JavaScript.
   ============================================================ */
.steps { display: none; }

@media (max-width: 640px) {
  .grid-scroll { display: none; }
  .steps { display: block; padding: 4px 0 8px; }
}

.steps__t { font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
            color: var(--muted); margin: 0 0 10px;
            display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.steps__back { background: none; border: none; padding: 0; cursor: pointer;
               font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0;
               color: var(--accent); text-decoration: underline; }
.steps__hint { color: var(--muted); font-size: 13px; margin: -4px 0 10px; }

.steps__list { display: flex; flex-direction: column; gap: 8px; }

/* Кабинет: крупная цель для пальца, цвет комнаты полосой слева. */
.step { display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
        text-align: left; cursor: pointer; font: inherit;
        background: var(--bg-2); border: 1px solid var(--line);
        border-left: 3px solid var(--c); border-radius: 10px;
        padding: 12px 14px; color: var(--text); min-height: 62px; }
.step:hover:not(:disabled) { border-color: var(--accent); }
.step__n { font-weight: 500; font-size: 16px; }
.step__m { color: var(--muted); font-size: 13px; }
.step__f { font-size: 12px; color: var(--accent); }
.step--none { opacity: .45; cursor: default; }
.step--none .step__f { color: var(--muted); }

/* Часы: сетка крупных плиток, не мельче 44 пунктов по Apple HIG. */
.steps__list--h { display: grid; gap: 8px;
                  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.hchip { display: flex; flex-direction: column; gap: 2px; align-items: center;
         justify-content: center; min-height: 56px; cursor: pointer; font: inherit;
         background: var(--bg-2); border: 1px solid var(--line);
         border-radius: 10px; color: var(--text); padding: 8px 4px; }
.hchip b { font-size: 16px; font-weight: 500; }
.hchip i { font-style: normal; font-size: 11px; color: var(--muted); }
.hchip--sel   { background: var(--accent); border-color: var(--accent); color: #fff; }
.hchip--sel i { color: rgba(255,255,255,.75); }
.hchip--taken { background: var(--taken); opacity: .6; cursor: default; }
.hchip--past  { opacity: .35; cursor: default;
                background: repeating-linear-gradient(-45deg, transparent, transparent 5px,
                            var(--line-soft) 5px, var(--line-soft) 6px); }

/* Реквизиты на экране «бронь принята». Показываются, только если заданы. */
.booked__pay { display: block; margin-top: 14px; padding-top: 12px;
               border-top: 1px solid var(--line-soft);
               font-size: 14px; line-height: 1.6; }
.booked__pay b { font-weight: 600; }

/* Условия рядом с выбором времени: новый клиент не должен искать правила
   отмены после того, как ввёл телефон. */
.sched__terms { color: var(--muted); font-size: 14px; line-height: 1.6;
                margin: 14px 0 0; max-width: 78ch; }
.place__links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.place__links .btn { text-decoration: none; }

/* ============================================================
   ПОЛЯ ВВОДА НА ТЕЛЕФОНЕ
   iOS Safari увеличивает страницу при фокусе на поле, если его шрифт
   меньше 16px. Человек тапает в «Имя», экран прыгает и уезжает — он
   теряет место и часто просто уходит. Ограничение системное, обойти
   его можно только размером шрифта: 16px и больше.
   Правило одно на все поля сайта, чтобы новое поле не завелось с 15px.
   ============================================================ */
@media (max-width: 900px) {
  input, select, textarea,
  .bookform__f input, .chat__bar input { font-size: 16px; }
}

/* Кнопка брони гаснет, когда выбрано меньше часа: центр столько не продаёт. */
.pick__sum .btn:disabled { opacity: .45; cursor: default; }

/* ============================================================
   ЗАГОЛОВКИ ПОЛУЧАСОВОЙ СЕТКИ
   Подпись одна на час и стоит над обеими его половинами (colspan=2):
   двадцать шесть подписей подряд («9:00 9:30 10:00 10:30») сливаются
   в кашу и читаются хуже, чем ничего. Сами деления по тридцать минут
   остаются на месте — просто граница часа темнее получасовой, чтобы
   взгляд цеплялся за час, а палец попадал в получас.
   ============================================================ */
.grid thead th.hcol { border-left: 1px solid var(--line); }
.grid td.cell.is-hour { border-left: 1px solid var(--line); }
.grid td.cell.is-half { border-left: 1px solid var(--line-soft); }