/* Внутренние страницы anyskills.ru в языке новой главной (08.10.2026).

   Слой поверх main.css, а не переписанный main.css: классы разметки
   у 33 страниц остаются прежними, меняются переменные и вид компонентов.
   Источник значений — главная (assets/css/glavnaya-2026.css): тёплая
   бумага #fafbf7, графитовый текст, лайм только на действиях, лаванда
   вторым цветом, объёмная кнопка, тонкие линии #e1e5da.

   Тёмной темы у главной нет, и у остальных страниц её больше нет тоже:
   один сайт должен выглядеть одинаково на любой системе. Переопределение
   под prefers-color-scheme ниже возвращает светлые значения. */

:root,
:root:not([data-theme="light"]) {
  --фон:        #fafbf7;
  --фон-мягкий: #ffffff;
  --фон-серый:  #eef1e8;
  --рамка:      #e1e5da;

  --текст:      #20231f;
  --текст-тише: #656a61;   /* 5.4 к #fafbf7 */
  --текст-слабо:#73776e;

  --акцент:       #c5f547;
  --акцент-на:    #20231f;
  --акцент-тень:  #b2df37;
  --акцент-текст: #4d6b12;  /* ссылки: 6.0 к #fafbf7 */
  --акцент-тьма:  #4d6b12;
  --акцент-мягк:  #edf6d7;
  --акцент-едва:  #f1f8df;
  --чернила:      #20231f;
  --чернила-текст:#f3f5ef;
  --чернила-тише: #c7cdbf;
  --слабо:        #a8463f;

  --вторичный:      #ded5f5;
  --вторичный-текст:#49386a;

  --ш-база: 1rem;
  --ш-лид:  1.125rem;
  --ш-h1:   clamp(2.4rem, 4.4vw, 3.6rem);
  --ш-h2:   clamp(1.75rem, 3vw, 2.5rem);
  --ш-h3:   1.25rem;
  --вес-заголовка: 650;
  --разрядка-загл: -.035em;

  --радиус:     .625rem;
  --радиус-бол: 1.375rem;
  --тень-карта: 0 14px 32px -18px rgba(38,48,28,.22);
  --тень-выше:  0 10px 24px -14px rgba(38,48,28,.2);
  --тень-акцент:0 7px 18px rgba(116,145,36,.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --фон: #fafbf7; --фон-мягкий: #ffffff; --фон-серый: #eef1e8; --рамка: #e1e5da;
    --текст: #20231f; --текст-тише: #656a61; --текст-слабо: #73776e;
    --акцент: #c5f547; --акцент-на: #20231f; --акцент-тень: #b2df37;
    --акцент-текст: #4d6b12; --акцент-тьма: #4d6b12; --акцент-мягк: #edf6d7; --акцент-едва: #f1f8df;
    --чернила: #20231f; --слабо: #a8463f;
    --тень-карта: 0 14px 32px -18px rgba(38,48,28,.22);
  }
}
html { color-scheme: light; background: var(--фон); }
body { line-height: 1.6; }
::selection { background: #e2f7a6; color: #20231f; }

/* ── типографика: шкала главной ── */
h1, h2, h3 { letter-spacing: var(--разрядка-загл); text-wrap: balance; }
h1 { font-weight: 650; line-height: 1.1; letter-spacing: -.045em; }
h2 { font-weight: 600; line-height: 1.15; margin: 4.5rem 0 1rem; }
h3 { font-weight: 600; letter-spacing: -.015em; font-size: 1.1875rem; }
p, li { text-wrap: pretty; }
.лид { font-size: var(--ш-лид); line-height: 1.6; color: var(--текст-тише); max-width: 38rem; }
a { color: var(--акцент-текст); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.мелко { color: var(--текст-тише); }

/* ── шапка: как на главной, меню-кнопка на телефоне ── */
.шапка {
  max-width: 75rem; padding: 0 2rem; height: 6.25rem;
  display: flex; align-items: center; gap: 2rem; border-bottom: 0;
}
.шапка .лого { flex: none; }
.шапка .лого img { display: block; width: 155px; height: auto; }
.шапка nav { flex: 1; justify-content: center; gap: 1.75rem; font-size: .875rem; flex-wrap: nowrap; }
.шапка nav a { color: var(--текст); }
.шапка nav a:hover, .шапка nav a:focus-visible { color: var(--акцент-текст); }
.шапка nav a.тек { font-weight: 650; color: var(--текст); text-decoration: underline; text-decoration-color: var(--акцент); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.двери { gap: 1.25rem; flex-wrap: nowrap; }
.двери a { color: var(--текст); font-size: .875rem; font-weight: 600; }
.двери a.кнопка {
  padding: .65rem 1.1rem; border-radius: var(--радиус); font-size: .875rem; font-weight: 700;
  background: linear-gradient(180deg, #d0fa68, var(--акцент));
  box-shadow: inset 0 1px 0 #ffffffa6, 0 3px 0 #a0c735, 0 8px 14px #72902422;
}
.меню-тел { display: none; }
@media (max-width: 64rem) {
  .шапка { height: 5rem; padding: 0 1.375rem; gap: 1rem; display: flex; }
  .шапка > nav { display: none; }
  .шапка .лого img { width: 130px; }
  .двери { margin-left: auto; }
  .меню-тел { display: block; position: relative; }
  .меню-тел summary {
    list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: var(--радиус); border: 1px solid var(--рамка); background: var(--фон-мягкий); color: var(--текст);
  }
  .меню-тел summary::-webkit-details-marker { display: none; }
  .меню-тел[open] summary { background: var(--фон-серый); }
  .меню-тел nav {
    position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30; min-width: 15rem;
    display: flex; flex-direction: column; padding: .5rem; gap: 0;
    background: var(--фон-мягкий); border: 1px solid var(--рамка); border-radius: var(--радиус-бол);
    box-shadow: 0 24px 48px -20px rgba(38,48,28,.35);
  }
  .меню-тел nav a { display: flex; align-items: center; min-height: 44px; padding: 0 .875rem; border-radius: var(--радиус); color: var(--текст); text-decoration: none; font-size: 1rem; }
  .меню-тел nav a:hover, .меню-тел nav a.тек { background: var(--акцент-едва); font-weight: 650; }
  .меню-тел nav a.тек { text-decoration: none; }
  .меню-тел nav hr { width: 100%; border: 0; border-top: 1px solid var(--рамка); margin: .375rem 0; }
}
@media (max-width: 30rem) {
  .двери a:not(.кнопка) { display: none; }   /* «Войти» уходит в меню */
  .двери a.кнопка { padding: .6rem .9rem; }
}

/* ── полоса макета и ритм ── */
main { max-width: 75rem; padding: 0 2rem; }
@media (max-width: 64rem) { main { padding: 0 1.375rem; } }
.герой { padding: 3.5rem 0 1.5rem; max-width: 52rem; }
.герой h1 { max-width: 20ch; }
.герой .лид { margin-top: 1.5rem; }
@media (max-width: 40rem) { .герой { padding-top: 2rem; } h2 { margin-top: 3.25rem; } }

/* ── первый экран раздела с иллюстрацией справа, как на главной ──
   У рисунков широкие прозрачные поля, поэтому картинка шире своей колонки
   и заходит в поля страницы; лишнее срезает overflow-x: clip у html. */
.герой.с-картинкой {
  max-width: none; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 2rem; align-items: center; padding-bottom: .5rem;
}
.герой-картинка { margin: 0; }
.герой-картинка img { display: block; width: 118%; max-width: none; height: auto; margin: -3% -12% -3% -6%; }
@media (max-width: 80rem) { .герой-картинка img { width: 108%; margin: -2% -3% -2% -5%; } }
@media (max-width: 52rem) {
  .герой.с-картинкой { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .герой-картинка { margin: .5rem auto 0; max-width: 36rem; width: 100%; }
  .герой-картинка img { width: 106%; margin: 0 0 0 -6%; }
}

/* ── кнопки: объёмная лаймовая, как на главной ── */
.кнопка {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem;
  padding: .85rem 1.5rem; border-radius: var(--радиус); font-weight: 700; font-size: .9375rem;
  color: var(--акцент-на); text-decoration: none;
  background: linear-gradient(180deg, #d0fa68, var(--акцент));
  box-shadow: inset 0 1px 0 #ffffffa6, 0 4px 0 #a0c735, 0 10px 18px #72902426;
  transform: translateY(-2px); transition: transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s cubic-bezier(.23,1,.32,1), background-color .2s ease;
}
.кнопка:hover { background: linear-gradient(180deg, #c9f45a, #b9e93c); color: var(--акцент-на); transform: translateY(-3px); }
.кнопка:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #ffffffa6, 0 1px 0 #a0c735, 0 3px 8px #72902420; }
@media (prefers-reduced-motion: reduce) { .кнопка, .кнопка:hover, .кнопка:active { transition: none; transform: none; } }

/* ── полосы, карточки, панели: белые листы на бумаге, тонкая линия ── */
main > section.полоса { background: transparent; border-top: 1px solid var(--рамка); border-bottom: 0; padding-top: 3.5rem; padding-bottom: 1rem; }
.карточка, .доказательство, .калькулятор, .демо-история {
  background: var(--фон-мягкий); border: 1px solid var(--рамка); border-radius: var(--радиус-бол); box-shadow: none;
}
.карточка.лайм { background: var(--акцент-едва); border-color: #d6e9af; }
.тариф { border-radius: 14px; border-color: var(--рамка); padding: 1.625rem 1.375rem; }
.тариф.рекомендуем { border: 1px solid #a1cb33; background: var(--акцент-едва); }
.тариф .цена { font-size: 2rem; font-weight: 650; letter-spacing: -.04em; }
.метка { background: var(--акцент); color: var(--акцент-на); border-radius: 6px; font-weight: 700; letter-spacing: .06em; font-size: .625rem; padding: .3rem .6rem; }
.пометка { border-radius: 7px; background: var(--акцент-мягк); border-color: #d6e9af; color: #465a28; font-weight: 600; }
.шаги li::before { box-shadow: inset 0 1px 0 #ffffffa6, 0 4px 0 #a0c735; border-radius: 14px; }
th { color: var(--текст-тише); font-weight: 650; }
tr.мы td { background: var(--акцент-едва); }
.калькулятор-форма input, .демо-тест input[type="text"], .демо-тест select { border-color: #cdd2c5; }
mark { background: linear-gradient(transparent 58%, #dcf68f 58%, #dcf68f 92%, transparent 92%); }

/* ── картинки: объёмные иллюстрации главной без рамки и тени листа ── */
.экран img { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.экран.иллюстрация img { filter: saturate(.45) drop-shadow(0 12px 14px #26301c0d); aspect-ratio: 3 / 2; object-fit: contain; }
.экран figcaption { font-size: .8125rem; }

/* ── герой на тёмном: на сайте тёмных полос больше нет ── */
.герой.синий { background: var(--фон-серый); color: var(--текст); }
.герой.синий h1, .герой.синий .лид b { color: var(--текст); }
.герой.синий .лид, .герой.синий .мелко { color: var(--текст-тише); }
.герой.синий .мелко a { color: var(--акцент-текст); }
.герой.синий::after { display: none; }

/* ── финальный призыв: светлая лаймовая панель, как «Давай попробуем?» ── */
.призыв {
  background: #eaf2d9; color: var(--текст); border-radius: 24px; text-align: center;
  padding: 4rem 2rem; margin: 5rem 0 3rem;
}
.призыв h2 { color: var(--текст); font-size: var(--ш-h2); margin: 0 auto .75rem; max-width: 22ch; }
.призыв p { color: var(--текст-тише); max-width: 34rem; margin: 0 auto 1.75rem; }
.призыв .кнопка { background: var(--текст); color: #fff; box-shadow: 0 10px 22px -10px rgba(32,35,31,.45); }
.призыв .кнопка:hover { background: #000; color: #fff; }
@media (max-width: 40rem) { .призыв { padding: 3rem 1.25rem; } }

/* Зоны нажатия на сенсорных экранах. */
@media (pointer: coarse), (max-width: 64rem) {
  .двери a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Широкие таблицы сравнения на телефоне. Часть таблиц не обёрнута в
   .прокрутка, и правые колонки срезались краем окна (html { overflow-x: clip }):
   их нельзя было ни увидеть, ни прокрутить. Такая таблица сама становится
   прокручиваемой вбок. */
@media (max-width: 48rem) {
  main :not(.прокрутка) > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main :not(.прокрутка) > table th, main :not(.прокрутка) > table td { min-width: 7.5rem; }
}