/* Подробный гид. Общее с коротким - в shell.css, остальное приходит из
   ces-tokens.css и ces-landing.css: холст, типографика, карточки, тинты.
   Здесь только то, что есть у длинной страницы и больше нигде: липкое
   оглавление, разделы с призрачным номером, ряды шагов, врезки, цепочки,
   таблица сравнения и вопросы. */

/* Экран в подробном гиде ниже, чем в коротком: снимков тридцать два, и на
   большой высоте страница разрасталась бы вдвое. Лестница повторяется
   целиком: shell.css объявляет свою раньше, и одного значения здесь хватило
   бы, только чтобы перебить её на всех ширинах сразу. */
:root { --art-h: 380px; }
@media (max-width: 1080px) { :root { --art-h: 340px; } }
@media (max-width: 700px)  { :root { --art-h: 290px; } }

/* ── шапка ──────────────────────────────────────────────── */
.top { padding-bottom: var(--sp-7); }
.brandline { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-7) 0 var(--sp-4); }
.brandline .mark { width: 34px; height: 34px; border-radius: 9px; display: block; flex: none; }
.brandline span {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cap);
}
.top h1 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(38px, 6vw, 76px); line-height: 1.03; letter-spacing: -.03em;
  text-wrap: balance; margin: 0;
}
.meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.meta b {
  font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--card); box-shadow: var(--sh-card);
  border-radius: 999px; padding: 9px 15px;
}

/* ── оглавление ─────────────────────────────────────────────
   Липкое: разделов двенадцать, и без него до нужного идут прокруткой. */
.chipbar {
  position: sticky; top: 0; z-index: 20; padding: var(--sp-3) 0;
  background: color-mix(in srgb, var(--bg-base) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20, 20, 27, .06);
}
.chips { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex: none; text-decoration: none; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--card); box-shadow: var(--sh-card);
  border-radius: 999px; padding: 9px 15px;
}
.chips a:hover { color: var(--ink); }
.chips a b { color: var(--cap); font-weight: 700; margin-right: 7px; font-variant-numeric: tabular-nums; }

/* ── раздел ─────────────────────────────────────────────── */
/* Между разделами - шаг короче общего: у гида их двенадцать подряд, и на
   полном шаге страницы между блоками получалось пустое поле в экран. */
.sec { padding: var(--sp-11) 0 0; scroll-margin-top: 64px; }
.sec-head { max-width: 64ch; margin-bottom: var(--sp-7); }
/* Номер раздела - призрачный, как у шагов на лендинге: он держит порядок,
   но не спорит с заголовком. */
.eyebrow {
  display: flex; align-items: baseline; gap: var(--sp-4);
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cap); margin: 0 0 var(--sp-3);
}
.eyebrow i {
  font-style: normal; font-family: var(--font-display); font-weight: 800;
  font-size: 46px; line-height: 1; letter-spacing: -.03em;
  color: rgba(20, 20, 27, .12); font-variant-numeric: tabular-nums;
}
.sec h2 {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.02em;
  text-wrap: balance; margin: 0;
}
.sec .lede { margin-top: var(--sp-4); font-size: 20px; line-height: 1.5; color: var(--text); }

/* ── шаги ───────────────────────────────────────────────── */
/* На лендинге .steps - три колонки; гиду нужна одна, иначе шаги встают
   в ряд и текст сжимается до пары слов в строке. */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-9); margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-5); position: relative; }
/* Тонкий рельс связывает шаги в один ход. */
.step::before {
  content: ""; position: absolute; left: 17px; top: 44px; bottom: calc(var(--sp-9) * -1);
  width: 2px; background: rgba(20, 20, 27, .07);
}
.step:last-child::before { display: none; }
.disc {
  width: 36px; height: 36px; border-radius: 50%; background: var(--lime); color: var(--lime-ink);
  display: grid; place-items: center; z-index: 1; border: 3px solid var(--bg-base);
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.disc.plain { background: var(--card); color: var(--cap); box-shadow: var(--sh-card); }

/* Колонка не шире экрана: с колонкой auto полоса-вырезка распирала её до
   своей ширины, и страница на телефоне уезжала вбок. */
.body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.body > * { min-width: 0; }
.body > * > * + * { margin-top: var(--sp-4); }
.body h3 {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: 21px; line-height: 1.25; letter-spacing: -.01em; margin: 0;
}
.body p { font-size: 17px; line-height: 1.6; color: var(--text); margin: 0; }

/* Снимок в корпусе стоит на тинте, тинт - в белой карточке. Три слоя:
   на голом холсте бледный тинт не читается. */
.shot {
  position: relative; background: var(--card); border-radius: var(--r-card);
  box-shadow: var(--sh-card); padding: var(--sp-7); display: grid; place-items: center;
  justify-self: start;
}
/* Тинт под телефоном - подложка внутри белой карточки. Цвет идёт по кругу
   от шага к шагу: одна и та же плашка двадцать шесть раз подряд читается
   как фон, а не как ритм. */
.shot::before {
  content: ""; position: absolute; inset: var(--sp-4); border-radius: var(--r-tile);
  background: var(--tint-blue);
}
.steps > .step:nth-child(4n+2) .shot::before { background: var(--tint-violet); }
.steps > .step:nth-child(4n+3) .shot::before { background: var(--tint-green); }
.steps > .step:nth-child(4n+4) .shot::before { background: var(--tint-pink); }
.shot > .phone, .shot > .pinstrip { position: relative; z-index: 1; justify-self: center; }
/* Широкая полоса - вырезка из экрана шириной 390 точек. Показываем её
   близко к настоящему размеру: растянутая на полстраницы она и выглядит
   растянутой, и выдаёт каждый пиксель исходника. Карточка обжимает полосу,
   а не тянется во всю меру. */
.shot.strip { padding: var(--sp-6); width: max-content; max-width: 100%; justify-self: start; }
.shot.strip .pinstrip { max-width: 480px; width: 100%; }
.cap { margin-top: var(--sp-3); font-size: 13px; font-weight: 600; color: var(--cap); }

@media (min-width: 900px) {
  /* Ширина колонки со снимком посчитана, а не отдана содержимому: с auto
     она сжималась под длинный текст соседней колонки, и телефон схлопывался
     в чёрную полоску - корпус оставался, а экран внутри уходил в ноль.
     Все снимки одной пропорции (468x1013), поэтому ширина выводится из
     высоты экрана и полей карточки. */
  .body.has-shot {
    grid-template-columns: calc(var(--art-h) * .462 + var(--sp-7) * 2) minmax(0, 1fr);
    gap: var(--sp-9); align-items: center;
  }
  /* Через одну снимок уходит вправо: длинный ряд одинаковых строк
     читался бы таблицей, а не рассказом. Колонки меняются местами вместе
     со снимком - иначе текст попадал в узкую колонку, отведённую под него. */
  .steps > .step:nth-child(even) .body.has-shot {
    grid-template-columns: minmax(0, 1fr) calc(var(--art-h) * .462 + var(--sp-7) * 2);
  }
  .steps > .step:nth-child(even) .body.has-shot > *:first-child { order: 2; }
  .body.wide-shot { grid-template-columns: minmax(0, 1fr); }
}

/* Название кнопки и подпись поля, процитированные в тексте. Не .btn:
   так на сайте называется настоящая кнопка, и она бы раздулась. */
.uibtn {
  display: inline-block; background: var(--blue); color: #fff; border-radius: 999px;
  padding: 4px 13px 5px; font-weight: 600; font-size: 15px; white-space: nowrap;
}
.key {
  display: inline-block; background: var(--inset); border-radius: 9px;
  padding: 2px 9px 3px; font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap;
}

/* ── врезки ─────────────────────────────────────────────── */
.note { border-radius: var(--r-tile); padding: var(--sp-6) var(--sp-7); font-size: 16px; line-height: 1.55; color: var(--text); }
.note strong {
  display: block; margin-bottom: var(--sp-2);
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
}
.note.tip { background: var(--tint-blue); }
.note.tip strong { color: var(--blue); }
.note.warn { background: var(--tint-pink); }
.note.warn strong { color: var(--red); }
.note.done { background: var(--tint-green); }
.note.done strong { color: var(--green); }

/* ── карточки и цепочки ─────────────────────────────────── */
.grid { display: grid; gap: var(--gap-card); grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); margin: 0; padding: 0; list-style: none; }
.grid .card { padding: var(--sp-7); }
.card h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--ink); margin: 0 0 var(--sp-2); }
.card p { font-size: 15px; line-height: 1.55; color: var(--text); margin: 0; }
.card .tag {
  display: inline-block; margin-bottom: var(--sp-4); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 8px;
  background: var(--inset); color: var(--cap);
}
.card .tag.lime { background: var(--lime-soft); color: var(--lime-ink); }
.card .tag.blue { background: var(--tint-blue); color: var(--blue); }

.flow { display: grid; gap: var(--gap-card); grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); margin: 0; padding: 0; list-style: none; }
.flow li { background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: var(--sp-6); }
.flow li span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cap); margin-bottom: var(--sp-3); }
.flow li b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--ink); margin-bottom: var(--sp-2); }
.flow li p { font-size: 14.5px; line-height: 1.5; color: var(--text); margin: 0; }
.flow li.now { box-shadow: var(--sh-card), 0 0 0 2px var(--lime); }

/* ── таблица сравнения ──────────────────────────────────── */
.cmpwrap { overflow-x: auto; background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh-card); }
table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: 16px; }
th, td { text-align: left; padding: var(--sp-5) var(--sp-7); border-bottom: 1px solid rgba(20, 20, 27, .06); vertical-align: top; color: var(--text); }
tbody tr:last-child td { border-bottom: none; }
thead th { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); background: var(--inset); }
thead th:first-child { color: var(--cap); font-weight: 600; }
td:first-child { color: var(--cap); font-size: 15px; width: 30%; }
td b { color: var(--ink); font-weight: 700; }

/* ── вопросы ─────────────────────────────────────────────
   Оформление берём у лендинга как есть: там уже список с линейками и
   шевроном. Своё - только сброс отрицательного отступа, он там нужен
   соседней колонке, а здесь его нет. */
.faq { margin-top: 0; }

/* Последняя секция кончается разделом «Помощь», подвала на странице нет:
   без этого она упиралась в нижний край окна. */
main > .sec:last-child { padding-bottom: var(--sp-12); }

@media (max-width: 900px) {
  .step { grid-template-columns: 30px minmax(0, 1fr); gap: var(--sp-4); }
  .step::before { left: 14px; top: 38px; }
  .disc { width: 30px; height: 30px; font-size: 13px; }
  .eyebrow i { font-size: 36px; }
  .sec .lede { font-size: 17px; }
}

/* ── мелочи разметки ────────────────────────────────────────
   Раньше эти правила стояли атрибутом style прямо в разметке. */
.mb-block { margin-bottom: var(--gap-block); }
.mt-block { margin-top: var(--sp-5); }
.subhead {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: -.01em; color: var(--ink); margin: 0 0 var(--sp-5);
}

/* Три мини-игры битвы стоят рядом: снимок мельче, подпись под каждым. */
.games { display: grid; gap: var(--gap-card); grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); margin-top: var(--sp-2); }
/* Карточка обжимает телефон, поэтому поля со всех четырёх сторон равны:
   при растянутой карточке слева и справа оставалось втрое больше воздуха,
   чем сверху и снизу. Корпус рисуется тенью и выходит за свою рамку на
   несколько точек - запас это учитывает. */
.games .shot { justify-self: center; width: max-content; padding: var(--sp-7); }
.games .shot::before { inset: var(--sp-3); }
.games figure, .games > div { display: grid; justify-items: center; text-align: center; }
.games .gamecap { max-width: 30ch; }
.games .phone { --art-h: 270px; }
.gamecap { margin-top: var(--sp-4); font-size: 15px; line-height: 1.5; color: var(--text); }
.gamecap b { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }