/* Тест-драйв «ИИ, вайбкод и агенты»: блоки, которых нет в странице Content System.
   Загружается последним, использует токены из light-theme.css. */

/* ---------- Первый экран ---------- */
.hero-kicker{margin:0 0 18px}
.hero-note{max-width:470px;margin:20px 0 0;font-size:14px;line-height:1.65;color:var(--muted)}
.hero-art .poster-deck{left:3%;top:1%;width:62%}
.hero-platforms svg{width:21px;height:21px;flex-shrink:0}

/* ---------- Общие блоки внутри статьи ---------- */
.article-body>.vb-block{max-width:800px;margin:30px auto}
.article-body .vb-block p{max-width:none;margin:0;font-size:15px;line-height:1.65;color:#60605a}
.vb-caption{margin-top:14px!important;font-size:13px!important;color:var(--muted)!important;text-align:center}

/* Нумерованная петля */
.article-body>ol.vb-loop{counter-reset:vb;list-style:none;padding:0;margin-top:26px;margin-bottom:30px;max-width:800px}
.article-body>ol.vb-loop>li{counter-increment:vb;position:relative;margin:0;padding:17px 0 17px 56px;border-bottom:1px solid var(--line);color:#50504a}
.article-body>ol.vb-loop>li:first-child{border-top:1px solid var(--line)}
.article-body>ol.vb-loop>li:before{content:counter(vb);position:absolute;left:0;top:16px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#f3d0c5;color:#57352a;font-weight:800;font-size:15px;line-height:1}

/* Карточки установки */
.vb-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vb-card{display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;background:#fff;border:1px solid var(--line);border-radius:14px}
.vb-tag{font:10px/1.4 ui-monospace,monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--red)}
.vb-card b{font-size:17px;line-height:1.3;letter-spacing:-.02em;color:var(--fg)}
.article-body .vb-card p{font-size:14px;line-height:1.6}

/* Мини-приложение */
.vb-app-window{max-width:560px;margin:0 auto;overflow:hidden;background:#fff;border:1px solid #d6d6cc;border-radius:14px;box-shadow:0 18px 44px #3030271f;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.vb-app-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f1f1ed;border-bottom:1px solid #e3e3dc}
.vb-app-bar i{width:9px;height:9px;border-radius:50%;background:#ff6057}
.vb-app-bar i:nth-child(2){background:#ffbd2e}
.vb-app-bar i:nth-child(3){background:#28c840}
.vb-app-bar span{margin-left:10px;font:11px ui-monospace,monospace;color:#8a8a80}
.vb-app-body{padding:22px 22px 24px}
.vb-app-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.vb-app-head b{font-size:22px;letter-spacing:-.03em;color:#252522}
.vb-app-head span{font-size:12px;color:#8a8a80}
.vb-app-input{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;margin-bottom:14px;border:1px solid #dcdcd5;border-radius:10px;font-size:14px;color:#9a9a90}
.vb-app-input em{padding:6px 12px;border-radius:8px;background:#252522;font-style:normal;font-size:12px;font-weight:700;color:#fff}
.vb-app-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.vb-app-chips i{padding:5px 12px;border:1px solid #dcdcd5;border-radius:99px;font-style:normal;font-size:12px;color:#60605a}
.vb-app-chips i.is-on{background:#f3d0c5;border-color:#e1aa98;color:#57352a}
.vb-app-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vb-app-list li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #ebebe5;border-radius:10px;background:#fbfbf9}
.vb-app-list b{display:block;font-size:14px;line-height:1.35;color:#252522}
.vb-app-list small{display:block;margin-top:2px;font-size:12px;color:#8a8a80}
.vb-dot{flex-shrink:0;width:14px;height:14px;border:2px solid #c6c6bc;border-radius:50%}
.vb-dot.is-work{border-color:#d9822b;background:#f6d9b0}
.vb-dot.is-done{border-color:#5b8a4d;background:#5b8a4d}

/* Карточка с промптом */
.vb-prompt{overflow:hidden;background:#252522;border-radius:14px;color:#f1f0e9}
.vb-prompt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #3d3d37}
.vb-prompt-head span{font:11px/1.4 ui-monospace,monospace;letter-spacing:.8px;text-transform:uppercase;color:#b9b9ae}
.vb-prompt-head button{padding:7px 14px;border:1px solid #55554d;border-radius:8px;background:transparent;color:#f1f0e9;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.vb-prompt-head button:hover{background:#3a3a34}
.vb-prompt-head button:focus-visible{outline:2px solid #ee8068;outline-offset:2px}
.vb-prompt pre{margin:0;padding:18px 18px 20px;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.vb-prompt code{font:13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#f1f0e9}

/* Вопросы «а мне подойдет?» */
.vb-ladder{border-top:1px solid var(--line)}
.article-body .vb-ladder p{position:relative;padding:17px 0 17px 44px;border-bottom:1px solid var(--line);font-size:17px;line-height:1.6;color:var(--fg)}
.vb-ladder p:before{content:"";position:absolute;left:0;top:19px;width:26px;height:26px;border-radius:50%;background:#f3d0c5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357352a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat}

/* Гарантия */
.vb-guarantee{display:flex;align-items:center;gap:28px;padding:26px 28px;background:#fff6f2;border:1px solid #efc8bb;border-radius:16px}
.vb-guarantee-num{flex-shrink:0;text-align:center}
.vb-guarantee-num b{display:block;font-size:68px;line-height:1;letter-spacing:-.05em;color:var(--red)}
.vb-guarantee-num span{display:block;margin-top:4px;font:11px ui-monospace,monospace;letter-spacing:1.4px;text-transform:uppercase;color:#8a4a38}
.article-body .vb-guarantee p{font-size:17px;line-height:1.6;color:var(--fg)}
.article-body .vb-guarantee p+p{margin-top:10px;font-size:15px;color:#60605a}

/* Что будет дальше */
.vb-next{border-top:1px solid var(--line)}
.vb-next .lesson{padding:20px 0}
.vb-next .lesson b{font-size:17px}
.article-body .vb-next .lesson p{margin:7px 0 0;font-size:14px;line-height:1.65}

/* P.S. */
.vb-ps{margin-top:44px!important;padding-top:28px;border-top:1px dashed #c6c6bc}
.article-body .vb-ps p{margin:0 0 16px}
.vb-ps p b{font-weight:800;color:var(--fg)}
.article-body .vb-ps .vb-ps-final{margin-top:26px;font-size:clamp(21px,2.6vw,30px);line-height:1.25;font-weight:800;letter-spacing:-.035em;color:var(--fg)}

@media(max-width:760px){
  .hero-note{font-size:13px;text-align:left}
  .hero-art .poster-deck{left:3%;top:1%;width:62%}
  .hero-platforms svg{width:18px;height:18px}
  .vb-cards{grid-template-columns:1fr}
  .vb-app-body{padding:16px 14px 18px}
  .vb-app-head b{font-size:19px}
  .vb-guarantee{flex-direction:column;align-items:flex-start;gap:14px;padding:22px 20px}
  .vb-guarantee-num{display:flex;align-items:baseline;gap:10px}
  .vb-guarantee-num b{font-size:56px}
  .article-body .vb-ladder p{font-size:16px;padding-left:40px}
  .article-body>ol.vb-loop>li{padding-left:50px}
  .vb-prompt code{font-size:12.5px}
}

/* ---------- Материалы из лид-магнита: автор, доказательства, отзывы ---------- */
.vb-author{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center}
.vb-author img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:16px;border:1px solid var(--line)}
.article-body .vb-author p{font-size:18px;line-height:1.75;color:#50504a;margin:0 0 16px}
.article-body .vb-author p:last-child{margin-bottom:0;color:var(--fg)}
.article-body>.vb-proof .case-copy p{font-size:17px;line-height:1.75}
.article-body>.vb-proof .case-metrics dd{font-size:clamp(24px,2.7vw,36px)}
.article-body>.vb-proof .case-metrics dt{font-size:12px;line-height:1.45}
.vb-proof-media{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;max-width:800px;margin:26px auto 8px;align-items:start}
.vb-proof-media figure{margin:0;min-width:0}
.vb-proof-media .case-screenshot-link{background:#fff}
.vb-proof-media figcaption{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.article-body>.vb-proof .case-closing{font-size:16px}
.vb-figcaption{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--muted);text-align:center}
.vb-figcaption a{color:var(--red);text-underline-offset:3px}
.article-illustration img{border:0}
figure.vb-quote{display:flex;align-items:flex-start;gap:18px;padding:22px 24px;margin:26px auto;background:#fff;border:1px solid var(--line);border-radius:16px}
.vb-quote-photo{flex-shrink:0;width:64px;height:64px;border-radius:50%;object-fit:cover}
.article-body .vb-quote p.vb-quote-text{margin:0 0 12px;font-size:18px;line-height:1.6;letter-spacing:-.01em;color:var(--fg)}
.vb-quote figcaption{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.4;color:var(--muted)}
.vb-quote figcaption b{font-size:14px;color:var(--fg)}
.article-body>p.vb-source{font-size:13px;line-height:1.6;color:var(--muted)}
.vb-contact{margin:34px 0 0;font-size:15px;color:var(--muted)}
.vb-contact a{color:var(--red);font-weight:700;text-underline-offset:3px}
@media(max-width:760px){
  .vb-author{grid-template-columns:1fr;gap:18px}
  .vb-author img{max-width:240px}
  .article-body .vb-author p{font-size:16px}
  .vb-proof-media{grid-template-columns:1fr}
  figure.vb-quote{flex-direction:column;gap:14px;padding:20px}
  .article-body .vb-quote p.vb-quote-text{font-size:16px}
}
@media(max-width:760px){
  .article-body>.vb-proof .case-metrics{grid-template-columns:1fr;gap:16px}
  .article-body>.vb-proof .case-metrics dd{font-size:30px}
  .article-body>.vb-proof .case-metrics dt{font-size:13px}
}

/* Четыре результата в hero: две колонки вместо трех */
.hero-results>div{grid-template-columns:repeat(2,max-content)}

/* Едва заметные логотипы Codex (OpenAI) и Claude на фоне первого экрана */
.hero{position:relative;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;user-select:none}
.hero-bg-logo{position:absolute;display:block;height:auto;max-width:none;filter:blur(7px);opacity:.075}
.hero-bg-claude{width:min(40vw,370px);right:30%;top:-4%;transform:rotate(14deg);opacity:.16;filter:blur(6px)}
@media(max-width:760px){
    .hero-bg-claude{width:200px;right:8px;top:0;opacity:.14}
}

/* Карточка приложения в hero: больше похожа на настоящее web-приложение */


/* ---------- Карточка web-приложения в первом экране ---------- */



/* ---------- Карточка web-приложения в первом экране (компактная, с анимацией) ---------- */
.hero-app-card{position:absolute;left:6%;bottom:9%;z-index:4;width:41%;overflow:hidden;border-radius:16px;background:#fff;border:1px solid #e1e1d9;box-shadow:0 1px 0 #fff inset,0 2px 6px #3030271a,0 24px 46px -14px #30302744;transform:rotate(-4deg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;pointer-events:none}
.hac-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:7px 10px;background:linear-gradient(#fcfcfa,#f2f2ee);border-bottom:1px solid #e6e6df}
.hac-dots{display:flex;gap:4px}
.hac-dots i{width:6px;height:6px;border-radius:50%;background:#ff6057}
.hac-dots i:nth-child(2){background:#ffbd2e}
.hac-dots i:nth-child(3){background:#28c840}
.hac-url{display:inline-flex;align-items:center;gap:4px;padding:2px 11px;border-radius:99px;background:#fff;border:1px solid #e3e3dc;font-size:8.5px;font-weight:700;line-height:1.5;color:#55554d;letter-spacing:.2px}
.hac-url svg{width:8px;height:8px;color:#8a8a80}
.hac-body{padding:10px 10px 11px;background:linear-gradient(#fff,#fbfbf9)}
.hac-head{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.hac-logo{display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;border-radius:7px;background:linear-gradient(145deg,#f59a82,#dc6046);color:#fff;box-shadow:0 3px 8px -2px #dc604666}
.hac-logo svg{width:13px;height:13px}
.hac-title b{display:block;font-size:12.5px;line-height:1.2;letter-spacing:-.02em;color:#252522}
.hac-title small{display:block;font-size:8.5px;line-height:1.3;color:#8a8a80}
/* два состояния в одной ячейке: «до» и «после» */
.hac-swap,.hac-title small.hac-swap{display:grid}
.hac-swap>*{grid-area:1/1}
.hac-swap .hac-b{opacity:0}
.hac-progress{margin-bottom:8px;padding:7px 9px 8px;border-radius:10px;background:linear-gradient(135deg,#fff3ee,#fbe4db);border:1px solid #f5d5c9}
.hac-progress-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px}
.hac-progress-top span{font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#a0543e}
.hac-progress-top strong{font-size:11.5px;letter-spacing:-.02em;color:#3a2a24;text-align:right}
.hac-meter{position:relative;height:5px;border-radius:99px;background:#f5d3c6;overflow:hidden}
.hac-meter i{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:99px}
.hac-fill-a{width:42%;background:linear-gradient(90deg,#f0836a,#d9573b)}
.hac-fill-b{width:42%;opacity:0;background:linear-gradient(90deg,#f3b24d,#6fb05a)}
.hac-body ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
.hac-body li{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:9px;background:#fff;border:1px solid #ececE5;box-shadow:0 1px 2px #3030270a}
.hac-check{position:relative;flex-shrink:0;display:grid;place-items:center;width:13px;height:13px;border:1.5px solid #c6c6bc;border-radius:50%;background:transparent}
.hac-check svg{width:8px;height:8px;opacity:0}
.hac-check.is-done{border-color:#5b8a4d;background:#5b8a4d}
.hac-check.is-done svg{opacity:1}
.hac-text{flex:1;min-width:0}
.hac-name{position:relative;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:top;font-size:9.5px;font-weight:600;line-height:1.3;color:#252522;white-space:nowrap}
.hac-name.is-struck{color:#9a9a90;text-decoration:line-through}
.hac-strike{position:absolute;left:0;top:52%;height:1px;width:0;background:#9a9a90}
.hac-body li em{display:block;padding:2px 7px;border-radius:99px;background:#fbe0d6;font-style:normal;font-size:8px;font-weight:700;line-height:1.3;text-align:center;color:#9a4a35}
.hac-body li em.is-blue{background:#dde8f6;color:#3f5f8f}
.hac-body li em.is-green{background:#dfeedb;color:#4a6e3f}
.hac-tag{flex-shrink:0}

/* Цикл 9 секунд: отметили «Бот для заявок» — счетчик 5 → 6, полоса уходит из красного в зеленый, затем сброс */
@keyframes hac-a-out{0%,38%{opacity:1}44%,88%{opacity:0}95%,100%{opacity:1}}
@keyframes hac-b-in{0%,38%{opacity:0}44%,88%{opacity:1}95%,100%{opacity:0}}
@keyframes hac-fill-w{0%,38%{width:42%}50%,88%{width:50%}95%,100%{width:42%}}
@keyframes hac-fill-b-in{0%,38%{opacity:0;width:42%}50%,88%{opacity:1;width:50%}95%,100%{opacity:0;width:42%}}
@keyframes hac-check-fill{0%,36%{border-color:#c6c6bc;background:transparent;transform:scale(1)}40%{transform:scale(1.25)}44%,88%{border-color:#5b8a4d;background:#5b8a4d;transform:scale(1)}95%,100%{border-color:#c6c6bc;background:transparent;transform:scale(1)}}
@keyframes hac-tick{0%,40%{opacity:0}46%,88%{opacity:1}95%,100%{opacity:0}}
@keyframes hac-strike-line{0%,42%{width:0}52%,88%{width:100%}95%,100%{width:0}}
@keyframes hac-name-dim{0%,44%{color:#252522}52%,88%{color:#9a9a90}95%,100%{color:#252522}}
@keyframes hac-row-pulse{0%,36%{box-shadow:0 1px 2px #3030270a}40%{box-shadow:0 0 0 3px #f3d0c5,0 4px 10px -2px #dc604644}50%,100%{box-shadow:0 1px 2px #3030270a}}
.hac-swap .hac-a{animation:hac-a-out 9s ease-in-out infinite}
.hac-swap .hac-b{animation:hac-b-in 9s ease-in-out infinite}
.hac-fill-a{animation:hac-fill-w 9s ease-in-out infinite}
.hac-fill-b{animation:hac-fill-b-in 9s ease-in-out infinite}
.hac-li-bot{animation:hac-row-pulse 9s ease-in-out infinite}
.hac-li-bot .hac-check{animation:hac-check-fill 9s ease-in-out infinite}
.hac-li-bot .hac-check svg{animation:hac-tick 9s ease-in-out infinite}
.hac-li-bot .hac-strike{animation:hac-strike-line 9s ease-in-out infinite}
.hac-li-bot .hac-name{animation:hac-name-dim 9s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .hac-swap .hac-a,.hac-swap .hac-b,.hac-fill-a,.hac-fill-b,.hac-li-bot,.hac-li-bot .hac-check,.hac-li-bot .hac-check svg,.hac-li-bot .hac-strike,.hac-li-bot .hac-name{animation:none}
}
@media(max-width:760px){
  .hero-app-card{left:5%;bottom:10%;width:46%}
  .hac-bar{padding:6px 8px}
  .hac-body{padding:8px 8px 9px}
  .hac-title b{font-size:11.5px}
  .hac-name{font-size:9px}
}

/* Карточка приложения и ролик: одинаковая ширина и общая нижняя линия */
.art-stage .hero-app-card{left:4%;bottom:9%;width:41%;z-index:6;transform:rotate(-7deg)}
.art-stage .phone-preview{right:5%;bottom:9%;width:41%}
@media(max-width:760px){
  .art-stage .hero-app-card{left:2%;bottom:9%;width:45%}
  .art-stage .phone-preview{right:2%;bottom:9%;width:45%}
  .art-stage .hero-app-card{transform:rotate(-4deg)}
  .art-stage .phone-preview{transform:rotate(4deg)}
  .hac-body li{gap:5px;padding:5px 6px}
  .hac-name{font-size:8.5px}
  .hac-body li em{padding:2px 5px;font-size:7px}
  .hac-check{width:11px;height:11px}
}
@media(max-width:480px){
  .hac-tag{display:none}
}


/* ---------- Первый экран v2: уверенность в покупке ---------- */
.hero-pill-row{margin:0 0 14px}
.hero-pill{display:inline-block;padding:5px 12px;border-radius:99px;background:#f3d0c5;color:#57352a;font-size:12px;font-weight:800;letter-spacing:.01em}
.hero-assure{margin-top:16px;max-width:480px}
.hero-assure-value{margin:0 0 8px;font-size:14.5px;line-height:1.5;font-weight:600;color:var(--fg)}
.hero-assure-value{text-wrap:balance}
.hero-assure-value b{color:var(--red);white-space:nowrap}
.hero-assure-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted)}
.hero-assure-list li{display:inline-flex;align-items:center;gap:6px}
.hero-assure-list li:before{content:"";width:14px;height:14px;border-radius:50%;background:#dfeedb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6e3f' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/9px no-repeat}
.hero-author{display:flex;align-items:center;gap:12px;margin-top:18px;max-width:480px}
.hero-author img{flex-shrink:0;width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid #fff;box-shadow:0 2px 8px #3030272e}
.hero-author p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.hero-author b{color:var(--fg)}
@media(max-width:760px){
  .hero-assure{text-align:center}
  .hero-assure{margin-left:auto;margin-right:auto}
  .hero-assure-list{justify-content:center}
  .hero-author{margin-left:auto;margin-right:auto;text-align:left}
}


/* ---------- История: сравнение чата и агента, промежуточные призывы ---------- */
.vb-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vb-compare-col{padding:18px 20px 20px;border-radius:14px;border:1px solid var(--line);background:#f4f4f0}
.vb-compare-col.is-agent{background:#fff6f2;border-color:#efc8bb}
.vb-compare-col .vb-tag{display:block;margin-bottom:8px}
.vb-compare-col.is-chat .vb-tag{color:#8a8a80}
.article-body .vb-compare-col p{font-size:15px;line-height:1.65;color:#50504a}
.vb-inline-cta{margin:34px auto!important;padding:26px 24px;text-align:center;border-radius:16px;background:#fff6f2;border:1px solid #efc8bb}
.article-body .vb-inline-cta p{margin:0 0 16px;font-size:clamp(18px,2.2vw,22px);line-height:1.4;font-weight:800;letter-spacing:-.025em;color:var(--fg)}
.vb-inline-cta .cta{display:inline-block}
.vb-inline-cta small{display:block;margin-top:12px;font-size:13px;color:var(--muted)}
@media(max-width:760px){
  .vb-compare{grid-template-columns:1fr}
  .vb-inline-cta{padding:22px 18px}
}

/* Заголовок «А теперь что внутри тест-драйва?»: как заголовок блока истории, акцент — красным */
.article-body>.vb-inside-h{max-width:1000px;margin:70px auto 20px;font-size:clamp(35px,4.3vw,61px);line-height:1.12;letter-spacing:-.045em;text-align:center;text-wrap:balance}
.article-body>.vb-inside-h em{font-style:normal;color:var(--red)}
@media(max-width:760px){.article-body>.vb-inside-h{font-size:34px;line-height:1.14;letter-spacing:-1.2px;margin-top:50px}}

/* Блок гарантий в оффере без горизонтальных линий (только на landing2.html: класс --plain) */
.offer-assurances.offer-assurances--plain{border-top:0;border-bottom:0;padding-top:0;padding-bottom:0}


/* Кнопка «Оформить заказ» (landing2): черная, белый текст, редкий блик */
#purchase.cta.cta--dark-shine{position:relative;overflow:hidden;background:#1f1f1c;color:#fff;opacity:1;box-shadow:0 10px 24px -10px #1f1f1c99}
#purchase.cta.cta--dark-shine:hover{background:#000}
.cta--dark-shine::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-20deg);pointer-events:none;animation:vb-shine 7s ease-in-out infinite}
@keyframes vb-shine{0%,78%{left:-60%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.cta--dark-shine::after{animation:none;display:none}}

/* Carousel block: same width as the article text column, centered copy, arrows near the cards */
.article-body>.homepage-carousel{max-width:800px;margin-left:auto;margin-right:auto}
.homepage-carousel-shell{padding:32px 24px 28px}
.homepage-carousel-copy{box-sizing:border-box;width:100%;max-width:100%;margin-inline:auto;padding-inline:0;text-align:center;justify-items:center}
.homepage-carousel-copy h2{max-width:100%;margin-inline:auto;font-size:clamp(28px,3.6vw,42px);text-align:center}
.homepage-carousel-copy p{max-width:100%;margin-inline:auto;font-size:clamp(14px,1.3vw,16px);text-align:center;text-wrap:pretty}
.homepage-carousel-stage{width:100%;box-sizing:border-box}
.homepage-carousel-nav--prev{left:0}.homepage-carousel-nav--next{right:0}
@media(min-width:761px){
 .homepage-carousel-shell{padding:36px 28px 30px}
 .homepage-carousel-card{width:min(260px,34vw)}
 .homepage-carousel-stage{min-height:calc(min(260px,34vw)*4/3 + 32px)}
 .homepage-carousel-nav--prev{left:0}.homepage-carousel-nav--next{right:0}
}
@media(max-width:760px){
 .homepage-carousel-shell{padding:24px 16px 22px}
 .homepage-carousel-nav{width:38px;height:38px}
}

/* Before/after Reels: larger frames on desktop (the "before" frame stays half the width of "after") */
@media(min-width:761px){
 /* size is now width-based, see the rule at the end of the file */
}

/* Anthropic expectations chart (translated and redrawn) */
.article-body>.vb-chart{max-width:800px;margin:34px auto;padding:26px 24px 20px;border:1px solid var(--line,#dcdcd5);border-radius:22px;background:var(--surface,#f0f0ed);color:var(--fg,#252522);font-size:14px;line-height:1.4}
.vb-chart-head{display:grid;gap:6px;text-align:center;margin-bottom:14px}
.vb-chart-head b{font-size:clamp(19px,2.4vw,24px);line-height:1.2;letter-spacing:-.03em}
.vb-chart-head span{color:var(--muted,#676761);font-size:13px}
.vb-chart-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0 0 18px;font-size:13px;font-weight:600}
.vb-chart-legend span{display:inline-flex;align-items:center;gap:8px}
.vb-dot{width:12px;height:12px;border-radius:4px;display:inline-block}
.vb-dot--staff,.vb-bar--staff i{background:#e8643a}.vb-dot--people,.vb-bar--people i{background:#9a9a90}
.vb-chart-row{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:4px 14px;align-items:center;padding:9px 8px;border-top:1px solid var(--line,#dcdcd5)}
.vb-chart-cols{border-top:0;padding-block:0 8px;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#676761);text-align:left}
.vb-chart-row.is-key{background:#e8643a14;border-radius:12px;border-top-color:transparent}
.vb-chart-task{font-weight:700;font-size:13.5px}
.vb-chart-cell{display:grid;gap:4px}
.vb-bar{position:relative;display:flex;align-items:center;gap:6px;height:14px}
.vb-bar i{display:block;height:100%;width:calc(var(--v)*.72%);border-radius:0 4px 4px 0;min-width:3px}
.vb-bar b{font-size:11.5px;font-weight:700;color:var(--muted,#676761);white-space:nowrap}
.vb-bar--staff b{color:var(--fg,#252522)}
.vb-chart-src{margin:14px 0 0!important;font-size:12px!important;line-height:1.5!important;color:var(--muted,#676761)!important;text-align:center}
.vb-chart-src a{color:inherit;text-decoration:underline}
@media(max-width:640px){
 .article-body>.vb-chart{padding:20px 14px 16px;border-radius:18px}
 .vb-chart-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px}
 .vb-chart-task{grid-column:1/-1;font-size:13px}
 .vb-chart-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .vb-chart-cols [role=columnheader]:first-child{display:none}
 .vb-chart-cols [role=columnheader]{font-size:10.5px;letter-spacing:.03em}
 .vb-bar b{font-size:10.5px}
 .vb-bar i{width:calc(var(--v)*.6%)}
}

/* Guarantee as a certificate: frame, label, signature and seal */
.article-body .vb-block.vb-guarantee{position:relative;display:block;padding:26px 30px 24px;background:linear-gradient(180deg,#fffdfa,#fff4ee);border:1px solid #e9bfae;border-radius:18px;box-shadow:0 14px 34px #b8442b14}
.vb-guarantee::before{content:"";position:absolute;inset:7px;border:1.5px solid #efcdbf;border-radius:12px;pointer-events:none}
.vb-guarantee-label{display:flex;align-items:center;gap:14px;margin-bottom:18px;font:700 11px ui-monospace,monospace;letter-spacing:.22em;text-transform:uppercase;color:#a24a33}
.vb-guarantee-label::before,.vb-guarantee-label::after{content:"";flex:1;height:1px;background:#e7c2b3}
.vb-guarantee-main{position:relative;display:flex;align-items:center;gap:28px}
.vb-guarantee-foot{position:relative;display:flex;align-items:flex-end;gap:22px;margin-top:20px;padding-top:6px}
.vb-guarantee-sign{position:relative;flex:none;width:280px;height:118px}
.vb-sign-img{position:absolute;left:0;bottom:4px;width:178px;height:auto;mix-blend-mode:multiply}
.vb-seal-img{position:absolute;right:0;top:-8px;width:126px;height:auto;transform:rotate(-9deg);opacity:.93;mix-blend-mode:multiply}
.article-body .vb-guarantee-by{margin:0;padding-bottom:10px;line-height:1.35;color:var(--fg)}
.vb-guarantee-by b{display:block;font-size:16px}
.vb-guarantee-by span{display:block;font-size:13px;color:#8a6a5e}
@media(max-width:760px){
 .article-body .vb-block.vb-guarantee{padding:22px 18px 20px}
 .vb-guarantee-label{font-size:10px;letter-spacing:.16em;gap:10px}
 .vb-guarantee-main{flex-direction:column;align-items:flex-start;gap:12px}
 .vb-guarantee-foot{gap:10px;flex-wrap:wrap}
 .vb-guarantee-sign{width:220px;height:96px}
 .vb-sign-img{width:140px}
 .vb-seal-img{width:96px}
}

/* Document-style footer: signature line on the left, seal (М.П.) on the right */
.vb-guarantee-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:22px;padding-top:0}
.vb-guarantee-signer{flex:0 1 300px;min-width:0}
.vb-doc-role{display:block;font:700 10.5px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#a24a33}
.vb-doc-line{position:relative;height:74px;border-bottom:1.5px solid #3a3a34}
.vb-doc-line .vb-sign-img{position:absolute;left:14px;bottom:-4px;width:176px;height:auto;mix-blend-mode:multiply}
.vb-doc-name{display:block;margin-top:6px;font-size:14px;font-weight:700;color:var(--fg)}
.vb-guarantee-stamp{position:relative;flex:none;display:flex;align-items:flex-end;gap:10px}
.vb-doc-mp{padding-bottom:8px;font:700 12px ui-monospace,monospace;letter-spacing:.08em;color:#8a6a5e}
.vb-guarantee-stamp .vb-seal-img{position:static;width:132px;height:auto;transform:rotate(-8deg);opacity:.94;mix-blend-mode:multiply}
@media(max-width:760px){
 .vb-guarantee-foot{gap:12px}
 .vb-guarantee-signer{flex:1 1 0}
 .vb-doc-line{height:62px}
 .vb-doc-line .vb-sign-img{left:6px;width:132px}
 .vb-guarantee-stamp{gap:4px}
 .vb-guarantee-stamp .vb-seal-img{width:92px}
 .vb-doc-mp{font-size:11px}
}

/* Signature: smaller, short line, neater caption */
.vb-guarantee-signer{flex:none;width:200px}
.vb-doc-role{margin-bottom:2px;font-size:9.5px;letter-spacing:.18em}
.vb-doc-line{height:50px;border-bottom:1px solid #6d6a61}
.vb-doc-line .vb-sign-img{left:22px;bottom:-7px;width:118px}
.vb-doc-name{margin-top:7px;font-size:13px;font-weight:600;letter-spacing:-.01em}
.vb-guarantee-stamp .vb-seal-img{width:116px}
.vb-doc-mp{padding-bottom:6px;font-size:10.5px}
@media(max-width:760px){
 .vb-guarantee-signer{flex:none;width:168px}
 .vb-doc-line{height:44px}
 .vb-doc-line .vb-sign-img{left:16px;width:100px}
 .vb-guarantee-stamp .vb-seal-img{width:90px}
}

/* Hero: small browser with a landing screenshot instead of the "Банк идей" app */
.hac-site{position:relative;aspect-ratio:4/5;overflow:hidden;background:#fff}
.hac-site img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

/* Block 3: browser window with the landing screenshot */
.vb-site .vb-app-window{max-width:360px;margin-inline:auto}
.vb-site-body{position:relative;aspect-ratio:4/5;overflow:hidden;background:#fff;border-radius:0 0 12px 12px}
.vb-site-body img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

/* Path: idea -> PRD -> build -> landing (publication is outside the test drive) */
.vb-path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:26px 0 8px}
.vb-path-step{position:relative;display:grid;gap:4px;padding:14px 12px 13px;background:var(--surface,#f0f0ed);border:1px solid var(--line,#dcdcd5);border-radius:14px}
.vb-path-step span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#f3d0c5;color:#57352a;font:800 13px/1 Manrope,sans-serif}
.vb-path-step b{font-size:16px;letter-spacing:-.02em}
.vb-path-step small{font-size:12px;line-height:1.35;color:var(--muted,#676761)}
.vb-path-step:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:8px;border-top:2px solid #c9a99d;border-right:2px solid #c9a99d;transform:translateY(-50%) rotate(45deg)}
.vb-path-step.is-later{background:transparent;border-style:dashed;opacity:.6}
.vb-path-step.is-later span{background:#e4e2db;color:#77746b}
@media(max-width:760px){
 .vb-path{grid-template-columns:1fr 1fr}
 .vb-path-step:not(:last-child)::after{display:none}
 .vb-path-step.is-later{grid-column:1/-1}
}

/* Full landing screenshot inside the browser frames: the page scrolls slowly in a loop */
.hac-site,.vb-site-body{position:relative;overflow:hidden;background:#fff;container-type:inline-size}
.hac-site{aspect-ratio:4/5}
.vb-site-body{aspect-ratio:4/5;border-radius:0 0 12px 12px}
.hac-site img,.vb-site-body img{--img-ratio:5.0254;display:block;width:100%;height:auto;max-width:none;object-fit:initial;animation:vb-page-scroll 22s ease-in-out infinite;will-change:transform}
@keyframes vb-page-scroll{
 0%,12%{transform:translateY(0)}
 48%,60%{transform:translateY(calc(-100% * (1 - 1.25 / var(--img-ratio))))}
 100%{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.hac-site img,.vb-site-body img{animation:none}}

/* Hero caption sits below the art stage (never over the phone or the browser card) */
.hero-art .hero-result-label{position:static;margin-top:14px;padding:0 6px;line-height:1.35;text-wrap:balance}

/* Hero title: small brand logo first, then "Codex / ChatGPT" (same order as the brand plate below) */
.hero-title-brand{display:inline-flex;align-items:center;gap:.2em;vertical-align:baseline}
.hero-title-brand img{width:.78em;height:.78em;display:inline-block;flex:none;align-self:center;object-fit:contain;transform:translateY(-.04em)}

/* Hero: phone and browser card sit at the bottom of the stage, caption right under them */
.art-stage .hero-app-card,.art-stage .phone-preview{bottom:2.5%}
.hero-art .hero-result-label{margin-top:12px}

/* Before/after block: no divider line above it */
.article-body>.montage-showcase{border-top:0}

/* Before/after Reels: size from the column width (not the window height), tight spacing */
.montage-showcase .montage-comparison{--comparison-after-width:min(360px,calc((min(800px,100vw - 64px) - 44px)/1.5))}
.article-body>.montage-showcase{margin:14px 0 0;padding:18px 0 26px}
@media(max-width:760px){
 .montage-showcase .montage-comparison{--comparison-after-width:min(300px,calc((100vw - 40px - 34px)/1.5))}
 .article-body>.montage-showcase{margin:10px 0 0;padding:14px 0 22px}
}

/* Manrope 600 for visitors who do not have the font installed (latin + cyrillic subsets) */
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/manrope-cyrillic-600.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/manrope-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* CTA links that open the order popup, and the hero Reels still image */
[data-order-open]{cursor:pointer}
[data-hero-reel] .hero-reel-still{display:block;width:100%;height:100%;object-fit:cover}
[data-hero-reel] video{display:block;width:100%;height:100%;object-fit:cover}

/* The montage error hint is not shown: a blocked start is retried by a tap on the play button */
.comparison-status{display:none!important}

/* No play button anywhere: videos autoplay muted; the only control is the sound toggle */
video::-webkit-media-controls,video::-webkit-media-controls-enclosure,video::-webkit-media-controls-panel,video::-webkit-media-controls-start-playback-button,video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0!important}
.comparison-video{cursor:default}
.comparison-video-controls{opacity:1!important;visibility:visible!important;background:none!important}
.comparison-before .comparison-video-controls{display:none}

/* Sound icon: the cross for "muted" is a line path, so it needs a stroke to be visible */
.comparison-sound-control .sound-muted-mark{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* Play button only on the "after" video, visible while the videos are stopped */
.comparison-after .comparison-play-control{display:grid!important;opacity:1!important;visibility:visible!important;width:64px;height:64px;pointer-events:auto}
[data-montage-state="playing"] .comparison-after .comparison-play-control{display:none!important}

/* Screenshots: scrolled by script inside the frame, so no animated oversized layer */
.hac-site img,.vb-site-body img{animation:none!important;will-change:auto!important;transform:none!important}
.hac-site,.vb-site-body{overflow:hidden}
/* Custom Play on the top video: centered, only while the video is stopped */
[data-hero-reel]{position:absolute}
.hero-reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:56px;height:56px;padding:0;border:1px solid #ffffff70;border-radius:50%;background:#111c;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-reel-play[hidden]{display:none}
.hero-reel-play span{display:block;width:0;height:0;margin-left:4px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid #fff}

/* Mobile: taller purple hero card so the carousel stays readable above the browser card and the phone */
@media(max-width:760px){
 .art-stage{aspect-ratio:.72}
}

/* Mobile: author photo centered */
@media(max-width:760px){
 .vb-author img{justify-self:center;margin:0 auto}
}

/* Lesson cards: looping muted preview (no controls, no sound), kept at the card's own width, never stretched */
.vb-card-preview{position:relative;margin:0 0 14px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#f3f1eb;border:1px solid var(--line,#dcdcd5)}
.vb-card-preview video{display:block;width:100%;height:100%;object-fit:cover}
.vb-card-preview::after{content:"";position:absolute;inset:0;z-index:2;background:transparent}
.vb-card-preview video::-webkit-media-controls-start-playback-button,.vb-card-preview video::-webkit-media-controls-overlay-play-button,.vb-card-preview video::-webkit-media-controls{display:none!important;-webkit-appearance:none;opacity:0!important}