/* ════════════════════════════════════════════════════════════
   ПОКОЛЕНИЕ · v2 — дочерние страницы «Займы под залог …»
   Доп. компоненты поверх pokolenie.styles.css.
   8-блочный мастер-шаблон: hero · категории · условия+0% ·
   факторы оценки · 4 шага · почему · FAQ(тёмный) · контакты.
   ════════════════════════════════════════════════════════════ */

/* активный пункт меню «Займы» */
.header-nav a.is-active { opacity: 1; color: var(--c-champagne); }
.header-nav a.is-active::after { transform: scaleX(1); }
.mobile-menu nav a.is-active { color: var(--c-champagne); }

/* иконки мессенджеров через <use> наследуют заливку */
.msg-ic { fill: currentColor; }

/* ── левый заголовок секции ── */
.sec-head--left {
  text-align: left; align-items: flex-start;
  margin: 0 0 clamp(48px, 6vw, 76px); max-width: 760px;
}
.sec-head--left .eyebrow { justify-content: flex-start; }
.sec-head--left .eyebrow::after { display: none; }
.sec-head--left .eyebrow::before { display: inline-block; }
.sec-head--left .lede { margin-top: 8px; }
.light .sec-head--left .lede { color: var(--ink-65); }
.dark  .sec-head--left .lede { color: var(--milk-70); }

/* ── hero: микро-факты строкой ── */
.hero__facts {
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--hair-champ);
  display: flex; flex-wrap: wrap; gap: 14px 0; align-items: center;
}
.hero__facts .f {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-champagne);
  padding: 0 24px;
}
.hero__facts .f:first-child { padding-left: 0; }
.hero__facts .f:not(:last-child) { border-right: 1px solid var(--hair-light); }
@media (max-width: 768px) {
  .hero__facts { gap: 10px 0; margin-top: 40px; }
  .hero__facts .f { padding: 0 14px; font-size: 11px; }
}

/* ════════ BLOCK 2 · Что принимаем — сетка категорий (light) ════════ */
.cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair-dark);
  border-left: 1px solid var(--hair-dark);
}
.cat {
  border-right: 1px solid var(--hair-dark);
  border-bottom: 1px solid var(--hair-dark);
  padding: 40px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 252px;
  transition: background 0.4s var(--ease);
}
.cat:hover { background: var(--c-sand); }
.cat__icon { width: 48px; height: 48px; color: var(--c-champagne); flex-shrink: 0; }
.cat h3 { font-size: 19px; font-weight: 500; margin: 0; letter-spacing: -0.005em; }
.cat p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink-80); }
.cat__tags {
  margin-top: auto; padding-top: 6px;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.cat__tags span {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.02em;
  color: var(--c-bronze);
  border: 1px solid var(--hair-dark);
  padding: 4px 9px;
}
.cat-note { margin: 32px 0 0; font-size: 14px; color: var(--ink-65); }
.cat-note a { color: var(--c-bronze); border-bottom: 1px solid var(--hair-champ); }
@media (max-width: 1024px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cat-grid { grid-template-columns: 1fr; } .cat { min-height: 0; padding: 34px 28px; } }

/* ════════ BLOCK 3 · Условия + плашка (dark) ════════ */
.cond-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: start; }
.cond-copy .eyebrow { margin-bottom: 24px; }
.cond-copy h2 { color: var(--c-milk); }

.terms { margin-top: 40px; border-top: 1px solid var(--hair-light); }
.terms__row {
  display: grid; grid-template-columns: 168px 1fr; gap: 28px;
  padding: 22px 0; border-bottom: 1px solid var(--hair-light);
  align-items: start;
}
.terms__row .k {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--c-champagne); margin-top: 3px;
}
.terms__row .v { font-size: 16px; line-height: 1.6; color: var(--milk-85); }
.terms__row .v .mono { color: var(--c-champagne); }

/* компактная плашка соц. льгот под строками */
.terms-soc {
  margin-top: 28px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-size: 14px; line-height: 1.6; color: var(--milk-70);
}
.terms-soc .tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-champagne);
  border: 1px solid var(--hair-champ); padding: 5px 11px; flex-shrink: 0;
}

/* плашка-акцент 0% (та же, что на хабе) */
.zero-card {
  position: relative; background: var(--c-graphite-alt);
  border: 1px solid var(--c-champagne);
  padding: 52px 48px 44px;
  display: flex; flex-direction: column;
}
.zero-card__corner { position: absolute; width: 20px; height: 20px; border: 1px solid var(--c-champagne); }
.zero-card__corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.zero-card__corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.zero-card__num {
  font-family: var(--font-mono); font-weight: 300;
  font-size: clamp(76px, 9vw, 100px); line-height: 0.9;
  color: var(--c-champagne); letter-spacing: -0.02em;
}
.zero-card__cap { margin: 18px 0 0; font-size: 16px; line-height: 1.5; color: var(--c-milk); max-width: 320px; }
.zero-card__terms {
  margin: 28px 0 0; padding-top: 26px; border-top: 1px solid var(--hair-champ);
  font-size: 14px; line-height: 1.7; color: var(--milk-70);
}
.zero-card__terms .mono { color: var(--c-champagne); font-size: 13px; }
.zero-card .btn { margin-top: 32px; }

/* вариант плашки без 0% — текстовый акцент (серебро) */
.zero-card--note { justify-content: flex-start; }
.zero-card--note .zero-card__icon { width: 44px; height: 44px; color: var(--c-champagne); margin-bottom: 26px; }
.zero-card--note .zero-card__lead {
  font-family: var(--font-base); font-weight: 300;
  font-size: clamp(24px, 3vw, 30px); line-height: 1.22; letter-spacing: -0.01em;
  color: var(--c-milk); margin: 0;
}

@media (max-width: 1024px) { .cond-grid { grid-template-columns: 1fr; gap: 52px; } }
@media (max-width: 560px) {
  .zero-card { padding: 40px 28px 34px; }
  .terms__row { grid-template-columns: 1fr; gap: 8px; }
}

/* ════════ BLOCK 4 · Что влияет на оценку — факторы (light) ════════ */
.factors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.factor {
  background: var(--c-sand);
  border: 1px solid var(--hair-dark);
  padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.factor__n {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; color: var(--c-bronze);
}
.factor h3 { font-size: 18px; font-weight: 500; margin: 0; letter-spacing: -0.005em; }
.factor p { margin: 0; font-size: 15px; line-height: 1.66; color: var(--ink-80); }
.factor .mono { color: var(--c-bronze); font-weight: 500; }
@media (max-width: 1024px) { .factors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .factors { grid-template-columns: 1fr; } }

/* ════════ BLOCK 5 · 4 шага (dark) — общий с хабом ════════ */
.proc4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; position: relative; padding-top: 8px; }
.proc4::before {
  content: ""; position: absolute; top: 56px; left: 12.5%; right: 12.5%;
  height: 1px; background: var(--hair-champ); z-index: 0;
}
.proc4 .pdot {
  position: absolute; top: 52px; width: 8px; height: 8px;
  background: var(--c-graphite); border: 1px solid var(--c-champagne);
  transform: rotate(45deg); z-index: 1;
}
.proc4 .pdot.d1 { left: 12.5%; } .proc4 .pdot.d2 { left: 37.5%; }
.proc4 .pdot.d3 { left: 62.5%; } .proc4 .pdot.d4 { left: 87.5%; }
.p4 { position: relative; z-index: 2; }
.p4__num {
  font-family: var(--font-mono); font-weight: 300;
  font-size: 88px; line-height: 1; color: rgba(200,179,138,0.6);
  display: block; margin-bottom: 30px;
}
.p4 h3 { font-size: 20px; font-weight: 500; color: var(--c-milk); margin: 0 0 12px; letter-spacing: -0.005em; }
.p4 p { margin: 0; max-width: 260px; font-size: 15px; line-height: 1.66; color: var(--milk-70); }
@media (max-width: 1024px) {
  .proc4 { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .proc4::before, .proc4 .pdot { display: none; }
  .p4__num { font-size: 64px; margin-bottom: 16px; }
}
@media (max-width: 560px) { .proc4 { grid-template-columns: 1fr; gap: 40px; } }

/* ════════ BLOCK 6 · Почему «Поколение» (light) ════════ */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 44px 40px; }
.why { display: flex; flex-direction: column; gap: 14px; }
.why__n {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; color: var(--c-bronze);
  padding-top: 18px; border-top: 1px solid var(--c-champagne);
}
.why h3 { font-size: 18px; font-weight: 500; margin: 0; letter-spacing: -0.005em; }
.why p { margin: 0; font-size: 15px; line-height: 1.66; color: var(--ink-80); }
.why .mono { color: var(--c-bronze); font-weight: 500; }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ════════ BLOCK 7 · FAQ на тёмном ════════ */
.dark .faq-list { border-top: 1px solid var(--hair-light); }
.dark .faq-item { border-bottom: 1px solid var(--hair-light); }
.dark .faq-q { color: var(--c-milk); }
.dark .faq-item:hover .faq-q, .dark .faq-item.open .faq-q { color: var(--c-champagne); }
.dark .faq-a__inner { color: var(--milk-70); }
.dark .faq-a__inner .mono { color: var(--c-champagne); }
.dark .faq-a__inner a { color: var(--c-champagne); border-bottom: 1px solid var(--hair-champ); }

/* ════════ Перелинковка · Займы по категориям (sand) ════════ */
.block.sand { background: var(--c-sand); color: var(--c-graphite); }
.xcat-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 40px;
}
.xcat-head h2 { font-size: clamp(26px, 3.2vw, 36px); }
.xcat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.xcat {
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  min-height: 150px; padding: 24px;
  background: var(--c-milk);
  border: 1px solid var(--hair-dark);
  color: var(--c-graphite);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.xcat:hover { border-color: var(--c-champagne); transform: translateY(-3px); }
.xcat__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--c-bronze); }
.xcat__name { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; }
.xcat__go {
  font-family: var(--font-mono); font-size: 18px; color: var(--c-champagne);
  transition: transform 0.35s var(--ease);
}
.xcat:hover .xcat__go { transform: translateX(5px); }
.xcat.is-current {
  background: var(--c-graphite); color: var(--c-milk); border-color: var(--c-graphite);
  pointer-events: none;
}
.xcat.is-current .xcat__name { color: var(--c-milk); }
.xcat.is-current .xcat__go { color: var(--milk-55); }
@media (max-width: 1024px) { .xcat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .xcat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px)  { .xcat-grid { grid-template-columns: 1fr; } .xcat { min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; } }

/* ════════ CTA финал (dark) — компактный ════════ */
.final { text-align: center; }
.final .eyebrow { justify-content: center; }
.final .eyebrow::before { display: none; }
.final h2 { color: var(--c-milk); margin: 22px auto 0; max-width: 760px; }
.final__msg { margin: 48px auto 0; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.final__msg .btn { padding: 18px 32px; }
.final__msg .btn svg { width: 21px; height: 21px; }
.btn--graphite { background: var(--c-graphite-alt); color: var(--c-milk); border-color: var(--hair-light); }
.btn--graphite:hover { background: #2a2a30; border-color: var(--c-milk); transform: translateY(-2px); }
@media (max-width: 600px) {
  .final__msg { flex-direction: column; align-items: stretch; }
  .final__msg .btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   РЕФИНАНСИРОВАНИЕ — доп. компоненты
   ════════════════════════════════════════════════════════════ */

/* ── 3-шаговая схема «как работает» (light) ── */
.refi-scheme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; position: relative; padding-top: 6px; }
.refi-scheme::before { content: ""; position: absolute; top: 60px; left: 16.5%; right: 16.5%; height: 1px; background: var(--hair-champ); z-index: 0; }
.refi-scheme .rdot { position: absolute; top: 56px; width: 8px; height: 8px; background: var(--c-milk); border: 1px solid var(--c-champagne); transform: rotate(45deg); z-index: 1; }
.refi-scheme .rdot.r1 { left: 16.5%; } .refi-scheme .rdot.r2 { left: 50%; transform: translateX(-50%) rotate(45deg); } .refi-scheme .rdot.r3 { right: 16.5%; }
.rstep { position: relative; z-index: 2; }
.rstep__num { font-family: var(--font-mono); font-weight: 300; font-size: 84px; line-height: 1; color: rgba(200,179,138,0.6); display: block; margin-bottom: 26px; }
.rstep h3 { font-size: 20px; font-weight: 500; margin: 0 0 12px; letter-spacing: -0.005em; }
.rstep p { margin: 0; font-size: 16px; line-height: 1.66; color: var(--ink-80); max-width: 320px; }
.refi-note { margin: clamp(40px,5vw,64px) auto 0; max-width: 760px; text-align: center; font-size: 17px; line-height: 1.7; color: var(--ink-65); }
@media (max-width: 860px) {
  .refi-scheme { grid-template-columns: 1fr; gap: 44px; }
  .refi-scheme::before, .refi-scheme .rdot { display: none; }
  .rstep__num { font-size: 60px; margin-bottom: 14px; }
}

/* ── dark-вариант сетки категорий (блок «какие займы рефинансируем») ── */
.dark .cat-grid { border-top: 1px solid var(--hair-light); border-left: 1px solid var(--hair-light); }
.dark .cat { border-right: 1px solid var(--hair-light); border-bottom: 1px solid var(--hair-light); }
.dark .cat:hover { background: var(--c-graphite-alt); }
.dark .cat h3 { color: var(--c-milk); }
.dark .cat p { color: var(--milk-70); }
.dark .cat__tags span { color: var(--c-champagne); border-color: var(--hair-light); }
.dark .cat-note { color: var(--milk-70); }
.dark .cat-note a { color: var(--c-champagne); border-bottom-color: var(--hair-champ); }

/* ── таблица-сравнение (light) ── */
.compare { display: flex; flex-direction: column; border-top: 1px solid var(--hair-dark); max-width: 1000px; margin: 0 auto; }
.compare__row { display: grid; grid-template-columns: 1.15fr 1fr 1.1fr; }
.compare__row > div { padding: 22px 28px; border-bottom: 1px solid var(--hair-dark); display: flex; align-items: center; line-height: 1.5; }
.compare__row .crit { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-bronze); }
.compare__row .them { color: var(--ink-65); font-size: 15px; }
.compare__row .us { background: rgba(200,179,138,0.10); border-left: 1px solid var(--hair-champ); border-right: 1px solid var(--hair-champ); color: var(--c-graphite); font-weight: 500; font-size: 15px; }
.compare__row .us .mono { color: var(--c-bronze); }
.compare__row.is-head > div { padding-top: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--hair-dark); }
.compare__row.is-head .them { color: var(--ink-45); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.compare__row.is-head .us { color: var(--c-graphite); font-family: var(--font-base); font-size: 18px; font-weight: 500; letter-spacing: -0.005em; border-top: 1px solid var(--c-champagne); }
.compare__row.is-last .us { border-bottom: 1px solid var(--c-champagne); }
.compare__row .us__crown { font-family: var(--font-mono); font-size: 11px; color: var(--c-champagne); margin-left: 10px; letter-spacing: 0.1em; }
@media (max-width: 700px) {
  .compare { border-top: 0; }
  .compare__row { grid-template-columns: 1fr; border: 1px solid var(--hair-dark); margin-bottom: 16px; }
  .compare__row > div { border-bottom: 1px solid var(--hair-dark); padding: 14px 20px; }
  .compare__row > div:last-child { border-bottom: 0; }
  .compare__row .crit { background: var(--c-sand); }
  .compare__row .them, .compare__row .us { border-left: 0; border-right: 0; }
  .compare__row .them::before { content: "Ваш ломбард"; }
  .compare__row .us::before { content: "«Поколение»"; }
  .compare__row .them::before, .compare__row .us::before {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-45); margin-right: 12px; min-width: 96px; display: inline-block;
  }
  .compare__row.is-head { display: none; }
  .compare__row.is-last .us { border-bottom: 0; }
}