/* Страница маркетплейса (SEO). Подключается после type.css и v3-base.css.
   Шесть страниц отличаются только текстом и числами — оформление одно на все.

   Отдельного языка у страницы нет: та же лестница, та же шкала, та же геометрия,
   что на главной. Разница только в составе: здесь есть таблица требований,
   шаги и вопросы, которых на главной нет.

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

.seo-hero{padding:var(--s3) var(--gut) 0;display:grid;grid-template-columns:1fr;
  gap:var(--s3);align-items:start}
@media(min-width:960px){.seo-hero{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}}
.seo-hero h1{font-size:var(--t4);font-weight:700;line-height:1.1;letter-spacing:-.025em;
  text-wrap:balance}
.accent{font-weight:400}          /* акцент на заголовке — весом, не цветом */
.seo-lead{font-size:var(--t3);line-height:1.45;color:var(--muted);margin-top:var(--s2);
  max-width:60ch;text-wrap:pretty}
.seo-cta{margin-top:var(--s3)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--s3)}
.panel h2{font-size:var(--t2);font-weight:500;color:var(--muted);margin-bottom:var(--s2)}
table{width:100%;border-collapse:collapse}
td{padding:var(--s2) 0;border-bottom:1px solid var(--border);vertical-align:top}
td:first-child{color:var(--muted);padding-right:var(--s2)}
td:last-child{text-align:right;font-variant-numeric:tabular-nums}
/* Одной строкой держим только числа: «2000 × 2000 px» и «20 MB» — перенос читался
   как две разные величины. Словесные значения переносятся как раньше, иначе строка
   «Белый RGB(255,255,255)» задаёт панели минимальную ширину и рвёт её на 960–1180. */
tr:nth-child(1) td:last-child,tr:nth-child(3) td:last-child{white-space:nowrap}
tr:last-child td{border-bottom:0}
/* Узко — строка разворачивается, значение уходит под ключ. Данные остаются на виду. */
@media(max-width:560px){
  table,tbody,tr,td{display:block;width:100%}
  tr{border-bottom:1px solid var(--border);padding:var(--s2) 0}
  tr:last-child{border-bottom:0}
  td{border:0;padding:0}
  td:last-child{text-align:left;margin-top:var(--s1);color:var(--text);white-space:normal}
  tr:nth-child(1) td:last-child,tr:nth-child(3) td:last-child{white-space:normal}
}

.sec{padding:var(--step) var(--gut) 0}
.sec > h2{font-size:var(--t4);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--s3)}

.steps-grid{display:grid;grid-template-columns:1fr;gap:var(--s2);align-items:stretch;
  grid-auto-rows:1fr}
@media(min-width:560px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.steps-grid{grid-template-columns:repeat(4,1fr)}}
.step-card{padding:var(--s3);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r)}
.step-n{color:var(--g4);font-variant-numeric:tabular-nums}
.step-t{font-size:var(--t3);font-weight:500;margin-top:var(--s2)}
.step-d{color:var(--muted);margin-top:var(--s1);text-wrap:pretty}

.qa{padding:var(--s2) 0;border-top:1px solid var(--border)}
.q{font-size:var(--t3);font-weight:500;text-wrap:pretty}
/* Меры в знаках нет: ответы короткие, в одно предложение — с потолком в 70 знаков
   они рвались на две строки посреди числа «255,255,255». */
.a{color:var(--muted);margin-top:var(--s1);text-wrap:pretty}

/* Уход на главную. Логотип в шапке ведёт туда же — здесь не навигация, а подпись-выход,
   поэтому тише текста и с той же отзывчивостью, что у ссылок подвала. */
.seo-back{padding:var(--step) var(--gut) 0}
.seo-back a{color:var(--muted);font-weight:500;transition:color .14s ease}
.seo-back a:hover{color:var(--text)}