/* Блок «Сделать расчёт» (#compare.rk) — калькулятор на странице, вариант «Цифры»
   (выбор заказчика 19.10.2026). Заменил сравнение «Свой штат или мы».
   Один файл для главной и внутренних: id в селекторах перебивает правила
   светлой темы (body.light-content …), иначе тёмный блок перекрасило бы.
   Разметку ставит tools/calcblock-place.js, логика — assets/calcblock.js. */
#compare.rk{position:relative;padding:84px 0 76px;border-top:0;color:#E8EFEC;
  background:radial-gradient(1100px 480px at 88% 0%,rgba(22,194,168,.11),transparent 62%),#0B1311}
#compare.rk *{box-sizing:border-box}
/* сброс — через :where, с нулевым весом: иначе он перебивал рамки и
   подчёркивания самих элементов (вкладки, список типов помещения) */
:where(#compare.rk) button,:where(#compare.rk) input{font:inherit;color:inherit;background:none;border:0;margin:0}
:where(#compare.rk) input[type=number]{-moz-appearance:textfield}
:where(#compare.rk) input::-webkit-inner-spin-button,:where(#compare.rk) input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#compare.rk :focus-visible{outline:2px solid #16C2A8;outline-offset:3px}
#compare .rk-over{font:500 12px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,239,236,.62)}
#compare .rk-h{font:400 clamp(30px,3.6vw,46px)/1.08 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.025em;color:#fff;margin:14px 0 34px;max-width:660px}
#compare .rk-h em{font-style:normal;color:#16C2A8}

/* виды уборки — тонкие вкладки */
#compare .rk-tabs{display:flex;flex-wrap:wrap;gap:6px 26px;border-bottom:1px solid rgba(255,255,255,.12)}
#compare .rk-tab{padding:0 0 14px;cursor:pointer;color:rgba(232,239,236,.66);font-size:15px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s}
#compare .rk-tab:hover{color:#fff}
#compare .rk-tab.on{color:#fff;border-bottom-color:#16C2A8}

/* площадь и цена */
#compare .rk-stage{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px 0 34px;border-bottom:1px solid rgba(255,255,255,.12);align-items:end}
#compare .rk-lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,239,236,.6);margin-bottom:10px}
#compare .rk-area{display:flex;align-items:baseline;gap:12px}
#compare .rk-area input{width:3.2ch;font:400 clamp(64px,8.6vw,108px)/.95 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.04em;color:#fff;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:4px;border-radius:0}
#compare .rk-area input:focus{border-bottom-color:#16C2A8;outline:0}
#compare .rk-area span{font:400 28px "Bricolage Grotesque",system-ui,sans-serif;color:rgba(232,239,236,.66)}
#compare .rk-meta{display:flex;gap:34px;margin-top:22px;flex-wrap:wrap;align-items:flex-start}
#compare .rk-f{display:flex;flex-direction:column;gap:8px}
#compare .rk-f>span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,239,236,.6)}
#compare .rk-cnt{display:flex;align-items:center;gap:14px;font:400 22px "Bricolage Grotesque",system-ui,sans-serif;color:#fff}
#compare .rk-cnt b{font-weight:400;min-width:1.2em;text-align:center}
#compare .rk-cnt button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;font-size:16px;line-height:1;transition:border-color .2s,color .2s}
#compare .rk-cnt button:hover{border-color:#16C2A8;color:#16C2A8}

/* тип помещения — свой выпадающий список (системный белый выбивался из блока) */
#compare .rk-dd{position:relative}
#compare .rk-sel{display:flex;align-items:center;gap:14px;cursor:pointer;font-size:17px;color:#fff;border-bottom:1px solid rgba(255,255,255,.28);padding:4px 0 5px;min-width:230px;justify-content:space-between;text-align:left;border-radius:0}
#compare .rk-sel:hover,#compare .rk-dd.open .rk-sel{border-bottom-color:#16C2A8}
#compare .rk-sel svg{flex:none;transition:transform .2s}
#compare .rk-dd.open .rk-sel svg{transform:rotate(180deg)}
#compare .rk-list{position:absolute;left:0;top:calc(100% + 10px);z-index:30;width:min(560px,calc(100vw - 32px));list-style:none;margin:0;padding:8px;
  display:none;grid-template-columns:1fr 1fr;gap:2px;background:#121C19;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  box-shadow:0 24px 50px rgba(0,0,0,.45)}
#compare .rk-dd.open .rk-list{display:grid}
#compare .rk-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:9px;cursor:pointer;font-size:14.5px;color:rgba(232,239,236,.82)}
#compare .rk-opt:hover,#compare .rk-opt:focus{background:rgba(22,194,168,.12);color:#fff;outline:0}
#compare .rk-opt[aria-selected=true]{color:#fff}
#compare .rk-opt[aria-selected=true]::after{content:"";width:14px;height:10px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath d='M1 5l4 4 8-8' fill='none' stroke='%2316C2A8' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}

#compare .rk-price{text-align:right}
#compare .rk-from{font:400 clamp(40px,5.2vw,64px)/1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.03em;color:#fff;white-space:nowrap}
#compare .rk-to{font:400 clamp(22px,2.5vw,30px)/1.2 "Bricolage Grotesque",system-ui,sans-serif;color:rgba(232,239,236,.74);margin-top:6px;white-space:nowrap}
#compare .rk-basis{font-size:13px;color:rgba(232,239,236,.62);margin-top:10px}
/* «Важно: это предварительный диапазон» — вариант А, прямо у цены */
#compare .rk-note{text-align:left;max-width:390px;margin:20px 0 0 auto;border-left:2px solid #F0A93B;padding:4px 0 4px 16px;font-size:14px;line-height:1.5;color:#E8EFEC}
#compare .rk-note span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#F0A93B;margin-bottom:4px}

/* состав работ */
#compare .rk-more{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.12)}
#compare .rk-more>button{cursor:pointer;color:#16C2A8;font-size:14px;letter-spacing:.02em}
#compare .rk-more>button span{color:rgba(232,239,236,.62)}
#compare .rk-xl{display:none;grid-template-columns:1fr 1fr;gap:4px 48px;margin-top:20px}
#compare .rk-more.open .rk-xl{display:grid}
#compare .rk-xh{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,239,236,.6);margin:6px 0 4px}
#compare .rk-xr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:14.5px;color:rgba(232,239,236,.86)}
#compare .rk-q{display:flex;align-items:center;gap:10px}
#compare .rk-q input{width:56px;text-align:right;border-bottom:1px solid rgba(255,255,255,.24);color:#fff;font-size:14px;border-radius:0}
#compare .rk-q i{font-style:normal;font-size:12px;color:rgba(232,239,236,.6)}
#compare .rk-sw{position:relative;width:34px;height:20px;border-radius:20px;background:rgba(255,255,255,.16);cursor:pointer;flex:none;transition:background .2s}
#compare .rk-sw::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
#compare .rk-sw[aria-checked=true]{background:#16C2A8}
#compare .rk-sw[aria-checked=true]::after{transform:translateX(14px)}

/* что дальше и кнопка */
#compare .rk-foot{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:28px;padding-top:30px;align-items:start}
#compare .rk-st{border-top:1px solid rgba(255,255,255,.26);padding-top:14px;font-size:13.5px;color:rgba(232,239,236,.8);line-height:1.45}
#compare .rk-st b{display:block;font-weight:400;font-size:13px;color:#16C2A8;letter-spacing:.12em;margin-bottom:6px}
#compare .rk-cta{align-self:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;color:#0B1311;border-radius:12px;padding:16px 26px;font-weight:600;white-space:nowrap;text-decoration:none;transition:background .2s}
#compare .rk-cta:hover{background:#16C2A8}

@media(max-width:900px){
  #compare.rk{padding:60px 0 56px}
  #compare .rk-stage{grid-template-columns:1fr;gap:26px}
  #compare .rk-price{text-align:left}
  #compare .rk-note{margin-left:0}
  #compare .rk-xl{grid-template-columns:1fr}
  #compare .rk-foot{grid-template-columns:1fr}
  #compare .rk-cta{width:100%}
  #compare .rk-list{grid-template-columns:1fr;width:min(360px,calc(100vw - 40px))}
}
@media(prefers-reduced-motion:reduce){#compare.rk *{transition:none!important}}