/* ksx.css — content kit for keys.ua service pages (night 2026-09-28).
   Scope: everything lives under <div class="ksx">. Nothing outside it is touched.
   Why ".ksx.ksx": the theme styles content through ".side_tab .tab_details p|h2" (0,2,1)
   and ".article ul li" / ".services-article ul li:before". The doubled root class lifts
   every rule to at least (0,2,x) so the kit wins without !important, and the file is
   loaded after main.min.css, so ties also go to the kit.
   Tokens are taken from the live theme: green #195917 (menu, buttons, check icons),
   link green #197c1d, red tick #7a0000 (.corporate-capt:before), ink #323232/#444,
   sidebar grey #f8f8f8, footer #212832. Fonts: Open Sans (body) + Raleway (h2), both
   already served by the site. No new colours, no new fonts, no motion beyond hover. */

.ksx.ksx{
  --ksx-g:#195917;      /* brand green */
  --ksx-g-link:#197c1d; /* inline link green of the theme */
  --ksx-g-tint:#f2f6f1; /* green-tinted paper for boxes */
  --ksx-line:#d6dfd3;   /* hairline */
  --ksx-r:#7a0000;      /* the theme's red tick */
  --ksx-ink:#262a2e;    /* headings */
  --ksx-text:#3b3f42;   /* body, 10.6:1 on white */
  --ksx-mute:#5b6166;   /* secondary text, 6.3:1 on white */
  --ksx-paper:#fff;
  display:block;clear:both;text-align:left;color:var(--ksx-text);padding-top:16px;
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  overflow-wrap:break-word;word-wrap:break-word;
}
.ksx.ksx *,.ksx.ksx *::before,.ksx.ksx *::after{box-sizing:border-box}

/* ---------- base text inside the kit ---------- */
.ksx.ksx p{font-size:15px;line-height:1.7;color:var(--ksx-text);padding:0;margin:0 0 14px;text-align:left}
.ksx.ksx ul,.ksx.ksx ol{font-size:15px;line-height:1.65;color:var(--ksx-text);padding:0;margin:0 0 18px}
.ksx.ksx ul>li{margin:0 0 8px;padding-left:28px;min-height:0}
.ksx.ksx li p{margin:0}
.ksx.ksx strong,.ksx.ksx b{color:var(--ksx-ink)}
.ksx.ksx a{color:var(--ksx-g-link);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.ksx.ksx a:hover{color:var(--ksx-g)}

/* H2: left aligned, Raleway like the theme, red 45x3 tick from .corporate-capt above it */
.ksx.ksx h2{position:relative;font-family:Raleway,"Open Sans",Arial,sans-serif;font-weight:700;
  font-size:25px;line-height:1.25;letter-spacing:0;color:var(--ksx-ink);text-align:left;
  margin:44px 0 16px;padding:16px 0 0;text-wrap:balance}
.ksx.ksx h2::before{content:"";display:block;position:absolute;top:0;left:0;width:45px;height:3px;background:var(--ksx-r)}
.ksx.ksx h3{font-family:"Open Sans",Arial,sans-serif;font-weight:700;font-size:18px;line-height:1.35;
  color:var(--ksx-ink);text-align:left;margin:26px 0 10px;padding:0}
.ksx.ksx>*:first-child{margin-top:0}

/* ---------- 1. Lead answer ---------- */
.ksx.ksx .ksx-lead{font-size:18px;line-height:1.6;color:var(--ksx-ink);margin:4px 0 18px}
.ksx.ksx .ksx-lead strong{font-weight:600}

/* ---------- 2. Action row (top) and buttons ---------- */
.ksx.ksx .ksx-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 26px;padding:0}
.ksx.ksx .ksx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:10px 18px;border:2px solid var(--ksx-g);border-radius:3px;background:var(--ksx-g);
  color:#fff;font:700 14px/1.2 "Open Sans",Arial,sans-serif;letter-spacing:.02em;text-decoration:none;
  text-transform:none;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}
.ksx.ksx a.ksx-btn,.ksx.ksx a.ksx-btn:hover{color:#fff;text-decoration:none}
.ksx.ksx .ksx-btn:hover{background:#12420f;border-color:#12420f}
.ksx.ksx .ksx-btn--ghost,.ksx.ksx a.ksx-btn--ghost{background:transparent;color:var(--ksx-g)}
.ksx.ksx .ksx-btn--ghost:hover,.ksx.ksx a.ksx-btn--ghost:hover{background:var(--ksx-g);color:#fff}
.ksx.ksx .ksx-btn:focus-visible{outline:2px solid var(--ksx-g);outline-offset:2px}
.ksx.ksx .ksx-btn svg{width:18px;height:18px;margin-right:8px;flex:none;fill:currentColor}

/* ---------- 3. "Коротко" box ---------- */
.ksx.ksx .ksx-short{background:var(--ksx-g-tint);border-top:3px solid var(--ksx-g);padding:20px 24px 8px;margin:0 0 30px}
.ksx.ksx .ksx-short h2{font:700 13px/1.3 "Open Sans",Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ksx-g);margin:0 0 12px;padding:0}
.ksx.ksx .ksx-short h2::before{display:none}
.ksx.ksx .ksx-short ul{margin:0 0 12px}
.ksx.ksx .ksx-short ul>li{padding-left:22px;margin:0 0 10px;color:var(--ksx-ink)}
.ksx.ksx .ksx-short ul>li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--ksx-g);background-image:none}

/* ---------- 4. Steps ---------- */
.ksx.ksx ol.ksx-steps{counter-reset:ksxstep;list-style:none;margin:6px 0 26px;padding:0}
.ksx.ksx ol.ksx-steps>li{counter-increment:ksxstep;position:relative;list-style:none;margin:0;padding:0 0 22px 56px;min-height:40px;overflow:visible}
.ksx.ksx ol.ksx-steps>li::before{content:counter(ksxstep);position:absolute;left:0;top:0;width:36px;height:36px;
  background:var(--ksx-g);color:#fff;font:700 16px/36px "Open Sans",Arial,sans-serif;text-align:center}
.ksx.ksx ol.ksx-steps>li::after{content:"";position:absolute;left:17px;top:40px;bottom:4px;width:2px;background:var(--ksx-line)}
.ksx.ksx ol.ksx-steps>li:last-child{padding-bottom:4px}
.ksx.ksx ol.ksx-steps>li:last-child::after{display:none}
.ksx.ksx ol.ksx-steps>li>strong:first-child{display:block;font-size:16px;line-height:1.35;margin:6px 0 4px;color:var(--ksx-ink)}

/* ---------- 5. Table (price factors / comparison) ---------- */
.ksx.ksx .ksx-table-wrap{margin:8px 0 26px;padding:0;overflow:visible}
.ksx.ksx table.ksx-table{width:100%;border-collapse:collapse;border:0;margin:0;font-size:14.5px;line-height:1.55;background:var(--ksx-paper)}
.ksx.ksx table.ksx-table caption{caption-side:top;text-align:left;font-size:13px;color:var(--ksx-mute);padding:0 0 8px}
.ksx.ksx table.ksx-table th{background:var(--ksx-g);color:#fff;font-weight:700;text-align:left;vertical-align:bottom;padding:10px 12px;border:0;border-right:1px solid rgba(255,255,255,.25)}
.ksx.ksx table.ksx-table th:last-child{border-right:0}
.ksx.ksx table.ksx-table td{border:0;border-bottom:1px solid var(--ksx-line);padding:10px 12px;text-align:left;vertical-align:top;color:var(--ksx-text)}
.ksx.ksx table.ksx-table td+td{text-align:left}
.ksx.ksx table.ksx-table tr>td:first-child{font-weight:700;color:var(--ksx-ink)}
.ksx.ksx table.ksx-table tbody tr:nth-child(even) td{background:#fafbf9}

/* ---------- 6. "Що потрібно від вас" checklist ---------- */
.ksx.ksx ul.ksx-need{margin:4px 0 26px;padding:0;border-top:1px solid var(--ksx-line)}
.ksx.ksx ul.ksx-need>li{position:relative;margin:0;padding:11px 0 11px 34px;border-bottom:1px solid var(--ksx-line)}
.ksx.ksx ul.ksx-need>li::before{content:"";position:absolute;left:2px;top:14px;width:18px;height:18px;
  border:2px solid var(--ksx-g);background:#fff;background-image:none;border-radius:2px}

/* ---------- 7. Legal basis ---------- */
.ksx.ksx .ksx-law{border-left:3px solid var(--ksx-r);background:#fbfaf9;padding:16px 20px 6px;margin:4px 0 28px}
.ksx.ksx .ksx-law .ksx-label{font:700 13px/1.3 "Open Sans",Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--ksx-r);margin:0 0 10px}
.ksx.ksx .ksx-law ul{margin:0 0 10px}
.ksx.ksx .ksx-law ul>li{padding:0 0 0 0;margin:0 0 12px;font-size:14.5px}
.ksx.ksx .ksx-law ul>li::before{display:none}
.ksx.ksx .ksx-src{color:var(--ksx-g-link);font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ksx.ksx .ksx-src:hover{color:var(--ksx-g)}
.ksx.ksx .ksx-src:focus-visible{outline:2px solid var(--ksx-g);outline-offset:2px}

/* ---------- 8. Note (optional callout) ---------- */
.ksx.ksx .ksx-note{border:1px solid var(--ksx-line);border-left:3px solid var(--ksx-g);padding:14px 18px 2px;margin:0 0 24px;background:#fff}

/* ---------- 9. Trust / requisites ---------- */
.ksx.ksx dl.ksx-trust{margin:6px 0 28px;padding:0;border:1px solid var(--ksx-g);background:#fff}
.ksx.ksx dl.ksx-trust>div{display:grid;grid-template-columns:130px 1fr;gap:0 20px;padding:13px 20px;border-bottom:1px solid var(--ksx-line)}
.ksx.ksx dl.ksx-trust>div:last-child{border-bottom:0}
.ksx.ksx dl.ksx-trust dt{font:700 12.5px/1.5 "Open Sans",Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--ksx-g);padding-top:2px;margin:0}
.ksx.ksx dl.ksx-trust dd{margin:0;font-size:15px;line-height:1.6;color:var(--ksx-ink)}

/* ---------- 10. FAQ accordion (details/summary, no JS) ---------- */
.ksx.ksx .ksx-faq{margin:6px 0 28px;border-top:1px solid var(--ksx-line)}
.ksx.ksx .ksx-faq details{border-bottom:1px solid var(--ksx-line);margin:0;padding:0}
.ksx.ksx .ksx-faq summary{display:block;list-style:none;position:relative;cursor:pointer;padding:15px 44px 15px 0;margin:0}
.ksx.ksx .ksx-faq summary::-webkit-details-marker{display:none}
.ksx.ksx .ksx-faq summary::marker{content:""}
.ksx.ksx .ksx-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:linear-gradient(var(--ksx-g),var(--ksx-g)) center/14px 2px no-repeat,linear-gradient(var(--ksx-g),var(--ksx-g)) center/2px 14px no-repeat;
  transition:transform .18s ease-out}
.ksx.ksx .ksx-faq details[open]>summary::after{background:linear-gradient(var(--ksx-g),var(--ksx-g)) center/14px 2px no-repeat;transform:rotate(180deg)}
.ksx.ksx .ksx-faq summary h3{display:inline;font-size:16.5px;line-height:1.45;margin:0;padding:0;color:var(--ksx-ink)}
.ksx.ksx .ksx-faq summary:hover h3{color:var(--ksx-g)}
.ksx.ksx .ksx-faq summary:focus-visible{outline:2px solid var(--ksx-g);outline-offset:2px}
.ksx.ksx .ksx-faq .ksx-a{padding:0 44px 6px 0}

/* ---------- 11. CTA plate ---------- */
.ksx.ksx .ksx-cta{background:var(--ksx-g);color:#fff;padding:24px 28px 24px;margin:34px 0 30px;position:relative;border-left:6px solid var(--ksx-r)}
.ksx.ksx .ksx-cta .ksx-cta-t{font:700 21px/1.3 Raleway,"Open Sans",Arial,sans-serif;color:#fff;margin:0 0 8px}
.ksx.ksx .ksx-cta p{color:#fff;margin:0 0 16px}
.ksx.ksx .ksx-cta .ksx-actions{margin:0}
.ksx.ksx .ksx-cta .ksx-btn{background:#fff;border-color:#fff;color:var(--ksx-g)}
.ksx.ksx .ksx-cta a.ksx-btn{color:var(--ksx-g)}
.ksx.ksx .ksx-cta .ksx-btn:hover,.ksx.ksx .ksx-cta a.ksx-btn:hover{background:#e9f0e8;border-color:#e9f0e8;color:#12420f}
.ksx.ksx .ksx-cta .ksx-btn--ghost,.ksx.ksx .ksx-cta a.ksx-btn--ghost{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.ksx.ksx .ksx-cta .ksx-btn--ghost:hover,.ksx.ksx .ksx-cta a.ksx-btn--ghost:hover{background:#fff;border-color:#fff;color:var(--ksx-g)}
.ksx.ksx .ksx-cta .ksx-btn:focus-visible{outline-color:#fff}

/* ---------- 12. Related services ---------- */
.ksx.ksx ul.ksx-related{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:4px 0 26px;padding:0;border-top:1px solid var(--ksx-line)}
.ksx.ksx ul.ksx-related>li{margin:0;padding:0;border-bottom:1px solid var(--ksx-line)}
.ksx.ksx ul.ksx-related>li::before{display:none}
.ksx.ksx ul.ksx-related a{display:block;position:relative;padding:12px 22px 12px 0;color:var(--ksx-ink);font-weight:600;text-decoration:none;line-height:1.45}
.ksx.ksx ul.ksx-related a::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;margin-top:-5px;
  border-right:2px solid var(--ksx-g);border-top:2px solid var(--ksx-g);transform:rotate(45deg);transition:right .15s}
.ksx.ksx ul.ksx-related a:hover{color:var(--ksx-g);text-decoration:underline}
.ksx.ksx ul.ksx-related a:hover::after{right:0}

/* ---------- figures (stage schemes, pictures) ---------- */
.ksx.ksx figure{margin:10px 0 24px}
.ksx.ksx figure img{display:block;max-width:100%;width:100%;height:auto}
.ksx.ksx figcaption{font-size:13px;color:var(--ksx-mute);margin-top:8px}

/* ---------- mobile (the theme switches layout below 768px) ---------- */
@media (max-width:767px){
  .ksx.ksx p,.ksx.ksx ul,.ksx.ksx ol{font-size:16px}
  .ksx.ksx h2{font-size:22px;margin:36px 0 14px}
  .ksx.ksx .ksx-lead{font-size:17.5px}
  .ksx.ksx .ksx-actions{gap:8px}
  /* links (consult, order, phone) take a full row; messenger spans share a row */
  .ksx.ksx .ksx-actions a.ksx-btn{flex:1 1 100%;text-align:center}
  .ksx.ksx .ksx-actions span.ksx-btn{flex:1 1 calc(50% - 4px)}
  .ksx.ksx .ksx-short{padding:16px 16px 6px;margin-left:0;margin-right:0}
  .ksx.ksx ol.ksx-steps>li{padding-left:48px}
  .ksx.ksx ol.ksx-steps>li::before{width:32px;height:32px;line-height:32px;font-size:15px}
  .ksx.ksx ol.ksx-steps>li::after{left:15px;top:36px}
  /* table becomes stacked rows; each td shows its column name from data-label */
  .ksx.ksx table.ksx-table,.ksx.ksx table.ksx-table tbody,.ksx.ksx table.ksx-table tr,.ksx.ksx table.ksx-table td{display:block;width:100%}
  .ksx.ksx table.ksx-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ksx.ksx table.ksx-table tr{border:1px solid var(--ksx-line);border-top:3px solid var(--ksx-g);margin:0 0 12px}
  .ksx.ksx table.ksx-table tbody tr:nth-child(even) td{background:#fff}
  .ksx.ksx table.ksx-table td{padding:8px 14px;font-size:15px}
  .ksx.ksx table.ksx-table td:last-child{border-bottom:0}
  .ksx.ksx table.ksx-table td[data-label]::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ksx-mute);margin-bottom:2px}
  .ksx.ksx table.ksx-table tr>td:first-child{background:var(--ksx-g-tint);font-size:16px}
  .ksx.ksx .ksx-law{padding:14px 16px 4px}
  .ksx.ksx dl.ksx-trust>div{grid-template-columns:1fr;padding:12px 16px}
  .ksx.ksx .ksx-faq summary{padding-right:36px}
  .ksx.ksx .ksx-faq .ksx-a{padding-right:0}
  .ksx.ksx .ksx-cta{padding:22px 18px 20px}
  .ksx.ksx ul.ksx-related{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ksx.ksx *{transition:none!important}
}
@media print{
  .ksx.ksx .ksx-actions,.ksx.ksx .ksx-cta{display:none}
  .ksx.ksx .ksx-faq details>*:not(summary){display:block}
}