/* Иллюстрации и интерактив страниц услуг (29.10.2026, Фёдор: «на /ai-agents/ и подобных страницах не хватает иллюстраций,
   интерактива, картинок»). Подключается в самой странице (site/pages/*.html), поведение — page-kit.js. Компоненты:
   pk-day — день чат-бота и ИИ-агента с переключателем; pk-io — задача «на входе → на выходе»; steps--run — этапы с линией
   прогресса и картинками; pk-zone — контур данных с переключателем; mod__art / step__art / teaser__art — контурные чертежи. */

/* --- контурные чертежи в карточках, этапах и текстовых блоках --- */
main .mod__art.bp-art{display:block;width:118px;height:auto;margin:4px 0 2px -6px}
main .step__art.bp-art{display:block;width:92px;height:auto;margin:0 0 10px -4px}
main .teaser__art.bp-art{display:block;width:min(100%,360px);height:auto;margin:0 auto 18px}
@media (max-width:699px){main .mod__art.bp-art{width:96px}main .step__art.bp-art{width:76px}main .teaser__art.bp-art{width:min(70%,260px)}}

/* --- день чат-бота и ИИ-агента --- */
.pk-day{--p:0;display:grid;gap:18px;padding:24px;border:1px solid rgba(14,13,22,.1);background:#fff}
.pk-day__sw{display:inline-flex;justify-self:start;padding:4px;border-radius:99px;background:#f0f0f5}
.pk-day__sw button{padding:9px 16px;border:0;border-radius:99px;background:transparent;color:var(--r-mute);font:600 13px/1 var(--r-d);letter-spacing:-.01em;cursor:pointer;transition:background .25s,color .25s}
.pk-day__sw button[aria-selected="true"]{background:var(--r-ink);color:#fff}
.pk-day__sw button:focus-visible{outline:2px solid var(--r-acc);outline-offset:2px}
.pk-day__bar{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;color:var(--r-mute);font-size:12px;font-variant-numeric:tabular-nums}
.pk-day__track{position:relative;height:6px;border-radius:99px;background:#ececf2;overflow:hidden}
.pk-day__track i{position:absolute;inset:0;border-radius:inherit;background:var(--r-acc);transform:scaleX(var(--p));transform-origin:0 50%}
.pk-day[data-mode="bot"] .pk-day__track i{background:#c9c7d6}
.pk-day__now{display:flex;align-items:baseline;gap:10px}
.pk-day__now b{color:var(--r-ink);font:600 34px/1 var(--r-d);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pk-day__now span{color:var(--r-mute);font-size:13px}
.pk-day__line{display:none;gap:8px;margin:0;padding:0;list-style:none}
.pk-day[data-mode="agent"] .pk-day__line[data-m="agent"],.pk-day[data-mode="bot"] .pk-day__line[data-m="bot"]{display:grid}
.pk-day__line li{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:baseline;padding:10px 12px;border-radius:10px;opacity:.28;transform:translateY(4px);transition:opacity .4s,transform .4s,background .4s}
.pk-day__line li.is-on{opacity:1;transform:none;background:#f4f2ff}
.pk-day__line li.is-hand.is-on{background:var(--r-ink);color:#fff}
.pk-day__line li.is-hand.is-on time{color:#b4a8ff}
.pk-day__line time{color:var(--r-acc);font:600 13px/1.4 var(--r-d);font-variant-numeric:tabular-nums}
.pk-day__line span{font-size:15px;line-height:1.4}
.pk-day__line .pk-day__idle{grid-template-columns:1fr;background:none;opacity:1;transform:none;color:var(--r-mute);font-size:14px;border:1px dashed rgba(14,13,22,.18)}
.pk-day__sum{margin:0;color:var(--r-mute);font-size:14px;line-height:1.45}
.pk-day__sum b{color:var(--r-ink);font-weight:600}
.pk-day__sum [data-m]{display:none}
.pk-day[data-mode="agent"] .pk-day__sum [data-m="agent"],.pk-day[data-mode="bot"] .pk-day__sum [data-m="bot"]{display:inline}

/* --- задача «на входе → на выходе» --- */
.tasks--io>div{display:flex;flex-direction:column;gap:6px}
.pk-ic{display:block;width:30px;height:30px;margin-bottom:8px;color:var(--r-acc)}
.pk-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pk-io{display:grid;grid-template-columns:auto minmax(18px,1fr) auto;align-items:center;gap:8px;margin:auto 0 0;padding-top:16px;font-size:12.5px;line-height:1.2}
.pk-io>span{padding:6px 10px;border-radius:99px;white-space:nowrap}
.pk-io>span:first-child{border:1px solid rgba(14,13,22,.16);color:var(--r-mute)}
.pk-io>span:last-child{background:var(--r-acc);color:#fff;opacity:0;transform:translateX(-6px)}
.pk-io>i{position:relative;height:1px;background:rgba(14,13,22,.2)}
.pk-io>i::after{content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--r-acc);opacity:0}
.tasks--io.is-in .pk-io>i::after{animation:pkrun .9s cubic-bezier(.65,0,.35,1) calc(.3s + var(--i,0) * .25s) both}
.tasks--io.is-in .pk-io>span:last-child{animation:pkout .45s cubic-bezier(.16,1,.3,1) calc(1.1s + var(--i,0) * .25s) both}
.tasks--io>div.is-re .pk-io>i::after{animation:pkrun .9s cubic-bezier(.65,0,.35,1) both}
.tasks--io>div.is-re .pk-io>span:last-child{animation:pkout .45s cubic-bezier(.16,1,.3,1) .8s both}
@keyframes pkrun{0%{opacity:0;left:0}15%{opacity:1}85%{opacity:1}100%{opacity:0;left:calc(100% - 7px)}}
@keyframes pkout{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media (max-width:699px){.pk-io{grid-template-columns:auto 24px auto;justify-content:start}.pk-io>span{white-space:normal}}

/* --- этапы с линией прогресса --- */
.steps--run{position:relative}
.steps--run .step::before{content:"";position:absolute;z-index:1;border-radius:50%;background:#fff;border:2px solid rgba(61,18,252,.3);width:12px;height:12px;transition:background .3s,border-color .3s}
.steps--run.is-in .step::before{animation:pkdot .35s ease calc(var(--k,0) * .7s + .2s) forwards}
@keyframes pkdot{to{background:var(--r-acc);border-color:var(--r-acc)}}
.steps--run::after{content:"";position:absolute;z-index:0;background:var(--r-acc);transform-origin:0 0}
@media (min-width:900px){
  .steps--run .step::before{left:0;top:-7px}
  .steps--run::after{left:0;right:0;top:39px;height:2px;transform:scaleX(0)}
  .steps--run.is-in::after{animation:pkline calc(var(--n,4) * .7s) linear .2s forwards}
  @keyframes pkline{to{transform:scaleX(1)}}
}
@media (max-width:899px){
  .steps--run .step::before{left:-7px;top:0}
  .steps--run::after{left:0;top:0;bottom:36px;width:1px;transform:scaleY(0)}
  .steps--run.is-in::after{animation:pklinev calc(var(--n,4) * .7s) linear .2s forwards}
  @keyframes pklinev{to{transform:scaleY(1)}}
}

/* --- контур данных --- */
.pk-zone{display:grid;gap:16px}
.pk-zone__sw{display:inline-flex;justify-self:start;padding:4px;border-radius:99px;background:#f0f0f5}
.pk-zone__sw button{padding:9px 16px;border:0;border-radius:99px;background:transparent;color:var(--r-mute);font:600 13px/1 var(--r-d);cursor:pointer;transition:background .25s,color .25s}
.pk-zone__sw button[aria-selected="true"]{background:var(--r-ink);color:#fff}
.pk-zone__sw button:focus-visible{outline:2px solid var(--r-acc);outline-offset:2px}
.pk-zone__box{position:relative;padding:34px 18px 18px;border:1.5px dashed var(--r-acc);border-radius:18px;background:rgba(61,18,252,.03)}
.pk-zone__lbl{position:absolute;left:16px;top:-11px;padding:2px 10px;border-radius:99px;background:var(--r-acc);color:#fff;font:600 12px/1.4 var(--r-d)}
.pk-zone__lbl [data-z]{display:none}
.pk-zone[data-z="own"] .pk-zone__lbl [data-z="own"],.pk-zone[data-z="cloud"] .pk-zone__lbl [data-z="cloud"]{display:inline}
.pk-zone__grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pk-zone__n{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(14,13,22,.08);font-size:14px;line-height:1.25}
.pk-zone__n svg{flex:none;width:26px;height:26px;fill:none;stroke:var(--r-acc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pk-zone__n [data-z]{display:none}
.pk-zone[data-z="own"] .pk-zone__n [data-z="own"],.pk-zone[data-z="cloud"] .pk-zone__n [data-z="cloud"]{display:inline}
.pk-zone__n svg[data-z]{display:none}
.pk-zone[data-z="own"] .pk-zone__n svg[data-z="own"],.pk-zone[data-z="cloud"] .pk-zone__n svg[data-z="cloud"]{display:block}
.pk-zone__dots{position:absolute;inset:0;pointer-events:none}
.pk-zone__dots i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--r-acc);opacity:0}
.pk-zone.is-in .pk-zone__dots i{animation:pkloop 3.2s ease-in-out calc(var(--i) * .8s) infinite}
@keyframes pkloop{0%{opacity:0;left:25%;top:25%}10%{opacity:1}35%{left:75%;top:25%}60%{left:75%;top:75%}85%{left:25%;top:75%;opacity:1}100%{opacity:0;left:25%;top:25%}}
.pk-zone__out{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(14,13,22,.12);border-radius:12px;color:var(--r-mute);font-size:13.5px;line-height:1.4}
.pk-zone__out svg{width:26px;height:26px;fill:none;stroke:var(--r-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pk-zone__out b{display:block;color:var(--r-ink);font-weight:600}
.pk-zone__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pk-zone__tags li{padding:7px 12px;border-radius:99px;background:#f0f0f5;color:var(--r-ink);font-size:13px}

@media (prefers-reduced-motion:reduce){
  .tasks--io .pk-io>span:last-child{opacity:1;transform:none;animation:none!important}
  .pk-io>i::after,.pk-zone__dots i{display:none}
  .steps--run::after{transform:none!important;animation:none!important}
  .steps--run .step::before{background:var(--r-acc);border-color:var(--r-acc);animation:none!important}
}
main .teaser__art--l.bp-art{margin:22px 0 0;width:min(100%,320px)}
/* правки по снимкам 29.10: подписи «вход → выход» переносятся внутри, а не налезают на соседнюю ячейку; схема данных на телефоне в столбец */
.pk-io{grid-template-columns:minmax(0,max-content) minmax(14px,1fr) minmax(0,max-content);font-size:12px}
.pk-io>span{white-space:normal;border-radius:14px;text-align:center}
.pk-zone__sw,.pk-day__sw{max-width:100%}
@media (max-width:519px){
  .pk-zone__grid{grid-template-columns:1fr}
  .pk-zone__sw{display:flex;width:100%}.pk-zone__sw button{flex:1;padding:9px 8px;line-height:1.2}
  .pk-zone.is-in .pk-zone__dots i{animation-name:pkloopv}
}
@keyframes pkloopv{0%{opacity:0;left:12%;top:8%}10%{opacity:1}45%{left:12%;top:92%}55%{left:88%;top:92%}90%{left:88%;top:8%;opacity:1}100%{opacity:0;left:12%;top:8%}}
/* длинные подписи схемы данных — во всю ширину: модель сверху, CRM снизу, агент и данные — в ряд */
.pk-zone__grid>p:nth-of-type(2){order:-1;grid-column:1/-1}
.pk-zone__grid>p:nth-of-type(4){grid-column:1/-1}