/* /rko/rko-pages.css — стили НЧ-раздела РКО. Дополняет /assets/tw.css, ничего в нём не переопределяет.
   Палитра — как на главной-квизе (лицо сайта): синий 2563eb/1d4ed8/3b82f6/7dd3fc, чернила 172554.
   21.08.2026: раздел переведён на палитру главной, чтобы главная, хаб и страницы читались как один сайт.
   Здесь же лежат точечные переопределения чужих зелёных правил из tw.css — только для /rko/. */

/* Градиентный хиро по референсу владельца: крошки и H1 белым по градиенту */
.rko-hero{background:linear-gradient(135deg,#172554 0%,#1e40af 45%,#2563eb 100%);color:#fff;padding:52px 16px 46px}
.rko-hero-in{max-width:64rem;margin:0 auto}
.rko-crumbs{font-size:13px;color:rgba(255,255,255,.65);margin-bottom:1.1rem}
.rko-crumbs a{color:rgba(255,255,255,.65);text-decoration:none}
.rko-crumbs a:hover{color:#fff;text-decoration:underline}
.rko-hero h1{margin:0 0 .8rem;font-weight:900;color:#fff;font-size:clamp(29px,4.8vw,44px);line-height:1.08;letter-spacing:-.03em;max-width:56rem}
.rko-lead{margin:0;color:rgba(255,255,255,.88);font-size:17.5px;line-height:1.55;max-width:46rem}
.rko-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.rko-badges span{border:1px solid rgba(255,255,255,.28);border-radius:9999px;padding:.35rem .85rem;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.92);background:rgba(255,255,255,.07)}

/* Цветная CTA-плашка в середине статьи (референс: «Подберём банк за 2 минуты») */
.rko-mid{max-width:48rem;margin:2.25rem 0;background:#eff6ff;border:1px solid #bfdbfe;border-radius:1.25rem;padding:1.75rem 1.5rem;text-align:center}
.rko-mid b{display:block;font-size:19px;line-height:1.35;letter-spacing:-.01em;margin-bottom:.35rem}
.rko-mid p{margin:0 auto 1.1rem;font-size:14.5px;color:#475569;max-width:34rem}
.rko-mid .btn{box-shadow:0 6px 16px -6px rgba(37,99,235,.55)}

/* Карточки-доводы */
.rko-cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));margin:1.25rem 0;max-width:52rem}
.rko-card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.1rem 1.25rem;font-size:15px;line-height:1.5;color:#334155}
.rko-card b{display:block;margin-bottom:.3rem;color:#0f172a;font-size:15.5px}
.rko-card .num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:9999px;background:#dbeafe;color:#1d4ed8;font-weight:800;font-size:13px;margin-bottom:.5rem}

/* Нумерованные шаги гайдов */
.rko-steps{list-style:none;counter-reset:st;margin:1.5rem 0;padding:0;max-width:48rem}
.rko-steps>li{counter-increment:st;position:relative;padding:0 0 1.35rem 3.1rem}
.rko-steps>li::before{content:counter(st);position:absolute;left:0;top:.05rem;width:2.1rem;height:2.1rem;border-radius:9999px;background:#2563eb;color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.rko-steps>li::after{content:"";position:absolute;left:1.02rem;top:2.45rem;bottom:.25rem;width:2px;background:#dbeafe}
.rko-steps>li:last-child::after{display:none}
.rko-steps b{display:block;margin-bottom:.25rem;font-size:16.5px}
.rko-steps p{margin:0 0 .5rem}

/* Жёлтое предупреждение (дополняет изумрудный .hl из tw.css) */
.rko-warn{max-width:48rem;margin:1.25rem 0;background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #d97706;border-radius:.25rem 1rem 1rem .25rem;padding:1rem 1.25rem;font-size:15px}

/* Интерактивный выбор (определитель блокировки, сборщик документов) */
.rko-pick{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 1rem}
.rko-pick button{cursor:pointer;border:1px solid #cbd5e1;background:#fff;border-radius:.75rem;padding:.6rem 1.05rem;font-size:14px;font-weight:600;color:#334155;transition:all .15s}
.rko-pick button:hover{border-color:#3b82f6;color:#1d4ed8}
.rko-pick button.on{background:#2563eb;border-color:#2563eb;color:#fff}
.rko-ans{display:none;max-width:48rem;background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.1rem 1.35rem;margin:.75rem 0 1.25rem;font-size:15px}
.rko-ans.show{display:block}

/* Слот под картинку: пока файла нет — блок сам скрывается (onerror) */
.imgslot{margin:1.75rem 0;max-width:48rem}
.imgslot img{width:100%;height:auto;border-radius:1rem;border:1px solid #e2e8f0;display:block}
.imgslot figcaption{font-size:12.5px;color:#94a3b8;margin-top:.45rem}

/* Мелкая сноска под расчётами */
.rko-note{max-width:48rem;font-size:12.5px;line-height:1.5;color:#94a3b8;margin:.6rem 0 1.25rem}

/* Ряд крупных цифр */
.rko-stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:1.4rem 0;max-width:48rem}
.rko-stat{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1rem 1.15rem}
.rko-stat b{display:block;font-size:24px;letter-spacing:-.02em;color:#1d4ed8;font-variant-numeric:tabular-nums}
.rko-stat span{font-size:13px;color:#64748b;line-height:1.4;display:block;margin-top:.15rem}

@media (max-width:640px){
  .rko-hero{padding:40px 16px 36px}
  .rko-mid{padding:1.4rem 1.1rem}
}

/* ——— единая шапка/подвал/кнопки с главной-квизом (переопределяет tw.css только в /rko/) ——— */
.hdr{background:rgba(23,37,84,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.logo span{color:#7dd3fc}
.nav a:hover{background:rgba(255,255,255,.10);color:#fff}
.btn,.calc button{background:#2563eb}
.btn:hover,.calc button:hover{background:#1d4ed8}
.ofb{background:#2563eb}
.ofb:hover{background:#1d4ed8}
.zcta-b{background:#60a5fa;color:#0b1220}
.zcta-b:hover{background:#93c5fd}
main a{color:#1d4ed8;text-decoration-color:rgba(37,99,235,.3)}
.crumbs a:hover,.upd a:hover{color:#1d4ed8}
.rel a:hover,.chips a:hover{border-color:#3b82f6;color:#1d4ed8}
.res b{color:#1d4ed8}
.faq summary:after{color:#2563eb}
.hl{border-color:#bfdbfe;border-left-color:#2563eb;background:#eff6ff}
.ftr{background:#0f1b3d}
body{background:#f4f8fd}