/* ══════════════════════════════════════════════════════════════
   СТРАНИЦА ВЕБИНАРА — общий стиль для страниц внутри /webinars
   Палитра и язык взяты из концепта 06 «Чертёж»: синька, красный
   карандаш правки, миллиметровка, размерные линии, штриховка.
   Один файл на все страницы вебинаров: правка приходит разом.
   ══════════════════════════════════════════════════════════════ */
:root{
  --blue:#0E2A47;      /* синька                        */
  --blue-2:#163A5E;    /* поле глубже                   */
  --paper:#E8EEF2;     /* линия и текст, 12.45:1        */
  --dim:#7E97AC;       /* размерная линия, 4.80:1       */
  --red:#FF5A36;       /* карандаш правки, 4.70:1       */
  --dim-2:#9BBAD4;     /* производный: --dim на заливке не проходит */
  --pan:rgba(22,58,94,.20);   /* заливка панели: над --blue даёт #102D4C.
                                 Больше .20 брать нельзя — красный на панели
                                 проседает ниже 4.5:1.                     */
  --line:rgba(126,151,172,.3);
  --w:min(1320px,100% - 40px);
  --s1:8px; --s2:16px; --s3:28px; --s4:44px; --s5:72px; --s6:112px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--blue);color:var(--paper);
  font:400 17px/1.6 'Golos Text',system-ui,sans-serif;
  overflow-wrap:break-word;-webkit-font-smoothing:antialiased;
}
/* миллиметровка на фоне: язык чертежа, не декор */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(126,151,172,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,151,172,.07) 1px,transparent 1px),
    linear-gradient(rgba(126,151,172,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,151,172,.13) 1px,transparent 1px);
  background-size:20px 20px,20px 20px,100px 100px,100px 100px;
}
body>*{position:relative;z-index:1}

h1,h2,h3{font-family:'Unbounded',system-ui,sans-serif;font-weight:400;line-height:1.06;
  letter-spacing:-.02em;color:var(--paper)}
h1{font-size:clamp(2rem,5vw,3.8rem);font-weight:300}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.15}
p{max-width:64ch}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.55;opacity:.88}
/* отступы между абзацами лида и после заголовков */
h1+.lead,h2+.lead,h1+.sub,.sub+.lead{margin-top:var(--s3)}
.lead+.lead{margin-top:var(--s2)}
.prog+.pan,.lead+.prog{margin-top:var(--s4)}
/* абзац-вывод после блока карточек, цифр или шагов */
.figs+.lead,.steps+.lead,.crds+.lead,.quote+.lead,.prog+.lead,.stats+.lead{margin-top:var(--s4)}
.mono{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--dim)}
.wrap{width:var(--w);margin-inline:auto}
section{padding-block:var(--s6);scroll-margin-top:var(--hd-h)}
/* Первый экран. Отступ сверху меньше, чем у остальных разделов: там он
   отделяет соседние блоки друг от друга, а здесь над ним только шапка,
   которая и так держит дистанцию. На невысоком окне лишняя сотня пикселей
   утаскивала кнопку за нижний край. */
#hero{padding-top:var(--s4)}
/* высота липкой шапки: якоря не должны уезжать под неё */
:root{--hd-h:72px}
section+section{border-top:1px solid rgba(126,151,172,.25)}

/* размерная линия — структурный маркер раздела */
.dimension{display:flex;align-items:center;gap:14px;margin-bottom:var(--s3)}
.dimension .tick{width:1px;height:16px;background:var(--dim);flex:0 0 1px}
.dimension .bar{flex:1;height:1px;background:var(--dim);opacity:.55}
.dimension .room{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--dim);white-space:nowrap}

/* ── шапка ── */
header{position:sticky;top:0;z-index:60;background:rgba(14,42,71,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(126,151,172,.25);transition:box-shadow .4s ease,border-color .4s ease}
header.hd-elev{box-shadow:0 12px 32px -20px rgba(0,0,0,.6);border-bottom-color:rgba(126,151,172,.4)}
.hd{width:var(--w);margin-inline:auto;min-height:64px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand{font-family:'Unbounded',sans-serif;font-size:17px;letter-spacing:-.02em;
  color:var(--paper);text-decoration:none}
.hd-nav{display:flex;gap:22px;align-items:center}
.hd-nav a{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--dim);
  text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:color .25s}
.hd-nav a:hover{color:var(--paper)}
.hd-nav a.accent{color:var(--red);border-bottom:1px solid currentColor;padding-bottom:2px}

/* ── герой ── */
.sub{font-family:'Unbounded',sans-serif;font-weight:300;
  font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.3;color:var(--dim-2);margin-top:var(--s2)}

/* ── программа: штриховые маркеры, как в блоке «с чем приходят» ── */
.prog{list-style:none;display:grid;gap:2px;margin-top:var(--s4)}
.prog li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:16px 0;border-bottom:1px solid rgba(126,151,172,.2)}
.prog li:first-child{border-top:1px solid rgba(126,151,172,.2)}
.prog .tick{width:22px;height:22px;margin-top:3px;flex:0 0 22px;
  background-image:repeating-linear-gradient(45deg,var(--red) 0 1.5px,transparent 1.5px 6px);
  border:1px solid rgba(255,90,54,.5)}
.prog p{max-width:none;font-size:15.5px}

/* ── панели «в вебинар входит» / «результат» ── */
.pans{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s4)}
.pans > .pan:only-child{grid-column:1 / -1}
.pan{padding:var(--s3);background:var(--pan);border:1px solid var(--line)}
.pan-lbl{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--dim-2);
  margin-bottom:12px}
.pan p{font-size:15px;opacity:.82}

/* ── покупка ── */
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);
  margin-top:var(--s4);padding:var(--s4);background:var(--pan);border:1px solid var(--line)}
.price{font-family:'Unbounded',sans-serif;font-weight:300;font-size:2.4rem;line-height:1;
  color:var(--paper)}
/* Цена по договорённости: суммы нет, вместо числа идёт текст, поэтому и
   кегль обычный — в 2.4rem фраза выглядела бы криком. */
.price--text{font-size:1.15rem;line-height:1.4;max-width:34ch}
.price small{display:block;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  color:var(--dim-2);margin-top:8px;font-weight:400}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 30px;font-family:'IBM Plex Mono',monospace;font-size:13px;
  text-decoration:none;border:1px solid var(--red);background:var(--red);color:#12100F;
  cursor:pointer;transition:background .3s,color .3s;transition:background .3s,color .3s,transform .15s ease}
.btn:hover{background:transparent;color:var(--red)}
.btn:active{transform:scale(.97)}

/* ── карточки курсов на хабе /courses ── */
.courses{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3);margin-top:var(--s5)}
/* каталог: три в ряд на большом экране, карточки короче чем на хабе курсов */
.catalog .crs{grid-column:auto}
/* ── телефон: шапка в одну строку, меню прокручивается вбок ── */
@media(max-width:700px){
  :root{--hd-h:56px}
  .hd{min-height:56px;gap:12px;flex-wrap:nowrap}
  .brand span{display:none}
  .brand-logo{height:34px}
  .hd-nav{gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-left:auto}
  .hd-nav::-webkit-scrollbar{display:none}
  .hd-nav a{font-size:12px;white-space:nowrap;min-height:44px}
}
.crs{grid-column:span 3;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  position:relative;padding:var(--s3);background:var(--pan);border:1px solid var(--line);
  transition:border-color .3s,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,opacity .5s ease}
.crs:hover,.crs:active{border-color:var(--red);transform:translateY(-4px);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.55),0 0 0 1px rgba(255,90,54,.15)}
.crs-fmt{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--dim-2)}
/* цену не должно быть видно только если приглядеться: формат остаётся
   мелкой подписью, цена — крупнее и на паперном, как везде на сайте */
.crs-price{font-size:14.5px;font-weight:500;color:var(--paper)}
.crs h3{margin-top:10px}
.crs-desc{font-size:15px;opacity:.82;margin-top:12px}
.crs-cta{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--red);
  border-bottom:1px solid currentColor;padding-bottom:2px;width:fit-content;margin-top:auto}
/* ряд действий в карточке каталога */
.crs-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:auto;padding-top:var(--s3)}
/* клик по всей карточке ведёт на страницу продукта: «Подробнее» растянуто
   на весь .crs через ::after. Кнопка «Купить» — над этим слоем, кликается
   отдельно и по-прежнему уходит на оплату, а не на страницу. */
.crs-cta::after{content:'';position:absolute;inset:0}
.crs-act .btn{position:relative;z-index:1}
/* вторичная кнопка: контур вместо заливки, чтобы был порядок важности */
.btn--ghost{background:transparent;border-color:var(--paper);color:var(--paper)}
/* Продукт, у которого ещё нет платёжной ссылки: кнопка ведёт в отдел заботы.
   Приглушена, чтобы не спорить с обычным «Купить» в том же ряду. */
.btn--soon{background:transparent;border-color:var(--red);color:var(--red)}
.btn--soon:hover{background:var(--red);color:#12100F}
.btn--ghost:hover{background:var(--paper);color:var(--blue)}
.btn--sm{min-height:40px;padding:0 20px;font-size:12.5px}
.crs-hatch{height:88px;margin-top:var(--s3);border:1px solid var(--line);opacity:.55;
  background-image:repeating-linear-gradient(45deg,var(--red) 0 1.5px,transparent 1.5px 7px)}
.hd-back{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--red);
  text-decoration:none;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:2px;
  min-height:44px;display:inline-flex;align-items:center}

/* ── план квартиры: комнаты и есть навигация.
   Стены прочерчиваются один раз при загрузке — это вступление, а не украшение. */
.plan{width:100%;height:auto;overflow:visible}
.plan .shell{fill:none;stroke:var(--paper);stroke-width:7;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.plan.drawn .shell{transition:stroke-dashoffset 2.2s cubic-bezier(.2,.7,.2,1);stroke-dashoffset:0}
.plan .rm rect{fill:rgba(22,58,94,.55);stroke:var(--paper);stroke-width:2.5;
  transition:fill .3s}
.plan .rm text{font-family:'IBM Plex Mono',monospace;font-size:15px;fill:#9BBAD4;/* светлее, чем --dim: на заливке комнаты 4.5:1 не набиралось */
  letter-spacing:.08em;transition:fill .3s}
.plan .rm .rm-go{font-size:11px;fill:transparent;letter-spacing:.02em;transition:fill .3s}
.plan .rm:hover rect,.plan .rm:focus-visible rect{fill:var(--blue-3)}
.plan .rm:hover text,.plan .rm:focus-visible text{fill:var(--paper)}
.plan .rm:hover .rm-go,.plan .rm:focus-visible .rm-go{fill:var(--red)}
.plan .gap{stroke:var(--blue);stroke-width:5}
/* входная дверь режет наружную стену, а она толще внутренних */
.plan .gap--main{stroke-width:9}
.plan .swing{fill:none;stroke:var(--dim);stroke-width:1.2;opacity:.65}
.plan .leaf{stroke:var(--paper);stroke-width:2.5}
.plan a{cursor:pointer}

/* герой с планом: текст слева, план справа */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);align-items:start}

/* ── фото в первом экране: под плотной синей вуалью.
   Плотность 0.92 подобрана по худшему случаю — белому участку фото:
   при ней --paper даёт 9.8:1, а --dim и --red не проходят,
   поэтому размерная линия в первом экране идёт цветом --dim-2. */
.hero-bg{position:relative;overflow:hidden}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--hero-img);background-size:cover;background-position:center}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:0;background:rgba(14,42,71,.92)}
.hero-bg>*{position:relative;z-index:1}
.hero-bg .dimension .room{color:var(--dim-2)}
.hero-bg .dimension .tick,.hero-bg .dimension .bar{background:var(--dim-2)}

/* логотип и значки оплаты */
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px}
.brand-logo{height:42px;width:auto;display:block}
.ft-logo{height:56px;width:auto;display:block;margin-bottom:var(--s2)}
.ft-pay{height:40px;width:auto;display:block;margin-top:var(--s3);opacity:.85}

/* три двери с дугами открывания */
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s4)}
.dr{display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:var(--s3);
  border:1px solid var(--line);background:var(--pan);
  transition:border-color .3s,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,opacity .5s ease}
.dr:hover,.dr:active{border-color:var(--red);transform:translateY(-4px);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.55),0 0 0 1px rgba(255,90,54,.15)}
.dr-sym{width:64px;height:64px;margin-bottom:var(--s3)}
.dr-sym line{stroke:var(--paper);stroke-width:3}
.dr-sym .dr-arc{fill:none;stroke:var(--dim-2);stroke-width:1.2}
.dr-sym .dr-leaf{stroke:var(--red);stroke-width:3}
.dr-when{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--dim-2);margin-bottom:10px}
.dr h3{margin-bottom:10px}
.dr-desc{font-size:15px;opacity:.82;flex:1}
.dr-cta{margin-top:var(--s3);font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--red)}

/* цифры о практике */
.stats{display:flex;gap:var(--s4);margin-top:var(--s4);flex-wrap:wrap}
.st b{display:block;font-family:'Unbounded',sans-serif;font-weight:300;font-size:2.4rem;line-height:1;color:var(--red)}
.st span{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--dim-2);margin-top:6px;display:block}

/* ── видеоблок: отзывы и промо ── */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4)}
.vid{position:relative;padding-top:56.25%;border:1px solid var(--line);background:var(--pan)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── карточки-плитки на лендинге ── */
.crds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4)}
.crd{padding:var(--s3);background:var(--pan);border:1px solid var(--line);
  transition:border-color .3s,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,opacity .5s ease}
.crd:hover{border-color:var(--red);transform:translateY(-4px);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.55),0 0 0 1px rgba(255,90,54,.15)}
/* фото модуля: приглушено, чтобы не спорить с синькой */
.crd-img{display:block;width:100%;height:150px;object-fit:cover;margin:calc(var(--s3)*-1) calc(var(--s3)*-1) var(--s3);
  filter:saturate(.5) contrast(1.05) brightness(.85);transition:filter .5s}
.crd:hover .crd-img{filter:none}
.crd-lbl{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--dim-2);margin-bottom:10px}
.crd h3{margin-bottom:10px}
/* списки внутри карточки модуля */
.crd-list{list-style:none;margin-top:10px;display:grid;gap:6px}
.crd-list li{font-size:14.5px;opacity:.82;padding-left:16px;position:relative}
.crd-list li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--red)}
.crd-txt{font-size:15px;opacity:.82}
/* цена и кнопка на отдельной карточке-товаре внутри посадочной */
.crd-buy{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:14px;
  padding-top:14px;border-top:1px solid rgba(126,151,172,.25)}
.crd-price{font-family:'IBM Plex Mono',monospace;font-size:14.5px;font-weight:500;color:var(--paper)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}
/* раскрывающиеся вопросы */
.qas{margin-top:var(--s4);border-top:1px solid rgba(126,151,172,.25)}
.qa{border-bottom:1px solid rgba(126,151,172,.25)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;
  align-items:flex-start;padding:24px 0;min-height:48px;font-family:'Unbounded',sans-serif;
  font-weight:300;font-size:clamp(1.05rem,1.7vw,1.32rem);line-height:1.25;letter-spacing:-.015em}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:0 0 16px;width:16px;height:16px;position:relative;margin-top:6px}
.qa summary i::before,.qa summary i::after{content:'';position:absolute;background:var(--red);
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.qa summary i::before{left:0;right:0;top:7.5px;height:1.5px}
.qa summary i::after{top:0;bottom:0;left:7.5px;width:1.5px}
.qa[open] summary i::after{transform:scaleY(0)}
.qa-a{padding-bottom:28px}
.qa-a p{max-width:72ch;opacity:.85;font-size:15.5px}

/* ── страница успешной оплаты: один экран, без допродаж ── */
/* высоту не фиксируем: страница и так короткая, а футер должен остаться на виду */
.done{padding-block:var(--s6)}
.done-in{width:var(--w);margin-inline:auto}
.done h1{font-size:clamp(1.9rem,4vw,3rem)}
.done .bought{font-family:'Unbounded',sans-serif;font-weight:300;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.3;margin-top:var(--s3)}
.done p+p{margin-top:var(--s2)}
.done .note{margin-top:var(--s3);font-size:15.5px;opacity:.82}
/* почта внутри текста: без этого браузер красит ссылку своим синим,
   а он на синьке нечитаем */
.done .note a{color:var(--red);text-decoration:none;border-bottom:1px solid currentColor}
/* кнопка на материалы — главное действие страницы, ссылка домой рядом второстепенной */
.done-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.done .back{display:inline-flex;align-items:center;min-height:48px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--red);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
/* засечка-галка: та же графика, что у размерных линий */
.done .stamp{width:56px;height:56px;margin-bottom:var(--s3)}
.done .stamp rect{fill:none;stroke:var(--dim);stroke-width:1.5;opacity:.7}
.done .stamp line{stroke:var(--red);stroke-width:3;stroke-linecap:square}
.done .stamp polyline{fill:none;stroke:var(--red);stroke-width:3;
  stroke-linecap:square;stroke-linejoin:miter}

/* ── футер: состав взят со страницы /library ── */
footer{padding-block:var(--s5);border-top:1px solid rgba(126,151,172,.25)}
.ft{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.ft a{color:var(--paper);opacity:.8;text-decoration:none;border-bottom:1px solid rgba(126,151,172,.4);
  width:fit-content;font-size:15px;min-height:44px;display:inline-flex;align-items:center}
.ft a:hover{opacity:1;border-color:var(--red)}
.ft nav,.ft-contacts{display:grid;gap:4px;align-content:start;justify-items:start}
.ft nav{margin-top:var(--s3)}
.ft .mono{line-height:1.9}
.ft-h{font-family:'Unbounded',sans-serif;font-weight:300;font-size:1.1rem;margin-bottom:var(--s2)}
.ft-req{margin-top:var(--s2)}
.ft-bar{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.ft-bar a{color:var(--red);text-decoration:none;border-bottom:1px solid currentColor;
  display:inline-flex;align-items:center;min-height:44px}

/* надзаголовок первого экрана: не в размерной линии — длинная фраза
   съедала её до огрызка и линия переставала читаться как чертёжная */
.kicker{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--dim-2);
  margin-bottom:var(--s2);letter-spacing:.02em}

/* ── пронумерованные пункты: сигналы дома и шаги обучения ── */
.steps{list-style:none;margin-top:var(--s4);display:grid;gap:var(--s3)}
.stp{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s3);align-items:start;
  padding-top:var(--s3);border-top:1px solid rgba(126,151,172,.25)}
.stp-n{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--red);padding-top:5px}
.stp h3{margin-bottom:8px}
.stp p{font-size:15px;opacity:.82;max-width:78ch}

/* ── крупные доли: 70 на 30 ── */
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin-top:var(--s4)}
.fig b{display:block;font-family:'Unbounded',sans-serif;font-weight:300;
  font-size:clamp(3rem,7vw,5rem);line-height:1;color:var(--red)}
.fig h3{margin-top:14px;margin-bottom:8px}
.fig p{font-size:15px;opacity:.82}

/* ── выделенная цитата ── */
.quote{margin-top:var(--s4);padding:var(--s3) var(--s4);background:var(--pan);
  border-left:2px solid var(--red)}
.quote p{font-family:'Unbounded',sans-serif;font-weight:300;
  font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.35;letter-spacing:-.015em;max-width:46ch}

/* ── появление ── */
.rise{opacity:0;transform:translateY(20px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}

/* ── адаптив ── */
@media(max-width:1000px){
  :root{--s5:56px;--s6:76px}
  .crds{grid-template-columns:1fr}
  .doors{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr;gap:var(--s4)}
  .vids{grid-template-columns:1fr}
  .courses{grid-template-columns:1fr}
  .crs{grid-column:auto}
  .pans{grid-template-columns:1fr}
  .ft{grid-template-columns:1fr}
}
@media(max-width:640px){
  :root{--s4:32px;--s5:44px;--s6:56px;--w:calc(100% - 32px)}
  .btn{width:100%}
  .buy{padding:var(--s3)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;
    scroll-behavior:auto !important}
  .rise{opacity:1 !important;transform:none !important}
  .crds>*,.doors>*,.courses.catalog>.crs,.stats>*,.steps>*{opacity:1 !important;transform:none !important}
  .plan{transform:none !important}
}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Цели нажатия: всё кликабельное не ниже 44px на любой ширине. */
.crs-cta,.crd-lbl a,.dr-cta,.back,.ft-bar a,.ft-contacts a,footer nav a,.hd-nav a,.brand,.btn--sm{
  min-height:44px;display:inline-flex;align-items:center}
.crs-act{gap:var(--s2) var(--s3)}

/* Каталог: 3 колонки на десктопе, 2 на планшете, 1 на телефоне.
   Стоит после общего блока адаптива — иначе .courses{1fr} перебивает по порядку. */
.catalog{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.catalog{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.catalog{grid-template-columns:1fr}}

/* Ссылка «к содержимому»: видна только при переходе с клавиатуры. */
/* fixed, а не absolute: absolute отсчитывает top от документа, и на
   прокрученной странице ссылка по фокусу оказывалась выше видимой области. */
.skip{position:fixed;left:-9999px;top:0;z-index:60;
  background:var(--red);color:#12100F;text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-size:13px;
  padding:0 20px;min-height:44px;display:inline-flex;align-items:center}
.skip:focus{left:12px;top:12px}

/* совсем узкие экраны: меню целиком без обрезки */
@media(max-width:400px){
  .hd{gap:8px}
  .brand-logo{height:30px}
  .hd-nav{gap:11px}
  .hd-nav a{font-size:11px}
}

/* Карточки на два и четыре столбца. Стоят после общего адаптива:
   .crds{1fr} в блоке 1000px иначе перебивает их по порядку. */
.crds--2{grid-template-columns:repeat(2,1fr)}
.crds--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.crds--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.crds--2,.crds--4{grid-template-columns:1fr}}
@media(max-width:640px){.figs{grid-template-columns:1fr;gap:var(--s3)}}

/* на узком экране номер не должен съедать четверть строки */
@media(max-width:520px){.stp{gap:8px 14px}}

/* Двери каталога: четыре в ряд на широком экране, две на планшете, одна на телефоне. */
@media(max-width:760px){.doors{grid-template-columns:1fr}}

/* Невысокое окно — ноутбук с открытой панелью или горизонтальный телефон:
   поджимаем первый экран, чтобы кнопка оставалась в кадре. */
@media(max-height:760px) and (min-width:1000px){
  #hero{padding-top:var(--s3);padding-bottom:var(--s4)}
  #hero h1{font-size:clamp(2rem,3.6vw,3.2rem)}
}

/* ── каскадное появление карточек: сначала родитель .rise ловит .in,
   дальше карточки внутри него всплывают по очереди, а не разом ── */
.crds>*,.doors>*,.courses.catalog>.crs,.stats>*,.steps>*{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.rise.in .crds>*,.rise.in .doors>*,.rise.in .courses.catalog>.crs,
.rise.in .stats>*,.rise.in .steps>*{opacity:1;transform:none}
.crds>*:nth-child(2),.doors>*:nth-child(2),.courses.catalog>.crs:nth-child(2),.stats>*:nth-child(2),.steps>*:nth-child(2){transition-delay:0.06s}
.crds>*:nth-child(3),.doors>*:nth-child(3),.courses.catalog>.crs:nth-child(3),.stats>*:nth-child(3),.steps>*:nth-child(3){transition-delay:0.12s}
.crds>*:nth-child(4),.doors>*:nth-child(4),.courses.catalog>.crs:nth-child(4),.stats>*:nth-child(4),.steps>*:nth-child(4){transition-delay:0.18s}
.crds>*:nth-child(5),.doors>*:nth-child(5),.courses.catalog>.crs:nth-child(5),.stats>*:nth-child(5),.steps>*:nth-child(5){transition-delay:0.24s}
.crds>*:nth-child(6),.doors>*:nth-child(6),.courses.catalog>.crs:nth-child(6),.stats>*:nth-child(6),.steps>*:nth-child(6){transition-delay:0.3s}
.crds>*:nth-child(7),.doors>*:nth-child(7),.courses.catalog>.crs:nth-child(7),.stats>*:nth-child(7),.steps>*:nth-child(7){transition-delay:0.36s}
.crds>*:nth-child(8),.doors>*:nth-child(8),.courses.catalog>.crs:nth-child(8),.stats>*:nth-child(8),.steps>*:nth-child(8){transition-delay:0.42s}

/* ── статистика: числа считаются вверх при появлении (chertezh.js),
   моноширинная замена — чтобы цифры при счёте не гуляли по ширине ── */
.st b{font-variant-numeric:tabular-nums}

/* ── плавное раскрытие вопросов: chertezh.js гонит max-height,
   здесь только сама переходная механика и стартовое состояние ── */
.qa-a{overflow:hidden;transition:max-height .35s cubic-bezier(.2,.7,.2,1)}

/* ── план квартиры: лёгкий наклон вслед за курсором, только там,
   где есть настоящая мышь — на тачскрине это не считывается ── */
@media(hover:hover) and (pointer:fine){
  .plan{transition:transform .25s ease-out;transform-style:preserve-3d;will-change:transform}
}

/* ══════════════════════════════════════════════════════════════
   КАЛЬКУЛЯТОР — колесо баланса. Геометрия секторов и разметка —
   от исходного инструмента, цвет и типографика сведены к «Чертежу»:
   вместо восьми ярких цветов один карандаш-красный на разную глубину.
   ══════════════════════════════════════════════════════════════ */
.wheel{display:block;width:100%;max-width:440px;margin:0 auto;overflow:visible}
.wheel .ring-seg{fill:none;stroke:var(--paper);stroke-width:2}
.wheel .triangle{fill:var(--red);opacity:.4;transition:opacity .3s}
.wheel-wrap:hover .triangle,.wheel-wrap:focus-within .triangle{opacity:.5}
.wheel text{fill:var(--paper)}  /* dim-2 проваливает контраст поверх закрашенного сектора */
.wheel textPath{font-family:'IBM Plex Mono',monospace;font-size:.46rem;
  letter-spacing:.03em;font-weight:400}
/* гравировка-циферблат: осевой крест, миллиметровые деления, завитки —
   притушены, чтобы не спорить с секторами и подписями */
.wheel .wheel-etch{opacity:.28}
.wheel .wheel-etch path{fill:var(--paper);stroke:var(--paper)}
/* цифры шкалы (1–10 на каждом луче) — отдельно от гравировки и заметно ярче,
   их и должно быть видно, в отличие от декоративных завитков вокруг */
.wheel .wheel-nums{opacity:1;fill:var(--paper)}
.wheel-wrap{padding:var(--s3);border:1px solid var(--line);background:var(--pan)}

/* строка-вопрос: номер, текст, шкала-«размерная линия» со значением */
.scale-q{padding-top:var(--s3);margin-top:var(--s3);border-top:1px solid rgba(126,151,172,.25)}
.scale-q:first-child{padding-top:0;margin-top:0;border-top:none}
.scale-q p{font-size:15px;opacity:.9;max-width:64ch}
.scale{display:flex;align-items:center;gap:var(--s3);margin-top:14px}
/* сам ползунок нарисован как размерная линия: тонкая полоса и красная «плашка» */
.scale input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;height:24px;background:transparent;cursor:pointer}
.scale input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:var(--dim);border-radius:0}
.scale input[type=range]::-moz-range-track{height:2px;background:var(--dim);border-radius:0}
.scale input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:4px;height:24px;margin-top:-11px;
  background:var(--red);border-radius:0;box-shadow:0 0 0 5px var(--blue)}
.scale input[type=range]::-moz-range-thumb{
  width:4px;height:24px;border:none;background:var(--red);border-radius:0;box-shadow:0 0 0 5px var(--blue)}
.scale-val{font-family:'IBM Plex Mono',monospace;font-size:1.1rem;color:var(--red);
  min-width:2.4ch;text-align:right;font-variant-numeric:tabular-nums}
.scale-minmax{display:flex;justify-content:space-between;margin-top:4px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--dim-2)}

.wheel-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);align-items:start}
@media(max-width:900px){.wheel-cols{grid-template-columns:1fr}}