/* НАШ ИНТЕРФЕЙС, ВЛОЖЕННЫЙ В ЭКРАН ТЕЛЕФОНА НА ФОТО.
   Кадры сняты с пустым экраном нарочно: всё, что на нём видно, наше и настоящее, а не
   выдумка генератора с кривыми буквами. Поэтому его можно перевести на семь языков,
   поменять под нишу и поправить, не перерисовывая фотографию.
   Размеры внутри заданы в cqw, то есть в долях САМОГО экрана: один и тот же блок одинаково
   ложится и в телефон на ладони, и в телефон на стойке за три метра. */
.shot{position:relative;overflow:hidden}
.shot>img{display:block;width:100%;height:100%;object-fit:cover}
.scr{position:absolute;container-type:size;overflow:hidden;background:#fbfaf8;color:#16171c;
  display:flex;flex-direction:column;box-shadow:0 0 0 .5px rgba(0,0,0,.3)}

.scr .sb{display:flex;justify-content:space-between;align-items:center;flex:none;
  padding:6cqw 7cqw 2cqw;font-size:5.6cqw;font-weight:700}
.scr .site{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 5cqw}
.scr .nav{border:1px solid #eee9e0;border-radius:4.4cqw;padding:3cqw 4cqw;font-size:4.6cqw;
  /* ворота доступности мерили 2.88 при норме 4.5: мелкая серая подпись на почти белом
     экране телефона. #6b655c даёт 5.53 и на глаз остаётся такой же приглушённой */
  color:#6b655c;white-space:nowrap;overflow:hidden;flex:none}
.scr .nav b{color:#16171c;font-size:5.4cqw;font-weight:800}
/* `banner`, а не `hero`: страница тоже зовёт свой первый экран `.hero`, и его
   `min-height:600px` раздувал эту полоску внутри телефона на весь экран. Имена внутри
   вкладыша не должны пересекаться с именами страницы, которая его показывает. */
.scr .banner{flex:none;margin-top:3cqw;border-radius:4.4cqw;height:17cqw;
  background:linear-gradient(120deg,#efe7d8,#f6f1e7 60%,#e9ddc6)}
/* САМА СТРАНИЦА РЕМЕСЛА, А НЕ ПУСТОЕ МЕСТО. Чат поднимается снизу, и над ним оставалась
   дыра в треть экрана: телефон выглядел недогруженным. Здесь лежит то, что на такой
   странице и бывает, — строка о деле и пара отметок. */
.scr .pagetxt{flex:none;margin-top:3.4cqw;font-size:5cqw;font-weight:750;line-height:1.25;
  letter-spacing:-.01em}
.scr .chips{flex:none;display:flex;gap:2cqw;flex-wrap:wrap;margin-top:2.8cqw}
.scr .chips span{border:1px solid #ece6dc;border-radius:99px;padding:1.6cqw 3.2cqw;
  font-size:4.2cqw;color:#6b655c;white-space:nowrap}
.scr .chat{margin:auto -5cqw 0;background:#fff;border-top:1px solid #ece7df;
  border-radius:6.5cqw 6.5cqw 0 0;padding:4.4cqw 5cqw 6cqw;box-shadow:0 -2cqw 6cqw rgba(22,23,28,.1)}
.scr .who{display:flex;align-items:center;gap:3cqw;margin-bottom:3.4cqw}
/* тёмная буква на золотом кружке, а не белая: белая давала 2.26 при норме 4.5 */
.scr .av{width:10cqw;height:10cqw;border-radius:50%;background:#e0a106;color:#241a05;font-size:5cqw;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.scr .who b{font-size:5.4cqw}
.scr .who i{font-style:normal;font-size:4.6cqw;color:#1f7d47;margin-left:auto;font-weight:700}
.scr .m{font-size:5.2cqw;background:#f3f1ec;border-radius:5cqw;padding:3cqw 4cqw;margin-bottom:3cqw;
  width:fit-content;max-width:96%}
.scr .opt{border:1.5px solid #e6e0d5;border-radius:4.6cqw;padding:3cqw 4cqw;margin-bottom:2.6cqw}
.scr .opt b{display:block;font-size:5.2cqw;font-weight:700;line-height:1.22}
.scr .opt span{display:block;font-size:4.4cqw;color:#6b655c}
.scr .opt.sel{border-color:#e0a106;background:#fffaee}
/* реплика посетителя: без неё разговор выглядит монологом помощника */
.scr .m.me{margin-left:auto;background:#eaf3dd;color:#223018}

/* тёмный вариант: телеграм хозяйки */
.scr.tg{background:#17212b;color:#e7eef5}
/* КРУЖОК ПО ВЕРХНЕМУ КРАЮ, А НЕ ПО СЕРЕДИНЕ. По центру он выравнивался относительно
   ДВУХ строк сразу и повисал между ними; в Телеграме аватар стоит вровень с именем. */
.scr.tg .head{display:flex;align-items:flex-start;gap:3cqw;margin:1cqw 5cqw 0;padding-bottom:3cqw;
  border-bottom:1px solid #22303c;flex:none}
.scr.tg .head .av{width:9cqw;height:9cqw;background:#e0a106;color:#16171b;font-weight:900;font-size:4.6cqw}
/* ДВЕ СТРОКИ ДЕРЖАТСЯ ВМЕСТЕ. Подпись наследовала межстрочное расстояние страницы (1.55),
   и между именем и «записи и заявки» зияла дыра в половину строки. */
.scr.tg .head b{font-size:5cqw;color:#fff;display:block;line-height:1.1}
/* тёмная половина макета меряется так же строго, как светлая: было 3.74 и 4.24 */
.scr.tg .head i{font-style:normal;font-size:4.2cqw;color:#9aa7b4;display:block;line-height:1.15;
  margin-top:.6cqw}
/* без `auto` снизу: с ним вторая карточка улетала в самый низ, а между ними зияла дыра */
.scr.tg .card{margin:4cqw 5cqw 0;background:#182533;border:1px solid #243445;border-radius:5cqw;
  padding:4cqw}
.scr.tg .card .h{font-size:4.2cqw;letter-spacing:.08em;color:#9aa7b4;font-weight:800;margin-bottom:3cqw}
.scr.tg .r{display:flex;justify-content:space-between;gap:3cqw;font-size:4.8cqw;padding:1.4cqw 0}
.scr.tg .r span{color:#8ea0b0}
.scr.tg .btns{display:flex;gap:2.4cqw;margin-top:3.4cqw}
.scr.tg .b{flex:1;text-align:center;font-size:4.4cqw;font-weight:750;padding:3cqw 1cqw;border-radius:3.6cqw;
  background:#243445;color:#cfdae4;white-space:nowrap}
.scr.tg .b.yes{background:#e0a106;color:#16171c}