/* Прораб — общий стиль SEO-страниц (документы и калькуляторы). Тёмно-зелёная тема под сайт. */
:root{
  --bg:#07140e; --surface:#0e1f17; --surface-2:#14241b; --border:#1e3329;
  --text:#eaf2ec; --muted:#8fa79a; --accent:#29d17f; --accent-press:#20b86d;
  --radius:14px; --maxw:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.55; font-size:16px;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 18px}
header.site{
  position:sticky; top:0; z-index:10; background:rgba(7,20,14,.92);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border);
}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:58px}
.brand{display:flex; align-items:center; gap:9px; color:var(--text); font-weight:700; font-size:18px}
.brand:hover{text-decoration:none}
.brand .dot{width:24px; height:24px; border-radius:7px; background:var(--accent); display:grid; place-items:center}
.brand .dot::after{content:""; width:10px; height:10px; border-radius:3px; background:var(--bg)}
.btn{
  display:inline-block; background:var(--accent); color:#06120c; font-weight:700;
  padding:10px 16px; border-radius:11px; border:0; cursor:pointer; font-size:15px; line-height:1;
}
.btn:hover{background:var(--accent-press); text-decoration:none}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn.ghost:hover{background:var(--surface-2)}
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.crumbs{font-size:13px; color:var(--muted); padding:14px 0 2px}
.crumbs a{color:var(--muted)}

h1{font-size:30px; line-height:1.18; margin:10px 0 8px; letter-spacing:-.02em}
.lede{font-size:17px; color:var(--text); margin:0 0 6px; max-width:60ch}
.note{font-size:14px; color:var(--muted); margin:6px 0 0; max-width:62ch}

section{padding:26px 0}
.tool{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start;}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px}
.panel h2{font-size:15px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 14px; font-weight:700}
.field{margin-bottom:12px}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:5px}
.field input, .field textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:10px 11px; font-size:15px; font-family:inherit;
}
.field textarea{resize:vertical; min-height:64px}
.field input::placeholder, .field textarea::placeholder{color:#5d7268}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
.check{display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--text); margin-top:4px}
.check input{width:18px; height:18px; margin-top:1px; accent-color:var(--accent)}

table.works{width:100%; border-collapse:collapse; margin-top:4px}
table.works th{font-size:12px; color:var(--muted); font-weight:600; text-align:left; padding:0 6px 6px}
table.works td{padding:3px 4px; vertical-align:top}
table.works input{padding:8px 8px; font-size:14px}
.rowsum{font-size:14px; color:var(--text); padding-top:16px; white-space:nowrap}
.delrow{background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:8px; width:32px; height:36px; cursor:pointer; font-size:16px; margin-top:0}
.delrow:hover{color:#ff8e8e; border-color:#5a2c2c}
.addrow{margin-top:8px; background:transparent; border:1px dashed var(--border); color:var(--accent); border-radius:10px; padding:9px 12px; cursor:pointer; font-size:14px; font-weight:600; width:100%}
.addrow:hover{background:var(--surface-2)}
.toolbar{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}

/* Document preview — white "paper", looks like the final PDF */
.paperwrap{position:sticky; top:74px}
#doc{
  background:#fff; color:#111; border-radius:10px; padding:30px 32px;
  font-size:13px; line-height:1.5; box-shadow:0 10px 40px rgba(0,0,0,.4);
}
#doc h3{font-size:17px; text-align:center; margin:0 0 2px; letter-spacing:.01em}
#doc .sub{text-align:center; color:#555; font-size:12px; margin-bottom:18px}
#doc .party{margin:7px 0}
#doc .party b{font-weight:700}
#doc table{width:100%; border-collapse:collapse; margin:14px 0 6px; font-size:12px}
#doc th,#doc td{border:1px solid #c9c9c9; padding:6px 8px; text-align:left}
#doc th{background:#f3f3f3; font-weight:700}
#doc td.r,#doc th.r{text-align:right; white-space:nowrap}
#doc .total{text-align:right; font-weight:700; font-size:14px; margin-top:8px}
#doc .words{margin:4px 0 12px; font-style:italic; color:#333}
#doc .clause{margin:12px 0; color:#222}
#doc .npd{font-size:11px; color:#666; margin-top:6px}
#doc .signs{display:flex; justify-content:space-between; gap:24px; margin-top:26px}
#doc .signs div{flex:1}
#doc .sigline{border-bottom:1px solid #333; height:26px; margin-bottom:4px}
#doc .sigcap{font-size:11px; color:#555}

.cta{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border); border-radius:18px; padding:26px 24px; text-align:center;
}
.cta h2{font-size:22px; margin:0 0 8px; letter-spacing:-.01em}
.cta p{color:var(--muted); max-width:56ch; margin:0 auto 16px; font-size:15px}

article.seo{max-width:none}
article.seo h2{font-size:22px; margin:30px 0 10px; letter-spacing:-.01em}
article.seo h3{font-size:17px; margin:20px 0 6px}
article.seo p{margin:0 0 12px; max-width:72ch}
article.seo ul,article.seo ol{margin:0 0 12px; padding-left:20px; max-width:72ch}
article.seo li{margin:5px 0}
.checklist{list-style:none; padding-left:0; max-width:72ch}
.checklist li{position:relative; padding-left:30px; margin:9px 0}
.checklist li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:800}
.faq details{border-top:1px solid var(--border); padding:14px 0}
.faq summary{cursor:pointer; font-weight:600; font-size:16px; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--accent); font-weight:700; margin-right:10px}
.faq details[open] summary::before{content:"–"}
.faq p{margin:10px 0 0; color:var(--muted)}

.related{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px}
.related a{display:block; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; color:var(--text)}
.related a:hover{border-color:var(--accent); text-decoration:none}
.related .k{font-size:13px; color:var(--muted); margin-bottom:4px}
.related .t{font-weight:700}

footer.site{border-top:1px solid var(--border); margin-top:30px; padding:24px 0; color:var(--muted); font-size:14px}
footer.site .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
footer.site a{color:var(--muted); margin-left:16px}

@media (max-width:860px){
  .tool{grid-template-columns:1fr}
  .paperwrap{position:static}
  h1{font-size:25px}
  .related{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important}}

/* PRINT: show only the document */
@media print{
  @page{margin:14mm}
  body{background:#fff; color:#000}
  header.site,.crumbs,.hero-text,.tool .panel:not(.paperwrap),.toolbar,.cta,article.seo,.related,footer.site,.addrow,.printhide{display:none !important}
  .tool{display:block}
  .paperwrap{position:static}
  #doc{box-shadow:none; border-radius:0; padding:0; font-size:12px}
  #doc table{font-size:11px}
}

/* ── Хаб /instrumenty/ — навигация и карточки-категории ── */
.nav{display:flex; align-items:center; gap:18px; margin-left:auto}
.navlink{color:#9cc4b5; font-size:14.5px; font-weight:600}
.navlink.active{color:var(--text)}
.cat-title{font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin:8px 0 14px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.card{display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 16px 15px; color:var(--text); transition:.15s}
.card:hover{border-color:var(--accent); text-decoration:none; transform:translateY(-2px)}
.card .ic{font-size:22px; line-height:1; margin-bottom:9px}
.card .tag{display:inline-block; font-size:11px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px}
.card .t{font-weight:700; font-size:15.5px; margin-bottom:3px}
.card .d{font-size:13px; color:var(--muted); line-height:1.45}
@media (max-width:860px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .cards{grid-template-columns:1fr} .navlink{display:none} }

/* ── Калькулятор-таблица: защита от переполнения на узких экранах ── */
table.works{table-layout:fixed}
table.works td, table.works th{min-width:0}
.field input, table.works input{min-width:0}
@media (max-width:860px){
  table.works th, table.works td{padding-left:3px; padding-right:3px}
  table.works input{padding:7px 5px; font-size:13px}
  .rowsum{white-space:normal; font-size:12px; padding-top:14px}
  .delrow{width:26px; height:34px}
  .wrap{overflow-x:hidden}
}