/* OpenCard — Страны (hub + country landing pages) */
.cn-wrap { background: var(--surface-1); }

/* breadcrumbs */
.cn-crumbs { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-500); flex-wrap:wrap; }
.cn-crumbs a { color:var(--ink-500); } .cn-crumbs a:hover { color:var(--brand-primary); }
.cn-crumbs .sep { color:var(--ink-300); } .cn-crumbs .here { color:var(--ink-900); font-weight:500; }

/* hero */
.cn-hero { background:#fff; border-bottom:1px solid var(--border); padding:22px 0 30px; }
.cn-hero h1 { font-size:clamp(26px,3vw,40px); margin:14px 0 10px; }
.cn-hero .lead { color:var(--ink-500); font-size:17px; line-height:1.6; max-width:72ch; }
.cn-flag { font-size:40px; line-height:1; }
.cn-hero-top { display:flex; align-items:center; gap:14px; }

/* quick facts */
.cn-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px; }
.cn-facts > * { min-width:0; }
.cn-fact { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-card); padding:14px 16px; }
.cn-fact .k { font-size:12px; color:var(--ink-300); margin-bottom:4px; }
.cn-fact .v { font-weight:600; color:var(--ink-900); font-size:15px; }
.badge-yes { color:var(--success); } .badge-no { color:var(--danger); } .badge-mid { color:#B26A00; }

/* body */
.cn-body { padding:34px 0 80px; }
.cn-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:34px; align-items:start; }
.cn-layout > * { min-width:0; }
.cn-main h2 { font-size:24px; margin:34px 0 14px; }
.cn-main h2:first-child { margin-top:0; }
.cn-main p { color:var(--ink-700); line-height:1.7; margin-bottom:14px; font-size:16px; }
.cn-main ul { margin:0 0 16px; padding-left:0; list-style:none; }
.cn-main ul li { position:relative; padding:6px 0 6px 28px; color:var(--ink-700); line-height:1.6; }
.cn-main ul li::before { content:""; position:absolute; left:6px; top:14px; width:7px; height:7px; border-radius:50%; background:var(--brand-primary); }

/* bank list */
.cn-banks { display:grid; gap:12px; margin:4px 0 18px; }
.cn-bank { background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:16px 18px; transition:border-color .14s, box-shadow .14s; }
.cn-bank:has(a:hover) { border-color:var(--brand-primary); box-shadow:var(--shadow-sm); }
.cn-bank b { color:var(--ink-900); font-size:16px; }
.cn-bank a { text-decoration:none; color:inherit; display:inline-flex; align-items:center; gap:6px; }
.cn-bank a::after { content:"›"; color:var(--ink-300); font-weight:400; transition:transform .14s, color .14s; }
.cn-bank a:hover b { color:var(--brand-primary); }
.cn-bank a:hover::after { color:var(--brand-primary); transform:translateX(2px); }
.cn-bank span { display:block; color:var(--ink-500); font-size:14px; margin-top:4px; line-height:1.5; }

/* steps */
.cn-steps { counter-reset:s; display:grid; gap:12px; margin:4px 0 18px; }
.cn-step { position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:16px 18px 16px 56px; }
.cn-step::before { counter-increment:s; content:counter(s); position:absolute; left:16px; top:16px; width:28px; height:28px; border-radius:50%; background:var(--brand-primary); color:#fff; font-weight:700; display:grid; place-items:center; font-size:14px; }
.cn-step b { color:var(--ink-900); }
.cn-step span { display:block; color:var(--ink-500); font-size:14px; margin-top:3px; line-height:1.5; }

/* callout */
.cn-note { background:var(--info-soft); border:1px solid #C9D4FB; border-radius:var(--r-card); padding:16px 18px; color:var(--ink-700); line-height:1.6; margin:6px 0 18px; font-size:15px; }
.cn-warn { background:#FFF4E5; border:1px solid #FFD9A8; border-radius:var(--r-card); padding:16px 18px; color:#7A4B00; line-height:1.6; margin:6px 0 18px; font-size:15px; }

/* CTA box */
.cn-cta { background:var(--ink-900); color:#fff; border-radius:var(--r-block); padding:28px 30px; margin:24px 0; }
.cn-cta h3 { color:#fff; font-size:21px; margin-bottom:8px; }
.cn-cta p { color:#B9C0CC; margin-bottom:18px; }
.cn-cta .btn { background:#fff; color:var(--ink-900); }

/* sidebar */
.cn-side { position:sticky; top:calc(var(--header-h) + 16px); display:grid; gap:16px; }
.cn-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:18px 20px; }
.cn-card h4 { font-size:15px; margin-bottom:12px; }
.cn-card .toc a { display:block; padding:7px 0; color:var(--ink-700); font-size:14px; border-bottom:1px solid var(--surface-2); }
.cn-card .toc a:last-child { border-bottom:0; }
.cn-card .toc a:hover { color:var(--brand-primary); }

/* FAQ */
.cn-faq { margin-top:34px; }
.cn-faq details { background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:0 18px; margin-bottom:10px; }
.cn-faq summary { padding:16px 0; font-weight:600; color:var(--ink-900); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.cn-faq summary::-webkit-details-marker { display:none; }
.cn-faq summary::after { content:"+"; color:var(--brand-primary); font-size:20px; line-height:1; }
.cn-faq details[open] summary::after { content:"\2212"; }
.cn-faq details p { color:var(--ink-700); line-height:1.7; padding:0 0 16px; margin:0; }

/* hub grid */
.cn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cn-grid > * { min-width:0; }
.cn-tile { background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:22px; box-shadow:var(--shadow-sm); transition:box-shadow .18s, transform .18s, border-color .18s; display:flex; flex-direction:column; }
.cn-tile:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:#D7DBEA; }
.cn-tile .t-flag { font-size:34px; line-height:1; }
.cn-tile h3 { font-size:19px; margin:12px 0 6px; color:var(--ink-900); }
.cn-tile p { color:var(--ink-500); font-size:14px; line-height:1.55; flex:1; }
.cn-tile .t-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.cn-pill { font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--surface-1); color:var(--ink-700); border:1px solid var(--border); }

@media (max-width:1023px){
  .cn-layout { grid-template-columns:minmax(0,1fr); }
  .cn-side { position:static; }
  .cn-facts { grid-template-columns:repeat(2,1fr); }
  .cn-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .cn-grid { grid-template-columns:1fr; }
  .cn-facts { grid-template-columns:1fr 1fr; }
}