/* Служебные страницы расширения: Welcome Page и политика приватности.
   Макет владельца — Figma, секция 245:687: кадры 245:621 (значок закреплён) и 245:652 (не закрепился).
   Цвета и шрифт — как у расширения в тёмной теме: ext/src/index.css, шрифт Geist. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
}

/* Фон — как у расширения в тёмной теме, ext/src/index.css .dark; у Welcome Page поверх него картинка Nebula. */
:root {
  --background: #0a0a0a;
  --foreground: #ffffff;
  --muted-foreground: #a3a3a3;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }

html, body { min-height: 100%; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Geist', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Кадр 1440×900: шапка и содержимое сверху, ссылка на политику внизу. Высота окна делится на масштаб — fit.js. */
.page {
  min-height: calc(100vh / var(--fit, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 32px 40px;
}

/* Фон — Nebula в фирменных цветах, кроп владельца; выгружен из кадра 2x, WebP качества 0,9 — 63 КБ.
   Под ним — копия 48×30 прямо в стилях и средний цвет фона: с первого кадра страница того же цвета, а не чёрная,
   пока грузится картинка (владелец 13.10). Картинку страница запрашивает заранее — preload в welcome/index.html. */
.page--welcome {
  background:
    url('bg-nebula.webp') center / cover no-repeat,
    url('data:image/webp;base64,UklGRpwCAABXRUJQVlA4WAoAAAAgAAAALwAAHQAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggrgAAAPAGAJ0BKjAAHgA+ZSKQRaQiIZqt/gBABkS0AE6ZoowAjPlMJh9wfRiMfcL3Pwc60F9NcMvD6SwwpVT6YOFHeAAA/vt2V14rpjnKwbl1m1f/JT/3m/udD/nVaD49RgoUpZa3Hz+nCmnWMaWZGchGhidpLxIT8/Iq1/4KmWc2A2bBAiMj7Qsggl/fDGvHinlfUw0SnqW8xZLcXxaRlVIPA4NLdT7uSFnkeOWiig1AAA==') center / cover no-repeat,
    #181870;
}

.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
}

/* Шапка: значок и название — paragraph/medium. Значок звука из макета не переносим: на странице нечего озвучивать. */
.header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
}

.header img { width: 32px; height: 32px; }

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* heading 1: Geist Medium 40/40, трекинг −1,5. */
.title h1 {
  font-size: 40px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -1.5px;
}

/* paragraph large/normal: Geist Regular 18/27. */
.title p,
.step p {
  font-size: 18px;
  line-height: 27px;
  font-weight: 400;
}

.title p { color: var(--muted-foreground); }

.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

/* Скругление 16 — как у кадров снимков в макете. Figma выгружает их без обрезки по углам, поэтому режем здесь. */
.step img { display: block; max-width: 100%; height: auto; border-radius: 16px; }
/* Пока снимок грузится, на его месте — плашка белого 6 %, как в каркасе, а не пустота. */
.step img { background: rgba(255, 255, 255, 0.06); }

/* Какое состояние показать, решает адрес. Без параметра — основной сценарий, значок уже в панели: новый Chrome
   закрепляет расширение сам (владелец 13.10). ?pinned=0 — значка нет: сначала закрепить через пазл. */
.steps--unpin { display: none; }
.unpinned .steps--unpin { display: flex; }
.unpinned .steps--pinned { display: none; }

/* paragraph small/normal: Geist Regular 14/20. */
.footer {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted-foreground);
}

.footer a { text-decoration: none; }
.footer a:hover { color: var(--foreground); }

/* Политика приватности — длинный текст: узкая колонка, обычный порядок заголовков. */
.policy {
  width: 100%;
  max-width: 720px;
  font-size: 16px;
  line-height: 26px;
}

.policy h1 { font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -1.5px; margin-bottom: 8px; }
.policy h2 { font-size: 22px; line-height: 30px; font-weight: 500; margin: 40px 0 12px; }
.policy h3 { font-size: 18px; line-height: 27px; font-weight: 500; margin: 28px 0 8px; }
.policy p, .policy ul { margin-bottom: 14px; color: #e5e5e5; }
.policy ul { padding-left: 24px; }
.policy .updated { color: var(--muted-foreground); margin-bottom: 32px; }