/* Мост между палитрами.
   Страницы рабочего сайта принесли с собой свои стили, а те обращаются к
   переменным рабочего оформления. В примерке таких имён нет - определяем их
   здесь через её собственные цвета, чтобы перенесённые блоки не оказались
   белыми пятнами на тёмном фоне. */
:root{
  --text:   var(--heading);
  --ink:    var(--base);
  --card:   #17161d;
  --card-2: #201f28;
  --amber:  #ffb454;
  --mint:   #59e0b8;
  --font-m: "JetBrains Mono", ui-monospace, monospace;
}

/* Общие мелочи перенесённых страниц. Метка раздела и вводный абзац на рабочем
   сайте выглядят иначе - приводим к виду примерки. */
.pg .tag{ display:inline-block; font-family:"Unbounded",sans-serif; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  border:1px solid var(--line); border-radius:999px; padding:.35rem .7rem }
.pg .lead{ color:var(--muted); font-size:1.05rem; line-height:1.65; max-width:44rem }
.pg h2{ font-family:"Unbounded",sans-serif; font-weight:500; letter-spacing:-.02em;
  color:var(--heading); margin-top:2.2rem }
.pg h3{ color:var(--heading) }
.pg p{ color:var(--muted); line-height:1.7 }
.pg a{ color:var(--acc) }
.pg img{ max-width:100%; height:auto; border-radius:1rem; border:1px solid var(--line) }
.pg ul, .pg ol{ color:var(--muted); line-height:1.7 }

/* Первый экран СТАТЬИ. Заголовок статьи - это предложение на 6-10 слов, и в том же
   размере, что заголовок раздела, он занимает весь экран целиком. Уменьшаем и
   ставим по левому краю: дальше идёт сплошной текст, и глазу проще не
   перескакивать с центра к краю и обратно. */
.hero-art{ text-align:left; padding-top:7.5rem; padding-bottom:2.5rem }
.hero-art .col{ max-width:46rem; margin-inline:auto }
.hero-art .h-xl{ max-width:44rem; font-size:clamp(1.7rem,3.4vw,2.7rem) }
.hero-art .sub{ max-width:44rem; font-size:1.02rem }
.hero-art .note{ margin-top:1.4rem; letter-spacing:.02em; text-align:left }

/* Между первым экраном и началом текста не нужен второй большой отступ:
   один уже задан снизу первого экрана. */
.pg > section:first-child{ padding-top:1.5rem }

/* Тело статьи той же ширины, что и её заголовок - иначе строки расходятся
   по разным краям и текст читается тяжелее. 47.5rem = те же 760px, что на
   рабочем сайте: длина строки для чтения подобрана там и менять её незачем. */
.pg .art{ max-width:47.5rem; margin-inline:auto }

/* Типографика статьи.
   Рабочий сайт набирает статью в 18px, оформление примерки - в 0.95rem (15px).
   Зазоры между абзацами при этом остались рабочие, 14px, и текст слипся.
   Возвращаем читаемый кегль и разводим блоки под него: расстояние между
   абзацами должно быть заметно меньше, чем перед заголовком, иначе непонятно,
   где кончается мысль. */
.pg .art p, .pg .art li{ font-size:1.06rem; line-height:1.75 }
.pg .art p{ margin:0 0 1.15em }
.pg .art li{ margin:.5em 0 }
.pg .art ul, .pg .art ol{ margin:0 0 1.4em; padding-left:1.4em }
.pg .art h2{ margin:3rem 0 1rem }
.pg .art h3{ margin:2rem 0 .6rem }
.pg .art b, .pg .art strong{ color:var(--heading) }

/* Скриншот и подпись под ним - это одно целое, поэтому подпись держим близко,
   а от следующего блока отодвигаем. Раньше было наоборот: подпись липла к
   тексту снизу, а от картинки отходила. */
.pg .art figure{ margin:2.4rem 0 2.8rem }
.pg .art figcaption{ margin-top:.85rem; font-size:.85rem; line-height:1.5; color:var(--faint) }

/* Таблица упиралась в следующий абзац вплотную - нулевой зазор. */
.pg .art .tbl, .pg .art table{ margin:1.6rem 0 }
.pg .art .box{ margin:2.6rem 0; padding:1.4rem 1.5rem }
.pg .art .next{ margin-top:3rem }
.hero-art .col{ max-width:47.5rem }

/* Остальные перенесённые страницы: тот же кегль, что и в статьях. */
.pg p, .pg li{ font-size:1.02rem }

/* ===== со страницы scenarist.html ===== */
/* Плашка статуса: продукт живой, но ещё в доработке - об этом честно на первом экране */
  .st-note{
    display:flex; gap:12px; align-items:flex-start; max-width:760px; margin-top:26px;
    padding:16px 18px; border:1px solid var(--line-2); border-radius:14px; background:var(--card-2);
    color:var(--muted); font-size:15px; line-height:1.55;
  }
  .st-note b{ color:var(--text) }
  .sc-hero{ padding:64px 0 10px }
  .sc-hero h1{ font-size:clamp(32px,4.6vw,54px); max-width:880px }
  .sc-hero .lead{ max-width:720px; margin-top:20px }
  .sc-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px }
  .sc-list{ margin:0; padding-left:20px; color:var(--muted); line-height:1.75 }
  .sc-list li{ margin:6px 0 }
  .sc-list b{ color:var(--text) }
  /* У .step-c с главной в правом верхнем углу рисуется квадрат-иконка (::after), а место под
     неё держит номер шага. У карточек-вопросов номера нет - иконка ложилась на заголовок.
     Поэтому свои классы: шаги без иконки и карточки вопросов обычной вёрсткой. */
  .sc-step{ position:relative; padding:30px 26px 26px }
  .sc-step .num{ font-family:var(--font-m); color:var(--acc); font-size:13px; letter-spacing:.12em;
    display:block; margin-bottom:14px }
  .sc-step h3{ font-size:18px; margin-bottom:10px }
  .sc-step p{ color:var(--muted); font-size:15px }
  .qa{ padding:26px }
  .qa h3{ font-size:17px; margin-bottom:10px; line-height:1.35 }
  .qa p{ color:var(--muted); font-size:15px }

/* ===== со страницы how.html ===== */
.hw-hero{ padding:60px 0 6px }
  .hw-hero h1{ font-size:clamp(30px,4.2vw,48px); max-width:900px }
  .hw-hero .lead{ max-width:720px; margin-top:18px }
  /* Вкладки: содержимое ВСЕХ разделов лежит в html сразу (просто скрыто) - так его читают
     и поисковик, и ИИ-боты. Подгружать по клику здесь нельзя: для них текста бы не было. */
  .hw-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:34px 0 26px }
  .hw-tab{
    border:1px solid var(--line-2); background:var(--card-2); color:var(--muted);
    border-radius:999px; padding:10px 18px; font:inherit; font-size:14.5px; cursor:pointer;
    transition:color .15s, border-color .15s, background .15s;
  }
  .hw-tab:hover{
    color:var(--text); border-color:var(--acc);
    background:color-mix(in srgb, var(--acc) 12%, var(--card-2));
    transform:translateY(-1px);
  }
  .hw-tab:active{ transform:translateY(0) scale(.985) }
  .hw-tab[aria-selected="true"]:hover{ background:var(--acc-hov); transform:translateY(-1px) }
  .hw-tab[aria-selected="true"]{ color:var(--ink); background:var(--acc); border-color:var(--acc); font-weight:600 }
  .hw-pane[hidden]{ display:none }
  .hw-pane h2{ font-size:clamp(24px,3vw,32px) }
  .hw-lead{ color:var(--muted); max-width:760px; margin:14px 0 30px; font-size:16.5px; line-height:1.65 }
  .hw-step{
    display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:start;
    padding:22px 0; border-top:1px solid var(--line);
  }
  .hw-n{
    width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
    background:var(--card-2); border:1px solid var(--line-2);
    font-family:var(--font-m); font-size:15px; color:var(--acc);
  }
  .hw-step h3{ font-size:19px; margin:6px 0 8px }
  .hw-step p{ color:var(--muted); line-height:1.7; max-width:720px }
  .hw-step p + p{ margin-top:10px }
  .hw-tip{
    margin-top:12px; padding:12px 15px; border-left:2px solid var(--acc2);
    background:var(--card-2); border-radius:0 10px 10px 0; font-size:14.5px; color:var(--muted);
    line-height:1.6;
  }
  .hw-tip b{ color:var(--text) }
  .hw-pane a:not(.btn){ color:var(--acc); text-decoration:none; border-bottom:1px solid transparent }
  .hw-pane a:not(.btn):hover{ border-bottom-color:var(--acc) }
  .hw-pane figure{ margin:18px 0 0; max-width:760px }
  .hw-pane figure img{ width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--line-2) }
  .hw-pane figcaption{ margin-top:8px; font-size:13.5px; color:var(--faint) }
  .hw-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:36px }
  .hw-soon{
    margin-top:44px; padding:18px 20px; border:1px dashed var(--line-2); border-radius:14px;
    color:var(--muted); font-size:15px; line-height:1.65;
  }
  .hw-soon b{ color:var(--text) }
  @media (max-width:700px){
    .hw-step{ grid-template-columns:1fr; gap:10px }
    .hw-n{ width:38px; height:38px }
  }

/* ===== со страницы articles.html ===== */
.arts-hero{ padding:60px 0 4px }
  .arts-hero h1{ font-size:clamp(30px,4.2vw,46px) }
  .arts-hero .lead{ max-width:680px; margin-top:18px }
  .arts{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:34px }
  .acard{
    display:flex; flex-direction:column; gap:10px; padding:26px 24px;
    border:1px solid var(--line); border-radius:16px; background:var(--card);
    transition:border-color .15s, transform .15s;
  }
  .acard:hover{ border-color:var(--acc); transform:translateY(-2px) }
  .acard .tag{ align-self:flex-start }
  .acard h2{ font-size:21px; line-height:1.3 }
  .acard p{ color:var(--muted); font-size:15px; line-height:1.65; flex:1 }
  .acard .go{ color:var(--acc); font-size:14.5px; font-family:var(--font-m) }
  .acard a.cover{ position:absolute; inset:0 }
  .acard{ position:relative }
  .acard h2 a{ color:inherit }
  .acard h2 a::after{ content:""; position:absolute; inset:0 }   /* вся карточка кликабельна */
  .arts-note{
    margin-top:40px; padding:20px 22px; border:1px dashed var(--line-2); border-radius:14px;
    color:var(--muted); font-size:15px; line-height:1.65;
  }
  .arts-note b{ color:var(--text) }
  @media (max-width:820px){ .arts{ grid-template-columns:1fr } }

/* ===== со страницы karusel-dlya-instagram.html ===== */
.art{ max-width:760px; margin:0 auto }
  .art h1{ font-size:clamp(30px,4vw,44px); line-height:1.15 }
  .art .meta{ margin-top:16px; color:var(--faint); font-size:13.5px; font-family:var(--font-m) }
  .art h2{ font-size:clamp(22px,2.6vw,29px); margin:46px 0 14px }
  .art h3{ font-size:19px; margin:28px 0 8px }
  .art p{ color:var(--muted); line-height:1.75; margin-bottom:14px }
  .art p.first{ font-size:18px; color:var(--text); margin-top:24px }
  .art ul, .art ol{ color:var(--muted); line-height:1.75; padding-left:22px; margin-bottom:14px }
  .art li{ margin:8px 0 }
  .art b{ color:var(--text) }
  /* ссылки в тексте красим акцентом, но НЕ кнопки: у .art a специфичность выше,
     чем у .btn-lime, и текст кнопки перекрашивался в цвет её же фона - пропадал */
  .art a:not(.btn){ color:var(--acc); text-decoration:none; border-bottom:1px solid transparent }
  .art a:not(.btn):hover{ border-bottom-color:var(--acc) }
  .art figure{ margin:26px 0 }
  .art figure img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--line-2); display:block }
  .art figcaption{ margin-top:8px; font-size:13.5px; color:var(--faint) }
  .art table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:15px }
  .art th, .art td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); color:var(--muted) }
  .art th{ color:var(--text); font-weight:600; font-size:14px }
  .art .tbl{ overflow-x:auto }
  .box{
    margin:30px 0; padding:20px 22px; border:1px solid var(--line-2); border-radius:14px;
    background:var(--card-2); color:var(--muted); line-height:1.7;
  }
  .box b{ color:var(--text) }
  .box .btn{ margin-top:14px }
  .crumbs{ font-size:13.5px; color:var(--faint); margin-bottom:26px }
  .crumbs a{ color:var(--faint) }
  .art .next{ margin-top:46px; padding-top:22px; border-top:1px solid var(--line); font-size:15px; color:var(--muted) }

/* ===== со страницы karusel-neyrosetyu.html ===== */
.art{ max-width:760px; margin:0 auto }
  .art h1{ font-size:clamp(28px,3.8vw,42px); line-height:1.15 }
  .art .meta{ margin-top:16px; color:var(--faint); font-size:13.5px; font-family:var(--font-m) }
  .art h2{ font-size:clamp(21px,2.5vw,28px); margin:44px 0 12px }
  .art h3{ font-size:18px; margin:26px 0 8px }
  .art p{ color:var(--muted); line-height:1.75; margin-bottom:14px }
  .art p.first{ font-size:18px; color:var(--text); margin-top:24px }
  .art ul, .art ol{ color:var(--muted); line-height:1.75; padding-left:22px; margin-bottom:14px }
  .art li{ margin:8px 0 }
  .art b{ color:var(--text) }
  /* ссылки красим акцентом, но НЕ кнопки: у .art a специфичность выше, чем у .btn-lime,
     и текст кнопки перекрашивался в цвет её же фона - пропадал (поймали 19.08) */
  .art a:not(.btn){ color:var(--acc); text-decoration:none; border-bottom:1px solid transparent }
  .art a:not(.btn):hover{ border-bottom-color:var(--acc) }
  .art figure{ margin:26px 0 }
  .art figure img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--line-2); display:block }
  .art figcaption{ margin-top:8px; font-size:13.5px; color:var(--faint) }
  /* три колонки-вердикта: сам / с оговорками / никогда */
  .verd{ display:grid; gap:14px; margin:24px 0 }
  .verd .c{ border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:var(--card) }
  .verd .c h3{ margin:0 0 10px; font-size:17px; display:flex; align-items:center; gap:9px }
  .verd .c ul{ margin:0; padding-left:20px }
  .verd .c li{ margin:6px 0 }
  .verd .ok h3{ color:var(--mint, #7fd0a6) }
  .verd .mid h3{ color:var(--amber, #ffb454) }
  .verd .no h3{ color:var(--coral, #ff7a6e) }
  .box{
    margin:30px 0; padding:20px 22px; border:1px solid var(--line-2); border-radius:14px;
    background:var(--card-2); color:var(--muted); line-height:1.7;
  }
  .box b{ color:var(--text) }
  .box .btn{ margin-top:14px }
  .crumbs{ font-size:13.5px; color:var(--faint); margin-bottom:26px }
  .crumbs a{ color:var(--faint) }
  .art .next{ margin-top:46px; padding-top:22px; border-top:1px solid var(--line); font-size:15px; color:var(--muted) }

/* ===== со страницы kontent-plan.html ===== */
.art{ max-width:760px; margin:0 auto }
  .art h1{ font-size:clamp(28px,3.8vw,42px); line-height:1.15 }
  .art .meta{ margin-top:16px; color:var(--faint); font-size:13.5px; font-family:var(--font-m) }
  .art h2{ font-size:clamp(21px,2.5vw,28px); margin:44px 0 12px }
  .art h3{ font-size:18px; margin:26px 0 8px }
  .art p{ color:var(--muted); line-height:1.75; margin-bottom:14px }
  .art p.first{ font-size:18px; color:var(--text); margin-top:24px }
  .art ul, .art ol{ color:var(--muted); line-height:1.75; padding-left:22px; margin-bottom:14px }
  .art li{ margin:8px 0 }
  .art b{ color:var(--text) }
  /* ссылки красим акцентом, но НЕ кнопки: у .art a специфичность выше, чем у .btn-lime,
     и текст кнопки перекрашивался в цвет её же фона - пропадал (поймали 19.08) */
  .art a:not(.btn){ color:var(--acc); text-decoration:none; border-bottom:1px solid transparent }
  .art a:not(.btn):hover{ border-bottom-color:var(--acc) }
  .art table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:15px }
  .art th, .art td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); color:var(--muted) }
  .art th{ color:var(--text); font-weight:600; font-size:14px }
  .art .tbl{ overflow-x:auto }
  .step{ display:grid; grid-template-columns:46px 1fr; gap:16px; align-items:start; margin:26px 0 }
  .step .n{
    width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
    background:var(--card-2); border:1px solid var(--line-2);
    font-family:var(--font-m); font-size:14px; color:var(--acc);
  }
  .step h3{ margin:4px 0 8px }
  .step p:last-child{ margin-bottom:0 }
  .box{
    margin:30px 0; padding:20px 22px; border:1px solid var(--line-2); border-radius:14px;
    background:var(--card-2); color:var(--muted); line-height:1.7;
  }
  .box b{ color:var(--text) }
  .box .btn{ margin-top:14px }
  .crumbs{ font-size:13.5px; color:var(--faint); margin-bottom:26px }
  .crumbs a{ color:var(--faint) }
  .art .next{ margin-top:46px; padding-top:22px; border-top:1px solid var(--line); font-size:15px; color:var(--muted) }
  @media (max-width:600px){ .step{ grid-template-columns:1fr; gap:8px } }

/* ===== со страницы razmery-karuseli-instagram.html ===== */
.art{ max-width:760px; margin:0 auto }
  .art h1{ font-size:clamp(28px,3.8vw,42px); line-height:1.15 }
  .art .meta{ margin-top:16px; color:var(--faint); font-size:13.5px; font-family:var(--font-m) }
  .art h2{ font-size:clamp(22px,2.6vw,29px); margin:46px 0 14px }
  .art h3{ font-size:19px; margin:28px 0 8px }
  .art p{ color:var(--muted); line-height:1.75; margin-bottom:14px }
  .art p.first{ font-size:18px; color:var(--text); margin-top:24px }
  .art ul, .art ol{ color:var(--muted); line-height:1.75; padding-left:22px; margin-bottom:14px }
  .art li{ margin:8px 0 }
  .art b{ color:var(--text) }
  /* ссылки красим акцентом, но НЕ кнопки: у .art a специфичность выше, чем у .btn-lime,
     и текст кнопки перекрашивался в цвет её же фона - пропадал (поймали 19.08) */
  .art a:not(.btn){ color:var(--acc); text-decoration:none; border-bottom:1px solid transparent }
  .art a:not(.btn):hover{ border-bottom-color:var(--acc) }
  .art table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:15px }
  .art th, .art td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); color:var(--muted) }
  .art th{ color:var(--text); font-weight:600; font-size:14px }
  .art td b{ font-family:var(--font-m); font-size:14px }
  .art .tbl{ overflow-x:auto }
  .box{
    margin:30px 0; padding:20px 22px; border:1px solid var(--line-2); border-radius:14px;
    background:var(--card-2); color:var(--muted); line-height:1.7;
  }
  .box b{ color:var(--text) }
  .box .btn{ margin-top:14px }
  .crumbs{ font-size:13.5px; color:var(--faint); margin-bottom:26px }
  .crumbs a{ color:var(--faint) }
  .art .next{ margin-top:46px; padding-top:22px; border-top:1px solid var(--line); font-size:15px; color:var(--muted) }
  .check{ list-style:none; padding-left:0 }
  .check li{ padding-left:28px; position:relative }
  .check li::before{ content:"✓"; position:absolute; left:0; color:var(--acc) }

/* ===== со страницы gde-brat-temy-dlya-postov.html ===== */
.art{ max-width:760px; margin:0 auto }
  .art h1{ font-size:clamp(28px,3.8vw,42px); line-height:1.15 }
  .art .meta{ margin-top:16px; color:var(--faint); font-size:13.5px; font-family:var(--font-m) }
  .art h2{ font-size:clamp(21px,2.5vw,28px); margin:44px 0 12px }
  .art h3{ font-size:19px; margin:28px 0 8px }
  .art p{ color:var(--muted); line-height:1.75; margin-bottom:14px }
  .art p.first{ font-size:18px; color:var(--text); margin-top:24px }
  .art ul, .art ol{ color:var(--muted); line-height:1.75; padding-left:22px; margin-bottom:14px }
  .art li{ margin:8px 0 }
  .art b{ color:var(--text) }
  /* ссылки красим акцентом, но НЕ кнопки: у .art a специфичность выше, чем у .btn-lime,
     и текст кнопки перекрашивался в цвет её же фона - пропадал (поймали 19.08) */
  .art a:not(.btn){ color:var(--acc); text-decoration:none; border-bottom:1px solid transparent }
  .art a:not(.btn):hover{ border-bottom-color:var(--acc) }
  .src{
    margin:22px 0; padding:20px 22px; border:1px solid var(--line); border-radius:14px;
    background:var(--card);
  }
  .src h3{ margin:0 0 8px; font-size:19px }
  .src p{ margin-bottom:0 }
  .src .ex{
    margin-top:12px; padding-top:12px; border-top:1px dashed var(--line-2);
    font-size:14.5px; color:var(--faint);
  }
  .src .ex b{ color:var(--acc2); font-weight:600 }
  .box{
    margin:30px 0; padding:20px 22px; border:1px solid var(--line-2); border-radius:14px;
    background:var(--card-2); color:var(--muted); line-height:1.7;
  }
  .box b{ color:var(--text) }
  .box .btn{ margin-top:14px }
  .crumbs{ font-size:13.5px; color:var(--faint); margin-bottom:26px }
  .crumbs a{ color:var(--faint) }
  .art .next{ margin-top:46px; padding-top:22px; border-top:1px solid var(--line); font-size:15px; color:var(--muted) }


/* ===== поправки ритма (см. build-demo2.mjs) ===== */

/* --- лента работ: затемнение дальних карточек -------------------------------
   Слой поверх фотографии вместо filter:brightness. Глубина читается так же,
   но браузер не перерисовывает саму фотографию на каждом кадре - именно это
   и подлагивало при прокрутке к ленте. Значение --dim выставляет deck.js. */
.dcard::after{
  content:""; position:absolute; inset:0;
  background:#000; opacity:var(--dim, 0);
  border-radius:inherit; pointer-events:none;
}

/* --- шапка: кнопка входа упиралась в логотип --------------------------------
   Замер на телефоне: бренд 22-110, правая часть начинается ровно со 110 -
   зазор 0px, точка логотипа вплотную к кнопке. Причина не в отступах, а в
   длине подписи: «Войти через Telegram» на 390px просто не оставляет места.
   На узком экране оставляем «Войти» - куда она ведёт, и так понятно по виду,
   а на широком возвращаем полную подпись. Плюс минимальный зазор, чтобы
   бренд и кнопка не могли соприкоснуться ни при каком кегле. */
.nav{ gap:.9rem }
.brand{ flex:none }
@media (max-width:640px){
  .nav .tg-long{ display:none }
}

/* Меню-таблетка стоит по центру абсолютом, поэтому о соседях не знает. При
   900-1000px она налезала на кнопку входа (замер: 70px при 1000px, 63px при
   900px). Там, где места на все три части не хватает, прячем таблетку и
   отдаём навигацию гамбургеру - он уже умеет копировать эти ссылки. */
@media (max-width:1099px){
  .navpill{ display:none }
  .burger{ display:flex }
}

/* --- боковая прокрутка ------------------------------------------------------
   Лента работ - трёхмерная колода: карточки стоят абсолютно и веером выходят
   за свой контейнер. Это приём, а не ошибка: край колоды должен уходить за
   пределы блока. Но на узком экране крайние карточки вылезали за правый край
   страницы, и она ездила вбок (замер: окно 390px, прокрутка 453px, перебор
   63px; на планшете 768px - перебор 47px).

   Подрезать сам контейнер нельзя - тогда веер обрежется и на большом экране.
   Поэтому запрещаем боковую прокрутку у самой страницы: колода по-прежнему
   уходит к краям экрана, но «увезти» страницу вбок больше нельзя.
   Липких элементов (position:sticky) на сайте нет - проверено, ломать нечему. */
html, body{ overflow-x:hidden }
.sec{ content-visibility:visible; contain-intrinsic-size:auto }

.pg .steps{ display:grid; gap:22px }
.pg .prods, .pg .plans{ display:grid; gap:22px }

/* --- шапка раздела ---------------------------------------------------------
   Плашка с заголовком стояла ВПРИТЫК к содержанию: замер показал ровно 0px.
   Заголовок должен отделяться от того, что он подписывает, иначе раздел
   читается как сплошная лента. */
.pg .sec-head{ margin-bottom:2.6rem }

/* --- плашка-метка раздела ---------------------------------------------------
   Была набрана самым приглушённым цветом палитры (--faint) на прозрачном фоне
   с еле заметной рамкой - её просто не замечали. Плашка отмечает начало
   раздела, значит должна считываться сразу. Делаем акцентной. */
.pg .tag{
  color:var(--acc);
  border-color:rgba(127,208,255,.32);
  background:rgba(127,208,255,.1);
}

/* --- зазор между разделами --------------------------------------------------
   Было 87.5px снизу + 87.5px сверху = 175px. Когда раздел заканчивается
   картинкой (а так и есть на Сценаристе), это читается не как воздух, а как
   дыра в вёрстке. Убавляем: между разделами остаётся ~105px. */
.pg .sec{ padding:3rem 0 }

/* --- ссылки-действия --------------------------------------------------------
   В разметке перенесённых страниц это обычные ссылки, и на месте кнопок
   получался голый синий текст посреди пустой строки. Придаём им форму -
   те же «таблетки», что и на страницах примерки. Первая в ряду главная,
   остальные тише: иначе два одинаковых пятна спорят за внимание. */
/* ВАЖНО: display у ссылки перебивает атрибут hidden, а им закрыта кнопка
   «Открыть Сценарист» - её показывают только подписчикам Ultima. Без этой
   строки она светилась всем подряд. */
.sc-cta a[hidden], .hw-cta a[hidden]{ display:none }

.sc-cta a, .hw-cta a{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  height:3.25rem; padding:0 2rem; border-radius:9999px;
  font-size:1.05rem; font-weight:500; line-height:1; white-space:nowrap;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--heading);
  transition:background 150ms ease, border-color 150ms ease;
}
.sc-cta a:hover, .hw-cta a:hover{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26);
}
.sc-cta a:first-child, .hw-cta a:first-child{
  background:var(--acc); border-color:transparent;
  color:var(--acc-ink); font-weight:600;
}
.sc-cta a:first-child:hover, .hw-cta a:first-child:hover{
  background:var(--acc-hov);
}
/* «Открыть Сценарист» показывают только подписчикам Ultima - у гостя она
   скрыта. Тогда главной становится следующая кнопка, иначе весь ряд выходит
   одинаково тихим и не видно, куда жать. */
.sc-cta a[hidden] + a{
  background:var(--acc); border-color:transparent;
  color:var(--acc-ink); font-weight:600;
}
.sc-cta a[hidden] + a:hover{ background:var(--acc-hov) }

/* Размеры взяты у крупной «таблетки» первого экрана (.pill-lg): именно ею
   набраны кнопки на Каруселях, и мелкая обычная рядом с ней выглядела чужой.

   Ряд под первым экраном Сценариста повторяет первый экран Каруселей: там
   заголовок и подпись стоят по центру, значит и кнопки по центру - иначе они
   уезжают к левому краю и висят отдельно от текста, к которому относятся.
   На «Как пользоваться» ряды НЕ центрируем: они идут под текстом шага,
   выровненным влево, и центр оторвал бы их от него. */
.sc-cta{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin-top:2.25rem }

/* --- плашка-предупреждение в первом экране ----------------------------------
   На рабочей странице это врезка внутри первого экрана. Приводим её к общему
   виду примерки: то же стекло, что у карточек, и та же мягкость углов.
   Текст выравниваем по левому краю - первый экран центрован, но абзац в три
   строки по центру читается плохо. */
.hero-lite .st-note{
  margin:1.6rem auto 0; max-width:44rem; text-align:left;
  display:flex; align-items:flex-start; gap:.75rem;
  padding:1rem 1.2rem; border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:var(--muted); font-size:.92rem; line-height:1.6;
}
.hero-lite .st-note b{ color:var(--heading); font-weight:600 }

/* --- тарифы: кнопки на одном уровне -----------------------------------------
   Списки возможностей в карточках разной длины, и кнопка уезжала вслед за
   текстом: три карточки заканчивались на разной высоте. Делаем карточку
   колонкой и отдаём кнопке весь остаток высоты - тогда она всегда прижата
   к низу, на одном уровне с соседями. */
.plan{ display:flex; flex-direction:column }
.plan .foot-line{ margin-top:auto; padding-top:1.4rem }
/* Дети колонки по умолчанию растягиваются во всю ширину - плашка тарифа
   превращалась в полосу. Возвращаем ей собственную ширину. */
.plan .tag{ align-self:flex-start }
/* Цена в Ultima состоит из зачёркнутой старой и новой - в одну строку они не
   помещались, и число разрывалось посреди («3» и «990 ₽» на разных строках).
   Старую цену уводим отдельной строкой сверху, как обычно и показывают скидку,
   а новую с «/ месяц» держим неразрывно. */
.plan .price{ text-wrap:nowrap }
.plan .price s{ display:block; font-size:.55em; opacity:.75; margin-bottom:.15em }
.plan .price span{ white-space:nowrap }

/* Ссылка внутри пункта списка: «Что это» читалось как обрывок фразы. Делаем
   отдельной строкой и явной ссылкой, чтобы было видно, куда она ведёт. */
.li-more{ display:inline-block; margin-top:.5rem; color:var(--acc); font-size:.9rem }
.li-more:hover{ color:var(--acc-hov) }

/* Хлебная крошка вернулась в статьи (в head объявлен BreadcrumbList - на странице
   должна быть та же цепочка). Размер и цвет .crumbs уже заданы выше, здесь только
   отклик ссылки: без подчёркивания на наведении «Главная» не читается как кликабельная. */
.crumbs a{ text-decoration:none; border-bottom:1px solid transparent }
.crumbs a:hover{ color:var(--muted); border-bottom-color:currentColor }