/* Ф4 §5, п. 5 плана веса: раскладка статьи — из site.css, только на страницах статей (head, после site.css). */
/* ═══ Статья (ARTICLE_LAYOUT.md, владелец 13.10): две колонки, калькулятор справа и закреплён от 1024 px,
   уже — сразу после «Коротко». Одна система ритма: margin-top у следующего элемента. ═══ */
.article{--col:620px;--g1:8px;--g2s:12px;--g2:16px;--g3:32px;--g4:56px;display:grid;grid-template-columns:minmax(0,var(--col));grid-template-areas:"toc" "lead" "side" "body";margin-top:8px;padding-bottom:var(--g4)}
.article--nocalc{grid-template-areas:"side" "lead" "body"}
.article>.article-toc{grid-area:toc;margin-bottom:var(--g3)}
.article__lead{grid-area:lead}.article__body{grid-area:body}
.article__lead,.article__body{min-width:0;container:prose/inline-size}
.article__aside{grid-area:side;min-width:0;container:kalk/inline-size}
.article--calc>.article__aside{margin:var(--g3) 0 0}
.article--calc>.article__aside+.article__body{margin-top:var(--g4)}
.article__lead+.article__body{margin-top:var(--g4)}
.article--nocalc>.article__aside{margin-bottom:var(--g3)}
.article__aside .quick{display:none}
@media (min-width:1024px){
 .article{--aside:360px;grid-template-columns:minmax(0,var(--col)) var(--aside);column-gap:48px;justify-content:space-between;grid-template-areas:"lead side" "toc side" "body side";grid-template-rows:auto auto 1fr}
 .article>.article-toc{margin:var(--g3) 0 0}
 .article--nocalc{grid-template-areas:"lead side" "body side";grid-template-rows:auto 1fr}
 .article>.article__aside{align-self:start;margin:0}
 .article--calc>.article__aside+.article__body{margin-top:var(--g4)}
 .article--nocalc>.article__aside{position:sticky;top:20px;max-height:calc(100dvh - 40px);overflow:auto;padding:4px;margin:-4px}
 .article__aside .quick{display:flex;flex-direction:column;gap:12px;border-left:0;padding:20px 0 0;margin-top:0;border-top:0}
 .article__aside .quick .btn{width:100%}
 .article__aside .quick .eyebrow-s{font:600 12px/16px var(--text);letter-spacing:.08em}
 .article__aside .quick__row{justify-content:flex-start;align-items:center;min-height:44px;padding:0;border-bottom:0;font:600 15px/22px var(--text);color:var(--ink);text-decoration:none}
}
@media (min-width:1024px){.article--calc>.article__aside{position:sticky;top:24px}.article--calc>.article__aside.is-tall{max-height:calc(100vh - 48px);overflow-y:auto;scrollbar-width:thin}}
@media (min-width:1280px){.article{--aside:400px}}
@media (max-width:768px){.article{--g1:6px;--g2s:10px;--g2:14px;--g3:28px;--g4:44px}}
@media print{.article{display:block}.article__aside{display:none}}

/* текст статьи */
.prose{font:400 17px/28px var(--text);color:var(--ink2);font-variant-numeric:proportional-nums}
:where(.prose) :where(p,ul,ol,li,figure,blockquote,h2,h3,table,section,figcaption){margin:0}
.prose>*+*,.prose section>*+*,.prose .faq__item>*+*{margin-top:var(--g2)}
.prose>:is(h2,.article-order,.article-faq){margin-top:var(--g4)}
.prose>p+:is(ul,ol),.prose section>p+:is(ul,ol){margin-top:var(--g2s)}
.prose>p.why,.prose .faq__item>p.why,.prose section>p.why{margin-top:var(--g1)}
.prose>:is(figure,blockquote,.tiles--article,.article-summary,.article-sign,.calculator-link),.prose>:is(figure,blockquote,.tiles--article,.article-summary,p.why)+*{margin-top:var(--g3)}
.prose>:is(figure,blockquote,.tiles--article,.article-summary,p.why)+:is(h2,.article-order,.article-faq){margin-top:var(--g4)}
.prose>:first-child{margin-top:0}
.article__lead>p:first-child{font-size:19px;line-height:30px;color:var(--ink)}
.prose h2{font:600 26px/32px var(--head);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.prose h3{font:600 19px/26px var(--head);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.prose :is(h2,h3)[id]{scroll-margin-top:24px}
.prose b,.prose strong{font-weight:600;color:var(--ink)}
.prose a:not([class]){color:inherit;text-decoration:underline 1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);overflow-wrap:break-word}
.prose a:not([class]):hover{text-decoration-color:currentColor}
.prose :is(p,li,figcaption,td,th){text-wrap:pretty}
.prose .nowrap{white-space:nowrap}
.prose img{max-width:100%;height:auto}
/* списки и шаги */
.prose :is(ul,ol){list-style:none;padding:0}
.prose li{position:relative;padding-left:24px}
.prose ul>li+li{margin-top:var(--g1)}
.prose ul>li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--ink2)}
.prose ol{counter-reset:step}.prose ol>li{counter-increment:step;padding-left:32px}.prose ol>li+li{margin-top:var(--g2s)}
.prose ol>li::before{content:counter(step);position:absolute;left:0;top:0;min-width:20px;font:600 17px/28px var(--head);color:var(--rust);font-variant-numeric:tabular-nums}
/* «Коротко» */
.article-summary{border:1px solid var(--line);border-radius:var(--r);padding:24px 28px}
.prose .article-summary h2{font-size:20px;line-height:26px}
.prose .article-summary h2+ul{margin-top:var(--g2s)}
.prose .article-summary li{padding-left:20px}.prose .article-summary li+li{margin-top:var(--g2s)}
.prose .article-summary li::before{content:"–";left:0;top:0;width:auto;height:auto;border-radius:0;background:none;color:var(--mute)}
/* «Почему так» */
.prose p.why{background:var(--paper);border-left:3px solid var(--ink);border-radius:0 8px 8px 0;padding:12px 16px;font-size:16px;line-height:26px;color:var(--ink)}.prose p.why>b:first-child{color:var(--ink)}
/* «Пример» */
.prose figure.example{background:var(--paper);border-radius:var(--r);padding:20px 24px;font-size:16px;line-height:26px}
.prose figure.example>*+*{margin-top:10px}.prose figure.example>.tbl{margin-top:16px}
.prose figure.example>.example__label+*{margin-top:8px}
.example__label{display:block;font:600 12px/16px var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
/* цитата эксперта и текст для копирования */
.prose figure.quote{border-left:3px solid var(--rust);padding-left:20px}
.prose .quote :is(blockquote,p){font-size:18px;line-height:28px;color:var(--ink)}
.prose .quote>*+*,.prose .quote blockquote>*+*{margin-top:10px}
.prose .quote figcaption{margin-top:8px;font-size:14px;line-height:20px;color:var(--mute)}
.prose>blockquote,.prose :not(figure)>blockquote{border:1px dashed var(--line);border-radius:var(--r);padding:16px 20px;font-size:16px;line-height:26px;color:var(--ink)}
.prose>blockquote::before,.prose :not(figure)>blockquote::before{content:"Текст письма";display:block;margin-bottom:8px;font:600 12px/16px var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.prose>blockquote>*+*,.prose :not(figure)>blockquote>*+*{margin-top:10px}
/* таблицы: одна система */
.tbl__cap{font:600 14px/20px var(--text);color:var(--ink);margin-bottom:8px;text-wrap:balance}
.tbl .table-hint{display:none;margin:0 0 6px!important;font:400 13px/18px var(--text);color:var(--mute)}
.tbl.is-overflow .table-hint{display:block}
.tbl .table-scroll{background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.tbl .table-scroll table{width:100%;min-width:0;margin:0;border-collapse:collapse;font:400 15px/22px var(--text);color:var(--ink);font-variant-numeric:proportional-nums;background:none;border-radius:0}
.tbl :is(th,td){padding:10px 14px;text-align:left;vertical-align:top;border:0}
.tbl thead th{background:var(--paper2);font:600 13px/18px var(--text);color:var(--ink2);border-bottom:1px solid var(--line);vertical-align:bottom}
.tbl tbody tr+tr>*{border-top:1px solid var(--line2)}
.tbl tbody th{font-weight:500;color:var(--ink2)}
.tbl tr>:first-child:nth-last-child(2){width:40%}
.tbl .num-col{text-align:right}.tbl tbody .num-col{white-space:nowrap}
/* карточки товаров по ширине колонки */
.prose .tiles--article{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@container prose (max-width:559px){.prose .tiles--article{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
@container prose (max-width:339px){.prose .tiles--article{grid-template-columns:minmax(0,1fr)}}
@container prose (min-width:560px){
 .prose .tiles--article:is(:has(>.tile:nth-child(2):last-child),:has(>.tile:nth-child(4):last-child)){grid-template-columns:repeat(2,minmax(0,1fr))}
 .prose .tiles--article>.tile:only-child{grid-column:1/-1}
 .prose .tiles--article>.tile:only-child .tile__link{display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;align-content:start}
 .prose .tiles--article>.tile:only-child .tile__img{grid-row:1/span 4;height:140px}
 .prose .tiles--article>.tile:only-child .tile__cart{align-self:flex-start;margin-left:196px}
}
.prose .tiles--article .tile__name{hyphens:manual}
/* контекстная ссылка на калькулятор в статье без встройки */
.prose .calculator-link{font-weight:500;margin-bottom:0}
/* «Как заказать», «Вопросы», подпись */
.article-order{border-top:3px solid var(--ink);padding-top:20px}
.prose .article-order>h2{margin:0}
.article-order__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:20px!important}
.prose .article-order__phone{font:600 15px/22px var(--text);color:var(--ink);text-decoration:none;white-space:nowrap}
.prose .article-faq>h2+.faq__item{margin-top:var(--g2)}
.prose .faq__item+.faq__item{margin-top:0}
.faq__item{border-top:1px solid var(--line);padding:20px 0}.faq__item:last-child{border-bottom:1px solid var(--line)}
.prose .faq__item>h3+*{margin-top:var(--g1)}.prose .faq__item>p+p{margin-top:var(--g2s)}
.prose .article-sign{font:400 14px/20px var(--text);color:var(--mute)}
/* оглавление */
.article-toc{border-block:1px solid var(--line);padding:6px 0}
.article-toc>summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;gap:8px;font:600 15px/1 var(--text);color:var(--ink)}
.article-toc>summary::-webkit-details-marker{display:none}
.article-toc>summary::after{content:"";margin-left:auto;width:8px;height:8px;border:solid var(--ink2);border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.article-toc[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.article-toc__n{font-weight:400;color:var(--mute)}
.article-toc ol{list-style:none;padding:0;margin:0 0 10px;counter-reset:toc}
.article-toc li{counter-increment:toc;display:flex;gap:8px;padding:6px 0;font:400 15px/22px var(--text);break-inside:avoid}
.article-toc li::before{content:counter(toc);flex:none;width:20px;font:600 13px/22px var(--head);color:var(--rust);font-variant-numeric:tabular-nums}
.article-toc a{color:var(--ink);text-decoration:none;text-wrap:balance}.article-toc a:hover{text-decoration:underline;text-underline-offset:.2em}
@media (max-width:1023px){.article-toc li{padding:0}.article-toc a{display:block;flex:1;padding:11px 0}.article-toc li::before{padding-top:11px}}
.article__aside .article-toc a.is-active{text-decoration:underline 2px;text-underline-offset:.25em}.article__aside .article-toc li:has(>a.is-active)::before{color:var(--ink)}
@media (min-width:1024px){
 .article-toc{padding:10px 0}
 .article-toc>summary{min-height:28px;cursor:default;pointer-events:none;font:600 12px/16px var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
 .article-toc>summary::after,.article-toc>summary .article-toc__n{display:none}
 .article-toc li{padding:3px 0}
 .article--calc .article-toc ol{columns:2;column-gap:32px}
}
/* телефон */
@media (max-width:768px){
 .prose{font-size:16px;line-height:26px}
 .article__lead>p:first-child{font-size:18px;line-height:28px}
 .prose h2{font-size:21px;line-height:27px}.prose h3{font-size:17px;line-height:23px}
 .prose :is(h2,h3)[id]{scroll-margin-top:0}
 .prose li{padding-left:22px}.prose ul>li::before{top:10px}
 .prose ol>li{padding-left:28px}.prose ol>li::before{font-size:16px;line-height:26px}
 .article-summary{padding:20px 16px}.prose .article-summary h2{font-size:19px;line-height:24px}
 .prose p.why{font-size:16px;line-height:25px;padding:10px 14px}
 .prose figure.example{padding:16px;font-size:15px;line-height:24px}
 .prose .quote :is(blockquote,p){font-size:17px;line-height:26px}.prose .quote figcaption{font-size:13px;line-height:18px}
 .tbl .table-scroll table{font-size:14px;line-height:20px}.tbl :is(th,td){padding:8px 10px}
 .faq__item{padding:16px 0}
 .article-order__cta .btn{width:100%}.prose .article-order__phone{display:flex;align-items:center;min-height:44px}
 .tbl.is-overflow .table-scroll tr>:first-child{position:sticky;left:0;z-index:1;background:var(--white);box-shadow:inset -1px 0 0 var(--line)}.tbl.is-overflow .table-scroll thead tr>:first-child{background:var(--paper2)}
}