/* Полоса цифр под первым экраном. Перенесена из третьей примерки:
   отвечает на «сколько это стоит и что я получу» раньше, чем человек доберётся
   до разделов. Отдельным файлом, потому что site.css - общий исходник примерок. */
.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line);
        background:var(--panel) }
.stats .wrap{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem 1rem; padding-block:3rem }
@media (min-width:900px){ .stats .wrap{ grid-template-columns:repeat(4,1fr) } }

/* min-width:0 обязателен: без него длинное содержимое ячейки растягивает колонку
   до своей настоящей ширины и страница едет вбок на телефоне */
.stat{ min-width:0 }
.stat u{ display:block; text-decoration:none; font-family:"Unbounded",sans-serif;
  font-weight:500; font-size:2.6rem; letter-spacing:-.03em; color:var(--heading);
  /* цифры одной ширины - иначе при отсчёте строка дёргается */
  font-variant-numeric:tabular-nums }
.stat span{ display:block; margin-top:.5rem; font-size:.88rem; color:var(--muted); line-height:1.45 }
@media (max-width:480px){ .stat u{ font-size:2.1rem } }

/* Тариф, где один пункт - «чего нет». На рабочем сайте это перечёркнутая строка,
   здесь достаточно приглушить: список и так короткий. */
.plan li.no{ color:var(--faint) }
.plan li.no::before{ opacity:.4 }