/* Калькулятор окупаемости на главной. Все классы с префиксом ck,
   чтобы ничего не задеть в bundle.css. */
.calc-sec{padding:58px 0}
.calc-sec .sec-lead{margin-bottom:22px}
@media (max-width:760px){.calc-sec{padding:44px 0}}

.ck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:0;
  grid-template-areas:"in out" "tbl out";
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  overflow:hidden}
.ck-in{grid-area:in}
.ck-out{grid-area:out}
.ck-tblbox{grid-area:tbl;padding:0 20px 20px}
/* на узком экране порядок другой: поля, результат, и только потом сравнение */
@media (max-width:860px){
  .ck{display:flex;flex-direction:column}
  .ck-in{order:1}
  .ck-out{order:2}
  .ck-tblbox{order:3;padding:16px}
}

.ck-in{padding:20px}
.ck-out{padding:20px;background:var(--alt);border-left:1px solid var(--line);
  display:flex;flex-direction:column}
@media (max-width:860px){.ck-out{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:560px){.ck-in,.ck-out{padding:16px}}

.ck-f{margin-bottom:14px}
.ck-f:last-child{margin-bottom:0}
.ck-lab{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--t2);
  margin-bottom:7px}
.ck-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
@media (max-width:420px){.ck-row{grid-template-columns:1fr}}

/* тариф: компактные плашки в один ряд */
.ck-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
@media (max-width:860px){.ck-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ck-plan{position:relative;display:block;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);padding:9px 10px;cursor:pointer;transition:border-color .16s,background .16s}
.ck-plan:hover{border-color:var(--line2)}
.ck-plan input{position:absolute;opacity:0;pointer-events:none}
.ck-plan b{display:block;font-size:13px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.ck-plan span{display:block;font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.ck-plan:has(input:checked){border-color:var(--t1);background:var(--alt);box-shadow:inset 0 0 0 1px var(--t1)}
.ck-plan input:focus-visible+b{outline:2px solid var(--t1);outline-offset:3px}

.ck-pre{display:flex;gap:8px;align-items:flex-start;margin-top:9px;font-size:12.5px;
  color:var(--t3);cursor:pointer;line-height:1.4}
.ck-pre input{width:15px;height:15px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--t1)}

.ck select,.ck input[type=number]{width:100%;font:inherit;font-size:14.5px;color:var(--t1);
  background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:10px 11px;
  -webkit-appearance:none;appearance:none}
.ck select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626C80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:17px;padding-right:36px}
.ck select:focus,.ck input[type=number]:focus{outline:none;border-color:var(--t1)}
.ck-money{position:relative}
.ck-money input{padding-right:32px}
.ck-money i{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--t3);
  font-size:14.5px;font-style:normal;pointer-events:none}

.ck-hint{font-size:12px;color:var(--t3);line-height:1.45;margin:0 0 12px}

.ck-tune{border:1px solid var(--line);border-radius:10px;background:transparent;box-shadow:none;
  padding:0;margin:0}
.ck-tune>summary{cursor:pointer;padding:9px 12px;font-size:12.5px;font-weight:600;color:var(--t2);
  list-style:none;display:flex;align-items:center;gap:7px}
.ck-tune>summary::-webkit-details-marker{display:none}
.ck-tune>summary::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.ck-tune[open]>summary::before{transform:rotate(45deg)}
.ck-tune>summary:hover{color:var(--t1)}
.ck-tune-body{padding:0 12px 12px}
.ck-fine{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck-fine .ck-lab{font-size:11.5px;margin-bottom:5px;font-weight:500}
.ck-fine input{font-size:14px;padding:8px 10px}

/* результат */
.ck-big{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ck-big b{font-size:clamp(30px,4.4vw,38px);font-weight:640;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.ck-big span{font-size:14px;color:var(--t2)}
.ck-per{font-size:12.5px;color:var(--t3);margin:5px 0 14px}

.ck-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px}
@media (max-width:420px){.ck-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ck-grid div{background:var(--card);padding:9px 10px}
.ck-grid span{display:block;font-size:11px;color:var(--t3);line-height:1.3;margin-bottom:3px}
.ck-grid b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums}

.ck-verdict{border:1px solid var(--line2);border-radius:10px;background:var(--card);
  padding:11px 12px;font-size:13px;line-height:1.5;color:var(--t1);margin-bottom:12px}
.ck-verdict.ok{border-color:var(--ok)}
.ck-verdict i{display:block;font-style:normal;margin-top:4px;font-size:12px;color:var(--t2)}

.ck-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ck-tbl-note{margin:7px 0 0;font-size:11.5px;color:var(--t3);line-height:1.45}
.ck-tbl th,.ck-tbl td{text-align:right;padding:7px 6px;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;color:var(--t2)}
.ck-tbl th:first-child,.ck-tbl td:first-child{text-align:left;color:var(--t1)}
.ck-tbl th{font-size:10.5px;font-weight:680;letter-spacing:.07em;text-transform:uppercase;
  color:var(--t3);border-bottom-color:var(--line2)}
.ck-tbl tr.now td{color:var(--t1);font-weight:600}
.ck-tbl tr:last-child td{border-bottom:0}

.ck-cta{margin-top:auto;padding-top:14px}
.ck-cta .btn{width:100%}

/* подвал блока: пояснение и ссылки на разборы ниш */
.ck-after{margin:16px 0 0;font-size:12.5px;color:var(--t3);line-height:1.6}
.ck-after a{color:var(--t2);text-decoration:underline;text-underline-offset:2px}
.ck-after a:hover{color:var(--t1)}
.ck-why{margin-top:14px;border:0;background:transparent;box-shadow:none;padding:0}
.ck-why>summary{cursor:pointer;list-style:none;font-size:12.5px;font-weight:600;color:var(--t2)}
.ck-why>summary::-webkit-details-marker{display:none}
.ck-why>summary:hover{color:var(--t1)}
.ck-why p{margin:8px 0 0;font-size:12.5px;color:var(--t3);line-height:1.6;max-width:92ch}