/* Добавки 07.11 к стилям сайта «по нишам»: метка категории над заголовком, недоставленные сообщения в «лесенке»,
   точка в карточке пульта, слово в подвале под длину названия, поля окна контактов в чате. */

/* категория над заголовком первого экрана (когда заголовок — обещание) */
.geroy2__kat{display:inline-block;align-self:flex-start;margin:0 0 -1.2rem;font:500 .95rem/1.2 var(--tekst,Inter),sans-serif;letter-spacing:.01em;color:var(--r-tekst2)}

/* «лесенка» сообщений: в первых двух мессенджерах человека нет — сообщение не доставлено */
.les__ish--net{opacity:.72}
.les__vr--net{color:#a0938a;font-style:normal}

/* карточка «Итог дня» на пульте: вместо знака — цветная точка */
.pvid__tochka{width:.6rem;height:.6rem;border-radius:50%;background:var(--s4);flex:none}

/* большое слово в подвале: длинное название уменьшается, чтобы влезть в ширину */
.futer__slovo{font-size:min(clamp(4rem,15.2vw,15rem),calc(92vw / (var(--dl,8) * .74)))}

/* окно контактов внутри чата */
.lep-pole{display:block}
.lep-pole input{box-sizing:border-box;width:100%;height:2.6rem;padding:0 .85rem;border:1px solid var(--r-liniya);border-radius:.8rem;background:var(--r-karta,#fff);color:var(--r-tekst);font:inherit;font-size:.95rem}
.lep-pole input:focus{outline:none;border-color:var(--r-temn)}
.lep-osh{margin:0;font-size:.85rem;color:#c2412d}

/* 08.11, заказчик: логотип «vireo» — рисунок из букв Roboto Flex (узкий, жирный), над i вместо точки круг
   (logo/sobrat_logo.py). Цвет круга — как у Rime: скачком раз в 1,2 с, без плавности и подпрыгиваний;
   у нас четыре цвета сайта: голубой → коралл → жёлтый → мята. */
.logo .logo-svg{display:block;height:1.72rem;width:auto}
.logo__slovo{display:block}
.futer__slovo .logo-svg{display:block;width:clamp(13rem,44vw,40rem);height:auto}
.logo-krug{fill:var(--s3);animation:logo-krug 4.8s step-end infinite}
@keyframes logo-krug{0%{fill:var(--s3)}25%{fill:var(--s1)}50%{fill:var(--s2)}75%{fill:var(--s4)}}
@media (prefers-reduced-motion:reduce){.logo-krug{animation:none}}

/* ── 09.11 ночная полировка (общая) ── */
/* шапка и маленькие кнопки — шрифтом сайта: «Onest» и «Aeonik» на сайт не загружаются, вместо них был системный шрифт */
.shapka,.kn{font-family:"Roboto Flex",Geist,sans-serif;font-stretch:88%}
.kn{font-weight:500}
/* метка «vireo» / «ИИ» в окнах-примерах — узким шрифтом сайта: отдельный Unbounded (50 КБ) ради одного слова не грузим */
.ok__ld{font-family:var(--r-zag);font-stretch:38%;font-weight:640;font-size:15px;letter-spacing:0}

/* первый экран на компьютере: волна по высоте окна, чтобы заголовок, абзац и кнопки помещались в первый экран
   (было: кнопки ниже края при 1440×900 и 1366×768) */
@media (min-width:901px){
  .geroy2{padding-top:clamp(4.75rem,6.5vw,6rem)}
  .geroy2__volna{height:clamp(11rem,calc(100vh - 33rem),30rem);height:clamp(11rem,calc(100svh - 33rem),30rem)}   /* на невысоком окне волна площе (sceny.js, razmah) */
}
/* первый экран на телефоне: кнопки одной ширины, главная («Поговорить с Верой») — первой */
@media (max-width:640px){
  .geroy2__niz{max-width:none;align-items:stretch}
  .geroy2__kn{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem}
  .geroy2__kn .r-kn{width:100%}
  .geroy2__kn .r-kn:not(.r-kn--vtor){order:-1}
}

/* голосовой блок на телефоне: подпись «Разговор голосом прямо в браузере» обрезалась по краям — переносим */
@media (max-width:700px){#pleer .pz-v-brauzere{white-space:normal;text-wrap:balance}}

/* «Уже работает» на компьютере: заголовок слева, текст справа — блок не висит половиной экрана пустоты */
@media (min-width:901px){
  #keys .r-shapka{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(2.5rem,6vw,6rem);row-gap:1.25rem;
    max-width:none;align-items:end;margin-bottom:0}
  #keys .brovka{grid-column:1;justify-self:start}
  #keys .r-h2{grid-column:1}
  #keys .r-lid{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:30rem;font-size:1.25rem;line-height:1.35}
}

/* подвал на телефоне: ссылки выше, чтобы попадать пальцем (было 24 px) */
@media (max-width:640px){.futer__kol{gap:0}.futer__kol a{padding:.55rem 0}}

/* мелкая подпись под формой показа — не меньше 15 px */
.demo2__prim{font-size:.95rem}

/* бесконечные украшения (пунктир, плавающий пульт, столбики кнопки, Лаки…) за экраном стоят — osnova.js ставит .za-ekranom */
.za-ekranom,.za-ekranom *,.za-ekranom::before,.za-ekranom::after,.za-ekranom *::before,.za-ekranom *::after{animation-play-state:paused!important}

/* заголовок первого экрана: без одинокого слова в последней строке (при 1280 px оставалось «записи», а «по» висело) */
.geroy2__zag{text-wrap:pretty}
/* голосовой блок на телефоне ниже (было 90 % экрана): меньше пустоты между заголовком и кнопкой */
@media (max-width:560px){.pleer2{min-height:80vh;min-height:80svh}}
/* то же для первого экрана «Интеграций»: кнопки одной ширины, главная — первой */
@media (max-width:640px){
  .str-kn{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;width:100%}
  .str-kn .r-kn{width:100%}
  .str-kn .r-kn:not(.r-kn--vtor){order:-1}
}

/* появление страницы: заливка «backwards» вместо «both» — после конца анимации конечное состояние то же самое, но браузер
   больше не держит всю страницу (12 000 px) отдельным слоём видеокарты с «активной» анимацией (09.11, замер слоёв) */
html.vhod .list{animation-fill-mode:backwards}
html.vhod .futer{animation-fill-mode:backwards}
html.k-yakoryu .list,html.k-yakoryu .futer{animation-fill-mode:backwards}
/* логотип — рисунок (svg): шрифт Unbounded ему не нужен, а из-за переносов строк внутри ссылки браузер всё равно его качал */
.logo:has(svg.logo-svg),.futer__slovo:has(svg.logo-svg){font-family:"Roboto Flex",Geist,sans-serif}

/* 12.11, заказчик (скрин с iPhone): «внизу всё равно обрезано». На телефоне подвал — обычный блок в конце страницы,
   а не «лежит под страницей» закреплённым у нижнего края: сайт во весь экран (viewport-fit=cover), и закреплённый
   подвал на iPhone уходит низом под панель Safari, а на невысоком экране (iPhone SE) не влезает и верхом.
   Подвал заходит под скруглённый низ страницы на 2rem — углы по-прежнему на тёмном. Движение подвала — только на
   компьютере (dvizhenie.js). Снизу запас на полоску «домой». */
@media (max-width:900px){
  .futer-mesto{display:none}
  .futer{position:relative;margin-top:-2rem}
  .futer__vnutri{padding-top:calc(clamp(4rem,8vw,6rem) + 2rem);padding-bottom:calc(1.75rem + env(safe-area-inset-bottom,0px))}
}