/* Окно скачивания приложения.

   Цвета берём из переменных сайта (с запасными значениями) — окно должно
   выглядеть частью сайта, а не вставкой из другого приложения.

   Кнопки на страницах больше нет: на главной она мешала. Ссылка на окно
   живёт в подвале — отдельной иконкой рядом с ВКонтакте, MAX и почтой. */

/* --- плашка «Установить приложение» и помощник --- */

/* Плашка установки и помощник делят одну и ту же полосу внизу экрана: помощник
   (он выше по слою) стоял поверх кнопки «Установить» и закрывал её. Пока плашка
   показана, кнопка помощника уходит. Если чат уже открыт — не мешаем человеку
   читать ответ: плашку он увидит после. */
@media (max-width: 860px) {
  body.has-install-banner .ms-root:not(.is-open) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* И всё равно держим плашку выше помощника: даже если тот успел показаться,
   кнопка «Установить» остаётся нажимаемой. */
body.has-install-banner .pwa-install { z-index: 9200; }

/* Если внизу стоит ещё и рекламная полоса, плашка поднимается над ней. */
body.has-sticky-ad.has-install-banner .pwa-install {
  bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
}

/* --- окно --- */

.appx-modal[hidden] { display: none; }

.appx-modal {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.appx-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 24, 19, .55);
}

.appx-modal__window {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 24px 22px;
  border-radius: 22px;
  background: #fff;
  color: var(--ink, #2B1813);
  box-shadow: 0 30px 70px -30px rgba(43, 24, 19, .6);
}

.appx-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--bg, #FBF3ED);
  color: var(--ink-2, #5C4A42);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.appx-modal__close:hover { background: #F3E4DA; }

.appx-modal__head { display: flex; gap: 14px; align-items: center; padding-right: 30px; }
.appx-icon { border-radius: 16px; flex: 0 0 64px; }
.appx-modal__head b { display: block; font-size: 19px; letter-spacing: -.01em; }
.appx-modal__sub { display: block; margin-top: 3px; font-size: 13px; color: var(--muted, #6A5A52); }

.appx-lead { margin: 16px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2, #5C4A42); }

.appx-features { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.appx-features li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #2B1813);
}
.appx-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand, #C4402F) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}

.appx-actions { display: grid; gap: 9px; margin-top: 20px; }

.appx-button {
  display: block;
  padding: 13px 18px;
  border: 0;
  border-radius: 13px;
  background: var(--brand, #C4402F);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.appx-button:hover { background: var(--brand-dark, #A93226); }
.appx-button--ghost {
  background: transparent;
  border: 1px solid var(--line, #EFE3DA);
  color: var(--ink, #2B1813);
}
.appx-button--ghost:hover { background: var(--bg, #FBF3ED); border-color: var(--brand, #C4402F); }

.appx-android,
.appx-qr {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line, #EFE3DA);
  border-radius: 14px;
  background: var(--bg, #FBF3ED);
  font-size: 13.5px;
  line-height: 1.55;
}
.appx-android[hidden], .appx-qr[hidden] { display: none; }
.appx-android b { display: block; margin-bottom: 7px; font-size: 14px; }
.appx-android ol { margin: 0; padding-left: 20px; }
.appx-android li { margin-bottom: 4px; }

.appx-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted, #6A5A52); }
.appx-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.appx-qr { display: flex; gap: 14px; align-items: center; }
.appx-qr img { border-radius: 10px; background: #fff; }
.appx-qr span { color: var(--ink-2, #5C4A42); }

.appx-problem {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-left: 3px solid #C9832B;
  border-radius: 10px;
  background: #FBF0DF;
  color: #7A4B12;
  font-size: 13px;
}
.appx-problem[hidden] { display: none; }

/* Пока окно открыто, страница под ним не прокручивается. */
html.appx-locked { overflow: hidden; }

/* --- страница «Приложение» ---

   Разметку наполняет app-install.js теми же данными, что и окно скачивания,
   поэтому здесь только оформление.

   Файл раньше обрывался на открытой строке «@media (max-width: 860px)» —
   мобильные правила страницы так и не были дописаны. Отсюда и «кривая»
   страница: на телефоне две колонки героя не складывались в одну, колонка
   с текстом сжималась до 94 пикселей, а QR-код занимал треть экрана. */

body[data-app-page] .section { padding: 72px 0; }

/* --- герой --- */

.app-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 44px;
  align-items: start;
}
.app-hero__main { min-width: 0; }

/* Знак и подпись «Приложение для Android» стоят отдельной строкой. Раньше знак
   стоял вплотную к заголовку и сдвигал его, а абзац начинался от края — текст
   шёл «лестницей» из трёх разных отступов. */
.app-hero__mark { display: inline-flex; align-items: center; gap: 12px; }
.app-hero__mark img { width: 52px; height: 52px; border-radius: 15px; flex: 0 0 auto; }
.app-hero__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--brand, #C4402F);
}

.app-hero h1 {
  margin: 18px 0 0;
  font-size: clamp(27px, 3.4vw, 38px);
  line-height: 1.14;
  letter-spacing: -.025em;
  max-width: 26ch;
  text-wrap: balance;
}
.app-hero .lead {
  margin: 16px 0 0;
  max-width: 60ch;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-2, #4E3A33);
}

.app-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.app-facts li {
  padding: 7px 14px;
  border: 1px solid var(--line, #EFE4DD);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2, #4E3A33);
}

/* Кнопки — по своему размеру. Растянутые на всю колонку (892 пикселя) они
   читались как цветные полосы, а не как кнопки. */
.app-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.app-actions .btn { width: auto; }

.app-hero__aside { min-width: 0; }

/* --- карточка с QR-кодом ---

   Отдельный класс, а не общий .appx-qr: тот же .appx-qr рисуется в окне
   скачивания на всех страницах, и менять его отсюда нельзя. */

.app-qr-card {
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: 22px 20px 20px;
  border: 1px solid var(--line, #EFE4DD);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-s, 0 1px 2px rgba(43, 24, 19, .05));
  text-align: center;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease, border-color .2s ease;
}
.app-qr-card[hidden] { display: none; }
.app-qr-card img { width: 100%; max-width: 186px; height: auto; border-radius: 12px; display: block; }
.app-qr-card__hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2, #4E3A33); }
.app-qr-card__go { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--brand-dark, #9E2F22); }
.app-qr-card:hover,
.app-qr-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--brand-line, #F4CFC2);
  box-shadow: 0 14px 30px -16px rgba(43, 24, 19, .38);
}
.app-qr-card:focus-visible { outline: 2px solid var(--brand, #C4402F); outline-offset: 2px; }

/* --- что даёт приложение ---

   Карточек десять. Пять колонок на мониторе, две на планшете, одна на телефоне:
   десять делится и на пять, и на два, и на один — ряды всегда заполнены целиком.
   При трёх колонках в последнем ряду оставалась одна карточка и две пустые. */

.app-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.app-card {
  padding: 16px;
  border: 1px solid var(--line, #EFE4DD);
  border-radius: var(--radius-l, 16px);
  background: #fff;
  box-shadow: var(--shadow-s, 0 1px 2px rgba(43, 24, 19, .05));
}
.app-card b { display: block; margin-bottom: 6px; font-size: 14.5px; line-height: 1.3; }
.app-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted, #7D6860); }

/* --- как поставить ---

   Три шага стоят рядом. Раньше они шли во всю ширину контейнера, и строка
   выходила по 150 знаков — читать такое тяжело. */

.app-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.app-steps li {
  position: relative;
  padding: 62px 20px 22px;
  border: 1px solid var(--line, #EFE4DD);
  border-radius: var(--radius-l, 16px);
  background: #fff;
  box-shadow: var(--shadow-s, 0 1px 2px rgba(43, 24, 19, .05));
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink, #2A1A15);
}
.app-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-soft, #FDF0EA);
  border: 1px solid var(--brand-line, #F4CFC2);
  color: var(--brand, #C4402F);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- почему файл, а не магазин --- */

.app-safety {
  padding: 24px 26px;
  border: 1px solid var(--line, #EFE4DD);
  border-left: 3px solid var(--brand, #C4402F);
  border-radius: 0 var(--radius-l, 16px) var(--radius-l, 16px) 0;
  background: var(--bg, #FFFCF8);
  font-size: 14.5px;
  line-height: 1.65;
}
.app-safety > p { margin: 0; max-width: 92ch; }

/* Три пары «подпись — значение» стоят в три колонки. Парами их раскладываем
   вручную: в общей сетке dt и dd идут по очереди и разъехались бы по разным
   колонкам. */
.app-safety dl { margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.app-safety dt { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #7D6860); }
.app-safety dd { margin: 5px 0 0; font-size: 14px; color: var(--ink, #2A1A15); }
.app-safety dd[data-app="hash-full"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; word-break: break-all; }
.app-safety dt:nth-of-type(1) { grid-area: 1 / 1; }
.app-safety dd:nth-of-type(1) { grid-area: 2 / 1; }
.app-safety dt:nth-of-type(2) { grid-area: 1 / 2; }
.app-safety dd:nth-of-type(2) { grid-area: 2 / 2; }
.app-safety dt:nth-of-type(3) { grid-area: 1 / 3; }
.app-safety dd:nth-of-type(3) { grid-area: 2 / 3; }

/* --- частые вопросы --- */

.app-faq { display: grid; gap: 10px; }
.app-faq details { padding: 16px 20px; border: 1px solid var(--line, #EFE4DD); border-radius: var(--radius, 10px); background: #fff; }
.app-faq summary { cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1.45; }
.app-faq summary::marker { color: var(--brand, #C4402F); }
.app-faq p { margin: 12px 0 0; max-width: 92ch; font-size: 14.5px; line-height: 1.62; color: var(--ink-2, #4E3A33); }
.app-faq a { color: var(--brand-dark, #9E2F22); }

/* --- узкие экраны --- */

@media (max-width: 1100px) {
  .app-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .app-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .app-hero__aside { max-width: 360px; }
}
@media (max-width: 860px) {
  .app-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .app-safety dl { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .app-safety dt:nth-of-type(n),
  .app-safety dd:nth-of-type(n) { grid-area: auto; }
  .app-hero h1 { max-width: none; }
  .app-actions { margin-top: 22px; }
  .app-actions .btn { width: 100%; }
}
/* Телефон не может отсканировать собственный экран — подсказка с QR-кодом
   здесь только занимает место и ломает колонку. */
@media (max-width: 720px) {
  .app-hero__aside { display: none; }
}
@media (max-width: 620px) {
  .app-cards { grid-template-columns: minmax(0, 1fr); }
  .app-facts { flex-direction: column; align-items: flex-start; }
  .app-safety { padding: 20px; }
}