/* ============================================================
   Mind Group — психологические курсы
   ============================================================ */
.courses { padding: 70px 0 90px; }

/* ---- сетка курсов ---- */
.cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1060px; margin: 0 auto; }
.ccard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s; display: flex; flex-direction: column; }
.ccard:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.ccard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ccard__emoji { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 34px; color: #fff; background: linear-gradient(140deg, hsl(var(--hue) 42% 58%), hsl(var(--hue) 48% 34%)); box-shadow: 0 8px 18px hsl(var(--hue) 45% 40% / .35), inset 0 1px 0 rgb(255 255 255 / .25); }
.ccard__emoji .mgi { width: 32px; height: 32px; }

/* Картинки-иконки курсов (стеклянные 3D-плитки) */
.ccard__emoji--img, .course-side__emoji--img { background: none; box-shadow: none; overflow: hidden; border-radius: 22%; position: relative; }
.cicon-img { width: 152%; height: 152%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ccard__emoji--img { filter: drop-shadow(0 8px 16px rgb(16 34 31 / .18)); }
.course-side__emoji--img { filter: drop-shadow(0 5px 12px rgb(16 34 31 / .16)); }

/* SVG-иконки */
.mgi { display: inline-block; vertical-align: -0.18em; width: 1.1em; height: 1.1em; flex-shrink: 0; }
.ccard__meta .mgi { width: 15px; height: 15px; color: var(--sage); margin-right: 2px; }
.ccard__meta span { display: inline-flex; align-items: center; gap: 4px; }
.lesson-badge .mgi { width: 14px; height: 14px; }
.lesson-check .mgi { width: 15px; height: 15px; color: var(--sage-d); }
.lesson-item.done .lesson-check .mgi { color: #fff; }
.ccard__badge { background: var(--sage-d); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 100px; }
.ccard__badge--prog { background: var(--honey); color: var(--ink); }
.ccard h2 { font-size: 19px; line-height: 1.34; letter-spacing: -.01em; margin-bottom: 10px; text-wrap: balance; }
.ccard__tag { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 11.5px; font-weight: 800; color: hsl(var(--hue) 45% 28%); background: hsl(var(--hue) 50% 94%); border: 1px solid hsl(var(--hue) 40% 86%); padding: 5px 12px; border-radius: 100px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; }
.ccard__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--hue) 55% 45%); flex: none; }
.ccard__desc { color: var(--ink-soft); font-size: 14.5px; flex: 1; margin-bottom: 16px; }
.ccard__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 14px; }
.ccard__bar { height: 7px; background: var(--cream-2); border-radius: 100px; overflow: hidden; margin-bottom: 18px; }
.ccard__bar-fill { height: 100%; background: var(--grad-sun); border-radius: 100px; transition: width .5s var(--ease); }
.ccard__btn { width: 100%; }

/* ---- просмотр курса ---- */
.course-back { background: none; border: none; font-family: inherit; font-weight: 700; color: var(--ink-soft); font-size: 15px; cursor: pointer; margin-bottom: 20px; padding: 6px 0; }
.course-back:hover { color: var(--ink); }
.course-layout { display: grid; grid-template-columns: 320px 1fr; gap: 26px; align-items: start; }

.course-side { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); position: sticky; top: 90px; }
.course-side__head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.course-side__emoji { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; color: #fff; background: linear-gradient(140deg, hsl(var(--hue) 42% 58%), hsl(var(--hue) 48% 34%)); box-shadow: 0 6px 14px hsl(var(--hue) 45% 40% / .3); flex-shrink: 0; }
.course-side__emoji .mgi { width: 26px; height: 26px; }
.course-side__head h2 { font-size: 19px; }
.course-side__head p { font-size: 13px; color: var(--ink-soft); }
.course-side__bar { height: 8px; background: var(--cream-2); border-radius: 100px; overflow: hidden; margin-bottom: 6px; }
.course-side__bar div { height: 100%; background: var(--grad-sun); border-radius: 100px; transition: width .5s var(--ease); }
.course-side__pct { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 16px; }

.lesson-list { list-style: none; display: grid; gap: 4px; }
.lesson-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-sm); cursor: pointer; transition: background .2s; }
.lesson-item:hover { background: var(--cream); }
.lesson-item.active { background: var(--cream-2); }
.lesson-check { width: 26px; height: 26px; border-radius: 50%; background: var(--cream-2); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.lesson-item.done .lesson-check { background: var(--sage-d); color: #fff; }
.lesson-item.active .lesson-check { box-shadow: 0 0 0 2px var(--peach-d); }
.lesson-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.lesson-dur { font-size: 11.5px; color: var(--ink-soft); flex-shrink: 0; }

.course-main { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 38px 40px; box-shadow: var(--shadow-sm); }
.lesson-head { margin-bottom: 22px; }
.lesson-badge { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--peach-d); background: var(--cream-2); padding: 5px 14px; border-radius: 100px; margin-bottom: 12px; }
.lesson-head h1 { font-size: clamp(24px, 3vw, 32px); }

.lesson-video { position: relative; aspect-ratio: 16/9; border-radius: var(--r); overflow: hidden; margin-bottom: 24px; background: var(--ink); }
.lesson-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.lesson-video--ph { display: grid; place-items: center; background: linear-gradient(145deg, hsl(var(--hue) 40% 90%), var(--cream-2)); }
.vph { text-align: center; color: var(--ink-soft); display: grid; gap: 6px; }
.vph span { font-size: 46px; }
.vph strong { font-size: 18px; color: var(--ink); font-family: "Unbounded"; }
.vph em { font-size: 13px; }

.lesson-pdf { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: 2px dashed var(--line); border-radius: var(--r); margin-bottom: 24px; text-decoration: none; transition: .25s; background: var(--cream); }
.lesson-pdf:hover { border-color: var(--peach-d); background: var(--cream-2); transform: translateY(-2px); }
.lesson-pdf__icon { font-size: 40px; }
.lesson-pdf__txt { flex: 1; display: flex; flex-direction: column; }
.lesson-pdf__txt strong { font-size: 17px; color: var(--ink); }
.lesson-pdf__txt em { font-size: 13px; color: var(--ink-soft); font-style: normal; }
.lesson-pdf__dl { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-sun); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 700; }

.lesson-body p { color: var(--ink); font-size: 16px; line-height: 1.72; margin-bottom: 16px; }
.lesson-foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ============================================================
   ВИЗУАЛИЗАЦИЯ УРОКА (viz)
   ============================================================ */
.viz { margin: 26px 0; padding: 0; }
.viz__h { font-family: "Unbounded"; font-size: 15px; color: var(--ink); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.viz__h::before { content: ""; width: 20px; height: 3px; border-radius: 3px; background: var(--grad-sun); }

/* — выделенная мысль / практика — */
.viz--callout { display: flex; gap: 14px; align-items: flex-start; background: hsl(var(--hue, 150) 45% 96%); border-left: 4px solid hsl(var(--hue, 150) 45% 45%); border-radius: 14px; padding: 18px 20px; }
.viz--callout .viz__ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, hsl(var(--hue, 150) 42% 55%), hsl(var(--hue, 150) 48% 33%)); box-shadow: 0 6px 14px hsl(var(--hue, 150) 45% 40% / .3); font-size: 22px; }
.viz--callout .viz__ic .mgi { width: 23px; height: 23px; }
.viz--callout figcaption b { display: block; font-family: "Unbounded"; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--hue, 150) 45% 32%); margin-bottom: 5px; }
.viz--callout figcaption p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }

/* — пронумерованные шаги — */
.viz--steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: viz; }
.viz--steps li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: 0 4px 14px rgba(16,34,31,.04); }
.viz--steps .viz__num { counter-increment: viz; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--grad-sun); color: #fff; display: grid; place-items: center; font-family: "Unbounded"; font-weight: 700; font-size: 14px; }
.viz--steps .viz__num::before { content: counter(viz); }
.viz--steps li div { padding-top: 3px; }
.viz--steps li b { font-size: 15.5px; color: var(--ink); }
.viz--steps li em { display: block; font-style: normal; font-size: 14px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }

/* — карточки-концепции — */
.viz--cards .viz__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.viz__card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; text-align: center; box-shadow: 0 4px 14px rgba(16,34,31,.04); transition: transform .2s; }
.viz__card:hover { transform: translateY(-3px); }
.viz__card-ic { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%; color: #fff; background: linear-gradient(140deg, hsl(var(--hue, 150) 42% 55%), hsl(var(--hue, 150) 48% 33%)); box-shadow: 0 5px 12px hsl(var(--hue, 150) 45% 40% / .28); font-size: 24px; }
.viz__card-ic .mgi { width: 23px; height: 23px; }
.viz__card b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 5px; }
.viz__card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }

/* — сравнение двух колонок — */
.viz--compare .viz__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.viz__col { border-radius: 16px; padding: 16px 18px; }
.viz__col b { display: block; font-family: "Unbounded"; font-size: 14px; margin-bottom: 10px; }
.viz__col ul { margin: 0; padding-left: 18px; }
.viz__col li { font-size: 14px; line-height: 1.65; margin-bottom: 5px; }
.viz__col--no { background: #fdeeee; }
.viz__col--no b { color: #c0392b; }
.viz__col--yes { background: #e9f6ee; }
.viz__col--yes b { color: #1d7a4d; }
@media (max-width: 520px) { .viz--compare .viz__cols { grid-template-columns: 1fr; } }

/* — схема-поток (flow) — */
.viz--flow { background: linear-gradient(160deg, hsl(var(--hue, 150) 40% 97%), #fff); border: 1px solid hsl(var(--hue, 150) 30% 88%); border-radius: 18px; padding: 20px 22px; }
.viz__flowrow { display: flex; align-items: stretch; justify-content: center; gap: 10px; flex-wrap: wrap; }
.viz__node { background: #fff; border: 1.5px solid hsl(var(--hue, 150) 35% 78%); border-radius: 14px; padding: 12px 16px; text-align: center; min-width: 110px; max-width: 190px; flex: 1; box-shadow: 0 4px 12px hsl(var(--hue, 150) 40% 40% / .1); display: flex; flex-direction: column; justify-content: center; }
.viz__node b { font-size: 14px; color: var(--ink); line-height: 1.35; }
.viz__node em { font-style: normal; font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
.viz__arr { align-self: center; font-size: 20px; font-weight: 700; color: hsl(var(--hue, 150) 45% 45%); flex-shrink: 0; }
.viz__cycle { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; color: hsl(var(--hue, 150) 48% 33%); }
.viz__cycle .mgi { width: 17px; height: 17px; }
.viz__break { margin-top: 8px; text-align: center; font-size: 13px; font-weight: 700; color: #1d7a4d; background: #e9f6ee; border-radius: 100px; padding: 7px 16px; display: table; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .viz__flowrow { flex-direction: column; align-items: stretch; }
  .viz__node { max-width: none; }
  .viz__arr { transform: rotate(90deg); }
}

/* ============================================================
   ЦЕНА КУРСА
   ============================================================ */
.ccard__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ccard__price b { font-family: "Unbounded"; font-size: 24px; color: var(--sage-d); }
.ccard__price s { color: var(--ink-soft); font-size: 15px; opacity: .7; }
.ccard__price span { font-size: 12px; font-weight: 700; color: #1d7a4d; background: #e9f6ee; padding: 4px 10px; border-radius: 100px; }
.ccard__price-paid { font-family: "Unbounded"; font-size: 16px; color: #1d7a4d; }

/* замки на уроках */
.lesson-item.locked { opacity: .62; }
.lesson-lockic { width: 15px; height: 15px; color: var(--ink-soft); }

/* ============================================================
   PAYWALL
   ============================================================ */
.paywall { text-align: center; max-width: 460px; margin: 20px auto; }
.paywall__lock { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, hsl(var(--hue, 150) 42% 55%), hsl(var(--hue, 150) 48% 33%)); box-shadow: 0 12px 26px hsl(var(--hue, 150) 45% 40% / .35); }
.paywall__lock .mgi { width: 34px; height: 34px; }
.paywall h2 { font-size: 24px; margin-bottom: 10px; }
.paywall__sub { color: var(--ink-soft); font-size: 15px; margin-bottom: 18px; }
.paywall__price { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.paywall__price b { font-family: "Unbounded"; font-size: 38px; color: var(--sage-d); }
.paywall__price s { font-size: 20px; color: var(--ink-soft); opacity: .7; }
.paywall__price em { width: 100%; font-style: normal; font-size: 12.5px; color: var(--ink-soft); }
.paywall__perks { list-style: none; margin: 0 0 22px; padding: 18px 20px; background: var(--cream); border-radius: 16px; display: grid; gap: 10px; text-align: left; }
.paywall__perks li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.paywall__perks .mgi { width: 18px; height: 18px; color: var(--sage); }
.paywall__form { display: grid; gap: 10px; }
.paywall__form input { padding: 13px 15px; font-family: inherit; font-size: 15px; border: 2px solid var(--line); border-radius: 13px; }
.paywall__form input:focus { outline: none; border-color: var(--sage); }
.paywall__err { color: #c0392b; font-size: 13px; font-weight: 600; margin: 0; }
.paywall__note { margin-top: 14px; font-size: 12.5px; color: var(--ink-soft); }
.paywall__done { padding: 22px; border-radius: 16px; background: #e9f6ee; color: #1d7a4d; font-weight: 700; font-size: 16px; }
.paywall__done--err { background: #fdeeee; color: #c0392b; }

/* ============================================================
   ИНТЕРАКТИВНЫЙ ТЕСТ (quiz)
   ============================================================ */
.quiz-t { display: grid; gap: 20px; margin-top: 6px; }
.qz { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; box-shadow: 0 4px 14px rgba(16,34,31,.04); }
.qz__q { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; font-size: 16px; margin: 0 0 14px; }
.qz__q span { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--grad-sun); color: #fff; display: grid; place-items: center; font-family: "Unbounded"; font-size: 13px; }
.qz__opts { display: grid; gap: 8px; }
.qz__opt { text-align: left; font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--cream); border: 2px solid transparent; border-radius: 12px; padding: 12px 15px; cursor: pointer; transition: .18s; }
.qz__opt:hover:not(:disabled) { background: var(--cream-2); }
.qz__opt.sel { border-color: var(--sage); background: #eef6f2; }
.qz__opt.ok { border-color: #1d7a4d; background: #e9f6ee; color: #1d7a4d; }
.qz__opt.bad { border-color: #c0392b; background: #fdeeee; color: #c0392b; }
.qz__opt:disabled { cursor: default; }
.qz__ex { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); background: var(--cream); border-radius: 10px; padding: 10px 14px; }
.qz__result { text-align: center; background: linear-gradient(160deg, hsl(var(--hue, 150) 40% 96%), #fff); border: 1px solid hsl(var(--hue, 150) 30% 86%); border-radius: 18px; padding: 26px; }
.qz__result b { font-family: "Unbounded"; font-size: 30px; color: var(--sage-d); display: block; margin-bottom: 8px; }
.qz__result p { margin: 0; font-size: 15.5px; color: var(--ink); }

@media (max-width: 900px) {
  .cgrid { grid-template-columns: 1fr 1fr; }
  .course-layout { grid-template-columns: 1fr; }
  .course-side { position: static; }
}
@media (max-width: 600px) {
  .cgrid { grid-template-columns: 1fr; }
  .course-main { padding: 26px 22px; }
}

/* ---------- переключатели языка и валюты ---------- */
.csw-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.csw{display:inline-flex;gap:4px;padding:4px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.csw button{border:0;background:transparent;padding:7px 14px;border-radius:999px;font:inherit;font-size:13px;font-weight:700;color:var(--ink-soft,#777);cursor:pointer;transition:.2s}
.csw button:hover{color:var(--ink,#222)}
.csw button.active{background:linear-gradient(135deg,#134e4a,#2dd4bf);color:#fff;box-shadow:0 3px 10px rgba(19,78,74,.35)}
@media(max-width:560px){.csw button{padding:6px 10px;font-size:12px}}

/* переключатель языка в шапке (справа) */
.csw--nav{margin-left:14px}
.csw--nav button{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;font-size:12px}
.csw__flag{font-size:15px;line-height:1}
@media(max-width:760px){.csw--nav{margin-left:8px}.csw--nav button{padding:5px 8px}.csw--nav button:not(.active) .csw__flag+*{display:none}}

/* SVG-флаги в переключателе языка */
.csw__flag{display:inline-flex;width:19px;height:13px;border-radius:2.5px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.csw__flag svg{width:100%;height:100%;display:block}
@media(max-width:760px){.csw--nav button:not(.active) .csw__code{display:none}}

/* ================= витрина курса (лендинг) ================= */
.cl{display:flex;flex-direction:column;gap:26px;margin-top:14px}
.cl__hero{display:grid;grid-template-columns:340px 1fr;gap:34px;background:#fff;border-radius:24px;padding:30px;box-shadow:0 14px 44px rgba(0,0,0,.07)}
.cl__cover{background:linear-gradient(140deg,hsl(var(--hue,160) 45% 88%),hsl(var(--hue,160) 55% 72%));border-radius:18px;display:grid;place-items:center;min-height:280px}
.cl__cover-ic{width:200px;height:200px;display:grid;place-items:center}
.cl__cover-ic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(0,0,0,.18))}
.cl__cover-ic .mgi{width:110px;height:110px;color:hsl(var(--hue,160) 45% 30%)}
.cl__info h1{font-family:Unbounded,sans-serif;font-size:clamp(26px,3.4vw,40px);margin:0 0 4px}
.cl__tag{color:hsl(var(--hue,160) 40% 38%);font-weight:700;margin:0 0 12px}
.cl__badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.cl__badge{display:inline-flex;align-items:center;gap:6px;background:#f4f6f5;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700}
.cl__badge .mgi{width:15px;height:15px}
.cl__desc{color:var(--ink-soft,#555);line-height:1.6;margin:0 0 18px}
.cl__deal{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#d33;margin-bottom:4px}
.cl__prices{display:flex;align-items:baseline;gap:14px}
.cl__prices b{font-size:34px;font-family:Unbounded,sans-serif}
.cl__prices s{color:#999;font-size:18px}
.cl__timer{display:inline-block;margin-top:8px;background:#fff;border:1.5px solid rgba(0,0,0,.1);border-radius:12px;padding:8px 16px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px;box-shadow:0 3px 10px rgba(0,0,0,.05)}
.cl__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.cl__feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.cl__feat{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:16px 18px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.cl__feat-ic{flex:0 0 46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(140deg,hsl(var(--hue,160) 45% 92%),hsl(var(--hue,160) 50% 82%));color:hsl(var(--hue,160) 45% 30%)}
.cl__feat-ic .mgi{width:24px;height:24px}
.cl__sect{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.cl__sect-head{background:linear-gradient(135deg,hsl(var(--hue,160) 55% 26%),hsl(var(--hue,160) 50% 42%));color:#fff;font-family:Unbounded,sans-serif;font-weight:700;font-size:17px;padding:18px 26px;letter-spacing:.4px}
.cl__list{list-style:none;margin:0;padding:20px 28px 24px;display:flex;flex-direction:column;gap:11px}
.cl__list li{position:relative;padding-left:22px;line-height:1.5}
.cl__list li::before{content:"";position:absolute;left:2px;top:8px;width:8px;height:8px;border-radius:50%;border:2.5px solid hsl(var(--hue,160) 45% 40%)}
.cl__bottom{display:flex;justify-content:center;padding:6px 0 20px}
@media(max-width:840px){.cl__hero{grid-template-columns:1fr;gap:20px}.cl__cover{min-height:200px}.cl__cover-ic{width:140px;height:140px}}

/* аудио-урок */
.lesson-audio{display:flex;align-items:center;gap:16px;background:#fff;border-radius:18px;padding:18px 20px;box-shadow:0 8px 24px rgba(0,0,0,.06);margin-bottom:22px}
.lesson-audio__ic{flex:0 0 52px;height:52px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(140deg,hsl(var(--hue,160) 45% 90%),hsl(var(--hue,160) 50% 78%));color:hsl(var(--hue,160) 45% 28%)}
.lesson-audio__ic .mgi{width:26px;height:26px}
.lesson-audio audio{flex:1;min-width:0;height:44px}

/* ================= интерактивные упражнения ================= */
.ex{background:#fff;border-radius:18px;padding:22px;box-shadow:0 8px 26px rgba(0,0,0,.06);margin-top:18px;display:flex;flex-direction:column;gap:14px}
.ex__field{display:flex;flex-direction:column;gap:6px}
.ex__field span{font-weight:700;font-size:14px}
.ex__field textarea{border:1.5px solid rgba(0,0,0,.12);border-radius:12px;padding:10px 12px;font:inherit;resize:vertical;min-height:44px}
.ex__field textarea:focus{outline:none;border-color:hsl(var(--hue,160) 45% 45%)}
.ex__foot{display:flex;align-items:center;gap:12px}
.ex__saved{color:hsl(150 50% 35%);font-weight:700;font-size:14px}
.ex__items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ex__items li{display:flex;align-items:center;gap:10px;background:#f6f8f7;border-radius:11px;padding:9px 12px;line-height:1.45}
.ex__items li em{color:#888;font-style:normal;font-size:12px;flex:0 0 auto}
.ex__items li button{margin-left:auto;border:0;background:none;color:#b55;font-size:16px;cursor:pointer;padding:0 4px}
/* дыхание 4-7-8 */
.ex--breath{align-items:center}
.ex-breath__stage{display:grid;place-items:center;padding:16px 0}
.ex-breath__circle{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 35% 30%,hsl(var(--hue,160) 50% 88%),hsl(var(--hue,160) 48% 70%));color:hsl(var(--hue,160) 45% 22%);font-weight:800;transition:transform 1s ease-in-out,background .5s;box-shadow:0 14px 36px hsla(var(--hue,160),50%,40%,.3)}
.ex-breath__circle span{display:block;font-size:17px}
.ex-breath__circle b{display:block;font-size:30px;font-family:Unbounded,sans-serif}
.ex-breath__circle--p0{transform:scale(1.25)}
.ex-breath__circle--p1{transform:scale(1.25);background:radial-gradient(circle at 35% 30%,hsl(45 80% 88%),hsl(45 70% 70%));color:hsl(45 60% 25%)}
.ex-breath__circle--p2{transform:scale(.85)}
.ex-breath__bar{display:flex;align-items:center;gap:16px}
.ex-breath__cycles{font-weight:700;color:var(--ink-soft,#666)}
/* таймер 2 минут */
.ex-timer{display:flex;align-items:center;gap:16px;background:#f6f8f7;border-radius:14px;padding:14px 18px}
.ex-timer__val{font-family:Unbounded,sans-serif;font-size:26px;font-weight:700;min-width:120px}

/* ================= выпадающие переключатели (язык/валюта) ================= */
.dd{position:relative;display:inline-block}
.dd--nav{margin-left:14px}
.dd__trigger{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;font-weight:700;color:var(--ink,#222);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.05);transition:.15s}
.dd__trigger:hover{border-color:rgba(0,0,0,.2)}
.dd__cur{display:inline-flex;align-items:center;gap:6px}
.dd__chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s;opacity:.6}
.dd__trigger[aria-expanded="true"] .dd__chev{transform:rotate(-135deg);margin-top:2px}
.dd__menu{position:absolute;top:calc(100% + 6px);right:0;min-width:100%;display:flex;flex-direction:column;gap:2px;padding:5px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.16);z-index:60;animation:ddIn .16s ease}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dd__item{display:flex;align-items:center;gap:7px;white-space:nowrap;border:0;background:transparent;padding:8px 14px;border-radius:9px;font:inherit;font-size:13px;font-weight:700;color:var(--ink-soft,#666);cursor:pointer;text-align:left;transition:.12s}
.dd__item:hover{background:#f4f6f5;color:var(--ink,#222)}
.dd__item.active{background:linear-gradient(135deg,#134e4a,#2dd4bf);color:#fff}
.dd__item .csw__flag{flex:0 0 auto}

/* критично: атрибут hidden должен реально прятать меню (класс перебивал UA-стиль) */
.dd__menu[hidden]{display:none}