Deliverable descriptions on cards: intro from Elena + per-ctype text on each button

mockup.html

@@ -116,11 +116,11 @@ body{font-family:var(--font-ui);background:var(--surf);color:var(--ink);line-hei
 .steps b{color:var(--bg)}
 /* ── выбор deliverable ── */
 .deliverables{display:flex;flex-direction:column;gap:9px;margin:4px 0 4px 51px;max-width:520px}
-.deliv{background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:13px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:border-color .15s,box-shadow .15s}
+.deliv{background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:13px 16px;cursor:pointer;display:flex;align-items:flex-start;gap:12px;transition:border-color .15s,box-shadow .15s}
 .deliv:hover{border-color:var(--bg);box-shadow:0 4px 14px rgba(159,18,57,.1)}
-.deliv .di{font-size:20px;flex-shrink:0}
+.deliv .di{font-size:20px;flex-shrink:0;margin-top:1px}
 .deliv .dn{font-size:13.5px;font-weight:700}
-.deliv .dd2{font-size:12px;color:var(--mut);margin-top:2px}
+.deliv .dd2{font-size:12.5px;color:var(--mut);margin-top:4px;line-height:1.55}
 .deliv-top{border-color:rgba(159,18,57,.3);background:var(--tint)}
 .deliv-top .dn{color:var(--bg)}
 .deliv-badge{font-size:10px;font-weight:700;background:var(--bg);color:#fff;border-radius:6px;padding:2px 7px;margin-left:auto;flex-shrink:0}
@@ -381,19 +381,19 @@ body{font-family:var(--font-ui);background:var(--surf);color:var(--ink);line-hei
       <div class="deliverables">
         <div id="deliv-protocol" class="deliv" onclick="selectDeliv('protocol')">
           <span class="di">📋</span>
-          <div><div class="dn">Протокол разногласий</div><div class="dd2">Список спорных пунктов + зачем менять каждый</div></div>
+          <div><div class="dn">Протокол разногласий</div><div class="dd2" id="dd2-protocol">Список спорных пунктов + зачем менять каждый</div></div>
         </div>
         <div id="deliv-redact" class="deliv" onclick="selectDeliv('redact')">
           <span class="di">✏️</span>
-          <div><div class="dn">Переработка с комментариями</div><div class="dd2">Новая редакция каждого пункта + пояснение изменений</div></div>
+          <div><div class="dn">Переработка с комментариями</div><div class="dd2" id="dd2-redact">Новая редакция каждого пункта + пояснение изменений</div></div>
         </div>
         <div id="deliv-clean" class="deliv" onclick="selectDeliv('clean')">
           <span class="di">✅</span>
-          <div><div class="dn">Чистая редакция</div><div class="dd2">Договор готов к подписанию — без лишних пояснений</div></div>
+          <div><div class="dn">Чистая редакция</div><div class="dd2" id="dd2-clean">Договор готов к подписанию — без лишних пояснений</div></div>
         </div>
         <div id="deliv-partner" class="deliv deliv-top" onclick="selectDeliv('partner')">
           <span class="di">🤝</span>
-          <div><div class="dn">Партнёрская редакция</div><div class="dd2">Вариант, который устроит обе стороны — без конфликта</div></div>
+          <div><div class="dn">Партнёрская редакция</div><div class="dd2" id="dd2-partner">Вариант, который устроит обе стороны — без конфликта</div></div>
           <span class="deliv-badge" id="deliv-rec-badge">Рекомендуем</span>
         </div>
       </div>
@@ -681,57 +681,111 @@ function setMode(mode) {
 const CTYPES = {
   agent: {
     emoji:'🤝', name:'агентский договор',
-    comment:'Агент действует от имени или за счёт другой стороны. Главные риски здесь — объём вашей ответственности перед третьими лицами и признаки трудовых отношений, которые могут всплыть при проверке.',
+    comment:'Агент действует от имени или за счёт другой стороны. Главные риски здесь — объём ответственности перед третьими лицами и признаки трудовых отношений.',
     delivRec:'partner',
-    pitch:`С учётом выявленных нарушений потенциальный ущерб — от <b>120 000 до 350 000 ₽</b>: налоговые доначисления по ст. 19.1 ТК, штрафы от потребителей и неограниченная ответственность перед Принципалом. Это реальные цифры, не абстрактный риск. Вот три варианта как действовать:<br><br><b>Первый — Протокол разногласий.</b> Вы получаете список конкретных требований с правовой нормой под каждым. Не «хочу изменить этот пункт», а «данная редакция противоречит ст. 330 ГК». Контрагенту придётся либо согласиться, либо объяснить почему закон неважен. Подходит, если готовы сами вести переговоры.<br><br><b>Второй — Переработка с комментариями.</b> Новая редакция каждого спорного пункта плюс объяснение логики изменений. Контрагент видит не давление, а аргументы — меньше возражений, быстрее к подписи. Большинство договоров закрывается именно так.<br><br><b>Третий — Партнёрская редакция.</b> Я переписываю договор так, чтобы обе стороны видели свою выгоду. Текст, в котором контрагент сам не захочет ничего менять — потому что его интересы уже учтены. Подписывают без торга и выполняют честно 💛`
+    intro:'С учётом выявленных нарушений потенциальный ущерб — от <b>120 000 до 350 000 ₽</b>: налоговые доначисления, штрафы от потребителей, неограниченная ответственность перед Принципалом. Три варианта:',
+    delivDesc:{
+      protocol:'Список требований с нормой закона под каждым. Не «хочу изменить», а «данная редакция противоречит ст. 330 ГК». Контрагенту придётся либо согласиться, либо объяснить почему закон неважен.',
+      redact:'Новая редакция каждого спорного пункта + объяснение логики изменений. Контрагент видит аргументы, а не давление — меньше возражений, быстрее к подписи.',
+      clean:'Все спорные пункты переписаны и готовы к подписанию — без пояснений для контрагента. Подходит если другая сторона уже согласна на правки.',
+      partner:'Договор написан так, чтобы обе стороны видели свою выгоду. Контрагент сам не захочет его менять — его интересы уже учтены. Подписывают без торга 💛'
+    }
   },
   realty: {
     emoji:'🏠', name:'договор купли-продажи недвижимости',
-    comment:'В недвижимости цена ошибки особенно высока. Проверяю обременения, условия передачи объекта и ответственность за скрытые дефекты — именно там чаще всего прячется главный риск.',
+    comment:'В недвижимости цена ошибки особенно высока. Проверяю обременения, условия передачи объекта и ответственность за скрытые дефекты.',
     delivRec:'partner',
-    pitch:`В сделках с недвижимостью любая неточность стоит дорого — от <b>потери аванса до расторжения сделки и судебных расходов</b>. Цена вопроса здесь прямо пропорциональна стоимости объекта. Три варианта как защититься:<br><br><b>Первый — Протокол разногласий.</b> Фиксируем спорные условия по передаче объекта, ответственности за дефекты и срокам — со ссылками на нормы. Это основа для предметного разговора без эмоций. Хорошо работает с частными продавцами.<br><br><b>Второй — Переработка с комментариями.</b> Переписываем каждый проблемный пункт и объясняем зачем. Особенно эффективно с застройщиками — они привыкли к обоснованным возражениям и реагируют на аргументы, а не на просьбы.<br><br><b>Третий — Партнёрская редакция.</b> Договор сбалансирован: другая сторона видит, что её интересы учтены. Такие сделки закрываются быстрее и без претензий после регистрации 💛`
+    intro:'В сделках с недвижимостью любая неточность стоит дорого — вплоть до <b>потери аванса или расторжения сделки</b>. Три варианта:',
+    delivDesc:{
+      protocol:'Фиксируем спорные условия по передаче, дефектам и срокам — со ссылками. Основа для предметного разговора. Хорошо работает с частными продавцами.',
+      redact:'Переписываем проблемные пункты с объяснением зачем. Особенно эффективно с застройщиком — они реагируют на аргументы, а не на просьбы.',
+      clean:'Договор полностью переписан и готов к подписанию. Все риски закрыты, формулировки чёткие.',
+      partner:'Договор сбалансирован: другая сторона видит, что её интересы учтены. Сделки закрываются быстрее и без претензий после регистрации 💛'
+    }
   },
   auto: {
     emoji:'🚗', name:'договор купли-продажи автомобиля',
-    comment:'Смотрю на гарантии состояния, скрытые дефекты и условия передачи. Это три зоны, где покупатель чаще всего остаётся без защиты после подписания.',
+    comment:'Смотрю на гарантии состояния, скрытые дефекты и условия передачи.',
     delivRec:'clean',
-    pitch:`Главные риски здесь — <b>скрытые дефекты без гарантии возврата</b> и нечёткие условия передачи. В худшем сценарии: продавец снят с себя всякую ответственность, а вы обнаруживаете проблему уже после сделки. Потенциальные потери — от стоимости ремонта до полной цены автомобиля. Три пути:<br><br><b>Первый — Протокол разногласий.</b> Конкретные требования: гарантии состояния, ответственность за скрытые дефекты, порядок расторжения. Основа для переговоров ещё до подписания.<br><br><b>Второй — Переработка с комментариями.</b> Новая редакция проблемных пунктов с объяснением — почему именно такая формулировка защищает вас лучше. Продавец понимает логику и реже отказывает.<br><br><b>Третий — Чистая редакция.</b> Договор полностью готов к подписанию — защита выстроена, все риски закрыты. Приходите с чистым текстом, а не со списком претензий 💛`
+    intro:'Главные риски — <b>скрытые дефекты без гарантии возврата</b>. Потенциальные потери: от стоимости ремонта до полной цены автомобиля. Три пути:',
+    delivDesc:{
+      protocol:'Гарантии состояния, ответственность за скрытые дефекты, порядок расторжения — со ссылками. Основа для переговоров до подписания.',
+      redact:'Новая редакция с объяснением зачем. Продавец понимает логику — реже отказывает. Подходит если продавец настроен на диалог.',
+      clean:'Договор полностью готов к подписанию — скрытые дефекты закрыты, условия передачи чёткие. Приходите с текстом, а не со списком претензий 💛',
+      partner:'Вариант, где продавец тоже видит свою защиту. Снижает напряжение — подписывают быстро и без претензий.'
+    }
   },
   construction: {
     emoji:'🛋️', name:'договор подряда',
-    comment:'Договор подряда — здесь критичны сроки, критерии качества результата и ответственность за задержки. Разбираю ваши риски по каждому из этих блоков.',
+    comment:'Договор подряда — здесь критичны сроки, критерии качества результата и ответственность за задержки.',
     delivRec:'redact',
-    pitch:`Основные риски по этому договору — <b>штрафы за просрочку без верхней границы, размытые критерии качества и ответственность за дефекты, которые обнаружатся после сдачи</b>. Потенциальные потери: от стоимости устранения недостатков до полной переделки работ. Три варианта:<br><br><b>Первый — Протокол разногласий.</b> Конкретные требования к срокам, критериям приёмки и порядку устранения дефектов — с нормами закона. Заказчику сложнее отказать без обоснования.<br><br><b>Второй — Переработка с комментариями.</b> Переписываем спорные пункты и объясняем зачем. Обе стороны чётко понимают что подписывают — меньше споров в процессе исполнения. Оптимальный вариант для подрядных договоров.<br><br><b>Третий — Партнёрская редакция.</b> Договор учитывает риски обеих сторон. Заказчик видит, что его интересы тоже защищены — соглашается быстрее и меньше давит в процессе работы 💛`
+    intro:'Основные риски — <b>штрафы за просрочку без верхней границы</b> и размытые критерии качества. Потенциальные потери: от устранения недостатков до полной переделки. Три варианта:',
+    delivDesc:{
+      protocol:'Требования к срокам, критериям приёмки и порядку устранения дефектов — с нормами. Заказчику сложнее отказать без обоснования.',
+      redact:'Переписываем спорные пункты, объясняем зачем. Обе стороны понимают что подписывают — меньше споров при сдаче. Оптимальный выбор для подряда 💛',
+      clean:'Договор переписан и готов к подписанию. Сроки зафиксированы, критерии приёмки чёткие, ответственность ограничена.',
+      partner:'Договор учитывает риски заказчика и подрядчика. Заказчик видит защиту своих интересов — соглашается быстрее.'
+    }
   },
   services: {
     emoji:'🎯', name:'договор оказания услуг',
-    comment:'В услугах часто размыт сам результат и ответственность исполнителя. Разберу что именно вы обязаны сделать и где вас можно поймать на формальном нарушении.',
+    comment:'В услугах часто размыт сам результат и ответственность исполнителя.',
     delivRec:'redact',
-    pitch:`Главные риски — <b>размытый результат, который невозможно принять формально</b>, и ответственность за то, что зависит не только от вас. В таких договорах заказчик может бесконечно требовать доработок или отказать в оплате на формальных основаниях. Потенциальные потери — от возврата полной суммы до штрафных санкций. Три пути:<br><br><b>Первый — Протокол разногласий.</b> Чёткие требования к тому, что считается результатом, срокам и основаниям для расторжения. Снимает самые частые точки споров ещё до старта работ.<br><br><b>Второй — Переработка с комментариями.</b> Новая редакция спорных пунктов с объяснением логики. Заказчик понимает зачем нужны эти условия — меньше конфликтов при сдаче работ. Лучший выбор для договоров услуг.<br><br><b>Третий — Чистая редакция.</b> Договор полностью готов к подписанию — результат зафиксирован, критерии приёмки прописаны, ответственность ограничена. Приходите с готовым текстом 💛`
+    intro:'Главные риски — <b>размытый результат и ответственность за то, что не зависит от вас</b>. Потенциальные потери: от возврата всей суммы до штрафных санкций. Три пути:',
+    delivDesc:{
+      protocol:'Чёткие требования к тому, что считается результатом, срокам и основаниям для расторжения. Снимает частые точки споров до старта работ.',
+      redact:'Новая редакция с объяснением логики. Заказчик понимает условия — меньше конфликтов при сдаче. Лучший выбор для услуг 💛',
+      clean:'Договор полностью готов к подписанию — результат зафиксирован, критерии приёмки прописаны, ответственность ограничена.',
+      partner:'Договор балансирует интересы исполнителя и заказчика. Работают без конфликтов и платят без задержек.'
+    }
   },
   labor: {
     emoji:'📋', name:'трудовой договор',
-    comment:'Трудовой договор — смотрю на режим работы, зоны ответственности и условия расторжения. Здесь у работника есть обязательная защита по ТК, которую нельзя ужать без последствий.',
+    comment:'Трудовой договор — смотрю на режим работы, зоны ответственности и условия расторжения.',
     delivRec:'protocol',
-    pitch:`По выявленным нарушениям работодатель потенциально может не выплатить положенные компенсации при увольнении и переложить на вас ответственность сверх нормы ТК. Потенциальные потери — <b>от нескольких окладов до судебного восстановления на работе</b>. Три варианта:<br><br><b>Первый — Протокол разногласий.</b> Фиксируем конкретные пункты, где условия противоречат ТК — с нормами. Это основа для переговоров с HR или юридическим отделом работодателя. Большинство работодателей соглашаются на правки, когда видят ссылки на закон.<br><br><b>Второй — Переработка с комментариями.</b> Новые формулировки спорных пунктов с объяснением почему они важны для вас. Работодатель понимает запрос — проще найти компромисс без лишнего напряжения.<br><br><b>Третий — Чистая редакция.</b> Договор приведён в соответствие с ТК и готов к подписанию. Приходите с текстом, который уже защищает ваши права 💛`
+    intro:'Потенциальные потери — <b>от нескольких окладов до судебного восстановления</b>. Работодатель может переложить ответственность сверх нормы ТК. Три варианта:',
+    delivDesc:{
+      protocol:'Пункты, противоречащие ТК, с нормами. Основа для переговоров с HR: работодатель видит закон, а не просьбу. Большинство соглашаются на правки 💛',
+      redact:'Новые формулировки спорных условий с объяснением. Работодатель понимает запрос — проще найти компромисс.',
+      clean:'Договор приведён в соответствие с ТК и готов к подписанию. Ваши права зафиксированы.',
+      partner:'Договор учитывает интересы работника и работодателя. Подписывают без споров и работают без неожиданных претензий.'
+    }
   },
   loan: {
     emoji:'💰', name:'договор займа',
-    comment:'Ключевые риски займа — скрытые проценты, штрафные санкции и условия досрочного требования. Часто самый опасный пункт написан мелким шрифтом в середине договора.',
+    comment:'Ключевые риски займа — скрытые проценты, штрафные санкции и условия досрочного требования.',
     delivRec:'redact',
-    pitch:`Выявленные риски — <b>скрытые проценты, возможность досрочного требования возврата и неограниченные штрафные санкции</b>. При наихудшем сценарии задолженность может вырасти в несколько раз от первоначальной суммы займа. Три пути защиты:<br><br><b>Первый — Протокол разногласий.</b> Конкретные требования по процентам, порядку начисления штрафов и условиям досрочного погашения. Кредитор видит обоснование — сложнее отказать без объяснений.<br><br><b>Второй — Переработка с комментариями.</b> Новая редакция ключевых пунктов с объяснением логики — снимает основные инструменты давления на заёмщика. Оптимальный вариант для займов с физлицами и МФО.<br><br><b>Третий — Партнёрская редакция.</b> Договор сбалансирован: кредитор получает защиту возврата, заёмщик — предсказуемые условия без скрытых ловушек. Такие договоры подписывают без споров 💛`
+    intro:'При наихудшем сценарии <b>задолженность вырастет в несколько раз</b> от первоначальной суммы. Скрытые проценты и неограниченные штрафы — основной инструмент давления. Три пути:',
+    delivDesc:{
+      protocol:'Требования по процентам, порядку штрафов и условиям погашения — со ссылками. Кредитору сложнее отказать без объяснений.',
+      redact:'Новая редакция ключевых пунктов с объяснением — снимает инструменты давления на заёмщика. Оптимальный выбор для займов с физлицами и МФО 💛',
+      clean:'Договор готов к подписанию. Проценты зафиксированы, штрафы ограничены, условия прозрачны.',
+      partner:'Договор сбалансирован: кредитор защищён, заёмщик знает точные условия без скрытых ловушек.'
+    }
   },
   supply: {
     emoji:'📦', name:'договор поставки',
-    comment:'Поставка — проверяю условия приёмки, ответственность за качество товара и что происходит при просрочке. Именно здесь чаще всего возникают споры при исполнении.',
+    comment:'Поставка — проверяю условия приёмки, ответственность за качество и что происходит при просрочке.',
     delivRec:'redact',
-    pitch:`Основные риски — <b>ненадлежащая приёмка товара, неограниченная неустойка за просрочку и ответственность за качество без потолка</b>. Потенциальные потери: от полной стоимости партии до убытков от срыва всей цепочки поставок. Три варианта:<br><br><b>Первый — Протокол разногласий.</b> Конкретные требования по порядку приёмки, критериям качества и ограничению неустойки — со ссылками на нормы. Контрагент видит закон, а не просьбу.<br><br><b>Второй — Переработка с комментариями.</b> Новая редакция спорных пунктов с объяснением зачем. Обе стороны понимают условия до старта поставок — меньше споров при исполнении. Лучший выбор для регулярных поставок.<br><br><b>Третий — Партнёрская редакция.</b> Договор защищает обе стороны — поставщик и покупатель видят свои интересы учтёнными. Подписывают быстро и работают без задержек 💛`
+    intro:'Основные риски — <b>неограниченная неустойка за просрочку и ответственность за качество без потолка</b>. Потенциальные потери: от стоимости партии до срыва цепочки поставок. Три варианта:',
+    delivDesc:{
+      protocol:'Требования по приёмке, критериям качества и ограничению неустойки — со ссылками. Контрагент видит закон, а не просьбу.',
+      redact:'Новая редакция спорных условий с объяснением. Обе стороны знают правила до старта — меньше споров при исполнении 💛',
+      clean:'Договор готов к подписанию. Порядок приёмки чёткий, неустойка ограничена, ответственность зафиксирована.',
+      partner:'Договор учитывает интересы поставщика и покупателя. Подписывают быстро и работают без задержек.'
+    }
   },
   other: {
     emoji:'📄', name:'договор',
-    comment:'Изучила структуру. Нашла пункты, которые стоит проверить внимательнее — показываю ключевые риски ниже.',
+    comment:'Изучила структуру. Нашла пункты, которые стоит проверить внимательнее.',
     delivRec:null,
-    pitch:`По выявленным пунктам риск потерь зависит от суммы сделки — но <b>формальные нарушения всегда дешевле устранить до подписания, чем оспаривать в суде</b>. Три варианта как действовать:<br><br><b>Первый — Протокол разногласий.</b> Список конкретных требований с правовым обоснованием. Хорошая основа для переговоров если вы знаете что именно хотите изменить.<br><br><b>Второй — Переработка с комментариями.</b> Новая редакция спорных пунктов с объяснением логики изменений. Контрагент понимает зачем — меньше возражений, быстрее к подписи.<br><br><b>Третий — Чистая редакция.</b> Договор полностью готов к подписанию — риски закрыты, формулировки чёткие. Приходите с готовым текстом 💛`
+    intro:'Формальные нарушения дешевле устранить <b>до подписания</b>, чем оспаривать потом. Три варианта:',
+    delivDesc:{
+      protocol:'Список требований с правовым обоснованием. Основа для переговоров если знаете что именно изменить.',
+      redact:'Новая редакция спорных пунктов с объяснением. Контрагент понимает зачем — меньше возражений.',
+      clean:'Договор полностью готов к подписанию. Риски закрыты, формулировки чёткие 💛',
+      partner:'Договор учитывает интересы обеих сторон. Подписывают без торга и выполняют без претензий.'
+    }
   }
 };
 
@@ -781,16 +835,24 @@ function showResults(ctypeKey) {
   document.querySelectorAll('.deliv').forEach(el => {
     el.classList.remove('deliv-highlighted');
   });
-  // питч-скрипт Елены
+  // вступление Елены (оценка ущерба)
   const pitchEl = document.getElementById('el-ctype-pitch');
   const pitchMsg = document.getElementById('el-pitch-msg');
-  if (ctype.pitch) {
-    pitchEl.innerHTML = ctype.pitch;
+  if (ctype.intro) {
+    pitchEl.innerHTML = ctype.intro;
     pitchMsg.style.display = '';
   } else {
     pitchMsg.style.display = 'none';
   }
 
+  // описания на карточках
+  if (ctype.delivDesc) {
+    ['protocol','redact','clean','partner'].forEach(key => {
+      const el = document.getElementById('dd2-' + key);
+      if (el && ctype.delivDesc[key]) el.textContent = ctype.delivDesc[key];
+    });
+  }
+
   // убрать badge у всех, потом поставить на нужный
   document.querySelectorAll('.deliv-badge').forEach(b => b.style.display = 'none');