/* Доклад о skill: подпись шаблона, карта на 5 блоков, мок слайда, цепочка на 8 шагов,
   печать документа, чек-лист в одну колонку, сетка шаблонов, демо входа, QR */

/* подпись шаблона (js/tpl.js) */
.tpl{position:absolute;right:120px;bottom:44px;font-size:20px;font-weight:500;color:var(--muted);letter-spacing:.02em;z-index:5}
.tpl b{font-family:"Druk";font-weight:500;color:var(--accent);margin-left:4px}
.hint{bottom:84px}

/* 02 карта на 5 блоков */
.map5{grid-template-columns:repeat(5,1fr)}
.map5 .card{min-height:300px}
.map5 .name{font-size:34px;line-height:40px}
.map5+.bar{margin-top:96px}

/* 08 таблица крупнее: строк мало */
.tcard.roomy{padding:28px 20px 14px}
.tcard.roomy .table{font-size:30px;line-height:42px}
.tcard.roomy .table th{font-size:24px}
.tcard.roomy .table td{padding:24px 24px}

/* 03 список + мок слайда */
.stars.why li{transition:color .4s}
.stars.why li.is-on{color:var(--g3)}
.mock{width:640px;justify-self:end;margin-top:6px;padding:28px 32px;display:flex;flex-direction:column;gap:16px}
.mock .mk-top{display:flex;gap:10px}
.mock .mk-top i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.22)}
.mock .mk-h{height:26px;width:62%;border-radius:8px;background:rgba(255,255,255,.55);margin:4px 0 8px}
.mk-row{display:flex;align-items:center;gap:18px;font-size:22px;color:var(--muted);transition:color .4s}
.mk-row .nm{width:180px;flex:none}
.mk-row .ln{flex:1;height:12px;border-radius:6px;background:rgba(255,255,255,.14)}
.mk-row .ok{width:40px;height:40px;flex:none;border-radius:50%;border:2px solid var(--card-border);display:grid;place-items:center;font-weight:700;font-size:20px;color:transparent;transition:all .4s var(--pop)}
.mk-row.is-on{color:#fff}
.mk-row.is-on .ok{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.1)}

/* 04 полосы под числами */
.cmpbar.wide{margin-top:56px}
.cmpbar.wide div{max-width:none;font-size:24px}

/* 05 цепочка на 8 шагов */
.pipe8 .stg{width:210px}
.pipe8 .stg .stripe{width:150px;height:110px;font-size:42px}
.pipe8 .stg .fl{display:block;margin-top:8px;font-size:18px;line-height:24px}
.pipe8 .stg.link .nm{color:var(--g3);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.pipe8 .stg:not(.link){cursor:default}

/* 06 документ печатается по строкам */
.typed-doc{padding:30px 34px}
.typed-doc .r{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:21px;line-height:30px;padding:14px 0;border-top:1px solid var(--line);color:var(--muted);
  opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s var(--ease)}
.typed-doc .r.on{opacity:1;transform:none}
.typed-doc .r b{color:var(--g3);font-weight:500}

/* 07 чек-лист в одну колонку */
.chkcard{max-width:1180px;padding:28px 44px 12px}
.chk1{columns:1;padding:0}
.chk1 label{font-size:30px;line-height:40px;padding:11px 0}
.chk1 .bx{width:34px;height:34px;margin-top:3px}
.chk1 input:checked+.bx::after{font-size:22px}
.chk1 label.fake{cursor:default}
.chk1 label.fake.bad{animation:shake .5s 2}

/* 11 сетка 12 шаблонов */
.tpls{gap:24px 32px}
.tpls .card{display:flex;align-items:center;gap:20px;min-height:132px;padding:24px 26px}
.tpls .card h3{font-size:24px;line-height:30px}
.tpls .card.here{border-color:var(--accent)}
.tpls .card.here::after{content:"вы здесь";position:absolute;top:-15px;right:20px;font-size:16px;line-height:26px;padding:0 12px;border-radius:999px;background:var(--accent)}
.when .c{color:var(--accent)}

/* 12 демо входа */
.ad{display:grid;grid-template-columns:760px 1fr;gap:80px;align-items:start}
.ad-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ad-btns .term{height:64px;justify-content:center;font-family:inherit;font-size:26px;color:#fff;background:transparent;cursor:pointer}
.ad-btns .term.is-on{border-color:var(--accent);background:rgba(237,106,37,.22)}
.ad-extra{display:flex;align-items:center;gap:40px;margin-top:48px}
.ad-extra svg{width:460px;height:120px;overflow:visible}
.ad-extra path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.ad-stage{height:440px;display:grid;place-items:center;border:1.5px dashed var(--card-border);border-radius:24px}
.ad-sample{width:480px;padding:36px}

/* 14 три шага крупно, команда печатается */
.steps5.roomy{gap:32px;max-width:1500px;margin-top:20px}
.steps5.roomy li{padding:36px 44px;gap:40px;font-size:40px;line-height:52px}
.steps5.roomy .circle{width:72px;height:72px;font-size:32px}
.typed::after{content:"▍";color:var(--accent);animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}

/* 15 закрытие с QR */
.links{display:flex;flex-direction:column;gap:16px;max-width:1150px}
.qr{position:absolute;right:0;bottom:0;width:300px;padding:24px;text-align:center}
.qr img{display:block;width:100%;height:auto;image-rendering:pixelated}
.qr .cap{margin-top:12px;font-size:22px;font-weight:500}