/* Capybaravoice — дизайн-система (по хендоффу дизайнера). Токены + компоненты,
   светлая и тёмная тема. Единая для лендинга и кабинета. Без внешних CDN.
   Шрифты подключаются отдельно (fonts.css). */

:root{
  --rv-primary:#4B3FE4; --rv-primary-700:#3A2FC0; --rv-primary-50:#ECEAFD;
  --rv-accent:#12B39A;  --rv-accent-50:#E2F7F2;
  --rv-success:#12A150; --rv-success-50:#E4F6EB; --rv-success-ink:#0B7A3B;
  --rv-warning:#B26A00; --rv-warning-50:#FDF1DC; --rv-warning-ink:#8A5200;
  --rv-danger:#D42A38;  --rv-danger-50:#FCE9EA;  --rv-danger-ink:#A81C29;
  --rv-info:#1D74D6;    --rv-info-50:#E6F0FC;    --rv-info-ink:#12508F;
  --rv-ink-900:#0B0F1A; --rv-ink-700:#1C2333; --rv-ink-500:#4A5468;
  --rv-ink-400:#6B7689; --rv-ink-300:#9AA3B4;
  --rv-line:#E3E7EF; --rv-line-strong:#CDD4E1; --rv-surface:#FFFFFF; --rv-bg:#F5F7FB;
  --rv-font:'Golos Text',system-ui,sans-serif; --rv-font-display:'Manrope',sans-serif;
  --rv-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --rv-fs-xs:12px; --rv-fs-sm:13px; --rv-fs-base:15px; --rv-fs-md:17px;
  --rv-fs-lg:20px; --rv-fs-xl:26px; --rv-fs-2xl:34px; --rv-fs-3xl:44px; --rv-fs-4xl:60px;
  --rv-r-sm:6px; --rv-r-md:10px; --rv-r-lg:16px; --rv-r-pill:999px;
  --rv-sh-1:0 1px 2px rgba(11,15,26,.06);
  --rv-sh-2:0 4px 14px rgba(11,15,26,.09);
  --rv-sh-3:0 16px 40px rgba(11,15,26,.16);
  --rv-focus:0 0 0 3px rgba(75,63,228,.32);
  /* сайдбар кабинета — всегда тёмный (оболочка Ш1) */
  --rv-side-bg:#0E1526; --rv-side-line:rgba(255,255,255,.08);
  --rv-side-text:rgba(255,255,255,.72); --rv-side-muted:rgba(255,255,255,.42);
}
:root[data-theme="dark"]{
  --rv-primary:#7C6FFF; --rv-primary-700:#9A90FF; --rv-primary-50:#1E2140;
  --rv-accent:#2ED3B7; --rv-accent-50:#10312C;
  --rv-success-50:#0F2A1B; --rv-success-ink:#5FD68F;
  --rv-warning-50:#2E2312; --rv-warning-ink:#E5A83D;
  --rv-danger-50:#33161A; --rv-danger-ink:#FF8A93;
  --rv-info-50:#122239; --rv-info-ink:#78B4F5;
  --rv-ink-900:#E7EBF3; --rv-ink-700:#C7CEDC; --rv-ink-500:#98A2B5;
  --rv-ink-400:#7C879B; --rv-ink-300:#5C6779;
  --rv-line:#232C3D; --rv-line-strong:#33405A; --rv-surface:#131A28; --rv-bg:#0B0F1A;
  --rv-side-bg:#0A0E18;
  --rv-sh-1:0 1px 2px rgba(0,0,0,.4); --rv-sh-2:0 4px 14px rgba(0,0,0,.5); --rv-sh-3:0 16px 40px rgba(0,0,0,.6);
}

/* --- База --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; font-family:var(--rv-font); font-size:var(--rv-fs-base); line-height:1.6;
  color:var(--rv-ink-700); background:var(--rv-bg); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--rv-font-display); color:var(--rv-ink-900); letter-spacing:-.025em; line-height:1.2; margin:0 0 .6em}
a{color:var(--rv-primary); text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1em}
code{font-family:var(--rv-font-mono); font-size:.9em; background:var(--rv-primary-50); color:var(--rv-primary-700); padding:.1em .4em; border-radius:var(--rv-r-sm)}
pre{font-family:var(--rv-font-mono); font-size:13px; line-height:1.7; background:var(--rv-ink-900); color:#C7CEDC; padding:16px 18px; border-radius:var(--rv-r-md); overflow-x:auto; margin:.6rem 0}
pre code{background:none; color:inherit; padding:0}
.muted{color:var(--rv-ink-400)}
:focus-visible{outline:none; box-shadow:var(--rv-focus); border-radius:var(--rv-r-sm)}
hr{border:0; border-top:1px solid var(--rv-line); margin:1.4rem 0}

/* --- Кнопки --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:44px; padding:0 20px; font-family:var(--rv-font); font-size:15px; font-weight:600;
  border-radius:var(--rv-r-md); border:1px solid transparent; cursor:pointer;
  background:var(--rv-surface); color:var(--rv-ink-700); line-height:1; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--rv-primary); color:#fff; border-color:var(--rv-primary)}
.btn-primary:hover{background:var(--rv-primary-700); border-color:var(--rv-primary-700); color:#fff}
.btn-primary:disabled,.btn-primary[disabled]{background:#B6B1F0; border-color:#B6B1F0; cursor:not-allowed}
.btn-secondary,.btn:not([class*="btn-"]){background:var(--rv-surface); border-color:var(--rv-line-strong); color:var(--rv-ink-700)}
.btn-secondary:hover,.btn:not([class*="btn-"]):hover{background:var(--rv-bg); border-color:var(--rv-ink-300)}
.btn-soft{background:var(--rv-primary-50); color:var(--rv-primary-700); border-color:transparent}
.btn-soft:hover{background:var(--rv-primary-50); filter:brightness(.97)}
.btn-ghost{background:transparent; border-color:transparent; color:var(--rv-ink-500)}
.btn-ghost:hover{background:var(--rv-bg); color:var(--rv-ink-700)}
.btn-danger{background:var(--rv-danger); color:#fff; border-color:var(--rv-danger)}
.btn-danger:hover{filter:brightness(.94); color:#fff}
.btn-accent{background:var(--rv-accent); color:#fff; border-color:var(--rv-accent)}
.btn-accent:hover{filter:brightness(.94); color:#fff}
.btn-sm{height:32px; padding:0 12px; font-size:13px; border-radius:8px; gap:.35rem}
.btn-lg{height:54px; padding:0 28px; font-size:17px; border-radius:12px}
.btn-block{width:100%}
.btn svg{width:16px; height:16px}
.btn-disabled,.btn[disabled]{opacity:.6; cursor:not-allowed}
@media (max-width:576px){ .btn-sm{height:40px; font-size:14px} }

/* Ссылка-кнопка (например, «Выйти» формой) */
.link{background:none; border:0; color:var(--rv-primary); cursor:pointer; font:inherit; padding:0}

/* --- Поля --- */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),
select, textarea{
  height:44px; padding:0 13px; font-family:var(--rv-font); font-size:15px; color:var(--rv-ink-700);
  background:var(--rv-surface); border:1px solid var(--rv-line-strong); border-radius:var(--rv-r-md);
  max-width:100%; transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{height:auto; min-height:88px; padding:11px 13px; line-height:1.55; resize:vertical; width:100%}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--rv-primary); box-shadow:var(--rv-focus)}
input:disabled, select:disabled, textarea:disabled{background:var(--rv-bg); border-color:var(--rv-line); color:var(--rv-ink-300)}
input::placeholder, textarea::placeholder{color:var(--rv-ink-300)}
select{appearance:none; -webkit-appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236B7689' stroke-width='2.2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center}
label{font-size:.9rem}
.check{display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; margin:0; cursor:pointer}
.check input{width:auto; height:auto}
.price-input{width:7rem; font-family:var(--rv-font-mono)}
.form-grid{display:grid; gap:.8rem; margin-bottom:1.2rem}
@media (min-width:768px){.form-grid{grid-template-columns:1fr 1fr 1fr auto; align-items:end}}
.form-grid label{display:grid; gap:.3rem}
.prompts-form{max-width:760px}
.prompts-form>label{display:block; margin-bottom:1rem; font-weight:500}
.prompts-form>label>input,.prompts-form>label>select,.prompts-form>label>textarea{display:block; width:100%; margin-top:.3rem; font-weight:400}

/* Инлайновые группы форм и кнопок */
.row{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:0 0 1rem}
.inline{display:inline-block; margin:0}
/* Кнопки действий строки — столбиком: «Сохранить» над «Выкл» над «Удалить».
   В строку они разъезжались по ширине и на узком экране рвали таблицу. */
.stack{display:flex; flex-direction:column; gap:.4rem; align-items:stretch}
.stack form{margin:0}
.stack .btn{width:100%; justify-content:center}
/* Поля внутри таблицы: без общей min-height, высота — по содержимому (rv.js). */
td textarea{min-height:0; font-size:14px}
td textarea[data-autosize]{overflow:hidden}
.scroll-x{overflow-x:auto}

/* --- Карточки --- */
.card{background:var(--rv-surface); border:1px solid var(--rv-line); border-radius:var(--rv-r-lg); padding:20px 22px; box-shadow:var(--rv-sh-1); margin-bottom:1.4rem}
.card h2{margin-top:0}

/* --- Алерты (и старые flash) --- */
.alert,.flash{border-radius:12px; padding:13px 15px; margin-bottom:1rem; font-size:14px; border:1px solid transparent}
.alert-success,.flash-ok{background:var(--rv-success-50); border-color:var(--rv-success); color:var(--rv-success-ink)}
.alert-danger,.flash-err{background:var(--rv-danger-50); border-color:var(--rv-danger); color:var(--rv-danger-ink)}
.alert-warning{background:var(--rv-warning-50); border-color:var(--rv-warning); color:var(--rv-warning-ink)}
.alert-info{background:var(--rv-info-50); border-color:var(--rv-info); color:var(--rv-info-ink)}

/* --- Бейджи-статусы --- */
.badge{display:inline-flex; align-items:center; gap:.35rem; font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:var(--rv-r-pill); background:#F0F3F8; color:var(--rv-ink-500)}
.badge-success{background:var(--rv-success-50); color:var(--rv-success-ink)}
.badge-info{background:var(--rv-info-50); color:var(--rv-info-ink)}
.badge-warning{background:var(--rv-warning-50); color:var(--rv-warning-ink)}
.badge-danger{background:var(--rv-danger-50); color:var(--rv-danger-ink)}
.badge-primary{background:var(--rv-primary-50); color:var(--rv-primary-700)}
.badge .dot{width:6px; height:6px; border-radius:50%; background:currentColor}

/* --- Таблицы --- */
.table{width:100%; border-collapse:collapse; font-size:14px}
.table thead th{background:var(--rv-bg); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--rv-ink-400); text-align:left; padding:11px 16px; white-space:nowrap}
.table tbody td{padding:13px 16px; border-top:1px solid var(--rv-line)}
.table tbody tr:nth-child(even){background:color-mix(in srgb, var(--rv-bg) 45%, transparent)}
.table td.num,.table td.mono{font-family:var(--rv-font-mono)}
tr.inactive{opacity:.5}
.table a{font-weight:500}

/* --- KPI-плитки (наши .trust/.billing-stats) --- */
.trust,.billing-stats,.kpi-grid{display:grid; gap:1rem; margin:0 0 1.4rem; grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.trust>div,.billing-stats>div,.kpi{background:var(--rv-surface); border:1px solid var(--rv-line); border-radius:var(--rv-r-lg); padding:16px 18px; box-shadow:var(--rv-sh-1)}
.trust b,.billing-stats b,.kpi b{display:block; font-family:var(--rv-font-display); font-size:32px; font-weight:800; color:var(--rv-ink-900); letter-spacing:-.02em; line-height:1.1}
.trust span,.billing-stats span,.kpi span{color:var(--rv-ink-400); font-size:13px}

/* --- Простые CSS-графики для дашборда --- */
.rv-bars{display:flex; align-items:flex-end; gap:8px; height:180px; padding-top:10px}
.rv-bars .bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; min-width:0}
.rv-bars .bar i{display:block; border-radius:4px 4px 0 0; background:var(--rv-primary)}
.rv-bars .bar i.b2{background:var(--rv-primary-50)}
.rv-bars .bar small{display:block; text-align:center; font-size:11px; color:var(--rv-ink-300); margin-top:6px; white-space:nowrap}
.rv-funnel{display:grid; gap:8px}
.rv-funnel .step{display:flex; align-items:center; gap:12px}
.rv-funnel .step i{height:34px; border-radius:8px; background:var(--rv-primary); display:flex; align-items:center; padding:0 12px; color:#fff; font-weight:600; font-size:13px; min-width:60px}
.rv-progress{height:8px; border-radius:999px; background:var(--rv-line); overflow:hidden}
.rv-progress i{display:block; height:100%; background:var(--rv-primary); border-radius:999px}

/* --- Оболочка кабинета (Ш1: тёмный сайдбар) --- */
.rv-app{display:grid; grid-template-columns:248px 1fr; min-height:100vh}
.rv-sidebar{background:var(--rv-side-bg); color:var(--rv-side-text); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto}
.rv-brand{display:flex; align-items:center; gap:10px; padding:20px 22px; color:#fff; font-family:var(--rv-font-display); font-weight:800; font-size:19px}
.rv-brand:hover{text-decoration:none; color:#fff}
.rv-nav{list-style:none; margin:0; padding:6px 12px 20px; flex:1}
.rv-nav .grp{padding:16px 10px 6px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--rv-side-muted)}
.rv-nav a{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--rv-r-md); color:var(--rv-side-text); font-size:14.5px; font-weight:500; margin-bottom:2px}
.rv-nav a:hover{background:rgba(255,255,255,.06); color:#fff; text-decoration:none}
.rv-nav a.active{background:var(--rv-primary); color:#fff}
.rv-nav a svg{width:18px; height:18px; opacity:.9}
.rv-side-foot{padding:12px 18px 18px; border-top:1px solid var(--rv-side-line)}
.rv-side-foot .lbl{font-size:12px; color:var(--rv-side-muted)}
.rv-side-foot .val{font-family:var(--rv-font-display); font-weight:700; color:#fff; font-size:18px}

.rv-main{display:flex; flex-direction:column; min-width:0}
.rv-topbar{height:62px; background:var(--rv-surface); border-bottom:1px solid var(--rv-line); display:flex; align-items:center; gap:12px; padding:0 22px; position:sticky; top:0; z-index:20}
.rv-topbar .sp{flex:1}
.rv-icon-btn{width:40px; height:40px; border-radius:var(--rv-r-md); border:1px solid transparent; background:transparent; color:var(--rv-ink-500); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.rv-icon-btn:hover{background:var(--rv-bg); color:var(--rv-ink-700)}
.rv-burger{display:none}
.rv-content{padding:26px 22px 40px; flex:1}
.rv-content h1{font-size:26px; margin:0 0 1.2rem}
.rv-content h2{font-size:19px; margin:1.8rem 0 .8rem}
.rv-footer{padding:16px 22px; border-top:1px solid var(--rv-line); color:var(--rv-ink-400); font-size:13px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.rv-menu{position:relative}
.rv-dropdown{position:absolute; right:0; top:calc(100% + 6px); background:var(--rv-surface); border:1px solid var(--rv-line); border-radius:var(--rv-r-md); box-shadow:var(--rv-sh-2); min-width:200px; padding:6px; display:none; z-index:30}
.rv-dropdown.open{display:block}
.rv-dropdown a,.rv-dropdown button{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:9px 10px; border-radius:8px; color:var(--rv-ink-700); background:none; border:0; font:inherit; cursor:pointer; font-size:14px}
.rv-dropdown a:hover,.rv-dropdown button:hover{background:var(--rv-bg); text-decoration:none}
.rv-dropdown .sep{height:1px; background:var(--rv-line); margin:5px 0}

.rv-backdrop{display:none}
@media (max-width:992px){
  .rv-app{grid-template-columns:1fr}
  .rv-sidebar{position:fixed; left:0; top:0; width:264px; z-index:60; transform:translateX(-100%); transition:transform .2s ease}
  .rv-app.nav-open .rv-sidebar{transform:none}
  .rv-app.nav-open .rv-backdrop{display:block; position:fixed; inset:0; background:rgba(11,15,26,.5); z-index:50}
  .rv-burger{display:inline-flex}
}

/* --- Публичная оболочка --- */
.container{max-width:1160px; margin:0 auto; padding:0 20px}
.topbar{border-bottom:1px solid var(--rv-line); background:var(--rv-surface); position:sticky; top:0; z-index:20}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; height:62px; max-width:1160px; margin:0 auto; padding:0 20px}
.topbar nav{display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--rv-font-display); font-weight:800; font-size:19px; color:var(--rv-ink-900)}
.brand:hover{text-decoration:none}
.topbar nav a:not(.btn){color:var(--rv-ink-700); font-weight:600; font-size:15px}
.topbar nav a:not(.btn):hover{color:var(--rv-primary); text-decoration:none}
.topbar nav .nav-login{margin-left:8px}
/* Текст на цветных кнопках всегда контрастный (перебивает наследование от a) */
.btn-primary,.btn-primary:hover,.btn-danger,.btn-accent{color:#fff}
.btn-primary:visited{color:#fff}
.footer{border-top:1px solid var(--rv-line); background:var(--rv-surface); color:var(--rv-ink-400); text-align:center; padding:22px; font-size:14px; margin-top:60px}
main.container{padding-top:24px; padding-bottom:40px}

/* --- Логотип-знак (три полосы волны) --- */
.rv-logo{width:30px; height:30px; border-radius:8px; background:var(--rv-primary); display:inline-flex; align-items:center; justify-content:center; gap:2.5px; flex:none}
.rv-logo i{width:3px; border-radius:2px; background:rgba(255,255,255,.55)}
.rv-logo i:nth-child(1){height:9px}
.rv-logo i:nth-child(2){height:16px; background:#fff}
.rv-logo i:nth-child(3){height:12px; background:var(--rv-accent)}

/* --- Лендинг --- */
.hero{padding:64px 0 40px; background:linear-gradient(180deg,var(--rv-surface),var(--rv-bg))}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; max-width:1160px; margin:0 auto; padding:0 20px}
.hero h1{font-size:clamp(38px,6vw,60px); font-weight:800; letter-spacing:-.035em; margin:.4em 0}
.lead{font-size:19px; line-height:1.55; color:var(--rv-ink-500); max-width:520px; font-weight:500}
.chip{display:inline-flex; align-items:center; gap:7px; background:var(--rv-primary-50); color:var(--rv-primary-700); font-weight:600; font-size:13px; padding:6px 12px; border-radius:var(--rv-r-pill)}
.chip .dot{width:7px; height:7px; border-radius:50%; background:var(--rv-accent)}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin:24px 0}
.hero-ticks{display:grid; gap:8px; margin-top:8px; color:var(--rv-ink-500); font-size:14.5px}
.hero-ticks div{display:flex; align-items:center; gap:8px}
.hero-ticks svg{width:18px; height:18px; color:var(--rv-success)}
/* витрина голосов: послушать бота до регистрации (блок #voices) */
.voicegrid{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin:0 auto}
.voicegroup h3{font-size:14px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--rv-ink-400); margin:0 0 12px}
.voicebar-chips{display:flex; flex-wrap:wrap; gap:8px}
.voicenote{text-align:center; font-size:14px; margin-top:20px}
.voicechip{display:inline-flex; align-items:center; gap:6px; padding:7px 14px 7px 11px;
  border:1px solid var(--rv-line-strong); border-radius:var(--rv-r-pill); background:var(--rv-surface);
  color:var(--rv-ink-700); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s}
.voicechip svg{width:15px; height:15px; color:var(--rv-primary)}
.voicechip:hover{border-color:var(--rv-primary); color:var(--rv-primary-700)}
.voicechip:focus-visible{outline:none; box-shadow:var(--rv-focus)}
.voicechip[disabled]{opacity:.6; cursor:default}
.voicechip.playing{background:var(--rv-primary-50); border-color:var(--rv-primary); color:var(--rv-primary-700)}
.voicebar-status{display:block; text-align:center; min-height:20px; margin-top:16px; font-size:14px}
/* карточка звонка справа */
.callcard{background:var(--rv-surface); border:1px solid var(--rv-line); border-radius:20px; box-shadow:var(--rv-sh-3); max-width:420px; margin:0 auto; overflow:hidden}
.callcard .hd{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--rv-line); font-size:13px; color:var(--rv-ink-400)}
.callcard .hd b{color:var(--rv-ink-900); font-size:14px; font-weight:600}
.callcard .hd small{font-size:12px}
.ph-icon{width:40px; height:40px; flex:none; border-radius:50%; background:var(--rv-primary-50); color:var(--rv-primary-700); display:inline-flex; align-items:center; justify-content:center}
.ph-icon svg{width:18px; height:18px}
.callcard .hd>span:nth-child(2){flex:1; line-height:1.35}
.wave{display:flex; align-items:flex-end; gap:2.5px; height:22px}
.wave i{width:3px; border-radius:2px; background:var(--rv-accent); animation:rvwave 1.2s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.12s}.wave i:nth-child(3){animation-delay:.24s}.wave i:nth-child(4){animation-delay:.36s}.wave i:nth-child(5){animation-delay:.48s}
@keyframes rvwave{0%,100%{height:6px;opacity:.5}50%{height:20px;opacity:1}}
.callcard .body{padding:16px 18px; display:grid; gap:10px; background:var(--rv-bg)}
/* Пузыри чата — общие для карточки hero и секции «Пример диалога» */
.msg{padding:11px 14px; border-radius:14px; font-size:14px; line-height:1.4; max-width:82%; box-shadow:var(--rv-sh-1)}
.msg.cl{background:var(--rv-surface); color:var(--rv-ink-700); justify-self:start; border-bottom-left-radius:4px}
.msg.bot{background:var(--rv-primary); color:#fff; justify-self:end; border-bottom-right-radius:4px}
.callcard .msg.typing{justify-self:start; background:var(--rv-surface); display:inline-flex; gap:4px; padding:13px 14px}
.callcard .msg.typing span{width:7px; height:7px; border-radius:50%; background:var(--rv-ink-300); animation:rvtyping 1.2s ease-in-out infinite}
.callcard .msg.typing span:nth-child(2){animation-delay:.2s}.callcard .msg.typing span:nth-child(3){animation-delay:.4s}
@keyframes rvtyping{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}
.callcard .done{display:flex; align-items:center; gap:8px; background:var(--rv-success-50); color:var(--rv-success-ink); font-weight:600; font-size:14px; padding:12px 16px; border-top:1px solid var(--rv-line)}

.lp-section{padding:56px 0; scroll-margin-top:78px}
.lp-section>.container>h2{font-size:clamp(30px,4vw,44px); font-weight:800; letter-spacing:-.03em; text-align:center; margin:0 0 .3em}
.lp-section .sub{text-align:center; color:var(--rv-ink-500); max-width:560px; margin:0 auto 2rem; font-size:17px}
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
.metrics b{display:block; font-family:var(--rv-font-display); font-size:32px; font-weight:800; color:var(--rv-ink-900)}
.metrics span{color:var(--rv-ink-400); font-size:14px}
.steps4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.steps4 .card{background:var(--rv-bg); box-shadow:none; margin:0}
.steps4 .card.hl{background:var(--rv-primary-50)}
.steps4 .st{color:var(--rv-primary); font-weight:600; font-size:14px}
.steps4 h3{font-size:20px; margin:.3em 0}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.feature-grid .card{margin:0}
.fi{width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:var(--rv-primary-50); color:var(--rv-primary-700); margin-bottom:10px}
.fi svg{width:21px; height:21px}
.feature-grid .card:nth-child(even) .fi,.features .card:nth-child(even) .fi{background:var(--rv-accent-50); color:var(--rv-accent)}
.feature-grid h3{font-size:18px; margin:.2em 0}
.feature-grid p{color:var(--rv-ink-500); font-size:14.5px; margin:0}
.plan-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch}
.pl{background:var(--rv-surface); border:1px solid var(--rv-line); border-radius:var(--rv-r-lg); padding:24px; display:flex; flex-direction:column; gap:8px}
.pl.dark{background:var(--rv-ink-900); color:#fff}
.pl.dark h3,.pl.dark .price{color:#fff}
.pl .price{font-family:var(--rv-font-display); font-size:34px; font-weight:800}
.pl ul{margin:8px 0 16px; padding-left:18px; color:var(--rv-ink-500); display:grid; gap:6px; font-size:14.5px}
.pl.dark ul{color:rgba(255,255,255,.75)}
.faq-grid{display:grid; grid-template-columns:340px 1fr; gap:40px}
.faq details{border-bottom:1px solid var(--rv-line); padding:14px 0}
.faq summary{cursor:pointer; font-weight:600; font-size:16px; color:var(--rv-ink-900); list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:.6em 0 0; color:var(--rv-ink-500)}
.cta-band{background:var(--rv-primary); color:#fff; border-radius:24px; text-align:center; padding:56px 24px; margin:40px 0; position:relative; overflow:hidden}
.cta-band h2{color:#fff; font-size:clamp(26px,4vw,42px); margin:0 0 .5em}
.cta-band p{color:rgba(255,255,255,.85); max-width:520px; margin:0 auto 1.4rem}
.cta-band .btn-primary{background:#fff; color:var(--rv-primary); border-color:#fff}
.cta-band .btn-ghost{color:#fff; border:1px solid rgba(255,255,255,.5)}
.lp-dark{background:var(--rv-ink-900); color:#fff}
.lp-dark h2{color:#fff}
.lp-dark .sub{color:rgba(255,255,255,.7)}
.lp-dark .card{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); color:#fff}
.lp-dark .card h3{color:#fff}
.footer-lg{background:var(--rv-ink-900); color:rgba(255,255,255,.6); padding:48px 0 28px; margin-top:0}
.footer-lg a{color:rgba(255,255,255,.6)}
.footer-lg a:hover{color:#fff}
.ph{display:inline-block; background:var(--rv-warning-50); color:var(--rv-warning-ink); font-size:11px; font-weight:600; padding:2px 7px; border-radius:var(--rv-r-sm); margin-left:6px}
/* Плашка-плейсхолдер под метрикой (правка 3) */
.metrics .ph{display:inline-block; margin:6px 0 0}

/* Код-блок с шапкой и кнопкой «Копировать» (правка 15) */
.codeblock{margin:.6rem 0; border-radius:var(--rv-r-md); overflow:hidden; border:1px solid var(--rv-line)}
.cb-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 14px; background:var(--rv-ink-900); border-bottom:1px solid rgba(255,255,255,.08)}
.cb-head .lang{font-family:var(--rv-font-mono); font-size:12px; color:var(--rv-ink-400)}
.cb-copy{font-size:12.5px; font-weight:600; color:var(--rv-accent); background:none; border:0; cursor:pointer; padding:2px 4px; font-family:var(--rv-font)}
.cb-copy:hover{opacity:.8}
.cb-copy.done{color:var(--rv-success-ink)}
.codeblock pre{margin:0; border:0; border-radius:0}

/* Плашка «метод + путь» (правка 16) */
.endpoint{display:flex; align-items:center; flex-wrap:wrap; gap:12px; background:var(--rv-ink-900); border-radius:var(--rv-r-md); padding:12px 16px; margin:.5rem 0}
.endpoint .method{font-family:var(--rv-font-mono); font-size:12px; font-weight:600; color:var(--rv-ink-900); background:var(--rv-accent); padding:3px 8px; border-radius:var(--rv-r-sm)}
.endpoint .path{font-family:var(--rv-font-mono); font-size:14px; color:#E7EBF3; background:none; padding:0}
.endpoint .note{margin-left:auto; font-size:12.5px; color:var(--rv-ink-400)}

/* Инфо-алерт в контенте доков (правка 13) */
.docs-note{display:flex; gap:10px; background:var(--rv-info-50); border:1px solid var(--rv-info); color:var(--rv-info-ink); border-radius:12px; padding:12px 15px; font-size:13.5px; margin:1rem 0}
.docs-note svg{width:19px; height:19px; flex:none}

/* Секция «Пример диалога» (правка 1) */
.exdlg{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center}
.exdlg h2{text-align:left; margin:0 0 .5em}
.exdlg .sub{text-align:left; margin:0 0 1.2rem}
.exdlg-ticks{display:grid; gap:14px}
.exdlg-ticks li{list-style:none; display:flex; gap:12px; align-items:flex-start}
.exdlg-ticks .ic{width:26px; height:26px; flex:none; border-radius:8px; background:var(--rv-accent-50); color:var(--rv-accent); display:inline-flex; align-items:center; justify-content:center}
.exdlg-ticks .ic svg{width:16px; height:16px}
.exdlg-ticks b{display:block; color:var(--rv-ink-900); font-weight:600; font-size:15px}
.exdlg-ticks span{color:var(--rv-ink-500); font-size:14px}
.exdlg-panel{background:var(--rv-bg); border:1px solid var(--rv-line); border-radius:var(--rv-r-lg); padding:18px; display:grid; gap:10px}

/* Документация: 3-колоночная раскладка со sticky-навигацией (правка 10) */
.docs-shell{display:grid; grid-template-columns:240px 1fr; gap:44px; max-width:1160px; margin:0 auto; padding:32px 20px 56px; align-items:start}
.docs-nav{position:sticky; top:78px; align-self:start; display:grid; gap:1px; font-size:14px}
.docs-nav .grp{font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--rv-ink-400); margin:16px 0 4px; padding:0 10px}
.docs-nav .grp:first-child{margin-top:0}
.docs-nav a{display:block; padding:7px 10px; border-radius:8px; color:var(--rv-ink-500)}
.docs-nav a:hover{background:var(--rv-bg); color:var(--rv-ink-900); text-decoration:none}
.docs-nav a.active{background:var(--rv-primary-50); color:var(--rv-primary-700); font-weight:600}
.docs-body{min-width:0}
.docs-body>section{scroll-margin-top:78px; margin:0 0 48px}
.docs-body>section>h2{font-size:28px; margin:0 0 .5em}
.docs-body h3{font-size:18px; margin:1.6rem 0 .6rem}
/* публичные текстовые страницы: поддержка, политика данных, оферта */
.legal{max-width:820px; margin:0 auto; padding:32px 20px 56px}
.legal h1{font-size:clamp(28px,4vw,38px); letter-spacing:-.02em; margin:0 0 .4em}
.legal section{margin:0 0 32px}
.legal section h2{font-size:22px; margin:0 0 .6em}
.legal section h3{font-size:16px; margin:1.4rem 0 .5rem}
.legal p, .legal li{color:var(--rv-ink-700); line-height:1.65}
.legal ul{padding-left:1.2rem; display:grid; gap:.4rem; margin:.6rem 0}
.legal-draft{margin:0 0 28px}
.legal-links{border-top:1px solid var(--rv-line); padding-top:16px; font-size:14px}
.legal-cols{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start}
.legal-cols .card{margin-bottom:14px}
.support-form{display:grid; gap:14px}
.support-form label{display:grid; gap:6px; font-weight:600; font-size:14px}
.support-form input, .support-form textarea{font-family:inherit; font-size:15px; font-weight:400}
.support-form textarea{resize:vertical; min-height:120px}
.docs-lead{color:var(--rv-ink-500); font-size:17px; margin-bottom:1.4rem}

/* Совместимость публичных классов (docs и т.п.) */
.section{max-width:1160px; margin:0 auto; padding:48px 20px}
.section>h2{font-size:clamp(28px,4vw,40px); text-align:center; margin:0 0 .3em}
.sub{text-align:center; color:var(--rv-ink-500); max-width:600px; margin:0 auto 1.6rem; font-size:17px}
.how-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.how-grid .card{margin:0}
.ico{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:var(--rv-primary-50); color:var(--rv-primary-700); font-weight:700; font-family:var(--rv-font-display); margin-bottom:10px}
.hero>h1,.hero>.lead,.hero>p{max-width:1160px; margin-left:auto; margin-right:auto; padding:0 20px}

/* Авторизация */
.auth-wrap{min-height:calc(100vh - 62px); display:grid; place-items:center; padding:40px 20px}
.auth-card{width:100%; max-width:440px; background:var(--rv-surface); border:1px solid var(--rv-line); border-radius:var(--rv-r-lg); box-shadow:var(--rv-sh-2); padding:32px}
.auth-card h1{font-size:28px}
.auth-card label{display:block; margin-bottom:14px; font-weight:500; font-size:14px}
.auth-card label input,.auth-card label select{display:block; width:100%; margin-top:.3rem; font-weight:400}

/* Онбординг */
.onboarding{display:grid; gap:.7rem; margin:1.2rem 0}
.onboarding-step{display:flex; align-items:center; gap:1rem}
.onboarding-body{flex:1}
.onboarding-body h3{margin:0 0 .2rem; font-size:17px}
.onboarding-body p{margin:0}
.onboarding-mark{width:2rem; height:2rem; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--rv-bg); border:1px solid var(--rv-line); color:var(--rv-ink-300)}
.onboarding-step.done .onboarding-mark{background:var(--rv-success-50); color:var(--rv-success-ink); border-color:var(--rv-success)}

/* Тарифы/биллинг в кабинете */
.balance-card{display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; align-items:center}
.balance-amount{font-family:var(--rv-font-display); font-size:34px; font-weight:800}
.topup{display:grid; gap:.5rem}
.plans{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.plan{display:flex; flex-direction:column; gap:.6rem}
.plan-fee{font-family:var(--rv-font-display); font-size:26px; font-weight:800}
.plan-fee span{font-size:14px; font-weight:400; color:var(--rv-ink-400)}
.plan-features{margin:0; padding-left:1.1rem; color:var(--rv-ink-500); font-size:14px; display:grid; gap:.25rem}
.plan-current{border-color:var(--rv-primary); box-shadow:0 0 0 1px var(--rv-primary) inset}
.enforce-card form{justify-content:space-between}
.features{display:grid; gap:1rem; margin:1rem 0 2rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.preview-line{color:var(--rv-ink-500); font-style:italic}

@media (max-width:992px){
  .dash-cols{grid-template-columns:1fr !important}
  .hero-grid,.faq-grid,.exdlg{grid-template-columns:1fr}
  .docs-shell{grid-template-columns:1fr; gap:20px}
  .docs-nav{position:static; top:auto; grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; gap:4px; padding-bottom:8px; border-bottom:1px solid var(--rv-line)}
  .docs-nav .grp{display:none}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .steps4,.feature-grid,.plan-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hero{padding:36px 0 20px}
  .steps4,.feature-grid,.plan-cards,.metrics,.voicegrid,.legal-cols{grid-template-columns:1fr}
  .btn{width:100%}
  .cta .btn{width:100%}
  .topbar nav a:not(.btn){display:none}
}
@media (prefers-reduced-motion:reduce){ .wave i{animation:none; height:14px} *{scroll-behavior:auto} }