/* Общие стили страниц-инструкций: /guide и посадочные страницы о визитках.
   Вынесено из <style> внутри guide.html, чтобы 35 КБ разметки не ехали заново
   на каждой из четырёх страниц — файл кэшируется надолго по ?v=<хеш>. */
/* ════════ Гайд ════════
   Снимки экранов — настоящие, снятые с приложения. Движущиеся сцены —
   уменьшенные копии этих же экранов: разметка, подписи и цвета взяты из
   style.css и шаблонов продукта, чтобы человек увидел ровно то, что
   получит у себя. Каждая сцена живёт на СВОИХ общих часах: все её
   движения считают по одной шкале и не разъезжаются.
   Всё на CSS — ни одного скрипта и ни одного чужого ресурса. */

.gd-hero { padding: 26px 0 10px; text-align: center; }
.gd-hero h1 { font-size: 30px; line-height: 1.15; margin: 0 0 10px; letter-spacing: -.02em; }
.gd-hero h1 span {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gd-hero p { color: var(--text-dim); font-size: 15px; line-height: 1.5; margin: 0 auto; max-width: 30em; }
.gd-hero-badge {
  display: inline-block; margin-top: 14px; padding: 8px 16px; border-radius: 999px;
  background: rgba(108,92,231,.14); border: 1px solid rgba(108,92,231,.34);
  font-size: 13px; color: var(--text);
}

/* ——— оглавление: липнет к верху, как и в кабинете ——— */
.gd-toc {
  position: sticky; top: 0; z-index: 30; margin: 18px -4px 6px; padding: 10px 4px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  background: var(--shell-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--shell-border);
}
.gd-toc::-webkit-scrollbar { display: none; }
.gd-toc a {
  flex: none; padding: 8px 14px; border-radius: 12px; font-size: 13px; font-weight: 600;
  color: var(--text); text-decoration: none; white-space: nowrap; scroll-snap-align: start;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
}
[data-theme="light"] .gd-toc a { background: rgba(15,17,21,.04); }
/* Метка текущего раздела: на телефоне полоска не вмещается целиком, и без
   подсветки непонятно, где ты находишься. Класс ставит скрипт ниже. */
.gd-toc a.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
[data-theme="light"] .gd-toc a.on { background: linear-gradient(135deg, var(--accent), var(--accent2)); }

/* ——— раздел ——— */
.gd-sec { scroll-margin-top: 64px; padding: 30px 0 6px; border-top: 1px solid var(--border); margin-top: 26px; }
.gd-sec:first-of-type { border-top: 0; margin-top: 10px; }
.gd-sec-num {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: var(--accent2); margin-bottom: 8px;
}
.gd-sec h2 { font-size: 23px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.015em; }
.gd-sec-lead { color: var(--text-dim); font-size: 15px; line-height: 1.55; margin: 0 0 18px; }

.gd-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.gd-list li {
  display: grid; grid-template-columns: 1.6em 1fr; gap: 10px; align-items: start;
  font-size: 14.5px; line-height: 1.5; color: var(--text);
}
.gd-list li > span:first-child { text-align: center; }
.gd-list li b { font-weight: 700; }
.gd-list li small { display: block; color: var(--text-dim); font-size: 13px; line-height: 1.45; margin-top: 2px; }

.gd-tip {
  margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5;
  background: rgba(0,206,201,.08); border: 1px solid rgba(0,206,201,.26); color: var(--text);
}
.gd-tip b { color: var(--accent2); }

/* ——— снимки экранов ——— */
/* Снимки идут в одну колонку во всю ширину: приложение живёт в колонке 480px
   даже на компьютере, и в два столбца подписи на экранах становятся
   нечитаемыми. Лучше длинная страница, чем мелкий шрифт. */
.gd-shots { display: grid; gap: 18px; margin: 4px 0 22px; }
.gd-shot { min-width: 0; }
.gd-shot figure {
  margin: 0; border-radius: 20px; overflow: hidden; background: var(--card-bg);
  border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
[data-theme="light"] .gd-shot figure { box-shadow: 0 14px 34px rgba(15,17,21,.12); }
.gd-shot img { display: block; width: 100%; height: auto; }
.gd-shot figcaption { font-size: 12.5px; line-height: 1.4; color: var(--text-dim); margin-top: 8px; text-align: center; }
.gd-shot-wide { margin: 0 auto; }

/* ════════ общий корпус телефона для сцен ════════ */
.gd-demo { margin: 6px 0 22px; }
.gd-demo-cap { font-size: 12.5px; line-height: 1.45; color: var(--text-dim); text-align: center; margin: 10px auto 0; max-width: 26em; }
.gd-phone {
  width: 100%; max-width: 310px; margin: 0 auto; font-size: clamp(9px, 2.9vw, 12px);
  border: 1px solid var(--border); border-radius: 2em; padding: .55em;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)), var(--card-bg);
  box-shadow: 0 1.4em 2.8em rgba(0,0,0,.35);
}
[data-theme="light"] .gd-phone { box-shadow: 0 1.4em 2.8em rgba(15,17,21,.14); }
.gd-phone-bar { display: flex; justify-content: center; padding: .1em 0 .5em; }
.gd-phone-bar i { width: 28%; height: .4em; border-radius: 999px; background: var(--border); }
.gd-screen {
  border-radius: 1.45em; overflow: hidden; background: var(--bg);
  border: 1px solid var(--border); color: var(--text);
}
.gd-demo b, .gd-demo strong { font-weight: 700; }
.gd-demo small, .gd-demo em, .gd-demo i { font-style: normal; }
.gd-demo p { margin: 0; }

/* ════════ сцена 1: анкета в чате (общие часы 18 с) ════════ */
.gd-chat-head {
  display: flex; align-items: center; gap: .6em; padding: .7em .8em;
  border-bottom: 1px solid var(--border); background: var(--card-bg);
}
.gd-ava {
  width: 2.4em; height: 2.4em; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: .9em; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.gd-chat-head b { display: block; font-size: 1em; line-height: 1.2; }
.gd-chat-head small { display: block; font-size: .85em; color: var(--text-dim); margin-top: .15em; }
.gd-log {
  height: 17em; padding: .8em; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; animation: gd-log 18s linear infinite;
}
/* Лента прижата к низу — как настоящий чат, который сам докручивается:
   новая реплика выдавливает старые за верхний край. Рост идёт через
   max-height (а не height): реплике любой высоты не нужна точная цифра. */
/* flex: none обязателен: лента прижата к низу, и без него переполненные
   реплики не выдавливаются за верхний край, а сжимаются и наезжают друг
   на друга — текст обрезается посередине строки. */
.gd-row { max-height: 0; opacity: 0; overflow: hidden; display: flex; flex: none; }
.gd-row.gd-me { justify-content: flex-end; }
.gd-bub {
  margin-bottom: .55em; max-width: 84%; padding: .55em .85em; border-radius: 1.1em;
  font-size: 1em; line-height: 1.35;
}
.gd-bot { background: var(--card-bg); border: 1px solid var(--border); border-bottom-left-radius: .3em; }
.gd-usr {
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
  border-bottom-right-radius: .3em;
}
.gd-chips { flex-wrap: wrap; gap: .4em; padding-bottom: .55em; }
.gd-chip {
  padding: .45em .8em; border-radius: .9em; font-size: .95em; font-weight: 600;
  background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--text);
}
[data-theme="light"] .gd-chip { background: rgba(15,17,21,.04); }
.gd-dots { display: flex; gap: .3em; align-items: center; padding: .25em 0; }
.gd-dots i {
  width: .45em; height: .45em; border-radius: 50%; background: var(--text-dim);
  animation: gd-dot .9s ease-in-out infinite;
}
.gd-dots i:nth-child(2) { animation-delay: .15s; }
.gd-dots i:nth-child(3) { animation-delay: .3s; }

.gd-r1 { animation: gd-r1 18s ease infinite; }
.gd-r2 { animation: gd-r2 18s ease infinite; }
.gd-r3 { animation: gd-r3 18s ease infinite; }
.gd-r4 { animation: gd-r4 18s ease infinite; }
.gd-r5 { animation: gd-r5 18s ease infinite; }
.gd-r6 { animation: gd-r6 18s ease infinite; }
.gd-r7 { animation: gd-r7 18s ease infinite; }
.gd-r8 { animation: gd-r8 18s ease infinite; }
.gd-typing { animation: gd-typing 18s ease infinite; }
.gd-chip-hit { animation: gd-chip-hit 18s ease infinite; }

@keyframes gd-log { 0% { opacity: 0 } 3%, 92% { opacity: 1 } 97%, 100% { opacity: 0 } }
@keyframes gd-dot { 0%, 60%, 100% { transform: none; opacity: .5 } 30% { transform: translateY(-.25em); opacity: 1 } }
@keyframes gd-r1 { 0%, 7% { max-height: 0; opacity: 0 } 9%, 100% { max-height: 7em; opacity: 1 } }
@keyframes gd-r2 { 0%, 15% { max-height: 0; opacity: 0 } 17%, 100% { max-height: 7em; opacity: 1 } }
@keyframes gd-r3 { 0%, 22% { max-height: 0; opacity: 0 } 24%, 100% { max-height: 7em; opacity: 1 } }
@keyframes gd-r4 { 0%, 30% { max-height: 0; opacity: 0 } 32%, 100% { max-height: 7em; opacity: 1 } }
@keyframes gd-r5 { 0%, 37.5% { max-height: 0; opacity: 0 } 39.5%, 100% { max-height: 7em; opacity: 1 } }
@keyframes gd-r6 {
  0%, 41% { max-height: 0; opacity: 0 }
  43%, 51% { max-height: 7em; opacity: 1 }
  53%, 100% { max-height: 0; opacity: 0 }
}
@keyframes gd-r7 { 0%, 52% { max-height: 0; opacity: 0 } 54%, 100% { max-height: 7em; opacity: 1 } }
@keyframes gd-r8 { 0%, 59% { max-height: 0; opacity: 0 } 61%, 100% { max-height: 7em; opacity: 1 } }
/* «печатает…» всегда последней строкой: гаснет ровно под реплику бота */
@keyframes gd-typing {
  0%, 6% { max-height: 4em; opacity: 1 }
  7.2%, 14% { max-height: 0; opacity: 0 }
  15%, 21% { max-height: 4em; opacity: 1 }
  22.2%, 29% { max-height: 0; opacity: 0 }
  30%, 36.5% { max-height: 4em; opacity: 1 }
  37.8%, 51% { max-height: 0; opacity: 0 }
  52.2%, 58% { max-height: 4em; opacity: 1 }
  59%, 100% { max-height: 0; opacity: 0 }
}
@keyframes gd-chip-hit {
  0%, 47.5% { transform: none; color: var(--text); box-shadow: none }
  49.5%, 51.5% { transform: scale(.94); color: #fff; box-shadow: inset 0 0 0 3em var(--accent) }
  53%, 100% { transform: none; color: var(--text); box-shadow: none }
}

/* ════════ общее: миниатюра настоящей визитки ════════ */
/* Снято с card.html и style.css: кружок с подсветкой, имя, пилюля
   «деятельность · город», бегущая строка-тезис, градиентная кнопка
   «Сохранить контакт», круглые кнопки контактов (у мессенджеров и
   соцсетей — папка из двух плиток) и «Ещё обо мне» под ними.
   Порядок менять нельзя: он и есть порядок на живой странице. */
.gd-face { padding: 1.2em .9em 1em; text-align: center; }
.gd-face-ava {
  width: 4.2em; height: 4.2em; margin: 0 auto .7em; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.25em; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: .14em solid var(--accent);
  box-shadow: 0 0 0 .2em rgba(255,255,255,.04), 0 0 2.2em -.5em var(--accent);
}
.gd-face-name { font-size: 1.22em; font-weight: 700; }
.gd-face-role {
  display: inline-flex; align-items: center; gap: .45em; margin: .5em 0 0;
  padding: .35em .9em; border-radius: 999px; font-size: .82em; font-weight: 600;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid var(--border);
}
[data-theme="light"] .gd-face-role { background: linear-gradient(135deg, rgba(15,17,21,.05), rgba(15,17,21,.01)); }
.gd-face-role em { font-style: normal; color: var(--text-dim); padding-left: .45em; border-left: 1px solid var(--border); }
/* Бегущая строка живёт своим циклом, как и на визитке: там она печатает
   тезис, держит паузу и стирает его независимо от остального экрана. */
.gd-face-prop { min-height: 1.5em; margin: .6em 0 0; font-size: .85em; color: var(--text-dim); white-space: nowrap; }
.gd-face-prop b {
  display: inline-block; vertical-align: bottom; overflow: hidden;
  max-width: 0; font-weight: 500; animation: gd-tw 7s steps(24, end) infinite;
}
.gd-face-prop u { text-decoration: none; color: var(--accent2); animation: gd-twcur .8s step-end infinite; }
.gd-face-save {
  display: block; margin-top: .9em; padding: .8em; border-radius: .95em;
  font-size: 1em; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.gd-face-icons { display: flex; justify-content: center; gap: .5em; margin-top: .9em; }
.gd-ib {
  flex: 0 1 2.9em; aspect-ratio: 1/1; border-radius: 50%; font-style: normal;
  display: flex; align-items: center; justify-content: center; gap: .15em; font-size: .95em;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text-dim);
}
[data-theme="light"] .gd-ib { background: rgba(15,17,21,.03); }
.gd-ib u { display: block; width: .85em; height: .85em; border-radius: .25em; text-decoration: none; }
.gd-tg { background: #2aabee } .gd-wa { background: #25d366 }
.gd-vk { background: #0077ff } .gd-ig { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888) }
.gd-face-more {
  display: flex; align-items: center; justify-content: space-between; gap: .6em;
  margin-top: .9em; padding: .75em .9em; border-radius: .9em;
  font-size: .76em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); background: var(--card-bg); border: 1px solid var(--border);
}
.gd-face-more span:last-child { color: var(--accent2); letter-spacing: 0; }
@keyframes gd-tw { 0% { max-width: 0 } 30%, 72% { max-width: 14em } 94%, 100% { max-width: 0 } }
@keyframes gd-twcur { 50% { opacity: 0 } }

/* ════════ сцена 2: «Сохранить контакт» (общие часы 11 с) ════════ */
/* Запас снизу — чтобы выехавший лист с контактами не закрыл саму кнопку,
   ради которой сцена и затевалась. */
.gd-save { position: relative; height: 30em; overflow: hidden; }
.gd-mini-btn { animation: gd-press 11s ease infinite; }
.gd-book {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .8em;
  border-radius: 1.2em 1.2em 0 0; background: var(--card-bg); border: 1px solid var(--border);
  box-shadow: 0 -1em 2em rgba(0,0,0,.3); transform: translateY(105%);
  animation: gd-book 11s cubic-bezier(.22,.8,.26,1) infinite;
}
.gd-book-grip { width: 22%; height: .35em; border-radius: 999px; background: var(--border); margin: 0 auto .7em; }
.gd-book-head { font-size: .9em; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .6em; }
.gd-book-row { display: flex; align-items: center; gap: .6em; opacity: 0; animation: gd-book-row 11s ease infinite; }
.gd-book-row i {
  width: 2.4em; height: 2.4em; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: .85em; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.gd-book-row b { display: block; font-size: 1em; }
.gd-book-row small { display: block; font-size: .9em; color: var(--text-dim); }
.gd-book-ok {
  margin-top: .7em; padding: .5em .7em; border-radius: .7em; font-size: .9em; opacity: 0;
  color: var(--ok); background: rgba(85,239,196,.1); border: 1px solid rgba(85,239,196,.3);
  animation: gd-book-ok 11s ease infinite;
}
@keyframes gd-press {
  0%, 22% { transform: none; filter: none }
  25%, 28% { transform: scale(.955); filter: brightness(1.22) }
  31%, 100% { transform: none; filter: none }
}
@keyframes gd-book {
  0%, 29% { transform: translateY(105%) }
  38%, 82% { transform: translateY(0) }
  93%, 100% { transform: translateY(105%) }
}
@keyframes gd-book-row { 0%, 39% { opacity: 0 } 44%, 84% { opacity: 1 } 90%, 100% { opacity: 0 } }
@keyframes gd-book-ok { 0%, 47% { opacity: 0 } 52%, 84% { opacity: 1 } 90%, 100% { opacity: 0 } }

/* ════════ сцена 3: QR → визитка (общие часы 14 с) ════════ */
.gd-scan { position: relative; height: 27em; overflow: hidden; }
.gd-cam {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1em;
  background: radial-gradient(70% 60% at 50% 35%, #2a2f3d, #0d0f14);
}
.gd-qrbox { position: relative; padding: .7em; }
.gd-qrbox:before, .gd-qrbox:after {
  content: ""; position: absolute; width: 1.5em; height: 1.5em;
  border: .2em solid var(--accent2); animation: gd-corner 14s ease infinite;
}
.gd-qrbox:before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: .5em 0 0 0; }
.gd-qrbox:after { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 .5em 0; }
.gd-qr {
  display: block; position: relative; width: 8.2em; height: 8.2em; padding: .5em;
  background: #fff; border-radius: .35em;
}
/* Узор-шашка двумя линейными градиентами: читается как QR и работает
   в старых мобильных браузерах, где нет repeating-conic-gradient. */
.gd-qr:before {
  content: ""; position: absolute; inset: .5em; background-color: #fff;
  background-image:
    linear-gradient(45deg, #0b0d12 25%, transparent 25%, transparent 75%, #0b0d12 75%),
    linear-gradient(45deg, #0b0d12 25%, transparent 25%, transparent 75%, #0b0d12 75%);
  background-size: .62em .62em; background-position: 0 0, .31em .31em;
}
.gd-qr i {
  position: absolute; width: 1.7em; height: 1.7em; border: .36em solid #0b0d12;
  background: #fff; box-shadow: 0 0 0 .3em #fff;
}
.gd-qr .e1 { top: .8em; left: .8em; }
.gd-qr .e2 { top: .8em; right: .8em; }
.gd-qr .e3 { bottom: .8em; left: .8em; }
.gd-scanline {
  position: absolute; left: .7em; right: .7em; top: 4%; height: .18em; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent2), transparent);
  box-shadow: 0 0 1.2em .2em rgba(0,206,201,.5);
  animation: gd-scanline 14s ease-in-out infinite;
}
.gd-cam-hint { font-size: .95em; color: #cfd3e0; text-align: center; max-width: 14em; }
.gd-sheet {
  position: absolute; inset: 0; background: var(--bg); transform: translateY(102%);
  animation: gd-sheet 14s cubic-bezier(.22,.8,.26,1) infinite;
}
@keyframes gd-scanline {
  0%, 6% { top: 4%; opacity: 0 }
  10% { opacity: 1 }
  33% { top: 92%; opacity: 1 }
  37%, 100% { top: 92%; opacity: 0 }
}
@keyframes gd-corner {
  0%, 32% { border-color: var(--accent2); opacity: .65 }
  35%, 40% { border-color: var(--ok); opacity: 1 }
  44%, 100% { border-color: var(--accent2); opacity: .65 }
}
@keyframes gd-sheet { 0%, 39% { transform: translateY(102%) } 48%, 88% { transform: translateY(0) } 96%, 100% { transform: translateY(102%) } }

/* ════════ сцена 4: блок статистики в кабинете (общие часы 14 с) ════════ */
/* Разметка и подписи сняты с dashboard.html: та же шапка-«раскрывашка» с
   номером визитки, тот же ряд кнопок периода, те же четыре плитки
   (число сверху, подпись снизу, прирост) и тот же блок заполненности.
   Анимация показывает ровно одно действие — переключение периода, —
   поэтому числа и приросты меняются все вместе и только по нажатию. */
.gd-stat { padding: .9em; }
.gd-stat-head {
  display: flex; align-items: center; gap: .6em; margin-bottom: .8em;
  font-size: .72em; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim);
}
.gd-stat-id {
  margin-left: auto; letter-spacing: .08em; color: var(--text-dim);
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  border-radius: 999px; padding: .2em .65em; text-transform: none;
}
[data-theme="light"] .gd-stat-id { background: rgba(15,17,21,.05); }
.gd-stat-head .gd-chev { color: var(--accent2); }
.gd-stat-chips { display: flex; gap: .25em; margin-bottom: .7em; }
.gd-chip {
  flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-size: .68em; font-weight: 700; padding: .45em .2em;
  border: 1px solid var(--border); border-radius: 999px;
  background-color: var(--card-bg); color: var(--text-dim);
  animation: gd-chip-1 14s steps(1, end) infinite;
}
.gd-chip-2 { animation-name: gd-chip-2 }
.gd-chip-3 { animation-name: gd-chip-3 }
.gd-chip-4 { animation-name: gd-chip-4 }
.gd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.gd-tile {
  padding: .8em .5em; border-radius: .9em; text-align: center;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
}
[data-theme="light"] .gd-tile { background: rgba(15,17,21,.02); }
/* Только прямой потомок: внутри плиток ещё лежат ленты цифр, у которых
   обёртка — тоже <span>, и общий селектор сминал им шрифт, а окно клипа
   оставалось прежним, поэтому снизу выглядывало следующее значение. */
.gd-tile > span {
  display: flex; align-items: center; justify-content: center;
  font-size: .76em; color: var(--text-dim); line-height: 1.3; min-height: 2.4em;
}
/* Лента цифр: столбик значений уезжает вверх ровно на высоту строки.
   Размер шрифта задан на самой ленте — тогда 1.6em строки и 1.6em сдвига
   считаются от одной величины и цифры не съезжают из окна. */
.gd-num { display: block; height: 1.6em; overflow: hidden; font-size: 1.4em; font-weight: 700; letter-spacing: -.02em; }
.gd-num i { display: block; height: 1.6em; line-height: 1.6em; }
.gd-num-sm { font-size: 1.05em; }
.gd-num-a > span, .gd-num-b > span { display: block; animation: gd-rib-a 14s cubic-bezier(.3,.8,.3,1) infinite; }
.gd-num-b > span { animation-name: gd-rib-b; }
/* Прирост — такая же лента, только мелкая и зелёная: у «Всё время»
   сравнивать не с чем, поэтому там строка пустая (как и в кабинете). */
.gd-delta { display: block; height: 1.3em; overflow: hidden; font-size: .72em; font-weight: 700; color: #2ecc71; margin-top: .2em; }
.gd-delta i { display: block; height: 1.3em; line-height: 1.3em; }
.gd-delta > span { display: block; animation: gd-delta-a 14s cubic-bezier(.3,.8,.3,1) infinite; }
.gd-delta-b > span { animation-name: gd-delta-b; }
.gd-fill { margin-top: .8em; padding-top: .8em; border-top: 1px solid var(--border); }
.gd-fill-top { font-size: .9em; margin-bottom: .55em; }
.gd-track { height: .5em; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
[data-theme="light"] .gd-track { background: rgba(15,17,21,.07); }
.gd-track i {
  display: block; height: 100%; width: 83%; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.gd-fill-note { margin-top: .6em; font-size: .82em; color: var(--text-dim); }
.gd-fill-cta {
  display: block; margin-top: .7em; padding: .55em; border-radius: .8em;
  border: 1px solid var(--border); text-align: center;
  font-size: .82em; font-weight: 600; color: var(--text);
}
@keyframes gd-chip-1 {
  0%, 23% { background-image: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-color: transparent }
  24%, 100% { background-image: none; color: var(--text-dim); border-color: var(--border) }
}
@keyframes gd-chip-2 {
  0%, 23% { background-image: none; color: var(--text-dim); border-color: var(--border) }
  24%, 48% { background-image: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-color: transparent }
  49%, 100% { background-image: none; color: var(--text-dim); border-color: var(--border) }
}
@keyframes gd-chip-3 {
  0%, 48% { background-image: none; color: var(--text-dim); border-color: var(--border) }
  49%, 73% { background-image: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-color: transparent }
  74%, 100% { background-image: none; color: var(--text-dim); border-color: var(--border) }
}
@keyframes gd-chip-4 {
  0%, 73% { background-image: none; color: var(--text-dim); border-color: var(--border) }
  74%, 100% { background-image: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-color: transparent }
}
@keyframes gd-rib-a {
  0%, 24% { transform: none }
  30%, 49% { transform: translateY(-1.6em) }
  55%, 74% { transform: translateY(-3.2em) }
  80%, 100% { transform: translateY(-4.8em) }
}
@keyframes gd-rib-b {
  0%, 25% { transform: none }
  32%, 50% { transform: translateY(-1.6em) }
  57%, 75% { transform: translateY(-3.2em) }
  82%, 100% { transform: translateY(-4.8em) }
}
@keyframes gd-delta-a {
  0%, 24% { transform: none }
  30%, 49% { transform: translateY(-1.3em) }
  55%, 74% { transform: translateY(-2.6em) }
  80%, 100% { transform: translateY(-3.9em) }
}
@keyframes gd-delta-b {
  0%, 25% { transform: none }
  32%, 50% { transform: translateY(-1.3em) }
  57%, 75% { transform: translateY(-2.6em) }
  82%, 100% { transform: translateY(-3.9em) }
}

/* ════════ сцена 5: экран «Реферальная программа» (общие часы 15 с) ════════ */
/* Разметка, подписи и цвета сняты с _referral_body.html и style.css: те же три
   числа, та же полоса до VIP, то же поле со ссылкой и тот же ряд кнопок.
   Движение показывает только то, что экран делает на самом деле: пришла
   регистрация — подросло «перешли», пришла оплата — «оплатили», полоса и
   начисленные дни; «Копировать» на секунду становится «Скопировано», ровно
   как в copyLink(). Ничего не летает и не появляется из воздуха. */
.gd-ref { padding: .9em; }
.gd-ref-h1 { font-size: 1.2em; font-weight: 700; margin-bottom: .6em; }
.gd-ref-card { padding: .85em; border-radius: 1em; background: var(--card-bg); border: 1px solid var(--border); }
.gd-ref-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.gd-ref-head b { font-size: 1.02em; }
.gd-ref-head span { font-size: .85em; color: var(--text-dim); }
.gd-ref-nums { display: flex; gap: .45em; margin-top: .75em; }
.gd-ref-num {
  flex: 1; min-width: 0; text-align: center; padding: .6em .25em; border-radius: .7em;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .gd-ref-num { background: rgba(15,17,21,.04); border-color: rgba(15,17,21,.08); }
.gd-ref-num .gd-num { text-align: center; }
.gd-ref-num em { display: block; font-size: .8em; color: var(--text-dim); margin-top: .2em; }
.gd-ref-bar { height: .5em; margin-top: .8em; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
[data-theme="light"] .gd-ref-bar { background: rgba(15,17,21,.08); }
.gd-ref-bar i {
  display: block; height: 100%; width: 6%; border-radius: 99px;
  background: linear-gradient(90deg, #7c5cff, #c084fc);
  animation: gd-ref-bar 15s cubic-bezier(.3,.8,.3,1) infinite;
}
.gd-ref-note { font-size: .82em; line-height: 1.45; color: var(--text-dim); margin-top: .5em; }
.gd-ref-note b { color: var(--text); }
/* Число внутри строки: окно высотой в строку, лента значений уезжает вверх
   ровно на эту же высоту — цифра не выпадает из текста. */
.gd-ref-days { display: inline-block; height: 1.45em; overflow: hidden; vertical-align: -.35em; }
.gd-ref-days i { display: block; height: 1.45em; line-height: 1.45em; }
.gd-ref-days > span { display: block; animation: gd-ref-days 15s cubic-bezier(.3,.8,.3,1) infinite; }
.gd-ref-link {
  margin-top: .8em; padding: .6em .7em; border-radius: .7em; font-size: .82em; color: var(--text-dim);
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
[data-theme="light"] .gd-ref-link { background: rgba(15,17,21,.03); }
.gd-ref-acts { display: flex; gap: .45em; margin-top: .5em; }
.gd-ref-acts > span {
  flex: 1; min-width: 0; text-align: center; padding: .6em .2em; border-radius: 999px;
  font-size: .85em; font-weight: 600; color: var(--text); border: 1px solid var(--border);
}
.gd-ref-acts .gd-ref-qr { flex: 0 0 2.8em; font-size: 1em; }
.gd-ref-copy { animation: gd-ref-copy 15s steps(1, end) infinite; }
.gd-swap { display: block; height: 1.4em; overflow: hidden; }
.gd-swap i { display: block; height: 1.4em; line-height: 1.4em; }
.gd-swap > span { display: block; animation: gd-swap 15s steps(1, end) infinite; }
.gd-ref-num .gd-num > span { display: block; animation: gd-ref-n1 15s cubic-bezier(.3,.8,.3,1) infinite; }
.gd-ref-num:nth-child(2) .gd-num > span { animation-name: gd-ref-n2; }
.gd-ref-num:nth-child(3) .gd-num > span { animation-name: gd-ref-n3; }
@keyframes gd-ref-n1 { 0%, 18% { transform: none } 26%, 100% { transform: translateY(-1.6em) } }
@keyframes gd-ref-n2 { 0%, 36% { transform: none } 44%, 100% { transform: translateY(-1.6em) } }
@keyframes gd-ref-n3 { 0%, 56% { transform: none } 64%, 100% { transform: translateY(-1.6em) } }
@keyframes gd-ref-bar { 0%, 56% { width: 6% } 64%, 100% { width: 10% } }
@keyframes gd-ref-days { 0%, 58% { transform: none } 66%, 100% { transform: translateY(-1.45em) } }
@keyframes gd-ref-copy {
  0%, 78% { border-color: var(--border) }
  80%, 92% { border-color: rgba(85,239,196,.5) }
  94%, 100% { border-color: var(--border) }
}
@keyframes gd-swap { 0%, 78% { transform: none } 80%, 92% { transform: translateY(-1.4em) } 94%, 100% { transform: none } }

/* ════════ сцена 6: оформление подарка диалогом (общие часы 17 с) ════════ */
/* Это экран /gift в режиме «💬 В режиме чата»: те же вкладки, то же окно
   диалога, те же реплики из STEPS в gift.html и тот же курсор «печатает».
   Пузыри ответа — бирюзовые, как в .gift-wiz-me, а не фирменным градиентом. */
.gd-gift { padding: .8em; }
.gd-gift-h1 { font-size: 1.2em; font-weight: 700; margin-bottom: .6em; }
.gd-gift-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; margin-bottom: .7em; }
.gd-gift-tabs span {
  text-align: center; padding: .6em .2em; border-radius: 999px; font-size: .85em; font-weight: 600;
  color: var(--text-dim); border: 1px solid var(--border);
}
.gd-gift-tabs .on { color: var(--text); border-color: var(--accent2); background: rgba(0,206,201,.1); }
.gd-glog {
  height: 15em; padding: .7em; border-radius: .9em; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: rgba(0,0,0,.14); border: 1px solid var(--border);
}
.gd-glog .gd-usr { background: rgba(0,206,201,.16); color: var(--text); }
/* Курсор «печатает» живёт только до ответа человека, как в gift.html, где
   say() снимает класс сразу после допечатывания. Мигание и срок жизни —
   на разных элементах: два правила на одно свойство гасят друг друга. */
.gd-type { display: inline-block; opacity: 0; animation: gd-t1 17s steps(1, end) infinite; }
.gd-type:after { content: "▌"; margin-left: .1em; animation: gd-gcaret .9s steps(1) infinite; }
.gd-t2 { animation-name: gd-t2; }
@keyframes gd-t1 { 0%, 5% { opacity: 0 } 6%, 16% { opacity: 1 } 17%, 100% { opacity: 0 } }
@keyframes gd-t2 { 0%, 23% { opacity: 0 } 24%, 34% { opacity: 1 } 35%, 100% { opacity: 0 } }
.gd-gift-acts { display: grid; gap: .45em; margin-top: .6em; opacity: 0; animation: gd-gift-acts 17s ease infinite; }
.gd-gift-acts span {
  text-align: center; padding: .62em .2em; border-radius: 999px; font-size: .85em; font-weight: 600;
  color: var(--text); border: 1px solid var(--border);
}
.gd-g1 { animation: gd-g1 17s ease infinite; }
.gd-g2 { animation: gd-g2 17s ease infinite; }
.gd-g3 { animation: gd-g3 17s ease infinite; }
.gd-g4 { animation: gd-g4 17s ease infinite; }
.gd-g5 { animation: gd-g5 17s ease infinite; }
.gd-g6 { animation: gd-g6 17s ease infinite; }
.gd-g7 { animation: gd-g7 17s ease infinite; }
@keyframes gd-gcaret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes gd-g1 { 0%, 6% { max-height: 0; opacity: 0 } 9%, 100% { max-height: 8em; opacity: 1 } }
@keyframes gd-g2 { 0%, 17% { max-height: 0; opacity: 0 } 20%, 100% { max-height: 8em; opacity: 1 } }
@keyframes gd-g3 { 0%, 24% { max-height: 0; opacity: 0 } 27%, 100% { max-height: 8em; opacity: 1 } }
@keyframes gd-g4 { 0%, 35% { max-height: 0; opacity: 0 } 38%, 100% { max-height: 8em; opacity: 1 } }
@keyframes gd-g5 { 0%, 45% { max-height: 0; opacity: 0 } 48%, 100% { max-height: 8em; opacity: 1 } }
/* «Жду подтверждение оплаты…» живёт, пока не пришёл ответ банка, и уходит
   ровно под реплику «Всё оплачено» — так же, как waiting.remove(). */
@keyframes gd-g6 {
  0%, 57% { max-height: 0; opacity: 0 }
  60%, 73% { max-height: 8em; opacity: 1 }
  75%, 100% { max-height: 0; opacity: 0 }
}
@keyframes gd-g7 { 0%, 76% { max-height: 0; opacity: 0 } 79%, 100% { max-height: 8em; opacity: 1 } }
@keyframes gd-gift-acts { 0%, 81% { opacity: 0 } 85%, 100% { opacity: 1 } }

/* ——— финальный блок ——— */
.gd-end {
  margin: 32px 0 40px; padding: 24px 18px; border-radius: var(--shell-radius); text-align: center;
  background: var(--shell-bg); border: 1px solid var(--shell-border);
}
.gd-end h2 { font-size: 21px; margin: 0 0 8px; }
.gd-end p { color: var(--text-dim); font-size: 14.5px; line-height: 1.5; margin: 0 0 16px; }
.gd-end-btns { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 0 auto; }

/* Телефон — основной экран этой страницы: на нём и выбирают раздел, и читают.
   Поэтому мелочь уменьшаем, а не растим: заголовки короче, отступы меньше,
   полоска разделов липнет мягче и прилипает к выбранной метке. */
@media (max-width: 430px) {
  .gd-hero { padding: 18px 0 6px; }
  .gd-hero h1 { font-size: 25px; }
  .gd-hero p { font-size: 14px; }
  .gd-hero-badge { margin-top: 12px; padding: 7px 13px; font-size: 12px; }
  .gd-toc { margin: 14px -4px 4px; gap: 6px; }
  .gd-toc a { padding: 7px 12px; font-size: 12.5px; }
  .gd-sec { padding: 24px 0 4px; margin-top: 20px; }
  .gd-sec h2 { font-size: 20px; }
  .gd-sec-lead { font-size: 14px; margin-bottom: 14px; }
  .gd-list li { font-size: 14px; grid-template-columns: 1.4em 1fr; gap: 8px; }
  .gd-list li small { font-size: 12.5px; }
  .gd-tip { font-size: 13px; padding: 11px 12px; }
  .gd-shots { gap: 14px; }
  .gd-shot figure { border-radius: 16px; }
  .gd-end { margin: 24px 0 32px; padding: 20px 14px; }
  .gd-end h2 { font-size: 19px; }
}

@media (min-width: 720px) {
  .gd-hero h1 { font-size: 38px; }
  .gd-sec h2 { font-size: 26px; }
  .gd-end-btns { flex-direction: row; max-width: 520px; }
}
/* Кому движение мешает — страница остаётся читаемой и без него */
@media (prefers-reduced-motion: reduce) {
  .gd-demo * { animation: none !important; }
  .gd-row, .gd-book-row, .gd-book-ok, .gd-gift-acts { max-height: none; opacity: 1; }
  .gd-ref-bar i { width: 10%; }
  .gd-book, .gd-sheet { transform: none; }
  .gd-typing { display: none; }
  /* Без анимации ленты стоят на первом значении — это период «Сегодня»,
     значит и подсвечена должна быть его кнопка, а не стандартная «7 дней». */
  .gd-chip-1 { background-image: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-color: transparent; }
}

/* ════════ Тематические страницы про визитки ════════
   Разделы, снимки и полоска оглавления берутся у гайда без изменений — ниже
   только то, чего в гайде нет: проза, таблицы, ролик и ссылки на соседей.
   Абзацы помечены классом намеренно: правило вида «.gd-sec p» с той же силой
   перебило бы «.gd-demo p { margin: 0 }» и развалило бы сцены в гайде. */
.gd-sec h3 { font-size: 17px; line-height: 1.25; margin: 22px 0 8px; }
.gd-p { font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; color: var(--text); }
.gd-p a, .gd-list a, .gd-tip a { color: var(--accent2); }

.gd-crumbs { font-size: 12.5px; color: var(--text-dim); margin: 14px 0 0; }
.gd-crumbs a { color: var(--text-dim); }

/* Таблица на телефоне раскладывается в карточки: при шести колонках шрифт
   уезжает до нечитаемого, а боковая прокрутка внутри страницы путает с жестом
   «назад». Подпись колонки приезжает из data-th. */
.gd-table { margin: 0 0 20px; }
.gd-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gd-table th, .gd-table td { padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.45; }
.gd-table thead th {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim); border-bottom: 1px solid var(--border); font-weight: 700;
}
.gd-table tbody tr { border-bottom: 1px solid var(--border); }
.gd-table tbody tr:last-child { border-bottom: 0; }
.gd-table td b { font-weight: 700; }
@media (max-width: 599px) {
  .gd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gd-table tbody tr {
    display: block; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: 14px; background: rgba(255,255,255,.03);
  }
  [data-theme="light"] .gd-table tbody tr { background: rgba(15,17,21,.02); }
  .gd-table tbody td { display: flex; gap: 10px; padding: 3px 0; font-size: 13.5px; }
  .gd-table tbody td::before { content: attr(data-th); flex: none; width: 8.5em; color: var(--text-dim); font-size: 12.5px; }
  .gd-table tbody td:first-child { font-weight: 700; padding-bottom: 7px; }
  .gd-table tbody td:first-child::before { display: none; }
}

/* Ролик — настоящая запись экрана телефона, поэтому держим его в размерах
   телефона: растянутый на весь столбец он выглядит как ошибка вёрстки. */
.gd-vid { margin: 4px auto 22px; max-width: 300px; }
.gd-vid video {
  display: block; width: 100%; height: auto; border-radius: 22px;
  border: 1px solid var(--border); background: var(--card-bg);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
[data-theme="light"] .gd-vid video { box-shadow: 0 14px 34px rgba(15,17,21,.12); }
.gd-vid figcaption { font-size: 12.5px; line-height: 1.45; color: var(--text-dim); margin-top: 10px; text-align: center; }

/* Без ссылок на соседние страницы каждая из них остаётся тупиком — и для
   человека, и для робота, которому иначе неоткуда узнать об остальных. */
.gd-more { display: grid; gap: 10px; margin: 6px 0 0; }
.gd-more a {
  display: block; padding: 14px 16px; border-radius: 16px; text-decoration: none;
  background: var(--card-bg); border: 1px solid var(--border); color: var(--text);
}
.gd-more b { display: block; font-size: 15px; margin-bottom: 3px; }
.gd-more span { font-size: 13px; line-height: 1.45; color: var(--text-dim); }
@media (min-width: 720px) { .gd-more { grid-template-columns: 1fr 1fr; } }