/* ---------------------------------------------------------------- всплывашка «Подпишись на канал» (js/subpop.js, 18.10.2026)
   Содержимое нижнего листа (#sheet, nav.js openSheet): иконка, заголовок, три пункта пользы, награда, «Подписаться» / «Не сейчас». */
.sbp { display: flex; flex-direction: column; padding: 6px 2px 2px; }
.sbp__hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sbp__i { position: relative; width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 35%, transparent); }
.sbp__i::after { content: ""; position: absolute; inset: -8px; border-radius: 28px; box-shadow: 0 0 0 1px var(--accent-soft); }
.sbp__i svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sbp__kick { margin: 16px 0 0; font: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text, var(--accent)); }
.sbp__h { margin: 6px 0 0; font: var(--t-title); color: var(--text); text-wrap: balance; }
.sbp__lead { margin: 6px 0 0; font: var(--t-caption); color: var(--text-2); text-wrap: balance; }
.sbp__list { list-style: none; margin: 18px 0 0; padding: 4px 14px; border-radius: 20px; background: var(--surface-2); }
.sbp__list li { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; padding: 10px 0; }
.sbp__list li + li { border-top: 1px solid var(--line); }
.sbp__list span { grid-row: span 2; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.sbp__list span svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sbp__list b { font: var(--t-callout); color: var(--text); }
.sbp__list i { font: var(--t-caption); font-style: normal; color: var(--text-2); }
.sbp__rw { align-self: center; margin: 14px 0 0; padding: 8px 14px; border-radius: var(--r-pill); font: var(--t-callout); color: var(--amber-text, var(--amber));
  background: var(--amber-soft); text-align: center; }
.sbp__go { width: 100%; margin-top: 16px; min-height: 54px; font-size: 1.0625rem; border-radius: 18px; }
.sbp__no { width: 100%; margin-top: 6px; min-height: 46px; background: none; color: var(--text-2); }
@media (max-height: 700px) { .sbp__i { width: 52px; height: 52px; border-radius: 18px; } .sbp__lead { display: none; } .sbp__list li { padding: 7px 0; } }