/* Статья «Как проверить наличие товара у конкурентов автоматически».
   Каркас — `.story__*` в v2.css, здесь только её собственные блоки. */

/* ── Шапка: дата и кнопка ──────────────────────────────────────────────── */

.article-head__meta { margin-top: 18px; color: #FFFFFF73; font-size: 13px; letter-spacing: 0.2px; }

.head-cta { display: flex; align-items: center; gap: 16px; margin-top: 28px; }

.head-cta .btn { padding: 12px 20px; font-size: 14.5px; }

.head-cta__note { color: #FFFFFF73; font-size: 12.5px; }

/* ── Кнопки внутри текста ──────────────────────────────────────────────── */

.try { display: flex; align-items: center; gap: 16px; margin-top: 28px; }

.try .btn { padding: 12px 20px; font-size: 14.5px; }

.try__note { color: var(--ink-2); font-size: 13px; }

.article__text .try .btn,
.article__text .switch .btn { text-decoration: none; }

.article__text .try .btn--dark { color: #FFFFFF; }

.article__text .switch .btn--white { color: var(--ink); }

.article__text .switch .btn--outline { color: #FFFFFF; }

/* ── Метки событий ─────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.badge svg { flex: none; width: 14px; height: 14px; }

.badge--in { background: var(--ok-bg); color: var(--ok-fg); }

.badge--out { background: var(--down-bg); color: var(--down-fg); }

.badge--price { background: #FDF3E3; color: #B36B00; }

.badge--gone { background: #EFEFEC; color: #6B6B6B; }

/* ── Три сигнала ───────────────────────────────────────────────────────── */

.article__text .cues { gap: 0; margin-top: 18px; }

.article__text .cues li { align-items: center; gap: 20px; border-top: 1px solid var(--line); padding: 16px 0; }

.article__text .cues li:first-child { border-top: 0; }

.article__text .cues li::before { content: none; }

.cues__event { flex: none; width: 270px; }

.cues__arrow { flex: none; width: 16px; height: 16px; color: var(--ink-3); }

.cues__text { flex: 1; font-size: 15.5px; line-height: 1.5; }

/* ── Тёмные врезки: общая шапка и вывод ────────────────────────────────── */

.life,
.cycle {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: var(--dark);
    padding: 44px 48px;
    color: #FFFFFF;
}

.life__kicker,
.cycle__kicker { color: #FFFFFF73; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; }

.life__title,
.cycle__title { margin-top: 10px; font-size: 30px; letter-spacing: -0.8px; }

.life__outcome,
.cycle__outcome { display: flex; gap: 40px; margin-top: 32px; border-top: 1px solid #FFFFFF26; padding-top: 20px; }

.life__outcome p,
.cycle__outcome p { flex: 1; font-size: 16px; line-height: 1.5; }

.life__outcome span,
.cycle__outcome span {
    display: block;
    margin-bottom: 6px;
    color: #FFFFFF73;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── Жизнь карточки ────────────────────────────────────────────────────── */

.life__stages { display: flex; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }

.life__stages li { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.life__qty { font-size: 22px; letter-spacing: -0.5px; }

.life__zero .life__qty,
.life__gone .life__qty { color: #FFFFFF59; }

/* Столбец — остаток из двенадцати в коробке постоянной высоты: пустое место
   над ним и есть то, что уже продано или не пришло. */
.life__box {
    display: flex;
    align-items: flex-end;
    height: 132px;
    border: 1px solid #FFFFFF1A;
    border-radius: 6px;
    padding: 4px;
}

.life__bar { width: 100%; height: calc(var(--stock) / 12 * 100%); border-radius: 4px; background: #FFFFFFD9; }

.life__bar--low { background: #F2B35A; }

.life__zero .life__bar { height: 2px; background: #FF8A80; }

.life__gone .life__box { background: #FFFFFF0A; }

.life__stages b { font-size: 14px; font-weight: 500; line-height: 1.35; }

.life__date { margin-top: -6px; color: #FFFFFF73; font-size: 12.5px; }

/* ── Состояния и остатки ───────────────────────────────────────────────── */

.states { margin: 24px 0 0; }

.states div { display: flex; gap: 24px; border-top: 1px solid var(--line); padding: 14px 0; }

.states div:first-child { border-top: 0; }

.states dt { flex: none; width: 220px; font-size: 16px; font-weight: 500; line-height: 1.5; }

.states dd { margin: 0; color: #171717CC; font-size: 15.5px; line-height: 1.55; }

.article__text .stocks { flex-direction: row; gap: 12px; }

.article__text .stocks li {
    flex: 1;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 16px 18px;
    color: var(--ink);
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.8px;
}

.article__text .stocks li::before { content: none; }

.stocks span { color: var(--ink-2); font-size: 13.5px; letter-spacing: 0; }

.article__text .stocks .stocks__mine { border-color: var(--ink); background: var(--ink); color: #FFFFFF; }

.stocks__mine span { color: #FFFFFF99; }

/* ── Одна цена — разные остатки ────────────────────────────────────────── */

.twin {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 520px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    padding: 28px;
    box-shadow: 0 20px 50px #1717171A;
}

.twin__name { font-size: 17px; font-weight: 500; }

.twin__sub { margin-top: -18px; color: var(--ink-2); font-size: 13px; }

.twin__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; color: var(--ink-2); font-size: 13.5px; }

.twin__row b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 15px; font-weight: 500; }

.twin__qty { color: var(--ink); font-size: 26px; letter-spacing: -0.6px; line-height: 1; }

.twin__track { display: block; height: 10px; margin-top: 10px; border-radius: 5px; background: var(--line); }

.twin__track span { display: block; height: 100%; border-radius: 5px; background: var(--ink); }

.twin__shop--low .twin__qty { color: var(--down-fg); }

.twin__shop--low .twin__track span { background: var(--down-fg); }

.twin__kicker { color: var(--ink-2); font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; }

.twin__title { margin-top: 10px; font-size: 28px; line-height: 1.2; letter-spacing: -0.7px; }

/* ── Девять действий ───────────────────────────────────────────────────── */

.chores { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 44px 48px; }

.chores__kicker { color: var(--ink-2); font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; }

.chores__title { margin-top: 10px; font-size: 30px; letter-spacing: -0.8px; }

.chores__list { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; margin: 32px 0 0; padding: 0; counter-reset: chore; list-style: none; }

.chores__list li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-height: 118px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 14px;
    counter-increment: chore;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
}

.chores__list li::after { content: counter(chore); position: absolute; top: 16px; right: 14px; color: var(--ink-3); font-size: 12.5px; font-weight: 400; }

.chores__list .chores__again { border-color: var(--bg); background: var(--bg); }

.chores__list svg { width: 18px; height: 18px; }

.chores__questions { display: flex; align-items: center; gap: 20px; margin-top: 32px; border-top: 1px solid var(--line); padding-top: 24px; }

.chores__questions p { flex: 1; padding: 18px 0; color: var(--ink-2); font-size: 20px; line-height: 1.35; letter-spacing: -0.4px; }

.chores__questions span { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }

.chores__questions .chores__better { border-radius: 12px; background: var(--ink); padding: 18px 22px; color: #FFFFFF; }

.chores__better span { color: #FFFFFF73; }

.chores__arrow { flex: none; width: 20px; height: 20px; color: var(--ink-3); }

/* ── Четыре шага (линия времени, как в статье про наличие) ─────────────── */

.steps {
    display: flex;
    flex-direction: column;
    gap: 36px;
    border-radius: 16px;
    background: var(--dark);
    padding: 44px 48px 48px;
    color: #FFFFFF;
}

.steps__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

.steps__kicker { color: #FFFFFF73; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; }

.steps__title { margin-top: 10px; font-size: 30px; letter-spacing: -0.8px; }

.steps__note { color: #FFFFFF73; font-size: 14px; }

.steps__list { display: flex; margin: 0; padding: 0; list-style: none; }

.steps__item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #FFFFFF33;
    padding: 28px 28px 0 0;
}

.steps__item:last-child { border-top-color: transparent; }

.steps__item::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    width: 11px;
    height: 11px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: var(--dark);
}

.steps__item--on::before { background: #FFFFFF; }

.steps__top { display: flex; align-self: stretch; align-items: center; justify-content: space-between; gap: 12px; }

.steps__num { color: #FFFFFF40; font-size: 40px; letter-spacing: -1.5px; line-height: 1; }

.steps__when {
    border: 1px solid #FFFFFF40;
    border-radius: 20px;
    padding: 5px 10px;
    color: #FFFFFFCC;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.steps__item--on .steps__when { border-color: #FFFFFF; background: #FFFFFF; color: var(--ink); }

.steps__name { font-size: 17px; font-weight: 500; }

.steps__text { color: #FFFFFF99; font-size: 14px; line-height: 1.55; }

/* ── Что собирается ────────────────────────────────────────────────────── */

.article__text .groups { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.article__text .groups li { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 7px 16px; color: var(--ink); font-size: 15px; line-height: 1.4; }

.article__text .groups li::before { content: none; }

/* ── Вчера, сегодня и лента ────────────────────────────────────────────── */

.pairs { margin: 0; }

.pairs div { border-top: 1px solid var(--line); padding: 16px 0 0; }

.pairs div + div { margin-top: 16px; }

.pairs dt { font-size: 16px; font-weight: 500; }

.pairs dd { display: flex; align-items: center; gap: 14px; margin: 10px 0 0; color: var(--ink-2); font-size: 22px; letter-spacing: -0.5px; }

.pairs small { display: block; margin-bottom: 2px; font-size: 12.5px; letter-spacing: 0; }

.pairs svg { flex: none; width: 18px; height: 18px; color: var(--ink-3); }

.pairs .pairs__now { color: var(--ink); }

.pairs__now small { color: var(--ink-2); }

.feed {
    flex: none;
    width: 480px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    padding: 22px 24px 10px;
    box-shadow: 0 20px 50px #1717171A;
}

.feed__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; color: var(--ink-2); font-size: 13px; }

.feed__head b { color: var(--ink); font-size: 16px; font-weight: 500; }

.feed ul { margin: 0; padding: 0; list-style: none; }

.feed li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; border-top: 1px solid var(--line); padding: 12px 0; font-size: 14.5px; }

.feed .badge { padding: 5px 11px; font-size: 13px; }

.feed .badge svg { width: 13px; height: 13px; }

/* ── Что делать с данными ──────────────────────────────────────────────── */

.uses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }

.uses section { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 22px 24px; }

.article__text .uses .uses__top { display: flex; align-items: center; justify-content: space-between; margin: 0; color: var(--ink-3); font-size: 13px; }

.uses__top svg { width: 20px; height: 20px; color: var(--ink); }

.article__text .uses h3 { margin: 0; font-size: 18px; line-height: 1.35; letter-spacing: -0.2px; }

.article__text .uses p { margin: 0; color: #171717B3; font-size: 15px; line-height: 1.6; }

/* ── Один цикл проверки ────────────────────────────────────────────────── */

.cycle__row { display: flex; align-items: center; gap: 20px; margin: 32px 0 0; }

.cycle__row div { flex: 1; padding: 22px 0; }

.cycle__row dt { color: #FFFFFFB3; font-size: 44px; line-height: 1.1; letter-spacing: -1.4px; white-space: nowrap; }

.cycle__row dd { margin: 6px 0 0; color: #FFFFFF73; font-size: 14px; }

.cycle__op { color: #FFFFFF4D; font-size: 34px; }

.cycle__row .cycle__total { flex: 1.4; border-radius: 12px; background: var(--surface); padding: 22px 24px; }

.cycle__total dt { color: var(--ink); font-size: 48px; }

.cycle__total dd { color: var(--ink-2); }

/* ── С чего начать ─────────────────────────────────────────────────────── */

.article__text .start { gap: 0; margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 8px 24px; }

.article__text .start li { align-items: center; gap: 14px; border-top: 1px solid var(--line); padding: 10px 0; color: var(--ink); font-size: 16px; }

.article__text .start li:first-child { border-top: 0; }

/* Галочка — фоном маркера: у пункта списка маркер и так псевдоэлемент,
   и лишний элемент ради иконки в разметку не нужен. */
.article__text .start li::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ── Призыв в конце текста ─────────────────────────────────────────────── */

.switch {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
    border-radius: 14px;
    background: var(--dark);
    padding: 28px;
    color: #FFFFFF;
}

.article__text .switch__title { margin: 0; color: #FFFFFF; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.5px; }

.article__text .switch__text { max-width: 560px; margin: 0; color: #FFFFFF99; font-size: 14.5px; line-height: 1.6; }

.switch__buttons { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }

.article__text .switch__note { margin: 0; color: #FFFFFF73; font-size: 12.5px; }

.article__text .switch__request {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    border-top: 1px solid #FFFFFF26;
    padding-top: 16px;
    color: #FFFFFF99;
    font-size: 13.5px;
    line-height: 1.5;
}

.switch__request svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* ── Планшет ───────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .life,
    .cycle,
    .chores,
    .steps { padding: 36px 32px; }

    .steps__head { flex-direction: column; align-items: flex-start; }

    .steps__list { flex-wrap: wrap; row-gap: 32px; }

    .steps__item { flex: 1 1 50%; }

    .steps__item:nth-child(2) { border-top-color: transparent; }

    .life__stages { gap: 8px; }

    .chores__list { grid-template-columns: repeat(3, 1fr); }

    .chores__list li { min-height: 92px; }

    .twin,
    .feed { align-self: center; max-width: 100%; }

    .cycle__row { flex-wrap: wrap; row-gap: 8px; }

    .cycle__op { display: none; }

    .cycle__row div { flex: 1 1 30%; }

    .cycle__row .cycle__total { flex-basis: 100%; }
}

/* ── Телефон ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .head-cta,
    .try { flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }

    .head-cta .btn,
    .try .btn { justify-content: center; padding: 13px 18px; font-size: 15px; }

    .life,
    .cycle,
    .chores { border-radius: 14px; padding: 28px 20px 24px; }

    .life__title,
    .cycle__title,
    .chores__title,
    .steps__title,
    .twin__title { font-size: 22px; line-height: 1.25; letter-spacing: -0.5px; }

    /* Сигнал и его смысл не помещаются в строку: смысл уходит под метку. */
    .article__text .cues li { flex-direction: column; align-items: flex-start; gap: 8px; }

    .cues__event { width: auto; }

    .cues__arrow { display: none; }

    .cues__text { font-size: 15px; }

    /* Шесть этапов в строку на телефоне не помещаются — по три в ряд. */
    .life__stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; margin-top: 22px; }

    .life__qty { font-size: 17px; }

    .life__box { height: 84px; }

    .life__stages b { font-size: 12.5px; }

    .life__date { font-size: 11.5px; }

    .life__outcome,
    .cycle__outcome { flex-direction: column; gap: 14px; margin-top: 22px; padding-top: 16px; }

    .life__outcome p,
    .cycle__outcome p { font-size: 15px; }

    .states div { flex-direction: column; gap: 2px; }

    .states dt { width: auto; }

    .states dd { font-size: 15px; }

    .article__text .stocks { gap: 8px; }

    .article__text .stocks li { padding: 12px; font-size: 22px; }

    .stocks span { font-size: 12px; }

    .twin { width: 100%; padding: 20px; }

    .twin__qty { font-size: 22px; }

    .chores__list { grid-template-columns: 1fr 1fr; margin-top: 20px; }

    .chores__list li { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; min-height: 52px; padding: 0 12px; font-size: 13px; }

    .chores__list li::after { display: none; }

    .chores__list svg { flex: none; width: 16px; height: 16px; }

    .chores__questions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 20px; padding-top: 16px; }

    .chores__questions p { padding: 0; font-size: 17px; }

    .chores__questions .chores__better { padding: 16px 18px; }

    .chores__arrow { align-self: center; transform: rotate(90deg); }

    .steps { gap: 22px; border-radius: 14px; padding: 28px 22px 26px; }

    .steps__note { order: 3; font-size: 13px; }

    /* Линия времени поворачивает вниз: четыре колонки в 350 не помещаются. */
    .steps__list { flex-direction: column; gap: 20px; }

    .steps__item { border-top: 0; padding: 0 0 0 30px; }

    .steps__item::before { top: 4px; }

    .steps__num { font-size: 15px; letter-spacing: 0; color: #FFFFFF73; }

    .pairs dd { font-size: 18px; }

    .feed { width: 100%; padding: 18px 18px 6px; }

    .uses { grid-template-columns: 1fr; }

    .uses section { padding: 18px; }

    .article__text .uses h3 { font-size: 17px; }

    .cycle__row { align-items: flex-start; column-gap: 12px; margin-top: 20px; }

    .cycle__row div { flex-basis: 25%; padding: 0; }

    .cycle__row dt { font-size: 32px; }

    .cycle__row dd { font-size: 12.5px; }

    .cycle__row .cycle__total { padding: 18px 20px; }

    .cycle__total dt { font-size: 38px; }

    .article__text .start { padding: 6px 16px; }

    .article__text .start li { font-size: 15px; }

    .switch { border-radius: 16px; padding: 28px 22px 24px; }

    .switch__buttons { flex-direction: column; }

    .switch__buttons .btn { justify-content: center; padding: 13px 18px; }
}