/* v28 · компьютер (.d): герой в две колонки (кинетика + крутящаяся платівка с эквалайзером),
   ниже сет-лист слева двумя сторонами, липкая сцена справа на высоту окна. */
.d .top { padding: 12px 32px; }
.d .hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center;
  max-width: 1320px; margin: 0 auto; padding: 56px 32px 40px; }
.d .kin { font-size: clamp(56px, 7.2vw, 112px); margin: 10px 0 0; }
.d .lead { font-size: 19px; max-width: 54ch; margin: 18px 0 24px; }
.d .note { margin-top: 18px; }
.d .hero-art { min-height: 360px; }
.d .tick-line span { font-size: 22px; }
.d .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 40px;
  max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.d .sec { padding-top: 48px; }
.d .sides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.d .viewer { position: sticky; top: 76px; align-self: start; height: calc(100vh - 92px); margin-top: 48px;
  border-radius: 24px; padding: 16px; overflow: hidden; }
.d .stage { flex: 0 0 auto; height: min(46vh, 420px); min-height: 240px; }
.d .v-body { flex: 0 1 auto; overflow-y: auto; padding-right: 4px; }
.d .steps { grid-template-columns: repeat(3, 1fr); }
.d .step { padding: 60px 16px 16px; }
.d .fair { grid-template-columns: 1fr 1fr; }
.d .foot { max-width: 1320px; margin-inline: auto; padding-inline: 32px; margin-top: 56px; }