/*
 * Блок «Как установить»: бенто-плитки по устройствам внизу страницы.
 *
 * Шаги лежат в разметке полным текстом — это то, что находит поиск, поэтому они никогда не
 * скрыты через `display: none`, а только свёрнуты до наведения, фокуса или касания.
 *
 * Панель шагов висит под плиткой, а не растёт внутри неё: ряд держит высоту, и ничего вокруг
 * не прыгает, пока курсор идёт по полосе. Тот же текст питает пошаговую картинную инструкцию —
 * второго списка шагов в проекте нет.
 */
.howto { padding: 34px 0 40px; border-top: 1px solid var(--line, rgba(255,255,255,.1)); }
.howto-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.howto-head h2 { font-size: 18px; letter-spacing: .02em; margin: 0; }
.howto-head p { color: var(--muted, #979797); font-size: 12px; }
.howto-lead-touch { display: none; }
.howto-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Бенто: четыре сборки занимают первый ряд, два браузерных способа — второй. */
.howto-card { position: relative; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: var(--radius, 14px); background: var(--card, rgba(255,255,255,.035)); transition: border-color .24s ease, background .24s ease; }
.howto-card[data-ig-track="web"] { grid-column: span 2; }
.howto-card:hover, .howto-card:focus-within { border-color: rgba(160,232,104,.26); background: rgba(160,232,104,.05); z-index: 3; }
.howto-card > h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.howto-trigger { width: 100%; display: grid; grid-template-columns: 20px minmax(0, 1fr) 14px; align-items: center; gap: 10px; padding: 14px 15px; border: 0; border-radius: inherit; background: transparent; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-align: left; cursor: pointer; }
.howto-trigger img { width: 18px; height: 18px; opacity: .8; }
.howto-trigger em { display: block; margin-top: 3px; color: var(--muted, #979797); font-size: 11px; font-style: normal; font-weight: 500; letter-spacing: .01em; }
.howto-chev { width: 14px; height: 14px; fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .26s ease, stroke .26s ease; }
.howto-card:hover .howto-chev, .howto-card:focus-within .howto-chev { transform: rotate(180deg); stroke: #a0e868; }
.howto-fold { position: absolute; top: calc(100% - 6px); left: -1px; width: calc(200% + 12px); z-index: 4; display: grid; gap: 10px; padding: 14px 15px 15px; border: 1px solid rgba(160,232,104,.22); border-radius: var(--radius, 14px); background: #101015; box-shadow: 0 24px 60px rgba(0,0,0,.55); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .24s ease, visibility .24s; }
.howto-card[data-ig-track="web"] .howto-fold { width: calc(100% + 2px); }
/* Плитки правой половины раскрываются влево, чтобы панель осталась внутри сетки. */
.howto-card[data-align="right"] .howto-fold { left: auto; right: -1px; }
.howto-card:hover .howto-fold, .howto-card:focus-within .howto-fold, .howto-card[data-open="1"] .howto-fold { visibility: visible; opacity: 1; transform: translateY(0); }
/* Плитки последнего ряда раскрываются вверх, чтобы панель не вышла за блок. */
.howto-card[data-flip="1"] .howto-fold { top: auto; bottom: calc(100% - 6px); transform: translateY(6px); }
.howto-card[data-flip="1"]:hover .howto-fold, .howto-card[data-flip="1"]:focus-within .howto-fold, .howto-card[data-flip="1"][data-open="1"] .howto-fold { transform: translateY(0); }
.howto-card ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: howto; }
.howto-card ol li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; color: var(--muted, #979797); font-size: 12px; line-height: 1.55; counter-increment: howto; }
.howto-card ol li::before { content: counter(howto); width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid rgba(160,232,104,.28); border-radius: 50%; color: #a0e868; font-size: 9px; font-weight: 700; }
.howto-open { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid rgba(160,232,104,.3); border-radius: 999px; background: rgba(160,232,104,.07); color: #eaffd3; font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: .05em; cursor: pointer; transition: background .22s ease, border-color .22s ease; }
.howto-open:hover { border-color: rgba(160,232,104,.5); background: rgba(160,232,104,.13); }
.howto-open svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.howto-note { margin-top: 14px; color: var(--muted, #979797); font-size: 11.5px; line-height: 1.7; }
.howto-note a { color: #a0e868; }

@media (max-width: 900px) { .howto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .howto-card, .howto-card[data-ig-track="web"] { grid-column: span 1; } }

/*
 * Где нет настоящего курсора — шаги идут потоком: всплывающую панель, которую вызывает только
 * наведение, на телефоне не увидит никто.
 *
 * Но и разворачивать сразу все шесть плиток нельзя — это две с половиной страницы прокрутки
 * ради текста, который нужен по одному устройству за раз. Поэтому на телефоне это гармошка:
 * шаги свёрнуты по высоте и раскрываются тапом.
 *
 * Свёрнуто именно высотой, а не `display: none` и не `visibility`: текст остаётся в потоке
 * документа и остаётся тем, что находит поиск.
 */
@media (hover: none), (max-width: 560px) {
  .howto-fold, .howto-card[data-ig-track="web"] .howto-fold { position: static; width: auto; visibility: visible; opacity: 1; transform: none; padding: 0 15px; border: 0; border-radius: 0; background: transparent; box-shadow: none; max-height: 0; overflow: hidden; transition: max-height .28s ease, padding-bottom .28s ease; }
  .howto-card[data-open="1"] .howto-fold { max-height: 620px; padding-bottom: 14px; }
  /* Стрелка остаётся: без неё непонятно, что плитку можно раскрыть. */
  .howto-card:hover .howto-chev { transform: none; stroke: rgba(255,255,255,.45); }
  .howto-card[data-open="1"] .howto-chev { transform: rotate(180deg); stroke: #a0e868; }
  /* Наведения нет, поэтому подсветку даёт только раскрытая плитка. */
  .howto-card:hover { border-color: var(--line, rgba(255,255,255,.1)); background: var(--card, rgba(255,255,255,.035)); }
  .howto-card[data-open="1"] { border-color: rgba(160,232,104,.26); background: rgba(160,232,104,.05); }
  .howto-trigger { padding-block: 13px; }
  .howto-lead-hover { display: none; }
  .howto-lead-touch { display: block; }
}
@media (max-width: 560px) {
  .howto-head { flex-direction: column; gap: 6px; }
  .howto-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .howto-card, .howto-chev, .howto-fold, .howto-open { transition: none; }
}