/**
 * Оформление блоков MWC: токены, типографика, кнопки, карточки, полоса с картиной,
 * счётчики, награды, принципы, бегущая лента, уроки курса, тарифы, вопросы-ответы,
 * текст с картинкой, отзывы, шаги, программа курса, видео, прилипающие полосы.
 *
 * Собрано из двух прежних мест: assets/design.css (общее) и CSS, который лежал внутри
 * самих собранных страниц (герой, ken-burns, лента, принципы, финальный призыв).
 * Теперь всё здесь, потому что блок ставят на любую страницу, а не только на собранную:
 * оформление обязано приезжать с плагином, а не жить в записи.
 *
 * Область действия — имена классов, все в пространстве mwc-*. Токены висят на .mwc-b,
 * который несёт корень каждого блока, чтобы не растекаться по всему сайту.
 *
 * Настраиваемое приезжает CSS-переменными в атрибуте style корня блока (высота полосы,
 * сила затемнения, число столбцов, скорость ленты). Так настройка видна и в редакторе,
 * и на фронте, а в экспортированном шаблоне не остаётся правил, привязанных к ID страницы.
 *
 * Второй селектор в парах вроде «.mwc-h2, .mwc-h2 .elementor-heading-title» — для страниц,
 * собранных прежней версией плагина из виджетов Elementor: разметка там другая, а вид
 * должен остаться тот же.
 *
 * Про специфичность у картинок и ссылок: frontend.css Elementor подключается после нашей
 * таблицы и содержит «.elementor img{height:auto;max-width:100%;border:none;border-radius:0;
 * box-shadow:none}» и «.elementor a{box-shadow:none;text-decoration:none}». Специфичность
 * у них 0-1-1, то есть ровно как у «.mwc-card-img img», и при равенстве побеждает та
 * таблица, что подключилась позже, — Elementor. Поэтому наши правила про эти свойства
 * у img и a пишутся двумя классами («.mwc-b .mwc-card-img img»). Иначе высота картинки
 * молча становится auto: карточки в ряду разъезжаются по высоте, а у бегущей ленты
 * пропадает высота целиком, и её ленивые обложки не грузятся вовсе.
 *
 * Правило, проверенное на главной: hover-трансформы никогда не вешаются на тот же
 * элемент, у которого есть entrance-анимация или появление, — animation и transition
 * борются за одно свойство transform, и hover перестаёт работать.
 */

/* ------------------------------------------------------------------- токены */
/* body.mwc-page — страницы, собранные прежней версией: их собственный CSS ждёт токены
   на body, и без этой строки они остались бы без цветов и шрифтов. */

.mwc-b,
body.mwc-page {
  --mwc-ink:#14141b; --mwc-txt:#3f3f45; --mwc-accent:#74674f; --mwc-accent-dk:#79654b;
  --mwc-paper:#fbf9f5; --mwc-mat:#f1ece3; --mwc-line:rgba(20,20,27,.13);
  --mwc-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --mwc-sans:'ProbaPro','Outfit',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mwc-ui:'Outfit','ProbaPro',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}

/* Виджет html с CSS страницы — на собранных страницах он был служебным. */
.elementor-widget.mwc-style{ display:none }

/* --------------------------------------------------------------- типографика */

.mwc-eyebrow{ font-family:var(--mwc-ui); font-size:12px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--mwc-accent); margin:0 }
.mwc-eyebrow--light{ color:rgba(255,255,255,.85) }
/* Цвет обязательно и на самом h2: Astra задаёт заголовкам color по тегу, а собственное
   свойство элемента сильнее унаследованного от обёртки виджета — светлый вариант
   иначе оставался тёмным на тёмной секции. */
.mwc-h2,
.mwc-h2 .elementor-heading-title{ font-family:var(--mwc-serif); font-weight:600;
  color:var(--mwc-ink); font-size:clamp(28px,3.6vw,46px); line-height:1.14; letter-spacing:.005em;
  margin:0 }
.mwc-h2--light,
.mwc-h2--light .elementor-heading-title{ color:#fff }
/* Заголовок помельче: цитата или подзаголовок внутри секции, где крупный заголовок уже
   есть. Межстрочный интервал больше — на этом размере строки короче и 1.14 их слепляет. */
.mwc-h2--sm,
.mwc-h2--sm .elementor-heading-title{ font-size:clamp(22px,2.1vw,30px); line-height:1.4;
  letter-spacing:.01em }
.mwc-sub,
.mwc-sub .elementor-widget-container{ font-family:var(--mwc-sans); font-size:17px;
  line-height:1.78; color:var(--mwc-txt) }
.mwc-sub--light,
.mwc-sub--light .elementor-widget-container{ color:rgba(255,255,255,.8) }

/* абзацы внутри текста не должны приносить свои отступы и свой размер */
.mwc-eyebrow p,
.mwc-card-meta p,
.mwc-card-cta p{ margin:0; font-size:inherit; letter-spacing:inherit;
  line-height:inherit; color:inherit }
.mwc-sub p:last-child{ margin-bottom:0 }

/* ------------------------------------------- кнопки: четыре роли, одна геометрия */

a.mwc-btn,
.mwc-btn .elementor-button{ display:inline-block; font-family:var(--mwc-ui); font-size:13px;
  font-weight:400; letter-spacing:.18em; text-transform:uppercase; line-height:1; padding:18px 32px;
  border-radius:0; position:relative; overflow:hidden; text-decoration:none; cursor:pointer;
  transition:background-color .4s ease,color .4s ease,border-color .4s ease,transform .4s ease,box-shadow .4s ease }
a.mwc-btn:hover,
.mwc-btn .elementor-button:hover{ transform:translateY(-2px) }
a.mwc-btn--solid,
.mwc-btn--solid .elementor-button{ background:var(--mwc-accent); color:#fff;
  border:1px solid var(--mwc-accent) }
a.mwc-btn--solid:hover,
.mwc-btn--solid .elementor-button:hover{ background:var(--mwc-accent-dk); color:#fff;
  border-color:var(--mwc-accent-dk); box-shadow:0 14px 28px -16px rgba(20,20,27,.55) }
a.mwc-btn--ghost,
.mwc-btn--ghost .elementor-button{ background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.65) }
a.mwc-btn--ghost:hover,
.mwc-btn--ghost .elementor-button:hover{ background:#fff; color:var(--mwc-ink); border-color:#fff }
a.mwc-btn--dark,
.mwc-btn--dark .elementor-button{ background:transparent; color:var(--mwc-ink);
  border:1px solid var(--mwc-line) }
a.mwc-btn--dark:hover,
.mwc-btn--dark .elementor-button:hover{ background:var(--mwc-ink); color:#fff;
  border-color:var(--mwc-ink) }
a.mwc-btn--link,
.mwc-btn--link .elementor-button{ background:transparent; border:0; padding:10px 2px;
  color:var(--mwc-accent); letter-spacing:.16em }
a.mwc-btn--link::after,
.mwc-btn--link .elementor-button::after{ content:""; position:absolute; left:2px; right:2px;
  bottom:4px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s ease }
a.mwc-btn--link:hover::after,
.mwc-btn--link .elementor-button:hover::after{ transform:scaleX(1) }
a.mwc-btn--link:hover,
.mwc-btn--link .elementor-button:hover{ transform:none; color:var(--mwc-accent-dk) }

/* Ряд кнопок по центру. Отбивку сверху задаёт блок: под шапкой она одна, под сеткой
   работ другая. */
.mwc-btns{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:12px 14px; padding-top:var(--mwc-btns-pad,44px) }
.mwc-btns--left{ justify-content:flex-start }

/* ------------------------------------------------------------ шапка блока */

.mwc-head{ width:100%; max-width:var(--mwc-head-w,720px); margin-inline:auto; text-align:center;
  display:flex; flex-direction:column; gap:14px; padding-bottom:var(--mwc-head-pad,46px) }
/* Шапка в колонке — рассказ о художнице рядом с портретом: там центр выглядел бы
   случайным, потому что колонка узкая и текст не по центру страницы. */
.mwc-head--left{ text-align:left; margin-inline:0 }

/* ------------------------------------------------------------------ карточки */
/* Работа и курс устроены одинаково, различается только высота полотна.
   Картина никогда не обрезается: object-fit:contain на тёплом «паспарту». */

a.mwc-card{ text-decoration:none; color:inherit }
.mwc-card-img .elementor-widget-container,
.mwc-card-img .mwc-mat{ display:block; background:var(--mwc-mat); padding:20px; overflow:hidden;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s ease,background-color .6s ease }
.mwc-b .mwc-card-img img{ display:block; width:100%; height:330px; object-fit:contain;
  transition:transform .9s cubic-bezier(.2,.7,.2,1) }
.mwc-card:hover .mwc-card-img .elementor-widget-container,
.mwc-card:hover .mwc-card-img .mwc-mat{ transform:translateY(-7px);
  background:#eae2d3; box-shadow:0 30px 52px -30px rgba(20,20,27,.5) }
.mwc-card:hover .mwc-card-img img{ transform:scale(1.035) }
.mwc-card--course .mwc-card-img img{ height:210px }

/* Проданная работа никуда не девается, но помечена, и вместо цены в подписи «Sold».
   Метка лежит на «паспарту», поэтому ему нужен position. */
.mwc-card--sold .mwc-card-img .mwc-mat{ position:relative }
.mwc-sold{ position:absolute; top:14px; right:14px; z-index:2; padding:6px 11px;
  font-family:var(--mwc-ui); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; background:rgba(20,20,27,.72) }
.mwc-card--sold .mwc-card-img img{ opacity:.88 }
.mwc-card--sold:hover .mwc-card-img img{ opacity:1 }

.mwc-card-title .elementor-heading-title,
.mwc-card-h{ font-family:var(--mwc-serif); font-weight:600; font-size:20px; margin:0;
  line-height:1.32; color:var(--mwc-ink); transition:color .4s ease }
.mwc-card:hover .mwc-card-title .elementor-heading-title,
.mwc-card:hover .mwc-card-h{ color:var(--mwc-accent) }
.mwc-card-meta .elementor-widget-container,
.mwc-card-m{ font-family:var(--mwc-ui); font-size:12px; letter-spacing:.13em; margin:0;
  text-transform:uppercase; color:var(--mwc-txt); opacity:.72 }
.mwc-card-cta .elementor-widget-container,
.mwc-card-c{ font-family:var(--mwc-ui); font-size:12px; letter-spacing:.16em; margin:0;
  text-transform:uppercase; color:var(--mwc-accent) }
.mwc-card-cta .mwc-arrow,
.mwc-card-c .mwc-arrow{ display:inline-block; transition:transform .4s ease }
.mwc-card:hover .mwc-card-cta .mwc-arrow,
.mwc-card:hover .mwc-card-c .mwc-arrow{ transform:translateX(8px) }

/* ---------------------------------------------------------- сетки блоков */
/* Число столбцов приходит из настроек блока: --cols на широком экране, --cols-t на
   планшете, --cols-m на телефоне. Умолчания в var() — те же 3/2/1, что были в дизайне,
   поэтому блок, у которого столбцы не настраивали, выглядит как прежде.
   Появление живёт в assets/reveal.css и настраивается там же, в панели блока. */

.mwc-cards,
.mwc-stats,
.mwc-features,
.mwc-awards-cols{ display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  width:100% }

.mwc-cards{ gap:46px 34px }
.mwc-cards--courses{ gap:40px 34px }
.mwc-cards .mwc-card{ display:flex; flex-direction:column; gap:11px }

/* ------------------------------------------------- полоса с картиной вместо фона */
/* Один блок на три прежних места: герой главной, финальный призыв и шапку портфолио.
   Различаются они только числами, а числа теперь в настройках.

   ken-burns живёт на псевдоэлементе, а не на самой полосе: иначе вместе с фоном
   медленно уезжали бы и заголовок с кнопками. background-image:inherit — картинку
   ставит блок на корне, и правило её подхватывает само. */

.mwc-band{ position:relative; isolation:isolate; overflow:hidden; display:flex;
  align-items:center; justify-content:center; box-sizing:border-box;
  min-height:var(--mwc-band-h,92vh); padding:var(--mwc-band-pad,130px 24px 74px);
  background-color:var(--mwc-ink); background-size:cover; background-position:center 45%;
  background-repeat:no-repeat }
.mwc-band--ken::before{ content:""; position:absolute; inset:-3%; z-index:0;
  background-image:inherit; background-size:cover; background-position:inherit;
  background-repeat:no-repeat;
  animation:mwc-kenburns var(--mwc-ken,32s) ease-in-out infinite alternate; will-change:transform }
/* Затемнение одной ручкой: середина светлее краёв, как было в герое главной
   (.52 → .38 → .66 при --mwc-dim:.52). */
.mwc-band::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,11,16,calc(var(--mwc-dim,.52) * 1)) 0%,
    rgba(10,11,16,calc(var(--mwc-dim,.52) * .73)) 46%,
    rgba(10,11,16,calc(var(--mwc-dim,.52) * 1.27)) 100%) }
.mwc-band > *{ position:relative; z-index:2 }
@keyframes mwc-kenburns{
  from{ transform:scale(1.015) translate3d(0,0,0) }
  to{ transform:scale(1.11) translate3d(0,-1.4%,0) }
}

.mwc-band-in{ width:100%; max-width:var(--mwc-band-w,880px); margin-inline:auto;
  display:flex; flex-direction:column; gap:8px; text-align:center }
.mwc-band-t{ font-family:var(--mwc-serif); font-weight:600; color:#fff; margin:0;
  font-size:clamp(34px,5.4vw,72px); line-height:1.05; letter-spacing:.012em;
  text-shadow:0 2px 34px rgba(0,0,0,.34) }
.mwc-band--xl .mwc-band-t{ font-size:clamp(38px,6.6vw,88px); line-height:1.03 }
.mwc-band .mwc-sub{ color:rgba(255,255,255,.9); font-size:clamp(15px,1.45vw,20px);
  line-height:1.72; max-width:660px; margin-inline:auto; text-shadow:0 1px 16px rgba(0,0,0,.35) }

/* Линия, которая дочерчивается при загрузке: полоса всё равно видна сразу, поэтому
   ждать прокрутки нечего. */
.mwc-rule{ display:block; width:0; height:1px; margin:26px auto;
  background:rgba(255,255,255,.78);
  animation:mwc-draw 1.5s .45s cubic-bezier(.2,.7,.2,1) forwards }
@keyframes mwc-draw{ to{ width:var(--mwc-rule-w,132px) } }

.mwc-scroll{ display:block; width:26px; height:44px; margin:6px auto 0; border-radius:14px;
  border:1px solid rgba(255,255,255,.5); position:relative; opacity:.9; transition:opacity .35s ease }
.mwc-scroll:hover{ opacity:1 }
.mwc-scroll i{ position:absolute; left:50%; top:9px; width:2px; height:8px; margin-left:-1px;
  border-radius:2px; background:#fff; animation:mwc-bob 2.1s ease-in-out infinite }
@keyframes mwc-bob{
  0%,100%{ transform:translateY(0); opacity:1 }
  50%{ transform:translateY(15px); opacity:.2 }
}

/* ----------------------------------------------------------------- портрет */
/* Покачивание и появление — на разных элементах: animation с transform перебила бы
   transition того же свойства, и портрет остался бы сдвинутым. */

.mwc-portrait{ margin:0 }
.mwc-portrait-f,
.mwc-portrait .elementor-widget-container{ display:block;
  animation:mwc-float var(--mwc-float,11s) ease-in-out infinite;
  box-shadow:var(--mwc-portrait-sh,0 34px 64px -34px rgba(20,20,27,.45)) }
.mwc-portrait img{ display:block; width:100%; height:auto }
@keyframes mwc-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-11px) } }

/* ---------------------------------------------------------------- счётчики */
/* Своя разметка вместо виджета counter: тот тянет jquery-numerator, а число нужно
   ещё и в HTML — без JavaScript посетитель должен видеть его, а не ноль.
   Счёт ведёт assets/stats.js. */

.mwc-stats{ gap:26px; text-align:var(--mwc-stats-ta,left);
  border-top:var(--mwc-stats-bd,1px solid var(--mwc-line));
  padding-top:var(--mwc-stats-pad,28px) }
.mwc-stat-n,
.mwc-stat .elementor-counter-number-wrapper{ display:block; font-family:var(--mwc-serif);
  font-weight:600; color:var(--mwc-ink); font-size:clamp(30px,3.2vw,44px); line-height:1 }
.mwc-stat-t,
.mwc-stat .elementor-counter-title{ display:block; font-family:var(--mwc-ui); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mwc-accent); margin:11px 0 0;
  line-height:1.55; font-weight:400 }
.mwc-stats--light .mwc-stat-n{ color:#fff }
.mwc-stats--light .mwc-stat-t{ color:rgba(255,255,255,.66) }
.mwc-stats--light{ border-top-color:rgba(255,255,255,.16) }

/* ------------------------------------------------------------- три принципа */

.mwc-features{ gap:42px 44px }
.mwc-feature{ text-align:var(--mwc-features-ta,left) }
.mwc-feature-i,
.mwc-feature .elementor-icon{ display:block; color:var(--mwc-accent); font-size:26px;
  line-height:1; margin-bottom:18px;
  transition:transform .55s cubic-bezier(.2,.7,.2,1) }
.mwc-feature-i svg{ width:26px; height:26px; fill:currentColor }
.mwc-feature:hover .mwc-feature-i,
.mwc-feature:hover .elementor-icon-box-icon{ transform:translateY(-7px) }
.mwc-feature-h,
.mwc-feature .elementor-icon-box-title{ font-family:var(--mwc-serif); font-weight:600;
  font-size:21px; line-height:1.3; color:var(--mwc-ink); margin:0 0 12px }
.mwc-feature-t,
.mwc-feature .elementor-icon-box-description{ font-family:var(--mwc-sans); font-size:15px;
  line-height:1.7; color:var(--mwc-txt); margin:0 }
.mwc-features--light .mwc-feature-h{ color:#fff }
.mwc-features--light .mwc-feature-t{ color:rgba(255,255,255,.78) }

/* --------------------------------------------------- выставки, награды, пресса */
/* Цвета рассчитаны на тёмную полосу — так этот блок и стоит на главной. Для светлого
   фона есть модификатор mwc-awards--on-light. */

.mwc-awards-cols{ gap:44px 56px }
.mwc-awards-col{ display:flex; flex-direction:column; gap:14px }
.mwc-awards-cap,
.mwc-awards-cap .elementor-widget-container{ font-family:var(--mwc-ui); font-size:11px;
  font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin:0 }
.mwc-awards-list{ list-style:none; margin:0; padding:0 }
.mwc-awards-list li,
.mwc-awards-list .elementor-icon-list-item{ position:relative;
  border-bottom:1px solid rgba(255,255,255,.12); padding:13px 0;
  transition:padding-left .4s ease,border-color .4s ease }
/* :not(...) — на собранных страницах тот же класс висит на виджете icon-list, и его
   пункты уже получили отступ и точку от правил Elementor ниже. */
.mwc-awards-list li:not(.elementor-icon-list-item){ padding-left:18px;
  font-family:var(--mwc-sans); font-size:15px; line-height:1.6; color:rgba(255,255,255,.82) }
.mwc-awards-list li:not(.elementor-icon-list-item)::before{ content:""; position:absolute;
  left:0; top:calc(13px + .6em); width:6px; height:6px; border-radius:50%;
  background:var(--mwc-accent) }
.mwc-awards-list li:not(.elementor-icon-list-item):hover{ padding-left:28px;
  border-color:rgba(255,255,255,.34) }
.mwc-awards-list .elementor-icon-list-item:hover{ padding-left:10px;
  border-color:rgba(255,255,255,.34) }
.mwc-awards-list .elementor-icon-list-text{ font-family:var(--mwc-sans); font-size:15px;
  line-height:1.6; color:rgba(255,255,255,.82) }
.mwc-awards-list .elementor-icon-list-icon{ padding-top:7px }
.mwc-awards-list .elementor-icon-list-icon i{ font-size:6px; color:var(--mwc-accent) }
.mwc-awards-list .elementor-icon-list-icon svg{ width:6px; height:6px; fill:var(--mwc-accent) }

.mwc-awards--on-light .mwc-awards-cap{ color:rgba(20,20,27,.5) }
.mwc-awards--on-light .mwc-awards-list li{ color:var(--mwc-txt);
  border-bottom-color:var(--mwc-line) }
.mwc-awards--on-light .mwc-awards-list li:hover{ border-color:rgba(20,20,27,.34) }

/* --------------------------------------------------- бегущая лента обложек */
/* Живая, но останавливается под курсором: если в ленте есть нужный курс, посетитель
   должен успеть на него нажать. Список в разметке повторён дважды, поэтому сдвиг
   на половину дорожки выглядит бесшовно. */

.mwc-marquee{ width:100%; overflow:hidden; margin-top:var(--mwc-strip-pad,0);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent) }
.mwc-marquee-track{ display:flex; align-items:center; gap:var(--mwc-strip-gap,24px);
  width:max-content; animation:mwc-marquee var(--mwc-strip-dur,72s) linear infinite }
.mwc-marquee--pause:hover .mwc-marquee-track{ animation-play-state:paused }
.mwc-marquee a{ flex:0 0 auto; display:block; line-height:0 }
.mwc-b.mwc-marquee img{ display:block; height:var(--mwc-strip-h,172px); width:auto;
  filter:saturate(.94); transition:transform .5s ease,filter .5s ease }
.mwc-marquee a:hover img{ transform:translateY(-5px) scale(1.02); filter:saturate(1.06) }
@keyframes mwc-marquee{
  from{ transform:translate3d(0,0,0) }
  to{ transform:translate3d(calc(-50% - var(--mwc-strip-gap,24px) / 2),0,0) }
}

/* ------------------------------------------------- строка-легенда под галереей */

.mwc-legend,
.mwc-legend .elementor-widget-container{ font-family:var(--mwc-ui); font-size:12px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--mwc-txt); opacity:.66;
  text-align:center; margin:0 }
.mwc-legend--light{ color:rgba(255,255,255,.8) }
.mwc-legend p{ margin:0 }

/* ------------------------------------------------- список с галочками */
/* Выводы урока и что входит в тариф. Галочка нарисована двумя рамками, а не иконкой:
   иконка притащила бы на страницу шрифт Font Awesome ради четырёх птичек. */

.mwc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.mwc-list li{ position:relative; padding-left:26px; font-family:var(--mwc-sans);
  font-size:15px; line-height:1.62; color:var(--mwc-txt) }
.mwc-list li::before{ content:""; position:absolute; left:2px; top:.34em; width:10px; height:6px;
  border-left:1.5px solid var(--mwc-accent); border-bottom:1.5px solid var(--mwc-accent);
  transform:rotate(-45deg) }
.mwc-list--light li{ color:rgba(255,255,255,.8) }
.mwc-list--light li::before{ border-color:rgba(255,255,255,.66) }

/* ------------------------------------------------------------- уроки курса */
/* Ряд на урок: кадр и текст рядом, стороны чередуются. В разметке картинка всегда первая —
   так её читает экранный диктор и так же она стоит на телефоне; переставляет колонки
   только order, и на узком экране он снимается. */

.mwc-lessons{ display:flex; flex-direction:column; gap:var(--mwc-lessons-gap,92px); width:100% }
.mwc-lesson{ display:grid; grid-template-columns:var(--mwc-lesson-cols,1.08fr 1fr);
  gap:clamp(28px,3.4vw,58px); align-items:center }
.mwc-lesson-img{ margin:0; order:1; overflow:hidden;
  background:var(--mwc-lesson-bg,var(--mwc-mat));
  padding:calc(var(--mwc-lesson-mat,1) * 18px) }
.mwc-b .mwc-lesson-img img{ display:block; width:100%; height:auto;
  aspect-ratio:var(--mwc-lesson-ar,4 / 3); object-fit:cover }
.mwc-lesson-txt{ order:2; display:flex; flex-direction:column; gap:14px }
.mwc-lesson--flip .mwc-lesson-img{ order:2 }
.mwc-lesson--flip .mwc-lesson-txt{ order:1 }
/* Столбцы наоборот: кадр меняет сторону, но не ширину. */
.mwc-lesson--flip{ grid-template-columns:var(--mwc-lesson-cols-r,1fr 1.08fr) }
.mwc-lesson-m{ font-family:var(--mwc-ui); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mwc-txt); opacity:.7; margin:0 }
.mwc-lessons--light .mwc-lesson-m{ color:rgba(255,255,255,.66); opacity:1 }
.mwc-lessons--light .mwc-lesson-img{ background:var(--mwc-lesson-bg,rgba(255,255,255,.08)) }

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

.mwc-plans{ display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));
  gap:26px; align-items:stretch; width:100% }
.mwc-plan{ position:relative; box-sizing:border-box; display:flex; flex-direction:column;
  gap:14px; padding:clamp(26px,2.6vw,40px); background:var(--mwc-paper);
  border:1px solid var(--mwc-line); transition:border-color .5s ease,box-shadow .5s ease }
.mwc-plan:hover{ border-color:rgba(20,20,27,.28);
  box-shadow:0 30px 54px -34px rgba(20,20,27,.42) }
.mwc-plan--best{ border-color:var(--mwc-accent) }
.mwc-plan--best:hover{ border-color:var(--mwc-accent-dk) }
.mwc-plan-badge{ position:absolute; top:0; right:clamp(20px,2vw,32px); transform:translateY(-50%);
  padding:6px 12px; background:var(--mwc-accent); color:#fff; font-family:var(--mwc-ui);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase }
.mwc-plan-h{ font-family:var(--mwc-serif); font-weight:600; font-size:24px; line-height:1.26;
  color:var(--mwc-ink); margin:0 }
.mwc-plan-s{ font-family:var(--mwc-sans); font-size:15px; line-height:1.66;
  color:var(--mwc-txt); margin:0 }
.mwc-plan-p{ display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin:6px 0 0 }
.mwc-plan-v{ font-family:var(--mwc-serif); font-weight:600; color:var(--mwc-ink);
  font-size:clamp(32px,3.4vw,44px); line-height:1 }
/* Цена приезжает от WooCommerce в своих тегах, со своим размером и цветом ссылки. */
.mwc-plan-v .woocommerce-Price-amount,
.mwc-plan-v .amount{ font:inherit; color:inherit }
.mwc-plan-v .woocommerce-Price-currencySymbol{ font-size:.62em; vertical-align:.26em;
  margin-right:.05em }
.mwc-plan-old{ font-family:var(--mwc-serif); font-size:20px; color:var(--mwc-txt); opacity:.6 }
/* Зачёркнутую цену тоже отдаёт WooCommerce — со своими тегами и своим размером символа
   валюты. Линия перечёркивания рисуется тегом <s> и проходит сквозь них сама. */
.mwc-plan-old .woocommerce-Price-amount,
.mwc-plan-old .amount{ font:inherit; color:inherit }
.mwc-plan-old .woocommerce-Price-currencySymbol{ font-size:.72em; vertical-align:.14em;
  margin-right:.05em }
.mwc-plan-n{ font-family:var(--mwc-ui); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mwc-txt); opacity:.7; margin:0 }
/* Кнопка прижата к низу: списки в карточках разной длины, а кнопки обязаны стоять
   на одной линии — иначе ряд выглядит косым. */
.mwc-plan-b{ margin-top:auto; padding-top:22px }
.mwc-plan-b .mwc-btn{ display:block; box-sizing:border-box; width:100%; text-align:center }
.mwc-price-foot{ font-family:var(--mwc-ui); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mwc-txt); opacity:.66; text-align:center;
  margin:26px 0 0 }
.mwc-price--light .mwc-plan{ background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.18) }
.mwc-price--light .mwc-plan:hover{ border-color:rgba(255,255,255,.4); box-shadow:none }
.mwc-price--light .mwc-plan-h,
.mwc-price--light .mwc-plan-v{ color:#fff }
.mwc-price--light .mwc-plan-s,
.mwc-price--light .mwc-plan-n,
.mwc-price--light .mwc-plan-old,
.mwc-price--light .mwc-price-foot{ color:rgba(255,255,255,.78); opacity:1 }

/* ------------------------------------------------------- вопросы и ответы */
/* Раскрытие держит <details>: клавиатура, поиск по странице и состояние [open] достаются
   без скрипта, а виджет accordion Elementor вместе со своим JS со страницы уходит.
   Крестик у <summary> нарисован двумя линиями: иконка притащила бы Font Awesome. */

.mwc-faq{ display:grid; grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));
  gap:var(--mwc-faq-gap,12px); align-items:start; width:100% }
.mwc-faq-i{ border-bottom:1px solid var(--mwc-line) }
.mwc-faq-q{ display:flex; align-items:flex-start; gap:18px; padding:18px 0; cursor:pointer;
  list-style:none }
/* Штатный треугольник убирают оба правила: display:flex снимает его в Chrome,
   list-style:none — в Firefox. */
.mwc-faq-q::-webkit-details-marker{ display:none }
.mwc-faq-q:focus-visible{ outline:2px solid var(--mwc-accent); outline-offset:3px }
.mwc-faq-h{ flex:1 1 auto; font-family:var(--mwc-serif); font-weight:600;
  font-size:clamp(17px,1.5vw,21px); line-height:1.4; color:var(--mwc-ink); margin:0 }
.mwc-faq-x{ position:relative; flex:0 0 auto; width:14px; height:14px; margin-top:.34em }
.mwc-faq-x::before,
.mwc-faq-x::after{ content:""; position:absolute; left:0; top:6px; width:14px; height:1.5px;
  background:var(--mwc-accent); transition:opacity .35s ease,transform .35s ease }
.mwc-faq-x::after{ transform:rotate(90deg) }
[open] > .mwc-faq-q .mwc-faq-x::after{ opacity:0 }
.mwc-faq-a{ padding:0 0 20px; font-family:var(--mwc-sans); font-size:15px; line-height:1.7;
  color:var(--mwc-txt) }
.mwc-faq-a p{ margin:0 0 .8em }
.mwc-faq-a p:last-child{ margin:0 }
.mwc-b .mwc-faq-a a{ color:var(--mwc-accent); text-decoration:underline;
  text-underline-offset:3px }
.mwc-faq--light .mwc-faq-i{ border-color:rgba(255,255,255,.18) }
.mwc-faq--light .mwc-faq-h{ color:#fff }
.mwc-faq--light .mwc-faq-a{ color:rgba(255,255,255,.8) }
.mwc-faq--light .mwc-faq-x::before,
.mwc-faq--light .mwc-faq-x::after{ background:rgba(255,255,255,.7) }

/* ---------------------------------------------------------- текст и картинка */
/* Текст в разметке всегда первый — его читают диктор и телефон; сторону меняет order,
   как у уроков курса, и на узком экране порядок задаётся классом --mpic. */

.mwc-split{ display:grid; grid-template-columns:var(--mwc-split-cols,1fr 1fr);
  gap:var(--mwc-split-gap,clamp(28px,3.6vw,64px)); align-items:var(--mwc-split-va,center);
  width:100% }
.mwc-split-txt{ order:1; display:flex; flex-direction:column; gap:16px }
.mwc-split-pic{ order:2; margin:0; overflow:hidden;
  background:var(--mwc-split-bg,var(--mwc-mat));
  padding:calc(var(--mwc-split-mat,1) * 18px) }
.mwc-b .mwc-split-pic img{ display:block; width:100%; height:auto;
  aspect-ratio:var(--mwc-split-ar,auto); object-fit:cover }
.mwc-split--rev{ grid-template-columns:var(--mwc-split-cols-r,1fr 1fr) }
.mwc-split--rev .mwc-split-txt{ order:2 }
.mwc-split--rev .mwc-split-pic{ order:1 }
.mwc-split .mwc-list{ margin-top:4px }
.mwc-split--light .mwc-split-pic{ background:var(--mwc-split-bg,rgba(255,255,255,.08)) }

/* -------------------------------------------------------------------- отзывы */
/* Кавычка — знак «"» шрифтом --mwc-serif на ::before, а не картинка: масштабируется
   вместе с текстом и не грузится отдельным файлом. */

.mwc-rev{ display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  gap:var(--mwc-rev-gap,26px); align-items:start; width:100% }
.mwc-rev-i{ position:relative; box-sizing:border-box; display:flex; flex-direction:column;
  gap:14px; margin:0; padding:clamp(24px,2.4vw,36px); background:var(--mwc-paper);
  border:1px solid var(--mwc-line) }
.mwc-rev-i::before{ content:"\201C"; position:absolute; top:.08em; right:.28em;
  font-family:var(--mwc-serif); font-size:86px; line-height:1; color:var(--mwc-accent);
  opacity:.16; pointer-events:none }
.mwc-rev-s{ margin:0; font-size:13px; letter-spacing:.22em; color:var(--mwc-accent) }
.mwc-rev-s0{ opacity:.24 }
.mwc-rev-t{ margin:0; font-family:var(--mwc-sans); font-size:15px; line-height:1.72;
  color:var(--mwc-txt); quotes:none }
.mwc-rev-t p{ margin:0 0 .8em }
.mwc-rev-t p:last-child{ margin:0 }
.mwc-rev-w{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px }
.mwc-b .mwc-rev-ph{ flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  object-fit:cover }
.mwc-rev-wt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.mwc-rev-n{ font-family:var(--mwc-ui); font-size:13px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mwc-ink) }
.mwc-rev-m{ font-family:var(--mwc-ui); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mwc-txt); opacity:.7 }
/* Одна цитата крупно: карточки нет, отзыв набран как высказывание по центру полосы. */
.mwc-rev--wide .mwc-rev-i{ align-items:center; gap:18px; padding:0; text-align:center;
  background:none; border:0 }
.mwc-rev--wide .mwc-rev-i::before{ position:static; font-size:64px; opacity:.2 }
.mwc-rev--wide .mwc-rev-t{ max-width:34em; font-family:var(--mwc-serif);
  font-size:clamp(20px,2.3vw,30px); line-height:1.5; color:var(--mwc-ink) }
.mwc-rev--light .mwc-rev-i{ background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.18) }
.mwc-rev--light .mwc-rev-t,
.mwc-rev--light .mwc-rev-m{ color:rgba(255,255,255,.8); opacity:1 }
.mwc-rev--light .mwc-rev-n{ color:#fff }
.mwc-rev--light.mwc-rev--wide .mwc-rev-i{ background:none; border:0 }

/* --------------------------------------------------------------------- шаги */
/* Линия между шагами — ::before у каждого шага, шириной с шаг плюс просвет: у последнего
   она обрывается коротким хвостом, поэтому ряд читается как последовательность. */

.mwc-steps{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  gap:var(--mwc-steps-gap,30px); align-items:start; width:100%;
  text-align:var(--mwc-steps-ta,left) }
.mwc-steps-i{ position:relative; display:flex; flex-direction:column; gap:14px;
  padding-top:26px }
.mwc-steps-i::before{ content:""; position:absolute; left:0; top:6px; height:1px;
  width:calc(100% + var(--mwc-steps-gap,30px));
  background:var(--mwc-steps-line,var(--mwc-line)) }
.mwc-steps-i:last-child::before{ width:34px }
.mwc-steps-n{ font-family:var(--mwc-ui); font-size:11px; font-weight:500; letter-spacing:.2em;
  color:var(--mwc-accent) }
.mwc-steps-b{ display:flex; flex-direction:column; gap:10px }
/* Заголовок шага — блок, а не flex: иконка стоит в строке inline-элементом, и тогда
   выравнивание из --mwc-steps-ta действует и на неё. */
.mwc-steps-h{ margin:0; font-family:var(--mwc-serif); font-weight:600;
  font-size:clamp(18px,1.7vw,23px); line-height:1.3; color:var(--mwc-ink) }
.mwc-steps-ic{ display:inline-flex; vertical-align:-.1em; margin-right:8px; font-size:.86em;
  color:var(--mwc-accent) }
.mwc-steps-ic svg{ width:1em; height:1em; fill:currentColor }
.mwc-steps-t{ margin:0; font-family:var(--mwc-sans); font-size:15px; line-height:1.66;
  color:var(--mwc-txt) }
.mwc-steps--light .mwc-steps-i::before{
  background:var(--mwc-steps-line,rgba(255,255,255,.2)) }
.mwc-steps--light .mwc-steps-h{ color:#fff }
.mwc-steps--light .mwc-steps-t{ color:rgba(255,255,255,.8) }

/* --------------------------------------------------------- программа курса */
/* Список из LearnDash: ряд на урок, темы внутри раскрывающегося <details>. Стрелку берём
   у вопросов-ответов (.mwc-faq-x) — она там уже нарисована, и второй такой же ни к чему. */

.mwc-cur{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  gap:var(--mwc-cur-gap,10px); width:100% }
.mwc-cur-i{ border-bottom:1px solid var(--mwc-line) }
.mwc-cur-hd{ display:flex; align-items:center; gap:16px; padding:14px 0; list-style:none }
.mwc-cur-d .mwc-cur-hd{ cursor:pointer }
.mwc-cur-hd::-webkit-details-marker{ display:none }
.mwc-cur-hd:focus-visible{ outline:2px solid var(--mwc-accent); outline-offset:3px }
.mwc-cur-n{ flex:0 0 auto; min-width:2.4em; font-family:var(--mwc-ui); font-size:11px;
  font-weight:500; letter-spacing:.18em; color:var(--mwc-accent) }
.mwc-cur-f{ flex:0 0 auto; width:76px; overflow:hidden; background:var(--mwc-mat) }
.mwc-b .mwc-cur-im{ display:block; width:100%; height:auto; aspect-ratio:4 / 3;
  object-fit:cover }
.mwc-cur-t{ flex:1 1 auto; margin:0; font-family:var(--mwc-serif); font-weight:600;
  font-size:17px; line-height:1.4; color:var(--mwc-ink) }
.mwc-b .mwc-cur-a{ color:inherit; text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .35s ease }
.mwc-b .mwc-cur-a:hover{ border-bottom-color:var(--mwc-accent) }
.mwc-cur-tm,
.mwc-cur-lk{ flex:0 0 auto; font-family:var(--mwc-ui); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mwc-txt); opacity:.66 }
.mwc-cur-p{ padding:0 0 16px calc(2.4em + 16px) }
.mwc-cur--img .mwc-cur-p{ padding-left:calc(2.4em + 76px + 32px) }
.mwc-cur-tp{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  gap:8px }
.mwc-cur-tp li{ position:relative; padding-left:16px; font-family:var(--mwc-sans);
  font-size:14px; line-height:1.6; color:var(--mwc-txt) }
.mwc-cur-tp li::before{ content:""; position:absolute; left:0; top:.62em; width:7px;
  height:1px; background:var(--mwc-accent) }
.mwc-cur-more{ margin:14px 0 0 }
.mwc-cur--light .mwc-cur-i{ border-color:rgba(255,255,255,.18) }
.mwc-cur--light .mwc-cur-t{ color:#fff }
.mwc-cur--light .mwc-cur-tp li,
.mwc-cur--light .mwc-cur-tm,
.mwc-cur--light .mwc-cur-lk{ color:rgba(255,255,255,.76); opacity:1 }

/* ------------------------------------------------------------------- видео */
/* Обложка своя приходит тегом img, кадр с сервера видео — фоном из --mwc-vid-poster:
   у него нет ни размеров, ни srcset, и в медиатеке его нет. */

.mwc-vid{ display:flex; flex-direction:column; gap:12px; width:var(--mwc-vid-w,100%);
  max-width:100%; margin:0 auto }
.mwc-vid--mat{ box-sizing:border-box; padding:clamp(14px,1.6vw,22px);
  background:var(--mwc-mat) }
.mwc-vid-fr{ position:relative; display:block; width:100%; padding:0; border:0;
  aspect-ratio:var(--mwc-vid-ar,16 / 9); cursor:pointer; overflow:hidden;
  background-color:var(--mwc-mat); background-image:var(--mwc-vid-poster,none);
  background-position:center; background-size:cover; background-repeat:no-repeat }
.mwc-b .mwc-vid-ph{ display:block; width:100%; height:100%; object-fit:cover }
.mwc-vid-pl{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; background:rgba(20,20,27,.52);
  transition:background .4s ease }
/* Треугольник рамками: в кнопке остаётся один элемент, и иконочный шрифт не нужен. */
.mwc-vid-pl::before{ content:""; position:absolute; left:54%; top:50%;
  transform:translate(-50%,-50%); border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff }
.mwc-vid-fr:hover .mwc-vid-pl{ background:var(--mwc-accent) }
.mwc-vid-fr:focus-visible{ outline:2px solid var(--mwc-accent); outline-offset:4px }
.mwc-vid-if{ display:block; width:100%; aspect-ratio:var(--mwc-vid-ar,16 / 9); border:0 }
.mwc-vid-cap{ display:flex; flex-direction:column; gap:4px; text-align:center }
.mwc-vid-t{ font-family:var(--mwc-serif); font-size:17px; color:var(--mwc-ink) }
.mwc-vid-s{ font-family:var(--mwc-ui); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mwc-txt); opacity:.7 }
.mwc-vid--light .mwc-vid-t{ color:#fff }
.mwc-vid--light .mwc-vid-s{ color:rgba(255,255,255,.75); opacity:1 }

/* --------------------------------------------------- прилипающая полоса покупки */
/* Появление считает метка нулевой высоты: высота в N экранов и такой же отрицательный
   нижний отступ, поэтому в раскладке она места не занимает, а верх окна перестаёт её
   пересекать ровно после N экранов прокрутки (см. assets/sticky.js).
   Класс --js ставит скрипт: без него полоса остаётся в потоке страницы и работает как
   обычный блок с ценой и кнопкой. */

.mwc-bar-w{ width:100% }
.mwc-bar-mark{ display:block; width:1px; height:1px; margin-bottom:-1px;
  pointer-events:none }
.mwc-bar{ box-sizing:border-box; width:100%; background:var(--mwc-paper);
  border-top:1px solid var(--mwc-line); border-bottom:1px solid var(--mwc-line) }
.mwc-bar-in{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); max-width:1240px;
  margin:0 auto; padding:14px clamp(16px,3vw,40px) }
.mwc-bar-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px }
.mwc-bar-t{ margin:0; font-family:var(--mwc-serif); font-weight:600; font-size:17px;
  line-height:1.3; color:var(--mwc-ink); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis }
.mwc-bar-n{ margin:0; font-family:var(--mwc-ui); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mwc-txt); opacity:.7 }
.mwc-bar-p{ flex:0 0 auto; display:flex; align-items:baseline; gap:10px; margin:0 }
.mwc-bar-v{ font-family:var(--mwc-serif); font-weight:600; font-size:24px; line-height:1;
  color:var(--mwc-ink) }
.mwc-bar-old{ font-family:var(--mwc-serif); font-size:16px; color:var(--mwc-txt); opacity:.6 }
/* Цена приходит разметкой WooCommerce: свою типографику она приносит с собой. */
.mwc-bar-v .amount,
.mwc-bar-old .amount{ font:inherit; color:inherit }
.mwc-bar-v .woocommerce-Price-currencySymbol{ font-size:.66em; vertical-align:.22em }
.mwc-b .mwc-bar-b{ flex:0 0 auto; white-space:nowrap }
.mwc-bar-w--js .mwc-bar{ position:fixed; left:0; right:0; z-index:80; opacity:0;
  pointer-events:none; transition:opacity .45s ease,transform .45s ease }
.mwc-bar-w--js.mwc-bar-w--bot .mwc-bar{ bottom:0; transform:translateY(102%);
  box-shadow:0 -18px 40px -30px rgba(20,20,27,.5) }
.mwc-bar-w--js.mwc-bar-w--top .mwc-bar{ top:var(--mwc-sticky-top,0px);
  transform:translateY(-102%); box-shadow:0 18px 40px -30px rgba(20,20,27,.5) }
.mwc-bar-w--js.mwc-bar-w--on .mwc-bar{ transform:none; opacity:1; pointer-events:auto }
.mwc-bar-w--light .mwc-bar{ background:var(--mwc-ink); border-color:rgba(255,255,255,.16) }
.mwc-bar-w--light .mwc-bar-t,
.mwc-bar-w--light .mwc-bar-v{ color:#fff }
.mwc-bar-w--light .mwc-bar-n,
.mwc-bar-w--light .mwc-bar-old{ color:rgba(255,255,255,.75); opacity:1 }

/* ------------------------------------------------- навигация по разделам */
/* Прилипание — position:sticky, а не скрипт: смещение сверху в --mwc-sticky-top, и этот
   же слой занимает полоса покупки, поэтому на странице ставится одна из двух.
   Раздел, к которому ведёт якорь, стоит отодвинуть от полосы: у контейнера Elementor
   для этого достаточно scroll-margin-top в «Дополнительно → Свой CSS». */

.mwc-nav{ width:100%; background:var(--mwc-paper); border-bottom:1px solid var(--mwc-line) }
.mwc-nav--sticky{ position:sticky; top:var(--mwc-sticky-top,0px); z-index:70 }
/* В Elementor прилипает обёртка виджета: sticky ездит только внутри родителя, а родитель
   самой полосы — контейнер виджета высотой в полосу, где ехать некуда (класс ставит
   includes/blocks/nav.php). Внутри обёртки полоса возвращается в поток: два прилипших
   элемента один в другом — это тот же ноль хода. Два класса в селекторе не для красоты:
   у .elementor-widget в frontend.css своя position, и одного класса ей мало. */
.elementor-element.mwc-nav-w{ position:sticky; top:var(--mwc-sticky-top,0px); z-index:70 }
.mwc-nav-w .mwc-nav--sticky{ position:static }
.mwc-nav-in{ display:flex; justify-content:center; gap:clamp(14px,2.4vw,34px);
  max-width:1240px; margin:0 auto; padding:0 clamp(16px,3vw,40px);
  overflow-x:auto; scrollbar-width:none }
.mwc-nav-in::-webkit-scrollbar{ display:none }
.mwc-nav--left .mwc-nav-in{ justify-content:flex-start }
.mwc-b .mwc-nav-i{ flex:0 0 auto; padding:14px 0; font-family:var(--mwc-ui); font-size:12px;
  font-weight:500; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  color:var(--mwc-txt); text-decoration:none; border-bottom:2px solid transparent;
  transition:color .35s ease,border-color .35s ease }
.mwc-b .mwc-nav-i:hover{ color:var(--mwc-ink) }
.mwc-b .mwc-nav-i--on{ color:var(--mwc-accent); border-bottom-color:var(--mwc-accent) }
.mwc-nav-i:focus-visible{ outline:2px solid var(--mwc-accent); outline-offset:2px }
.mwc-nav--light{ background:var(--mwc-ink); border-color:rgba(255,255,255,.16) }
.mwc-b.mwc-nav--light .mwc-nav-i{ color:rgba(255,255,255,.72) }
.mwc-b.mwc-nav--light .mwc-nav-i:hover{ color:#fff }
.mwc-b.mwc-nav--light .mwc-nav-i--on{ color:#fff; border-bottom-color:#fff }

/* ------------------------------------------- другая языковая версия страницы */
/* Тонкая полоса под первым экраном: подпись слева, ссылка справа. Адрес перевода считает
   блок при выводе страницы (includes/blocks/lang.php), здесь только вид. Полоса нарочно
   не похожа на раздел — фон паспарту и одна линия снизу: это сообщение поверх страницы,
   а не её часть, и оно не должно спорить с первым экраном. */

.mwc-lang{ width:100%; background:var(--mwc-mat); border-bottom:1px solid var(--mwc-line);
  padding:var(--mwc-lang-pad,18px) clamp(16px,3vw,40px) }
.mwc-lang-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px clamp(16px,2.4vw,32px); max-width:var(--mwc-lang-w,1140px); margin:0 auto }
.mwc-lang-t{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; min-width:0 }
.mwc-lang-c{ flex:0 0 auto; font-family:var(--mwc-ui); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mwc-accent); border:1px solid var(--mwc-line);
  padding:4px 7px }
.mwc-lang-h{ margin:0; font-family:var(--mwc-sans); font-size:15px; line-height:1.5;
  color:var(--mwc-ink) }
/* Пояснение — своей строкой под подписью, а не третьим словом в ряд. */
.mwc-lang-s{ margin:0; flex:1 1 100%; font-family:var(--mwc-sans); font-size:13px;
  line-height:1.6; color:var(--mwc-txt); opacity:.8 }
/* Кнопка в полосе ниже обычной: у ряда кнопок 18px сверху и снизу, а вся полоса тонкая.
   Вид «Ссылкой» не трогаем — у него своя геометрия. */
.mwc-b a.mwc-lang-b:not(.mwc-btn--link){ flex:0 0 auto; padding:12px 22px; font-size:11px }
.mwc-lang--center .mwc-lang-in{ flex-direction:column; justify-content:center }
.mwc-lang--center .mwc-lang-t{ justify-content:center; text-align:center }
.mwc-lang--light{ background:var(--mwc-ink); border-color:rgba(255,255,255,.16) }
.mwc-lang--light .mwc-lang-c{ color:#fff; border-color:rgba(255,255,255,.32) }
.mwc-lang--light .mwc-lang-h{ color:#fff }
.mwc-lang--light .mwc-lang-s{ color:rgba(255,255,255,.75); opacity:1 }

/* ------------------------------------------------------------- брейкпоинты */
/* Идут последними в файле не случайно: у мобильного .mwc-cards та же специфичность,
   что у .mwc-cards--courses, и его отступы должны побеждать по порядку следования. */

@media (max-width:1024px){
  .mwc-b .mwc-card-img img{ height:262px }
  .mwc-card--course .mwc-card-img img{ height:180px }
  .mwc-cards,
  .mwc-stats,
  .mwc-features,
  .mwc-awards-cols,
  .mwc-rev,
  .mwc-steps{ grid-template-columns:repeat(var(--cols-t,2),minmax(0,1fr)) }
  /* У вопросов-ответов запасное значение своё: колонка по умолчанию одна, и на планшете
     ей незачем становиться двумя. */
  .mwc-faq{ grid-template-columns:repeat(var(--cols-t,1),minmax(0,1fr)) }
  .mwc-plans{ grid-template-columns:repeat(var(--cols-t,2),minmax(0,1fr)) }
  .mwc-lessons{ gap:calc(var(--mwc-lessons-gap,92px) * .74) }
  .mwc-lesson{ gap:clamp(22px,2.8vw,40px) }
  .mwc-b.mwc-marquee img{ height:calc(var(--mwc-strip-h,172px) * .82) }
  .mwc-split{ gap:calc(var(--mwc-split-gap,clamp(28px,3.6vw,64px)) * .78) }
  .mwc-cur-f{ width:60px }
  .mwc-cur--img .mwc-cur-p{ padding-left:calc(2.4em + 60px + 32px) }
}
@media (max-width:767px){
  .mwc-b .mwc-card-img img{ height:300px }
  .mwc-card--course .mwc-card-img img{ height:200px }
  .mwc-card-img .elementor-widget-container,
  .mwc-card-img .mwc-mat{ padding:14px }
  .mwc-cards,
  .mwc-stats,
  .mwc-features,
  .mwc-awards-cols,
  .mwc-faq,
  .mwc-rev,
  .mwc-steps{ grid-template-columns:repeat(var(--cols-m,1),minmax(0,1fr)) }
  .mwc-cards{ gap:34px 22px }
  .mwc-features{ gap:34px 22px }
  .mwc-awards-cols{ gap:34px 22px }
  /* Одна колонка — и порядок тот же, что виден глазами: кадр, потом текст. */
  .mwc-lesson{ grid-template-columns:minmax(0,1fr) }
  .mwc-lesson-img,
  .mwc-lesson--flip .mwc-lesson-img{ order:1 }
  .mwc-lesson-txt,
  .mwc-lesson--flip .mwc-lesson-txt{ order:2 }
  .mwc-lessons{ gap:calc(var(--mwc-lessons-gap,92px) * .56) }
  .mwc-lesson-img{ padding:calc(var(--mwc-lesson-mat,1) * 12px) }
  .mwc-plans{ grid-template-columns:repeat(var(--cols-m,1),minmax(0,1fr)); gap:20px }
  .mwc-band{ min-height:var(--mwc-band-h-m,var(--mwc-band-h,88vh));
    padding:var(--mwc-band-pad-m,var(--mwc-band-pad,104px 18px 60px)) }
  .mwc-band--ken::before{ background-position:center 38% }
  .mwc-marquee-track{ gap:calc(var(--mwc-strip-gap,24px) * .66);
    animation-duration:calc(var(--mwc-strip-dur,72s) * .72) }
  .mwc-b.mwc-marquee img{ height:calc(var(--mwc-strip-h,172px) * .69) }
  /* Текст и картинка: колонка одна, порядок — как в настройке «Что первым на телефоне». */
  .mwc-split,
  .mwc-split--rev{ grid-template-columns:minmax(0,1fr);
    gap:calc(var(--mwc-split-gap,clamp(28px,3.6vw,64px)) * .62) }
  .mwc-split-txt,
  .mwc-split--rev .mwc-split-txt{ order:1 }
  .mwc-split-pic,
  .mwc-split--rev .mwc-split-pic{ order:2 }
  .mwc-split--mpic .mwc-split-pic,
  .mwc-split--mpic.mwc-split--rev .mwc-split-pic{ order:1 }
  .mwc-split--mpic .mwc-split-txt,
  .mwc-split--mpic.mwc-split--rev .mwc-split-txt{ order:2 }
  .mwc-split-pic{ padding:calc(var(--mwc-split-mat,1) * 12px) }
  /* Шаги в колонку: линия становится вертикальной и ведёт от шага к шагу. */
  .mwc-steps{ gap:var(--mwc-steps-gap,26px) }
  .mwc-steps-i{ padding:0 0 0 26px }
  .mwc-steps-i::before{ left:6px; top:.5em; width:1px;
    height:calc(100% + var(--mwc-steps-gap,26px)) }
  .mwc-steps-i:last-child::before{ height:24px }
  .mwc-rev-i::before{ font-size:64px }
  /* Обложки уроков на телефоне не показываем: 60 пикселей кадра съедают строку названия. */
  .mwc-cur-f{ display:none }
  .mwc-cur-hd{ gap:12px; flex-wrap:wrap }
  .mwc-cur-t{ flex:1 1 100% }
  .mwc-cur-p,
  .mwc-cur--img .mwc-cur-p{ padding-left:0 }
  .mwc-vid-pl{ width:58px; height:58px }
  .mwc-vid-pl::before{ border-width:9px 0 9px 14px }
  /* Полоса покупки: подпись уходит, цена и кнопка остаются — им и место нужно. */
  .mwc-bar-in{ gap:14px; padding:10px 16px }
  .mwc-bar-n{ display:none }
  .mwc-bar-t{ font-size:14px }
  .mwc-bar-v{ font-size:19px }
  .mwc-bar-old{ font-size:13px }
  .mwc-b .mwc-bar-b{ padding:12px 18px; font-size:11px }
  /* Пунктов больше, чем ширины: полоса прокручивается вбок, а не сворачивается в список. */
  .mwc-nav-in{ justify-content:flex-start; gap:22px }
  .mwc-b .mwc-nav-i{ padding:12px 0; font-size:11px }
  /* Полоса языка: подпись и кнопка друг под другом, кнопка во всю ширину — так по ней
     проще попасть пальцем, чем по короткой кнопке у самого края. */
  .mwc-lang-in{ flex-direction:column; align-items:stretch }
  .mwc-b a.mwc-lang-b:not(.mwc-btn--link){ text-align:center }
}

/* Кому анимации мешают — тому их нет. Начальное состояние появления снимает
   assets/reveal.css, здесь только бесконечные анимации: ken-burns, покачивание,
   лента. Линию в полосе дочерчивать не нужно — сразу целая. */
@media (prefers-reduced-motion:reduce){
  .mwc-b,
  .mwc-b::before,
  .mwc-b::after,
  .mwc-b *,
  .mwc-b *::before,
  .mwc-b *::after,
  body.mwc-page *,
  body.mwc-page *::before,
  body.mwc-page *::after{ animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important }
  .mwc-rule{ width:var(--mwc-rule-w,132px) }
}