::-moz-selection {
  background: var(--c-accent);
  color: var(--c-on-dark);
  text-shadow: none;
}

::selection {
  background: var(--c-accent);
  color: var(--c-on-dark);
  text-shadow: none;
}

h1::-moz-selection,
.h1::-moz-selection,
h2::-moz-selection,
.h2::-moz-selection,
h3::-moz-selection,
.h3::-moz-selection,
h4::-moz-selection,
.h4::-moz-selection,
h5::-moz-selection,
.h5::-moz-selection,
h6::-moz-selection,
.h6::-moz-selection,
h1 *::-moz-selection,
.h1 *::-moz-selection,
h2 *::-moz-selection,
.h2 *::-moz-selection,
h3 *::-moz-selection,
.h3 *::-moz-selection,
h4 *::-moz-selection,
.h4 *::-moz-selection,
h5 *::-moz-selection,
.h5 *::-moz-selection,
h6 *::-moz-selection,
.h6 *::-moz-selection {
  background: #ffc107;
  color: #000;
  text-shadow: none;
}

h1::selection,
.h1::selection,
h2::selection,
.h2::selection,
h3::selection,
.h3::selection,
h4::selection,
.h4::selection,
h5::selection,
.h5::selection,
h6::selection,
.h6::selection,
h1 *::selection,
.h1 *::selection,
h2 *::selection,
.h2 *::selection,
h3 *::selection,
.h3 *::selection,
h4 *::selection,
.h4 *::selection,
h5 *::selection,
.h5 *::selection,
h6 *::selection,
.h6 *::selection {
  background: #ffc107;
  color: #000;
  text-shadow: none;
}

::-webkit-input-placeholder {
  color: var(--c-faint);
}

:-moz-placeholder {
  color: var(--c-faint);
}

::-moz-placeholder {
  color: var(--c-faint);
}

:-ms-input-placeholder {
  color: var(--c-faint);
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus:-moz-placeholder {
  color: transparent;
}

input:focus::-moz-placeholder {
  color: transparent;
}

input:focus:-ms-input-placeholder {
  color: transparent;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-font-smoothing: antialiased;
  -ms-text-size-adjust: 100%;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Montserrat", sans-serif, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-text);
  text-align: left;
  background-color: #fff;
}


[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: currentColor;
  text-decoration: none;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: var(--c-muted);
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: none;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

select {
  word-wrap: normal;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
  -webkit-overflow-scrolling: touch;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  -webkit-overflow-scrolling: touch;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

blockquote {
  padding: 0 0 0 100px;
  border: none;
  position: relative;
  z-index: 1;
  margin: 50px 0;
}

blockquote:before {
  content: '';
  left: 0;
  top: 10px;
  bottom: 10px;
  border-left: 5px solid var(--c-accent);
  display: block;
  position: absolute;
}

blockquote h1,
blockquote .h1,
blockquote h2,
blockquote .h2,
blockquote h3,
blockquote .h3,
blockquote h4,
blockquote .h4,
blockquote h5,
blockquote .h5,
blockquote h6,
blockquote .h6 {
  line-height: 2;
  margin: 0;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Montserrat", sans-serif, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

svg:not(:root) {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.main-svg-sprite {
  display: none;
}

.svg-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  fill: currentColor;
  font-size: 0;
}

.svg-icon__link {
  vertical-align: top;
  fill: inherit;
  width: inherit;
  height: inherit;
}

/* ==========================================================================
  Browser Upgrade Prompt
  ========================================================================== */

.browserupgrade {
  margin: $appGutter 0;
  background: #ccc;
  color: #000;
  padding: $appGutter 0;
}

.theme-color {
  color: ;
}

/**
 * The CSS class screen-reader-text
 *
 * @link https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/
 */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
  -webkit-overflow-scrolling: touch;
}

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  -webkit-clip-path: none;
          clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000 ;
}

* {
  min-width: 0;
  min-height: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.app-footer {
  -ms-flex: none;
      flex: none;
  background: var(--bg-dark);
  padding: 95px 0 70px;
  position: relative;
  z-index: 1;
}

.app-footer__content {
  display: -ms-flexbox;
  display: flex;
}

.app-footer .b-lk {
  color: var(--c-accent);
}

.app-footer__part {
  -ms-flex: 1 1;
      flex: 1 1;
}

.app-footer__part--logo {
  max-width: 312px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: start;
      align-items: flex-start;
}

.app-footer__nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 2 1;
      flex: 2 1;
  gap: var(--sp-40);
}

.app-footer__nav-col {
  -ms-flex: 1 1;
      flex: 1 1;
  min-width: 0;
}

.app-footer__group + .app-footer__group {
  margin-top: var(--sp-32);
}

.app-footer__group-title {
  color: var(--c-on-dark);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 16px;
}

.app-footer__accordion-toggle {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--c-on-dark);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  font-family: inherit;
}

.app-footer__accordion-toggle .svg-icon {
  width: 10px;
  height: 6px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  transition: transform 0.2s ease;
}

.app-footer__accordion-toggle[aria-expanded="true"] .svg-icon {
  transform: rotate(180deg);
}

.app-footer__accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.app-footer__accordion-panel.is-expanded {
  max-height: 400px;
  margin-top: 16px;
}

.app-footer .b-menu li {
  display: block;
}

.app-footer .b-menu li + li {
  margin-top: var(--sp-24);
}

.app-footer .b-menu a {
  font-size: 13px;
  line-height: 16px;
  color: var(--c-muted);
  transition: 0.4s ease all;
}

.app-footer .b-menu a:hover,
.app-footer .b-menu a.is-active {
  color: var(--c-accent);
}

.app-footer__logo {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  margin-bottom: var(--sp-20);
}

/* Логотип — один SVG (раньше собирался из трёх картинок, отступы разносили их) */

.app-footer__activity {
  margin-bottom: var(--sp-24);
  font-size: 13px;
  max-width: 230px;
  line-height: 16px;
  color: rgba(107,128,159,0.72);
}

.app-footer__soc {
  display: -ms-flexbox;
  display: flex;
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-16);
  -ms-flex-direction: column;
      flex-direction: column;
}

.app-footer__soc a {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--c-on-dark);
  margin-bottom: var(--sp-24);
}

.app-footer__soc a img {
  margin-right: 8px;
}

.app-footer__mail {
  font-size: 13px;
  line-height: 16px;
  color: rgba(76,199,36,0.64);
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.app-footer__mail:hover {
  text-decoration: underline;
}

.app-header__content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
}

.app-header__soc {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.app-header__soc a {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  /* раньше было --c-on-dark (белый) и перебивалось инлайновыми фирменными цветами
     соцсетей прямо в разметке; теперь единый тёмный, как у остальной шапки */
  color: var(--c-heading);
  margin-right: 40px;
}

.app-header__soc a img {
  margin-right: 8px;
}

.app-header__menu ul {
  display: -ms-flexbox;
  display: flex;
}

.app-header__menu li {
  margin-left: 40px;
}

.app-header__menu a {
  font-weight: 600;
  display: block;
  padding: var(--sp-24) 0;
  font-size: 13px;
  line-height: 16px;
  color: var(--c-heading);
  transition: 0.4s ease all;
}

.app-header__menu a:hover,
.app-header__menu a.active {
  color: var(--c-accent);
  text-decoration: none;
  box-shadow: inset 0 1px 0 0 #4cc724, 0 -1px 0 0 #4cc724;
}

.b-menu__item--dropdown {
  position: relative;
}

.b-menu__dropdown-toggle {
  display: none;
}

.b-menu__dropdown {
  position: absolute;
  top: 100%;
  left: auto;
  right: 0;
  width: 380px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(31,45,61,0.04), 0 30px 60px -12px rgba(31,45,61,0.22);
  border: 1px solid rgba(107,128,159,0.1);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 12px);
  transition: .28s cubic-bezier(.16,1,.3,1) opacity, .28s cubic-bezier(.16,1,.3,1) transform, .28s ease visibility;
  z-index: 30;
}

/* мостик, чтобы при переходе курсора с пункта на панель дропдаун не закрывался */
.b-menu__dropdown:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

/* треугольник-указатель к пункту меню */
.b-menu__dropdown:after {
  content: '';
  position: absolute;
  top: -7px;
  left: auto;
  right: 28px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 1px solid rgba(107,128,159,0.1);
  border-top: 1px solid rgba(107,128,159,0.1);
  transform: rotate(45deg);
  border-radius: 3px 0 0 0;
}

.b-menu__item--dropdown:hover .b-menu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

.b-menu__dropdown-inner {
  position: relative;
  z-index: 1;
}

.b-menu__dropdown .b-menu__dropdown-item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: .2s ease background;
}

.b-menu__dropdown .b-menu__dropdown-item:hover {
  background: #f4faf0;
  box-shadow: none;
}

.b-menu__dropdown-icon {
  width: 42px;
  height: 42px;
  -ms-flex: none;
      flex: none;
  border-radius: 6px;
  background: var(--bg-soft);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  color: var(--c-muted);
  transition: .25s ease background, .25s ease color, .25s ease box-shadow, .25s ease transform;
}

.b-menu__dropdown-item:hover .b-menu__dropdown-icon {
  background: linear-gradient(135deg, #5cd633 0%, #3fb01d 100%);
  color: var(--c-on-dark);
  box-shadow: 0 8px 18px rgba(76,199,36,0.35);
  transform: translateY(-1px);
}

.b-menu__dropdown-icon svg {
  width: 20px;
  height: 20px;
}

.b-menu__dropdown-body {
  -ms-flex: 1 1;
      flex: 1 1;
  min-width: 0;
}

.b-menu__dropdown-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-heading);
  margin-bottom: 2px;
  transition: .2s ease color;
}

.b-menu__dropdown-item:hover .b-menu__dropdown-title {
  color: var(--c-accent-dark);
}

.b-menu__dropdown-desc {
  font-size: 12px;
  line-height: 16px;
  color: var(--c-text);
}

.b-menu__dropdown-arrow {
  -ms-flex: none;
      flex: none;
  width: 18px;
  height: 18px;
  color: var(--c-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: .25s ease opacity, .25s ease transform;
}

.b-menu__dropdown-arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}

.b-menu__dropdown-item:hover .b-menu__dropdown-arrow {
  opacity: 1;
  transform: translateX(0);
}

.b-menu__dropdown .b-menu__dropdown-all {
  position: relative;
  z-index: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 14px;
  border-radius: 6px;
  background: var(--bg-soft);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-muted);
  text-decoration: none;
  transition: .2s ease background, .2s ease color;
}

.b-menu__dropdown-all svg {
  width: 17px;
  height: 17px;
  transition: .2s ease transform;
}

.b-menu__dropdown .b-menu__dropdown-all:hover {
  background: var(--c-accent);
  color: var(--c-on-dark);
  box-shadow: none;
}

.b-menu__dropdown-all:hover svg {
  transform: translateX(3px);
}

.app-header .m-close,
.app-header .m-button {
  display: none;
  padding: 0;
  border: none;
  background: none;
  -webkit-appearance: none;
          appearance: none;
  color: inherit;
  cursor: pointer;
}

.app-header__part--top {
  display: -ms-flexbox;
  display: flex;
  height: 92px;
  -ms-flex-align: center;
      align-items: center;
  transition: 0.4s ease all;
}

.app-header__part--top .app-header__links {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  margin-left: auto;
}

.app-header__part--bottom {
  border-top: 1px solid rgba(107,128,159,0.14);
}

.app-header__links--mobile {
  display: none;
}

.app-header__link {
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: var(--c-accent);
}

.app-header .b-lk {
  margin-left: 48px;
  color: var(--c-heading);
}

/* Верхняя панель — только десктоп: ниже 1024px она display:none, а «Создать квиз»
   и «Личный кабинет» показываются в бургер-меню. Поэтому увеличение шрифта
   здесь мобильных не касается, отдельный медиа-запрос не нужен. */
.app-header__part--top .app-header__link,
.app-header__part--top .b-lk {
  font-size: 16px;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  min-height: 100vh;
}

.app {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  height: 100vh;
  background-color: #fff;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-muted);
}

.app img {
  max-width: 100%;
}

.app__wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  height: 100%;
  height: 100vh;
}

.app__content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 0 auto;
      flex: 1 0 auto;
  padding: 70px 0 30px;
}

.app__main {
  -ms-flex: 1 1;
      flex: 1 1;
}

.site-width {
  width: 100%;
  max-width: 1246px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.btn {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  text-decoration: none;
  border: none;
  outline: none;
  padding: 20px 95px 20px 70px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-on-dark);
  transition: 0.4s ease all;
  border-radius: 6px;
  position: relative;
}

.btn {
  background: var(--c-accent);
  box-shadow: 0px 12px 36px rgba(76,199,36,0.56);
}

.btn:before {
  content: '';
  display: block;
  position: absolute;
  right: 63px;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(255,255,255,0.24);
}

.btn .svg-icon {
  width: 12px;
  height: 12px;
  fill: #fff;
  position: absolute;
  right: 26px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.btn:hover {
  box-shadow: 0px 0 12px rgba(76,199,36,0.56);
}

.b-lk {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  transition: 0.4s ease all;
}

.b-lk .svg-icon {
  margin-left: 10px;
  width: 12px;
  height: 14px;
  clip-rule: evenodd;
  fill-rule: evenodd;
}

input,
select,
textarea {
  height: 38px;
  border: none;
  outline: none;
  border-bottom: 1px solid var(--border);
  padding: 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 16px;
  color: var(--c-faint);
  font-family: 'Montserrat', sans-serif;
  background: transparent;
  width: 100%;
  transition: 0.4s ease all;
}

input:hover,
select:hover,
textarea:hover {
  border-bottom-color: #6b809f;
}

textarea {
  height: auto;
}

.b-check {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: start;
      align-items: flex-start;
  position: relative;
}

.b-check input {
  position: absolute;
  opacity: 0;
  width: auto !important;
}

.b-check input:checked ~ .b-check__block {
  background-color: var(--c-accent);
}

.b-check input:checked ~ .b-check__block:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  left: 50%;
  top: 50%;
  -webkit-transform: rotate(40deg) translate(-100%, -30%);
          transform: rotate(40deg) translate(-100%, -30%);
}

.b-check input:checked ~ .b-check__text {
  color: var(--c-accent);
}

.b-check__block {
  margin-right: 16px;
  width: 16px;
  height: 16px;
  position: relative;
  background: #fff;
  box-shadow: inset 0 0 0 1px #4cc724;
  border-radius: 3px;
  transition: 0.4s ease all;
}

.b-check__text {
  font-size: 14px;
  line-height: 16px;
  -ms-flex: 1 1;
      flex: 1 1;
  transition: 0.4s ease all;
}

.b-check__text a {
  color: var(--c-accent);
  text-decoration: underline;
}

.b-check__text a:hover {
  color: var(--c-accent-dark);
}

label {
  cursor: pointer;
}

/* ==== Типографическая шкала заголовков (единый источник размеров) ==== */
:root {
  --fs-display: 44px; /* H1 — заголовок первого экрана */
  --fs-h2: 36px;      /* заголовок секции */
  --fs-h3: 24px;      /* подзаголовок внутри секции */
  --fs-h4: 20px;      /* заголовок карточки/пункта */
  --fs-h5: 18px;
  --fs-h6: 16px;
  --fw-heading: 600;  /* единый вес всех заголовков */

  /* ==== Цветовые токены ==== */
  --c-heading: #1f2d3d;  /* заголовки — тёмный навигационный */
  --c-text:    #4a5a6e;  /* основной текст/описания — средний слейт, читаемый но не чёрный */
  --c-muted:   #6b809f;  /* второстепенный текст: подписи, мета, ноуты */
  --c-faint:   #9fafbd;  /* совсем тихое: плейсхолдеры */
  --c-accent:      #4cc724;  /* фирменный зелёный — только акцент */
  --c-accent-dark: #3fb01d;  /* зелёный для hover/нажатий */
  --c-error:       #ff4f4f;  /* ошибки/валидация */
  --c-on-dark:     #ffffff;  /* текст на тёмном/цветном фоне */

  /* ==== Шкала отступов (margin/padding/gap блоков) ==== */
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-56:  56px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-96:  96px;
  --sp-120: 120px;
  --sp-160: 160px;

  /* ==== Поверхности и границы ==== */
  --bg-soft:  #f1f3f6;                  /* светлый фон секций */
  --bg-dark:  #1c2736;                  /* тёмные секции */
  --border:   rgba(107,128,159,0.16);  /* бордер карточек/хайрлайны */
  /* акцентный фон/бордер = var(--c-accent) #4cc724 */
}

@media (max-width: 768px) {
  :root {
    --fs-display: 32px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --fs-h4: 18px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--fw-heading);
  line-height: 1.25;
}

h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  color: var(--c-accent);
}

h1 {
  font-size: var(--fs-display);
}

h2 {
  font-size: var(--fs-h2);
  margin: 0 0 48px;
}

h3 {
  font-size: var(--fs-h3);
  margin: 0 0 24px;
}

h4 {
  font-size: var(--fs-h4);
}

h5 {
  font-size: var(--fs-h5);
}

h6 {
  font-size: var(--fs-h6);
}

.b-advantages {
  -ms-flex: none;
      flex: none;
  text-align: center;
  padding-bottom: var(--sp-96);
}

.b-advantages__title {
  font-size: var(--fs-h2);
  line-height: 1.25;
  color: var(--c-heading);
  max-width: 680px;
  margin: 0 auto var(--sp-96);
}

.b-advantages__title span {
  color: var(--c-accent);
}

.b-advantages__block {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.b-advantages__item {
  width: 22.4%;
  margin-bottom: var(--sp-64);
}

.b-advantages__item-number {
  height: 80px;
  font-weight: 600;
  font-size: 64px;
  line-height: 40px;
  color: var(--c-accent);
  margin-bottom: 4px;
  background: url("../img/adv_pic.svg") 50% 0 no-repeat;
}

.b-advantages__item-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--c-accent);
  min-height: 52px;
}

.b-advantages__item-text {
  font-size: 14px;
  line-height: 24px;
  color: var(--c-text);
}

.b-block {
  -ms-flex: none;
      flex: none;
  margin-bottom: 144px;
  text-align: center;
}

.b-block__title {
  text-align: center;
  margin: 0 auto var(--sp-64);
  max-width: 630px;
  color: var(--c-heading);
}

.b-block__inner {
  display: -ms-flexbox;
  display: flex;
  background: #fff;
  box-shadow: 0px 10px 42px rgba(0,0,0,0.12);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin: 0 -16px;
  -webkit-overflow-scrolling: touch;
}

.b-block__part {
  width: 50%;
  position: relative;
}

.b-block__part--image {
  display: -ms-flexbox;
  display: flex;
  min-height: 640px;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-direction: column;
      flex-direction: column;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.b-block__part--info {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}

.b-block__info {
  -ms-flex: 1 0 auto;
      flex: 1 0 auto;
  padding: 24px 104px;
}

.b-block__info-title {
  font-size: 30px;
  line-height: 40px;
  color: var(--c-muted);
  margin-bottom: var(--sp-32);
}

.b-block__text {
  font-size: 16px;
  line-height: 24px;
  color: var(--c-faint);
  margin-bottom: var(--sp-96);
}

.b-block__header {
  margin-bottom: var(--sp-56);
  font-size: 12px;
  line-height: 16px;
  color: var(--c-faint);
}

.b-block__header a {
  text-decoration: underline;
}

.b-block__header a:hover {
  text-decoration: none;
}

.b-block__percent-text {
  font-size: 24px;
  line-height: 48px;
  color: var(--c-on-dark);
  min-width: 200px;
  text-align: left;
  margin-top: -150px;
}

.b-block__button {
  height: 88px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  background: var(--c-accent);
  border-radius: 0px 0px 6px 0px;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-on-dark);
}

.b-block__button .svg-icon {
  width: 20px;
  height: 20px;
  margin-left: 24px;
}

.b-block__icons {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.b-block__icons-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  position: relative;
  margin-bottom: var(--sp-48);
}

.b-block__icons-item + .b-block__icons-item:before {
  content: '';
  display: block;
  position: absolute;
  right: 100%;
  top: 50%;
  height: 32px;
  margin-top: -16px;
  margin-right: 20%;
  border-left: 1px solid var(--border);
}

.b-block__icons-content {
  -ms-flex: 1 1;
      flex: 1 1;
  font-size: 24px;
  line-height: 1;
  color: var(--c-accent);
}

.b-block__icons-note {
  font-size: 12px;
  color: var(--c-accent);
  opacity: 0.64;
}

.b-block__icon {
  width: 64px;
  height: 64px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  margin-right: 16px;
}

.b-block__close {
  position: absolute;
  right: 26px;
  top: 26px;
  color: var(--c-error);
  line-height: 0;
  font-size: 0;
}

.b-block__close .svg-icon {
  width: 12px;
  height: 12px;
}

.b-block__frame iframe {
  width: 100%;
  height: 640px;
}

.b-compare {
  -ms-flex: none;
      flex: none;
}

.b-compare + .b-work {
  border-top-right-radius: 0;
}

.b-compare__title {
  max-width: 550px;
  margin: 0 auto var(--sp-80);
  text-align: center;
  color: var(--c-heading);
}

.b-compare__content {
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.b-compare__vs {
  position: absolute;
  font-weight: 800;
  font-size: 96px;
  line-height: 104px;
  color: rgba(107,128,159,0.16);
  left: 15px;
  top: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  pointer-events: none;
}

.b-compare__item {
  -ms-flex: 1 1;
      flex: 1 1;
  padding-right: 48px;
  padding-bottom: var(--sp-56);
}

.b-compare__item + .b-compare__item {
  border-left: 1px solid var(--border);
  padding-left: 48px;
}

.b-compare__item-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--c-heading);
}

.b-compare__item-number {
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
}

.b-compare__item-text {
  font-size: 14px;
  line-height: 16px;
}

.b-compare__part--top {
  background: url("../img/comp1.svg") 50% 100% no-repeat;
}

.b-compare__part--top .b-compare__item {
  height: 342px;
}

.b-compare__part--top .b-compare__item--3 {
  padding-top: var(--sp-96);
}

.b-compare__part--top .b-compare__item--4 {
  padding-top: 150px;
}

.b-compare__part--bottom {
  color: var(--c-accent);
  background: var(--bg-dark) url("../img/comp2.svg") 50% 0 no-repeat;
}

.b-compare__part--bottom .b-compare__item {
  height: 413px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.b-compare__part--bottom .b-compare__item--3 {
  padding-bottom: var(--sp-80);
}

.b-compare__part--bottom .b-compare__item--4 {
  padding-bottom: 130px;
}

.b-conversion {
  -ms-flex: none;
      flex: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: var(--bg-soft);
  border-radius: 0px 144px 0px 0px;
  padding: 104px 0 157px;
  -webkit-overflow-scrolling: touch;
}

.b-conversion__block {
  min-height: 480px;
  position: relative;
  z-index: 1;
  padding-top: var(--sp-40);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
}

.b-conversion__title {
  max-width: 676px;
  margin: 0 auto 123px;
  color: var(--c-heading);
  text-align: center;
}

.b-conversion__item {
  position: relative;
}

.b-conversion__item-image {
  max-height: 100%;
}

.b-conversion__item-name {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--c-heading);
  margin-bottom: var(--sp-24);
}

.b-conversion__item-text {
  font-size: 14px;
  line-height: 24px;
  color: var(--c-text);
}

.b-conversion__item-content,
.b-conversion__item-image {
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  opacity: 0;
}

.b-conversion__item-percent {
  text-align: center;
  font-weight: bold;
  font-size: 32px;
  line-height: 39px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  color: var(--c-accent);
  position: relative;
  padding-top: var(--sp-40);
}

.b-conversion__item-percent span,
.b-conversion__item-percent:after {
  opacity: 0;
}

.b-conversion__item-percent:before,
.b-conversion__item-percent:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.b-conversion__item-percent:before {
  width: 12px;
  height: 12px;
  top: 0px;
  background: var(--bg-soft);
  border: 3px solid var(--c-accent);
  border-radius: 100%;
}

.b-conversion__item-percent:after {
  width: 1px;
  height: 24px;
  top: 12px;
  background: var(--c-accent);
  background: linear-gradient(0deg, rgba(76,199,36,0) 0%, var(--c-accent) 100%);
}

@-webkit-keyframes item-percent {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes item-percent {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes item-in {
  from {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
    opacity: 0;
  }

  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@keyframes item-in {
  from {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
    opacity: 0;
  }

  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

.b-customization {
  text-align: center;
  max-width: 862px;
  margin: 0 auto 166px;
}

.b-customization__title {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}

.b-customization__note {
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  color: var(--c-muted);
  margin-bottom: var(--sp-40);
}

.b-customization__text {
  font-size: 14px;
  line-height: 24px;
  color: var(--c-text);
  margin-bottom: var(--sp-32);
}

.b-customization__text span {
  color: var(--c-accent);
}

.b-customization__button {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  text-decoration: none;
  padding: 38px 128px;
  background: #fff;
  box-shadow: 0px 16px 42px rgba(0,0,0,0.08);
  border-radius: 18px;
  transition: 0.4s ease all;
}

.b-customization__button:hover {
  background-color: var(--bg-soft);
}

.b-filling {
  position: relative;
  z-index: 1;
}

.b-filling img {
  border-radius: 10px;
}

.b-filling img + img {
  margin-left: 30px;
}

.b-filling p {
  margin: 38px 0;
}

.b-filling__text h2 {
  color: var(--c-heading);
  font-size: 20px;
  line-height: 26px;
  margin: 44px 0 12px;
}

.b-filling__text h3 {
  color: var(--c-heading);
  font-size: 16px;
  line-height: 22px;
  margin: 28px 0 8px;
}

.b-filling__text ul {
  margin: 0 0 38px;
  padding-left: 22px;
}

.b-filling__text li {
  margin-bottom: 8px;
}

.b-filling__text {
  max-width: 1010px;
  padding-bottom: var(--sp-32);
}

.b-filling__footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-top: var(--sp-32);
  border-top: 1px solid var(--border);
}

.b-filling__link {
  -ms-flex-align: end;
      align-items: flex-end;
  -ms-flex-align: center;
      align-items: center;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: var(--c-accent);
}

.b-filling__link .svg-icon {
  width: 12px;
  height: 7px;
  margin-left: 8px;
}

.b-filling__soc {
  margin-right: 30px;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
}

.b-filling__soc a {
  margin-right: 8px;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.b-filling__soc .post-share-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.b-filling__soc .share-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-muted);
  margin-bottom: 10px;
}

.b-filling__soc .ya-share2__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.b-filling__soc .ya-share2__item {
  margin: 0 !important;
}

.b-filling__soc .ya-share2__badge {
  border-radius: 12px !important;
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.b-filling__soc .ya-share2__icon {
  width: 24px !important;
  height: 24px !important;
  background-size: 24px 24px !important;
}

.article-meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-24);
  justify-content: center;
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.2;
}

.article-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.article-meta__item .svg-icon {
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

.article-meta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.article-meta__icon-svg svg {
  width: 14px;
  height: 14px;
  fill: #6b809f;
  display: block;
}

.article-feedback {
  margin: 34px 0 20px;
}

.article-feedback__title {
  margin: 0 0 16px;
  font-size: 24px;
  line-height: 1.2;
  color: var(--c-heading);
}

.article-feedback__actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.article-feedback__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 18px;
  padding: 16px 26px;
  background: #fff;
  border: 2px solid var(--border);
  color: var(--c-heading);
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
}

.article-feedback__btn--yes {
  border-color: var(--c-accent);
  color: var(--c-accent-dark);
}

.article-feedback__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}

.b-filling__image {
  text-align: center;
  font-size: 0;
  line-height: 0;
  padding-bottom: var(--sp-32);
  margin-top: -270px;
}

.b-first {
  min-height: 800px;
  padding: 232px 0 270px;
  text-align: center;
  background: rgba(107,128,159,0.1);
  border-radius: 0px 0px 0px 144px;
  -ms-flex: none;
      flex: none;
  overflow: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.b-first:before,
.b-first:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  background: url("../img/first_bg.png") 0 100% no-repeat;
  width: 700px;
  height: 847px;
}

.b-first:before {
  left: 50%;
  margin-left: 400px;
}

.b-first:after {
  right: 50%;
  margin-right: 400px;
}

.b-first__content {
  position: relative;
  z-index: 2;
}

.b-first__title {
  font-size: var(--fs-display);
  line-height: 1.15;
  color: var(--c-heading);
  margin-bottom: 16px;
}
.b-second__title  {
    font-weight: 600;
  font-size: 28px;
  line-height: 48px;
  color: var(--c-muted);
  margin-bottom: 16px;
}
.b-first__text {
  font-size: 18px;
  line-height: 32px;
  color: var(--c-text);
  margin-bottom: var(--sp-48);
}

.b-first__link {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  font-size: 14px;
  line-height: 16px;
  color: var(--c-accent);
  margin-bottom: var(--sp-56);
}

.b-first__link .svg-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.b-first__tag {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--c-muted);
  padding: 8px 16px;
  background: var(--border);
  border-radius: 4px;
  margin-top: 16px;
  text-decoration: none;
}

.b-first__tag:after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: rgba(107,128,159,0.72);
  margin-left: 8px;
  border-radius: 4px;
}

.b-first--filling {
  min-height: 1px;
  padding-bottom: 244px;
}

.b-first--filling:before,
.b-first--filling:after {
  content: none;
}

.b-first--info {
  min-height: 1px;
  padding-bottom: 70px !important;
}

.b-first--info:before,
.b-first--info:after {
  content: none;
}

.b-first--info .b-path {
  padding-bottom: 16px;
}

.b-first--page {
  min-height: 1px;
  background-image: url("../img/first_bg1.png");
  background-position: 50% 100%;
  background-repeat: no-repeat;
  padding-bottom: 308px;
}

.b-first--page:before,
.b-first--page:after {
  content: none;
}

.b-first--page .b-first__title,
.b-first--page .b-first__text {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.b-first-pic {
  height: 580px;
  -ms-flex: none;
      flex: none;
  margin-left: -48px;
  background: url("../img/first_bg2.png") 50% 0 no-repeat;
}

.b-first--partners {
  min-height: 1px;
  padding-bottom: var(--sp-80);
}

.b-first--partners:before,
.b-first--partners:after {
  content: none;
}

.b-first--partners .b-first__title,
.b-first--partners .b-first__text {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.b-partners-cashback {
  -ms-flex: none;
      flex: none;
  position: relative;
  margin-top: -40px;
  margin-bottom: var(--sp-40);
}

.b-partners-cashback__badge {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 24px 60px rgba(76, 199, 36, 0.25);
  animation: b-partners-cashback-float 3s ease-in-out infinite;
}

.b-partners-cashback__badge:before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px dashed rgba(76, 199, 36, 0.35);
  animation: b-partners-cashback-spin 18s linear infinite;
}

.b-partners-cashback__icon {
  font-size: 32px;
  margin-bottom: 4px;
}

.b-partners-cashback__value {
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  color: var(--c-accent);
}

.b-partners-cashback__value span {
  font-size: 28px;
}

.b-partners-cashback__label {
  color: var(--c-muted);
  font-size: 14px;
  margin-top: 4px;
}

@keyframes b-partners-cashback-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes b-partners-cashback-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.b-form {
  -ms-flex: none;
      flex: none;
  background: var(--bg-soft);
  border-radius: 0px 144px;
  position: relative;
  overflow: hidden;
  z-index: 2;
  padding: 96px 0 120px;
  -webkit-overflow-scrolling: touch;
}

.b-form:before { display: none; }

/* Свёрстанные телефоны в форме (замена картинки phone.jpg) */
.b-form__phones {
  position: absolute;
  right: max(15px, calc((100% - 1246px) / 2 + 18px));
  top: 50%;
  transform: translateY(-50%);
  width: 340px;
  height: 420px;
  pointer-events: none;
  z-index: 0;
}
.b-phone {
  position: absolute;
  width: 170px;
  aspect-ratio: 0.475;
  border-radius: 30px;
  background: linear-gradient(150deg, #ffffff 0%, #e9edf2 100%);
  box-shadow: 0 40px 70px -28px rgba(31, 45, 61, 0.4), 0 12px 28px rgba(31, 45, 61, 0.1);
  padding: 9px;
}
.b-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 23px;
  background: #f7f9fb;
  box-shadow: inset 0 0 0 1px rgba(31, 45, 61, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.b-phone__notch {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  width: 44px;
  height: 8px;
  border-radius: 999px;
  background: rgba(31, 45, 61, 0.22);
  z-index: 2;
}
.b-phone__icon { width: 44%; height: auto; color: #4cc724; }
.b-phone--back {
  right: 4%;
  top: 4%;
  z-index: 1;
  animation: lfPhoneBack 4.2s ease-in-out infinite alternate;
}
.b-phone--front {
  left: 4%;
  bottom: 2%;
  z-index: 2;
  animation: lfPhoneFront 3.6s ease-in-out infinite alternate;
}
@keyframes lfPhoneBack { from { transform: rotate(8deg) translateY(9px); } to { transform: rotate(8deg) translateY(-9px); } }
@keyframes lfPhoneFront { from { transform: rotate(-15deg) translateY(9px); } to { transform: rotate(-15deg) translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
  .b-phone { animation: none; }
  .b-phone--back { transform: rotate(8deg); }
  .b-phone--front { transform: rotate(-15deg); }
}
@media (max-width: 1024px) {
  .b-form__phones { display: none; }
}

.b-form + .app-footer {
  box-shadow: 0 -150px 0 #1c2736;
}

.b-form__block {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  max-width: 976px;
}

.b-form__item {
  width: 47%;
  margin-bottom: var(--sp-40);
}

.b-form__item-title {
  font-size: 14px;
  line-height: 16px;
  margin-bottom: var(--sp-24);
  color: var(--c-heading);
}

.b-form__item-title span {
  color: var(--c-error);
}

.b-form__item-note {
  padding-top: 16px;
  color: var(--c-faint);
  font-size: 12px;
  line-height: 16px;
}

.b-form__item-note span {
  color: var(--c-error);
}

.b-form__title {
  margin: 0 0 48px;
  color: var(--c-heading);
}

.b-form__title span {
  display: block;
}

.b-form__agree {
  max-width: 630px;
  margin-bottom: var(--sp-64);
}

.b-form__err {
  display: none;
  color: var(--c-error);
  font-size: 13px;
  line-height: 1.35;
  margin-top: 10px;
}

.b-form__item.is-invalid .b-form__err,
.b-form__agree.is-invalid .b-form__err {
  display: block;
}

.b-form__item.is-invalid input {
  border-bottom-color: var(--c-error);
}

.b-form__agree.is-invalid .b-check__block {
  box-shadow: inset 0 0 0 1px var(--c-error);
}

.b-form__success {
  max-width: 560px;
  padding: 8px 0 8px;
}

.b-form__success-plane {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(76, 199, 36, 0.12);
  color: var(--c-accent);
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  margin-bottom: var(--sp-24);
}

.b-form__success-plane svg {
  width: 38px;
  height: 38px;
}

.b-form__success-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  line-height: 1.15;
  color: var(--c-heading);
  margin-bottom: var(--sp-16);
}

.b-form__success-text {
  font-size: 17px;
  line-height: 1.5;
  color: var(--c-text);
  max-width: 460px;
}

.b-info {
  -ms-flex: none;
      flex: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.b-info__content {
  padding-bottom: var(--sp-48);
}

.b-info__title {
  text-align: center;
  margin-bottom: var(--sp-32);
  color: var(--c-heading);
}

.b-info__items {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.b-info__block {
  position: relative;
  z-index: 1;
  padding-bottom: var(--sp-24);
}

.b-info__item {
  width: 24%;
}

.b-info__img {
  height: 250px;
  position: relative;
}

.b-info__img img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.b-info__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  border-radius: 50%;
  background: rgba(76, 199, 36, 0.12);
  color: var(--c-accent);
}

.b-info__icon svg {
  width: 44px;
  height: 44px;
}

.b-info__line {
  position: absolute;
  z-index: -1;
  top: 65px;
  left: 77px;
  width: 343px;
}

.b-info__text {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: var(--c-accent);
}

.b-hiw {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-20);
}

.b-hiw__card {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: start;
      align-items: flex-start;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  transition: .3s ease border-color, .3s ease box-shadow, .3s ease transform;
}

a.b-hiw__card:hover {
  border-color: rgba(76, 199, 36, 0.5);
  box-shadow: 0 12px 28px rgba(76, 199, 36, 0.12);
  transform: translateY(-4px);
}

.b-hiw__top {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-bottom: 18px;
}

.b-hiw__icon {
  width: 52px;
  height: 52px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  border-radius: 14px;
  background: rgba(76, 199, 36, 0.12);
  color: var(--c-accent);
}

.b-hiw__icon svg {
  width: 26px;
  height: 26px;
}

.b-hiw__num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: rgba(107, 128, 159, 0.25);
}

.b-hiw__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--c-heading);
  margin-bottom: 10px;
}

.b-hiw__text {
  font-size: 15px;
  line-height: 22px;
  color: var(--c-text);
}

@media (max-width: 1024px) {
  .b-hiw {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media screen and (max-width: 560px) {
  .b-hiw {
    grid-template-columns: 1fr;
  }
}

.b-instruction {
  margin: -270px auto 72px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 1;
  overflow: hidden;
  max-width: 1008px;
  -webkit-overflow-scrolling: touch;
}

.b-instruction__item {
  width: 50%;
  padding: 96px 20px 192px;
  position: relative;
  overflow: hidden;
  text-align: center;
  z-index: 1;
  transition: 0.4s ease all;
  -webkit-overflow-scrolling: touch;
}

.b-instruction__item:hover {
  background-color: var(--c-accent);
}

.b-instruction__item:hover .b-instruction__text,
.b-instruction__item:hover .b-instruction__label {
  color: var(--c-on-dark);
}

.b-instruction__item:nth-child(even) {
  border-left: 1px solid var(--border);
}

.b-instruction__item:nth-child(even) .b-instruction__number:before {
  left: auto;
  right: -12px;
  -webkit-transform: translateY(-50%) rotate(-180deg);
          transform: translateY(-50%) rotate(-180deg);
}

.b-instruction__number {
  width: 104px;
  height: 104px;
  background: #fff;
  box-shadow: 0px 12px 36px rgba(0,0,0,0.18);
  border-radius: 60px;
  margin: 0 auto var(--sp-48);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-direction: column;
      flex-direction: column;
  font-weight: bold;
  font-size: 48px;
  line-height: 1;
  color: var(--c-accent);
  position: relative;
}

.b-instruction__number:before {
  content: '';
  display: block;
  position: absolute;
  left: -12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: -1;
  width: 343px;
  height: 128px;
  background: url("../img/inst_number.svg") 0 0 no-repeat;
}

.b-instruction__number-text {
  font-weight: 600;
  font-size: 14px;
}

.b-instruction__text {
  font-size: 14px;
  line-height: 24px;
  color: var(--c-text);
  margin-bottom: var(--sp-24);
  display: inline-block;
  max-width: 320px;
  min-height: 72px;
  transition: 0.4s ease all;
}

.b-instruction__label {
  font-weight: bold;
  font-size: 24px;
  line-height: 24px;
  color: rgba(107,128,159,0.36);
  transition: 0.4s ease all;
}

.b-instruction__image {
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.b-instruction__image img {
  max-width: none;
}

.b-instruction__block {
  background: #fff;
  box-shadow: 0px 8px 18px rgba(0,0,0,0.16);
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: -15px;
  padding: 10px 12px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.b-instruction__block-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(180deg, var(--c-accent) -6.67%, #bdff68 100.41%);
  box-shadow: 0 0 0 5px rgba(86,204,42,0.46);
  border-radius: 16px;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  color: var(--c-on-dark);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}

.b-integration {
  -ms-flex: none;
      flex: none;
  margin: 120px 0;
}

.b-integration__content {
  padding: 0 15px;
}

.b-integration__title {
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}

.b-integration__note {
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
  color: var(--c-muted);
  margin-bottom: var(--sp-56);
}

.b-integration__item {
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 10px;
  transition: 0.4s ease all;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  opacity: 0.5;
}

.b-integration__item:hover {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
  opacity: 1;
}

.b-integration__slider {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: center;
      justify-content: center;
}

.b-links {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding-bottom: var(--sp-96);
}

/* Разделы инструкций: ровный ряд одинаковых ячеек под строкой поиска.
   Ширина совпадает с .b-first__search — композиция собрана по одной оси */
.b-links__nav {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
}

/* Блог: пять кнопок («Все статьи» + 4 категории) вместо четырёх разделов инструкций.
   Ширина та же, что у .b-first__search, — ряд остаётся на одной оси с поиском. */
.b-links__nav--blog {
  grid-template-columns: repeat(5, 1fr);
}

.b-links__nav-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-muted);
  text-decoration: none;
  text-align: center;
  transition: .3s ease background, .3s ease color, .3s ease border-color;
}

.b-links__nav-item-icon {
  width: 17px;
  height: 17px;
  color: var(--c-muted);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  transition: .3s ease color;
}

.b-links__nav-item:hover,
.b-links__nav-item.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-dark);
}

.b-links__nav-item:hover .b-links__nav-item-icon,
.b-links__nav-item.is-active .b-links__nav-item-icon {
  color: var(--c-on-dark);
}

@media (max-width: 767px) {
  .b-links__nav {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Блог: 5 кнопок в два столбца — последняя остаётся одна, растягиваем её на ряд */
  .b-links__nav--blog .b-links__nav-item:last-child {
    grid-column: span 2;
  }
}

.b-links__item {
  width: 48%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin-bottom: var(--sp-32);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
}

.b-links__item-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.b-links__item-icon {
  width: 44px;
  height: 44px;
  -ms-flex: none;
      flex: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  border-radius: 50%;
  background: #eaf7e4;
  color: #297512;
}

.b-links__item-icon svg {
  width: 22px;
  height: 22px;
}

.b-links__item-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--c-heading);
}

.b-links__link {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: 16px;
  /* Горизонтальный паддинг с отрицательным полем: текст остаётся на месте,
     но подложке при наведении есть куда лечь — иначе она липнет к тексту. */
  padding: var(--sp-20) 16px;
  margin: 0 -16px;
  border-top: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  transition: 0.25s ease background;
}

/* Ховер как у пунктов дропдауна в меню (та же анатомия «заголовок + описание +
   стрелка»): мягкая зелёная подложка, заголовок темнеет, стрелка выезжает вправо. */
.b-links__link:hover {
  background: #f4faf0;
}

/* На подложке #f4faf0 обычный --c-accent-dark даёт 2.7:1 — берём глубже (5.4:1). */
.b-links__link:hover .b-links__link-title {
  color: #297512;
}

.b-links__link:hover .b-links__link-arrow {
  -webkit-transform: translateX(4px);
          transform: translateX(4px);
}

.b-links__item-header + .b-links__link {
  border-top: none;
}

/* Заголовок был зелёным (--c-accent): на белом это контраст 2.2:1 при норме
   WCAG AA 4.5:1 — отсюда ощущение, что плитки «слабо читаются». Тёмный даёт 14:1,
   а зелёный остаётся акцентом наведения. */
.b-links__link-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-heading);
  margin-bottom: 4px;
  transition: 0.25s ease color;
}

.b-links__link-desc {
  font-size: 14px;
  line-height: 20px;
  color: var(--c-muted);
}

.b-links__link-arrow {
  -ms-flex: none;
      flex: none;
  width: 20px;
  height: 12px;
  color: var(--c-faint);
  transition: 0.25s ease transform, 0.25s ease color;
}

.b-links__link:hover .b-links__link-arrow {
  color: var(--c-accent);
}

.b-look {
  margin-top: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  counter-reset: look;
  display: -ms-flexbox;
  display: flex;
}

.b-look__content {
  -ms-flex: 1 1;
      flex: 1 1;
  max-width: 760px;
}

.b-look__item {
  position: relative;
  padding: var(--sp-40) 0;
  border-bottom: 1px solid var(--border);
}

.b-look__item:first-child {
  padding-top: 0;
}

.b-look__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.b-look__item:before {
  counter-increment: look;
  content: "Шаг " counter(look);
  display: inline-block;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: rgba(76,199,36,0.1);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 16px;
}

.b-look__item--note:before {
  content: none;
}

.b-look__item--note .b-look__title {
  font-size: 16px;
  color: var(--c-muted);
}

.b-look__title,
.b-look__text {
  padding-left: 0;
}

.b-look__title {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: var(--c-heading);
  margin-bottom: 16px;
  max-width: 720px;
}

.b-look__text {
  font-size: 16px;
  line-height: 28px;
  max-width: 720px;
  color: var(--c-text);
  margin-bottom: var(--sp-24);
}

.b-look__image {
  font-size: 0;
  line-height: 0;
}

.b-look__image img {
  border-radius: 8px;
  width: 100%;
  border: 1px solid var(--border);
}

.b-look__part {
  display: none;
}

.b-map {
  background: var(--bg-soft) url("../img/map-min.png") 50% 100% no-repeat;
  border-radius: 0px 0px 0px 144px;
  text-align: center;
  position: relative;
}

.b-map-wrapper {
  -ms-flex: none;
      flex: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Удалённый блок .b-laptop лежал ВНУТРИ этой обёртки с margin-top:-84px и нулевой
   высотой: из-за overflow:hidden он укорачивал обёртку, подрезая низ hero.
   Повторяем это псевдоэлементом. Вешать -84px на .b-facts нельзя — секция уезжает
   ПОД hero, и он закрашивает ей первую строку заголовка. */
.b-map-wrapper:after {
  content: '';
  display: block;
  margin-top: -84px;
}

.b-map.is-visible .b-map__user {
  -webkit-transform: translate(0);
          transform: translate(0);
  opacity: 1;
}

.b-map__user {
  z-index: 1;
  position: absolute;
  transition: 1s ease transform;
  opacity: 0;
}

.b-map__user--1 {
  -webkit-transform: translate(-200%, -670%);
          transform: translate(-200%, -670%);
}

.b-map__user--2 {
  -webkit-transform: translate(-1000%, 0);
          transform: translate(-1000%, 0);
}

.b-map__user--3 {
  -webkit-transform: translate(-500%, 1000%);
          transform: translate(-500%, 1000%);
}

.b-map__user--4 {
  -webkit-transform: translate(1000%, 0);
          transform: translate(1000%, 0);
}

.b-map__user--5 {
  -webkit-transform: translate(800%, 0);
          transform: translate(800%, 0);
}

.b-map__user--6 {
  -webkit-transform: translate(500%, 1000%);
          transform: translate(500%, 1000%);
}

.b-map__user--7 {
  -webkit-transform: translate(500%, 200%);
          transform: translate(500%, 200%);
}

.b-map__user--8 {
  -webkit-transform: translate(900%, -50%);
          transform: translate(900%, -50%);
}

.b-map__user--9 {
  -webkit-transform: translate(500%, 150%);
          transform: translate(500%, 150%);
}

.b-map__user-icon {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  z-index: 1;
}

.b-map__user-name {
  font-size: 16px;
  line-height: 24px;
  color: var(--c-muted);
  margin-bottom: 8px;
}

.b-map__user-text {
  font-size: 13px;
  line-height: 16px;
  color: rgba(107,128,159,0.64);
  margin-bottom: var(--sp-40);
}

.b-map__user-hide {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 100%;
  opacity: 0;
  transition: 0.4s ease all;
  z-index: 1;
}

.b-map__user-hide--visible {
  opacity: 1;
}

.b-map__user-visible {
  padding: 6px;
  border-radius: 50%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  position: relative;
}

.b-map__user-visible .b-map__cyrcle {
  background: transparent;
  box-shadow: none;
}

.b-map__user-visible .b-map__bar,
.b-map__user-visible .b-map__fill {
  border-color: transparent;
}

.b-map__user-visible img {
  width: 32px;
  border-radius: 50%;
}

.b-map__user-percent {
  margin-bottom: 4px;
  font-weight: 800;
  font-size: 36px;
  line-height: 40px;
  color: var(--c-muted);
}

.b-map__user-chance {
  font-size: 12px;
  line-height: 12px;
  color: rgba(107,128,159,0.72);
  max-width: 90px;
  display: inline-block;
}

.b-map__user-block {
  text-align: center;
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 50%;
  top: 50%;
  width: 320px;
  background: #fff;
  box-shadow: 0px 16px 32px rgba(107,128,159,0.16);
  border-radius: 6px;
  padding: 52px 45px 42px;
  pointer-events: none;
  opacity: 0;
  transition: 0.4s ease all;
}

.b-map__user:hover {
  z-index: 10;
}

.b-map__user:hover .b-map__user-hide {
  opacity: 1;
}

.b-map__user:hover .b-map__user-block {
  opacity: 1;
}

.b-map__cyrcle {
  margin: 0 auto;
  font-size: 174px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: var(--bg-soft);
  box-shadow: inset 0 0 0 7px #f1f3f6, inset 0 0 0 14px #fff;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}

.b-map__cyrcle-in {
  position: absolute;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-direction: column;
      flex-direction: column;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.b-map__cyrcle *,
.b-map__cyrcle *:before,
.b-map__cyrcle *:after {
  box-sizing: content-box;
}

.b-map__slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}

.b-map__bar,
.b-map__fill {
  position: absolute;
  border: 0.04em solid var(--bg-soft);
  width: 0.92em;
  height: 0.92em;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.b-map__block {
  margin: 0 auto;
  max-width: 800px;
  padding: 358px 0 164px;
}

.b-map__block > * {
  position: relative;
  z-index: 1;
}

.b-map__title {
  margin: 0 auto var(--sp-40);
  font-size: var(--fs-display);
  line-height: 1.15;
  color: var(--c-heading);
  max-width: 680px;
}

.b-map__text {
  margin-bottom: var(--sp-80);
  font-size: 18px;
  line-height: 32px;
  /* резерв под 4 строки: при подмене фолбэк→Montserrat блок не растёт и не сдвигает CTA (CLS) */
  min-height: 128px;
  color: var(--c-text);
  position: relative;
  z-index: 1;
}

.b-map__button {
  margin-bottom: var(--sp-24);
}

.b-map__note {
  font-size: 16px;
  line-height: 16px;
  color: rgba(107,128,159,0.64);
}

[data-percent="1"] .bar {
  -webkit-transform: rotate(3.6deg);
          transform: rotate(3.6deg);
}

[data-percent="2"] .bar {
  -webkit-transform: rotate(7.2deg);
          transform: rotate(7.2deg);
}

[data-percent="3"] .bar {
  -webkit-transform: rotate(10.8deg);
          transform: rotate(10.8deg);
}

[data-percent="4"] .bar {
  -webkit-transform: rotate(14.4deg);
          transform: rotate(14.4deg);
}

[data-percent="5"] .bar {
  -webkit-transform: rotate(18deg);
          transform: rotate(18deg);
}

[data-percent="6"] .bar {
  -webkit-transform: rotate(21.6deg);
          transform: rotate(21.6deg);
}

[data-percent="7"] .bar {
  -webkit-transform: rotate(25.2deg);
          transform: rotate(25.2deg);
}

[data-percent="8"] .bar {
  -webkit-transform: rotate(28.8deg);
          transform: rotate(28.8deg);
}

[data-percent="9"] .bar {
  -webkit-transform: rotate(32.4deg);
          transform: rotate(32.4deg);
}

[data-percent="10"] .bar {
  -webkit-transform: rotate(36deg);
          transform: rotate(36deg);
}

[data-percent="11"] .bar {
  -webkit-transform: rotate(39.6deg);
          transform: rotate(39.6deg);
}

[data-percent="12"] .bar {
  -webkit-transform: rotate(43.2deg);
          transform: rotate(43.2deg);
}

[data-percent="13"] .bar {
  -webkit-transform: rotate(46.8deg);
          transform: rotate(46.8deg);
}

[data-percent="14"] .bar {
  -webkit-transform: rotate(50.4deg);
          transform: rotate(50.4deg);
}

[data-percent="15"] .bar {
  -webkit-transform: rotate(54deg);
          transform: rotate(54deg);
}

[data-percent="16"] .bar {
  -webkit-transform: rotate(57.6deg);
          transform: rotate(57.6deg);
}

[data-percent="17"] .bar {
  -webkit-transform: rotate(61.2deg);
          transform: rotate(61.2deg);
}

[data-percent="18"] .bar {
  -webkit-transform: rotate(64.8deg);
          transform: rotate(64.8deg);
}

[data-percent="19"] .bar {
  -webkit-transform: rotate(68.4deg);
          transform: rotate(68.4deg);
}

[data-percent="20"] .bar {
  -webkit-transform: rotate(72deg);
          transform: rotate(72deg);
}

[data-percent="21"] .bar {
  -webkit-transform: rotate(75.6deg);
          transform: rotate(75.6deg);
}

[data-percent="22"] .bar {
  -webkit-transform: rotate(79.2deg);
          transform: rotate(79.2deg);
}

[data-percent="23"] .bar {
  -webkit-transform: rotate(82.8deg);
          transform: rotate(82.8deg);
}

[data-percent="24"] .bar {
  -webkit-transform: rotate(86.4deg);
          transform: rotate(86.4deg);
}

[data-percent="25"] .bar {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

[data-percent="26"] .bar {
  -webkit-transform: rotate(93.6deg);
          transform: rotate(93.6deg);
}

[data-percent="27"] .bar {
  -webkit-transform: rotate(97.2deg);
          transform: rotate(97.2deg);
}

[data-percent="28"] .bar {
  -webkit-transform: rotate(100.8deg);
          transform: rotate(100.8deg);
}

[data-percent="29"] .bar {
  -webkit-transform: rotate(104.4deg);
          transform: rotate(104.4deg);
}

[data-percent="30"] .bar {
  -webkit-transform: rotate(108deg);
          transform: rotate(108deg);
}

[data-percent="31"] .bar {
  -webkit-transform: rotate(111.6deg);
          transform: rotate(111.6deg);
}

[data-percent="32"] .bar {
  -webkit-transform: rotate(115.2deg);
          transform: rotate(115.2deg);
}

[data-percent="33"] .bar {
  -webkit-transform: rotate(118.8deg);
          transform: rotate(118.8deg);
}

[data-percent="34"] .bar {
  -webkit-transform: rotate(122.4deg);
          transform: rotate(122.4deg);
}

[data-percent="35"] .bar {
  -webkit-transform: rotate(126deg);
          transform: rotate(126deg);
}

[data-percent="36"] .bar {
  -webkit-transform: rotate(129.6deg);
          transform: rotate(129.6deg);
}

[data-percent="37"] .bar {
  -webkit-transform: rotate(133.2deg);
          transform: rotate(133.2deg);
}

[data-percent="38"] .bar {
  -webkit-transform: rotate(136.8deg);
          transform: rotate(136.8deg);
}

[data-percent="39"] .bar {
  -webkit-transform: rotate(140.4deg);
          transform: rotate(140.4deg);
}

[data-percent="40"] .bar {
  -webkit-transform: rotate(353deg);
          transform: rotate(353deg);
}

[data-percent="41"] .bar {
  -webkit-transform: rotate(147.6deg);
          transform: rotate(147.6deg);
}

[data-percent="42"] .bar {
  -webkit-transform: rotate(151.2deg);
          transform: rotate(151.2deg);
}

[data-percent="43"] .bar {
  -webkit-transform: rotate(154.8deg);
          transform: rotate(154.8deg);
}

[data-percent="44"] .bar {
  -webkit-transform: rotate(158.4deg);
          transform: rotate(158.4deg);
}

[data-percent="45"] .bar {
  -webkit-transform: rotate(162deg);
          transform: rotate(162deg);
}

[data-percent="46"] .bar {
  -webkit-transform: rotate(165.6deg);
          transform: rotate(165.6deg);
}

[data-percent="47"] .bar {
  -webkit-transform: rotate(169.2deg);
          transform: rotate(169.2deg);
}

[data-percent="48"] .bar {
  -webkit-transform: rotate(172.8deg);
          transform: rotate(172.8deg);
}

[data-percent="49"] .bar {
  -webkit-transform: rotate(176.4deg);
          transform: rotate(176.4deg);
}

[data-percent="50"] .bar {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

[data-percent="51"] .bar {
  -webkit-transform: rotate(183.6deg);
          transform: rotate(183.6deg);
}

[data-percent="52"] .bar {
  -webkit-transform: rotate(187.2deg);
          transform: rotate(187.2deg);
}

[data-percent="53"] .bar {
  -webkit-transform: rotate(190.8deg);
          transform: rotate(190.8deg);
}

[data-percent="54"] .bar {
  -webkit-transform: rotate(194.4deg);
          transform: rotate(194.4deg);
}

[data-percent="55"] .bar {
  -webkit-transform: rotate(198deg);
          transform: rotate(198deg);
}

[data-percent="56"] .bar {
  -webkit-transform: rotate(201.6deg);
          transform: rotate(201.6deg);
}

[data-percent="57"] .bar {
  -webkit-transform: rotate(205.2deg);
          transform: rotate(205.2deg);
}

[data-percent="58"] .bar {
  -webkit-transform: rotate(208.8deg);
          transform: rotate(208.8deg);
}

[data-percent="59"] .bar {
  -webkit-transform: rotate(212.4deg);
          transform: rotate(212.4deg);
}

[data-percent="60"] .bar {
  -webkit-transform: rotate(216deg);
          transform: rotate(216deg);
}

[data-percent="61"] .bar {
  -webkit-transform: rotate(219.6deg);
          transform: rotate(219.6deg);
}

[data-percent="62"] .bar {
  -webkit-transform: rotate(223.2deg);
          transform: rotate(223.2deg);
}

[data-percent="63"] .bar {
  -webkit-transform: rotate(226.8deg);
          transform: rotate(226.8deg);
}

[data-percent="64"] .bar {
  -webkit-transform: rotate(230.4deg);
          transform: rotate(230.4deg);
}

[data-percent="65"] .bar {
  -webkit-transform: rotate(234deg);
          transform: rotate(234deg);
}

[data-percent="66"] .bar {
  -webkit-transform: rotate(237.6deg);
          transform: rotate(237.6deg);
}

[data-percent="67"] .bar {
  -webkit-transform: rotate(241.2deg);
          transform: rotate(241.2deg);
}

[data-percent="68"] .bar {
  -webkit-transform: rotate(244.8deg);
          transform: rotate(244.8deg);
}

[data-percent="69"] .bar {
  -webkit-transform: rotate(248.4deg);
          transform: rotate(248.4deg);
}

[data-percent="70"] .bar {
  -webkit-transform: rotate(252deg);
          transform: rotate(252deg);
}

[data-percent="71"] .bar {
  -webkit-transform: rotate(255.6deg);
          transform: rotate(255.6deg);
}

[data-percent="72"] .bar {
  -webkit-transform: rotate(259.2deg);
          transform: rotate(259.2deg);
}

[data-percent="73"] .bar {
  -webkit-transform: rotate(262.8deg);
          transform: rotate(262.8deg);
}

[data-percent="74"] .bar {
  -webkit-transform: rotate(266.4deg);
          transform: rotate(266.4deg);
}

[data-percent="75"] .bar {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}

[data-percent="76"] .bar {
  -webkit-transform: rotate(273.6deg);
          transform: rotate(273.6deg);
}

[data-percent="77"] .bar {
  -webkit-transform: rotate(277.2deg);
          transform: rotate(277.2deg);
}

[data-percent="78"] .bar {
  -webkit-transform: rotate(280.8deg);
          transform: rotate(280.8deg);
}

[data-percent="79"] .bar {
  -webkit-transform: rotate(284.4deg);
          transform: rotate(284.4deg);
}

[data-percent="80"] .bar {
  -webkit-transform: rotate(288deg);
          transform: rotate(288deg);
}

[data-percent="81"] .bar {
  -webkit-transform: rotate(291.6deg);
          transform: rotate(291.6deg);
}

[data-percent="82"] .bar {
  -webkit-transform: rotate(295.2deg);
          transform: rotate(295.2deg);
}

[data-percent="83"] .bar {
  -webkit-transform: rotate(298.8deg);
          transform: rotate(298.8deg);
}

[data-percent="84"] .bar {
  -webkit-transform: rotate(302.4deg);
          transform: rotate(302.4deg);
}

[data-percent="85"] .bar {
  -webkit-transform: rotate(306deg);
          transform: rotate(306deg);
}

[data-percent="86"] .bar {
  -webkit-transform: rotate(309.6deg);
          transform: rotate(309.6deg);
}

[data-percent="87"] .bar {
  -webkit-transform: rotate(313.2deg);
          transform: rotate(313.2deg);
}

[data-percent="88"] .bar {
  -webkit-transform: rotate(316.8deg);
          transform: rotate(316.8deg);
}

[data-percent="89"] .bar {
  -webkit-transform: rotate(320.4deg);
          transform: rotate(320.4deg);
}

[data-percent="90"] .bar {
  -webkit-transform: rotate(324deg);
          transform: rotate(324deg);
}

[data-percent="91"] .bar {
  -webkit-transform: rotate(327.6deg);
          transform: rotate(327.6deg);
}

[data-percent="92"] .bar {
  -webkit-transform: rotate(331.2deg);
          transform: rotate(331.2deg);
}

[data-percent="93"] .bar {
  -webkit-transform: rotate(334.8deg);
          transform: rotate(334.8deg);
}

[data-percent="94"] .bar {
  -webkit-transform: rotate(338.4deg);
          transform: rotate(338.4deg);
}

[data-percent="95"] .bar {
  -webkit-transform: rotate(342deg);
          transform: rotate(342deg);
}

[data-percent="96"] .bar {
  -webkit-transform: rotate(345.6deg);
          transform: rotate(345.6deg);
}

[data-percent="97"] .bar {
  -webkit-transform: rotate(349.2deg);
          transform: rotate(349.2deg);
}

[data-percent="98"] .bar {
  -webkit-transform: rotate(352.8deg);
          transform: rotate(352.8deg);
}

[data-percent="99"] .bar {
  -webkit-transform: rotate(356.4deg);
          transform: rotate(356.4deg);
}

[data-percent="100"] .bar {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

[data-percent="51"] .fill,
[data-percent="52"] .fill,
[data-percent="53"] .fill,
[data-percent="54"] .fill,
[data-percent="55"] .fill,
[data-percent="56"] .fill,
[data-percent="57"] .fill,
[data-percent="58"] .fill,
[data-percent="59"] .fill,
[data-percent="60"] .fill,
[data-percent="61"] .fill,
[data-percent="62"] .fill,
[data-percent="63"] .fill,
[data-percent="64"] .fill,
[data-percent="65"] .fill,
[data-percent="66"] .fill,
[data-percent="67"] .fill,
[data-percent="68"] .fill,
[data-percent="69"] .fill,
[data-percent="70"] .fill,
[data-percent="71"] .fill,
[data-percent="72"] .fill,
[data-percent="73"] .fill,
[data-percent="74"] .fill,
[data-percent="75"] .fill,
[data-percent="76"] .fill,
[data-percent="77"] .fill,
[data-percent="78"] .fill,
[data-percent="79"] .fill,
[data-percent="80"] .fill,
[data-percent="81"] .fill,
[data-percent="82"] .fill,
[data-percent="83"] .fill,
[data-percent="84"] .fill,
[data-percent="85"] .fill,
[data-percent="86"] .fill,
[data-percent="87"] .fill,
[data-percent="88"] .fill,
[data-percent="89"] .fill,
[data-percent="90"] .fill,
[data-percent="91"] .fill,
[data-percent="92"] .fill,
[data-percent="93"] .fill,
[data-percent="94"] .fill,
[data-percent="95"] .fill,
[data-percent="96"] .fill,
[data-percent="97"] .fill,
[data-percent="98"] .fill,
[data-percent="99"] .fill,
[data-percent="100"] .fill {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

[data-percent="51"] .slice,
[data-percent="52"] .slice,
[data-percent="53"] .slice,
[data-percent="54"] .slice,
[data-percent="55"] .slice,
[data-percent="56"] .slice,
[data-percent="57"] .slice,
[data-percent="58"] .slice,
[data-percent="59"] .slice,
[data-percent="60"] .slice,
[data-percent="61"] .slice,
[data-percent="62"] .slice,
[data-percent="63"] .slice,
[data-percent="64"] .slice,
[data-percent="65"] .slice,
[data-percent="66"] .slice,
[data-percent="67"] .slice,
[data-percent="68"] .slice,
[data-percent="69"] .slice,
[data-percent="70"] .slice,
[data-percent="71"] .slice,
[data-percent="72"] .slice,
[data-percent="73"] .slice,
[data-percent="74"] .slice,
[data-percent="75"] .slice,
[data-percent="76"] .slice,
[data-percent="77"] .slice,
[data-percent="78"] .slice,
[data-percent="79"] .slice,
[data-percent="80"] .slice,
[data-percent="81"] .slice,
[data-percent="82"] .slice,
[data-percent="83"] .slice,
[data-percent="84"] .slice,
[data-percent="85"] .slice,
[data-percent="86"] .slice,
[data-percent="87"] .slice,
[data-percent="88"] .slice,
[data-percent="89"] .slice,
[data-percent="90"] .slice,
[data-percent="91"] .slice,
[data-percent="92"] .slice,
[data-percent="93"] .slice,
[data-percent="94"] .slice,
[data-percent="95"] .slice,
[data-percent="96"] .slice,
[data-percent="97"] .slice,
[data-percent="98"] .slice,
[data-percent="99"] .slice,
[data-percent="100"] .slice {
  clip: rect(auto, auto, auto, auto);
}

.b-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

.b-path {
  padding-bottom: var(--sp-56);
  text-align: center;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  color: var(--c-muted);
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: center;
      justify-content: center;
}

.b-path a {
  color: inherit;
  text-decoration: none;
}

.b-path a:hover {
  text-decoration: underline;
}

.b-path .svg-icon {
  width: 4px;
  height: 8px;
  margin: 0 12px;
  fill: transparent;
  stroke: #6b809f;
}

/* Серая полоса во всю ширину экрана; контент внутри держит .site-width.
   flex: none обязателен — .app__wrapper это flex-column, иначе секцию сжимает
   до высоты паддингов и содержимое наезжает на блок ниже */
.b-questions-band {
  background: var(--bg-soft);
  padding: var(--sp-64) 0;
  -ms-flex: none;
      flex: none;
}

.b-questions {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--sp-56);
}

.b-questions__stepper {
  -ms-flex: none;
      flex: none;
  width: 560px;
  max-width: 100%;
}

.b-questions__body {
  -ms-flex: 1 1;
      flex: 1 1;
  min-width: 0;
}

.b-questions__title {
  margin-bottom: var(--sp-32);
  color: var(--c-heading);
}

.b-questions__text {
  font-size: 18px;
  line-height: 32px;
  color: var(--c-text);
  margin-bottom: var(--sp-64);
  max-width: 500px;
}

/* Степпер «Всего N вопросов» */
.b-stepper {
  background: #fff;
  border: 1px solid rgba(107,128,159,0.14);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(31,45,61,0.08);
}

.b-stepper__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 12px;
}

.b-stepper__count {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--c-heading);
  margin-bottom: 6px;
}

.b-stepper__note {
  font-size: 15px;
  color: var(--c-muted);
  margin-bottom: var(--sp-24);
}

.b-stepper__meta {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  font-size: 14px;
  color: var(--c-muted);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--border);
  margin-bottom: 12px;
}

.b-stepper__meta b {
  color: var(--c-heading);
  font-weight: 700;
}

.b-stepper__progress {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 14px;
  margin-bottom: var(--sp-24);
}

.b-stepper__progress-track {
  -ms-flex: 1 1;
      flex: 1 1;
  height: 10px;
  border-radius: 999px;
  background: #eceff3;
  overflow: hidden;
}

.b-stepper__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #5cd633 0%, #3fb01d 100%);
  width: var(--fill, 75%);
  animation: b-stepper-fill 1.4s cubic-bezier(.16,1,.3,1);
}

/* стартовое состояние — залито; анимация только «доезжает» до него,
   поэтому при reduced-motion/паузе линия остаётся видимой, а не пустой */
@keyframes b-stepper-fill {
  from {
    width: 0;
  }
}

.b-stepper__progress-value {
  -ms-flex: none;
      flex: none;
  font-size: 15px;
  font-weight: 800;
  color: var(--c-heading);
  min-width: 40px;
  text-align: right;
}

.b-stepper__dots {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  height: 34px;
  padding-top: var(--sp-24);
  border-top: 1px solid var(--border);
  margin-bottom: 14px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

/* серая линия-трек между крайними кружками */
.b-stepper__line,
.b-stepper__line-done {
  position: absolute;
  left: 17px;
  top: 41px;
  height: 2px;
  transform: translateY(-1px);
  z-index: 0;
}

.b-stepper__line {
  right: 17px;
  background: #e4e9ef;
}

/* зелёная линия — до текущего вопроса */
.b-stepper__line-done {
  width: calc((100% - 34px) * var(--done, 0));
  background: var(--c-accent);
  transform: translateY(-1px);
  transform-origin: left center;
  animation: b-stepper-line 1.4s cubic-bezier(.16,1,.3,1);
}

@keyframes b-stepper-line {
  from { transform: translateY(-1px) scaleX(0); }
}

.b-stepper__dot {
  position: relative;
  z-index: 1;
  -ms-flex: none;
      flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-faint);
}

.b-stepper__dot.is-done {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.b-stepper__dot.is-current {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-dark);
  box-shadow: 0 6px 16px rgba(76,199,36,0.35);
}

.b-stepper__dot svg {
  width: 16px;
  height: 16px;
}

.b-stepper__foot {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  font-size: 13px;
  color: var(--c-faint);
}

.b-stepper__foot-here {
  color: var(--c-accent);
  font-weight: 600;
}

.b-quiz {
  background: var(--bg-soft);
  border-radius: 0px 144px;
  -ms-flex: none;
      flex: none;
}

.b-quiz__content {
  position: relative;
  padding-top: var(--sp-48);
  padding-bottom: var(--sp-48);
  z-index: 1;
}

.b-quiz__image {
  position: absolute;
  left: -52px;
  right: 0;
  bottom: 0;
  font-size: 0;
  line-height: 0;
  pointer-events: none;
  z-index: -1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
}

/* иллюстрация отдаётся в 2x (1392px) — ограничиваем отображение для чёткости на ретине */
.b-quiz__image img {
  width: 550px;
  max-width: 60%;
  height: auto;
}

/* Парящие карточки (замена картинки в .b-quiz) */
.b-quizmock {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 5 / 4;
  margin-left: 52px;
}
.b-quizmock__c {
  position: absolute;
  width: 37%;
  aspect-ratio: 0.66;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 34px 60px -26px rgba(31, 45, 61, 0.35), 0 10px 24px rgba(31, 45, 61, 0.08);
}
.b-quizmock__c svg { width: 33%; height: auto; }
.b-quizmock__c--1 { left: 5%; top: 24%; background: #f4f5f7; color: #9aa4b2; z-index: 1; animation: lfCard1 3.4s ease-in-out infinite alternate; }
.b-quizmock__c--2 { left: 32%; top: 4%; background: #1c2736; color: #cfd6df; z-index: 2; animation: lfCard2 4s ease-in-out infinite alternate; }
.b-quizmock__c--3 { right: 3%; top: 22%; background: #4cc724; color: #fff; z-index: 3; box-shadow: 0 34px 60px -26px rgba(76, 199, 36, 0.4), 0 10px 24px rgba(31, 45, 61, 0.08); animation: lfCard3 3.6s ease-in-out infinite alternate; }
@keyframes lfCard1 { from { transform: rotate(-11deg) translateY(6px); } to { transform: rotate(-11deg) translateY(-8px); } }
@keyframes lfCard2 { from { transform: rotate(-3deg) translateY(6px); } to { transform: rotate(-3deg) translateY(-10px); } }
@keyframes lfCard3 { from { transform: rotate(11deg) translateY(6px); } to { transform: rotate(11deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .b-quizmock__c { animation: none; }
  .b-quizmock__c--1 { transform: rotate(-11deg); }
  .b-quizmock__c--2 { transform: rotate(-3deg); }
  .b-quizmock__c--3 { transform: rotate(11deg); }
}
@media (max-width: 900px) {
  .b-quizmock { margin-left: 0; }
}

.b-quiz__block {
  margin-left: auto;
  max-width: 632px;
  padding: 20px;
  background: rgba(241,243,246,0.5);
}

.b-quiz__text {
  font-size: 18px;
  color: var(--c-text);
  margin-bottom: var(--sp-48);
}

.b-quiz__title {
  margin-bottom: var(--sp-32);
  color: var(--c-heading);
}

.b-result {
  -ms-flex: none;
      flex: none;
  border-radius: 0px 0px 0px 64px;
  position: relative;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.b-result__item {
  padding: var(--sp-80) 0 var(--sp-96);
  background-color: var(--bg-dark);
  /* Скругление задаём самому фону: слайдер вешает transform на контейнер,
     из-за чего композитный слой выходит за скруглённый клип .b-result */
  border-radius: 0px 0px 0px 64px;
}

.b-result__content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.b-result__part {
  width: 48%;
}

.b-result__part--info {
  max-width: 490px;
}

.b-result__part--controls {
  max-width: 592px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}

/* Размер и вес задаём на классе, а не наследуем от тега: в слайдах 2–7 этот
   заголовок — <div> (семь одинаковых <h2> на странице дублировали друг друга),
   и вид не должен зависеть от того, h2 это или div. */
.b-result__title {
  margin-bottom: var(--sp-48);
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  line-height: 1.2;
  color: var(--c-on-dark);
}

.b-result__text {
  margin-bottom: 139px;
  font-weight: 500;
  font-size: 14px;
  line-height: 171%;
  color: rgba(255,255,255,0.72);
}

.b-result__button {
  margin-bottom: var(--sp-40);
}

.b-result__link {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  font-size: 14px;
  line-height: 114%;
  color: var(--c-accent);
  text-decoration: none;
}

.b-result__link .svg-icon {
  width: 24px;
  height: 20px;
  margin-right: 15px;
}

.b-result__header {
  margin-bottom: var(--sp-64);
}

.b-result__logo {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.b-result__logo-icon {
  margin-right: 32px;
  width: 72px;
  height: 72px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}

/* Логотип на непрозрачной подложке (JPEG) — приводим к тому же кругу,
   что у остальных клиентов, где круг «вшит» в прозрачный PNG */
.b-result__logo-icon--plate {
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
}

.b-result__logo-content {
  -ms-flex: 1 1;
      flex: 1 1;
}

.b-result__logo-text {
  font-size: 24px;
  line-height: 1;
  color: var(--c-on-dark);
  margin-bottom: 8px;
}

.b-result__logo-link {
  font-size: 16px;
  line-height: 150%;
  text-decoration: underline;
  color: var(--c-accent);
}

.b-result__logo-link:hover {
  text-decoration: none;
}

.b-result__block {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
  border-bottom: 1px solid rgba(255,255,255,0.24);
  -ms-flex-pack: center;
      justify-content: center;
  height: 260px;
  margin-top: auto;
}

.b-result__period {
  margin-top: 16px;
  text-align: center;
  color: rgba(255,255,255,0.76);
  font-size: 14px;
  line-height: 1.4;
}

.b-result__block-item {
  width: 40%;
  margin: 0 20px;
  max-width: 184px;
  border-radius: 4px 4px 0 0;
  position: relative;
}

/* «LeadForms в цифрах»: заголовок и одна строка с тремя числами.
   Раньше здесь были три карточки с кольцами и прогресс-барами, у которых
   проценты ничего не значили, — секция занимала экран ради трёх цифр. */
.b-facts {
  -ms-flex: none;
      flex: none;
  padding: var(--sp-64) 0 var(--sp-24);
}

.b-facts__content {
  text-align: center;
}

.b-facts__title {
  max-width: 760px;
  margin: 0 auto var(--sp-32);
  font-size: var(--fs-h2);
  color: var(--c-heading);
}

.b-facts__title-accent {
  color: var(--c-accent);
}

.b-facts__row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: baseline;
      align-items: baseline;
  gap: 12px 40px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--c-muted);
}

.b-facts__stat {
  white-space: nowrap;
}

.b-facts__num {
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  color: var(--c-heading);
}

.b-facts__sep {
  color: var(--c-faint);
  font-size: 22px;
}

@media screen and (max-width: 768px) {
  .b-facts {
    padding: var(--sp-40) 0 var(--sp-8);
  }

  .b-facts__title {
    margin-bottom: var(--sp-20);
  }

  .b-facts__row {
    gap: 8px 20px;
    font-size: 15px;
  }

  .b-facts__num {
    font-size: 26px;
  }

  /* на узком экране строка переносится — точки между цифрами только мешают */
  .b-facts__sep {
    display: none;
  }
}

.b-result__block-item--was {
  background: #6b809f;
}

.b-result__block-item--became {
  background: var(--c-accent);
}

.b-result__block-note {
  height: 76px;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}

.b-result__block-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: var(--sp-24);
  text-align: center;
  font-size: 13px;
  line-height: 16px;
  color: rgba(255,255,255,0.64);
}

.b-result__block-count {
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  color: var(--c-on-dark);
  margin-bottom: 4px;
}

.b-result__block-percent {
  height: 0;
  overflow: hidden;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  text-align: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: var(--c-on-dark);
  z-index: 1;
  transition: 1s ease-in-out all;
  transition-delay: 1.1s;
  border-bottom: 1px dashed rgba(144,255,0,0.56);
  -webkit-overflow-scrolling: touch;
}

.b-result__block-percent .svg-icon {
  width: 60px;
  height: 67px;
  position: absolute;
  left: 50%;
  top: 50%;
  fill: rgba(144,255,0,0.45);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
}

.b-result__block-percent.is-active {
  height: 273px;
}

.b-result .tns-controls {
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 144px;
  margin-left: 480px;
}

/* Точки-индикаторы слайдера кейсов: без них не видно, что слайдов несколько */
.b-result .tns-nav {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: var(--sp-32);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  gap: var(--sp-12);
}

.b-result .tns-nav button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  outline: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: .3s ease background, .3s ease transform;
}

.b-result .tns-nav button:hover {
  background: rgba(255, 255, 255, 0.72);
}

.b-result .tns-nav button.tns-nav-active {
  background: var(--c-accent);
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
}

.b-result__link--cases {
  margin-top: var(--sp-12);
}

/* Бейдж ниши — чтобы блок кейсов сканировался за секунду */
.b-result__badge {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: var(--sp-20);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-on-dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}


/* Вариант карточки с одной метрикой (когда нет данных было/стало) */
.b-result__block--single {
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  border-bottom: none;
}

.b-result__single {
  text-align: center;
  color: var(--c-on-dark);
}

.b-result__single-value {
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-accent);
  margin-bottom: var(--sp-12);
}

.b-result__single-label {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--sp-16);
}

.b-result__single-note {
  font-size: 15px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.72);
  max-width: 320px;
  margin: 0 auto;
}

.b-result .tns-controls > * {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255,255,255,0.36);
  border-radius: 50px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  margin-right: 16px;
  background-color: transparent;
}

.b-setting {
  margin-bottom: var(--sp-56);
  -ms-flex: none;
      flex: none;
}

.b-setting__title2 {
  text-align: center;
  max-width: 676px;
  margin: 0 auto var(--sp-96);
  color: var(--c-heading);
}

.b-setting__note {
  text-align: center;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}

.b-setting__title {
  margin-bottom: var(--sp-64);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
  color: var(--c-heading);
}

.b-setting__content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.b-setting__item {
  width: 48%;
  max-width: 510px;
  padding-left: 70px;
  position: relative;
  margin-bottom: var(--sp-56);
}

.b-setting__item-title {
  margin-bottom: var(--sp-24);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--c-heading);
}

.b-setting__item-text {
  color: var(--c-text);
}

.b-setting__icon {
  width: 36px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: start;
      align-items: flex-start;
  position: absolute;
  left: 0;
  top: 0;
}

.b-setting--why {
  margin-bottom: 0;
}

.b-steps {
  -ms-flex: none;
      flex: none;
  padding: 136px 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.b-steps:before,
.b-steps:after {
  content: '';
  z-index: -1;
  position: absolute;
  display: block;
}

.b-steps:before {
  background: url("../img/pic1.png") 100% 100% no-repeat;
  bottom: 200px;
  left: 0;
  right: 50%;
  top: 0;
  margin-right: 490px;
}

.b-steps:after {
  background: url("../img/pic2.png") 0 100% no-repeat;
  bottom: 0px;
  right: 0;
  left: 50%;
  top: 0;
  margin-left: 205px;
}

.b-steps__content:before {
  content: '';
  z-index: -1;
  position: absolute;
  display: block;
  background: url("../img/pic3.png") 0 0 no-repeat;
  top: 72px;
  right: 0;
  left: 50%;
  bottom: 0;
  margin-left: 348px;
}

.b-steps__block {
  margin-left: -32px;
  display: -ms-flexbox;
  display: flex;
}

.b-steps__part {
  margin-left: 32px;
  width: calc(33.33% - 32px);
}

.b-steps__part--third {
  padding-top: 160px;
}

.b-steps__item {
  background: rgba(107,128,159,0.06);
  border-radius: 8px;
  padding: 92px 40px 48px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin-bottom: var(--sp-32);
  transition: 0.4s ease all;
  -webkit-overflow-scrolling: touch;
}

.b-steps__item:hover {
  background: var(--c-accent);
  box-shadow: 0px 24px 56px rgba(76,199,36,0.56);
}

.b-steps__item:hover .b-steps__item-title {
  color: var(--c-on-dark);
}

.b-steps__item:hover .b-steps__number {
  color: rgba(255, 255, 255, 0.4);
}

.b-steps__item:hover .b-steps__text {
  color: rgba(255,255,255,0.72);
}

.b-steps__item:hover .b-steps__time {
  color: var(--c-on-dark);
}

.b-steps__item-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--c-heading);
  margin-bottom: var(--sp-24);
  transition: 0.4s ease all;
}

.b-steps__text {
  margin-bottom: var(--sp-56);
  font-size: 14px;
  line-height: 24px;
  color: var(--c-text);
  transition: 0.4s ease all;
}

.b-steps__time {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  font-size: 14px;
  line-height: 16px;
  color: var(--c-accent);
  transition: 0.4s ease all;
}

.b-steps__time .svg-icon {
  width: 11px;
  height: 13px;
  margin-right: 11px;
}

.b-steps__number {
  position: absolute;
  height: 88px;
  left: 40px;
  top: -28px;
  font-weight: 800;
  font-size: 72px;
  line-height: 88px;
  color: rgba(107,128,159,0.12);
  transition: 0.4s ease all;
}

.b-steps__title {
  margin-bottom: var(--sp-96);
  padding-top: var(--sp-24);
  color: var(--c-heading);
}

.b-tabs {
  -ms-flex: none;
      flex: none;
  padding: 96px 0 21px;
  position: relative;
  z-index: 1;
}

.b-tabs--list {
  padding-top: 0;
}

.b-tabs__title {
  text-align: center;
  color: var(--c-heading);
}

.b-tabs__text {
  width: 100%;
  text-align: center;
  margin-bottom: var(--sp-40);
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  color: var(--c-text);
}

.b-tabs__list {
  margin-bottom: var(--sp-80);
  position: relative;
}

.b-tabs__list-wrap {
  display: none;
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid var(--border);
  height: 64px;
  padding: 0 50px 0 20px;
  -ms-flex-align: center;
      align-items: center;
  position: relative;
  cursor: pointer;
}

.b-tabs__list-wrap .svg-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  fill: transparent;
  width: 10px;
  height: 10px;
  transition: 0.4s ease all;
}

.b-tabs__list-title {
  display: none;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}

.b-tabs__list-title.is-active {
  display: block;
}

.b-tabs__list-block {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: center;
      justify-content: center;
}

.b-tabs__list-item {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 23px 40px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  margin: 1px;
  cursor: pointer;
  box-shadow: 0 -1px 0 rgba(107,128,159,0.16) inset;
  transition: 0.4s ease all;
}

.b-tabs__list-item:hover,
.b-tabs__list-item.is-active {
  box-shadow: inset 0 -2px 0 #4cc724;
  color: var(--c-accent);
}

.b-tabs__item {
  display: none;
}

.b-tabs__item.is-active {
  display: block;
}

.b-tabs__block {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -32px;
}

.b-tabs__block .b-product {
  width: 33.33%;
  padding-left: 32px;
}

.b-tabs__block-more {
  padding-left: 32px;
  width: 100%;
  text-align: center;
  padding-bottom: var(--sp-80);
}

/* Контрол бывает и ссылкой (переход на /example), и кнопкой — стилизуем оба */
.b-tabs__block-more a,
.b-tabs__block-more button {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-accent);
  padding: 2px;
  border: none;
  background: none;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
}

.b-tabs__block-more a .svg-icon,
.b-tabs__block-more button .svg-icon {
  margin-left: 10px;
  width: 20px;
  height: 15px;
}

.b-tabs__block-more a:hover,
.b-tabs__block-more button:hover {
  text-decoration: underline;
}

.b-tabs--tariffs:before,
.b-tabs--tariffs:after {
  content: '';
  z-index: -1;
  position: absolute;
  display: block;
}

.b-tabs--tariffs:before {
  background: url("../img/pic1.png") 100% 100% no-repeat;
  bottom: 190px;
  left: 0;
  right: 50%;
  top: 0;
  margin-right: 490px;
}

.b-tabs--tariffs:after {
  background: url("../img/pic2.png") 0 100% no-repeat;
  bottom: -20px;
  right: 0;
  left: 50%;
  top: 0;
  margin-left: 205px;
}

/* Две группы тарифов подряд (/price): разделяем их, не раздувая отступ под
   одиночной группой на главной */
.b-tabs__content + .b-tabs__content {
  margin-top: var(--sp-32);
}

.b-tabs--tariffs .b-tabs__content:before {
  content: '';
  z-index: -1;
  position: absolute;
  display: block;
  background: url("../img/pic3.png") 0 0 no-repeat;
  top: 230px;
  right: 0;
  left: 50%;
  bottom: 0;
  margin-left: 348px;
}

.b-tabs--tariffs .b-tabs__block {
  margin-left: 0;
}

.b-product {
  margin-bottom: var(--sp-64);
}

.b-product.is-hide {
  display: none;
}

.b-product:hover .b-product__more {
  opacity: 1;
}

.b-product__image {
  display: block;
  height: 382px;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 6px;
  position: relative;
  margin-bottom: var(--sp-32);
  z-index: 1;
}

.b-product__more {
  border-radius: 6px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  text-align: center;
  background: rgba(0,0,0,0.64);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0;
  transition: 0.4s ease all;
}

.b-product__more .svg-icon {
  width: 19px;
  height: 19px;
  margin-left: 24px;
}

.b-product__label {
  display: -ms-flexbox;
  display: flex;
  padding: 8px 16px;
  -ms-flex-align: center;
      align-items: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--c-accent);
  background: #fff;
  border-radius: 0px 8px 0px 0px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.b-product__label:after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background: var(--c-accent);
  margin-left: 8px;
}

.b-product__text {
  margin-bottom: var(--sp-24);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  min-height: 48px;
}

.b-product__cta {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  color: var(--c-accent);
  font-size: 14px;
  line-height: 16px;
  text-decoration: none;
}

.b-product__cta .svg-icon {
  width: 12px;
  height: 12px;
  margin-left: 8px;
}

.b-product__time {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  font-size: 14px;
  line-height: 16px;
  color: var(--c-accent);
}

.b-product__time .svg-icon {
  width: 11px;
  height: 13px;
  margin-right: 11px;
}

.b-tariffs {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  /* было 96px — под карточками зияла пустота */
  margin-bottom: var(--sp-32);
  -webkit-overflow-scrolling: touch;
}

.b-tariffs__item {
  width: 400px;
  padding: 24px 68px;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: 0.4s ease all;
  -webkit-overflow-scrolling: touch;
}

.b-tariffs__item + .b-tariffs__item {
  border-left: 1px solid var(--border);
}

.b-tariffs__item:hover {
  background-color: #fff;
}

.b-tariffs__item:hover .b-tariffs__list {
  opacity: 0;
}

.b-tariffs__item:hover .b-tariffs__button {
  opacity: 1;
}

.b-tariffs__title {
  font-weight: 600;
  font-size: 24px;
  line-height: 24px;
  margin-bottom: 16px;
  color: var(--c-heading);
}

.b-tariffs__note {
  min-height: 73px;
  color: rgba(107,128,159,0.72);
}

.b-tariffs__number {
  font-weight: bold;
  font-size: 80px;
  line-height: 80px;
  color: var(--c-accent);
}

.b-tariffs__price {
  margin-bottom: var(--sp-48);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-accent);
}

.b-tariffs__list {
  text-align: left;
  padding-left: 24px;
  font-size: 14px;
  line-height: 16px;
  color: var(--c-text);
  padding-bottom: var(--sp-24);
  position: relative;
  transition: 0.4s ease all;
}

.b-tariffs__list:before {
  content: '';
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  left: 0px;
  top: 5px;
  background: var(--c-accent);
  border-radius: 100%;
}

.b-tariffs__image {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  font-size: 0;
  line-height: 0;
  z-index: -1;
}

.b-tariffs__label {
  position: absolute;
  width: 240px;
  height: 32px;
  left: -86px;
  top: 17px;
  background: var(--c-accent);
  border: 3px solid var(--c-accent);
  box-sizing: border-box;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  font-weight: 800;
  font-size: 9px;
  line-height: 16px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  text-align: center;
  -ms-flex-pack: center;
      justify-content: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-on-dark);
}

.b-tariffs__footer {
  position: relative;
}

.b-tariffs__button {
  position: absolute;
  left: 50%;
  top: 0;
  width: 320px;
  opacity: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

/* CTA-баннер «Честная система оплат» после тарифов на главной.
   Тёмная поверхность, а не зелёная: зелёный в проекте — акцент, а не фон блока */
.app__content--payoff {
  padding-top: var(--sp-32);
  padding-bottom: 0;
}

.b-payoff {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: var(--sp-40);
  padding: var(--sp-48);
  background: var(--bg-dark);
  border-radius: 6px;
}

.b-payoff__body {
  max-width: 560px;
}

.b-payoff__title {
  margin: 0 0 var(--sp-12);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--c-on-dark);
}

.b-payoff__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.b-payoff__aside {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  text-align: right;
}

.b-payoff__price {
  font-weight: bold;
  font-size: 56px;
  line-height: 1;
  color: var(--c-accent);
  white-space: nowrap;
}

.b-payoff__price span {
  font-size: 36px;
}

.b-payoff__unit {
  margin-top: var(--sp-8);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}

.b-payoff__button {
  margin-top: var(--sp-24);
}

@media (max-width: 900px) {
  .b-payoff {
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: start;
        align-items: flex-start;
    gap: var(--sp-24);
    padding: var(--sp-24);
  }

  .b-payoff__aside {
    width: 100%;
    text-align: left;
  }

  .b-payoff__price {
    font-size: 44px;
  }
}

/* Сравнительная таблица тарифов (/price) */
.b-plans {
  max-width: 1045px;
  margin: 0 auto;
  padding-bottom: var(--sp-56);
}

.b-plans__title {
  margin: 0 0 var(--sp-12);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--c-heading);
}

.b-plans__lead {
  margin: 0 0 var(--sp-24);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
}

.b-plans__summary {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: var(--sp-12);
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-weight: 600;
  font-size: 16px;
  color: var(--c-heading);
  cursor: pointer;
  list-style: none;
  transition: .2s ease background, .2s ease border-color;
}

/* убираем нативный треугольник — свой шеврон справа */
.b-plans__summary::-webkit-details-marker {
  display: none;
}

.b-plans__summary:hover {
  border-color: var(--c-accent);
}

.b-plans__summary-icon {
  width: 18px;
  height: 18px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--c-muted);
  transition: .2s ease transform;
}

.b-plans__details[open] .b-plans__summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.b-plans__details[open] .b-plans__summary-icon {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.b-plans__details[open] .b-table-wrap {
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 6px 6px;
}

.b-plans__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.45;
}

.b-plans__table th,
.b-plans__table td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-weight: 400;
  color: var(--c-text);
}

/* первая колонка — название функции, по левому краю */
.b-plans__table thead th:first-child,
.b-plans__table tbody th[scope="row"] {
  text-align: left;
  color: var(--c-heading);
}

.b-plans__table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  font-weight: 600;
  color: var(--c-heading);
}

.b-plans__group th {
  padding-top: var(--sp-20);
  text-align: left;
  background: var(--bg-soft);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.b-plans__table tbody tr:last-child th,
.b-plans__table tbody tr:last-child td {
  border-bottom: 0;
}

.b-plans__yes {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--c-accent);
}

.b-plans__yes svg {
  width: 100%;
  height: 100%;
}

.b-plans__paid {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  border-radius: 100%;
  background: var(--bg-soft);
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

.b-plans__note {
  margin: var(--sp-16) 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-muted);
}

@media (max-width: 767px) {
  .b-plans__table th,
  .b-plans__table td {
    padding: 12px 14px;
    font-size: 14px;
  }

  .b-plans__summary {
    font-size: 15px;
  }
}

/* Блок «Какой тариф вам подходит» — карточка-подсказка */
/* Отступы секции задаём явно: у .app__content они 70px/30px и дают перекос.
   Верхний убавлен, нижний целиком на margin'е блока — просветы равные */
.app__content--tarhelp {
  padding-top: var(--sp-48);
  padding-bottom: 0;
}

.b-tarhelp {
  max-width: 1045px;
  margin: 0 auto var(--sp-48);
  padding: var(--sp-48);
  background: var(--bg-dark);
  border-radius: 6px;
}

.b-tarhelp__title {
  margin: 0 0 var(--sp-32);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--c-on-dark);
}

.b-tarhelp__grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-20);
}

.b-tarhelp__item {
  padding: var(--sp-24);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 3px solid var(--c-accent);
  border-radius: 6px;
}

.b-tarhelp__head {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: center;
      align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-12);
}

.b-tarhelp__name {
  font-weight: var(--fw-heading);
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--c-on-dark);
}

.b-tarhelp__price {
  display: inline-block;
  padding: 4px 10px;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  color: #8ee360;
  background: rgba(76, 199, 36, 0.16);
  border-radius: 6px;
  white-space: nowrap;
}

.b-tarhelp__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 767px) {
  .b-tarhelp {
    padding: var(--sp-24);
  }

  .b-tarhelp__grid {
    grid-template-columns: 1fr;
  }
}

.b-text {
  max-width: 1045px;
  margin: 0 auto;
}

.b-text__title {
  padding-bottom: 0;
  margin-bottom: var(--sp-20);
  font-size: var(--fs-h2);
  line-height: 1.25;
  color: var(--c-heading);
}

.b-text__block {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Аккуратная типографика SEO-текста (структура h2/h3/h4 сохранена) */
.b-text__content,
.seo-content {
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-text);
  text-align: left;
}

.b-text__content h2,
.seo-content h2 {
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--c-heading);
  margin: 48px 0 16px;
}

.b-text__content h3,
.seo-content h3 {
  font-size: 23px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--c-heading);
  margin: 40px 0 14px;
}

.b-text__content h4,
.seo-content h4 {
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--c-heading);
  margin: 32px 0 12px;
}

.b-text__content > :first-child,
.seo-content > :first-child {
  margin-top: 0;
}

.b-text__content p,
.seo-content p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.b-text__content ul,
.b-text__content ol,
.seo-content ul,
.seo-content ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.b-text__content li,
.seo-content li {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.b-text__content li::marker,
.seo-content li::marker {
  color: var(--c-accent);
}

.b-text__content strong,
.b-text__content b,
.seo-content strong,
.seo-content b {
  color: var(--c-text);
  font-weight: 700;
}

.b-text__content a,
.seo-content a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color .2s ease;
}

.b-text__content a:hover,
.seo-content a:hover {
  color: var(--c-accent-dark);
}

.b-text__more {
  position: relative;
  border-top: 1px solid var(--border);
  z-index: 1;
  margin-top: var(--sp-40);
}

.b-text__more:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 184px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%);
  margin-bottom: var(--sp-40);
  transition: 0.4s ease all;
}

.b-text__more-link {
  position: absolute;
  width: 56px;
  height: 56px;
  left: 50%;
  top: 50%;
  padding: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50px;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: 0.4s ease all;
}

.b-text__more-link .svg-icon {
  width: 8px;
  height: 8px;
  fill: transparent;
}

.b-text__more.is-opened:before {
  height: 0;
}

.b-text__more.is-opened .b-text__more-link {
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}

.b-work {
  -ms-flex: none;
      flex: none;
  background: var(--bg-dark);
  border-radius: 0px 144px;
  padding: 45px 0 145px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.b-work:before {
  content: '';
  display: block;
  position: absolute;
  background: url("../img/screen2.jpg") 0 0 no-repeat;
  top: 0;
  bottom: 0;
  z-index: -1;
  right: 50%;
  left: 50%;
  margin-right: -272px;
  margin-left: -928px;
}

.b-work__content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.b-work__image {
  margin-bottom: var(--sp-96);
}

.b-work__part {
  width: 48%;
}

.b-work__part .b-work__part {
  width: 100% !important;
  padding-top: var(--sp-80);
}

.b-work__part--info {
  max-width: 488px;
  padding-top: var(--sp-96);
  margin-bottom: var(--sp-120);
}

.b-work__part--links {
  max-width: 592px;
}

.b-work__part--button {
  max-width: 488px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  -ms-flex-direction: column;
      flex-direction: column;
}

.b-work__part--image .b-work__tab {
  margin-left: -95px;
}

.b-work__part-text {
  margin-bottom: var(--sp-56);
  font-size: 18px;
  line-height: 178%;
  color: var(--c-on-dark);
}

.b-work__part-button {
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-weight: bold;
  font-size: 16px;
  line-height: 16px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  color: var(--c-accent);
  padding: 20px 0 20px 43px;
}

.b-work__button {
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  color: var(--c-on-dark);
  margin-bottom: 16px;
  text-align: left;
  text-decoration: none;
  padding: 20px 0 20px 24px;
  position: relative;
  transition: 0.4s ease all;
  border: none;
  background: none;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
}

.b-work__button:before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  left: 0px;
  top: calc(50% - 3px);
  position: absolute;
  background: var(--c-accent);
  border-radius: 50px;
  transition: 0.4s ease all;
}

.b-work__button:hover {
  background-color: var(--bg-dark);
}

.b-work__button:hover:before {
  width: 5px;
  height: 100%;
  top: 0;
  border-radius: 4px 0px 0px 4px;
}

.b-work__button.is-active {
  background: linear-gradient(90deg, rgba(76,199,36,0.16) 0%, rgba(76,199,36,0) 86.13%);
  border-radius: 4px 0px 0px 4px;
  text-decoration: none;
}

.b-work__button.is-active:before {
  width: 5px;
  height: 100%;
  top: 0;
  border-radius: 4px 0px 0px 4px;
}

.b-work__title {
  color: var(--c-on-dark);
  margin-bottom: var(--sp-56);
}

.b-work__title span {
  display: block;
}

.b-work__text {
  font-size: 14px;
  line-height: 24px;
  color: rgba(255,255,255,0.42);
}

.b-work__links {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-direction: column;
      flex-direction: column;
}

.b-work__link {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  font-size: 14px;
  line-height: 16px;
  color: var(--c-accent);
  text-decoration: none;
  margin-bottom: var(--sp-24);
}

.b-work__link .svg-icon {
  width: 12px;
  height: 12px;
  margin-left: 8px;
}

.b-work__tab {
  display: none;
}

.b-work__tab.is-active {
  display: block;
}

.b-work--page {
  padding-top: var(--sp-80);
}

.b-work--page:before {
  content: none;
}

.b-work--page .b-work__image {
  margin-bottom: var(--sp-40);
}

.b-work--page .b-work__image--fix {
  margin-top: var(--sp-40);
  margin-bottom: -80px;
}

.b-work--page .b-work__part--image .b-work__tab {
  margin: 0;
}

.b-work--page .b-work__part--info {
  margin-bottom: 0;
}

.b-work--page .b-work__part-text {
  margin: 0;
  max-width: 590px;
}

/* Тёмный блок «Пользуйтесь ресурсами сервиса» на /partners.
   Самостоятельный контейнер: не наследует от .b-work, поэтому его отступы
   правятся напрямую, без компенсации чужих значений. Внутренние элементы
   намеренно оставлены на общих .b-work__* — там же табы и их обработчик в JS. */
.pwork {
  -ms-flex: none;
      flex: none;
  background: var(--bg-dark);
  border-radius: 0px 144px 0 0;
  padding: var(--sp-96) 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.pwork .b-work__part--info {
  margin-bottom: 0;
}

.pwork .b-work__part .b-work__part {
  padding-top: var(--sp-40);
}

.pwork .b-work__image {
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .pwork {
    border-radius: 0px 0px 0px 40px;
    padding: var(--sp-48) 0;
  }
}

/* Знак бесконечности в россыпи монет — замена img/screen6.png */
.pinf {
  max-width: 380px;
  margin: 0 auto;
}

.pinf__svg {
  display: block;
  width: 100%;
  height: auto;
}

.pinf__sign {
  filter: drop-shadow(0 8px 24px rgba(34, 196, 14, 0.35));
}

.pinf__back,
.pinf__front {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

/* Веер банковских карт и комиссия — замена img/screen7.png */
.pfee {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 6px;
  max-width: 470px;
  margin: 0 auto;
  padding: 30px 0;
}

.pfee__fan {
  position: relative;
  -ms-flex: none;
      flex: none;
  width: 190px;
  height: 190px;
}

.pfee__card {
  position: absolute;
  top: 50%;
  left: 0;
  width: 172px;
  height: 108px;
  margin-top: -54px;
  border-radius: 10px;
  background: #2f3b4d;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
  transform-origin: 10% 88%;
}

.pfee__card--1 {
  background: -webkit-linear-gradient(315deg, #f4f6f8 0%, #cfd6de 55%, #eef1f4 100%);
  background: linear-gradient(135deg, #f4f6f8 0%, #cfd6de 55%, #eef1f4 100%);
  transform: rotate(-20deg);
  z-index: 6;
}

.pfee__card--2 {
  background: -webkit-linear-gradient(315deg, #2f6fd0 0%, #1d4c96 100%);
  background: linear-gradient(135deg, #2f6fd0 0%, #1d4c96 100%);
  transform: rotate(-8deg);
  z-index: 5;
}

.pfee__card--3 {
  background: -webkit-linear-gradient(315deg, #3fbf2c 0%, #23801a 100%);
  background: linear-gradient(135deg, #3fbf2c 0%, #23801a 100%);
  transform: rotate(6deg);
  z-index: 4;
}

.pfee__card--4 {
  background: -webkit-linear-gradient(315deg, #d94a4a 0%, #96262d 100%);
  background: linear-gradient(135deg, #d94a4a 0%, #96262d 100%);
  transform: rotate(20deg);
  z-index: 3;
}

.pfee__card--5 {
  background: -webkit-linear-gradient(315deg, #ffffff 0%, #d6dae0 100%);
  background: linear-gradient(135deg, #ffffff 0%, #d6dae0 100%);
  transform: rotate(34deg);
  z-index: 2;
}

.pfee__card--6 {
  background: -webkit-linear-gradient(315deg, #3b3f46 0%, #16181c 100%);
  background: linear-gradient(135deg, #3b3f46 0%, #16181c 100%);
  transform: rotate(48deg);
  z-index: 1;
}

.pfee__chip {
  position: absolute;
  top: 34px;
  left: 18px;
  width: 30px;
  height: 23px;
  border-radius: 5px;
  background: -webkit-linear-gradient(315deg, #f7dd9a 0%, #d0a13c 60%, #a97c25 100%);
  background: linear-gradient(135deg, #f7dd9a 0%, #d0a13c 60%, #a97c25 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 85, 20, 0.45);
}

.pfee__chip:before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(120, 85, 20, 0.5);
  box-shadow: 0 8px 0 0 rgba(120, 85, 20, 0.5);
}

.pfee__num {
  position: absolute;
  left: 18px;
  bottom: 26px;
  width: 118px;
  height: 8px;
  border-radius: 2px;
  background: rgba(70, 84, 104, 0.5);
  box-shadow: 0 14px 0 -2px rgba(70, 84, 104, 0.32);
}

.pfee__value {
  font-weight: 800;
  font-size: 128px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #6fdc4f;
  text-shadow: 0 10px 30px rgba(34, 196, 14, 0.3);
}

.pfee__pct {
  font-size: 0.42em;
  vertical-align: super;
  margin-left: 4px;
}

@media screen and (max-width: 1024px) {
  .pfee {
    padding: 10px 0;
  }

  .pfee__fan {
    width: 150px;
    height: 150px;
  }

  .pfee__card {
    width: 136px;
    height: 86px;
    margin-top: -43px;
  }

  .pfee__chip {
    top: 26px;
    left: 14px;
    width: 24px;
    height: 18px;
  }

  .pfee__num {
    left: 14px;
    bottom: 20px;
    width: 92px;
    height: 6px;
  }

  .pfee__value {
    font-size: 88px;
  }
}

.page-scroller {
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: fixed;
  z-index: 1050;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  background-color: rgba(76,199,36,0.1);
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  transition: opacity 0.16s linear;
  pointer-events: none;
}

.page-scroller__ctrl {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;
  fill: #666;
  width: 24px;
  height: 24px;
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
}

.page-scroller:hover,
.page-scroller:focus {
  background-color: rgba(76,199,36,0.12);
}

.page-scroller:active {
  background-color: rgba(76,199,36,0.14);
}

.page-scroller--memorized .page-scroller__ctrl {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.page-scroller--memorized,
.page-scroller--visible {
  opacity: 1;
  pointer-events: auto;
}

@-webkit-keyframes spinner {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spinner {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@media screen and (min-width: 1025px) {
  .app-header {
    -ms-flex: none;
        flex: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
  }

  .app-header.is-fixed {
    background-color: rgba(241,243,246,0.9);
    position: fixed;
    top: 0;
    z-index: 10;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
  }

  .app-header.is-fixed .app-header__part--top {
    height: 38px;
  }

  .app-header.is-fixed .app-header__menu a {
    padding: 11px 0;
  }

  /* «Создать квиз» — кнопка в шапке. «Личный кабинет» рядом остаётся текстовой
     ссылкой: так основное действие читается сразу. */
  .app-header__part--top .app-header__link {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    height: 40px;
    padding: 0 22px;
    border-radius: 6px;
    background: var(--c-accent);
    color: var(--c-on-dark);
    transition: 0.4s ease all;
  }

  .app-header__part--top .app-header__link:hover {
    background: var(--c-accent-dark);
  }

  .app-header__part--top .b-lk {
    margin-left: 32px;
  }

  /* При скролле панель ужимается с 92px до 38px — кнопка обязана ужаться вместе
     с ней, иначе не поместится. 30px оставляют по 4px воздуха сверху и снизу. */
  .app-header.is-fixed .app-header__part--top .app-header__link {
    height: 30px;
    padding: 0 16px;
    font-size: 14px;
  }

  .b-block__link {
    display: none;
  }

  .b-steps--page {
    padding-bottom: 180px;
  }

  .b-steps--page .b-steps__text {
    min-height: 152px;
    margin-bottom: 0;
    padding-bottom: 10px;
  }

  .b-steps--page .b-steps__item-title {
    min-height: 72px;
    margin-bottom: 0;
  }

  .b-steps--page .b-steps__title {
    margin-bottom: var(--sp-80);
    padding-top: 0;
  }

  .b-steps--page .b-steps__part--second {
    padding-top: var(--sp-96);
  }

  .b-steps--page .b-steps__part--third {
    padding-top: 0;
  }

  .b-steps--page .b-steps__content:before {
    margin-left: 528px;
    top: 122px;
  }

  .b-steps--page:before {
    bottom: 30px;
  }

  .b-steps--page:after {
    margin-left: -170px;
    bottom: -80px;
  }
}

@media screen and (min-width: 1281px) {
  .b-conversion.is-visible .b-conversion__item-percent span,
  .b-conversion.is-visible .b-conversion__item-percent:after {
    -webkit-animation-name: item-percent;
            animation-name: item-percent;
    /* Продолжительность анимации */
    -webkit-animation-duration: 0.6s;
            animation-duration: 0.6s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }

  .b-conversion.is-visible .b-conversion__item-image,
  .b-conversion.is-visible .b-conversion__item-content {
    -webkit-animation-name: item-in;
            animation-name: item-in;
    /* Продолжительность анимации */
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  .b-conversion.is-visible .b-conversion__graph {
    width: 112%;
  }

  .b-conversion__item--first {
    display: -ms-flexbox;
    display: flex;
    width: 40.2%;
    height: 255px;
    margin-right: 136px;
  }

  .b-conversion__item--first .b-conversion__item-image {
    width: 120px;
    font-size: 0;
    line-height: 0;
  }

  .b-conversion__item--first .b-conversion__item-content {
    -ms-flex: 1 1;
        flex: 1 1;
    padding-left: 88px;
  }

  .b-conversion__item--first .b-conversion__item-percent {
    position: absolute;
    left: 120px;
    top: 100%;
    margin-top: var(--sp-48);
  }

  .b-conversion__item--first .b-conversion__item-percent span,
  .b-conversion__item--first .b-conversion__item-percent:after {
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
  }

  .b-conversion__item--first .b-conversion__item-image,
  .b-conversion__item--first .b-conversion__item-content {
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
  }

  .b-conversion__item--second {
    width: 280px;
    margin-right: 33px;
  }

  .b-conversion__item--second .b-conversion__item-image {
    margin-bottom: var(--sp-32);
    height: 90px;
  }

  .b-conversion__item--second .b-conversion__item-percent {
    margin-bottom: var(--sp-32);
    max-width: 188px;
  }

  .b-conversion__item--second .b-conversion__item-percent span,
  .b-conversion__item--second .b-conversion__item-percent:after {
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s;
  }

  .b-conversion__item--second .b-conversion__item-image,
  .b-conversion__item--second .b-conversion__item-content {
    -webkit-animation-delay: 1.7s;
            animation-delay: 1.7s;
  }

  .b-conversion__item--third {
    width: 280px;
  }

  .b-conversion__item--third .b-conversion__item-image {
    height: 90px;
    text-align: right;
    padding-left: 100px;
  }

  .b-conversion__item--third .b-conversion__item-percent {
    margin-bottom: var(--sp-24);
    margin-top: -31px;
    max-width: 60px;
  }

  .b-conversion__item--third .b-conversion__item-percent span,
  .b-conversion__item--third .b-conversion__item-percent:after {
    -webkit-animation-delay: 2.2s;
            animation-delay: 2.2s;
  }

  .b-conversion__item--third .b-conversion__item-image,
  .b-conversion__item--third .b-conversion__item-content {
    -webkit-animation-delay: 2.3s;
            animation-delay: 2.3s;
  }

  .b-conversion__lines {
    background: url("../img/lines.svg") 0 50% repeat-y;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1;
    height: 480px;
  }

  .b-conversion__graph {
    position: absolute;
    left: -77px;
    width: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
    transition: 4s ease width;
    -webkit-overflow-scrolling: touch;
  }

  .b-conversion__graph img {
    width: 1353px;
    max-width: none;
  }
}

@media screen and (max-width: 1800px) {
  .b-first--page {
    border-radius: 0 !important;
  }
}

@media screen and (max-width: 1280px) {
  .app-header__soc a {
    margin-right: 20px;
  }

  .app-header__menu li {
    margin-left: 20px;
  }

  .b-block__inner {
    margin: 0;
  }

  .b-block__icons {
    display: block;
  }

  .b-block__icons-item {
    margin-bottom: var(--sp-20);
  }

  .b-block__icons-item:before {
    content: none !important;
  }

  .b-block__percent-text {
    margin-top: -120px;
  }

  .b-conversion__block {
    display: block;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 0 0 100px;
  }

  .b-conversion__item {
    margin: 0 0 40px;
    padding-top: var(--sp-40);
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
  }

  .b-conversion__item + .b-conversion__item {
    border-top: 2px solid var(--border);
  }

  .b-conversion__item-content {
    -ms-flex: 1 1;
        flex: 1 1;
  }

  .b-conversion__item-image {
    width: 170px;
    margin-right: 40px;
  }

  .b-conversion__item-percent {
    position: absolute;
    right: 100%;
    width: 100px;
    -ms-flex-pack: start;
        justify-content: flex-start;
    top: 50%;
    margin-top: var(--sp-20);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    padding: 0 0 0 10px;
    border-radius: 0 0 10px 0;
  }

  .b-conversion__item-percent:after {
    content: none;
  }

  .b-conversion__item-percent:before {
    left: 0;
    top: 50%;
    margin-top: -6px;
  }

  .b-conversion__graph {
    top: 45px;
    bottom: 45px;
    background: var(--c-accent);
    position: absolute;
    left: 0;
    right: 0;
  }

  .b-conversion__graph img {
    display: none;
  }

  .b-conversion__lines {
    width: 2px;
    position: absolute;
    left: -1px;
    overflow: hidden;
    top: 0;
    height: 0;
    transition: 4s ease height;
    -webkit-overflow-scrolling: touch;
  }

  .b-conversion__lines:before,
  .b-conversion__lines:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    background: var(--c-accent);
    height: 48px;
  }

  .b-conversion__lines:after {
    top: 0;
    background: linear-gradient(0deg, var(--c-accent) 0%, rgba(76,199,36,0) 100%);
  }

  .b-conversion__lines:before {
    bottom: 0;
    background: linear-gradient(0deg, rgba(76,199,36,0) 0%, var(--c-accent) 100%);
  }

  .b-conversion__title {
    margin-bottom: var(--sp-48);
  }

  .b-conversion.is-visible .b-conversion__lines {
    height: 100%;
  }

  .b-conversion.is-visible .b-conversion__item-percent span,
  .b-conversion.is-visible .b-conversion__item-percent:after {
    -webkit-animation-name: item-percent;
            animation-name: item-percent;
    /* Продолжительность анимации */
    -webkit-animation-duration: 0.6s;
            animation-duration: 0.6s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }

  .b-conversion.is-visible .b-conversion__item-image,
  .b-conversion.is-visible .b-conversion__item-content {
    -webkit-animation-name: item-in;
            animation-name: item-in;
    /* Продолжительность анимации */
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  .b-conversion__item--first .b-conversion__item-percent span,
  .b-conversion__item--first .b-conversion__item-percent:after {
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
  }

  .b-conversion__item--first .b-conversion__item-image,
  .b-conversion__item--first .b-conversion__item-content {
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
  }

  .b-conversion__item--second .b-conversion__item-percent span,
  .b-conversion__item--second .b-conversion__item-percent:after {
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s;
  }

  .b-conversion__item--second .b-conversion__item-image,
  .b-conversion__item--second .b-conversion__item-content {
    -webkit-animation-delay: 1.7s;
            animation-delay: 1.7s;
  }

  .b-conversion__item--third .b-conversion__item-percent span,
  .b-conversion__item--third .b-conversion__item-percent:after {
    -webkit-animation-delay: 2.2s;
            animation-delay: 2.2s;
  }

  .b-conversion__item--third .b-conversion__item-image,
  .b-conversion__item--third .b-conversion__item-content {
    -webkit-animation-delay: 2.3s;
            animation-delay: 2.3s;
  }

  .b-filling__text img {
    margin-bottom: var(--sp-40);
    width: 100%;
  }

  .b-filling__text img + img {
    margin-left: 0;
  }

  .b-form__block {
    display: block;
  }

  .b-form__item {
    width: 100%;
  }

  .b-form__content {
    max-width: 480px;
  }

  .b-form__title {
    text-align: center;
  }

  .b-form:before {
    margin-left: 0;
    opacity: 0.5;
  }

  .b-look {
    padding-left: 0;
  }

  .b-map.is-visible .b-map__user {
    opacity: 0.5;
  }

  .b-map.is-visible .b-map__user:hover {
    opacity: 1;
  }

  .b-questions {
    gap: var(--sp-40);
  }

  .b-questions__stepper {
    width: 460px;
  }

  .b-result .tns-controls {
    margin-left: 0;
    left: 20px;
    top: 20px;
  }
}

@media screen and (max-width: 1024px) {
  blockquote {
    padding-left: 50px;
  }

  blockquote:before {
    top: 6px;
    bottom: 4px;
  }

  blockquote h1,
  blockquote .h1,
  blockquote h2,
  blockquote .h2,
  blockquote h3,
  blockquote .h3,
  blockquote h4,
  blockquote .h4,
  blockquote h5,
  blockquote .h5,
  blockquote h6,
  blockquote .h6 {
    line-height: 1.4;
  }

  .app-footer__part {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
    text-align: center;
  }

  .app-footer__part + .app-footer__part {
    padding-top: var(--sp-32);
  }

  .app-footer__nav {
    width: 100%;
    margin-top: var(--sp-32);
    text-align: left;
    gap: var(--sp-20);
  }

  .app-footer__nav + .app-footer__part {
    padding-top: var(--sp-32);
  }

  .app-footer__content {
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
  }

  .app-footer__activity {
    padding-left: 0;
  }

  .app-header__part--bottom {
    position: fixed;
    left: 0;
    right: auto;
    width: 320px;
    top: 0;
    bottom: 0;
    z-index: 100;
    background-color: var(--bg-soft);
    overflow-y: auto;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    transition: 0.6s ease transform;
    -webkit-overflow-scrolling: touch;
  }

  .app-header__part--bottom .app-header__content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    padding: 0;
    -ms-flex-align: inherit;
        align-items: inherit;
  }

  .app-header__part--bottom .app-header__links {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    padding: 20px;
    font-weight: 600;
  }

  /* В бургер-меню это два полноценных действия, поэтому оформляем кнопками:
     «Создать квиз» — основное (заливка акцентом), «Личный кабинет» — второстепенное.
     Фон панели уже светло-серый (--bg-soft), так что вторая кнопка белая с рамкой,
     иначе слилась бы с подложкой. Класс .btn не используем — он тянет разделитель
     и стрелку, здесь они не нужны. */
  .app-header__part--bottom .app-header__link,
  .app-header__part--bottom .b-lk {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    height: 48px;
    margin: 0 0 10px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
  }

  .app-header__part--bottom .app-header__link {
    background: var(--c-accent);
    color: var(--c-on-dark);
  }

  .app-header__part--bottom .b-lk {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--c-heading);
  }

  .app-header__part--top {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 100;
  }

  .app-header__part--top .b-lk {
    margin: 0 0 0 10px;
  }

  .app-header__part--top .app-header__links {
    display: none;
  }

  .app-header.is-fixed .app-header__part--top {
    height: 58px;
    background-color: rgba(241,243,246,0.9);
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
  }

  .app-header.is-opened .app-header__part--bottom {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    box-shadow: 1000px 0 0 1000px rgba(144,151,160,0.9);
  }

  .app-header .m-button {
    width: 60px;
    height: 60px;
    margin-left: auto;
    font-size: 0;
    line-height: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
  }

  .app-header__menu ul {
    display: block;
  }

  .app-header__menu li {
    margin: 0;
  }

  .app-header__menu a {
    font-size: 18px;
    line-height: 1.2;
    padding: 18px 20px;
  }

  .b-menu__dropdown-toggle {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    position: absolute;
    right: 12px;
    top: 6px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    padding: 0;
    color: var(--c-muted);
    transition: .2s ease transform;
  }

  .b-menu__dropdown-toggle .svg-icon {
    width: 12px;
    height: 8px;
  }

  .b-menu__item--dropdown.is-open .b-menu__dropdown-toggle {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  .b-menu__dropdown {
    position: static;
    display: none;
    width: auto;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0 12px 20px;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
            transform: none;
  }

  .b-menu__dropdown:before,
  .b-menu__dropdown:after {
    display: none;
  }

  /* на мобиле нет ховер-открытия — гасим десктопный сдвиг влево */
  .b-menu__item--dropdown:hover .b-menu__dropdown {
    -webkit-transform: none;
            transform: none;
  }

  .b-menu__item--dropdown.is-open .b-menu__dropdown {
    display: block;
  }

  .b-menu__dropdown .b-menu__dropdown-item {
    padding: 10px 0;
  }

  .b-menu__dropdown .b-menu__dropdown-item:hover {
    background: none;
  }

  .b-menu__dropdown .b-menu__dropdown-item:hover .b-menu__dropdown-icon {
    background: var(--bg-soft);
    color: var(--c-muted);
    box-shadow: none;
    -webkit-transform: none;
            transform: none;
  }

  .b-menu__dropdown .b-menu__dropdown-item:hover .b-menu__dropdown-title {
    color: var(--c-heading);
  }

  .b-menu__dropdown-arrow {
    display: none;
  }

  .b-menu__dropdown .b-menu__dropdown-all {
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-top: 4px;
    padding: 10px 16px;
  }

  .app-header__soc {
    -ms-flex-order: 1;
        order: 1;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: start;
        align-items: flex-start;
    padding: 10px;
  }

  .app-header__soc a {
    padding: 10px;
  }

  .app-header .m-close {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    width: 56px;
    height: 56px;
    position: -webkit-sticky;
    position: sticky;
    margin-left: auto;
    margin-bottom: -56px;
    right: 0;
    top: 0;
    z-index: 10;
  }

  .btn {
    padding: 15px 80px 15px 25px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 20px;
  }

  h5 {
    font-size: 18px;
  }

  h6 {
    font-size: 16px;
  }

  .b-block {
    margin-bottom: var(--sp-80);
  }

  .b-block__inner {
    display: block;
    max-width: 480px;
    margin: 0 auto;
  }

  .b-block__part {
    width: 100%;
  }

  .b-block__part--image {
    min-height: 1px;
    height: 320px;
  }

  .b-block__title {
    margin-bottom: var(--sp-24);
    max-width: 420px;
  }

  .b-block__percent img {
    max-width: 290px;
  }

  .b-block__percent-text {
    margin-top: -80px;
    margin-bottom: var(--sp-80);
    font-size: 18px;
    min-width: 110px;
  }

  .b-block__info {
    padding: 24px;
  }

  .b-block__frame {
    display: none;
  }

  .b-compare__item {
    height: 250px !important;
    padding-right: 10px;
  }

  .b-compare__item + .b-compare__item {
    padding-left: 10px;
  }

  .b-compare__item-number {
    line-height: 1;
    font-size: 20px;
    margin-bottom: 6px;
  }

  .b-compare__item-title {
    font-size: 16px;
  }

  .b-compare__item-text {
    font-size: 12px;
  }

  .b-compare__part {
    background-size: auto 200px;
  }

  .b-compare__part--top .b-compare__item--3 {
    padding-top: var(--sp-56);
  }

  .b-compare__part--top .b-compare__item--4 {
    padding-top: var(--sp-120);
  }

  .b-compare__part--bottom .b-compare__item {
    padding-bottom: 0;
  }

  .b-compare__part--bottom .b-compare__item--3 {
    padding-bottom: var(--sp-20);
  }

  .b-compare__part--bottom .b-compare__item--4 {
    padding-bottom: var(--sp-48);
  }

  .b-conversion {
    border-radius: 0 40px 0 0;
  }

  .b-conversion__title {
    max-width: 480px;
  }

  .b-first {
    min-height: auto;
    padding: 80px 0 230px;
    border-radius: 0px 0px 0px 40px;
    padding-bottom: var(--sp-120);
  }

  .b-first--page {
    border-radius: 0 !important;
    background-size: auto 292px;
  }

  .b-first-pic {
    margin-left: -24px;
    background-size: auto 286px;
    height: 300px;
  }

  .b-partners-cashback__badge {
    width: 160px;
    height: 160px;
  }

  .b-partners-cashback__value {
    font-size: 36px;
  }

  .b-first__title {
    font-size: 32px;
    line-height: 1.4;
  }

  .b-form {
    border-radius: 0 40px;
    padding: var(--sp-56) 0;
  }

  .b-form__item-title {
    margin-bottom: 0;
  }

  .b-instruction {
    margin-top: -180px;
  }

  .b-integration {
    margin: 80px 0;
  }

  .b-map {
    z-index: 1;
  }

  .b-map .b-map__user {
    display: none !important;
  }

  .b-map__block {
    padding: 140px 0;
  }

  .b-path {
    font-size: 12px;
    line-height: 1.2;
    padding-bottom: var(--sp-32);
  }

  .b-path .svg-icon {
    margin: 0 6px;
  }

  .b-quiz {
    border-radius: 0 40px;
    overflow: hidden;
    margin-top: 0;
    -webkit-overflow-scrolling: touch;
  }

  .b-quiz__image {
    display: none;
  }

  .b-quiz__image img {
    max-height: 100%;
  }

  .b-quiz__block {
    background-color: transparent;
    padding: 0;
    max-width: 420px;
  }

  .b-result {
    border-radius: 0px 0px 0px 40px;
  }

  .b-result__item {
    padding: 100px 0 60px;
    border-radius: 0px 0px 0px 40px;
  }

  .b-result__text {
    margin-bottom: var(--sp-56);
  }

  .b-result__part--info {
    max-width: 380px;
  }

  .b-result__logo-text {
    font-size: 16px;
  }

  .b-result__block {
    height: 278px;
    margin-top: auto;
  }

  .b-result__block-item {
    margin: 0 2%;
    max-width: none;
    width: 45%;
  }

  .b-result__block-text {
    margin-bottom: 10px;
  }

  .b-result__block-percent {
    font-size: 24px;
  }

  .b-result__block-percent.is-active {
    height: 200px;
  }

  .b-result__header {
    margin-bottom: var(--sp-96);
  }

  .b-steps {
    padding: var(--sp-48) 0;
  }

  .b-steps__block {
    margin: 0 auto;
    max-width: 480px;
    display: block;
  }

  .b-steps__part {
    padding: 0;
    width: 100%;
    margin: 0 0 30px;
  }

  .b-steps__title {
    margin-bottom: var(--sp-24);
    text-align: center;
  }

  .b-steps:before {
    margin-right: 100px;
    bottom: 40%;
  }

  .b-steps:after {
    margin-left: 0;
  }

  .b-steps__content:before {
    top: 20%;
    margin-left: 160px;
  }

  .b-tabs__list {
    position: relative;
    max-width: 320px;
    margin: 0 auto var(--sp-40);
    z-index: 2;
  }

  .b-tabs__list.is-opened .b-tabs__list-wrap .svg-icon {
    -webkit-transform: rotate(180deg) translateY(50%);
            transform: rotate(180deg) translateY(50%);
  }

  .b-tabs__list.is-opened .b-tabs__list-block {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .b-tabs__list-wrap {
    display: -ms-flexbox;
    display: flex;
  }

  .b-tabs__list-block {
    position: absolute;
    left: 0;
    top: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 0 0 6px 6px;
    margin-top: -6px;
    display: block;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    transition: 0.4s ease all;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .b-tabs__list-item {
    -ms-flex-pack: start;
        justify-content: flex-start;
    display: -ms-flexbox;
    display: flex;
    padding: 20px;
    margin: 0;
  }

  .b-tabs__block {
    margin-left: -10px;
  }

  .b-tabs__block .b-product {
    padding-left: 10px;
  }

  .b-product__image {
    height: 240px;
  }

  .b-tariffs {
    width: 100%;
  }

  .b-tariffs__item {
    width: 50%;
  }

  .b-tariffs__button {
    position: relative;
    left: 50%;
    opacity: 1;
  }

  .b-tariffs__list {
    opacity: 1 !important;
  }

  .b-work {
    border-radius: 0px 0px 0px 40px;
    padding: var(--sp-48) 0;
  }

  .b-work:before {
    left: -100px;
    right: -100px;
    margin: 0;
    background-position: 50% 0;
  }

  .b-work__content {
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .b-work__part {
    width: 100%;
    max-width: 480px;
    margin: 0 auto var(--sp-48);
    padding: 0;
  }

  .b-work__part--button {
    -ms-flex-order: -1;
        order: -1;
  }

  .b-work__part .b-work__part {
    padding-top: var(--sp-20);
  }

  .b-work--page .b-work__image--fix {
    margin-top: 0;
  }

  .b-work--page .b-work__part--image {
    -ms-flex-order: 1;
        order: 1;
  }
}

@media (max-width: 1024px) {
  .b-info__items {
    max-width: 640px;
    margin: 0 auto;
  }

  .b-info__content {
    padding-bottom: var(--sp-32);
  }

  .b-info__item {
    width: 50%;
  }

  .b-info__line {
    display: none;
  }

  .b-info__text {
    position: relative;
    z-index: 2;
  }

  .b-info__block {
    padding-bottom: 5px;
  }
}

@media screen and (max-width: 768px) {
  blockquote {
    padding-left: 26px;
  }

  .b-advantages {
    padding-bottom: var(--sp-20);
  }

  .b-advantages__block {
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }

  .b-advantages__item {
    width: 45%;
  }

  .b-block__info-title {
    font-size: 24px;
    line-height: 1.4;
  }

  .b-block__text {
    margin-bottom: var(--sp-32);
  }

  .b-block__button {
    font-size: 16px;
  }

  .b-compare__item {
    padding-right: 5px;
    height: 150px !important;
  }

  .b-compare__item + .b-compare__item {
    padding-left: 5px;
  }

  .b-compare__item-number {
    line-height: 1;
    font-size: 16px;
    margin-bottom: 0;
  }

  .b-compare__item-title {
    font-size: 14px;
  }

  .b-compare__item-text {
    font-size: 10px;
  }

  .b-compare__vs {
    font-size: 30px;
  }

  .b-compare__part {
    background-size: auto 120px;
  }

  .b-compare__part--top .b-compare__item--3 {
    padding-top: var(--sp-32);
  }

  .b-compare__part--top .b-compare__item--4 {
    padding-top: var(--sp-64);
  }

  .b-compare__part--bottom .b-compare__item {
    padding-bottom: 0;
    height: 200px !important;
  }

  .b-compare__part--bottom .b-compare__item--3 {
    padding-bottom: var(--sp-20);
  }

  .b-compare__part--bottom .b-compare__item--4 {
    padding-bottom: var(--sp-48);
  }

  .b-conversion {
    padding: var(--sp-56) 0;
  }

  .b-conversion__lines {
    left: -15px;
  }

  .b-conversion__item {
    display: block;
  }

  .b-conversion__item-percent {
    line-height: 1;
    width: 70px;
    left: -23px;
    height: 90px;
    -ms-flex-align: center;
        align-items: center;
    -webkit-transform: none;
            transform: none;
    top: 40px;
    margin: 0;
    padding-left: 22px;
  }

  .b-conversion__item-percent:after {
    content: '';
    left: 2px;
    top: 50%;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transform-origin: left top;
            transform-origin: left top;
  }

  .b-conversion__item-image {
    height: 90px;
    width: 100%;
    margin-bottom: var(--sp-32);
    overflow: hidden;
    padding-left: 100px;
    text-align: right;
    -webkit-overflow-scrolling: touch;
  }

  .b-conversion__item-image img {
    max-height: none;
    min-width: 176px;
  }

  .b-conversion__block {
    padding-left: 10px;
    padding-top: var(--sp-20);
    padding-bottom: 1px;
    max-width: 320px;
  }

  .b-customization {
    margin-bottom: var(--sp-96);
  }

  .b-customization__button {
    padding: 28px 40px;
  }

  .b-customization__button img {
    max-width: 200px;
  }

  .b-customization__note {
    margin-bottom: var(--sp-20);
    line-height: 1.4;
  }

  .b-filling__image {
    margin: -170px -15px 0;
    padding-bottom: 0;
  }

  .b-filling__image img {
    border-radius: 0;
  }

  .b-filling__footer {
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .b-filling__soc {
    margin-right: 0;
    margin-bottom: var(--sp-32);
  }

  .b-first--filling {
    padding-bottom: 140px;
  }

  .b-instruction {
    display: block;
    max-width: 480px;
  }

  .b-instruction__item {
    width: 100%;
    padding: 40px 20px;
  }

  .b-instruction__item + .b-instruction__item {
    border: none;
    border-top: 1px solid var(--border);
  }

  .b-instruction__image {
    position: relative;
    left: auto;
    top: auto;
    -webkit-transform: none;
            transform: none;
    margin: 40px 0 -40px;
  }

  .b-instruction__number:before {
    width: 128px;
    height: 128px;
    background: #c4c4c4;
    border-radius: 128px;
    opacity: 0.4;
  }

  .b-instruction img {
    max-width: 220px !important;
  }

  .b-links {
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: var(--sp-20);
  }

  /* Карта-фон (1515×807, 258 КБ) на мобильных не грузится: точки-пины поверх неё
     скрыты ещё с 1024px, а из самой картинки в 375px виден только центральный
     срез — еле заметная россыпь точек. Остаётся ровная заливка --bg-soft.
     Парный media у preload — в index.blade.php, иначе картинка качалась бы всё равно. */
  .b-map {
    background-image: none;
  }

  .b-links__item {
    width: 100%;
    margin-bottom: var(--sp-24);
    padding: 24px;
  }

  .b-questions-band {
    padding: var(--sp-40) 0;
  }

  .b-questions {
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: stretch;
        align-items: stretch;
    gap: var(--sp-32);
  }

  .b-questions__stepper {
    width: 100%;
    max-width: 460px;
  }

  .b-result__content {
    display: block;
  }

  .b-result__part {
    width: 100%;
    max-width: none;
  }

  .b-result__part + .b-result__part {
    padding-top: var(--sp-56);
  }

  .b-result__title {
    max-width: 420px;
  }

  .b-result__block-item {
    max-width: 180px;
  }

  .b-result__header {
    margin-bottom: var(--sp-56);
  }

  .b-setting__title2 {
    margin-bottom: var(--sp-24);
  }

  .b-setting__item {
    width: 100%;
    max-width: none;
    padding-left: 50px;
    margin-bottom: var(--sp-40);
  }

  .b-setting__item-title {
    margin-bottom: 10px;
  }

  .b-setting__title {
    margin-bottom: var(--sp-40);
    font-size: 18px;
  }

  .b-setting__note {
    margin-bottom: 0;
  }

  .b-tabs__block {
    margin-left: 0;
  }

  .b-tabs__block .b-product {
    padding-left: 0;
    width: 100%;
  }

  .b-product__text {
    min-height: 1px;
    margin-bottom: 10px;
  }

  .b-tariffs {
    border: none;
    /* на десктопе 96px, на мобиле это давало «мёртвую» пустоту перед следующей секцией */
    margin-bottom: var(--sp-8);
  }

  .app__content--payoff {
    padding-top: var(--sp-16);
  }

  .b-tariffs__item {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    max-width: 480px;
    margin: 0 auto var(--sp-24);
    padding: 24px 20px;
  }

  .b-tariffs__button {
    -webkit-transform: none;
            transform: none;
    left: 0;
    width: auto;
    padding: 15px 68px 15px 17px;
  }

  .b-tariffs__button:before {
    right: 54px;
  }

  .b-tariffs__button .svg-icon {
    right: 24px;
  }

  .b-tariffs__note {
    min-height: 1px;
    margin-bottom: 10px;
  }

  .b-tariffs__price {
    margin-bottom: var(--sp-20);
  }
}

@media screen and (max-width: 580px) {
  .b-stepper {
    padding: 24px 20px;
  }

  .b-stepper__count {
    font-size: 28px;
  }

  .b-stepper__dot {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .b-stepper__dots {
    height: 28px;
  }

  .b-stepper__line,
  .b-stepper__line-done {
    left: 14px;
    top: 38px;
  }

  .b-stepper__line {
    right: 14px;
  }

  .b-stepper__line-done {
    width: calc((100% - 28px) * var(--done, 0));
  }
}

@media screen and (max-width: 480px) {
  .b-advantages__item {
    width: 100%;
    max-width: 320px;
  }

  .b-advantages__item-title {
    min-height: 1px;
    margin-bottom: 6px;
  }

  .b-steps__item {
    padding: 62px 20px 28px;
  }

  .b-steps:before {
    margin-right: 0;
  }

  .b-steps:after {
    left: 0;
  }

  .b-steps__content:before {
    margin-left: 0;
  }

  .b-work:before {
    background-size: 100% auto;
    left: -200px;
    right: -200px;
  }

  .b-work__image {
    margin: 0;
  }

  .b-work__part--image .b-work__tab {
    margin: 0;
  }
}

@media (max-width: 480px) {
  .b-info__item {
    width: 100%;
  }

  .b-info__items {
    -ms-flex-direction: column;
        flex-direction: column;
  }
}

.article_content{
  font-size: 16px;
}
.article_content a{
  color:var(--c-accent);
  text-decoration: none;
  font-style: normal;
  transition: color .2s ease;
}
.article_content a:hover,
.article_content a:focus{
  color:var(--c-accent-dark);
}
.article_content h2{
  font-size: 32px;
  line-height: 1.28;
  margin: 28px 0 14px;
}
.article_content h3{
  font-size: 26px;
  line-height: 1.32;
  margin: 24px 0 12px;
}
.article_content h4{
  font-size: 22px;
  line-height: 1.35;
  margin: 20px 0 10px;
}
.article_content p,
.article_content ul,
.article_content ol,
.article_content blockquote{
  margin: 0 0 14px;
}
.article_content ul,
.article_content ol{
  padding-left: 22px;
}
/* Таблица сравнения в контенте (квиз, блог, примеры и т.д.) */
.b-text__content table,
.b-text table,
.article_content table,
.seo-content table {
  width: 100%;
  max-width: 100%;
  margin: var(--sp-24) 0 var(--sp-32);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.45;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.b-text__content table th,
.b-text table th,
.article_content table th,
.seo-content table th {
  padding: 15px 20px;
  text-align: left;
  font-weight: 600;
  color: var(--c-heading);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.b-text__content table th:not(:first-child),
.b-text table th:not(:first-child),
.article_content table th:not(:first-child),
.seo-content table th:not(:first-child) {
  text-align: left;
}
.b-text__content table td,
.b-text table td,
.article_content table td,
.seo-content table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--c-text);
  vertical-align: top;
}
.b-text__content table td:not(:first-child),
.b-text table td:not(:first-child),
.article_content table td:not(:first-child),
.seo-content table td:not(:first-child) {
  text-align: left;
}
.b-text__content table tr:last-child td,
.b-text table tr:last-child td,
.article_content table tr:last-child td,
.seo-content table tr:last-child td {
  border-bottom: 0;
}
.b-text__content table tbody tr:hover td,
.b-text table tbody tr:hover td,
.article_content table tbody tr:hover td,
.seo-content table tbody tr:hover td {
  background: var(--bg-soft);
}
.b-text__content table td strong,
.b-text table td strong,
.article_content table td strong,
.seo-content table td strong {
  color: var(--c-accent);
  font-weight: 600;
}
@media (max-width: 768px) {
  .b-text__content table,
  .b-text table,
  .article_content table,
  .seo-content table {
    font-size: 14px;
  }
  .b-text__content table th,
  .b-text__content table td,
  .b-text table th,
  .b-text table td,
  .article_content table th,
  .article_content table td,
  .seo-content table th,
  .seo-content table td {
    padding: 12px 14px;
  }
}

/* Обёртка для горизонтального скролла таблиц на узких экранах (углы таблицы сохраняются) */
.b-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
  .b-table-wrap table {
    min-width: 460px;
  }
}

.related-articles{
  margin-top: var(--sp-56);
}
.related-articles__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:var(--sp-20);
}
.related-articles__title{
  margin:0;
  font-size:28px;
  line-height:1.2;
  color:var(--c-heading);
}
.related-articles__nav{
  display:flex;
  gap:8px;
}
.related-articles__arrow{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--c-heading);
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.related-articles__arrow:hover{
  border-color:var(--c-accent);
  color:var(--c-accent-dark);
}
.related-articles__track{
  display:flex;
  gap:var(--sp-20);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.related-articles__track::-webkit-scrollbar{
  display:none;
}
.related-articles__track::-webkit-scrollbar-thumb{
  background:#d5dde8;
  border-radius:12px;
}
.related-articles__card{
  flex:0 0 calc(33.333% - 14px);
  min-width:280px;
  max-width:360px;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  text-decoration:none;
  color:inherit;
  scroll-snap-align:start;
  transition:transform .2s ease, box-shadow .2s ease;
}
.related-articles__card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(27,39,51,.10);
}
.related-articles__image{
  aspect-ratio:1 / 1;
  height:auto;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#eef2f7;
}
.related-articles__body{
  padding:16px;
}
.related-articles__name{
  font-size:17px;
  line-height:1.35;
  margin-bottom:10px;
  color:var(--c-heading);
}
.related-articles__date{
  font-size:13px;
  color:var(--c-muted);
}
@media (max-width: 768px) {
  .related-articles{
    margin-top:var(--sp-40);
  }
  .related-articles__title{
    font-size:22px;
  }
  .related-articles__card{
    flex:0 0 85%;
    min-width:250px;
  }
}

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  width: 100%;
  background: var(--c-accent);
  box-shadow: 0 -6px 24px rgba(20, 36, 60, 0.16);
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-cta__link {
  display: block;
  padding: 14px 0;
  color: var(--c-on-dark);
  text-decoration: none;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

.sticky-cta__link:hover {
  color: var(--c-on-dark);
  text-decoration: underline;
}

.sticky-cta__link strong {
  font-weight: 700;
}

.sticky-cta__close {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--c-on-dark);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.sticky-cta__close:hover {
  background: rgba(255, 255, 255, 0.18);
}

@media screen and (max-width: 768px) {
  .sticky-cta {
    padding: 0 44px env(safe-area-inset-bottom) 44px;
    min-height: 48px;
  }

  .sticky-cta__link {
    padding: 10px 0;
    font-size: 14px;
    line-height: 20px;
  }

  .sticky-cta__close {
    left: 6px;
    width: 30px;
    height: 30px;
    font-size: 24px;
  }

  .page-scroller {
    display: none;
  }

  body.has-sticky-cta-mobile .app__wrapper {
    padding-bottom: var(--sp-80);
  }

  /* на мобиле секция шагов шла с большими полями — между блоками зияла пустота */
  .b-steps {
    padding: var(--sp-32) 0;
  }
}

.cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 130;
  width: 380px;
  max-width: calc(100vw - 40px);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(20, 36, 60, 0.2);
  border: 1px solid rgba(107, 128, 159, 0.2);
  padding: 20px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-banner__title {
  color: var(--c-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 8px;
}

.cookie-banner__text {
  color: rgba(31, 45, 61, 0.72);
  font-size: 13px;
  line-height: 19px;
}

.cookie-banner__text a,
.cookie-banner__actions a {
  color: var(--c-accent);
  text-decoration: underline;
}

.cookie-banner__details {
  color: rgba(31, 45, 61, 0.72);
  font-size: 13px;
  line-height: 19px;
  margin-top: 10px;
  display: none;
}

.cookie-banner__details.is-expanded {
  display: block;
}

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.cookie-banner__accept {
  height: 40px;
  padding: 0 18px;
  border: none;
  border-radius: 24px;
  background: #1f2d3d;
  color: var(--c-on-dark);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.cookie-banner__accept:hover {
  background: #14202e;
}

.cookie-banner__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: 24px;
  border: 1px solid rgba(76, 199, 36, 0.5);
  background: transparent;
  color: var(--c-heading);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.cookie-banner__more .svg-icon {
  width: 10px;
  height: 6px;
  transition: transform 0.2s ease;
}

.cookie-banner__more[aria-expanded="true"] .svg-icon {
  transform: rotate(180deg);
}

@media screen and (max-width: 768px) {
  .cookie-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    max-width: none;
    padding: 16px;
  }

  .cookie-banner__title {
    font-size: 15px;
  }

  .cookie-banner__text,
  .cookie-banner__details {
    font-size: 12px;
    line-height: 17px;
  }

  .cookie-banner__accept,
  .cookie-banner__more {
    height: 38px;
    font-size: 12px;
  }
}

@media screen and (max-width: 480px) {
  .b-facts__item {
    width: 100%;
  }
}

/* История обновлений (/changelog): слева версия и дата, справа описание релиза */
.b-changelog {
  max-width: 1045px;
  margin: 0 auto;
  padding: var(--sp-20) 0 var(--sp-80);
}

.b-changelog__item {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-40);
}

.b-changelog__item + .b-changelog__item {
  margin-top: var(--sp-56);
  padding-top: var(--sp-56);
  border-top: 1px solid var(--border);
}

.b-changelog__meta {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: start;
      align-items: flex-start;
  gap: var(--sp-12);
}

.b-changelog__version {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.b-changelog__date {
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.4;
}

.b-changelog__body {
  min-width: 0;
}

.b-changelog__title {
  margin: 0 0 var(--sp-16);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--c-heading);
}

.b-changelog__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
}

.b-changelog__list {
  margin: var(--sp-20) 0 0;
  padding: 0;
  list-style: none;
}

.b-changelog__list li {
  position: relative;
  padding-left: var(--sp-20);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text);
}

.b-changelog__list li + li {
  margin-top: var(--sp-12);
}

/* маркер — акцентная точка, как в списках тарифов */
.b-changelog__list li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: var(--c-accent);
}

@media (max-width: 767px) {
  .b-changelog {
    padding-bottom: var(--sp-56);
  }

  .b-changelog__item {
    grid-template-columns: 1fr;
    gap: var(--sp-16);
  }

  .b-changelog__meta {
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    gap: var(--sp-12);
  }

  .b-changelog__item + .b-changelog__item {
    margin-top: var(--sp-40);
    padding-top: var(--sp-40);
  }
}

.b-contacts {
  padding: 20px 0 80px;
}

.b-contacts__row {
  display: flex;
  gap: var(--sp-56);
}

.b-contacts__row + .b-contacts__row {
  margin-top: var(--sp-24);
  padding-top: var(--sp-40);
  border-top: 1px solid rgba(107, 128, 159, 0.2);
}

.b-contacts__col {
  flex: 1 1;
  min-width: 0;
}

.b-contacts__text {
  color: var(--c-heading);
  font-size: 20px;
  line-height: 30px;
  margin: 0 0 32px;
}

.b-contacts__accent {
  color: var(--c-accent);
  font-weight: 700;
}

.b-contacts__faces {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--sp-32);
}

.b-contacts__face {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.b-contacts__wave {
  font-size: 22px;
  margin-right: 8px;
}

.b-contacts__note {
  color: var(--c-muted);
  font-size: 14px;
  line-height: 20px;
  max-width: 230px;
}

.b-contacts__soc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}

.b-contacts__soc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-heading);
  font-size: 15px;
  font-weight: 600;
  transition: 0.3s ease color;
}

.b-contacts__soc-item img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.b-contacts__soc-item:hover {
  color: var(--c-accent);
}

.b-contacts__note-block {
  border-left: 2px solid var(--c-accent);
  padding-left: 20px;
}

.b-contacts__card {
  display: block;
  background: var(--bg-soft);
  border-radius: 6px;
  padding: 28px;
  flex: 1 1;
  min-width: 0;
  transition: 0.3s ease background;
}

.b-contacts__card--link:hover {
  background: var(--c-accent);
}

.b-contacts__card--link:hover .b-contacts__card-text {
  color: rgba(255, 255, 255, 0.85);
}

.b-contacts__card--link:hover .b-contacts__card-link,
.b-contacts__card--link:hover .b-contacts__card-link span {
  color: var(--c-on-dark);
}

.b-contacts__card-text {
  color: var(--c-text);
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 16px;
  transition: 0.3s ease color;
}

.b-contacts__card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-heading);
  font-size: 18px;
  font-weight: 700;
  transition: 0.3s ease color;
}

.b-contacts__card-link span {
  color: var(--c-accent);
  transition: 0.3s ease color;
}

@media screen and (max-width: 1024px) {
  .b-contacts__row {
    flex-direction: column;
    gap: var(--sp-32);
  }

  .b-contacts__row:last-child {
    flex-direction: column;
  }
}

@media screen and (max-width: 768px) {
  .b-contacts__text {
    font-size: 17px;
    line-height: 25px;
  }

  .b-contacts__card {
    padding: 20px;
  }
}

.b-contacts__card--button {
  width: 100%;
  border: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.b-improve-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.b-improve-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.b-improve-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(31, 45, 61, 0.6);
}

.b-improve-modal__wrap {
  position: relative;
  background: #fff;
  border-radius: 6px;
  padding: 36px;
  width: 420px;
  max-width: calc(100vw - 40px);
  box-shadow: 0 24px 60px rgba(20, 36, 60, 0.25);
}

.b-improve-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-soft);
  color: var(--c-heading);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.b-improve-modal__title {
  color: var(--c-heading);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--sp-24);
}

.b-improve-modal__field {
  margin-bottom: var(--sp-20);
}

.b-improve-modal__field label {
  display: block;
  color: var(--c-muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.b-improve-modal__field input,
.b-improve-modal__field textarea {
  width: 100%;
  border: 1px solid rgba(107, 128, 159, 0.3);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--c-heading);
  resize: vertical;
}

.b-improve-modal__field textarea {
  min-height: 110px;
}

.b-improve-modal__field input:focus,
.b-improve-modal__field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
}

.b-improve-modal__req {
  color: var(--c-error);
}

.b-improve-modal__field-error {
  display: none;
  color: var(--c-error);
  font-size: 13px;
  line-height: 1.35;
  margin-top: 7px;
}

.b-improve-modal__field.is-invalid input,
.b-improve-modal__field.is-invalid textarea {
  border-color: var(--c-error);
}

.b-improve-modal__field.is-invalid input:focus,
.b-improve-modal__field.is-invalid textarea:focus {
  border-color: var(--c-error);
}

.b-improve-modal__field.is-invalid .b-improve-modal__field-error,
.b-improve-modal__agree.is-invalid .b-improve-modal__field-error {
  display: block;
}

.b-improve-modal__agree {
  margin-bottom: var(--sp-20);
}

.b-improve-modal__agree .b-check__block {
  border-radius: 6px;
}

.b-improve-modal__agree.is-invalid .b-check__block {
  border-color: var(--c-error);
}

.b-improve-modal__error {
  display: none;
  color: var(--c-error);
  font-size: 13px;
  margin: -8px 0 16px;
}

.b-improve-modal__submit {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 6px;
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: 0.3s ease background;
}

.b-improve-modal__submit:hover {
  background: #42b91e;
}

.b-improve-modal__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.b-improve-modal__thanks {
  text-align: center;
  padding: var(--sp-20) 0;
}

.b-improve-modal__emoji {
  font-size: 56px;
  margin-bottom: 16px;
}

.b-improve-modal__thanks-title {
  color: var(--c-heading);
  font-size: 18px;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .b-improve-modal__wrap {
    padding: 28px 20px;
  }
}

.b-faq {
  max-width: 900px;
  margin: 0 auto;
}

/* В статьях блога FAQ прижат к левому краю контента (без центрирования) */
.b-faq--article {
  max-width: none;
  margin: 0;
}

.b-faq__item {
  border-bottom: 1px solid rgba(107, 128, 159, 0.2);
}

.b-faq__item:first-child {
  border-top: 1px solid rgba(107, 128, 159, 0.2);
}

.b-faq__question {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: var(--sp-24);
  width: 100%;
  padding: var(--sp-24) 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.b-faq__question-text {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-heading);
}

.b-faq__toggle {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  transition: 0.3s ease background;
}

.b-faq__toggle-icon {
  position: relative;
  width: 14px;
  height: 14px;
  color: var(--c-heading);
  transition: 0.3s ease transform, 0.3s ease color;
}

.b-faq__toggle-icon:before,
.b-faq__toggle-icon:after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}

.b-faq__toggle-icon:before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.b-faq__toggle-icon:after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.b-faq__item.is-open .b-faq__toggle {
  background: #1f2d3d;
}

.b-faq__item.is-open .b-faq__toggle-icon {
  color: var(--c-on-dark);
  transform: rotate(45deg);
}

.b-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.b-faq__item.is-open .b-faq__answer {
  max-height: 900px;
}

.b-faq__answer-inner {
  max-width: 760px;
  padding-bottom: var(--sp-24);
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.6;
}

.b-faq__answer-inner a {
  color: var(--c-accent);
}

.b-faq__answer-inner ul {
  padding-left: 20px;
  margin: 12px 0;
}

.b-faq__answer-inner li {
  margin-bottom: 6px;
}

.b-faq__answer-inner p {
  margin: 12px 0;
}

@media screen and (max-width: 768px) {
  .b-faq__question {
    padding: var(--sp-20) 0;
    gap: 16px;
  }

  .b-faq__question-text {
    font-size: 16px;
  }

  .b-faq__toggle {
    width: 32px;
    height: 32px;
  }

  .b-faq__answer-inner {
    font-size: 14px;
    padding-bottom: var(--sp-20);
  }
}

/* Страница примеров квизов (/example): поиск, компактные категории и карточки */

.b-tabs--quizzes,
.b-tabs--blog {
  margin-top: -90px;
}

.b-tabs__search {
  position: relative;
  max-width: 420px;
  margin: 0 auto var(--sp-32);
}

.b-first__search {
  max-width: 860px;
  margin: var(--sp-32) auto var(--sp-16);
}

.b-tabs__search input {
  width: 100%;
  height: 52px;
  padding: 0 20px 0 48px;
  border-radius: 6px;
  border: 1px solid rgba(107, 128, 159, 0.2);
  font-size: 15px;
  font-family: inherit;
  color: var(--c-heading);
  background: #fff;
}

.b-tabs__search input::placeholder {
  color: rgba(107, 128, 159, 0.6);
}

.b-tabs__search input:focus {
  outline: none;
  border-color: var(--c-accent);
}

.b-tabs__search .svg-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--c-muted);
}

.b-instr-search__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(31,45,61,0.18);
  border: 1px solid rgba(107,128,159,0.12);
  text-align: left;
  max-height: 480px;
  overflow-y: auto;
  z-index: 20;
}

.b-instr-search__count {
  padding: 20px 24px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.b-instr-search__item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  gap: 16px;
  padding: 14px 24px;
  text-decoration: none;
  transition: .15s ease background;
}

.b-instr-search__item:last-child {
  padding-bottom: var(--sp-20);
}

.b-instr-search__item:hover {
  background: var(--bg-soft);
}

.b-instr-search__item-icon {
  width: 40px;
  height: 40px;
  -ms-flex: none;
      flex: none;
  border-radius: 50%;
  background: rgba(107,128,159,0.12);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  color: var(--c-muted);
}

.b-instr-search__item-icon svg {
  width: 18px;
  height: 18px;
}

.b-instr-search__item-body {
  min-width: 0;
}

.b-instr-search__item-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-heading);
  margin-bottom: 4px;
}

.b-instr-search__item-snippet {
  font-size: 13px;
  line-height: 20px;
  color: var(--c-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.b-instr-search__item-snippet mark {
  background: #fef3c7;
  color: var(--c-heading);
  border-radius: 3px;
  padding: 0 2px;
}

.b-instr-search__empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--c-muted);
  font-size: 14px;
}

.b-tabs__empty {
  width: 100%;
  text-align: center;
  padding: var(--sp-40) 0;
  color: var(--c-muted);
  font-size: 15px;
}

/* Поиск по ширине совпадает с рядом категорий — композиция собрана по одной оси
   (как в шапке инструкций). Базовые 420px по центру не бьются с рядом на всю ширину. */
.b-tabs--quizzes .b-tabs__search {
  max-width: none;
}

.b-tabs--quizzes .b-tabs__list {
  margin-bottom: var(--sp-32);
}

/* Геометрия и заливка — как у разделов в шапке инструкций (.b-links__nav-item),
   чтобы фильтры по сайту выглядели одним компонентом */
.b-tabs--quizzes .b-tabs__list-item {
  padding: 12px 16px;
  margin: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--c-heading);
  box-shadow: none;
  gap: 8px;
}

/* скрытые в свёрнутом виде чипы (одна строка) */
.b-tabs__list-item.is-row-hidden {
  display: none;
}

/* кнопка «Ещё» в конце строки категорий */
.b-tabs--quizzes .b-tabs__list-more {
  cursor: pointer;
  border: 1px solid rgba(76,199,36,0.45);
  background: #fff;
  color: var(--c-accent);
  font-family: inherit;
  line-height: 1;
}

.b-tabs--quizzes .b-tabs__list-more:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-dark);
}

.b-tabs__list-more svg {
  width: 12px;
  height: 12px;
  margin-left: 4px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  transition: .2s ease transform;
}

.b-tabs__list-more.is-expanded svg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.b-tabs__list-item-icon {
  width: 16px;
  height: 16px;
  color: var(--c-muted);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  transition: .2s ease color;
}

.b-tabs--quizzes .b-tabs__list-item:hover,
.b-tabs--quizzes .b-tabs__list-item.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-dark);
  box-shadow: none;
}

.b-tabs--quizzes .b-tabs__list-item:hover .b-tabs__list-item-icon,
.b-tabs--quizzes .b-tabs__list-item.is-active .b-tabs__list-item-icon {
  color: var(--c-on-dark);
}

.b-tabs__list-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(107, 128, 159, 0.14);
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 600;
}

.b-tabs--quizzes .b-tabs__list-item:hover .b-tabs__list-count,
.b-tabs--quizzes .b-tabs__list-item.is-active .b-tabs__list-count {
  background: rgba(255, 255, 255, 0.25);
  color: var(--c-on-dark);
}

.b-tabs--quizzes .b-tabs__block {
  margin-left: 0;
  column-gap: var(--sp-24);
}

/* Горизонтальная карточка-шаблон */
.b-tabs--quizzes .b-tabs__block .b-product {
  width: calc(50% - 12px);
  padding-left: 0;
  margin-bottom: var(--sp-24);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: stretch;
      align-items: stretch;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(31,45,61,0.05);
  transition: .28s cubic-bezier(.16,1,.3,1) transform, .28s ease box-shadow, .28s ease border-color;
}

.b-tabs--quizzes .b-product:hover {
  border-color: rgba(76,199,36,0.4);
  box-shadow: 0 22px 44px rgba(31,45,61,0.13);
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
}

.b-tabs--quizzes .b-product__preview {
  -ms-flex: 1 1;
      flex: 1 1;
  min-width: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: stretch;
      align-items: stretch;
  text-decoration: none;
}

.b-tabs--quizzes .b-product__image {
  -ms-flex: none;
      flex: none;
  width: 160px;
  height: auto;
  min-height: calc(100% - 24px);
  margin: 12px 0 12px 12px;
  border-radius: 6px;
  background-color: var(--bg-soft);
  background-size: cover;
  background-position: 50% 50%;
}

.b-tabs--quizzes .b-product__more,
.b-tabs--quizzes .b-product__label {
  display: none;
}

.b-tabs--quizzes .b-product__body {
  -ms-flex: 1 1;
      flex: 1 1;
  min-width: 0;
  padding: 22px 24px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
}

.b-tabs--quizzes .b-product__text {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-heading);
  min-height: auto;
  margin-bottom: 8px;
  transition: .25s ease color;
}

.b-tabs--quizzes .b-product:hover .b-product__text {
  color: var(--c-accent-dark);
}

.b-tabs--quizzes .b-product__desc {
  font-size: 14px;
  line-height: 20px;
  color: var(--c-text);
  margin-bottom: 18px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.b-tabs--quizzes .b-product__tags {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
}

.b-tabs--quizzes .b-product__tag {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 6px;
  background: var(--bg-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
  line-height: 1;
  white-space: nowrap;
}

.b-tabs--quizzes .b-product__tag .svg-icon,
.b-tabs--quizzes .b-product__tag svg {
  width: 14px;
  height: 14px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--c-muted);
}

.b-tabs--quizzes .b-product__tag--free {
  background: rgba(76,199,36,0.1);
  color: var(--c-accent-dark);
}

.b-tabs--quizzes .b-product__tag--free svg {
  color: var(--c-accent);
}

.b-tabs--quizzes .b-product__arrow {
  -ms-flex: none;
      flex: none;
  -ms-flex-item-align: center;
      align-self: center;
  width: 46px;
  height: 46px;
  margin: 0 20px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--c-accent);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  transition: .25s ease background, .25s ease border-color, .25s ease color, .25s ease box-shadow;
}

.b-tabs--quizzes .b-product__arrow svg {
  width: 20px;
  height: 20px;
  transition: .25s ease transform;
}

.b-tabs--quizzes .b-product:hover .b-product__arrow {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-dark);
  box-shadow: 0 10px 20px rgba(76,199,36,0.35);
}

.b-tabs--quizzes .b-product:hover .b-product__arrow svg {
  -webkit-transform: translateX(3px);
          transform: translateX(3px);
}

/* пагинация «показать ещё»: скрытые карточки (перебивает display:flex выше) */
.b-tabs--quizzes .b-tabs__block .b-product.is-hide {
  display: none;
}

/* скрытие карточек при поиске (не зависит от display карточки) */
.b-product.is-filtered-out {
  display: none !important;
}

.b-tabs--quizzes .b-tabs__block-more {
  padding-left: 0;
}

@media screen and (max-width: 1024px) {
  .b-tabs--quizzes .b-tabs__block {
    column-gap: var(--sp-20);
  }

  .b-tabs--quizzes .b-tabs__block .b-product {
    width: calc(50% - 10px);
  }

  .b-tabs--quizzes .b-product__image {
    width: 150px;
  }

  .b-tabs--quizzes .b-product__body {
    padding: 18px 18px;
  }

  .b-tabs--quizzes .b-product__text {
    font-size: 17px;
  }

  .b-tabs--quizzes .b-product__arrow {
    margin: 0 16px;
  }
}

@media screen and (max-width: 768px) {
  .b-tabs__search input {
    height: 48px;
    font-size: 14px;
  }

  .b-tabs--quizzes .b-tabs__list {
    margin-bottom: var(--sp-20);
    max-width: 100%;
  }

  .b-tabs--quizzes .b-tabs__list-item {
    padding: 15px 16px;
    margin: 5px 0;
    font-size: 15px;
  }

  .b-tabs--quizzes .b-tabs__list-block {
    padding: 6px;
  }

  .b-tabs--quizzes .b-tabs__block {
    display: block;
  }

  .b-tabs--quizzes .b-tabs__block .b-product {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .b-tabs--quizzes .b-product__image {
    width: 108px;
  }

  .b-tabs--quizzes .b-product__body {
    padding: 16px 14px;
  }

  .b-tabs--quizzes .b-product__text {
    font-size: 15px;
  }

  .b-tabs--quizzes .b-product__desc {
    display: none;
  }

  .b-tabs--quizzes .b-product__arrow {
    width: 40px;
    height: 40px;
    margin: 0 12px;
  }
}

/* Секция примеров на главной (упрощённая версия /example) */
/* сбрасываем отрицательный margin-top от .b-tabs--quizzes (он для /example и /blog) */
.b-tabs--home {
  margin-top: 0;
}

.b-tabs--home .b-tabs__title {
  text-align: center;
  margin-bottom: var(--sp-48);
}

.b-tabs--home .b-tabs__list {
  margin-bottom: var(--sp-32);
}

.b-tabs--home .b-tabs__list-block {
  -ms-flex-pack: center;
      justify-content: center;
}

/* статичная ссылка «Ещё → /example» (шеврон вправо, без ротации) */
.b-tabs--quizzes .b-tabs__list-more--link svg {
  -webkit-transform: none;
          transform: none;
  transition: .2s ease transform;
}

.b-tabs--quizzes .b-tabs__list-more--link:hover svg {
  -webkit-transform: translateX(2px);
          transform: translateX(2px);
}

@media screen and (max-width: 768px) {
  /* на мобиле чипы главной — горизонтальный скролл, а не дропдаун */
  .b-tabs--home .b-tabs__list {
    max-width: 100%;
    margin: 0 auto var(--sp-24);
  }

  .b-tabs--home .b-tabs__list-block {
    position: static;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-pack: start;
        justify-content: flex-start;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
            transform: none;
    background: none;
    border: none;
    border-radius: 0;
    margin-top: 0;
    padding: 2px 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .b-tabs--home .b-tabs__list-item {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex: none;
        flex: none;
    width: auto;
    padding: 10px 14px;
    margin: 0 8px 0 0;
    font-size: 14px;
    white-space: nowrap;
  }

  .b-tabs__cta {
    margin-top: var(--sp-32);
  }
}

/* ==========================================================================
   Страница «Возможности» (/vozmozhnosti)
   Принцип: не рассказывать иконкой, а показывать миниатюру реального элемента.
   Один тип карточки на всю страницу; цвет — только акцентами внутри мокапов.
   ========================================================================== */

/* ── Секция ───────────────────────────────────────────────────────────── */
.fsec {
  padding: var(--sp-64) 0;
}

.fsec__top {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  -ms-flex-align: start;
      align-items: start;
  gap: var(--sp-40);
  margin-bottom: var(--sp-32);
}

.fsec__title {
  margin: 0;
  font-weight: var(--fw-heading);
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--c-heading);
}

.fsec__desc {
  margin: 0;
  padding-top: 6px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-text);
}

/* ── Сетка и карточка ─────────────────────────────────────────────────── */
.fgrid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-16);
}

.fgrid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.fcard {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: var(--sp-20);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: .25s ease border-color, .25s ease box-shadow;
}

.fcard:hover {
  border-color: rgba(76, 199, 36, 0.5);
  box-shadow: 0 8px 26px rgba(31, 45, 61, 0.08);
}

.fcard--wide {
  grid-column: span 2;
}

.fcard__title {
  margin: var(--sp-16) 0 8px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  color: var(--c-heading);
}

.fcard__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
}

/* холст мокапа — одинаковая высота, чтобы карточки стояли ровно */
.fcard__vis {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 7px;
  height: 132px;
  padding: 14px;
  background: var(--bg-soft);
  border-radius: 12px;
  overflow: hidden;
}

.fcard--wide .fcard__vis {
  height: 178px;
}

/* ── Интеграции ───────────────────────────────────────────────────────── */
.fints {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}

.fint {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 9px;
  padding: 11px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-heading);
}

.fint__dot {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: var(--c-accent);
}

/* ==========================================================================
   Примитивы мокапов — общие для типов вопросов и карточек возможностей
   ========================================================================== */

.qmock-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-16);
}

.qmock {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: var(--sp-16);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: .25s ease border-color, .25s ease box-shadow;
}

.qmock:hover {
  border-color: rgba(76, 199, 36, 0.5);
  box-shadow: 0 8px 26px rgba(31, 45, 61, 0.08);
}

.qmock__label {
  margin-top: var(--sp-12);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--c-heading);
}

.qmock__preview {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 6px;
  height: 104px;
  padding: 10px;
  background: var(--bg-soft);
  border-radius: 12px;
  overflow: hidden;
}

/* строка варианта ответа */
.qm-opt {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 7px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--c-text);
}

.qm-opt--on {
  border-color: var(--c-accent);
}

.qm-radio {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(107, 128, 159, 0.35);
  border-radius: 100%;
}

.qm-opt--on .qm-radio,
.qcalc__row--on .qm-radio {
  border-color: var(--c-accent);
  background: radial-gradient(circle, var(--c-accent) 0 45%, #fff 46%);
}

.qm-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(107, 128, 159, 0.22);
}

.qm-opt .qm-bar {
  -ms-flex: 1;
      flex: 1;
}

.qm-opt--on .qm-bar {
  background: rgba(76, 199, 36, 0.45);
}

.qm-bar--half {
  max-width: 52%;
}

/* плитки-картинки */
.qm-tiles {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.qm-tile {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  height: 34px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: rgba(107, 128, 159, 0.4);
}

.qm-tile svg {
  width: 15px;
  height: 15px;
}

.qm-tile--on {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.qm-tile--tall {
  height: 38px;
}

/* эмодзи-варианты */
.qm-emoji {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 6px;
}

.qm-emoji span {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 30px;
  height: 30px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
}

.qm-emoji span.is-on {
  border-color: var(--c-accent);
  background: rgba(76, 199, 36, 0.1);
}

/* поле ввода / селект / дата */
.qm-field {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 9px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--c-faint);
}

.qm-field--focus {
  border-color: var(--c-accent);
}

.qm-field svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 13px;
  height: 13px;
}

.qm-field .qm-bar {
  -ms-flex: 1;
      flex: 1;
}

.qm-caret {
  width: 1px;
  height: 14px;
  background: var(--c-accent);
}

/* ползунок */
.qm-slider {
  position: relative;
  height: 5px;
  margin: 6px 4px;
  border-radius: 3px;
  background: rgba(107, 128, 159, 0.2);
}

.qm-slider__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 58%;
  border-radius: 3px;
  background: var(--c-accent);
}

.qm-slider__knob {
  position: absolute;
  left: 58%;
  top: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 100%;
  background: #fff;
  border: 3px solid var(--c-accent);
}

.qm-scale {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  font-size: 10px;
  color: var(--c-faint);
}

/* зона загрузки */
.qm-drop {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 5px;
  height: 100%;
  border: 1px dashed rgba(107, 128, 159, 0.45);
  border-radius: 6px;
  color: var(--c-muted);
}

.qm-drop svg {
  width: 18px;
  height: 18px;
}

.qm-drop span {
  font-size: 10px;
}

/* рейтинг */
.qm-stars {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 4px;
  color: rgba(107, 128, 159, 0.28);
}

.qm-stars svg {
  width: 20px;
  height: 20px;
}

.qm-stars .is-on {
  color: var(--c-accent);
}

/* текстовые строки */
.qm-lines {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 6px;
  padding: 4px 2px;
}

.qm-lines .qm-bar:first-child {
  height: 7px;
  width: 65%;
  background: rgba(107, 128, 159, 0.4);
}

.qm-lines .qm-bar:nth-child(3) { width: 80%; }
.qm-lines .qm-bar:nth-child(4) { width: 45%; }

/* ── Калькулятор ──────────────────────────────────────────────────────── */
.qcalc {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 7px;
}

.qcalc__card {
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.qcalc__legend {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 11px;
  color: var(--c-heading);
}

.qcalc__row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--c-text);
}

.qcalc__row + .qcalc__row {
  margin-top: 4px;
}

.qcalc__row--on {
  color: var(--c-accent-dark);
  font-weight: 600;
}

.qcalc__val {
  margin-left: auto;
  color: var(--c-faint);
}

.qcalc__formula {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 5px;
  padding: 8px 10px;
  background: var(--c-accent);
  border-radius: 6px;
  color: var(--c-on-dark);
  font-size: 12px;
  font-weight: 600;
}

/* числа и знаки не должны рваться посреди значения */
.qcalc__formula > span {
  white-space: nowrap;
}

.qcalc__num {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #fff;
  border-radius: 4px;
  color: var(--c-accent-dark);
}

/* ── Тест «правильно / неправильно» ───────────────────────────────────── */
.qtest__answer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--c-text);
}

.qtest__answer--right {
  border-color: var(--c-accent);
  background: rgba(76, 199, 36, 0.08);
  color: var(--c-heading);
  font-weight: 600;
}

.qtest__answer--wrong {
  border-color: rgba(255, 79, 79, 0.5);
  background: rgba(255, 79, 79, 0.06);
}

.qtest__mark {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(107, 128, 159, 0.35);
  border-radius: 100%;
}

.qtest__answer--right .qtest__mark {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.qtest__answer--wrong .qtest__mark {
  border-color: var(--c-error);
  color: var(--c-error);
}

.qtest__mark svg {
  width: 9px;
  height: 9px;
}

/* ── Ветвление ────────────────────────────────────────────────────────── */
.qbranch {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
}

.qbranch__node {
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  color: var(--c-text);
}

.qbranch__node--on {
  border-color: var(--c-accent);
  color: var(--c-heading);
  font-weight: 600;
}

.qbranch__stem {
  width: 2px;
  height: 12px;
  background: rgba(107, 128, 159, 0.35);
}

.qbranch__stem--on {
  background: var(--c-accent);
}

.qbranch__fork {
  position: relative;
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  width: 100%;
  height: 12px;
}

.qbranch__fork-line {
  position: absolute;
  top: 0;
  left: calc(25% - var(--sp-16) / 4);
  right: calc(25% - var(--sp-16) / 4);
  height: 2px;
  background: rgba(107, 128, 159, 0.35);
}

.qbranch__fork-line--on {
  left: 50%;
  background: var(--c-accent);
}

.qbranch__drop {
  width: 2px;
  height: 100%;
  margin: 0 auto;
  background: rgba(107, 128, 159, 0.35);
}

.qbranch__drop--on {
  background: var(--c-accent);
}

.qbranch__cols {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  width: 100%;
}

.qbranch__col {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
}

.qbranch__col .qbranch__node {
  width: 100%;
}

/* ── Новые примитивы для остальных секций ─────────────────────────────── */

/* столбиковая диаграмма (воронка по шагам) */
.qm-chart {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: 6px;
  height: 100%;
  padding-top: 6px;
}

.qm-chart span {
  -ms-flex: 1;
      flex: 1;
  border-radius: 4px 4px 0 0;
  background: var(--c-accent);
  opacity: .85;
}

/* горизонтальные полосы с подписью (конверсия по ответам) */
.qm-hbar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 7px;
  font-size: 10px;
  color: var(--c-muted);
}

.qm-hbar__track {
  -ms-flex: 1;
      flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(107, 128, 159, 0.18);
  overflow: hidden;
}

.qm-hbar__fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--c-accent);
}

/* цветовые образцы (темы оформления) */
.qm-swatches {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 8px;
}

.qm-swatches span {
  width: 26px;
  height: 26px;
  border-radius: 100%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(31, 45, 61, 0.16);
}

/* рамки устройств (адаптивность) */
.qm-frames {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 8px;
}

.qm-frames i {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
}

.qm-frames i:first-child {
  width: 74px;
  height: 52px;
}

.qm-frames i:last-child {
  width: 26px;
  height: 44px;
}

/* адресная строка (свой домен) */
.qm-url {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 7px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--c-heading);
}

.qm-url svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--c-accent);
}

/* фрагмент кода (вставка на сайт) */
.qm-code {
  padding: 9px 11px;
  background: var(--bg-dark);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
}

.qm-code b {
  color: #8ee360;
  font-weight: 400;
}

/* подпись-бейдж (white label) */
.qm-badge {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 11px;
  color: var(--c-muted);
}

.qm-badge--off {
  text-decoration: line-through;
  opacity: .55;
}

/* строка «источник → значение» (UTM, счётчики) */
.qm-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--c-text);
}

.qm-row b {
  font-weight: 600;
  color: var(--c-heading);
}

/* токен-подстановка */
.qm-token {
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(76, 199, 36, 0.16);
  color: var(--c-accent-dark);
  font-weight: 600;
}

/* ── Адаптив ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .qmock-grid { grid-template-columns: repeat(3, 1fr); }
  .fgrid,
  .fgrid--4 { grid-template-columns: repeat(2, 1fr); }
  .fcard--wide { grid-column: span 2; }
}

@media (max-width: 767px) {
  .fsec { padding: var(--sp-40) 0; }

  .fsec__top {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }

  .qmock-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-12);
  }

  .qmock__label { font-size: 13px; }

  .fgrid,
  .fgrid--4 { grid-template-columns: 1fr; }

  .fcard--wide { grid-column: span 1; }
}

/* значения мокапов (цвета тем, высоты столбцов, проценты) — в стилях, не в разметке */
.qm-swatches span:nth-child(1) { background: var(--c-accent); }
.qm-swatches span:nth-child(2) { background: var(--bg-dark); }
.qm-swatches span:nth-child(3) { background: #2f6bed; }
.qm-swatches span:nth-child(4) { background: #e4e8ee; }

.qm-chart span:nth-child(1) { height: 100%; }
.qm-chart span:nth-child(2) { height: 78%; }
.qm-chart span:nth-child(3) { height: 61%; }
.qm-chart span:nth-child(4) { height: 44%; }
.qm-chart span:nth-child(5) { height: 31%; }

.qm-hbar:nth-child(1) .qm-hbar__fill { width: 82%; }
.qm-hbar:nth-child(2) .qm-hbar__fill { width: 54%; }
.qm-hbar:nth-child(3) .qm-hbar__fill { width: 27%; }

/* ==========================================================================
   Сцены возможностей: у каждой крупной фичи своя композиция и большой мокап
   ========================================================================== */
.fscene {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--sp-64);
  padding: var(--sp-64) 0;
}

/* сцена в «коробке» — с фоном и мягкими углами.
   margin обязателен: padding уходит внутрь коробки, и без отступа
   цветная плашка упирается в контент соседней секции */
.fscene--boxed {
  padding: var(--sp-56);
  margin: var(--sp-24) 0;
  border-radius: 30px;
}

.fscene--soft { background: var(--bg-soft); }
.fscene--dark { background: var(--bg-dark); }

.fscene--dark .fscene__title { color: var(--c-on-dark); }
.fscene--dark .fscene__text,
.fscene--dark .fscene__list li { color: rgba(255, 255, 255, 0.72); }

/* мокап переезжает на другую сторону — сцены чередуются */
.fscene--flip .fscene__vis {
  -ms-flex-order: -1;
      order: -1;
}

.fscene__label {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-bottom: var(--sp-16);
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(76, 199, 36, 0.12);
  color: var(--c-accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fscene--dark .fscene__label {
  background: rgba(76, 199, 36, 0.2);
  color: #8ee360;
}

.fscene__title {
  margin: 0 0 var(--sp-16);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--c-heading);
}

.fscene__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-text);
}

.fscene__list {
  margin: var(--sp-24) 0 0;
  padding: 0;
  list-style: none;
}

.fscene__list li {
  position: relative;
  padding-left: var(--sp-24);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text);
}

.fscene__list li + li {
  margin-top: 10px;
}

.fscene__list li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: var(--c-accent);
}

/* ── Крупные мокапы внутри сцен ───────────────────────────────────────── */
.fscene__vis .qbranch__node {
  padding: 12px 18px;
  font-size: 14px;
}

.fscene__vis .qbranch__stem { height: 22px; }
.fscene__vis .qbranch__fork { height: 22px; gap: var(--sp-24); }
.fscene__vis .qbranch__fork-line {
  left: calc(25% - var(--sp-24) / 4);
  right: calc(25% - var(--sp-24) / 4);
}
.fscene__vis .qbranch__fork-line--on { left: 50%; }
.fscene__vis .qbranch__cols { gap: var(--sp-24); }

.fscene__vis .qcalc { gap: var(--sp-12); }
.fscene__vis .qcalc__card { padding: 14px 16px; }
.fscene__vis .qcalc__legend { margin-bottom: 10px; font-size: 14px; }
.fscene__vis .qcalc__row { gap: 9px; font-size: 14px; }
.fscene__vis .qcalc__row + .qcalc__row { margin-top: 7px; }
.fscene__vis .qcalc__val { font-size: 13px; }
.fscene__vis .qcalc__formula { padding: 14px 18px; font-size: 15px; gap: 8px; }
.fscene__vis .qcalc__num { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 6px; }

.fscene__vis .qtest {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.fscene__vis .qtest__question {
  margin: 0 0 14px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--c-heading);
}
.fscene__vis .qtest__answer { padding: 11px 14px; font-size: 14px; }
.fscene__vis .qtest__answer + .qtest__answer { margin-top: 8px; }
.fscene__vis .qtest__mark { width: 18px; height: 18px; }
.fscene__vis .qtest__mark svg { width: 10px; height: 10px; }
.fscene__vis .qtest__verdict {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-weight: 600;
  font-size: 14px;
  color: var(--c-accent-dark);
}
.fscene__vis .qtest__verdict svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .fscene,
  .fscene--boxed {
    grid-template-columns: 1fr;
    gap: var(--sp-32);
    padding: var(--sp-40) 0;
  }

  .fscene--boxed { padding: var(--sp-24); margin: var(--sp-16) 0; }

  /* на мобильном мокап всегда под текстом */
  .fscene--flip .fscene__vis {
    -ms-flex-order: 0;
        order: 0;
  }

  .fscene__text { font-size: 16px; }
}

/* ── Браузерные окна: способы размещения квиза ────────────────────────── */
.qplaces {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-20);
}

.qplace__cap {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-heading);
}

.qwin {
  position: relative;
  height: 128px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.qwin__bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 7px;
  background: var(--bg-soft);
}

.qwin__bar i {
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: rgba(107, 128, 159, 0.4);
}

.qwin__body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 6px;
  padding: 10px;
}

.qwin__line {
  height: 6px;
  border-radius: 3px;
  background: rgba(107, 128, 159, 0.16);
}

.qwin__line--short { width: 60%; }

/* акцентные элементы внутри окна */
.qwin__btn {
  width: 52px;
  height: 14px;
  margin-top: 2px;
  border-radius: 100px;
  background: var(--c-accent);
}

.qwin__banner {
  height: 16px;
  margin: -10px -10px 4px;
  background: var(--c-accent);
}

.qwin__inline {
  height: 34px;
  border-radius: 5px;
  background: var(--c-accent);
}

.qwin__modal {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 34%;
  height: 46px;
  border-radius: 5px;
  background: var(--c-accent);
}

.qwin__dim {
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  bottom: 0;
  background: rgba(31, 45, 61, 0.45);
}

.qwin__widget {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 26px;
  height: 34px;
  border-radius: 5px;
  background: var(--c-accent);
}

/* ── Кастомный дизайн: превью тем + палитры ───────────────────────────── */
.qthemes {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: var(--sp-16);
}

.qtheme {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--sp-16);
  padding: 16px 18px;
  border-radius: 12px;
}

.qtheme--a { background: var(--bg-dark); }
.qtheme--b { background: #fff; border: 1px solid var(--border); }
.qtheme--c { background: #efe7dc; }

.qtheme__body { -ms-flex: 1; flex: 1; min-width: 0; }

.qtheme__title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
}

.qtheme--a .qtheme__title { color: #fff; }
.qtheme--b .qtheme__title,
.qtheme--c .qtheme__title { color: var(--c-heading); }

.qtheme__btn {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-top: 8px;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.qtheme--a .qtheme__btn { background: #7b6cf6; }
.qtheme--b .qtheme__btn { background: var(--c-accent); }
.qtheme--c .qtheme__btn { background: #c9a227; }

.qtheme__palette {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  gap: 6px;
  padding: 7px 9px;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 3px 12px rgba(31, 45, 61, 0.14);
}

.qtheme__palette span {
  width: 16px;
  height: 16px;
  border-radius: 100%;
}

/* ── Квиз с ИИ ────────────────────────────────────────────────────────── */
.qai {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 10px;
}

.qai__prompt {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 10px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--c-accent);
  border-radius: 10px;
  font-size: 14px;
  color: var(--c-heading);
}

.qai__prompt svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--c-accent);
}

.qai__out {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 10px;
  padding: 11px 15px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--c-text);
}

.qai__num {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: rgba(76, 199, 36, 0.14);
  color: var(--c-accent-dark);
  font-size: 11px;
  font-weight: 700;
}

/* ── Интеграции: цепочка кругов ───────────────────────────────────────── */
.qlogos {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.qlogo {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 82px;
  height: 82px;
  margin-right: -12px;
  padding: 8px;
  border-radius: 100%;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 3px 12px rgba(31, 45, 61, 0.08);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--c-heading);
}

.qlogo--more {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-dark);
  font-size: 13px;
}

/* ── Бейдж «скоро» ────────────────────────────────────────────────────── */
.fcard__soon {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(107, 128, 159, 0.14);
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

/* ── Мокапы мелких карточек ───────────────────────────────────────────── */
.qm-video {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 10px;
}

.qm-video__play {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 100%;
  background: #fff;
  border: 2px solid var(--c-accent);
  color: var(--c-accent);
}

.qm-video__play svg { width: 15px; height: 15px; }

.qm-video__lines {
  -ms-flex: 1;
      flex: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 6px;
}

.qm-gift {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-size: 13px;
  font-weight: 600;
}

.qm-ab {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.qm-ab__v {
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
  font-size: 11px;
  color: var(--c-muted);
}

.qm-ab__v b {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  color: var(--c-heading);
}

.qm-ab__v--win {
  border-color: var(--c-accent);
}

.qm-ab__v--win b { color: var(--c-accent-dark); }

.qm-qr {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  width: 66px;
  margin: 0 auto;
}

.qm-qr i {
  padding-bottom: 100%;
  border-radius: 2px;
  background: var(--c-heading);
}

.qm-qr i:nth-child(3n) { background: rgba(107, 128, 159, 0.2); }
.qm-qr i:nth-child(7n) { background: var(--c-accent); }

.qm-share {
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.qm-share__img {
  height: 34px;
  border-radius: 5px;
  background: linear-gradient(120deg, rgba(76,199,36,.75), rgba(76,199,36,.35));
}

.qm-share__t {
  margin-top: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-heading);
}

.qm-share__u {
  margin-top: 2px;
  font-size: 10px;
  color: var(--c-faint);
}

@media (max-width: 1024px) {
  .qplaces { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .qplaces { grid-template-columns: repeat(2, 1fr); }
  .qwin { height: 108px; }
  .qlogo { width: 68px; height: 68px; font-size: 11px; margin-right: -8px; }
}

/* цвета палитр под каждую тему превью */
.qtheme--a .qtheme__palette span:nth-child(1) { background: #7b6cf6; }
.qtheme--a .qtheme__palette span:nth-child(2) { background: #2e2a44; }
.qtheme--a .qtheme__palette span:nth-child(3) { background: #e8e6f5; }

.qtheme--b .qtheme__palette span:nth-child(1) { background: var(--c-accent); }
.qtheme--b .qtheme__palette span:nth-child(2) { background: var(--bg-dark); }
.qtheme--b .qtheme__palette span:nth-child(3) { background: #e4e8ee; }

.qtheme--c .qtheme__palette span:nth-child(1) { background: #c9a227; }
.qtheme--c .qtheme__palette span:nth-child(2) { background: #6b5b3e; }
.qtheme--c .qtheme__palette span:nth-child(3) { background: #f6efe3; }

/* ── Визуальный редактор ветвления: холст с нодами ────────────────────── */
.qflow {
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  background-image: radial-gradient(rgba(107, 128, 159, 0.18) 1px, transparent 1px);
  background-size: 14px 14px;
}

.qflow svg { display: block; width: 100%; height: auto; }

.qflow__card { fill: #fff; stroke: var(--border); stroke-width: 1; }
.qflow__card--on { stroke: var(--c-accent); }

.qflow__kind {
  fill: var(--c-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
}

.qflow__name {
  fill: var(--c-heading);
  font-size: 12px;
  font-weight: 600;
}

.qflow__meta { fill: var(--c-muted); font-size: 10px; }

.qflow__link {
  fill: none;
  stroke: rgba(107, 128, 159, 0.45);
  stroke-width: 1.6;
}

.qflow__link--on {
  stroke: var(--c-accent);
  stroke-dasharray: 5 4;
}

.qflow__dot { fill: var(--c-accent); }
.qflow__dot--muted { fill: rgba(107, 128, 159, 0.45); }

/* кнопка внутри сцены */
.fscene__cta {
  margin-top: var(--sp-32);
}

/* галерея шаблонов: сетка превью-карточек */
.qtpl {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.qtpl__item {
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.qtpl__pic {
  height: 46px;
  border-radius: 6px;
  background: rgba(107, 128, 159, 0.14);
}

.qtpl__item--on .qtpl__pic { background: rgba(76, 199, 36, 0.22); }

.qtpl__name {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-heading);
}

@media (max-width: 767px) {
  .qtpl { grid-template-columns: repeat(2, 1fr); }
}

/* ── CTA-полоса в середине длинной страницы ───────────────────────────── */
.fcta {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: var(--sp-40);
  margin: var(--sp-24) 0;
  padding: var(--sp-48) var(--sp-56);
  background: var(--bg-dark);
  border-radius: 30px;
  overflow: hidden;
}

/* мягкое зелёное свечение из угла — чтобы плашка не была плоской */
.fcta:before {
  content: '';
  position: absolute;
  right: -80px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 100%;
  background: radial-gradient(circle, rgba(76, 199, 36, 0.28) 0%, rgba(76, 199, 36, 0) 70%);
  pointer-events: none;
}

.fcta__body {
  position: relative;
  z-index: 1;
}

.fcta__title {
  margin: 0;
  font-weight: var(--fw-heading);
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--c-on-dark);
}

.fcta__sub {
  margin: var(--sp-12) 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.fcta__btn {
  position: relative;
  z-index: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media (max-width: 900px) {
  .fcta {
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: start;
        align-items: flex-start;
    gap: var(--sp-24);
    padding: var(--sp-32) var(--sp-24);
  }
}

/* ── Несколько результатов: экраны-исходы квиза ───────────────────────── */
.qres {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 10px;
}

.qres__item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.qres__item--on {
  border-color: var(--c-accent);
  box-shadow: 0 6px 20px rgba(76, 199, 36, 0.16);
}

.qres__pic {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 52px;
  height: 46px;
  border-radius: 8px;
  background: rgba(107, 128, 159, 0.14);
}

.qres__item--on .qres__pic { background: rgba(76, 199, 36, 0.22); }

.qres__body { display: block; -ms-flex: 1; flex: 1; min-width: 0; }

.qres__name {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--c-heading);
}

.qres__desc {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--c-muted);
}

.qres__tag {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(76, 199, 36, 0.14);
  color: var(--c-accent-dark);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================================================
   Дашборд аналитики + анимации появления (/vozmozhnosti)
   Анимации стартуют по классу .is-in, который вешает IntersectionObserver.
   ========================================================================== */
.qdash {
  padding: var(--sp-20);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
}

.qdash__head {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-bottom: var(--sp-16);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.qdash__pill {
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(76, 199, 36, 0.18);
  color: #8ee360;
  font-size: 11px;
}

/* верхние счётчики */
.qdash__tiles {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: var(--sp-16);
}

.qdash__tile {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.qdash__num {
  font-weight: bold;
  font-size: 24px;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.qdash__num--accent { color: #8ee360; }

.qdash__cap {
  margin-top: 3px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

/* график: линия рисуется, площадь проявляется */
.qdash__chart { margin-bottom: var(--sp-16); }
.qdash__chart svg { display: block; width: 100%; height: auto; }

.qdash__area {
  fill: url(#qdashGrad);
  opacity: 0;
  transition: opacity .9s ease .55s;
}

.qdash__line {
  fill: none;
  stroke: #8ee360;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}

.is-in .qdash__area { opacity: 1; }

.is-in .qdash__line {
  -webkit-animation: qdashDraw 1.4s cubic-bezier(.4, 0, .2, 1) forwards;
          animation: qdashDraw 1.4s cubic-bezier(.4, 0, .2, 1) forwards;
}

@-webkit-keyframes qdashDraw { to { stroke-dashoffset: 0; } }
@keyframes qdashDraw { to { stroke-dashoffset: 0; } }

.qdash__peak {
  fill: #8ee360;
  opacity: 0;
  transition: opacity .3s ease 1.5s;
}

.is-in .qdash__peak { opacity: 1; }

/* воронка: полосы разъезжаются */
.qdash__funnel {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 8px;
}

.qdash__step {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}

.qdash__step-name {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 74px;
}

.qdash__track {
  -ms-flex: 1;
      flex: 1;
  height: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.qdash__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(76, 199, 36, .65), #4cc724);
  transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
}

.qdash__val {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 46px;
  text-align: right;
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.is-in .qdash__step:nth-child(1) .qdash__fill { width: 100%; transition-delay: .05s; }
.is-in .qdash__step:nth-child(2) .qdash__fill { width: 76%;  transition-delay: .17s; }
.is-in .qdash__step:nth-child(3) .qdash__fill { width: 58%;  transition-delay: .29s; }
.is-in .qdash__step:nth-child(4) .qdash__fill { width: 41%;  transition-delay: .41s; }
.is-in .qdash__step:nth-child(5) .qdash__fill { width: 24%;  transition-delay: .53s; }

/* ── Общие анимации появления мокапов ─────────────────────────────────── */
[data-anim] .qm-opt,
[data-anim] .qtest__answer,
[data-anim] .qai__out,
[data-anim] .qres__item,
[data-anim] .qcalc__card,
[data-anim] .qtpl__item {
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}

[data-anim].is-in .qm-opt,
[data-anim].is-in .qtest__answer,
[data-anim].is-in .qai__out,
[data-anim].is-in .qres__item,
[data-anim].is-in .qcalc__card,
[data-anim].is-in .qtpl__item {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

[data-anim].is-in :nth-child(1 of .qtest__answer) { transition-delay: .1s; }

.is-in .qtest__answer:nth-of-type(1) { transition-delay: .08s; }
.is-in .qtest__answer:nth-of-type(2) { transition-delay: .2s; }
.is-in .qtest__answer:nth-of-type(3) { transition-delay: .32s; }
.is-in .qai__out:nth-of-type(1) { transition-delay: .5s; }
.is-in .qai__out:nth-of-type(2) { transition-delay: .68s; }
.is-in .qai__out:nth-of-type(3) { transition-delay: .86s; }
.is-in .qres__item:nth-of-type(1) { transition-delay: .08s; }
.is-in .qres__item:nth-of-type(2) { transition-delay: .2s; }
.is-in .qres__item:nth-of-type(3) { transition-delay: .32s; }
.is-in .qcalc__card:nth-of-type(1) { transition-delay: .06s; }
.is-in .qcalc__card:nth-of-type(2) { transition-delay: .18s; }
.is-in .qcalc__card:nth-of-type(3) { transition-delay: .3s; }
.is-in .qtpl__item:nth-of-type(n) { transition-delay: .06s; }
.is-in .qtpl__item:nth-of-type(2) { transition-delay: .12s; }
.is-in .qtpl__item:nth-of-type(3) { transition-delay: .18s; }
.is-in .qtpl__item:nth-of-type(4) { transition-delay: .24s; }
.is-in .qtpl__item:nth-of-type(5) { transition-delay: .3s; }
.is-in .qtpl__item:nth-of-type(6) { transition-delay: .36s; }

/* галочка в тесте выскакивает после появления строки */
[data-anim] .qtest__answer--right .qtest__mark svg,
[data-anim] .qtest__answer--wrong .qtest__mark svg {
  opacity: 0;
  -webkit-transform: scale(.4);
          transform: scale(.4);
}

[data-anim].is-in .qtest__answer--right .qtest__mark svg,
[data-anim].is-in .qtest__answer--wrong .qtest__mark svg {
  -webkit-animation: qmPop .45s cubic-bezier(.34, 1.56, .64, 1) forwards;
          animation: qmPop .45s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

[data-anim].is-in .qtest__answer--right .qtest__mark svg { animation-delay: .55s; }
[data-anim].is-in .qtest__answer--wrong .qtest__mark svg { animation-delay: .72s; }

@-webkit-keyframes qmPop { to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } }
@keyframes qmPop { to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } }

/* вердикт «Верно» проявляется последним */
[data-anim] .qtest__verdict {
  opacity: 0;
  transition: opacity .45s ease .95s;
}

[data-anim].is-in .qtest__verdict { opacity: 1; }

/* ветвление: активный путь прочерчивается */
[data-anim] .qbranch__stem--on,
[data-anim] .qbranch__drop--on {
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: top;
          transform-origin: top;
  transition: transform .45s ease;
}

[data-anim].is-in .qbranch__stem--on,
[data-anim].is-in .qbranch__drop--on {
  -webkit-transform: none;
          transform: none;
}

[data-anim] .qbranch__fork-line--on {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left;
          transform-origin: left;
  transition: transform .4s ease .3s;
}

[data-anim].is-in .qbranch__fork-line--on {
  -webkit-transform: none;
          transform: none;
}

[data-anim] .qbranch__node--on {
  opacity: .35;
  transition: opacity .4s ease;
}

[data-anim].is-in .qbranch__node--on { opacity: 1; }
[data-anim].is-in .qbranch__col .qbranch__node--on:nth-of-type(1) { transition-delay: .35s; }

/* ползунок калькулятора доезжает до значения */
[data-anim] .qm-slider__fill { width: 0; transition: width .9s cubic-bezier(.22, 1, .36, 1) .35s; }
[data-anim] .qm-slider__knob { left: 0; transition: left .9s cubic-bezier(.22, 1, .36, 1) .35s; }
[data-anim].is-in .qm-slider__fill { width: 58%; }
[data-anim].is-in .qm-slider__knob { left: 58%; }

/* формула появляется после того, как значения выбраны */
[data-anim] .qcalc__formula {
  opacity: 0;
  -webkit-transform: translateY(8px);
          transform: translateY(8px);
  transition: opacity .5s ease .75s, transform .5s ease .75s;
}

[data-anim].is-in .qcalc__formula {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

/* строка запроса к ИИ печатается */
[data-anim] .qai__prompt span {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}

[data-anim].is-in .qai__prompt span {
  -webkit-animation: qaiType 1.1s steps(34) forwards;
          animation: qaiType 1.1s steps(34) forwards;
}

@-webkit-keyframes qaiType { to { max-width: 100%; } }
@keyframes qaiType { to { max-width: 100%; } }

/* окна «способов размещения»: акцентный элемент проявляется */
[data-anim] .qwin__btn,
[data-anim] .qwin__banner,
[data-anim] .qwin__inline,
[data-anim] .qwin__modal,
[data-anim] .qwin__widget,
[data-anim] .qwin__dim {
  opacity: 0;
  transition: opacity .5s ease;
}

[data-anim].is-in .qwin__btn,
[data-anim].is-in .qwin__banner,
[data-anim].is-in .qwin__inline,
[data-anim].is-in .qwin__modal,
[data-anim].is-in .qwin__widget,
[data-anim].is-in .qwin__dim {
  opacity: 1;
}

[data-anim].is-in .qplace:nth-child(1) .qwin__btn { transition-delay: .1s; }
[data-anim].is-in .qplace:nth-child(2) .qwin__banner { transition-delay: .22s; }
[data-anim].is-in .qplace:nth-child(3) .qwin__dim,
[data-anim].is-in .qplace:nth-child(3) .qwin__modal { transition-delay: .34s; }
[data-anim].is-in .qplace:nth-child(4) .qwin__inline { transition-delay: .46s; }
[data-anim].is-in .qplace:nth-child(5) .qwin__widget { transition-delay: .58s; }

/* схема редактора: связи прочерчиваются */
[data-anim] .qflow__link {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}

[data-anim].is-in .qflow__link {
  -webkit-animation: qdashDraw 1.1s ease forwards;
          animation: qdashDraw 1.1s ease forwards;
}

[data-anim].is-in .qflow__link:nth-of-type(2) { animation-delay: .12s; }
[data-anim].is-in .qflow__link:nth-of-type(3) { animation-delay: .24s; }
[data-anim].is-in .qflow__link:nth-of-type(4) { animation-delay: .36s; }
[data-anim].is-in .qflow__link:nth-of-type(5) { animation-delay: .48s; }

/* мелкая жизнь при наведении на карточку типа вопроса */
.qmock:hover .qm-slider__knob { -webkit-transform: scale(1.15); transform: scale(1.15); }
.qmock .qm-slider__knob { transition: transform .2s ease; }
.qmock:hover .qm-stars svg:nth-child(5) { color: var(--c-accent); }
.qmock .qm-stars svg { transition: color .25s ease; }
.qmock:hover .qm-caret {
  -webkit-animation: qmBlink .8s steps(1) infinite;
          animation: qmBlink .8s steps(1) infinite;
}

@-webkit-keyframes qmBlink { 50% { opacity: 0; } }
@keyframes qmBlink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  [data-anim] *,
  [data-anim].is-in * {
    -webkit-animation: none !important;
            animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
            transform: none !important;
  }
}

/* блок документов переехал под логотип — раскрывающийся список */
.app-footer__docs {
  margin-top: var(--sp-24);
}

@media screen and (max-width: 768px) {
  /* на мобильном футер центрируется — выравниваем и содержимое левого блока */
  .app-footer__part--logo {
    -ms-flex-align: center;
        align-items: center;
    text-align: center;
  }

  .app-footer__docs {
    margin-top: var(--sp-16);
    width: 100%;
  }

  /* блок растянут скрытым списком документов — центрируем сам переключатель */
  .app-footer__docs .app-footer__accordion-toggle {
    margin: 0 auto;
  }

  .app-footer__docs .app-footer__accordion-panel {
    text-align: center;
  }
}

/* ==========================================================================
   Посадочная «Квиз с ИИ» (/ai)
   ========================================================================== */
.ai-demo {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-24);
}

.ai-demo__side {
  padding: var(--sp-24);
  background: var(--bg-soft);
  border-radius: 30px;
}

.ai-demo__label {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.ai-demo__label + .ai-chips,
.ai-demo__prompt + .ai-demo__label {
  margin-top: var(--sp-20);
}

.ai-demo__prompt {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--c-accent);
  border-radius: 10px;
  font-size: 15px;
  color: var(--c-heading);
}

.ai-demo__prompt svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--c-accent);
}

/* строка описания «печатается» при появлении блока */
[data-anim] .ai-demo__prompt span {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}

[data-anim].is-in .ai-demo__prompt span {
  -webkit-animation: qaiType 1.2s steps(38) forwards;
          animation: qaiType 1.2s steps(38) forwards;
}

.ai-chips {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-chip {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13px;
  color: var(--c-muted);
}

.ai-chip:before {
  content: '';
  width: 13px;
  height: 13px;
  border: 2px solid rgba(107, 128, 159, 0.35);
  border-radius: 100%;
}

.ai-chip.is-ok {
  border-color: rgba(76, 199, 36, 0.45);
  color: var(--c-heading);
  font-weight: 600;
}

.ai-chip.is-ok:before {
  border-color: var(--c-accent);
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5L19 7'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* чипы проявляются по очереди */
[data-anim] .ai-chip {
  opacity: 0;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}

[data-anim].is-in .ai-chip { opacity: 1; -webkit-transform: none; transform: none; }
[data-anim].is-in .ai-chip:nth-child(1) { transition-delay: 1.15s; }
[data-anim].is-in .ai-chip:nth-child(2) { transition-delay: 1.3s; }
[data-anim].is-in .ai-chip:nth-child(3) { transition-delay: 1.45s; }
[data-anim].is-in .ai-chip:nth-child(4) { transition-delay: 1.6s; }
[data-anim].is-in .ai-chip:nth-child(5) { transition-delay: 1.75s; }

/* переключатель режимов */
.ai-demo__modes {
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  margin-top: var(--sp-24);
}

.ai-mode {
  padding: 9px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-muted);
  cursor: pointer;
  transition: .2s ease background, .2s ease color, .2s ease border-color;
}

.ai-mode:hover { border-color: rgba(76, 199, 36, 0.5); }

.ai-mode.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-dark);
}

.ai-demo__note {
  margin: var(--sp-12) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-muted);
}

/* превью собранного квиза */
.ai-quiz {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.ai-quiz__bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  background: var(--bg-soft);
}

.ai-quiz__bar i {
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: rgba(107, 128, 159, 0.4);
}

.ai-quiz__screen { padding: 16px; }

.ai-quiz__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
}

.ai-quiz__q {
  margin: 8px 0 12px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--c-heading);
}

.ai-quiz__opts {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 7px;
}

.ai-quiz__opt {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--c-text);
}

.ai-quiz__opt i {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(107, 128, 159, 0.35);
  border-radius: 100%;
}

.ai-quiz__opt.is-on {
  border-color: var(--c-accent);
  color: var(--c-heading);
  font-weight: 600;
}

.ai-quiz__opt.is-on i {
  border-color: var(--c-accent);
  background: radial-gradient(circle, var(--c-accent) 0 45%, #fff 46%);
}

.ai-quiz__pics {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.ai-quiz__pics span {
  height: 34px;
  border-radius: 5px;
  background: rgba(107, 128, 159, 0.14);
}

.ai-quiz__pics span:first-child { background: rgba(76, 199, 36, 0.22); }

.ai-quiz__btn {
  margin-top: 12px;
  padding: 10px;
  border-radius: 6px;
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* блок «что это даёт» */
.ai-gain__row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ai-gain__name {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 116px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.ai-gain__track {
  -ms-flex: 1;
      flex: 1;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.ai-gain__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(76, 199, 36, .6), #4cc724);
  transition: width 1.1s cubic-bezier(.22, 1, .36, 1) .2s;
}

.ai-gain__fill--muted { background: rgba(255, 255, 255, 0.22); }

.is-in .ai-gain__row:nth-child(1) .ai-gain__fill { width: 18%; }
.is-in .ai-gain__row:nth-child(2) .ai-gain__fill { width: 100%; transition-delay: .35s; }

.ai-gain__val {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 66px;
  text-align: right;
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

.ai-gain__val--accent { color: #8ee360; }

.ai-gain__tiles {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: var(--sp-20);
}

.ai-gain__tile {
  padding: 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.ai-gain__num {
  font-weight: bold;
  font-size: 30px;
  line-height: 1;
  color: #8ee360;
  font-variant-numeric: tabular-nums;
}

.ai-gain__cap {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

.ai-gain__note {
  margin: var(--sp-16) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

/* номера шагов */
.ai-step__num {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 100%;
  background: rgba(76, 199, 36, 0.14);
  color: var(--c-accent-dark);
  font-weight: bold;
  font-size: 24px;
}

/* поле «что поправить» */
.ai-fix__field {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 2px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--c-accent);
  border-radius: 10px;
  font-size: 15px;
  color: var(--c-heading);
}

.ai-fix__caret {
  width: 1.5px;
  height: 17px;
  background: var(--c-accent);
  -webkit-animation: qmBlink .9s steps(1) infinite;
          animation: qmBlink .9s steps(1) infinite;
}

.ai-fix__btn {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-top: var(--sp-12);
  padding: 11px 22px;
  border-radius: 6px;
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-size: 14px;
  font-weight: 600;
}

.ai-fix__result {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 9px;
  margin-top: var(--sp-16);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-accent-dark);
  opacity: 0;
  transition: opacity .5s ease 1s;
}

.is-in .ai-fix__result { opacity: 1; }

.ai-fix__check {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--c-accent);
  border-radius: 100%;
}

.ai-fix__check svg { width: 11px; height: 11px; }

@media (max-width: 900px) {
  .ai-demo { grid-template-columns: 1fr; }
  .ai-demo__side { padding: var(--sp-20); }
  .ai-gain__tiles { grid-template-columns: 1fr; }
  .ai-gain__name { width: 92px; font-size: 12px; }
}

/* иконка в карточке-подсказке (/ai — «что проверить руками») */
.fcard__icon {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-16);
  border-radius: 12px;
  background: rgba(76, 199, 36, 0.12);
  color: var(--c-accent-dark);
}

.fcard__icon svg {
  width: 21px;
  height: 21px;
}

/* когда есть иконка, заголовку не нужен верхний отступ от превью */
.fcard__icon + .fcard__title {
  margin-top: 0;
}

/* ---------- Помощь в конце инструкции (.b-help) ----------
   CTA под шагами: если по инструкции не получилось — открыть чат поддержки.
   Кнопка внутри текста, а не ссылка: она ничего не открывает по адресу,
   только дёргает виджет — псевдоссылки <a href="#"> ломают доступность
   и попадают в отчёт Google как некликабельные ссылки. */
.b-help {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-20);
  margin-top: var(--sp-48);
  padding: var(--sp-32);
  background: var(--bg-soft);
  border-radius: 6px;
}

.b-help__icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--c-on-dark);
  color: var(--c-accent);
}

.b-help__icon svg {
  width: 24px;
  height: 24px;
}

.b-help__title {
  margin-bottom: var(--sp-8);
  font-size: var(--fs-h4);
  font-weight: var(--fw-heading);
  line-height: 1.35;
  color: var(--c-heading);
}

.b-help__text {
  font-size: var(--fs-h6);
  line-height: 1.6;
  color: var(--c-text);
}

/* сбрасываем кнопочные дефолты — визуально это ссылка внутри абзаца */
.b-help__link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--c-accent-dark);
  text-decoration: underline;
  cursor: pointer;
  transition: 0.25s ease color;
}

.b-help__link:hover {
  color: var(--c-accent);
}

@media screen and (max-width: 767px) {
  .b-help {
    gap: var(--sp-16);
    margin-top: var(--sp-32);
    padding: var(--sp-24);
  }

  .b-help__icon {
    width: 40px;
    height: 40px;
  }
}

/* Ссылки внутри шагов инструкций. Раньше не были стилизованы вообще —
   на фоне обычного текста читались как текст, кликать по ним не догадывались. */
.b-look__title a,
.b-look__text a {
  color: var(--c-accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: 0.25s ease color;
}

.b-look__title a:hover,
.b-look__text a:hover {
  color: var(--c-accent);
}

/* Когда в одном шаге инструкции два скриншота подряд, они слипаются:
   у .b-look__image обнулён line-height, а собственных отступов у img нет. */
.b-look__image img + img {
  margin-top: var(--sp-16);
}

/* ---------- Код в инструкциях ----------
   Ни pre, ни code не были оформлены — только сброс шрифта из бутстраповской
   базы. Инлайновый <code> сливался с текстом, а блоки кода на webhooks шли
   голым моноширинным текстом без фона. */
.b-look__title code,
.b-look__text code {
  padding: 2px 6px;
  background: var(--bg-soft);
  border-radius: 4px;
  font-size: 0.92em;
  color: var(--c-heading);
  white-space: nowrap;
}

.b-look pre {
  margin: var(--sp-16) 0 0;
  padding: var(--sp-20);
  background: var(--bg-dark);
  border-radius: 6px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.65;
  color: #e6edf3;
}

/* внутри блока кода собственный фон и отступы не нужны — их даёт pre */
.b-look pre code {
  padding: 0;
  background: none;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}

@media screen and (max-width: 767px) {
  .b-look pre {
    padding: var(--sp-16);
    font-size: 12px;
  }
}

/* ---------- Таблицы в инструкциях ----------
   Общий компонент вместо page-local стилей: таблица нужна уже на двух
   страницах (webhooks, roistat). Обёртка .b-look__table-wrap даёт
   горизонтальную прокрутку — на узком экране таблица иначе распирает страницу. */
.b-look__table-wrap {
  margin: var(--sp-16) 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.b-look__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}

.b-look__table th,
.b-look__table td {
  padding: 10px 14px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  color: var(--c-text);
}

.b-look__table th {
  background: var(--bg-soft);
  font-weight: var(--fw-heading);
  color: var(--c-heading);
  white-space: nowrap;
}

/* ==========================================================================
   Посадочная под шаблон квиза (/example/{категория}/{шаблон})
   ========================================================================== */

/* Первый экран страницы шаблона: у общего .b-first padding 232px сверху —
   для этой страницы слишком воздушно, поджимаем (b-first--info не трогаем,
   он общий для 60+ страниц инструкций и категорий). */
.b-first--tpl {
  /* 190px: шапка тут absolute и занимает ~157px — меньше даёт крошку впритык под ней */
  padding-top: 190px;
  padding-bottom: var(--sp-56) !important;
}
.b-first--tpl .b-first__text {
  margin-bottom: var(--sp-32);
}

/* Тройка «для кого / когда / чем полезно» под H1 */
.b-usecase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-16);
  margin-top: var(--sp-8);
}
.b-usecase__item {
  background: var(--bg-soft);
  border-radius: 6px;
  padding: var(--sp-24);
}
.b-usecase__icon {
  width: 26px;
  height: 26px;
  margin: 0 auto var(--sp-12);
  color: var(--c-accent);
}
.b-usecase__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.b-usecase__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-8);
}
.b-usecase__value {
  font-size: var(--fs-h6);
  line-height: 1.45;
  color: var(--c-heading);
}

/* Живой квиз в теле страницы */
.b-tpl-quiz {
  margin: var(--sp-64) 0 var(--sp-56);
  text-align: center;
}
.b-tpl-quiz__head { margin-bottom: var(--sp-32); }
.b-tpl-quiz__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  color: var(--c-heading);
  margin-bottom: var(--sp-8);
}
.b-tpl-quiz__sub {
  font-size: var(--fs-h5);
  color: var(--c-text);
  line-height: 1.5;
}
.b-tpl-quiz__frame {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-soft);
  min-height: 480px;
}
.b-tpl-quiz__cta {
  margin-top: var(--sp-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
}
.b-tpl-quiz__note {
  font-size: var(--fs-h6);
  color: var(--c-muted);
}

/* Описание сценария */
.b-tpl-desc { margin-bottom: var(--sp-56); }
.b-tpl-desc__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-heading);
  color: var(--c-heading);
  margin-bottom: var(--sp-16);
}
.b-tpl-desc p {
  font-size: var(--fs-h5);
  line-height: 1.6;
  color: var(--c-text);
  margin-bottom: var(--sp-16);
}
.b-tpl-desc p:last-child { margin-bottom: 0; }

/* Другие шаблоны по теме. Сами карточки берут стили из .b-tabs--quizzes
   (обёртка в разметке) — здесь только отступы секции, свою сетку не заводим. */
/* margin-top обязателен: у секции FAQ выше нет нижнего отступа, и без него
   заголовок «Другие шаблоны» прилипает к последнему вопросу. 56px — общий шаг
   между секциями этой страницы. */
.b-tpl-related { margin-top: var(--sp-56); margin-bottom: var(--sp-56); }
/* На /example у .b-tabs--quizzes стоит margin-top:-90px — блок карточек подныривает
   под первый экран. Здесь над ним обычный заголовок, и этот подъём накрывал его
   карточками, поэтому отступ гасим. */
.b-tpl-related .b-tabs { margin-top: 0; padding-bottom: 0; }
.b-tpl-related__all {
  margin-top: var(--sp-24);
  text-align: center;
}
.b-tpl-related__all a {
  font-size: var(--fs-h6);
  font-weight: 600;
  color: var(--c-accent-dark);
  text-decoration: none;
}
.b-tpl-related__all a:hover { text-decoration: underline; }

@media screen and (max-width: 768px) {
  .b-first--tpl { padding-top: 120px; }
  .b-usecase { grid-template-columns: 1fr; gap: var(--sp-12); }
  .b-usecase__item { padding: var(--sp-20); }
  .b-tpl-quiz { margin: var(--sp-40) 0 var(--sp-40); }
  .b-tpl-quiz__title { font-size: var(--fs-h3); }
}

/* ══════════════════════════════════════════════════════════════════════
   Посадочная /calculator — герой с превью расчётов
   Стопка карточек-результатов + строка формулы под ними.
   ══════════════════════════════════════════════════════════════════════ */
.b-first--calc,
.b-first--test {
  background: var(--bg-dark);
  padding-bottom: 0 !important;
  overflow: hidden;
}

.b-first--calc .b-path,
.b-first--calc .b-path a,
.b-first--test .b-path,
.b-first--test .b-path a {
  color: rgba(255, 255, 255, 0.56);
}

.b-first--calc .b-path a:hover,
.b-first--test .b-path a:hover {
  color: var(--c-on-dark);
}

.b-first--calc .b-first__title,
.b-first--test .b-first__title {
  color: var(--c-on-dark);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.b-first--calc .b-first__text,
.b-first--test .b-first__text {
  color: rgba(255, 255, 255, 0.72);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* Сцена с карточками: тёмный верх, светлый низ — карточки лежат на стыке */
.calc-hero {
  position: relative;
  margin-top: var(--sp-56);
  padding-bottom: var(--sp-64);
}

.calc-hero__stack {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.calc-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(28, 39, 54, 0.18);
  padding: var(--sp-16) var(--sp-24);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--sp-16);
}

/* Две верхние карточки уходят вглубь: уже, темнее и частично перекрыты */
.calc-card--back {
  width: 74%;
  margin: 0 auto -34px;
  opacity: 0.55;
  transform: scale(0.94);
}

.calc-card--mid {
  width: 88%;
  margin: 0 auto -30px;
  opacity: 0.8;
  transform: scale(0.97);
}

.calc-card--front {
  width: 100%;
  padding: var(--sp-24);
  -ms-flex-align: start;
      align-items: flex-start;
}

.calc-card__pic {
  -ms-flex: none;
      flex: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--c-accent);
}

.calc-card__pic svg {
  width: 28px;
  height: 28px;
}

.calc-card--front .calc-card__pic svg {
  width: 44px;
  height: 44px;
}

.calc-card--front .calc-card__pic {
  width: 104px;
  height: 104px;
}

.calc-card__body {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  min-width: 0;
}

.calc-card__head {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: var(--sp-16);
}

.calc-card__title {
  font-weight: var(--fw-heading);
  font-size: var(--fs-h5);
  line-height: 1.3;
  color: var(--c-heading);
}

.calc-card--front .calc-card__title {
  font-size: var(--fs-h3);
}

.calc-card__sum {
  -ms-flex: none;
      flex: none;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-weight: var(--fw-heading);
  font-size: 16px;
  line-height: 1.4;
  white-space: nowrap;
}

.calc-card--front .calc-card__sum {
  font-size: var(--fs-h4);
  padding: 8px 18px;
}

.calc-card__label {
  margin-top: var(--sp-16);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-muted);
}

.calc-card__list {
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
}

.calc-card__list li {
  position: relative;
  padding-left: 18px;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text);
}

.calc-card__list li:before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
}

.calc-card__cta {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--sp-8);
  margin-top: var(--sp-16);
  padding: 10px 20px;
  border: 1px solid var(--c-accent);
  border-radius: 6px;
  color: var(--c-accent);
  font-weight: var(--fw-heading);
  font-size: 15px;
  text-decoration: none;
}

.calc-card__cta:hover {
  background: var(--c-accent);
  color: var(--c-on-dark);
}

/* Формула — «под капотом» карточек */
.calc-formula {
  position: relative;
  z-index: 2;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--sp-8);
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: -26px auto 0;
  padding: 14px 22px;
  border-radius: 12px;
  background: var(--bg-soft);
  box-shadow: 0 10px 30px rgba(28, 39, 54, 0.12);
  font-size: var(--fs-h5);
  color: var(--c-text);
}

.calc-formula__fx {
  font-style: italic;
  font-weight: var(--fw-heading);
  color: var(--c-muted);
}

.calc-formula__var {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--bg-dark);
  color: var(--c-on-dark);
  font-weight: var(--fw-heading);
  font-size: 15px;
}

@media (max-width: 768px) {
  .calc-hero { margin-top: var(--sp-40); padding-bottom: var(--sp-40); }
  .calc-card--back { display: none; }
  .calc-card--mid { width: 94%; margin-bottom: -26px; }
  .calc-card { padding: var(--sp-16); gap: var(--sp-12); }
  .calc-card--front { padding: var(--sp-20); }
  .calc-card__pic { width: 44px; height: 44px; border-radius: 10px; }
  .calc-card__pic svg { width: 22px; height: 22px; }
  .calc-card--front .calc-card__pic { width: 56px; height: 56px; }
  .calc-card--front .calc-card__pic svg { width: 28px; height: 28px; }
  /* Заголовок и сумма в столбик: в 375px они не помещаются в одну строку */
  .calc-card__head {
    display: block;
  }
  .calc-card__title,
  .calc-card--front .calc-card__title { font-size: 17px; }
  .calc-card__sum { display: inline-block; margin-top: 6px; font-size: 15px; }
  .calc-card--front .calc-card__sum { font-size: 17px; padding: 6px 14px; }
  .calc-card__label { margin-top: var(--sp-12); }
  .calc-formula { font-size: 15px; padding: 12px 16px; margin-top: -20px; }
}

/* ══════════════════════════════════════════════════════════════════════
   /calculator — блок «В чём сила квиз-калькулятора»
   Три карточки-демонстрации: расчёт по формуле, показ подходящего
   товара, сбор контактов. Визуалы собраны вёрсткой, без картинок.
   ══════════════════════════════════════════════════════════════════════ */
.cpw {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  margin-top: var(--sp-20);
  padding: var(--sp-16);
  background: var(--bg-soft);
  border-radius: 14px;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  min-height: 300px;
}

/* ── 1. Расчёт: вопросы со значениями + строка формулы ───────────────── */
.cpw__q {
  position: relative;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(28, 39, 54, 0.06);
}

.cpw__q + .cpw__q {
  margin-top: 10px;
}

.cpw__q--offset-l {
  margin-left: -10px;
  margin-right: 12px;
}

.cpw__q--offset-r {
  margin-left: 12px;
  margin-right: -10px;
}

.cpw__q-title {
  margin-bottom: 8px;
  font-weight: var(--fw-heading);
  font-size: 13px;
  line-height: 1.3;
  color: var(--c-heading);
}

.cpw__opt {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-text);
}

.cpw__radio {
  -ms-flex: none;
      flex: none;
  width: 13px;
  height: 13px;
  border: 2px solid var(--c-faint);
  border-radius: 50%;
}

.cpw__opt.is-active {
  color: var(--c-accent-dark);
  font-weight: var(--fw-heading);
}

.cpw__opt.is-active .cpw__radio {
  border-color: var(--c-accent);
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 6px var(--c-accent);
}

.cpw__val {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: var(--c-muted);
}

/* ползунок «Количество» */
.cpw__range {
  position: relative;
  height: 6px;
  margin: 10px 0 6px;
  border-radius: 100px;
  background: var(--border);
}

.cpw__range-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 38%;
  border-radius: 100px;
  background: var(--c-accent);
}

.cpw__range-dot {
  position: absolute;
  left: 38%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--c-accent);
}

.cpw__range-scale {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  font-size: 11px;
  color: var(--c-faint);
}

.cpw__range-scale b {
  color: var(--c-accent-dark);
}

/* итоговая формула */
.cpw__formula {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-size: 14px;
}

.cpw__formula i {
  font-weight: var(--fw-heading);
  opacity: .75;
}

.cpw__formula span {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  font-weight: var(--fw-heading);
  font-size: 13px;
}

/* ── 2. Показ товара: карточка с превью и ценой ──────────────────────── */
.cpw__goods {
  position: relative;
  padding-right: 26px;
}

.cpw__good {
  position: relative;
  z-index: 1;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(28, 39, 54, 0.07);
}

/* вторая карточка выглядывает справа-сзади */
.cpw__good--ghost {
  position: absolute;
  z-index: 0;
  right: 0;
  top: 18px;
  bottom: 18px;
  width: 64px;
  padding: 10px 0 0 10px;
  overflow: hidden;
  opacity: .5;
}

.cpw__good-pic {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  height: 116px;
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--c-accent);
}

.cpw__good--ghost .cpw__good-pic {
  height: 100%;
  border-radius: 8px 0 0 8px;
}

.cpw__good-pic svg {
  width: 34px;
  height: 34px;
}

.cpw__good-title {
  margin: 10px 0 8px;
  font-weight: var(--fw-heading);
  font-size: 14px;
  color: var(--c-heading);
}

.cpw__line {
  height: 8px;
  border-radius: 100px;
  background: var(--bg-soft);
}

.cpw__line + .cpw__line {
  margin-top: 6px;
}

.cpw__line--short {
  width: 62%;
}

.cpw__good-btn {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-weight: var(--fw-heading);
  font-size: 13px;
}

/* ── 3. Форма контактов ─────────────────────────────────────────────── */
.cpw__form {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(28, 39, 54, 0.06);
}

.cpw__form-title {
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-muted);
}

.cpw__field {
  height: 34px;
  border-radius: 8px;
  background: var(--bg-soft);
}

.cpw__field + .cpw__field {
  margin-top: 8px;
}

.cpw__form-btn {
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--c-accent);
  color: var(--c-on-dark);
  text-align: center;
  font-weight: var(--fw-heading);
  font-size: 14px;
}

/* кнопка под секцией */
.fsec__cta {
  margin-top: var(--sp-32);
}

@media (max-width: 768px) {
  .cpw { min-height: 0; }
  .cpw__q--offset-l,
  .cpw__q--offset-r { margin-left: 0; margin-right: 0; }
  .cpw__goods { padding-right: 0; }
  .cpw__good--ghost { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   /calculator — блок «Калькулятор по ссылке за пару шагов»
   Три шага на мягком акцентном фоне + полоса способов размещения
   с мини-макетами браузера. Всё вёрсткой, без картинок.
   ══════════════════════════════════════════════════════════════════════ */
.clink {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: var(--sp-24);
  background: rgba(76, 199, 36, 0.07);
  border-radius: 18px;
}

.clink__title {
  margin: 0 0 var(--sp-20);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--c-heading);
}

.clink__vis {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  min-height: 190px;
}

/* ── шаг 1: поле со ссылкой и кнопкой копирования ────────────────────── */
.clink__url {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px 10px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(28, 39, 54, 0.08);
}

.clink__url-text {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  color: var(--c-text);
}

.clink__url-btn {
  -ms-flex: none;
      flex: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--c-accent);
  color: var(--c-on-dark);
}

.clink__url-btn svg {
  width: 19px;
  height: 19px;
}

/* ── шаг 2: макет рекламного объявления ──────────────────────────────── */
.clink__ad {
  width: 100%;
  max-width: 230px;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(28, 39, 54, 0.08);
}

.clink__ad-pic {
  height: 74px;
  border-radius: 8px;
  background: var(--bg-soft);
}

.clink__ad-btn {
  margin-top: 12px;
  height: 30px;
  border-radius: 8px;
  background: var(--c-accent);
}

/* ── шаг 3: экран квиза с результатом ────────────────────────────────── */
.clink__quiz {
  width: 100%;
  max-width: 230px;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(28, 39, 54, 0.08);
  text-align: center;
}

.clink__quiz-label {
  font-size: 12px;
  color: var(--c-muted);
}

.clink__quiz-sum {
  margin: 6px 0 12px;
  font-weight: var(--fw-heading);
  font-size: 26px;
  line-height: 1.2;
  color: var(--c-accent-dark);
}

.clink__quiz-btn {
  height: 30px;
  border-radius: 8px;
  background: var(--c-accent);
}

.clink__bar {
  height: 8px;
  border-radius: 100px;
  background: var(--bg-soft);
}

.clink__bar + .clink__bar {
  margin-top: 7px;
}

.clink__bar--short {
  width: 60%;
}

/* ── полоса «Или разместите квиз на сайте» ──────────────────────────── */
.cplace {
  margin-top: var(--sp-16);
  padding: var(--sp-24);
  background: rgba(76, 199, 36, 0.07);
  border-radius: 18px;
}

.cplace__title {
  margin: 0 0 var(--sp-20);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--c-heading);
}

.cplace__grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-16);
}

.cplace__name {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-text);
}

/* мини-макет браузера */
.cbw {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(28, 39, 54, 0.07);
}

.cbw__top {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.cbw__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-faint);
}

.cbw__body {
  position: relative;
  padding: 10px;
  min-height: 96px;
}

.cbw__line {
  height: 7px;
  border-radius: 100px;
  background: var(--bg-soft);
}

.cbw__line + .cbw__line {
  margin-top: 6px;
}

.cbw__line--short {
  width: 58%;
}

/* варианты размещения */
.cbw__btn {
  width: 46%;
  height: 16px;
  margin-top: 12px;
  border-radius: 6px;
  background: var(--c-accent);
}

.cbw__banner {
  height: 16px;
  margin: -10px -10px 10px;
  background: var(--c-accent);
}

.cbw__modal {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 22%;
  bottom: 18%;
  border-radius: 8px;
  background: var(--c-accent);
}

.cbw__inline {
  height: 30px;
  margin: 8px 0;
  border-radius: 6px;
  background: var(--c-accent);
}

.cbw__widget {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 34%;
  height: 46px;
  border-radius: 8px;
  background: var(--c-accent);
}

@media (max-width: 1024px) {
  .cplace__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .clink { padding: var(--sp-20); }
  .clink__vis { min-height: 0; margin-top: var(--sp-8); }
  .cplace { padding: var(--sp-20); }
  .cplace__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-12); }
}

/* Ссылки внутри подписей к секциям посадочных: без выделения читаются
   как обычный текст и их не замечают (см. /calculator). Оформляем как
   в теле статей — акцентным цветом, плюс подчёркивание для наглядности. */
.fsec__desc a,
.fcard__text a {
  color: var(--c-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-text-decoration-color: rgba(76, 199, 36, 0.45);
          text-decoration-color: rgba(76, 199, 36, 0.45);
  transition: .2s ease color, .2s ease text-decoration-color;
}

.fsec__desc a:hover,
.fsec__desc a:focus,
.fcard__text a:hover,
.fcard__text a:focus {
  color: var(--c-accent);
  -webkit-text-decoration-color: var(--c-accent);
          text-decoration-color: var(--c-accent);
}

/* Облако ниш под карточками «Кому это нужно» (/calculator).
   Часть тегов — ссылки на категории каталога шаблонов, часть просто текст. */
.ftags {
  margin-top: var(--sp-24);
}

.ftags__lead {
  margin: 0 0 var(--sp-16);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-text);
}

.ftags__list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}

.ftag {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg-soft);
  font-weight: var(--fw-heading);
  font-size: 14px;
  line-height: 1.3;
  color: var(--c-heading);
}

a.ftag {
  text-decoration: none;
  transition: .2s ease background-color, .2s ease color;
}

a.ftag:hover,
a.ftag:focus {
  background: rgba(76, 199, 36, 0.14);
  color: var(--c-accent-dark);
}

@media (max-width: 768px) {
  .ftags__list { gap: 8px; }
  .ftag { padding: 9px 13px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Светлая шапка поверх тёмного первого экрана
   Страница объявляет @section('bodyClass', 'has-dark-hero').

   Два ограничения:
   1) только пока шапка не прилипла — при скролле .is-fixed даёт светлый фон;
   2) только на десктопе — в мобильном пункты меню лежат в выпадающей
      светлой панели, там белый текст был бы не виден.
   ══════════════════════════════════════════════════════════════════════ */
.app-header__logo-img--light {
  display: none;
}

/* Логотип и бургер лежат на тёмном фоне и в мобильной вёрстке тоже */
.has-dark-hero .app-header:not(.is-fixed) .app-header__logo-img--dark {
  display: none;
}

.has-dark-hero .app-header:not(.is-fixed) .app-header__logo-img--light {
  display: block;
}

.has-dark-hero .app-header:not(.is-fixed) .m-button .svg-icon__link {
  fill: var(--c-on-dark);
}

@media screen and (min-width: 1025px) {
  .has-dark-hero .app-header:not(.is-fixed) .app-header__menu a,
  .has-dark-hero .app-header:not(.is-fixed) .b-lk {
    color: var(--c-on-dark);
  }

  .has-dark-hero .app-header:not(.is-fixed) .app-header__menu a:hover,
  .has-dark-hero .app-header:not(.is-fixed) .app-header__menu a.active,
  .has-dark-hero .app-header:not(.is-fixed) .b-lk:hover {
    color: var(--c-accent);
  }

  .has-dark-hero .app-header:not(.is-fixed) .app-header__soc a {
    color: rgba(255, 255, 255, 0.72);
  }

  .has-dark-hero .app-header:not(.is-fixed) .app-header__soc a:hover {
    color: var(--c-on-dark);
  }

  .has-dark-hero .app-header:not(.is-fixed) .b-lk .svg-icon {
    color: rgba(255, 255, 255, 0.72);
  }

  .has-dark-hero .app-header:not(.is-fixed) .b-menu__dropdown-toggle .svg-icon__link {
    stroke: rgba(255, 255, 255, 0.72);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   /quiz-test — элементы, которых нет у калькулятора.
   Стопка карточек берётся готовая (.calc-hero / .calc-card), здесь только
   специфика теста: балл, отметки «верно/неверно» и шкала диапазонов.
   ══════════════════════════════════════════════════════════════════════ */
.tst-score {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
      align-items: baseline;
  gap: 4px;
  -ms-flex: none;
      flex: none;
  font-weight: var(--fw-heading);
  line-height: 1.1;
  color: var(--c-accent-dark);
  white-space: nowrap;
}

.tst-score b {
  font-size: 30px;
}

.tst-score span {
  font-size: 16px;
  color: var(--c-muted);
}

/* строка ответа с отметкой */
.tst-answers {
  margin-top: var(--sp-16);
}

.tst-answer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-text);
  border-top: 1px solid var(--border);
}

.tst-answer:first-child {
  border-top: none;
}

.tst-mark {
  -ms-flex: none;
      flex: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: var(--c-accent);
}

.tst-mark svg {
  width: 12px;
  height: 12px;
}

.tst-mark--wrong {
  background: var(--c-error);
}

.tst-answer__val {
  margin-left: auto;
  font-size: 13px;
  color: var(--c-muted);
}

/* шкала диапазонов баллов — аналог строки формулы у калькулятора */
.tst-scale {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sp-16);
}

.tst-range {
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--bg-soft);
  font-size: 13px;
  line-height: 1.3;
  color: var(--c-muted);
}

.tst-range.is-active {
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-weight: var(--fw-heading);
}

@media (max-width: 768px) {
  .tst-score b { font-size: 24px; }
  .tst-scale { gap: 6px; }
  .tst-range { padding: 7px 11px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   /quiz-test — живое демо теста: посетитель отвечает прямо на странице,
   видит проверку ответа, набирает баллы и получает результат.
   ══════════════════════════════════════════════════════════════════════ */
.tdemo {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-32);
  -ms-flex-align: start;
      align-items: start;
}

.tdemo__points {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: var(--sp-20);
}

.tdemo__point-title {
  margin: 0 0 6px;
  font-weight: var(--fw-heading);
  font-size: 17px;
  line-height: 1.35;
  color: var(--c-heading);
}

.tdemo__point-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
}

/* ── сам тест ───────────────────────────────────────────────────────── */
.tdemo__quiz {
  padding: var(--sp-24);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(28, 39, 54, 0.08);
}

.tq__top {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: var(--sp-16);
  margin-bottom: var(--sp-16);
  font-size: 13px;
  color: var(--c-muted);
}

.tq__score {
  font-weight: var(--fw-heading);
  color: var(--c-accent-dark);
}

.tq__bar {
  height: 6px;
  margin-bottom: var(--sp-20);
  border-radius: 100px;
  background: var(--bg-soft);
  overflow: hidden;
}

.tq__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: var(--c-accent);
  transition: .35s cubic-bezier(.16,1,.3,1) width;
}

.tq__q {
  margin-bottom: var(--sp-16);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h4);
  line-height: 1.35;
  color: var(--c-heading);
}

.tq__opts {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 10px;
}

.tq__opt {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-heading);
  text-align: left;
  cursor: pointer;
  transition: .18s ease border-color, .18s ease background-color;
}

.tq__opt:hover:not(:disabled) {
  border-color: var(--c-accent);
  background: rgba(76, 199, 36, 0.05);
}

.tq__opt:disabled {
  cursor: default;
}

/* отметка слева: пустой кружок → галочка или крестик */
.tq__opt i {
  -ms-flex: none;
      flex: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--c-faint);
  border-radius: 50%;
  color: #fff;
}

.tq__opt i svg {
  width: 12px;
  height: 12px;
  opacity: 0;
}

.tq__opt.is-right {
  border-color: var(--c-accent);
  background: rgba(76, 199, 36, 0.08);
}

.tq__opt.is-right i {
  border-color: var(--c-accent);
  background: var(--c-accent);
}

.tq__opt.is-wrong {
  border-color: var(--c-error);
  background: rgba(255, 79, 79, 0.06);
}

.tq__opt.is-wrong i {
  border-color: var(--c-error);
  background: var(--c-error);
}

.tq__opt.is-right i svg,
.tq__opt.is-wrong i svg {
  opacity: 1;
}

.tq__gain {
  margin-left: auto;
  font-weight: var(--fw-heading);
  font-size: 13px;
  color: var(--c-accent-dark);
}

/* пояснение после ответа — то самое «комментарий после валидации» */
.tq__note {
  margin-top: var(--sp-16);
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text);
}

.tq__next {
  margin-top: var(--sp-16);
  padding: 12px 18px;
  border: none;
  border-radius: 8px;
  background: var(--c-accent);
  color: var(--c-on-dark);
  font: inherit;
  font-weight: var(--fw-heading);
  font-size: 15px;
  cursor: pointer;
  transition: .18s ease background-color;
}

.tq__next:hover {
  background: var(--c-accent-dark);
}

/* экран результата */
.tq__result {
  text-align: center;
}

.tq__result-label {
  font-size: 14px;
  color: var(--c-muted);
}

.tq__result-score {
  margin: 6px 0 4px;
  font-weight: var(--fw-heading);
  font-size: 44px;
  line-height: 1.1;
  color: var(--c-accent-dark);
}

.tq__result-level {
  margin-bottom: 10px;
  font-weight: var(--fw-heading);
  font-size: var(--fs-h4);
  color: var(--c-heading);
}

.tq__result-text {
  margin: 0 auto var(--sp-20);
  max-width: 420px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text);
}

.tq__result-actions {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px;
}

.tq__restart {
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--c-text);
  cursor: pointer;
  transition: .18s ease border-color, .18s ease color;
}

.tq__restart:hover {
  border-color: var(--c-accent);
  color: var(--c-accent-dark);
}

@media (max-width: 1024px) {
  .tdemo { grid-template-columns: 1fr; gap: var(--sp-24); }
}

@media (max-width: 768px) {
  .tdemo__quiz { padding: var(--sp-20); }
  .tq__opt { padding: 12px 14px; font-size: 14px; }
  .tq__result-score { font-size: 36px; }
}

/* ══════════════════════════════════════════════════════════════════════
   /feedback — визуал формы в героe. Стопка карточек общая
   (.calc-hero / .calc-card), здесь только поля и бейджи мессенджеров.
   ══════════════════════════════════════════════════════════════════════ */
.frm-field {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  line-height: 1.3;
  color: var(--c-faint);
}

.frm-field + .frm-field {
  margin-top: 8px;
}

.frm-field svg {
  -ms-flex: none;
      flex: none;
  width: 15px;
  height: 15px;
  color: var(--c-muted);
}

.frm-field b {
  margin-left: auto;
  font-weight: var(--fw-heading);
  font-size: 12px;
  color: var(--c-accent-dark);
}

.frm-msgr {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.frm-msgr span {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 100px;
  background: rgba(76, 199, 36, 0.1);
  font-size: 13px;
  color: var(--c-accent-dark);
}

.frm-btn {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--c-accent);
  color: var(--c-on-dark);
  text-align: center;
  font-weight: var(--fw-heading);
  font-size: 15px;
}

.frm-steps {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--c-muted);
}

.frm-steps i {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  height: 4px;
  border-radius: 100px;
  background: var(--bg-soft);
}

.frm-steps i.is-done {
  background: var(--c-accent);
}

/* ══════════════════════════════════════════════════════════════════════
   /feedback — сетка «что умеет форма»: карточка = текст + визуал.
   Визуалы собраны вёрсткой, чужие логотипы не используются.
   ══════════════════════════════════════════════════════════════════════ */
.fvis {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  min-height: 210px;
  margin-top: var(--sp-20);
  padding: var(--sp-16);
  background: var(--bg-soft);
  border-radius: 14px;
}

.fvis__card {
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(28, 39, 54, 0.07);
}

/* — плитки сервисов вместо чужих логотипов — */
.fvis__apps {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  -ms-flex-pack: center;
      justify-content: center;
}

.fvis__app {
  padding: 9px 13px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border);
  font-weight: var(--fw-heading);
  font-size: 13px;
  line-height: 1.2;
  color: var(--c-heading);
  box-shadow: 0 4px 12px rgba(28, 39, 54, 0.05);
}

.fvis__app--more {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-dark);
}

/* — два шага формы — */
.fvis__steps {
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -ms-flex-align: start;
      align-items: flex-start;
}

.fvis__step {
  -ms-flex: 1 1 0;
      flex: 1 1 0;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(28, 39, 54, 0.07);
}

.fvis__step-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--bg-dark);
  color: var(--c-on-dark);
  font-size: 11px;
  line-height: 1.4;
}

.fvis__step-q {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--c-heading);
}

.fvis__input {
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

.fvis__input + .fvis__input {
  margin-top: 6px;
}

.fvis__mini-btn {
  margin-top: 8px;
  height: 22px;
  border-radius: 6px;
  background: var(--c-accent);
}

/* — бонус за контакт — */
.fvis__bonus {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--c-accent);
  color: var(--c-on-dark);
}

.fvis__bonus-label {
  font-size: 13px;
  opacity: .9;
}

.fvis__bonus-sum {
  font-weight: var(--fw-heading);
  font-size: 22px;
  line-height: 1.1;
  white-space: nowrap;
}

.fvis__gift {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(28, 39, 54, 0.06);
  font-size: 13px;
  color: var(--c-text);
}

.fvis__gift svg {
  -ms-flex: none;
      flex: none;
  width: 16px;
  height: 16px;
  color: var(--c-accent);
}

/* — темы оформления — */
.fvis__theme {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: #fff;
  border-radius: 8px;
  font-size: 13px;
  color: var(--c-text);
}

.fvis__theme + .fvis__theme {
  margin-top: 6px;
}

.fvis__theme.is-active {
  outline: 2px solid var(--c-accent);
}

.fvis__dots {
  display: -ms-flexbox;
  display: flex;
  gap: 5px;
}

.fvis__dots i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(107, 128, 159, 0.25);
}

/* — мессенджеры — */
.fvis__msgrs {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 10px;
}

.fvis__msgr {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(28, 39, 54, 0.06);
  font-weight: var(--fw-heading);
  font-size: 14px;
  color: var(--c-heading);
}

.fvis__msgr-ico {
  -ms-flex: none;
      flex: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
}

.fvis__msgr-ico svg {
  width: 17px;
  height: 17px;
}

.fvis__msgr-ico--tg { background: #29a9eb; }
.fvis__msgr-ico--wa { background: #25d366; }

@media (max-width: 768px) {
  .fvis { min-height: 0; }
  .fvis__steps { -ms-flex-direction: column; flex-direction: column; }
}

/* Список сервисов в инструкциях: в одну колонку читается плохо — на Apix-Drive
   их полсотни и страница вытягивалась на несколько экранов. */
.b-look__cols {
  margin: var(--sp-16) 0 0;
  padding: 0;
  list-style: none;
  columns: 3;
  column-gap: var(--sp-32);
  font-size: var(--fs-h6);
  line-height: 2;
  color: var(--c-text);
}

.b-look__cols li {
  break-inside: avoid;
}

@media screen and (max-width: 767px) {
  .b-look__cols {
    columns: 2;
    column-gap: var(--sp-20);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   /partners — таблица «кому подходит партнёрство».
   Сделана сеткой, а не <table>: на мобильном строки перестраиваются
   в карточки с подписями колонок.
   ══════════════════════════════════════════════════════════════════════ */
.ptab {
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}

.ptab__row {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: var(--sp-24);
  padding: var(--sp-24);
}

.ptab__row + .ptab__row {
  border-top: 1px solid var(--border);
}

.ptab__row--head {
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
  background: var(--bg-soft);
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-muted);
}

.ptab__who {
  font-weight: var(--fw-heading);
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--c-accent-dark);
}

.ptab__where,
.ptab__how {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text);
}

/* подписи колонок для мобильной раскладки */
.ptab__label {
  display: none;
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-faint);
}

.ptab__cta {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  margin-top: var(--sp-32);
}

@media (max-width: 1024px) {
  .ptab__row { grid-template-columns: 1fr 1fr; }
  .ptab__row--head { display: none; }
  .ptab__who { grid-column: 1 / -1; }
  .ptab__label { display: block; }
}

@media (max-width: 768px) {
  .ptab__row { grid-template-columns: 1fr; gap: var(--sp-16); padding: var(--sp-20); }
  .ptab__who { font-size: 18px; }
  .ptab__where,
  .ptab__how { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════
   /partners — блок «почему выгодно»: слева две карточки, справа крупная
   с доходом и кнопкой. Асимметрия расставляет акцент на главном.
   ══════════════════════════════════════════════════════════════════════ */
.pben {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sp-24);
  -ms-flex-align: start;
      align-items: start;
}

.pben__col {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: var(--sp-24);
}

.pben__card {
  padding: var(--sp-32);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
}

.pben__card--main {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
}

.pben__title {
  margin: 0 0 var(--sp-16);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--c-heading);
}

.pben__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-text);
}

.pben__text + .pben__text {
  margin-top: var(--sp-12);
}

.pben__accent {
  color: var(--c-accent-dark);
  font-weight: var(--fw-heading);
}

/* строка с расчётом дохода */
.pben__calc {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--sp-20);
}

.pben__calc-item {
  -ms-flex: 1 1 130px;
      flex: 1 1 130px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-soft);
}

.pben__calc-plan {
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-muted);
}

.pben__calc-sum {
  margin-top: 2px;
  font-weight: var(--fw-heading);
  font-size: 20px;
  line-height: 1.2;
  color: var(--c-accent-dark);
  white-space: nowrap;
}

.pben__cta {
  margin-top: var(--sp-24);
}

@media (max-width: 1024px) {
  .pben { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .pben { gap: var(--sp-16); }
  .pben__col { gap: var(--sp-16); }
  .pben__card { padding: var(--sp-24); }
  .pben__calc-sum { font-size: 18px; }
}

/* Блок «Квиз с ИИ» на главной: кнопка и ссылка под демо */
.fsec__actions {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--sp-16) var(--sp-32);
  margin-top: var(--sp-32);
}

/* ── «Как работает квиз-маркетинг» на главной: четыре карточки-шага ──
   Слева номер, название, текст и чипы с иконками, справа мокап из готовых
   компонентов страницы функционала (.ai-quiz, .qmock, .qres, .qwin). */
.hwork {
  padding: var(--sp-64) 0 var(--sp-24);
}

.hwork__title {
  margin: 0 0 var(--sp-16);
  font-size: var(--fs-h2);
  color: var(--c-heading);
}

.hwork__title span {
  color: var(--c-accent);
}

.hwork__lead {
  max-width: 720px;
  margin: 0 0 var(--sp-40);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-text);
}

.hwork__card {
  display: -ms-grid;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-40);
  -ms-flex-align: center;
      align-items: center;
  padding: var(--sp-48);
  margin-bottom: var(--sp-24);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.hwork__num {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-20);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 20px;
  font-weight: var(--fw-heading);
  color: var(--c-heading);
}

.hwork__name {
  margin: 0 0 var(--sp-12);
  font-size: var(--fs-h3);
  font-weight: var(--fw-heading);
  line-height: 1.2;
  color: var(--c-heading);
}

.hwork__text {
  margin: 0 0 var(--sp-24);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-text);
}

.hwork__cap {
  margin-bottom: var(--sp-12);
  font-size: 13px;
  font-weight: var(--fw-heading);
  color: var(--c-muted);
}

.hwork__chips {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--sp-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hwork__chips li {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--c-text);
}

.hwork__ico {
  -ms-flex: none;
      flex: none;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--c-muted);
}

.hwork__ico svg {
  width: 16px;
  height: 16px;
}

.hwork__vis {
  min-width: 0;
}

.hwork__quiz {
  box-shadow: 0 16px 40px rgba(31, 45, 61, 0.08);
}

.hwork__quiz-sub {
  margin: -6px 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-muted);
}

.hwork__places {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-16);
  margin-top: var(--sp-20);
}

.hwork__places .qwin {
  height: 96px;
}

.hwork__mocks {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-16);
}

.hwork__field {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.hwork__field span {
  font-size: 11px;
  color: var(--c-muted);
}

.hwork__field b {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-heading);
}

.hwork__lead-card {
  margin-top: var(--sp-16);
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-dark);
  color: var(--c-on-dark);
  font-size: 14px;
  line-height: 1.5;
}

.hwork__lead-head {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.hwork__lead-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(76, 199, 36, 0.25);
}

.hwork__lead-row b {
  font-weight: var(--fw-heading);
}

.hwork__lead-to {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.hwork__lead-to span {
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

@media screen and (max-width: 1023px) {
  .hwork__card {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sp-32);
  }
}

@media screen and (max-width: 768px) {
  .hwork {
    padding: var(--sp-40) 0 var(--sp-8);
  }

  .hwork__lead {
    font-size: 16px;
    margin-bottom: var(--sp-24);
  }

  .hwork__card {
    padding: var(--sp-24);
    gap: var(--sp-24);
    border-radius: 12px;
  }

  .hwork__chips {
    grid-template-columns: minmax(0, 1fr);
  }

  .hwork__places {
    gap: var(--sp-12);
  }

  .hwork__places .qplace__cap {
    font-size: 12px;
  }
}

/* ── «Результаты говорят за себя» на главной: отзывы вперемешку с кейсами ──
   Сетка 3 колонки: цитата занимает две, карточка кейса одну; широкая цитата — все три. */
.hproof {
  padding: var(--sp-64) 0 var(--sp-24);
}

.hproof__title {
  margin: 0 0 var(--sp-12);
  font-size: var(--fs-h2);
  color: var(--c-heading);
}

.hproof__title span {
  color: var(--c-accent);
}

.hproof__lead {
  margin: 0 0 var(--sp-40);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-text);
}

.hproof__grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-24);
}

.hproof__quote {
  position: relative;
  grid-column: span 2;
  margin: 0;
  padding: var(--sp-40);
  font-size: inherit;
  font-style: normal;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}

/* глобальный blockquote рисует зелёную полосу через :before — здесь она не нужна */
.hproof__quote:before {
  content: none;
}

.hproof__quote--tint {
  background: var(--bg-soft);
  border-color: transparent;
}

.hproof__quote--tint2 {
  background: #eef8e8;
  border-color: transparent;
}

.hproof__text {
  margin: 0 0 var(--sp-20);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-heading);
}

.hproof__author {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-muted);
}

.hproof__author b {
  font-weight: var(--fw-heading);
  color: var(--c-heading);
}

.hproof__case {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: var(--sp-12);
  color: var(--c-heading);
  text-decoration: none;
}

.hproof__pic {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
}

.hproof__pic img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform .35s ease;
}

.hproof__case:hover .hproof__pic img {
  transform: scale(1.03);
}

.hproof__tags {
  position: absolute;
  left: 12px;
  top: 12px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
}

.hproof__tags span {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-heading);
}

.hproof__tags .hproof__tag--accent {
  background: var(--c-accent);
  color: #fff;
}

.hproof__case-title {
  font-size: 16px;
  font-weight: var(--fw-heading);
  line-height: 1.4;
}

.hproof__case:hover .hproof__case-title {
  color: var(--c-accent-dark);
}

.hproof__more {
  margin-top: var(--sp-32);
}

.hproof__more .b-work__link {
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: auto;
}

@media screen and (max-width: 1023px) {
  .hproof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hproof__quote {
    grid-column: span 2;
  }
}

@media screen and (max-width: 768px) {
  .hproof {
    padding: var(--sp-40) 0 var(--sp-8);
  }

  .hproof__lead {
    font-size: 16px;
    margin-bottom: var(--sp-24);
  }

  .hproof__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-16);
  }

  .hproof__quote {
    grid-column: span 1;
    padding: var(--sp-24);
    border-radius: 12px;
  }

  .hproof__text {
    font-size: 16px;
  }

  .hproof__pic {
    border-radius: 12px;
  }
}

/* ── «Что ещё умеет квиз» на главной: две карточки, слева список задач
   с переключением, справа мокап выбранной задачи. Переключение — в app.js (initUseCards). */
.huse {
  padding: var(--sp-64) 0 var(--sp-24);
}

.huse__title {
  margin: 0 0 var(--sp-12);
  font-size: var(--fs-h2);
  color: var(--c-heading);
}

.huse__title span {
  color: var(--c-accent);
}

.huse__lead {
  max-width: 720px;
  margin: 0 0 var(--sp-40);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-text);
}

.huse__card {
  display: -ms-grid;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-40);
  padding: var(--sp-32);
  margin-bottom: var(--sp-24);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.huse__name {
  margin: 0 0 var(--sp-24);
  font-size: var(--fs-h3);
  font-weight: var(--fw-heading);
  line-height: 1.2;
  color: var(--c-heading);
}

.huse__list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: var(--sp-8);
}

.huse__item {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin: 0 -14px;
  width: calc(100% + 28px);
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background .2s ease;
}

.huse__item:hover {
  background: var(--bg-soft);
}

.huse__item.is-active {
  cursor: default;
}

.huse__item-title {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: var(--fw-heading);
  line-height: 1.3;
  color: var(--c-muted);
  transition: color .2s ease;
}

.huse__item.is-active .huse__item-title {
  color: var(--c-heading);
}

.huse__badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef8e8;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  color: var(--c-accent-dark);
}

.huse__item-text {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-faint);
  transition: color .2s ease;
}

.huse__item.is-active .huse__item-text {
  color: var(--c-text);
}

.huse__btn {
  display: none;
  margin-top: 12px;
  padding: 9px 16px;
  border: 1px solid var(--c-heading);
  border-radius: 8px;
  font-size: 14px;
  font-weight: var(--fw-heading);
  color: var(--c-heading);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.huse__item.is-active .huse__btn {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.huse__btn:hover {
  background: var(--c-heading);
  color: #fff;
}

.huse__vis {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  min-height: 420px;
  padding: var(--sp-40);
  border-radius: 16px;
}

.huse__vis--soft {
  background: var(--bg-soft);
}

.huse__vis--dark {
  background: var(--bg-dark);
}

.huse__panel {
  display: none;
  width: 100%;
  max-width: 540px;
}

.huse__panel.is-active {
  display: block;
  animation: huseIn .3s ease;
}

@keyframes huseIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media screen and (max-width: 1023px) {
  .huse__card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-24);
  }

  .huse__vis {
    min-height: 0;
    padding: var(--sp-24);
  }
}

@media screen and (max-width: 768px) {
  .huse {
    padding: var(--sp-40) 0 var(--sp-8);
  }

  .huse__lead {
    font-size: 16px;
    margin-bottom: var(--sp-24);
  }

  .huse__card {
    padding: var(--sp-20);
    border-radius: 12px;
  }

  .huse__item {
    margin: 0 -8px;
    width: calc(100% + 16px);
    padding: 10px 8px;
  }

  .huse__vis {
    padding: var(--sp-16);
    border-radius: 12px;
  }
}

/* ── Экран квиза для мокапов главной (.hqz): вид снят с quiz.leadforms.ru,
   акцент квиза #1f9d68 из mvpkit. Используется в блоке «Что ещё умеет квиз». */
.hqz {
  --qa: #1f9d68;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  background: #f9f9f8;
  border-radius: 12px;
  box-shadow: 0 24px 56px rgba(31, 45, 61, 0.16);
  overflow: hidden;
  text-align: left;
  font-size: 13px;
  color: #374151;
}

.hqz__bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: 12px;
  padding: 11px 18px;
  background: #fff;
  border-bottom: 1px solid #ececea;
  font-size: 11px;
  color: #6b7280;
}

.hqz__bar b {
  font-weight: 600;
  color: #1f2937;
}

.hqz__body {
  padding: 20px 18px 18px;
}

.hqz__body--split,
.hqz__body--aside {
  display: -ms-grid;
  display: grid;
  gap: 16px;
}

.hqz__body--split {
  grid-template-columns: 132px minmax(0, 1fr);
}

.hqz__body--aside {
  grid-template-columns: minmax(0, 1fr) 168px;
}

.hqz__main {
  min-width: 0;
}

.hqz__h {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: #111827;
}

.hqz__hint {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 11px;
  border: 1px solid #e2e2df;
  border-radius: 20px;
  font-size: 10px;
  color: #6b7280;
}

.hqz__opts {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hqz__opts--col {
  grid-template-columns: 1fr;
}

.hqz__o {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid #e6e6e3;
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
  color: #374151;
}

.hqz__radio {
  -ms-flex: none;
      flex: none;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid #d1d5db;
  border-radius: 50%;
  background: #fff;
  color: #fff;
}

.hqz__radio svg {
  width: 9px;
  height: 9px;
}

.hqz__o--pick {
  border-color: var(--qa);
  background: rgba(31, 157, 104, 0.05);
  box-shadow: 0 0 0 1px var(--qa);
}

.hqz__o--pick .hqz__radio {
  border-color: var(--qa);
  background: var(--qa);
}

.hqz__o--right {
  border-color: var(--qa);
  background: rgba(31, 157, 104, 0.07);
}

.hqz__o--right .hqz__radio {
  border-color: var(--qa);
  background: var(--qa);
}

.hqz__o--wrong {
  border-color: #f0a2a2;
  background: rgba(226, 75, 74, 0.06);
}

.hqz__o--wrong .hqz__radio {
  border-color: #e24b4a;
  background: #e24b4a;
}

.hqz__tag {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}

.hqz__tag--ok {
  background: rgba(31, 157, 104, 0.12);
  color: #0f6e56;
}

.hqz__tag--no {
  background: rgba(226, 75, 74, 0.1);
  color: #a32d2d;
}

.hqz__swatch {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.hqz__verdict {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(31, 157, 104, 0.1);
  font-size: 12px;
  font-weight: 600;
  color: #0f6e56;
}

.hqz__verdict svg {
  width: 14px;
  height: 14px;
}

.hqz__foot {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: #fff;
  border-top: 1px solid #ececea;
}

.hqz__progress {
  -ms-flex: 1;
      flex: 1;
  height: 5px;
  border-radius: 5px;
  background: #e8e8e5;
  overflow: hidden;
}

.hqz__progress span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--qa);
}

.hqz__step {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
}

.hqz__next,
.hqz__btn {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--qa);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.hqz__next svg,
.hbrowser__btn svg {
  width: 14px;
  height: 14px;
}

.hqz__btn {
  width: 100%;
  padding: 12px 16px;
  font-size: 13px;
}

/* форма обратной связи */
.hqz__field {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid #e6e6e3;
  border-radius: 10px;
  background: #fff;
}

.hqz__field span {
  font-size: 10px;
  color: #9ca3af;
}

.hqz__field b {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}

.hqz__field--area b {
  min-height: 34px;
  line-height: 1.4;
}

.hqz__consent {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  font-size: 10px;
  color: #6b7280;
}

.hqz__consent i {
  -ms-flex: none;
      flex: none;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--qa);
  color: #fff;
}

.hqz__consent svg {
  width: 9px;
  height: 9px;
}

.hqz__toast {
  position: absolute;
  right: 14px;
  top: 52px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #1c2736;
  box-shadow: 0 10px 24px rgba(31, 45, 61, 0.25);
  font-size: 11px;
  font-weight: 500;
  color: #fff;
}

.hqz__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(76, 199, 36, 0.3);
}

/* видеоконсультант */
.hqz__video {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: linear-gradient(160deg, #cfd8e3 0%, #7d8ea3 60%, #4a5a6e 100%);
  overflow: hidden;
}

.hqz__play {
  position: absolute;
  left: 50%;
  top: 42%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.hqz__play svg {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

.hqz__video-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 24px 10px 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  color: #fff;
}

.hqz__video-cap b {
  font-size: 11px;
  font-weight: 600;
}

.hqz__video-cap span {
  font-size: 10px;
  opacity: 0.8;
}

/* бонусы сбоку, как в реальном квизе */
.hqz__aside {
  padding: 12px;
  border: 1px solid #e6e6e3;
  border-radius: 12px;
  background: #fff;
}

.hqz__aside-title {
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7280;
}

.hqz__bonus {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid #f1f1ef;
  font-size: 11px;
  color: #9ca3af;
}

.hqz__bonus i {
  font-style: normal;
  font-size: 14px;
}

.hqz__bonus span {
  -ms-flex: 1;
      flex: 1;
}

.hqz__bonus em {
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: #c4c8cf;
}

.hqz__bonus em svg {
  width: 14px;
  height: 14px;
}

.hqz__bonus.is-open {
  color: #111827;
}

.hqz__bonus.is-open em {
  color: var(--qa);
}

.hqz__grow {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(31, 157, 104, 0.1);
  font-size: 10px;
  color: #0f6e56;
}

.hqz__grow b {
  font-size: 13px;
  font-weight: 700;
}

/* ── Окно браузера с квиз-сайтом ── */
.hbrowser {
  --qa: #1f9d68;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 56px rgba(31, 45, 61, 0.16);
  overflow: hidden;
  text-align: left;
}

.hbrowser__bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #f1f3f6;
  border-bottom: 1px solid #e6e6e3;
}

.hbrowser__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d5d9df;
}

.hbrowser__url {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  color: #374151;
}

.hbrowser__url svg {
  width: 11px;
  height: 11px;
  color: var(--qa);
}

.hbrowser__page {
  display: -ms-grid;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 20px;
  -ms-flex-align: center;
      align-items: center;
  padding: 26px 22px;
  background: #f9f9f8;
}

.hbrowser__kicker {
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--qa);
}

.hbrowser__h {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
}

.hbrowser__p {
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}

.hbrowser__btn {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--qa);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.hbrowser__meta {
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
  margin-top: 12px;
  font-size: 10px;
  color: #9ca3af;
}

.hbrowser__pic {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background: linear-gradient(160deg, #e6ede4 0%, #b9cbb5 55%, #7f9a7a 100%);
  color: rgba(255, 255, 255, 0.9);
}

.hbrowser__pic svg {
  width: 56px;
  height: 56px;
}

.hbrowser__foot {
  padding: 8px 14px;
  border-top: 1px solid #ececea;
  font-size: 10px;
  text-align: right;
  color: #9ca3af;
}

.hbrowser__foot b {
  font-weight: 600;
  color: var(--c-accent-dark);
}

/* калькулятор с посадочной /calculator внутри тёмной панели */
.calc-hero--home {
  width: 100%;
}

.calc-hero--home .calc-hero__stack {
  max-width: none;
}

@media screen and (max-width: 480px) {
  .hqz__body--split,
  .hqz__body--aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .hqz__video {
    aspect-ratio: 16 / 9;
  }

  .hbrowser__page {
    grid-template-columns: minmax(0, 1fr);
  }

  .hbrowser__pic {
    aspect-ratio: 16 / 7;
  }

  .hqz__toast {
    position: static;
    margin: 0 18px 16px;
  }
}

/* Калькулятор в узкой панели «Что ещё умеет квиз»: компактнее, чем на /calculator */
.calc-hero--home .calc-card {
  padding: 12px 16px;
  border-radius: 12px;
}

.calc-hero--home .calc-card--front {
  padding: 18px 20px;
}

.calc-hero--home .calc-card__pic {
  width: 48px;
  height: 48px;
}

.calc-hero--home .calc-card__pic svg {
  width: 22px;
  height: 22px;
}

.calc-hero--home .calc-card__title {
  font-size: 14px;
}

.calc-hero--home .calc-card--front .calc-card__title {
  font-size: 17px;
}

.calc-hero--home .calc-card__sum {
  padding: 4px 11px;
  font-size: 13px;
}

.calc-hero--home .calc-card__label,
.calc-hero--home .calc-card__list {
  font-size: 12px;
}

.calc-hero--home .calc-card__cta {
  margin-top: 10px;
  padding: 8px 14px;
  font-size: 13px;
  white-space: nowrap;
}

.calc-hero--home .calc-card__cta svg {
  width: 14px;
  height: 14px;
}

.calc-hero--home .calc-formula {
  margin: 16px auto 0;
  font-size: 13px;
}

/* ── Мокапы в блоке «Почему конверсия квиза выше»: вместо картинок whypic1–3.
   Размеры повторяют картинки (120×255 и 176×90), чтобы не трогать раскладку графика. */
.cmk {
  --qa: #1f9d68;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  box-sizing: border-box;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(31, 45, 61, 0.14);
  overflow: hidden;
  text-align: left;
  font-size: 7px;
  line-height: 1.2;
  color: #374151;
}

.cmk--land {
  width: 120px;
  height: 255px;
  gap: 6px;
  padding: 0 0 0;
  background: #fafafa;
}

.cmk--quiz,
.cmk--result {
  width: 176px;
  height: 90px;
  background: #f9f9f8;
}

/* обычный сайт: шапка, баннер, текст, одинокая форма, ещё контент */
.cmk__nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 4px;
  padding: 5px 7px;
  background: #fff;
  border-bottom: 1px solid #ececea;
}

.cmk__nav i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #e8a33d;
}

.cmk__nav span {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: #d7dae0;
}

.cmk__nav b {
  margin-left: auto;
  width: 18px;
  height: 7px;
  border-radius: 2px;
  background: #e8a33d;
}

.cmk__hero {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 4px;
  margin: 0 6px;
  padding: 10px 8px;
  border-radius: 4px;
  background: linear-gradient(135deg, #3b4653 0%, #1c2736 100%);
}

.cmk__hero span {
  width: 70%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
}

.cmk__hero .cmk__hero-sub {
  width: 90%;
  height: 3px;
  background: rgba(255, 255, 255, 0.4);
}

.cmk__hero em {
  margin-top: 4px;
  width: 34px;
  height: 8px;
  border-radius: 2px;
  background: #e8a33d;
}

.cmk__lines {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 3px;
  padding: 0 8px;
}

.cmk__lines span {
  height: 3px;
  border-radius: 2px;
  background: #dfe2e7;
}

.cmk__lines .cmk__short {
  width: 60%;
}

.cmk__form {
  margin: 0 6px;
  padding: 6px;
  border: 1px solid #e6e6e3;
  border-radius: 4px;
  background: #fff;
}

.cmk__form-title {
  margin-bottom: 4px;
  font-weight: 600;
  color: #111827;
}

.cmk__input {
  height: 12px;
  padding: 0 4px;
  margin-bottom: 4px;
  border: 1px solid #d7dae0;
  border-radius: 3px;
  line-height: 12px;
  font-size: 6px;
  color: #9ca3af;
}

.cmk__submit {
  height: 12px;
  border-radius: 3px;
  background: #e8a33d;
  text-align: center;
  line-height: 12px;
  font-size: 6px;
  font-weight: 600;
  color: #fff;
}

.cmk__grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0 8px;
}

.cmk__grid span {
  height: 18px;
  border-radius: 3px;
  background: #eceef2;
}

.cmk__foot {
  margin-top: auto;
  height: 18px;
  background: #1c2736;
}

/* экран квиза и экран результата */
.cmk__bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 5px 8px;
  background: #fff;
  border-bottom: 1px solid #ececea;
  font-size: 6px;
  color: #6b7280;
}

.cmk__bar b {
  font-weight: 600;
  color: #1f2937;
}

.cmk__q {
  padding: 6px 8px 4px;
  font-size: 8px;
  font-weight: 700;
  color: #111827;
}

.cmk__opts {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 0 8px;
}

.cmk__opts span {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 4px;
  padding: 4px 5px;
  border: 1px solid #e6e6e3;
  border-radius: 4px;
  background: #fff;
  font-size: 6px;
  white-space: nowrap;
}

.cmk__opts i {
  width: 6px;
  height: 6px;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  background: #fff;
}

.cmk__opts .is-on {
  border-color: var(--qa);
  box-shadow: 0 0 0 1px var(--qa);
}

.cmk__opts .is-on i {
  border-color: var(--qa);
  background: var(--qa);
}

.cmk__qfoot {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 5px 8px;
  background: #fff;
  border-top: 1px solid #ececea;
}

.cmk__progress {
  -ms-flex: 1;
      flex: 1;
  height: 3px;
  border-radius: 3px;
  background: #e8e8e5;
  overflow: hidden;
}

.cmk__progress i {
  display: block;
  height: 100%;
  background: var(--qa);
}

.cmk__qfoot em,
.cmk__cta {
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--qa);
  font-size: 6px;
  font-style: normal;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.cmk__price {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 5px;
  padding: 6px 8px 2px;
}

.cmk__price b {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

.cmk__price span {
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(31, 157, 104, 0.12);
  font-size: 6px;
  font-weight: 600;
  color: #0f6e56;
}

.cmk__hint {
  padding: 0 8px 5px;
  font-size: 6px;
  color: #9ca3af;
}

.cmk__cta {
  margin: auto 8px 7px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  /* на мобиле контейнер картинки 90px высотой с обрезкой — высокий мокап сайта показываем верхом */
  .b-conversion__item-image .cmk {
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: top;
  }
}

/* ── Ритм фонов на главной: светло-серая и тёмная полосы для блоков-обёрток ── */
.app__content--soft {
  background: var(--bg-soft);
}

.app__content--dark {
  background: var(--bg-dark);
}

.app__content--dark .fsec__title {
  color: var(--c-on-dark);
}

.app__content--dark .fsec__title .b-facts__title-accent {
  color: #8ee360;
}

.app__content--dark .fsec__desc {
  color: rgba(255, 255, 255, 0.72);
}

.app__content--dark .ai-demo__side {
  background: #fff;
}

/* блок конверсии на белом, когда соседи серые и тёмные */
.b-conversion--plain {
  background: #fff;
  border-radius: 0;
}

/* тарифы на светло-сером, чтобы белые карточки читались */
.b-tabs--soft {
  background: var(--bg-soft);
  padding-bottom: var(--sp-40);
}

/* ═══ Страница «Квиз-сайт» (/quiz) ═══════════════════════════════════════ */

/* первый экран: текст слева, окно браузера с квиз-сайтом справа */
.qs-hero {
  -ms-flex: none;
      flex: none;
  padding: 175px 0 80px;
  background: #f1f3f6;
  border-radius: 0 0 0 144px;
  overflow: hidden;
}

.qs-hero__inner {
  display: -ms-grid;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--sp-48);
  -ms-flex-align: center;
      align-items: center;
}

.qs-hero .b-path {
  margin-bottom: var(--sp-24);
}

.qs-hero__title {
  margin: 0 0 var(--sp-20);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-heading);
}

.qs-hero__lead {
  margin: 0 0 var(--sp-32);
  font-size: 18px;
  line-height: 1.65;
  color: var(--c-text);
}

.qs-hero__btn {
  margin-bottom: var(--sp-16);
}

.qs-hero__note {
  font-size: 15px;
  color: var(--c-muted);
}

.qs-hero__vis .hbrowser {
  box-shadow: 0 30px 60px rgba(31, 45, 61, 0.16);
}

.hbrowser__page--lg {
  padding: 36px 30px;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) 190px;
}

.hbrowser__page--lg .hbrowser__h {
  font-size: 24px;
}

.hbrowser__page--lg .hbrowser__p {
  font-size: 13px;
}

/* сценарии «когда вместо лендинга» */
.qs-when {
  padding-bottom: var(--sp-24);
}

.qs-when .fcard__icon svg {
  width: 22px;
  height: 22px;
}

/* мокап шага 1: подсказка ИИ и плитки шаблонов */
.qs-aiside {
  background: #fff;
}

.qs-tpls {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
}

.qs-tpl {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: var(--c-text);
}

.qs-tpl.is-on {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent);
  color: var(--c-heading);
  font-weight: 500;
}

/* мокап шага 3: настройки публикации */
.qpub {
  --qa: #1f9d68;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 56px rgba(31, 45, 61, 0.14);
  overflow: hidden;
  font-size: 13px;
  color: #374151;
}

.qpub__head {
  padding: 11px 18px;
  border-bottom: 1px solid #ececea;
  font-size: 11px;
  color: #6b7280;
}

.qpub__head b {
  color: #1f2937;
}

.qpub__row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px 10px;
  margin: 12px 14px 0;
  padding: 12px 14px;
  border: 1px solid #e6e6e3;
  border-radius: 10px;
}

.qpub__row.is-on {
  border-color: var(--qa);
  background: rgba(31, 157, 104, 0.05);
  box-shadow: 0 0 0 1px var(--qa);
}

.qpub__row.is-on .hqz__radio {
  border-color: var(--qa);
  background: var(--qa);
}

.qpub__name {
  font-weight: 600;
  color: #111827;
}

.qpub__val {
  margin-left: auto;
  font-size: 12px;
  color: #6b7280;
}

.qpub__ok {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 4px;
  width: 100%;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  color: #0f6e56;
}

.qpub__ok svg {
  width: 11px;
  height: 11px;
}

.qpub__bottom {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 10px;
  padding: 14px;
}

.qpub__qr {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 36px;
  height: 36px;
  padding: 4px;
  border: 1px solid #e6e6e3;
  border-radius: 6px;
}

.qpub__qr i {
  background: #1f2937;
  border-radius: 1px;
}

.qpub__qr i:nth-child(4) {
  background: transparent;
  box-shadow: inset 0 0 0 2px #1f2937;
}

.qpub__btn {
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--qa);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.qpub__btn--ghost {
  background: transparent;
  border: 1px solid #e6e6e3;
  color: #374151;
}

/* мокап шага 4: источники → заявка */
.qs-flow {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 10px;
}

.qs-flow__src {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
}

.qs-flow__src span {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-heading);
}

.qs-flow__arrow {
  width: 22px;
  height: 22px;
  margin-left: 14px;
  color: var(--c-accent-dark);
  transform: rotate(90deg);
}

.qs-flow__lead {
  margin-top: 0;
}

/* таблица сравнения */
.qs-compare {
  padding: var(--sp-64) 0 var(--sp-24);
}

.qs-compare__title {
  margin: 0 0 var(--sp-32);
  font-size: var(--fs-h2);
  color: var(--c-heading);
}

.qs-compare__title span {
  color: var(--c-accent);
}

.qs-compare__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.qs-compare__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-text);
}

.qs-compare__table th,
.qs-compare__table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.qs-compare__table thead th {
  font-size: 14px;
  font-weight: var(--fw-heading);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.qs-compare__table tbody th {
  width: 26%;
  font-weight: var(--fw-heading);
  color: var(--c-heading);
}

.qs-compare__table .is-win {
  background: #eef8e8;
  color: var(--c-heading);
  font-weight: 500;
}

.qs-compare__table thead .is-win {
  color: var(--c-accent-dark);
  border-radius: 12px 12px 0 0;
}

.qs-compare__table tbody tr:last-child .is-win {
  border-radius: 0 0 12px 12px;
}

.qs-compare__table td.is-win svg {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -1px;
  color: var(--c-accent-dark);
}

.qs-compare__note {
  margin: var(--sp-16) 0 0;
  font-size: 14px;
  color: var(--c-muted);
}

/* живой пример во фрейме на тёмном */
.qs-live {
  display: -ms-grid;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-48);
  -ms-flex-align: center;
      align-items: center;
  padding: var(--sp-24) 0;
}

.qs-live__title {
  margin: 0 0 var(--sp-16);
  font-size: var(--fs-h2);
  color: var(--c-on-dark);
}

.qs-live__title span {
  color: #8ee360;
}

.qs-live__lead {
  margin: 0 0 var(--sp-32);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.qs-live__link {
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: auto;
  margin-top: var(--sp-24);
}

.hbrowser--frame {
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.hbrowser--frame iframe {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
  background: #fff;
}

/* кейсы в три колонки */
.hproof__grid--cases .hproof__case {
  grid-column: span 1;
}

/* SEO-текст без сворачивания */
.qs-seo {
  padding: var(--sp-24) 0;
}

.qs-seo .b-text__block {
  height: auto;
}

@media screen and (max-width: 1023px) {
  .qs-hero {
    padding: 130px 0 60px;
    border-radius: 0 0 0 40px;
  }

  .qs-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-32);
  }

  .qs-live {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-32);
  }

  .hbrowser__page--lg {
    padding: 24px 20px;
    grid-template-columns: minmax(0, 1fr) 140px;
  }
}

@media screen and (max-width: 768px) {
  .qs-hero {
    padding: 110px 0 40px;
  }

  .qs-hero__title {
    font-size: var(--fs-display);
  }

  .qs-hero__lead {
    font-size: 16px;
  }

  .qs-compare {
    padding: var(--sp-40) 0 var(--sp-8);
  }

  .qs-compare__table {
    min-width: 560px;
    font-size: 14px;
  }

  .qs-compare__table th,
  .qs-compare__table td {
    padding: 12px 14px;
  }

  .hbrowser--frame iframe {
    height: 480px;
  }

  .hbrowser__page--lg {
    grid-template-columns: minmax(0, 1fr);
  }

  .hbrowser__page--lg .hbrowser__h {
    font-size: 20px;
  }
}

/* «Преимущества» на /quiz: на боевой странице блок стоял под декоративной картинкой
   первого экрана, здесь первый экран другой — задаём собственные отступы */
.b-advantages--qs {
  padding: var(--sp-80) 0 var(--sp-16);
}

.b-advantages--qs .b-advantages__title {
  margin-bottom: var(--sp-56);
}

@media screen and (max-width: 768px) {
  .b-advantages--qs {
    padding: var(--sp-48) 0 0;
  }

  .b-advantages--qs .b-advantages__title {
    margin-bottom: var(--sp-32);
  }
}

/* ─────────────────────────────────────────────────────────────
   Переключатель языков (.b-lang)
   Стоит в шапке на месте, где на русском сайте были ВК и Telegram.
   Сегментированная кнопка: активный язык залит, второй — ссылка.
   Токены и радиус 6px — как у остальных элементов.
   ───────────────────────────────────────────────────────────── */
.b-lang {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--c-border, #e6ebf2);
  border-radius: 6px;
  margin-right: 40px;
}

.b-lang__item {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--c-muted, #6b809f);
  transition: color .15s ease, background-color .15s ease;
}

a.b-lang__item:hover,
a.b-lang__item:focus-visible {
  color: var(--c-heading, #1c2b45);
  background: rgba(76, 199, 36, .1);
}

.b-lang__item--active {
  color: #fff;
  background: var(--c-accent, #4cc724);
  cursor: default;
}

/* Тёмный первый экран: шапка до прокрутки лежит на тёмной картинке */
.has-dark-hero .app-header:not(.is-fixed) .b-lang {
  border-color: rgba(255, 255, 255, .3);
}

.has-dark-hero .app-header:not(.is-fixed) .b-lang__item {
  color: rgba(255, 255, 255, .75);
}

.has-dark-hero .app-header:not(.is-fixed) a.b-lang__item:hover {
  color: #fff;
  background: rgba(255, 255, 255, .15);
}

@media screen and (max-width: 1023px) {
  .b-lang {
    margin-right: 0;
  }
}

/* Сноска под блоком тарифов: годовая скидка, валюта, налоги.
   На русском сайте её не было — там цены в рублях и вопрос валюты не стоит. */
.b-tabs__note {
  max-width: 760px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted, #6b809f);
}