/* ============================================================
   /praktikum/ — практикум «HR Инструментарий»
   Тексты и структура сохранены из исходного лендинга,
   оформление переведено в общую «газетную» систему сайта.
   ============================================================ */

/* ---------------- ритм секций ---------------- */

.band-white{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-paper{border-top:1px solid var(--line)}
.band-dark{background:var(--dark);color:var(--dark-text)}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark .eyebrow{color:var(--dark-muted)}
.band-dark .lead{color:var(--dark-muted)}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:baseline;gap:14px;margin-bottom:18px;
}
.eyebrow .idx{margin-left:auto;color:var(--red);letter-spacing:.1em}
.lead{margin-top:20px;max-width:64ch;font-size:18px;color:var(--muted)}
.lead b{color:var(--ink);font-weight:600}
.band-dark .lead b{color:#fff}

/* ---------------- первый экран ---------------- */

.hero{padding:72px 0 56px}
.hero__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.hero__eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.hero__eyebrow b{color:var(--red);font-weight:500}
/* Ширина подобрана под длинный заголовок: при узком max-width он ломался
   на пять строк, и кнопка записи уезжала за нижний край первого экрана. */
.hero h1{font-size:clamp(29px,3.6vw,46px);max-width:24ch;text-wrap:balance}
.hero__lead{margin-top:24px;max-width:56ch;font-size:17.5px;color:var(--muted)}
.hero__by{margin-top:18px;max-width:52ch;font-size:15.5px;color:var(--muted)}
.hero__cta{margin-top:32px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero__note{font-size:14px;color:var(--muted);max-width:26ch}
.hero__note b{color:var(--ink);font-weight:600}
.hero__cap{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.stats{margin-top:48px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:20px 18px 4px;border-left:1px solid var(--line)}
.stat:first-child{border-left:none;padding-left:0}
.stat__n{font-family:var(--serif);font-size:32px;font-weight:700;line-height:1}
.stat__c{font-size:13.5px;color:var(--muted);margin-top:6px}

.dates{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;gap:28px;flex-wrap:wrap;font-size:15px;color:var(--muted);
}
.dates b{color:var(--ink);font-weight:600}

/* ---------------- бегущая строка ---------------- */

.ticker{background:var(--ink);color:#fff;overflow:hidden;padding:14px 0;white-space:nowrap}
.ticker__row{display:inline-flex;gap:0;will-change:transform}
.ticker__row span{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:0 26px;position:relative;color:#D6D8D3;
}
.ticker__row span::after{content:'·';position:absolute;right:-3px;color:var(--red)}

/* ---------------- калькулятор ---------------- */

.calc{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:40px;align-items:start}
.calc__controls{display:grid;gap:26px}
.ctrl__top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px}
.ctrl__label{font-size:15px;font-weight:600;color:#fff}
.ctrl__val{font-family:var(--mono);font-size:15px;color:var(--red);font-variant-numeric:tabular-nums}
.ctrl__hint{font-size:13px;color:var(--dark-muted);margin-top:9px;max-width:44ch}

.calc input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
  background:#33383E;outline:none;cursor:pointer;
}
.calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--red);border:3px solid var(--dark);cursor:grab;
  box-shadow:0 0 0 1px var(--red);
}
.calc input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--red);
  border:3px solid var(--dark);cursor:grab;box-shadow:0 0 0 1px var(--red);
}
.calc input[type=range]:focus-visible{outline:2px solid var(--red);outline-offset:6px}

.result{border:1px solid #2A2E33;border-radius:10px;padding:30px;background:#191C21}
.result__lab{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-muted)}
.result__big{font-family:var(--serif);font-size:clamp(34px,4.6vw,50px);font-weight:700;color:#fff;line-height:1.05;margin:10px 0 12px}
.result__sub{font-size:14.5px;color:var(--dark-muted);max-width:46ch}
.result__sub b{color:#fff}

.brk{margin-top:24px;border-top:1px solid #2A2E33}
.brk__row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #2A2E33;font-size:14.5px}
.brk__row b{font-family:var(--mono);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.brk__row--total{border-bottom:none;padding-top:14px}
.brk__row--total span{font-weight:600;color:#fff}
.brk__row--total b{color:var(--red);font-size:16px}

.calc__cta{margin-top:26px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.calc__cta p{font-size:14px;color:var(--dark-muted);max-width:38ch}

/* ---------------- автор ---------------- */

.author{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;margin-top:36px;align-items:start}
.acreds{list-style:none;margin-top:22px;border-top:1px solid var(--line)}
.acreds li{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.acreds b{font-family:var(--serif);font-size:22px;font-weight:700;flex:none;width:78px}
.acreds span{font-size:14.5px;color:var(--muted)}
.author__role{font-size:19px;font-weight:600;margin-bottom:18px}
.author__bio p{margin-bottom:15px;font-size:16.5px}
.author__honest{border-left:3px solid var(--red);padding-left:18px;color:var(--muted);font-size:15.5px}
.author__cta{display:inline-block;margin-top:10px;color:var(--red);font-weight:600;text-decoration:none}
.author__cta:hover{text-decoration:underline}
.photo-card--color img{filter:none}

/* «где перестраивал» — переворачивающиеся строки */
.mtab__h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:44px 0 16px}
.flips{display:grid;gap:8px}
.flip{
  border:none;background:none;padding:0;margin:0;font:inherit;color:inherit;
  display:block;width:100%;text-align:left;cursor:pointer;
  perspective:1000px;
}
/* Обе стороны лежат в одной ячейке грида, а не на position:absolute.
   Высота карточки тогда равна большей из сторон, и задняя не может
   вылезти за рамку на узком экране. */
.flip__in{
  display:grid;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.22,.68,.24,1);
  will-change:transform;
}
.flip__face{
  grid-area:1 / 1;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--line);border-left:3px solid var(--red);border-radius:6px;
  background:#fff;padding:18px 22px;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.flip__face--front b{font-size:16.5px;font-weight:600;flex:none;min-width:170px}
.flip__face--front em{font-style:normal;font-size:14.5px;color:var(--muted)}
.flip__face--back{
  transform:rotateX(180deg);
  background:var(--ink);border-color:var(--ink);border-left-color:var(--red);color:#fff;
}
.flip__face--back s{text-decoration:none;font-size:14.5px;color:#B9BBC0;flex:none;min-width:170px}
.flip__face--back strong{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--red)}

/* Нажатие работает везде, наведение — только там, где есть настоящая мышь.
   На телефоне :hover залипает после тапа и не даёт вернуть карточку обратно. */
.flip.on .flip__in{transform:rotateX(180deg)}
@media (hover:hover) and (pointer:fine){
  .flip:not(.on):hover .flip__in{transform:rotateX(180deg)}
}
.flip:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
.foot-note{margin-top:20px;font-size:13.5px;color:var(--muted);max-width:74ch}

/* ---------------- для кого ---------------- */

.whos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.whoc{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:28px 26px;display:flex;flex-direction:column}
.whoc--hi{background:var(--ink);color:#fff;border-color:var(--ink)}
.whoc__tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.whoc__q{font-family:var(--serif);font-size:19px;line-height:1.3;font-weight:600;flex:1}
.whoc__fix{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.whoc--hi .whoc__fix{border-top-color:#33383E}
.whoc__fix span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.whoc--hi .whoc__fix span{color:var(--dark-muted)}
.whoc__fix p{font-size:15px;color:var(--muted)}
.whoc--hi .whoc__fix p{color:var(--d-2,#C7CAC6)}

/* ---------------- программа ---------------- */

.steps-p{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px}
.step-p{border-top:2px solid var(--line);padding-top:18px;position:relative}
.step-p::after{content:'';position:absolute;top:-5px;left:0;width:10px;height:10px;border-radius:50%;background:var(--red)}
.step-p__t{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--red);text-transform:uppercase}
.step-p__n{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--line);line-height:1;margin:6px 0 8px}
.step-p h3{font-size:17.5px;margin-bottom:8px}
.step-p p{font-size:14.5px;color:var(--muted)}

.ctastrip{
  margin-top:44px;background:var(--ink);color:#fff;border-radius:10px;padding:32px 36px;
  display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.ctastrip h3{font-size:22px;color:#fff;margin-bottom:8px}
.ctastrip p{font-size:15px;color:#C7CAC6;max-width:56ch}

/* ---------------- воронка ---------------- */

.funnel{margin-top:36px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.frow{
  display:grid;grid-template-columns:1.6fr .5fr 3fr .6fr .9fr;gap:16px;align-items:center;
  padding:13px 22px;border-bottom:1px solid var(--line);font-size:15px;
}
.frow:last-child{border-bottom:none}
.frow--head{
  background:var(--paper);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.frow__name{font-weight:500}
.frow__n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.frow__bar{background:var(--line);height:9px;border-radius:5px;overflow:hidden}
.frow__bar i{
  display:block;height:100%;background:var(--ink);border-radius:5px;
  width:var(--w);transform:scaleX(0);transform-origin:left;
  transition:transform .8s cubic-bezier(.22,.68,.24,1);
}
.funnel.on .frow__bar i{transform:scaleX(1)}
.frow.hot .frow__bar i{background:var(--red)}
.frow.hot .frow__c{color:var(--red);font-weight:600}
.frow__c,.frow__norm{font-family:var(--mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.tnote{margin-top:22px;font-size:15px;color:var(--muted);max-width:78ch;border-left:3px solid var(--red);padding-left:18px}
.tnote b{color:var(--ink)}

/* ---------------- инструменты ---------------- */

.tools{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.tool{background:#fff;border:1px solid var(--line);border-radius:8px;padding:30px 30px 28px}
.tool--wide{grid-column:1 / -1;background:var(--paper);border-style:dashed}
.tool__lab{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.tool h3{font-size:21px;margin-bottom:14px}
.tool p{font-size:15.5px;color:var(--muted);margin-bottom:14px}

.mgroups{display:flex;gap:10px;margin:20px 0 14px}
.mgroup{
  flex:1;border:1px solid var(--line);border-radius:6px;padding:12px 14px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:var(--paper);
}
.mgroup span{font-size:13.5px;color:var(--muted)}
.mgroup b{font-family:var(--serif);font-size:20px;font-weight:700}
.mgrid{list-style:none;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.mgrid li{background:#fff;padding:11px 16px;font-size:14.5px;display:flex;gap:12px;align-items:baseline}
.mgrid li i{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--red);flex:none}
.mgrid__lock{background:var(--paper)!important;color:var(--muted);font-style:italic}
.lockbox{
  margin-top:18px;border:1px dashed var(--line);border-radius:6px;padding:16px 20px;
  display:flex;gap:14px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;background:var(--paper);
}
.lockbox span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.lockbox b{font-size:14.5px;font-weight:600}

/* ---------------- кому не подойдёт ---------------- */

.nofit{margin-top:36px}
.nofit ul{list-style:none;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.nofit li{background:#fff;padding:22px 26px;display:flex;gap:20px;align-items:flex-start}
.nofit li i{font-family:var(--mono);font-style:normal;font-size:12px;color:var(--red);flex:none;padding-top:3px}
.nofit b{display:block;font-size:16.5px;margin-bottom:5px}
.nofit span{font-size:15px;color:var(--muted)}
.nofit a.inlink{color:var(--red);font-weight:600}

/* ---------------- вопросы ---------------- */

.faq-p{margin-top:36px}
.faq-p details{border-bottom:1px solid var(--line)}
.faq-p summary{
  cursor:pointer;padding:20px 0;font-weight:600;font-size:17px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.faq-p summary::-webkit-details-marker{display:none}
.faq-p summary::after{content:'+';font-family:var(--serif);font-size:26px;color:var(--red);flex:none;transition:transform .2s}
.faq-p details[open] summary::after{transform:rotate(45deg)}
.faq-p details p{padding:0 0 22px;color:var(--muted);max-width:68ch}
.faq-p a{color:var(--red)}

/* ---------------- регистрация ---------------- */

.reg{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:36px;align-items:start}
.reg__date{
  display:inline-block;background:var(--red-soft);border:1px solid var(--red-line);
  border-radius:100px;padding:8px 18px;font-size:14.5px;margin-bottom:20px;color:var(--ink);
}
.flow{margin:26px 0 0 0;padding:0;list-style:none;counter-reset:f}
.flow li{
  counter-increment:f;position:relative;padding:0 0 18px 44px;font-size:15.5px;color:var(--muted);
}
.flow li::before{
  content:counter(f);position:absolute;left:0;top:-2px;
  width:28px;height:28px;border-radius:50%;border:1.5px solid var(--red);color:var(--red);
  font-family:var(--mono);font-size:12px;display:flex;align-items:center;justify-content:center;
}
.contacts{margin-top:26px;border-top:1px solid var(--line)}
.contacts a{
  display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.contacts a:hover b{color:var(--red)}
.contacts span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contacts b{font-weight:600}

.formbox{background:var(--dark);color:var(--dark-text);border-radius:10px;padding:32px}
.formbox h3{font-size:22px;color:#fff;margin-bottom:8px}
.formbox__sub{font-size:14.5px;color:var(--dark-muted);margin-bottom:24px}
.formbox .field{color:var(--dark-text)}
.formbox .field input,.formbox .field select{background:#111417;border-color:#33383E;color:var(--dark-text)}
.formbox .agree{color:var(--dark-muted);margin-top:4px}
.formbox .agree a{color:#fff}
.formbox .btn{width:100%;text-align:center;margin-top:18px}
.formbox__after{margin-top:14px;font-size:13px;color:var(--dark-muted);text-align:center}
#role-other-wrap{display:none;margin-top:10px}
#role-other-wrap.on{display:block}
.formdone{display:none}
.formdone.on{display:block}
.formdone h3{margin-bottom:12px}
.formdone p{font-size:15.5px;color:var(--dark-muted);margin-bottom:20px}

/* ---------------- телефон ---------------- */

@media(max-width:960px){
  .hero__grid{grid-template-columns:1fr;gap:34px}
  .hero__photo{max-width:380px}
  .calc,.author,.reg{grid-template-columns:1fr;gap:32px}
  .whos,.tools{grid-template-columns:1fr}
  .steps-p{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .hero{padding:44px 0 40px}
  .hero__lead{font-size:16.5px;margin-top:20px}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding-left:0;border-left:none;border-top:1px solid var(--line)}
  .stat:nth-child(2){border-left:1px solid var(--line);padding-left:18px}
  .stat:nth-child(4){border-left:1px solid var(--line);padding-left:18px}
  .steps-p{grid-template-columns:1fr}
  .mgroups{flex-direction:column}
  .frow{grid-template-columns:1.4fr .6fr 1fr;gap:10px;padding:12px 16px;font-size:14px}
  .frow__bar{display:none}
  .frow--head div:nth-child(3),.frow--head div:nth-child(5){display:none}
  .frow__norm{display:none}
  .flip__face{flex-direction:column;align-items:flex-start;gap:6px;justify-content:center}
  .flip__face--front b,.flip__face--back s{min-width:0}
  .formbox,.tool{padding:24px 20px}
  .ctastrip{padding:26px 22px}
}