/* Гайды: список статей (guides.html) и сами статьи (guide-*.html).
   Страницы живут отдельно от приложения, как faq.html и offer.html: та же
   типографика поверх токенов из style.css, плюс то, что нужно статье:
   плашка рубрики, обложка, таблицы, блок «Где купить», вопросы и карточки
   статей. Цвета только из токенов: светлая тема (html.light, её включает
   скрипт в <head> страницы по сохранённому выбору) перекрашивает всё сама. */

body { background: var(--color-bg); color: var(--color-text);
       font-family: Inter, system-ui, sans-serif; margin: 0; }
.doc { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; }
.doc.is-list { max-width: 1040px; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
        color: var(--color-neutral-400); text-decoration: none; margin-bottom: 28px; }
.back:hover { color: var(--color-accent); }
/* На тачах под палец, как на faq.html. */
@media (pointer: coarse) { .back { padding: 10px 0; margin-top: -10px; margin-bottom: 18px; } }

h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 14px; }
h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.01em; margin: 44px 0 12px; }
h3 { font-size: 16px; line-height: 1.4; margin: 24px 0 6px; }
p, li { font-size: 15px; line-height: 1.7; color: var(--color-neutral-300); }
p { margin: 0 0 14px; }
ol, ul { padding-left: 22px; margin: 0 0 16px; }
li { margin-bottom: 8px; }
b, strong { color: var(--color-neutral-200); font-weight: 600; }
a { color: var(--color-accent); }

/* Строка над заголовком: рубрика, раздел, дата, время чтения. */
.g-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
         margin-bottom: 14px; font-size: 12.5px; color: var(--color-neutral-500); }
.g-top a { color: var(--color-neutral-400); text-decoration: none; }
.g-top a:hover { color: var(--color-accent); }
.g-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
         line-height: 1.5; color: var(--color-accent-300); background: var(--color-accent-900);
         padding: 2px 8px; border-radius: 5px; }
html.light .g-tag { color: var(--color-accent-800); background: var(--color-accent-100); }

.lead { font-size: 17px; line-height: 1.6; color: var(--color-neutral-200); margin: 0 0 26px; }

.cover { margin: 0 0 10px; }
.cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
             border-radius: var(--radius-lg); background: var(--color-surface); }

.note { border-left: 2px solid var(--color-accent); padding: 2px 0 2px 14px;
        margin: 22px 0; color: var(--color-neutral-400); font-size: 14px; }
.note p, .note li { font-size: 14px; color: var(--color-neutral-400); }
.note p:last-child { margin-bottom: 0; }

/* Таблица сравнения. На телефоне строки становятся карточками: подпись
   столбца берётся из data-label ячейки. */
.g-table { margin: 18px 0 22px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
           overflow: hidden; }
.g-table table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.g-table th, .g-table td { text-align: left; vertical-align: top; padding: 11px 14px;
                           line-height: 1.5; border-bottom: 1px solid var(--color-divider);
                           color: var(--color-neutral-300); }
.g-table thead th { background: var(--color-surface); color: var(--color-text); font-weight: 600; }
.g-table tbody th { font-weight: 500; color: var(--color-neutral-200); width: 28%; }
.g-table tbody tr:last-child th, .g-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
  .g-table thead { display: none; }
  .g-table table, .g-table tbody, .g-table tr, .g-table th, .g-table td { display: block; width: auto; }
  .g-table tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--color-divider); }
  .g-table tbody tr:last-child { border-bottom: 0; }
  .g-table tbody th { width: auto; padding: 0 0 6px; border: 0; color: var(--color-text); font-weight: 600; }
  .g-table td { padding: 3px 0; border: 0; font-size: 14px; }
  .g-table td::before { content: attr(data-label) ": "; color: var(--color-neutral-500); }
}

/* Где купить на Plazzbuy. */
.g-buy { margin: 40px 0; padding: 22px 24px; border-radius: var(--radius-lg);
         background: var(--color-surface); box-shadow: var(--shadow-sm); }
.g-buy h2 { margin: 0 0 8px; font-size: 19px; }
.g-buy > p { font-size: 14.5px; }
.g-buy ul { margin: 18px 0 0; }
.g-buy li { font-size: 14px; line-height: 1.6; margin-bottom: 6px; }
.g-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.g-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
             border-radius: var(--radius-md); border: 1px solid var(--color-divider);
             color: var(--color-text); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.g-links a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.g-links a.primary { background: var(--color-accent); border-color: transparent; color: #0d1c16; }
.g-links a.primary:hover { background: var(--color-accent-400); color: #0d1c16; }
/* В светлой теме акцент темнее (style.css, html.light): текст на кнопке белый. */
html.light .g-links a.primary { color: #fff; }
html.light .g-links a.primary:hover { background: var(--color-accent-600); color: #fff; }

/* Частые вопросы. */
.g-faq h3 { margin-top: 22px; }
.g-faq p { margin-bottom: 0; }

/* Канал в Telegram в конце гайда. Вид как у блока «Канал Plazzbuy» на
   главной (.ha-channel в home.css). */
.g-channel { margin: 40px 0; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--color-surface);
             box-shadow: inset 0 0 0 1px rgba(110, 168, 255, .25);
             display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.g-channel-ic { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
                background: #2a8bd6; color: #fff; }
.g-channel-b { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; }
.g-channel-b b { font-size: 18px; font-weight: 600; color: var(--color-text); }
.g-channel-b span { font-size: 13.5px; line-height: 1.5; color: var(--color-neutral-400); }
.g-channel-btn { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 9px;
                 background: #2a8bd6; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
                 transition: background-color .15s; }
.g-channel-btn:hover { background: #3a9be6; color: #fff; }

/* Карточки статей: список гайдов и «Ещё гайды» под статьёй. Вид как у
   блока «Гайды» на главной. */
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.g-grid.is-more { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.g-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
          background: var(--color-surface); box-shadow: var(--shadow-sm);
          color: var(--color-text); text-decoration: none; transition: box-shadow .15s ease; }
.g-card:hover { box-shadow: 0 0 0 1px var(--color-accent-600); }
.g-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
              background: var(--color-surface-2); }
.g-card-b { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px 18px; }
.g-card-t { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--color-text); }
.g-card-d { font-size: 13.5px; line-height: 1.5; color: var(--color-neutral-500); }
.is-more .g-card-t { font-size: 15.5px; }

.g-after { margin-top: 36px; font-size: 14px; color: var(--color-neutral-400); }

footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--color-divider);
         font-size: 12px; color: var(--color-neutral-500); }
footer a { color: var(--color-neutral-400); text-decoration: none; margin-right: 14px; display: inline-block; margin-bottom: 6px; }
footer a:hover { color: var(--color-accent); }

@media (max-width: 640px) {
  .doc { padding: 24px 16px 64px; }
  h1 { font-size: 26px; }
  h2 { font-size: 19px; margin-top: 36px; }
  .lead { font-size: 16px; }
  .g-buy { padding: 18px 16px; }
  .g-channel { padding: 16px; gap: 12px; flex-wrap: nowrap; }
  .g-channel-ic { width: 44px; height: 44px; }
  .g-channel-ic svg { width: 21px; height: 21px; }
  .g-channel-b b { font-size: 15px; }
  .g-channel-b span { font-size: 12px; }
  .g-channel-more { display: none; }
  .g-channel-btn { height: 38px; padding: 0 13px; font-size: 13px; }
}