/**
 * Лендинги курсов: цвет вернулся, но по одному на страницу.
 *
 * Монохром убрал дешевизну, но вместе с ней и характер: страница стала
 * ровной и незаметной. Здесь цвет возвращается по правилу дорогих макетов —
 * ОДИН акцент на курс, много воздуха, крупная типографика. Радуга из шести
 * оттенков не возвращается: именно она читалась дёшево.
 *
 *   Write Guide      — синий → фиолет → янтарь (как в первой версии).
 *   Write Guide PRO  — изумруд → мята → золото.
 *
 * Три перечисления получили три разных характера, чтобы не сливались:
 *   программа  — журнальный указатель на линейках, крупные строки;
 *   «для кого» — карточки с прозрачным номером-контуром;
 *   «умеешь»   — чек-лист на линейках, без плашек.
 *
 * Слой подключается последним и перекрывает wg2026.css/wgpro.css.
 * Значения акцента заданы переменными — они объявлены и использованы
 * в этом же файле, поэтому доходят до элементов.
 */

.wg26 {
  --acc: #0A84FF;             /* акцент курса            */
  --acc-dp: #0060DF;          /* тёмный край градиента   */
  --acc-lt: #6FC0FF;          /* светлый, для тёмных фон */
  --acc-tint: rgba(10,132,255,.1);
  --acc-glow: rgba(10,132,255,.34);
  --grad: linear-gradient(96deg, #0A84FF 0%, #BF5AF2 46%, #FF9F0A 100%);
  --grad-btn: linear-gradient(100deg, #0A84FF 0%, #6E5BFF 100%);
}
.wg26--pro {
  --acc: #0E9F6E;
  --acc-dp: #0A7A54;
  --acc-lt: #57E0AF;
  --acc-tint: rgba(14,159,110,.1);
  --acc-glow: rgba(14,159,110,.34);
  --grad: linear-gradient(96deg, #45F0B8 0%, #52E3D4 46%, #FFD86B 100%);
  --grad-btn: linear-gradient(100deg, #0E9F6E 0%, #17B8A6 100%);
}

/* ---------- Крупные заголовки: градиент вернулся ---------- */
.wg26 .wg26-grad {
  background: none;
  background-image: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  filter: none; text-shadow: none;
}

/* ---------- Метки разделов: цвет курса ---------- */
.wg26 .wg26-eyebrow {
  color: var(--acc) !important;
  font-size: .76rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; gap: 9px;
}
.wg26 .wg26-eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: .8;
}
.wg26 .wg26-eyebrow::after { content: none; }
/* На тёмных секциях — светлый край акцента. */
.wg26 .wg26-prog .wg26-eyebrow { color: var(--acc-lt) !important; }

/* ---------- Кнопки ---------- */
.wg26 .wg26-btn--primary,
.wg26--pro .wg26-btn--primary {
  background: var(--grad-btn) !important;
  color: #fff !important;
  box-shadow: 0 10px 34px var(--acc-glow);
  font-weight: 550;
}
.wg26 .wg26-btn--primary:hover,
.wg26--pro .wg26-btn--primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 14px 42px var(--acc-glow);
  transform: translateY(-1px);
}
.wg26 .wg26-btn--ghost {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.wg26 .wg26-btn--ghost:hover { background: rgba(255,255,255,.22) !important; }

/* Кнопка на соседний курс — в ЕГО палитре: цвет подсказывает, куда ведёт.
   Точка слева повторяет цвет чужого курса даже на светлом фоне. */
.wg26 .wg26-btn--pro,
.wg26--pro .wg26-btn--base {
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.wg26 .wg26-btn--pro {
  background: rgba(14,159,110,.16) !important;
  border: 1px solid rgba(87,224,175,.55) !important;
  color: #8CF0C8 !important;
}
.wg26 .wg26-btn--pro:hover {
  background: rgba(14,159,110,.28) !important;
  border-color: rgba(87,224,175,.9) !important;
  color: #BEFCE2 !important;
}
.wg26--pro .wg26-btn--base {
  background: rgba(10,132,255,.16) !important;
  border: 1px solid rgba(111,192,255,.55) !important;
  color: #9FD8FF !important;
}
.wg26--pro .wg26-btn--base:hover {
  background: rgba(10,132,255,.28) !important;
  border-color: rgba(111,192,255,.9) !important;
  color: #D2ECFF !important;
}
.wg26 .wg26-btn--pro::before,
.wg26--pro .wg26-btn--base::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 12px currentColor;
}

/* ---------- Иконки: тонкий контур в тинте курса ---------- */
.wg26 .wg26-ic,
.wg26 .wg26-check {
  background: var(--acc-tint) !important;
  color: var(--acc) !important;
  border: 1px solid transparent;
  border-radius: 14px;
}
.wg26 .wg26-ic svg, .wg26 .wg26-check svg { stroke-width: 1.5; }

/* ================= ПРОГРАММА: журнальный указатель ================= */

.wg26 .wg26-prog__list {
  display: grid; gap: 0;
  border-top: 1px solid rgba(255,255,255,.16);
  counter-reset: none;
}
.wg26 .wg26-lesson {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr 30px;
  align-items: baseline;
  gap: 0 clamp(14px, 2vw, 26px);
  padding: clamp(20px, 2.7vw, 30px) clamp(10px, 1.4vw, 18px);
  border: 0; border-bottom: 1px solid rgba(255,255,255,.14);
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .3s, padding-left .3s cubic-bezier(.32,.72,0,1);
}
/* Подсветка уходит вправо в ноль — строка «зажигается», а не заливается. */
.wg26 .wg26-lesson::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--acc-tint), transparent 62%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.wg26 .wg26-lesson:hover {
  background: none;
  transform: none;
  padding-left: clamp(18px, 2.2vw, 30px);
}
.wg26 .wg26-lesson:hover::before { opacity: 1; }

.wg26 .wg26-lesson__num {
  width: auto; height: auto; border-radius: 0;
  background: none !important; border: 0;
  display: block;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em;
  color: var(--acc-lt);
  font-variant-numeric: tabular-nums;
  padding-top: .45em;
}
.wg26 .wg26-lesson__title {
  font-size: clamp(1.3rem, 3.1vw, 2.1rem);
  line-height: 1.14; font-weight: 650; letter-spacing: -.03em;
  color: #fff;
}
/* Стрелка появляется на наведении — приглашение, а не украшение. */
.wg26 .wg26-lesson::after {
  content: "→";
  align-self: center;
  color: var(--acc-lt);
  font-size: 1.15rem;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s, transform .3s cubic-bezier(.32,.72,0,1);
}
.wg26 .wg26-lesson:hover::after { opacity: 1; transform: translateX(0); }

/* Первый урок — вводный, поэтому крупнее: у указателя появляется начало. */
.wg26 .wg26-lesson:first-child { padding-top: clamp(24px, 3.2vw, 38px); }
.wg26 .wg26-lesson:first-child .wg26-lesson__title { font-size: clamp(1.5rem, 3.8vw, 2.6rem); }

/* ================= ДЛЯ КОГО: карточки с номером-контуром ================= */

.wg26 .wg26-who__list {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
  /* Все ряды по высоте самой длинной плитки: строки текста разной длины
     иначе делали ряды разной высоты, и сетка выглядела неровной. */
  grid-auto-rows: 1fr;
}
.wg26 .wg26-who__item {
  display: block;
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 32px) clamp(26px, 3vw, 32px);
  background: #fff;
  border: 1px solid rgba(0,0,0,.09) !important;
  border-radius: 22px;
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.32; font-weight: 600; letter-spacing: -.018em;
  transition: border-color .25s, box-shadow .25s, transform .25s cubic-bezier(.32,.72,0,1);
  position: relative; overflow: hidden;
}
/* Тонкая полоса акцента сверху растёт на наведении. */
.wg26 .wg26-who__item::after {
  content: ""; position: absolute; top: 0; left: 0; right: 100%; height: 2px;
  background: var(--grad-btn);
  transition: right .45s cubic-bezier(.32,.72,0,1);
}
.wg26 .wg26-who__item:hover {
  transform: translateY(-3px);
  border-color: rgba(0,0,0,.14) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.07);
}
.wg26 .wg26-who__item:hover::after { right: 0; }

/* Номер прозрачный, только контур — приём из журнальных полос. */
/* Номер сплошным цветом курса: контурные цифры читались как эффект,
   а плитки должны быть одинаковыми и спокойными. */
.wg26 .wg26-who__item .wg26-dot {
  width: auto; height: auto; border-radius: 0;
  background: none !important; border: 0;
  display: block; margin-bottom: 12px;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1;
  font-weight: 700; letter-spacing: -.03em;
  color: var(--acc);
  -webkit-text-stroke: 0;
  font-variant-numeric: tabular-nums;
}

/* ================= ПОСЛЕ КУРСА: чек-лист на линейках ================= */

.wg26 .wg26-gain__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(28px, 4vw, 56px);
  border-top: 1px solid rgba(0,0,0,.1);
}
.wg26 .wg26-gain__item {
  display: grid; grid-template-columns: 26px 1fr;
  align-items: start; gap: 16px;
  padding: clamp(20px, 2.4vw, 26px) 0;
  background: none; border-radius: 0;
  border-bottom: 1px solid rgba(0,0,0,.1);
  font-size: clamp(1.06rem, 1.6vw, 1.22rem);
  line-height: 1.36; font-weight: 550; letter-spacing: -.015em;
  transition: color .25s;
}
.wg26 .wg26-gain__item:hover { transform: none; color: var(--acc-dp); }
/* Иконка без плашки: сама графика в цвете курса — плашки читались дёшево. */
.wg26 .wg26-gain__item .wg26-ic--sm {
  background: none !important; border: 0 !important;
  width: 26px; height: 26px; border-radius: 0;
  color: var(--acc) !important;
  margin-top: 1px;
}
.wg26 .wg26-gain__item .wg26-ic--sm svg { width: 24px; height: 24px; stroke-width: 1.5; }

/* ---------- Стекло у автора и видео ---------- */
.wg26 .wg26-trust {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.17);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
}

/* ---------- Карточки и отзывы: контур в цвете на наведении ---------- */
.wg26 .wg26-card:hover,
.wg26 .wg26-rev__card:hover {
  border-color: var(--acc) !important;
  box-shadow: 0 16px 40px var(--acc-tint) !important;
}
.wg26 .wg26-rev__ava {
  background: var(--acc-tint) !important;
  color: var(--acc-dp) !important;
  border: 0 !important;
}
.wg26 .wg26-rev__card::before { color: var(--acc) !important; opacity: .22; }
.wg26 .wg26-rev__dot.is-on { background: var(--acc); }
.wg26 .wg26-rev__arrow:hover { background: var(--acc); border-color: var(--acc); }

/* ---------- Цена ---------- */
.wg26 .wg26-price__tag {
  background: var(--acc-tint);
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 22px 26px;
}
.wg26 .wg26-price__card { box-shadow: 0 26px 70px rgba(0,0,0,.09); }

/* ---------- Телефон ---------- */
@media (max-width: 860px) {
  .wg26 .wg26-who__list,
  .wg26 .wg26-gain__grid { grid-template-columns: 1fr; }
  /* В одну колонку равнять высоты не нужно — короткие плитки только
     набирали бы пустоту. */
  .wg26 .wg26-who__list { grid-auto-rows: auto; }
  .wg26 .wg26-gain__grid { gap: 0; }
  .wg26 .wg26-lesson { grid-template-columns: 54px 1fr; padding-inline: 4px; }
  .wg26 .wg26-lesson::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wg26 .wg26-lesson, .wg26 .wg26-who__item, .wg26 .wg26-who__item::after,
  .wg26 .wg26-btn--primary { transition: none; }
  .wg26 .wg26-who__item:hover, .wg26 .wg26-btn--primary:hover { transform: none; }
}

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

.wg26 .wg26-why,
.wg26 .wg26-gain,
.wg26 .wg26-who,
.wg26 .wg26-price { padding-block: clamp(78px, 12vw, 168px); }

/* Заголовки крупнее и по центру — как в продуктовых страницах Apple. */
.wg26 .wg26-h2 {
  font-size: clamp(2.1rem, 5.6vw, 4rem);
  line-height: 1.04; letter-spacing: -.034em; font-weight: 700;
}
.wg26 .wg26-gain > .wg26-wrap > .wg26-eyebrow,
.wg26 .wg26-who  > .wg26-wrap > .wg26-eyebrow,
.wg26 .wg26-rev  > .wg26-wrap > .wg26-eyebrow,
.wg26 .wg26-gain > .wg26-wrap > .wg26-h2,
.wg26 .wg26-who  > .wg26-wrap > .wg26-h2,
.wg26 .wg26-rev  > .wg26-wrap > .wg26-h2 {
  text-align: center;
  display: block;
  margin-inline: auto;
  max-width: 20ch;
}
.wg26 .wg26-gain > .wg26-wrap > .wg26-eyebrow,
.wg26 .wg26-who  > .wg26-wrap > .wg26-eyebrow,
.wg26 .wg26-rev  > .wg26-wrap > .wg26-eyebrow {
  max-width: none;
  justify-content: center;
}

/* ---------- «После курса»: тёмная панель на светлой странице ---------- */
.wg26 .wg26-gain { background: #fff; }
.wg26 .wg26-gain__grid {
  position: relative;
  background: #0b0b0d;
  border-radius: clamp(24px, 3vw, 34px);
  padding: clamp(26px, 4vw, 56px) clamp(24px, 4vw, 60px);
  border-top: 0;
  overflow: hidden;
  isolation: isolate;
}
/* Цветное свечение в углу — единственный источник цвета на панели. */
.wg26 .wg26-gain__grid::before {
  content: ""; position: absolute; z-index: -1;
  width: 60%; aspect-ratio: 1; right: -14%; top: -34%;
  background: var(--grad-btn);
  filter: blur(90px); opacity: .34;
}
.wg26 .wg26-gain__item {
  color: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.wg26 .wg26-gain__item:hover { color: #fff; }
.wg26 .wg26-gain__item .wg26-ic--sm { color: var(--acc-lt) !important; }
/* Последние две строки без нижней линейки — панель заканчивается чисто. */
.wg26 .wg26-gain__item:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }

/* ---------- «Для кого»: плитки на светло-сером ---------- */
.wg26 .wg26-who { background: #f5f5f7; }
.wg26 .wg26-who__item { box-shadow: 0 1px 2px rgba(0,0,0,.04); }

/* ---------- Первый экран: цвет за заголовком ---------- */
.wg26 .wg26-hero__inner { position: relative; }
.wg26 .wg26-hero__title { position: relative; }
.wg26 .wg26-hero__title::before {
  content: ""; position: absolute; z-index: -1;
  left: -6%; top: -30%; width: 74%; aspect-ratio: 1.6;
  background: var(--grad-btn);
  filter: blur(120px); opacity: .28;
  pointer-events: none;
}

@media (max-width: 860px) {
  .wg26 .wg26-gain__item:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.13); padding-bottom: 20px; }
  .wg26 .wg26-gain__item:last-child { border-bottom: 0; padding-bottom: 0; }
  .wg26 .wg26-gain > .wg26-wrap > .wg26-h2,
  .wg26 .wg26-who > .wg26-wrap > .wg26-h2 { max-width: none; }
}

/* ---------- Доводка после первого просмотра ---------- */

/* Фотография в «Программе» спорила со строками указателя — кладём на неё
   мягкую тёмную вуаль слева направо: фактура видна, текст читается. */
.wg26 .wg26-prog::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.62) 52%, rgba(0,0,0,.3) 100%);
  pointer-events: none;
}
.wg26 .wg26-lesson__num { font-size: .95rem; color: var(--acc-lt); opacity: .9; }

/* Плитки «для кого»: текст крупнее, номер в цвете курса. */
.wg26 .wg26-who__item { font-size: clamp(1.15rem, 1.9vw, 1.42rem); }
.wg26 .wg26-gain__item { font-size: clamp(1.1rem, 1.7vw, 1.3rem); }

/* ---------- Кнопка на соседний курс: стекло, по которому идёт свет ----------
   Кнопка ведёт на другой продукт, и ей нужно притягивать взгляд, не крича.
   Блик проходит раз в несколько секунд — как отсвет на стеклянной панели. */
.wg26 .wg26-btn--pro,
.wg26--pro .wg26-btn--base {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.wg26 .wg26-btn--pro::after,
.wg26--pro .wg26-btn--base::after {
  content: "";
  position: absolute; z-index: -1;
  top: -60%; bottom: -60%; left: -30%; width: 28%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.06) 30%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,.06) 70%,
    transparent 100%);
  transform: skewX(-18deg);
  animation: wg26-sheen 5.5s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
}
@keyframes wg26-sheen {
  0%   { left: -30%; opacity: 0; }
  8%   { opacity: 1; }
  38%  { left: 108%; opacity: 1; }
  46%  { left: 108%; opacity: 0; }
  100% { left: 108%; opacity: 0; }
}
/* Наведение — блик пробегает сразу и чаще: кнопка отзывается на внимание. */
.wg26 .wg26-btn--pro:hover::after,
.wg26--pro .wg26-btn--base:hover::after { animation-duration: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .wg26 .wg26-btn--pro::after,
  .wg26--pro .wg26-btn--base::after { animation: none; opacity: 0; }
}