/* Лендинг. Тот же язык, что в самом расширении.
   ⚠️ 03.08 переведён на облик «сгруппированный список» вместе с продуктом:
   фон страницы холоднее карточек, рамки заменены мягкими тенями, кнопки —
   пилюли, радиусы крупнее. Иначе сайт и расширение выглядели бы как два
   разных продукта. */

@import url("assets/tokens.css");

body { background: var(--group-bg); color: var(--ink); font: 400 17px/1.6 var(--font); }

/* ⚠️ height: auto обязателен. В разметке у картинок стоят width и height —
   они нужны, чтобы браузер держал место до загрузки и страница не прыгала.
   Но CSS задавал только max-width, и высота бралась из атрибута: картинка
   сжималась по горизонтали. Замерено 03.08 — все четыре снимка ехали
   (0.531 вместо 0.625 и так далее). */
img { max-width: 100%; height: auto; }
a { color: inherit; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* ── шапка ───────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 24px; border-bottom: 1px solid var(--sep);
  background: color-mix(in srgb, var(--group-bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
}
.brand {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  font: 600 16px/1 var(--font); letter-spacing: -.01em;
}
.nav nav { display: flex; align-items: center; gap: 20px; }
.nav nav a { text-decoration: none; font-size: 14.5px; color: var(--ink-dim); }
.nav nav a:hover { color: var(--ink); }
/* Кнопка в шапке — тоже кнопка: цвет ссылки её перебивал. */
.nav nav a.cta, .nav nav a.cta:hover { color: var(--on-accent); }

/* ── кнопка ──────────────────────────────────────────────────────────────── */
.cta {
  display: inline-block; text-decoration: none;
  background: var(--accent); color: var(--on-accent);
  font: 600 16px/1 var(--font); letter-spacing: -.01em;
  padding: 16px 28px; border-radius: 999px;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-instant) var(--ease);
}
.cta:hover { background: var(--accent-press); }
.cta:active { transform: scale(.985); }
.cta.small { padding: 10px 18px; font-size: 14px; border-radius: 999px; }

/* ── герой ───────────────────────────────────────────────────────────────── */
.hero {
  max-width: 1040px; margin: 0 auto; padding: 76px 24px 64px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
h1 {
  font: 600 clamp(34px, 5.2vw, 52px)/1.06 var(--font-display);
  letter-spacing: -.035em; text-wrap: balance;
}
.lede { margin-top: 18px; font-size: 18.5px; color: var(--ink-dim); max-width: 32em; }
.hero-actions { margin-top: 30px; display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; }
.micro { font-size: 14px; color: var(--ink-faint); }
.hero-shot img {
  border-radius: 18px; margin: 0 auto; max-width: 340px;
  box-shadow: 0 24px 56px rgb(16 24 40 / .13);
}

/* ── полоса цифр ─────────────────────────────────────────────────────────── */
.strip { background: var(--group-card); border-top: 1px solid var(--sep);
  border-bottom: 1px solid var(--sep); }
.strip-in { max-width: 1040px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(3, 1fr); }
.strip div { padding: 30px 24px; text-align: center; }
.strip div + div { border-left: 1px solid var(--sep); }
.strip b {
  display: block; font: 600 38px/1 var(--font-display); letter-spacing: -.03em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.strip span { display: block; margin-top: 9px; font-size: 14px; color: var(--ink-dim); }

/* ── блок с картинкой ────────────────────────────────────────────────────── */
.feature {
  max-width: 1040px; margin: 0 auto; padding: 82px 24px;
  display: grid; grid-template-columns: 1fr .78fr; gap: 56px; align-items: center;
}
.feature.reverse { grid-template-columns: .78fr 1fr; }
/* Кадр страницы шире попапа — ему своя ширина, иначе он ужимается до нечитаемого. */
.feature-shot.wide img { max-width: 520px; }
h2 {
  font: 600 clamp(26px, 3.4vw, 34px)/1.15 var(--font-display);
  letter-spacing: -.025em; text-wrap: balance;
}
.feature-text p { margin-top: 16px; color: var(--ink-dim); max-width: 34em; }
.feature-shot img {
  border-radius: 18px; margin: 0 auto; max-width: 320px;
  box-shadow: 0 18px 44px rgb(16 24 40 / .11);
}

/* ── честный блок ────────────────────────────────────────────────────────── */
.honest {
  max-width: 760px; margin: 0 auto; padding: 26px 28px 26px 30px;
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.honest h2 { font-size: 21px; }
.honest p { margin-top: 12px; color: var(--accent-ink); font-size: 15.5px; }

/* ── сетка мелких фич ────────────────────────────────────────────────────── */
.grid {
  max-width: 1040px; margin: 0 auto; padding: 64px 24px 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.grid article {
  background: var(--group-card); border-radius: 14px; padding: 22px;
  box-shadow: 0 1px 2px rgb(16 24 40 / .05);
}
.grid h3 { font: 600 16px/1.3 var(--font); }
.grid p { margin-top: 7px; font-size: 14.5px; color: var(--ink-dim); line-height: 1.5; }

/* ── призыв ──────────────────────────────────────────────────────────────── */
.cta-block { max-width: 700px; margin: 0 auto; padding: 88px 24px 100px;
  text-align: center; }
.cta-block p { margin: 16px auto 30px; color: var(--ink-dim); max-width: 34em; }

/* ── подвал ──────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--sep); background: var(--group-card); }
.foot-in { max-width: 1040px; margin: 0 auto; padding: 32px 24px;
  font-size: 14.5px; color: var(--ink-faint); }
.foot-in p + p { margin-top: 6px; }
.foot-in a { color: var(--ink-dim); text-decoration: none; }
.foot-in a:hover { color: var(--ink); text-decoration: underline; }
.quiet { color: var(--ink-faint) !important; font-size: 14.5px; }

@media (max-width: 900px) {
  .hero, .feature, .feature.reverse { grid-template-columns: 1fr; gap: 36px;
    padding-top: 52px; }
  .hero-shot, .feature-shot { order: -1; }
  .grid { grid-template-columns: 1fr 1fr; }
  .strip-in { grid-template-columns: 1fr; }
  .strip div + div { border-left: 0; border-top: 1px solid var(--line); }
  .nav nav a:not(.cta) { display: none; }
}
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

/* ── текстовые страницы ──────────────────────────────────────────────────── */
.prose { max-width: 720px; margin: 0 auto; padding: 66px 24px 90px; }
.prose h1 { font-size: clamp(30px, 4vw, 40px); }
.prose h2 { font-size: 20px; margin-top: 40px; }
.prose p, .prose li { color: var(--ink-dim); margin-top: 12px; }
.prose ul { padding-left: 20px; }
.prose li { margin-top: 7px; }
.prose table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15px; }
.prose td { padding: 11px 12px; border-top: 1px solid var(--line);
  color: var(--ink-dim); vertical-align: top; }
.prose td:first-child { width: 170px; color: var(--ink); }
.cmp { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15.5px; }
.cmp th { text-align: left; padding: 12px; font-size: 13px; color: var(--ink-faint);
  font-weight: 600; border-bottom: 1px solid var(--line-strong); }
.cmp td { padding: 12px; border-top: 1px solid var(--line); color: var(--ink-dim); }
.cmp td:first-child { color: var(--ink); width: auto; }
.cmp .yes { color: var(--accent-ink); font-weight: 600; }
.cmp .no { color: var(--ink-faint); }