/* b-proof: скоринг, «Как это работает», «Как использовать Интент», качество данных.
   Макет Figma: 98:711, 117:947, 120:1033, 130:283 (десктоп) и 180:4360, 180:4426, 180:4449, 180:4942 (мобильный). */

/* ---------- Общие мелочи группы ---------- */
.b-tile {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; background: var(--yellow); color: var(--black);
  font: 600 22px/1 var(--sans);
}
.b-num {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; background: var(--yellow); color: var(--black);
  font: 600 25px/1.2 var(--sans); letter-spacing: 0;
}
.b-note {
  display: grid; gap: 8px; padding: 12px 16px;
  border: 1px solid var(--light); border-radius: 20px; background: var(--white);
}
.b-note-label { font: 400 16px/1.2 var(--sans); color: var(--black); }
.b-note p { color: var(--muted); font-size: 14px; font-weight: 300; line-height: 1.4; }

/* ---------- 1. Каждый сигнал объясним ---------- */
.b-score-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: center;
}
.b-score-grid::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: calc(50% - 260px);
  width: 860px; height: 541px; max-width: calc(50% + 260px);
  background: url("../../assets/intent/score/wave.webp") left top / 860px 541px no-repeat;
  pointer-events: none;
}
.b-score { position: relative; z-index: 0; overflow: hidden; }
.b-score-stage {
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 541px; padding: 30px; border-radius: 40px; background: var(--light);
}
.b-score-copy { grid-column: 2; grid-row: 1; }
.b-score-copy h2 { font-size: clamp(30px, 3.4vw, 49px); }
.b-score-lead { margin-top: 16px; color: var(--muted); font-size: 20px; line-height: 1.4; }
.b-checks { margin-top: 32px; list-style: none; }
.b-checks li {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 0 0 15px; margin-bottom: 16px; border-bottom: 1px solid var(--light);
  font-size: 16px; font-weight: 300; line-height: 1.4;
}
.b-checks li:last-child { margin-bottom: 0; }
.b-checks img { flex: none; margin-top: 1px; }

.b-score-card {
  width: 386px; max-width: 100%; padding: 20px; border-radius: 30px; background: var(--white);
}
.b-score-top {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px; border-bottom: 1px solid var(--light);
}
.b-score-name { display: grid; flex: 1; min-width: 0; gap: 4px; }
.b-score-name strong { font: 600 20px/1.2 var(--sans); }
.b-score-name span { color: var(--muted); font-size: 16px; font-weight: 300; line-height: 1.4; }
.b-score-total { align-self: flex-start; margin-top: 8px; white-space: nowrap; }
.b-score-total b { font: 600 25px/1.2 var(--sans); }
.b-score-total span { color: var(--muted); font-size: 14px; font-weight: 300; }
.b-bars { display: grid; gap: 16px; padding: 20px 0; }
.b-bar-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.b-bar-top span { font: 400 14px/1.2 var(--sans); }
.b-bar-top b { color: var(--muted); font-weight: 300; line-height: 1.2; }
.b-bar-track { position: relative; height: 4px; margin-top: 11px; border-radius: 40px; background: var(--light); overflow: hidden; }
.b-bar-track i { position: absolute; inset: 0 auto 0 0; border-radius: 40px; background: var(--yellow); }
.b-w75 { width: 75%; }
.b-w49 { width: 49%; }
.b-w32 { width: 32%; }
.b-w17 { width: 17%; }
.b-score-action.button { min-height: 48px; margin-top: 16px; font-size: 14px; }
.b-score-sample { margin-top: 12px; color: #5f666e; font-size: 13px; line-height: 1.4; text-align: center; }

/* ---------- 2. Как это работает ---------- */
.b-how .rs-head { margin-bottom: 40px; }
.b-how-steps { display: grid; gap: 24px; }
.b-how-step { margin: 0; font-size: inherit; letter-spacing: 0; }
.b-how-tab {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin: 0 auto; padding: 4px 8px; border: 0; background: none; cursor: pointer;
  color: var(--black); text-align: center;
}
.b-how-name { font: 600 20px/1.2 var(--sans); }
.b-how-tab[aria-expanded="false"] .b-num { background: var(--light); color: var(--muted); }
.b-how-tab:hover .b-num { box-shadow: 0 0 0 4px var(--yellow-soft); }
.b-how-panel { display: grid; gap: 24px; justify-items: center; }
.b-how-screen {
  width: 100%; max-width: 920px; padding: 20px; border-radius: 40px; background: #f8f4ec;
}
.b-how-screen img { display: block; width: 100%; border-radius: 20px; }
.b-how-desc { max-width: 640px; text-align: center; font-size: 18px; line-height: 1.4; }

/* С JS: шаги — переключатель, под ними один экран */
@media (min-width: 641px) {
  .b-how-steps.is-ready { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; position: relative; }
  .b-how-steps.is-ready::before {
    content: ""; position: absolute; top: 30px; left: calc(100% / 6); right: calc(100% / 6);
    border-top: 1px dashed var(--line);
  }
  .is-ready .b-how-step { position: relative; grid-row: 1; }
  .is-ready .b-how-step-1 { grid-column: 1; }
  .is-ready .b-how-step-2 { grid-column: 2; }
  .is-ready .b-how-step-3 { grid-column: 3; }
  .is-ready .b-how-tab .b-num { position: relative; outline: 10px solid var(--white); }
  .is-ready .b-how-panel { grid-column: 1 / -1; grid-row: 2; }
  .is-ready .b-how-panel:not(.is-active) { display: none; }
}

/* ---------- 3. Как использовать Интент (карусель) ---------- */
.b-use { padding: 112px 0; }
.b-use-head h2 { font-size: clamp(30px, 3.4vw, 49px); }
.b-use-track { display: grid; gap: 64px; }
.b-slide {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: center;
}
.b-slide-copy { display: grid; gap: 16px; align-content: center; }
.b-slide-title { display: flex; align-items: center; gap: 16px; }
.b-slide-title h2, .b-slide-title h3 { font-size: clamp(26px, 2.7vw, 39px); line-height: 1.2; }
.b-slide-media {
  display: grid; gap: 16px; align-content: center; justify-items: center;
  min-height: 322px; padding: 32px; border-radius: 30px; background: #f8f4ec;
}
.b-slide-text { color: var(--muted); font-size: 18px; line-height: 1.4; }

/* Иллюстрации слайдов: мини-экраны кабинета, компании вымышленные */
.u-card {
  display: grid; gap: 12px; width: 100%; max-width: 440px;
  padding: 20px; border-radius: 30px; background: var(--white);
}
.u-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.u-head b { font: 600 18px/1.2 var(--sans); }
.u-head > span { color: var(--muted); font-size: 13px; font-weight: 300; white-space: nowrap; }
.u-list { display: grid; gap: 8px; list-style: none; }
.u-row, .u-client { display: flex; align-items: center; gap: 12px; min-width: 0; }
.u-row { padding: 10px 12px; border-radius: 16px; background: #f6f7fa; }
.u-ic {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; background: var(--yellow);
  font: 600 16px/1 var(--sans);
}
.u-ic.is-quiet { background: var(--light); color: var(--body); }
.u-client .u-ic { width: 44px; height: 44px; border-radius: 12px; font-size: 19px; }
.u-txt { display: grid; flex: 1; gap: 2px; min-width: 0; }
.u-txt b { overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.u-txt span { overflow: hidden; color: var(--muted); font-size: 13px; font-weight: 300; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.u-client .u-txt b { font: 600 17px/1.2 var(--sans); }
.u-score { flex: none; font: 600 18px/1 var(--sans); }
.u-tag {
  flex: none; padding: 4px 10px; border-radius: 60px; background: var(--yellow-soft);
  font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap;
}
.u-tag.is-quiet { background: var(--white); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.u-switch-wrap { display: inline-flex; align-items: center; gap: 8px; }
.u-switch { position: relative; width: 32px; height: 18px; border-radius: 99px; background: var(--yellow); }
.u-switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); }
.u-foot { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 300; }
.u-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.u-btn {
  justify-self: start; padding: 10px 18px; border-radius: 60px; background: var(--yellow);
  font-size: 14px; font-weight: 500; line-height: 1.2;
}
.u-label { color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.u-checks { display: grid; gap: 10px; list-style: none; font-size: 14px; line-height: 1.35; }
.u-checks li { display: flex; align-items: flex-start; gap: 10px; }
.u-check { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); }
.u-check::after {
  content: ""; position: absolute; top: 5px; left: 7px; width: 5px; height: 8px;
  border: solid var(--black); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.u-verdict {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--yellow); border-radius: 20px;
}
.u-verdict > span:first-child { display: grid; gap: 2px; color: var(--muted); font-size: 13px; font-weight: 300; }
.u-verdict b { color: var(--black); font: 600 16px/1.2 var(--sans); }
.u-verdict .u-score { font-size: 26px; }

.b-use-nav { display: flex; align-items: center; justify-content: center; gap: 35px; margin-top: 30px; }
.b-use-nav[hidden] { display: none; }
.b-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border: 0; border-radius: 14px; background: var(--light); cursor: pointer;
  transition: background-color .15s, opacity .15s;
}
.b-arrow:hover { background: var(--line); }
.b-arrow:disabled { opacity: .45; cursor: default; }
.b-arrow-next img { transform: scaleX(-1); }
.b-dots { display: flex; align-items: center; gap: 4px; }
.b-dot {
  width: 20px; height: 20px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  transition: width .2s;
}
.b-dot::before { content: ""; display: block; height: 4px; border-radius: 10px; background: var(--light); }
.b-dot[aria-current="true"] { width: 40px; }
.b-dot[aria-current="true"]::before { background: var(--yellow); }

/* С JS: слайды в ряд, показывается один */
.b-use.is-ready .b-use-viewport { overflow: clip; border-radius: 30px; transition: height .3s ease; }
.b-use.is-ready .b-use-viewport:focus-visible { outline-offset: 4px; }
.b-use.is-ready .b-use-track {
  display: flex; gap: 0; align-items: flex-start;
  transition: transform .45s ease;
}
.b-use.is-ready .b-slide { flex: 0 0 100%; min-width: 0; }

/* ---------- 4. Каждый сигнал подтверждён фактами ---------- */
.b-quality { padding-top: 60px; padding-bottom: 60px; }
.b-quality-panel {
  position: relative; overflow: hidden; margin: 0 20px; padding: 60px 0;
  border-radius: 40px; background: var(--black); color: var(--white);
}
.b-quality-waves {
  position: absolute; left: 50%; bottom: 0; width: 1400px; max-width: none; height: auto;
  transform: translateX(-50%); pointer-events: none;
}
.b-quality-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: center; }
.b-quality-copy h2 { color: var(--white); font-size: clamp(30px, 3.4vw, 49px); }
.b-quality-lead { margin-top: 16px; color: var(--muted); font-size: 20px; line-height: 1.4; }
.b-quality-steps { display: grid; gap: 20px; margin-top: 36px; list-style: none; }
.b-quality-steps li { display: flex; gap: 14px; align-items: flex-start; }
.b-qicon {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px; background: var(--yellow);
}
.b-quality-steps strong { display: block; padding-top: 9px; font: 600 20px/1.2 var(--sans); }
.b-qn { color: var(--yellow); }
.b-quality-steps p { margin-top: 12px; color: var(--light); font-size: 16px; font-weight: 300; line-height: 1.4; }
.b-quality-stage { padding: 30px 34px; border-radius: 40px; background: var(--light); color: var(--black); }
.b-quality-card { padding: 20px; border-radius: 30px; background: var(--white); }
.b-quality-head { display: flex; align-items: center; gap: 14px; }
.b-quality-head > div { display: grid; gap: 4px; min-width: 0; }
.b-quality-head strong { font: 600 20px/1.2 var(--sans); }
.b-quality-head > div span { color: var(--muted); font-size: 16px; font-weight: 300; line-height: 1.4; }
.b-sources-label { display: block; margin-top: 16px; font-size: 16px; font-weight: 300; line-height: 1.4; }
.b-sources { display: grid; gap: 12px; margin-top: 16px; list-style: none; }
.b-sources li {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 11px; border-bottom: 1px solid var(--light);
}
.b-sicon {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-top: 5px; border-radius: 6px; background: var(--yellow);
}
.b-sources li.is-off .b-sicon { background: var(--light); }
.b-sources li > div { display: grid; flex: 1; gap: 2px; min-width: 0; }
.b-sources strong { font: 400 14px/1.2 var(--sans); }
.b-sources li > div span { color: var(--muted); font-size: 14px; font-weight: 300; line-height: 1.4; }
.b-scheck { flex: none; margin-top: 10px; }
.b-verdict {
  display: grid; gap: 8px; margin-top: 16px; padding: 12px 16px;
  border: 1px solid var(--yellow); border-radius: 20px;
}
.b-verdict strong { font: 400 16px/1.2 var(--sans); }
.b-verdict span { color: var(--muted); font-size: 14px; font-weight: 300; line-height: 1.4; }

/* ---------- Адаптив ---------- */
@media (max-width: 960px) {
  .b-use { padding: 80px 0; }
  .b-score-grid, .b-slide, .b-quality-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .b-score-copy, .b-score-stage { grid-column: 1; grid-row: auto; }
  .b-score-stage { min-height: 0; }
  .b-score-grid::before { display: none; }
  .b-quality-panel { padding: 48px 0; }
}
@media (max-width: 640px) {
  .b-use { padding: 64px 0; }
  .b-score-lead, .b-quality-lead { font-size: 16px; }
  .b-score-stage { padding: 20px; border-radius: 30px; }
  .b-score-card { padding: 16px; border-radius: 24px; }
  .b-checks { margin-top: 24px; }

  .b-how-steps { gap: 20px; }
  .b-how-tab { flex-direction: row; gap: 12px; cursor: default; }
  .b-how-tab[aria-expanded] .b-num { background: var(--yellow); color: var(--black); }
  .b-how-tab:hover .b-num { box-shadow: none; }
  .b-how-panel { margin-bottom: 12px; gap: 16px; }
  .b-how-screen { padding: 8px; border-radius: 16px; }
  .b-how-screen img { border-radius: 10px; }
  .b-how-desc { font-size: 16px; }

  .b-slide-title { gap: 12px; }
  .b-slide-title .b-num { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; }
  .b-slide-title h2, .b-slide-title h3 { font-size: 24px; }
  .b-slide-media { min-height: 0; padding: 16px; border-radius: 20px; }
  .u-card { padding: 16px; border-radius: 20px; }
  .b-slide-text { font-size: 16px; }
  .b-use-nav { justify-content: space-between; gap: 12px; margin-top: 24px; }
  .b-dot { width: 14px; }
  .b-dot[aria-current="true"] { width: 32px; }
  .b-use.is-ready .b-use-viewport { border-radius: 20px; }

  .b-quality-panel { margin: 0 8px; padding: 40px 0; border-radius: 30px; }
  .b-quality-steps strong { font-size: 18px; padding-top: 0; }
  .b-quality-steps li > div { padding-top: 0; }
  .b-quality-stage { padding: 12px; border-radius: 24px; }
  .b-quality-card { padding: 16px; border-radius: 20px; }
  .b-quality-head strong { font-size: 17px; }
  .b-quality-head > div span { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .b-use.is-ready .b-use-track, .b-use.is-ready .b-use-viewport { transition: none; }
}
@media (max-width: 640px) { .b-quality { padding-top: 40px; padding-bottom: 40px; } }

/* Объединённый блок «объясним и подтверждён фактами» (22.10.2026): источники и «Заходить на» —
   одинаковые блоки-заметки, между ними и кнопкой ровный шаг 12px */
.b-score-card .b-note + .b-note { margin-top: 12px; }
.b-proof-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.b-proof-list li {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px;
  border-radius: 60px; background: var(--light); font-size: 13px; line-height: 1.3;
}
.b-proof-list li::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--yellow) url("../../assets/intent/pricing/checkbox-check.svg") center / 9px 9px no-repeat;
}

/* «Как использовать Интент» — плитка вместо карусели (22.10.2026) */
.b-use-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.b-use-tile {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 28px; border-radius: 30px; background: #f6f7fa;
}
.b-use-tile h3 { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2; }
.b-use-tile p { color: var(--muted); font-size: 16px; line-height: 1.4; }
.b-use-tile .b-num { width: 46px; height: 46px; font-size: 21px; }
.b-use-tile-wide {
  grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px; align-items: center; background: #f8f4ec;
}
.b-use-copy { display: flex; flex-direction: column; gap: 14px; }
.b-use-media { display: grid; justify-items: center; }
.b-use-tile-soft { background: var(--yellow-soft); }
.b-use-tile-soft p { color: var(--body); }
.b-use-tile-dark { background: var(--black); color: var(--white); }
.b-use-tile-dark h3 { color: var(--white); }
.b-use-tile-dark p { color: var(--light); }
@media (max-width: 960px) {
  .b-use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-use-tile-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .b-use-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .b-use-tile, .b-use-tile-wide { grid-column: auto; padding: 20px; border-radius: 22px; }
  .b-use-tile .b-num { width: 40px; height: 40px; font-size: 19px; }
}

/* Линии-волны по макету Figma (117:945): «Как это работает», от низа заголовка блока */
.b-how { position: relative; isolation: isolate; }
.b-how::before {
  content: ""; position: absolute; z-index: -1; top: 163px; left: 50%;
  width: max(1440px, 100%); aspect-ratio: 1440 / 582; transform: translateX(-50%);
  background: url("../../assets/intent/lines/how-waves.svg") center / 100% 100% no-repeat; pointer-events: none;
}
@media (max-width: 640px) { .b-how::before { top: 120px; width: 900px; opacity: .7; } }