/* Алпатыч — тихая ссылка под ролью на лендинге (ORDER-219): «Пример дневной сводки» у председателя,
   «Пример: что видит житель» у жителя — раскрывает блок на месте. Блок — ролик (roliki/roliki.js, scenes/utro.json, scenes/zhitel.json) в квадрате,
   как шаги «Как это работает»: играет сам, пока виден.
   Шрифт — Golos Text страницы. */

/* «Как это работает» — тихая ссылка: акцент, пунктир, шеврон вниз; раскрыто — «Свернуть», шеврон вверх
   (слово владельца 19.10.2026: кнопка не нужна, ссылка с пунктиром) */
.kp-tiho{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-10px 0 -8px;padding:0;border:0;background:none;
  font:inherit;font-size:16px;font-weight:600;color:#2F6B3A;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kp-tiho span{border-bottom:1.5px dashed currentColor;padding-bottom:1px;line-height:1.25}
.kp-tiho svg:last-child{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.kp-tiho[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}
/* пиктограмма «смотреть» — чтобы ссылку замечали (слово владельца 19.10.2026); раскрыто — не нужна */
.kp-tiho .kp-ikon{flex:none;width:26px;height:26px;fill:#2F6B3A}
.kp-tiho .kp-ikon path{fill:#fff}
.kp-tiho:hover .kp-ikon{fill:#1F4D28}
.kp-tiho[aria-expanded="true"] .kp-ikon{display:none}
.kp-tiho:hover{color:#1B241C}
.kp-tiho:focus-visible{outline:3px solid #2F6B3A;outline-offset:3px;border-radius:6px}
.kp-tiho[hidden],.kp-ram[hidden]{display:none}
/* под итогом роли ссылка стоит посередине между фразой выше и верхом следующего блока
   (слово владельца 19.10.2026); высота блока та же — сдвиг сверху равен сдвигу снизу */
.rol .kp-tiho{margin:2px 0 -20px}
@media (min-width:900px){.rol .kp-tiho{margin:12px 0 -30px}}

/* пример под ролью («утро председателя», «подача показаний и оплата»): квадрат ролика, как у шагов «Как это работает»,
   играет сам, когда виден (слово владельца 19.10.2026: «на мобиле зависает» — без привязки к прокрутке) */
.primer{display:flex;flex-direction:column;gap:14px}
.primer .alp-rolik{width:100%;max-width:360px;margin:6px 0 0}
@media (max-width:599px){.primer .alp-rolik{max-width:none}}  /* как у шагов: во всю ширину колонки */
.primer-pod{margin:0;font-size:15px;color:#5B665C}
/* под примером — к шагам подключения («Как это работает»), слово владельца 20.10.2026 */
.primer-dalshe{align-self:flex-start;gap:8px;min-height:44px}
.primer-dalshe svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}