/* ============================================================
   LANDINGPEAK × CLAUDE — визуальный слой совместной статьи.
   Палитра Anthropic поверх нашей тёмной сцены: коралл #D97757,
   крафт, манилла, слоновая кость. Наш фиолетовый остаётся только
   в шапке и в логотипе — чтобы читалось «две марки», а не «редизайн».
   ============================================================ */

.cx-page {
  --claude: #D97757;   /* Claude orange — основной акцент страницы */
  --cloth: #CC785C;    /* book cloth */
  --kraft: #D4A27F;
  --manilla: #EBDBBC;
  --ivory: #FAF9F5;
  --anth-blue: #6A9BCC;
  --anth-green: #788C5D;
  --lp: #E4879A;       /* наш фиолетовый — для со-брендинга */
  --warm-line: rgba(217, 119, 87, 0.28);
  --warm-fill: rgba(217, 119, 87, 0.07);
}

/* ---------- шапка статьи ---------- */

.cx-page .article-tag {
  color: var(--kraft);
  border-color: var(--warm-line);
  background: linear-gradient(100deg, rgba(217, 119, 87, 0.16), rgba(217, 119, 87, 0.03));
  box-shadow: 0 0 30px rgba(217, 119, 87, 0.14);
}
.cx-page .article-head h1 em {
  color: var(--claude);
  font-style: normal;
  text-shadow: 0 0 16px rgba(217, 119, 87, 0.6), 0 0 60px rgba(217, 119, 87, 0.28);
}
.cx-page .beam-halo { background: linear-gradient(90deg, transparent 10%, rgba(217, 119, 87, 0.14) 48%, transparent 90%); }
.cx-page .fog-a { background: radial-gradient(closest-side, rgba(217, 119, 87, 0.1), transparent 70%); }
.cx-page .fog-b { background: radial-gradient(closest-side, rgba(168, 58, 85, 0.09), transparent 70%); }

.cx-page .article-body a:not(.btn) {
  color: var(--kraft);
  border-bottom: 1px solid rgba(212, 162, 127, 0.38);
}
.cx-page .article-body a:not(.btn):hover {
  border-color: var(--claude);
  text-shadow: 0 0 14px rgba(217, 119, 87, 0.55);
}
.cx-page .pull {
  border-left-color: var(--claude);
  background: linear-gradient(100deg, rgba(217, 119, 87, 0.1), transparent 70%);
}
.cx-page .check-list li::before { color: var(--kraft); }
.cx-page .steps > li::before {
  background: linear-gradient(140deg, rgba(217, 119, 87, 0.24), rgba(217, 119, 87, 0.04));
  border-color: var(--warm-line);
  color: var(--claude);
}
.cx-page .sources a:hover { color: var(--kraft); }
.cx-page .cta-card {
  border-color: var(--warm-line);
  background: linear-gradient(165deg, rgba(217, 119, 87, 0.12), var(--panel) 60%);
}
.cx-page .next-card.is-claude { border-color: var(--warm-line); background: var(--warm-fill); }
.cx-page .next-card.is-claude b { color: var(--kraft); }

/* ---------- со-бренд: замок из двух марок ----------
   Кольцо наше (фиолетовое), звезда — цвета Claude. Одна фигура,
   две марки. Ниже — крестик и слово-марка, чтобы читалось вслух. */

.lockup {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: 0 auto 26px;
}
.lockup-mark { width: 62px; height: auto; flex: none; }
.lockup-mark .lm-ring { fill: var(--lp); filter: drop-shadow(0 0 12px rgba(228, 135, 154, 0.45)); }
.lockup-mark .lm-star { fill: var(--claude); filter: drop-shadow(0 0 10px rgba(217, 119, 87, 0.65)); }
.lockup-x {
  font-family: var(--font-mono); font-size: 13px; color: var(--text-faint);
  transform: translateY(1px);
}
.lockup-burst { width: 40px; height: 40px; flex: none; fill: var(--claude); }
.lockup-burst g { transform-origin: 50% 50%; animation: burst-turn 34s linear infinite; }
@keyframes burst-turn { to { transform: rotate(360deg); } }
.lockup-names {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; line-height: 1.4;
}
.lockup-names b { color: var(--text-dim); font-weight: 400; }
.lockup-names span { color: var(--claude); }

/* ---------- общая рамка «фигуры» ---------- */

.cxfig {
  margin: 30px 0 34px; padding: 22px;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(170deg, rgba(217, 119, 87, 0.05), rgba(255, 255, 255, 0.015));
}
.cxfig-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.cxfig-head b {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.17em;
  color: var(--kraft); font-weight: 400;
}
.cxfig-head span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.13em; color: var(--text-faint); }
.cxfig-foot {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-faint);
}
.cxfig-foot a { color: var(--text-dim); }

/* ---------- три робота ---------- */

.bots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bot {
  padding: 16px 16px 18px; border-radius: 13px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025);
}
.bot code {
  display: block; font-family: var(--font-mono); font-size: 12.5px;
  color: var(--ivory); margin-bottom: 10px; letter-spacing: -0.01em;
}
.bot p { font-size: 13.5px; color: var(--text-dim); margin: 0 0 12px; line-height: 1.5; }
.bot .bot-if {
  display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  line-height: 1.7; padding-top: 10px; border-top: 1px solid var(--line);
}
.bot.is-train { border-color: rgba(255, 255, 255, 0.12); }
.bot.is-train .bot-if { color: var(--text-faint); }
.bot.is-live { border-color: var(--warm-line); background: var(--warm-fill); }
.bot.is-live code { color: var(--claude); }
.bot.is-live .bot-if { color: var(--pain); }
.bot.is-index { border-color: rgba(212, 162, 127, 0.22); }
.bot.is-index code { color: var(--kraft); }
.bot.is-index .bot-if { color: var(--text-dim); }

/* ---------- то, что реально видит модель: кусок ответа API ---------- */

.payload {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85;
  background: #0A0907; border: 1px solid rgba(217, 119, 87, 0.16); border-radius: 12px;
  padding: 18px 20px; overflow-x: auto; color: var(--text-dim);
  white-space: pre;
}
.payload .k { color: var(--kraft); }
.payload .s { color: var(--manilla); }
.payload .c { color: var(--text-faint); }
.payload .hot { color: var(--claude); font-weight: 600; }

/* ---------- лаборатория цитаты: 150 символов ---------- */

.qlab { display: grid; gap: 12px; }
.qrow {
  padding: 16px 18px; border-radius: 13px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
}
.qrow .q-k {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em;
  color: var(--text-faint); display: block; margin-bottom: 10px;
}
.qrow p { font-size: 15.5px; margin: 0 0 14px; line-height: 1.55; }
.qmeter { display: flex; align-items: center; gap: 12px; }
.qmeter .q-track {
  position: relative; flex: 1; height: 6px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.07); overflow: hidden;
}
.qmeter .q-track i {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.qmeter .q-num {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--text-faint); white-space: nowrap;
}
.qrow.is-bad { border-color: rgba(248, 113, 113, 0.22); }
.qrow.is-bad p { color: var(--text-dim); }
.qrow.is-bad .q-track i { background: rgba(248, 113, 113, 0.55); }
.qrow.is-bad .q-k { color: var(--pain); }
.qrow.is-good { border-color: var(--warm-line); background: var(--warm-fill); }
.qrow.is-good p { color: var(--ivory); }
.qrow.is-good .q-track i { background: linear-gradient(90deg, var(--cloth), var(--claude)); }
.qrow.is-good .q-k { color: var(--claude); }
.q-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.q-facts span {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(212, 162, 127, 0.3); color: var(--kraft);
}

/* ---------- корреляции: не чек-лист, а измерение ----------
   Галочки читались как «сделай это», хотя это данные. */

.corrlist { display: flex; flex-direction: column; gap: 12px; }
.cline {
  display: grid; grid-template-columns: 58px 1fr; gap: 4px 14px;
  align-items: baseline;
}
.cline b {
  font-family: var(--font-mono); font-size: 15px; font-weight: 500;
  color: var(--claude); letter-spacing: -0.02em;
}
.cline span { font-size: 14px; color: var(--text-dim); line-height: 1.45; }
.cline i {
  grid-column: 2; height: 5px; border-radius: 3px; display: block;
  background: linear-gradient(90deg, rgba(204, 120, 92, 0.35), var(--claude));
  margin-top: 4px;
}
.cline.is-weak b { color: var(--text-faint); }
.cline.is-weak i { background: rgba(255, 255, 255, 0.14); }

/* ---------- конвейер выдачи ---------- */

.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pipe-step {
  position: relative; padding: 15px 14px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.pipe-step b {
  display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em;
  color: var(--claude); font-weight: 400; margin-bottom: 9px;
}
.pipe-step p { font-size: 13px; color: var(--text-dim); margin: 0; line-height: 1.5; }
/* только подпись-каптион — это прямой ребёнок карточки.
   Курсив внутри <p> должен остаться обычным курсивом. */
.pipe-step > em {
  display: block; font-style: normal; margin-top: 10px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--kraft);
}
.pipe-step::after {
  content: "›"; position: absolute; top: 50%; right: -8px; transform: translateY(-50%);
  color: var(--text-faint); font-size: 16px; z-index: 2;
}
.pipe-step:last-child::after { content: none; }

/* ---------- «что делать» — плитки под чек-лист ---------- */

.cx-note {
  margin: 40px 0 6px; padding: 22px 24px;
  border: 1px dashed var(--warm-line); border-radius: 16px;
  background: rgba(217, 119, 87, 0.04);
}
.cx-note .n-k {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
  color: var(--claude); margin-bottom: 12px;
}
.cx-note p { font-size: 15px; color: var(--text-dim); margin-bottom: 0; }

/* ---------- адаптив ---------- */

@media (max-width: 860px) {
  .bots { grid-template-columns: 1fr; }
  .pipe { grid-template-columns: repeat(2, 1fr); }
  .pipe-step:nth-child(2)::after { content: none; }
}

@media (max-width: 680px) {
  .lockup { gap: 12px; }
  .lockup-mark { width: 50px; }
  .lockup-burst { width: 32px; height: 32px; }
  .lockup-names { font-size: 9px; letter-spacing: 0.16em; }
  .cxfig { padding: 18px 16px; }
  .payload { font-size: 11px; padding: 14px 14px; }
  .pipe { grid-template-columns: 1fr; }
  .pipe-step::after { content: none; }
  .qrow p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .lockup-burst g { animation: none; }
  .qmeter .q-track i { transition: none; }
}