/* ============================================================
   BeEasy Russian · site.css
   Общие стили всех страниц: токены, база, шапка, подвал,
   кнопки, карточки, плашки, призыв.

   Подключается так:
     с корня      <link rel="stylesheet" href="assets/css/site.css?v=1">
     из подпапки  <link rel="stylesheet" href="../assets/css/site.css?v=1">

   ВАЖНО: правя этот файл, поднимайте метку ?v=N во всех страницах,
   иначе у посетителей останется старая копия из кэша.
   ============================================================ */

/* ─── 1. ТОКЕНЫ ─────────────────────────────────────────── */
:root{
  --font-display:'Unbounded',sans-serif;
  --font-ui:'PT Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-hand:'Marck Script',cursive;

  --honey:#F5A623; --honey-dark:#D97706; --honey-soft:#FDF0D5;
  --honey-rgb:245 166 35;   /* тот же медовый, компонентами — для заливок разной густоты */

  /* Плашки модулей: переход по тону от тёплого жёлтого к глубокому оранжевому.
     Не «светлее — темнее» одного цвета, а движение по одной тёплой дуге:
     шаг по тону + небольшой рост плотности, поэтому ряд читается как маршрут.
     Заменить оттенок — одна строка; плотность — в .module--1…5 ниже. */
  --mod-1-rgb: 247 197  66;   /* тёплый жёлтый   */
  --mod-2-rgb: 245 166  35;   /* медовый         */
  --mod-3-rgb: 237 133  26;   /* оранжевый       */
  --mod-4-rgb: 217  96  10;   /* глубокий оранжевый */
  --mod-5-rgb: 191  74  12;   /* терракота, про запас */
  /* Основной цвет текста. #3D1C02 почти чёрный на крупном кегле,
     поэтому взят более тёплый тёмно-коричневый. Другие варианты:
     #422410 темнее, #573520 светлее и заметно коричневее. */
  --brown:#4A2B16; --cream:#FFF9E6; --paper:#fff;
  --line:#ECDCB4; --muted:#7D6449;
  --btn:#FB8C00; --btn-2:#EF6C00;
  --ok:#2E9E5B; --ok-bg:#EEFAF1; --no:#D8553A; --no-bg:#FDEEE9;
  --heart:#E0463C;

  --radius-sm:.5rem; --radius:.75rem; --radius-lg:1rem; --radius-pill:99px;
  --tap:2.75rem;
  --col:75rem;          /* ≈1280px — центральный контейнер (ТЗ §13) */
  --pad:1.25rem;        /* боковые поля; блок «в край» выходит на -var(--pad) */
  --gap:1.5rem;
  --lh:1.45;            /* ТЗ §2 и эталон, не 1.4 */

  /* Настоящие соты: шестиугольная плитка, бесшовная по обеим осям.
     Два градиента под 60° из прежнего site.css давали ромбы. */
  --comb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55.42 96'%3E%3Cpath fill='none' stroke='rgba(245,166,35,.18)' stroke-width='1' d='M27.71 0 55.42 16V48L27.71 64 0 48V16ZM0 48l27.71 16v32L0 112l-27.71-16V64ZM55.42 48 83.13 64v32l-27.71 16-27.71-16V64ZM0-48l27.71 16v32L0 16l-27.71-16v-32ZM55.42-48 83.13-32V0L55.42 16 27.71 0v-32Z'/%3E%3C/svg%3E");

  /* ГЕРОЙ: маска растворяет ЛЕВЫЙ край иллюстрации — тот, что смотрит на текст.
     Низ и правый край плотные, иначе картинка не доходит до границы героя.
     Ручка подгонки — 58%: меньше, значит левый край тает раньше. */
  --art-mask:radial-gradient(86% 130% at 58% 62%, rgba(0,0,0,1) 58%, rgba(0,0,0,0) 100%);

  font-size:16px;
}
@media (min-width:768px){  :root{ font-size:17px; --pad:2rem } }
@media (min-width:1024px){ :root{ --pad:4rem } }

/* ─── 2. БАЗА ───────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:var(--font-ui); font-size:1rem; line-height:var(--lh);
  color:var(--brown); background:var(--paper);
}
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.15; margin:0 }
p{ margin:0 }
a{ color:inherit }
img{ max-width:100%; height:auto; display:block }   /* height:auto обязателен:
   в разметке у картинок стоят width/height, и без него картинка сплющивается */
button{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--honey); outline-offset:2px; border-radius:var(--radius-sm) }

.wrap{ width:100%; max-width:var(--col); margin-inline:auto; padding-inline:var(--pad) }
.comb{ background-image:var(--comb); background-size:3.464rem 6rem }

.skip{
  position:absolute; left:-9999px; top:.5rem; z-index:60;
  background:var(--paper); border:1.5px solid var(--line);
  padding:.5rem .9rem; border-radius:var(--radius-sm);
}
.skip:focus{ left:.75rem }

/* ─── 3. КНОПКИ И ССЫЛКИ-СТРЕЛКИ ────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:var(--tap); padding:.7rem 1.5rem;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  border:1.5px solid transparent; border-radius:var(--radius-pill);
  text-decoration:none; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}
.btn--main{ background:var(--btn); color:var(--paper) }
.btn--main:hover{ background:var(--btn-2) }
.btn--ghost{ background:var(--paper); color:var(--brown); border-color:var(--line) }
.btn--ghost:hover{ background:var(--honey-soft) }
.btn svg{ flex:0 0 auto }

.more{
  display:inline-flex; align-items:center; gap:.45rem; min-height:var(--tap);
  font-weight:700; color:var(--honey-dark); text-decoration:none;
}
.more:hover{ text-decoration:underline; text-underline-offset:.2em }

/* ─── 4. ШАПКА ──────────────────────────────────────────── */
.head{
  position:sticky; top:0; z-index:50;
  background:var(--paper); border-bottom:1.5px solid var(--line);
}
.head__bar{ display:flex; align-items:center; gap:1rem; min-height:4rem }

.brand{
  display:inline-flex; align-items:center; gap:.6rem; margin-right:auto;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.05;
  text-decoration:none;
}
.brand img{
  width:2.6rem; height:2.6rem; object-fit:contain;
  background:var(--honey-soft); border-radius:var(--radius-pill);
}
.brand span{ display:block }

.nav ul{ list-style:none; display:flex; gap:1.4rem; margin:0; padding:0 }
.nav a{ display:inline-flex; align-items:center; min-height:var(--tap); text-decoration:none; font-size:1rem }
.nav a:hover{ color:var(--honey-dark) }
.nav a[aria-current="page"]{ color:var(--honey-dark); font-weight:700 }

.lang{ display:flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.9rem }
.lang a{ text-decoration:none; min-height:var(--tap); display:inline-flex; align-items:center; padding-inline:.15rem }
.lang a[aria-current="true"]{ color:var(--brown); font-weight:700 }
.lang i{ font-style:normal; color:var(--line) }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap);
  background:none; border:0; border-radius:var(--radius-pill); cursor:pointer;
}
.icon-btn:hover{ background:var(--honey-soft) }
.burger{ display:none }

.search{ display:none; padding-bottom:1rem }
.search.is-open{ display:block }
.search form{ display:flex; gap:.5rem }
.search input{
  flex:1 1 auto; min-height:var(--tap); padding:.5rem .9rem;
  font:inherit; color:var(--brown); background:var(--paper);
  border:1.5px solid var(--line); border-radius:var(--radius-pill);
}
.search input::placeholder{ color:var(--muted) }

@media (max-width:1023px){
  .burger{ display:inline-flex }
  .head__side{ display:flex; align-items:center }
  .head__menu{ display:none; padding:.5rem 0 1rem; border-top:1.5px solid var(--line) }
  .head.is-open .head__menu{ display:block }
  .nav ul{ flex-direction:column; gap:0 }
  .nav a{ min-height:var(--tap); padding:.35rem 0; border-bottom:1.5px solid var(--line); width:100% }
  .nav li:last-child a{ border-bottom:0 }
  .head__menu .lang{ padding-top:.5rem }
}
@media (min-width:1024px){
  .head__menu{ display:contents }
  .nav{ margin-inline:auto }
}

/* ─── 5. ГЕРОЙ ГЛАВНОЙ ──────────────────────────────────── */
.hero{ position:relative; z-index:1; background-color:var(--cream) }
.hero__grid{ display:block; padding-block:2rem 0 }

.hero__text{ position:relative; z-index:2; max-width:33rem }
.hero h1{
  font-size:clamp(2.6rem,9.5vw,4.5rem);   /* 42px на 375 → 76px на десктопе */
  line-height:1; letter-spacing:-.02em; text-wrap:balance;
}
.hero h1 em{ font-style:normal; color:var(--honey) }
.hero__lead{ font-weight:700; font-size:clamp(1.05rem,2.4vw,1.2rem); margin-top:.9rem }
.hero__sub{ color:var(--muted); margin-top:.35rem; max-width:28rem }

/* CTA: главная кнопка крупнее и залита, вторая заметно легче */
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .9rem; margin-top:1.6rem }
.hero__cta .btn--main{ font-size:1.05rem; padding:.85rem 1.9rem }
.hero__cta .btn--ghost{ font-family:var(--font-ui); font-weight:700 }

/* преимущества — фоновая строка, не конкурент кнопке */
.trust{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  font-size:.82rem; color:var(--muted);
}
.trust li{ display:flex; align-items:center; gap:.45rem }
.trust svg{ flex:0 0 auto; width:1rem; height:1rem; color:var(--muted) }

/* ИЛЛЮСТРАЦИЯ. Не картинка в колонке, а слой композиции:
   мягкое медовое пятно под персонажем, растворённый левый край. */
.hero__art{ position:relative; pointer-events:none }
.hero__blob{
  position:absolute; z-index:0; inset:6% -4% 2% 2%;
  background:radial-gradient(closest-side ellipse at 52% 52%,
             var(--honey-soft) 0, var(--honey-soft) 58%, transparent 100%);
}
.hero__pic{ position:relative; z-index:1; display:block; background:var(--honey-soft) }
.hero__pic img{
  width:100%; height:auto;
  -webkit-mask-image:var(--art-mask);
          mask-image:var(--art-mask);
}

/* Телефон и планшет: под текстом одна крупная картинка в край экрана,
   тесный кадр hero-mobile.jpg — широкий на такой ширине не читается. */
@media (max-width:1023px){
  .hero__grid{ padding-block:1.75rem 0 }
  .hero__blob{ display:none }
  .hero__art{ margin:1.5rem calc(var(--pad) * -1) 0 }
  .hero__pic{ background:none }
  .hero__pic img{
    width:100%; aspect-ratio:1 / .8;
    object-fit:cover; object-position:54% top;
    -webkit-mask-image:none; mask-image:none;
  }
}
@media (min-width:768px) and (max-width:1023px){
  .hero__grid{ padding-block:2.5rem 0 }
  .hero__pic img{ aspect-ratio:1 / .5; object-position:54% 18% }
}
@media (max-width:374px){
  .hero h1{ font-size:2.45rem }
  .hero__cta .btn{ width:100% }
}

/* Десктоп: текст слева, персонаж заходит в межколонник */
@media (min-width:1024px){
  .hero__grid{
    position:relative;
    min-height:min(37rem, calc(100svh - 5rem));
    display:grid; align-content:center;
    grid-template-columns:minmax(0,45fr) minmax(0,55fr);
    padding-block:2rem;
  }
  .hero__text{ grid-column:1; max-width:32rem }   /* ≈545px, рамка ТЗ 500–560 */
  .hero__art{
    position:absolute; z-index:1;
    top:0; right:calc(var(--pad) * -1); bottom:0;   /* ровно по высоте героя */
    width:58%;
  }
  .hero__pic{ position:absolute; inset:0 }
  .hero__pic img{
    width:100%; height:100%; max-width:none;
    object-fit:cover; object-position:60% bottom;
  }
}

/* ─── 6. ШАПКА РАЗДЕЛА (внутренние страницы) ────────────── */
.top{ background-color:var(--cream); padding-block:1.25rem 2rem }
@media (min-width:900px){ .top{ padding-block:1.5rem 2rem } }
.top__art{ display:grid; place-items:center }
.top__art img{ width:100%; height:auto; max-width:26rem; object-fit:contain }

.crumbs{ font-size:.85rem; color:var(--muted) }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0 }
.crumbs a{ text-decoration:none }
.crumbs a:hover{ color:var(--honey-dark) }
.crumbs li::after{ content:'/'; margin-left:.4rem; color:var(--line) }
.crumbs li:last-child::after{ content:none }

.pill + h1{ margin-top:1rem }
.top h1{
  font-size:clamp(2.1rem,6vw,3.4rem); line-height:1.02; letter-spacing:-.015em;
  margin-top:1.25rem; max-width:24ch;
}
.top h1 em{ font-style:normal; color:var(--honey) }
.top__lead{ font-weight:700; font-size:clamp(1rem,2.2vw,1.15rem); margin-top:1rem; max-width:34rem }
.top__sub{ color:var(--muted); margin-top:.45rem; max-width:34rem }
.top__cta{ display:flex; flex-wrap:wrap; gap:.6rem .9rem; margin-top:1.75rem }
.top__cta .btn--main{ font-size:1.05rem; padding:.85rem 1.9rem }
@media (max-width:374px){ .top__cta .btn{ width:100% } }

/* ─── 7. БЛОКИ И ЗАГОЛОВКИ ──────────────────────────────── */
.section{ padding-block:3.5rem }
.section--tight{ padding-top:0 }
.hero + .section, .top + .section{ padding-top:2.5rem }

.section__head{ text-align:center; max-width:38rem; margin:0 auto 2.25rem }
.section__head--left{ text-align:left; max-width:40rem; margin:0 0 1.75rem }
.section__head h2{ font-size:clamp(1.6rem,4.5vw,2.35rem) }
.section__head p{ color:var(--muted); margin-top:.6rem }

.panel{ background-color:var(--honey-soft); border-radius:var(--radius-lg); padding:2.5rem 1.25rem }
@media (min-width:768px){ .panel{ padding:2.75rem 2rem } }

/* ─── 8. КАРТОЧКИ РАЗДЕЛОВ И КУРСОВ ─────────────────────── */
.cards{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gap); grid-template-columns:1fr }
@media (min-width:600px){  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1024px){
  .cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .cards--4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}

.card{
  display:flex; flex-direction:column; padding:1.25rem;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius);
}
.card__art{
  height:6.5rem; margin-bottom:1.1rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--honey-soft); border-radius:var(--radius-sm);
}
.card__art img{ max-height:100%; width:auto }
.card__meta{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.75rem }
.card h3{ font-size:1.2rem }
.card p{ color:var(--muted); margin-top:.5rem; flex:1 1 auto }
.card .more{ margin-top:.75rem }

/* ─── 9. ПЛАШКИ СОСТОЯНИЯ ───────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem;
  font-size:.78rem; font-weight:700; line-height:1.3;
  border:1.5px solid var(--line); border-radius:var(--radius-pill);
  background:var(--paper); color:var(--muted);
}
.badge--free{ background:var(--honey-soft); border-color:var(--honey); color:var(--brown) }
.badge svg{ width:.9rem; height:.9rem }

/* ─── 10. СЕТКА УРОКОВ ──────────────────────────────────── */
.lessons{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fill, minmax(8.5rem,1fr));
}
.lesson > *{
  display:flex; flex-direction:column; gap:.35rem;
  min-height:7rem; padding:.8rem;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  text-decoration:none;
}
.lesson a:hover{ border-color:var(--honey); background:var(--honey-soft) }
.lesson__n{ font-size:.78rem; color:var(--muted); font-weight:700 }
.lesson__letters{
  font-family:var(--font-display); font-weight:600; font-size:1.35rem; line-height:1.1;
  margin-top:auto;
}
.lesson__state{ display:flex; align-items:center; gap:.3rem; font-size:.78rem; color:var(--muted) }
.lesson__state svg{ width:.9rem; height:.9rem; flex:0 0 auto }
.lesson.is-locked > *{ background:var(--cream); color:var(--muted); cursor:default }
.lesson.is-locked .lesson__letters{ color:var(--brown); opacity:.55 }

.note{
  margin-top:1.5rem; padding:1rem 1.25rem;
  background:var(--honey-soft); border-radius:var(--radius);
  font-size:.95rem;
}
.note b{ font-family:var(--font-display); font-weight:600 }

/* ─── 11. ПРЕИМУЩЕСТВА И ШАГИ ───────────────────────────── */
.why{
  list-style:none; margin:2rem 0 0; padding:0;
  display:grid; gap:1.5rem; grid-template-columns:1fr; text-align:center;
}
.why li{ padding:0 1rem }
.why svg{ color:var(--brown) }
.why h3{ font-size:1.05rem; margin-top:.75rem }
.why p{ color:var(--muted); font-size:.95rem; margin-top:.35rem }
@media (min-width:600px){
  .why{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .why li + li:nth-child(even){ border-left:1.5px solid var(--line) }
}
@media (min-width:1024px){
  .why{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 }
  .why li + li{ border-left:1.5px solid var(--line) }
}

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gap); grid-template-columns:1fr }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.step__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; margin-bottom:.75rem;
  font-family:var(--font-display); font-weight:700;
  background:var(--honey-soft); border-radius:var(--radius-pill);
}
.step h3{ font-size:1.05rem }
.step p{ color:var(--muted); margin-top:.35rem }

/* ─── 12. ПРИЗЫВ ────────────────────────────────────────── */
.cta{
  display:grid; gap:1.5rem; align-items:center; grid-template-columns:1fr;
  background-color:var(--cream);
  border:1.5px solid var(--line); border-radius:var(--radius-lg);
  padding:2.25rem 1.25rem; text-align:center;
}
.cta__mid h2{ font-size:clamp(1.45rem,4vw,2.1rem) }
.cta__mid p{ color:var(--muted); margin-top:.6rem }
.cta__mid .btn{ margin-top:1.5rem }
.cta__bee img{ width:100%; height:auto; max-width:9rem; margin-inline:auto }
.cta__note{
  font-family:var(--font-hand); font-size:1.45rem; line-height:1.35;
  background:var(--honey-soft); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:1.1rem 1.25rem; max-width:15rem; margin-inline:auto;
  transform:rotate(3deg);
}
.cta__note span{ display:block; color:var(--heart); font-size:1.1rem; margin-top:.35rem }
@media (min-width:900px){
  .cta{ grid-template-columns:minmax(0,.7fr) minmax(0,2fr) minmax(0,.9fr); padding:2.5rem 2rem }
  .cta--duo{ grid-template-columns:minmax(0,.6fr) minmax(0,2fr); text-align:left }
}
@media (max-width:899px){
  .cta__bee{ order:-1 }
}

/* ─── 13. ПОДВАЛ ────────────────────────────────────────── */
.foot{
  border-top:1.5px solid var(--line); background:var(--paper);
  padding-block:2.25rem; margin-top:3.5rem;
}
.foot__grid{ display:grid; gap:1.75rem; grid-template-columns:1fr; align-items:start }
.foot__tag{ color:var(--muted); font-size:.9rem; margin-top:.6rem }
.foot nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem }
.foot nav a{ text-decoration:none; font-size:.95rem; min-height:var(--tap); display:inline-flex; align-items:center }
.foot nav a:hover{ color:var(--honey-dark) }
.social{ display:flex; align-items:center; gap:.35rem }
.social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap); border-radius:var(--radius-pill);
}
.social a:hover{ background:var(--honey-soft) }
.foot__end{
  display:flex; flex-wrap:wrap; gap:.75rem 1rem; justify-content:space-between; align-items:baseline;
  margin-top:1.75rem; padding-top:1.25rem; border-top:1.5px solid var(--line);
  color:var(--muted); font-size:.85rem;
}
.foot__hand{ font-family:var(--font-hand); font-size:1.25rem; color:var(--brown) }
.foot__hand svg{ color:var(--heart); vertical-align:-.15em; margin-left:.3rem }
@media (min-width:768px){
  .foot__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) }
  .foot__meta{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:flex-end }
}
@media (min-width:1024px){ .foot__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto } }

/* ─── 14. ДОСТУПНОСТЬ ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ─── 15. МОДУЛЬ РАЗДЕЛА: строка на пунктирной линии ─────
   Заливка густеет от первого модуля к последнему: --tint. */
.modules{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem }

.mrow{ position:relative; display:grid; grid-template-columns:1fr; gap:.6rem }
.mrow__n{
  --mod-rgb:var(--mod-2-rgb);
  display:grid; place-items:center;
  width:2.5rem; height:2.5rem; border-radius:var(--radius-pill);
  background:rgb(var(--mod-rgb)); color:var(--brown);
  font-family:var(--font-display); font-weight:700; font-size:.9rem; line-height:1;
}
.mrow--1 .mrow__n{ --mod-rgb:var(--mod-1-rgb) }
.mrow--2 .mrow__n{ --mod-rgb:var(--mod-2-rgb) }
.mrow--3 .mrow__n{ --mod-rgb:var(--mod-3-rgb) }
.mrow--4 .mrow__n{ --mod-rgb:var(--mod-4-rgb) }
.mrow--5 .mrow__n{ --mod-rgb:var(--mod-5-rgb) }

.mrow + .mrow::before{                 /* пунктирный маршрут между номерами */
  content:''; position:absolute; left:1.25rem; top:-1.1rem; height:1.1rem;
  border-left:2px dotted var(--honey);
}
@media (min-width:900px){
  .mrow{ grid-template-columns:2.5rem minmax(0,1fr); gap:1.25rem; align-items:start }
}

.module{
  --tint:.19; --mod-rgb:var(--mod-2-rgb);
  display:grid; gap:1rem;
  padding:1.1rem;
  background:rgb(var(--mod-rgb) / var(--tint));
  border-radius:var(--radius-lg);
}
.module--1{ --mod-rgb:var(--mod-1-rgb); --tint:.17 }
.module--2{ --mod-rgb:var(--mod-2-rgb); --tint:.19 }
.module--3{ --mod-rgb:var(--mod-3-rgb); --tint:.21 }
.module--4{ --mod-rgb:var(--mod-4-rgb); --tint:.23 }
.module--5{ --mod-rgb:var(--mod-5-rgb); --tint:.25 }

.module__main{ display:grid; gap:.9rem; grid-template-columns:1fr }
.module__art{
  width:5rem; height:5rem; flex:0 0 auto;
  display:grid; place-items:center;
}
.module__art:not(:empty){ background:rgb(255 255 255 / .8); border-radius:var(--radius) }
.module__art img{ max-width:100%; max-height:100% }
.module__title h2{ font-size:1.3rem; line-height:1.2 }
.module__gloss{ color:var(--honey-dark); font-weight:700; font-size:.95rem; margin-top:.15rem }
.module__title p{ color:var(--muted); font-size:.88rem; margin-top:.4rem }
@media (min-width:900px){
  .module__title p{                       /* описание не длиннее двух строк — панель держит высоту */
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
}
.module__meta{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem }

.module__all{ display:flex; justify-content:flex-start; margin-bottom:.6rem }
.module__all .more{ min-height:auto; font-size:.9rem }

.mlessons{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.6rem; grid-template-columns:repeat(2,minmax(0,1fr));
}
.mlessons .mlesson:nth-child(3){ grid-column:1 / -1 }   /* третья — во всю ширину */
@media (max-width:400px){ .mlessons{ grid-template-columns:1fr } .mlessons .mlesson:nth-child(3){ grid-column:auto } }
@media (min-width:560px){
  .mlessons{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .mlessons .mlesson:nth-child(3){ grid-column:auto }
}
.mlesson > a{
  display:flex; flex-direction:column; gap:.3rem; height:100%;
  min-height:5rem; padding:.7rem .8rem;
  background:var(--paper);
  border:1.5px solid rgb(var(--mod-rgb) / .55);
  border-radius:.7rem;
  box-shadow:0 .12rem .35rem rgb(61 28 2 / .07);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mlesson > a:hover{
  border-color:rgb(var(--mod-rgb));
  transform:translateY(-2px);
  box-shadow:0 .4rem 1rem rgb(var(--mod-rgb) / .3);
}
.mlesson > a:hover .mlesson__go{ transform:translateX(.15rem) }
.mlesson__n{ font-size:.72rem; color:var(--honey-dark); font-weight:700; letter-spacing:.02em; text-transform:uppercase }
.mlesson__name{ font-weight:700; font-size:1rem; line-height:1.25; color:var(--brown) }
.mlesson__go{
  display:grid; place-items:center; align-self:flex-end; margin-top:auto;
  transition:transform .15s ease;
  width:1.7rem; height:1.7rem; border-radius:var(--radius-pill);
  background:rgb(var(--mod-rgb)); color:var(--brown);
}
.mlesson__go svg{ width:.85rem; height:.85rem }

@media (min-width:900px){
  .module{
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
    gap:1.5rem; padding:1rem 1.25rem; align-items:center;
    min-height:8.5rem;                    /* ≈145px, рамка ТЗ 120–145 */
  }
  .module__main{ grid-template-columns:auto minmax(0,1fr); align-items:start; gap:1.1rem }
  .module__all{ justify-content:flex-end }
}

/* иллюстрация в шапке раздела */
.top__grid{ display:grid; gap:1.5rem; align-items:center; grid-template-columns:1fr }
@media (min-width:900px){ .top__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) } }
.top__art img{ width:100%; height:auto; margin-inline:auto; max-width:26rem }
.pill{
  display:inline-flex; align-items:center; padding:.2rem .8rem;
  font-weight:700; font-size:.85rem;
  color:var(--honey-dark); background:var(--paper);
  border:1.5px solid var(--honey); border-radius:var(--radius-pill);
}

/* ─── 16. СТРАНИЦА МОДУЛЯ: все уроки сеткой, без картинок ─ */
.lgrid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.9rem;
  grid-template-columns:repeat(2,minmax(0,1fr));   /* смартфон: два на два */
}
@media (min-width:768px){  .lgrid{ gap:1.1rem; grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1024px){ .lgrid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

.lcard{ display:flex }
.lcard > a, .lcard > span{
  display:flex; flex-direction:column; gap:.55rem;
  width:100%; padding:1rem;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius);
  text-decoration:none;
}
.lcard > a:hover{ border-color:var(--honey); background:var(--honey-soft) }

/* шестиугольник с номером — тот же мотив, что в сотах */
.lcard__n{
  display:grid; place-items:center;
  width:2.6rem; height:2.95rem; flex:0 0 auto;
  background:var(--honey); color:var(--brown);
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.lcard h3{ font-size:1.05rem; line-height:1.25 }
.lcard p{ color:var(--muted); font-size:.88rem; flex:1 1 auto }
.lcard .more{ font-size:.9rem; min-height:auto; margin-top:.35rem }
@media (max-width:400px){
  .lcard > a, .lcard > span{ padding:.8rem }
  .lcard h3{ font-size:.98rem }
  .lcard p{ font-size:.82rem }
}


/* ─── 17. КРУПНЫЙ НАБОР НА УЗКИХ ЭКРАНАХ ────────────────────
   Порог 1023px, а не 767px: телефоны с крупным экраном
   сообщают ширину 800–1000 CSS-пикселей и иначе получают
   настольные размеры. */
@media (max-width:1023px){
  :root{ font-size:17.5px }

  .hero__lead{ font-size:1.18rem }
  .hero__sub{ font-size:1.05rem }
  .trust{ font-size:.95rem; gap:.6rem 1.4rem }
  .trust svg{ width:1.15rem; height:1.15rem }

  .section__head p{ font-size:1.05rem }
  .card p, .module__title p{ font-size:1.02rem }
  .card h3{ font-size:1.3rem }
  .module__head h2{ font-size:1.45rem }
  .module__gloss{ font-size:1.05rem }

  .mlesson__n{ font-size:.85rem }
  .mlesson__name{ font-size:1.1rem }
  .mlesson > a{ min-height:5.5rem; padding:.85rem .9rem }
  .mlesson__go{ width:2rem; height:2rem }
  .mlesson__go svg{ width:1rem; height:1rem }

  .lcard h3{ font-size:1.15rem }
  .lcard p{ font-size:.98rem }
  .lcard .more{ font-size:1rem }

  .badge{ font-size:.85rem; padding:.25rem .7rem }
  .crumbs{ font-size:.95rem }
  .step p, .why p{ font-size:1.02rem }
  .foot nav a{ font-size:1.05rem }
}

/* Телефон (замерено на 396×880): базовый кегль ещё крупнее,
   плитка уроков в один столбик — на 396px две колонки дают 170px,
   и название урока ломается на три строки. */
@media (max-width:767px){
  :root{ font-size:18px }
  .lgrid{ grid-template-columns:1fr }
  .lcard > a, .lcard > span{ min-height:0; padding:1rem }
  .mlessons{ grid-template-columns:1fr }
  .mlessons .mlesson:nth-child(3){ grid-column:auto }
  .hero h1{ font-size:clamp(2.7rem,11vw,3.4rem) }
}

/* ─── 18. ЭТАПЫ КУРСА: две рамки на уровень ─────────────────
   Раздел «Иностранцам»: на каждом этапе два курса — подросткам
   и взрослым. Оттенок этапа берётся из той же тёплой дуги. */
.stages{ list-style:none; margin:0; padding:0; display:grid; gap:1.25rem }

.stage{
  --tint:.17; --mod-rgb:var(--mod-1-rgb);
  padding:1.1rem;
  background:rgb(var(--mod-rgb) / var(--tint));
  border-radius:var(--radius-lg);
}
.stage--1{ --mod-rgb:var(--mod-1-rgb); --tint:.17 }
.stage--2{ --mod-rgb:var(--mod-2-rgb); --tint:.19 }
.stage--3{ --mod-rgb:var(--mod-3-rgb); --tint:.21 }
.stage--4{ --mod-rgb:var(--mod-4-rgb); --tint:.23 }

.stage__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .75rem; margin-bottom:.9rem }
.stage__head h2{ font-size:1.3rem }
.stage__head p{ color:var(--muted); font-size:.95rem }

.stage__grid{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; grid-template-columns:1fr }
@media (min-width:700px){ .stage__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* рамка курса */
.course > a{
  display:flex; flex-direction:column; gap:.4rem; height:100%;
  padding:1rem 1.1rem;
  background:var(--paper);
  border:1.5px solid rgb(var(--mod-rgb) / .55);
  border-radius:var(--radius);
  box-shadow:0 .12rem .35rem rgb(61 28 2 / .07);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.course > a:hover{
  border-color:rgb(var(--mod-rgb));
  transform:translateY(-2px);
  box-shadow:0 .4rem 1rem rgb(var(--mod-rgb) / .3);
}
.course__who{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--honey-dark);
}
.course__who svg{ width:1rem; height:1rem }
.course h3{ font-size:1.15rem; line-height:1.25 }
.course p{ color:var(--muted); font-size:.92rem; flex:1 1 auto }
.course__go{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.5rem;
  font-weight:700; color:var(--honey-dark); font-size:.95rem;
}
.course__go svg{ width:1rem; height:1rem; transition:transform .15s ease }
.course > a:hover .course__go svg{ transform:translateX(.15rem) }

@media (max-width:1023px){
  .stage__head h2{ font-size:1.4rem }
  .course h3{ font-size:1.25rem }
  .course p{ font-size:1.02rem }
}