/* Макет «Разбор»: длинное чтение, а не витрина.

   Задача другая, чем у остальных макетов, — и вёрстка поэтому другая.
   Там первый экран продаёт, здесь он отвечает: шапка статьи, выходные
   данные строкой, ответ крупной врезкой. Ниже две колонки — прилипшее
   оглавление слева и текст справа, как в длинных материалах, где важно
   видеть, где ты находишься.

   Мокап телефона, полосу цифр и бегущую строку этот макет у темы
   не берёт: они превращают чтение обратно в продажу. Отказ прописан
   в landing.js.

   Палитру задают темы через общие переменные, как во всех макетах. */

:root{
  --bg:#0a0f1e;
  --bg-soft:#0d1425;
  --card:rgba(255,255,255,.045);
  --line:rgba(130,160,255,.14);
  --text:#eef2fb;
  --muted:#9aa6c4;
  --accent:#3b82f6;
  --accent2:#8ab4ff;
  --accent-hover:#2f6fe0;
  --green:#34d399;
  --amber:#fbbf24;
  --radius:18px;
  --rule:rgba(130,160,255,.18);
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; background:var(--bg); }
body{
  background:transparent;
  color:var(--text);
  line-height:1.8;
  overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 24px;
       position:relative; z-index:1; }
h1,h2,h3{ line-height:1.22; font-weight:850; letter-spacing:-.022em; }
h1{ font-size:clamp(32px,5.2vw,58px); }
h2{ font-size:clamp(21px,2.6vw,27px); }
h3{ font-size:clamp(16px,1.9vw,19px); }
p{ margin-bottom:16px; }
p:last-child{ margin-bottom:0; }

header{ position:sticky; top:0; z-index:30; backdrop-filter:blur(14px);
        background:rgba(10,15,30,.74); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between;
      gap:14px; padding-top:13px; padding-bottom:13px; }
.brand{ display:inline-flex; align-items:center; gap:9px; font-weight:800;
        letter-spacing:.15em; text-transform:uppercase; font-size:12.5px; }
.brand-mark{ width:26px; height:26px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:13px 24px; border-radius:999px; font-weight:800; font-size:14px;
      border:1px solid transparent; cursor:pointer;
      transition:transform .15s ease, background .15s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-hover); }
.btn-ghost{ border-color:var(--line); color:var(--text); }

/* ── шапка статьи ─────────────────────────────────────────────────────── */
/* Ширина уже общей: заголовок и ответ читаются строками, а не полосами */
.hero{ padding:72px 0 40px; border-bottom:1px solid var(--rule); }
.hero > .wrap{ max-width:800px; }
.eyebrow{ display:inline-block; font-size:11.5px; letter-spacing:.2em;
          text-transform:uppercase; color:var(--accent2); margin-bottom:20px; }
.hero h1{ margin-bottom:18px; }

/* Выходные данные: дата, издатель, время чтения. Набраны мелко и серым —
   это служебная строка, а не заявление */
.meta{ font-size:12.5px; letter-spacing:.04em; color:var(--muted);
       text-transform:uppercase; margin-bottom:26px; }

/* Ответ — главный элемент страницы, поэтому он крупнее всего остального
   текста и отбит линией. Человек из поиска должен получить его, не листая */
.answer{ font-size:clamp(19px,2.5vw,24px); line-height:1.55; font-weight:500;
         border-left:2px solid var(--accent); padding-left:22px;
         margin-bottom:28px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:10px; }
.note{ font-size:12.5px; color:var(--muted); margin-top:12px; }

/* ── две колонки ──────────────────────────────────────────────────────── */
.layout{ display:grid; grid-template-columns:230px minmax(0,1fr);
         gap:56px; align-items:start; padding-top:48px; padding-bottom:8px; }
.rail{ position:sticky; top:76px; }
/* Колонка под чтение, а не под ширину экрана: строка длиннее ~90 знаков
   заставляет глаз терять начало следующей — на длинном тексте это
   заметно сильнее, чем на коротких блоках остальных макетов */
.body{ max-width:720px; }

.toc{ padding:0; background:transparent; border:none; }
.toc h2{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
         color:var(--muted); font-weight:800; margin-bottom:14px; }
.toc ol{ list-style:none; counter-reset:toc; }
.toc li{ counter-increment:toc; margin-bottom:2px; }
.toc a{ display:block; padding:7px 0 7px 30px; position:relative;
        font-size:14px; color:var(--muted); line-height:1.45;
        border-left:1px solid var(--rule); transition:color .15s ease; }
.toc a::before{ content:counter(toc,decimal-leading-zero);
                position:absolute; left:12px; top:7px; font-size:11px;
                font-variant-numeric:tabular-nums; opacity:.55; }
.toc a:hover{ color:var(--text); border-left-color:var(--accent); }

/* ── разделы ──────────────────────────────────────────────────────────── */
/* Не карточки: сплошной текст с тонкими разделителями читается длинными
   кусками легче, а карточки дробят его на прямоугольники */
.sections{ display:block; }
.sec{ position:relative; padding:0 0 34px; margin-bottom:34px;
      border-bottom:1px solid var(--rule); scroll-margin-top:84px;
      background:transparent; border-left:none; border-right:none;
      border-top:none; border-radius:0; }
.sec:last-child{ border-bottom:none; }
.sec-n{ display:block; font-size:12px; font-variant-numeric:tabular-nums;
        letter-spacing:.18em; color:var(--accent2); opacity:.75;
        margin-bottom:10px; }
.sec h2{ margin-bottom:14px; }
.sec p{ color:#dbe3f4; }

.block{ padding-top:44px; }
.block h2{ margin-bottom:18px; }

/* ── таблица ──────────────────────────────────────────────────────────── */
/* Без рамок по клеткам: линии между строками достаточно, а сетка из
   прямоугольников спорит с остальной страницей */
.table-wrap{ overflow-x:auto; }
table.cmp{ width:100%; border-collapse:collapse; font-size:15px; }
table.cmp th, table.cmp td{ padding:14px 16px 14px 0; text-align:left;
                            border-bottom:1px solid var(--rule);
                            vertical-align:top; }
table.cmp th{ font-weight:800; font-size:11.5px; letter-spacing:.14em;
              text-transform:uppercase; color:var(--muted);
              border-bottom-color:var(--line); }
table.cmp td:first-child{ color:var(--text); font-weight:700; width:34%; }
table.cmp td{ color:var(--muted); }

/* ── шаги ─────────────────────────────────────────────────────────────── */
.steps{ list-style:none; counter-reset:step; }
.step{ counter-increment:step; position:relative; padding:0 0 26px 56px;
       margin-bottom:26px; border-bottom:1px solid var(--rule);
       background:transparent; border-radius:0; }
.step:last-child{ border-bottom:none; margin-bottom:0; }
.step::before{ content:counter(step,decimal-leading-zero); position:absolute;
               left:0; top:-2px; font-size:26px; font-weight:850;
               font-variant-numeric:tabular-nums; color:var(--accent);
               opacity:.5; letter-spacing:-.03em; }
.step h3{ margin-bottom:6px; }
.step p{ color:var(--muted); }

/* ── вопросы ──────────────────────────────────────────────────────────── */
details{ border:none; border-bottom:1px solid var(--rule); border-radius:0;
         background:transparent; padding:16px 0; margin-bottom:0; }
summary{ cursor:pointer; font-weight:750; font-size:16.5px; list-style:none;
         position:relative; padding-right:32px; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:'+'; position:absolute; right:6px; top:-2px;
                font-size:22px; font-weight:400; color:var(--accent2);
                transition:transform .18s ease; }
details[open] summary::after{ transform:rotate(45deg); }
details p{ color:var(--muted); margin-top:10px; }

/* ── финал и ссылки ───────────────────────────────────────────────────── */
.final{ margin-top:52px; padding:38px 34px; text-align:center;
        border:1px solid var(--line); border-radius:var(--radius);
        background:var(--bg-soft); }
.final h2{ margin-bottom:12px; }
.final p{ color:var(--muted); margin-bottom:20px; }

.links-block{ padding-bottom:8px; }
.links{ display:flex; flex-wrap:wrap; gap:8px; }
.links a{ border:1px solid var(--line); border-radius:999px; padding:8px 15px;
          font-size:13.5px; color:var(--accent2); }
.links a:hover{ background:var(--card); }

/* Карточка остаётся объявленной: темы оформляют .card, и без неё половина
   их правил до макета не доходит. Здесь она нужна финальному блоку */
.card{ border-radius:var(--radius); }

footer{ margin-top:56px; padding:28px 0 38px; border-top:1px solid var(--rule);
        color:var(--muted); font-size:13px; text-align:center; }

@media (max-width:900px){
  /* Оглавление уходит наверх обычным списком: прилипшая колонка на узком
     экране съедает половину ширины строки */
  .layout{ grid-template-columns:1fr; gap:32px; padding-top:34px; }
  .rail{ position:static; }
  .toc a{ padding-left:28px; }
  .hero{ padding:48px 0 32px; }
}