/* Статьи блога, политика, анкеты, 404 в дизайне Truekind (23.10.2026).
   Подключается последним на всех страницах tk_page() (build.py): после pages.css, home.css и quiz-tk.css.
   Токены дизайн-системы на этих страницах уже переопределены в quiz-tk.css (.tk-page), поэтому поля,
   варианты ответа и кнопки анкеты берут графит и Manrope сами. Здесь — заголовки (home.css обнуляет
   размеры h1–h4 внутри main), ширина колонок и блоки статьи в разметке главной: .qa, .story, .gift. */

/* колонки текста уже, чем .tk .wrap */
.tk-page .wrap:is(.article__head,.article__body,.result__in){max-width:860px}
.tk-page .wrap.article__body{max-width:760px}
.tk-page .wrap.apply__in{max-width:820px}

/* первый блок под фиксированной шапкой */
.tk-page main>.section:first-child{padding-top:clamp(120px,12vw,160px)}

/* ---------- статья блога ---------- */
.tk-page .article{padding:clamp(116px,11vw,150px) 0 clamp(56px,7vw,90px)}
.tk-page .article__back{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tk-ink-2);padding:0}
.tk-page .article__back:hover{color:var(--tk-ink)}
.tk-page .post__date{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--tk-ink-3)}
.tk-page .article__head h1{font-family:var(--tk-serif);font-weight:400;font-size:clamp(34px,5vw,62px);line-height:1.06;letter-spacing:-.02em;margin-top:18px}
.tk-page .article__cover{border-radius:24px;max-width:1100px;aspect-ratio:16/8;background:var(--tk-beige-2)}
.tk-page .article__body{font-size:18px;line-height:1.7;margin-top:clamp(36px,5vw,56px)}
.tk-page .article__body h2{font-family:var(--tk-serif);font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.15;letter-spacing:-.015em;margin:clamp(40px,6vw,64px) 0 16px}
.tk-page .article__body p{color:var(--tk-ink)}
.tk-page .article__body :is(b,strong){font-weight:600}
.tk-page .article__body a{text-decoration:underline;text-underline-offset:3px}
.tk-page .article__cta{background:var(--tk-powder);border-radius:18px;padding:clamp(24px,3vw,34px);gap:20px;margin:clamp(40px,6vw,64px) 0 8px}
.tk-page .article__cta p{font-family:var(--tk-serif);font-weight:400;font-size:clamp(20px,2.2vw,26px);line-height:1.25;color:var(--tk-ink)}
/* вопросы-ответы внутри статьи: вид блока «Вопросы» главной без его отступов */
.qa--inline{padding:0;margin-top:8px}
.qa--inline summary{font-size:17px}
.qa--inline details p{font-size:16px}
/* «Читайте также» */
.related{display:grid;gap:30px;margin-top:40px}
@media (min-width:860px){.related{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.related .story h3{font-size:clamp(20px,1.8vw,24px)}
/* финальный блок с анкетой */
.gift__lead{margin-top:20px;max-width:440px;font-size:17px}
.gift__card h3 i{font-family:var(--tk-serif)}

/* ---------- политика конфиденциальности ---------- */
.tk-page .doc{font-size:16px;line-height:1.7}
.tk-page .doc h1{font-family:var(--tk-serif);font-weight:400;font-size:clamp(34px,5vw,58px);line-height:1.06;letter-spacing:-.02em}
.tk-page .doc h2{font-family:var(--tk-sans);font-weight:600;font-size:clamp(19px,1.8vw,22px);line-height:1.3;letter-spacing:-.01em;margin:40px 0 12px}
.tk-page .doc li{color:var(--tk-ink-2)}
.tk-page .doc a{text-decoration:underline;text-underline-offset:3px}
.tk-page .doc .card{background:var(--tk-mist);border:0;border-radius:18px;box-shadow:none}
.tk-page .doc .updated{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tk-ink-3)}

/* ---------- анкета клиента /apply ---------- */
.tk-page .apply{padding:clamp(116px,11vw,150px) 0 clamp(56px,7vw,90px)}
.tk-page .apply h1{font-family:var(--tk-serif);font-weight:400;font-size:clamp(34px,5vw,58px);line-height:1.06;letter-spacing:-.02em}
.tk-page .apply .lead{color:var(--tk-ink-2);max-width:62ch}
.tk-page .apply__form{background:var(--tk-mist);box-shadow:none;border:0;border-radius:24px;backdrop-filter:none;-webkit-backdrop-filter:none}
.tk-page .field>label,.tk-page .field legend{font-weight:600}
.tk-page .apply__form :is(input:not([type=checkbox]):not([type=radio]),textarea,.choice__own){border-width:1px}
.tk-page .choice,.tk-page .check{border-width:1px}
.tk-page .choice:hover,.tk-page .check:hover{border-color:var(--tk-ink);background:#fff}
.tk-page .form__ok{background:#fff;box-shadow:none;border-radius:24px}
.tk-page .form__ok h3{font-family:var(--tk-serif);font-weight:400;font-size:30px}

/* анкета по шагам (apply.js): без JS все шаги видны одной формой, служебные блоки скрыты */
.apply__step+.apply__step{margin-top:40px}
.apply__step-t{font-family:var(--tk-serif);font-weight:400;font-size:clamp(26px,3.4vw,34px);line-height:1.1;margin:0 0 22px;outline:0}
.apply__nav{display:flex;gap:12px;margin-top:8px}
.apply__nav [type=submit],.apply__nav [data-step-next]{flex:1}
.apply__nav [data-step-back]{background:#fff}
.apply__review-t,.apply__review{display:none}
.apply__saved{margin:20px 0 0;font-size:13px;color:var(--tk-ink-2);display:none}
.is-steps .apply__step+.apply__step{margin-top:0}
.is-steps .apply__saved,.is-steps .apply__review-t,.is-steps .apply__review{display:block}
.apply__progress{margin:0 0 28px}
.apply__progress-t{margin:0 0 10px;font-size:14px;color:var(--tk-ink-2)}
.apply__progress-t b{color:var(--tk-ink);font-weight:600}
.apply__bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:0;padding:0;list-style:none}
.apply__bar li{height:4px;border-radius:2px;background:var(--tk-line);transition:background .3s}
.apply__bar li.is-on{background:var(--tk-ink)}
.apply__draft{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 24px;padding:12px 16px;border-radius:14px;background:#fff;font-size:14px}
.apply__draft[hidden],.field[hidden]{display:none}
.apply__reset,.apply__edit{border:0;background:none;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--tk-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.apply__review-t{margin:4px 0 14px;color:var(--tk-ink-2)}
.apply__group{background:#fff;border-radius:18px;padding:18px 20px}
.apply__group+.apply__group{margin-top:12px}
.apply__group-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.apply__group-h h3{margin:0;font-size:16px;font-weight:600}
.apply__group dl{margin:0}
.apply__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 16px;padding:9px 0;border-top:1px solid var(--tk-line);font-size:14px}
.apply__row dt{color:var(--tk-ink-2)}
.apply__row dd{margin:0;overflow-wrap:anywhere;white-space:pre-line}
.apply__row dd.is-empty{color:var(--tk-ink-2);font-style:italic}
@media (max-width:600px){.apply__row{grid-template-columns:1fr}.apply__group{padding:16px}}

/* ---------- 404 и страница результата: общий заголовок ---------- */
.tk-page .result h1{font-family:var(--tk-serif);font-weight:400}
.tk-page .result .result__btns{margin-top:32px}

/* ---------- 404 «Лицензия не найдена» (page_404 в build.py) ----------
   Большая «404»: ноль – овал как на главной с кнопкой «плей» логотипа (ведёт на главную).
   Карточка лицензии со штампом, ниже карточки разделов. Анимация только CSS: при reduced motion
   home.css выключает её целиком, и всё сразу стоит в конечном виде. */
.nf{padding:clamp(116px,12vw,170px) 0 clamp(64px,8vw,110px);overflow-x:clip}
.nf__grid{display:grid;gap:clamp(36px,5vw,60px);align-items:center}
@media (min-width:960px){.nf__grid{grid-template-columns:1fr 1fr}}
.nf .tag + .mix{margin-top:18px}
.nf .mix{font-size:clamp(40px,6vw,84px)}
.nf__lead{margin-top:24px;font-size:18px;line-height:1.6;color:var(--tk-ink-2);max-width:46ch}

.nf__art{position:relative;padding-bottom:clamp(150px,14vw,190px)}
.nf__code{display:flex;align-items:center;justify-content:center;font-family:var(--tk-serif);font-style:italic;font-weight:400;
  font-size:clamp(150px,22vw,300px);line-height:.85;letter-spacing:-.04em;color:var(--tk-ink)}
.nf__code>span{animation:nf-up .8s cubic-bezier(.2,.7,.2,1) both}
.nf__code>span:last-child{animation-delay:.15s}
.nf__zero{position:relative;width:.6em;height:.84em;margin:0 .06em;display:grid;place-items:center;color:var(--tk-ink);animation:nf-up .8s .07s cubic-bezier(.2,.7,.2,1) both}
.nf__oval{position:absolute;inset:0;border-radius:50%;background:var(--tk-beige-2);transform:rotate(18deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.nf__oval::after{content:"";position:absolute;inset:-12px;border:1.5px solid var(--tk-ink);border-radius:50%}
.nf__zero svg{position:relative;width:.32em;height:.32em;overflow:visible;transition:transform .35s cubic-bezier(.34,1.9,.64,1)}
.nf__zero:hover .nf__oval{transform:rotate(32deg)}
.nf__zero:hover svg{transform:scale(.88)}
.nf__zero:active svg{transform:scale(.78)}
.nf__ring{stroke-dasharray:100;animation:nf-draw .9s .35s cubic-bezier(.2,.7,.2,1) both}
.nf__tri{transform-box:view-box;transform-origin:17px 17px;animation:nf-pop .7s 1s cubic-bezier(.34,1.9,.64,1) both}
.nf__rip{transform-box:view-box;transform-origin:17px 17px;opacity:0;animation:nf-rip 2.8s 1.9s ease-out infinite}

.nf__card{position:absolute;right:0;bottom:0;width:min(300px,80%);background:#fff;border:1px solid var(--tk-line);border-radius:18px;
  padding:16px 20px 40px;box-shadow:0 24px 50px -24px rgba(59,59,59,.35);transform:rotate(-5deg);animation:nf-card .8s .55s cubic-bezier(.2,.7,.2,1) both}
.nf__card-top{display:flex;justify-content:space-between;gap:10px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tk-ink-3);padding-bottom:12px;border-bottom:1px dashed var(--tk-line)}
.nf__no{margin-top:12px;font-size:13px;color:var(--tk-ink-2)}
.nf__no b{font-family:var(--tk-serif);font-style:italic;font-weight:400;font-size:26px;color:var(--tk-ink);margin-left:4px}
.nf__card dl{margin:8px 0 0;display:grid;gap:6px;font-size:13px}
.nf__card dl div{display:flex;justify-content:space-between;gap:12px}
.nf__card dt{color:var(--tk-ink-3)}
.nf__card dd{margin:0;font-weight:600}
.nf__stamp{position:absolute;right:-12px;bottom:-20px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:2px solid var(--tk-ink);
  border-radius:8px;background:var(--tk-powder);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transform:rotate(-9deg);animation:nf-stamp .45s 1.5s cubic-bezier(.2,.9,.3,1.3) both}
@media (max-width:959px){
  .nf__art{padding-bottom:24px}
  .nf__card{position:relative;width:min(340px,92%);margin:4px 0 0 auto}
}
.nf__stamp::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tk-coral)}

.nf__links{display:grid;gap:14px;margin-top:clamp(56px,7vw,90px);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.nf__link{position:relative;display:flex;flex-direction:column;gap:8px;min-height:210px;padding:24px 24px 88px;border-radius:18px;
  background:var(--tk-beige-2);transition:background .3s,transform .3s}
.nf__link:hover{background:var(--tk-powder);transform:translateY(-3px)}
.nf__num{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--tk-ink-3)}
.nf__link b{font-family:var(--tk-serif);font-style:italic;font-weight:400;font-size:28px;line-height:1.1}
.nf__txt{font-size:15px;line-height:1.45;color:var(--tk-ink-2)}
.nf__link>i{position:absolute;left:24px;bottom:24px;width:44px;height:44px;border-radius:50%;background:var(--tk-ink);display:grid;place-items:center;transition:transform .35s}
.nf__link>i svg{width:16px;height:16px;stroke:#fff}
.nf__link:hover>i{transform:rotate(-45deg)}
@media (max-width:560px){
  .nf__link{min-height:0;padding:20px 80px 20px 20px}
  .nf__link b{font-size:24px}
  .nf__link>i{left:auto;right:20px;bottom:auto;top:50%;transform:translateY(-50%)}
  .nf__link:hover>i{transform:translateY(-50%) rotate(-45deg)}
  .nf__stamp{right:-6px}
}

@keyframes nf-up{from{opacity:0;transform:translateY(.12em)}}
@keyframes nf-draw{from{stroke-dashoffset:100}}
@keyframes nf-pop{from{opacity:0;transform:scale(0)}}
@keyframes nf-rip{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.9)}}
@keyframes nf-card{from{opacity:0;transform:translateY(30px) rotate(-12deg)}}
@keyframes nf-stamp{from{opacity:0;transform:scale(2.2) rotate(-9deg)}}

/* страница результата квиза: написать в мессенджер, не дожидаясь звонка */
.tk-page .result__msg-t{margin-top:36px;color:var(--ink-2);font-size:15px}
.tk-page .result__msgs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.tk-page .result__msg{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:999px;border:1px solid var(--tk-line,#d8d8d8);font-size:14px;font-weight:600;color:var(--ink)}
.tk-page .result__msg:hover{border-color:var(--ink)}