/* Статьи (articles/<slug>/ и их копии в ru/): тот же простой текст, что у legal.css,
   плюс врезка с коротким ответом и таблица для сравнения. Общие стили — из site.css */
.article { padding: clamp(120px, 16vh, 170px) 0 clamp(72px, 9vw, 120px); }
.article__wrap { max-width: calc(720px + var(--gut) * 2); }
.article__eyebrow { font-size: 15px; font-weight: 500; color: #5C5B56; letter-spacing: -.01em; }
.article__title { margin-top: 10px; font-size: clamp(34px, 4.4vw, 52px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.article__meta { margin-top: 14px; font-size: 14px; color: var(--ink-3); }
.article__lead { margin-top: 28px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.article h2 { margin-top: 48px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.article h3 { margin-top: 28px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.article p, .article li { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.article ul, .article ol { margin-top: 4px; padding-left: 1.2em; }
.article ul { list-style: disc; }
.article li::marker { color: var(--ink-3); }
.article strong { font-weight: 600; color: var(--ink); }
/* :not(.btn) — иначе эта ссылка перебивает белый текст кнопки .btn--dark в article__cta ниже */
.article a:not(.btn) { color: var(--ink); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.article a:not(.btn):hover { text-decoration-color: currentColor; }

/* короткий прямой ответ сверху, как выделенный блок */
.article__answer { margin-top: 28px; padding: 18px 20px; border-radius: 14px; background: var(--bg-2); }
.article__answer p { margin-top: 0; color: var(--ink); }
.article__answer p + p { margin-top: 8px; }

/* снимки окон macOS: углы у окна прозрачные, поэтому тень через drop-shadow, а не box-shadow */
.article figure { margin-top: 20px; }
.article figure img { display: block; width: 100%; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.12)) drop-shadow(0 10px 24px rgba(0,0,0,.10)); }
.article figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.article__shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.article__shots figure { margin-top: 0; }
@media (max-width: 600px) { .article__shots { grid-template-columns: minmax(0, 1fr); } }
/* вырезка из окна (без углов окна): скругляем сами */
.article__crop img { max-width: 461px; border-radius: 12px; }

/* таблица: какое приложение — почему — что делать */
.article table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 15px; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.article th { font-weight: 600; color: var(--ink); }
.article td { color: var(--ink-2); }

/* список статей (articles/ и ru/articles/): дата слева, заголовок и отрывок справа — тот же приём, что у changelog.css */
.article-list__wrap { max-width: calc(820px + var(--gut) * 2); }
.article-list__item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 32px; margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--line-2); }
.article-list__item:first-of-type { margin-top: 56px; }
.article-list__date { padding-top: 2px; font-size: 14px; color: var(--ink-3); }
.article-list__title { font-size: 22px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; text-wrap: balance; }
.article-list__title a { color: var(--ink); text-decoration: none; }
.article-list__title a:hover { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.article-list__excerpt { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 760px) {
  .article-list__item { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 28px; margin-top: 28px; }
}

/* мягкий призыв попробовать SXfont внутри текста */
.article__cta { margin-top: 20px; padding: 20px 22px; border-radius: 14px; border: 1px solid var(--line-2); }
.article__cta p { margin-top: 0; }
.article__cta .btn { margin-top: 14px; }