/* ============================================================
   ПУБЛІЧНІ СТОРІНКИ КРОК (індексовані Google)
   ------------------------------------------------------------
   Окремий легкий стиль, НЕ вантажить дизайн хабу: ці сторінки
   мають відкриватись швидко з мобільного пошуку й читатись як
   довідник. Жодного JS для показу контенту — усе в розмітці.
============================================================ */

:root{
  --kp-bg:#f8fafc; --kp-surface:#fff; --kp-line:#e2e8f0;
  --kp-text:#0f172a; --kp-muted:#64748b; --kp-soft:#94a3b8;
  --kp-accent:#0d9488; --kp-accent-dk:#0f766e;
  --kp-ok-bg:#ecfdf5; --kp-ok-line:#6ee7b7; --kp-ok-text:#065f46;
  --kp-warn:#9a3412; --kp-warn-bg:#fff7ed; --kp-warn-line:#fdba74;
  --kp-radius:14px;
  --kp-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --kp-bg:#0b1120; --kp-surface:#111827; --kp-line:#1f2937;
    --kp-text:#e5e7eb; --kp-muted:#9ca3af; --kp-soft:#6b7280;
    --kp-accent:#2dd4bf; --kp-accent-dk:#5eead4;
    --kp-ok-bg:#052e2b; --kp-ok-line:#0f766e; --kp-ok-text:#5eead4;
    --kp-warn:#fdba74; --kp-warn-bg:#2a1a0d; --kp-warn-line:#7c2d12;
    --kp-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{ box-sizing:border-box; }
body.kp{
  margin:0; background:var(--kp-bg); color:var(--kp-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.kp-wrap{ max-width:820px; margin:0 auto; padding:16px 16px 64px; }
.kp a{ color:var(--kp-accent-dk); text-decoration:none; }
.kp a:hover{ text-decoration:underline; }

/* ── Шапка ── */
.kp-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0 18px; border-bottom:1px solid var(--kp-line); margin-bottom:20px;
}
.kp-brand{ display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.01em;
  color:var(--kp-text); font-size:17px; }
.kp-brand:hover{ text-decoration:none; }
.kp-brand__dot{ width:9px; height:9px; border-radius:50%; background:var(--kp-accent); flex:none; }
.kp-top__cta{
  padding:8px 15px; border-radius:99px; font-size:13.5px; font-weight:700;
  background:var(--kp-accent); color:#fff; white-space:nowrap;
}
.kp-top__cta:hover{ background:var(--kp-accent-dk); text-decoration:none; color:#fff; }

/* ── Хлібні крихти ── */
.kp-crumbs{ font-size:13px; color:var(--kp-muted); margin:0 0 14px; display:flex;
  flex-wrap:wrap; gap:6px; align-items:center; }
.kp-crumbs span{ color:var(--kp-soft); }

/* ── Мета-чипи ── */
.kp-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 16px; }
.kp-chip{
  font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px;
  background:var(--kp-surface); border:1px solid var(--kp-line); color:var(--kp-muted);
}
.kp-chip--year{ color:var(--kp-accent-dk); border-color:var(--kp-accent); }

/* ── Питання ── */
.kp-card{
  background:var(--kp-surface); border:1px solid var(--kp-line);
  border-radius:var(--kp-radius); padding:20px; box-shadow:var(--kp-shadow);
  margin:0 0 18px;
}
h1.kp-q{ font-size:21px; line-height:1.45; font-weight:700; margin:0 0 18px; letter-spacing:-.01em; }

.kp-opts{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.kp-opt{
  display:flex; align-items:flex-start; gap:11px; padding:12px 14px;
  border:1px solid var(--kp-line); border-radius:11px; background:var(--kp-bg);
  font-size:15px;
}
.kp-opt__l{
  flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
  font-size:12.5px; font-weight:800; background:var(--kp-surface);
  border:1px solid var(--kp-line); color:var(--kp-muted);
}
.kp-opt--ok{ background:var(--kp-ok-bg); border-color:var(--kp-ok-line); }
.kp-opt--ok .kp-opt__l{ background:var(--kp-accent); border-color:var(--kp-accent); color:#fff; }
.kp-opt--ok .kp-opt__t{ font-weight:600; color:var(--kp-ok-text); }
.kp-opt__badge{
  margin-left:auto; flex:none; font-size:11px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:var(--kp-ok-text); align-self:center;
}

/* ── Пояснення ── */
.kp-expl{ margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--kp-line); }
.kp-expl h2{
  font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--kp-accent-dk); margin:0 0 9px;
}
.kp-expl p{ margin:0 0 12px; font-size:15px; }
.kp-others{ margin-top:20px; }
.kp-others h2{ color:var(--kp-warn); }
.kp-other{
  border:1px solid var(--kp-line); border-radius:11px; padding:11px 14px;
  margin:0 0 8px; background:var(--kp-bg);
}
.kp-other summary{
  cursor:pointer; font-weight:700; font-size:14px; list-style:none;
  display:flex; align-items:center; gap:8px; color:var(--kp-text);
}
.kp-other summary::-webkit-details-marker{ display:none; }
.kp-other summary::before{
  content:''; flex:none; width:0; height:0;
  border-left:5px solid var(--kp-soft); border-top:4px solid transparent;
  border-bottom:4px solid transparent; transition:transform .18s ease;
}
.kp-other[open] summary::before{ transform:rotate(90deg); }
.kp-other__b{ margin-top:9px; font-size:14px; color:var(--kp-muted); }

/* ── CTA (конверсія в реєстрацію) ── */
.kp-cta{
  background:linear-gradient(135deg,var(--kp-accent),var(--kp-accent-dk));
  color:#fff; border-radius:var(--kp-radius); padding:22px; margin:22px 0;
  box-shadow:var(--kp-shadow);
}
.kp-cta h2{ margin:0 0 7px; font-size:17px; font-weight:800; color:#fff; }
.kp-cta p{ margin:0 0 15px; font-size:14px; opacity:.93; }
.kp-cta__row{ display:flex; flex-wrap:wrap; gap:9px; }
.kp-cta__b{
  padding:10px 18px; border-radius:99px; font-weight:700; font-size:14px;
  background:#fff; color:var(--kp-accent-dk);
}
.kp-cta__b:hover{ text-decoration:none; opacity:.92; color:var(--kp-accent-dk); }
.kp-cta__b--ghost{ background:rgba(255,255,255,.16); color:#fff; }
.kp-cta__b--ghost:hover{ color:#fff; background:rgba(255,255,255,.24); }

/* ── Списки посилань (хаби + схожі) ── */
.kp-sec{ margin:26px 0 0; }
.kp-sec > h2{ font-size:15px; font-weight:800; margin:0 0 11px; letter-spacing:-.01em; }
.kp-list{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.kp-list li a{
  display:block; padding:12px 14px; background:var(--kp-surface);
  border:1px solid var(--kp-line); border-radius:11px; font-size:14.5px;
  color:var(--kp-text); transition:border-color .15s ease, transform .15s ease;
}
.kp-list li a:hover{ border-color:var(--kp-accent); text-decoration:none; transform:translateX(2px); }
.kp-list__m{ display:block; font-size:12px; color:var(--kp-soft); margin-top:3px; }

/* Сітка фасетів */
.kp-grid{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.kp-tile{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 15px; background:var(--kp-surface); border:1px solid var(--kp-line);
  border-radius:11px; font-size:14.5px; font-weight:600; color:var(--kp-text);
}
.kp-tile:hover{ border-color:var(--kp-accent); text-decoration:none; }
.kp-tile b{ font-size:12.5px; font-weight:800; color:var(--kp-soft); }

/* Пагінація */
.kp-pag{ display:flex; gap:7px; flex-wrap:wrap; margin:24px 0 0; }
.kp-pag a, .kp-pag span{
  min-width:38px; padding:8px 11px; text-align:center; border-radius:9px;
  border:1px solid var(--kp-line); background:var(--kp-surface);
  font-size:13.5px; font-weight:700; color:var(--kp-muted);
}
.kp-pag .is-on{ background:var(--kp-accent); border-color:var(--kp-accent); color:#fff; }

/* Підвал */
.kp-foot{
  margin-top:40px; padding-top:18px; border-top:1px solid var(--kp-line);
  font-size:12.5px; color:var(--kp-soft); display:flex; flex-wrap:wrap; gap:14px;
}

@media (max-width:600px){
  .kp-wrap{ padding:12px 13px 48px; }
  h1.kp-q{ font-size:18.5px; }
  .kp-card{ padding:16px; }
  .kp-top__cta{ padding:7px 13px; font-size:13px; }
  .kp-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:380px){ .kp-grid{ grid-template-columns:1fr; } }