/* ==========================================================================
   Раздел «Продажи» (под «Команде»). Подключается после styles.css.
   Экраны собираются по координатам из макета: на ПК — как в PDF (1080 px),
   на телефоне — колонкой.
   ========================================================================== */
[data-chapter="prodazhi"] {
  --bg-vhod: #FFFFFF;
  --accent: #6B2FB5;
  --accent2: #E8500F;
  --eyebrow: #4A1F80;
}
.sx-main { position: relative; }

/* --- плашка главы --- */

/* --- экран --- */
.sx-screen { position: relative; padding: 36px 0 28px; }
.sx-col { padding-block: 0; }
.sx-b { margin: min(var(--mt, 0px), 32px) 0 0; }
.sx-t { font-size: max(13px, calc(var(--fs, 17px) * .8)); line-height: 1.45; color: var(--c, var(--body-color)); margin-bottom: 0; }
.sx-c { font-family: var(--font-text); }
.sx-o { font-family: var(--font-display); font-weight: 700; line-height: 1.15; }
.sx-w5 { font-weight: 500; }
.sx-w7 { font-weight: 700; }
.sx-just { text-align: left; }
.sx-h { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 1.07; font-size: max(26px, calc(var(--fs, 42px) * .78)); letter-spacing: .2px; }
.sx-h span { display: block; }
.sx-h .ink { color: var(--ink); }
.sx-h .accent { color: var(--accent); }
.sx-sub { letter-spacing: .2px; }
.sx-big { line-height: 1; }
.sx-note { margin-left: 0; padding-left: 14px; border-left: 2px solid rgba(107, 47, 181, .22); }
.sx-callout { padding-left: 16px; border-left: 3px solid var(--accent); }
.sx-badge { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1; margin-top: 2px; }
.btn.sx-b { display: inline-block; width: auto; max-width: 100%; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: 13px; padding: 15px 32px; border-radius: 3px; background: var(--accent); color: #fff; }
.sx-col, .sx-screen { display: flow-root; }

/* --- многоколоночные ряды (таблицы, ступени, суммы) --- */
.sx-band { display: grid; grid-template-columns: repeat(var(--nc, 2), minmax(0, auto)); column-gap: 14px; row-gap: 4px; align-items: start; }
.sx-band .sx-b { margin-left: 0; }

/* --- картинки --- */
.sx-fig { position: relative; margin: 20px auto 0; width: min(72vw, 340px); aspect-ratio: var(--ar); }
.sx-fig--wide { width: 100%; max-width: 100%; margin-top: max(12px, min(var(--mt, 0px), 24px)); }
.sx-fig__img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.sx-fig__shadow { position: absolute; z-index: 0; max-width: none; pointer-events: none; }
.sx-count { margin: 0 var(--frame-pad, 16px) 8px; text-align: right; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--eyebrow); }
.sx-snake { display: none; }

@media (min-width: 1080px) {
  .sx-screen { max-width: 1080px; min-height: calc(var(--fb, 0px) + 44px); margin-inline: auto; padding: 0 0 44px; }
  .sx-col.frame { max-width: none; margin-inline: 0; padding-inline: 0; margin-left: var(--x); width: var(--w); }
  .sx-b { margin: var(--mt, 0px) 0 0; width: var(--w); max-width: none; margin-left: var(--ml, 0px); }
  .sx-t { font-size: var(--fs); }
  .sx-h { font-size: var(--fs); }
  .sx-badge { width: 32px; height: 32px; font-size: 19px; margin-left: -16px; }
  .sx-nl { white-space: nowrap; }
  .sx-main--top { padding-top: 27px; }
    .sx-fig--wide { max-width: none; }
  .sx-just { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  .sx-note { margin-left: calc(var(--ml, 0px) - 16px); }
  .sx-callout { margin-left: calc(var(--ml, 0px) - 19px); }
  .sx-band { grid-template-columns: var(--cols); column-gap: 0; row-gap: 0; margin-left: var(--ml, 0px); width: auto; }
  .sx-band .sx-b { margin-left: 0; }
  .sx-band .sx-cell .sx-b { margin-top: var(--mt, 0px); }
  .sx-fig { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); margin: 0; }
  .sx-fig--wide { position: relative; left: auto; top: auto; margin: var(--mt, 0px) 0 0 var(--x); }
  .sx-count { position: absolute; top: var(--y); right: var(--r); margin: 0; font-size: 13px; }
  .sx-snake { display: block; position: absolute; left: 50%; top: 0; width: 1080px; margin-left: -540px; z-index: 0; pointer-events: none; overflow: visible; }
  .sx-snake path { fill: none; stroke: var(--accent); stroke-width: 1.6; }
  .sx-screen > * { position: relative; }
  .sx-screen > .sx-fig, .sx-screen > .sx-count { position: absolute; }
}

/* --- дорисованные элементы (в макете они графика, в JSON их нет) --- */
.sx-stat { position: relative; isolation: isolate; }
.sx-stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 1px; background: rgba(9, 9, 13, .09); z-index: -1; }
.sx-stat--total::before { content: ""; position: absolute; inset: -14px -16px -12px -16px; background: #EDE9F6; z-index: -1; }
.sx-stat--total::after { display: none; }
.sx-steppct { position: relative; }
.sx-steppct::before { content: ""; position: absolute; left: 0; top: -14px; width: 360px; max-width: calc(100vw - 32px); height: 3px; background: #E4DEF2; }
.sx-steppct::after { content: ""; position: absolute; left: 0; top: -14px; width: min(var(--bar), calc(100vw - 32px)); height: 3px; background: var(--accent); }

/* --- переход к следующей главе --- */
[data-chapter="prodazhi"] .chapter-nav { margin-top: 24px; }
[data-chapter="prodazhi"] .chapter-row__title { justify-content: space-between; }
[data-chapter="prodazhi"] .chapter-row__num { margin-right: 0; }

/* --- карточки глав на входе (наведение как в других разделах) --- */
.sx-chrow { display: block; border-top: 1px solid rgba(9, 9, 13, .1); padding: 18px 16px 16px; margin-inline: -16px; color: var(--accent); text-decoration: none; transition: background-color .15s ease; }
.sx-chrow:hover, .sx-chrow:focus-visible { background-color: rgba(107, 47, 181, .06); }
.sx-chrow__t { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: max(18px, calc(var(--fs, 26px) * .85)); line-height: 1.15; transform-origin: left center; transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
.sx-chrow__t::after { content: "→"; font-family: var(--font-text); font-weight: 400; }
.sx-chrow__d { display: block; margin-top: 8px; font-family: var(--font-text); font-size: max(14px, calc(var(--fs, 19px) * .8)); line-height: 1.45; color: var(--c, var(--body-color)); }
@media (hover: hover) {
  .sx-chrow:hover .sx-chrow__t, .sx-chrow:focus-visible .sx-chrow__t { transform: scale(1.035); }
}
@media (min-width: 1080px) {
  .sx-chrow { width: 984px; margin-left: calc(var(--ml, 0px) - 16px); margin-top: calc(var(--mt, 0px) - 18px); }
  .sx-chrow__t { font-size: var(--fs, 26px); }
  .sx-chrow__d { font-size: var(--fs, 19px); max-width: 940px; }
}

/* --- появление при заходе на страницу (как в остальных разделах) --- */
@media (prefers-reduced-motion: no-preference) {
    .sx-main > .sx-screen:first-of-type > .sx-fig { animation: reveal-up .8s cubic-bezier(.23, 1, .32, 1) backwards; animation-delay: .18s; }
  .sx-main > .sx-screen:first-of-type > .sx-col,
  .sx-main > .sx-screen:first-of-type > .sx-count { animation: reveal-up .8s cubic-bezier(.23, 1, .32, 1) backwards; animation-delay: .34s; }
}