/* Вариант B · путь клиента: липкий индикатор R · G · B и три главы
   (слева липкая колонка с буквой канала, справа содержание). */

.path { position: relative; background: var(--c-bg); }

/* ---------- Индикатор пути ---------- */
.trail {
  position: sticky; top: var(--b-header); z-index: 20;
  height: var(--b-trail);
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
}
.trail__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-items: center; height: 100%; }
.trail__seg { display: grid; gap: 6px; min-width: 0; }
.trail__label {
  font: 500 var(--fs-caption)/1 var(--font-mono); letter-spacing: .02em; color: var(--c-text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--dur) var(--ease);
}
.trail__label b { color: var(--ch); margin-right: .3em; }
.trail__seg.is-active .trail__label { color: var(--c-text); }
.trail__track { display: block; height: 2px; border-radius: 2px; background: var(--c-line); overflow: hidden; }
.trail__fill { display: block; height: 100%; background: var(--ch); transform-origin: left center; transform: scaleX(var(--p, 0)); }

/* ---------- Глава ---------- */
.chapter {
  padding-block: clamp(2.75rem, 1.75rem + 3vw, 4.5rem);
  scroll-margin-top: var(--b-trail);
}
.chapter + .chapter { border-top: 1px solid var(--c-line); }
.chapter__inner { display: grid; gap: var(--sp-8); }

.chapter__sticky {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
  gap: var(--sp-3) var(--sp-5);
}
.chapter__step { grid-column: 2; font-size: var(--fs-caption); color: var(--c-text-faint); letter-spacing: .04em; }
.chapter__letter {
  grid-column: 1; grid-row: 1 / span 3;
  display: flex; align-items: baseline;
  font-size: clamp(4.5rem, 1.5rem + 9vw, 9.5rem); font-weight: 700; line-height: .78; letter-spacing: -.05em;
  color: var(--c-text);
}
.chapter__letter::after {                      /* маленький маркер канала — «точка» после буквы */
  content: ""; flex: none; width: .13em; height: .13em; margin-left: .07em; border-radius: 3px; background: var(--ch);
}
.chapter__sticky > .channel { grid-column: 2; }
.chapter__title { grid-column: 2; }
.chapter__intro { grid-column: 1 / -1; color: var(--c-text-muted); max-width: 46ch; }
.chapter__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }

.chapter__body { display: grid; gap: var(--sp-8); min-width: 0; align-content: start; }
.chapter__block { display: grid; gap: var(--sp-4); }
.chapter__sub { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
.chapter__note { color: var(--c-text-faint); max-width: 64ch; }

@media (min-width: 1000px) {
  .chapter__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); }
  .chapter__aside { align-self: stretch; }
  .chapter__sticky {
    position: sticky; top: calc(var(--b-header) + var(--b-trail) + var(--sp-8));
    grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); justify-items: start;
  }
  .chapter__step, .chapter__letter, .chapter__sticky > .channel, .chapter__title, .chapter__intro, .chapter__links { grid-column: 1; grid-row: auto; }
  .chapter__letter { margin-block: var(--sp-2) var(--sp-1); }
}

/* ---------- Цены: компактные плашки ---------- */
.fees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
@media (min-width: 620px) { .fees { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fees--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .fees--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fees--wide { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .fees--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fees__item {
  display: grid; gap: var(--sp-1); align-content: start; min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.fees__name { font-size: var(--fs-small); color: var(--c-text-muted); }
a.fees__name { color: var(--c-text); text-decoration-color: var(--c-line-strong); }
a.fees__name:hover { text-decoration-color: currentColor; }
.fees__value { font-size: 1.0625rem; }
.fees__note { font-size: var(--fs-caption); color: var(--c-text-faint); line-height: 1.45; }
.fees--wide .fees__item { padding: var(--sp-4) var(--sp-5); }
.fees--wide .fees__value { font-size: 1.25rem; }
.fees--wide .fees__note { font-size: var(--fs-small); margin-top: var(--sp-1); }

/* ---------- Состав работ SEO ---------- */
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-6); counter-reset: works; }
@media (min-width: 620px) { .works { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.works__item {
  counter-increment: works;
  display: flex; gap: var(--sp-3); align-items: baseline;
  padding-block: var(--sp-3); border-top: 1px solid var(--c-line);
  font-size: var(--fs-small); font-weight: 500;
}
.works__item::before { content: counter(works, decimal-leading-zero); font: 500 var(--fs-caption)/1 var(--font-mono); color: var(--ch); }

/* ---------- Кейс-витрина (R) ---------- */
.showcase {
  display: grid; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
}
.showcase__shot { background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); min-height: 0; }
.showcase__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.showcase__text { display: grid; gap: var(--sp-3); align-content: center; justify-items: start; padding: clamp(var(--sp-5), 2.5vw, var(--sp-8)); }
.showcase__title { font-size: var(--fs-h3); }
.showcase__domain { margin-top: calc(-1 * var(--sp-2)); font-size: var(--fs-small); color: var(--c-text-faint); }
.showcase__desc { font-size: var(--fs-small); color: var(--c-text-muted); }
@media (min-width: 700px) {
  .showcase { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .showcase__shot { border-bottom: 0; border-right: 1px solid var(--c-line); }
}

/* ---------- Карточка SEO-аудита (G), графитовая ---------- */
.audit-card {
  display: grid; gap: var(--sp-6);
  padding: clamp(var(--sp-6), 3vw, var(--sp-8));
  border-radius: var(--r-lg); background: var(--c-bg); color: var(--c-text);
  scroll-margin-top: calc(var(--b-trail) + var(--sp-6));
}
.audit-card__text { display: grid; gap: var(--sp-3); justify-items: start; }
.audit-card__title { font-size: var(--fs-h3); line-height: 1.3; max-width: 30ch; }
.audit-card__sample { flex-wrap: wrap; margin-top: var(--sp-1); }
.audit-card__file { font-weight: 400; font-size: var(--fs-caption); color: var(--c-text-faint); order: 1; }
.audit-card__buy { display: grid; gap: var(--sp-3); justify-items: start; align-content: end; }
.audit-card__price { font-size: 1.75rem; line-height: 1.1; }
@media (min-width: 700px) {
  .audit-card { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* ---------- Кейс в цифрах (B) ---------- */
.metrics {
  display: grid; gap: var(--sp-4);
  padding: clamp(var(--sp-5), 2.5vw, var(--sp-8));
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
}
.metrics__title { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.metrics__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden;
}
@media (min-width: 520px) { .metrics__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.metrics__item { display: grid; gap: var(--sp-2); align-content: space-between; padding: var(--sp-3) var(--sp-4); background: var(--c-surface); }
.metrics__item dt { font-size: var(--fs-caption); line-height: 1.35; color: var(--c-text-muted); }
.metrics__item dd { font: 600 1.375rem/1.1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.metrics__item--key { background: color-mix(in srgb, var(--c-honey) 22%, var(--c-surface)); }
.metrics__note { font-size: var(--fs-caption); color: var(--c-text-faint); }

/* Узкие экраны: цены рекламы — строками «название · цена» */
@media (max-width: 519px) {
  .fees--3 .fees__item { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); align-items: center; }
  .fees--3 .fees__value { grid-column: 2; grid-row: 1 / span 2; }
  .fees--3 .fees__note { grid-column: 1; }
}

/* ---------- Тарифы строками: название · срок · цена ---------- */
.fees--rows { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--c-line); }
.fees--rows .fees__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "term price";
  align-items: center; gap: 2px var(--sp-4);
  padding: var(--sp-4) 0; background: none; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0;
}
.fees--rows .fees__name { grid-area: name; font-weight: 600; font-size: var(--fs-body); color: var(--c-text); }
.fees--rows .fees__term { grid-area: term; font-size: var(--fs-small); color: var(--c-text-muted); }
.fees--rows .fees__value { grid-area: price; font-size: 1.125rem; text-align: right; }
.fees__hint { font-weight: 400; color: var(--c-text-muted); }
@media (min-width: 620px) {
  .fees--rows .fees__item { grid-template-columns: minmax(0, 1fr) 9rem 9.5rem; grid-template-areas: "name term price"; }
  .fees--rows .fees__term { font-size: var(--fs-body); }
}

/* ---------- Работы: живые сайты клиентов ---------- */
.works-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.works-head .chapter__sub { margin: 0; }
.works-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
@media (min-width: 620px) { .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } }
.work__link { display: grid; gap: var(--sp-1); text-decoration: none; color: var(--c-text); }
.work__shot {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: var(--r-md); border: 1px solid var(--c-line); margin-bottom: var(--sp-2);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.work__link:hover .work__shot { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.work__name { font-weight: 600; font-size: var(--fs-small); line-height: 1.35; }
.work__domain { font-size: var(--fs-caption); color: var(--c-text-muted); }