/* v31 — компьютер (≥ 768): постер во всю ширину, комната дропа — подиум слева (липкий),
   шаги справа столбцом; страхи — три колонки. */
main { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.hero { padding: 64px 0 56px; }
.hero > :not(.hero-line) { max-width: 58%; position: relative; z-index: 1; }
.hero-h { max-width: none !important; }
.hero-line { position: absolute; right: 0; top: 30px; width: 40%; height: 470px; }
.hl { position: absolute; width: 150px; top: calc(10px + var(--i) * 64px); left: calc(var(--i) * 17%);
  transform: rotate(calc((var(--i) - 2) * 5deg)); animation: hlin .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.3s + var(--i) * .09s); }
@keyframes hlin { from { opacity: 0; transform: translateY(40px) rotate(0); } }
.hero-h { font-size: clamp(84px, 11.5vw, 172px); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .22em; }
.hero-h .mask:last-child { flex-basis: 100%; }
.hero-h .mask:last-child { font-size: .42em; margin-top: .12em; }
.hero-lead { font-size: 19px; margin: 18px 0 0; }

.drop { padding: 24px 0 40px; }
.drop .sec-h { font-size: 44px; }
.room { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, 1fr); gap: 32px; align-items: start; }
.view { position: sticky; top: 64px; }
.stage { height: min(58vh, 560px); }
.shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.card { padding: 8px; }
.add { margin: 0 8px 8px; }
.tag { font-size: 9.5px; padding: 5px 6px 5px 13px; }

.dots, .nav { display: none; }
.track { display: flex; flex-direction: column; gap: 14px; }
.step { border: 1px solid var(--line); border-radius: var(--rad); padding: 18px; background: var(--card); }
#st-kp { border-color: var(--fg); }

.fears { padding: 40px 0; }
.fears .sec-h { font-size: 36px; }
.fear-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fear-nav { display: none; }
.foot { padding: 24px 0 48px; }
.kpbar { display: none; }
.sheet-in { padding: 24px; }