.inst { gap: .8rem; }

.inst__app { display: flex; align-items: center; gap: .9rem; }
.inst__home { flex: none; display: grid; justify-items: center; gap: .25rem; }
.inst__icon { display: block; width: 4rem; height: 4rem; border-radius: 22%; box-shadow: 0 .25rem 0 var(--color-web-line-dark); animation: inst-drop var(--motion-slow) var(--motion-ease-back) both; }
.inst__name { font-size: .875rem; font-weight: 800; white-space: nowrap; }
.inst__say { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }

.inst__steps { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.inst__step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: .8rem; background: var(--color-web-mist); animation: inst-step var(--motion-base) var(--motion-ease-out) both; animation-delay: calc(var(--i, 0) * var(--motion-stagger) + var(--motion-fast)); }
.inst__num { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-web-blue); color: var(--color-web-paper); font-family: var(--font-display); font-size: 1.125rem; }
.inst__text { display: grid; gap: .1rem; min-width: 0; }
.inst__do { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.inst__hint { font-size: .875rem; line-height: 1.25; color: var(--color-web-muted); }
.inst__ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: var(--color-web-paper); color: var(--color-web-ink); }
.inst__ic .hub-icon { width: 1.4rem; height: 1.4rem; }

.inst__note { display: grid; gap: .55rem; padding: .7rem .8rem; border-radius: .8rem; background: var(--color-web-gold-pale); }
.inst__note p { margin: 0; font-size: .875rem; font-weight: 700; line-height: 1.3; }

@keyframes inst-drop { from { opacity: 0; transform: translateY(-1.5rem) scale(.6); } }
@keyframes inst-step { from { opacity: 0; transform: translateY(.6rem); } }