/* ============================================================
   TOVIAN — KILLER-BENTO (общий блок 6 инструментов)
   Подключается <link rel="stylesheet" href="killer-bento.css">.
   Требует токены (pv-styles.css → tovian-tokens.css) и шрифты
   Space Grotesk + Inter (уже грузятся на всех страницах).

   ПОДСВЕТКА: активной делает карточку класс .is-lit — ровно одна
   на страницу, ставится на ту фичу, что соответствует теме статьи.
   ============================================================ */

/* ============ БЛОК ============ */
.kbento-demo{position:relative;width:100%;isolation:isolate;}

/* фоновый логотип — бледный, просвечивает за плитками */
.kbento-stage{position:relative;}
.kbento-wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(58%,660px);aspect-ratio:122/40;z-index:0;pointer-events:none;
  background:rgba(238,241,232,.92);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20width%3D%22122%22%20height%3D%2240%22%20viewBox%3D%220%200%20122%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate(-51.7109%2C0)%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M64.8828%2016.0977L64.8828%2031.22L59.029%2031.22L59.029%2017.805L64.8828%2016.0977Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M72.1992%208.78125H51.7109V14.6351H72.1992V8.78125Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M87.8096%208.29297C92.1202%208.29299%2095.6151%2011.787%2095.6152%2016.0977V23.9023C95.6152%2028.2131%2092.1203%2031.708%2087.8096%2031.708H82.9316C78.621%2031.7079%2075.127%2028.213%2075.127%2023.9023V16.0977C75.1271%2011.7871%2078.6211%208.2931%2082.9316%208.29297H87.8096ZM83.4199%2013.6582C81.8034%2013.6582%2080.4922%2014.9694%2080.4922%2016.5859V23.415C80.4923%2025.0315%2081.8035%2026.3418%2083.4199%2026.3418H87.3223C88.9385%2026.3416%2090.2489%2025.0313%2090.249%2023.415V16.5859C90.249%2014.9695%2088.9386%2013.6584%2087.3223%2013.6582H83.4199Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M104.884%2031.2208L97.5664%208.78125H103.42L107.811%2025.367L112.201%208.78125H118.055L110.737%2031.2208H104.884Z%22%3E%3C%2Fpath%3E%3Crect%20x%3D%22126.838%22%20y%3D%228.78125%22%20width%3D%2222.4396%22%20height%3D%225.8538%22%20transform%3D%22rotate(90%20126.838%208.78125)%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M142.935%208.78308L150.252%2031.2227L144.398%2031.2227L140.008%2014.6369L135.617%2031.2227L129.764%2031.2227L137.081%208.78308L142.935%208.78308Z%22%3E%3C%2Fpath%3E%3Crect%20x%3D%22134.154%22%20y%3D%2223.4141%22%20width%3D%2211.7076%22%20height%3D%224.87817%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M153.18%208.78125H165.863C170.173%208.78125%20173.668%2012.2758%20173.668%2016.5866V31.2208H167.814V17.562C167.814%2015.9455%20166.504%2014.6351%20164.887%2014.6351H153.18V8.78125Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M159.033%2016.0977L159.033%2031.22L153.179%2031.22L153.179%2017.805L159.033%2016.0977Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20width%3D%22122%22%20height%3D%2240%22%20viewBox%3D%220%200%20122%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate(-51.7109%2C0)%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M64.8828%2016.0977L64.8828%2031.22L59.029%2031.22L59.029%2017.805L64.8828%2016.0977Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M72.1992%208.78125H51.7109V14.6351H72.1992V8.78125Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M87.8096%208.29297C92.1202%208.29299%2095.6151%2011.787%2095.6152%2016.0977V23.9023C95.6152%2028.2131%2092.1203%2031.708%2087.8096%2031.708H82.9316C78.621%2031.7079%2075.127%2028.213%2075.127%2023.9023V16.0977C75.1271%2011.7871%2078.6211%208.2931%2082.9316%208.29297H87.8096ZM83.4199%2013.6582C81.8034%2013.6582%2080.4922%2014.9694%2080.4922%2016.5859V23.415C80.4923%2025.0315%2081.8035%2026.3418%2083.4199%2026.3418H87.3223C88.9385%2026.3416%2090.2489%2025.0313%2090.249%2023.415V16.5859C90.249%2014.9695%2088.9386%2013.6584%2087.3223%2013.6582H83.4199Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M104.884%2031.2208L97.5664%208.78125H103.42L107.811%2025.367L112.201%208.78125H118.055L110.737%2031.2208H104.884Z%22%3E%3C%2Fpath%3E%3Crect%20x%3D%22126.838%22%20y%3D%228.78125%22%20width%3D%2222.4396%22%20height%3D%225.8538%22%20transform%3D%22rotate(90%20126.838%208.78125)%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M142.935%208.78308L150.252%2031.2227L144.398%2031.2227L140.008%2014.6369L135.617%2031.2227L129.764%2031.2227L137.081%208.78308L142.935%208.78308Z%22%3E%3C%2Fpath%3E%3Crect%20x%3D%22134.154%22%20y%3D%2223.4141%22%20width%3D%2211.7076%22%20height%3D%224.87817%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M153.18%208.78125H165.863C170.173%208.78125%20173.668%2012.2758%20173.668%2016.5866V31.2208H167.814V17.562C167.814%2015.9455%20166.504%2014.6351%20164.887%2014.6351H153.18V8.78125Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M159.033%2016.0977L159.033%2031.22L153.179%2031.22L153.179%2017.805L159.033%2016.0977Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;
  filter:blur(11px);}

/* ============ СЕТКА ============ */
.kbento{position:relative;z-index:1;display:grid;gap:13px;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,minmax(140px,auto));
  grid-template-areas:
    "t1 t2 t2 t2"
    "t1 t2 t2 t2"
    "t3 t4 t4 t5"
    "t3 t4 t4 t6";}
.kbento__tile[data-n="01"]{grid-area:t1}
.kbento__tile[data-n="02"]{grid-area:t2}
.kbento__tile[data-n="03"]{grid-area:t3}
.kbento__tile[data-n="04"]{grid-area:t4}
.kbento__tile[data-n="05"]{grid-area:t5}
.kbento__tile[data-n="06"]{grid-area:t6}

/* ============ ПЛИТКА ============ */
.kbento__tile{position:relative;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;cursor:pointer;
  border:1px solid var(--line);border-radius:22px;padding:clamp(20px,1.7vw,28px);
  background:rgba(14,15,19,.865);
  transition:border-color .45s var(--ease),transform .5s var(--ease),box-shadow .45s ease,background .45s ease;}
.kbento__num{position:relative;z-index:2;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:13px;letter-spacing:.02em;color:var(--faint);}
.kbento__body{position:relative;z-index:2;margin:auto 0;padding-top:18px;}
.kbento__foot{position:relative;z-index:2;}
.kbento__title{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;text-transform:lowercase;letter-spacing:-.03em;line-height:1.02;color:var(--ink);font-size:clamp(20px,1.9vw,27px);}
.kbento__desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:9px;max-width:30ch;color:var(--muted);font-size:13px;line-height:1.45;text-wrap:pretty;}

/* стрелка-переход */
.kbento__arrow{position:absolute;z-index:2;top:clamp(18px,1.5vw,24px);right:clamp(18px,1.5vw,24px);width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--lime-ink);
  transition:transform .4s var(--ease),background .4s ease,color .4s ease,border-color .4s ease;}
.kbento__arrow svg{width:15px;height:15px;display:block;}

/* крупная типографика на больших плитках */
.kbento__tile--lg .kbento__title{font-size:clamp(26px,2.9vw,40px);}
.kbento__tile--lg .kbento__desc{font-size:15px;max-width:42ch;-webkit-line-clamp:4;}

/* микро-CTA + триггер доверия — видны только на активной (is-lit) плитке */
.kbento__foot{display:none;}
.kbento__tile.is-lit .kbento__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px;max-width:100%;min-width:0;}
/* на компактной (одноклеточной) подсвеченной плитке прячем строку-доверие, чтобы CTA влезал без растягивания */
.kbento__tile.is-lit:not(.kbento__tile--lg) .kbento__free{display:none;}
.kbento__tile.is-lit .kbento__arrow{display:none;}
.kbento__cta{max-width:100%;box-sizing:border-box;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 18px;border-radius:999px;background:var(--ink-on-lime);color:var(--lime);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;text-transform:lowercase;letter-spacing:-.01em;transition:gap .35s var(--ease),transform .4s var(--ease);}
.kbento__cta svg{width:15px;height:15px;transition:transform .4s var(--ease);}
.kbento__tile.is-lit:hover .kbento__cta{gap:13px;}
.kbento__tile.is-lit:hover .kbento__cta svg{transform:translate(2px,-2px);}
.kbento__free{display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk',sans-serif;font-size:12.5px;text-transform:lowercase;color:rgba(10,11,10,.68);}
.kbento__free::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(10,11,10,.5);}

/* ховер: подъём + лаймовая рамка */
@media(hover:hover){
  .kbento__tile:hover{transform:translateY(-6px) scale(1.006);border-color:color-mix(in srgb,var(--lime) 55%,transparent);box-shadow:var(--shadow-md);background:rgba(22,24,30,.875);}
  .kbento__tile:hover .kbento__arrow{transform:translate(3px,-3px);border-color:var(--lime-ink);}
  .kbento__tile:active{transform:translateY(-1px) scale(.996);}
}
.kbento__tile:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}

/* ============ АКТИВНАЯ (ЛАЙМ) — переносится классом .is-lit ============ */
.kbento__tile.is-lit{background:linear-gradient(180deg,#bdf52e,#a8e80c);transition:background .3s ease,border-color .2s ease,transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;border-color:var(--lime);box-shadow:var(--shadow-lime);}
.kbento__tile.is-lit .kbento__num{color:rgba(10,11,10,.62);}
.kbento__tile.is-lit .kbento__title{color:var(--ink-on-lime);}
.kbento__tile.is-lit .kbento__desc{color:rgba(10,11,10,.74);}
.kbento__tile.is-lit .kbento__arrow{border-color:rgba(10,11,10,.28);color:var(--ink-on-lime);}
@media(hover:hover){
  .kbento__tile.is-lit:hover{border-color:var(--lime);background:linear-gradient(180deg,rgba(189,245,46,.875),rgba(168,232,12,.875));box-shadow:0 18px 44px rgba(168,232,12,.5);}
  .kbento__tile.is-lit:hover .kbento__arrow{border-color:rgba(10,11,10,.5);}
}

/* ============ АДАПТИВ ============ */
@media(max-width:820px) and (min-width:701px){
  .kbento{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:minmax(150px,auto);grid-template-areas:none;}
  .kbento__tile{grid-area:auto!important;}
  .kbento__tile--lg{grid-column:span 2;}
  .kbento__tile.is-lit:not(.kbento__tile--lg) .kbento__free{display:inline-flex;}
}
@media(max-width:700px){
  .kbento{height:auto;grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto;grid-template-areas:none;}
  .kbento__tile,.kbento__tile--lg{grid-area:auto!important;grid-column:auto;min-height:0;}
  .kbento__body{padding-top:20px;}
  .kbento__desc,.kbento__tile--lg .kbento__desc{-webkit-line-clamp:unset;display:block;}
  .kbento-wm{display:none;}
  .kbento__tile.is-lit:not(.kbento__tile--lg) .kbento__free{display:inline-flex;}
  .kbento__tile.is-lit .kbento__foot{flex-direction:column;align-items:stretch;gap:12px;}
  .kbento__cta{justify-content:center;width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .kbento__tile,.kbento__arrow{transition:none;}
  .kbento__tile:hover{transform:none;}
  .kbento__tile:hover .kbento__arrow{transform:none;}
  .kbento-wm{filter:none;}
}

/* ============ МОБИЛЬНЫЙ ГАРД ОТ БОКОВОГО СКРОЛЛА ============
   iOS ≤15 не знает overflow:clip (гард pv-styles «body{overflow-x:clip}»
   там падает в visible) → страницу можно возить пальцем от любого
   декоративного выступа. hidden — фолбэк, clip — поверх для новых. */
@media(max-width:900px){
  html,body{overflow-x:hidden;overflow-x:clip;}
}