/* ===== Лендинг «Рассылки и автоматизации»: постраничные стили ===== */

/* Декоративная зелень (листья/трава/терраса) по правой части hero:
   слой над голубым градиентом, но под текстом и скриншотом. Левая часть
   картинки прозрачная, поэтому текст слева остаётся на чистом фоне. */
.hero-panel--sky::after{content:"";position:absolute;inset:0;background:url('/img/lp/mailings/hero-bg.webp') right center/auto 100% no-repeat;pointer-events:none;z-index:0}
.hero-panel--sky>div{position:relative;z-index:1}
/* Колонке с иллюстрацией даём больше места; картинка тянется до правого края
   панели (гасим правый паддинг отрицательным margin), чтобы выглядеть крупнее. */
.hero-panel--sky{grid-template-columns:1fr 1.75fr;gap:clamp(16px,2vw,32px)}
.hero-panel--sky>div:last-child{margin-right:calc(-1*clamp(28px,4.5vw,64px));margin-top:calc(-1*clamp(28px,4.5vw,64px));margin-bottom:calc(-1*clamp(28px,4.5vw,64px))}
@media(max-width:960px){.hero-panel--sky{grid-template-columns:1fr}.hero-panel--sky>div:last-child{margin:0}}
/* Планшет (641–960): hero одноколоночный, но скриншот ещё показан — зелень
   мешала бы, прячем. На телефоне (≤640) скриншот скрыт, поэтому зелень
   возвращаем во всю высоту блока по правому краю (как на десктопе). */
@media(max-width:960px){.hero-panel--sky::after{display:none}}
@media(max-width:640px){.hero-panel--sky::after{display:block;background-position:calc(100% + 96px) bottom;background-size:auto 100%;opacity:1}}
@media(max-width:640px){.hero+.keep{padding-top:40px}}

/* ===== Hero-визуал: телефон (картинка) + стеклянные карточки цепочки на CSS ===== */
.hero-viz{position:relative;min-height:clamp(360px,32vw,520px);display:flex;align-items:center}
/* Телефон — справа, слегка выходит за край, под карточками */
.hv-phone{position:absolute;right:-36%;top:50%;transform:translateY(-50%) rotate(1deg);
  width:56%;max-width:420px;height:auto;z-index:1;
  filter:drop-shadow(0 34px 60px rgba(20,30,60,.34)) drop-shadow(0 10px 22px rgba(20,30,60,.18))}
/* Стопка карточек — ровным списком, правыми концами поверх телефона, слегка сдвинута вправо */
.hv-cards{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;gap:12px;
  margin-left:8%;transform:scale(.8);transform-origin:left center}
.hv-card{display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:18px;width:90%;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 14px 34px -14px rgba(20,30,60,.4),inset 0 1px 0 rgba(255,255,255,.55)}
/* Шаг 2 — немного шире, выделен синей обводкой (этот блок «доставлен» на телефон) */
.hv-card:nth-child(2){width:98%;border:2px solid #2b6fff;
  box-shadow:0 14px 34px -14px rgba(43,111,255,.5),0 0 0 4px rgba(43,111,255,.12),inset 0 1px 0 rgba(255,255,255,.55)}
.hv-card:nth-child(2) .hv-num{background:#2b6fff;border-color:#2b6fff;color:#fff}
.hv-num{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:2px solid #2b6fff;
  color:#2b6fff;font-weight:700;font-size:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.55)}
.hv-body{flex:1 1 auto;min-width:0}
.hv-title{font-weight:700;color:#1a2233;font-size:14.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-sub{color:#6b7385;font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-tags{flex:0 0 auto;display:flex;gap:6px}
.hv-tag{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:8px;white-space:nowrap}
.hv-tag--msg{background:#ffe3d2;color:#c25a1f}
.hv-tag--sms{background:#d6f2df;color:#1f8a48}
.hv-tag--pay{background:#fdeec2;color:#a1780c}
.hv-tag--int{background:#dae7ff;color:#2b6fff}
.hv-toggle{flex:0 0 auto;width:40px;height:23px;border-radius:999px;background:#34c759;position:relative;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.hv-toggle::after{content:"";position:absolute;top:2px;right:2px;width:19px;height:19px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
/* Сигнальные волны: расходятся вправо от шага 2 к телефону, затухая в прозрачность */
.hv-waves{position:absolute;z-index:3;pointer-events:none;left:85.5%;top:38%;
  width:96px;height:200px;transform:translateY(-50%);overflow:hidden}
.hv-waves i{position:absolute;left:0;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;
  border-radius:50%;border:3px solid #2b6fff;opacity:0;
  animation:hv-wave 2.6s cubic-bezier(.22,.61,.36,1) infinite}
.hv-waves i:nth-child(2){animation-delay:.87s}
.hv-waves i:nth-child(3){animation-delay:1.74s}
@keyframes hv-wave{
  0%{transform:scale(.12);opacity:.8}
  55%{opacity:.32}
  100%{transform:scale(1);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hv-waves i{animation:none}
  .hv-waves i:nth-child(1){transform:scale(.32);opacity:.55}
  .hv-waves i:nth-child(2){transform:scale(.62);opacity:.32}
  .hv-waves i:nth-child(3){transform:scale(.92);opacity:.14}
}
/* Планшет: композиция по центру и уже; телефон возвращаем в кадр, коннектор прячем */
@media(max-width:960px){
  .hero-viz{max-width:600px;margin:0 auto}
  .hv-phone{right:-8%;width:46%}
  .hv-waves{display:none}
}

/* Фото на весь блок доставки — без подложки/паддинга панели */
.pane--bare{padding:0;background:none;box-shadow:none}
.shot--fill{border-radius:var(--r-4);box-shadow:var(--shadow-lift)}

/* Макет карточки «История отправки» в блоке «Видно, что и когда ушло» */
.dh{background:var(--c-surface);border-radius:var(--r-3);box-shadow:var(--shadow-card);padding:22px 22px 18px;font-size:13px;color:var(--c-ink)}
.dh-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dh-head b{font-family:var(--f-head);font-size:17px;font-weight:600}
.dh-count{flex:none;font-size:11.5px;font-weight:700;color:var(--c-muted);background:var(--c-sand);border-radius:999px;padding:5px 12px}
.dh-date{margin:12px 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--c-muted);text-transform:uppercase;padding-bottom:12px;border-bottom:1px dashed var(--c-line)}
.dh-tl{position:relative;margin:8px 0 0;padding-left:26px}
.dh-tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--c-line)}
.dh-ev{position:relative;display:flex;align-items:flex-start;gap:8px;padding:9px 0}
.dh-dot{position:absolute;left:-26px;top:11px;width:14px;height:14px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 3px var(--c-surface)}
.dh-dot--o{background:var(--c-surface);border:2px solid var(--c-line)}
.dh-b{flex:1;line-height:1.4}
.dh-b b{font-weight:700}
.dh-step{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:var(--c-muted);background:var(--c-sand);border-radius:6px;padding:2px 7px;margin-right:6px;vertical-align:middle}
.dh-title{color:var(--c-muted)}
.dh-ic{display:inline-block;width:16px;height:16px;border-radius:50%;vertical-align:-3px;margin-right:5px;background-size:60%;background-position:center;background-repeat:no-repeat}
.dh-ic--tg{background-color:#2AABEE;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21.9 4.3 18.7 19.4c-.2 1-.9 1.3-1.7.8l-4.6-3.4-2.2 2.1c-.3.3-.5.5-1 .5l.3-4.8L18.3 6c.4-.3-.1-.5-.6-.2L5.9 13.1l-4.7-1.5c-1-.3-1-.9.2-1.4L20.6 3c.9-.3 1.6.2 1.3 1.3z'/%3E%3C/svg%3E")}
.dh-ic--wa{background-color:#25D366;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15l-1.3 4.8 4.9-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2s-1 .2-3.4-.9-3.8-3.6-3.9-3.8-1-1.3-1-2.5.6-1.8.9-2 .5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .5l-.4.5c-.2.2-.3.3-.1.6s.7 1.1 1.5 1.8c1 .9 1.8 1.1 2 1.2s.4.1.5-.1l.7-.8c.2-.2.3-.2.6-.1l1.9.9c.3.1.5.2.5.3z'/%3E%3C/svg%3E")}
.dh-t{flex:none;font-size:12px;font-weight:700;color:var(--c-muted)}
.dh-sub{margin:16px 0 2px;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--c-muted);text-transform:uppercase;padding-top:14px;border-top:1px dashed var(--c-line)}
.dh-when{flex:none;font-size:12px;font-weight:600;color:var(--c-muted)}
.dh-stop{display:block;width:100%;margin-top:16px;padding:13px;border:1px solid #f3c2c8;background:#fdeef0;color:#d43f52;font-family:var(--f-body);font-weight:700;font-size:13.5px;border-radius:12px;cursor:default}

/* Синие подчёркнутые ссылки на тёмной кросс-селл-плашке */
.darkband .db-link{color:#4d90ff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;transition:color .15s}
.darkband .db-link:hover{color:#7cb0ff}
/* Ссылка в описании — цвета текста, только подчёркнутая */
.darkband p .db-link{color:inherit;text-decoration-thickness:1px}
.darkband p .db-link:hover{color:#fff}

/* Ссылки в ответах FAQ */
.faq .faq-link{color:var(--c-accent);text-decoration:underline;text-underline-offset:2px}

/* Иллюстрация «Источники броней → новая бронь» (шаг 1).
   Внутренние размеры — в cqw (доля ширины контейнера), поэтому вся картинка
   масштабируется пропорционально на любой ширине и текст не вылезает. */
.src-flow{position:relative;container-type:inline-size;aspect-ratio:1000/620;max-width:540px;margin:0 auto}
.src-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.src-card{position:absolute;display:flex;align-items:center;gap:2.4cqw;background:#fff;border-radius:3.3cqw;padding:3cqw 3.3cqw;box-shadow:0 3.7cqw 8cqw -4.4cqw rgba(30,42,80,.55)}
.src-card--pms{left:3%;width:45.5%;top:6%;height:29%}
.src-card--mg{left:51.5%;width:45.5%;top:6%;height:29%}
.src-card--got{left:19%;width:62%;top:64%;height:32%}
.src-ic{position:relative;flex:none;width:8.5cqw;height:8.5cqw;border-radius:2.4cqw;display:grid;place-items:center}
.src-ic svg{width:4.4cqw;height:4.4cqw}
.src-logo{flex:none;width:9.3cqw;height:auto;display:block;filter:drop-shadow(0 1.1cqw 2.6cqw rgba(10,102,255,.28))}
.src-ic--v{background:#ece9fd;color:#5b46d6}
.src-ic--o{background:#ffe9d6;color:#c9631a}
.src-badge{position:absolute;top:-.5cqw;right:-.5cqw;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--c-warm);border:.46cqw solid #fff}
.src-tx{min-width:0}
.src-tx b{display:block;font-size:2.87cqw;font-weight:700;color:var(--c-ink);line-height:1.25}
.src-tx small{display:block;margin-top:.55cqw;font-size:2.31cqw;color:var(--c-muted);line-height:1.3}
.src-skel{display:block;height:1.48cqw;border-radius:.9cqw;background:#eceef3;margin-top:1.7cqw}
.src-skel:not(.src-skel--sm){width:74%}
.src-skel--sm{width:50%}

/* На телефонах скрываем hero-визуал (только этот лендинг) */
@media(max-width:640px){.hero-panel--sky>div:last-child{display:none}}

/* Тёмная панель «сценарий гостя»: лента событий брони */
.keep-visual--flow{background:radial-gradient(560px circle at 16% 10%, rgba(10,102,255,.25), transparent 55%),radial-gradient(520px circle at 90% 92%, rgba(255,106,0,.22), transparent 55%),linear-gradient(150deg,#1d2433,#0e1220);display:flex;align-items:center;justify-content:center}
.flowline{display:flex;flex-direction:column;gap:0;padding:34px 26px}
.fl-item{display:flex;gap:14px;align-items:flex-start}
.fl-dot{flex:none;width:34px;display:flex;flex-direction:column;align-items:center;align-self:stretch}
.fl-dot i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:15px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}
.fl-dot::after{content:"";flex:1;width:2px;background:rgba(255,255,255,.18);margin:4px 0}
.fl-item:last-child .fl-dot::after{display:none}
.fl-tx{padding-bottom:22px;min-width:0}
.fl-tx b{display:block;color:#fff;font-size:14px;margin-bottom:3px}
.fl-tx small{display:block;color:rgba(255,255,255,.65);font-size:12.5px;line-height:1.45}
.fl-tag{display:inline-block;margin-top:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:4px 12px;font-weight:700;font-size:11px}

/* Цена: крупная плашка по образцу price-free */
.price-hero{max-width:860px;margin:0 auto;background:linear-gradient(135deg,var(--c-sand),var(--c-warm-soft));border-radius:var(--r-4);padding:clamp(28px,3vw,40px) clamp(28px,4vw,48px);display:flex;align-items:center;gap:clamp(24px,4vw,44px);text-align:left}
.price-hero b{flex:none;font-family:var(--f-head);font-weight:600;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.02em;line-height:1.1}
.price-hero b small{display:block;font-family:var(--f-body);font-weight:700;font-size:14px;color:var(--c-muted);margin-top:6px;letter-spacing:0}
.price-hero p{color:var(--c-ink-2);font-size:16px;margin:0;line-height:1.5;padding-left:clamp(24px,4vw,44px);border-left:1px solid var(--c-line-strong)}
@media(max-width:640px){.price-hero{flex-direction:column;text-align:center}.price-hero p{border-left:none;padding-left:0}}
.price-checks{justify-content:center;margin-top:26px}