/* ============================================================================
   Helgio — тема лендинга в стиле расширения
   Подключать ПОСЛЕ index.css:
     <link href="./static/css/index.css" rel="stylesheet"/>
     <link href="./static/css/helgio-theme.css" rel="stylesheet"/>

   Основная мысль: один брендовый цвет. Фиолетовый выведен из палитры,
   его роль акцента взял зелёный. Заменять фиолетовый нейтральным серым
   нельзя — подзаголовки разделов сливаются с описанием под ними.
   ============================================================================ */

:root {
  /* фиолетовые переменные перенаправлены на нейтральные тона */
  --p: #3a4150;
  --p-light: #f4f6f9;
  --p-mid: #e4e8ee;
  --p-dark: #2b3140;
  --purple-color: #3a4150;

  /* акцент вместо фиолетового */
  --accent: #1aa876;
}

/* ---------- 1. Акценты ---------- */

.section-tagline,
.plan-tagline,
.free-bar-sub,
.footer-cta .tagline {
  color: #3a4150 !important;
}

.hero-section .text-purple {
   color: #676767 !important;
}

.start-step strong,
.tap-hint,
#demo-vocabulary-translation-dest span.sentence-highlighter-highlight {
  color: #000000 !important;
}

/* ---------- 2. Макеты: нейтральные шапки вместо мятных ---------- */

.browser-bar,
.vm-header,
.document-mock-bar {
  background: #f5f7fa !important;
  border-bottom: 1px solid #e4e8ee;
}

/* вкладки в макете словаря: неактивные серые, активная зелёная */
.vm-tab {
  color: #7a8290 !important;
  font-weight: 600 !important;
}
.vm-tab:first-child {
  color: var(--g-dark) !important;
  font-weight: 800 !important;
  box-shadow: inset 0 -2px 0 var(--g);
}

.word-item.is-selected {
  border-color: rgba(37, 204, 145, .45) !important;
  background: #f1faf6 !important;
}

/* ---------- 3. Секция «Книги» — зелёная ---------- */

.books-section {
  background: linear-gradient(160deg, #1aa876 0%, #12946a 55%, #0e7d59 100%) !important;
}
.books-section .books-title-accent,
.books-section .text-purple,
.books-section h2 span {
  color: #ffffff !important;
  opacity: .82;
}
.books-section .books-title-accent {
    color: #111111 !important;
}
.books-section .books-format-badge {
  background: rgba(255, 255, 255, .16) !important;
  color: #ffffff !important;
}
.books-section .books-eyebrow {
  color: rgba(255, 255, 255, .85) !important;
}
/* обложка была тёмно-зелёной и на новом фоне пропадала */
.books-section .book-cover--green {
  background: #d9a441 !important;
}
.books-section .book-cover--green .book-cover-title,
.books-section .book-cover--green .book-cover-title--muted {
  color: #3a2a08 !important;
}
/* штатное свечение книг — справа и почти невидимое; усиливаем
   и добавляем такое же слева, как в блоке Netflix */
.books-glow {
  opacity: .10 !important;
  filter: blur(30px);
}
.books-section .books-wrap::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: #ffffff;
  opacity: .10;
  filter: blur(40px);
  top: -220px;
  left: -120px;
  pointer-events: none;
  z-index: 0;
}
.books-section .books-wrap { position: relative; }
.books-section .books-wrap > * { position: relative; z-index: 1; }

/* пятно слева было красным (#e50914) — уводило в фирменные цвета Netflix,
   а не Helgio; делаем зелёным */
.netflix-glow {
  background: var(--g) !important;
  opacity: .22 !important;
}

/* ---------- 4. Фирменный знак в бейдже первого экрана ---------- */

.helgio-browser-badge__icon .helgio-mark {
  width: 26px;
  height: 26px;
  display: block;
}

/* ---------- 5. Секция подписки ---------- */
/* Купить тариф здесь нельзя, цель секции — установка. Три карточки с ценами
   читались как выбор тарифа и вели в тупик: сравнение, три одинаковых списка
   функций и ни одной кнопки покупки. Прежняя сетка скрывается, вместо неё
   одна колонка с ценой и единственным действием. */

.pricing-cards-grid,
.pricing-section .plans-grid {
  display: none !important;
}

.hg-price {
  /* display: inline-flex; */
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  background: #f1faf6;
  border: 1.5px solid #d8ede4;
  border-radius: 12px;
  padding: 15px 22px;
  margin: 18px 0 10px;
}
.hg-price b {
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
}
.hg-price em {
  font-style: normal;
  font-size: 21px;
  font-weight: 800;
  color: var(--accent);
}
.hg-price i {
  font-style: normal;
  font-size: 15px;
  color: rgba(17, 17, 17, .45);
}

@media (max-width: 767px) {
  .hg-price { padding: 13px 16px; }
  .hg-price b, .hg-price em { font-size: 19px; }
}

.hg-price i.price-yearly {
	font-style: normal;
    font-size: 21px;
    font-weight: 800;
    color: var(--accent);
}

.book-stack, .books-title br, .netflix-film-stack, .netflix-title br {
	display: none;
}

.books-content, .netflix-content {
	max-width: none;
}