:root{--bg:#f6f8f7;--card:#fff;--tx:#1d2a24;--mu:#5d6b64;--ac:#1f7a52;--ac2:#165c3d;--li:#e6ece9;--soft:#eef5f1;--warn:#fff7e0;--r:14px}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:17px/1.65 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-wrap:break-word}
a{color:var(--ac)}a:hover{color:var(--ac2)}
img{max-width:100%;height:auto}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
/* шапка (не закреплённая) */
.hd{background:#fff;border-bottom:1px solid var(--li)}
.hd-in{display:flex;align-items:center;gap:20px;min-height:68px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tx)}
.logo-m{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:var(--ac);color:#fff;font-weight:800;font-size:15px;letter-spacing:.5px}
.logo-t{font-weight:800;font-size:20px;line-height:1.1}
.logo-t small{display:block;font-weight:500;font-size:12.5px;color:var(--mu);margin-top:2px}
.mn{display:flex;flex-wrap:wrap;gap:4px 18px;margin-left:auto;font-size:15px}
.mn a{color:var(--tx);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.mn a:hover{border-color:var(--ac);color:var(--ac)}
/* крошки */
.bc{font-size:14px;color:var(--mu);margin:18px 0 6px}
.bc a{color:var(--mu)}.bc i{font-style:normal;margin:0 4px;color:#9aa8a1}
/* статья */
main{padding-bottom:40px}
.art{background:var(--card);border-radius:var(--r);padding:28px 40px 34px;margin:10px 0 26px;box-shadow:0 1px 3px rgba(20,40,30,.06)}
.art h1,main>h1{font-size:34px;line-height:1.22;margin:0 0 10px;letter-spacing:-.3px}
.meta{font-size:14px;color:var(--mu);margin-bottom:16px}
.lead{font-size:18.5px;color:#2b3a33}
.lead p{margin:0 0 12px}
.ab{max-width:780px}
.ab h2{font-size:26px;line-height:1.3;margin:36px 0 12px;scroll-margin-top:12px}
.ab h3{font-size:21px;line-height:1.35;margin:26px 0 10px}
.ab h4{font-size:18px;margin:20px 0 8px}
.ab p{margin:0 0 14px}
.ab ul,.ab ol{padding-left:24px;margin:0 0 16px}
.ab li{margin:0 0 6px}
.ab blockquote,.ab .note{margin:18px 0;padding:14px 18px;border-left:4px solid var(--ac);background:var(--soft);border-radius:0 10px 10px 0}
.ab blockquote p:last-child{margin:0}
.ab code{background:#f0f3f1;padding:1px 6px;border-radius:5px;font-size:.92em;word-break:break-word}
/* таблицы: прокрутка внутри блока */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px;border:1px solid var(--li);border-radius:10px;max-width:100%}
.tw table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;line-height:1.45}
.tw th{background:var(--soft);text-align:left;font-weight:700}
.tw th,.tw td{padding:9px 12px;border-bottom:1px solid var(--li);vertical-align:top}
.tw tr:last-child td{border-bottom:0}
/* картинки */
.fig{margin:22px auto;max-width:min(100%,720px);text-align:center}
.fig-main{max-width:min(100%,600px)}
.fig img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;border-radius:10px;border:1px solid var(--li)}
.fig figcaption{font-size:14px;color:var(--mu);margin-top:8px;line-height:1.45}
/* содержание */
.toc{background:var(--soft);border-radius:12px;padding:14px 20px;margin:18px 0 8px;max-width:780px}
.toc-t{font-weight:700;margin-bottom:6px}
.toc ol{margin:0;padding-left:22px;columns:2;column-gap:32px;font-size:15.5px}
.toc li{margin:0 0 4px;break-inside:avoid}
/* FAQ */
.faq{max-width:780px;margin-top:30px}
.faq h2{font-size:26px;margin:0 0 12px}
.faq details{border:1px solid var(--li);border-radius:10px;margin:0 0 10px;background:#fff}
.faq summary{cursor:pointer;padding:12px 16px;font-weight:700;list-style:none;position:relative;padding-right:40px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:16px;top:9px;font-size:22px;color:var(--ac)}
.faq details[open] summary:after{content:"\2212"}
.faq details p{margin:0;padding:0 16px 14px}
/* карточки */
.sec-h,.rel-h{font-size:26px;margin:30px 0 14px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--tx);box-shadow:0 1px 3px rgba(20,40,30,.07);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,40,30,.1);color:var(--tx)}
.card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--soft)}
.card-b{display:flex;flex-direction:column;gap:6px;padding:14px 16px 18px}
.card-c{font-size:12.5px;color:var(--ac);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.card-t{font-weight:700;font-size:18px;line-height:1.3}
.card-d{font-size:14.5px;color:var(--mu);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* главная */
.hero{background:linear-gradient(135deg,#1f7a52,#2c9a6a);color:#fff;border-radius:18px;padding:40px 44px;margin:22px 0 10px}
.hero h1{font-size:38px;line-height:1.18;margin:0 0 12px;color:#fff}
.hero p{font-size:18.5px;max-width:760px;margin:0 0 20px;opacity:.95}
.hero-l{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;padding:11px 20px;border-radius:10px;background:#fff;color:var(--ac2);font-weight:700;text-decoration:none;font-size:15.5px}
.btn-o{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75)}
.btn:hover{opacity:.92;color:var(--ac2)}.btn-o:hover{color:#fff}
.hsecs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px}
.hsec{background:#fff;border-radius:var(--r);padding:20px 24px}
.hsec h2{font-size:22px;margin:0 0 6px}.hsec h2 a{color:var(--tx);text-decoration:none}
.hsec p{color:var(--mu);font-size:15px;margin:0 0 10px}
.hl{margin:0;padding-left:20px;font-size:15.5px}.hl li{margin:0 0 5px}
.cat-d{color:var(--mu);font-size:18px;max-width:780px;margin:0 0 22px}
/* калькулятор */
.calc{background:var(--soft);border:1px solid #cfe3d8;border-radius:14px;padding:20px 22px;margin:22px 0;max-width:780px}
.calc h3{margin:0 0 14px;font-size:21px}
.calc-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.calc label{display:flex;flex-direction:column;gap:5px;font-size:15px;font-weight:600}
.calc input,.calc select{font:inherit;font-weight:400;padding:9px 11px;border:1px solid #b9cdc2;border-radius:8px;background:#fff;width:100%;min-width:0}
.calc .chkl{flex-direction:row;align-items:center;gap:8px;font-weight:400}.calc .chkl input{width:auto}
.calc-r{margin-top:16px;padding:14px 16px;background:#fff;border-radius:10px;border:1px solid var(--li)}
.calc-r b{font-size:24px;color:var(--ac2)}
.calc-r table{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
.calc-r td{padding:5px 0;border-bottom:1px dashed var(--li)}.calc-r td:last-child{text-align:right;white-space:nowrap}
.calc-n{font-size:13.5px;color:var(--mu);margin:10px 0 0}
/* подвал */
.ft{background:#16241d;color:#c9d6cf;margin-top:20px}
.ft-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;padding-top:34px;padding-bottom:20px;font-size:15px}
.ft a{color:#c9d6cf;text-decoration:none}.ft a:hover{color:#fff;text-decoration:underline}
.ft ul{list-style:none;margin:0;padding:0}.ft li{margin:0 0 7px}
.ft-logo{font-weight:800;font-size:20px;color:#fff;margin-bottom:8px}
.ft-h{font-weight:700;color:#fff;margin-bottom:10px}
.ft-c{border-top:1px solid #2a3b33;padding-top:14px;padding-bottom:22px;font-size:13.5px;color:#8fa198}
/* планшет */
@media (max-width:1024px){
.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.art{padding:24px 26px 28px}
}
/* телефон */
@media (max-width:700px){
body{font-size:16.5px}
.hd-in{gap:8px 16px}
.mn{margin-left:0;gap:2px 14px;font-size:14.5px}
.art{padding:18px 16px 22px;border-radius:12px;margin-left:-4px;margin-right:-4px}
.art h1,main>h1{font-size:26px}
.lead{font-size:17px}
.ab h2,.faq h2{font-size:22px;margin-top:28px}
.ab h3{font-size:19px}
.toc ol{columns:1}
.cards,.hsecs,.calc-g{grid-template-columns:minmax(0,1fr)}
.hero{padding:26px 20px;border-radius:14px}
.hero h1{font-size:27px}
.hero p{font-size:16.5px}
.ft-in{grid-template-columns:1fr;gap:18px}
.sec-h,.rel-h{font-size:22px}
}