/* Пояснений — design system. Mobile-first, no webfonts, no layout shift. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#fbfaf8; --bg-soft:#f2f0ec; --card:#fff; --ink:#16181d; --ink-2:#4a5058;
  --line:#e2ded7; --line-2:#cdc7bd;
  --brand:#0b5d4e; --brand-ink:#08463b; --brand-soft:#e6f2ee;
  --accent:#b4530a; --accent-soft:#fdf0e3;
  --warn:#9a2b1f; --warn-soft:#fdecea;
  --focus:#0b5d4e;
  --maxw:74rem; --readw:41rem;
  --r:12px; --sh:0 1px 2px rgba(20,20,20,.05),0 8px 24px -18px rgba(20,20,20,.35);
  --fs:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  --fh:Georgia,"Times New Roman",serif;
  --fm:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#101318; --bg-soft:#171b22; --card:#171b22; --ink:#e9ecf1; --ink-2:#a7b0bd;
    --line:#262c36; --line-2:#39414e;
    --brand:#4fd0b0; --brand-ink:#8fe6cf; --brand-soft:#12241f;
    --accent:#f0a15a; --accent-soft:#251a10;
    --warn:#f08c7d; --warn-soft:#2a1614; --focus:#4fd0b0;
    --sh:0 1px 2px rgba(0,0,0,.4);
  }
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fs);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-wrap:break-word}
img,svg,table{max-width:100%}
a{color:var(--brand-ink);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:1.1rem}
.muted{color:var(--ink-2)}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:.7rem 1rem;z-index:99;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* header */
.site-head{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.site-head__inner{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding-block:.6rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;margin-right:auto}
.brand__mark{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:9px;
  background:var(--brand);color:#fff;font-family:var(--fh);font-weight:700;font-size:1.15rem;flex:none}
@media (prefers-color-scheme:dark){.brand__mark{color:#08130f}}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__text b{font-family:var(--fh);font-size:1.18rem;letter-spacing:.01em}
.brand__text span{font-size:.72rem;color:var(--ink-2)}
.navtoggle{display:inline-flex;align-items:center;gap:.45rem;background:var(--bg-soft);
  border:1px solid var(--line-2);color:inherit;border-radius:9px;padding:.45rem .7rem;
  font:inherit;font-size:.9rem;cursor:pointer}
.navtoggle__bars{width:1rem;height:2px;background:currentColor;box-shadow:0 5px currentColor,0 -5px currentColor;display:block}
.mainnav{flex-basis:100%;display:none}
.mainnav.is-open{display:block}
.mainnav ul{list-style:none;margin:.4rem 0 .3rem;padding:0;display:flex;flex-direction:column}
.mainnav a{display:block;padding:.55rem .2rem;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line);font-size:.98rem}
.mainnav a[aria-current="page"]{color:var(--brand-ink);font-weight:600}
@media (min-width:60rem){
  .navtoggle{display:none}
  .mainnav{display:block;flex-basis:auto}
  .mainnav ul{flex-direction:row;flex-wrap:wrap;gap:.15rem;margin:0}
  .mainnav a{border:0;padding:.4rem .55rem;border-radius:8px;font-size:.92rem}
  .mainnav a:hover{background:var(--bg-soft)}
  .mainnav a[aria-current="page"]{background:var(--brand-soft)}
}

/* hero */
.hero{background:linear-gradient(180deg,var(--brand-soft),transparent);border-bottom:1px solid var(--line);
  padding-block:2.2rem 2rem}
.hero__kicker{margin:0 0 .5rem;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);font-weight:700}
.hero h1{font-family:var(--fh);font-size:clamp(1.85rem,5.6vw,3rem);line-height:1.14;margin:0 0 .6rem;max-width:20ch}
.hero__dek{font-size:1.08rem;color:var(--ink-2);max-width:56ch;margin:0 0 1.3rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}
.btn{display:inline-block;background:var(--brand);color:#fff;border-radius:10px;padding:.7rem 1.1rem;
  text-decoration:none;font-weight:600;font-size:.98rem;border:1px solid var(--brand)}
@media (prefers-color-scheme:dark){.btn{color:#08130f}}
.btn:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.btn--ghost{background:transparent;color:var(--brand-ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--brand-soft);color:var(--brand-ink)}

/* breadcrumbs */
.crumbs{padding-top:1rem;font-size:.83rem;color:var(--ink-2)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-right:.35rem;color:var(--line-2)}
.crumbs a{color:var(--ink-2)}

/* prose */
.prose{max-width:var(--readw);margin:0 auto;padding-block:1rem 3rem}
.prose--home{padding-block:.5rem 3rem}
.prose h1{font-family:var(--fh);font-size:clamp(1.7rem,5vw,2.5rem);line-height:1.16;margin:.6rem 0 .5rem;letter-spacing:-.01em}
.prose h2{font-family:var(--fh);font-size:clamp(1.35rem,3.6vw,1.75rem);line-height:1.25;
  margin:2.4rem 0 .7rem;padding-top:.4rem;border-top:1px solid var(--line)}
.prose h3{font-size:1.12rem;line-height:1.35;margin:1.8rem 0 .5rem;font-weight:700}
.prose h4{font-size:1rem;margin:1.3rem 0 .4rem;font-weight:700;color:var(--ink-2)}
.prose p{margin:0 0 1.05rem}
.prose ul,.prose ol{margin:0 0 1.15rem;padding-left:1.25rem}
.prose li{margin-bottom:.45rem}
.prose li>ul,.prose li>ol{margin:.45rem 0 .2rem}
.prose hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.prose code{font-family:var(--fm);font-size:.88em;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:5px;padding:.08em .35em}
.prose blockquote{margin:1.4rem 0;padding:.2rem 0 .2rem 1rem;border-left:3px solid var(--line-2);color:var(--ink-2)}
.prose blockquote p:last-child{margin-bottom:0}
.dek{font-size:1.14rem;line-height:1.55;color:var(--ink-2);margin:0 0 1rem}
.pagemeta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-size:.8rem;color:var(--ink-2);
  border-block:1px solid var(--line);padding-block:.55rem;margin:0 0 1.6rem}
.pagemeta__cl{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* toc */
.toc{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1rem;margin:0 0 1.8rem}
.toc__h{margin:0 0 .4rem;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-2);font-weight:700}
.toc ol{margin:0;padding-left:1.1rem;font-size:.94rem}
.toc li{margin-bottom:.25rem}
.toc__sub{list-style:none;font-size:.88rem;margin-left:-.4rem}
.toc__sub::before{content:"– ";color:var(--line-2)}

/* tables */
.tablewrap{overflow-x:auto;margin:0 0 1.4rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:.92rem}
caption{caption-side:bottom;text-align:left;font-size:.8rem;color:var(--ink-2);padding:.6rem .8rem}
th,td{padding:.55rem .7rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--bg-soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-2);position:sticky;top:0}
tbody th{font-weight:600}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td.c,th.c{text-align:center}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}

/* callouts */
.callout{margin:1.5rem 0;padding:.95rem 1.05rem;border-radius:var(--r);border:1px solid var(--line);
  background:var(--card);font-size:.98rem}
.callout p:last-child,.callout ul:last-child,.callout ol:last-child{margin-bottom:0}
.callout__label{margin:0 0 .35rem!important;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.09em;font-weight:800;color:var(--ink-2)}
.callout--key{background:var(--brand-soft);border-color:transparent;border-left:4px solid var(--brand)}
.callout--key .callout__label{color:var(--brand-ink)}
.callout--warn{background:var(--warn-soft);border-color:transparent;border-left:4px solid var(--warn)}
.callout--warn .callout__label{color:var(--warn)}
.callout--tip,.callout--ex{background:var(--accent-soft);border-color:transparent;border-left:4px solid var(--accent)}
.callout--tip .callout__label,.callout--ex .callout__label{color:var(--accent)}
.callout--src{background:var(--bg-soft);font-size:.9rem}
.steps{counter-reset:st;margin:1.4rem 0}
.steps h3{counter-increment:st;display:flex;gap:.6rem;align-items:baseline;margin-top:1.4rem}
.steps h3::before{content:counter(st);flex:none;display:grid;place-items:center;width:1.6rem;height:1.6rem;
  border-radius:50%;background:var(--brand);color:#fff;font-size:.85rem;font-weight:700}
@media (prefers-color-scheme:dark){.steps h3::before{color:#08130f}}

/* faq */
.faq{margin-top:2.4rem}
.faq h2{margin-bottom:.9rem}
.faq__item{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin-bottom:.55rem}
.faq__item summary{cursor:pointer;padding:.8rem 1rem;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:.8rem;align-items:baseline}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";color:var(--brand-ink);font-size:1.2rem;line-height:1;flex:none}
.faq__item[open] summary::after{content:"–"}
.faq__a{padding:0 1rem .3rem;font-size:.98rem}

/* cards */
.cards{list-style:none;margin:1rem 0 2rem;padding:0;display:grid;gap:.7rem}
@media (min-width:38rem){.cards{grid-template-columns:1fr 1fr}}
.cards--hub{margin-bottom:2.6rem}
@media (min-width:62rem){.cards--hub{grid-template-columns:repeat(3,1fr)}}
.card{margin:0}
.card__link{display:flex;flex-direction:column;gap:.25rem;height:100%;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:.85rem .95rem;text-decoration:none;
  color:inherit;box-shadow:var(--sh)}
.card__link:hover{border-color:var(--brand);background:var(--brand-soft)}
.card__t{font-weight:700;color:var(--brand-ink);line-height:1.3}
.card__d{font-size:.88rem;color:var(--ink-2);line-height:1.45}
.card__n{font-size:.75rem;color:var(--ink-2);margin-top:auto;padding-top:.4rem;text-transform:uppercase;letter-spacing:.05em}
.hubs h2,.related h2,.sources h2{font-family:var(--fh);font-size:1.4rem;margin:2rem 0 .3rem;
  padding-top:.5rem;border-top:1px solid var(--line)}
.hubs{padding-top:1.6rem}
.related,.sources{max-width:var(--readw);margin-inline:auto}
.sources ul{font-size:.9rem;padding-left:1.1rem}
.sources li{margin-bottom:.35rem}
.sources p{font-size:.85rem}

/* footer */
.site-foot{background:var(--bg-soft);border-top:1px solid var(--line);padding-block:2rem 1.5rem;margin-top:2rem;font-size:.9rem}
.site-foot__grid{display:grid;gap:1.5rem}
@media (min-width:48rem){.site-foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
.site-foot__brand{font-family:var(--fh);font-size:1.15rem;margin:0 0 .3rem}
.site-foot__h{font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-2);margin:0 0 .5rem}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.35rem}
.site-foot a{color:var(--ink);text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot__legal{margin:1.7rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.8rem;max-width:70ch}

/* calculators */
.calc{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);
  padding:1rem;margin:1.8rem 0;box-shadow:var(--sh)}
.calc__ns{font-size:.9rem;margin:0}
.calc h3{margin:0 0 .2rem!important;font-size:1.08rem}
.calc__sub{font-size:.85rem;color:var(--ink-2);margin:0 0 .9rem}
.calc__grid{display:grid;gap:.7rem;margin-bottom:.9rem}
@media (min-width:34rem){.calc__grid--2{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.25rem}
.field label{font-size:.83rem;font-weight:600;color:var(--ink-2)}
.field input,.field select{font:inherit;font-size:.98rem;padding:.5rem .6rem;border-radius:9px;
  border:1px solid var(--line-2);background:var(--bg);color:var(--ink);width:100%}
.field small{font-size:.75rem;color:var(--ink-2)}
.calc__out{background:var(--brand-soft);border-radius:10px;padding:.85rem .95rem;margin-top:.2rem}
.calc__big{font-family:var(--fh);font-size:1.7rem;line-height:1.15;margin:0 0 .2rem;color:var(--brand-ink)}
.calc__note{font-size:.86rem;color:var(--ink-2);margin:.5rem 0 0}
.calc__rows{list-style:none;margin:.6rem 0 0;padding:0;font-size:.9rem}
.calc__rows li{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;border-bottom:1px dashed var(--line-2)}
.calc__rows li:last-child{border-bottom:0}
.calc__rows b{font-variant-numeric:tabular-nums;white-space:nowrap}
.appl{display:grid;gap:.4rem;max-height:20rem;overflow:auto;border:1px solid var(--line);
  border-radius:10px;padding:.6rem;background:var(--bg)}
.appl__row{display:flex;align-items:center;gap:.5rem}
.appl label{display:flex;align-items:center;gap:.55rem;font-size:.92rem;flex:1;min-width:0;cursor:pointer}
.appl label>span:first-of-type{overflow-wrap:anywhere}
.appl input[type=checkbox]{width:1.05rem;height:1.05rem;flex:none;accent-color:var(--brand)}
.appl .qty{flex:none;width:3.4rem;font:inherit;font-size:.85rem;padding:.2rem .3rem;
  border:1px solid var(--line-2);border-radius:6px;background:var(--bg);color:var(--ink)}
.appl__w{color:var(--ink-2);font-size:.8rem;font-variant-numeric:tabular-nums;margin-left:auto;white-space:nowrap}
.calcfilter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem}
.calcfilter input{flex:1 1 12rem}
.tag{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:.12rem .5rem;color:var(--ink-2)}

/* prev / next */
.pn{max-width:var(--readw);margin:2.2rem auto 0;display:grid;gap:.6rem}
@media (min-width:40rem){.pn{grid-template-columns:1fr 1fr}}
.pn__i{display:flex;flex-direction:column;gap:.15rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:.7rem .9rem;text-decoration:none;color:inherit}
.pn__i:hover{border-color:var(--brand);background:var(--brand-soft)}
.pn__i span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.pn__i b{color:var(--brand-ink);line-height:1.3;font-size:.95rem}
.pn__i--n{text-align:right}
@media (min-width:40rem){.pn__i--n{grid-column:2}}

/* карта сайту */
.mapgrid{display:grid;gap:1.4rem;padding-bottom:3rem}
@media (min-width:44rem){.mapgrid{grid-template-columns:1fr 1fr}}
@media (min-width:68rem){.mapgrid{grid-template-columns:repeat(3,1fr)}}
.mapsec h2{font-family:var(--fh);font-size:1.15rem;margin:0 0 .5rem;padding-bottom:.35rem;
  border-bottom:1px solid var(--line)}
.maplist{list-style:none;margin:0;padding:0;font-size:.93rem}
.maplist li{margin-bottom:.3rem}
.maplist a{color:var(--ink);text-decoration:none}
.maplist a:hover{text-decoration:underline;color:var(--brand-ink)}
.maplist b a,.maplist a b{color:var(--brand-ink)}
.mapsec.is-hidden,.maplist li.is-hidden{display:none}

/* Резервування висоти під калькулятори, щоб не було зсуву макета */
.calc[data-calc]{min-height:24rem}
.calc[data-calc="gen-power"],.calc[data-calc="daily-use"]{min-height:44rem}
.calc[data-calc="appliance-table"],.calc[data-calc="solar"]{min-height:38rem}
.calc[data-calc="cost-kwh"],.calc[data-calc="boiler-ups"]{min-height:32rem}
@media (min-width:34rem){
  .calc[data-calc]{min-height:20rem}
  .calc[data-calc="gen-power"],.calc[data-calc="daily-use"]{min-height:40rem}
  .calc[data-calc="appliance-table"],.calc[data-calc="solar"]{min-height:34rem}
  .calc[data-calc="cost-kwh"],.calc[data-calc="boiler-ups"]{min-height:26rem}
}

/* друк */
@media print{
  .site-head,.site-foot,.navtoggle,.mainnav,.toc,.related,.pn,.crumbs,.hero__cta{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .wrap{max-width:none;padding:0}
  .prose{max-width:none}
  a{color:#000;text-decoration:underline}
  .prose a[href^="/"]::after{content:" (pojasnenyj.com" attr(href) ")";font-size:9pt;color:#555}
  .callout,.card__link,.tablewrap{border:1px solid #999;box-shadow:none;background:#fff}
  .faq__item{border:1px solid #999}
  .faq__item .faq__a{display:block!important}
  table{font-size:9.5pt}
  thead th{background:#eee;position:static}
  h2,h3{break-after:avoid}
  .tablewrap,.callout,.faq__item{break-inside:avoid}
  .calc{display:none}
}