/* =========================================================================
   pages-b.css — страницы бригады B: guid · glossariy · about · ipoteka
   Шапка, логотип, плиточная навигация и подвал взяты ДОСЛОВНО с главной
   (index.html), их стили уже есть в css/style.css — здесь только состав
   контентных блоков, чтобы ничего не дублировать и не расходиться.
   css/style.css и css/home.css не переопределяются: все правила ниже — новые.
   ========================================================================= */

/* ── полоса плиточной навигации: та же .cats-nav, но в своей карточке ────── */
.tiles-card{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
/* паддинги и сетку берём у .cats-nav из style.css без изменений: единственное
   отличие — верхняя линия, которая внутри карточки дублировала бы её рамку */
.tiles-card .cats-nav{border-top:0}

/* ── шапка страницы ──────────────────────────────────────────────────────── */
.pg-head{padding-top:2px}
.pg-head .crumbs{padding:14px 0 0}
.lead{font-size:17px;line-height:1.62;color:var(--muted);margin:0 0 18px;max-width:800px}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;font-size:13.5px;
  line-height:1.5;color:var(--faint);margin:14px 0 2px}
.byline b{font-weight:700;color:var(--ink2)}
.byline .bdot{color:#C2CBDA}
.byline a{color:var(--faint);text-decoration-color:transparent}
.byline a:hover{color:var(--blue);text-decoration-color:currentColor}

/* ── секции и типографика контента ───────────────────────────────────────── */
.sec-b{margin-top:20px}
.sec-b h2{font-size:22px;line-height:1.25;letter-spacing:-.01em;margin:0 0 12px;color:var(--ink);
  text-wrap:balance}
.sec-b .hint{margin:-6px 0 14px;font-size:13.5px;line-height:1.5;color:var(--faint);max-width:780px}
.copy{margin-top:6px}
.copy p{margin:0 0 12px;line-height:1.68;color:var(--ink);max-width:800px}
.copy ul,.copy ol{margin:0 0 12px;padding-left:20px;line-height:1.66;max-width:800px;color:var(--ink)}
.copy li+li{margin-top:5px}
.copy b{font-weight:800}
.srcnote{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--faint);max-width:820px}
.srcnote a{color:var(--faint);text-decoration-color:currentColor}

/* «Коротко» списком (сама плашка .korotko — из style.css) ────────────────── */
.korotko ul{margin:0;padding-left:19px}
.korotko li{font-size:15px;line-height:1.6;color:var(--ink2)}
.korotko li+li{margin-top:5px}

/* определение в плашке с рамкой ──────────────────────────────────────────── */
.defbox{background:#fff;border:1px solid var(--line-strong);border-radius:12px;
  padding:18px 20px;margin:6px 0 18px}
.defbox .k-lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue);margin-bottom:7px}
.defbox p{margin:0;font-size:16px;line-height:1.62;color:var(--ink2);max-width:840px}
.defbox b{color:var(--ink);font-weight:800}

/* формула в моноширинном блоке ──────────────────────────────────────────── */
.formula{margin:0 0 14px;padding:15px 18px;background:#F5F8F2;border:1px solid #DFEDD7;
  border-radius:12px;overflow-x:auto}
.formula code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:13px;line-height:1.75;color:var(--ink);white-space:pre-wrap;word-break:break-word;
  font-variant-ligatures:none}
@media(max-width:520px){.formula{padding:13px 14px}.formula code{font-size:12px;line-height:1.7}}

/* ── карточки «Читайте также» / ссылки-карточки ──────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid3,.grid2{grid-template-columns:minmax(0,1fr)}}
.xcard{display:flex;flex-direction:column;gap:8px;min-width:0;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-decoration:none;
  color:inherit;transition:border-color .15s,box-shadow .15s}
.xcard:hover{border-color:#C3D3F6;box-shadow:0 6px 18px rgba(17,26,56,.08);color:inherit}
.xcard b{font-size:15px;line-height:1.4;font-weight:700;color:var(--ink)}
.xcard time{margin-top:auto;font-size:12.5px;color:var(--faint)}

/* плитки «Подборки по теме» — та же .cats, но в две колонки; подпись переносится,
   высота тянется по строке (li — grid-item, ссылка растягивается по нему),
   поэтому нет ни обрезок, ни разных высот в одном ряду ─────────────────────── */
.cats.cats-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cats.cats-2 li{display:flex;min-width:0}
.cats.cats-2 a{flex:1 1 auto;height:auto;min-height:70px;padding-top:12px;padding-bottom:12px}
.cats.cats-2 .cat-sub{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
@media(max-width:640px){.cats.cats-2{grid-template-columns:minmax(0,1fr)}}

/* ── about: ценности в кругах ────────────────────────────────────────────── */
.vcard{display:flex;flex-direction:column;gap:10px;min-width:0;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:20px}
.vico{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--tint-blue);color:var(--blue)}
.vico svg{width:22px;height:22px;display:block}
.vico.g{background:var(--tint-green);color:var(--emerald-dark)}
.vcard h3{margin:0;font-size:16px;line-height:1.35;font-weight:800;color:var(--ink)}
.vcard p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}

/* «Как мы зарабатываем» ─────────────────────────────────────────────────── */
.earn{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.earn p{margin:0 0 12px;font-size:15px;line-height:1.66;color:var(--ink2);max-width:840px}
.earn p:last-child{margin-bottom:0}
.lgd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
@media(max-width:820px){.lgd{grid-template-columns:minmax(0,1fr)}}
.lgd .li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.lgd .li span{font-size:13.5px;line-height:1.55;color:var(--muted)}

/* ── about: контакты и форма ─────────────────────────────────────────────── */
.contact-wrap{display:grid;gap:16px}
@media(min-width:900px){.contact-wrap{grid-template-columns:minmax(0,320px) minmax(0,1fr)}}
.cbox,.cform{min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.cbox p{margin:0 0 14px;font-size:14.5px;line-height:1.62;color:var(--muted)}
.cbox .mail{display:inline-block;font-size:17px;font-weight:800;color:var(--blue);text-decoration:none;
  word-break:break-word}
.cbox .mail:hover{text-decoration:underline}
.cbox .hours{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--faint)}
.frow{display:grid;gap:14px}
@media(min-width:640px){.frow.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label{font-size:13px;font-weight:700;color:var(--ink2)}
.fld input,.fld textarea{width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.fld textarea{min-height:112px;resize:vertical;line-height:1.55}
.fld input:focus,.fld textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
.chk{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;font-size:13.5px;
  line-height:1.5;color:var(--muted)}
.chk input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--blue)}
.chk a{color:var(--muted);text-decoration-color:currentColor}
.form-row-end{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px}
.form-ok{display:none;margin:14px 0 0;padding:12px 14px;border-radius:10px;
  background:var(--tint-green);color:var(--emerald-dark);font-size:14px;line-height:1.5;font-weight:600}
.form-ok.on{display:block}

/* ── ipoteka: предложение банка и калькулятор ────────────────────────────── */
.offer{display:grid;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:20px 22px}
@media(min-width:820px){.offer{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.offer .ot b{display:block;font-size:18px;line-height:1.3;font-weight:800;margin-bottom:6px;color:var(--ink)}
.offer .rate{font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--blue)}
.offer ul{margin:10px 0 0;padding-left:18px;font-size:14px;line-height:1.6;color:var(--muted)}
.offer .btns{display:flex;flex-wrap:wrap;gap:10px}

.calc{display:grid;gap:18px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:20px 22px}
@media(min-width:820px){.calc{grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:start}}
.calc-grid{display:grid;gap:12px}
@media(min-width:560px){.calc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.calc-out{background:var(--tint-blue);border:1px solid #D8EBD0;border-radius:12px;padding:16px 18px}
.calc-out .cl{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#31456B}
.calc-out .cv{margin-top:4px;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.calc-out .cn{margin-top:8px;font-size:12.5px;line-height:1.45;color:#4A5A75}

/* ── glossary: связанные термины ─────────────────────────────────────────── */
.terms{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:16px;
  font-size:14px;color:var(--muted)}
.terms a{display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-size:13.5px;font-weight:600;color:var(--ink2);text-decoration:none}
.terms a:hover{border-color:var(--blue);color:var(--blue)}

/* ── FAQ (details/summary — базовый стиль в style.css) ───────────────────── */
.faq{margin-top:6px}
.faq details{max-width:900px}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq summary::after{content:'+';flex:none;color:var(--blue);font-weight:800;font-size:18px;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p:last-child{margin-bottom:0}

/* ── демо-плашка: та же разметка, что на главной, только отступ сверху ───── */
.demo{margin-top:30px}

/* ── добор секционных мелочей ────────────────────────────────────────────── */
.note-ttl{display:block;margin:0 0 4px;font-size:15px;font-weight:800;color:var(--ink)}
.frow+.frow{margin-top:14px}
.form-row-end .srcnote{margin:0}
/* многоколоночные таблицы: 40% на строку-заголовок из 2-колоночного макета тут не нужны */
table.lawt.multi tbody th{width:auto}
table.lawt.multi td{font-size:14px;line-height:1.5}
/* длинные названия плиток «Подборок» на узких экранах не должны вылезать */
@media(max-width:430px){.cats.cats-2 .cat-name{white-space:normal;line-height:1.3}}

/* ── fix2: ссылки-заглушки ── */
a.is-stub, .is-stub { color: var(--faint); text-decoration: none; cursor: default; }
a.is-stub:hover, a.is-stub:focus { color: var(--faint); text-decoration: none; }
a.is-stub[aria-disabled="true"] { pointer-events: none; }

/* ── fix2: шаги как нумерованный список ── */
ol.steps { list-style: none; padding-left: 0; }
ol.steps > li { margin: 0; }

/* ── fix2: ПСК рядом со ставкой и маркировка рекламы у CTA в карточке банка ── */
.offer .rate-psk { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45;
  font-weight: 600; letter-spacing: 0; color: var(--ink2); }
.offer .rate-demo { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700;
  color: var(--faint); vertical-align: middle; }
.offer .btns .badge { flex: 0 0 auto; margin-bottom: 2px; }

/* fix2: заглушки-карточки (гайды, «Читайте также») — серый текст */
.xcard.is-stub b,
.xcard.is-stub time { color: var(--faint); }
.xcard.is-stub:hover { border-color: var(--line); box-shadow: none; }
.xcard.is-stub:hover b { color: var(--faint); }