/* =========================================================
   BetBurger — LP «Букмекерские вилки» (/ru/surebets), v4
   Только токены дизайн-системы BetBurger (designer.css :root).
   Десктоп 1440 / контейнер 1170; laptop 1024–1439 — контейнер
   сжимается; мобильная вёрстка ниже 1024 px (колонка ≤ 600, поля 20).
   ========================================================= */

body { min-width: 0; }
.sb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sb-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sb-red { color: var(--green); } /* акцентные слова — зелёные по дизайн-системе (10.11.2026); имя класса историческое */
.sb-ic { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--dark-green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sb-ic--green { stroke: var(--green); }
.sb-ic--sm { width: 16px; height: 16px; }

.sb-wrap { position: relative; width: 1170px; max-width: calc(100% - 48px); margin: 0 auto; }

/* ---------- Типографика (стили текста ДС) ---------- */
.sb-h1 { font-weight: 700; font-size: 40px; line-height: 52px; letter-spacing: .4px; text-transform: uppercase; color: var(--brand-dark); }
.sb-h3 { font-weight: 600; font-size: 24px; line-height: 31px; letter-spacing: .24px; color: var(--dark-green); }
.sb-card-title { margin: 0; font-weight: 600; font-size: 24px; line-height: 36px; letter-spacing: .24px; color: var(--dark-green); }
.sb-lead { font-size: 16px; line-height: 32px; letter-spacing: .16px; color: var(--dark-gray); }
.sb-small { font-size: 12px; line-height: 16px; letter-spacing: .12px; color: var(--dark-gray); }
.sb-caption { font-size: 10px; line-height: 16px; letter-spacing: .1px; color: var(--dark-gray); }
.sb-label { font-weight: 600; font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-green); }
.sb-stat { font-weight: 600; font-size: 40px; line-height: 52px; letter-spacing: .4px; color: var(--dark-green); }
.sb-prose { display: flex; flex-direction: column; gap: 16px; }
.sb-prose a, .sb-define a, .sb-acc__a a { color: var(--dark-green); text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; }
.sb-sub { margin: 64px 0 24px; }

/* ---------- Секции ---------- */
.sb-section { padding: 84px 0; background: var(--white); }
.sb-section--grey { background: var(--bg-light); }
.sb-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
.sb-head--center { align-items: center; text-align: center; }
.sb-head + .sb-prose, .sb-head + .sb-lead { margin-bottom: 40px; }
.sb-note { margin-top: 24px; font-size: 12px; line-height: 16px; letter-spacing: .12px; color: var(--dark-gray); }
.sb-note--em em { font-style: italic; }
.sb-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--green); box-shadow: 0 0 0 4px var(--green-tint-35, rgba(117, 190, 166, .35)); }

/* общие коэффициенты */
.sb-odd {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 64px; height: 40px; padding: 0 12px;
  border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white);
  font-weight: 600; font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-green);
  font-variant-numeric: tabular-nums; transition: background-color .25s, border-color .25s, color .25s, opacity .25s, scale .25s;
}
.sb-odd--a.is-picked, .is-pick .sb-odd--a, .sb-odd--a.is-on { background: var(--green-tint); border-color: var(--green); }
.sb-odd--b.is-picked, .is-pick .sb-odd--b, .sb-odd--b.is-on { background: var(--blue-tint); border-color: var(--dark-green); }
.sb-key { flex: none; width: 10px; height: 10px; border-radius: 9999px; background: var(--green); }
.sb-key--b { background: var(--dark-green); }

.sb-replay {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; white-space: nowrap;
  border: 1px solid var(--gray-light); border-radius: 4px; background: var(--white);
  font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: .12px; color: var(--dark-green);
  transition: border-color .2s, background-color .2s;
}
.sb-replay .sb-ic { width: 16px; height: 16px; transition: rotate .35s; }
.sb-replay:hover { border-color: var(--green); }
.sb-replay:hover .sb-ic { rotate: -90deg; }
.sb-btn-sm { gap: 8px; }
.sb-btn-sm .sb-ic { width: 20px; height: 20px; stroke: currentColor; }
.btn--outline .sb-ic { stroke: currentColor; }
.btn:disabled { opacity: .4; cursor: default; pointer-events: none; }

/* =========================================================
   1. HERO
   ========================================================= */
.sb-hero { position: relative; overflow: hidden; padding: 64px 0 100px; background: var(--bg-light); }
.sb-hero__ring { position: absolute; left: calc(50% + 120px); top: 40px; width: 640px; height: 640px; border: 1px solid var(--gray-light); border-radius: 9999px; pointer-events: none; }
.sb-hero__ring--dashed { left: calc(50% + 40px); top: -40px; width: 800px; height: 800px; border-style: dashed; }
.sb-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 570px; gap: 30px; align-items: center; }
.sb-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.sb-hero__text .sb-lead { max-width: 570px; margin-top: -8px; }
.sb-hero__cta { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.sb-hero__visual { position: relative; margin: 0; }
.sb-hero__replay { position: absolute; right: 0; bottom: -56px; }

.sb-browser { border-radius: 16px; }
/* полоса браузера убрана по дизайн-системе (BrowserFrame без полосы) */
.sb-browser__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 15px; border-bottom: 1px solid var(--gray-light-3); }
.sb-browser__url { position: absolute; left: 50%; transform: translateX(-50%); font-size: 10px; line-height: 20px; letter-spacing: .1px; color: var(--dark-gray); }
.sb-hv { display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 48px; }
.sb-event { display: flex; flex-direction: column; gap: 4px; }
.sb-event__sport { font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--green-dark); }
.sb-event__name { font-weight: 600; font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-green); }

.sb-odds { width: calc(100% + 16px); margin: -8px; border-collapse: separate; border-spacing: 8px; }
.sb-odds th, .sb-odds td { padding: 0; text-align: center; font-weight: 500; }
.sb-odds thead th { font-size: 10px; line-height: 16px; letter-spacing: .1px; text-transform: uppercase; color: var(--dark-gray); }
.sb-odds--hero th[scope="row"] { width: 48px; text-align: left; }
.sb-odds .sb-odd { width: 100%; max-width: 160px; }

.sb-hv__calc { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 8px; background: var(--bg-light); }
.sb-hv__row { display: grid; grid-template-columns: 10px minmax(0, 170px) 1fr auto; align-items: center; gap: 10px; }
.sb-hv__label { font-size: 12px; line-height: 16px; letter-spacing: .12px; color: var(--dark-gray); }
.sb-hv__bar { height: 8px; border-radius: 9999px; background: var(--gray-light-3); overflow: hidden; }
.sb-hv__bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--green); transform-origin: 0 50%; }
.sb-hv__bar--b i { background: var(--dark-green); }
.sb-hv__val { font-weight: 600; font-size: 14px; line-height: 24px; color: var(--dark-green); font-variant-numeric: tabular-nums; }
.sb-hv__total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--gray-light); font-size: 12px; line-height: 16px; color: var(--dark-gray); }
.sb-hv__total b { font-weight: 600; font-size: 24px; line-height: 31px; color: var(--green-dark); white-space: nowrap; }

.float-card.sb-float { position: absolute; left: -32px; bottom: -32px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--white); border: 1px solid var(--gray-light-3); border-radius: 8px; box-shadow: var(--shadow-smooth); }
.sb-float__text { display: flex; flex-direction: column; }
.sb-float__text b { font-weight: 600; font-size: 14px; line-height: 24px; color: var(--dark-green); }
.sb-float__text span { font-weight: 500; font-size: 12px; line-height: 16px; color: var(--dark-gray); }

/* =========================================================
   2. HOW IT WORKS (3 шага)
   ========================================================= */
.sb-define { margin-top: 8px; padding: 20px 24px; border-left: 4px solid var(--green); border-radius: 0 8px 8px 0; background: var(--bg-light); font-size: 16px; line-height: 32px; letter-spacing: .16px; color: var(--dark-green); }
.sb-how { margin-top: 40px; padding: 32px; overflow: visible; }
.sb-how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.sb-how__step {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; padding: 12px 16px; overflow: hidden;
  border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); text-align: left;
  font-weight: 600; font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-gray);
  transition: border-color .25s, color .25s;
}
.sb-how__step:hover { border-color: var(--green); }
.sb-how__step.is-active, .sb-how__step.is-done { color: var(--dark-green); }
.sb-how__step.is-active { border-color: var(--green); }
.sb-how__step::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--green); scale: 0 1; transform-origin: 0 50%; }
.sb-how__step.is-done::after { scale: 1 1; }
.sb-how__step.is-active.is-running::after { animation: sb-progress var(--dur, 2.6s) linear forwards; }
.sb-how__step.is-active .num-box, .sb-how__step.is-done .num-box { background: var(--green); color: var(--white); }

.sb-how__stage { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 24px; align-items: center; }
.sb-how__books { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sb-book { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--bg-light); }
.sb-book__head { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; line-height: 24px; color: var(--dark-green); }
.sb-book__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 24px; color: var(--dark-gray); }
.sb-how__arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--bg-light); }
.sb-how__arrow .sb-ic { stroke: var(--green); }
.sb-how__calc { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--gray-light-3); border-radius: 8px; transition: border-color .3s; }
.sb-how__calc-title { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 24px; color: var(--dark-green); }
.sb-slot { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px dashed var(--gray-light); border-radius: 8px; font-size: 12px; line-height: 16px; color: var(--dark-gray); transition: border-color .3s, background-color .3s; }
.sb-slot__k { min-width: 48px; text-align: center; font-weight: 600; font-size: 14px; line-height: 24px; color: var(--dark-green); }
.sb-slot__v { min-width: 64px; text-align: right; font-weight: 600; font-size: 14px; line-height: 24px; color: var(--dark-green); font-variant-numeric: tabular-nums; }
.sb-how__outcomes { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--gray-light-3); }
.sb-outcome { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; font-size: 12px; line-height: 16px; color: var(--dark-gray); }
.sb-outcome__math b { font-weight: 600; color: var(--dark-green); }
.sb-plus { font-weight: 600; font-size: 14px; line-height: 24px; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.sb-how__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.sb-how__caption { font-weight: 500; font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-green); }

/* состояния сценария (класс data-stage на .sb-how__stage) */
.sb-how__stage[data-stage="0"] .sb-how__calc,
.sb-how__stage[data-stage="1"] .sb-how__calc { border-color: var(--gray-light-3); }
.sb-how__stage[data-stage="0"] .sb-slot__k, .sb-how__stage[data-stage="0"] .sb-slot__v,
.sb-how__stage[data-stage="1"] .sb-slot__k, .sb-how__stage[data-stage="1"] .sb-slot__v,
.sb-how__stage[data-stage="0"] .sb-how__outcomes, .sb-how__stage[data-stage="1"] .sb-how__outcomes { opacity: 0; }
.sb-how__stage[data-stage="1"] .sb-book .sb-odd:not([data-pick]) { opacity: .35; }
.sb-how__stage[data-stage="1"] .sb-odd--a[data-pick], .sb-how__stage[data-stage="2"] .sb-odd--a[data-pick] { background: var(--green-tint); border-color: var(--green); }
.sb-how__stage[data-stage="1"] .sb-odd--b[data-pick], .sb-how__stage[data-stage="2"] .sb-odd--b[data-pick] { background: var(--blue-tint); border-color: var(--dark-green); }
.sb-how__stage[data-stage="2"] .sb-book .sb-odd:not([data-pick]) { opacity: .35; }
.sb-how__stage[data-stage="2"] .sb-how__calc { border-color: var(--green); }
.sb-how__stage[data-stage="2"] .sb-slot { border-style: solid; border-color: var(--gray-light-3); background: var(--bg-light); }
.sb-slot__k, .sb-slot__v, .sb-how__outcomes { transition: opacity .35s; }
.sb-fly { position: fixed; z-index: 50; pointer-events: none; margin: 0; }

/* =========================================================
   3. WHY
   ========================================================= */
.sb-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.sb-why__card { display: flex; flex-direction: column; transition: translate .3s, border-color .3s; }
.sb-why__card:hover { border-color: var(--green); }
.sb-why__viz { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 200px; padding: 24px; background: var(--bg-light); border-bottom: 1px solid var(--gray-light-3); }
.sb-why__body { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.sb-why__body p { font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-gray); }
.sb-mini, .sb-lag, .sb-err { display: grid; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); transition: border-color .3s; }
.sb-mini { grid-template-columns: 1fr auto 16px; }
.sb-mini__name, .sb-err > span:first-child { font-size: 12px; line-height: 16px; color: var(--dark-gray); }
.sb-mini .sb-odd, .sb-lag .sb-odd, .sb-err .sb-odd { height: 32px; min-width: 56px; }
.sb-mini__up { font-weight: 600; color: var(--green); }
.sb-mini.is-hot { border-color: var(--green); }
.sb-mini:not(.is-hot) .sb-mini__up { visibility: hidden; }
.sb-mini::after { content: none; }
.sb-lag { grid-template-columns: 40px auto 1fr; }
.sb-lag__status { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 10px; line-height: 16px; color: var(--dark-gray); }
.sb-lag__status .sb-ic { stroke: var(--dark-gray); }
.sb-lag__status--ok { color: var(--green-dark); }
.sb-lag__gap { align-self: flex-start; padding: 0 8px; border-radius: 8px; background: var(--green-tint); font-weight: 500; font-size: 10px; line-height: 24px; letter-spacing: .1px; text-transform: uppercase; color: var(--green-dark); transition: opacity .3s; }
.sb-err { grid-template-columns: 84px 1fr auto; }
.sb-err__bar { height: 8px; border-radius: 9999px; background: var(--gray-light-3); overflow: hidden; }
.sb-err__bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--gray-2); }
.sb-err__bar--hot i { background: var(--green); }
.sb-err.is-hot { border-color: var(--green); }
.sb-err__flag { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-weight: 500; font-size: 10px; line-height: 24px; letter-spacing: .1px; text-transform: uppercase; color: var(--green-dark); }
.sb-err__flag .sb-ic { stroke: var(--green-dark); }

/* =========================================================
   4. SCANNER
   ========================================================= */
.sb-scan { position: relative; padding: 64px 32px 32px; overflow: hidden; }
.sb-scan__chip { position: absolute; top: 20px; left: 32px; }
.sb-scan__flow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; }
.sb-node { position: relative; display: flex; flex-direction: column; gap: 12px; }
.sb-node:not(:last-child)::after {
  /* линия передачи данных между узлами */
  content: ''; position: absolute; top: 20px; left: calc(100% - 4px); width: 38px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--green) 0 6px, transparent 6px 12px) 0 0 / 24px 2px;
}
.sb-node__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--bg-light); border: 1px solid var(--gray-light-3); }
.sb-node__icon .sb-ic { width: 20px; height: 20px; }
.sb-node__title { font-weight: 600; font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-green); min-height: 40px; }
.sb-node__viz { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 172px; padding: 12px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--bg-light); overflow: hidden; }
.sb-node__sub { font-size: 12px; line-height: 16px; color: var(--dark-gray); margin-top: -8px; }
.sb-books { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.sb-books i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 24px; border-radius: 4px; background: var(--white); border: 1px solid var(--gray-light-3); font-style: normal; font-weight: 600; font-size: 10px; line-height: 16px; color: var(--dark-green); }
.sb-scanrow, .sb-combo, .sb-found__row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; border-radius: 4px; background: var(--white); font-size: 12px; line-height: 24px; color: var(--dark-gray); }
.sb-scanrow i, .sb-combo i, .sb-found__row i { font-style: normal; }
.sb-scanrow b, .sb-combo b, .sb-found__row b { font-weight: 600; color: var(--dark-green); font-variant-numeric: tabular-nums; }
.sb-scanbox__line { position: absolute; left: 0; right: 0; top: 12px; height: 28px; border-radius: 4px; background: var(--green-tint); border: 1px solid var(--green); opacity: 0; pointer-events: none; }
.sb-combo.is-ok { box-shadow: inset 3px 0 0 var(--green); }
.sb-combo.is-ok b { color: var(--green-dark); }
.sb-combo.is-best { background: var(--green-tint); }
.sb-combo:not(.is-ok) b { color: var(--dark-gray); }
.sb-found__row { border: 1px solid var(--gray-light-3); }
.sb-found__row.is-top { border-color: var(--green); }
.sb-found__row b { color: var(--green-dark); }
.sb-stakes span { display: grid; grid-template-columns: 10px 1fr; gap: 4px 8px; align-items: center; padding: 8px; border-radius: 4px; background: var(--white); font-size: 12px; line-height: 16px; color: var(--dark-gray); }
.sb-stakes b { grid-column: 2; font-weight: 600; font-size: 14px; line-height: 24px; color: var(--dark-green); }

/* =========================================================
   5. CALCULATOR
   ========================================================= */
.sb-calc { display: grid; grid-template-columns: minmax(0, 1fr) 585px; }
.sb-calc__controls { display: flex; flex-direction: column; gap: 32px; padding: 32px; }
.sb-calc__result { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px; background: var(--bg-light); }
.sb-field { display: flex; flex-direction: column; gap: 12px; }
.sb-field__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sb-input { display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 0 16px; border: 1px solid var(--gray-light); border-radius: 4px; background: var(--white); font-weight: 600; font-size: 14px; color: var(--dark-green); transition: border-color .2s; }
.sb-input:focus-within { border-color: var(--green); }
.sb-input input { width: 64px; border: 0; padding: 0; background: none; font: inherit; color: inherit; letter-spacing: .14px; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.sb-input input:focus { outline: none; }
.sb-input input::-webkit-outer-spin-button, .sb-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sb-range { --p: 0%; width: 100%; height: 24px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sb-range::-webkit-slider-runnable-track { height: 6px; border-radius: 9999px; background: linear-gradient(90deg, var(--green) var(--p), var(--gray-light) var(--p)); }
.sb-range::-moz-range-track { height: 6px; border-radius: 9999px; background: var(--gray-light); }
.sb-range::-moz-range-progress { height: 6px; border-radius: 9999px; background: var(--green); }
.sb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 9999px; background: var(--white); border: 2px solid var(--green); box-shadow: var(--shadow-smooth); transition: scale .2s; }
.sb-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 9999px; background: var(--white); border: 2px solid var(--green); }
.sb-range:hover::-webkit-slider-thumb { scale: 1.12; }
.sb-range:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; }
.sb-range__scale { display: flex; justify-content: space-between; margin-top: -8px; font-size: 10px; line-height: 16px; color: var(--dark-gray); }
.sb-tabs { align-self: flex-start; }
.sb-calc__totals { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.sb-total { display: flex; flex-direction: column; gap: 0; padding: 16px 20px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); }
.sb-total__v { font-weight: 600; font-size: 40px; line-height: 52px; letter-spacing: .4px; color: var(--dark-green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-total__l { font-weight: 500; font-size: 12px; line-height: 16px; color: var(--dark-gray); }
.sb-chart { width: 100%; }
.sb-chart__bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-bottom: 1px; border-bottom: 1px solid var(--gray-light); }
.sb-chart__bars span { position: relative; flex: 1; height: var(--h, 0%); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--green); opacity: .45; transition: height .45s cubic-bezier(.16, 1, .3, 1), opacity .2s; }
.sb-chart__bars span:last-child { opacity: 1; }
.sb-chart__bars span:hover { opacity: 1; }
.sb-chart__bars span[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; padding: 4px 8px; border-radius: 4px; background: var(--dark-green); color: var(--white); font-size: 10px; line-height: 16px; white-space: nowrap; z-index: 2; }
.sb-chart__axis { display: flex; justify-content: space-between; padding-top: 6px; font-size: 10px; line-height: 16px; color: var(--dark-gray); }

/* =========================================================
   6. TYPES
   ========================================================= */
.sb-pl { display: flex; flex-direction: column; gap: 24px; }
.sb-pl__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.sb-plc { display: flex; flex-direction: column; transition: border-color .3s, opacity .3s; }
.sb-plc__viz { display: flex; flex-direction: column; gap: 16px; padding: 24px 32px; background: var(--bg-light); border-bottom: 1px solid var(--gray-light-3); }
.sb-plc__event { display: flex; flex-direction: column; gap: 4px; }
.sb-plc__time { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--green-dark); }
.sb-plc__time .sb-ic { stroke: var(--green-dark); }
.sb-plc__time b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-plc__name { font-weight: 600; font-size: 14px; line-height: 24px; color: var(--dark-green); }
.sb-plc__odds { display: flex; gap: 12px; }
.sb-plc__odds .sb-odd { font-weight: 500; color: var(--dark-gray); }
.sb-plc__odds .sb-odd b { font-weight: 600; color: var(--dark-green); }
.sb-odd.is-flash { border-color: var(--green); background: var(--green-tint); }
.sb-plc__speed { display: flex; flex-direction: column; gap: 6px; font-size: 10px; line-height: 16px; color: var(--dark-gray); }
.sb-plc__speed i { display: block; height: 4px; border-radius: 9999px; background: linear-gradient(90deg, var(--green) var(--s), var(--gray-light) var(--s)); }
.sb-live-dot { position: relative; width: 8px; height: 8px; border-radius: 9999px; background: var(--green); }
.sb-plc__body { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.sb-plc__body > p { font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-gray); }
.sb-plc__title { display: flex; align-items: center; gap: 12px; }
.sb-facts { display: grid; gap: 0; margin: 0; }
.sb-facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 8px 0; border-top: 1px solid var(--gray-light-3); }
.sb-facts dt { font-size: 12px; line-height: 24px; color: var(--dark-gray); }
.sb-facts dd { margin: 0; font-weight: 600; font-size: 14px; line-height: 24px; color: var(--dark-green); }

.sb-outs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.sb-out { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); transition: border-color .3s; }
.sb-out:hover { border-color: var(--green); }
.sb-out > b { font-weight: 600; font-size: 14px; line-height: 24px; color: var(--dark-green); }
.sb-out__bar { display: flex; gap: 4px; height: 40px; }
.sb-out__bar i { display: flex; align-items: center; justify-content: center; width: var(--w); border-radius: 4px; background: var(--green-tint); font-style: normal; font-weight: 600; font-size: 12px; line-height: 16px; color: var(--dark-green); transition: width .45s cubic-bezier(.16, 1, .3, 1), background-color .3s; }
.sb-out__bar i:nth-child(2) { background: var(--blue-tint); }
.sb-out__bar i:nth-child(3) { background: #eaeff5; }
.sb-out__bar i:nth-child(4) { background: var(--green-tint); }
.sb-out:hover .sb-out__bar i:first-child { background: var(--green); color: var(--white); }

/* =========================================================
   7. INTERACTIVE EXAMPLE
   ========================================================= */
.sb-ex-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 40px; }
.sb-ex-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 20px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); }
.sb-ex-steps p { font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-gray); }
.sb-ex { padding: 0; overflow: visible; }
.sb-ex__match { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 32px; border-radius: 8px 8px 0 0; background: var(--dark-green); }
.sb-ex__team { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; line-height: 24px; color: var(--white); }
.sb-ex__team .sb-key--b { background: var(--gray-2); }
.sb-ex__vs { font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--gray-2); }
.sb-ex__nav { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--gray-light-3); }
.sb-ex__tab { display: flex; align-items: center; gap: 10px; padding: 20px 24px; text-align: left; font-weight: 600; font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-gray); transition: color .25s, background-color .25s; }
.sb-ex__tab:hover { color: var(--dark-green); background: var(--bg-light); }
.sb-ex__tab.is-active, .sb-ex__tab.is-done { color: var(--dark-green); }
.sb-ex__tab.is-active .num-box, .sb-ex__tab.is-done .num-box { background: var(--green); color: var(--white); }
.sb-ex__tab:focus-visible { outline-offset: -2px; }
.sb-ex__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.sb-ex__progress i { display: block; height: 100%; width: 25%; background: var(--green); transition: width .45s cubic-bezier(.16, 1, .3, 1); }
.sb-ex__pane { padding: 32px; }
.sb-ex__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.sb-ex__text { display: flex; flex-direction: column; gap: 16px; }
.sb-ex__text p:not(.sb-formula) { font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-gray); }
.sb-formula { padding: 12px 16px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--bg-light); font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-green); font-variant-numeric: tabular-nums; }
.sb-formula b { font-weight: 600; }
.sb-ex__viz { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: 8px; background: var(--bg-light); }
.sb-odds--ex thead th { padding: 0 4px 4px; }
.sb-odds--ex .sb-odd { height: 48px; font-size: 24px; line-height: 31px; }
.sb-odds--ex th[scope="row"] { width: 72px; }
.sb-ex__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -12px; }

.sb-scale { display: flex; flex-direction: column; gap: 8px; }
.sb-scale__title { font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--green-dark); }
.sb-scale__track { position: relative; height: 8px; margin: 28px 0 0; border-radius: 9999px; background: var(--gray-light); }
.sb-scale__one { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; background: var(--dark-green); }
.sb-scale__one { font-size: 0; }
.sb-scale__one::after { content: '1'; position: absolute; top: 22px; left: 50%; translate: -50% 0; font-weight: 600; font-size: 12px; line-height: 16px; color: var(--dark-green); }
.sb-scale__ok { position: absolute; left: 0; width: 50%; top: 0; bottom: 0; border-radius: 9999px 0 0 9999px; background: var(--green-tint); }
.sb-scale__mark { position: absolute; left: var(--x); top: 50%; width: 14px; height: 14px; translate: -50% -50%; border-radius: 9999px; background: var(--dark-gray); border: 2px solid var(--white); transition: left .7s cubic-bezier(.16, 1, .3, 1); }
.sb-scale__mark i { position: absolute; bottom: 16px; left: 50%; translate: -50% 0; font-style: normal; font-weight: 600; font-size: 10px; line-height: 16px; color: var(--dark-gray); white-space: nowrap; }
.sb-scale__mark--low i { bottom: auto; top: 16px; }
.sb-scale__mark--ok { background: var(--green); }
.sb-scale__mark--ok i { color: var(--green-dark); font-size: 12px; }
.sb-scale__ends { display: flex; justify-content: space-between; font-size: 10px; line-height: 16px; color: var(--dark-gray); }

.sb-eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; font-weight: 600; font-size: 24px; line-height: 31px; color: var(--dark-green); }
.sb-eq__l { font-size: 24px; }
.sb-eq__term { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--green); background: var(--green-tint); }
.sb-eq__term--b { border-color: var(--dark-green); background: var(--blue-tint); }
.sb-eq__term small { font-weight: 500; font-size: 10px; line-height: 16px; color: var(--dark-gray); }
.sb-frac { display: flex; flex-direction: column; align-items: center; }
.sb-frac i { font-style: normal; padding: 0 6px; }
.sb-frac i:first-child { border-bottom: 2px solid currentColor; }
.sb-eq2 { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 14px; line-height: 24px; color: var(--dark-green); font-variant-numeric: tabular-nums; }
.sb-eq2 b { padding: 4px 12px; border-radius: 8px; background: var(--green); color: var(--white); }
.sb-found-badge { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--green); border-radius: 8px; background: var(--white); font-size: 14px; line-height: 24px; color: var(--dark-green); }
.sb-found-badge .sb-ic { stroke: var(--green); }
.sb-found-badge b { font-weight: 600; }

.sb-bank { display: flex; flex-direction: column; gap: 16px; }
.sb-bank__head { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 24px; color: var(--dark-gray); }
.sb-bank__head b { margin-left: auto; font-weight: 600; font-size: 24px; line-height: 31px; color: var(--dark-green); }
.sb-split { display: flex; gap: 4px; height: 40px; }
.sb-split i { display: block; width: var(--w); border-radius: 4px; transform-origin: 0 50%; }
.sb-split__a { background: var(--green); }
.sb-split__b { background: var(--dark-green); }
.sb-bank__rows { display: grid; gap: 8px; }
.sb-bank__row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; background: var(--white); font-size: 12px; line-height: 16px; color: var(--dark-gray); }
.sb-bank__row b { font-weight: 600; font-size: 24px; line-height: 31px; color: var(--dark-green); font-variant-numeric: tabular-nums; }
.sb-bank__profit { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 8px; background: var(--green-tint); font-size: 14px; line-height: 24px; color: var(--dark-green); }
.sb-bank__profit b { font-weight: 600; }

.sb-tabs--full { display: flex; width: 100%; }
.sb-tabs--full .tabs__btn { flex: 1 1 0; height: auto; min-height: 40px; white-space: normal; }
.sb-tabs--full .tabs__pill { height: calc(100% - 8px); }
.sb-bets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sb-bet { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); font-size: 12px; line-height: 16px; color: var(--dark-gray); transition: border-color .3s, opacity .3s; }
.sb-bet__st { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; }
.sb-bet__math b { font-weight: 600; color: var(--dark-green); }
.sb-bet.is-win { border-color: var(--green); }
.sb-bet.is-win .sb-bet__st { color: var(--green-dark); }
.sb-bet.is-win .sb-bet__st .sb-ic { stroke: var(--green-dark); }
.sb-bet.is-lose { opacity: .65; }
.sb-bet.is-lose .sb-bet__st .sb-ic { stroke: var(--dark-gray); }
.sb-compare { display: grid; gap: 8px; }
.sb-compare__row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 12px; font-size: 12px; line-height: 16px; color: var(--dark-gray); }
.sb-compare__bar { height: 12px; border-radius: 9999px; background: var(--white); overflow: hidden; }
.sb-compare__bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--gray-2); transition: width .6s cubic-bezier(.16, 1, .3, 1), background-color .3s; }
.sb-compare__bar i.is-pay { background: var(--green); }
.sb-sum { display: grid; margin: 0; padding: 4px 16px; border-radius: 8px; background: var(--white); }
.sb-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.sb-sum > div + div { border-top: 1px solid var(--gray-light-3); }
.sb-sum dt { font-size: 12px; line-height: 24px; color: var(--dark-gray); }
.sb-sum dd { margin: 0; font-weight: 600; font-size: 14px; line-height: 24px; color: var(--dark-green); font-variant-numeric: tabular-nums; }
.sb-sum__net dd { font-size: 24px; line-height: 31px; color: var(--green-dark); white-space: nowrap; }
.sb-ex__final { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; padding: 20px 24px; border-radius: 8px; background: var(--bg-light); }
.sb-ex__final p:first-child { font-weight: 500; font-size: 14px; line-height: 24px; color: var(--dark-green); }
.sb-ex__ctrl { display: flex; align-items: center; gap: 16px; padding: 24px 32px; border-top: 1px solid var(--gray-light-3); }
.sb-ex__count { margin-right: auto; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--dark-gray); order: -1; }
.sb-ex__ctrl [data-ex-restart] { height: 48px; }

/* =========================================================
   8. PRICING
   ========================================================= */
.sb-price { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; padding: 48px; border: 4px solid rgba(78, 194, 165, .5); border-radius: 8px; background: var(--white); box-shadow: var(--shadow-smooth); }
.sb-price__text { display: flex; flex-direction: column; gap: 8px; }
.sb-price__offer { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.sb-price__value { font-weight: 600; font-size: 24px; line-height: 31px; color: var(--dark-green); }
.sb-price__value .sb-red { font-weight: 600; font-size: 40px; line-height: 52px; letter-spacing: .4px; }
.sb-price__cta { display: flex; gap: 16px; }

/* =========================================================
   9. FAQ
   ========================================================= */
.sb-faq { max-width: 970px; }
.sb-acc { display: flex; flex-direction: column; gap: 16px; }
.sb-acc__item { border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); transition: border-color .25s, box-shadow .25s; }
.sb-acc__item.is-open { border-color: var(--green); box-shadow: var(--shadow-smooth); }
.sb-acc__h { margin: 0; font: inherit; }
.sb-acc__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 20px 24px; text-align: left; font-weight: 600; font-size: 20px; line-height: 26px; letter-spacing: .2px; color: var(--dark-green); border-radius: 8px; }
.sb-acc__q:focus-visible { outline-offset: -2px; }
.sb-acc__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--green-tint); transition: background-color .25s; }
.sb-acc__icon::before, .sb-acc__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; translate: -50% -50%; border-radius: 2px; background: var(--dark-green); transition: rotate .3s, background-color .25s; }
.sb-acc__icon::after { rotate: 90deg; }
.is-open .sb-acc__icon { background: var(--green); }
.is-open .sb-acc__icon::before, .is-open .sb-acc__icon::after { background: var(--white); }
.is-open .sb-acc__icon::after { rotate: 0deg; }
.sb-acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.16, 1, .3, 1); }
.sb-acc__a > div { overflow: hidden; }
.is-open .sb-acc__a { grid-template-rows: 1fr; }
.sb-acc__a p { padding: 0 24px 24px; font-size: 16px; line-height: 32px; letter-spacing: .16px; color: var(--dark-gray); }

/* =========================================================
   10. FINAL CTA (CtaBanner ДС)
   ========================================================= */
.sb-final { padding: 100px 0 0; background: var(--white); }
.sb-final__box { height: auto; padding: 64px 162px; }
.sb-final__box .final__text { align-items: center; }
.sb-final__box .final__text p { max-width: 570px; text-align: center; }



/* HeroVideo: BrowserFrame + обложка 16:9 + play-glass 78px */
.sb-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--video-ground, #07091a); border-radius: 0 0 16px 16px; }
.sb-video__poster, .sb-video__player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-video__player { object-fit: contain; background: #000; }
.sb-video__play {
  position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; translate: -50% -50%;
  display: flex; align-items: center; justify-content: center; border-radius: 9999px;
  background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: scale .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s;
}
.sb-video__play img { translate: 2px 0; }
.sb-video__play:hover { scale: 1.08; background: rgba(255, 255, 255, .3); }
.sb-video.is-playing .sb-video__poster, .sb-video.is-playing .sb-video__play { display: none; }
.sb-hero__cap { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: .12px; color: var(--dark-gray); }
@media (prefers-reduced-motion: no-preference) {
  .sb-video__play::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .6); animation: ripple 2s ease-out infinite; }
}

/* Hero: состояния сценария (h-0 обновление КФ → h-1 выбор → h-2 расчёт → h-3 итог) */
[data-hero] .sb-hv__calc, [data-hero] .sb-float { transition: opacity .45s cubic-bezier(.16, 1, .3, 1), translate .45s cubic-bezier(.16, 1, .3, 1); }
[data-hero].h-0 .sb-hv__calc, [data-hero].h-1 .sb-hv__calc { opacity: .25; }
[data-hero].h-0 .sb-float, [data-hero].h-1 .sb-float, [data-hero].h-2 .sb-float { opacity: 0; translate: 0 12px; }
[data-hero]:not(.h-0) .sb-odd--a[data-pick] { background: var(--green-tint); border-color: var(--green); }
[data-hero]:not(.h-0) .sb-odd--b[data-pick] { background: var(--blue-tint); border-color: var(--dark-green); }
[data-hero]:not(.h-0) .sb-odds .sb-odd:not([data-pick]) { color: var(--dark-gray); }
.sb-acc__a > div { visibility: hidden; transition: visibility 0s .3s; }
.is-open .sb-acc__a > div { visibility: visible; transition: visibility 0s; }


/* ===== v6: объединённый блок «Как это работает» ===== */
.sb-why__item { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); transition: border-color .3s; }
.sb-why__item:hover { border-color: var(--green); }
.sb-why__head { display: flex; align-items: center; gap: 16px; }
.sb-why__head .sb-h3 { margin: 0; }
.sb-why__item p { font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-gray); }
.sb-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 32px; padding: 32px; border-radius: 8px; background: var(--bg-light); }
.sb-flow__step { position: relative; display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.sb-flow__step b { font-weight: 600; font-size: 14px; line-height: 24px; color: var(--dark-green); }
.sb-flow__step > span:last-child { grid-column: 2; font-size: 12px; line-height: 16px; color: var(--dark-gray); }
.sb-flow__icon { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 9999px; background: var(--white); border: 1px solid var(--gray-light-3); }
.sb-flow__icon .sb-ic { stroke: var(--green); }
.sb-flow__step:not(:last-child)::after { content: ''; position: absolute; right: -24px; top: 50%; width: 18px; height: 2px; background: repeating-linear-gradient(90deg, var(--green) 0 6px, transparent 6px 12px); }

/* скриншот вилки из сканера */
.sb-shot { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; }
.sb-shot img { width: 100%; height: auto; border: 1px solid var(--gray-light-3); border-radius: 8px; box-shadow: var(--shadow-smooth); }

/* ===== v6: пример из видео (3 исхода) ===== */
.sb-ex__found { font-weight: 600; font-size: 14px; line-height: 24px; color: var(--white); white-space: nowrap; }
.sb-r--1, .sb-o3--1, .sb-eq__term--1 { --c: var(--green); --t: var(--green-tint); }
.sb-r--x, .sb-o3--x, .sb-eq__term--x { --c: var(--dark-green); --t: var(--blue-tint); }
.sb-r--2, .sb-o3--2, .sb-eq__term--2 { --c: var(--dark-gray); --t: #eaeff5; }
.sb-outs3 { display: grid; gap: 12px; }
.sb-o3 { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 16px; align-items: center; padding: 16px 20px; border: 1px solid var(--c); border-left-width: 4px; border-radius: 8px; background: var(--white); }
.sb-o3__k { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 24px; color: var(--dark-green); }
.sb-o3__k b { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--t); font-weight: 600; }
.sb-o3__odd { grid-row: 1 / 3; grid-column: 2; font-weight: 600; font-size: 40px; line-height: 52px; color: var(--dark-green); font-variant-numeric: tabular-nums; }
.sb-o3__bk { justify-self: start; padding: 0 8px; border-radius: 4px; background: var(--t); font-weight: 500; font-size: 10px; line-height: 24px; letter-spacing: .1px; text-transform: uppercase; color: var(--dark-green); }
.sb-eq__term { border-color: var(--c); background: var(--t); }
.sb-eq__term small { font-weight: 600; font-size: 12px; color: var(--dark-green); }
.sb-bbcalc { display: flex; flex-direction: column; gap: 16px; }
.sb-bbcalc__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sb-bbcalc__label { font-weight: 600; font-size: 12px; line-height: 16px; color: var(--dark-green); }
.sb-bbcalc__total { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--dark-gray); }
.sb-bbcalc__total b { font-weight: 600; font-size: 14px; color: var(--dark-green); }
.sb-bbcalc__table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-variant-numeric: tabular-nums; }
.sb-bbcalc__table thead th { padding: 0 12px; text-align: left; font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .1px; text-transform: uppercase; color: var(--dark-gray); }
.sb-bbcalc__table tbody th, .sb-bbcalc__table td { padding: 10px 12px; background: var(--white); text-align: left; font-size: 12px; line-height: 24px; color: var(--dark-gray); }
.sb-bbcalc__table tbody th { width: 44px; border-radius: 8px 0 0 8px; box-shadow: inset 4px 0 0 var(--c); font-weight: 600; font-size: 14px; color: var(--dark-green); }
.sb-bbcalc__table td:last-child { border-radius: 0 8px 8px 0; font-weight: 600; font-size: 14px; color: var(--green-dark); text-align: right; }
.sb-bbcalc__table td[data-stake] { font-weight: 600; font-size: 14px; color: var(--dark-green); }
.sb-bbcalc__table td.is-pop { animation: sb-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.sb-split3 { display: flex; gap: 4px; height: 32px; }
.sb-split3 i { display: flex; align-items: center; justify-content: center; width: var(--w); border-radius: 4px; background: var(--c); font-style: normal; font-weight: 600; font-size: 12px; line-height: 16px; color: var(--white); transition: width .45s cubic-bezier(.16, 1, .3, 1); }
.sb-bets--3 { grid-template-columns: repeat(3, 1fr); }
.sb-bets--3 .sb-bet { padding: 12px; }
.sb-tabs--full .tabs__btn { padding-left: 6px; padding-right: 6px; }

@media (max-width: 1239px) {
  .sb-o3__odd { font-size: 32px; }
}
@media (max-width: 1023px) {
  .sb-why { grid-template-columns: 1fr; gap: 12px; }
  .sb-why__item { padding: 20px; gap: 12px; }
  .sb-flow { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .sb-flow__step:not(:last-child)::after { right: auto; left: 23px; top: auto; bottom: -22px; width: 2px; height: 18px; background: repeating-linear-gradient(180deg, var(--green) 0 6px, transparent 6px 12px); }
  .sb-ex__match { gap: 8px; }
  .sb-ex__vs { order: 0; }
  .sb-o3 { padding: 12px 16px; }
  .sb-o3__odd { font-size: 24px; line-height: 31px; }
  .sb-bets--3 { grid-template-columns: 1fr; }
  .sb-bbcalc__total { margin-left: 0; width: 100%; }
  .sb-bbcalc__table tbody th, .sb-bbcalc__table td { padding: 8px; }
  .sb-bbcalc__table thead th { padding: 0 8px; }
}

/* =========================================================
   MOTION (только при prefers-reduced-motion: no-preference)
   ========================================================= */
@keyframes sb-progress { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes sb-in { from { opacity: 0; translate: 0 16px; } }
@keyframes sb-pulse { 0% { box-shadow: 0 0 0 0 rgba(78, 194, 165, .5); } 100% { box-shadow: 0 0 0 8px rgba(78, 194, 165, 0); } }
@keyframes sb-grow { from { scale: 0 1; } }
@keyframes sb-scanline { 0% { opacity: 0; translate: 0 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; translate: 0 120px; } }
@keyframes sb-dash { to { background-position: 24px 0; } }
@keyframes sb-pop { 0% { scale: 1; } 45% { scale: 1.08; } 100% { scale: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: поочерёдное появление */
  .js .sb-anim { animation: sb-in .6s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--d, 0) * 120ms); }
  [data-hero].is-playing .sb-hv__bar i { animation: sb-grow .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--bd, 0s); }
  [data-hero] .sb-odd.is-pop, .sb-pop { animation: sb-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
  .sb-live-dot { animation: sb-pulse 1.6s ease-out infinite; }

  /* Появление при прокрутке (мягкое) */
  .js .sb-reveal { opacity: 0; translate: 0 16px; transition: opacity .6s cubic-bezier(.16, 1, .3, 1), translate .6s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--d, 0) * 100ms); }
  .js .sb-reveal.is-in { opacity: 1; translate: 0 0; }

  .sb-why__card:hover { translate: 0 -4px; }
  .sb-scan.is-live .sb-node:not(:last-child)::after { animation: sb-dash .8s linear infinite; }
  .sb-scan.is-live .sb-scanbox__line { animation: sb-scanline 2.8s ease-in-out infinite; }
  .sb-ex__pane.is-entering { animation: pane-in .45s cubic-bezier(.16, 1, .3, 1) both; }
  .sb-ex__pane.is-entering .sb-split i { animation: sb-grow .8s cubic-bezier(.16, 1, .3, 1) both .15s; }
  .sb-ex__pane.is-entering .sb-scale__mark { animation: sb-in .6s cubic-bezier(.16, 1, .3, 1) both .2s; }
  .sb-ex__pane.is-entering .sb-found-badge { animation: sb-in .5s cubic-bezier(.16, 1, .3, 1) both .55s; }
  .sb-ex__pane.is-entering .sb-eq__term--a { animation: sb-in .5s cubic-bezier(.16, 1, .3, 1) both .1s; }
  .sb-ex__pane.is-entering .sb-eq__term--b { animation: sb-in .5s cubic-bezier(.16, 1, .3, 1) both .25s; }
  .sb-ex__pane.is-entering .sb-eq2 { animation: sb-in .5s cubic-bezier(.16, 1, .3, 1) both .4s; }
}
@media (prefers-reduced-motion: reduce) {
  .final__glow { animation: none !important; }
}

/* =========================================================
   LAPTOP 1024–1239
   ========================================================= */
@media (max-width: 1239px) {
  .sb-hero__inner { grid-template-columns: minmax(0, 1fr) 480px; }
  .sb-hero__text .sb-h1 { font-size: 32px; line-height: 42px; }
  .float-card.sb-float { left: -16px; }
  .sb-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sb-scan__flow { gap: 20px; }
  .sb-node:not(:last-child)::after { width: 24px; left: calc(100% - 2px); }
  .sb-final__box { padding: 64px; }
  .sb-hv__row { grid-template-columns: 10px minmax(0, 150px) 1fr auto; }
}

/* =========================================================
   MOBILE + TABLET (< 1024): колонка ≤ 600, поля 20, кегли mobile
   ========================================================= */
@media (max-width: 1023px) {
  .sb-wrap { width: auto; max-width: 600px; padding: 0 20px; }
  .sb-section { padding: 48px 0; }
  .sb-head { margin-bottom: 32px; }
  .sb-head + .sb-prose, .sb-head + .sb-lead { margin-bottom: 32px; }
  .sb-h1, .sb-hero__text .sb-h1 { font-size: 28px; line-height: 36px; letter-spacing: .28px; }
  .h2 { font-size: 24px; line-height: 32px; letter-spacing: .24px; }
  .sb-h3 { font-size: 20px; line-height: 26px; letter-spacing: .2px; }
  .sb-card-title { font-size: 20px; line-height: 26px; }
  .sb-stat, .sb-total__v { font-size: 32px; line-height: 52px; }
  .sb-sub { margin: 48px 0 20px; }

  /* hero */
  .sb-hero { padding: 32px 0 80px; }
  .sb-hero__ring { display: none; }
  .sb-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .sb-hero__cta { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; margin-top: 8px; }
  .sb-hero__cta .watch { justify-content: center; }
  .sb-hv { padding: 16px; }
  .sb-plus, .sb-slot__v, .sb-hv__val { white-space: nowrap; }
  .sb-hv__row { grid-template-columns: 10px 1fr auto; row-gap: 6px; }
  .sb-hv__bar { grid-column: 1 / -1; grid-row: 2; }
  .float-card.sb-float { position: relative; left: auto; bottom: auto; margin: -24px 16px 0; z-index: 1; }
  .sb-hero__replay { bottom: -56px; }

  /* how */
  .sb-define { padding: 16px; font-size: 14px; line-height: 24px; }
  .sb-how { padding: 16px; margin-top: 32px; }
  .sb-how__steps { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; }
  .sb-how__stage { grid-template-columns: 1fr; gap: 12px; }
  .sb-how__books { gap: 8px; }
  .sb-book { padding: 12px; }
  .sb-book__row { font-size: 12px; }
  .sb-how__arrow { justify-self: center; rotate: 90deg; }
  .sb-how__calc { padding: 12px; }
  .sb-slot { grid-template-columns: 10px 1fr auto; }
  .sb-slot__k { display: none; }
  .sb-outcome { grid-template-columns: 1fr auto; }
  .sb-outcome__math { grid-column: 1; grid-row: 2; }
  .sb-outcome .sb-plus { grid-row: 1 / 3; grid-column: 2; }
  .sb-how__foot { flex-direction: column; align-items: stretch; }

  /* why */
  .sb-why { grid-template-columns: 1fr; gap: 16px; }
  .sb-why__viz { height: auto; min-height: 168px; padding: 20px; }
  .sb-why__body { padding: 24px 20px; }

  /* scanner: вертикальная схема */
  .sb-scan { padding: 56px 16px 16px; }
  .sb-scan__chip { left: 16px; top: 16px; }
  .sb-scan__flow { grid-template-columns: 1fr; gap: 24px; }
  .sb-node { display: grid; grid-template-columns: 40px 1fr; gap: 8px 12px; }
  .sb-node__title { min-height: 0; align-self: center; }
  .sb-node__viz { grid-column: 2; min-height: 0; }
  .sb-node:not(:last-child)::after { top: 44px; left: 19px; width: 2px; height: calc(100% - 20px); background: repeating-linear-gradient(180deg, var(--green) 0 6px, transparent 6px 12px) 0 0 / 2px 24px; }
  .sb-books { margin-top: 8px; }

  /* calc */
  .sb-calc { grid-template-columns: 1fr; }
  .sb-calc__controls, .sb-calc__result { padding: 20px; }
  .sb-calc__totals { grid-template-columns: 1fr; gap: 8px; }
  .sb-total { flex-direction: row; align-items: baseline; gap: 8px; }
  .sb-tabs { display: flex; width: 100%; }
  .sb-tabs .tabs__btn { flex: 1 1 0; padding-left: 6px; padding-right: 6px; }

  /* types: на мобильном видна одна карточка — по переключателю */
  .sb-pl__grid { grid-template-columns: 1fr; }
  .sb-plc__viz { padding: 20px; }
  .sb-plc__body { padding: 24px 20px; }
  .sb-facts > div { grid-template-columns: 96px 1fr; gap: 12px; }
  .sb-outs { grid-template-columns: 1fr; gap: 12px; }

  /* example: вертикальный stepper */
  .sb-ex-steps { grid-template-columns: 1fr; gap: 8px; margin-bottom: 32px; }
  .sb-ex-steps li { padding: 16px; }
  .sb-ex__match { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 20px; }
  .sb-ex__vs { order: -1; }
  .sb-ex__nav { grid-template-columns: repeat(4, 1fr); }
  .sb-ex__tab { flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; text-align: center; font-size: 10px; line-height: 16px; }
  .sb-ex__tab > span:last-child { display: none; }
  .sb-ex__tab.is-active > span:last-child { display: none; }
  .sb-ex__pane { padding: 20px; }
  .sb-ex__grid { grid-template-columns: 1fr; gap: 24px; }
  .sb-ex__viz { padding: 16px; margin: 0 -4px; }
  .sb-odds--ex .sb-odd { height: 44px; min-width: 0; font-size: 20px; padding: 0 6px; }
  .sb-odds--ex thead th { font-size: 10px; }
  .sb-odds--ex th[scope="row"] { width: 52px; }
  .sb-eq { gap: 8px; font-size: 20px; }
  .sb-eq__term { padding: 6px 10px; }
  .sb-bets { grid-template-columns: 1fr; }
  .sb-bank__row { grid-template-columns: 10px 1fr; }
  .sb-bank__row b { grid-column: 2; }
  .sb-ex__ctrl { flex-wrap: wrap; padding: 16px 20px; gap: 12px; }
  .sb-ex__count { width: 100%; text-align: center; }
  .sb-ex__ctrl .btn, .sb-ex__ctrl [data-ex-restart] { flex: 1 1 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; justify-content: center; }
  .sb-sum__net dd { font-size: 20px; line-height: 26px; }
  .sb-sum > div { align-items: center; }
  .sb-ex__final { padding: 16px; }

  /* pricing */
  .sb-price { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .sb-price__offer { align-items: stretch; }
  .sb-price__cta { flex-direction: column; }
  .sb-price__cta .btn { width: 100%; }

  /* faq */
  .sb-acc__q { padding: 16px; font-size: 14px; line-height: 24px; letter-spacing: .14px; gap: 16px; }
  .sb-acc__a p { font-size: 14px; line-height: 24px; }
  .sb-acc__a p { padding: 0 16px 16px; }

  /* final */
  .sb-final { padding: 48px 0 0; }
  .sb-final__box, html[lang="ru"] .sb-final__box { padding: 32px 20px; }
  .final__cta .btn { width: 100%; }
}
@media (max-width: 599px) {
  .sb-how__books { grid-template-columns: 1fr; }
  .sb-browser__url { display: none; }
}
/* очень узкие экраны */
@media (max-width: 389px) {
  .sb-odds--ex .sb-odd { font-size: 14px; }
  .sb-eq { font-size: 14px; }
  .sb-ex__team { font-size: 12px; }
}

/* v10: номера шагов «Как BetBurger находит вилки» */
.sb-flow__icon { font-weight: 600; font-size: 24px; line-height: 31px; color: var(--green-dark); font-variant-numeric: tabular-nums; }
/* v10: Prematch / Live как тарифные карточки Home Page (Live выделена, рамка 4px green 50%) */
.sb-pl__grid { align-items: stretch; }
.sb-plc { border: 1px solid var(--gray-light-3); }
.sb-plc__body { flex: 1; }
.sb-plc__btn { align-self: flex-start; margin-top: auto; }
.sb-plc.is-featured, .sb-pl__grid:hover .sb-plc:hover { border: 4px solid rgba(78, 194, 165, .5); }
.sb-plc.is-featured .sb-plc__body, .sb-pl__grid:hover .sb-plc:hover .sb-plc__body { padding: 29px; }
.sb-pl__grid:hover .sb-plc.is-featured:not(:hover) { border: 1px solid var(--gray-light-3); }
.sb-pl__grid:hover .sb-plc.is-featured:not(:hover) .sb-plc__body { padding: 32px; }
@media (max-width: 1023px) {
  .sb-plc.is-featured .sb-plc__body, .sb-pl__grid:hover .sb-plc:hover .sb-plc__body { padding: 21px 17px; }
  .sb-pl__grid:hover .sb-plc.is-featured:not(:hover) .sb-plc__body { padding: 24px 20px; }
  .sb-plc__btn { align-self: stretch; }
}

/* v13: крупнее шрифт калькулятора дохода, факты Prematch/Live как значения */
.sb-calc .sb-small { font-size: 14px; line-height: 24px; letter-spacing: .14px; }
.sb-calc .sb-label { font-size: 16px; }
.sb-calc .tabs__btn { height: 40px; padding: 8px 16px; font-size: 14px; line-height: 24px; letter-spacing: .14px; }
.sb-calc .sb-input { font-size: 16px; }
.sb-calc .sb-range__scale { font-size: 12px; line-height: 16px; }
.sb-calc .sb-total__l { font-size: 14px; line-height: 24px; }
.sb-calc .sb-caption { font-size: 12px; line-height: 16px; }
.sb-calc .sb-chart__axis { font-size: 12px; }
.sb-facts > div { grid-template-columns: 140px 1fr; }
.sb-facts dt { font-size: 14px; line-height: 24px; letter-spacing: .14px; }
@media (max-width: 1023px) {
  .sb-calc .tabs__btn { padding: 8px 4px; font-size: 12px; line-height: 16px; white-space: normal; }
  .sb-facts > div { grid-template-columns: 116px 1fr; }
}

/* v14 */
.sb-calc__notes { display: flex; flex-direction: column; gap: 16px; margin-top: -8px; }
.sb-why__head .sb-h3 { font-size: 20px; line-height: 26px; letter-spacing: .2px; }
.sb-ex__text .sb-ex__final { margin-top: 8px; }

/* =========================================================
   v18: калькулятор дохода по образцу betburger.com (главная):
   слева карточка «Калькулятор», справа пояснения с иконками
   ========================================================= */
.sb-calc2 { display: grid; grid-template-columns: 570px minmax(0, 1fr); gap: 100px; align-items: center; }
.sb-calc2__card { display: flex; flex-direction: column; gap: 40px; padding: 48px 56px; overflow: visible; }
.sb-calc2__title { text-align: center; }
.sb-calc2__group { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sb-calc2__label { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0; width: 100%; font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: .16px; color: var(--dark-green); }
.sb-calc2__label .sb-ic { width: 20px; height: 20px; }
.sb-calc2__bank { font-weight: 600; font-size: 24px; line-height: 31px; letter-spacing: .24px; color: var(--dark-green); font-variant-numeric: tabular-nums; }
.sb-calc2__strategy legend { margin-bottom: 20px; }
.sb-radios { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sb-radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: .16px; color: var(--dark-green); }
.sb-radio input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 1px solid var(--gray-light); border-radius: 9999px; background: var(--white); display: grid; place-content: center; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.sb-radio input::before { content: ''; width: 12px; height: 12px; border-radius: 9999px; background: var(--green); scale: 0; transition: scale .2s cubic-bezier(.34, 1.56, .64, 1); }
.sb-radio input:checked { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-tint); }
.sb-radio input:checked::before { scale: 1; }
.sb-radio:hover input { border-color: var(--green); }
.sb-radio input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.sb-calc2__income { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sb-calc2__income-title { font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: .16px; color: var(--dark-green); }
.sb-calc2__totals { display: flex; justify-content: space-between; gap: 24px; width: 100%; }
.sb-calc2__total { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; font-weight: 600; font-size: 32px; line-height: 42px; letter-spacing: .32px; color: var(--dark-green); font-variant-numeric: tabular-nums; }
.sb-calc2__total i { font-style: normal; color: var(--green); }
.sb-calc2__total span { font-weight: 600; }
.sb-calc2__btn { align-self: center; }
.sb-calc2__info { display: flex; flex-direction: column; gap: 56px; }
.sb-calc2__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 32px; align-items: start; }
.sb-calc2__item .sb-h3 { margin-bottom: 12px; }
.sb-calc2__item p { font-size: 16px; line-height: 32px; letter-spacing: .16px; color: var(--dark-gray); }
.sb-calc2__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 8px; background: var(--white); box-shadow: var(--shadow-smooth); }
.sb-calc2__icon .sb-ic { width: 28px; height: 28px; }
@media (max-width: 1239px) {
  .sb-calc2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .sb-calc2__card { padding: 40px 32px; }
  .sb-calc2__total { font-size: 24px; line-height: 31px; }
}
@media (max-width: 1023px) {
  .sb-calc2 { grid-template-columns: 1fr; gap: 40px; }
  .sb-calc2__card { padding: 32px 20px; gap: 32px; }
  .sb-radios { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sb-calc2__totals { flex-direction: column; align-items: center; gap: 8px; }
  .sb-calc2__total { font-size: 32px; line-height: 42px; }
  .sb-calc2__btn { align-self: stretch; }
  .sb-calc2__info { gap: 32px; }
  .sb-calc2__item { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .sb-calc2__icon { width: 48px; height: 48px; }
  .sb-calc2__icon .sb-ic { width: 24px; height: 24px; }
  .sb-calc2__item p { font-size: 14px; line-height: 24px; }
}
.sb-calc2__card { padding: 48px 40px; }
.sb-radios { flex-wrap: nowrap; gap: 12px; }
.sb-radio { font-size: 14px; letter-spacing: .14px; white-space: nowrap; }
.sb-calc2__total { font-size: 24px; line-height: 31px; letter-spacing: .24px; gap: 8px; }
.sb-calc2 .sb-range__scale { font-size: 12px; line-height: 16px; }
@media (max-width: 1239px) { .sb-radios { flex-direction: column; align-items: flex-start; } .sb-calc2__totals { flex-direction: column; align-items: center; gap: 8px; } }
@media (max-width: 1023px) { .sb-calc2__card { padding: 32px 20px; } .sb-calc2__total { font-size: 32px; line-height: 42px; } .sb-radio { font-size: 16px; } }

/* v21: заголовки причин меньше, без пунктира между шагами, чистый скриншот внизу колонки, без пояснения в калькуляторе */
.sb-why__head .sb-h3 { font-size: 16px; line-height: 24px; letter-spacing: .16px; }
.sb-flow__step:not(:last-child)::after { content: none; }
.sb-shot img { border: 0; border-radius: 0; box-shadow: none; }
#ex-p1 .sb-ex__grid { align-items: stretch; }
#ex-p1 .sb-shot { margin-top: auto; padding-top: 16px; }
.sb-bbc-note { visibility: hidden; }
@media (max-width: 1023px) {
  #ex-p1 .sb-shot { margin-top: 8px; padding-top: 0; }
  .sb-bbc-note { display: none; }
}

/* v23: скриншот вилки на белой подложке со скруглением и мягкой тенью */
.sb-shot img { border-radius: 8px; }
#ex-p1 .sb-shot, .sb-shot { padding: 12px; background: var(--white); border: 1px solid var(--gray-light-3); border-radius: 12px; box-shadow: var(--shadow-smooth); }
#ex-p1 .sb-shot { margin-top: auto; }
@media (max-width: 1023px) { #ex-p1 .sb-shot { margin-top: 8px; padding: 8px; } .sb-shot img { border-radius: 4px; } }

/* v24: без белой подложки — только скругление и тень у самой картинки */
#ex-p1 .sb-shot, .sb-shot { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.sb-shot img { border-radius: 8px; box-shadow: var(--shadow-smooth); }
@media (max-width: 1023px) { #ex-p1 .sb-shot { padding: 0; } .sb-shot img { border-radius: 8px; } }

/* v25: скриншот калькулятора в этапе 3 — как скриншот вилки в этапе 1 */
#ex-p3 .sb-ex__grid { align-items: stretch; }
#ex-p3 .sb-shot { margin-top: auto; padding-top: 16px; }
@media (max-width: 1023px) { #ex-p3 .sb-shot { margin-top: 8px; padding-top: 0; } }

/* =========================================================
   LP «Valuebets» (/ru/valuebet) — дополнения к стилям LP Surebet.
   Только токены дизайн-системы BetBurger (designer.css :root).
   ========================================================= */
.vb-odd--fair, .vb-eq--fair, .vb-prob__mark--fair { --c: var(--green); --t: var(--green-tint); }
.vb-odd--book, .vb-prob__mark--book { --c: var(--dark-green); --t: var(--blue-tint); }

/* ---------- 2. Что такое ставки с перевесом: текст + визуал ---------- */
.vb-what { display: grid; grid-template-columns: minmax(0, 1fr) 570px; gap: 30px; align-items: center; }
.vb-fair { display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: 8px; background: var(--bg-light); }
.vb-fair__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.vb-fair__vs { font-weight: 600; font-size: 24px; line-height: 31px; color: var(--dark-gray); }
.vb-odd { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border: 1px solid var(--c); border-left-width: 4px; border-radius: 8px; background: var(--white); }
.vb-odd__label { font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--green-dark); }
.vb-odd__k { font-weight: 600; font-size: 40px; line-height: 52px; letter-spacing: .4px; color: var(--dark-green); font-variant-numeric: tabular-nums; }
.vb-odd__p { font-size: 12px; line-height: 16px; letter-spacing: .12px; color: var(--dark-gray); }
.vb-odd__p b { font-weight: 600; color: var(--dark-green); }
.vb-odd--sm .vb-odd__k { font-size: 24px; line-height: 31px; letter-spacing: .24px; }

.vb-prob { display: flex; flex-direction: column; gap: 8px; }
.vb-prob__title { font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--green-dark); }
.vb-prob__track { position: relative; height: 8px; margin: 28px 0 0; border-radius: 9999px; background: var(--gray-light); }
.vb-prob__gap { position: absolute; top: 0; bottom: 0; left: var(--a); width: calc(var(--b) - var(--a)); background: var(--green); transform-origin: 0 50%; }
.vb-prob__mark { position: absolute; left: var(--x); top: 50%; width: 14px; height: 14px; translate: -50% -50%; border-radius: 9999px; background: var(--c); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--c); }
.vb-prob__mark i { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; font-style: normal; font-weight: 600; font-size: 12px; line-height: 16px; color: var(--dark-green); white-space: nowrap; }

/* ---------- 3. Почему появляются Valuebets: 4 карточки ---------- */
.vb-sub-lead { margin: -8px 0 32px; }
.vb-why4 { grid-template-columns: repeat(2, 1fr); }
.vb-why4 .sb-why__item p + p { margin-top: -4px; }
.vb-warn { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--bg-light); font-size: 12px !important; line-height: 16px !important; letter-spacing: .12px !important; }
.vb-warn .sb-ic { margin-top: 0; stroke: var(--red); }

/* ---------- Поиск валуя: вручную / сканером ---------- */
.vb-search { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 30px; align-items: stretch; }
.vb-way { display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); }
.vb-way--bb { border: 4px solid rgba(78, 194, 165, .5); padding: 29px; background: var(--white); }
.vb-way__head { display: flex; align-items: center; gap: 16px; }
.vb-way__head .sb-h3 { margin: 0; font-size: 16px; line-height: 24px; letter-spacing: .16px; }
.vb-way p:not(.sb-formula) { font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-gray); }
.vb-way .sb-formula { align-self: flex-start; font-weight: 600; }
.vb-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 20px; border-radius: 8px; background: var(--bg-light); font-weight: 600; font-size: 24px; line-height: 31px; color: var(--dark-green); }
.vb-formula__term, .vb-formula__res { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 16px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); font-variant-numeric: tabular-nums; }
.vb-formula__term--book { border-color: var(--dark-green); background: var(--blue-tint); }
.vb-formula__term--fair { border-color: var(--green); background: var(--green-tint); }
.vb-formula small { font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .1px; color: var(--dark-gray); white-space: nowrap; }
.vb-formula__res { border-color: var(--green); background: var(--green); color: var(--white); }
.vb-formula__res small { color: var(--white); }

/* ---------- Сканер: версии Advanced / Standard ---------- */
.vb-versions { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 32px; }
.vb-ver { display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); }
.vb-ver--std { border: 4px solid rgba(78, 194, 165, .5); padding: 29px; }
.vb-ver__head { display: flex; align-items: center; gap: 16px; }
.vb-ver__head > div { display: flex; flex-direction: column; }
.vb-ver__head .sb-h3 { margin: 0; font-size: 16px; line-height: 24px; letter-spacing: .16px; }
.vb-ver__tag { font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--green-dark); }
.vb-ver__list { display: flex; flex-direction: column; gap: 8px; padding-left: 16px; }
.vb-ver__list li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-gray); }
.vb-ver__list li::before { content: ''; flex: none; width: 8px; height: 8px; background: url(../img/icons/bullet.svg) no-repeat center / 8px 8px; }

/* ---------- 5. Калькулятор дохода + график ---------- */
.vb-calc { display: grid; grid-template-columns: 570px minmax(0, 1fr); gap: 30px; align-items: stretch; }
.vb-calc__card { gap: 32px; }
.vb-legend { margin-bottom: 16px; }
.vb-radios { justify-content: center; gap: 40px !important; }
.vb-calc__note { max-width: 420px; text-align: center; font-size: 12px; line-height: 16px; letter-spacing: .12px; color: var(--dark-gray); }

.vb-chart { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 32px; }
.vb-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-bottom: 12px; }
.vb-chart__legend { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: .12px; color: var(--dark-gray); }
.vb-chart__key { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--green); }
.vb-chart__key--exp { margin-left: 8px; border-top: 2px dashed var(--dark-green); }
.vb-chart__ytitle, .vb-chart__xtitle { font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .1px; color: var(--dark-gray); }
.vb-chart__xtitle { align-self: flex-end; margin-top: -8px; }
.vb-chart__box { position: relative; height: 300px; margin-left: 56px; }
.vb-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vb-chart__grid line { stroke: var(--gray-light-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vb-chart__grid line.is-base { stroke: var(--gray-light); }
.vb-chart__line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vb-chart__area { fill: var(--green-tint); stroke: none; }
.vb-chart__exp { fill: none; stroke: var(--dark-green); stroke-width: 2; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.vb-chart__y { position: absolute; top: 0; bottom: 0; left: -56px; width: 48px; }
.vb-chart__y span { position: absolute; right: 0; translate: 0 -50%; font-size: 10px; line-height: 16px; letter-spacing: .1px; color: var(--dark-gray); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vb-chart__dot { position: absolute; width: 12px; height: 12px; translate: -50% -50%; border-radius: 9999px; background: var(--white); border: 2px solid var(--green); box-shadow: 0 0 0 4px var(--green-tint); }
.vb-chart__x { display: flex; justify-content: space-between; margin-left: 56px; font-size: 10px; line-height: 16px; letter-spacing: .1px; color: var(--dark-gray); font-variant-numeric: tabular-nums; }
.vb-chart__x span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.vb-chart__sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0 0; }
.vb-chart__sum > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 8px; background: var(--bg-light); }
.vb-chart__sum dt { font-size: 12px; line-height: 16px; letter-spacing: .12px; color: var(--dark-gray); }
.vb-chart__sum dd { margin: 0; font-weight: 600; font-size: 24px; line-height: 31px; letter-spacing: .24px; color: var(--dark-green); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vb-chart__sum dd.is-green { color: var(--green-dark); }

/* ---------- 6. Почему выгодно ---------- */
.vb-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.vb-reason { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); transition: border-color .3s; }
.vb-reason:hover { border-color: var(--green); }
.vb-reason p { font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-gray); }
.vb-cmp-wrap { margin-top: 40px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); overflow: hidden; box-shadow: var(--shadow-smooth); }
.vb-cmp { width: 100%; border-collapse: collapse; }
.vb-cmp th, .vb-cmp td { padding: 16px 24px; text-align: left; vertical-align: top; font-size: 14px; line-height: 24px; letter-spacing: .14px; }
.vb-cmp thead th { padding-top: 20px; padding-bottom: 20px; font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: .16px; color: var(--dark-green); }
.vb-cmp tbody th { width: 30%; font-weight: 600; color: var(--dark-green); }
.vb-cmp tbody td { width: 35%; color: var(--dark-gray); }
.vb-cmp tbody tr { border-top: 1px solid var(--gray-light-3); }
.vb-cmp .is-vb { background: var(--green-tint); color: var(--dark-green); }
.vb-cmp tbody td.is-vb { font-weight: 600; }
.vb-cmp thead th.is-vb { color: var(--dark-green); box-shadow: inset 0 4px 0 var(--green); }
.vb-pl { margin-top: 40px; }

/* ---------- 7. Пример: эталоны, результат ---------- */
.vb-refs { display: grid; gap: 8px; }
.vb-ref { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0 16px; align-items: center; padding: 12px 16px; border: 1px solid var(--gray-light-3); border-left-width: 4px; border-radius: 8px; background: var(--white); }
.vb-ref.is-on { border-color: var(--green); }
.vb-ref__name { font-weight: 600; font-size: 14px; line-height: 24px; color: var(--dark-green); }
.vb-ref__name small { font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--dark-gray); }
.vb-ref__k { grid-row: 1 / 3; grid-column: 2; font-weight: 600; font-size: 24px; line-height: 31px; color: var(--gray-2); font-variant-numeric: tabular-nums; }
.vb-ref.is-on .vb-ref__k { color: var(--dark-green); }
.vb-ref__tag { font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--dark-gray); }
.vb-ref.is-on .vb-ref__tag { color: var(--green-dark); }
.vb-eq .sb-eq__term { border-color: var(--green); background: var(--green-tint); }
.vb-eq__res { padding: 4px 16px; border-radius: 8px; background: var(--green); color: var(--white); font-variant-numeric: tabular-nums; }
.vb-viz-note { margin-top: -12px; text-align: center; font-size: 12px; line-height: 16px; letter-spacing: .12px; color: var(--dark-gray); }
.vb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vb-sum dd { text-align: right; }
.vb-result { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px; border: 1px solid var(--green); border-radius: 8px; background: var(--white); text-align: center; transition: border-color .3s; }
.vb-result__label, .vb-result__sub { font-size: 12px; line-height: 16px; letter-spacing: .12px; color: var(--dark-gray); }
.vb-result__v { font-weight: 600; font-size: 40px; line-height: 52px; letter-spacing: .4px; color: var(--green-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb-result.is-lose { border-color: var(--gray-light-3); }
.vb-result.is-lose .vb-result__v { color: var(--red); }
#ex-p2 .sb-ex__grid, #ex-p3 .sb-ex__grid { align-items: stretch; }
#ex-p2 .sb-shot, #ex-p3 .sb-shot { margin-top: auto; padding-top: 16px; }

/* ---------- 9. Преимущества ---------- */
.stats.vb-stats { margin: 0; height: auto; padding: 32px 75px; }
.vb-feat-lead { margin: 40px 0 32px; }
.vb-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.vb-feat { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--gray-light-3); border-radius: 8px; background: var(--white); transition: border-color .3s; }
.vb-feat:hover { border-color: var(--green); }
.vb-feat p { font-size: 14px; line-height: 24px; letter-spacing: .14px; color: var(--dark-gray); }
.vb-feat a { color: var(--dark-green); text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; }
.vb-pricing { padding-top: 0; }

/* ---------- Движение (только без reduced-motion) ---------- */
@keyframes vb-draw { from { stroke-dashoffset: var(--len, 2000); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .vb-chart__line.is-drawing { stroke-dasharray: var(--len, 2000); animation: vb-draw 1.6s cubic-bezier(.16, 1, .3, 1) both; }
  .vb-chart__area, .vb-chart__exp { transition: opacity .4s; }
  .vb-chart__dot { transition: left .45s cubic-bezier(.16, 1, .3, 1), top .45s cubic-bezier(.16, 1, .3, 1); }
  .sb-reveal.is-in .vb-prob__gap, .sb-ex__pane.is-entering .vb-prob__gap { animation: sb-grow .8s cubic-bezier(.16, 1, .3, 1) both .2s; }
  .sb-ex__pane.is-entering .vb-ref, .sb-ex__pane.is-entering .vb-result { animation: sb-in .5s cubic-bezier(.16, 1, .3, 1) both .1s; }
  .vb-result__v.is-pop { animation: sb-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
}

/* ---------- Ноутбук 1024–1239 ---------- */
@media (max-width: 1239px) {
  .vb-what { grid-template-columns: minmax(0, 1fr) 480px; }
  .vb-search { grid-template-columns: minmax(0, 1fr) 300px; }
  .vb-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vb-chart { padding: 32px 24px; }
  .vb-chart__sum dd { font-size: 16px; line-height: 24px; letter-spacing: .16px; }
  .vb-formula { font-size: 16px; line-height: 24px; }
  .vb-feats { grid-template-columns: repeat(2, 1fr); }
  .stats.vb-stats { padding: 32px 40px; }
  .vb-odd__k { font-size: 32px; line-height: 42px; }
}

/* ---------- Мобильная < 1024 ---------- */
@media (max-width: 1023px) {
  .vb-what { grid-template-columns: 1fr; gap: 32px; }
  .vb-fair { padding: 20px 16px; margin: 0 -4px; }
  .vb-fair__pair { gap: 8px; }
  .vb-fair__vs { font-size: 20px; }
  .vb-odd { padding: 12px; }
  .vb-odd__k { font-size: 24px; line-height: 31px; }
  .vb-why4 { grid-template-columns: 1fr; }
  .vb-search { grid-template-columns: 1fr; gap: 16px; }
  .vb-way { padding: 20px; }
  .vb-way--bb { padding: 17px; }
  .vb-formula { gap: 6px; padding: 12px; font-size: 14px; line-height: 24px; justify-content: center; }
  .vb-formula__term, .vb-formula__res { padding: 4px 8px; }
  .vb-versions { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .vb-ver { padding: 20px; }
  .vb-ver--std { padding: 17px; }
  .vb-calc { grid-template-columns: 1fr; gap: 24px; }
  .vb-radios { flex-direction: row !important; justify-content: center; gap: 32px !important; }
  .vb-chart { padding: 24px 16px; }
  .vb-chart__box { height: 220px; margin-left: 44px; }
  .vb-chart__y { left: -44px; width: 38px; }
  .vb-chart__x { margin-left: 44px; }
  .vb-chart__sum { grid-template-columns: 1fr; gap: 8px; }
  .vb-chart__sum > div { flex-direction: row; align-items: center; justify-content: space-between; }
  .vb-chart__sum dd { font-size: 16px; line-height: 24px; }
  .vb-reasons { grid-template-columns: 1fr; gap: 12px; }
  .vb-reason { flex-direction: row; align-items: flex-start; padding: 20px; }
  .vb-cmp-wrap { margin-top: 32px; }
  .vb-cmp, .vb-cmp tbody, .vb-cmp tr, .vb-cmp th, .vb-cmp td { display: block; width: auto !important; }
  .vb-cmp thead { display: none; }
  .vb-cmp tbody tr { padding: 16px; }
  .vb-cmp tbody tr:first-child { border-top: 0; }
  .vb-cmp tbody th { padding: 0 0 8px; }
  .vb-cmp tbody td { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 8px 12px; border-radius: 8px; }
  .vb-cmp tbody td::before { content: attr(data-label); font-weight: 500; font-size: 12px; line-height: 24px; color: var(--dark-gray); }
  .vb-pl { margin-top: 32px; }
  .vb-two { gap: 8px; }
  .vb-ref__k { font-size: 20px; }
  .vb-result { padding: 20px 12px; }
  .vb-result__v { font-size: 32px; line-height: 42px; }
  .stats.vb-stats { width: auto; max-width: none; padding: 24px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 12px; align-items: start; }
  .stats.vb-stats .stats__item span { white-space: normal; }
  .vb-feat-lead { margin: 32px 0 24px; }
  .vb-feats { grid-template-columns: 1fr; gap: 12px; }
  .vb-feat { flex-direction: row; align-items: center; padding: 16px 20px; }
  .vb-pricing { padding-top: 0; }
}
@media (max-width: 389px) {
  .vb-fair__pair { grid-template-columns: 1fr; }
  .vb-fair__vs { display: none; }
  .vb-two { grid-template-columns: 1fr; }
}

/* ---------- Калькулятор EV: заголовок блока ---------- */
#ev-calculator .sb-head + .sb-lead { margin-top: -24px; }

/* v1.1: правки после проверки вёрстки */
.stats__item b span { font: inherit; letter-spacing: inherit; color: inherit; white-space: nowrap; }
.vb-search { align-items: start; }
.vb-link { align-self: flex-start; }
.vb-link .sb-ic { width: 20px; height: 20px; transition: translate .2s; }
.vb-link:hover .sb-ic { translate: 4px 0; }
.vb-chart__box { flex: 1 1 auto; height: auto; min-height: 300px; }
@media (max-width: 1023px) { .vb-chart__box { min-height: 220px; } }

/* v2 (10.11): видео в Hero без рамки браузера; рамки версий V1/V2 одинаковые 1px; без абзаца под StatsBar */
.vb-hero-video { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-smooth); }
.vb-hero-video .sb-video { border-radius: 16px; }
.vb-ver--std { border: 1px solid var(--gray-light-3); padding: 32px; }
.vb-stats + .vb-feats { margin-top: 32px; }
@media (max-width: 1023px) {
  .vb-ver--std { padding: 20px; }
  .vb-stats + .vb-feats { margin-top: 24px; }
}

/* v3 (10.11): пример по формулам руководства Valuebets V2 (ВП и ROI) */
.vb-eq--book { --c: var(--dark-green); --t: var(--blue-tint); }
.vb-eq .sb-eq__term.vb-eq--book { border-color: var(--dark-green); background: var(--blue-tint); }
.vb-eq__l { font-size: 24px; }
.vb-vproi { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 8px; background: var(--white); overflow: hidden; font-variant-numeric: tabular-nums; }
.vb-vproi caption { padding-bottom: 8px; text-align: left; font-weight: 500; font-size: 10px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--green-dark); }
.vb-vproi th, .vb-vproi td { padding: 8px 12px; text-align: right; font-size: 12px; line-height: 24px; letter-spacing: .12px; }
.vb-vproi th:first-child, .vb-vproi td:first-child { text-align: left; }
.vb-vproi thead th { font-weight: 500; color: var(--dark-gray); }
.vb-vproi tbody td { border-top: 1px solid var(--gray-light-3); font-weight: 600; font-size: 14px; color: var(--dark-green); }
.vb-vproi tbody td:last-child { color: var(--green-dark); }
@media (max-width: 1023px) {
  .vb-vproi th, .vb-vproi td { padding: 8px; }
  .vb-vproi thead th { font-size: 10px; line-height: 16px; }
}

/* v4 (10.11): формула обычным текстом; компактный пример расчёта; карточки поиска одной высоты; кнопка сканера */
.vb-search { align-items: stretch; }
.vb-way--bb .vb-link { margin-top: auto; align-self: flex-start; }
.vb-formula { align-self: flex-start; gap: 8px; padding: 12px 16px; font-size: 16px; line-height: 24px; letter-spacing: .16px; }
.vb-formula__term, .vb-formula__res { padding: 4px 12px; }
@media (max-width: 1023px) {
  .vb-formula { align-self: stretch; gap: 6px; padding: 12px; font-size: 14px; line-height: 24px; }
  .vb-formula__term, .vb-formula__res { padding: 4px 8px; }
  .vb-way--bb .vb-link { align-self: stretch; }
}

/* v5 (10.11): карточки версий Valuebets — тексты со скриншота, заголовки 18px, ссылки «Открыть сканер» */
.vb-ver__head .sb-h3 { font-size: 18px; line-height: 24px; letter-spacing: .18px; }
.vb-ver__link { align-self: flex-end; margin-top: auto; padding: 0; }
.vb-ver__link .sb-ic { width: 20px; height: 20px; transition: translate .2s; }
.vb-ver__link:hover .sb-ic { translate: 4px 0; }

/* v6 (10.11): вместо калькулятора дохода — блок «Valuebets Backtesting» со скриншотом */
.vb-bt { margin: 0; }
.vb-bt img { display: block; width: 100%; height: auto; }

/* v7 (10.11): номера доводов «Почему выгодно» 24×24 внутри текста, текст обтекает */
.vb-reason { display: block; }
.vb-reason__num { float: left; width: 24px; height: 24px; margin: 0 12px 0 0; border-radius: 4px; }
@media (max-width: 1023px) { .vb-reason { display: block; } }

/* v8 (10.11): номера доводов 45×45, цифры крупнее и жирные */
.vb-reason__num { width: 45px; height: 45px; margin: 1px 16px 0 0; border-radius: 8px; font-weight: 700; font-size: 20px; line-height: 26px; letter-spacing: .2px; }

/* v10 (11.11): Prematch / Live Valuebets — подпись «До начала / Во время события» под заголовком, без строки «Когда:» */
.vb-plc__head { display: flex; flex-direction: column; }
.vb-pl .sb-plc__title { align-items: center; }

/* v12 (11.11): блок «Как это работает» — заголовки карточек/шагов 16px, тексты карточек и шагов 16px */
#how .sb-why__head .sb-h3, #how .vb-way__head .sb-h3, #how .sb-flow__step b { font-size: 16px; line-height: 24px; letter-spacing: .16px; }
#how .sb-why__item p, #how .vb-way p:not(.sb-formula), #how .sb-flow__step > span:last-child { font-size: 16px; line-height: 24px; letter-spacing: .16px; }
#how .sb-prose .sb-lead { font-size: 16px; }
#how .sb-flow__step { align-content: center; }

/* v13 (11.11): шаги 1-2-3 — заголовки на одной линии сверху, текст уходит вниз; карточки версий — пункты и ссылка 16px */
#how .sb-flow__step { align-content: start; align-items: start; }
#how .sb-flow__step b { padding-top: 0; }
#how .vb-ver__list li, #how .vb-ver__link { font-size: 16px; line-height: 24px; letter-spacing: .16px; }

/* v15 (11.11): пример валуя — весь текст левой колонки во всех 4 табах 16px */
#example .sb-ex__text p, #example .sb-ex__text .sb-formula, #example .sb-ex__final p:first-child { font-size: 16px; line-height: 24px; letter-spacing: .16px; }