/* ============================================================
   Rapport site v3 — система блоков (.rs-*)
   Метрика взята с instantly.ai (см. .tmp/site-v3/REFERENCE-INSTANTLY.md),
   палитра и шрифты — наши, из css/site.css.
   Ключевые заимствования: единый вертикальный ритм, текстовая мера уже
   визуальной, монохромный интерфейс + цвет только внутри панелей,
   одна тень на весь сайт, кнопки-пилюли трёх видов, скупая анимация.
   ============================================================ */
:root{
  /* ритм: заголовок → 16 → подзаголовок → 24 → кнопка → 48 → визуал → 128 → след. блок */
  --rs-t-sub:16px; --rs-sub-cta:24px; --rs-cta-vis:48px; --rs-block:128px;
  --rs-text:880px;      /* мера текста */
  --rs-vis:1040px;      /* мера визуала */
  --rs-narrow:640px;
  --rs-grey:#6C7078;    /* единственный вторичный серый */
  --rs-hair:#E4E0D9;
  --rs-shadow:0 2.55px 4.34px rgba(20,22,25,.02), 0 11.23px 8.98px rgba(20,22,25,.03), 0 21.9px 22.4px rgba(20,22,25,.05);
  --rs-shadow-sm:0 2px 5px rgba(20,22,25,.05);
}

/* ---------- каркас блока ---------- */
.rs{position:relative;padding:calc(var(--rs-block) / 2) 0;background:transparent}
.rs:first-of-type{padding-top:132px}
html{scroll-padding-top:110px}

/* Чередование фона убрано: белая полоса под шапкой читалась как
   свечение. Страница снова одного цвета, блоки разделяет воздух
   и разная композиция сцен. */
.rs-in{max-width:var(--rs-vis);margin:0 auto;padding:0 32px;width:100%}
.rs-in.wide{max-width:1200px}
.rs-head{max-width:var(--rs-text);margin:0 auto;text-align:center}
.rs-head.left{margin:0;text-align:left}
.rs-eyebrow{display:inline-block;font-family:var(--ff-mono);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ember-deep)}
.rs-h2{font-family:var(--ff-display);font-weight:700;font-size:clamp(32px,3.4vw,44px);line-height:1.08;
  letter-spacing:-.042em;color:var(--ink)}
.rs-eyebrow + .rs-h2{margin-top:14px}
.rs-sub{margin-top:var(--rs-t-sub);font-size:18px;line-height:1.55;color:var(--rs-grey)}
.rs-head .rs-cta{margin-top:var(--rs-sub-cta)}
.rs-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.rs-head.left .rs-cta{justify-content:flex-start}

/* ---------- панель под визуал (цвет живёт здесь) ---------- */
.rs-panel{margin-top:var(--rs-cta-vis);position:relative;overflow:hidden;border-radius:24px;
  min-height:480px;background:var(--ink)}
.rs-panel.tall{min-height:560px}
.rs-panel .glow{position:absolute;inset:0;pointer-events:none}
/* «студийные» подложки: своя на каждый блок, как у референса — но в наших цветах */
.rs-g-ember{background:
  radial-gradient(120% 90% at 18% 0%,rgba(255,122,69,.55),rgba(255,122,69,0) 58%),
  radial-gradient(90% 80% at 92% 100%,rgba(197,61,15,.55),rgba(197,61,15,0) 60%),
  linear-gradient(140deg,#241611,#15171A 58%)}
.rs-g-ink{background:
  radial-gradient(110% 80% at 82% 6%,rgba(255,122,69,.28),rgba(255,122,69,0) 60%),
  linear-gradient(160deg,#1D2024,#121417)}
.rs-g-warm{background:
  radial-gradient(120% 100% at 50% 0%,rgba(255,145,96,.42),rgba(255,145,96,0) 62%),
  linear-gradient(180deg,#2A1A13,#171412)}
.rs-g-paper{background:
  radial-gradient(110% 90% at 15% 0%,rgba(255,122,69,.20),rgba(255,122,69,0) 58%),
  linear-gradient(160deg,#FBFAF7,#EFEBE4)}

/* фрагменты интерфейса поверх подложки: 2–3 плоскости, часть уходит за край */
.rs-shot{position:absolute;border-radius:16px;background:var(--snow);box-shadow:var(--rs-shadow);overflow:hidden}
.rs-shot.sm{border-radius:12px}

/* ---------- карточки ---------- */
.rs-card{background:var(--snow);border:1px solid var(--rs-hair);border-radius:16px;padding:28px}
.rs-card.lg{border-radius:20px;padding:32px}
.rs-card.dark{background:var(--ink);border-color:transparent;color:#fff}
.rs-card .t{font-family:var(--ff-display);font-weight:700;font-size:20px;line-height:1.25;letter-spacing:-.02em}
.rs-card p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--rs-grey)}
.rs-card.dark p{color:rgba(255,255,255,.72)}

/* ---------- типографические мелочи ---------- */
.rs-kv{font-family:var(--ff-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rs-grey)}
.rs-note{font-size:14px;line-height:1.5;color:var(--rs-grey)}
.rs-hair{height:1px;background:var(--rs-hair);border:0}
.rs-num{font-family:var(--ff-display);font-weight:700;letter-spacing:-.04em;line-height:1;font-size:40px;color:var(--ink)}
.rs-num .u{color:var(--ember)}

/* ---------- сетки ---------- */
.rs-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.rs-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rs-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rs-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}

/* ---------- анимация: только цвет и лёгкое появление ---------- */
.rs a,.rs button{transition:color .3s ease,background-color .3s ease,border-color .3s ease}
.rs-rev{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
html.js-reveal .rs-rev{opacity:0;transform:translateY(14px)}
html.js-reveal .rs-rev.on{opacity:1;transform:none}

/* ---------- мобильная ---------- */
@media (max-width:1024px){
  :root{--rs-block:88px;--rs-cta-vis:36px}
  .rs-split{grid-template-columns:1fr;gap:36px}
  .rs-3,.rs-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-panel{min-height:420px}
}
@media (max-width:640px){
  :root{--rs-block:64px}
  .rs-in{padding:0 16px}
  .rs-h2{font-size:clamp(26px,7.4vw,32px)}
  .rs-sub{font-size:16px}
  .rs-2,.rs-3,.rs-4{grid-template-columns:1fr}
  .rs-cta .btn{width:100%;justify-content:center}
  .rs-panel{min-height:340px;border-radius:18px}
}



@media (max-width:640px){
}

/* ============================================================
   БЛОК 01 — первый экран (единственная раскладка «текст / визуал»)
   ============================================================ */

/* переписка */


/* ============================================================
   БЛОК 02 — видео
   ============================================================ */


/* ============================================================
   БЛОК 09 — тарифы
   ============================================================ */



@media (max-width:1024px){
}
@media (max-width:640px){
}

/* ============================================================
   БЛОК 10 — блог
   ============================================================ */

@media (max-width:1024px){.b10-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.b10-grid{grid-template-columns:1fr}}

/* ============================================================
   БЛОК 11 — частые вопросы
   ============================================================ */

@media (max-width:640px){
}

/* Сброс legacy-стилей живого сайта, которые бьют по id #faq (там 11 !important-правил
   старой вёрстки: тёмный фон, свои поля, скругления, margin:0). Новый блок — светлый. */
#faq.rs{background:none!important;background-color:transparent!important;color:var(--ink)!important;
  padding:0!important;min-height:0!important;border-radius:0!important;overflow:visible!important;
  width:auto!important;margin:calc(var(--rs-block)/2) 0!important}


@media (max-width:1024px){
}
@media (max-width:640px){
}


/* Элементы живого сайта с классами появления ждут скрипта, которого в этой сборке нет:
   без него футер и шапка остаются невидимыми. Показываем их сразу. */
.rl-rev,.hc-rev,.reveal{opacity:1!important;transform:none!important}

/* Шапка приходит с живого сайта и несёт тёплую тень-свечение
   (rgba(255,91,39,.42) + тёплая серая). На светлых блоках её не видно,
   а на тёмных секциях под шапкой появлялась белёсая дымка.
   В v3 оставляем только внутренние блики — форма шапки не меняется. */
.nav .nav-inner{box-shadow:inset 0 2px 0 0 rgba(255,255,255,.95),
  inset 0 -1px 0 0 rgba(176,165,151,.14) !important}

/* ============================================================
   Футер v3 — «облако»: светлая карточка со скруглением, а не
   полоса во всю ширину. Раньше он спорил с блоком призыва,
   который стоит прямо над ним; теперь обе карточки одной формы.
   ============================================================ */
/* фон футера приходит тёмным из стилей живого сайта — гасим по id */
footer#footer.v3f{padding:0 0 40px;background:transparent!important;color:var(--ink)}
.v3f-in{max-width:var(--rs-vis);margin:0 auto;padding:0 32px;width:100%}
.v3f-cloud{background:var(--snow);border:1px solid var(--rs-hair);border-radius:32px;
  padding:56px 48px 32px;box-shadow:var(--rs-shadow-sm)}

.v3f-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.1fr);gap:48px}
.v3f-word{font-family:var(--ff-display);font-weight:700;font-size:30px;letter-spacing:-.045em;
  color:var(--ink)}
.v3f-word .dot{color:var(--ember)}
.v3f-slogan{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--rs-grey);max-width:300px}
.v3f-cta{margin-top:24px}

.v3f-col{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.v3f-h{font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fog);margin-bottom:4px}
.v3f-col a{font-size:15px;color:var(--rs-grey);transition:color .18s ease}
.v3f-col a:hover{color:var(--ink)}
.v3f-note{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--fog);max-width:280px}
/* контакты — как в шапке первой версии: цветная иконка и название канала */
.v3f-cn{display:inline-flex;align-items:center;gap:10px}
.v3f-cn img{width:20px;height:20px;display:block}

.v3f-bar{margin-top:48px;padding-top:24px;border-top:1px solid var(--rs-hair);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13.5px;color:var(--fog)}
.v3f-legal{display:flex;gap:20px;flex-wrap:wrap}
.v3f-legal a{color:var(--fog)}
.v3f-legal a:hover{color:var(--rs-grey)}
.v3f-legal i{font-style:normal;opacity:.7}

/* концовка: словознак во всю ширину карточки, срезанный её нижним краем.
   Подпись «© Rapport» сама по себе обрывала страницу на полуслове. */
.v3f-mega{margin:40px 0 -32px;overflow:hidden;line-height:0;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.25));
  mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.25))}
.v3f-mega span{display:block;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(46px,11.6vw,166px);line-height:.78;letter-spacing:-.06em;text-align:center;
  color:var(--paper-2);white-space:nowrap;
  /* хвост букв уходит под край карточки — как у референса */
  margin-bottom:-.19em}
.v3f-mega i{font-style:normal;color:var(--ember);opacity:.55}

@media (max-width:900px){
  .v3f-cloud{padding:36px 24px 24px;border-radius:24px}
  .v3f-top{grid-template-columns:1fr;gap:32px}
  .v3f-bar{margin-top:32px}
  .v3f-mega{margin:28px 0 -24px}
}

/* ============================================================
   Мобильная шапка и меню v3
   Живая шапка на телефоне превращалась в пилюлю с тремя иконками
   и бургером без скрипта: меню не открывалось вовсе. Здесь —
   своя панель во весь экран и подчищенная сама пилюля.
   ============================================================ */
@media (max-width:900px){
  /* в пилюле: бренд, два мессенджера и главное действие. Кнопка меню
     уехала вниз экрана — до верхнего правого угла большим пальцем не достать */
  /* в гриде живой шапки третья колонка (меню) на телефоне пустует —
     справа оставалась дыра, поэтому раскладку переводим во flex */
  .nav .nav-inner{display:flex!important;align-items:center;justify-content:space-between;
    padding:7px 8px 7px 12px!important;gap:8px!important}
  .nav .nav-right{margin-left:auto}
  .nav .nav-contacts{display:flex!important;gap:6px!important}
  .nav .nav-contacts .nav-div,
  .nav .nav-contacts a[href^="mailto:"]{display:none!important}
  /* картинка 27px не влезала в кнопку 32px с внутренним отступом и резалась */
  .nav .nav-contacts .nav-ico{width:34px!important;height:34px!important;padding:0!important;
    overflow:visible!important;display:grid;place-items:center}
  .nav .nav-contacts .nav-ico img{width:100%!important;height:100%!important;display:block}
  /* у знака MAX поля внутри картинки меньше, чем у телеграма, — рядом он
     выглядел крупнее; ужимаем сам глиф, а не кнопку */
  .nav .nav-contacts a[href*="max.ru"] img{width:86%!important;height:86%!important}
  .nav .nav-right .btn-primary{display:inline-flex!important;height:36px!important;
    padding:0 14px!important;font-size:13.5px!important;white-space:nowrap}
  .nav .brand-word{font-size:18px}

  /* кнопка меню — отдельная плавающая пилюля по центру внизу */
  .nav .nav-burger{position:fixed!important;z-index:80!important;
    left:50%!important;transform:translateX(-50%)!important;bottom:20px!important;
    display:inline-flex!important;align-items:center;gap:9px;
    width:auto!important;height:52px!important;padding:0 22px 0 18px!important;
    border:0!important;border-radius:99px!important;background:var(--ink)!important;
    box-shadow:0 14px 30px -12px rgba(20,18,15,.55)!important}
  .nav .nav-burger::after{content:"Меню";font-family:var(--ff-body);font-size:15px;font-weight:600;
    color:#fff;letter-spacing:-.01em}
  .nav .nav-burger[aria-expanded="true"]::after{content:"Закрыть"}
  .nav .nav-burger span,
  .nav .nav-burger span::before,
  .nav .nav-burger span::after{background:#fff!important;width:17px!important}
  /* при открытом меню средняя линия обязана исчезнуть — иначе поверх
     крестика остаётся третья полоска */
  .nav .nav-burger[aria-expanded="true"] span{background:transparent!important}
}
@media (max-width:340px){
  .nav .nav-right .btn-primary{padding:0 9px!important;font-size:11.5px!important}
  .nav .nav-contacts{gap:4px!important}
  .nav .nav-contacts .nav-ico{width:28px!important;height:28px!important}
  .nav .nav-inner{padding:6px 6px 6px 8px!important;gap:6px!important}
  .nav .nav-right{gap:6px!important}
}
@media (max-width:520px){
  /* в узкую пилюлю не влезали слово бренда, два мессенджера и кнопка:
     оставляем знак — логотип всё равно повторён в меню */
  .nav .brand-word{display:none!important}
  .nav .nav-right .btn-primary{padding:0 12px!important;font-size:13px!important}
  .nav .nav-contacts .nav-ico{width:32px!important;height:32px!important}
}

/* шапка живого сайта — pointer-events:none (кликается только пилюля),
   панель наследует это и становится некликабельной */
.v3nav-scrim,.v3nav{pointer-events:auto}
.v3nav[hidden],.v3nav-scrim[hidden]{display:none!important}
.v3nav-scrim{position:fixed;inset:0;z-index:70;background:rgba(20,18,15,.42);
  opacity:0;transition:opacity .26s ease}
html.v3nav-on .v3nav-scrim{opacity:1}

/* карточка по центру с отступами по всем краям: панель, выезжавшая
   от правого края, на телефоне читалась как системная шторка */
.v3nav{position:fixed;z-index:71;top:14px;right:14px;bottom:14px;left:14px;
  display:flex;flex-direction:column;padding:22px 22px 24px;border-radius:28px;
  background:linear-gradient(180deg,#FFFEFA,#F4F0E8);
  box-shadow:0 40px 80px -40px rgba(20,18,15,.55);
  opacity:0;transform:scale(.96);transform-origin:50% 92%;
  transition:opacity .24s ease,transform .3s cubic-bezier(.22,.8,.3,1)}
html.v3nav-on .v3nav{opacity:1;transform:none}
html.v3nav-on{overflow:hidden}

.v3nav-head{display:flex;align-items:center;justify-content:space-between}
.v3nav-word{font-family:var(--ff-display);font-weight:700;font-size:22px;letter-spacing:-.045em;
  color:var(--ink)}
.v3nav-word .dot{color:var(--ember)}
.v3nav-close{width:42px;height:42px;border:0;border-radius:14px;background:var(--paper-2);
  color:var(--ink);padding:11px;cursor:pointer}
.v3nav-close svg{width:100%;height:100%}

/* пункты крупные, с номером слева — то же, что в FAQ, страница читается как одно целое */
.v3nav-links{margin-top:22px;display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch}
.v3nav-links a{display:flex;align-items:baseline;gap:14px;padding:12px 0;
  font-family:var(--ff-display);font-weight:700;font-size:24px;letter-spacing:-.04em;color:var(--ink);
  border-bottom:1px solid rgba(228,224,217,.8);
  opacity:0;transform:translateX(14px);
  transition:opacity .28s ease,transform .32s cubic-bezier(.22,.8,.3,1),color .18s ease}
.v3nav-links a:last-child{border-bottom:0}
.v3nav-links a i{font-family:var(--ff-mono);font-style:normal;font-size:11px;letter-spacing:.14em;
  color:var(--fog)}
.v3nav-links a:active{color:var(--ember-deep)}
html.v3nav-on .v3nav-links a{opacity:1;transform:none}
html.v3nav-on .v3nav-links a:nth-child(1){transition-delay:.05s}
html.v3nav-on .v3nav-links a:nth-child(2){transition-delay:.09s}
html.v3nav-on .v3nav-links a:nth-child(3){transition-delay:.13s}
html.v3nav-on .v3nav-links a:nth-child(4){transition-delay:.17s}
html.v3nav-on .v3nav-links a:nth-child(5){transition-delay:.21s}
html.v3nav-on .v3nav-links a:nth-child(6){transition-delay:.25s}
html.v3nav-on .v3nav-links a:nth-child(7){transition-delay:.29s}

.v3nav-foot{margin-top:auto;padding-top:16px;padding-bottom:60px}
.v3nav-cta{display:flex;align-items:center;justify-content:center;height:54px;border-radius:99px;
  background:var(--ember);color:#fff;font-size:16px;font-weight:600;
  box-shadow:0 10px 24px -12px rgba(255,90,31,.7)}
.v3nav-cta:active{background:var(--ember-deep)}
.v3nav-login{margin-top:14px;display:flex;align-items:center;justify-content:center;height:48px;
  border-radius:99px;background:var(--paper-2);color:var(--ink);font-size:15.5px;font-weight:500}
.v3nav-login:active{background:var(--rs-hair)}
.v3nav-contacts{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap;font-size:14px;
  color:var(--rs-grey)}
.v3nav-contacts a{color:var(--rs-grey)}
.v3nav-contacts a:active{color:var(--ink)}

@media (min-width:901px){
  .v3nav,.v3nav-scrim{display:none!important}
}
@media (max-width:380px){
  .v3nav{top:10px;right:10px;bottom:10px;left:10px;padding:16px 16px 18px;border-radius:24px}
  .v3nav-links a{font-size:19px;padding:7px 0}
  .v3nav-head .v3nav-word{font-size:20px}
}
@media (max-height:760px){
  .v3nav-links a{font-size:19px;padding:8px 0}
  .v3nav-links{margin-top:16px}
  .v3nav-cta{height:50px}
  .v3nav-login{height:44px;margin-top:10px}
  .v3nav-foot{padding-bottom:56px;padding-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .v3nav,.v3nav-scrim,.v3nav-links a{transition:none}
}

/* Пальцу нужно 40px: текстовые ссылки на телефоне были высотой 21–28px */
@media (max-width:640px){
  .b01-quiet,.b10-all,.b12-tg,.v3f-col a,.v3f-legal a,.v3nav-contacts a{
    display:inline-flex;align-items:center;min-height:40px}
  .b10-all{padding-bottom:0}
}

/* «Вход» — текстовая ссылка рядом с основной кнопкой шапки (как у референса) */
.nav-login{font-size:15px;font-weight:500;color:var(--ink);padding:0 4px;white-space:nowrap}
.nav-login:hover{color:var(--ember-deep)}
@media (max-width:900px){
  /* в пилюле места нет: вход живёт в меню */
  .nav-login{display:none}
}

/* ============================================================
   Мобильный ритм: на телефоне блоки шли почти вплотную и все
   заголовки были одного веса с текстом — глазу не за что зацепиться.
   Разводим блоки по вертикали и делаем заголовок явно крупнее.
   ============================================================ */
@media (max-width:640px){
  :root{--rs-block:104px;--rs-t-sub:14px;--rs-sub-cta:22px;--rs-cta-vis:32px}

  .rs-h2,.b04-h2,.b10-h2,.b11-h2,.b12-h2,.b09-extrah{
    font-size:29px!important;line-height:1.04!important;letter-spacing:-.045em!important}
  .b01-h1{font-size:33px!important;line-height:1.03!important}
  .rs-sub,.b10-sub,.b11-sub,.b09-extrasub,.b12-lead{font-size:16px!important;line-height:1.5!important}

  /* метка над заголовком — короткая строка, которая объявляет тему блока */
  .rs-eyebrow{font-size:11px;letter-spacing:.18em}
  .rs-eyebrow + .rs-h2{margin-top:10px}

  /* визуал отходит от заголовка, соседние блоки не слипаются */
  .rs-panel,.b06-wrap,.b10-grid,.b11-list{margin-top:28px}
  .b09-extra{margin-top:72px}
  .b09-svcs{gap:28px}
}

/* Шапка: у трёх знаков разные внутренние поля в файлах — почта шла 31px,
   телеграм 27, MAX выглядел крупнее обоих. Приводим к общему виду
   и убираем вертикальный разделитель между ними. */
.nav .nav-contacts .nav-div{display:none!important}
.nav .nav-contacts .nav-ico img{width:27px!important;height:27px!important}
.nav .nav-contacts a[href*="max.ru"] img{width:24px!important;height:24px!important}
.nav .nav-contacts a[href^="mailto:"] img{width:27px!important;height:27px!important}