/* Общее для страниц с меню: выпадающий пункт «Услуги», короткая кнопка на телефоне, блок «Из практики» */
header.top .nav{display:flex;flex:1;gap:22px;font-weight:500}
.nav-dd{position:relative}
.nav-dd > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 0;user-select:none}
.nav-dd > summary::-webkit-details-marker{display:none}
.nav-dd > summary::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.nav-dd[open] > summary::after{transform:translateY(1px) rotate(225deg)}
.nav-dd > summary:hover{text-decoration:underline;text-underline-offset:6px}
.nav-dd > summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dd-panel{position:absolute;top:calc(100% + 8px);left:-14px;z-index:40;width:min(340px,calc(100vw - 32px));padding:6px;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;box-shadow:0 14px 30px -14px rgba(27,42,65,.4)}
.nav .dd-panel a{display:grid;gap:1px;padding:9px 12px;border-radius:3px;text-decoration:none}
.nav .dd-panel a b{font-weight:600}
.nav .dd-panel a span{font-size:13.5px;font-weight:400;color:var(--mute)}
.nav .dd-panel a:hover,.nav .dd-panel a:focus-visible{background:var(--row);outline:none;text-decoration:none}
.nav .dd-panel a[aria-current]{background:var(--head);text-decoration:none}
.logo-sub{font-weight:400;font-size:13px;letter-spacing:0;color:var(--mute);padding-left:10px;margin-left:2px;border-left:1px solid var(--line);white-space:nowrap}
.eyebrow{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--mute)}
.eyebrow b{color:var(--ink);font-weight:600}
/* строка фактов — только на узких экранах: на широких те же цены и конфигурации видны в документе справа */
.facts{display:none;margin:-8px 0 22px;font-size:14px;line-height:1.7;color:var(--ink);font-weight:500}
@media (max-width:860px){ .facts{display:block} }
.home-sec{max-width:1144px;margin:0 auto;padding:0 32px 48px}
.home-sec h2{margin:0 0 18px;font-size:24px;line-height:1.2;letter-spacing:-.015em}
.home-sec .steps{list-style:none;margin:0;padding:22px 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
  background:var(--paper);border:1px solid var(--line);border-radius:4px}
.home-sec .steps li{display:grid;gap:4px;align-content:start}
.home-sec .steps b{font:600 13px/1.6 var(--mono);color:var(--mute)}
.home-sec .steps h3{margin:0;font-size:16px}
.home-sec .steps p{margin:0;color:var(--mute)}
@media (max-width:900px){ .home-sec{padding:0 16px 36px} .home-sec .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .home-sec .steps{grid-template-columns:minmax(0,1fr)} }
.doc-foot{padding:9px 16px;border-top:1px solid var(--line);background:#FAFBFC;font-size:12.5px;color:var(--mute)}
.price.price3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sec-lead{margin:-6px 0 18px;color:#2B3A50;max-width:80ch}
.calc-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:start}
.benefits{gap:12px}
.benefits li b{color:var(--ink)}
@media (max-width:900px){ .calc-grid{grid-template-columns:minmax(0,1fr);gap:24px} }
.cols.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .cols.cols3{grid-template-columns:minmax(0,1fr)} }
@media (max-width:1000px){ .logo-sub{display:none} }
@media (max-width:900px){ .price.price3{grid-template-columns:minmax(0,1fr)} }
.btn.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--head)}
.num{text-align:right;font-family:var(--mono);white-space:nowrap}
.prod-note{margin:0 0 12px;color:var(--mute);font-size:14px}
.prod-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.others{margin:0;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14px;color:var(--mute)}
.others a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.cases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.cases li{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:4px;padding:14px 18px;color:#2B3A50}
.cases li b{color:var(--ink)}
@media (max-width:900px){
  .cases{grid-template-columns:minmax(0,1fr)}
  header.top{position:relative}
  .nav-dd{position:static}
  .dd-panel{left:16px;right:16px;top:calc(100% + 4px);width:auto}
}
@media (max-width:520px){
  header.top{gap:12px}
  header.top .nav{gap:14px}
  .cta .cta-long{display:none}
}
@media (max-width:430px){
  /* два меню и логотип занимают всю шапку; Telegram есть в тексте страницы и в подвале */
  header.top .cta{display:none}
}
/* контакты в шапке: телефон, WhatsApp, Telegram — на узких экранах остаётся только WhatsApp */
.hd-contacts{display:flex;align-items:center;gap:8px;flex:none}
.hd-phone{font-weight:600;font-size:14px;white-space:nowrap;text-decoration:none;margin-right:4px}
.hd-phone:hover{text-decoration:underline;text-underline-offset:4px}
.cta.cta-wa{background:#1E7F45}
.cta.cta-wa:hover{background:#17663A}
.cta.cta-tg{background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:8px 13px}
.cta.cta-tg:hover{background:var(--head)}
@media (max-width:1100px){ .hd-phone{display:none} }
@media (max-width:760px){ .cta.cta-tg{display:none} }
/* на телефоне шапка занята логотипом и меню — WhatsApp и телефон есть над формой и в подвале */
@media (max-width:479px){ header.top .hd-contacts{display:none} }
.nav-link{padding:6px 0;text-decoration:none;white-space:nowrap}
.nav-link:hover{text-decoration:underline;text-underline-offset:6px}
.nav-link[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.nav-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:430px){ header.top .nav{gap:12px} }
/* «Статьи» на телефоне не помещаются в одну строку с остальным меню — там они есть в подвале */
@media (max-width:640px){ header.top .nav-art{display:none} }
@media (max-width:760px){ .cta .cta-long{display:none} }
/* на самых узких экранах три пункта меню не помещаются рядом с логотипом — меню второй строкой */
@media (max-width:374px){ header.top{flex-wrap:wrap;row-gap:4px} header.top .nav{flex-basis:100%;gap:18px} }
@media (prefers-reduced-motion:reduce){ .nav-dd > summary::after{transition:none} }
/* abon-home */
.abon-home{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr));background:var(--paper);
  border:1px solid var(--line);border-radius:4px}
.abon-home > *{padding:18px 20px}
.abon-home > * + *{border-left:1px solid var(--line)}
.abon-home p{margin:0 0 12px;color:var(--mute)}
.abon-home a.more{font-weight:600;text-decoration:underline;text-underline-offset:4px}
.abon-home b{display:block;font-size:16px}
.abon-home .sum{display:block;font:600 18px/1.4 var(--mono);margin:4px 0 2px}
.abon-home small{color:var(--mute);font-size:13.5px}
.abon-home .hot{background:#FFFCF0}
@media (max-width:900px){ .abon-home{grid-template-columns:repeat(2,minmax(0,1fr))} .abon-home > :first-child{grid-column:1 / -1}
  .abon-home > * + *{border-left:0;border-top:1px solid var(--line)} .abon-home > :nth-child(odd):not(:first-child){border-left:1px solid var(--line)} }
/* /abon-home */