/* ==========================================================================
   assistant-landing.css — SEO-лендинги ассистентов (/assistants/<slug>/).
   Источник: макет 4gen-design (2).zip, lp-*.html, секция «посадочная
   страница ассистента» (строки 269–437 инлайнового <style>).
   Здесь только классы .lp-* — шапка, подвал, кнопки, модалка и токены
   темы приходят из site-theme.css и marketing.css, дублировать их не надо.
   Кнопка «наверх» (.to-top) живёт в marketing.css: она нужна ещё и на
   странице модели.
   Отступ снизу у .lp-wrap меньше макетного: в макете footer лежал ВНУТРИ
   .lp-wrap, а base_site.html рендерит его снаружи со своим margin-top.
   ========================================================================== */

/* ================= посадочная страница ассистента ================= */
.lp-wrap{max-width:1100px; margin:0 auto; padding:0 32px 40px; overflow-x:hidden;}
.lp-sec{padding:64px 0 0; min-width:0;}
.lp-sec h2{font-size:clamp(22px, 2.6vw, 30px); margin-bottom:14px; letter-spacing:-.01em;}
.lp-sec > p{color:var(--muted); font-size:15.5px; max-width:720px;}

/* первый экран */
.lp-hero{padding:46px 0 8px; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
.lp-hero h1{font-size:clamp(28px, 4vw, 46px); line-height:1.14; letter-spacing:-.02em; margin:14px 0 16px;}
.lp-hero .lp-lead{font-size:17px; line-height:1.6; color:var(--muted); margin-bottom:26px; max-width:560px;}
.lp-cta-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.lp-note{font-size:13px; color:var(--muted); max-width:420px; line-height:1.5;}
.lp-eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono'; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.09em; color:var(--red); background:color-mix(in srgb, var(--red) 9%, transparent);
  padding:6px 12px; border-radius:100px;}

/* карточка-иллюстрация в первом экране */
.lp-visual{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:20px; box-shadow:var(--shadow);}
/* noindex — нестандартный тег, браузер считает его строчным, и блочные элементы
   внутри перестают учитывать ширину родителя. Задаём блочное поведение явно. */
.lp-visual noindex{display:block; min-width:0;}
.lp-visual-h{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-bottom:14px;}
.lp-visual-h .dot{width:9px; height:9px; border-radius:50%; background:var(--border-strong);}
.lp-file{display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--border);
  border-radius:10px; background:var(--bg); font-size:13px; margin-bottom:10px;}
.lp-file svg{width:16px; height:16px; color:var(--muted); flex-shrink:0;}
.lp-arrow{display:flex; justify-content:center; padding:4px 0 10px; color:var(--muted-2);}
.lp-arrow svg{width:20px; height:20px;}
.lp-out{padding:13px; border:1px solid var(--border); border-radius:10px; background:var(--bg);
  font-size:12.5px; line-height:1.65; color:var(--muted); max-height:150px; overflow:hidden; position:relative;}
.lp-out::after{content:''; position:absolute; left:0; right:0; bottom:0; height:44px;
  background:linear-gradient(to top, var(--bg), transparent);}

/* проблема */
.lp-problem{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:30px 32px;}
.lp-problem p{color:var(--muted); font-size:15.5px; line-height:1.68; margin-bottom:12px;}
.lp-problem p:last-child{margin-bottom:0;}

/* шаги */
.lp-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:30px;}
.lp-step{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 20px;}
.lp-step-n{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono'; font-size:13px; font-weight:500; color:#fff;
  background-image:linear-gradient(120deg, var(--red), var(--orange)); margin-bottom:14px;}
.lp-step h3{font-size:15px; margin-bottom:8px;}
.lp-step p{font-size:13.5px; color:var(--muted); line-height:1.6;}

/* пример: таблица «как в файле» — слева исходные столбцы, справа сгенерированный */
/* min-width на таблице заставляет её распирать родителя, поэтому контейнеру
   нужен max-width:100% и min-width:0 — иначе страница получает горизонтальную прокрутку */
.lp-sheet{margin-top:28px; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background:var(--surface); max-width:100%; min-width:0;}
.lp-sheet-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;}
.lp-sheet table{border-collapse:collapse; width:100%; min-width:680px; font-size:13.5px;}
.lp-sheet th{background:var(--bg); text-align:left; font-weight:500; font-size:12px; color:var(--muted);
  padding:12px 16px; border-bottom:1px solid var(--border); white-space:nowrap;}
.lp-sheet th.lp-th-out{color:var(--red); background:color-mix(in srgb, var(--red) 6%, var(--bg));}
.lp-sheet td{padding:14px 16px; border-bottom:1px solid var(--border); vertical-align:top; line-height:1.6;}
.lp-sheet tr:last-child td{border-bottom:none;}
.lp-sheet td.lp-td-out{color:var(--ink); background:color-mix(in srgb, var(--red) 4%, transparent);
  border-left:1px solid var(--border); min-width:300px;}
.lp-sheet td.lp-td-in{color:var(--muted);}
.lp-sheet-note{padding:12px 16px; font-size:12.5px; color:var(--muted-2); border-top:1px solid var(--border); background:var(--bg);}

/* иллюстрация в первом экране: строки файла и статус генерации */
.lp-visual-rows{display:flex; flex-direction:column; gap:7px; margin-bottom:14px;}
.lp-vrow{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--border);
  border-radius:9px; background:var(--bg); font-size:12.5px;}
/* min-width:0 обязателен: без него flex-элемент не сжимается меньше своего
   текста, и длинные строки (например, в примере для рерайта) распирали блок. */
.lp-vrow .lp-vname{flex:1; min-width:0; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lp-vrow{min-width:0;}
.lp-visual, .lp-visual noindex, .lp-visual-rows{min-width:0; max-width:100%;}
.lp-vstatus{font-size:11px; font-family:'JetBrains Mono'; padding:3px 8px; border-radius:100px; white-space:nowrap;}
.lp-vdone{color:#0F7B4F; background:rgba(15,123,79,.12);}
.lp-vwork{color:var(--red); background:color-mix(in srgb, var(--red) 12%, transparent);}
.lp-vwait{color:var(--muted-2); background:var(--surface-2);}
.lp-vbar{height:5px; border-radius:100px; background:var(--surface-2); overflow:hidden; margin-bottom:8px;}
.lp-vbar span{display:block; height:100%; border-radius:100px;
  background-image:linear-gradient(120deg, var(--red), var(--orange));}
.lp-vmeta{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted);}

/* кому подходит */
.lp-who{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:28px;}
.lp-who-item{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 24px;}
.lp-who-item h3{font-size:15.5px; margin-bottom:8px;}
.lp-who-item p{font-size:14px; color:var(--muted); line-height:1.62;}

/* цены */
.lp-pay{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:32px; margin-top:28px;}
.lp-pay-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:22px;}
.lp-pay-item h3{font-size:14.5px; margin-bottom:7px;}
.lp-pay-item p{font-size:13.5px; color:var(--muted); line-height:1.6;}

/* вопросы */
.lp-faq{margin-top:26px; max-width:820px;}
.lp-faq details{border-bottom:1px solid var(--border); padding:2px 0;}
.lp-faq summary{cursor:pointer; padding:17px 34px 17px 0; font-size:15.5px; font-weight:500; position:relative; list-style:none;}
.lp-faq summary::-webkit-details-marker{display:none;}
.lp-faq summary::after{content:''; position:absolute; right:6px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s;}
.lp-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.lp-faq details p{padding:0 34px 18px 0; color:var(--muted); font-size:14.5px; line-height:1.68;}

/* финальный призыв */
.lp-final{margin-top:64px; border-radius:22px; padding:46px 40px; text-align:center;
  background-image:linear-gradient(120deg, var(--red), var(--orange)); color:#fff;}
.lp-final h2{font-size:clamp(22px,2.6vw,30px); margin-bottom:12px; color:#fff;}
.lp-final p{color:rgba(255,255,255,.92); font-size:15.5px; max-width:560px; margin:0 auto 24px;}
.lp-final .btn{background:#fff; color:var(--red); border:none; font-weight:600;}
.lp-final .btn:hover{opacity:.94;}

/* другие ассистенты */
.lp-related{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px;}
.lp-related a{display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 20px;
  font-size:14.5px; font-weight:500; color:var(--ink); text-decoration:none;}
.lp-related a:hover{border-color:var(--border-strong);}
.lp-related svg{width:17px; height:17px; color:var(--muted); flex-shrink:0;}

/* хлебные крошки */
.lp-crumbs{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); padding:22px 0 0; flex-wrap:wrap;}
.lp-crumbs a{color:var(--muted); text-decoration:none;}
.lp-crumbs a:hover{color:var(--ink);}
.lp-crumbs span{color:var(--muted-2);}

/* ---------- адаптив ---------- */
@media (max-width:980px){
  .lp-hero{grid-template-columns:1fr; gap:32px; padding-top:30px;}
  .lp-visual{order:2;}
  .lp-steps{grid-template-columns:repeat(2,1fr);}
  .lp-sheet table{min-width:620px;}
  .lp-pay-grid{grid-template-columns:1fr; gap:18px;}
  .lp-related{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:680px){
  .lp-wrap{padding:0 20px 32px;}
  .lp-sec{padding-top:48px;}
  .lp-who{grid-template-columns:1fr;}
  .lp-related{grid-template-columns:1fr;}
  .lp-problem{padding:24px 22px;}
  .lp-pay{padding:24px 22px;}
  .lp-final{padding:36px 24px; margin-top:48px;}
  .lp-hero .lp-lead{font-size:16px;}
  .lp-cta-row{flex-direction:column; align-items:stretch;}
  .lp-cta-row .btn{width:100%; justify-content:center;}
  .lp-note{max-width:none;}
}
@media (max-width:480px){
  .lp-wrap{padding:0 16px 28px;}
  .lp-steps{grid-template-columns:1fr; gap:14px;}
  /* На узком экране таблица не читается: главный столбец уезжает за край,
     а прокрутку легко не заметить. Поэтому каждая строка становится карточкой. */
  .lp-sheet-scroll{overflow-x:visible;}
  .lp-sheet table{min-width:0; display:block;}
  .lp-sheet thead{display:none;}
  .lp-sheet tbody, .lp-sheet tr, .lp-sheet td{display:block; width:auto;}
  .lp-sheet tr{padding:16px; border-bottom:1px solid var(--border);}
  .lp-sheet tr:last-child{border-bottom:none;}
  .lp-sheet td{border:none; padding:5px 0; font-size:13.5px;}
  .lp-sheet td::before{content:attr(data-label); display:block; font-family:'JetBrains Mono';
    font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted-2); margin-bottom:3px;}
  .lp-sheet td.lp-td-out{background:none; border-left:none; min-width:0;
    margin-top:10px; padding-top:12px; border-top:1px dashed var(--border);}
  .lp-sheet td.lp-td-out::before{color:var(--red);}
  .lp-final{padding:30px 20px; border-radius:18px;}
  .lp-faq summary{font-size:15px; padding-right:28px;}
}